npm - @spark-ui/components - Versions diffs - 17.9.3 → 17.10.0 - Mend

@spark-ui/components 17.9.3 → 17.10.0

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.

Files changed (33) hide show

package/dist/badge/index.js +1 -1
package/dist/badge/index.js.map +1 -1
package/dist/badge/index.mjs +3 -3
package/dist/badge/index.mjs.map +1 -1
package/dist/breadcrumb/index.js +1 -1
package/dist/breadcrumb/index.js.map +1 -1
package/dist/breadcrumb/index.mjs +1 -1
package/dist/breadcrumb/index.mjs.map +1 -1
package/dist/form-field/index.js +1 -1
package/dist/form-field/index.mjs +1 -1
package/dist/{form-field-OhKW7u5I.mjs → form-field-CV5dzt-I.mjs} +2 -2
package/dist/{form-field-OhKW7u5I.mjs.map → form-field-CV5dzt-I.mjs.map} +1 -1
package/dist/{form-field-1sKqNg7F.js → form-field-CYGgse45.js} +2 -2
package/dist/{form-field-1sKqNg7F.js.map → form-field-CYGgse45.js.map} +1 -1
package/dist/progress-tracker/index.js +1 -1
package/dist/progress-tracker/index.js.map +1 -1
package/dist/progress-tracker/index.mjs +2 -2
package/dist/progress-tracker/index.mjs.map +1 -1
package/dist/rating/index.js +1 -1
package/dist/rating/index.mjs +1 -1
package/dist/rating-display/index.js +1 -1
package/dist/rating-display/index.js.map +1 -1
package/dist/rating-display/index.mjs +3 -3
package/dist/rating-display/index.mjs.map +1 -1
package/dist/tabs/index.js +1 -1
package/dist/tabs/index.js.map +1 -1
package/dist/tabs/index.mjs +1 -1
package/dist/tabs/index.mjs.map +1 -1
package/dist/text-link/index.js +1 -1
package/dist/text-link/index.js.map +1 -1
package/dist/text-link/index.mjs +1 -1
package/dist/text-link/index.mjs.map +1 -1
package/package.json +5 -5

package/dist/progress-tracker/index.js.map CHANGED Viewed

	@@ -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-highlight',\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\n/* The visual indicator (circle or checkmark) for a progress tracker step. Renders a <span> element. /\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\n/* An individual step in the progress tracker. Renders a <li> element. /\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\n/* The text label for a progress tracker step. Renders a <span> element. /\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,CAII,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,uBChHlC,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,CAGY,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,4BC3BvC,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-highlight',\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\n/* The visual indicator (circle or checkmark) for a progress tracker step. Renders a <span> element. /\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\n/* An individual step in the progress tracker. Renders a <li> element. /\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-medium',\n },\n },\n }\n)\n\n/* The text label for a progress tracker step. Renders a <span> element. /\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,CAII,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,uBChHlC,IAAM,GAAA,EAAA,EAAA,KACJ,CACE,mBACA,2DACA,iDACA,+CACA,iDACD,CACD,CACE,SAAU,CACR,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,cACT,CACF,CACF,CACF,CAGY,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,4BC3BvC,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"}

package/dist/progress-tracker/index.mjs CHANGED Viewed

@@ -274,7 +274,7 @@ w.displayName = "ProgressTracker.Step";
 //#endregion
 //#region src/progress-tracker/ProgressTrackerStepLabel.tsx
 var T = t([
-	"flex text-body-2 ",
+	"flex text-body-2",
 	"text-on-surface group-disabled/btn:text-on-surface/dim-1",
 	"group-data-[orientation=horizontal]/list:mt-md",
 	"group-data-[orientation=vertical]/list:ml-md",
@@ -282,7 +282,7 @@ var T = t([
 ], { variants: { state: {
 	complete: "",
 	incomplete: "",
-	active: "font-bold"
+	active: "font-medium"
 } } }), E = ({ className: e, children: t }) => {
 	let { state: n } = g();
 	return /* @__PURE__ */ l("span", {

package/dist/progress-tracker/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","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-highlight',\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\n/* The visual indicator (circle or checkmark) for a progress tracker step. Renders a <span> element. /\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\n/* An individual step in the progress tracker. Renders a <li> element. /\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\n/* The text label for a progress tracker step. Renders a <span> element. /\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":"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"}
1	+ {"version":3,"file":"index.mjs","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-highlight',\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\n/* The visual indicator (circle or checkmark) for a progress tracker step. Renders a <span> element. /\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\n/* An individual step in the progress tracker. Renders a <li> element. /\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-medium',\n },\n },\n }\n)\n\n/* The text label for a progress tracker step. Renders a <span> element. /\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":"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"}

package/dist/rating/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../form-field-1sKqNg7F.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-combined-state`),o=require(`@spark-ui/icons/StarFill`),s=require(`@spark-ui/icons/StarOutline`);var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:+(e>=t+1)}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){V&&(F(e+1),A.current[e]?.focus())}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../form-field-CYGgse45.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-combined-state`),o=require(`@spark-ui/icons/StarFill`),s=require(`@spark-ui/icons/StarOutline`);var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:+(e>=t+1)}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){V&&(F(e+1),A.current[e]?.focus())}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
 //# sourceMappingURL=index.js.map

package/dist/rating/index.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
-import { n as t } from "../form-field-OhKW7u5I.mjs";
+import { n as t } from "../form-field-CV5dzt-I.mjs";
 import { cva as n, cx as r } from "class-variance-authority";
 import { useCallback as i, useId as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/rating-display/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/StarFill`),o=require(`@spark-ui/icons/StarOutline`);var s=(0,r.createContext)(null),c=({value:e,size:t,count:n,children:r})=>(0,i.jsx)(s.Provider,{value:{value:e,size:t,count:n},children:r}),l=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`RatingDisplay compound components must be used within RatingDisplay.`);return e},u=({value:t=0,size:n=`md`,count:r,asChild:a=!1,ref:o,children:s,...l})=>(0,i.jsx)(c,{value:t??0,size:n,count:r,children:(0,i.jsx)(a?e.Slot:`div`,{ref:o,className:`gap-x-sm relative inline-flex items-center`,"data-spark-component":`rating-display`,...l,children:s})});u.displayName=`RatingDisplay`;var d=(0,n.cva)(`text-on-surface/dim-1`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),f=({className:e,children:t,...n})=>{let{count:r,size:a}=l();if(r===void 0)return null;let o=typeof t==`function`?t(r):t??r;return(0,i.jsxs)(`span`,{className:d({size:a??`md`,className:e}),...n,children:[`(`,o,`)`]})};f.displayName=`RatingDisplay.Count`;var p=(0,n.cva)([`relative block after:absolute after:block after:inset-0`],{variants:{gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},defaultVariants:{gap:`sm`}}),m=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-3`},design:{filled:[`text-main-variant`],outlined:[`text-on-surface/dim-3`]}}}),h=({value:e,size:r})=>(0,i.jsxs)(`div`,{"data-spark-component":`rating-display-star`,"data-part":`star`,className:p({gap:r===`lg`?`md`:`sm`}),children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`absolute overflow-hidden`),style:{width:e*100+`%`},children:(0,i.jsx)(t.t,{className:m({size:r,design:`filled`}),children:(0,i.jsx)(a.StarFill,{})})}),(0,i.jsx)(t.t,{className:m({size:r,design:`outlined`}),children:(0,i.jsx)(o.StarOutline,{})})]});function g(e){return Math.round(e/.5)*.5}function _(e){let t=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(t,{minimumFractionDigits:0,maximumFractionDigits:1}).format(e)}function v({value:e,index:t}){if(e===void 0)return 0;let n=t+1,r=g(e);return Math.ceil(r)<n?0:r>=n?1:.5}function y(e){return e===void 0||e<1?0:e<4?.5:1}var b=({size:e,variant:t=`default`,getFillMode:r})=>{let{value:a,size:o}=l(),s=e??o,c=e=>r?r({index:e,value:a}):t===`single-star`?y(a):v({index:e,value:a}),u=t===`single-star`?[c(0)]:Array.from({length:5},(e,t)=>c(t));return(0,i.jsx)(`div`,{"data-spark-component":`rating-display-stars`,className:(0,n.cx)(s===`lg`?`gap-x-md`:`gap-x-sm`,`flex`),children:u.map((e,t)=>(0,i.jsx)(h,{size:s,value:e},t))})};b.displayName=`RatingDisplay.Stars`;var x=(0,n.cva)(`text-on-surface font-bold`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),S=({className:e,children:t,...n})=>{let{value:r,size:a}=l(),o=_(r),s=typeof t==`function`?t(o,r):t??o;return(0,i.jsx)(`span`,{"data-spark-component":`rating-display-value`,className:x({size:a??`md`,className:e}),...n,children:s})};S.displayName=`RatingDisplay.Value`;var C=Object.assign(u,{Stars:b,Value:S,Count:f});C.displayName=`RatingDisplay`,b.displayName=`RatingDisplay.Stars`,S.displayName=`RatingDisplay.Value`,f.displayName=`RatingDisplay.Count`,exports.RatingDisplay=C;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/StarFill`),o=require(`@spark-ui/icons/StarOutline`);var s=(0,r.createContext)(null),c=({value:e,size:t,count:n,children:r})=>(0,i.jsx)(s.Provider,{value:{value:e,size:t,count:n},children:r}),l=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`RatingDisplay compound components must be used within RatingDisplay.`);return e},u=({value:t=0,size:n=`md`,count:r,asChild:a=!1,ref:o,children:s,...l})=>(0,i.jsx)(c,{value:t??0,size:n,count:r,children:(0,i.jsx)(a?e.Slot:`div`,{ref:o,className:`gap-x-sm relative inline-flex items-center`,"data-spark-component":`rating-display`,...l,children:s})});u.displayName=`RatingDisplay`;var d=(0,n.cva)(`text-on-surface/dim-1`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),f=({className:e,children:t,...n})=>{let{count:r,size:a}=l();if(r===void 0)return null;let o=typeof t==`function`?t(r):t??r;return(0,i.jsxs)(`span`,{className:d({size:a??`md`,className:e}),...n,children:[`(`,o,`)`]})};f.displayName=`RatingDisplay.Count`;var p=(0,n.cva)([`relative block after:absolute after:block after:inset-0`],{variants:{gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},defaultVariants:{gap:`sm`}}),m=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-3`},design:{filled:[`text-main-variant`],outlined:[`text-on-surface/dim-3`]}}}),h=({value:e,size:r})=>(0,i.jsxs)(`div`,{"data-spark-component":`rating-display-star`,"data-part":`star`,className:p({gap:r===`lg`?`md`:`sm`}),children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`absolute overflow-hidden`),style:{width:e*100+`%`},children:(0,i.jsx)(t.t,{className:m({size:r,design:`filled`}),children:(0,i.jsx)(a.StarFill,{})})}),(0,i.jsx)(t.t,{className:m({size:r,design:`outlined`}),children:(0,i.jsx)(o.StarOutline,{})})]});function g(e){return Math.round(e/.5)*.5}function _(e){let t=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(t,{minimumFractionDigits:0,maximumFractionDigits:1}).format(e)}function v({value:e,index:t}){if(e===void 0)return 0;let n=t+1,r=g(e);return Math.ceil(r)<n?0:r>=n?1:.5}function y(e){return e===void 0||e<1?0:e<4?.5:1}var b=({size:e,variant:t=`default`,getFillMode:r})=>{let{value:a,size:o}=l(),s=e??o,c=e=>r?r({index:e,value:a}):t===`single-star`?y(a):v({index:e,value:a}),u=t===`single-star`?[c(0)]:Array.from({length:5},(e,t)=>c(t));return(0,i.jsx)(`div`,{"data-spark-component":`rating-display-stars`,className:(0,n.cx)(s===`lg`?`gap-x-md`:`gap-x-sm`,`flex`),children:u.map((e,t)=>(0,i.jsx)(h,{size:s,value:e},t))})};b.displayName=`RatingDisplay.Stars`;var x=(0,n.cva)(`text-on-surface`,{variants:{size:{sm:`text-caption-highlight`,md:`text-body-2-highlight`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),S=({className:e,children:t,...n})=>{let{value:r,size:a}=l(),o=_(r),s=typeof t==`function`?t(o,r):t??o;return(0,i.jsx)(`span`,{"data-spark-component":`rating-display-value`,className:x({size:a??`md`,className:e}),...n,children:s})};S.displayName=`RatingDisplay.Value`;var C=Object.assign(u,{Stars:b,Value:S,Count:f});C.displayName=`RatingDisplay`,b.displayName=`RatingDisplay.Stars`,S.displayName=`RatingDisplay.Value`,f.displayName=`RatingDisplay.Count`,exports.RatingDisplay=C;
 //# sourceMappingURL=index.js.map

package/dist/rating-display/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n value: number\n size: RatingDisplayStarProps['size']\n count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue \| null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n value,\n size,\n count,\n children,\n}: RatingDisplayProviderProps) => {\n return (\n <RatingDisplayContext.Provider value={{ value, size, count }}>\n {children}\n </RatingDisplayContext.Provider>\n )\n}\n\nexport const useRatingDisplay = () => {\n const context = useContext(RatingDisplayContext)\n if (!context) {\n throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n }\n\n return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n /*\n When true, merges props onto the single child element instead of rendering a div.\n * Use to render the root as a link or another custom element.\n /\n asChild?: boolean\n /\n The rating value to display, on a scale from 0 to 5.\n /\n value?: number\n /\n Sets the size of the stars.\n * @default 'md'\n /\n size?: RatingDisplayStarProps['size']\n /\n Optional count value available to `RatingDisplay.Count`.\n /\n count?: number\n /\n Accessible description of the rating content.\n /\n 'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n value = 0,\n size = 'md',\n count,\n asChild = false,\n ref,\n children,\n ...rest\n}: RatingDisplayProps) => {\n const ratingValue = value ?? 0\n const Component = asChild ? Slot : 'div'\n\n return (\n <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n <Component\n ref={ref}\n className=\"gap-x-sm relative inline-flex items-center\"\n data-spark-component=\"rating-display\"\n {...rest}\n >\n {children}\n </Component>\n </RatingDisplayProvider>\n )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n /\n Custom count content.\n * Pass a render function to receive the count value and return the content to render.\n /\n children?: ReactNode \| ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-2',\n lg: 'text-display-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n\n/* The number of ratings or reviews. Renders a <span> element. /\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n const { count, size } = useRatingDisplay()\n if (count === undefined) return null\n const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n return (\n <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n ({renderedCount})\n </span>\n )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n variants: {\n gap: {\n sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n },\n },\n defaultVariants: {\n gap: 'sm',\n },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-1',\n lg: 'text-display-3',\n },\n design: {\n filled: ['text-main-variant'],\n outlined: ['text-on-surface/dim-3'],\n },\n },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n VariantProps<typeof ratingDisplayStarIconStyles>,\n 'design'\n>\n\nexport interface RatingDisplayStarProps\n extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n return (\n <div\n data-spark-component=\"rating-display-star\"\n data-part=\"star\"\n className={ratingDisplayStarStyles({\n gap: size === 'lg' ? 'md' : 'sm',\n })}\n >\n <div className={cx('absolute overflow-hidden')} style={{ width: value 100 + '%' }}>\n <Icon\n className={ratingDisplayStarIconStyles({\n size,\n design: 'filled',\n })}\n >\n <StarFill />\n </Icon>\n </div>\n\n <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n <StarOutline />\n </Icon>\n </div>\n )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n return new Intl.NumberFormat(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 1,\n }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n if (value === undefined) return 0\n\n const starPosition = index + 1\n const formattedValue = getNearestHalfDecimal(value)\n\n if (Math.ceil(formattedValue) < starPosition) return 0\n\n return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n if (value === undefined) return 0\n if (value < 1) return 0\n if (value < 4) return 0.5\n return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n const prev = arr.slice(0, index)\n const next = arr.slice(index)\n\n return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n size?: RatingDisplayStarProps['size']\n /*\n Sets the rendering mode for stars.\n * @default 'default'\n /\n variant?: 'default' \| 'single-star'\n /\n Custom fill algorithm for each star.\n * By default, stars are rounded to the nearest 0.5.\n /\n getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/* The visual star rating display. Renders a <div> element. /\nexport const RatingDisplayStars = ({\n size,\n variant = 'default',\n getFillMode,\n}: RatingDisplayStarsProps) => {\n const { value, size: contextSize } = useRatingDisplay()\n const resolvedSize = size ?? contextSize\n const getDisplayValue = (index: number) => {\n if (getFillMode) {\n return getFillMode({ index, value })\n }\n\n return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n }\n\n const stars =\n variant === 'single-star'\n ? [getDisplayValue(0)]\n : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n return (\n <div\n data-spark-component=\"rating-display-stars\"\n className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n >\n {stars.map((starValue, index) => (\n <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n ))}\n </div>\n )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n /\n Custom value content.\n * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n * then return the content to render.\n /\n children?: ReactNode \| ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface font-bold', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-2',\n lg: 'text-display-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n\n/* The numeric rating value. Renders a <span> element. /\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n const { value, size } = useRatingDisplay()\n const formattedValue = formatRatingValue(value)\n const renderedValue =\n typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n return (\n <span\n data-spark-component=\"rating-display-value\"\n className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n {...rest}\n >\n {renderedValue}\n </span>\n )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/\n A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n Stars: typeof Stars\n Value: typeof Value\n Count: typeof Count\n} = Object.assign(Root, {\n Stars,\n Value,\n Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n value: number\n size: RatingDisplayStarProps['size']\n count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue \| null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n value,\n size,\n count,\n children,\n}: RatingDisplayProviderProps) => {\n return (\n <RatingDisplayContext.Provider value={{ value, size, count }}>\n {children}\n </RatingDisplayContext.Provider>\n )\n}\n\nexport const useRatingDisplay = () => {\n const context = useContext(RatingDisplayContext)\n if (!context) {\n throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n }\n\n return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n /*\n When true, merges props onto the single child element instead of rendering a div.\n * Use to render the root as a link or another custom element.\n /\n asChild?: boolean\n /\n The rating value to display, on a scale from 0 to 5.\n /\n value?: number\n /\n Sets the size of the stars.\n * @default 'md'\n /\n size?: RatingDisplayStarProps['size']\n /\n Optional count value available to `RatingDisplay.Count`.\n /\n count?: number\n /\n Accessible description of the rating content.\n /\n 'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n value = 0,\n size = 'md',\n count,\n asChild = false,\n ref,\n children,\n ...rest\n}: RatingDisplayProps) => {\n const ratingValue = value ?? 0\n const Component = asChild ? Slot : 'div'\n\n return (\n <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n <Component\n ref={ref}\n className=\"gap-x-sm relative inline-flex items-center\"\n data-spark-component=\"rating-display\"\n {...rest}\n >\n {children}\n </Component>\n </RatingDisplayProvider>\n )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n /\n Custom count content.\n * Pass a render function to receive the count value and return the content to render.\n /\n children?: ReactNode \| ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-2',\n lg: 'text-display-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n\n/* The number of ratings or reviews. Renders a <span> element. /\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n const { count, size } = useRatingDisplay()\n if (count === undefined) return null\n const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n return (\n <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n ({renderedCount})\n </span>\n )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n variants: {\n gap: {\n sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n },\n },\n defaultVariants: {\n gap: 'sm',\n },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-1',\n lg: 'text-display-3',\n },\n design: {\n filled: ['text-main-variant'],\n outlined: ['text-on-surface/dim-3'],\n },\n },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n VariantProps<typeof ratingDisplayStarIconStyles>,\n 'design'\n>\n\nexport interface RatingDisplayStarProps\n extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n return (\n <div\n data-spark-component=\"rating-display-star\"\n data-part=\"star\"\n className={ratingDisplayStarStyles({\n gap: size === 'lg' ? 'md' : 'sm',\n })}\n >\n <div className={cx('absolute overflow-hidden')} style={{ width: value 100 + '%' }}>\n <Icon\n className={ratingDisplayStarIconStyles({\n size,\n design: 'filled',\n })}\n >\n <StarFill />\n </Icon>\n </div>\n\n <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n <StarOutline />\n </Icon>\n </div>\n )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n return new Intl.NumberFormat(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 1,\n }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n if (value === undefined) return 0\n\n const starPosition = index + 1\n const formattedValue = getNearestHalfDecimal(value)\n\n if (Math.ceil(formattedValue) < starPosition) return 0\n\n return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n if (value === undefined) return 0\n if (value < 1) return 0\n if (value < 4) return 0.5\n return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n const prev = arr.slice(0, index)\n const next = arr.slice(index)\n\n return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n size?: RatingDisplayStarProps['size']\n /*\n Sets the rendering mode for stars.\n * @default 'default'\n /\n variant?: 'default' \| 'single-star'\n /\n Custom fill algorithm for each star.\n * By default, stars are rounded to the nearest 0.5.\n /\n getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/* The visual star rating display. Renders a <div> element. /\nexport const RatingDisplayStars = ({\n size,\n variant = 'default',\n getFillMode,\n}: RatingDisplayStarsProps) => {\n const { value, size: contextSize } = useRatingDisplay()\n const resolvedSize = size ?? contextSize\n const getDisplayValue = (index: number) => {\n if (getFillMode) {\n return getFillMode({ index, value })\n }\n\n return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n }\n\n const stars =\n variant === 'single-star'\n ? [getDisplayValue(0)]\n : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n return (\n <div\n data-spark-component=\"rating-display-stars\"\n className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n >\n {stars.map((starValue, index) => (\n <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n ))}\n </div>\n )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n /\n Custom value content.\n * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n * then return the content to render.\n /\n children?: ReactNode \| ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface', {\n variants: {\n size: {\n sm: 'text-caption-highlight',\n md: 'text-body-2-highlight',\n lg: 'text-display-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n\n/* The numeric rating value. Renders a <span> element. /\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n const { value, size } = useRatingDisplay()\n const formattedValue = formatRatingValue(value)\n const renderedValue =\n typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n return (\n <span\n data-spark-component=\"rating-display-value\"\n className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n {...rest}\n >\n {renderedValue}\n </span>\n )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/\n A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n Stars: typeof Stars\n Value: typeof Value\n Count: typeof Count\n} = Object.assign(Root, {\n Stars,\n Value,\n Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}

package/dist/rating-display/index.mjs CHANGED Viewed

@@ -139,10 +139,10 @@ var C = ({ size: e, variant: t = "default", getFillMode: n }) => {
 C.displayName = "RatingDisplay.Stars";
 //#endregion
 //#region src/rating-display/RatingDisplayValue.tsx
-var w = n("text-on-surface font-bold", {
+var w = n("text-on-surface", {
 	variants: { size: {
-		sm: "text-caption",
-		md: "text-body-2",
+		sm: "text-caption-highlight",
+		md: "text-body-2-highlight",
 		lg: "text-display-3"
 	} },
 	defaultVariants: { size: "md" }

package/dist/rating-display/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n value: number\n size: RatingDisplayStarProps['size']\n count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue \| null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n value,\n size,\n count,\n children,\n}: RatingDisplayProviderProps) => {\n return (\n <RatingDisplayContext.Provider value={{ value, size, count }}>\n {children}\n </RatingDisplayContext.Provider>\n )\n}\n\nexport const useRatingDisplay = () => {\n const context = useContext(RatingDisplayContext)\n if (!context) {\n throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n }\n\n return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n /*\n When true, merges props onto the single child element instead of rendering a div.\n * Use to render the root as a link or another custom element.\n /\n asChild?: boolean\n /\n The rating value to display, on a scale from 0 to 5.\n /\n value?: number\n /\n Sets the size of the stars.\n * @default 'md'\n /\n size?: RatingDisplayStarProps['size']\n /\n Optional count value available to `RatingDisplay.Count`.\n /\n count?: number\n /\n Accessible description of the rating content.\n /\n 'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n value = 0,\n size = 'md',\n count,\n asChild = false,\n ref,\n children,\n ...rest\n}: RatingDisplayProps) => {\n const ratingValue = value ?? 0\n const Component = asChild ? Slot : 'div'\n\n return (\n <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n <Component\n ref={ref}\n className=\"gap-x-sm relative inline-flex items-center\"\n data-spark-component=\"rating-display\"\n {...rest}\n >\n {children}\n </Component>\n </RatingDisplayProvider>\n )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n /\n Custom count content.\n * Pass a render function to receive the count value and return the content to render.\n /\n children?: ReactNode \| ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-2',\n lg: 'text-display-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n\n/* The number of ratings or reviews. Renders a <span> element. /\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n const { count, size } = useRatingDisplay()\n if (count === undefined) return null\n const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n return (\n <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n ({renderedCount})\n </span>\n )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n variants: {\n gap: {\n sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n },\n },\n defaultVariants: {\n gap: 'sm',\n },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-1',\n lg: 'text-display-3',\n },\n design: {\n filled: ['text-main-variant'],\n outlined: ['text-on-surface/dim-3'],\n },\n },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n VariantProps<typeof ratingDisplayStarIconStyles>,\n 'design'\n>\n\nexport interface RatingDisplayStarProps\n extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n return (\n <div\n data-spark-component=\"rating-display-star\"\n data-part=\"star\"\n className={ratingDisplayStarStyles({\n gap: size === 'lg' ? 'md' : 'sm',\n })}\n >\n <div className={cx('absolute overflow-hidden')} style={{ width: value 100 + '%' }}>\n <Icon\n className={ratingDisplayStarIconStyles({\n size,\n design: 'filled',\n })}\n >\n <StarFill />\n </Icon>\n </div>\n\n <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n <StarOutline />\n </Icon>\n </div>\n )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n return new Intl.NumberFormat(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 1,\n }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n if (value === undefined) return 0\n\n const starPosition = index + 1\n const formattedValue = getNearestHalfDecimal(value)\n\n if (Math.ceil(formattedValue) < starPosition) return 0\n\n return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n if (value === undefined) return 0\n if (value < 1) return 0\n if (value < 4) return 0.5\n return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n const prev = arr.slice(0, index)\n const next = arr.slice(index)\n\n return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n size?: RatingDisplayStarProps['size']\n /*\n Sets the rendering mode for stars.\n * @default 'default'\n /\n variant?: 'default' \| 'single-star'\n /\n Custom fill algorithm for each star.\n * By default, stars are rounded to the nearest 0.5.\n /\n getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/* The visual star rating display. Renders a <div> element. /\nexport const RatingDisplayStars = ({\n size,\n variant = 'default',\n getFillMode,\n}: RatingDisplayStarsProps) => {\n const { value, size: contextSize } = useRatingDisplay()\n const resolvedSize = size ?? contextSize\n const getDisplayValue = (index: number) => {\n if (getFillMode) {\n return getFillMode({ index, value })\n }\n\n return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n }\n\n const stars =\n variant === 'single-star'\n ? [getDisplayValue(0)]\n : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n return (\n <div\n data-spark-component=\"rating-display-stars\"\n className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n >\n {stars.map((starValue, index) => (\n <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n ))}\n </div>\n )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n /\n Custom value content.\n * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n * then return the content to render.\n /\n children?: ReactNode \| ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface font-bold', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-2',\n lg: 'text-display-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n\n/* The numeric rating value. Renders a <span> element. /\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n const { value, size } = useRatingDisplay()\n const formattedValue = formatRatingValue(value)\n const renderedValue =\n typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n return (\n <span\n data-spark-component=\"rating-display-value\"\n className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n {...rest}\n >\n {renderedValue}\n </span>\n )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/\n A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n Stars: typeof Stars\n Value: typeof Value\n Count: typeof Count\n} = Object.assign(Root, {\n Stars,\n Value,\n Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n value: number\n size: RatingDisplayStarProps['size']\n count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue \| null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n value,\n size,\n count,\n children,\n}: RatingDisplayProviderProps) => {\n return (\n <RatingDisplayContext.Provider value={{ value, size, count }}>\n {children}\n </RatingDisplayContext.Provider>\n )\n}\n\nexport const useRatingDisplay = () => {\n const context = useContext(RatingDisplayContext)\n if (!context) {\n throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n }\n\n return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n /*\n When true, merges props onto the single child element instead of rendering a div.\n * Use to render the root as a link or another custom element.\n /\n asChild?: boolean\n /\n The rating value to display, on a scale from 0 to 5.\n /\n value?: number\n /\n Sets the size of the stars.\n * @default 'md'\n /\n size?: RatingDisplayStarProps['size']\n /\n Optional count value available to `RatingDisplay.Count`.\n /\n count?: number\n /\n Accessible description of the rating content.\n /\n 'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n value = 0,\n size = 'md',\n count,\n asChild = false,\n ref,\n children,\n ...rest\n}: RatingDisplayProps) => {\n const ratingValue = value ?? 0\n const Component = asChild ? Slot : 'div'\n\n return (\n <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n <Component\n ref={ref}\n className=\"gap-x-sm relative inline-flex items-center\"\n data-spark-component=\"rating-display\"\n {...rest}\n >\n {children}\n </Component>\n </RatingDisplayProvider>\n )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n /\n Custom count content.\n * Pass a render function to receive the count value and return the content to render.\n /\n children?: ReactNode \| ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-2',\n lg: 'text-display-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n\n/* The number of ratings or reviews. Renders a <span> element. /\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n const { count, size } = useRatingDisplay()\n if (count === undefined) return null\n const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n return (\n <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n ({renderedCount})\n </span>\n )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n variants: {\n gap: {\n sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n },\n },\n defaultVariants: {\n gap: 'sm',\n },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n variants: {\n size: {\n sm: 'text-caption',\n md: 'text-body-1',\n lg: 'text-display-3',\n },\n design: {\n filled: ['text-main-variant'],\n outlined: ['text-on-surface/dim-3'],\n },\n },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n VariantProps<typeof ratingDisplayStarIconStyles>,\n 'design'\n>\n\nexport interface RatingDisplayStarProps\n extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n return (\n <div\n data-spark-component=\"rating-display-star\"\n data-part=\"star\"\n className={ratingDisplayStarStyles({\n gap: size === 'lg' ? 'md' : 'sm',\n })}\n >\n <div className={cx('absolute overflow-hidden')} style={{ width: value 100 + '%' }}>\n <Icon\n className={ratingDisplayStarIconStyles({\n size,\n design: 'filled',\n })}\n >\n <StarFill />\n </Icon>\n </div>\n\n <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n <StarOutline />\n </Icon>\n </div>\n )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n return new Intl.NumberFormat(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 1,\n }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n if (value === undefined) return 0\n\n const starPosition = index + 1\n const formattedValue = getNearestHalfDecimal(value)\n\n if (Math.ceil(formattedValue) < starPosition) return 0\n\n return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n if (value === undefined) return 0\n if (value < 1) return 0\n if (value < 4) return 0.5\n return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n const prev = arr.slice(0, index)\n const next = arr.slice(index)\n\n return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n size?: RatingDisplayStarProps['size']\n /*\n Sets the rendering mode for stars.\n * @default 'default'\n /\n variant?: 'default' \| 'single-star'\n /\n Custom fill algorithm for each star.\n * By default, stars are rounded to the nearest 0.5.\n /\n getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/* The visual star rating display. Renders a <div> element. /\nexport const RatingDisplayStars = ({\n size,\n variant = 'default',\n getFillMode,\n}: RatingDisplayStarsProps) => {\n const { value, size: contextSize } = useRatingDisplay()\n const resolvedSize = size ?? contextSize\n const getDisplayValue = (index: number) => {\n if (getFillMode) {\n return getFillMode({ index, value })\n }\n\n return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n }\n\n const stars =\n variant === 'single-star'\n ? [getDisplayValue(0)]\n : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n return (\n <div\n data-spark-component=\"rating-display-stars\"\n className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n >\n {stars.map((starValue, index) => (\n <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n ))}\n </div>\n )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n /\n Custom value content.\n * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n * then return the content to render.\n /\n children?: ReactNode \| ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface', {\n variants: {\n size: {\n sm: 'text-caption-highlight',\n md: 'text-body-2-highlight',\n lg: 'text-display-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n\n/* The numeric rating value. Renders a <span> element. /\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n const { value, size } = useRatingDisplay()\n const formattedValue = formatRatingValue(value)\n const renderedValue =\n typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n return (\n <span\n data-spark-component=\"rating-display-value\"\n className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n {...rest}\n >\n {renderedValue}\n </span>\n )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/\n A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n Stars: typeof Stars\n Value: typeof Value\n Count: typeof Count\n} = Object.assign(Root, {\n Stars,\n Value,\n Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}

package/dist/tabs/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-3F9Xrf4E.js`),r=require(`../icon-button-jcPwRD21.js`),i=require(`../popover-ayPbAw59.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/internal-utils`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/icons/ArrowVerticalRight`),d=require(`@spark-ui/icons/ArrowVerticalLeft`),f=require(`@base-ui/react/tabs`),p=require(`@spark-ui/icons/MoreMenuHorizontal`);var m=(0,o.createContext)({}),h=()=>{let e=(0,o.useContext)(m);if(!e)throw Error(`useTabsContext must be used within a TabsContext Provider`);return e},g=(0,a.cva)([`flex`,`data-[orientation=horizontal]:flex-col`,`data-[orientation=vertical]:flex-row`,`max-w-full`]);function _(t){return t?({...t})=>(0,s.jsx)(e.Slot,{...t}):void 0}var v=({intent:e=`support`,size:t=`md`,asChild:n=!1,forceMount:r=!1,orientation:i=`horizontal`,children:a,className:o,ref:c,...l})=>{let u=_(n);return(0,s.jsx)(m.Provider,{value:{intent:e,size:t,orientation:i,forceMount:r},children:(0,s.jsx)(f.Tabs.Root,{ref:c,orientation:i,className:g({className:o}),"data-spark-component":`tabs`,render:u,...l,children:a})})};v.displayName=`Tabs`;var y=(0,a.cva)([`w-full p-lg`,`focus-visible:u-outline-inset`],{variants:{forceMount:{true:`data-[hidden]:hidden`,false:``}}}),b=({children:e,asChild:t=!1,className:n,ref:r,forceMount:i,...a})=>{let{forceMount:o}=h(),c=_(t),l=o||i;return(0,s.jsx)(f.Tabs.Panel,{"data-spark-component":`tabs-content`,ref:r,keepMounted:l,className:y({className:n,forceMount:l}),render:c,...a,children:e})};b.displayName=`Tabs.Content`;var x=(0,a.cva)([`relative flex`]),S=(0,a.cva)([`flex w-full`,`data-[orientation=horizontal]:flex-row`,`data-[orientation=vertical]:flex-col`,`overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden`,`after:flex after:shrink after:grow after:border-outline`,`data-[orientation=horizontal]:after:border-b-sm`,`data-[orientation=vertical]:after:border-r-sm`]),C=(0,a.cva)([`h-auto! flex-none`,`border-b-sm border-outline`,`outline-hidden`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!`]),w=(e,t)=>{let[n,r]=(0,o.useState)({width:void 0,height:void 0}),i=(0,o.useRef)(null),a=(0,o.useRef)(t);return(0,o.useEffect)(()=>{a.current=t},[t]),(0,o.useEffect)(()=>{let t=e&&`current`in e?e.current:e;if(!(!t||i.current))return i.current=new ResizeObserver(([e])=>{let{inlineSize:t,blockSize:n}=e?.borderBoxSize?.[0]??{};a.current?.(e),r({width:t,height:n})}),i.current.observe(t),()=>{i.current&&i.current.unobserve(t)}},[e,i,a]),n},T=({asChild:e=!1,loop:r=!1,children:i,className:a,ref:c,...l})=>{let p=(0,o.useRef)(null),m=(0,o.useRef)(null),g=c||m,{orientation:v}=h(),y=_(e),{width:b}=w(p),[T,E]=(0,o.useState)({prev:`hidden`,next:`hidden`});(0,o.useEffect)(()=>{typeof g==`function`||!g.current||E(v===`horizontal`?{prev:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`,next:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`}:{prev:`hidden`,next:`hidden`})},[v,g,b]),(0,o.useEffect)(()=>{if(typeof g==`function`||!g.current||T.prev===`hidden`||r)return;let e=e=>{E({prev:e.scrollLeft>0?`visible`:`disabled`,next:e.scrollLeft+e.clientWidth<e.scrollWidth?`visible`:`disabled`})},t=g.current;return e(t),t.addEventListener(`scroll`,({target:t})=>e(t)),()=>t.removeEventListener(`scroll`,({target:t})=>e(t))},[g,T.prev,r]);let D=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft<=0;g.current.scrollTo({left:e?g.current.scrollLeft+g.current.scrollWidth-g.current.clientWidth:g.current.scrollLeft-g.current.clientWidth,behavior:`smooth`})},O=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft+g.current.clientWidth>=g.current.scrollWidth;g.current.scrollTo({left:e?0:g.current.scrollLeft+g.current.clientWidth,behavior:`smooth`})};return(0,s.jsxs)(`div`,{className:x({className:a}),ref:p,children:[T.prev!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:D,disabled:T.prev===`disabled`,"aria-label":`Scroll left`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(d.ArrowVerticalLeft,{})})}),(0,s.jsx)(f.Tabs.List,{"data-spark-component":`tabs-list`,ref:g,className:S(),render:y,loopFocus:r,activateOnFocus:!0,...l,children:i}),T.next!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:O,disabled:T.next===`disabled`,"aria-label":`Scroll right`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(u.ArrowVerticalRight,{})})})]})};T.displayName=`Tabs.List`;var E=(0,o.createContext)(void 0),D=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`TabsPopover components must be used within TabsPopover`);return e},O=(0,o.forwardRef)(({"aria-label":e,children:n,...a},o)=>{let{popoverTriggerRef:c}=D(),u=(0,l.useMergeRefs)(o,c);return(0,s.jsx)(i.t.Trigger,{asChild:!0,...a,children:(0,s.jsx)(r.t,{ref:u,size:`sm`,intent:`surfaceInverse`,design:`ghost`,"aria-label":e,tabIndex:-1,children:(0,s.jsx)(t.t,{children:n||(0,s.jsx)(p.MoreMenuHorizontal,{})})})})});O.displayName=`Popover.Trigger`;var k=(0,o.forwardRef)(({side:e,align:t=`start`,className:n,...r},o)=>{let{popoverSide:c}=D(),l=(0,a.cx)(`gap-sm flex flex-col`,n);return(0,s.jsx)(i.t.Content,{ref:o,...r,side:e??c,align:t,className:l})});k.displayName=`Popover.Content`;var A=({popoverSide:e,popoverTriggerRef:t,children:n})=>{let r=(0,o.useMemo)(()=>({popoverSide:e,popoverTriggerRef:t}),[e,t]),a=Object.assign((e=>(0,s.jsx)(E.Provider,{value:r,children:(0,s.jsx)(i.t,{...e,children:e.children})})),i.t,{Content:k,Trigger:O});return(0,s.jsx)(E.Provider,{value:r,children:n(a)})};A.displayName=`Popover`;var j=(0,a.cva)([`px-md`,`relative flex flex-none items-center`,`border-outline`,`hover:not-disabled:bg-surface-hovered`,`after:absolute`,`data-[active]:font-bold`,`not-data-[active]:not-disabled:cursor-pointer`,`data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2`,`data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset`,`disabled:cursor-not-allowed disabled:opacity-dim-3`,`gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md`,`[&>svg:last-child:first-child]:mx-auto`],{variants:{intent:(0,c.makeVariants)({main:[`data-[active]:text-main data-[active]:after:bg-main`],support:[`data-[active]:text-support data-[active]:after:bg-support`]}),size:{xs:[`h-sz-32 min-w-sz-32 text-caption`],sm:[`h-sz-36 min-w-sz-36 text-body-2`],md:[`h-sz-40 min-w-sz-40 text-body-1`]},hasMenu:{true:`pr-3xl`},orientation:{horizontal:``,vertical:``}},compoundVariants:[{hasMenu:!0,orientation:`vertical`,class:`w-full`}],defaultVariants:{intent:`support`,size:`md`,hasMenu:!1,orientation:`horizontal`}}),M=({asChild:e=!1,value:t,disabled:n=!1,children:r,className:i,ref:a,onKeyDown:c,renderMenu:u,...d})=>{let{intent:p,size:m,orientation:g}=h(),v=(0,o.useRef)(null),y=(0,o.useRef)(null),b=_(e),x=(0,l.useMergeRefs)(a,y),S=e=>{e.key===`F10`&&e.shiftKey&&u&&v.current&&(e.preventDefault(),v.current.click()),c?.(e)},C=!!u,w=g===`vertical`?`right`:`bottom`,T=(0,s.jsx)(f.Tabs.Tab,{"data-spark-component":`tabs-trigger`,ref:x,className:j({intent:p,size:m,hasMenu:C,orientation:g??`horizontal`,className:i}),render:b,disabled:n,value:t,onFocus:({target:e})=>e.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`}),onKeyDown:S,"aria-haspopup":C?`true`:void 0,...d,children:r});return C?(0,s.jsxs)(`div`,{className:g===`vertical`?`relative w-full`:`relative`,children:[T,(0,s.jsx)(`div`,{className:`right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2`,children:(0,s.jsx)(A,{popoverSide:w,popoverTriggerRef:v,children:e=>u?.({Popover:e})})})]}):T};M.displayName=`Tabs.Trigger`;var N=Object.assign(v,{List:T,Trigger:M,Content:b});N.displayName=`Tabs`,T.displayName=`Tabs.List`,M.displayName=`Tabs.Trigger`,b.displayName=`Tabs.Content`,exports.Tabs=N;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-3F9Xrf4E.js`),r=require(`../icon-button-jcPwRD21.js`),i=require(`../popover-ayPbAw59.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/internal-utils`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/icons/ArrowVerticalRight`),d=require(`@spark-ui/icons/ArrowVerticalLeft`),f=require(`@base-ui/react/tabs`),p=require(`@spark-ui/icons/MoreMenuHorizontal`);var m=(0,o.createContext)({}),h=()=>{let e=(0,o.useContext)(m);if(!e)throw Error(`useTabsContext must be used within a TabsContext Provider`);return e},g=(0,a.cva)([`flex`,`data-[orientation=horizontal]:flex-col`,`data-[orientation=vertical]:flex-row`,`max-w-full`]);function _(t){return t?({...t})=>(0,s.jsx)(e.Slot,{...t}):void 0}var v=({intent:e=`support`,size:t=`md`,asChild:n=!1,forceMount:r=!1,orientation:i=`horizontal`,children:a,className:o,ref:c,...l})=>{let u=_(n);return(0,s.jsx)(m.Provider,{value:{intent:e,size:t,orientation:i,forceMount:r},children:(0,s.jsx)(f.Tabs.Root,{ref:c,orientation:i,className:g({className:o}),"data-spark-component":`tabs`,render:u,...l,children:a})})};v.displayName=`Tabs`;var y=(0,a.cva)([`w-full p-lg`,`focus-visible:u-outline-inset`],{variants:{forceMount:{true:`data-[hidden]:hidden`,false:``}}}),b=({children:e,asChild:t=!1,className:n,ref:r,forceMount:i,...a})=>{let{forceMount:o}=h(),c=_(t),l=o||i;return(0,s.jsx)(f.Tabs.Panel,{"data-spark-component":`tabs-content`,ref:r,keepMounted:l,className:y({className:n,forceMount:l}),render:c,...a,children:e})};b.displayName=`Tabs.Content`;var x=(0,a.cva)([`relative flex`]),S=(0,a.cva)([`flex w-full`,`data-[orientation=horizontal]:flex-row`,`data-[orientation=vertical]:flex-col`,`overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden`,`after:flex after:shrink after:grow after:border-outline`,`data-[orientation=horizontal]:after:border-b-sm`,`data-[orientation=vertical]:after:border-r-sm`]),C=(0,a.cva)([`h-auto! flex-none`,`border-b-sm border-outline`,`outline-hidden`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!`]),w=(e,t)=>{let[n,r]=(0,o.useState)({width:void 0,height:void 0}),i=(0,o.useRef)(null),a=(0,o.useRef)(t);return(0,o.useEffect)(()=>{a.current=t},[t]),(0,o.useEffect)(()=>{let t=e&&`current`in e?e.current:e;if(!(!t||i.current))return i.current=new ResizeObserver(([e])=>{let{inlineSize:t,blockSize:n}=e?.borderBoxSize?.[0]??{};a.current?.(e),r({width:t,height:n})}),i.current.observe(t),()=>{i.current&&i.current.unobserve(t)}},[e,i,a]),n},T=({asChild:e=!1,loop:r=!1,children:i,className:a,ref:c,...l})=>{let p=(0,o.useRef)(null),m=(0,o.useRef)(null),g=c||m,{orientation:v}=h(),y=_(e),{width:b}=w(p),[T,E]=(0,o.useState)({prev:`hidden`,next:`hidden`});(0,o.useEffect)(()=>{typeof g==`function`||!g.current||E(v===`horizontal`?{prev:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`,next:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`}:{prev:`hidden`,next:`hidden`})},[v,g,b]),(0,o.useEffect)(()=>{if(typeof g==`function`||!g.current||T.prev===`hidden`||r)return;let e=e=>{E({prev:e.scrollLeft>0?`visible`:`disabled`,next:e.scrollLeft+e.clientWidth<e.scrollWidth?`visible`:`disabled`})},t=g.current;return e(t),t.addEventListener(`scroll`,({target:t})=>e(t)),()=>t.removeEventListener(`scroll`,({target:t})=>e(t))},[g,T.prev,r]);let D=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft<=0;g.current.scrollTo({left:e?g.current.scrollLeft+g.current.scrollWidth-g.current.clientWidth:g.current.scrollLeft-g.current.clientWidth,behavior:`smooth`})},O=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft+g.current.clientWidth>=g.current.scrollWidth;g.current.scrollTo({left:e?0:g.current.scrollLeft+g.current.clientWidth,behavior:`smooth`})};return(0,s.jsxs)(`div`,{className:x({className:a}),ref:p,children:[T.prev!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:D,disabled:T.prev===`disabled`,"aria-label":`Scroll left`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(d.ArrowVerticalLeft,{})})}),(0,s.jsx)(f.Tabs.List,{"data-spark-component":`tabs-list`,ref:g,className:S(),render:y,loopFocus:r,activateOnFocus:!0,...l,children:i}),T.next!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:O,disabled:T.next===`disabled`,"aria-label":`Scroll right`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(u.ArrowVerticalRight,{})})})]})};T.displayName=`Tabs.List`;var E=(0,o.createContext)(void 0),D=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`TabsPopover components must be used within TabsPopover`);return e},O=(0,o.forwardRef)(({"aria-label":e,children:n,...a},o)=>{let{popoverTriggerRef:c}=D(),u=(0,l.useMergeRefs)(o,c);return(0,s.jsx)(i.t.Trigger,{asChild:!0,...a,children:(0,s.jsx)(r.t,{ref:u,size:`sm`,intent:`surfaceInverse`,design:`ghost`,"aria-label":e,tabIndex:-1,children:(0,s.jsx)(t.t,{children:n||(0,s.jsx)(p.MoreMenuHorizontal,{})})})})});O.displayName=`Popover.Trigger`;var k=(0,o.forwardRef)(({side:e,align:t=`start`,className:n,...r},o)=>{let{popoverSide:c}=D(),l=(0,a.cx)(`gap-sm flex flex-col`,n);return(0,s.jsx)(i.t.Content,{ref:o,...r,side:e??c,align:t,className:l})});k.displayName=`Popover.Content`;var A=({popoverSide:e,popoverTriggerRef:t,children:n})=>{let r=(0,o.useMemo)(()=>({popoverSide:e,popoverTriggerRef:t}),[e,t]),a=Object.assign((e=>(0,s.jsx)(E.Provider,{value:r,children:(0,s.jsx)(i.t,{...e,children:e.children})})),i.t,{Content:k,Trigger:O});return(0,s.jsx)(E.Provider,{value:r,children:n(a)})};A.displayName=`Popover`;var j=(0,a.cva)([`px-md`,`relative flex flex-none items-center`,`border-outline`,`hover:not-disabled:bg-surface-hovered`,`after:absolute`,`data-[active]:font-medium`,`not-data-[active]:not-disabled:cursor-pointer`,`data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2`,`data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset`,`disabled:cursor-not-allowed disabled:opacity-dim-3`,`gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md`,`[&>svg:last-child:first-child]:mx-auto`],{variants:{intent:(0,c.makeVariants)({main:[`data-[active]:text-main data-[active]:after:bg-main`],support:[`data-[active]:text-support data-[active]:after:bg-support`]}),size:{xs:[`h-sz-32 min-w-sz-32 text-caption`],sm:[`h-sz-36 min-w-sz-36 text-body-2`],md:[`h-sz-40 min-w-sz-40 text-body-1`]},hasMenu:{true:`pr-3xl`},orientation:{horizontal:``,vertical:``}},compoundVariants:[{hasMenu:!0,orientation:`vertical`,class:`w-full`}],defaultVariants:{intent:`support`,size:`md`,hasMenu:!1,orientation:`horizontal`}}),M=({asChild:e=!1,value:t,disabled:n=!1,children:r,className:i,ref:a,onKeyDown:c,renderMenu:u,...d})=>{let{intent:p,size:m,orientation:g}=h(),v=(0,o.useRef)(null),y=(0,o.useRef)(null),b=_(e),x=(0,l.useMergeRefs)(a,y),S=e=>{e.key===`F10`&&e.shiftKey&&u&&v.current&&(e.preventDefault(),v.current.click()),c?.(e)},C=!!u,w=g===`vertical`?`right`:`bottom`,T=(0,s.jsx)(f.Tabs.Tab,{"data-spark-component":`tabs-trigger`,ref:x,className:j({intent:p,size:m,hasMenu:C,orientation:g??`horizontal`,className:i}),render:b,disabled:n,value:t,onFocus:({target:e})=>e.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`}),onKeyDown:S,"aria-haspopup":C?`true`:void 0,...d,children:r});return C?(0,s.jsxs)(`div`,{className:g===`vertical`?`relative w-full`:`relative`,children:[T,(0,s.jsx)(`div`,{className:`right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2`,children:(0,s.jsx)(A,{popoverSide:w,popoverTriggerRef:v,children:e=>u?.({Popover:e})})})]}):T};M.displayName=`Tabs.Trigger`;var N=Object.assign(v,{List:T,Trigger:M,Content:b});N.displayName=`Tabs`,T.displayName=`Tabs.List`,M.displayName=`Tabs.Trigger`,b.displayName=`Tabs.Content`,exports.Tabs=N;
 //# sourceMappingURL=index.js.map