@spark-ui/components 17.9.0-beta.0 → 17.9.0-beta.1

package/dist/meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\n/**\n * A horizontal progress indicator that displays a scalar measurement within a known range.\n */\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1-highlight text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\n/**\n * A horizontal progress indicator that displays a scalar measurement within a known range.\n */\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}

package/dist/meter/index.mjs

@@ -49,7 +49,7 @@ var _ = ({ id: e, children: t, ref: n, ...i }) => {
 	return /* @__PURE__ */ u(f.Label, {
 		"data-spark-component": "meter-label",
 		id: s,
-		className: "default:text-body-1 text-on-surface default:font-bold",
+		className: "default:text-body-1-highlight text-on-surface",
 		ref: l,
 		...i,
 		children: t

package/dist/meter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\n/**\n * A horizontal progress indicator that displays a scalar measurement within a known range.\n */\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1-highlight text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\n/**\n * A horizontal progress indicator that displays a scalar measurement within a known range.\n */\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}

package/dist/pagination/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-B-sMnDc_.js`),r=require(`../icon-button-CYz_Fitz.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/ArrowVerticalRight`),c=require(`@spark-ui/icons/ArrowVerticalLeft`),l=require(`@zag-js/pagination`);l=e.t(l);let u=require(`@zag-js/react`),d=require(`@spark-ui/icons/ArrowDoubleLeft`),f=require(`@spark-ui/icons/ArrowDoubleRight`);function p(e,t,n){let r=(n-1)/2,i=Math.max(0,t-r),a=Math.min(e.length,t+r+1);return a-i<n&&(i=Math.max(0,Math.min(i,e.length-n)),a=Math.min(e.length,i+n)),e.slice(i,a)}var m=(0,a.createContext)(null),h=({children:e,count:t,visiblePageItems:n=7,pageSize:r,page:i,onPageChange:s,noEllipsis:c,type:d=`link`})=>{let f=c?1/0:Math.max(0,Math.floor((n-5)/2)),h=(0,a.useId)(),g=(0,u.useMachine)(l.machine,{id:h,count:t,siblingCount:f,pageSize:r,page:i,onPageChange:s,type:d}),_=l.connect(g,u.normalizeProps),v=c?p(_.pages,_.page-1,n):_.pages;return(0,o.jsx)(m.Provider,{value:{type:d,pagination:{..._,pages:v,getFirstPageTriggerProps:()=>({..._.getPrevTriggerProps(),id:`${_.getRootProps().id}:first`,"data-part":`first-page-trigger`,onClick:_.goToFirstPage}),getLastPageTriggerProps:()=>({..._.getNextTriggerProps(),id:`${_.getRootProps().id}:last`,"data-part":`last-page-trigger`,onClick:_.goToLastPage})}},children:e})},g=()=>{let e=(0,a.useContext)(m);if(!e)throw Error(`usePagination must be used within a Pagination provider`);return e},_=({children:e,visiblePageItems:t=5,type:n=`link`,noEllipsis:r=!1,className:i,...a})=>(0,o.jsx)(h,{visiblePageItems:t,noEllipsis:r,type:n,...a,children:(0,o.jsx)(v,{className:i,children:e})}),v=({children:e,className:t})=>{let{pagination:n}=g();return(0,o.jsx)(`nav`,{"data-spark-component":`pagination`,...n.getRootProps(),className:t,children:(0,o.jsx)(`ul`,{className:`gap-md flex flex-wrap`,children:e})})};_.displayName=`Pagination`;var y=({children:e,index:t,className:n,ref:r,...a})=>{let{pagination:s}=g();return(0,o.jsx)(`li`,{children:(0,o.jsx)(`span`,{"data-spark-component":`pagination-ellipsis`,ref:r,...(0,u.mergeProps)(s.getEllipsisProps({index:t}),{className:(0,i.cx)(`flex size-sz-44 items-center justify-center`,n),...a}),children:e||`…`})})};y.displayName=`Pagination.Ellipsis`;var b=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:c,type:l}=g(),f=c.getFirstPageTriggerProps(),p=l===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-first-page-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(d.ArrowDoubleLeft,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};b.displayName=`Pagination.FirstPageTrigger`;function x({children:e,value:t,className:r,href:a,ref:s,...c}){let{pagination:l}=g(),d=l.getItemProps({type:`page`,value:t}),f=(0,u.mergeProps)(d,{"data-spark-component":`pagination-item`,intent:`support`,design:d[`aria-current`]===`page`?`filled`:`contrast`,className:(0,i.cx)(`size-sz-44`,r),...c});return(0,o.jsx)(`li`,{children:a?(0,o.jsx)(n.t,{ref:s,...f,asChild:!0,children:(0,o.jsx)(`a`,{href:a,children:e||t})}):(0,o.jsx)(n.t,{ref:s,...f,children:e||t})})}x.displayName=`Pagination.Item`;var S=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:c,type:l}=g(),d=c.getLastPageTriggerProps(),p=l===`link`&&d[`data-disabled`]===``,m=(0,u.mergeProps)(d,{"data-spark-component":`pagination-last-page-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(f.ArrowDoubleRight,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};S.displayName=`Pagination.LastPageTrigger`;var C=({children:e,className:n,href:i,ref:a,...c})=>{let{pagination:l,type:d}=g(),f=l.getNextTriggerProps(),p=d===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-next-trigger`,intent:`support`,design:`contrast`,...c,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(s.ArrowVerticalRight,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};C.displayName=`Pagination.NextTrigger`;var w=({children:e})=>{let{pagination:t}=g();return e(t)};w.displayName=`Pagination.Pages`;var T=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:l,type:d}=g(),f=l.getPrevTriggerProps(),p=d===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-prev-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(c.ArrowVerticalLeft,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};T.displayName=`Pagination.PrevTrigger`;var E=Object.assign(_,{PrevTrigger:T,NextTrigger:C,Pages:w,Item:x,Ellipsis:y,FirstPageTrigger:b,LastPageTrigger:S});E.displayName=`Pagination`,T.displayName=`Pagination.PrevTrigger`,C.displayName=`Pagination.NextTrigger`,w.displayName=`Pagination.Pages`,x.displayName=`Pagination.Item`,y.displayName=`Pagination.Ellipsis`,b.displayName=`Pagination.FirstPageTrigger`,S.displayName=`Pagination.LastPageTrigger`,exports.Pagination=E;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-3F9Xrf4E.js`),r=require(`../icon-button-jcPwRD21.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/ArrowVerticalRight`),c=require(`@spark-ui/icons/ArrowVerticalLeft`),l=require(`@zag-js/pagination`);l=e.t(l);let u=require(`@zag-js/react`),d=require(`@spark-ui/icons/ArrowDoubleLeft`),f=require(`@spark-ui/icons/ArrowDoubleRight`);function p(e,t,n){let r=(n-1)/2,i=Math.max(0,t-r),a=Math.min(e.length,t+r+1);return a-i<n&&(i=Math.max(0,Math.min(i,e.length-n)),a=Math.min(e.length,i+n)),e.slice(i,a)}var m=(0,a.createContext)(null),h=({children:e,count:t,visiblePageItems:n=7,pageSize:r,page:i,onPageChange:s,noEllipsis:c,type:d=`link`})=>{let f=c?1/0:Math.max(0,Math.floor((n-5)/2)),h=(0,a.useId)(),g=(0,u.useMachine)(l.machine,{id:h,count:t,siblingCount:f,pageSize:r,page:i,onPageChange:s,type:d}),_=l.connect(g,u.normalizeProps),v=c?p(_.pages,_.page-1,n):_.pages;return(0,o.jsx)(m.Provider,{value:{type:d,pagination:{..._,pages:v,getFirstPageTriggerProps:()=>({..._.getPrevTriggerProps(),id:`${_.getRootProps().id}:first`,"data-part":`first-page-trigger`,onClick:_.goToFirstPage}),getLastPageTriggerProps:()=>({..._.getNextTriggerProps(),id:`${_.getRootProps().id}:last`,"data-part":`last-page-trigger`,onClick:_.goToLastPage})}},children:e})},g=()=>{let e=(0,a.useContext)(m);if(!e)throw Error(`usePagination must be used within a Pagination provider`);return e},_=({children:e,visiblePageItems:t=5,type:n=`link`,noEllipsis:r=!1,className:i,...a})=>(0,o.jsx)(h,{visiblePageItems:t,noEllipsis:r,type:n,...a,children:(0,o.jsx)(v,{className:i,children:e})}),v=({children:e,className:t})=>{let{pagination:n}=g();return(0,o.jsx)(`nav`,{"data-spark-component":`pagination`,...n.getRootProps(),className:t,children:(0,o.jsx)(`ul`,{className:`gap-md flex flex-wrap`,children:e})})};_.displayName=`Pagination`;var y=({children:e,index:t,className:n,ref:r,...a})=>{let{pagination:s}=g();return(0,o.jsx)(`li`,{children:(0,o.jsx)(`span`,{"data-spark-component":`pagination-ellipsis`,ref:r,...(0,u.mergeProps)(s.getEllipsisProps({index:t}),{className:(0,i.cx)(`flex size-sz-44 items-center justify-center`,n),...a}),children:e||`…`})})};y.displayName=`Pagination.Ellipsis`;var b=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:c,type:l}=g(),f=c.getFirstPageTriggerProps(),p=l===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-first-page-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(d.ArrowDoubleLeft,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};b.displayName=`Pagination.FirstPageTrigger`;function x({children:e,value:t,className:r,href:a,ref:s,...c}){let{pagination:l}=g(),d=l.getItemProps({type:`page`,value:t}),f=(0,u.mergeProps)(d,{"data-spark-component":`pagination-item`,intent:`support`,design:d[`aria-current`]===`page`?`filled`:`contrast`,className:(0,i.cx)(`size-sz-44`,r),...c});return(0,o.jsx)(`li`,{children:a?(0,o.jsx)(n.t,{ref:s,...f,asChild:!0,children:(0,o.jsx)(`a`,{href:a,children:e||t})}):(0,o.jsx)(n.t,{ref:s,...f,children:e||t})})}x.displayName=`Pagination.Item`;var S=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:c,type:l}=g(),d=c.getLastPageTriggerProps(),p=l===`link`&&d[`data-disabled`]===``,m=(0,u.mergeProps)(d,{"data-spark-component":`pagination-last-page-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(f.ArrowDoubleRight,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};S.displayName=`Pagination.LastPageTrigger`;var C=({children:e,className:n,href:i,ref:a,...c})=>{let{pagination:l,type:d}=g(),f=l.getNextTriggerProps(),p=d===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-next-trigger`,intent:`support`,design:`contrast`,...c,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(s.ArrowVerticalRight,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};C.displayName=`Pagination.NextTrigger`;var w=({children:e})=>{let{pagination:t}=g();return e(t)};w.displayName=`Pagination.Pages`;var T=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:l,type:d}=g(),f=l.getPrevTriggerProps(),p=d===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-prev-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(c.ArrowVerticalLeft,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};T.displayName=`Pagination.PrevTrigger`;var E=Object.assign(_,{PrevTrigger:T,NextTrigger:C,Pages:w,Item:x,Ellipsis:y,FirstPageTrigger:b,LastPageTrigger:S});E.displayName=`Pagination`,T.displayName=`Pagination.PrevTrigger`,C.displayName=`Pagination.NextTrigger`,w.displayName=`Pagination.Pages`,x.displayName=`Pagination.Item`,y.displayName=`Pagination.Ellipsis`,b.displayName=`Pagination.FirstPageTrigger`,S.displayName=`Pagination.LastPageTrigger`,exports.Pagination=E;
 //# sourceMappingURL=index.js.map

package/dist/pagination/index.mjs

@@ -1,6 +1,6 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
-import { t } from "../button-C6nlNPdv.mjs";
-import { t as n } from "../icon-button-DpucUC_L.mjs";
+import { t } from "../button-BFQ3w9CA.mjs";
+import { t as n } from "../icon-button-C3RgGf2o.mjs";
 import { cx as r } from "class-variance-authority";
 import { createContext as i, useContext as a, useId as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/popover/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../popover-CrKp_TKk.js`);exports.Popover=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../popover-ayPbAw59.js`);exports.Popover=e.t;

package/dist/popover/index.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../popover-DsBY8eYl.mjs";
+import { t as e } from "../popover-DKa4WOQV.mjs";
 export { e as Popover };

package/dist/{popover-DsBY8eYl.mjs → popover-DKa4WOQV.mjs}

@@ -1,5 +1,5 @@
 import { t as e } from "./icon-D05Uqh8_.mjs";
-import { t } from "./icon-button-DpucUC_L.mjs";
+import { t } from "./icon-button-C3RgGf2o.mjs";
 import { cva as n, cx as r } from "class-variance-authority";
 import { createContext as i, useContext as a, useId as o, useLayoutEffect as s, useState as c } from "react";
 import { Popover as l } from "radix-ui";
@@ -208,4 +208,4 @@ T.displayName = "Popover", _.displayName = "Popover.Anchor", v.displayName = "Po
 //#endregion
 export { T as t };
 
-//# sourceMappingURL=popover-DsBY8eYl.mjs.map
+//# sourceMappingURL=popover-DKa4WOQV.mjs.map

package/dist/{popover-DsBY8eYl.mjs.map → popover-DKa4WOQV.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"popover-DsBY8eYl.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\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\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\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\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\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\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\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;;;ACXtB,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;;;AClC1B,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,ECjDY,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;;;ACNtB,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\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\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\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\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\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\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\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n  <RadixPopover.Trigger\n    data-spark-component=\"popover-trigger\"\n    ref={ref}\n    asChild={asChild}\n    {...rest}\n  >\n    {children}\n  </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n  Anchor: typeof Anchor\n  Arrow: typeof Arrow\n  CloseButton: typeof CloseButton\n  Content: typeof Content\n  Header: typeof Header\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n} = Object.assign(Root, {\n  Anchor,\n  Arrow,\n  CloseButton,\n  Content,\n  Header,\n  Portal,\n  Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}

package/dist/{popover-CrKp_TKk.js → popover-ayPbAw59.js}

@@ -1,2 +1,2 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./icon-CRPcdgYp.js`),t=require(`./icon-button-CYz_Fitz.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`radix-ui`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/Close`);var s=(0,r.createContext)(null),c=`:popover`,l=({children:e,intent:t})=>{let[n,i]=(0,r.useState)(null);return(0,a.jsx)(s.Provider,{value:{headerId:n,setHeaderId:i,intent:t},children:e})},u=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`usePopover must be used within a Popover provider`);return e},d=({children:e,intent:t=`surface`,modal:n=!1,...r})=>(0,a.jsx)(l,{intent:t,children:(0,a.jsx)(i.Popover.Root,{"data-spark-component":`popover`,modal:n,...r,children:e})});d.displayName=`Popover`;var f=({asChild:e=!1,children:t,ref:n,...r})=>(0,a.jsx)(i.Popover.Anchor,{"data-spark-component":`popover-anchor`,ref:n,asChild:e,...r,children:t});f.displayName=`Popover.Anchor`;var p=({asChild:e=!1,width:t=16,height:r=8,className:o,ref:s,...c})=>{let{intent:l}=u(),d=(0,n.cva)(`visible`,{variants:{intent:{surface:`fill-surface`,main:`fill-main-container`,support:`fill-support-container`,accent:`fill-accent-container`,success:`fill-success-container`,alert:`fill-alert-container`,danger:`fill-error-container`,info:`fill-info-container`,neutral:`fill-neutral-container`}},defaultVariants:{intent:`surface`}});return(0,a.jsx)(i.Popover.Arrow,{"data-spark-component":`popover-arrow`,ref:s,className:d({intent:l,className:o}),asChild:e,width:t,height:r,...c})};p.displayName=`Popover.Arrow`;var m=({"aria-label":r,className:s,ref:c,...l})=>(0,a.jsx)(i.Popover.Close,{"data-spark-component":`popover-close-button`,ref:c,className:(0,n.cx)(`right-lg top-md absolute`,s),asChild:!0,...l,children:(0,a.jsx)(t.t,{size:`sm`,intent:`neutral`,design:`ghost`,"aria-label":r,children:(0,a.jsx)(e.t,{children:(0,a.jsx)(o.Close,{})})})});m.displayName=`Popover.CloseButton`;var h=(0,n.cva)([`rounded-md`,`shadow-sm`,`focus-visible:outline-hidden focus-visible:u-outline`,`max-h-(--radix-popper-available-height) overflow-y-auto`],{variants:{intent:{surface:`bg-surface text-on-surface`,main:`bg-main-container text-on-main-container`,support:`bg-support-container text-on-support-container`,accent:`bg-accent-container text-on-accent-container`,success:`bg-success-container text-on-success-container`,alert:`bg-alert-container text-on-alert-container`,danger:`bg-error-container text-on-error-container`,info:`bg-info-container text-on-info-container`,neutral:`bg-neutral-container text-on-neutral-container`},matchTriggerWidth:{true:`w-(--radix-popper-anchor-width)`},enforceBoundaries:{true:[`max-w-(--radix-popper-available-width)`]},inset:{true:`overflow-hidden`,false:`p-lg`},elevation:{dropdown:`z-dropdown`,popover:`z-popover`}},compoundVariants:[{inset:!1,class:`has-data-[spark-component=popover-close-button]:pr-3xl`},{enforceBoundaries:!1,matchTriggerWidth:!1,class:`max-w-[min(var(--spacing-sz-384),100vw)]`}],defaultVariants:{matchTriggerWidth:!1,enforceBoundaries:!1,inset:!1,intent:`surface`,elevation:`popover`}}),g=({className:e,children:t,matchTriggerWidth:n=!1,align:r=`center`,arrowPadding:o=16,asChild:s=!1,avoidCollisions:c=!0,"aria-labelledby":l,collisionBoundary:d,collisionPadding:f=0,hideWhenDetached:p=!1,side:m=`bottom`,sideOffset:g=8,sticky:_=`partial`,inset:v=!1,elevation:y=`popover`,ref:b,...x})=>{let{headerId:S,intent:C}=u();return(0,a.jsx)(i.Popover.Content,{"aria-labelledby":S||l,className:h({enforceBoundaries:!!d,matchTriggerWidth:n,inset:v,elevation:y,intent:C,className:e}),"data-spark-component":`popover-content`,ref:b,align:r,arrowPadding:o,asChild:s,avoidCollisions:c,collisionBoundary:d,collisionPadding:f,hideWhenDetached:p,side:m,sideOffset:g,sticky:_,...x,children:t})};g.displayName=`Popover.Content`;var _=({children:e,className:t,ref:i,...o})=>{let s=`${c}-header-${(0,r.useId)()}`,{setHeaderId:l}=u();return(0,r.useLayoutEffect)(()=>(l(s),()=>l(null)),[s,l]),(0,a.jsx)(`header`,{id:s,ref:i,className:(0,n.cx)(`mb-md text-headline-2`,t),...o,children:e})};_.displayName=`Popover.Header`;var v=({children:e,...t})=>(0,a.jsx)(i.Popover.Portal,{...t,children:e});v.displayName=`Popover.Portal`;var y=({asChild:e=!1,children:t,ref:n,...r})=>(0,a.jsx)(i.Popover.Trigger,{"data-spark-component":`popover-trigger`,ref:n,asChild:e,...r,children:t});y.displayName=`Popover.Trigger`;var b=Object.assign(d,{Anchor:f,Arrow:p,CloseButton:m,Content:g,Header:_,Portal:v,Trigger:y});b.displayName=`Popover`,f.displayName=`Popover.Anchor`,p.displayName=`Popover.Arrow`,m.displayName=`Popover.CloseButton`,g.displayName=`Popover.Content`,_.displayName=`Popover.Header`,v.displayName=`Popover.Portal`,y.displayName=`Popover.Trigger`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return b}});
-//# sourceMappingURL=popover-CrKp_TKk.js.map
+require(`./chunk-C91j1N6u.js`);const e=require(`./icon-CRPcdgYp.js`),t=require(`./icon-button-jcPwRD21.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`radix-ui`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/Close`);var s=(0,r.createContext)(null),c=`:popover`,l=({children:e,intent:t})=>{let[n,i]=(0,r.useState)(null);return(0,a.jsx)(s.Provider,{value:{headerId:n,setHeaderId:i,intent:t},children:e})},u=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`usePopover must be used within a Popover provider`);return e},d=({children:e,intent:t=`surface`,modal:n=!1,...r})=>(0,a.jsx)(l,{intent:t,children:(0,a.jsx)(i.Popover.Root,{"data-spark-component":`popover`,modal:n,...r,children:e})});d.displayName=`Popover`;var f=({asChild:e=!1,children:t,ref:n,...r})=>(0,a.jsx)(i.Popover.Anchor,{"data-spark-component":`popover-anchor`,ref:n,asChild:e,...r,children:t});f.displayName=`Popover.Anchor`;var p=({asChild:e=!1,width:t=16,height:r=8,className:o,ref:s,...c})=>{let{intent:l}=u(),d=(0,n.cva)(`visible`,{variants:{intent:{surface:`fill-surface`,main:`fill-main-container`,support:`fill-support-container`,accent:`fill-accent-container`,success:`fill-success-container`,alert:`fill-alert-container`,danger:`fill-error-container`,info:`fill-info-container`,neutral:`fill-neutral-container`}},defaultVariants:{intent:`surface`}});return(0,a.jsx)(i.Popover.Arrow,{"data-spark-component":`popover-arrow`,ref:s,className:d({intent:l,className:o}),asChild:e,width:t,height:r,...c})};p.displayName=`Popover.Arrow`;var m=({"aria-label":r,className:s,ref:c,...l})=>(0,a.jsx)(i.Popover.Close,{"data-spark-component":`popover-close-button`,ref:c,className:(0,n.cx)(`right-lg top-md absolute`,s),asChild:!0,...l,children:(0,a.jsx)(t.t,{size:`sm`,intent:`neutral`,design:`ghost`,"aria-label":r,children:(0,a.jsx)(e.t,{children:(0,a.jsx)(o.Close,{})})})});m.displayName=`Popover.CloseButton`;var h=(0,n.cva)([`rounded-md`,`shadow-sm`,`focus-visible:outline-hidden focus-visible:u-outline`,`max-h-(--radix-popper-available-height) overflow-y-auto`],{variants:{intent:{surface:`bg-surface text-on-surface`,main:`bg-main-container text-on-main-container`,support:`bg-support-container text-on-support-container`,accent:`bg-accent-container text-on-accent-container`,success:`bg-success-container text-on-success-container`,alert:`bg-alert-container text-on-alert-container`,danger:`bg-error-container text-on-error-container`,info:`bg-info-container text-on-info-container`,neutral:`bg-neutral-container text-on-neutral-container`},matchTriggerWidth:{true:`w-(--radix-popper-anchor-width)`},enforceBoundaries:{true:[`max-w-(--radix-popper-available-width)`]},inset:{true:`overflow-hidden`,false:`p-lg`},elevation:{dropdown:`z-dropdown`,popover:`z-popover`}},compoundVariants:[{inset:!1,class:`has-data-[spark-component=popover-close-button]:pr-3xl`},{enforceBoundaries:!1,matchTriggerWidth:!1,class:`max-w-[min(var(--spacing-sz-384),100vw)]`}],defaultVariants:{matchTriggerWidth:!1,enforceBoundaries:!1,inset:!1,intent:`surface`,elevation:`popover`}}),g=({className:e,children:t,matchTriggerWidth:n=!1,align:r=`center`,arrowPadding:o=16,asChild:s=!1,avoidCollisions:c=!0,"aria-labelledby":l,collisionBoundary:d,collisionPadding:f=0,hideWhenDetached:p=!1,side:m=`bottom`,sideOffset:g=8,sticky:_=`partial`,inset:v=!1,elevation:y=`popover`,ref:b,...x})=>{let{headerId:S,intent:C}=u();return(0,a.jsx)(i.Popover.Content,{"aria-labelledby":S||l,className:h({enforceBoundaries:!!d,matchTriggerWidth:n,inset:v,elevation:y,intent:C,className:e}),"data-spark-component":`popover-content`,ref:b,align:r,arrowPadding:o,asChild:s,avoidCollisions:c,collisionBoundary:d,collisionPadding:f,hideWhenDetached:p,side:m,sideOffset:g,sticky:_,...x,children:t})};g.displayName=`Popover.Content`;var _=({children:e,className:t,ref:i,...o})=>{let s=`${c}-header-${(0,r.useId)()}`,{setHeaderId:l}=u();return(0,r.useLayoutEffect)(()=>(l(s),()=>l(null)),[s,l]),(0,a.jsx)(`header`,{id:s,ref:i,className:(0,n.cx)(`mb-md text-headline-2`,t),...o,children:e})};_.displayName=`Popover.Header`;var v=({children:e,...t})=>(0,a.jsx)(i.Popover.Portal,{...t,children:e});v.displayName=`Popover.Portal`;var y=({asChild:e=!1,children:t,ref:n,...r})=>(0,a.jsx)(i.Popover.Trigger,{"data-spark-component":`popover-trigger`,ref:n,asChild:e,...r,children:t});y.displayName=`Popover.Trigger`;var b=Object.assign(d,{Anchor:f,Arrow:p,CloseButton:m,Content:g,Header:_,Portal:v,Trigger:y});b.displayName=`Popover`,f.displayName=`Popover.Anchor`,p.displayName=`Popover.Arrow`,m.displayName=`Popover.CloseButton`,g.displayName=`Popover.Content`,_.displayName=`Popover.Header`,v.displayName=`Popover.Portal`,y.displayName=`Popover.Trigger`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return b}});
+//# sourceMappingURL=popover-ayPbAw59.js.map

package/dist/{popover-CrKp_TKk.js.map → popover-ayPbAw59.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover-CrKp_TKk.js","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n  | 'surface'\n  | 'main'\n  | 'support'\n  | 'accent'\n  | 'success'\n  | 'alert'\n  | 'danger'\n  | 'info'\n  | 'neutral'\nexport interface PopoverContextState {\n  headerId: HeaderId\n  setHeaderId: (id: HeaderId) => void\n  intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n  children,\n  intent,\n}: {\n  children: ReactNode\n  intent: PopoverIntent\n}) => {\n  const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n  return (\n    <PopoverContext.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\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\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\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\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\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\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\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n  <RadixPopover.Trigger\n    data-spark-component=\"popover-trigger\"\n    ref={ref}\n    asChild={asChild}\n    {...rest}\n  >\n    {children}\n  </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n  Anchor: typeof Anchor\n  Arrow: typeof Arrow\n  CloseButton: typeof CloseButton\n  Content: typeof Content\n  Header: typeof Header\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n} = Object.assign(Root, {\n  Anchor,\n  Arrow,\n  CloseButton,\n  Content,\n  Header,\n  Portal,\n  Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
+{"version":3,"file":"popover-ayPbAw59.js","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n  | 'surface'\n  | 'main'\n  | 'support'\n  | 'accent'\n  | 'success'\n  | 'alert'\n  | 'danger'\n  | 'info'\n  | 'neutral'\nexport interface PopoverContextState {\n  headerId: HeaderId\n  setHeaderId: (id: HeaderId) => void\n  intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n  children,\n  intent,\n}: {\n  children: ReactNode\n  intent: PopoverIntent\n}) => {\n  const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n  return (\n    <PopoverContext.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\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\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\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\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\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\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\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n  <RadixPopover.Trigger\n    data-spark-component=\"popover-trigger\"\n    ref={ref}\n    asChild={asChild}\n    {...rest}\n  >\n    {children}\n  </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n  Anchor: typeof Anchor\n  Arrow: typeof Arrow\n  CloseButton: typeof CloseButton\n  Content: typeof Content\n  Header: typeof Header\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n} = Object.assign(Root, {\n  Anchor,\n  Arrow,\n  CloseButton,\n  Content,\n  Header,\n  Portal,\n  Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}

package/dist/progress/index.js

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

package/dist/progress/index.mjs

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

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

@@ -102,7 +102,7 @@ var v = ({ id: e, children: t, ref: n, ...i }) => {
 	return /* @__PURE__ */ c(u.Label, {
 		"data-spark-component": "progress-label",
 		id: s,
-		className: "default:text-body-1 text-on-surface default:font-bold",
+		className: "default:text-body-1-highlight text-on-surface",
 		ref: m,
 		...i,
 		children: t
@@ -129,4 +129,4 @@ b.displayName = "Progress", v.displayName = "Progress.Label", g.displayName = "P
 //#endregion
 export { b as t };
 
-//# sourceMappingURL=progress-C3w4PmxY.mjs.map
+//# sourceMappingURL=progress-C-Zs94G2.mjs.map

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

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

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

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

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

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