@spark-ui/components 17.4.2 → 17.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +8 -2
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button-B-sMnDc_.js.map +1 -1
- package/dist/button-C6nlNPdv.mjs.map +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox-DjwbAH09.js.map +1 -1
- package/dist/checkbox-xsURzANi.mjs.map +1 -1
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs.map +1 -1
- package/dist/circular-meter/index.js.map +1 -1
- package/dist/circular-meter/index.mjs.map +1 -1
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/divider/index.js.map +1 -1
- package/dist/divider/index.mjs.map +1 -1
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/form-field-81wzFxM0.js.map +1 -1
- package/dist/form-field-GTAuK_nO.mjs.map +1 -1
- package/dist/icon-CRPcdgYp.js.map +1 -1
- package/dist/icon-D05Uqh8_.mjs.map +1 -1
- package/dist/icon-button-CYz_Fitz.js.map +1 -1
- package/dist/icon-button-DpucUC_L.mjs.map +1 -1
- package/dist/input-BUSYZ_VO.js.map +1 -1
- package/dist/input-CiWFuTs_.mjs.map +1 -1
- package/dist/input-otp/index.js.map +1 -1
- package/dist/input-otp/index.mjs.map +1 -1
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/label-BCSEss4U.js.map +1 -1
- package/dist/label-DDBRKLUX.mjs.map +1 -1
- package/dist/link-box/index.js.map +1 -1
- package/dist/link-box/index.mjs.map +1 -1
- package/dist/meter/index.js.map +1 -1
- package/dist/meter/index.mjs.map +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover-CrKp_TKk.js.map +1 -1
- package/dist/popover-DsBY8eYl.mjs.map +1 -1
- package/dist/portal/index.js.map +1 -1
- package/dist/portal/index.mjs.map +1 -1
- package/dist/progress-BjqJSRnK.js.map +1 -1
- package/dist/progress-C3w4PmxY.mjs.map +1 -1
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/index.js.map +1 -1
- package/dist/rating/index.mjs.map +1 -1
- package/dist/rating-display/index.js.map +1 -1
- package/dist/rating-display/index.mjs.map +1 -1
- package/dist/scrolling-list/index.js.map +1 -1
- package/dist/scrolling-list/index.mjs.map +1 -1
- package/dist/segmented-control/index.js.map +1 -1
- package/dist/segmented-control/index.mjs.map +1 -1
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs.map +1 -1
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs.map +1 -1
- package/dist/slot/index.js.map +1 -1
- package/dist/slot/index.mjs.map +1 -1
- package/dist/spinner-DFUoYvmm.js.map +1 -1
- package/dist/spinner-DULLiM6a.mjs.map +1 -1
- package/dist/src/accordion/index.d.mts +3 -0
- package/dist/src/accordion/index.d.ts +3 -0
- package/dist/src/alert-dialog/index.d.mts +3 -0
- package/dist/src/alert-dialog/index.d.ts +3 -0
- package/dist/src/avatar/index.d.mts +7 -5
- package/dist/src/avatar/index.d.ts +7 -5
- package/dist/src/badge/Badge.d.ts +3 -0
- package/dist/src/breadcrumb/index.d.mts +3 -0
- package/dist/src/breadcrumb/index.d.ts +3 -0
- package/dist/src/button/Button.d.ts +3 -0
- package/dist/src/card/index.d.mts +3 -0
- package/dist/src/card/index.d.ts +3 -0
- package/dist/src/carousel/index.d.mts +3 -0
- package/dist/src/carousel/index.d.ts +3 -0
- package/dist/src/checkbox/Checkbox.d.ts +3 -0
- package/dist/src/checkbox/CheckboxGroup.d.ts +4 -0
- package/dist/src/chip/index.d.mts +3 -0
- package/dist/src/chip/index.d.ts +3 -0
- package/dist/src/circular-meter/index.d.mts +3 -0
- package/dist/src/circular-meter/index.d.ts +3 -0
- package/dist/src/collapsible/index.d.mts +3 -0
- package/dist/src/collapsible/index.d.ts +3 -0
- package/dist/src/combobox/index.d.mts +3 -0
- package/dist/src/combobox/index.d.ts +3 -0
- package/dist/src/dialog/index.d.mts +3 -0
- package/dist/src/dialog/index.d.ts +3 -0
- package/dist/src/divider/index.d.mts +3 -0
- package/dist/src/divider/index.d.ts +3 -0
- package/dist/src/drawer/index.d.mts +3 -0
- package/dist/src/drawer/index.d.ts +3 -0
- package/dist/src/dropdown/index.d.mts +3 -0
- package/dist/src/dropdown/index.d.ts +3 -0
- package/dist/src/file-upload/index.d.mts +3 -0
- package/dist/src/file-upload/index.d.ts +3 -0
- package/dist/src/form-field/index.d.mts +3 -0
- package/dist/src/form-field/index.d.ts +3 -0
- package/dist/src/icon/Icon.d.ts +3 -0
- package/dist/src/icon-button/IconButton.d.ts +3 -0
- package/dist/src/input/Input.d.ts +3 -0
- package/dist/src/input/index.d.mts +4 -0
- package/dist/src/input/index.d.ts +4 -0
- package/dist/src/input-otp/index.d.mts +3 -0
- package/dist/src/input-otp/index.d.ts +3 -0
- package/dist/src/kbd/Kbd.d.ts +3 -0
- package/dist/src/label/index.d.mts +3 -0
- package/dist/src/label/index.d.ts +3 -0
- package/dist/src/link-box/index.d.mts +3 -0
- package/dist/src/link-box/index.d.ts +3 -0
- package/dist/src/meter/index.d.mts +3 -0
- package/dist/src/meter/index.d.ts +3 -0
- package/dist/src/pagination/index.d.mts +3 -0
- package/dist/src/pagination/index.d.ts +3 -0
- package/dist/src/popover/index.d.mts +3 -0
- package/dist/src/popover/index.d.ts +3 -0
- package/dist/src/portal/Portal.d.ts +3 -0
- package/dist/src/progress/index.d.mts +3 -0
- package/dist/src/progress/index.d.ts +3 -0
- package/dist/src/progress-tracker/index.d.mts +3 -0
- package/dist/src/progress-tracker/index.d.ts +3 -0
- package/dist/src/radio-group/index.d.mts +3 -0
- package/dist/src/radio-group/index.d.ts +3 -0
- package/dist/src/rating/Rating.d.ts +3 -0
- package/dist/src/rating-display/index.d.mts +3 -0
- package/dist/src/rating-display/index.d.ts +3 -0
- package/dist/src/scrolling-list/index.d.mts +3 -0
- package/dist/src/scrolling-list/index.d.ts +3 -0
- package/dist/src/segmented-control/index.d.mts +3 -0
- package/dist/src/segmented-control/index.d.ts +3 -0
- package/dist/src/segmented-gauge/index.d.mts +3 -0
- package/dist/src/segmented-gauge/index.d.ts +3 -0
- package/dist/src/select/index.d.mts +3 -0
- package/dist/src/select/index.d.ts +3 -0
- package/dist/src/skeleton/index.d.mts +3 -0
- package/dist/src/skeleton/index.d.ts +3 -0
- package/dist/src/slider/index.d.mts +3 -0
- package/dist/src/slider/index.d.ts +3 -0
- package/dist/src/slot/Slot.d.ts +4 -0
- package/dist/src/spinner/Spinner.d.ts +3 -0
- package/dist/src/stepper/index.d.mts +3 -0
- package/dist/src/stepper/index.d.ts +3 -0
- package/dist/src/switch/Switch.d.ts +3 -0
- package/dist/src/table/index.d.mts +6 -2
- package/dist/src/table/index.d.ts +6 -2
- package/dist/src/table/internal/TableRootWrapper.d.ts +3 -0
- package/dist/src/tabs/index.d.mts +3 -0
- package/dist/src/tabs/index.d.ts +3 -0
- package/dist/src/tag/Tag.d.ts +3 -0
- package/dist/src/text-link/TextLink.d.ts +3 -0
- package/dist/src/textarea/Textarea.d.ts +3 -0
- package/dist/src/textarea/index.d.mts +4 -0
- package/dist/src/textarea/index.d.ts +4 -0
- package/dist/src/toast/index.d.mts +3 -0
- package/dist/src/toast/index.d.ts +3 -0
- package/dist/src/visually-hidden/VisuallyHidden.d.ts +3 -0
- package/dist/stepper/index.js.map +1 -1
- package/dist/stepper/index.mjs.map +1 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +1 -1
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs.map +1 -1
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs.map +1 -1
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs.map +1 -1
- package/dist/visually-hidden/index.js.map +1 -1
- package/dist/visually-hidden/index.mjs.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/pagination/utils.ts","../../src/pagination/PaginationContext.tsx","../../src/pagination/Pagination.tsx","../../src/pagination/PaginationEllipsis.tsx","../../src/pagination/PaginationFirstPageTrigger.tsx","../../src/pagination/PaginationItem.tsx","../../src/pagination/PaginationLastPageTrigger.tsx","../../src/pagination/PaginationNextTrigger.tsx","../../src/pagination/PaginationPages.tsx","../../src/pagination/PaginationPrevTrigger.tsx","../../src/pagination/index.ts"],"sourcesContent":["export function sliceArrayWithIndex(arr: any[], index: number, length: number) {\n const relativeElements = (length - 1) / 2\n\n let start = Math.max(0, index - relativeElements)\n let end = Math.min(arr.length, index + relativeElements + 1)\n\n if (end - start < length) {\n start = Math.max(0, Math.min(start, arr.length - length))\n end = Math.min(arr.length, start + length)\n }\n\n return arr.slice(start, end)\n}\n","import * as pagination from '@zag-js/pagination'\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { createContext, type ReactNode, useContext, useId } from 'react'\n\nimport { sliceArrayWithIndex } from './utils'\n\nexport interface PaginationContextState<T extends PropTypes = PropTypes> {\n type: pagination.Props['type']\n pagination: pagination.Api<T> & {\n getFirstPageTriggerProps: () => ReturnType<pagination.Api<T>['getPrevTriggerProps']> & {\n 'data-part': string\n onClick: () => void\n }\n getLastPageTriggerProps: () => ReturnType<pagination.Api<T>['getNextTriggerProps']> & {\n 'data-part': string\n onClick: () => void\n }\n }\n}\n\nconst PaginationContext = createContext<PaginationContextState | null>(null)\n\nexport interface PaginationProviderProps {\n children: ReactNode\n /**\n * Total number of data items available across all pages.\n */\n count: number\n /**\n * Maximum amount of items displayed on a single page.\n */\n pageSize: number\n /**\n * Number of visible pages (or ellipsis) between previous and next page triggers.\n */\n visiblePageItems?: number\n /**\n * The current page (active page)\n */\n page?: pagination.Props['page']\n /**\n * If your pagination contains buttons instead of links, set `type` to `button`, extra attributes will be applied on page items for a11y.\n */\n type?: pagination.Props['type']\n onPageChange?: pagination.Props['onPageChange']\n noEllipsis?: boolean\n}\n\nexport const PaginationProvider = ({\n children,\n count,\n visiblePageItems = 7,\n pageSize,\n page,\n onPageChange,\n noEllipsis,\n type = 'link',\n}: PaginationProviderProps) => {\n /**\n * Here `Infinity` is used because we apply a custom slice ourselves to manage the \"no ellipsis\" version.\n * It means Zag won't filter out any page item, allowing us to apply our own slicing logic.\n */\n const siblingCount = noEllipsis ? Infinity : Math.max(0, Math.floor((visiblePageItems - 5) / 2))\n\n const id = useId()\n\n const service = useMachine(pagination.machine, {\n id,\n count,\n siblingCount,\n pageSize,\n page,\n onPageChange,\n type,\n })\n\n const api = pagination.connect(service, normalizeProps)\n const pages = noEllipsis\n ? sliceArrayWithIndex(api.pages, api.page - 1, visiblePageItems)\n : api.pages\n\n return (\n <PaginationContext.Provider\n value={{\n type,\n pagination: {\n ...api,\n pages,\n // Extending ZagJS anatomy\n getFirstPageTriggerProps: () => {\n return {\n ...api.getPrevTriggerProps(),\n id: `${api.getRootProps().id}:first`,\n 'data-part': 'first-page-trigger',\n onClick: api.goToFirstPage,\n }\n },\n getLastPageTriggerProps: () => {\n return {\n ...api.getNextTriggerProps(),\n id: `${api.getRootProps().id}:last`,\n 'data-part': 'last-page-trigger',\n onClick: api.goToLastPage,\n }\n },\n },\n }}\n >\n {children}\n </PaginationContext.Provider>\n )\n}\n\nexport const usePagination = () => {\n const context = useContext(PaginationContext)\n\n if (!context) {\n throw Error('usePagination must be used within a Pagination provider')\n }\n\n return context\n}\n","import { ReactNode } from 'react'\n\nimport {\n PaginationProvider,\n type PaginationProviderProps,\n usePagination,\n} from './PaginationContext'\n\nexport type PaginationProps = PaginationProviderProps & { className?: string }\n\nexport const Pagination = ({\n children,\n visiblePageItems = 5,\n type = 'link',\n noEllipsis = false,\n className,\n ...rest\n}: PaginationProps) => {\n return (\n <PaginationProvider\n visiblePageItems={visiblePageItems}\n noEllipsis={noEllipsis}\n type={type}\n {...rest}\n >\n <PaginationWrapper className={className}>{children}</PaginationWrapper>\n </PaginationProvider>\n )\n}\n\nconst PaginationWrapper = ({\n children,\n className,\n}: {\n children: ReactNode\n className?: string\n}) => {\n const { pagination } = usePagination()\n\n const props = pagination.getRootProps()\n\n return (\n <nav data-spark-component=\"pagination\" {...props} className={className}>\n <ul className=\"gap-md flex flex-wrap\">{children}</ul>\n </nav>\n )\n}\n\nPagination.displayName = 'Pagination'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\ninterface EllipsisProps extends ComponentPropsWithRef<'span'> {\n index: number\n}\n\nexport const Ellipsis = ({ children, index, className, ref, ...rest }: EllipsisProps) => {\n const { pagination } = usePagination()\n const apiProps = pagination.getEllipsisProps({ index })\n const localProps = {\n className: cx('flex size-sz-44 items-center justify-center', className),\n ...rest,\n }\n\n const mergedProps = mergeProps(apiProps, localProps)\n\n return (\n <li>\n <span data-spark-component=\"pagination-ellipsis\" ref={ref} {...mergedProps}>\n {children || '\\u2026'}\n </span>\n </li>\n )\n}\n\nEllipsis.displayName = 'Pagination.Ellipsis'\n","import { ArrowDoubleLeft } from '@spark-ui/icons/ArrowDoubleLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type FirstPageTriggerProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const FirstPageTrigger = ({\n children,\n className,\n href,\n ref,\n ...props\n}: FirstPageTriggerProps) => {\n const { pagination, type } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getFirstPageTriggerProps()\n\n const shouldDisableLink =\n type === 'link' &&\n (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-first-page-trigger',\n intent: 'support',\n design: 'contrast',\n ...props,\n className,\n ...(shouldDisableLink && {\n disabled: true,\n role: 'link',\n 'aria-disabled': true,\n }),\n }\n\n // We know 'aria-label' is included in props\n type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n const mergedProps = mergeProps(\n apiProps,\n localProps as unknown as typeof apiProps\n ) as WithAriaLabel\n\n const content = children || (\n <Icon>\n <ArrowDoubleLeft />\n </Icon>\n )\n\n return (\n <li>\n {href ? (\n <IconButton ref={ref} {...mergedProps} asChild>\n <a href={shouldDisableLink ? undefined : href}>{content}</a>\n </IconButton>\n ) : (\n <IconButton ref={ref} {...mergedProps}>\n {content}\n </IconButton>\n )}\n </li>\n )\n}\n\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactElement, Ref } from 'react'\n\nimport { Button } from '../button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type ItemProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n value: number\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A numbered page item.\n * Should be used within `Pagination.Pages` to ensure proper functionality and accessibility.\n *\n * Can be rendered as an anchor or a button :\n * - Set a `href` prop to render the item as an anchor element.\n * - When using `href`, the `asChild` prop isn’t available since the component will already be rendered as an anchor element.\n */\nexport function Item({ children, value, className, href, ref, ...props }: ItemProps): ReactElement {\n const { pagination } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getItemProps({ type: 'page', value })\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-item',\n intent: 'support',\n design: apiProps['aria-current'] === 'page' ? 'filled' : 'contrast',\n className: cx('size-sz-44', className),\n ...props,\n }\n\n const mergedProps = mergeProps(apiProps, localProps)\n\n return (\n <li>\n {href ? (\n <Button ref={ref} {...mergedProps} asChild>\n <a href={href}>{children || value}</a>\n </Button>\n ) : (\n <Button ref={ref} {...mergedProps}>\n {children || value}\n </Button>\n )}\n </li>\n )\n}\n\nItem.displayName = 'Pagination.Item'\n","import { ArrowDoubleRight } from '@spark-ui/icons/ArrowDoubleRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type LastPageTriggerProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const LastPageTrigger = ({\n children,\n className,\n href,\n ref,\n ...props\n}: LastPageTriggerProps) => {\n const { pagination, type } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getLastPageTriggerProps()\n\n const shouldDisableLink =\n type === 'link' &&\n (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-last-page-trigger',\n intent: 'support',\n design: 'contrast',\n ...props,\n className,\n ...(shouldDisableLink && {\n disabled: true,\n role: 'link',\n 'aria-disabled': true,\n }),\n }\n\n // We know 'aria-label' is included in props\n type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n const mergedProps = mergeProps(\n apiProps,\n localProps as unknown as typeof apiProps\n ) as WithAriaLabel\n\n const content = children || (\n <Icon>\n <ArrowDoubleRight />\n </Icon>\n )\n\n return (\n <li>\n {href ? (\n <IconButton ref={ref} {...mergedProps} asChild>\n <a href={shouldDisableLink ? undefined : href}>{content}</a>\n </IconButton>\n ) : (\n <IconButton ref={ref} {...mergedProps}>\n {content}\n </IconButton>\n )}\n </li>\n )\n}\n\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type NextTriggerProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const NextTrigger = ({ children, className, href, ref, ...props }: NextTriggerProps) => {\n const { pagination, type } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getNextTriggerProps()\n\n const shouldDisableLink =\n type === 'link' &&\n (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-next-trigger',\n intent: 'support',\n design: 'contrast',\n ...props,\n className,\n ...(shouldDisableLink && {\n disabled: true,\n role: 'link',\n 'aria-disabled': true,\n }),\n }\n\n // We know 'aria-label' is included in props\n type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n const mergedProps = mergeProps(\n apiProps,\n localProps as unknown as typeof apiProps\n ) as WithAriaLabel\n\n const content = children || (\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n )\n\n return (\n <li>\n {href ? (\n <IconButton ref={ref} {...mergedProps} asChild>\n <a href={shouldDisableLink ? undefined : href}>{content}</a>\n </IconButton>\n ) : (\n <IconButton ref={ref} {...mergedProps}>\n {content}\n </IconButton>\n )}\n </li>\n )\n}\n\nNextTrigger.displayName = 'Pagination.NextTrigger'\n","import * as pagination from '@zag-js/pagination'\nimport { ReactNode } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\n// Extract the 'page' type element from the pagination API's 'pages' array.\ntype PageItem = Extract<pagination.Api['pages'][number], { type: 'page' }>\n\n// Define a type that conditionally tweaks the pagination API\n// based on the generic T parameter.\ntype TweakedPaginationApi<T extends 'noEllipsis' | ''> = Omit<pagination.Api, 'pages'> & {\n pages: T extends 'noEllipsis' ? PageItem[] : pagination.Api['pages']\n}\n\ninterface PagesProps<T extends 'noEllipsis' | ''> {\n children: (pagination: TweakedPaginationApi<T>) => ReactNode\n}\n\nexport const Pages = <T extends 'noEllipsis' | '' = ''>({ children }: PagesProps<T>) => {\n const { pagination } = usePagination()\n\n return children(pagination as TweakedPaginationApi<T>)\n}\n\nPages.displayName = 'Pagination.Pages'\n","import { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type PrevTriggerProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const PrevTrigger = ({ children, className, href, ref, ...props }: PrevTriggerProps) => {\n const { pagination, type } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getPrevTriggerProps()\n\n const shouldDisableLink =\n type === 'link' &&\n (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-prev-trigger',\n intent: 'support',\n design: 'contrast',\n ...props,\n className,\n ...(shouldDisableLink && {\n disabled: true,\n role: 'link',\n 'aria-disabled': true,\n }),\n }\n\n // We know 'aria-label' is included in props\n type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n const mergedProps = mergeProps(\n apiProps,\n localProps as unknown as typeof apiProps\n ) as WithAriaLabel\n\n const content = children || (\n <Icon>\n <ArrowVerticalLeft />\n </Icon>\n )\n\n return (\n <li>\n {href ? (\n <IconButton ref={ref} {...mergedProps} asChild>\n <a href={shouldDisableLink ? undefined : href}>{content}</a>\n </IconButton>\n ) : (\n <IconButton ref={ref} {...mergedProps}>\n {content}\n </IconButton>\n )}\n </li>\n )\n}\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\n","import type { FC } from 'react'\n\nimport { Pagination as Root, type PaginationProps } from './Pagination'\nimport { Ellipsis } from './PaginationEllipsis'\nimport { FirstPageTrigger } from './PaginationFirstPageTrigger'\nimport { Item } from './PaginationItem'\nimport { LastPageTrigger } from './PaginationLastPageTrigger'\nimport { NextTrigger } from './PaginationNextTrigger'\nimport { Pages } from './PaginationPages'\nimport { PrevTrigger } from './PaginationPrevTrigger'\n\nexport const Pagination: FC<PaginationProps> & {\n PrevTrigger: typeof PrevTrigger\n NextTrigger: typeof NextTrigger\n Pages: typeof Pages\n Item: typeof Item\n Ellipsis: typeof Ellipsis\n FirstPageTrigger: typeof FirstPageTrigger\n LastPageTrigger: typeof LastPageTrigger\n} = Object.assign(Root, {\n PrevTrigger,\n NextTrigger,\n Pages,\n Item,\n Ellipsis,\n FirstPageTrigger,\n LastPageTrigger,\n})\n\nPagination.displayName = 'Pagination'\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\nNextTrigger.displayName = 'Pagination.NextTrigger'\nPages.displayName = 'Pagination.Pages'\nItem.displayName = 'Pagination.Item'\nEllipsis.displayName = 'Pagination.Ellipsis'\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/pagination/utils.ts","../../src/pagination/PaginationContext.tsx","../../src/pagination/Pagination.tsx","../../src/pagination/PaginationEllipsis.tsx","../../src/pagination/PaginationFirstPageTrigger.tsx","../../src/pagination/PaginationItem.tsx","../../src/pagination/PaginationLastPageTrigger.tsx","../../src/pagination/PaginationNextTrigger.tsx","../../src/pagination/PaginationPages.tsx","../../src/pagination/PaginationPrevTrigger.tsx","../../src/pagination/index.ts"],"sourcesContent":["export function sliceArrayWithIndex(arr: any[], index: number, length: number) {\n const relativeElements = (length - 1) / 2\n\n let start = Math.max(0, index - relativeElements)\n let end = Math.min(arr.length, index + relativeElements + 1)\n\n if (end - start < length) {\n start = Math.max(0, Math.min(start, arr.length - length))\n end = Math.min(arr.length, start + length)\n }\n\n return arr.slice(start, end)\n}\n","import * as pagination from '@zag-js/pagination'\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { createContext, type ReactNode, useContext, useId } from 'react'\n\nimport { sliceArrayWithIndex } from './utils'\n\nexport interface PaginationContextState<T extends PropTypes = PropTypes> {\n type: pagination.Props['type']\n pagination: pagination.Api<T> & {\n getFirstPageTriggerProps: () => ReturnType<pagination.Api<T>['getPrevTriggerProps']> & {\n 'data-part': string\n onClick: () => void\n }\n getLastPageTriggerProps: () => ReturnType<pagination.Api<T>['getNextTriggerProps']> & {\n 'data-part': string\n onClick: () => void\n }\n }\n}\n\nconst PaginationContext = createContext<PaginationContextState | null>(null)\n\nexport interface PaginationProviderProps {\n children: ReactNode\n /**\n * Total number of data items available across all pages.\n */\n count: number\n /**\n * Maximum amount of items displayed on a single page.\n */\n pageSize: number\n /**\n * Number of visible pages (or ellipsis) between previous and next page triggers.\n */\n visiblePageItems?: number\n /**\n * The current page (active page)\n */\n page?: pagination.Props['page']\n /**\n * If your pagination contains buttons instead of links, set `type` to `button`, extra attributes will be applied on page items for a11y.\n */\n type?: pagination.Props['type']\n onPageChange?: pagination.Props['onPageChange']\n noEllipsis?: boolean\n}\n\nexport const PaginationProvider = ({\n children,\n count,\n visiblePageItems = 7,\n pageSize,\n page,\n onPageChange,\n noEllipsis,\n type = 'link',\n}: PaginationProviderProps) => {\n /**\n * Here `Infinity` is used because we apply a custom slice ourselves to manage the \"no ellipsis\" version.\n * It means Zag won't filter out any page item, allowing us to apply our own slicing logic.\n */\n const siblingCount = noEllipsis ? Infinity : Math.max(0, Math.floor((visiblePageItems - 5) / 2))\n\n const id = useId()\n\n const service = useMachine(pagination.machine, {\n id,\n count,\n siblingCount,\n pageSize,\n page,\n onPageChange,\n type,\n })\n\n const api = pagination.connect(service, normalizeProps)\n const pages = noEllipsis\n ? sliceArrayWithIndex(api.pages, api.page - 1, visiblePageItems)\n : api.pages\n\n return (\n <PaginationContext.Provider\n value={{\n type,\n pagination: {\n ...api,\n pages,\n // Extending ZagJS anatomy\n getFirstPageTriggerProps: () => {\n return {\n ...api.getPrevTriggerProps(),\n id: `${api.getRootProps().id}:first`,\n 'data-part': 'first-page-trigger',\n onClick: api.goToFirstPage,\n }\n },\n getLastPageTriggerProps: () => {\n return {\n ...api.getNextTriggerProps(),\n id: `${api.getRootProps().id}:last`,\n 'data-part': 'last-page-trigger',\n onClick: api.goToLastPage,\n }\n },\n },\n }}\n >\n {children}\n </PaginationContext.Provider>\n )\n}\n\nexport const usePagination = () => {\n const context = useContext(PaginationContext)\n\n if (!context) {\n throw Error('usePagination must be used within a Pagination provider')\n }\n\n return context\n}\n","import { ReactNode } from 'react'\n\nimport {\n PaginationProvider,\n type PaginationProviderProps,\n usePagination,\n} from './PaginationContext'\n\nexport type PaginationProps = PaginationProviderProps & { className?: string }\n\nexport const Pagination = ({\n children,\n visiblePageItems = 5,\n type = 'link',\n noEllipsis = false,\n className,\n ...rest\n}: PaginationProps) => {\n return (\n <PaginationProvider\n visiblePageItems={visiblePageItems}\n noEllipsis={noEllipsis}\n type={type}\n {...rest}\n >\n <PaginationWrapper className={className}>{children}</PaginationWrapper>\n </PaginationProvider>\n )\n}\n\nconst PaginationWrapper = ({\n children,\n className,\n}: {\n children: ReactNode\n className?: string\n}) => {\n const { pagination } = usePagination()\n\n const props = pagination.getRootProps()\n\n return (\n <nav data-spark-component=\"pagination\" {...props} className={className}>\n <ul className=\"gap-md flex flex-wrap\">{children}</ul>\n </nav>\n )\n}\n\nPagination.displayName = 'Pagination'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\ninterface EllipsisProps extends ComponentPropsWithRef<'span'> {\n index: number\n}\n\nexport const Ellipsis = ({ children, index, className, ref, ...rest }: EllipsisProps) => {\n const { pagination } = usePagination()\n const apiProps = pagination.getEllipsisProps({ index })\n const localProps = {\n className: cx('flex size-sz-44 items-center justify-center', className),\n ...rest,\n }\n\n const mergedProps = mergeProps(apiProps, localProps)\n\n return (\n <li>\n <span data-spark-component=\"pagination-ellipsis\" ref={ref} {...mergedProps}>\n {children || '\\u2026'}\n </span>\n </li>\n )\n}\n\nEllipsis.displayName = 'Pagination.Ellipsis'\n","import { ArrowDoubleLeft } from '@spark-ui/icons/ArrowDoubleLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type FirstPageTriggerProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const FirstPageTrigger = ({\n children,\n className,\n href,\n ref,\n ...props\n}: FirstPageTriggerProps) => {\n const { pagination, type } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getFirstPageTriggerProps()\n\n const shouldDisableLink =\n type === 'link' &&\n (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-first-page-trigger',\n intent: 'support',\n design: 'contrast',\n ...props,\n className,\n ...(shouldDisableLink && {\n disabled: true,\n role: 'link',\n 'aria-disabled': true,\n }),\n }\n\n // We know 'aria-label' is included in props\n type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n const mergedProps = mergeProps(\n apiProps,\n localProps as unknown as typeof apiProps\n ) as WithAriaLabel\n\n const content = children || (\n <Icon>\n <ArrowDoubleLeft />\n </Icon>\n )\n\n return (\n <li>\n {href ? (\n <IconButton ref={ref} {...mergedProps} asChild>\n <a href={shouldDisableLink ? undefined : href}>{content}</a>\n </IconButton>\n ) : (\n <IconButton ref={ref} {...mergedProps}>\n {content}\n </IconButton>\n )}\n </li>\n )\n}\n\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactElement, Ref } from 'react'\n\nimport { Button } from '../button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type ItemProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n value: number\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A numbered page item.\n * Should be used within `Pagination.Pages` to ensure proper functionality and accessibility.\n *\n * Can be rendered as an anchor or a button :\n * - Set a `href` prop to render the item as an anchor element.\n * - When using `href`, the `asChild` prop isn’t available since the component will already be rendered as an anchor element.\n */\nexport function Item({ children, value, className, href, ref, ...props }: ItemProps): ReactElement {\n const { pagination } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getItemProps({ type: 'page', value })\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-item',\n intent: 'support',\n design: apiProps['aria-current'] === 'page' ? 'filled' : 'contrast',\n className: cx('size-sz-44', className),\n ...props,\n }\n\n const mergedProps = mergeProps(apiProps, localProps)\n\n return (\n <li>\n {href ? (\n <Button ref={ref} {...mergedProps} asChild>\n <a href={href}>{children || value}</a>\n </Button>\n ) : (\n <Button ref={ref} {...mergedProps}>\n {children || value}\n </Button>\n )}\n </li>\n )\n}\n\nItem.displayName = 'Pagination.Item'\n","import { ArrowDoubleRight } from '@spark-ui/icons/ArrowDoubleRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type LastPageTriggerProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const LastPageTrigger = ({\n children,\n className,\n href,\n ref,\n ...props\n}: LastPageTriggerProps) => {\n const { pagination, type } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getLastPageTriggerProps()\n\n const shouldDisableLink =\n type === 'link' &&\n (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-last-page-trigger',\n intent: 'support',\n design: 'contrast',\n ...props,\n className,\n ...(shouldDisableLink && {\n disabled: true,\n role: 'link',\n 'aria-disabled': true,\n }),\n }\n\n // We know 'aria-label' is included in props\n type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n const mergedProps = mergeProps(\n apiProps,\n localProps as unknown as typeof apiProps\n ) as WithAriaLabel\n\n const content = children || (\n <Icon>\n <ArrowDoubleRight />\n </Icon>\n )\n\n return (\n <li>\n {href ? (\n <IconButton ref={ref} {...mergedProps} asChild>\n <a href={shouldDisableLink ? undefined : href}>{content}</a>\n </IconButton>\n ) : (\n <IconButton ref={ref} {...mergedProps}>\n {content}\n </IconButton>\n )}\n </li>\n )\n}\n\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type NextTriggerProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const NextTrigger = ({ children, className, href, ref, ...props }: NextTriggerProps) => {\n const { pagination, type } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getNextTriggerProps()\n\n const shouldDisableLink =\n type === 'link' &&\n (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-next-trigger',\n intent: 'support',\n design: 'contrast',\n ...props,\n className,\n ...(shouldDisableLink && {\n disabled: true,\n role: 'link',\n 'aria-disabled': true,\n }),\n }\n\n // We know 'aria-label' is included in props\n type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n const mergedProps = mergeProps(\n apiProps,\n localProps as unknown as typeof apiProps\n ) as WithAriaLabel\n\n const content = children || (\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n )\n\n return (\n <li>\n {href ? (\n <IconButton ref={ref} {...mergedProps} asChild>\n <a href={shouldDisableLink ? undefined : href}>{content}</a>\n </IconButton>\n ) : (\n <IconButton ref={ref} {...mergedProps}>\n {content}\n </IconButton>\n )}\n </li>\n )\n}\n\nNextTrigger.displayName = 'Pagination.NextTrigger'\n","import * as pagination from '@zag-js/pagination'\nimport { ReactNode } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\n// Extract the 'page' type element from the pagination API's 'pages' array.\ntype PageItem = Extract<pagination.Api['pages'][number], { type: 'page' }>\n\n// Define a type that conditionally tweaks the pagination API\n// based on the generic T parameter.\ntype TweakedPaginationApi<T extends 'noEllipsis' | ''> = Omit<pagination.Api, 'pages'> & {\n pages: T extends 'noEllipsis' ? PageItem[] : pagination.Api['pages']\n}\n\ninterface PagesProps<T extends 'noEllipsis' | ''> {\n children: (pagination: TweakedPaginationApi<T>) => ReactNode\n}\n\nexport const Pages = <T extends 'noEllipsis' | '' = ''>({ children }: PagesProps<T>) => {\n const { pagination } = usePagination()\n\n return children(pagination as TweakedPaginationApi<T>)\n}\n\nPages.displayName = 'Pagination.Pages'\n","import { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n href: string\n asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n */\n asChild?: boolean\n href?: never\n}\n\nexport type PrevTriggerProps = (AnchorProps | ButtonProps) & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const PrevTrigger = ({ children, className, href, ref, ...props }: PrevTriggerProps) => {\n const { pagination, type } = usePagination()\n\n // ZagJS props\n const apiProps = pagination.getPrevTriggerProps()\n\n const shouldDisableLink =\n type === 'link' &&\n (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n // Locally managed props\n const localProps = {\n 'data-spark-component': 'pagination-prev-trigger',\n intent: 'support',\n design: 'contrast',\n ...props,\n className,\n ...(shouldDisableLink && {\n disabled: true,\n role: 'link',\n 'aria-disabled': true,\n }),\n }\n\n // We know 'aria-label' is included in props\n type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n const mergedProps = mergeProps(\n apiProps,\n localProps as unknown as typeof apiProps\n ) as WithAriaLabel\n\n const content = children || (\n <Icon>\n <ArrowVerticalLeft />\n </Icon>\n )\n\n return (\n <li>\n {href ? (\n <IconButton ref={ref} {...mergedProps} asChild>\n <a href={shouldDisableLink ? undefined : href}>{content}</a>\n </IconButton>\n ) : (\n <IconButton ref={ref} {...mergedProps}>\n {content}\n </IconButton>\n )}\n </li>\n )\n}\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\n","import type { FC } from 'react'\n\nimport { Pagination as Root, type PaginationProps } from './Pagination'\nimport { Ellipsis } from './PaginationEllipsis'\nimport { FirstPageTrigger } from './PaginationFirstPageTrigger'\nimport { Item } from './PaginationItem'\nimport { LastPageTrigger } from './PaginationLastPageTrigger'\nimport { NextTrigger } from './PaginationNextTrigger'\nimport { Pages } from './PaginationPages'\nimport { PrevTrigger } from './PaginationPrevTrigger'\n\n/**\n * A navigation component that allows users to navigate through multiple pages of content.\n */\nexport const Pagination: FC<PaginationProps> & {\n PrevTrigger: typeof PrevTrigger\n NextTrigger: typeof NextTrigger\n Pages: typeof Pages\n Item: typeof Item\n Ellipsis: typeof Ellipsis\n FirstPageTrigger: typeof FirstPageTrigger\n LastPageTrigger: typeof LastPageTrigger\n} = Object.assign(Root, {\n PrevTrigger,\n NextTrigger,\n Pages,\n Item,\n Ellipsis,\n FirstPageTrigger,\n LastPageTrigger,\n})\n\nPagination.displayName = 'Pagination'\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\nNextTrigger.displayName = 'Pagination.NextTrigger'\nPages.displayName = 'Pagination.Pages'\nItem.displayName = 'Pagination.Item'\nEllipsis.displayName = 'Pagination.Ellipsis'\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover-CrKp_TKk.js","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext.Provider\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext.Provider>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover-CrKp_TKk.js","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext.Provider\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext.Provider>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover-DsBY8eYl.mjs","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext.Provider\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext.Provider>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover-DsBY8eYl.mjs","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext.Provider\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext.Provider>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
|
package/dist/portal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { Portal as RadixPortal } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\ninterface PortalProps {\n /**\n * An optional different container where the portaled content should be appended.\n */\n container?: HTMLElement | null\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Portal = (props: PropsWithChildren<PortalProps>) => {\n return <RadixPortal.Portal {...props} />\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { Portal as RadixPortal } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\ninterface PortalProps {\n /**\n * An optional different container where the portaled content should be appended.\n */\n container?: HTMLElement | null\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = (props: PropsWithChildren<PortalProps>) => {\n return <RadixPortal.Portal {...props} />\n}\n"],"mappings":"4JAcA,IAAa,EAAU,IACd,EAAA,EAAA,KAAC,EAAA,OAAY,OAAb,CAAoB,GAAI,EAAS,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { Portal as RadixPortal } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\ninterface PortalProps {\n /**\n * An optional different container where the portaled content should be appended.\n */\n container?: HTMLElement | null\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Portal = (props: PropsWithChildren<PortalProps>) => {\n return <RadixPortal.Portal {...props} />\n}\n"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { Portal as RadixPortal } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\ninterface PortalProps {\n /**\n * An optional different container where the portaled content should be appended.\n */\n container?: HTMLElement | null\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = (props: PropsWithChildren<PortalProps>) => {\n return <RadixPortal.Portal {...props} />\n}\n"],"mappings":";;;AAcA,IAAa,KAAU,MACd,kBAAC,EAAY,QAAb,EAAoB,GAAI,GAAS,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-BjqJSRnK.js","names":[],"sources":["../src/progress/ProgressContext.tsx","../src/progress/ProgressIndicator.tsx","../src/progress/ProgressTrack.tsx","../src/progress/Progress.tsx","../src/progress/ProgressLabel.tsx","../src/progress/ProgressValue.tsx","../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n value: number | null\n max: number\n min: number\n shape: 'square' | 'rounded'\n intent: ProgressIndicatorStylesProps['intent']\n onLabelId: (id?: string) => void\n onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n const context = useContext(ProgressContext)\n\n if (!context) {\n throw new Error('useProgress must be used within a Progress provider')\n }\n\n return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n variants: {\n /**\n * Color scheme of the progress component.\n */\n intent: {\n main: ['bg-main'],\n support: ['bg-support'],\n accent: ['bg-accent'],\n success: ['bg-success'],\n alert: ['bg-alert'],\n danger: ['bg-error'],\n info: ['bg-info'],\n neutral: ['bg-neutral'],\n },\n /**\n * Shape of the progress component.\n */\n shape: {\n square: [],\n rounded: ['rounded-sm'],\n },\n },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n className,\n style,\n ref,\n onTransitionEnd,\n ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n const { value, max, min, intent, shape, onComplete } = useProgress()\n\n const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n const isIndeterminate = value === null\n\n const handleTransitionEnd = (\n event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]\n ) => {\n // Call the original onTransitionEnd if provided\n onTransitionEnd?.(event)\n\n // If progress is complete and we have a callback, call it\n if (value !== null && value >= max && onComplete) {\n onComplete()\n }\n }\n\n return (\n <BaseProgress.Indicator\n data-spark-component=\"progress-indicator\"\n className={cx(\n progressIndicatorStyles({\n className,\n intent,\n shape,\n }),\n isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n )}\n style={{\n ...style,\n ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n }}\n ref={ref}\n onTransitionEnd={handleTransitionEnd}\n {...others}\n />\n )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n const { shape } = useProgress()\n\n return (\n <BaseProgress.Track\n data-spark-component=\"progress-track\"\n className={cx(\n 'h-sz-4 relative col-span-2 w-full',\n 'transform-gpu',\n 'overflow-hidden',\n 'bg-on-background/dim-4',\n { 'rounded-sm': shape === 'rounded' },\n className\n )}\n {...others}\n >\n <ProgressIndicator />\n </BaseProgress.Track>\n )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n extends\n Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n Pick<ProgressIndicatorStylesProps, 'intent'> {\n shape?: 'square' | 'rounded'\n /**\n * Callback called when the progress reaches its maximum value and the transition animation completes.\n */\n onComplete?: () => void\n /**\n * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n */\n getValueLabel?: (value: number, max: number) => string\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n className,\n value: valueProp,\n max = 100,\n min = 0,\n shape = 'square',\n intent = 'support',\n onComplete,\n getValueLabel,\n getAriaValueText: getAriaValueTextProp,\n children = <ProgressTrack />,\n ref,\n ...others\n}: PropsWithChildren<ProgressProps>) => {\n const [labelId, setLabelId] = useState<string>()\n\n const contextValue = useMemo(() => {\n return {\n value: valueProp ?? null,\n max,\n min,\n intent,\n shape,\n onLabelId: setLabelId,\n onComplete,\n }\n }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n // Map getValueLabel to getAriaValueText for backward compatibility\n const getAriaValueText =\n getAriaValueTextProp ||\n (getValueLabel\n ? (formattedValue: string | null, value: number | null) => {\n if (value === null) return formattedValue ?? ''\n\n return getValueLabel(value, max)\n }\n : undefined)\n\n return (\n <ProgressContext.Provider value={contextValue}>\n <BaseProgress.Root\n data-spark-component=\"progress\"\n ref={ref}\n className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n value={valueProp ?? null}\n max={max}\n min={min}\n aria-labelledby={labelId}\n getAriaValueText={getAriaValueText}\n {...others}\n >\n {children}\n </BaseProgress.Root>\n </ProgressContext.Provider>\n )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n id: idProp,\n children,\n ref: forwardedRef,\n ...others\n}: ProgressLabelProps) => {\n const internalID = `${ID_PREFIX}-label-${useId()}`\n const id = idProp || internalID\n\n const { onLabelId } = useProgress()\n const rootRef = useCallback(\n (el: HTMLSpanElement) => {\n onLabelId(el ? id : undefined)\n },\n [id, onLabelId]\n )\n const ref = useMergeRefs(forwardedRef, rootRef)\n\n return (\n <BaseProgress.Label\n data-spark-component=\"progress-label\"\n id={id}\n className=\"default:text-body-1 text-on-surface default:font-bold\"\n ref={ref}\n {...others}\n >\n {children}\n </BaseProgress.Label>\n )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n className,\n children,\n ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n return (\n <BaseProgress.Value\n data-spark-component=\"progress-value\"\n className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n {...others}\n >\n {children}\n </BaseProgress.Value>\n )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n Label: typeof ProgressLabel\n Track: typeof ProgressTrack\n Value: typeof ProgressValue\n} = Object.assign(Root, {\n Label: ProgressLabel,\n Track: ProgressTrack,\n Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"progress-BjqJSRnK.js","names":[],"sources":["../src/progress/ProgressContext.tsx","../src/progress/ProgressIndicator.tsx","../src/progress/ProgressTrack.tsx","../src/progress/Progress.tsx","../src/progress/ProgressLabel.tsx","../src/progress/ProgressValue.tsx","../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n value: number | null\n max: number\n min: number\n shape: 'square' | 'rounded'\n intent: ProgressIndicatorStylesProps['intent']\n onLabelId: (id?: string) => void\n onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n const context = useContext(ProgressContext)\n\n if (!context) {\n throw new Error('useProgress must be used within a Progress provider')\n }\n\n return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n variants: {\n /**\n * Color scheme of the progress component.\n */\n intent: {\n main: ['bg-main'],\n support: ['bg-support'],\n accent: ['bg-accent'],\n success: ['bg-success'],\n alert: ['bg-alert'],\n danger: ['bg-error'],\n info: ['bg-info'],\n neutral: ['bg-neutral'],\n },\n /**\n * Shape of the progress component.\n */\n shape: {\n square: [],\n rounded: ['rounded-sm'],\n },\n },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n className,\n style,\n ref,\n onTransitionEnd,\n ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n const { value, max, min, intent, shape, onComplete } = useProgress()\n\n const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n const isIndeterminate = value === null\n\n const handleTransitionEnd = (\n event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]\n ) => {\n // Call the original onTransitionEnd if provided\n onTransitionEnd?.(event)\n\n // If progress is complete and we have a callback, call it\n if (value !== null && value >= max && onComplete) {\n onComplete()\n }\n }\n\n return (\n <BaseProgress.Indicator\n data-spark-component=\"progress-indicator\"\n className={cx(\n progressIndicatorStyles({\n className,\n intent,\n shape,\n }),\n isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n )}\n style={{\n ...style,\n ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n }}\n ref={ref}\n onTransitionEnd={handleTransitionEnd}\n {...others}\n />\n )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n const { shape } = useProgress()\n\n return (\n <BaseProgress.Track\n data-spark-component=\"progress-track\"\n className={cx(\n 'h-sz-4 relative col-span-2 w-full',\n 'transform-gpu',\n 'overflow-hidden',\n 'bg-on-background/dim-4',\n { 'rounded-sm': shape === 'rounded' },\n className\n )}\n {...others}\n >\n <ProgressIndicator />\n </BaseProgress.Track>\n )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n extends\n Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n Pick<ProgressIndicatorStylesProps, 'intent'> {\n shape?: 'square' | 'rounded'\n /**\n * Callback called when the progress reaches its maximum value and the transition animation completes.\n */\n onComplete?: () => void\n /**\n * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n */\n getValueLabel?: (value: number, max: number) => string\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n className,\n value: valueProp,\n max = 100,\n min = 0,\n shape = 'square',\n intent = 'support',\n onComplete,\n getValueLabel,\n getAriaValueText: getAriaValueTextProp,\n children = <ProgressTrack />,\n ref,\n ...others\n}: PropsWithChildren<ProgressProps>) => {\n const [labelId, setLabelId] = useState<string>()\n\n const contextValue = useMemo(() => {\n return {\n value: valueProp ?? null,\n max,\n min,\n intent,\n shape,\n onLabelId: setLabelId,\n onComplete,\n }\n }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n // Map getValueLabel to getAriaValueText for backward compatibility\n const getAriaValueText =\n getAriaValueTextProp ||\n (getValueLabel\n ? (formattedValue: string | null, value: number | null) => {\n if (value === null) return formattedValue ?? ''\n\n return getValueLabel(value, max)\n }\n : undefined)\n\n return (\n <ProgressContext.Provider value={contextValue}>\n <BaseProgress.Root\n data-spark-component=\"progress\"\n ref={ref}\n className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n value={valueProp ?? null}\n max={max}\n min={min}\n aria-labelledby={labelId}\n getAriaValueText={getAriaValueText}\n {...others}\n >\n {children}\n </BaseProgress.Root>\n </ProgressContext.Provider>\n )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n id: idProp,\n children,\n ref: forwardedRef,\n ...others\n}: ProgressLabelProps) => {\n const internalID = `${ID_PREFIX}-label-${useId()}`\n const id = idProp || internalID\n\n const { onLabelId } = useProgress()\n const rootRef = useCallback(\n (el: HTMLSpanElement) => {\n onLabelId(el ? id : undefined)\n },\n [id, onLabelId]\n )\n const ref = useMergeRefs(forwardedRef, rootRef)\n\n return (\n <BaseProgress.Label\n data-spark-component=\"progress-label\"\n id={id}\n className=\"default:text-body-1 text-on-surface default:font-bold\"\n ref={ref}\n {...others}\n >\n {children}\n </BaseProgress.Label>\n )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n className,\n children,\n ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n return (\n <BaseProgress.Value\n data-spark-component=\"progress-value\"\n className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n {...others}\n >\n {children}\n </BaseProgress.Value>\n )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\n/**\n * A visual indicator that displays the completion progress of a task or operation.\n */\nexport const Progress: typeof Root & {\n Label: typeof ProgressLabel\n Track: typeof ProgressTrack\n Value: typeof ProgressValue\n} = Object.assign(Root, {\n Label: ProgressLabel,\n Track: ProgressTrack,\n Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-C3w4PmxY.mjs","names":[],"sources":["../src/progress/ProgressContext.tsx","../src/progress/ProgressIndicator.tsx","../src/progress/ProgressTrack.tsx","../src/progress/Progress.tsx","../src/progress/ProgressLabel.tsx","../src/progress/ProgressValue.tsx","../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n value: number | null\n max: number\n min: number\n shape: 'square' | 'rounded'\n intent: ProgressIndicatorStylesProps['intent']\n onLabelId: (id?: string) => void\n onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n const context = useContext(ProgressContext)\n\n if (!context) {\n throw new Error('useProgress must be used within a Progress provider')\n }\n\n return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n variants: {\n /**\n * Color scheme of the progress component.\n */\n intent: {\n main: ['bg-main'],\n support: ['bg-support'],\n accent: ['bg-accent'],\n success: ['bg-success'],\n alert: ['bg-alert'],\n danger: ['bg-error'],\n info: ['bg-info'],\n neutral: ['bg-neutral'],\n },\n /**\n * Shape of the progress component.\n */\n shape: {\n square: [],\n rounded: ['rounded-sm'],\n },\n },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n className,\n style,\n ref,\n onTransitionEnd,\n ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n const { value, max, min, intent, shape, onComplete } = useProgress()\n\n const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n const isIndeterminate = value === null\n\n const handleTransitionEnd = (\n event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]\n ) => {\n // Call the original onTransitionEnd if provided\n onTransitionEnd?.(event)\n\n // If progress is complete and we have a callback, call it\n if (value !== null && value >= max && onComplete) {\n onComplete()\n }\n }\n\n return (\n <BaseProgress.Indicator\n data-spark-component=\"progress-indicator\"\n className={cx(\n progressIndicatorStyles({\n className,\n intent,\n shape,\n }),\n isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n )}\n style={{\n ...style,\n ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n }}\n ref={ref}\n onTransitionEnd={handleTransitionEnd}\n {...others}\n />\n )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n const { shape } = useProgress()\n\n return (\n <BaseProgress.Track\n data-spark-component=\"progress-track\"\n className={cx(\n 'h-sz-4 relative col-span-2 w-full',\n 'transform-gpu',\n 'overflow-hidden',\n 'bg-on-background/dim-4',\n { 'rounded-sm': shape === 'rounded' },\n className\n )}\n {...others}\n >\n <ProgressIndicator />\n </BaseProgress.Track>\n )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n extends\n Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n Pick<ProgressIndicatorStylesProps, 'intent'> {\n shape?: 'square' | 'rounded'\n /**\n * Callback called when the progress reaches its maximum value and the transition animation completes.\n */\n onComplete?: () => void\n /**\n * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n */\n getValueLabel?: (value: number, max: number) => string\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n className,\n value: valueProp,\n max = 100,\n min = 0,\n shape = 'square',\n intent = 'support',\n onComplete,\n getValueLabel,\n getAriaValueText: getAriaValueTextProp,\n children = <ProgressTrack />,\n ref,\n ...others\n}: PropsWithChildren<ProgressProps>) => {\n const [labelId, setLabelId] = useState<string>()\n\n const contextValue = useMemo(() => {\n return {\n value: valueProp ?? null,\n max,\n min,\n intent,\n shape,\n onLabelId: setLabelId,\n onComplete,\n }\n }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n // Map getValueLabel to getAriaValueText for backward compatibility\n const getAriaValueText =\n getAriaValueTextProp ||\n (getValueLabel\n ? (formattedValue: string | null, value: number | null) => {\n if (value === null) return formattedValue ?? ''\n\n return getValueLabel(value, max)\n }\n : undefined)\n\n return (\n <ProgressContext.Provider value={contextValue}>\n <BaseProgress.Root\n data-spark-component=\"progress\"\n ref={ref}\n className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n value={valueProp ?? null}\n max={max}\n min={min}\n aria-labelledby={labelId}\n getAriaValueText={getAriaValueText}\n {...others}\n >\n {children}\n </BaseProgress.Root>\n </ProgressContext.Provider>\n )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n id: idProp,\n children,\n ref: forwardedRef,\n ...others\n}: ProgressLabelProps) => {\n const internalID = `${ID_PREFIX}-label-${useId()}`\n const id = idProp || internalID\n\n const { onLabelId } = useProgress()\n const rootRef = useCallback(\n (el: HTMLSpanElement) => {\n onLabelId(el ? id : undefined)\n },\n [id, onLabelId]\n )\n const ref = useMergeRefs(forwardedRef, rootRef)\n\n return (\n <BaseProgress.Label\n data-spark-component=\"progress-label\"\n id={id}\n className=\"default:text-body-1 text-on-surface default:font-bold\"\n ref={ref}\n {...others}\n >\n {children}\n </BaseProgress.Label>\n )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n className,\n children,\n ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n return (\n <BaseProgress.Value\n data-spark-component=\"progress-value\"\n className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n {...others}\n >\n {children}\n </BaseProgress.Value>\n )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n Label: typeof ProgressLabel\n Track: typeof ProgressTrack\n Value: typeof ProgressValue\n} = Object.assign(Root, {\n Label: ProgressLabel,\n Track: ProgressTrack,\n Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"progress-C3w4PmxY.mjs","names":[],"sources":["../src/progress/ProgressContext.tsx","../src/progress/ProgressIndicator.tsx","../src/progress/ProgressTrack.tsx","../src/progress/Progress.tsx","../src/progress/ProgressLabel.tsx","../src/progress/ProgressValue.tsx","../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n value: number | null\n max: number\n min: number\n shape: 'square' | 'rounded'\n intent: ProgressIndicatorStylesProps['intent']\n onLabelId: (id?: string) => void\n onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n const context = useContext(ProgressContext)\n\n if (!context) {\n throw new Error('useProgress must be used within a Progress provider')\n }\n\n return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n variants: {\n /**\n * Color scheme of the progress component.\n */\n intent: {\n main: ['bg-main'],\n support: ['bg-support'],\n accent: ['bg-accent'],\n success: ['bg-success'],\n alert: ['bg-alert'],\n danger: ['bg-error'],\n info: ['bg-info'],\n neutral: ['bg-neutral'],\n },\n /**\n * Shape of the progress component.\n */\n shape: {\n square: [],\n rounded: ['rounded-sm'],\n },\n },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n className,\n style,\n ref,\n onTransitionEnd,\n ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n const { value, max, min, intent, shape, onComplete } = useProgress()\n\n const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n const isIndeterminate = value === null\n\n const handleTransitionEnd = (\n event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]\n ) => {\n // Call the original onTransitionEnd if provided\n onTransitionEnd?.(event)\n\n // If progress is complete and we have a callback, call it\n if (value !== null && value >= max && onComplete) {\n onComplete()\n }\n }\n\n return (\n <BaseProgress.Indicator\n data-spark-component=\"progress-indicator\"\n className={cx(\n progressIndicatorStyles({\n className,\n intent,\n shape,\n }),\n isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n )}\n style={{\n ...style,\n ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n }}\n ref={ref}\n onTransitionEnd={handleTransitionEnd}\n {...others}\n />\n )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n const { shape } = useProgress()\n\n return (\n <BaseProgress.Track\n data-spark-component=\"progress-track\"\n className={cx(\n 'h-sz-4 relative col-span-2 w-full',\n 'transform-gpu',\n 'overflow-hidden',\n 'bg-on-background/dim-4',\n { 'rounded-sm': shape === 'rounded' },\n className\n )}\n {...others}\n >\n <ProgressIndicator />\n </BaseProgress.Track>\n )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n extends\n Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n Pick<ProgressIndicatorStylesProps, 'intent'> {\n shape?: 'square' | 'rounded'\n /**\n * Callback called when the progress reaches its maximum value and the transition animation completes.\n */\n onComplete?: () => void\n /**\n * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n */\n getValueLabel?: (value: number, max: number) => string\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n className,\n value: valueProp,\n max = 100,\n min = 0,\n shape = 'square',\n intent = 'support',\n onComplete,\n getValueLabel,\n getAriaValueText: getAriaValueTextProp,\n children = <ProgressTrack />,\n ref,\n ...others\n}: PropsWithChildren<ProgressProps>) => {\n const [labelId, setLabelId] = useState<string>()\n\n const contextValue = useMemo(() => {\n return {\n value: valueProp ?? null,\n max,\n min,\n intent,\n shape,\n onLabelId: setLabelId,\n onComplete,\n }\n }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n // Map getValueLabel to getAriaValueText for backward compatibility\n const getAriaValueText =\n getAriaValueTextProp ||\n (getValueLabel\n ? (formattedValue: string | null, value: number | null) => {\n if (value === null) return formattedValue ?? ''\n\n return getValueLabel(value, max)\n }\n : undefined)\n\n return (\n <ProgressContext.Provider value={contextValue}>\n <BaseProgress.Root\n data-spark-component=\"progress\"\n ref={ref}\n className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n value={valueProp ?? null}\n max={max}\n min={min}\n aria-labelledby={labelId}\n getAriaValueText={getAriaValueText}\n {...others}\n >\n {children}\n </BaseProgress.Root>\n </ProgressContext.Provider>\n )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n id: idProp,\n children,\n ref: forwardedRef,\n ...others\n}: ProgressLabelProps) => {\n const internalID = `${ID_PREFIX}-label-${useId()}`\n const id = idProp || internalID\n\n const { onLabelId } = useProgress()\n const rootRef = useCallback(\n (el: HTMLSpanElement) => {\n onLabelId(el ? id : undefined)\n },\n [id, onLabelId]\n )\n const ref = useMergeRefs(forwardedRef, rootRef)\n\n return (\n <BaseProgress.Label\n data-spark-component=\"progress-label\"\n id={id}\n className=\"default:text-body-1 text-on-surface default:font-bold\"\n ref={ref}\n {...others}\n >\n {children}\n </BaseProgress.Label>\n )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n className,\n children,\n ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n return (\n <BaseProgress.Value\n data-spark-component=\"progress-value\"\n className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n {...others}\n >\n {children}\n </BaseProgress.Value>\n )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\n/**\n * A visual indicator that displays the completion progress of a task or operation.\n */\nexport const Progress: typeof Root & {\n Label: typeof ProgressLabel\n Track: typeof ProgressTrack\n Value: typeof ProgressValue\n} = Object.assign(Root, {\n Label: ProgressLabel,\n Track: ProgressTrack,\n Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/progress-tracker/ProgressTracker.styles.ts","../../src/progress-tracker/ProgressTrackerContext.ts","../../src/progress-tracker/ProgressTracker.tsx","../../src/progress-tracker/ProgressTrackerStep.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.tsx","../../src/progress-tracker/ProgressTrackerStep.tsx","../../src/progress-tracker/ProgressTrackerStepLabel.tsx","../../src/progress-tracker/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\n\nexport const progressList = cx([\n 'flex flex-nowrap items-start group/list',\n 'data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',\n 'data-[orientation=vertical]:flex-col',\n])\n","import { createContext, type Dispatch, type SetStateAction, useContext } from 'react'\n\nimport type { ProgressTrackerProps } from './ProgressTracker'\n\n// Interfaces\nexport type ProgressTrackerContextInterface = Required<\n Pick<ProgressTrackerProps, 'stepIndex' | 'size' | 'intent' | 'readOnly'>\n> &\n Pick<ProgressTrackerProps, 'onStepClick'> & {\n steps: Map<string, string[]>\n setSteps: Dispatch<SetStateAction<Map<string, string[]>>>\n }\n\nexport interface ProgressTrackerStepContextInterface {\n index: number\n state: 'active' | 'complete' | 'incomplete'\n}\n\n// Contexts\nexport const ProgressTrackerContext = createContext<ProgressTrackerContextInterface>(\n {} as ProgressTrackerContextInterface\n)\n\nexport const ProgressTrackerStepContext = createContext<ProgressTrackerStepContextInterface>(\n {} as ProgressTrackerStepContextInterface\n)\n\n// Hooks\nexport const useProgressTrackerContext = () => useContext(ProgressTrackerContext)\n\nexport const useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext)\n\nexport const ID_PREFIX = ':progress-tracker'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type PropsWithChildren, useState } from 'react'\n\nimport { progressList } from './ProgressTracker.styles'\nimport {\n ProgressTrackerContext,\n type ProgressTrackerContextInterface,\n} from './ProgressTrackerContext'\nimport type { StepIndicatorVariantProps } from './ProgressTrackerStepIndicator.styles'\n\nexport interface ProgressTrackerProps\n extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent'> {\n /**\n * The orientation of the progress tracker\n * @default 'horizontal\"\n */\n orientation?: 'horizontal' | 'vertical'\n /**\n * The index of the current step.\n * @default 0\n */\n stepIndex?: number\n /**\n * Event handler called when clicking on a step.\n */\n onStepClick?: (stepIndex: number) => void\n /**\n * Sets the component as interactive or not.\n * @default false\n */\n readOnly?: boolean\n}\n\nexport const ProgressTracker = ({\n stepIndex = 0,\n onStepClick,\n readOnly = false,\n intent = 'support',\n size = 'lg',\n orientation = 'horizontal',\n children,\n className,\n ref,\n ...rest\n}: PropsWithChildren<ProgressTrackerProps>) => {\n const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())\n\n const Component = readOnly ? 'div' : 'nav'\n\n return (\n <ProgressTrackerContext.Provider\n value={{ stepIndex, onStepClick, steps, setSteps, size, intent, readOnly }}\n >\n <Component\n ref={ref}\n data-spark-component=\"progress-tracker\"\n className={cx('inline-flex', className)}\n {...rest}\n >\n <ol\n data-orientation={orientation}\n className={progressList}\n style={{ counterReset: 'step' }}\n >\n {children}\n </ol>\n </Component>\n </ProgressTrackerContext.Provider>\n )\n}\n\nProgressTracker.displayName = 'ProgressTracker'\n","import { cva } from 'class-variance-authority'\n\nexport const stepItemVariant = cva(\n [\n 'relative inline-flex items-start flex-auto first:grow-0 justify-center group/item',\n // Progress Track\n 'after:absolute after:z-base',\n 'last:after:content-none',\n 'after:bg-outline',\n 'group-data-[orientation=horizontal]/list:before:bg-outline',\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:px-[1px]',\n 'group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base',\n 'group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0',\n 'group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]',\n 'first:group-data-[orientation=horizontal]/list:before:content-none',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:py-[1px]',\n 'group-data-[orientation=vertical]/list:items-start',\n 'group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]',\n ],\n {\n variants: {\n size: {\n sm: [\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]',\n 'group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]',\n 'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]',\n 'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:after:left-[8px]',\n 'group-data-[orientation=vertical]/list:after:top-[25px]',\n 'first:group-data-[orientation=vertical]/list:after:top-[21px]',\n ],\n md: [\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]',\n 'group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]',\n 'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]',\n 'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:after:left-[12px]',\n 'group-data-[orientation=vertical]/list:after:top-[33px]',\n 'first:group-data-[orientation=vertical]/list:after:top-[29px]',\n ],\n lg: [\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]',\n 'group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]',\n 'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]',\n 'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:after:left-[16px]',\n 'group-data-[orientation=vertical]/list:after:top-[41px]',\n 'first:group-data-[orientation=vertical]/list:after:top-[37px]',\n ],\n },\n intent: {\n support: '',\n neutral: '',\n success: '',\n },\n disabled: {\n true: 'before:opacity-dim-3',\n false: '',\n },\n disabledAfter: {\n true: 'after:opacity-dim-3',\n false: '',\n },\n },\n defaultVariants: {\n disabled: false,\n disabledAfter: false,\n size: 'lg',\n intent: 'support',\n },\n }\n)\n\nexport const stepButtonVariant = cva(\n [\n 'relative flex group/btn disabled:cursor-default',\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center',\n 'group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm',\n 'group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start',\n 'group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm',\n 'group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0',\n ],\n {\n variants: {\n size: {\n sm: [\n 'group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]',\n 'group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]',\n ],\n md: [\n 'group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]',\n 'group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]',\n ],\n lg: [\n 'group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]',\n 'group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]',\n ],\n },\n readOnly: {\n true: 'cursor-default',\n false: 'cursor-pointer',\n },\n },\n defaultVariants: {\n size: 'lg',\n readOnly: false,\n },\n }\n)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n [\n 'relative flex shrink-0 justify-center items-center',\n 'rounded-full',\n 'text-body-2 font-bold',\n 'group-disabled/btn:opacity-dim-3',\n ],\n {\n variants: {\n size: {\n sm: [\n 'w-sz-16 h-sz-16',\n 'group-data-[orientation=horizontal]/list:mt-[-16px]',\n 'group-data-[orientation=vertical]/list:ml-[-16px]',\n ],\n md: [\n 'w-sz-24 h-sz-24',\n 'group-data-[orientation=horizontal]/list:mt-[-24px]',\n 'group-data-[orientation=vertical]/list:ml-[-24px]',\n ],\n lg: [\n 'w-sz-32 h-sz-32',\n 'group-data-[orientation=horizontal]/list:mt-[-32px]',\n 'group-data-[orientation=vertical]/list:ml-[-32px]',\n ],\n },\n intent: {\n support: '',\n neutral: '',\n success: '',\n },\n state: {\n complete: '',\n incomplete: '',\n active: '',\n },\n },\n /**\n * Known type issue with CVA compoundVariants and VS Code/Intellisense:\n * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163\n * */\n /* @ts-ignore */\n compoundVariants: [\n // Support\n {\n intent: 'support',\n state: ['complete', 'incomplete'],\n class: [\n 'text-on-support-container bg-support-container',\n 'group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered',\n 'group-hover/btn:group-data-[interactive=false]/btn:bg-support-container',\n ],\n },\n {\n intent: 'support',\n state: 'active',\n class: 'text-on-support bg-support',\n },\n // Neutral\n {\n intent: 'neutral',\n state: ['complete', 'incomplete'],\n class: [\n 'text-on-neutral-container bg-neutral-container',\n 'group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered',\n 'group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container',\n ],\n },\n {\n intent: 'neutral',\n state: 'active',\n class: 'text-on-neutral bg-neutral',\n },\n // Success\n {\n intent: 'success',\n state: ['complete', 'incomplete'],\n class: [\n 'text-on-success-container bg-success-container',\n 'group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered',\n 'group-hover/btn:group-data-[interactive=false]/btn:bg-success-container',\n ],\n },\n {\n intent: 'success',\n state: 'active',\n class: 'text-on-success bg-success',\n },\n ],\n defaultVariants: {\n size: 'lg',\n state: 'incomplete',\n intent: 'support',\n },\n }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n /**\n * The content to be rendered when step status is complete (checkmark icon by default)\n */\n complete?: ReactNode\n /**\n * The content to be rendered when step status is incomplete (step index by default)\n */\n incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n <Icon size=\"sm\">\n <Check />\n </Icon>\n)\n\nexport const ProgressTrackerStepIndicator = ({\n complete,\n incomplete,\n className,\n}: ProgressTrackerStepIndicatorProps) => {\n const { size, intent } = useProgressTrackerContext()\n const { index, state } = useProgressTrackerStepContext()\n\n return (\n <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n {size !== 'sm' && (\n <>\n {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n </>\n )}\n </span>\n )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n ID_PREFIX,\n ProgressTrackerStepContext,\n useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n (\n | {\n disabled?: boolean\n children: ReactNode\n }\n | {\n disabled?: boolean\n 'aria-label': string\n }\n )\n\nexport const ProgressTrackerStep = ({\n disabled = false,\n children,\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: ProgressTrackerStepProps) => {\n const {\n stepIndex: currentStepIndex,\n steps,\n onStepClick,\n setSteps,\n size,\n intent,\n readOnly,\n } = useProgressTrackerContext()\n\n const stepId = `${ID_PREFIX}-step-${useId()}`\n const stepIndex = [...steps.keys()].indexOf(stepId)\n\n const disabledAfter = (() => {\n const nextStepId = [...steps.keys()][stepIndex + 1]\n\n return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n })()\n\n const progressState = (() => {\n if (stepIndex === currentStepIndex) return 'active'\n else if (stepIndex < currentStepIndex) return 'complete'\n else return 'incomplete'\n })()\n\n useEffect(() => {\n setSteps(steps => {\n const newSteps = new Map(steps)\n\n return newSteps.set(\n stepId,\n [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n )\n })\n\n return () => {\n setSteps(steps => {\n steps.delete(stepId)\n\n return steps\n })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return (\n <li\n data-spark-component=\"progress-tracker-step\"\n id={stepId}\n ref={ref}\n data-state={progressState}\n {...(progressState === 'active' && {\n 'aria-current': 'step',\n })}\n className={stepItemVariant({\n size,\n intent,\n disabled,\n disabledAfter,\n })}\n {...rest}\n >\n <button\n type=\"button\"\n aria-label={ariaLabel}\n data-interactive={!disabled && !readOnly}\n {...(!disabled &&\n !readOnly && {\n onClick: () => onStepClick?.(stepIndex),\n })}\n disabled={disabled}\n className={stepButtonVariant({\n size,\n readOnly,\n className,\n })}\n >\n <ProgressTrackerStepContext.Provider\n value={{\n index: stepIndex,\n state: progressState,\n }}\n >\n {children || <ProgressTrackerStepIndicator />}\n </ProgressTrackerStepContext.Provider>\n </button>\n </li>\n )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n children: ReactNode\n}\n\nconst stepLabel = cva(\n [\n 'flex text-body-2 ',\n 'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n 'group-data-[orientation=horizontal]/list:mt-md',\n 'group-data-[orientation=vertical]/list:ml-md',\n 'group-data-[orientation=vertical]/list:my-auto',\n ],\n {\n variants: {\n state: {\n complete: '',\n incomplete: '',\n active: 'font-bold',\n },\n },\n }\n)\n\nexport const ProgressTrackerStepLabel = ({\n className,\n children,\n}: ProgressTrackerStepLabelProps) => {\n const { state } = useProgressTrackerStepContext()\n\n return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n ProgressTrackerStepIndicator as StepIndicator,\n type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\nexport const ProgressTracker: typeof Root & {\n Step: typeof Step\n StepLabel: typeof StepLabel\n StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n Step,\n StepLabel,\n StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"mappings":"yQAEA,IAAa,GAAA,EAAA,EAAA,IAAkB,CAC7B,0CACA,8EACA,uCACD,CAAC,CCaW,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAEY,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAGY,OAAA,EAAA,EAAA,YAA6C,EAAuB,CAEpE,OAAA,EAAA,EAAA,YAAiD,EAA2B,CAE5E,EAAY,oBCCZ,GAAmB,CAC9B,YAAY,EACZ,cACA,WAAW,GACX,SAAS,UACT,OAAO,KACP,cAAc,aACd,WACA,YACA,MACA,GAAG,KAC0C,CAC7C,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAA+D,IAAI,IAAM,CAEjF,EAAY,EAAW,MAAQ,MAErC,OACE,EAAA,EAAA,KAAC,EAAuB,SAAxB,CACE,MAAO,CAAE,YAAW,cAAa,QAAO,WAAU,OAAM,SAAQ,WAAU,WAE1E,EAAA,EAAA,KAAC,EAAD,CACO,MACL,uBAAqB,mBACrB,WAAA,EAAA,EAAA,IAAc,cAAe,EAAU,CACvC,GAAI,YAEJ,EAAA,EAAA,KAAC,KAAD,CACE,mBAAkB,EAClB,UAAW,EACX,MAAO,CAAE,aAAc,OAAQ,CAE9B,WACE,CAAA,CACK,CAAA,CACoB,CAAA,EAItC,EAAgB,YAAc,kBCrE9B,IAAa,GAAA,EAAA,EAAA,KACX,CACE,oFAEA,8BACA,0BACA,mBACA,6DAEA,oDACA,kHACA,gHACA,iHACA,qEAEA,kDACA,qDACA,kHACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CAEF,qHACA,8IACA,6EACA,8EAEA,0DACA,0DACA,gEACD,CACD,GAAI,CAEF,uHACA,8IACA,6EACA,8EAEA,2DACA,0DACA,gEACD,CACD,GAAI,CAEF,uHACA,8IACA,6EACA,8EAEA,2DACA,0DACA,gEACD,CACF,CACD,OAAQ,CACN,QAAS,GACT,QAAS,GACT,QAAS,GACV,CACD,SAAU,CACR,KAAM,uBACN,MAAO,GACR,CACD,cAAe,CACb,KAAM,sBACN,MAAO,GACR,CACF,CACD,gBAAiB,CACf,SAAU,GACV,cAAe,GACf,KAAM,KACN,OAAQ,UACT,CACF,CACF,CAEY,GAAA,EAAA,EAAA,KACX,CACE,kDAEA,0GACA,sGACA,+HAEA,qGACA,gGACA,2HACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CACF,0GACA,sGACD,CACD,GAAI,CACF,0GACA,sGACD,CACD,GAAI,CACF,0GACA,sGACD,CACF,CACD,SAAU,CACR,KAAM,iBACN,MAAO,iBACR,CACF,CACD,gBAAiB,CACf,KAAM,KACN,SAAU,GACX,CACF,CACF,CCrHY,GAAA,EAAA,EAAA,KACX,CACE,qDACA,eACA,wBACA,mCACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CACF,kBACA,sDACA,oDACD,CACD,GAAI,CACF,kBACA,sDACA,oDACD,CACD,GAAI,CACF,kBACA,sDACA,oDACD,CACF,CACD,OAAQ,CACN,QAAS,GACT,QAAS,GACT,QAAS,GACV,CACD,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,GACT,CACF,CAMD,iBAAkB,CAEhB,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CAED,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CAED,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CACF,CACD,gBAAiB,CACf,KAAM,KACN,MAAO,aACP,OAAQ,UACT,CACF,CACF,CC/EK,OACJ,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,eACT,EAAA,EAAA,KAAC,EAAA,MAAD,EAAS,CAAA,CACJ,CAAA,CAGI,GAAgC,CAC3C,WACA,aACA,eACuC,CACvC,GAAM,CAAE,OAAM,UAAW,GAA2B,CAC9C,CAAE,QAAO,SAAU,GAA+B,CAExD,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAqB,CAAE,OAAM,SAAQ,QAAO,YAAW,CAAC,CAAE,cAAY,gBACpF,IAAS,OACR,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IAAU,aAAe,IAAa,IAAA,IAAY,EAAA,EAAA,KAAC,EAAD,EAAqB,CAAA,CAAG,GAC1E,IAAU,aAAe,IAAe,IAAA,GAAY,GAAG,EAAQ,IAAM,GACrE,CAAA,CAAA,CAEA,CAAA,EAIX,EAA6B,YAAc,gCCtB3C,IAAa,GAAuB,CAClC,WAAW,GACX,WACA,aAAc,EACd,YACA,MACA,GAAG,KAC2B,CAC9B,GAAM,CACJ,UAAW,EACX,QACA,cACA,WACA,OACA,SACA,YACE,GAA2B,CAEzB,EAAS,GAAG,EAAU,SAAA,EAAA,EAAA,QAAe,GACrC,EAAY,CAAC,GAAG,EAAM,MAAM,CAAC,CAAC,QAAQ,EAAO,CAE7C,OAAuB,CAC3B,IAAM,EAAa,CAAC,GAAG,EAAM,MAAM,CAAC,CAAC,EAAY,GAEjD,MAAO,CAAC,EAAE,GAAc,EAAM,IAAI,EAAW,EAAE,SAAS,WAAW,KACjE,CAEE,EACA,IAAc,EAAyB,SAClC,EAAY,EAAyB,WAClC,aAuBd,OApBA,EAAA,EAAA,gBACE,EAAS,GACU,IAAI,IAAI,EAAM,CAEf,IACd,EACA,CAAC,EAAe,EAAW,WAAa,GAAG,CAAC,OAAO,GAAK,CAAC,CAAC,EAAE,CAC7D,CACD,KAEW,CACX,EAAS,IACP,EAAM,OAAO,EAAO,CAEb,GACP,GAGH,EAAE,CAAC,EAGJ,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,wBACrB,GAAI,EACC,MACL,aAAY,EACZ,GAAK,IAAkB,UAAY,CACjC,eAAgB,OACjB,CACD,UAAW,EAAgB,CACzB,OACA,SACA,WACA,gBACD,CAAC,CACF,GAAI,YAEJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,aAAY,EACZ,mBAAkB,CAAC,GAAY,CAAC,EAChC,GAAK,CAAC,GACJ,CAAC,GAAY,CACX,YAAe,IAAc,EAAU,CACxC,CACO,WACV,UAAW,EAAkB,CAC3B,OACA,WACA,YACD,CAAC,WAEF,EAAA,EAAA,KAAC,EAA2B,SAA5B,CACE,MAAO,CACL,MAAO,EACP,MAAO,EACR,UAEA,IAAY,EAAA,EAAA,KAAC,EAAD,EAAgC,CAAA,CACT,CAAA,CAC/B,CAAA,CACN,CAAA,EAIT,EAAoB,YAAc,uBC/GlC,IAAM,GAAA,EAAA,EAAA,KACJ,CACE,oBACA,2DACA,iDACA,+CACA,iDACD,CACD,CACE,SAAU,CACR,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,YACT,CACF,CACF,CACF,CAEY,GAA4B,CACvC,YACA,cACmC,CACnC,GAAM,CAAE,SAAU,GAA+B,CAEjD,OAAO,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAU,CAAE,QAAO,YAAW,CAAC,CAAG,WAAgB,CAAA,EAG5E,EAAyB,YAAc,4BC7BvC,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,KAAA,EACA,UAAA,EACA,cAAA,EACD,CAAC,CAEF,EAAgB,YAAc,kBAC9B,EAAK,YAAc,uBACnB,EAAU,YAAc,4BACxB,EAAc,YAAc"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/progress-tracker/ProgressTracker.styles.ts","../../src/progress-tracker/ProgressTrackerContext.ts","../../src/progress-tracker/ProgressTracker.tsx","../../src/progress-tracker/ProgressTrackerStep.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.tsx","../../src/progress-tracker/ProgressTrackerStep.tsx","../../src/progress-tracker/ProgressTrackerStepLabel.tsx","../../src/progress-tracker/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\n\nexport const progressList = cx([\n 'flex flex-nowrap items-start group/list',\n 'data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',\n 'data-[orientation=vertical]:flex-col',\n])\n","import { createContext, type Dispatch, type SetStateAction, useContext } from 'react'\n\nimport type { ProgressTrackerProps } from './ProgressTracker'\n\n// Interfaces\nexport type ProgressTrackerContextInterface = Required<\n Pick<ProgressTrackerProps, 'stepIndex' | 'size' | 'intent' | 'readOnly'>\n> &\n Pick<ProgressTrackerProps, 'onStepClick'> & {\n steps: Map<string, string[]>\n setSteps: Dispatch<SetStateAction<Map<string, string[]>>>\n }\n\nexport interface ProgressTrackerStepContextInterface {\n index: number\n state: 'active' | 'complete' | 'incomplete'\n}\n\n// Contexts\nexport const ProgressTrackerContext = createContext<ProgressTrackerContextInterface>(\n {} as ProgressTrackerContextInterface\n)\n\nexport const ProgressTrackerStepContext = createContext<ProgressTrackerStepContextInterface>(\n {} as ProgressTrackerStepContextInterface\n)\n\n// Hooks\nexport const useProgressTrackerContext = () => useContext(ProgressTrackerContext)\n\nexport const useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext)\n\nexport const ID_PREFIX = ':progress-tracker'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type PropsWithChildren, useState } from 'react'\n\nimport { progressList } from './ProgressTracker.styles'\nimport {\n ProgressTrackerContext,\n type ProgressTrackerContextInterface,\n} from './ProgressTrackerContext'\nimport type { StepIndicatorVariantProps } from './ProgressTrackerStepIndicator.styles'\n\nexport interface ProgressTrackerProps\n extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent'> {\n /**\n * The orientation of the progress tracker\n * @default 'horizontal\"\n */\n orientation?: 'horizontal' | 'vertical'\n /**\n * The index of the current step.\n * @default 0\n */\n stepIndex?: number\n /**\n * Event handler called when clicking on a step.\n */\n onStepClick?: (stepIndex: number) => void\n /**\n * Sets the component as interactive or not.\n * @default false\n */\n readOnly?: boolean\n}\n\nexport const ProgressTracker = ({\n stepIndex = 0,\n onStepClick,\n readOnly = false,\n intent = 'support',\n size = 'lg',\n orientation = 'horizontal',\n children,\n className,\n ref,\n ...rest\n}: PropsWithChildren<ProgressTrackerProps>) => {\n const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())\n\n const Component = readOnly ? 'div' : 'nav'\n\n return (\n <ProgressTrackerContext.Provider\n value={{ stepIndex, onStepClick, steps, setSteps, size, intent, readOnly }}\n >\n <Component\n ref={ref}\n data-spark-component=\"progress-tracker\"\n className={cx('inline-flex', className)}\n {...rest}\n >\n <ol\n data-orientation={orientation}\n className={progressList}\n style={{ counterReset: 'step' }}\n >\n {children}\n </ol>\n </Component>\n </ProgressTrackerContext.Provider>\n )\n}\n\nProgressTracker.displayName = 'ProgressTracker'\n","import { cva } from 'class-variance-authority'\n\nexport const stepItemVariant = cva(\n [\n 'relative inline-flex items-start flex-auto first:grow-0 justify-center group/item',\n // Progress Track\n 'after:absolute after:z-base',\n 'last:after:content-none',\n 'after:bg-outline',\n 'group-data-[orientation=horizontal]/list:before:bg-outline',\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:px-[1px]',\n 'group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base',\n 'group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0',\n 'group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]',\n 'first:group-data-[orientation=horizontal]/list:before:content-none',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:py-[1px]',\n 'group-data-[orientation=vertical]/list:items-start',\n 'group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]',\n ],\n {\n variants: {\n size: {\n sm: [\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]',\n 'group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]',\n 'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]',\n 'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:after:left-[8px]',\n 'group-data-[orientation=vertical]/list:after:top-[25px]',\n 'first:group-data-[orientation=vertical]/list:after:top-[21px]',\n ],\n md: [\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]',\n 'group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]',\n 'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]',\n 'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:after:left-[12px]',\n 'group-data-[orientation=vertical]/list:after:top-[33px]',\n 'first:group-data-[orientation=vertical]/list:after:top-[29px]',\n ],\n lg: [\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]',\n 'group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]',\n 'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]',\n 'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:after:left-[16px]',\n 'group-data-[orientation=vertical]/list:after:top-[41px]',\n 'first:group-data-[orientation=vertical]/list:after:top-[37px]',\n ],\n },\n intent: {\n support: '',\n neutral: '',\n success: '',\n },\n disabled: {\n true: 'before:opacity-dim-3',\n false: '',\n },\n disabledAfter: {\n true: 'after:opacity-dim-3',\n false: '',\n },\n },\n defaultVariants: {\n disabled: false,\n disabledAfter: false,\n size: 'lg',\n intent: 'support',\n },\n }\n)\n\nexport const stepButtonVariant = cva(\n [\n 'relative flex group/btn disabled:cursor-default',\n // Horizontal orientation\n 'group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center',\n 'group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm',\n 'group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0',\n // Vertical orientation\n 'group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start',\n 'group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm',\n 'group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0',\n ],\n {\n variants: {\n size: {\n sm: [\n 'group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]',\n 'group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]',\n ],\n md: [\n 'group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]',\n 'group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]',\n ],\n lg: [\n 'group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]',\n 'group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]',\n ],\n },\n readOnly: {\n true: 'cursor-default',\n false: 'cursor-pointer',\n },\n },\n defaultVariants: {\n size: 'lg',\n readOnly: false,\n },\n }\n)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n [\n 'relative flex shrink-0 justify-center items-center',\n 'rounded-full',\n 'text-body-2 font-bold',\n 'group-disabled/btn:opacity-dim-3',\n ],\n {\n variants: {\n size: {\n sm: [\n 'w-sz-16 h-sz-16',\n 'group-data-[orientation=horizontal]/list:mt-[-16px]',\n 'group-data-[orientation=vertical]/list:ml-[-16px]',\n ],\n md: [\n 'w-sz-24 h-sz-24',\n 'group-data-[orientation=horizontal]/list:mt-[-24px]',\n 'group-data-[orientation=vertical]/list:ml-[-24px]',\n ],\n lg: [\n 'w-sz-32 h-sz-32',\n 'group-data-[orientation=horizontal]/list:mt-[-32px]',\n 'group-data-[orientation=vertical]/list:ml-[-32px]',\n ],\n },\n intent: {\n support: '',\n neutral: '',\n success: '',\n },\n state: {\n complete: '',\n incomplete: '',\n active: '',\n },\n },\n /**\n * Known type issue with CVA compoundVariants and VS Code/Intellisense:\n * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163\n * */\n /* @ts-ignore */\n compoundVariants: [\n // Support\n {\n intent: 'support',\n state: ['complete', 'incomplete'],\n class: [\n 'text-on-support-container bg-support-container',\n 'group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered',\n 'group-hover/btn:group-data-[interactive=false]/btn:bg-support-container',\n ],\n },\n {\n intent: 'support',\n state: 'active',\n class: 'text-on-support bg-support',\n },\n // Neutral\n {\n intent: 'neutral',\n state: ['complete', 'incomplete'],\n class: [\n 'text-on-neutral-container bg-neutral-container',\n 'group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered',\n 'group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container',\n ],\n },\n {\n intent: 'neutral',\n state: 'active',\n class: 'text-on-neutral bg-neutral',\n },\n // Success\n {\n intent: 'success',\n state: ['complete', 'incomplete'],\n class: [\n 'text-on-success-container bg-success-container',\n 'group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered',\n 'group-hover/btn:group-data-[interactive=false]/btn:bg-success-container',\n ],\n },\n {\n intent: 'success',\n state: 'active',\n class: 'text-on-success bg-success',\n },\n ],\n defaultVariants: {\n size: 'lg',\n state: 'incomplete',\n intent: 'support',\n },\n }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n /**\n * The content to be rendered when step status is complete (checkmark icon by default)\n */\n complete?: ReactNode\n /**\n * The content to be rendered when step status is incomplete (step index by default)\n */\n incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n <Icon size=\"sm\">\n <Check />\n </Icon>\n)\n\nexport const ProgressTrackerStepIndicator = ({\n complete,\n incomplete,\n className,\n}: ProgressTrackerStepIndicatorProps) => {\n const { size, intent } = useProgressTrackerContext()\n const { index, state } = useProgressTrackerStepContext()\n\n return (\n <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n {size !== 'sm' && (\n <>\n {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n </>\n )}\n </span>\n )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n ID_PREFIX,\n ProgressTrackerStepContext,\n useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n (\n | {\n disabled?: boolean\n children: ReactNode\n }\n | {\n disabled?: boolean\n 'aria-label': string\n }\n )\n\nexport const ProgressTrackerStep = ({\n disabled = false,\n children,\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: ProgressTrackerStepProps) => {\n const {\n stepIndex: currentStepIndex,\n steps,\n onStepClick,\n setSteps,\n size,\n intent,\n readOnly,\n } = useProgressTrackerContext()\n\n const stepId = `${ID_PREFIX}-step-${useId()}`\n const stepIndex = [...steps.keys()].indexOf(stepId)\n\n const disabledAfter = (() => {\n const nextStepId = [...steps.keys()][stepIndex + 1]\n\n return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n })()\n\n const progressState = (() => {\n if (stepIndex === currentStepIndex) return 'active'\n else if (stepIndex < currentStepIndex) return 'complete'\n else return 'incomplete'\n })()\n\n useEffect(() => {\n setSteps(steps => {\n const newSteps = new Map(steps)\n\n return newSteps.set(\n stepId,\n [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n )\n })\n\n return () => {\n setSteps(steps => {\n steps.delete(stepId)\n\n return steps\n })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return (\n <li\n data-spark-component=\"progress-tracker-step\"\n id={stepId}\n ref={ref}\n data-state={progressState}\n {...(progressState === 'active' && {\n 'aria-current': 'step',\n })}\n className={stepItemVariant({\n size,\n intent,\n disabled,\n disabledAfter,\n })}\n {...rest}\n >\n <button\n type=\"button\"\n aria-label={ariaLabel}\n data-interactive={!disabled && !readOnly}\n {...(!disabled &&\n !readOnly && {\n onClick: () => onStepClick?.(stepIndex),\n })}\n disabled={disabled}\n className={stepButtonVariant({\n size,\n readOnly,\n className,\n })}\n >\n <ProgressTrackerStepContext.Provider\n value={{\n index: stepIndex,\n state: progressState,\n }}\n >\n {children || <ProgressTrackerStepIndicator />}\n </ProgressTrackerStepContext.Provider>\n </button>\n </li>\n )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n children: ReactNode\n}\n\nconst stepLabel = cva(\n [\n 'flex text-body-2 ',\n 'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n 'group-data-[orientation=horizontal]/list:mt-md',\n 'group-data-[orientation=vertical]/list:ml-md',\n 'group-data-[orientation=vertical]/list:my-auto',\n ],\n {\n variants: {\n state: {\n complete: '',\n incomplete: '',\n active: 'font-bold',\n },\n },\n }\n)\n\nexport const ProgressTrackerStepLabel = ({\n className,\n children,\n}: ProgressTrackerStepLabelProps) => {\n const { state } = useProgressTrackerStepContext()\n\n return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n ProgressTrackerStepIndicator as StepIndicator,\n type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\n/**\n * A component that displays a multi-step process with visual indicators for completed, current, and upcoming steps.\n */\nexport const ProgressTracker: typeof Root & {\n Step: typeof Step\n StepLabel: typeof StepLabel\n StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n Step,\n StepLabel,\n StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"mappings":"yQAEA,IAAa,GAAA,EAAA,EAAA,IAAkB,CAC7B,0CACA,8EACA,uCACD,CAAC,CCaW,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAEY,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAGY,OAAA,EAAA,EAAA,YAA6C,EAAuB,CAEpE,OAAA,EAAA,EAAA,YAAiD,EAA2B,CAE5E,EAAY,oBCCZ,GAAmB,CAC9B,YAAY,EACZ,cACA,WAAW,GACX,SAAS,UACT,OAAO,KACP,cAAc,aACd,WACA,YACA,MACA,GAAG,KAC0C,CAC7C,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAA+D,IAAI,IAAM,CAEjF,EAAY,EAAW,MAAQ,MAErC,OACE,EAAA,EAAA,KAAC,EAAuB,SAAxB,CACE,MAAO,CAAE,YAAW,cAAa,QAAO,WAAU,OAAM,SAAQ,WAAU,WAE1E,EAAA,EAAA,KAAC,EAAD,CACO,MACL,uBAAqB,mBACrB,WAAA,EAAA,EAAA,IAAc,cAAe,EAAU,CACvC,GAAI,YAEJ,EAAA,EAAA,KAAC,KAAD,CACE,mBAAkB,EAClB,UAAW,EACX,MAAO,CAAE,aAAc,OAAQ,CAE9B,WACE,CAAA,CACK,CAAA,CACoB,CAAA,EAItC,EAAgB,YAAc,kBCrE9B,IAAa,GAAA,EAAA,EAAA,KACX,CACE,oFAEA,8BACA,0BACA,mBACA,6DAEA,oDACA,kHACA,gHACA,iHACA,qEAEA,kDACA,qDACA,kHACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CAEF,qHACA,8IACA,6EACA,8EAEA,0DACA,0DACA,gEACD,CACD,GAAI,CAEF,uHACA,8IACA,6EACA,8EAEA,2DACA,0DACA,gEACD,CACD,GAAI,CAEF,uHACA,8IACA,6EACA,8EAEA,2DACA,0DACA,gEACD,CACF,CACD,OAAQ,CACN,QAAS,GACT,QAAS,GACT,QAAS,GACV,CACD,SAAU,CACR,KAAM,uBACN,MAAO,GACR,CACD,cAAe,CACb,KAAM,sBACN,MAAO,GACR,CACF,CACD,gBAAiB,CACf,SAAU,GACV,cAAe,GACf,KAAM,KACN,OAAQ,UACT,CACF,CACF,CAEY,GAAA,EAAA,EAAA,KACX,CACE,kDAEA,0GACA,sGACA,+HAEA,qGACA,gGACA,2HACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CACF,0GACA,sGACD,CACD,GAAI,CACF,0GACA,sGACD,CACD,GAAI,CACF,0GACA,sGACD,CACF,CACD,SAAU,CACR,KAAM,iBACN,MAAO,iBACR,CACF,CACD,gBAAiB,CACf,KAAM,KACN,SAAU,GACX,CACF,CACF,CCrHY,GAAA,EAAA,EAAA,KACX,CACE,qDACA,eACA,wBACA,mCACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CACF,kBACA,sDACA,oDACD,CACD,GAAI,CACF,kBACA,sDACA,oDACD,CACD,GAAI,CACF,kBACA,sDACA,oDACD,CACF,CACD,OAAQ,CACN,QAAS,GACT,QAAS,GACT,QAAS,GACV,CACD,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,GACT,CACF,CAMD,iBAAkB,CAEhB,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CAED,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CAED,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CACF,CACD,gBAAiB,CACf,KAAM,KACN,MAAO,aACP,OAAQ,UACT,CACF,CACF,CC/EK,OACJ,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,eACT,EAAA,EAAA,KAAC,EAAA,MAAD,EAAS,CAAA,CACJ,CAAA,CAGI,GAAgC,CAC3C,WACA,aACA,eACuC,CACvC,GAAM,CAAE,OAAM,UAAW,GAA2B,CAC9C,CAAE,QAAO,SAAU,GAA+B,CAExD,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAqB,CAAE,OAAM,SAAQ,QAAO,YAAW,CAAC,CAAE,cAAY,gBACpF,IAAS,OACR,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IAAU,aAAe,IAAa,IAAA,IAAY,EAAA,EAAA,KAAC,EAAD,EAAqB,CAAA,CAAG,GAC1E,IAAU,aAAe,IAAe,IAAA,GAAY,GAAG,EAAQ,IAAM,GACrE,CAAA,CAAA,CAEA,CAAA,EAIX,EAA6B,YAAc,gCCtB3C,IAAa,GAAuB,CAClC,WAAW,GACX,WACA,aAAc,EACd,YACA,MACA,GAAG,KAC2B,CAC9B,GAAM,CACJ,UAAW,EACX,QACA,cACA,WACA,OACA,SACA,YACE,GAA2B,CAEzB,EAAS,GAAG,EAAU,SAAA,EAAA,EAAA,QAAe,GACrC,EAAY,CAAC,GAAG,EAAM,MAAM,CAAC,CAAC,QAAQ,EAAO,CAE7C,OAAuB,CAC3B,IAAM,EAAa,CAAC,GAAG,EAAM,MAAM,CAAC,CAAC,EAAY,GAEjD,MAAO,CAAC,EAAE,GAAc,EAAM,IAAI,EAAW,EAAE,SAAS,WAAW,KACjE,CAEE,EACA,IAAc,EAAyB,SAClC,EAAY,EAAyB,WAClC,aAuBd,OApBA,EAAA,EAAA,gBACE,EAAS,GACU,IAAI,IAAI,EAAM,CAEf,IACd,EACA,CAAC,EAAe,EAAW,WAAa,GAAG,CAAC,OAAO,GAAK,CAAC,CAAC,EAAE,CAC7D,CACD,KAEW,CACX,EAAS,IACP,EAAM,OAAO,EAAO,CAEb,GACP,GAGH,EAAE,CAAC,EAGJ,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,wBACrB,GAAI,EACC,MACL,aAAY,EACZ,GAAK,IAAkB,UAAY,CACjC,eAAgB,OACjB,CACD,UAAW,EAAgB,CACzB,OACA,SACA,WACA,gBACD,CAAC,CACF,GAAI,YAEJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,aAAY,EACZ,mBAAkB,CAAC,GAAY,CAAC,EAChC,GAAK,CAAC,GACJ,CAAC,GAAY,CACX,YAAe,IAAc,EAAU,CACxC,CACO,WACV,UAAW,EAAkB,CAC3B,OACA,WACA,YACD,CAAC,WAEF,EAAA,EAAA,KAAC,EAA2B,SAA5B,CACE,MAAO,CACL,MAAO,EACP,MAAO,EACR,UAEA,IAAY,EAAA,EAAA,KAAC,EAAD,EAAgC,CAAA,CACT,CAAA,CAC/B,CAAA,CACN,CAAA,EAIT,EAAoB,YAAc,uBC/GlC,IAAM,GAAA,EAAA,EAAA,KACJ,CACE,oBACA,2DACA,iDACA,+CACA,iDACD,CACD,CACE,SAAU,CACR,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,YACT,CACF,CACF,CACF,CAEY,GAA4B,CACvC,YACA,cACmC,CACnC,GAAM,CAAE,SAAU,GAA+B,CAEjD,OAAO,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAU,CAAE,QAAO,YAAW,CAAC,CAAG,WAAgB,CAAA,EAG5E,EAAyB,YAAc,4BC1BvC,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,KAAA,EACA,UAAA,EACA,cAAA,EACD,CAAC,CAEF,EAAgB,YAAc,kBAC9B,EAAK,YAAc,uBACnB,EAAU,YAAc,4BACxB,EAAc,YAAc"}
|