@spark-ui/components 16.2.3 → 17.0.1-beta.0

package/dist/progress/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/progress/ProgressContext.tsx","../../src/progress/ProgressIndicator.tsx","../../src/progress/ProgressTrack.tsx","../../src/progress/Progress.tsx","../../src/progress/ProgressLabel.tsx","../../src/progress/ProgressValue.tsx","../../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      basic: ['bg-basic'],\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'basic',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext.Provider value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"names":["ProgressContext","createContext","ID_PREFIX","useProgress","context","useContext","progressIndicatorStyles","cva","ProgressIndicator","className","style","ref","onTransitionEnd","others","value","max","min","intent","shape","onComplete","percentage","isIndeterminate","handleTransitionEnd","event","jsx","BaseProgress","cx","ProgressTrack","Progress","valueProp","getValueLabel","getAriaValueTextProp","children","labelId","setLabelId","useState","contextValue","useMemo","getAriaValueText","formattedValue","ProgressLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","ProgressValue","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/progress/ProgressContext.tsx","../../src/progress/ProgressIndicator.tsx","../../src/progress/ProgressTrack.tsx","../../src/progress/Progress.tsx","../../src/progress/ProgressLabel.tsx","../../src/progress/ProgressValue.tsx","../../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (\n    event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]\n  ) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'support',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext.Provider value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"names":["ProgressContext","createContext","ID_PREFIX","useProgress","context","useContext","progressIndicatorStyles","cva","ProgressIndicator","className","style","ref","onTransitionEnd","others","value","max","min","intent","shape","onComplete","percentage","isIndeterminate","handleTransitionEnd","event","jsx","BaseProgress","cx","ProgressTrack","Progress","valueProp","getValueLabel","getAriaValueTextProp","children","labelId","setLabelId","useState","contextValue","useMemo","getAriaValueText","formattedValue","ProgressLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","ProgressValue","Root"],"mappings":"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"}

package/dist/progress-tracker/ProgressTrackerStep.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const stepItemVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    intent?: "basic" | "success" | "neutral" | null | undefined;
+    intent?: "support" | "success" | "neutral" | null | undefined;
     disabled?: boolean | null | undefined;
     disabledAfter?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/progress-tracker/ProgressTrackerStepIndicator.styles.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const stepIndicatorVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    intent?: "basic" | "success" | "neutral" | null | undefined;
+    intent?: "support" | "success" | "neutral" | null | undefined;
     state?: "active" | "complete" | "incomplete" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>;

package/dist/progress-tracker/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("class-variance-authority"),n=require("react"),V=require("@spark-ui/icons/Check"),L=require("../Icon-CF0W0LKr.js"),q=l.cx(["flex flex-nowrap items-start group/list","data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full","data-[orientation=vertical]:flex-col"]),S=n.createContext({}),P=n.createContext({}),T=()=>n.useContext(S),j=()=>n.useContext(P),O=":progress-tracker",I=({stepIndex:e=0,onStepClick:a,readOnly:r=!1,intent:s="basic",size:c="lg",orientation:p="horizontal",children:o,className:u,ref:v,...f})=>{const[x,z]=n.useState(new Map),d=r?"div":"nav";return t.jsx(S.Provider,{value:{stepIndex:e,onStepClick:a,steps:x,setSteps:z,size:c,intent:s,readOnly:r},children:t.jsx(d,{ref:v,"data-spark-component":"progress-tracker",className:l.cx("inline-flex",u),...f,children:t.jsx("ol",{"data-orientation":p,className:q,style:{counterReset:"step"},children:o})})})};I.displayName="ProgressTracker";const A=l.cva(["relative inline-flex items-start flex-auto first:grow-0 justify-center group/item","after:absolute after:z-base","last:after:content-none","after:bg-outline","group-data-[orientation=horizontal]/list:before:bg-outline","group-data-[orientation=horizontal]/list:px-[1px]","group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base","group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0","group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]","first:group-data-[orientation=horizontal]/list:before:content-none","group-data-[orientation=vertical]/list:py-[1px]","group-data-[orientation=vertical]/list:items-start","group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]"],{variants:{size:{sm:["group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]","group-data-[orientation=vertical]/list:after:left-[8px]","group-data-[orientation=vertical]/list:after:top-[25px]","first:group-data-[orientation=vertical]/list:after:top-[21px]"],md:["group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]","group-data-[orientation=vertical]/list:after:left-[12px]","group-data-[orientation=vertical]/list:after:top-[33px]","first:group-data-[orientation=vertical]/list:after:top-[29px]"],lg:["group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]","group-data-[orientation=vertical]/list:after:left-[16px]","group-data-[orientation=vertical]/list:after:top-[41px]","first:group-data-[orientation=vertical]/list:after:top-[37px]"]},intent:{basic:"",neutral:"",success:""},disabled:{true:"before:opacity-dim-3",false:""},disabledAfter:{true:"after:opacity-dim-3",false:""}},defaultVariants:{disabled:!1,disabledAfter:!1,size:"lg",intent:"basic"}}),R=l.cva(["relative flex group/btn disabled:cursor-default","group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center","group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm","group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0","group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start","group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm","group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0"],{variants:{size:{sm:["group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]","group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]"],md:["group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]","group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]"],lg:["group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]","group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]"]},readOnly:{true:"cursor-default",false:"cursor-pointer"}},defaultVariants:{size:"lg",readOnly:!1}}),$=l.cva(["relative flex shrink-0 justify-center items-center","rounded-full","text-body-2 font-bold","group-disabled/btn:opacity-dim-3"],{variants:{size:{sm:["w-sz-16 h-sz-16","group-data-[orientation=horizontal]/list:mt-[-16px]","group-data-[orientation=vertical]/list:ml-[-16px]"],md:["w-sz-24 h-sz-24","group-data-[orientation=horizontal]/list:mt-[-24px]","group-data-[orientation=vertical]/list:ml-[-24px]"],lg:["w-sz-32 h-sz-32","group-data-[orientation=horizontal]/list:mt-[-32px]","group-data-[orientation=vertical]/list:ml-[-32px]"]},intent:{basic:"",neutral:"",success:""},state:{complete:"",incomplete:"",active:""}},compoundVariants:[{intent:"basic",state:["complete","incomplete"],class:["text-on-basic-container bg-basic-container","group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container"]},{intent:"basic",state:"active",class:"text-on-basic bg-basic"},{intent:"neutral",state:["complete","incomplete"],class:["text-on-neutral-container bg-neutral-container","group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container"]},{intent:"neutral",state:"active",class:"text-on-neutral bg-neutral"},{intent:"success",state:["complete","incomplete"],class:["text-on-success-container bg-success-container","group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-success-container"]},{intent:"success",state:"active",class:"text-on-success bg-success"}],defaultVariants:{size:"lg",state:"incomplete",intent:"basic"}}),M=()=>t.jsx(L.Icon,{size:"sm",children:t.jsx(V.Check,{})}),h=({complete:e,incomplete:a,className:r})=>{const{size:s,intent:c}=T(),{index:p,state:o}=j();return t.jsx("span",{className:$({size:s,intent:c,state:o,className:r}),"aria-hidden":"true",children:s!=="sm"&&t.jsxs(t.Fragment,{children:[o==="complete"&&(e===void 0?t.jsx(M,{}):e),o!=="complete"&&(a===void 0?`${p+1}`:a)]})})};h.displayName="ProgressTracker.StepIndicator";const k=({disabled:e=!1,children:a,"aria-label":r,className:s,ref:c,...p})=>{const{stepIndex:o,steps:u,onStepClick:v,setSteps:f,size:x,intent:z,readOnly:d}=T(),m=`${O}-step-${n.useId()}`,g=[...u.keys()].indexOf(m),C=(()=>{const i=[...u.keys()][g+1];return!!(i&&u.get(i)?.includes("disabled"))})(),b=g===o?"active":g<o?"complete":"incomplete";return n.useEffect(()=>(f(i=>new Map(i).set(m,[b,e?"disabled":""].filter(N=>!!N))),()=>{f(i=>(i.delete(m),i))}),[]),t.jsx("li",{"data-spark-component":"progress-tracker-step",id:m,ref:c,"data-state":b,...b==="active"&&{"aria-current":"step"},className:A({size:x,intent:z,disabled:e,disabledAfter:C}),...p,children:t.jsx("button",{type:"button","aria-label":r,"data-interactive":!e&&!d,...!e&&!d&&{onClick:()=>v?.(g)},disabled:e,className:R({size:x,readOnly:d,className:s}),children:t.jsx(P.Provider,{value:{index:g,state:b},children:a||t.jsx(h,{})})})})};k.displayName="ProgressTracker.Step";const E=l.cva(["flex text-body-2 ","text-on-surface group-disabled/btn:text-on-surface/dim-1","group-data-[orientation=horizontal]/list:mt-md","group-data-[orientation=vertical]/list:ml-md","group-data-[orientation=vertical]/list:my-auto"],{variants:{state:{complete:"",incomplete:"",active:"font-bold"}}}),y=({className:e,children:a})=>{const{state:r}=j();return t.jsx("span",{className:E({state:r,className:e}),children:a})};y.displayName="ProgressTracker.StepLabel";const w=Object.assign(I,{Step:k,StepLabel:y,StepIndicator:h});w.displayName="ProgressTracker";k.displayName="ProgressTracker.Step";y.displayName="ProgressTracker.StepLabel";h.displayName="ProgressTracker.StepIndicator";exports.ProgressTracker=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("class-variance-authority"),n=require("react"),V=require("@spark-ui/icons/Check"),L=require("../Icon-C-cNTnzd.js"),q=l.cx(["flex flex-nowrap items-start group/list","data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full","data-[orientation=vertical]:flex-col"]),S=n.createContext({}),P=n.createContext({}),T=()=>n.useContext(S),j=()=>n.useContext(P),O=":progress-tracker",I=({stepIndex:e=0,onStepClick:a,readOnly:r=!1,intent:s="support",size:p="lg",orientation:c="horizontal",children:o,className:u,ref:b,...f})=>{const[x,z]=n.useState(new Map),d=r?"div":"nav";return t.jsx(S.Provider,{value:{stepIndex:e,onStepClick:a,steps:x,setSteps:z,size:p,intent:s,readOnly:r},children:t.jsx(d,{ref:b,"data-spark-component":"progress-tracker",className:l.cx("inline-flex",u),...f,children:t.jsx("ol",{"data-orientation":c,className:q,style:{counterReset:"step"},children:o})})})};I.displayName="ProgressTracker";const A=l.cva(["relative inline-flex items-start flex-auto first:grow-0 justify-center group/item","after:absolute after:z-base","last:after:content-none","after:bg-outline","group-data-[orientation=horizontal]/list:before:bg-outline","group-data-[orientation=horizontal]/list:px-[1px]","group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base","group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0","group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]","first:group-data-[orientation=horizontal]/list:before:content-none","group-data-[orientation=vertical]/list:py-[1px]","group-data-[orientation=vertical]/list:items-start","group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]"],{variants:{size:{sm:["group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]","group-data-[orientation=vertical]/list:after:left-[8px]","group-data-[orientation=vertical]/list:after:top-[25px]","first:group-data-[orientation=vertical]/list:after:top-[21px]"],md:["group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]","group-data-[orientation=vertical]/list:after:left-[12px]","group-data-[orientation=vertical]/list:after:top-[33px]","first:group-data-[orientation=vertical]/list:after:top-[29px]"],lg:["group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]","group-data-[orientation=vertical]/list:after:left-[16px]","group-data-[orientation=vertical]/list:after:top-[41px]","first:group-data-[orientation=vertical]/list:after:top-[37px]"]},intent:{support:"",neutral:"",success:""},disabled:{true:"before:opacity-dim-3",false:""},disabledAfter:{true:"after:opacity-dim-3",false:""}},defaultVariants:{disabled:!1,disabledAfter:!1,size:"lg",intent:"support"}}),R=l.cva(["relative flex group/btn disabled:cursor-default","group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center","group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm","group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0","group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start","group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm","group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0"],{variants:{size:{sm:["group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]","group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]"],md:["group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]","group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]"],lg:["group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]","group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]"]},readOnly:{true:"cursor-default",false:"cursor-pointer"}},defaultVariants:{size:"lg",readOnly:!1}}),$=l.cva(["relative flex shrink-0 justify-center items-center","rounded-full","text-body-2 font-bold","group-disabled/btn:opacity-dim-3"],{variants:{size:{sm:["w-sz-16 h-sz-16","group-data-[orientation=horizontal]/list:mt-[-16px]","group-data-[orientation=vertical]/list:ml-[-16px]"],md:["w-sz-24 h-sz-24","group-data-[orientation=horizontal]/list:mt-[-24px]","group-data-[orientation=vertical]/list:ml-[-24px]"],lg:["w-sz-32 h-sz-32","group-data-[orientation=horizontal]/list:mt-[-32px]","group-data-[orientation=vertical]/list:ml-[-32px]"]},intent:{support:"",neutral:"",success:""},state:{complete:"",incomplete:"",active:""}},compoundVariants:[{intent:"support",state:["complete","incomplete"],class:["text-on-support-container bg-support-container","group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-support-container"]},{intent:"support",state:"active",class:"text-on-support bg-support"},{intent:"neutral",state:["complete","incomplete"],class:["text-on-neutral-container bg-neutral-container","group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container"]},{intent:"neutral",state:"active",class:"text-on-neutral bg-neutral"},{intent:"success",state:["complete","incomplete"],class:["text-on-success-container bg-success-container","group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-success-container"]},{intent:"success",state:"active",class:"text-on-success bg-success"}],defaultVariants:{size:"lg",state:"incomplete",intent:"support"}}),M=()=>t.jsx(L.Icon,{size:"sm",children:t.jsx(V.Check,{})}),v=({complete:e,incomplete:a,className:r})=>{const{size:s,intent:p}=T(),{index:c,state:o}=j();return t.jsx("span",{className:$({size:s,intent:p,state:o,className:r}),"aria-hidden":"true",children:s!=="sm"&&t.jsxs(t.Fragment,{children:[o==="complete"&&(e===void 0?t.jsx(M,{}):e),o!=="complete"&&(a===void 0?`${c+1}`:a)]})})};v.displayName="ProgressTracker.StepIndicator";const k=({disabled:e=!1,children:a,"aria-label":r,className:s,ref:p,...c})=>{const{stepIndex:o,steps:u,onStepClick:b,setSteps:f,size:x,intent:z,readOnly:d}=T(),m=`${O}-step-${n.useId()}`,g=[...u.keys()].indexOf(m),C=(()=>{const i=[...u.keys()][g+1];return!!(i&&u.get(i)?.includes("disabled"))})(),h=g===o?"active":g<o?"complete":"incomplete";return n.useEffect(()=>(f(i=>new Map(i).set(m,[h,e?"disabled":""].filter(N=>!!N))),()=>{f(i=>(i.delete(m),i))}),[]),t.jsx("li",{"data-spark-component":"progress-tracker-step",id:m,ref:p,"data-state":h,...h==="active"&&{"aria-current":"step"},className:A({size:x,intent:z,disabled:e,disabledAfter:C}),...c,children:t.jsx("button",{type:"button","aria-label":r,"data-interactive":!e&&!d,...!e&&!d&&{onClick:()=>b?.(g)},disabled:e,className:R({size:x,readOnly:d,className:s}),children:t.jsx(P.Provider,{value:{index:g,state:h},children:a||t.jsx(v,{})})})})};k.displayName="ProgressTracker.Step";const E=l.cva(["flex text-body-2 ","text-on-surface group-disabled/btn:text-on-surface/dim-1","group-data-[orientation=horizontal]/list:mt-md","group-data-[orientation=vertical]/list:ml-md","group-data-[orientation=vertical]/list:my-auto"],{variants:{state:{complete:"",incomplete:"",active:"font-bold"}}}),y=({className:e,children:a})=>{const{state:r}=j();return t.jsx("span",{className:E({state:r,className:e}),children:a})};y.displayName="ProgressTracker.StepLabel";const w=Object.assign(I,{Step:k,StepLabel:y,StepIndicator:v});w.displayName="ProgressTracker";k.displayName="ProgressTracker.Step";y.displayName="ProgressTracker.StepLabel";v.displayName="ProgressTracker.StepIndicator";exports.ProgressTracker=w;
 //# sourceMappingURL=index.js.map

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,"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 = 'support',\n  size = 'lg',\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ProgressTrackerProps>) => {\n  const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())\n\n  const Component = readOnly ? 'div' : 'nav'\n\n  return (\n    <ProgressTrackerContext.Provider\n      value={{ stepIndex, onStepClick, steps, setSteps, size, intent, readOnly }}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"progress-tracker\"\n        className={cx('inline-flex', className)}\n        {...rest}\n      >\n        <ol\n          data-orientation={orientation}\n          className={progressList}\n          style={{ counterReset: 'step' }}\n        >\n          {children}\n        </ol>\n      </Component>\n    </ProgressTrackerContext.Provider>\n  )\n}\n\nProgressTracker.displayName = 'ProgressTracker'\n","import { cva } from 'class-variance-authority'\n\nexport const stepItemVariant = cva(\n  [\n    'relative inline-flex items-start flex-auto first:grow-0 justify-center group/item',\n    // Progress Track\n    'after:absolute after:z-base',\n    'last:after:content-none',\n    'after:bg-outline',\n    'group-data-[orientation=horizontal]/list:before:bg-outline',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:px-[1px]',\n    'group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base',\n    'group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0',\n    'group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]',\n    'first:group-data-[orientation=horizontal]/list:before:content-none',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:py-[1px]',\n    'group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[8px]',\n          'group-data-[orientation=vertical]/list:after:top-[25px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[21px]',\n        ],\n        md: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[12px]',\n          'group-data-[orientation=vertical]/list:after:top-[33px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[29px]',\n        ],\n        lg: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[16px]',\n          'group-data-[orientation=vertical]/list:after:top-[41px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[37px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      disabled: {\n        true: 'before:opacity-dim-3',\n        false: '',\n      },\n      disabledAfter: {\n        true: 'after:opacity-dim-3',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n      disabledAfter: false,\n      size: 'lg',\n      intent: 'support',\n    },\n  }\n)\n\nexport const stepButtonVariant = cva(\n  [\n    'relative flex group/btn disabled:cursor-default',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center',\n    'group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm',\n    'group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm',\n    'group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]',\n        ],\n        md: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]',\n        ],\n        lg: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]',\n        ],\n      },\n      readOnly: {\n        true: 'cursor-default',\n        false: 'cursor-pointer',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n      readOnly: false,\n    },\n  }\n)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n  [\n    'relative flex shrink-0 justify-center items-center',\n    'rounded-full',\n    'text-body-2 font-bold',\n    'group-disabled/btn:opacity-dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'w-sz-16 h-sz-16',\n          'group-data-[orientation=horizontal]/list:mt-[-16px]',\n          'group-data-[orientation=vertical]/list:ml-[-16px]',\n        ],\n        md: [\n          'w-sz-24 h-sz-24',\n          'group-data-[orientation=horizontal]/list:mt-[-24px]',\n          'group-data-[orientation=vertical]/list:ml-[-24px]',\n        ],\n        lg: [\n          'w-sz-32 h-sz-32',\n          'group-data-[orientation=horizontal]/list:mt-[-32px]',\n          'group-data-[orientation=vertical]/list:ml-[-32px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      state: {\n        complete: '',\n        incomplete: '',\n        active: '',\n      },\n    },\n    /**\n     * Known type issue with CVA compoundVariants and VS Code/Intellisense:\n     * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163\n     * */\n    /* @ts-ignore */\n    compoundVariants: [\n      // Support\n      {\n        intent: 'support',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-support-container bg-support-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-support-container',\n        ],\n      },\n      {\n        intent: 'support',\n        state: 'active',\n        class: 'text-on-support bg-support',\n      },\n      // Neutral\n      {\n        intent: 'neutral',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-neutral-container bg-neutral-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container',\n        ],\n      },\n      {\n        intent: 'neutral',\n        state: 'active',\n        class: 'text-on-neutral bg-neutral',\n      },\n      // Success\n      {\n        intent: 'success',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-success-container bg-success-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-success-container',\n        ],\n      },\n      {\n        intent: 'success',\n        state: 'active',\n        class: 'text-on-success bg-success',\n      },\n    ],\n    defaultVariants: {\n      size: 'lg',\n      state: 'incomplete',\n      intent: 'support',\n    },\n  }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * The content to be rendered when step status is complete (checkmark icon by default)\n   */\n  complete?: ReactNode\n  /**\n   * The content to be rendered when step status is incomplete (step index by default)\n   */\n  incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n  <Icon size=\"sm\">\n    <Check />\n  </Icon>\n)\n\nexport const ProgressTrackerStepIndicator = ({\n  complete,\n  incomplete,\n  className,\n}: ProgressTrackerStepIndicatorProps) => {\n  const { size, intent } = useProgressTrackerContext()\n  const { index, state } = useProgressTrackerStepContext()\n\n  return (\n    <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n      {size !== 'sm' && (\n        <>\n          {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n          {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n        </>\n      )}\n    </span>\n  )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n  ID_PREFIX,\n  ProgressTrackerStepContext,\n  useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n  (\n    | {\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        disabled?: boolean\n        'aria-label': string\n      }\n  )\n\nexport const ProgressTrackerStep = ({\n  disabled = false,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: ProgressTrackerStepProps) => {\n  const {\n    stepIndex: currentStepIndex,\n    steps,\n    onStepClick,\n    setSteps,\n    size,\n    intent,\n    readOnly,\n  } = useProgressTrackerContext()\n\n  const stepId = `${ID_PREFIX}-step-${useId()}`\n  const stepIndex = [...steps.keys()].indexOf(stepId)\n\n  const disabledAfter = (() => {\n    const nextStepId = [...steps.keys()][stepIndex + 1]\n\n    return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n  })()\n\n  const progressState = (() => {\n    if (stepIndex === currentStepIndex) return 'active'\n    else if (stepIndex < currentStepIndex) return 'complete'\n    else return 'incomplete'\n  })()\n\n  useEffect(() => {\n    setSteps(steps => {\n      const newSteps = new Map(steps)\n\n      return newSteps.set(\n        stepId,\n        [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n      )\n    })\n\n    return () => {\n      setSteps(steps => {\n        steps.delete(stepId)\n\n        return steps\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <li\n      data-spark-component=\"progress-tracker-step\"\n      id={stepId}\n      ref={ref}\n      data-state={progressState}\n      {...(progressState === 'active' && {\n        'aria-current': 'step',\n      })}\n      className={stepItemVariant({\n        size,\n        intent,\n        disabled,\n        disabledAfter,\n      })}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-interactive={!disabled && !readOnly}\n        {...(!disabled &&\n          !readOnly && {\n            onClick: () => onStepClick?.(stepIndex),\n          })}\n        disabled={disabled}\n        className={stepButtonVariant({\n          size,\n          readOnly,\n          className,\n        })}\n      >\n        <ProgressTrackerStepContext.Provider\n          value={{\n            index: stepIndex,\n            state: progressState,\n          }}\n        >\n          {children || <ProgressTrackerStepIndicator />}\n        </ProgressTrackerStepContext.Provider>\n      </button>\n    </li>\n  )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n  children: ReactNode\n}\n\nconst stepLabel = cva(\n  [\n    'flex text-body-2 ',\n    'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n    'group-data-[orientation=horizontal]/list:mt-md',\n    'group-data-[orientation=vertical]/list:ml-md',\n    'group-data-[orientation=vertical]/list:my-auto',\n  ],\n  {\n    variants: {\n      state: {\n        complete: '',\n        incomplete: '',\n        active: 'font-bold',\n      },\n    },\n  }\n)\n\nexport const ProgressTrackerStepLabel = ({\n  className,\n  children,\n}: ProgressTrackerStepLabelProps) => {\n  const { state } = useProgressTrackerStepContext()\n\n  return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n  ProgressTrackerStepIndicator as StepIndicator,\n  type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\nexport const ProgressTracker: typeof Root & {\n  Step: typeof Step\n  StepLabel: typeof StepLabel\n  StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n  Step,\n  StepLabel,\n  StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"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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"}

package/dist/progress-tracker/index.mjs

@@ -1,8 +1,8 @@
-import { jsx as a, jsxs as j, Fragment as O } from "react/jsx-runtime";
+import { jsx as e, jsxs as j, Fragment as O } from "react/jsx-runtime";
 import { cx as y, cva as x } from "class-variance-authority";
 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-C23-htlD.mjs";
+import { I as M } from "../Icon-BO327oHU.mjs";
 const R = y([
   "flex flex-nowrap items-start group/list",
   "data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full",
@@ -13,29 +13,29 @@ const R = y([
   {}
 ), w = () => P(I), N = () => P(T), B = ":progress-tracker", C = ({
   stepIndex: t = 0,
-  onStepClick: e,
+  onStepClick: a,
   readOnly: r = !1,
-  intent: n = "basic",
+  intent: n = "support",
   size: s = "lg",
   orientation: l = "horizontal",
   children: o,
   className: p,
-  ref: h,
+  ref: b,
   ...d
 }) => {
   const [g, v] = $(/* @__PURE__ */ new Map()), c = r ? "div" : "nav";
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ e(
     I.Provider,
     {
-      value: { stepIndex: t, onStepClick: e, steps: g, setSteps: v, size: s, intent: n, readOnly: r },
-      children: /* @__PURE__ */ a(
+      value: { stepIndex: t, onStepClick: a, steps: g, setSteps: v, size: s, intent: n, readOnly: r },
+      children: /* @__PURE__ */ e(
         c,
         {
-          ref: h,
+          ref: b,
           "data-spark-component": "progress-tracker",
           className: y("inline-flex", p),
           ...d,
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ e(
             "ol",
             {
               "data-orientation": l,
@@ -107,7 +107,7 @@ const D = x(
         ]
       },
       intent: {
-        basic: "",
+        support: "",
         neutral: "",
         success: ""
       },
@@ -124,7 +124,7 @@ const D = x(
       disabled: !1,
       disabledAfter: !1,
       size: "lg",
-      intent: "basic"
+      intent: "support"
     }
   }
 ), X = x(
@@ -192,7 +192,7 @@ const D = x(
         ]
       },
       intent: {
-        basic: "",
+        support: "",
         neutral: "",
         success: ""
       },
@@ -208,20 +208,20 @@ const D = x(
      * */
     /* @ts-ignore */
     compoundVariants: [
-      // Basic
+      // Support
       {
-        intent: "basic",
+        intent: "support",
         state: ["complete", "incomplete"],
         class: [
-          "text-on-basic-container bg-basic-container",
-          "group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered",
-          "group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container"
+          "text-on-support-container bg-support-container",
+          "group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered",
+          "group-hover/btn:group-data-[interactive=false]/btn:bg-support-container"
         ]
       },
       {
-        intent: "basic",
+        intent: "support",
         state: "active",
-        class: "text-on-basic bg-basic"
+        class: "text-on-support bg-support"
       },
       // Neutral
       {
@@ -257,24 +257,24 @@ const D = x(
     defaultVariants: {
       size: "lg",
       state: "incomplete",
-      intent: "basic"
+      intent: "support"
     }
   }
-), q = () => /* @__PURE__ */ a(M, { size: "sm", children: /* @__PURE__ */ a(F, {}) }), b = ({
+), q = () => /* @__PURE__ */ e(M, { size: "sm", children: /* @__PURE__ */ e(F, {}) }), h = ({
   complete: t,
-  incomplete: e,
+  incomplete: a,
   className: r
 }) => {
   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)
+  return /* @__PURE__ */ e("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__ */ e(q, {}) : t),
+    o !== "complete" && (a === void 0 ? `${l + 1}` : a)
   ] }) });
 };
-b.displayName = "ProgressTracker.StepIndicator";
+h.displayName = "ProgressTracker.StepIndicator";
 const z = ({
   disabled: t = !1,
-  children: e,
+  children: a,
   "aria-label": r,
   className: n,
   ref: s,
@@ -283,7 +283,7 @@ const z = ({
   const {
     stepIndex: o,
     steps: p,
-    onStepClick: h,
+    onStepClick: b,
     setSteps: d,
     size: g,
     intent: v,
@@ -297,7 +297,7 @@ const z = ({
     [m, t ? "disabled" : ""].filter((L) => !!L)
   )), () => {
     d((i) => (i.delete(f), i));
-  }), []), /* @__PURE__ */ a(
+  }), []), /* @__PURE__ */ e(
     "li",
     {
       "data-spark-component": "progress-tracker-step",
@@ -314,14 +314,14 @@ const z = ({
         disabledAfter: V
       }),
       ...l,
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           "aria-label": r,
           "data-interactive": !t && !c,
           ...!t && !c && {
-            onClick: () => h?.(u)
+            onClick: () => b?.(u)
           },
           disabled: t,
           className: X({
@@ -329,14 +329,14 @@ const z = ({
             readOnly: c,
             className: n
           }),
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ e(
             T.Provider,
             {
               value: {
                 index: u,
                 state: m
               },
-              children: e || /* @__PURE__ */ a(b, {})
+              children: a || /* @__PURE__ */ e(h, {})
             }
           )
         }
@@ -364,21 +364,21 @@ const G = x(
   }
 ), k = ({
   className: t,
-  children: e
+  children: a
 }) => {
   const { state: r } = N();
-  return /* @__PURE__ */ a("span", { className: G({ state: r, className: t }), children: e });
+  return /* @__PURE__ */ e("span", { className: G({ state: r, className: t }), children: a });
 };
 k.displayName = "ProgressTracker.StepLabel";
 const H = Object.assign(C, {
   Step: z,
   StepLabel: k,
-  StepIndicator: b
+  StepIndicator: h
 });
 H.displayName = "ProgressTracker";
 z.displayName = "ProgressTracker.Step";
 k.displayName = "ProgressTracker.StepLabel";
-b.displayName = "ProgressTracker.StepIndicator";
+h.displayName = "ProgressTracker.StepIndicator";
 export {
   H as ProgressTracker
 };