@spark-ui/components 13.1.3 → 13.1.4

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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'>,\n    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 = 'basic',\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        basic: '',\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: 'basic',\n    },\n  }\n)\n\nexport const stepButtonVariant = cva(\n  [\n    'relative flex group/btn disabled:cursor-default',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center',\n    'group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm',\n    'group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm',\n    'group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]',\n        ],\n        md: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]',\n        ],\n        lg: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]',\n        ],\n      },\n      readOnly: {\n        true: 'cursor-default',\n        false: 'cursor-pointer',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n      readOnly: false,\n    },\n  }\n)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n  [\n    'relative flex shrink-0 justify-center items-center',\n    'rounded-full',\n    'text-body-2 font-bold',\n    'group-disabled/btn:opacity-dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'w-sz-16 h-sz-16',\n          'group-data-[orientation=horizontal]/list:mt-[-16px]',\n          'group-data-[orientation=vertical]/list:ml-[-16px]',\n        ],\n        md: [\n          'w-sz-24 h-sz-24',\n          'group-data-[orientation=horizontal]/list:mt-[-24px]',\n          'group-data-[orientation=vertical]/list:ml-[-24px]',\n        ],\n        lg: [\n          'w-sz-32 h-sz-32',\n          'group-data-[orientation=horizontal]/list:mt-[-32px]',\n          'group-data-[orientation=vertical]/list:ml-[-32px]',\n        ],\n      },\n      intent: {\n        basic: '',\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      // Basic\n      {\n        intent: 'basic',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-basic-container bg-basic-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container',\n        ],\n      },\n      {\n        intent: 'basic',\n        state: 'active',\n        class: 'text-on-basic bg-basic',\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: 'basic',\n    },\n  }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * The content to be rendered when step status is complete (checkmark icon by default)\n   */\n  complete?: ReactNode\n  /**\n   * The content to be rendered when step status is incomplete (step index by default)\n   */\n  incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n  <Icon size=\"sm\">\n    <Check />\n  </Icon>\n)\n\nexport const ProgressTrackerStepIndicator = ({\n  complete,\n  incomplete,\n  className,\n}: ProgressTrackerStepIndicatorProps) => {\n  const { size, intent } = useProgressTrackerContext()\n  const { index, state } = useProgressTrackerStepContext()\n\n  return (\n    <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n      {size !== 'sm' && (\n        <>\n          {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n          {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n        </>\n      )}\n    </span>\n  )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n  ID_PREFIX,\n  ProgressTrackerStepContext,\n  useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n  (\n    | {\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        disabled?: boolean\n        'aria-label': string\n      }\n  )\n\nexport const ProgressTrackerStep = ({\n  disabled = false,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: ProgressTrackerStepProps) => {\n  const {\n    stepIndex: currentStepIndex,\n    steps,\n    onStepClick,\n    setSteps,\n    size,\n    intent,\n    readOnly,\n  } = useProgressTrackerContext()\n\n  const stepId = `${ID_PREFIX}-step-${useId()}`\n  const stepIndex = [...steps.keys()].indexOf(stepId)\n\n  const disabledAfter = (() => {\n    const nextStepId = [...steps.keys()][stepIndex + 1]\n\n    return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n  })()\n\n  const progressState = (() => {\n    if (stepIndex === currentStepIndex) return 'active'\n    else if (stepIndex < currentStepIndex) return 'complete'\n    else return 'incomplete'\n  })()\n\n  useEffect(() => {\n    setSteps(steps => {\n      const newSteps = new Map(steps)\n\n      return newSteps.set(\n        stepId,\n        [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n      )\n    })\n\n    return () => {\n      setSteps(steps => {\n        steps.delete(stepId)\n\n        return steps\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <li\n      data-spark-component=\"progress-tracker-step\"\n      id={stepId}\n      ref={ref}\n      data-state={progressState}\n      {...(progressState === 'active' && {\n        'aria-current': 'step',\n      })}\n      className={stepItemVariant({\n        size,\n        intent,\n        disabled,\n        disabledAfter,\n      })}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-interactive={!disabled && !readOnly}\n        {...(!disabled &&\n          !readOnly && {\n            onClick: () => onStepClick?.(stepIndex),\n          })}\n        disabled={disabled}\n        className={stepButtonVariant({\n          size,\n          readOnly,\n          className,\n        })}\n      >\n        <ProgressTrackerStepContext.Provider\n          value={{\n            index: stepIndex,\n            state: progressState,\n          }}\n        >\n          {children || <ProgressTrackerStepIndicator />}\n        </ProgressTrackerStepContext.Provider>\n      </button>\n    </li>\n  )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n  children: ReactNode\n}\n\nconst stepLabel = cva(\n  [\n    'flex text-body-2 ',\n    'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n    'group-data-[orientation=horizontal]/list:mt-md',\n    'group-data-[orientation=vertical]/list:ml-md',\n    'group-data-[orientation=vertical]/list:my-auto',\n  ],\n  {\n    variants: {\n      state: {\n        complete: '',\n        incomplete: '',\n        active: 'font-bold',\n      },\n    },\n  }\n)\n\nexport const ProgressTrackerStepLabel = ({\n  className,\n  children,\n}: ProgressTrackerStepLabelProps) => {\n  const { state } = useProgressTrackerStepContext()\n\n  return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n  ProgressTrackerStepIndicator as StepIndicator,\n  type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\nexport const ProgressTracker: typeof Root & {\n  Step: typeof Step\n  StepLabel: typeof StepLabel\n  StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n  Step,\n  StepLabel,\n  StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"names":["progressList","cx","ProgressTrackerContext","createContext","ProgressTrackerStepContext","useProgressTrackerContext","useContext","useProgressTrackerStepContext","ID_PREFIX","ProgressTracker","stepIndex","onStepClick","readOnly","intent","size","orientation","children","className","ref","rest","steps","setSteps","useState","Component","jsx","stepItemVariant","cva","stepButtonVariant","stepIndicatorVariant","CompleteIndicator","Icon","Check","ProgressTrackerStepIndicator","complete","incomplete","index","state","jsxs","Fragment","ProgressTrackerStep","disabled","ariaLabel","currentStepIndex","stepId","useId","disabledAfter","nextStepId","progressState","useEffect","v","stepLabel","ProgressTrackerStepLabel","Root","Step","StepLabel","StepIndicator"],"mappings":"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"}
+{"version":3,"sources":["../../src/progress-tracker/index.ts","../../src/progress-tracker/ProgressTracker.tsx","../../src/progress-tracker/ProgressTracker.styles.ts","../../src/progress-tracker/ProgressTrackerContext.ts","../../src/progress-tracker/ProgressTrackerStep.tsx","../../src/progress-tracker/ProgressTrackerStep.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/progress-tracker/ProgressTrackerStepIndicator.styles.ts","../../src/progress-tracker/ProgressTrackerStepLabel.tsx"],"sourcesContent":["import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n  ProgressTrackerStepIndicator as StepIndicator,\n  type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\nexport const ProgressTracker: typeof Root & {\n  Step: typeof Step\n  StepLabel: typeof StepLabel\n  StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n  Step,\n  StepLabel,\n  StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n","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'>,\n    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 = 'basic',\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 { 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 { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n  ID_PREFIX,\n  ProgressTrackerStepContext,\n  useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n  (\n    | {\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        disabled?: boolean\n        'aria-label': string\n      }\n  )\n\nexport const ProgressTrackerStep = ({\n  disabled = false,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: ProgressTrackerStepProps) => {\n  const {\n    stepIndex: currentStepIndex,\n    steps,\n    onStepClick,\n    setSteps,\n    size,\n    intent,\n    readOnly,\n  } = useProgressTrackerContext()\n\n  const stepId = `${ID_PREFIX}-step-${useId()}`\n  const stepIndex = [...steps.keys()].indexOf(stepId)\n\n  const disabledAfter = (() => {\n    const nextStepId = [...steps.keys()][stepIndex + 1]\n\n    return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n  })()\n\n  const progressState = (() => {\n    if (stepIndex === currentStepIndex) return 'active'\n    else if (stepIndex < currentStepIndex) return 'complete'\n    else return 'incomplete'\n  })()\n\n  useEffect(() => {\n    setSteps(steps => {\n      const newSteps = new Map(steps)\n\n      return newSteps.set(\n        stepId,\n        [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n      )\n    })\n\n    return () => {\n      setSteps(steps => {\n        steps.delete(stepId)\n\n        return steps\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <li\n      data-spark-component=\"progress-tracker-step\"\n      id={stepId}\n      ref={ref}\n      data-state={progressState}\n      {...(progressState === 'active' && {\n        'aria-current': 'step',\n      })}\n      className={stepItemVariant({\n        size,\n        intent,\n        disabled,\n        disabledAfter,\n      })}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-interactive={!disabled && !readOnly}\n        {...(!disabled &&\n          !readOnly && {\n            onClick: () => onStepClick?.(stepIndex),\n          })}\n        disabled={disabled}\n        className={stepButtonVariant({\n          size,\n          readOnly,\n          className,\n        })}\n      >\n        <ProgressTrackerStepContext.Provider\n          value={{\n            index: stepIndex,\n            state: progressState,\n          }}\n        >\n          {children || <ProgressTrackerStepIndicator />}\n        </ProgressTrackerStepContext.Provider>\n      </button>\n    </li>\n  )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\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        basic: '',\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: 'basic',\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 { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * The content to be rendered when step status is complete (checkmark icon by default)\n   */\n  complete?: ReactNode\n  /**\n   * The content to be rendered when step status is incomplete (step index by default)\n   */\n  incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n  <Icon size=\"sm\">\n    <Check />\n  </Icon>\n)\n\nexport const ProgressTrackerStepIndicator = ({\n  complete,\n  incomplete,\n  className,\n}: ProgressTrackerStepIndicatorProps) => {\n  const { size, intent } = useProgressTrackerContext()\n  const { index, state } = useProgressTrackerStepContext()\n\n  return (\n    <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n      {size !== 'sm' && (\n        <>\n          {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n          {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n        </>\n      )}\n    </span>\n  )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      style={{\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: 'absolute',\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n        ...props.style,\n      }}\n    />\n  )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      [\n        'current',\n        'main',\n        'support',\n        'accent',\n        'basic',\n        'success',\n        'alert',\n        'error',\n        'info',\n        'neutral',\n      ]\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      basic: ['text-basic'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n  [\n    'relative flex shrink-0 justify-center items-center',\n    'rounded-full',\n    'text-body-2 font-bold',\n    'group-disabled/btn:opacity-dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'w-sz-16 h-sz-16',\n          'group-data-[orientation=horizontal]/list:mt-[-16px]',\n          'group-data-[orientation=vertical]/list:ml-[-16px]',\n        ],\n        md: [\n          'w-sz-24 h-sz-24',\n          'group-data-[orientation=horizontal]/list:mt-[-24px]',\n          'group-data-[orientation=vertical]/list:ml-[-24px]',\n        ],\n        lg: [\n          'w-sz-32 h-sz-32',\n          'group-data-[orientation=horizontal]/list:mt-[-32px]',\n          'group-data-[orientation=vertical]/list:ml-[-32px]',\n        ],\n      },\n      intent: {\n        basic: '',\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      // Basic\n      {\n        intent: 'basic',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-basic-container bg-basic-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container',\n        ],\n      },\n      {\n        intent: 'basic',\n        state: 'active',\n        class: 'text-on-basic bg-basic',\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: 'basic',\n    },\n  }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n  children: ReactNode\n}\n\nconst stepLabel = cva(\n  [\n    'flex text-body-2 ',\n    'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n    'group-data-[orientation=horizontal]/list:mt-md',\n    'group-data-[orientation=vertical]/list:ml-md',\n    'group-data-[orientation=vertical]/list:my-auto',\n  ],\n  {\n    variants: {\n      state: {\n        complete: '',\n        incomplete: '',\n        active: 'font-bold',\n      },\n    },\n  }\n)\n\nexport const ProgressTrackerStepLabel = ({\n  className,\n  children,\n}: ProgressTrackerStepLabelProps) => {\n  const { state } = useProgressTrackerStepContext()\n\n  return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n"],"mappings":"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","names":["ProgressTracker","import_class_variance_authority","import_react","import_react","import_class_variance_authority","import_react","import_react","import_jsx_runtime","RadixSlot","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","steps","import_class_variance_authority","import_jsx_runtime","ProgressTracker"]}

package/dist/progress-tracker/index.mjs

@@ -1,47 +1,67 @@
-import { jsx as a, jsxs as j, Fragment as O } from "react/jsx-runtime";
-import { a as y, c as x } from "../index-BmAFn37q.mjs";
-import { createContext as S, useContext as P, useState as $, useId as A, useEffect as E } from "react";
-import { Check as F } from "@spark-ui/icons/Check";
-import { I as M } from "../Icon-D1RueiPY.mjs";
-const R = y([
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import "../chunk-6QCEPQ3U.mjs";
+
+// src/progress-tracker/ProgressTracker.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { useState } from "react";
+
+// src/progress-tracker/ProgressTracker.styles.ts
+import { cx } from "class-variance-authority";
+var progressList = cx([
   "flex flex-nowrap items-start group/list",
   "data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full",
   "data-[orientation=vertical]:flex-col"
-]), I = S(
+]);
+
+// src/progress-tracker/ProgressTrackerContext.ts
+import { createContext, useContext } from "react";
+var ProgressTrackerContext = createContext(
   {}
-), T = S(
+);
+var ProgressTrackerStepContext = createContext(
   {}
-), w = () => P(I), N = () => P(T), B = ":progress-tracker", C = ({
-  stepIndex: t = 0,
-  onStepClick: e,
-  readOnly: r = !1,
-  intent: n = "basic",
-  size: s = "lg",
-  orientation: l = "horizontal",
-  children: o,
-  className: c,
-  ref: h,
-  ...d
+);
+var useProgressTrackerContext = () => useContext(ProgressTrackerContext);
+var useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext);
+var ID_PREFIX = ":progress-tracker";
+
+// src/progress-tracker/ProgressTracker.tsx
+import { jsx } from "react/jsx-runtime";
+var ProgressTracker = ({
+  stepIndex = 0,
+  onStepClick,
+  readOnly = false,
+  intent = "basic",
+  size = "lg",
+  orientation = "horizontal",
+  children,
+  className,
+  ref,
+  ...rest
 }) => {
-  const [g, v] = $(/* @__PURE__ */ new Map()), p = r ? "div" : "nav";
-  return /* @__PURE__ */ a(
-    I.Provider,
+  const [steps, setSteps] = useState(/* @__PURE__ */ new Map());
+  const Component = readOnly ? "div" : "nav";
+  return /* @__PURE__ */ jsx(
+    ProgressTrackerContext.Provider,
     {
-      value: { stepIndex: t, onStepClick: e, steps: g, setSteps: v, size: s, intent: n, readOnly: r },
-      children: /* @__PURE__ */ a(
-        p,
+      value: { stepIndex, onStepClick, steps, setSteps, size, intent, readOnly },
+      children: /* @__PURE__ */ jsx(
+        Component,
         {
-          ref: h,
+          ref,
           "data-spark-component": "progress-tracker",
-          className: y("inline-flex", c),
-          ...d,
-          children: /* @__PURE__ */ a(
+          className: cx2("inline-flex", className),
+          ...rest,
+          children: /* @__PURE__ */ jsx(
             "ol",
             {
-              "data-orientation": l,
-              className: R,
+              "data-orientation": orientation,
+              className: progressList,
               style: { counterReset: "step" },
-              children: o
+              children
             }
           )
         }
@@ -49,8 +69,14 @@ const R = y([
     }
   );
 };
-C.displayName = "ProgressTracker";
-const D = x(
+ProgressTracker.displayName = "ProgressTracker";
+
+// src/progress-tracker/ProgressTrackerStep.tsx
+import { useEffect, useId } from "react";
+
+// src/progress-tracker/ProgressTrackerStep.styles.ts
+import { cva } from "class-variance-authority";
+var stepItemVariant = cva(
   [
     "relative inline-flex items-start flex-auto first:grow-0 justify-center group/item",
     // Progress Track
@@ -121,13 +147,14 @@ const D = x(
       }
     },
     defaultVariants: {
-      disabled: !1,
-      disabledAfter: !1,
+      disabled: false,
+      disabledAfter: false,
       size: "lg",
       intent: "basic"
     }
   }
-), X = x(
+);
+var stepButtonVariant = cva(
   [
     "relative flex group/btn disabled:cursor-default",
     // Horizontal orientation
@@ -162,10 +189,17 @@ const D = x(
     },
     defaultVariants: {
       size: "lg",
-      readOnly: !1
+      readOnly: false
     }
   }
-), _ = x(
+);
+
+// src/progress-tracker/ProgressTrackerStepIndicator.tsx
+import { Check } from "@spark-ui/icons/Check";
+
+// src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
+import { cva as cva2 } from "class-variance-authority";
+var stepIndicatorVariant = cva2(
   [
     "relative flex shrink-0 justify-center items-center",
     "rounded-full",
@@ -260,83 +294,110 @@ const D = x(
       intent: "basic"
     }
   }
-), q = () => /* @__PURE__ */ a(M, { size: "sm", children: /* @__PURE__ */ a(F, {}) }), b = ({
-  complete: t,
-  incomplete: e,
-  className: r
+);
+
+// src/progress-tracker/ProgressTrackerStepIndicator.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CompleteIndicator = () => /* @__PURE__ */ jsx2(Icon, { size: "sm", children: /* @__PURE__ */ jsx2(Check, {}) });
+var ProgressTrackerStepIndicator = ({
+  complete,
+  incomplete,
+  className
 }) => {
-  const { size: n, intent: s } = w(), { index: l, state: o } = N();
-  return /* @__PURE__ */ a("span", { className: _({ size: n, intent: s, state: o, className: r }), "aria-hidden": "true", children: n !== "sm" && /* @__PURE__ */ j(O, { children: [
-    o === "complete" && (t === void 0 ? /* @__PURE__ */ a(q, {}) : t),
-    o !== "complete" && (e === void 0 ? `${l + 1}` : e)
+  const { size, intent } = useProgressTrackerContext();
+  const { index, state } = useProgressTrackerStepContext();
+  return /* @__PURE__ */ jsx2("span", { className: stepIndicatorVariant({ size, intent, state, className }), "aria-hidden": "true", children: size !== "sm" && /* @__PURE__ */ jsxs(Fragment, { children: [
+    state === "complete" && (complete === void 0 ? /* @__PURE__ */ jsx2(CompleteIndicator, {}) : complete),
+    state !== "complete" && (incomplete === void 0 ? `${index + 1}` : incomplete)
   ] }) });
 };
-b.displayName = "ProgressTracker.StepIndicator";
-const z = ({
-  disabled: t = !1,
-  children: e,
-  "aria-label": r,
-  className: n,
-  ref: s,
-  ...l
+ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
+
+// src/progress-tracker/ProgressTrackerStep.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ProgressTrackerStep = ({
+  disabled = false,
+  children,
+  "aria-label": ariaLabel,
+  className,
+  ref,
+  ...rest
 }) => {
   const {
-    stepIndex: o,
-    steps: c,
-    onStepClick: h,
-    setSteps: d,
-    size: g,
-    intent: v,
-    readOnly: p
-  } = w(), f = `${B}-step-${A()}`, u = [...c.keys()].indexOf(f), V = (() => {
-    const i = [...c.keys()][u + 1];
-    return !!(i && c.get(i)?.includes("disabled"));
-  })(), m = u === o ? "active" : u < o ? "complete" : "incomplete";
-  return E(() => (d((i) => new Map(i).set(
-    f,
-    [m, t ? "disabled" : ""].filter((L) => !!L)
-  )), () => {
-    d((i) => (i.delete(f), i));
-  }), []), /* @__PURE__ */ a(
+    stepIndex: currentStepIndex,
+    steps,
+    onStepClick,
+    setSteps,
+    size,
+    intent,
+    readOnly
+  } = useProgressTrackerContext();
+  const stepId = `${ID_PREFIX}-step-${useId()}`;
+  const stepIndex = [...steps.keys()].indexOf(stepId);
+  const disabledAfter = (() => {
+    const nextStepId = [...steps.keys()][stepIndex + 1];
+    return !!(nextStepId && steps.get(nextStepId)?.includes("disabled"));
+  })();
+  const progressState = (() => {
+    if (stepIndex === currentStepIndex) return "active";
+    else if (stepIndex < currentStepIndex) return "complete";
+    else return "incomplete";
+  })();
+  useEffect(() => {
+    setSteps((steps2) => {
+      const newSteps = new Map(steps2);
+      return newSteps.set(
+        stepId,
+        [progressState, disabled ? "disabled" : ""].filter((v) => !!v)
+      );
+    });
+    return () => {
+      setSteps((steps2) => {
+        steps2.delete(stepId);
+        return steps2;
+      });
+    };
+  }, []);
+  return /* @__PURE__ */ jsx3(
     "li",
     {
       "data-spark-component": "progress-tracker-step",
-      id: f,
-      ref: s,
-      "data-state": m,
-      ...m === "active" && {
+      id: stepId,
+      ref,
+      "data-state": progressState,
+      ...progressState === "active" && {
         "aria-current": "step"
       },
-      className: D({
-        size: g,
-        intent: v,
-        disabled: t,
-        disabledAfter: V
+      className: stepItemVariant({
+        size,
+        intent,
+        disabled,
+        disabledAfter
       }),
-      ...l,
-      children: /* @__PURE__ */ a(
+      ...rest,
+      children: /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
-          "aria-label": r,
-          "data-interactive": !t && !p,
-          ...!t && !p && {
-            onClick: () => h?.(u)
+          "aria-label": ariaLabel,
+          "data-interactive": !disabled && !readOnly,
+          ...!disabled && !readOnly && {
+            onClick: () => onStepClick?.(stepIndex)
           },
-          disabled: t,
-          className: X({
-            size: g,
-            readOnly: p,
-            className: n
+          disabled,
+          className: stepButtonVariant({
+            size,
+            readOnly,
+            className
           }),
-          children: /* @__PURE__ */ a(
-            T.Provider,
+          children: /* @__PURE__ */ jsx3(
+            ProgressTrackerStepContext.Provider,
             {
               value: {
-                index: u,
-                state: m
+                index: stepIndex,
+                state: progressState
               },
-              children: e || /* @__PURE__ */ a(b, {})
+              children: children || /* @__PURE__ */ jsx3(ProgressTrackerStepIndicator, {})
             }
           )
         }
@@ -344,8 +405,12 @@ const z = ({
     }
   );
 };
-z.displayName = "ProgressTracker.Step";
-const G = x(
+ProgressTrackerStep.displayName = "ProgressTracker.Step";
+
+// src/progress-tracker/ProgressTrackerStepLabel.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var stepLabel = cva3(
   [
     "flex text-body-2 ",
     "text-on-surface group-disabled/btn:text-on-surface/dim-1",
@@ -362,24 +427,27 @@ const G = x(
       }
     }
   }
-), k = ({
-  className: t,
-  children: e
+);
+var ProgressTrackerStepLabel = ({
+  className,
+  children
 }) => {
-  const { state: r } = N();
-  return /* @__PURE__ */ a("span", { className: G({ state: r, className: t }), children: e });
+  const { state } = useProgressTrackerStepContext();
+  return /* @__PURE__ */ jsx4("span", { className: stepLabel({ state, className }), children });
 };
-k.displayName = "ProgressTracker.StepLabel";
-const H = Object.assign(C, {
-  Step: z,
-  StepLabel: k,
-  StepIndicator: b
+ProgressTrackerStepLabel.displayName = "ProgressTracker.StepLabel";
+
+// src/progress-tracker/index.ts
+var ProgressTracker2 = Object.assign(ProgressTracker, {
+  Step: ProgressTrackerStep,
+  StepLabel: ProgressTrackerStepLabel,
+  StepIndicator: ProgressTrackerStepIndicator
 });
-H.displayName = "ProgressTracker";
-z.displayName = "ProgressTracker.Step";
-k.displayName = "ProgressTracker.StepLabel";
-b.displayName = "ProgressTracker.StepIndicator";
+ProgressTracker2.displayName = "ProgressTracker";
+ProgressTrackerStep.displayName = "ProgressTracker.Step";
+ProgressTrackerStepLabel.displayName = "ProgressTracker.StepLabel";
+ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
 export {
-  H as ProgressTracker
+  ProgressTracker2 as ProgressTracker
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map