@spark-ui/components 17.11.0 → 17.11.2

package/dist/popover-Daknmg_Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-Daknmg_Z.js","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n  | 'surface'\n  | 'main'\n  | 'support'\n  | 'accent'\n  | 'success'\n  | 'alert'\n  | 'danger'\n  | 'info'\n  | 'neutral'\nexport interface PopoverContextState {\n  headerId: HeaderId\n  setHeaderId: (id: HeaderId) => void\n  intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n  children,\n  intent,\n}: {\n  children: ReactNode\n  intent: PopoverIntent\n}) => {\n  const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n  return (\n    <PopoverContext\n      value={{\n        headerId,\n        setHeaderId,\n        intent,\n      }}\n    >\n      {children}\n    </PopoverContext>\n  )\n}\n\nexport const usePopover = () => {\n  const context = useContext(PopoverContext)\n\n  if (!context) {\n    throw Error('usePopover must be used within a Popover provider')\n  }\n\n  return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n  intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n  return (\n    <PopoverProvider intent={intent}>\n      <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n        {children}\n      </RadixPopover.Root>\n    </PopoverProvider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n  <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n    {children}\n  </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n  ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n  asChild = false,\n  width = 16,\n  height = 8,\n  className,\n  ref,\n  ...rest\n}: ArrowProps) => {\n  const { intent } = usePopover()\n\n  /**\n   * This is necessary to override a Radix UI behaviour.\n   * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n   */\n  const styles = cva('visible', {\n    variants: {\n      intent: {\n        surface: 'fill-surface',\n        main: 'fill-main-container',\n        support: 'fill-support-container',\n        accent: 'fill-accent-container',\n        success: 'fill-success-container',\n        alert: 'fill-alert-container',\n        danger: 'fill-error-container',\n        info: 'fill-info-container',\n        neutral: 'fill-neutral-container',\n      },\n    },\n    defaultVariants: {\n      intent: 'surface',\n    },\n  })\n\n  return (\n    <RadixPopover.Arrow\n      data-spark-component=\"popover-arrow\"\n      ref={ref}\n      className={styles({ intent, className })}\n      asChild={asChild}\n      width={width}\n      height={height}\n      {...rest}\n    />\n  )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <RadixPopover.Close\n      data-spark-component=\"popover-close-button\"\n      ref={ref}\n      className={cx('right-lg top-md absolute', className)}\n      asChild\n      {...rest}\n    >\n      <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n        <Icon>\n          <CloseSVG />\n        </Icon>\n      </IconButton>\n    </RadixPopover.Close>\n  )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'rounded-md',\n    'shadow-sm',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    'max-h-(--radix-popper-available-height) overflow-y-auto',\n  ],\n  {\n    variants: {\n      intent: {\n        surface: 'bg-surface text-on-surface',\n        main: 'bg-main-container text-on-main-container',\n        support: 'bg-support-container text-on-support-container',\n        accent: 'bg-accent-container text-on-accent-container',\n        success: 'bg-success-container text-on-success-container',\n        alert: 'bg-alert-container text-on-alert-container',\n        danger: 'bg-error-container text-on-error-container',\n        info: 'bg-info-container text-on-info-container',\n        neutral: 'bg-neutral-container text-on-neutral-container',\n      },\n      matchTriggerWidth: {\n        true: 'w-(--radix-popper-anchor-width)',\n      },\n      enforceBoundaries: {\n        true: ['max-w-(--radix-popper-available-width)'],\n      },\n\n      inset: {\n        true: 'overflow-hidden',\n        false: 'p-lg',\n      },\n      elevation: {\n        dropdown: 'z-dropdown',\n        popover: 'z-popover',\n      },\n    },\n    compoundVariants: [\n      {\n        inset: false,\n        /**\n         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n         */\n        class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n      },\n      {\n        enforceBoundaries: false,\n        matchTriggerWidth: false,\n        class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n      },\n    ],\n    defaultVariants: {\n      matchTriggerWidth: false,\n      enforceBoundaries: false,\n      inset: false,\n      intent: 'surface',\n      elevation: 'popover',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n  StylesProps & {\n    ref?: Ref<HTMLDivElement>\n  }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n  // Spark props\n  className,\n  children,\n  matchTriggerWidth = false,\n  // Radix props\n  align = 'center',\n  arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n  asChild = false,\n  avoidCollisions = true,\n  'aria-labelledby': ariaLabelledBy,\n  collisionBoundary,\n  collisionPadding = 0,\n  hideWhenDetached = false,\n  side = 'bottom',\n  sideOffset = 8,\n  sticky = 'partial',\n  inset = false,\n  elevation = 'popover',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { headerId, intent } = usePopover()\n\n  return (\n    <RadixPopover.Content\n      aria-labelledby={headerId || ariaLabelledBy}\n      className={styles({\n        enforceBoundaries: !!collisionBoundary,\n        matchTriggerWidth,\n        inset,\n        elevation,\n        intent,\n        className,\n      })}\n      data-spark-component=\"popover-content\"\n      ref={ref}\n      {...{\n        align,\n        arrowPadding,\n        asChild,\n        avoidCollisions,\n        collisionBoundary,\n        collisionPadding,\n        hideWhenDetached,\n        side,\n        sideOffset,\n        sticky,\n      }}\n      {...rest}\n    >\n      {children}\n    </RadixPopover.Content>\n  )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n  const id = `${ID_PREFIX}-header-${useId()}`\n  const { setHeaderId } = usePopover()\n\n  useLayoutEffect(() => {\n    setHeaderId(id)\n\n    return () => setHeaderId(null)\n  }, [id, setHeaderId])\n\n  return (\n    <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n      {children}\n    </header>\n  )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n  <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n  <RadixPopover.Trigger\n    data-spark-component=\"popover-trigger\"\n    ref={ref}\n    asChild={asChild}\n    {...rest}\n  >\n    {children}\n  </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n  Anchor: typeof Anchor\n  Arrow: typeof Arrow\n  CloseButton: typeof CloseButton\n  Content: typeof Content\n  Header: typeof Header\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n} = Object.assign(Root, {\n  Anchor,\n  Arrow,\n  CloseButton,\n  Content,\n  Header,\n  Portal,\n  Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}

package/dist/progress/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../progress-DaQt4olK.js`);exports.Progress=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../progress-DBD2FiQ1.js`);exports.Progress=e.t;

package/dist/progress/index.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../progress-C-Zs94G2.mjs";
+import { t as e } from "../progress-BfpWgeE1.mjs";
 export { e as Progress };

package/dist/{progress-C-Zs94G2.mjs → progress-BfpWgeE1.mjs}

@@ -76,7 +76,7 @@ var _ = ({ className: e, value: n, max: r = 100, min: i = 0, shape: a = "square"
 		b,
 		f
 	]), S = m || (p ? (e, t) => t === null ? e ?? "" : p(t, r) : void 0);
-	return /* @__PURE__ */ c(d.Provider, {
+	return /* @__PURE__ */ c(d, {
 		value: x,
 		children: /* @__PURE__ */ c(u.Root, {
 			"data-spark-component": "progress",
@@ -129,4 +129,4 @@ b.displayName = "Progress", v.displayName = "Progress.Label", g.displayName = "P
 //#endregion
 export { b as t };
 
-//# sourceMappingURL=progress-C-Zs94G2.mjs.map
+//# sourceMappingURL=progress-BfpWgeE1.mjs.map

package/dist/{progress-C-Zs94G2.mjs.map → progress-BfpWgeE1.mjs.map}

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

package/dist/{progress-DaQt4olK.js → progress-DBD2FiQ1.js}

@@ -1,2 +1,2 @@
-require(`./chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/progress`);var a=(0,t.createContext)(null),o=`:progress`,s=()=>{let e=(0,t.useContext)(a);if(!e)throw Error(`useProgress must be used within a Progress provider`);return e},c=(0,e.cva)([`h-full w-full`,`transition-width duration-400`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],accent:[`bg-accent`],success:[`bg-success`],alert:[`bg-alert`],danger:[`bg-error`],info:[`bg-info`],neutral:[`bg-neutral`]},shape:{square:[],rounded:[`rounded-sm`]}}}),l=({className:t,style:r,ref:a,onTransitionEnd:o,...l})=>{let{value:u,max:d,min:f,intent:p,shape:m,onComplete:h}=s(),g=u===null?0:(u-f)/(d-f)*100,_=u===null,v=e=>{o?.(e),u!==null&&u>=d&&h&&h()};return(0,n.jsx)(i.Progress.Indicator,{"data-spark-component":`progress-indicator`,className:(0,e.cx)(c({className:t,intent:p,shape:m}),_&&`animate-standalone-indeterminate-bar absolute -translate-x-1/2`),style:{...r,...!_&&u!==null&&{width:`${g}%`}},ref:a,onTransitionEnd:v,...l})};l.displayName=`ProgressIndicator`;var u=({className:t,...r})=>{let{shape:a}=s();return(0,n.jsx)(i.Progress.Track,{"data-spark-component":`progress-track`,className:(0,e.cx)(`h-sz-4 relative col-span-2 w-full`,`transform-gpu`,`overflow-hidden`,`bg-on-background/dim-4`,{"rounded-sm":a===`rounded`},t),...r,children:(0,n.jsx)(l,{})})};u.displayName=`Progress.Track`;var d=({className:r,value:o,max:s=100,min:c=0,shape:l=`square`,intent:d=`support`,onComplete:f,getValueLabel:p,getAriaValueText:m,children:h=(0,n.jsx)(u,{}),ref:g,..._})=>{let[v,y]=(0,t.useState)(),b=(0,t.useMemo)(()=>({value:o??null,max:s,min:c,intent:d,shape:l,onLabelId:y,onComplete:f}),[s,c,o,d,l,y,f]),x=m||(p?(e,t)=>t===null?e??``:p(t,s):void 0);return(0,n.jsx)(a.Provider,{value:b,children:(0,n.jsx)(i.Progress.Root,{"data-spark-component":`progress`,ref:g,className:(0,e.cx)(`gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]`,r),value:o??null,max:s,min:c,"aria-labelledby":v,getAriaValueText:x,..._,children:h})})};d.displayName=`Progress`;var f=({id:e,children:a,ref:c,...l})=>{let u=`${o}-label-${(0,t.useId)()}`,d=e||u,{onLabelId:f}=s(),p=(0,r.useMergeRefs)(c,(0,t.useCallback)(e=>{f(e?d:void 0)},[d,f]));return(0,n.jsx)(i.Progress.Label,{"data-spark-component":`progress-label`,id:d,className:`default:text-body-1-highlight text-on-surface`,ref:p,...l,children:a})};f.displayName=`Progress.Label`;var p=({className:t,children:r,...a})=>(0,n.jsx)(i.Progress.Value,{"data-spark-component":`progress-value`,className:(0,e.cx)(`default:text-body-1 text-on-surface col-start-2 text-right`,t),...a,children:r});p.displayName=`Progress.Value`;var m=Object.assign(d,{Label:f,Track:u,Value:p});m.displayName=`Progress`,f.displayName=`Progress.Label`,u.displayName=`Progress.Track`,p.displayName=`Progress.Value`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return m}});
-//# sourceMappingURL=progress-DaQt4olK.js.map
+require(`./chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/progress`);var a=(0,t.createContext)(null),o=`:progress`,s=()=>{let e=(0,t.useContext)(a);if(!e)throw Error(`useProgress must be used within a Progress provider`);return e},c=(0,e.cva)([`h-full w-full`,`transition-width duration-400`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],accent:[`bg-accent`],success:[`bg-success`],alert:[`bg-alert`],danger:[`bg-error`],info:[`bg-info`],neutral:[`bg-neutral`]},shape:{square:[],rounded:[`rounded-sm`]}}}),l=({className:t,style:r,ref:a,onTransitionEnd:o,...l})=>{let{value:u,max:d,min:f,intent:p,shape:m,onComplete:h}=s(),g=u===null?0:(u-f)/(d-f)*100,_=u===null,v=e=>{o?.(e),u!==null&&u>=d&&h&&h()};return(0,n.jsx)(i.Progress.Indicator,{"data-spark-component":`progress-indicator`,className:(0,e.cx)(c({className:t,intent:p,shape:m}),_&&`animate-standalone-indeterminate-bar absolute -translate-x-1/2`),style:{...r,...!_&&u!==null&&{width:`${g}%`}},ref:a,onTransitionEnd:v,...l})};l.displayName=`ProgressIndicator`;var u=({className:t,...r})=>{let{shape:a}=s();return(0,n.jsx)(i.Progress.Track,{"data-spark-component":`progress-track`,className:(0,e.cx)(`h-sz-4 relative col-span-2 w-full`,`transform-gpu`,`overflow-hidden`,`bg-on-background/dim-4`,{"rounded-sm":a===`rounded`},t),...r,children:(0,n.jsx)(l,{})})};u.displayName=`Progress.Track`;var d=({className:r,value:o,max:s=100,min:c=0,shape:l=`square`,intent:d=`support`,onComplete:f,getValueLabel:p,getAriaValueText:m,children:h=(0,n.jsx)(u,{}),ref:g,..._})=>{let[v,y]=(0,t.useState)(),b=(0,t.useMemo)(()=>({value:o??null,max:s,min:c,intent:d,shape:l,onLabelId:y,onComplete:f}),[s,c,o,d,l,y,f]),x=m||(p?(e,t)=>t===null?e??``:p(t,s):void 0);return(0,n.jsx)(a,{value:b,children:(0,n.jsx)(i.Progress.Root,{"data-spark-component":`progress`,ref:g,className:(0,e.cx)(`gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]`,r),value:o??null,max:s,min:c,"aria-labelledby":v,getAriaValueText:x,..._,children:h})})};d.displayName=`Progress`;var f=({id:e,children:a,ref:c,...l})=>{let u=`${o}-label-${(0,t.useId)()}`,d=e||u,{onLabelId:f}=s(),p=(0,r.useMergeRefs)(c,(0,t.useCallback)(e=>{f(e?d:void 0)},[d,f]));return(0,n.jsx)(i.Progress.Label,{"data-spark-component":`progress-label`,id:d,className:`default:text-body-1-highlight text-on-surface`,ref:p,...l,children:a})};f.displayName=`Progress.Label`;var p=({className:t,children:r,...a})=>(0,n.jsx)(i.Progress.Value,{"data-spark-component":`progress-value`,className:(0,e.cx)(`default:text-body-1 text-on-surface col-start-2 text-right`,t),...a,children:r});p.displayName=`Progress.Value`;var m=Object.assign(d,{Label:f,Track:u,Value:p});m.displayName=`Progress`,f.displayName=`Progress.Label`,u.displayName=`Progress.Track`,p.displayName=`Progress.Value`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return m}});
+//# sourceMappingURL=progress-DBD2FiQ1.js.map

package/dist/{progress-DaQt4olK.js.map → progress-DBD2FiQ1.js.map}

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

package/dist/progress-tracker/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`);let t=require(`class-variance-authority`),n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@spark-ui/icons/Check`);var a=(0,t.cx)([`flex flex-nowrap items-start group/list`,`data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full`,`data-[orientation=vertical]:flex-col`]),o=(0,n.createContext)({}),s=(0,n.createContext)({}),c=()=>(0,n.useContext)(o),l=()=>(0,n.useContext)(s),u=`:progress-tracker`,d=({stepIndex:e=0,onStepClick:i,readOnly:s=!1,intent:c=`support`,size:l=`lg`,orientation:u=`horizontal`,children:d,className:f,ref:p,...m})=>{let[h,g]=(0,n.useState)(new Map),_=s?`div`:`nav`;return(0,r.jsx)(o.Provider,{value:{stepIndex:e,onStepClick:i,steps:h,setSteps:g,size:l,intent:c,readOnly:s},children:(0,r.jsx)(_,{ref:p,"data-spark-component":`progress-tracker`,className:(0,t.cx)(`inline-flex`,f),...m,children:(0,r.jsx)(`ol`,{"data-orientation":u,className:a,style:{counterReset:`step`},children:d})})})};d.displayName=`ProgressTracker`;var f=(0,t.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`}}),p=(0,t.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}}),m=(0,t.cva)([`relative flex shrink-0 justify-center items-center`,`rounded-full`,`text-body-2-highlight`,`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`}}),h=()=>(0,r.jsx)(e.t,{size:`sm`,children:(0,r.jsx)(i.Check,{})}),g=({complete:e,incomplete:t,className:n})=>{let{size:i,intent:a}=c(),{index:o,state:s}=l();return(0,r.jsx)(`span`,{className:m({size:i,intent:a,state:s,className:n}),"aria-hidden":`true`,children:i!==`sm`&&(0,r.jsxs)(r.Fragment,{children:[s===`complete`&&(e===void 0?(0,r.jsx)(h,{}):e),s!==`complete`&&(t===void 0?`${o+1}`:t)]})})};g.displayName=`ProgressTracker.StepIndicator`;var _=({disabled:e=!1,children:t,"aria-label":i,className:a,ref:o,...l})=>{let{stepIndex:d,steps:m,onStepClick:h,setSteps:_,size:v,intent:y,readOnly:b}=c(),x=`${u}-step-${(0,n.useId)()}`,S=[...m.keys()].indexOf(x),C=(()=>{let e=[...m.keys()][S+1];return!!(e&&m.get(e)?.includes(`disabled`))})(),w=S===d?`active`:S<d?`complete`:`incomplete`;return(0,n.useEffect)(()=>(_(t=>new Map(t).set(x,[w,e?`disabled`:``].filter(e=>!!e))),()=>{_(e=>(e.delete(x),e))}),[]),(0,r.jsx)(`li`,{"data-spark-component":`progress-tracker-step`,id:x,ref:o,"data-state":w,...w===`active`&&{"aria-current":`step`},className:f({size:v,intent:y,disabled:e,disabledAfter:C}),...l,children:(0,r.jsx)(`button`,{type:`button`,"aria-label":i,"data-interactive":!e&&!b,...!e&&!b&&{onClick:()=>h?.(S)},disabled:e,className:p({size:v,readOnly:b,className:a}),children:(0,r.jsx)(s.Provider,{value:{index:S,state:w},children:t||(0,r.jsx)(g,{})})})})};_.displayName=`ProgressTracker.Step`;var v=(0,t.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-medium`}}}),y=({className:e,children:t})=>{let{state:n}=l();return(0,r.jsx)(`span`,{className:v({state:n,className:e}),children:t})};y.displayName=`ProgressTracker.StepLabel`;var b=Object.assign(d,{Step:_,StepLabel:y,StepIndicator:g});b.displayName=`ProgressTracker`,_.displayName=`ProgressTracker.Step`,y.displayName=`ProgressTracker.StepLabel`,g.displayName=`ProgressTracker.StepIndicator`,exports.ProgressTracker=b;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`);let t=require(`class-variance-authority`),n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@spark-ui/icons/Check`);var a=(0,t.cx)([`flex flex-nowrap items-start group/list`,`data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full`,`data-[orientation=vertical]:flex-col`]),o=(0,n.createContext)({}),s=(0,n.createContext)({}),c=()=>(0,n.useContext)(o),l=()=>(0,n.useContext)(s),u=`:progress-tracker`,d=({stepIndex:e=0,onStepClick:i,readOnly:s=!1,intent:c=`support`,size:l=`lg`,orientation:u=`horizontal`,children:d,className:f,ref:p,...m})=>{let[h,g]=(0,n.useState)(new Map);return(0,r.jsx)(o,{value:{stepIndex:e,onStepClick:i,steps:h,setSteps:g,size:l,intent:c,readOnly:s},children:(0,r.jsx)(s?`div`:`nav`,{ref:p,"data-spark-component":`progress-tracker`,className:(0,t.cx)(`inline-flex`,f),...m,children:(0,r.jsx)(`ol`,{"data-orientation":u,className:a,style:{counterReset:`step`},children:d})})})};d.displayName=`ProgressTracker`;var f=(0,t.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`}}),p=(0,t.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}}),m=(0,t.cva)([`relative flex shrink-0 justify-center items-center`,`rounded-full`,`text-body-2-highlight`,`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`}}),h=()=>(0,r.jsx)(e.t,{size:`sm`,children:(0,r.jsx)(i.Check,{})}),g=({complete:e,incomplete:t,className:n})=>{let{size:i,intent:a}=c(),{index:o,state:s}=l();return(0,r.jsx)(`span`,{className:m({size:i,intent:a,state:s,className:n}),"aria-hidden":`true`,children:i!==`sm`&&(0,r.jsxs)(r.Fragment,{children:[s===`complete`&&(e===void 0?(0,r.jsx)(h,{}):e),s!==`complete`&&(t===void 0?`${o+1}`:t)]})})};g.displayName=`ProgressTracker.StepIndicator`;var _=({disabled:e=!1,children:t,"aria-label":i,className:a,ref:o,...l})=>{let{stepIndex:d,steps:m,onStepClick:h,setSteps:_,size:v,intent:y,readOnly:b}=c(),x=`${u}-step-${(0,n.useId)()}`,S=[...m.keys()].indexOf(x),C=(()=>{let e=[...m.keys()][S+1];return!!(e&&m.get(e)?.includes(`disabled`))})(),w=S===d?`active`:S<d?`complete`:`incomplete`;return(0,n.useEffect)(()=>(_(t=>new Map(t).set(x,[w,e?`disabled`:``].filter(e=>!!e))),()=>{_(e=>(e.delete(x),e))}),[]),(0,r.jsx)(`li`,{"data-spark-component":`progress-tracker-step`,id:x,ref:o,"data-state":w,...w===`active`&&{"aria-current":`step`},className:f({size:v,intent:y,disabled:e,disabledAfter:C}),...l,children:(0,r.jsx)(`button`,{type:`button`,"aria-label":i,"data-interactive":!e&&!b,...!e&&!b&&{onClick:()=>h?.(S)},disabled:e,className:p({size:v,readOnly:b,className:a}),children:(0,r.jsx)(s,{value:{index:S,state:w},children:t||(0,r.jsx)(g,{})})})})};_.displayName=`ProgressTracker.Step`;var v=(0,t.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-medium`}}}),y=({className:e,children:t})=>{let{state:n}=l();return(0,r.jsx)(`span`,{className:v({state:n,className:e}),children:t})};y.displayName=`ProgressTracker.StepLabel`;var b=Object.assign(d,{Step:_,StepLabel:y,StepIndicator:g});b.displayName=`ProgressTracker`,_.displayName=`ProgressTracker.Step`,y.displayName=`ProgressTracker.StepLabel`,g.displayName=`ProgressTracker.StepIndicator`,exports.ProgressTracker=b;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/progress-tracker/ProgressTracker.styles.ts","../../src/progress-tracker/ProgressTrackerContext.ts","../../src/progress-tracker/ProgressTracker.tsx","../../src/progress-tracker/ProgressTrackerStep.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.tsx","../../src/progress-tracker/ProgressTrackerStep.tsx","../../src/progress-tracker/ProgressTrackerStepLabel.tsx","../../src/progress-tracker/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\n\nexport const progressList = cx([\n  'flex flex-nowrap items-start group/list',\n  'data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',\n  'data-[orientation=vertical]:flex-col',\n])\n","import { createContext, type Dispatch, type SetStateAction, useContext } from 'react'\n\nimport type { ProgressTrackerProps } from './ProgressTracker'\n\n// Interfaces\nexport type ProgressTrackerContextInterface = Required<\n  Pick<ProgressTrackerProps, 'stepIndex' | 'size' | 'intent' | 'readOnly'>\n> &\n  Pick<ProgressTrackerProps, 'onStepClick'> & {\n    steps: Map<string, string[]>\n    setSteps: Dispatch<SetStateAction<Map<string, string[]>>>\n  }\n\nexport interface ProgressTrackerStepContextInterface {\n  index: number\n  state: 'active' | 'complete' | 'incomplete'\n}\n\n// Contexts\nexport const ProgressTrackerContext = createContext<ProgressTrackerContextInterface>(\n  {} as ProgressTrackerContextInterface\n)\n\nexport const ProgressTrackerStepContext = createContext<ProgressTrackerStepContextInterface>(\n  {} as ProgressTrackerStepContextInterface\n)\n\n// Hooks\nexport const useProgressTrackerContext = () => useContext(ProgressTrackerContext)\n\nexport const useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext)\n\nexport const ID_PREFIX = ':progress-tracker'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type PropsWithChildren, useState } from 'react'\n\nimport { progressList } from './ProgressTracker.styles'\nimport {\n  ProgressTrackerContext,\n  type ProgressTrackerContextInterface,\n} from './ProgressTrackerContext'\nimport type { StepIndicatorVariantProps } from './ProgressTrackerStepIndicator.styles'\n\nexport interface ProgressTrackerProps\n  extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent'> {\n  /**\n   * The orientation of the progress tracker\n   * @default 'horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The index of the current step.\n   * @default 0\n   */\n  stepIndex?: number\n  /**\n   * Event handler called when clicking on a step.\n   */\n  onStepClick?: (stepIndex: number) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default false\n   */\n  readOnly?: boolean\n}\n\nexport const ProgressTracker = ({\n  stepIndex = 0,\n  onStepClick,\n  readOnly = false,\n  intent = 'support',\n  size = 'lg',\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ProgressTrackerProps>) => {\n  const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())\n\n  const Component = readOnly ? 'div' : 'nav'\n\n  return (\n    <ProgressTrackerContext.Provider\n      value={{ stepIndex, onStepClick, steps, setSteps, size, intent, readOnly }}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"progress-tracker\"\n        className={cx('inline-flex', className)}\n        {...rest}\n      >\n        <ol\n          data-orientation={orientation}\n          className={progressList}\n          style={{ counterReset: 'step' }}\n        >\n          {children}\n        </ol>\n      </Component>\n    </ProgressTrackerContext.Provider>\n  )\n}\n\nProgressTracker.displayName = 'ProgressTracker'\n","import { cva } from 'class-variance-authority'\n\nexport const stepItemVariant = cva(\n  [\n    'relative inline-flex items-start flex-auto first:grow-0 justify-center group/item',\n    // Progress Track\n    'after:absolute after:z-base',\n    'last:after:content-none',\n    'after:bg-outline',\n    'group-data-[orientation=horizontal]/list:before:bg-outline',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:px-[1px]',\n    'group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base',\n    'group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0',\n    'group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]',\n    'first:group-data-[orientation=horizontal]/list:before:content-none',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:py-[1px]',\n    'group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[8px]',\n          'group-data-[orientation=vertical]/list:after:top-[25px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[21px]',\n        ],\n        md: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[12px]',\n          'group-data-[orientation=vertical]/list:after:top-[33px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[29px]',\n        ],\n        lg: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[16px]',\n          'group-data-[orientation=vertical]/list:after:top-[41px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[37px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      disabled: {\n        true: 'before:opacity-dim-3',\n        false: '',\n      },\n      disabledAfter: {\n        true: 'after:opacity-dim-3',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n      disabledAfter: false,\n      size: 'lg',\n      intent: 'support',\n    },\n  }\n)\n\nexport const stepButtonVariant = cva(\n  [\n    'relative flex group/btn disabled:cursor-default',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center',\n    'group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm',\n    'group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm',\n    'group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]',\n        ],\n        md: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]',\n        ],\n        lg: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]',\n        ],\n      },\n      readOnly: {\n        true: 'cursor-default',\n        false: 'cursor-pointer',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n      readOnly: false,\n    },\n  }\n)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n  [\n    'relative flex shrink-0 justify-center items-center',\n    'rounded-full',\n    'text-body-2-highlight',\n    'group-disabled/btn:opacity-dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'w-sz-16 h-sz-16',\n          'group-data-[orientation=horizontal]/list:mt-[-16px]',\n          'group-data-[orientation=vertical]/list:ml-[-16px]',\n        ],\n        md: [\n          'w-sz-24 h-sz-24',\n          'group-data-[orientation=horizontal]/list:mt-[-24px]',\n          'group-data-[orientation=vertical]/list:ml-[-24px]',\n        ],\n        lg: [\n          'w-sz-32 h-sz-32',\n          'group-data-[orientation=horizontal]/list:mt-[-32px]',\n          'group-data-[orientation=vertical]/list:ml-[-32px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      state: {\n        complete: '',\n        incomplete: '',\n        active: '',\n      },\n    },\n    /**\n     * Known type issue with CVA compoundVariants and VS Code/Intellisense:\n     * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163\n     * */\n    /* @ts-ignore */\n    compoundVariants: [\n      // Support\n      {\n        intent: 'support',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-support-container bg-support-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-support-container',\n        ],\n      },\n      {\n        intent: 'support',\n        state: 'active',\n        class: 'text-on-support bg-support',\n      },\n      // Neutral\n      {\n        intent: 'neutral',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-neutral-container bg-neutral-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container',\n        ],\n      },\n      {\n        intent: 'neutral',\n        state: 'active',\n        class: 'text-on-neutral bg-neutral',\n      },\n      // Success\n      {\n        intent: 'success',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-success-container bg-success-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-success-container',\n        ],\n      },\n      {\n        intent: 'success',\n        state: 'active',\n        class: 'text-on-success bg-success',\n      },\n    ],\n    defaultVariants: {\n      size: 'lg',\n      state: 'incomplete',\n      intent: 'support',\n    },\n  }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * The content to be rendered when step status is complete (checkmark icon by default)\n   */\n  complete?: ReactNode\n  /**\n   * The content to be rendered when step status is incomplete (step index by default)\n   */\n  incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n  <Icon size=\"sm\">\n    <Check />\n  </Icon>\n)\n\n/** The visual indicator (circle or checkmark) for a progress tracker step. Renders a <span> element. */\nexport const ProgressTrackerStepIndicator = ({\n  complete,\n  incomplete,\n  className,\n}: ProgressTrackerStepIndicatorProps) => {\n  const { size, intent } = useProgressTrackerContext()\n  const { index, state } = useProgressTrackerStepContext()\n\n  return (\n    <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n      {size !== 'sm' && (\n        <>\n          {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n          {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n        </>\n      )}\n    </span>\n  )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n  ID_PREFIX,\n  ProgressTrackerStepContext,\n  useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n  (\n    | {\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        disabled?: boolean\n        'aria-label': string\n      }\n  )\n\n/** An individual step in the progress tracker. Renders a <li> element. */\nexport const ProgressTrackerStep = ({\n  disabled = false,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: ProgressTrackerStepProps) => {\n  const {\n    stepIndex: currentStepIndex,\n    steps,\n    onStepClick,\n    setSteps,\n    size,\n    intent,\n    readOnly,\n  } = useProgressTrackerContext()\n\n  const stepId = `${ID_PREFIX}-step-${useId()}`\n  const stepIndex = [...steps.keys()].indexOf(stepId)\n\n  const disabledAfter = (() => {\n    const nextStepId = [...steps.keys()][stepIndex + 1]\n\n    return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n  })()\n\n  const progressState = (() => {\n    if (stepIndex === currentStepIndex) return 'active'\n    else if (stepIndex < currentStepIndex) return 'complete'\n    else return 'incomplete'\n  })()\n\n  useEffect(() => {\n    setSteps(steps => {\n      const newSteps = new Map(steps)\n\n      return newSteps.set(\n        stepId,\n        [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n      )\n    })\n\n    return () => {\n      setSteps(steps => {\n        steps.delete(stepId)\n\n        return steps\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <li\n      data-spark-component=\"progress-tracker-step\"\n      id={stepId}\n      ref={ref}\n      data-state={progressState}\n      {...(progressState === 'active' && {\n        'aria-current': 'step',\n      })}\n      className={stepItemVariant({\n        size,\n        intent,\n        disabled,\n        disabledAfter,\n      })}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-interactive={!disabled && !readOnly}\n        {...(!disabled &&\n          !readOnly && {\n            onClick: () => onStepClick?.(stepIndex),\n          })}\n        disabled={disabled}\n        className={stepButtonVariant({\n          size,\n          readOnly,\n          className,\n        })}\n      >\n        <ProgressTrackerStepContext.Provider\n          value={{\n            index: stepIndex,\n            state: progressState,\n          }}\n        >\n          {children || <ProgressTrackerStepIndicator />}\n        </ProgressTrackerStepContext.Provider>\n      </button>\n    </li>\n  )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n  children: ReactNode\n}\n\nconst stepLabel = cva(\n  [\n    'flex text-body-2',\n    'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n    'group-data-[orientation=horizontal]/list:mt-md',\n    'group-data-[orientation=vertical]/list:ml-md',\n    'group-data-[orientation=vertical]/list:my-auto',\n  ],\n  {\n    variants: {\n      state: {\n        complete: '',\n        incomplete: '',\n        active: 'font-medium',\n      },\n    },\n  }\n)\n\n/** The text label for a progress tracker step. Renders a <span> element. */\nexport const ProgressTrackerStepLabel = ({\n  className,\n  children,\n}: ProgressTrackerStepLabelProps) => {\n  const { state } = useProgressTrackerStepContext()\n\n  return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n  ProgressTrackerStepIndicator as StepIndicator,\n  type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\n/**\n * A component that displays a multi-step process with visual indicators for completed, current, and upcoming steps.\n */\nexport const ProgressTracker: typeof Root & {\n  Step: typeof Step\n  StepLabel: typeof StepLabel\n  StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n  Step,\n  StepLabel,\n  StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"mappings":"yQAEA,IAAa,GAAA,EAAA,EAAA,IAAkB,CAC7B,0CACA,8EACA,uCACD,CAAC,CCaW,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAEY,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAGY,OAAA,EAAA,EAAA,YAA6C,EAAuB,CAEpE,OAAA,EAAA,EAAA,YAAiD,EAA2B,CAE5E,EAAY,oBCCZ,GAAmB,CAC9B,YAAY,EACZ,cACA,WAAW,GACX,SAAS,UACT,OAAO,KACP,cAAc,aACd,WACA,YACA,MACA,GAAG,KAC0C,CAC7C,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAA+D,IAAI,IAAM,CAEjF,EAAY,EAAW,MAAQ,MAErC,OACE,EAAA,EAAA,KAAC,EAAuB,SAAxB,CACE,MAAO,CAAE,YAAW,cAAa,QAAO,WAAU,OAAM,SAAQ,WAAU,WAE1E,EAAA,EAAA,KAAC,EAAD,CACO,MACL,uBAAqB,mBACrB,WAAA,EAAA,EAAA,IAAc,cAAe,EAAU,CACvC,GAAI,YAEJ,EAAA,EAAA,KAAC,KAAD,CACE,mBAAkB,EAClB,UAAW,EACX,MAAO,CAAE,aAAc,OAAQ,CAE9B,WACE,CAAA,CACK,CAAA,CACoB,CAAA,EAItC,EAAgB,YAAc,kBCrE9B,IAAa,GAAA,EAAA,EAAA,KACX,CACE,oFAEA,8BACA,0BACA,mBACA,6DAEA,oDACA,kHACA,gHACA,iHACA,qEAEA,kDACA,qDACA,kHACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CAEF,qHACA,8IACA,6EACA,8EAEA,0DACA,0DACA,gEACD,CACD,GAAI,CAEF,uHACA,8IACA,6EACA,8EAEA,2DACA,0DACA,gEACD,CACD,GAAI,CAEF,uHACA,8IACA,6EACA,8EAEA,2DACA,0DACA,gEACD,CACF,CACD,OAAQ,CACN,QAAS,GACT,QAAS,GACT,QAAS,GACV,CACD,SAAU,CACR,KAAM,uBACN,MAAO,GACR,CACD,cAAe,CACb,KAAM,sBACN,MAAO,GACR,CACF,CACD,gBAAiB,CACf,SAAU,GACV,cAAe,GACf,KAAM,KACN,OAAQ,UACT,CACF,CACF,CAEY,GAAA,EAAA,EAAA,KACX,CACE,kDAEA,0GACA,sGACA,+HAEA,qGACA,gGACA,2HACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CACF,0GACA,sGACD,CACD,GAAI,CACF,0GACA,sGACD,CACD,GAAI,CACF,0GACA,sGACD,CACF,CACD,SAAU,CACR,KAAM,iBACN,MAAO,iBACR,CACF,CACD,gBAAiB,CACf,KAAM,KACN,SAAU,GACX,CACF,CACF,CCrHY,GAAA,EAAA,EAAA,KACX,CACE,qDACA,eACA,wBACA,mCACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CACF,kBACA,sDACA,oDACD,CACD,GAAI,CACF,kBACA,sDACA,oDACD,CACD,GAAI,CACF,kBACA,sDACA,oDACD,CACF,CACD,OAAQ,CACN,QAAS,GACT,QAAS,GACT,QAAS,GACV,CACD,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,GACT,CACF,CAMD,iBAAkB,CAEhB,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CAED,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CAED,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CACF,CACD,gBAAiB,CACf,KAAM,KACN,MAAO,aACP,OAAQ,UACT,CACF,CACF,CC/EK,OACJ,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,eACT,EAAA,EAAA,KAAC,EAAA,MAAD,EAAS,CAAA,CACJ,CAAA,CAII,GAAgC,CAC3C,WACA,aACA,eACuC,CACvC,GAAM,CAAE,OAAM,UAAW,GAA2B,CAC9C,CAAE,QAAO,SAAU,GAA+B,CAExD,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAqB,CAAE,OAAM,SAAQ,QAAO,YAAW,CAAC,CAAE,cAAY,gBACpF,IAAS,OACR,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IAAU,aAAe,IAAa,IAAA,IAAY,EAAA,EAAA,KAAC,EAAD,EAAqB,CAAA,CAAG,GAC1E,IAAU,aAAe,IAAe,IAAA,GAAY,GAAG,EAAQ,IAAM,GACrE,CAAA,CAAA,CAEA,CAAA,EAIX,EAA6B,YAAc,gCCtB3C,IAAa,GAAuB,CAClC,WAAW,GACX,WACA,aAAc,EACd,YACA,MACA,GAAG,KAC2B,CAC9B,GAAM,CACJ,UAAW,EACX,QACA,cACA,WACA,OACA,SACA,YACE,GAA2B,CAEzB,EAAS,GAAG,EAAU,SAAA,EAAA,EAAA,QAAe,GACrC,EAAY,CAAC,GAAG,EAAM,MAAM,CAAC,CAAC,QAAQ,EAAO,CAE7C,OAAuB,CAC3B,IAAM,EAAa,CAAC,GAAG,EAAM,MAAM,CAAC,CAAC,EAAY,GAEjD,MAAO,CAAC,EAAE,GAAc,EAAM,IAAI,EAAW,EAAE,SAAS,WAAW,KACjE,CAEE,EACA,IAAc,EAAyB,SAClC,EAAY,EAAyB,WAClC,aAuBd,OApBA,EAAA,EAAA,gBACE,EAAS,GACU,IAAI,IAAI,EAAM,CAEf,IACd,EACA,CAAC,EAAe,EAAW,WAAa,GAAG,CAAC,OAAO,GAAK,CAAC,CAAC,EAAE,CAC7D,CACD,KAEW,CACX,EAAS,IACP,EAAM,OAAO,EAAO,CAEb,GACP,GAGH,EAAE,CAAC,EAGJ,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,wBACrB,GAAI,EACC,MACL,aAAY,EACZ,GAAK,IAAkB,UAAY,CACjC,eAAgB,OACjB,CACD,UAAW,EAAgB,CACzB,OACA,SACA,WACA,gBACD,CAAC,CACF,GAAI,YAEJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,aAAY,EACZ,mBAAkB,CAAC,GAAY,CAAC,EAChC,GAAK,CAAC,GACJ,CAAC,GAAY,CACX,YAAe,IAAc,EAAU,CACxC,CACO,WACV,UAAW,EAAkB,CAC3B,OACA,WACA,YACD,CAAC,WAEF,EAAA,EAAA,KAAC,EAA2B,SAA5B,CACE,MAAO,CACL,MAAO,EACP,MAAO,EACR,UAEA,IAAY,EAAA,EAAA,KAAC,EAAD,EAAgC,CAAA,CACT,CAAA,CAC/B,CAAA,CACN,CAAA,EAIT,EAAoB,YAAc,uBChHlC,IAAM,GAAA,EAAA,EAAA,KACJ,CACE,mBACA,2DACA,iDACA,+CACA,iDACD,CACD,CACE,SAAU,CACR,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,cACT,CACF,CACF,CACF,CAGY,GAA4B,CACvC,YACA,cACmC,CACnC,GAAM,CAAE,SAAU,GAA+B,CAEjD,OAAO,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAU,CAAE,QAAO,YAAW,CAAC,CAAG,WAAgB,CAAA,EAG5E,EAAyB,YAAc,4BC3BvC,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,KAAA,EACA,UAAA,EACA,cAAA,EACD,CAAC,CAEF,EAAgB,YAAc,kBAC9B,EAAK,YAAc,uBACnB,EAAU,YAAc,4BACxB,EAAc,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/progress-tracker/ProgressTracker.styles.ts","../../src/progress-tracker/ProgressTrackerContext.ts","../../src/progress-tracker/ProgressTracker.tsx","../../src/progress-tracker/ProgressTrackerStep.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.tsx","../../src/progress-tracker/ProgressTrackerStep.tsx","../../src/progress-tracker/ProgressTrackerStepLabel.tsx","../../src/progress-tracker/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\n\nexport const progressList = cx([\n  'flex flex-nowrap items-start group/list',\n  'data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',\n  'data-[orientation=vertical]:flex-col',\n])\n","import { createContext, type Dispatch, type SetStateAction, useContext } from 'react'\n\nimport type { ProgressTrackerProps } from './ProgressTracker'\n\n// Interfaces\nexport type ProgressTrackerContextInterface = Required<\n  Pick<ProgressTrackerProps, 'stepIndex' | 'size' | 'intent' | 'readOnly'>\n> &\n  Pick<ProgressTrackerProps, 'onStepClick'> & {\n    steps: Map<string, string[]>\n    setSteps: Dispatch<SetStateAction<Map<string, string[]>>>\n  }\n\nexport interface ProgressTrackerStepContextInterface {\n  index: number\n  state: 'active' | 'complete' | 'incomplete'\n}\n\n// Contexts\nexport const ProgressTrackerContext = createContext<ProgressTrackerContextInterface>(\n  {} as ProgressTrackerContextInterface\n)\n\nexport const ProgressTrackerStepContext = createContext<ProgressTrackerStepContextInterface>(\n  {} as ProgressTrackerStepContextInterface\n)\n\n// Hooks\nexport const useProgressTrackerContext = () => useContext(ProgressTrackerContext)\n\nexport const useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext)\n\nexport const ID_PREFIX = ':progress-tracker'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type PropsWithChildren, useState } from 'react'\n\nimport { progressList } from './ProgressTracker.styles'\nimport {\n  ProgressTrackerContext,\n  type ProgressTrackerContextInterface,\n} from './ProgressTrackerContext'\nimport type { StepIndicatorVariantProps } from './ProgressTrackerStepIndicator.styles'\n\nexport interface ProgressTrackerProps\n  extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent'> {\n  /**\n   * The orientation of the progress tracker\n   * @default 'horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The index of the current step.\n   * @default 0\n   */\n  stepIndex?: number\n  /**\n   * Event handler called when clicking on a step.\n   */\n  onStepClick?: (stepIndex: number) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default false\n   */\n  readOnly?: boolean\n}\n\nexport const ProgressTracker = ({\n  stepIndex = 0,\n  onStepClick,\n  readOnly = false,\n  intent = 'support',\n  size = 'lg',\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ProgressTrackerProps>) => {\n  const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())\n\n  const Component = readOnly ? 'div' : 'nav'\n\n  return (\n    <ProgressTrackerContext\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>\n  )\n}\n\nProgressTracker.displayName = 'ProgressTracker'\n","import { cva } from 'class-variance-authority'\n\nexport const stepItemVariant = cva(\n  [\n    'relative inline-flex items-start flex-auto first:grow-0 justify-center group/item',\n    // Progress Track\n    'after:absolute after:z-base',\n    'last:after:content-none',\n    'after:bg-outline',\n    'group-data-[orientation=horizontal]/list:before:bg-outline',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:px-[1px]',\n    'group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base',\n    'group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0',\n    'group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]',\n    'first:group-data-[orientation=horizontal]/list:before:content-none',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:py-[1px]',\n    'group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[8px]',\n          'group-data-[orientation=vertical]/list:after:top-[25px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[21px]',\n        ],\n        md: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[12px]',\n          'group-data-[orientation=vertical]/list:after:top-[33px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[29px]',\n        ],\n        lg: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[16px]',\n          'group-data-[orientation=vertical]/list:after:top-[41px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[37px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      disabled: {\n        true: 'before:opacity-dim-3',\n        false: '',\n      },\n      disabledAfter: {\n        true: 'after:opacity-dim-3',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n      disabledAfter: false,\n      size: 'lg',\n      intent: 'support',\n    },\n  }\n)\n\nexport const stepButtonVariant = cva(\n  [\n    'relative flex group/btn disabled:cursor-default',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center',\n    'group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm',\n    'group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm',\n    'group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]',\n        ],\n        md: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]',\n        ],\n        lg: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]',\n        ],\n      },\n      readOnly: {\n        true: 'cursor-default',\n        false: 'cursor-pointer',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n      readOnly: false,\n    },\n  }\n)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n  [\n    'relative flex shrink-0 justify-center items-center',\n    'rounded-full',\n    'text-body-2-highlight',\n    'group-disabled/btn:opacity-dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'w-sz-16 h-sz-16',\n          'group-data-[orientation=horizontal]/list:mt-[-16px]',\n          'group-data-[orientation=vertical]/list:ml-[-16px]',\n        ],\n        md: [\n          'w-sz-24 h-sz-24',\n          'group-data-[orientation=horizontal]/list:mt-[-24px]',\n          'group-data-[orientation=vertical]/list:ml-[-24px]',\n        ],\n        lg: [\n          'w-sz-32 h-sz-32',\n          'group-data-[orientation=horizontal]/list:mt-[-32px]',\n          'group-data-[orientation=vertical]/list:ml-[-32px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      state: {\n        complete: '',\n        incomplete: '',\n        active: '',\n      },\n    },\n    /**\n     * Known type issue with CVA compoundVariants and VS Code/Intellisense:\n     * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163\n     * */\n    /* @ts-ignore */\n    compoundVariants: [\n      // Support\n      {\n        intent: 'support',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-support-container bg-support-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-support-container',\n        ],\n      },\n      {\n        intent: 'support',\n        state: 'active',\n        class: 'text-on-support bg-support',\n      },\n      // Neutral\n      {\n        intent: 'neutral',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-neutral-container bg-neutral-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container',\n        ],\n      },\n      {\n        intent: 'neutral',\n        state: 'active',\n        class: 'text-on-neutral bg-neutral',\n      },\n      // Success\n      {\n        intent: 'success',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-success-container bg-success-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-success-container',\n        ],\n      },\n      {\n        intent: 'success',\n        state: 'active',\n        class: 'text-on-success bg-success',\n      },\n    ],\n    defaultVariants: {\n      size: 'lg',\n      state: 'incomplete',\n      intent: 'support',\n    },\n  }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * The content to be rendered when step status is complete (checkmark icon by default)\n   */\n  complete?: ReactNode\n  /**\n   * The content to be rendered when step status is incomplete (step index by default)\n   */\n  incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n  <Icon size=\"sm\">\n    <Check />\n  </Icon>\n)\n\n/** The visual indicator (circle or checkmark) for a progress tracker step. Renders a <span> element. */\nexport const ProgressTrackerStepIndicator = ({\n  complete,\n  incomplete,\n  className,\n}: ProgressTrackerStepIndicatorProps) => {\n  const { size, intent } = useProgressTrackerContext()\n  const { index, state } = useProgressTrackerStepContext()\n\n  return (\n    <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n      {size !== 'sm' && (\n        <>\n          {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n          {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n        </>\n      )}\n    </span>\n  )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n  ID_PREFIX,\n  ProgressTrackerStepContext,\n  useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n  (\n    | {\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        disabled?: boolean\n        'aria-label': string\n      }\n  )\n\n/** An individual step in the progress tracker. Renders a <li> element. */\nexport const ProgressTrackerStep = ({\n  disabled = false,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: ProgressTrackerStepProps) => {\n  const {\n    stepIndex: currentStepIndex,\n    steps,\n    onStepClick,\n    setSteps,\n    size,\n    intent,\n    readOnly,\n  } = useProgressTrackerContext()\n\n  const stepId = `${ID_PREFIX}-step-${useId()}`\n  const stepIndex = [...steps.keys()].indexOf(stepId)\n\n  const disabledAfter = (() => {\n    const nextStepId = [...steps.keys()][stepIndex + 1]\n\n    return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n  })()\n\n  const progressState = (() => {\n    if (stepIndex === currentStepIndex) return 'active'\n    else if (stepIndex < currentStepIndex) return 'complete'\n    else return 'incomplete'\n  })()\n\n  useEffect(() => {\n    setSteps(steps => {\n      const newSteps = new Map(steps)\n\n      return newSteps.set(\n        stepId,\n        [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n      )\n    })\n\n    return () => {\n      setSteps(steps => {\n        steps.delete(stepId)\n\n        return steps\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <li\n      data-spark-component=\"progress-tracker-step\"\n      id={stepId}\n      ref={ref}\n      data-state={progressState}\n      {...(progressState === 'active' && {\n        'aria-current': 'step',\n      })}\n      className={stepItemVariant({\n        size,\n        intent,\n        disabled,\n        disabledAfter,\n      })}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-interactive={!disabled && !readOnly}\n        {...(!disabled &&\n          !readOnly && {\n            onClick: () => onStepClick?.(stepIndex),\n          })}\n        disabled={disabled}\n        className={stepButtonVariant({\n          size,\n          readOnly,\n          className,\n        })}\n      >\n        <ProgressTrackerStepContext\n          value={{\n            index: stepIndex,\n            state: progressState,\n          }}\n        >\n          {children || <ProgressTrackerStepIndicator />}\n        </ProgressTrackerStepContext>\n      </button>\n    </li>\n  )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n  children: ReactNode\n}\n\nconst stepLabel = cva(\n  [\n    'flex text-body-2',\n    'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n    'group-data-[orientation=horizontal]/list:mt-md',\n    'group-data-[orientation=vertical]/list:ml-md',\n    'group-data-[orientation=vertical]/list:my-auto',\n  ],\n  {\n    variants: {\n      state: {\n        complete: '',\n        incomplete: '',\n        active: 'font-medium',\n      },\n    },\n  }\n)\n\n/** The text label for a progress tracker step. Renders a <span> element. */\nexport const ProgressTrackerStepLabel = ({\n  className,\n  children,\n}: ProgressTrackerStepLabelProps) => {\n  const { state } = useProgressTrackerStepContext()\n\n  return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n  ProgressTrackerStepIndicator as StepIndicator,\n  type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\n/**\n * A component that displays a multi-step process with visual indicators for completed, current, and upcoming steps.\n */\nexport const ProgressTracker: typeof Root & {\n  Step: typeof Step\n  StepLabel: typeof StepLabel\n  StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n  Step,\n  StepLabel,\n  StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"mappings":"yQAEA,IAAa,GAAA,EAAA,EAAA,IAAkB,CAC7B,0CACA,8EACA,uCACD,CAAC,CCaW,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAEY,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAGY,OAAA,EAAA,EAAA,YAA6C,EAAuB,CAEpE,OAAA,EAAA,EAAA,YAAiD,EAA2B,CAE5E,EAAY,oBCCZ,GAAmB,CAC9B,YAAY,EACZ,cACA,WAAW,GACX,SAAS,UACT,OAAO,KACP,cAAc,aACd,WACA,YACA,MACA,GAAG,KAC0C,CAC7C,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAA+D,IAAI,IAAM,CAIvF,OACE,EAAA,EAAA,KAAC,EAAD,CACE,MAAO,CAAE,YAAW,cAAa,QAAO,WAAU,OAAM,SAAQ,WAAU,WAE1E,EAAA,EAAA,KANc,EAAW,MAAQ,MAMjC,CACO,MACL,uBAAqB,mBACrB,WAAA,EAAA,EAAA,IAAc,cAAe,EAAU,CACvC,GAAI,YAEJ,EAAA,EAAA,KAAC,KAAD,CACE,mBAAkB,EAClB,UAAW,EACX,MAAO,CAAE,aAAc,OAAQ,CAE9B,WACE,CAAA,CACK,CAAA,CACW,CAAA,EAI7B,EAAgB,YAAc,kBCrE9B,IAAa,GAAA,EAAA,EAAA,KACX,CACE,oFAEA,8BACA,0BACA,mBACA,6DAEA,oDACA,kHACA,gHACA,iHACA,qEAEA,kDACA,qDACA,kHACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CAEF,qHACA,8IACA,6EACA,8EAEA,0DACA,0DACA,gEACD,CACD,GAAI,CAEF,uHACA,8IACA,6EACA,8EAEA,2DACA,0DACA,gEACD,CACD,GAAI,CAEF,uHACA,8IACA,6EACA,8EAEA,2DACA,0DACA,gEACD,CACF,CACD,OAAQ,CACN,QAAS,GACT,QAAS,GACT,QAAS,GACV,CACD,SAAU,CACR,KAAM,uBACN,MAAO,GACR,CACD,cAAe,CACb,KAAM,sBACN,MAAO,GACR,CACF,CACD,gBAAiB,CACf,SAAU,GACV,cAAe,GACf,KAAM,KACN,OAAQ,UACT,CACF,CACF,CAEY,GAAA,EAAA,EAAA,KACX,CACE,kDAEA,0GACA,sGACA,+HAEA,qGACA,gGACA,2HACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CACF,0GACA,sGACD,CACD,GAAI,CACF,0GACA,sGACD,CACD,GAAI,CACF,0GACA,sGACD,CACF,CACD,SAAU,CACR,KAAM,iBACN,MAAO,iBACR,CACF,CACD,gBAAiB,CACf,KAAM,KACN,SAAU,GACX,CACF,CACF,CCrHY,GAAA,EAAA,EAAA,KACX,CACE,qDACA,eACA,wBACA,mCACD,CACD,CACE,SAAU,CACR,KAAM,CACJ,GAAI,CACF,kBACA,sDACA,oDACD,CACD,GAAI,CACF,kBACA,sDACA,oDACD,CACD,GAAI,CACF,kBACA,sDACA,oDACD,CACF,CACD,OAAQ,CACN,QAAS,GACT,QAAS,GACT,QAAS,GACV,CACD,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,GACT,CACF,CAMD,iBAAkB,CAEhB,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CAED,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CAED,CACE,OAAQ,UACR,MAAO,CAAC,WAAY,aAAa,CACjC,MAAO,CACL,iDACA,iFACA,0EACD,CACF,CACD,CACE,OAAQ,UACR,MAAO,SACP,MAAO,6BACR,CACF,CACD,gBAAiB,CACf,KAAM,KACN,MAAO,aACP,OAAQ,UACT,CACF,CACF,CC/EK,OACJ,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,eACT,EAAA,EAAA,KAAC,EAAA,MAAD,EAAS,CAAA,CACJ,CAAA,CAII,GAAgC,CAC3C,WACA,aACA,eACuC,CACvC,GAAM,CAAE,OAAM,UAAW,GAA2B,CAC9C,CAAE,QAAO,SAAU,GAA+B,CAExD,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAqB,CAAE,OAAM,SAAQ,QAAO,YAAW,CAAC,CAAE,cAAY,gBACpF,IAAS,OACR,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IAAU,aAAe,IAAa,IAAA,IAAY,EAAA,EAAA,KAAC,EAAD,EAAqB,CAAA,CAAG,GAC1E,IAAU,aAAe,IAAe,IAAA,GAAY,GAAG,EAAQ,IAAM,GACrE,CAAA,CAAA,CAEA,CAAA,EAIX,EAA6B,YAAc,gCCtB3C,IAAa,GAAuB,CAClC,WAAW,GACX,WACA,aAAc,EACd,YACA,MACA,GAAG,KAC2B,CAC9B,GAAM,CACJ,UAAW,EACX,QACA,cACA,WACA,OACA,SACA,YACE,GAA2B,CAEzB,EAAS,GAAG,EAAU,SAAA,EAAA,EAAA,QAAe,GACrC,EAAY,CAAC,GAAG,EAAM,MAAM,CAAC,CAAC,QAAQ,EAAO,CAE7C,OAAuB,CAC3B,IAAM,EAAa,CAAC,GAAG,EAAM,MAAM,CAAC,CAAC,EAAY,GAEjD,MAAO,CAAC,EAAE,GAAc,EAAM,IAAI,EAAW,EAAE,SAAS,WAAW,KACjE,CAEE,EACA,IAAc,EAAyB,SAClC,EAAY,EAAyB,WAClC,aAuBd,OApBA,EAAA,EAAA,gBACE,EAAS,GACU,IAAI,IAAI,EAAM,CAEf,IACd,EACA,CAAC,EAAe,EAAW,WAAa,GAAG,CAAC,OAAO,GAAK,CAAC,CAAC,EAAE,CAC7D,CACD,KAEW,CACX,EAAS,IACP,EAAM,OAAO,EAAO,CAEb,GACP,GAGH,EAAE,CAAC,EAGJ,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,wBACrB,GAAI,EACC,MACL,aAAY,EACZ,GAAK,IAAkB,UAAY,CACjC,eAAgB,OACjB,CACD,UAAW,EAAgB,CACzB,OACA,SACA,WACA,gBACD,CAAC,CACF,GAAI,YAEJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,aAAY,EACZ,mBAAkB,CAAC,GAAY,CAAC,EAChC,GAAK,CAAC,GACJ,CAAC,GAAY,CACX,YAAe,IAAc,EAAU,CACxC,CACO,WACV,UAAW,EAAkB,CAC3B,OACA,WACA,YACD,CAAC,WAEF,EAAA,EAAA,KAAC,EAAD,CACE,MAAO,CACL,MAAO,EACP,MAAO,EACR,UAEA,IAAY,EAAA,EAAA,KAAC,EAAD,EAAgC,CAAA,CAClB,CAAA,CACtB,CAAA,CACN,CAAA,EAIT,EAAoB,YAAc,uBChHlC,IAAM,GAAA,EAAA,EAAA,KACJ,CACE,mBACA,2DACA,iDACA,+CACA,iDACD,CACD,CACE,SAAU,CACR,MAAO,CACL,SAAU,GACV,WAAY,GACZ,OAAQ,cACT,CACF,CACF,CACF,CAGY,GAA4B,CACvC,YACA,cACmC,CACnC,GAAM,CAAE,SAAU,GAA+B,CAEjD,OAAO,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAU,CAAE,QAAO,YAAW,CAAC,CAAG,WAAgB,CAAA,EAG5E,EAAyB,YAAc,4BC3BvC,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,KAAA,EACA,UAAA,EACA,cAAA,EACD,CAAC,CAEF,EAAgB,YAAc,kBAC9B,EAAK,YAAc,uBACnB,EAAU,YAAc,4BACxB,EAAc,YAAc"}

package/dist/progress-tracker/index.mjs

@@ -9,8 +9,8 @@ var f = n([
 	"data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full",
 	"data-[orientation=vertical]:flex-col"
 ]), p = r({}), m = r({}), h = () => i(p), g = () => i(m), _ = ":progress-tracker", v = ({ stepIndex: e = 0, onStepClick: t, readOnly: r = !1, intent: i = "support", size: a = "lg", orientation: o = "horizontal", children: c, className: u, ref: d, ...m }) => {
-	let [h, g] = s(/* @__PURE__ */ new Map()), _ = r ? "div" : "nav";
-	return /* @__PURE__ */ l(p.Provider, {
+	let [h, g] = s(/* @__PURE__ */ new Map());
+	return /* @__PURE__ */ l(p, {
 		value: {
 			stepIndex: e,
 			onStepClick: t,
@@ -20,7 +20,7 @@ var f = n([
 			intent: i,
 			readOnly: r
 		},
-		children: /* @__PURE__ */ l(_, {
+		children: /* @__PURE__ */ l(r ? "div" : "nav", {
 			ref: d,
 			"data-spark-component": "progress-tracker",
 			className: n("inline-flex", u),
@@ -260,7 +260,7 @@ var w = ({ disabled: e = !1, children: t, "aria-label": n, className: r, ref: i,
 				readOnly: v,
 				className: r
 			}),
-			children: /* @__PURE__ */ l(m.Provider, {
+			children: /* @__PURE__ */ l(m, {
 				value: {
 					index: S,
 					state: T

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

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

package/dist/radio-group/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`radix-ui`),r=require(`react/jsx-runtime`),i=require(`@spark-ui/internal-utils`),a=require(`@spark-ui/components/form-field`);var o=(0,t.createContext)(null),s=()=>{let e=(0,t.useContext)(o);if(!e)throw Error(`useRadioGroup must be used within a RadioGroup provider`);return e},c=(0,e.cva)([`relative block`,`size-3/5`,`after:absolute`,`after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2`,`after:h-0`,`after:w-0`,`after:block`,`after:rounded-[50%]`,`after:content-['']`,`after:transition-all`,`data-[state=checked]:after:size-full`],{variants:{intent:(0,i.makeVariants)({main:[`after:bg-main`],support:[`after:bg-support`],accent:[`after:bg-accent`],neutral:[`after:bg-neutral`],success:[`after:bg-success`],alert:[`after:bg-alert`],error:[`after:bg-error`],info:[`after:bg-info`]})},defaultVariants:{intent:`support`}}),l=({intent:e,className:t,ref:i,...a})=>(0,r.jsx)(n.RadioGroup.Indicator,{ref:i,className:c({intent:e,className:t}),...a});l.displayName=`RadioGroup.RadioIndicator`;var u=(0,e.cva)([`flex shrink-0 items-center justify-center`,`rounded-full`,`border-md`,`outline-hidden`,`hover:ring-4`,`focus-visible:u-outline`,`disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent`,`u-shadow-border-transition`,`size-sz-24`],{variants:{intent:(0,i.makeVariants)({main:[`border-outline`,`data-[state=checked]:border-main`,`hover:ring-main-container`],support:[`border-outline`,`data-[state=checked]:border-support`,`hover:ring-support-container`],accent:[`border-outline`,`data-[state=checked]:border-accent`,`hover:ring-accent-container`],neutral:[`border-outline`,`data-[state=checked]:border-neutral`,`hover:ring-neutral-container`],info:[`border-info`,`data-[state=checked]:border-info`,`hover:ring-info-container`],success:[`border-success`,`data-[state=checked]:border-success`,`hover:ring-success-container`],alert:[`border-alert`,`data-[state=checked]:border-alert`,`hover:ring-alert-container`],error:[`border-error`,`data-[state=checked]:border-error`,`hover:ring-error-container`]})},defaultVariants:{intent:`support`}}),d=({intent:e,className:t,ref:i,...o})=>{let{state:s}=(0,a.useFormFieldControl)(),c=s??e;return(0,r.jsx)(n.RadioGroup.RadioGroupItem,{"data-spark-component":`radio-input`,ref:i,className:u({intent:c,className:t}),...o,children:(0,r.jsx)(l,{intent:c,forceMount:!0})})};d.displayName=`RadioGroup.RadioInput`;var f=(0,e.cva)(`grow`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),p=({disabled:e,...t})=>(0,r.jsx)(n.Label.Root,{"data-spark-component":`radio-label`,className:f({disabled:e}),...t});p.displayName=`RadioGroup.RadioLabel`;var m=`:radio`,h=({className:n,children:i,id:a,disabled:o,ref:c,...l})=>{let u=`${m}-input-${(0,t.useId)()}`,f=`${m}-label-${(0,t.useId)()}`,{intent:h,disabled:g,reverse:_}=s(),v=i&&(0,r.jsx)(p,{disabled:o||g,htmlFor:a||u,id:f,children:i}),y=(0,r.jsx)(d,{ref:c,id:a||u,intent:h,"aria-labelledby":i?f:void 0,...l,disabled:o}),b=_?(0,r.jsxs)(r.Fragment,{children:[v,y]}):(0,r.jsxs)(r.Fragment,{children:[y,v]});return(0,r.jsx)(`span`,{className:(0,e.cx)(`gap-md text-body-1 flex items-start`,n),children:b})};h.displayName=`RadioGroup.Radio`;var g=(0,e.cva)([`flex`],{variants:{orientation:{vertical:[`flex-col`,`gap-lg`],horizontal:[`flex-row`,`gap-xl`]}}}),_=({intent:e,disabled:n,reverse:i,children:a})=>{let s=(0,t.useMemo)(()=>({intent:e,disabled:n,reverse:i}),[e,n,i]);return(0,r.jsx)(o.Provider,{value:s,children:a})},v=({orientation:e=`vertical`,loop:t=!0,intent:i=`support`,disabled:o,className:s,required:c,reverse:l=!1,ref:u,...d})=>{let{labelId:f,isInvalid:p,isRequired:m,description:h,name:v}=(0,a.useFormFieldControl)(),y=c===void 0?m:c;return(0,r.jsx)(_,{reverse:l,intent:i,disabled:o,children:(0,r.jsx)(n.RadioGroup.RadioGroup,{"data-spark-component":`radio-group`,className:g({orientation:e,className:s}),name:v,ref:u,disabled:o,orientation:e,loop:t,required:y,"aria-labelledby":f,"aria-invalid":p,"aria-required":y,"aria-describedby":h,...d})})};v.displayName=`RadioGroup`;var y=Object.assign(v,{Radio:h});y.displayName=`RadioGroup`,h.displayName=`RadioGroup.Radio`,exports.RadioGroup=y;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`radix-ui`),r=require(`react/jsx-runtime`),i=require(`@spark-ui/internal-utils`),a=require(`@spark-ui/components/form-field`);var o=(0,t.createContext)(null),s=()=>{let e=(0,t.useContext)(o);if(!e)throw Error(`useRadioGroup must be used within a RadioGroup provider`);return e},c=(0,e.cva)([`relative block`,`size-3/5`,`after:absolute`,`after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2`,`after:h-0`,`after:w-0`,`after:block`,`after:rounded-[50%]`,`after:content-['']`,`after:transition-all`,`data-[state=checked]:after:size-full`],{variants:{intent:(0,i.makeVariants)({main:[`after:bg-main`],support:[`after:bg-support`],accent:[`after:bg-accent`],neutral:[`after:bg-neutral`],success:[`after:bg-success`],alert:[`after:bg-alert`],error:[`after:bg-error`],info:[`after:bg-info`]})},defaultVariants:{intent:`support`}}),l=({intent:e,className:t,ref:i,...a})=>(0,r.jsx)(n.RadioGroup.Indicator,{ref:i,className:c({intent:e,className:t}),...a});l.displayName=`RadioGroup.RadioIndicator`;var u=(0,e.cva)([`flex shrink-0 items-center justify-center`,`rounded-full`,`border-md`,`outline-hidden`,`hover:ring-4`,`focus-visible:u-outline`,`disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent`,`u-shadow-border-transition`,`size-sz-24`],{variants:{intent:(0,i.makeVariants)({main:[`border-outline`,`data-[state=checked]:border-main`,`hover:ring-main-container`],support:[`border-outline`,`data-[state=checked]:border-support`,`hover:ring-support-container`],accent:[`border-outline`,`data-[state=checked]:border-accent`,`hover:ring-accent-container`],neutral:[`border-outline`,`data-[state=checked]:border-neutral`,`hover:ring-neutral-container`],info:[`border-info`,`data-[state=checked]:border-info`,`hover:ring-info-container`],success:[`border-success`,`data-[state=checked]:border-success`,`hover:ring-success-container`],alert:[`border-alert`,`data-[state=checked]:border-alert`,`hover:ring-alert-container`],error:[`border-error`,`data-[state=checked]:border-error`,`hover:ring-error-container`]})},defaultVariants:{intent:`support`}}),d=({intent:e,className:t,ref:i,...o})=>{let{state:s}=(0,a.useFormFieldControl)(),c=s??e;return(0,r.jsx)(n.RadioGroup.RadioGroupItem,{"data-spark-component":`radio-input`,ref:i,className:u({intent:c,className:t}),...o,children:(0,r.jsx)(l,{intent:c,forceMount:!0})})};d.displayName=`RadioGroup.RadioInput`;var f=(0,e.cva)(`grow`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),p=({disabled:e,...t})=>(0,r.jsx)(n.Label.Root,{"data-spark-component":`radio-label`,className:f({disabled:e}),...t});p.displayName=`RadioGroup.RadioLabel`;var m=`:radio`,h=({className:n,children:i,id:a,disabled:o,ref:c,...l})=>{let u=`${m}-input-${(0,t.useId)()}`,f=`${m}-label-${(0,t.useId)()}`,{intent:h,disabled:g,reverse:_}=s(),v=i&&(0,r.jsx)(p,{disabled:o||g,htmlFor:a||u,id:f,children:i}),y=(0,r.jsx)(d,{ref:c,id:a||u,intent:h,"aria-labelledby":i?f:void 0,...l,disabled:o}),b=_?(0,r.jsxs)(r.Fragment,{children:[v,y]}):(0,r.jsxs)(r.Fragment,{children:[y,v]});return(0,r.jsx)(`span`,{className:(0,e.cx)(`gap-md text-body-1 flex items-start`,n),children:b})};h.displayName=`RadioGroup.Radio`;var g=(0,e.cva)([`flex`],{variants:{orientation:{vertical:[`flex-col`,`gap-lg`],horizontal:[`flex-row`,`gap-xl`]}}}),_=({intent:e,disabled:n,reverse:i,children:a})=>(0,r.jsx)(o,{value:(0,t.useMemo)(()=>({intent:e,disabled:n,reverse:i}),[e,n,i]),children:a}),v=({orientation:e=`vertical`,loop:t=!0,intent:i=`support`,disabled:o,className:s,required:c,reverse:l=!1,ref:u,...d})=>{let{labelId:f,isInvalid:p,isRequired:m,description:h,name:v}=(0,a.useFormFieldControl)(),y=c===void 0?m:c;return(0,r.jsx)(_,{reverse:l,intent:i,disabled:o,children:(0,r.jsx)(n.RadioGroup.RadioGroup,{"data-spark-component":`radio-group`,className:g({orientation:e,className:s}),name:v,ref:u,disabled:o,orientation:e,loop:t,required:y,"aria-labelledby":f,"aria-invalid":p,"aria-required":y,"aria-describedby":h,...d})})};v.displayName=`RadioGroup`;var y=Object.assign(v,{Radio:h});y.displayName=`RadioGroup`,h.displayName=`RadioGroup.Radio`,exports.RadioGroup=y;
 //# sourceMappingURL=index.js.map