@spark-ui/components 10.0.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../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/progress-tracker/ProgressTrackerStepIndicator.styles.ts","../../src/progress-tracker/stepIndicatorVariants/outline.ts","../../src/progress-tracker/stepIndicatorVariants/tinted.ts","../../src/progress-tracker/ProgressTrackerStepLabel.styles.ts","../../src/progress-tracker/ProgressTrackerStepLabel.tsx","../../src/progress-tracker/index.ts"],"sourcesContent":["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' | 'design'> {\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  design = 'outline',\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, design, 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' | 'design' | '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      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    // 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: ['after:bg-basic', 'group-data-[orientation=horizontal]/list:before:bg-basic'],\n        support: ['after:bg-support', 'group-data-[orientation=horizontal]/list:before:bg-support'],\n        main: ['after:bg-main', 'group-data-[orientation=horizontal]/list:before:bg-main'],\n        neutral: ['after:bg-neutral', 'group-data-[orientation=horizontal]/list:before:bg-neutral'],\n        info: ['after:bg-info', 'group-data-[orientation=horizontal]/list:before:bg-info'],\n        accent: ['after:bg-accent', 'group-data-[orientation=horizontal]/list:before:bg-accent'],\n        danger: ['after:bg-error', 'group-data-[orientation=horizontal]/list:before:bg-error'],\n        alert: ['after:bg-alert', 'group-data-[orientation=horizontal]/list:before:bg-alert'],\n        success: ['after:bg-success', 'group-data-[orientation=horizontal]/list:before:bg-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, design } = useProgressTrackerContext()\n  const { index, state } = useProgressTrackerStepContext()\n\n  return (\n    <span\n      className={stepIndicatorVariant({ size, intent, design, state, className })}\n      aria-hidden=\"true\"\n    >\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 { cva, type VariantProps } from 'class-variance-authority'\n\nimport { outlineVariants, tintedVariants } from './stepIndicatorVariants'\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        support: '',\n        main: '',\n        neutral: '',\n        info: '',\n        accent: '',\n        danger: '',\n        alert: '',\n        success: '',\n      },\n      design: {\n        outline: 'border-sm',\n        tinted: '',\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    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */\n    /* @ts-ignore */\n    compoundVariants: [...outlineVariants, ...tintedVariants],\n    defaultVariants: {\n      size: 'lg',\n      state: 'incomplete',\n      intent: 'basic',\n      design: 'outline',\n    },\n  }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","export const outlineVariants = [\n  {\n    design: 'outline',\n    intent: 'basic',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-basic-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'basic',\n    state: 'active',\n    class: 'text-on-basic-container bg-basic-container',\n  },\n  {\n    design: 'outline',\n    intent: 'support',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-support-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'support',\n    state: 'active',\n    class: 'text-on-support-container bg-support-container',\n  },\n  {\n    design: 'outline',\n    intent: 'main',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-main-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'main',\n    state: 'active',\n    class: 'text-on-main-container bg-main-container',\n  },\n  {\n    design: 'outline',\n    intent: 'neutral',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-neutral-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'neutral',\n    state: 'active',\n    class: 'text-on-neutral-container bg-neutral-container',\n  },\n  {\n    design: 'outline',\n    intent: 'info',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-info-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'info',\n    state: 'active',\n    class: 'text-on-info-container bg-info-container',\n  },\n  {\n    design: 'outline',\n    intent: 'accent',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-accent-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'accent',\n    state: 'active',\n    class: 'text-on-accent-container bg-accent-container',\n  },\n  {\n    design: 'outline',\n    intent: 'danger',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-error-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'danger',\n    state: 'active',\n    class: 'text-on-error-container bg-error-container',\n  },\n  {\n    design: 'outline',\n    intent: 'alert',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-alert-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'alert',\n    state: 'active',\n    class: 'text-on-alert-container bg-alert-container',\n  },\n  {\n    design: 'outline',\n    intent: 'success',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-success-container bg-transparent',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-transparent',\n    ],\n  },\n  {\n    design: 'outline',\n    intent: 'success',\n    state: 'active',\n    class: 'text-on-success-container bg-success-container',\n  },\n] as const\n","export const tintedVariants = [\n  {\n    design: 'tinted',\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    design: 'tinted',\n    intent: 'basic',\n    state: 'active',\n    class: 'text-on-basic bg-basic',\n  },\n  {\n    design: 'tinted',\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    design: 'tinted',\n    intent: 'support',\n    state: 'active',\n    class: 'text-on-support bg-support',\n  },\n  {\n    design: 'tinted',\n    intent: 'main',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-main-container bg-main-container',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-main-container',\n    ],\n  },\n  {\n    design: 'tinted',\n    intent: 'main',\n    state: 'active',\n    class: 'text-on-main bg-main',\n  },\n  {\n    design: 'tinted',\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    design: 'tinted',\n    intent: 'neutral',\n    state: 'active',\n    class: 'text-on-neutral bg-neutral',\n  },\n  {\n    design: 'tinted',\n    intent: 'info',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-info-container bg-info-container',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-info-container',\n    ],\n  },\n  {\n    design: 'tinted',\n    intent: 'info',\n    state: 'active',\n    class: 'text-on-info bg-info',\n  },\n  {\n    design: 'tinted',\n    intent: 'accent',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-accent-container bg-accent-container',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-accent-container',\n    ],\n  },\n  {\n    design: 'tinted',\n    intent: 'accent',\n    state: 'active',\n    class: 'text-on-accent bg-accent',\n  },\n  {\n    design: 'tinted',\n    intent: 'danger',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-error-container bg-error-container',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-error-container',\n    ],\n  },\n  {\n    design: 'tinted',\n    intent: 'danger',\n    state: 'active',\n    class: 'text-on-error bg-error',\n  },\n  {\n    design: 'tinted',\n    intent: 'alert',\n    state: ['complete', 'incomplete'],\n    class: [\n      'text-on-alert-container bg-alert-container',\n      'group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered',\n      'group-hover/btn:group-data-[interactive=false]/btn:bg-alert-container',\n    ],\n  },\n  {\n    design: 'tinted',\n    intent: 'alert',\n    state: 'active',\n    class: 'text-on-alert bg-alert',\n  },\n  {\n    design: 'tinted',\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    design: 'tinted',\n    intent: 'success',\n    state: 'active',\n    class: 'text-on-success bg-success',\n  },\n] as const\n","import { cva } from 'class-variance-authority'\n\nexport const stepLabel = cva([\n  'flex text-body-2 font-bold',\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","import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { stepLabel } from './ProgressTrackerStepLabel.styles'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n  children: ReactNode\n}\n\nexport const ProgressTrackerStepLabel = ({\n  className,\n  children,\n}: ProgressTrackerStepLabelProps) => <span className={stepLabel({ className })}>{children}</span>\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n  ProgressTrackerStepIndicator as StepIndicator,\n  type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\nexport const ProgressTracker: typeof Root & {\n  Step: typeof Step\n  StepLabel: typeof StepLabel\n  StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n  Step,\n  StepLabel,\n  StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"mappings":";;;;;;;AAAA,SAAS,MAAAA,WAAU;AACnB,SAA6D,gBAAgB;;;ACD7E,SAAS,UAAU;AAEZ,IAAM,eAAe,GAAG;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,CAAC;;;ACND,SAAS,eAAmD,kBAAkB;AAmBvE,IAAM,yBAAyB;AAAA,EACpC,CAAC;AACH;AAEO,IAAM,6BAA6B;AAAA,EACxC,CAAC;AACH;AAGO,IAAM,4BAA4B,MAAM,WAAW,sBAAsB;AAEzE,IAAM,gCAAgC,MAAM,WAAW,0BAA0B;AAEjF,IAAM,YAAY;;;AF6BjB;AA3BD,IAAM,kBAAkB,CAAC;AAAA,EAC9B,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+C;AAC7C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAmD,oBAAI,IAAI,CAAC;AAEtF,QAAM,YAAY,WAAW,QAAQ;AAErC,SACE;AAAA,IAAC,uBAAuB;AAAA,IAAvB;AAAA,MACC,OAAO,EAAE,WAAW,aAAa,OAAO,UAAU,MAAM,QAAQ,QAAQ,SAAS;AAAA,MAEjF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,wBAAqB;AAAA,UACrB,WAAWC,IAAG,eAAe,SAAS;AAAA,UACrC,GAAG;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,oBAAkB;AAAA,cAClB,WAAW;AAAA,cACX,OAAO,EAAE,cAAc,OAAO;AAAA,cAE7B;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;;;AGzE9B,SAAqD,WAAW,aAAa;;;ACA7E,SAAS,WAAW;AAEb,IAAM,kBAAkB;AAAA,EAC7B;AAAA,IACE;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,UAEF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,IAAI;AAAA;AAAA,UAEF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,IAAI;AAAA;AAAA,UAEF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,OAAO,CAAC,kBAAkB,0DAA0D;AAAA,QACpF,SAAS,CAAC,oBAAoB,4DAA4D;AAAA,QAC1F,MAAM,CAAC,iBAAiB,yDAAyD;AAAA,QACjF,SAAS,CAAC,oBAAoB,4DAA4D;AAAA,QAC1F,MAAM,CAAC,iBAAiB,yDAAyD;AAAA,QACjF,QAAQ,CAAC,mBAAmB,2DAA2D;AAAA,QACvF,QAAQ,CAAC,kBAAkB,0DAA0D;AAAA,QACrF,OAAO,CAAC,kBAAkB,0DAA0D;AAAA,QACpF,SAAS,CAAC,oBAAoB,4DAA4D;AAAA,MAC5F;AAAA,MACA,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,eAAe;AAAA,QACb,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,eAAe;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAEO,IAAM,oBAAoB;AAAA,EAC/B;AAAA,IACE;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,QACF;AAAA,QACA,IAAI;AAAA,UACF;AAAA,UACA;AAAA,QACF;AAAA,QACA,IAAI;AAAA,UACF;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,EACF;AACF;;;AC3HA,SAAS,aAAa;;;ACAtB,SAAS,OAAAC,YAA8B;;;ACAhC,IAAM,kBAAkB;AAAA,EAC7B;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;;;ACjJO,IAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,CAAC,YAAY,YAAY;AAAA,IAChC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;;;AF7IO,IAAM,uBAAuBC;AAAA,EAClC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,kBAAkB,CAAC,GAAG,iBAAiB,GAAG,cAAc;AAAA,IACxD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AACF;;;AD7CI,SAkBI,UAlBJ,OAAAC,MAkBI,YAlBJ;AAFJ,IAAM,oBAAoB,MACxB,gBAAAA,KAAC,QAAK,MAAK,MACT,0BAAAA,KAAC,SAAM,GACT;AAGK,IAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AACvC,QAAM,EAAE,MAAM,QAAQ,OAAO,IAAI,0BAA0B;AAC3D,QAAM,EAAE,OAAO,MAAM,IAAI,8BAA8B;AAEvD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAqB,EAAE,MAAM,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,MAC1E,eAAY;AAAA,MAEX,mBAAS,QACR,iCACG;AAAA,kBAAU,eAAe,aAAa,SAAY,gBAAAA,KAAC,qBAAkB,IAAK;AAAA,QAC1E,UAAU,eAAe,eAAe,SAAY,GAAG,QAAQ,CAAC,KAAK;AAAA,SACxE;AAAA;AAAA,EAEJ;AAEJ;AAEA,6BAA6B,cAAc;;;AFiEpB,gBAAAC,YAAA;AA1FhB,IAAM,sBAAsB,CAAC;AAAA,EAClC,WAAW;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM;AAAA,IACJ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,0BAA0B;AAE9B,QAAM,SAAS,GAAG,SAAS,SAAS,MAAM,CAAC;AAC3C,QAAM,YAAY,CAAC,GAAG,MAAM,KAAK,CAAC,EAAE,QAAQ,MAAM;AAElD,QAAM,iBAAiB,MAAM;AAC3B,UAAM,aAAa,CAAC,GAAG,MAAM,KAAK,CAAC,EAAE,YAAY,CAAC;AAElD,WAAO,CAAC,EAAE,cAAc,MAAM,IAAI,UAAU,GAAG,SAAS,UAAU;AAAA,EACpE,GAAG;AAEH,QAAM,iBAAiB,MAAM;AAC3B,QAAI,cAAc,iBAAkB,QAAO;AAAA,aAClC,YAAY,iBAAkB,QAAO;AAAA,QACzC,QAAO;AAAA,EACd,GAAG;AAEH,YAAU,MAAM;AACd,aAAS,CAAAC,WAAS;AAChB,YAAM,WAAW,IAAI,IAAIA,MAAK;AAE9B,aAAO,SAAS;AAAA,QACd;AAAA,QACA,CAAC,eAAe,WAAW,aAAa,EAAE,EAAE,OAAO,OAAK,CAAC,CAAC,CAAC;AAAA,MAC7D;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,eAAS,CAAAA,WAAS;AAChB,QAAAA,OAAM,OAAO,MAAM;AAEnB,eAAOA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,cAAY;AAAA,MACX,GAAI,kBAAkB,YAAY;AAAA,QACjC,gBAAgB;AAAA,MAClB;AAAA,MACA,WAAW,gBAAgB;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACA,GAAG;AAAA,MAEJ,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,oBAAkB,CAAC,YAAY,CAAC;AAAA,UAC/B,GAAI,CAAC,YACJ,CAAC,YAAY;AAAA,YACX,SAAS,MAAM,cAAc,SAAS;AAAA,UACxC;AAAA,UACF;AAAA,UACA,WAAW,kBAAkB;AAAA,YAC3B;AAAA,YACA;AAAA,YACA;AAAA,UACF,CAAC;AAAA,UAED,0BAAAA;AAAA,YAAC,2BAA2B;AAAA,YAA3B;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,OAAO;AAAA,cACT;AAAA,cAEC,sBAAY,gBAAAA,KAAC,gCAA6B;AAAA;AAAA,UAC7C;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,oBAAoB,cAAc;;;AMvHlC,SAAS,OAAAE,YAAW;AAEb,IAAM,YAAYA,KAAI;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;;;ACGoC,gBAAAC,YAAA;AAH9B,IAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AACF,MAAqC,gBAAAA,KAAC,UAAK,WAAW,UAAU,EAAE,UAAU,CAAC,GAAI,UAAS;AAE1F,yBAAyB,cAAc;;;ACLhC,IAAMC,mBAIT,OAAO,OAAO,iBAAM;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEDA,iBAAgB,cAAc;AAC9B,oBAAK,cAAc;AACnB,yBAAU,cAAc;AACxB,6BAAc,cAAc;","names":["cx","cx","cva","cva","jsx","jsx","steps","cva","jsx","ProgressTracker"]}

package/dist/radio-group/index.d.mts

@@ -0,0 +1,100 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, Ref, HTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const radioInputVariants: (props?: ({
+    intent?: "main" | "support" | "accent" | "basic" | "success" | "alert" | "error" | "info" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>;
+
+interface RadioInputProps extends RadioInputVariantsProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * The value given as data when submitted with a name.
+     */
+    value: string;
+    /**
+     * When true, prevents the user from interacting with the radio item.
+     */
+    disabled?: boolean;
+    /**
+     * When true, indicates that the user must check the radio item before the owning form can be submitted.
+     */
+    required?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+
+type RadioProps = RadioInputProps & {
+    ref?: Ref<HTMLButtonElement>;
+};
+declare const Radio: {
+    ({ className, children, id, disabled: disabledProp, ref, ...others }: RadioProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const radioGroupStyles: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>;
+
+interface RadioGroupProps extends RadioGroupVariantsProps, Pick<RadioInputVariantsProps, 'intent'>, Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * When true, prevents the user from interacting with radio items.
+     */
+    disabled?: boolean;
+    /**
+     * The name of the group. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * When true, indicates that the user must check a radio item before the owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The orientation of the component.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The reading direction of the radio group.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * When true, keyboard navigation will loop from last item to first, and vice versa.
+     */
+    loop?: boolean;
+    /**
+     * When true, the label will be placed on the left side of the Radio
+     */
+    reverse?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const RadioGroup$1: {
+    ({ orientation, loop, intent, disabled, className, required: requiredProp, reverse, ref, ...others }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const RadioGroup: typeof RadioGroup$1 & {
+    Radio: typeof Radio;
+};
+
+export { RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/radio-group/index.d.ts

@@ -0,0 +1,100 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, Ref, HTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const radioInputVariants: (props?: ({
+    intent?: "main" | "support" | "accent" | "basic" | "success" | "alert" | "error" | "info" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>;
+
+interface RadioInputProps extends RadioInputVariantsProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * The value given as data when submitted with a name.
+     */
+    value: string;
+    /**
+     * When true, prevents the user from interacting with the radio item.
+     */
+    disabled?: boolean;
+    /**
+     * When true, indicates that the user must check the radio item before the owning form can be submitted.
+     */
+    required?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+
+type RadioProps = RadioInputProps & {
+    ref?: Ref<HTMLButtonElement>;
+};
+declare const Radio: {
+    ({ className, children, id, disabled: disabledProp, ref, ...others }: RadioProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const radioGroupStyles: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>;
+
+interface RadioGroupProps extends RadioGroupVariantsProps, Pick<RadioInputVariantsProps, 'intent'>, Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * When true, prevents the user from interacting with radio items.
+     */
+    disabled?: boolean;
+    /**
+     * The name of the group. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * When true, indicates that the user must check a radio item before the owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The orientation of the component.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The reading direction of the radio group.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * When true, keyboard navigation will loop from last item to first, and vice versa.
+     */
+    loop?: boolean;
+    /**
+     * When true, the label will be placed on the left side of the Radio
+     */
+    reverse?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const RadioGroup$1: {
+    ({ orientation, loop, intent, disabled, className, required: requiredProp, reverse, ref, ...others }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const RadioGroup: typeof RadioGroup$1 & {
+    Radio: typeof Radio;
+};
+
+export { RadioGroup, type RadioGroupProps, type RadioProps };