@spark-ui/components 17.9.2 → 17.10.0

package/dist/popover-DKa4WOQV.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover-DKa4WOQV.mjs","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.Provider\n      value={{\n        headerId,\n        setHeaderId,\n        intent,\n      }}\n    >\n      {children}\n    </PopoverContext.Provider>\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":";;;;;;;;AAoBA,IAAM,IAAiB,EAA0C,KAAK,EAEzD,IAAY,YAEZ,KAAmB,EAC9B,aACA,gBAII;CACJ,IAAM,CAAC,GAAU,KAAe,EAAmB,KAAK;AAExD,QACE,kBAAC,EAAe,UAAhB;EACE,OAAO;GACL;GACA;GACA;GACD;EAEA;EACuB,CAAA;GAIjB,UAAmB;CAC9B,IAAM,IAAU,EAAW,EAAe;AAE1C,KAAI,CAAC,EACH,OAAM,MAAM,oDAAoD;AAGlE,QAAO;GC7CI,KAAW,EAAE,aAAU,YAAS,WAAW,WAAQ,IAAO,GAAG,QAEtE,kBAAC,GAAD;CAAyB;WACvB,kBAAC,EAAa,MAAd;EAAmB,wBAAqB;EAAiB;EAAO,GAAI;EACjE;EACiB,CAAA;CACJ,CAAA;AAItB,EAAQ,cAAc;;;ACPtB,IAAa,KAAU,EAAE,aAAU,IAAO,aAAU,QAAK,GAAG,QAC1D,kBAAC,EAAa,QAAd;CAAqB,wBAAqB;CAAsB;CAAc;CAAS,GAAI;CACxF;CACmB,CAAA;AAGxB,EAAO,cAAc;;;ACHrB,IAAa,KAAS,EACpB,aAAU,IACV,WAAQ,IACR,YAAS,GACT,cACA,QACA,GAAG,QACa;CAChB,IAAM,EAAE,cAAW,GAAY,EAMzB,IAAS,EAAI,WAAW;EAC5B,UAAU,EACR,QAAQ;GACN,SAAS;GACT,MAAM;GACN,SAAS;GACT,QAAQ;GACR,SAAS;GACT,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;GACV,EACF;EACD,iBAAiB,EACf,QAAQ,WACT;EACF,CAAC;AAEF,QACE,kBAAC,EAAa,OAAd;EACE,wBAAqB;EAChB;EACL,WAAW,EAAO;GAAE;GAAQ;GAAW,CAAC;EAC/B;EACF;EACC;EACR,GAAI;EACJ,CAAA;;AAIN,EAAM,cAAc;;;AC3CpB,IAAa,KAAe,EAC1B,cAAc,GACd,cACA,QACA,GAAG,QAGD,kBAAC,EAAa,OAAd;CACE,wBAAqB;CAChB;CACL,WAAW,EAAG,4BAA4B,EAAU;CACpD,SAAA;CACA,GAAI;WAEJ,kBAAC,GAAD;EAAY,MAAK;EAAK,QAAO;EAAU,QAAO;EAAQ,cAAY;YAChE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAY,CAAA,EACP,CAAA;EACI,CAAA;CACM,CAAA;AAIzB,EAAY,cAAc;;;ACtC1B,IAAa,IAAS,EACpB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,QAAQ;GACN,SAAS;GACT,MAAM;GACN,SAAS;GACT,QAAQ;GACR,SAAS;GACT,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;GACV;EACD,mBAAmB,EACjB,MAAM,mCACP;EACD,mBAAmB,EACjB,MAAM,CAAC,yCAAyC,EACjD;EAED,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,WAAW;GACT,UAAU;GACV,SAAS;GACV;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EAIP,OAAO;EACR,EACD;EACE,mBAAmB;EACnB,mBAAmB;EACnB,OAAO;EACR,CACF;CACD,iBAAiB;EACf,mBAAmB;EACnB,mBAAmB;EACnB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;CACF,CACF,EC7CY,KAAW,EAEtB,cACA,aACA,uBAAoB,IAEpB,WAAQ,UACR,kBAAe,IACf,aAAU,IACV,qBAAkB,IAClB,mBAAmB,GACnB,sBACA,sBAAmB,GACnB,sBAAmB,IACnB,UAAO,UACP,gBAAa,GACb,YAAS,WACT,WAAQ,IACR,eAAY,WACZ,QACA,GAAG,QACe;CAClB,IAAM,EAAE,aAAU,cAAW,GAAY;AAEzC,QACE,kBAAC,EAAa,SAAd;EACE,mBAAiB,KAAY;EAC7B,WAAW,EAAO;GAChB,mBAAmB,CAAC,CAAC;GACrB;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,wBAAqB;EAChB;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEF,GAAI;EAEH;EACoB,CAAA;;AAI3B,EAAQ,cAAc;;;ACxDtB,IAAa,KAAU,EAAE,aAAU,cAAW,QAAK,GAAG,QAAwB;CAC5E,IAAM,IAAK,GAAG,EAAU,UAAU,GAAO,IACnC,EAAE,mBAAgB,GAAY;AAQpC,QANA,SACE,EAAY,EAAG,QAEF,EAAY,KAAK,GAC7B,CAAC,GAAI,EAAY,CAAC,EAGnB,kBAAC,UAAD;EAAY;EAAS;EAAK,WAAW,EAAG,yBAAyB,EAAU;EAAE,GAAI;EAC9E;EACM,CAAA;;AAIb,EAAO,cAAc;;;ACvBrB,IAAa,KAAU,EAAE,aAAU,GAAG,QACpC,kBAAC,EAAa,QAAd;CAAqB,GAAI;CAAO;CAA+B,CAAA;AAGjE,EAAO,cAAc;;;ACFrB,IAAa,KAAW,EAAE,aAAU,IAAO,aAAU,QAAK,GAAG,QAC3D,kBAAC,EAAa,SAAd;CACE,wBAAqB;CAChB;CACI;CACT,GAAI;CAEH;CACoB,CAAA;AAGzB,EAAQ,cAAc;;;ACVtB,IAAa,IAQT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACA;CACA,QAAA;CACA;CACD,CAAC;AAEF,EAAQ,cAAc,WACtB,EAAO,cAAc,kBACrB,EAAM,cAAc,iBACpB,EAAY,cAAc,uBAC1B,EAAQ,cAAc,mBACtB,EAAO,cAAc,kBACrB,EAAO,cAAc,kBACrB,EAAQ,cAAc"}
+{"version":3,"file":"popover-DKa4WOQV.mjs","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.Provider\n      value={{\n        headerId,\n        setHeaderId,\n        intent,\n      }}\n    >\n      {children}\n    </PopoverContext.Provider>\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":";;;;;;;;AAoBA,IAAM,IAAiB,EAA0C,KAAK,EAEzD,IAAY,YAEZ,KAAmB,EAC9B,aACA,gBAII;CACJ,IAAM,CAAC,GAAU,KAAe,EAAmB,KAAK;AAExD,QACE,kBAAC,EAAe,UAAhB;EACE,OAAO;GACL;GACA;GACA;GACD;EAEA;EACuB,CAAA;GAIjB,UAAmB;CAC9B,IAAM,IAAU,EAAW,EAAe;AAE1C,KAAI,CAAC,EACH,OAAM,MAAM,oDAAoD;AAGlE,QAAO;GC7CI,KAAW,EAAE,aAAU,YAAS,WAAW,WAAQ,IAAO,GAAG,QAEtE,kBAAC,GAAD;CAAyB;WACvB,kBAAC,EAAa,MAAd;EAAmB,wBAAqB;EAAiB;EAAO,GAAI;EACjE;EACiB,CAAA;CACJ,CAAA;AAItB,EAAQ,cAAc;;;ACPtB,IAAa,KAAU,EAAE,aAAU,IAAO,aAAU,QAAK,GAAG,QAC1D,kBAAC,EAAa,QAAd;CAAqB,wBAAqB;CAAsB;CAAc;CAAS,GAAI;CACxF;CACmB,CAAA;AAGxB,EAAO,cAAc;;;ACHrB,IAAa,KAAS,EACpB,aAAU,IACV,WAAQ,IACR,YAAS,GACT,cACA,QACA,GAAG,QACa;CAChB,IAAM,EAAE,cAAW,GAAY,EAMzB,IAAS,EAAI,WAAW;EAC5B,UAAU,EACR,QAAQ;GACN,SAAS;GACT,MAAM;GACN,SAAS;GACT,QAAQ;GACR,SAAS;GACT,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;GACV,EACF;EACD,iBAAiB,EACf,QAAQ,WACT;EACF,CAAC;AAEF,QACE,kBAAC,EAAa,OAAd;EACE,wBAAqB;EAChB;EACL,WAAW,EAAO;GAAE;GAAQ;GAAW,CAAC;EAC/B;EACF;EACC;EACR,GAAI;EACJ,CAAA;;AAIN,EAAM,cAAc;;;AC3CpB,IAAa,KAAe,EAC1B,cAAc,GACd,cACA,QACA,GAAG,QAGD,kBAAC,EAAa,OAAd;CACE,wBAAqB;CAChB;CACL,WAAW,EAAG,4BAA4B,EAAU;CACpD,SAAA;CACA,GAAI;WAEJ,kBAAC,GAAD;EAAY,MAAK;EAAK,QAAO;EAAU,QAAO;EAAQ,cAAY;YAChE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAY,CAAA,EACP,CAAA;EACI,CAAA;CACM,CAAA;AAIzB,EAAY,cAAc;;;ACtC1B,IAAa,IAAS,EACpB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,QAAQ;GACN,SAAS;GACT,MAAM;GACN,SAAS;GACT,QAAQ;GACR,SAAS;GACT,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;GACV;EACD,mBAAmB,EACjB,MAAM,mCACP;EACD,mBAAmB,EACjB,MAAM,CAAC,yCAAyC,EACjD;EAED,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,WAAW;GACT,UAAU;GACV,SAAS;GACV;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EAIP,OAAO;EACR,EACD;EACE,mBAAmB;EACnB,mBAAmB;EACnB,OAAO;EACR,CACF;CACD,iBAAiB;EACf,mBAAmB;EACnB,mBAAmB;EACnB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;CACF,CACF,EC7CY,KAAW,EAEtB,cACA,aACA,uBAAoB,IAEpB,WAAQ,UACR,kBAAe,IACf,aAAU,IACV,qBAAkB,IAClB,mBAAmB,GACnB,sBACA,sBAAmB,GACnB,sBAAmB,IACnB,UAAO,UACP,gBAAa,GACb,YAAS,WACT,WAAQ,IACR,eAAY,WACZ,QACA,GAAG,QACe;CAClB,IAAM,EAAE,aAAU,cAAW,GAAY;AAEzC,QACE,kBAAC,EAAa,SAAd;EACE,mBAAiB,KAAY;EAC7B,WAAW,EAAO;GAChB,mBAAmB,CAAC,CAAC;GACrB;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,wBAAqB;EAChB;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEF,GAAI;EAEH;EACoB,CAAA;;AAI3B,EAAQ,cAAc;;;ACxDtB,IAAa,KAAU,EAAE,aAAU,cAAW,QAAK,GAAG,QAAwB;CAC5E,IAAM,IAAK,GAAG,EAAU,UAAU,GAAO,IACnC,EAAE,mBAAgB,GAAY;AAQpC,QANA,SACE,EAAY,EAAG,QAEF,EAAY,KAAK,GAC7B,CAAC,GAAI,EAAY,CAAC,EAGnB,kBAAC,UAAD;EAAY;EAAS;EAAK,WAAW,EAAG,yBAAyB,EAAU;EAAE,GAAI;EAC9E;EACM,CAAA;;AAIb,EAAO,cAAc;;;ACvBrB,IAAa,KAAU,EAAE,aAAU,GAAG,QACpC,kBAAC,EAAa,QAAd;CAAqB,GAAI;CAAO;CAA+B,CAAA;AAGjE,EAAO,cAAc;;;ACFrB,IAAa,KAAW,EAAE,aAAU,IAAO,aAAU,QAAK,GAAG,QAC3D,kBAAC,EAAa,SAAd;CACE,wBAAqB;CAChB;CACI;CACT,GAAI;CAEH;CACoB,CAAA;AAGzB,EAAQ,cAAc;;;ACVtB,IAAa,IAQT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAQ,cAAc,WACtB,EAAO,cAAc,kBACrB,EAAM,cAAc,iBACpB,EAAY,cAAc,uBAC1B,EAAQ,cAAc,mBACtB,EAAO,cAAc,kBACrB,EAAO,cAAc,kBACrB,EAAQ,cAAc"}

package/dist/portal/Portal.d.ts

@@ -9,5 +9,5 @@ interface PortalProps {
 /**
  * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.
  */
-export declare const Portal: (props: PropsWithChildren<PortalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Portal: ({ children, container }: PropsWithChildren<PortalProps>) => import('react').ReactPortal | null;
 export {};

package/dist/portal/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`radix-ui`),t=require(`react/jsx-runtime`);var n=n=>(0,t.jsx)(e.Portal.Portal,{...n});exports.Portal=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`react`),t=require(`react-dom`);var n=({children:n,container:r})=>{let[i,a]=(0,e.useState)(!1);if((0,e.useEffect)(()=>(a(!0),()=>a(!1)),[]),!i)return null;let o=r??(typeof document<`u`?document.body:null);return o?(0,t.createPortal)(n,o):null};exports.Portal=n;
 //# sourceMappingURL=index.js.map

package/dist/portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { Portal as RadixPortal } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\ninterface PortalProps {\n  /**\n   * An optional different container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = (props: PropsWithChildren<PortalProps>) => {\n  return <RadixPortal.Portal {...props} />\n}\n"],"mappings":"4JAcA,IAAa,EAAU,IACd,EAAA,EAAA,KAAC,EAAA,OAAY,OAAb,CAAoB,GAAI,EAAS,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { type PropsWithChildren, Ref, useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface PortalProps {\n  /**\n   * An optional different container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = ({ children, container }: PropsWithChildren<PortalProps>) => {\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  if (!mounted) return null\n\n  const targetContainer = container ?? (typeof document !== 'undefined' ? document.body : null)\n\n  if (!targetContainer) return null\n\n  return createPortal(children, targetContainer)\n}\n"],"mappings":"iJAcA,IAAa,GAAU,CAAE,WAAU,eAAgD,CACjF,GAAM,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CAO7C,IALA,EAAA,EAAA,gBACE,EAAW,GAAK,KACH,EAAW,GAAM,EAC7B,EAAE,CAAC,CAEF,CAAC,EAAS,OAAO,KAErB,IAAM,EAAkB,IAAc,OAAO,SAAa,IAAc,SAAS,KAAO,MAIxF,OAFK,GAEL,EAAA,EAAA,cAAoB,EAAU,EAAgB,CAFjB"}

package/dist/portal/index.mjs

@@ -1,8 +1,13 @@
-import { Portal as e } from "radix-ui";
-import { jsx as t } from "react/jsx-runtime";
+import { useEffect as e, useState as t } from "react";
+import { createPortal as n } from "react-dom";
 //#region src/portal/Portal.tsx
-var n = (n) => /* @__PURE__ */ t(e.Portal, { ...n });
+var r = ({ children: r, container: i }) => {
+	let [a, o] = t(!1);
+	if (e(() => (o(!0), () => o(!1)), []), !a) return null;
+	let s = i ?? (typeof document < "u" ? document.body : null);
+	return s ? n(r, s) : null;
+};
 //#endregion
-export { n as Portal };
+export { r as Portal };
 
 //# sourceMappingURL=index.mjs.map

package/dist/portal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { Portal as RadixPortal } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\ninterface PortalProps {\n  /**\n   * An optional different container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = (props: PropsWithChildren<PortalProps>) => {\n  return <RadixPortal.Portal {...props} />\n}\n"],"mappings":";;;AAcA,IAAa,KAAU,MACd,kBAAC,EAAY,QAAb,EAAoB,GAAI,GAAS,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { type PropsWithChildren, Ref, useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface PortalProps {\n  /**\n   * An optional different container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = ({ children, container }: PropsWithChildren<PortalProps>) => {\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  if (!mounted) return null\n\n  const targetContainer = container ?? (typeof document !== 'undefined' ? document.body : null)\n\n  if (!targetContainer) return null\n\n  return createPortal(children, targetContainer)\n}\n"],"mappings":";;;AAcA,IAAa,KAAU,EAAE,aAAU,mBAAgD;CACjF,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM;AAO7C,KALA,SACE,EAAW,GAAK,QACH,EAAW,GAAM,GAC7B,EAAE,CAAC,EAEF,CAAC,EAAS,QAAO;CAErB,IAAM,IAAkB,MAAc,OAAO,WAAa,MAAc,SAAS,OAAO;AAIxF,QAFK,IAEE,EAAa,GAAU,EAAgB,GAFjB"}

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

package/dist/progress-tracker/index.mjs

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

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

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

package/dist/rating/index.js

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

package/dist/rating/index.mjs

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

package/dist/rating-display/index.js

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