{"version":3,"file":"tour-parts.cjs","sources":["../../../components/tour/tour-parts.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { XIcon } from '~/icons';\nimport { Button } from '../button';\nimport { Flex } from '../flex';\nimport { IconButton } from '../icon-button';\nimport { Text } from '../text';\nimport styles from './tour.module.css';\nimport { useTourContext } from './tour-context';\n\nexport function TourTitle({\n  className,\n  children,\n  ...props\n}: PopoverPrimitive.Title.Props) {\n  const { step } = useTourContext('Tour.Title');\n  const content = children ?? step?.title;\n  if (content == null) return null;\n  return (\n    <PopoverPrimitive.Title\n      data-slot='tour-title'\n      className={cx(styles.title, className)}\n      {...props}\n    >\n      {content}\n    </PopoverPrimitive.Title>\n  );\n}\nTourTitle.displayName = 'Tour.Title';\n\nexport function TourDescription({\n  className,\n  children,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  const { step } = useTourContext('Tour.Description');\n  const content = children ?? step?.content;\n  if (content == null) return null;\n  return (\n    <PopoverPrimitive.Description\n      data-slot='tour-description'\n      className={cx(styles.description, className)}\n      {...props}\n    >\n      {content}\n    </PopoverPrimitive.Description>\n  );\n}\nTourDescription.displayName = 'Tour.Description';\n\nexport interface TourProgressProps extends ComponentProps<typeof Text> {\n  /** Custom formatter, e.g. show \"2/5\" instead of \"2 of 5\". */\n  format?: (index: number, total: number) => ReactNode;\n}\n\nexport function TourProgress({ format, ...props }: TourProgressProps) {\n  const { index, steps } = useTourContext('Tour.Progress');\n  return (\n    <Text\n      data-slot='tour-progress'\n      size='mini'\n      weight='medium'\n      variant='secondary'\n      style={{ fontVariantNumeric: 'tabular-nums' }}\n      {...props}\n    >\n      {format ? format(index, steps.length) : `${index + 1} of ${steps.length}`}\n    </Text>\n  );\n}\nTourProgress.displayName = 'Tour.Progress';\n\nexport function TourNext({\n  children,\n  onClick,\n  ...props\n}: ComponentProps<typeof Button>) {\n  const { actions, index, steps } = useTourContext('Tour.Next');\n  const isLastStep = index >= steps.length - 1;\n  return (\n    <Button\n      data-slot='tour-next'\n      size='small'\n      {...props}\n      onClick={event => {\n        onClick?.(event);\n        if (!event.defaultPrevented) actions.next();\n      }}\n    >\n      {children ?? (isLastStep ? 'Finish' : 'Next')}\n    </Button>\n  );\n}\nTourNext.displayName = 'Tour.Next';\n\nexport function TourPrev({\n  children,\n  onClick,\n  ...props\n}: ComponentProps<typeof Button>) {\n  const { actions } = useTourContext('Tour.Prev');\n  return (\n    <Button\n      data-slot='tour-prev'\n      size='small'\n      variant='outline'\n      color='neutral'\n      {...props}\n      onClick={event => {\n        onClick?.(event);\n        if (!event.defaultPrevented) actions.prev();\n      }}\n    >\n      {children ?? 'Back'}\n    </Button>\n  );\n}\nTourPrev.displayName = 'Tour.Prev';\n\nexport function TourSkip({\n  children,\n  onClick,\n  ...props\n}: ComponentProps<typeof Button>) {\n  const { actions } = useTourContext('Tour.Skip');\n  return (\n    <Button\n      data-slot='tour-skip'\n      size='small'\n      variant='text'\n      color='neutral'\n      {...props}\n      onClick={event => {\n        onClick?.(event);\n        if (!event.defaultPrevented) actions.skip();\n      }}\n    >\n      {children ?? 'Skip'}\n    </Button>\n  );\n}\nTourSkip.displayName = 'Tour.Skip';\n\nexport function TourClose({\n  onClick,\n  children,\n  ...props\n}: ComponentProps<typeof IconButton>) {\n  const { actions } = useTourContext('Tour.Close');\n  return (\n    <IconButton\n      data-slot='tour-close'\n      size={3}\n      aria-label='Close tour'\n      {...props}\n      onClick={event => {\n        onClick?.(event);\n        if (!event.defaultPrevented) actions.stop();\n      }}\n    >\n      {children ?? <XIcon aria-hidden='true' />}\n    </IconButton>\n  );\n}\nTourClose.displayName = 'Tour.Close';\n\nexport function TourDefaultLayout() {\n  const { index } = useTourContext('Tour.Content');\n  return (\n    <>\n      <Flex justify='between' align='start' gap={3}>\n        <TourTitle />\n        <TourClose />\n      </Flex>\n      <TourDescription />\n      <Flex justify='between' align='center' gap={3} className={styles.footer}>\n        <TourProgress />\n        <Flex gap={3} align='center'>\n          {index > 0 && <TourPrev />}\n          <TourNext />\n        </Flex>\n      </Flex>\n    </>\n  );\n}\nTourDefaultLayout.displayName = 'Tour.DefaultLayout';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaM;;AAMJ;;AACqB;;AAUvB;AACA;AAEM;;AAMJ;;AACqB;;AAUvB;AACA;AAOM;;;AAcN;AACA;AAEM;AAKJ;;AAEA;AAMM;;;AAEF;AAKN;AACA;AAEM;;;AAcE;;;AAEF;AAKN;AACA;AAEM;;;AAcE;;;AAEF;AAKN;AACA;AAEM;;AAMJ;AAOM;;;;AAOR;AACA;;;AAIE;AAgBF;AACA;;;;;;;;;"}