@spark-ui/components 14.0.0 → 14.1.0

package/dist/meter/Meter.d.ts

@@ -0,0 +1,18 @@
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { ComponentProps, PropsWithChildren, Ref } from 'react';
+import { MeterIndicatorStylesProps } from './MeterTrack.styles';
+export interface MeterProps extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>, Pick<MeterIndicatorStylesProps, 'intent'> {
+    /**
+     * Shape of the meter track and indicator.
+     */
+    shape?: 'square' | 'rounded';
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const Meter: {
+    ({ className, value, max, min, shape, intent, children, ref, ...others }: PropsWithChildren<MeterProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/meter/MeterContext.d.ts

@@ -0,0 +1,12 @@
+import { MeterIndicatorStylesProps } from './MeterTrack.styles';
+export interface MeterContextValue {
+    value: number;
+    max: number;
+    min: number;
+    intent: MeterIndicatorStylesProps['intent'];
+    shape: 'square' | 'rounded';
+    onLabelId: (id?: string) => void;
+}
+export declare const MeterContext: import('react').Context<MeterContextValue | null>;
+export declare const ID_PREFIX = ":meter";
+export declare const useMeter: () => MeterContextValue;

package/dist/meter/MeterLabel.d.ts

@@ -0,0 +1,7 @@
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { ComponentProps } from 'react';
+export type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>;
+export declare const MeterLabel: {
+    ({ id: idProp, children, ref: forwardedRef, ...others }: MeterLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/meter/MeterTrack.d.ts

@@ -0,0 +1,7 @@
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { ComponentProps } from 'react';
+export type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>;
+export declare const MeterTrack: {
+    ({ className, ...others }: MeterTrackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/meter/MeterTrack.styles.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const meterTrackStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>;
+export declare const meterIndicatorStyles: (props?: ({
+    intent?: "main" | "alert" | "support" | "success" | "info" | "danger" | null | undefined;
+    shape?: "square" | "rounded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>;

package/dist/meter/MeterValue.d.ts

@@ -0,0 +1,7 @@
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { ComponentProps, PropsWithChildren } from 'react';
+export type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>;
+export declare const MeterValue: {
+    ({ className, children, ...others }: PropsWithChildren<MeterValueProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/meter/index.d.mts

@@ -0,0 +1,13 @@
+import { Meter as Root } from './Meter';
+import { MeterLabel } from './MeterLabel';
+import { MeterTrack } from './MeterTrack';
+import { MeterValue } from './MeterValue';
+export declare const Meter: typeof Root & {
+    Label: typeof MeterLabel;
+    Track: typeof MeterTrack;
+    Value: typeof MeterValue;
+};
+export { type MeterProps } from './Meter';
+export { type MeterLabelProps } from './MeterLabel';
+export { type MeterTrackProps } from './MeterTrack';
+export { type MeterValueProps } from './MeterValue';

package/dist/meter/index.d.ts

@@ -0,0 +1,13 @@
+import { Meter as Root } from './Meter';
+import { MeterLabel } from './MeterLabel';
+import { MeterTrack } from './MeterTrack';
+import { MeterValue } from './MeterValue';
+export declare const Meter: typeof Root & {
+    Label: typeof MeterLabel;
+    Track: typeof MeterTrack;
+    Value: typeof MeterValue;
+};
+export { type MeterProps } from './Meter';
+export { type MeterLabelProps } from './MeterLabel';
+export { type MeterTrackProps } from './MeterTrack';
+export { type MeterValueProps } from './MeterValue';

package/dist/meter/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),f=require("@base-ui/react/meter"),b=require("class-variance-authority"),s=require("react"),N=require("@spark-ui/hooks/use-merge-refs"),x=s.createContext(null),R=":meter",y=()=>{const t=s.useContext(x);if(!t)throw new Error("useMeter must be used within a Meter provider");return t},h=({className:t,value:r,max:a=100,min:n=0,shape:o="rounded",intent:e="support",children:c,ref:i,...u})=>{const[l,d]=s.useState(),v=s.useMemo(()=>({value:r??0,max:a,min:n,intent:e,shape:o,onLabelId:d}),[a,n,r,e,o,d]);return m.jsx(x.Provider,{value:v,children:m.jsx(f.Meter.Root,{"data-spark-component":"meter",ref:i,className:b.cx("gap-y-sm focus-visible:u-outline box-border grid grid-cols-2",t),value:r,max:a,min:n,"aria-labelledby":l,...u,children:c})})};h.displayName="Meter";const p=({id:t,children:r,ref:a,...n})=>{const o=`${R}-label-${s.useId()}`,e=t||o,{onLabelId:c}=y(),i=s.useCallback(l=>{c(l?e:void 0)},[e,c]),u=N.useMergeRefs(a,i);return m.jsx(f.Meter.Label,{"data-spark-component":"meter-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:r})};p.displayName="Meter.Label";const I=b.cva(["relative col-span-2","h-sz-8 w-full","transform-gpu overflow-hidden","bg-on-background/dim-4"]),j=b.cva(["size-full","ease-standard transition-[width] duration-700","motion-reduce:transition-none"],{variants:{intent:{main:["bg-main"],support:["bg-support"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"]},shape:{square:[],rounded:["rounded-sm"]}}});function w(t,r,a={}){const{threshold:n=.1,rootMargin:o}=a,e=s.useRef(!1),c=s.useRef(r);return s.useEffect(()=>{c.current=r},[r]),s.useEffect(()=>{const i=t.current;if(!i||e.current)return;const u=new IntersectionObserver(l=>{l.forEach(d=>{d.isIntersecting&&!e.current&&requestAnimationFrame(()=>{e.current||(e.current=!0,c.current(),u.disconnect())})})},{threshold:n,rootMargin:o});return u.observe(i),()=>{u.disconnect()}},[t,n,o]),e.current}const M=({className:t,...r})=>{const{value:a,max:n,min:o,intent:e,shape:c}=y(),i=(a-o)/(n-o)*100,u=s.useRef(null),[l,d]=s.useState(!1);return w(u,()=>{d(!0)}),m.jsx(f.Meter.Track,{ref:u,"data-spark-component":"meter-track",className:b.cx(I(),{"rounded-sm":c==="rounded"},t),...r,children:m.jsx(f.Meter.Indicator,{"data-spark-component":"meter-indicator",className:j({intent:e,shape:c}),style:{width:l?`${i}%`:"0%"}})})};M.displayName="Meter.Track";const g=({className:t,children:r,...a})=>m.jsx(f.Meter.Value,{"data-spark-component":"meter-value",className:b.cx("default:text-body-1 text-on-surface","col-start-2 text-right",t),...a,children:r});g.displayName="Meter.Value";const k=Object.assign(h,{Label:p,Track:M,Value:g});k.displayName="Meter";p.displayName="Meter.Label";M.displayName="Meter.Track";g.displayName="Meter.Value";exports.Meter=k;
+//# sourceMappingURL=index.js.map

package/dist/meter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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 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('gap-y-sm focus-visible:u-outline box-border grid grid-cols-2', className)}\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, PropsWithChildren } from 'react'\n\nexport type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nexport const MeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<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\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"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"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"}

package/dist/meter/index.mjs

@@ -0,0 +1,177 @@
+import { jsx as d } from "react/jsx-runtime";
+import { Meter as m } from "@base-ui/react/meter";
+import { cx as p, cva as h } from "class-variance-authority";
+import { createContext as w, useContext as L, useState as y, useMemo as R, useId as T, useCallback as V, useRef as f, useEffect as k } from "react";
+import { useMergeRefs as $ } from "@spark-ui/hooks/use-merge-refs";
+const v = w(null), A = ":meter", x = () => {
+  const t = L(v);
+  if (!t)
+    throw new Error("useMeter must be used within a Meter provider");
+  return t;
+}, N = ({
+  className: t,
+  value: r,
+  max: a = 100,
+  min: n = 0,
+  shape: s = "rounded",
+  intent: e = "support",
+  children: o,
+  ref: l,
+  ...c
+}) => {
+  const [i, u] = y(), I = R(() => ({
+    value: r ?? 0,
+    max: a,
+    min: n,
+    intent: e,
+    shape: s,
+    onLabelId: u
+  }), [a, n, r, e, s, u]);
+  return /* @__PURE__ */ d(v.Provider, { value: I, children: /* @__PURE__ */ d(
+    m.Root,
+    {
+      "data-spark-component": "meter",
+      ref: l,
+      className: p("gap-y-sm focus-visible:u-outline box-border grid grid-cols-2", t),
+      value: r,
+      max: a,
+      min: n,
+      "aria-labelledby": i,
+      ...c,
+      children: o
+    }
+  ) });
+};
+N.displayName = "Meter";
+const b = ({
+  id: t,
+  children: r,
+  ref: a,
+  ...n
+}) => {
+  const s = `${A}-label-${T()}`, e = t || s, { onLabelId: o } = x(), l = V(
+    (i) => {
+      o(i ? e : void 0);
+    },
+    [e, o]
+  ), c = $(a, l);
+  return /* @__PURE__ */ d(
+    m.Label,
+    {
+      "data-spark-component": "meter-label",
+      id: e,
+      className: "default:text-body-1 text-on-surface default:font-bold",
+      ref: c,
+      ...n,
+      children: r
+    }
+  );
+};
+b.displayName = "Meter.Label";
+const C = h([
+  "relative col-span-2",
+  "h-sz-8 w-full",
+  "transform-gpu overflow-hidden",
+  "bg-on-background/dim-4"
+]), E = h(
+  ["size-full", "ease-standard transition-[width] duration-700", "motion-reduce:transition-none"],
+  {
+    variants: {
+      /**
+       * Color scheme of the meter component.
+       */
+      intent: {
+        main: ["bg-main"],
+        support: ["bg-support"],
+        success: ["bg-success"],
+        alert: ["bg-alert"],
+        danger: ["bg-error"],
+        info: ["bg-info"]
+      },
+      /**
+       * Shape of the meter component.
+       */
+      shape: {
+        square: [],
+        rounded: ["rounded-sm"]
+      }
+    }
+  }
+);
+function S(t, r, a = {}) {
+  const { threshold: n = 0.1, rootMargin: s } = a, e = f(!1), o = f(r);
+  return k(() => {
+    o.current = r;
+  }, [r]), k(() => {
+    const l = t.current;
+    if (!l || e.current) return;
+    const c = new IntersectionObserver(
+      (i) => {
+        i.forEach((u) => {
+          u.isIntersecting && !e.current && requestAnimationFrame(() => {
+            e.current || (e.current = !0, o.current(), c.disconnect());
+          });
+        });
+      },
+      {
+        threshold: n,
+        rootMargin: s
+      }
+    );
+    return c.observe(l), () => {
+      c.disconnect();
+    };
+  }, [t, n, s]), e.current;
+}
+const M = ({ className: t, ...r }) => {
+  const { value: a, max: n, min: s, intent: e, shape: o } = x(), l = (a - s) / (n - s) * 100, c = f(null), [i, u] = y(!1);
+  return S(c, () => {
+    u(!0);
+  }), /* @__PURE__ */ d(
+    m.Track,
+    {
+      ref: c,
+      "data-spark-component": "meter-track",
+      className: p(C(), { "rounded-sm": o === "rounded" }, t),
+      ...r,
+      children: /* @__PURE__ */ d(
+        m.Indicator,
+        {
+          "data-spark-component": "meter-indicator",
+          className: E({ intent: e, shape: o }),
+          style: {
+            width: i ? `${l}%` : "0%"
+          }
+        }
+      )
+    }
+  );
+};
+M.displayName = "Meter.Track";
+const g = ({
+  className: t,
+  children: r,
+  ...a
+}) => /* @__PURE__ */ d(
+  m.Value,
+  {
+    "data-spark-component": "meter-value",
+    className: p("default:text-body-1 text-on-surface", "col-start-2 text-right", t),
+    ...a,
+    children: r
+  }
+);
+g.displayName = "Meter.Value";
+const j = Object.assign(N, {
+  Label: b,
+  Track: M,
+  Value: g
+});
+j.displayName = "Meter";
+b.displayName = "Meter.Label";
+M.displayName = "Meter.Track";
+g.displayName = "Meter.Value";
+export {
+  j as Meter
+};
+//# sourceMappingURL=index.mjs.map

package/dist/meter/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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 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('gap-y-sm focus-visible:u-outline box-border grid grid-cols-2', className)}\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, PropsWithChildren } from 'react'\n\nexport type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nexport const MeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<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\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"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"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"}

package/dist/meter/useIntersectionAnimation.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from 'react';
+export interface UseIntersectionAnimationOptions {
+    /**
+     * The threshold at which the callback should be triggered.
+     * A value of 0 means as soon as any part of the element is visible.
+     * A value of 1 means the entire element must be visible.
+     * @default 0.1
+     */
+    threshold?: number;
+    /**
+     * The root margin for the Intersection Observer.
+     * This can be used to trigger the animation before the element enters the viewport.
+     * @default undefined
+     */
+    rootMargin?: string;
+}
+/**
+ * Hook to trigger an animation callback when an element enters the viewport.
+ * The callback is only triggered once, when the element first becomes visible.
+ *
+ * @param elementRef - Reference to the element to observe
+ * @param onIntersect - Callback to execute when the element enters the viewport
+ * @param options - Configuration options for the Intersection Observer
+ * @returns Whether the animation has been triggered
+ */
+export declare function useIntersectionAnimation(elementRef: RefObject<Element | null>, onIntersect: () => void, options?: UseIntersectionAnimationOptions): boolean;

package/dist/progress/Progress.d.ts

@@ -1,16 +1,24 @@
-import { Progress as RadixProgress } from 'radix-ui';
-import { PropsWithChildren, Ref } from 'react';
-import { ProgressIndicatorStylesProps } from './ProgressIndicator.styles';
-export interface ProgressProps extends RadixProgress.ProgressProps, Pick<ProgressIndicatorStylesProps, 'intent'> {
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { ComponentProps, PropsWithChildren, Ref } from 'react';
+import { ProgressIndicatorStylesProps } from './ProgressIndicator';
+export interface ProgressProps extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>, Pick<ProgressIndicatorStylesProps, 'intent'> {
     shape?: 'square' | 'rounded';
-    isIndeterminate?: boolean;
     /**
      * Callback called when the progress reaches its maximum value and the transition animation completes.
      */
     onComplete?: () => void;
+    /**
+     * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.
+     * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.
+     */
+    getValueLabel?: (value: number, max: number) => string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const Progress: {
-    ({ className, value: valueProp, max, shape, intent, isIndeterminate, onComplete, children, ref, ...others }: PropsWithChildren<ProgressProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, value: valueProp, max, min, shape, intent, onComplete, getValueLabel, getAriaValueText: getAriaValueTextProp, children, ref, ...others }: PropsWithChildren<ProgressProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/progress/ProgressContext.d.ts

@@ -1,8 +1,8 @@
-import { ProgressIndicatorStylesProps } from './ProgressIndicator.styles';
+import { ProgressIndicatorStylesProps } from './ProgressIndicator';
 export interface ProgressContextValue {
-    value: number;
+    value: number | null;
     max: number;
-    isIndeterminate: boolean;
+    min: number;
     shape: 'square' | 'rounded';
     intent: ProgressIndicatorStylesProps['intent'];
     onLabelId: (id?: string) => void;

package/dist/progress/ProgressIndicator.d.ts

@@ -1,5 +1,12 @@
-import { ComponentPropsWithRef, PropsWithChildren } from 'react';
-export type ProgressIndicatorProps = ComponentPropsWithRef<'div'>;
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps, PropsWithChildren } from 'react';
+export declare const progressIndicatorStyles: (props?: ({
+    intent?: "main" | "alert" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | "danger" | null | undefined;
+    shape?: "square" | "rounded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>;
+export type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>;
 export declare const ProgressIndicator: {
     ({ className, style, ref, onTransitionEnd, ...others }: PropsWithChildren<ProgressIndicatorProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/progress/ProgressLabel.d.ts

@@ -1,5 +1,6 @@
-import { ComponentPropsWithRef } from 'react';
-export type ProgressLabelProps = ComponentPropsWithRef<'span'>;
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { ComponentProps } from 'react';
+export type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>;
 export declare const ProgressLabel: {
     ({ id: idProp, children, ref: forwardedRef, ...others }: ProgressLabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/progress/ProgressTrack.d.ts

@@ -0,0 +1,7 @@
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { ComponentProps } from 'react';
+export type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>;
+export declare const ProgressTrack: {
+    ({ className, ...others }: ProgressTrackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/progress/ProgressValue.d.ts

@@ -0,0 +1,7 @@
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { ComponentProps, PropsWithChildren } from 'react';
+export type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>;
+export declare const ProgressValue: {
+    ({ className, children, ...others }: PropsWithChildren<ProgressValueProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/progress/index.d.mts

@@ -1,13 +1,13 @@
 import { Progress as Root } from './Progress';
-import { ProgressBar } from './ProgressBar';
-import { ProgressIndicator } from './ProgressIndicator';
 import { ProgressLabel } from './ProgressLabel';
+import { ProgressTrack } from './ProgressTrack';
+import { ProgressValue } from './ProgressValue';
 export declare const Progress: typeof Root & {
     Label: typeof ProgressLabel;
-    Bar: typeof ProgressBar;
-    Indicator: typeof ProgressIndicator;
+    Track: typeof ProgressTrack;
+    Value: typeof ProgressValue;
 };
 export { type ProgressProps } from './Progress';
-export { type ProgressBarProps } from './ProgressBar';
 export { type ProgressLabelProps } from './ProgressLabel';
-export { type ProgressIndicatorProps } from './ProgressIndicator';
+export { type ProgressTrackProps } from './ProgressTrack';
+export { type ProgressValueProps } from './ProgressValue';

package/dist/progress/index.d.ts

@@ -1,13 +1,13 @@
 import { Progress as Root } from './Progress';
-import { ProgressBar } from './ProgressBar';
-import { ProgressIndicator } from './ProgressIndicator';
 import { ProgressLabel } from './ProgressLabel';
+import { ProgressTrack } from './ProgressTrack';
+import { ProgressValue } from './ProgressValue';
 export declare const Progress: typeof Root & {
     Label: typeof ProgressLabel;
-    Bar: typeof ProgressBar;
-    Indicator: typeof ProgressIndicator;
+    Track: typeof ProgressTrack;
+    Value: typeof ProgressValue;
 };
 export { type ProgressProps } from './Progress';
-export { type ProgressBarProps } from './ProgressBar';
 export { type ProgressLabelProps } from './ProgressLabel';
-export { type ProgressIndicatorProps } from './ProgressIndicator';
+export { type ProgressTrackProps } from './ProgressTrack';
+export { type ProgressValueProps } from './ProgressValue';

package/dist/progress/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),P=require("class-variance-authority"),I=require("radix-ui"),l=require("react"),q=require("@spark-ui/hooks/use-merge-refs"),k=P.cva(["relative","h-sz-4 w-full","transform-gpu overflow-hidden","bg-on-background/dim-4"],{variants:{shape:{square:[],rounded:["rounded-sm"]}}}),v=l.createContext(null),L=":progress",x=()=>{const s=l.useContext(v);if(!s)throw new Error("useProgress must be used within a Progress provider");return s},w=P.cva(["h-full w-full","transition-transform duration-400"],{variants:{intent:{basic:["bg-basic"],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"]},isIndeterminate:{true:["absolute","-translate-x-1/2","animate-standalone-indeterminate-bar"],false:[]}}}),p=({className:s,style:e,ref:r,onTransitionEnd:o,...n})=>{const{value:a,max:t,intent:d,shape:u,isIndeterminate:c,onComplete:g}=x(),b=(t-a)/t*100,f=j=>{o?.(j),a>=t&&g&&!c&&g()};return i.jsx(I.Progress.ProgressIndicator,{"data-spark-component":"progress-indicator",className:w({className:s,intent:d,shape:u,isIndeterminate:c}),style:{...e,...!c&&{transform:`translateX(-${b}%)`}},ref:r,onTransitionEnd:f,...n})};p.displayName="Progress.Indicator";const m=({className:s,children:e=i.jsx(p,{}),ref:r,...o})=>{const{shape:n}=x();return i.jsx("div",{"data-spark-component":"progress-bar",className:k({className:s,shape:n}),ref:r,...o,children:e})};m.displayName="Progress.Bar";const N=({className:s,value:e,max:r=100,shape:o="square",intent:n="basic",isIndeterminate:a=!1,onComplete:t,children:d=i.jsx(m,{}),ref:u,...c})=>{const[g,b]=l.useState(),f=l.useMemo(()=>({value:e??0,max:r,intent:n,shape:o,isIndeterminate:a,onLabelId:b,onComplete:t}),[r,e,n,o,a,b,t]);return i.jsx(v.Provider,{"data-spark-component":"progress",value:f,children:i.jsx(I.Progress.Progress,{"data-spark-component":"progress",ref:u,className:P.cx("gap-sm focus-visible:u-outline flex flex-col",s),value:e,"aria-labelledby":g,max:r,tabIndex:-1,...c,children:d})})};N.displayName="Progress";const y=({id:s,children:e,ref:r,...o})=>{const n=`${L}-label-${l.useId()}`,a=s||n,{onLabelId:t}=x(),d=l.useCallback(c=>{t(c?a:void 0)},[a,t]),u=q.useMergeRefs(r,d);return i.jsx("span",{"data-spark-component":"progress-label",id:a,className:"text-body-2 text-on-surface",ref:u,...o,children:e})};y.displayName="Progress.Label";const h=Object.assign(N,{Label:y,Bar:m,Indicator:p});h.displayName="Progress";m.displayName="Progress.Bar";p.displayName="Progress.Indicator";y.displayName="Progress.Label";exports.Progress=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("@base-ui/react/progress"),b=require("class-variance-authority"),i=require("react"),L=require("@spark-ui/hooks/use-merge-refs"),I=i.createContext(null),R=":progress",h=()=>{const s=i.useContext(I);if(!s)throw new Error("useProgress must be used within a Progress provider");return s},C=b.cva(["h-full w-full","transition-width duration-400"],{variants:{intent:{basic:["bg-basic"],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"]}}}),j=({className:s,style:t,ref:r,onTransitionEnd:n,...c})=>{const{value:e,max:a,min:l,intent:u,shape:d,onComplete:p}=h(),f=e!==null?(e-l)/(a-l)*100:0,m=e===null,P=y=>{n?.(y),e!==null&&e>=a&&p&&p()};return o.jsx(g.Progress.Indicator,{"data-spark-component":"progress-indicator",className:b.cx(C({className:s,intent:u,shape:d}),m&&"animate-standalone-indeterminate-bar absolute -translate-x-1/2"),style:{...t,...!m&&e!==null&&{width:`${f}%`}},ref:r,onTransitionEnd:P,...c})};j.displayName="ProgressIndicator";const x=({className:s,...t})=>{const{shape:r}=h();return o.jsx(g.Progress.Track,{"data-spark-component":"progress-track",className:b.cx("h-sz-4 relative col-span-2 w-full","transform-gpu","overflow-hidden","bg-on-background/dim-4",{"rounded-sm":r==="rounded"},s),...t,children:o.jsx(j,{})})};x.displayName="Progress.Track";const T=({className:s,value:t,max:r=100,min:n=0,shape:c="square",intent:e="basic",onComplete:a,getValueLabel:l,getAriaValueText:u,children:d=o.jsx(x,{}),ref:p,...f})=>{const[m,P]=i.useState(),y=i.useMemo(()=>({value:t??null,max:r,min:n,intent:e,shape:c,onLabelId:P,onComplete:a}),[r,n,t,e,c,P,a]),V=u||(l?(q,v)=>v===null?q??"":l(v,r):void 0);return o.jsx(I.Provider,{value:y,children:o.jsx(g.Progress.Root,{"data-spark-component":"progress",ref:p,className:b.cx("gap-sm focus-visible:u-outline grid grid-cols-2",s),value:t??null,max:r,min:n,"aria-labelledby":m,getAriaValueText:V,...f,children:d})})};T.displayName="Progress";const N=({id:s,children:t,ref:r,...n})=>{const c=`${R}-label-${i.useId()}`,e=s||c,{onLabelId:a}=h(),l=i.useCallback(d=>{a(d?e:void 0)},[e,a]),u=L.useMergeRefs(r,l);return o.jsx(g.Progress.Label,{"data-spark-component":"progress-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:t})};N.displayName="Progress.Label";const k=({className:s,children:t,...r})=>o.jsx(g.Progress.Value,{"data-spark-component":"progress-value",className:b.cx("default:text-body-1 text-on-surface col-start-2 text-right",s),...r,children:t});k.displayName="Progress.Value";const w=Object.assign(T,{Label:N,Track:x,Value:k});w.displayName="Progress";N.displayName="Progress.Label";x.displayName="Progress.Track";k.displayName="Progress.Value";exports.Progress=w;
 //# sourceMappingURL=index.js.map

package/dist/progress/index.js.map

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