@fragments-sdk/ui 0.12.0 → 0.14.0

package/dist/components/Slider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Slider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport styles from './Slider.module.scss';\n\n/**\n * Range slider for selecting a numeric value within a defined range.\n * @see https://usefragments.com/components/slider\n */\nexport interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Visible label text */\n  label?: string;\n  /** Controlled value */\n  value?: number;\n  /** Default value for uncontrolled usage */\n  defaultValue?: number;\n  /** Called when the slider value changes */\n  onChange?: (value: number) => void;\n  /** Alias for onChange (Radix convention) */\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  showValue?: boolean;\n  valueSuffix?: string;\n  disabled?: boolean;\n  name?: string;\n  /** Accessible label when visible label is omitted */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nconst SliderRoot = React.forwardRef<HTMLDivElement, SliderProps>(\n  function Slider(\n    {\n      label,\n      value,\n      defaultValue,\n      onChange,\n      onValueChange,\n      min = 0,\n      max = 100,\n      step = 1,\n      showValue = false,\n      valueSuffix = '',\n      disabled = false,\n      className,\n      name,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // For controlled component, use value; otherwise track internal state for display\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? min);\n    const displayValue = value !== undefined ? value : internalValue;\n\n    const resolvedOnChange = onChange ?? onValueChange;\n    const handleChange = (newValue: number | number[]) => {\n      const val = Array.isArray(newValue) ? newValue[0] : newValue;\n      setInternalValue(val);\n      resolvedOnChange?.(val);\n    };\n\n    return (\n      <Field.Root {...htmlProps} disabled={disabled} className={[styles.wrapper, className].filter(Boolean).join(' ')}>\n        {(label || showValue) && (\n          <div className={styles.header}>\n            {label && <Field.Label className={styles.label}>{label}</Field.Label>}\n            {showValue && (\n              <span className={styles.value}>\n                {displayValue}{valueSuffix}\n              </span>\n            )}\n          </div>\n        )}\n        <BaseSlider.Root\n          ref={ref}\n          value={value !== undefined ? [value] : undefined}\n          defaultValue={defaultValue !== undefined ? [defaultValue] : undefined}\n          onValueChange={handleChange}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          name={name}\n          id={id}\n          aria-label={ariaLabel || (label ? undefined : 'Slider')}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={styles.root}\n        >\n          <BaseSlider.Control className={styles.control}>\n            <BaseSlider.Track className={styles.track}>\n              <BaseSlider.Indicator className={styles.indicator} />\n              <BaseSlider.Thumb className={styles.thumb} />\n            </BaseSlider.Track>\n          </BaseSlider.Control>\n        </BaseSlider.Root>\n      </Field.Root>\n    );\n  }\n);\n\nexport const Slider = Object.assign(SliderRoot, {\n  Root: SliderRoot,\n});\n"],"names":["React","Slider","Field","styles","jsxs","jsx","BaseSlider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,aAAaA,iBAAM;AAAA,EACvB,SAASC,QACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EAAA,GAEL,KACA;AAEA,UAAM,CAAC,eAAe,gBAAgB,IAAID,iBAAM,SAAS,gBAAgB,GAAG;AAC5E,UAAM,eAAe,UAAU,SAAY,QAAQ;AAEnD,UAAM,mBAAmB,YAAY;AACrC,UAAM,eAAe,CAAC,aAAgC;AACpD,YAAM,MAAM,MAAM,QAAQ,QAAQ,IAAI,SAAS,CAAC,IAAI;AACpD,uBAAiB,GAAG;AACpB,2DAAmB;AAAA,IACrB;AAEA,2CACGE,MAAAA,MAAM,MAAN,EAAY,GAAG,WAAW,UAAoB,WAAW,CAACC,cAAAA,QAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC1G,UAAA;AAAA,OAAA,SAAS,cACTC,gCAAC,OAAA,EAAI,WAAWD,cAAAA,QAAO,QACpB,UAAA;AAAA,QAAA,wCAAUD,MAAAA,MAAM,OAAN,EAAY,WAAWC,cAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,QACtD,aACCC,2BAAAA,KAAC,QAAA,EAAK,WAAWD,cAAAA,QAAO,OACrB,UAAA;AAAA,UAAA;AAAA,UAAc;AAAA,QAAA,EAAA,CACjB;AAAA,MAAA,GAEJ;AAAA,MAEFE,2BAAAA;AAAAA,QAACC,OAAAA,OAAW;AAAA,QAAX;AAAA,UACC;AAAA,UACA,OAAO,UAAU,SAAY,CAAC,KAAK,IAAI;AAAA,UACvC,cAAc,iBAAiB,SAAY,CAAC,YAAY,IAAI;AAAA,UAC5D,eAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAY,cAAc,QAAQ,SAAY;AAAA,UAC9C,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,WAAWH,cAAAA,QAAO;AAAA,UAElB,UAAAE,2BAAAA,IAACC,OAAAA,OAAW,SAAX,EAAmB,WAAWH,cAAAA,QAAO,SACpC,UAAAC,2BAAAA,KAACE,OAAAA,OAAW,OAAX,EAAiB,WAAWH,cAAAA,QAAO,OAClC,UAAA;AAAA,YAAAE,2BAAAA,IAACC,OAAAA,OAAW,WAAX,EAAqB,WAAWH,cAAAA,QAAO,WAAW;AAAA,2CAClDG,OAAAA,OAAW,OAAX,EAAiB,WAAWH,cAAAA,QAAO,MAAA,CAAO;AAAA,UAAA,EAAA,CAC7C,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEO,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,MAAM;AACR,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Slider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport styles from './Slider.module.scss';\n\n/**\n * Range slider for selecting a numeric value within a defined range.\n * @see https://usefragments.com/components/slider\n */\nexport interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Visible label text */\n  label?: string;\n  /** Controlled value */\n  value?: number;\n  /** Default value for uncontrolled usage */\n  defaultValue?: number;\n  /** Called when the slider value changes */\n  onChange?: (value: number) => void;\n  /** Alias for onChange (Radix convention) */\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  showValue?: boolean;\n  /** Show a value bubble above the thumb while dragging */\n  showValueOnDrag?: boolean;\n  valueSuffix?: string;\n  disabled?: boolean;\n  name?: string;\n  /** Accessible label when visible label is omitted */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nconst SliderRoot = React.forwardRef<HTMLDivElement, SliderProps>(\n  function Slider(\n    {\n      label,\n      value,\n      defaultValue,\n      onChange,\n      onValueChange,\n      min = 0,\n      max = 100,\n      step = 1,\n      showValue = false,\n      showValueOnDrag = false,\n      valueSuffix = '',\n      disabled = false,\n      className,\n      name,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // For controlled component, use value; otherwise track internal state for display\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? min);\n    const [isDragging, setIsDragging] = React.useState(false);\n    const displayValue = value !== undefined ? value : internalValue;\n\n    const resolvedOnChange = onChange ?? onValueChange;\n    const handleChange = (newValue: number | number[]) => {\n      const val = Array.isArray(newValue) ? newValue[0] : newValue;\n      setInternalValue(val);\n      resolvedOnChange?.(val);\n    };\n\n    const handleDragStart = () => {\n      if (!disabled && showValueOnDrag) {\n        setIsDragging(true);\n      }\n    };\n\n    React.useEffect(() => {\n      if (!isDragging) return;\n\n      const handlePointerEnd = () => setIsDragging(false);\n      window.addEventListener('pointerup', handlePointerEnd);\n      window.addEventListener('pointercancel', handlePointerEnd);\n\n      return () => {\n        window.removeEventListener('pointerup', handlePointerEnd);\n        window.removeEventListener('pointercancel', handlePointerEnd);\n      };\n    }, [isDragging]);\n\n    React.useEffect(() => {\n      if (disabled && isDragging) {\n        setIsDragging(false);\n      }\n    }, [disabled, isDragging]);\n\n    return (\n      <Field.Root {...htmlProps} disabled={disabled} className={[styles.wrapper, className].filter(Boolean).join(' ')}>\n        {(label || showValue) && (\n          <div className={styles.header}>\n            {label && <Field.Label className={styles.label}>{label}</Field.Label>}\n            {showValue && (\n              <span className={styles.value}>\n                {displayValue}{valueSuffix}\n              </span>\n            )}\n          </div>\n        )}\n        <BaseSlider.Root\n          ref={ref}\n          value={value !== undefined ? [value] : undefined}\n          defaultValue={defaultValue !== undefined ? [defaultValue] : undefined}\n          onValueChange={handleChange}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          name={name}\n          id={id}\n          aria-label={ariaLabel || (label ? undefined : 'Slider')}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={styles.root}\n          onPointerDownCapture={handleDragStart}\n        >\n          <BaseSlider.Control className={styles.control}>\n            <BaseSlider.Track className={styles.track}>\n              <BaseSlider.Indicator className={styles.indicator} />\n              <BaseSlider.Thumb\n                className={styles.thumb}\n              >\n                {showValueOnDrag && isDragging && (\n                  <span className={styles.dragValueBubble} aria-hidden=\"true\">\n                    {displayValue}\n                    {valueSuffix}\n                  </span>\n                )}\n              </BaseSlider.Thumb>\n            </BaseSlider.Track>\n          </BaseSlider.Control>\n        </BaseSlider.Root>\n      </Field.Root>\n    );\n  }\n);\n\nexport const Slider = Object.assign(SliderRoot, {\n  Root: SliderRoot,\n});\n"],"names":["React","Slider","Field","styles","jsxs","jsx","BaseSlider"],"mappings":"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"}

package/dist/components/Slider/index.d.ts

@@ -18,6 +18,8 @@ export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     max?: number;
     step?: number;
     showValue?: boolean;
+    /** Show a value bubble above the thumb while dragging */
+    showValueOnDrag?: boolean;
     valueSuffix?: string;
     disabled?: boolean;
     name?: string;

package/dist/components/Slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC1G,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AA6ED,eAAO,MAAM,MAAM;;CAEjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC1G,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAkHD,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/Slider/index.js

@@ -14,6 +14,7 @@ const SliderRoot = React.forwardRef(
     max = 100,
     step = 1,
     showValue = false,
+    showValueOnDrag = false,
     valueSuffix = "",
     disabled = false,
     className,
@@ -25,6 +26,7 @@ const SliderRoot = React.forwardRef(
     ...htmlProps
   }, ref) {
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? min);
+    const [isDragging, setIsDragging] = React.useState(false);
     const displayValue = value !== void 0 ? value : internalValue;
     const resolvedOnChange = onChange ?? onValueChange;
     const handleChange = (newValue) => {
@@ -32,6 +34,26 @@ const SliderRoot = React.forwardRef(
       setInternalValue(val);
       resolvedOnChange == null ? void 0 : resolvedOnChange(val);
     };
+    const handleDragStart = () => {
+      if (!disabled && showValueOnDrag) {
+        setIsDragging(true);
+      }
+    };
+    React.useEffect(() => {
+      if (!isDragging) return;
+      const handlePointerEnd = () => setIsDragging(false);
+      window.addEventListener("pointerup", handlePointerEnd);
+      window.addEventListener("pointercancel", handlePointerEnd);
+      return () => {
+        window.removeEventListener("pointerup", handlePointerEnd);
+        window.removeEventListener("pointercancel", handlePointerEnd);
+      };
+    }, [isDragging]);
+    React.useEffect(() => {
+      if (disabled && isDragging) {
+        setIsDragging(false);
+      }
+    }, [disabled, isDragging]);
     return /* @__PURE__ */ jsxs(Field.Root, { ...htmlProps, disabled, className: [styles.wrapper, className].filter(Boolean).join(" "), children: [
       (label || showValue) && /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
         label && /* @__PURE__ */ jsx(Field.Label, { className: styles.label, children: label }),
@@ -57,9 +79,19 @@ const SliderRoot = React.forwardRef(
           "aria-labelledby": ariaLabelledBy,
           "aria-describedby": ariaDescribedBy,
           className: styles.root,
+          onPointerDownCapture: handleDragStart,
           children: /* @__PURE__ */ jsx(Slider$1.Control, { className: styles.control, children: /* @__PURE__ */ jsxs(Slider$1.Track, { className: styles.track, children: [
             /* @__PURE__ */ jsx(Slider$1.Indicator, { className: styles.indicator }),
-            /* @__PURE__ */ jsx(Slider$1.Thumb, { className: styles.thumb })
+            /* @__PURE__ */ jsx(
+              Slider$1.Thumb,
+              {
+                className: styles.thumb,
+                children: showValueOnDrag && isDragging && /* @__PURE__ */ jsxs("span", { className: styles.dragValueBubble, "aria-hidden": "true", children: [
+                  displayValue,
+                  valueSuffix
+                ] })
+              }
+            )
           ] }) })
         }
       )

package/dist/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport styles from './Slider.module.scss';\n\n/**\n * Range slider for selecting a numeric value within a defined range.\n * @see https://usefragments.com/components/slider\n */\nexport interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Visible label text */\n  label?: string;\n  /** Controlled value */\n  value?: number;\n  /** Default value for uncontrolled usage */\n  defaultValue?: number;\n  /** Called when the slider value changes */\n  onChange?: (value: number) => void;\n  /** Alias for onChange (Radix convention) */\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  showValue?: boolean;\n  valueSuffix?: string;\n  disabled?: boolean;\n  name?: string;\n  /** Accessible label when visible label is omitted */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nconst SliderRoot = React.forwardRef<HTMLDivElement, SliderProps>(\n  function Slider(\n    {\n      label,\n      value,\n      defaultValue,\n      onChange,\n      onValueChange,\n      min = 0,\n      max = 100,\n      step = 1,\n      showValue = false,\n      valueSuffix = '',\n      disabled = false,\n      className,\n      name,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // For controlled component, use value; otherwise track internal state for display\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? min);\n    const displayValue = value !== undefined ? value : internalValue;\n\n    const resolvedOnChange = onChange ?? onValueChange;\n    const handleChange = (newValue: number | number[]) => {\n      const val = Array.isArray(newValue) ? newValue[0] : newValue;\n      setInternalValue(val);\n      resolvedOnChange?.(val);\n    };\n\n    return (\n      <Field.Root {...htmlProps} disabled={disabled} className={[styles.wrapper, className].filter(Boolean).join(' ')}>\n        {(label || showValue) && (\n          <div className={styles.header}>\n            {label && <Field.Label className={styles.label}>{label}</Field.Label>}\n            {showValue && (\n              <span className={styles.value}>\n                {displayValue}{valueSuffix}\n              </span>\n            )}\n          </div>\n        )}\n        <BaseSlider.Root\n          ref={ref}\n          value={value !== undefined ? [value] : undefined}\n          defaultValue={defaultValue !== undefined ? [defaultValue] : undefined}\n          onValueChange={handleChange}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          name={name}\n          id={id}\n          aria-label={ariaLabel || (label ? undefined : 'Slider')}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={styles.root}\n        >\n          <BaseSlider.Control className={styles.control}>\n            <BaseSlider.Track className={styles.track}>\n              <BaseSlider.Indicator className={styles.indicator} />\n              <BaseSlider.Thumb className={styles.thumb} />\n            </BaseSlider.Track>\n          </BaseSlider.Control>\n        </BaseSlider.Root>\n      </Field.Root>\n    );\n  }\n);\n\nexport const Slider = Object.assign(SliderRoot, {\n  Root: SliderRoot,\n});\n"],"names":["Slider","BaseSlider"],"mappings":";;;;;AAqCA,MAAM,aAAa,MAAM;AAAA,EACvB,SAASA,QACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EAAA,GAEL,KACA;AAEA,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,GAAG;AAC5E,UAAM,eAAe,UAAU,SAAY,QAAQ;AAEnD,UAAM,mBAAmB,YAAY;AACrC,UAAM,eAAe,CAAC,aAAgC;AACpD,YAAM,MAAM,MAAM,QAAQ,QAAQ,IAAI,SAAS,CAAC,IAAI;AACpD,uBAAiB,GAAG;AACpB,2DAAmB;AAAA,IACrB;AAEA,gCACG,MAAM,MAAN,EAAY,GAAG,WAAW,UAAoB,WAAW,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC1G,UAAA;AAAA,OAAA,SAAS,cACT,qBAAC,OAAA,EAAI,WAAW,OAAO,QACpB,UAAA;AAAA,QAAA,6BAAU,MAAM,OAAN,EAAY,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,QACtD,aACC,qBAAC,QAAA,EAAK,WAAW,OAAO,OACrB,UAAA;AAAA,UAAA;AAAA,UAAc;AAAA,QAAA,EAAA,CACjB;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,QAACC,SAAW;AAAA,QAAX;AAAA,UACC;AAAA,UACA,OAAO,UAAU,SAAY,CAAC,KAAK,IAAI;AAAA,UACvC,cAAc,iBAAiB,SAAY,CAAC,YAAY,IAAI;AAAA,UAC5D,eAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAY,cAAc,QAAQ,SAAY;AAAA,UAC9C,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,WAAW,OAAO;AAAA,UAElB,UAAA,oBAACA,SAAW,SAAX,EAAmB,WAAW,OAAO,SACpC,UAAA,qBAACA,SAAW,OAAX,EAAiB,WAAW,OAAO,OAClC,UAAA;AAAA,YAAA,oBAACA,SAAW,WAAX,EAAqB,WAAW,OAAO,WAAW;AAAA,gCAClDA,SAAW,OAAX,EAAiB,WAAW,OAAO,MAAA,CAAO;AAAA,UAAA,EAAA,CAC7C,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEO,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,MAAM;AACR,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Slider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport styles from './Slider.module.scss';\n\n/**\n * Range slider for selecting a numeric value within a defined range.\n * @see https://usefragments.com/components/slider\n */\nexport interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Visible label text */\n  label?: string;\n  /** Controlled value */\n  value?: number;\n  /** Default value for uncontrolled usage */\n  defaultValue?: number;\n  /** Called when the slider value changes */\n  onChange?: (value: number) => void;\n  /** Alias for onChange (Radix convention) */\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  showValue?: boolean;\n  /** Show a value bubble above the thumb while dragging */\n  showValueOnDrag?: boolean;\n  valueSuffix?: string;\n  disabled?: boolean;\n  name?: string;\n  /** Accessible label when visible label is omitted */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nconst SliderRoot = React.forwardRef<HTMLDivElement, SliderProps>(\n  function Slider(\n    {\n      label,\n      value,\n      defaultValue,\n      onChange,\n      onValueChange,\n      min = 0,\n      max = 100,\n      step = 1,\n      showValue = false,\n      showValueOnDrag = false,\n      valueSuffix = '',\n      disabled = false,\n      className,\n      name,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // For controlled component, use value; otherwise track internal state for display\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? min);\n    const [isDragging, setIsDragging] = React.useState(false);\n    const displayValue = value !== undefined ? value : internalValue;\n\n    const resolvedOnChange = onChange ?? onValueChange;\n    const handleChange = (newValue: number | number[]) => {\n      const val = Array.isArray(newValue) ? newValue[0] : newValue;\n      setInternalValue(val);\n      resolvedOnChange?.(val);\n    };\n\n    const handleDragStart = () => {\n      if (!disabled && showValueOnDrag) {\n        setIsDragging(true);\n      }\n    };\n\n    React.useEffect(() => {\n      if (!isDragging) return;\n\n      const handlePointerEnd = () => setIsDragging(false);\n      window.addEventListener('pointerup', handlePointerEnd);\n      window.addEventListener('pointercancel', handlePointerEnd);\n\n      return () => {\n        window.removeEventListener('pointerup', handlePointerEnd);\n        window.removeEventListener('pointercancel', handlePointerEnd);\n      };\n    }, [isDragging]);\n\n    React.useEffect(() => {\n      if (disabled && isDragging) {\n        setIsDragging(false);\n      }\n    }, [disabled, isDragging]);\n\n    return (\n      <Field.Root {...htmlProps} disabled={disabled} className={[styles.wrapper, className].filter(Boolean).join(' ')}>\n        {(label || showValue) && (\n          <div className={styles.header}>\n            {label && <Field.Label className={styles.label}>{label}</Field.Label>}\n            {showValue && (\n              <span className={styles.value}>\n                {displayValue}{valueSuffix}\n              </span>\n            )}\n          </div>\n        )}\n        <BaseSlider.Root\n          ref={ref}\n          value={value !== undefined ? [value] : undefined}\n          defaultValue={defaultValue !== undefined ? [defaultValue] : undefined}\n          onValueChange={handleChange}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          name={name}\n          id={id}\n          aria-label={ariaLabel || (label ? undefined : 'Slider')}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={styles.root}\n          onPointerDownCapture={handleDragStart}\n        >\n          <BaseSlider.Control className={styles.control}>\n            <BaseSlider.Track className={styles.track}>\n              <BaseSlider.Indicator className={styles.indicator} />\n              <BaseSlider.Thumb\n                className={styles.thumb}\n              >\n                {showValueOnDrag && isDragging && (\n                  <span className={styles.dragValueBubble} aria-hidden=\"true\">\n                    {displayValue}\n                    {valueSuffix}\n                  </span>\n                )}\n              </BaseSlider.Thumb>\n            </BaseSlider.Track>\n          </BaseSlider.Control>\n        </BaseSlider.Root>\n      </Field.Root>\n    );\n  }\n);\n\nexport const Slider = Object.assign(SliderRoot, {\n  Root: SliderRoot,\n});\n"],"names":["Slider","BaseSlider"],"mappings":"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"}

package/dist/components/Stack/index.cjs

@@ -40,7 +40,8 @@ const StackRoot = React__namespace.forwardRef(
     separator,
     as: Component = "div",
     className,
-    style
+    style,
+    ...htmlProps
   }, ref) {
     let directionClass;
     let gapClass;
@@ -108,7 +109,16 @@ const StackRoot = React__namespace.forwardRef(
         content = items;
       }
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classes, style: mergedStyle, children: content });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ...htmlProps,
+        ref,
+        className: classes,
+        style: mergedStyle,
+        children: content
+      }
+    );
   }
 );
 function gapToSpace(gap) {

package/dist/components/Stack/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Stack/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Stack.module.scss';\n\ntype Direction = 'row' | 'column';\ntype GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */\ntype Gap = GapToken | number;\n\n/** Responsive value — either a single value or per-breakpoint overrides */\nexport interface ResponsiveDirection {\n  /** Default (mobile-first) */\n  base?: Direction;\n  /** ≥640px */\n  sm?: Direction;\n  /** ≥768px */\n  md?: Direction;\n  /** ≥1024px */\n  lg?: Direction;\n  /** ≥1280px */\n  xl?: Direction;\n}\n\n/** Responsive gap value */\nexport interface ResponsiveGap {\n  /** Default (mobile-first) */\n  base?: GapToken;\n  /** ≥640px */\n  sm?: GapToken;\n  /** ≥768px */\n  md?: GapToken;\n  /** ≥1024px */\n  lg?: GapToken;\n  /** ≥1280px */\n  xl?: GapToken;\n}\n\n/**\n * Flexbox layout component for vertical or horizontal stacking with consistent spacing.\n * @see https://usefragments.com/components/stack\n */\nexport interface StackProps {\n  children: React.ReactNode;\n  /**\n   * Stack direction.\n   * - A string for fixed direction: `\"row\"` or `\"column\"`\n   * - An object for responsive direction: `{ base: \"column\", md: \"row\" }`\n   */\n  direction?: Direction | ResponsiveDirection;\n  /**\n   * Gap between items.\n   * - A string for fixed gap: `\"sm\"`, `\"md\"`, etc.\n   * - An object for responsive gap: `{ base: \"sm\", md: \"lg\" }`\n   */\n  gap?: Gap | ResponsiveGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n  /**\n   * Render a separator between each child.\n   * - `true` renders a default 1px border line\n   * - A ReactNode renders custom content between children\n   */\n  separator?: boolean | React.ReactNode;\n  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction isResponsiveDirection(\n  direction: StackProps['direction']\n): direction is ResponsiveDirection {\n  return typeof direction === 'object' && direction !== null;\n}\n\nfunction isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {\n  return typeof gap === 'object' && gap !== null;\n}\n\nfunction isNumericGap(gap: StackProps['gap']): gap is number {\n  return typeof gap === 'number';\n}\n\nconst StackRoot = React.forwardRef<HTMLElement, StackProps>(\n  function Stack(\n    {\n      children,\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      wrap = false,\n      separator,\n      as: Component = 'div',\n      className,\n      style,\n    },\n    ref\n  ) {\n    let directionClass: string;\n    let gapClass: string | false;\n    let inlineStyle: React.CSSProperties | undefined;\n\n    // Handle responsive direction\n    if (isResponsiveDirection(direction)) {\n      directionClass = styles.directionResponsive;\n      const vars: Record<string, string> = {};\n      if (direction.base) vars['--fui-stack-direction'] = direction.base;\n      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;\n      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;\n      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;\n      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;\n      inlineStyle = vars as unknown as React.CSSProperties;\n    } else {\n      directionClass = styles[direction];\n    }\n\n    // Handle responsive gap\n    if (isResponsiveGap(gap)) {\n      gapClass = styles.gapResponsive;\n      const gapVars: Record<string, string> = {};\n      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;\n      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;\n      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;\n      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;\n      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;\n      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;\n    } else if (isNumericGap(gap)) {\n      // Numeric gap: maps to space scale tokens (e.g. gap={2} → var(--fui-space-2))\n      gapClass = false;\n      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` } as React.CSSProperties;\n    } else {\n      gapClass = gap !== 'none' && styles[`gap-${gap}`];\n    }\n\n    const classes = [\n      styles.stack,\n      directionClass,\n      gapClass,\n      align && styles[`align-${align}`],\n      justify && styles[`justify-${justify}`],\n      wrap && styles.wrap,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;\n\n    // Interleave separator between children when provided\n    let content: React.ReactNode = children;\n    if (separator) {\n      const validChildren = React.Children.toArray(children).filter(Boolean);\n      if (validChildren.length > 1) {\n        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;\n        const separatorEl = separator === true ? (\n          <div\n            className={styles.separator}\n            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}\n            role=\"separator\"\n          />\n        ) : separator;\n\n        const items: React.ReactNode[] = [];\n        validChildren.forEach((child, idx) => {\n          items.push(child);\n          if (idx < validChildren.length - 1) {\n            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;\n            items.push(\n              <React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>\n            );\n          }\n        });\n        content = items;\n      }\n    }\n\n    return (\n      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>\n        {content}\n      </Component>\n    );\n  }\n);\n\n// Map gap prop values to space variable numbers\nfunction gapToSpace(gap: Gap): string {\n  const map: Record<Gap, string> = {\n    none: '0',\n    xs: '1',\n    sm: '2',\n    md: '3',\n    lg: '4',\n    xl: '6',\n  };\n  return map[gap];\n}\n\nexport const Stack = Object.assign(StackRoot, {\n  Root: StackRoot,\n});\n"],"names":["React","Stack","styles","jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Stack/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Stack.module.scss';\n\ntype Direction = 'row' | 'column';\ntype GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */\ntype GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\ntype Gap = GapToken | GapScale;\n\n/** Responsive value — either a single value or per-breakpoint overrides */\nexport interface ResponsiveDirection {\n  /** Default (mobile-first) */\n  base?: Direction;\n  /** ≥640px */\n  sm?: Direction;\n  /** ≥768px */\n  md?: Direction;\n  /** ≥1024px */\n  lg?: Direction;\n  /** ≥1280px */\n  xl?: Direction;\n}\n\n/** Responsive gap value */\nexport interface ResponsiveGap {\n  /** Default (mobile-first) */\n  base?: GapToken;\n  /** ≥640px */\n  sm?: GapToken;\n  /** ≥768px */\n  md?: GapToken;\n  /** ≥1024px */\n  lg?: GapToken;\n  /** ≥1280px */\n  xl?: GapToken;\n}\n\n/**\n * Flexbox layout component for vertical or horizontal stacking with consistent spacing.\n * @see https://usefragments.com/components/stack\n */\nexport interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'style' | 'className'> {\n  children: React.ReactNode;\n  /**\n   * Stack direction.\n   * - A string for fixed direction: `\"row\"` or `\"column\"`\n   * - An object for responsive direction: `{ base: \"column\", md: \"row\" }`\n   */\n  direction?: Direction | ResponsiveDirection;\n  /**\n   * Gap between items.\n   * - A string for fixed gap: `\"sm\"`, `\"md\"`, etc.\n   * - An object for responsive gap: `{ base: \"sm\", md: \"lg\" }`\n   */\n  gap?: Gap | ResponsiveGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n  /**\n   * Render a separator between each child.\n   * - `true` renders a default 1px border line\n   * - A ReactNode renders custom content between children\n   */\n  separator?: boolean | React.ReactNode;\n  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction isResponsiveDirection(\n  direction: StackProps['direction']\n): direction is ResponsiveDirection {\n  return typeof direction === 'object' && direction !== null;\n}\n\nfunction isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {\n  return typeof gap === 'object' && gap !== null;\n}\n\nfunction isNumericGap(gap: StackProps['gap']): gap is GapScale {\n  return typeof gap === 'number';\n}\n\nconst StackRoot = React.forwardRef<HTMLElement, StackProps>(\n  function Stack(\n    {\n      children,\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      wrap = false,\n      separator,\n      as: Component = 'div',\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    let directionClass: string;\n    let gapClass: string | false;\n    let inlineStyle: React.CSSProperties | undefined;\n\n    // Handle responsive direction\n    if (isResponsiveDirection(direction)) {\n      directionClass = styles.directionResponsive;\n      const vars: Record<string, string> = {};\n      if (direction.base) vars['--fui-stack-direction'] = direction.base;\n      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;\n      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;\n      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;\n      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;\n      inlineStyle = vars as unknown as React.CSSProperties;\n    } else {\n      directionClass = styles[direction];\n    }\n\n    // Handle responsive gap\n    if (isResponsiveGap(gap)) {\n      gapClass = styles.gapResponsive;\n      const gapVars: Record<string, string> = {};\n      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;\n      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;\n      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;\n      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;\n      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;\n      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;\n    } else if (isNumericGap(gap)) {\n      // Numeric gap: maps to space scale tokens (e.g. gap={2} → var(--fui-space-2))\n      gapClass = false;\n      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` } as React.CSSProperties;\n    } else {\n      gapClass = gap !== 'none' && styles[`gap-${gap}`];\n    }\n\n    const classes = [\n      styles.stack,\n      directionClass,\n      gapClass,\n      align && styles[`align-${align}`],\n      justify && styles[`justify-${justify}`],\n      wrap && styles.wrap,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;\n\n    // Interleave separator between children when provided\n    let content: React.ReactNode = children;\n    if (separator) {\n      const validChildren = React.Children.toArray(children).filter(Boolean);\n      if (validChildren.length > 1) {\n        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;\n        const separatorEl = separator === true ? (\n          <div\n            className={styles.separator}\n            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}\n            role=\"separator\"\n          />\n        ) : separator;\n\n        const items: React.ReactNode[] = [];\n        validChildren.forEach((child, idx) => {\n          items.push(child);\n          if (idx < validChildren.length - 1) {\n            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;\n            items.push(\n              <React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>\n            );\n          }\n        });\n        content = items;\n      }\n    }\n\n    return (\n      <Component\n        {...htmlProps}\n        ref={ref as React.Ref<never>}\n        className={classes}\n        style={mergedStyle}\n      >\n        {content}\n      </Component>\n    );\n  }\n);\n\n// Map gap prop values to space variable numbers\nfunction gapToSpace(gap: GapToken): string {\n  const map: Record<GapToken, string> = {\n    none: '0',\n    xs: '1',\n    sm: '2',\n    md: '3',\n    lg: '4',\n    xl: '6',\n  };\n  return map[gap];\n}\n\nexport const Stack = Object.assign(StackRoot, {\n  Root: StackRoot,\n});\n"],"names":["React","Stack","styles","jsx"],"mappings":"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"}

package/dist/components/Stack/index.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 type Direction = 'row' | 'column';
 type GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */
-type Gap = GapToken | number;
+type GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type Gap = GapToken | GapScale;
 /** Responsive value — either a single value or per-breakpoint overrides */
 export interface ResponsiveDirection {
     /** Default (mobile-first) */
@@ -33,7 +34,7 @@ export interface ResponsiveGap {
  * Flexbox layout component for vertical or horizontal stacking with consistent spacing.
  * @see https://usefragments.com/components/stack
  */
-export interface StackProps {
+export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'style' | 'className'> {
     children: React.ReactNode;
     /**
      * Stack direction.

package/dist/components/Stack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClC,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,8EAA8E;AAC9E,KAAK,GAAG,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7B,2EAA2E;AAC3E,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,2BAA2B;AAC3B,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC5C;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAmID,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClC,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,8EAA8E;AAC9E,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC9C,KAAK,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE/B,2EAA2E;AAC3E,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,2BAA2B;AAC3B,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;IAC7G,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC5C;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAyID,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Stack/index.js

@@ -21,7 +21,8 @@ const StackRoot = React.forwardRef(
     separator,
     as: Component = "div",
     className,
-    style
+    style,
+    ...htmlProps
   }, ref) {
     let directionClass;
     let gapClass;
@@ -89,7 +90,16 @@ const StackRoot = React.forwardRef(
         content = items;
       }
     }
-    return /* @__PURE__ */ jsx(Component, { ref, className: classes, style: mergedStyle, children: content });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ...htmlProps,
+        ref,
+        className: classes,
+        style: mergedStyle,
+        children: content
+      }
+    );
   }
 );
 function gapToSpace(gap) {

package/dist/components/Stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Stack/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Stack.module.scss';\n\ntype Direction = 'row' | 'column';\ntype GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */\ntype Gap = GapToken | number;\n\n/** Responsive value — either a single value or per-breakpoint overrides */\nexport interface ResponsiveDirection {\n  /** Default (mobile-first) */\n  base?: Direction;\n  /** ≥640px */\n  sm?: Direction;\n  /** ≥768px */\n  md?: Direction;\n  /** ≥1024px */\n  lg?: Direction;\n  /** ≥1280px */\n  xl?: Direction;\n}\n\n/** Responsive gap value */\nexport interface ResponsiveGap {\n  /** Default (mobile-first) */\n  base?: GapToken;\n  /** ≥640px */\n  sm?: GapToken;\n  /** ≥768px */\n  md?: GapToken;\n  /** ≥1024px */\n  lg?: GapToken;\n  /** ≥1280px */\n  xl?: GapToken;\n}\n\n/**\n * Flexbox layout component for vertical or horizontal stacking with consistent spacing.\n * @see https://usefragments.com/components/stack\n */\nexport interface StackProps {\n  children: React.ReactNode;\n  /**\n   * Stack direction.\n   * - A string for fixed direction: `\"row\"` or `\"column\"`\n   * - An object for responsive direction: `{ base: \"column\", md: \"row\" }`\n   */\n  direction?: Direction | ResponsiveDirection;\n  /**\n   * Gap between items.\n   * - A string for fixed gap: `\"sm\"`, `\"md\"`, etc.\n   * - An object for responsive gap: `{ base: \"sm\", md: \"lg\" }`\n   */\n  gap?: Gap | ResponsiveGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n  /**\n   * Render a separator between each child.\n   * - `true` renders a default 1px border line\n   * - A ReactNode renders custom content between children\n   */\n  separator?: boolean | React.ReactNode;\n  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction isResponsiveDirection(\n  direction: StackProps['direction']\n): direction is ResponsiveDirection {\n  return typeof direction === 'object' && direction !== null;\n}\n\nfunction isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {\n  return typeof gap === 'object' && gap !== null;\n}\n\nfunction isNumericGap(gap: StackProps['gap']): gap is number {\n  return typeof gap === 'number';\n}\n\nconst StackRoot = React.forwardRef<HTMLElement, StackProps>(\n  function Stack(\n    {\n      children,\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      wrap = false,\n      separator,\n      as: Component = 'div',\n      className,\n      style,\n    },\n    ref\n  ) {\n    let directionClass: string;\n    let gapClass: string | false;\n    let inlineStyle: React.CSSProperties | undefined;\n\n    // Handle responsive direction\n    if (isResponsiveDirection(direction)) {\n      directionClass = styles.directionResponsive;\n      const vars: Record<string, string> = {};\n      if (direction.base) vars['--fui-stack-direction'] = direction.base;\n      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;\n      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;\n      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;\n      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;\n      inlineStyle = vars as unknown as React.CSSProperties;\n    } else {\n      directionClass = styles[direction];\n    }\n\n    // Handle responsive gap\n    if (isResponsiveGap(gap)) {\n      gapClass = styles.gapResponsive;\n      const gapVars: Record<string, string> = {};\n      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;\n      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;\n      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;\n      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;\n      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;\n      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;\n    } else if (isNumericGap(gap)) {\n      // Numeric gap: maps to space scale tokens (e.g. gap={2} → var(--fui-space-2))\n      gapClass = false;\n      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` } as React.CSSProperties;\n    } else {\n      gapClass = gap !== 'none' && styles[`gap-${gap}`];\n    }\n\n    const classes = [\n      styles.stack,\n      directionClass,\n      gapClass,\n      align && styles[`align-${align}`],\n      justify && styles[`justify-${justify}`],\n      wrap && styles.wrap,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;\n\n    // Interleave separator between children when provided\n    let content: React.ReactNode = children;\n    if (separator) {\n      const validChildren = React.Children.toArray(children).filter(Boolean);\n      if (validChildren.length > 1) {\n        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;\n        const separatorEl = separator === true ? (\n          <div\n            className={styles.separator}\n            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}\n            role=\"separator\"\n          />\n        ) : separator;\n\n        const items: React.ReactNode[] = [];\n        validChildren.forEach((child, idx) => {\n          items.push(child);\n          if (idx < validChildren.length - 1) {\n            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;\n            items.push(\n              <React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>\n            );\n          }\n        });\n        content = items;\n      }\n    }\n\n    return (\n      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>\n        {content}\n      </Component>\n    );\n  }\n);\n\n// Map gap prop values to space variable numbers\nfunction gapToSpace(gap: Gap): string {\n  const map: Record<Gap, string> = {\n    none: '0',\n    xs: '1',\n    sm: '2',\n    md: '3',\n    lg: '4',\n    xl: '6',\n  };\n  return map[gap];\n}\n\nexport const Stack = Object.assign(StackRoot, {\n  Root: StackRoot,\n});\n"],"names":["Stack"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Stack/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Stack.module.scss';\n\ntype Direction = 'row' | 'column';\ntype GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */\ntype GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\ntype Gap = GapToken | GapScale;\n\n/** Responsive value — either a single value or per-breakpoint overrides */\nexport interface ResponsiveDirection {\n  /** Default (mobile-first) */\n  base?: Direction;\n  /** ≥640px */\n  sm?: Direction;\n  /** ≥768px */\n  md?: Direction;\n  /** ≥1024px */\n  lg?: Direction;\n  /** ≥1280px */\n  xl?: Direction;\n}\n\n/** Responsive gap value */\nexport interface ResponsiveGap {\n  /** Default (mobile-first) */\n  base?: GapToken;\n  /** ≥640px */\n  sm?: GapToken;\n  /** ≥768px */\n  md?: GapToken;\n  /** ≥1024px */\n  lg?: GapToken;\n  /** ≥1280px */\n  xl?: GapToken;\n}\n\n/**\n * Flexbox layout component for vertical or horizontal stacking with consistent spacing.\n * @see https://usefragments.com/components/stack\n */\nexport interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'style' | 'className'> {\n  children: React.ReactNode;\n  /**\n   * Stack direction.\n   * - A string for fixed direction: `\"row\"` or `\"column\"`\n   * - An object for responsive direction: `{ base: \"column\", md: \"row\" }`\n   */\n  direction?: Direction | ResponsiveDirection;\n  /**\n   * Gap between items.\n   * - A string for fixed gap: `\"sm\"`, `\"md\"`, etc.\n   * - An object for responsive gap: `{ base: \"sm\", md: \"lg\" }`\n   */\n  gap?: Gap | ResponsiveGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n  /**\n   * Render a separator between each child.\n   * - `true` renders a default 1px border line\n   * - A ReactNode renders custom content between children\n   */\n  separator?: boolean | React.ReactNode;\n  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction isResponsiveDirection(\n  direction: StackProps['direction']\n): direction is ResponsiveDirection {\n  return typeof direction === 'object' && direction !== null;\n}\n\nfunction isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {\n  return typeof gap === 'object' && gap !== null;\n}\n\nfunction isNumericGap(gap: StackProps['gap']): gap is GapScale {\n  return typeof gap === 'number';\n}\n\nconst StackRoot = React.forwardRef<HTMLElement, StackProps>(\n  function Stack(\n    {\n      children,\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      wrap = false,\n      separator,\n      as: Component = 'div',\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    let directionClass: string;\n    let gapClass: string | false;\n    let inlineStyle: React.CSSProperties | undefined;\n\n    // Handle responsive direction\n    if (isResponsiveDirection(direction)) {\n      directionClass = styles.directionResponsive;\n      const vars: Record<string, string> = {};\n      if (direction.base) vars['--fui-stack-direction'] = direction.base;\n      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;\n      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;\n      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;\n      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;\n      inlineStyle = vars as unknown as React.CSSProperties;\n    } else {\n      directionClass = styles[direction];\n    }\n\n    // Handle responsive gap\n    if (isResponsiveGap(gap)) {\n      gapClass = styles.gapResponsive;\n      const gapVars: Record<string, string> = {};\n      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;\n      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;\n      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;\n      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;\n      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;\n      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;\n    } else if (isNumericGap(gap)) {\n      // Numeric gap: maps to space scale tokens (e.g. gap={2} → var(--fui-space-2))\n      gapClass = false;\n      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` } as React.CSSProperties;\n    } else {\n      gapClass = gap !== 'none' && styles[`gap-${gap}`];\n    }\n\n    const classes = [\n      styles.stack,\n      directionClass,\n      gapClass,\n      align && styles[`align-${align}`],\n      justify && styles[`justify-${justify}`],\n      wrap && styles.wrap,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;\n\n    // Interleave separator between children when provided\n    let content: React.ReactNode = children;\n    if (separator) {\n      const validChildren = React.Children.toArray(children).filter(Boolean);\n      if (validChildren.length > 1) {\n        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;\n        const separatorEl = separator === true ? (\n          <div\n            className={styles.separator}\n            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}\n            role=\"separator\"\n          />\n        ) : separator;\n\n        const items: React.ReactNode[] = [];\n        validChildren.forEach((child, idx) => {\n          items.push(child);\n          if (idx < validChildren.length - 1) {\n            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;\n            items.push(\n              <React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>\n            );\n          }\n        });\n        content = items;\n      }\n    }\n\n    return (\n      <Component\n        {...htmlProps}\n        ref={ref as React.Ref<never>}\n        className={classes}\n        style={mergedStyle}\n      >\n        {content}\n      </Component>\n    );\n  }\n);\n\n// Map gap prop values to space variable numbers\nfunction gapToSpace(gap: GapToken): string {\n  const map: Record<GapToken, string> = {\n    none: '0',\n    xs: '1',\n    sm: '2',\n    md: '3',\n    lg: '4',\n    xl: '6',\n  };\n  return map[gap];\n}\n\nexport const Stack = Object.assign(StackRoot, {\n  Root: StackRoot,\n});\n"],"names":["Stack"],"mappings":"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"}

package/dist/components/Table/Table.module.scss.cjs

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_1gugf_1";
-const table = "_table_1gugf_6";
-const caption = "_caption_1gugf_14";
-const captionHidden = "_captionHidden_1gugf_23";
-const sm = "_sm_1gugf_35";
-const th = "_th_1gugf_35";
-const td = "_td_1gugf_36";
-const md = "_md_1gugf_41";
-const thead = "_thead_1gugf_47";
-const headerContent = "_headerContent_1gugf_70";
-const row = "_row_1gugf_76";
-const selected = "_selected_1gugf_87";
-const tfoot = "_tfoot_1gugf_100";
-const striped = "_striped_1gugf_108";
-const tbody = "_tbody_1gugf_108";
-const bordered = "_bordered_1gugf_118";
+const wrapper = "_wrapper_cobfm_1";
+const table = "_table_cobfm_6";
+const caption = "_caption_cobfm_14";
+const captionHidden = "_captionHidden_cobfm_23";
+const sm = "_sm_cobfm_35";
+const th = "_th_cobfm_35";
+const td = "_td_cobfm_36";
+const md = "_md_cobfm_41";
+const thead = "_thead_cobfm_47";
+const headerContent = "_headerContent_cobfm_70";
+const row = "_row_cobfm_76";
+const selected = "_selected_cobfm_87";
+const tfoot = "_tfoot_cobfm_100";
+const striped = "_striped_cobfm_108";
+const tbody = "_tbody_cobfm_108";
+const bordered = "_bordered_cobfm_118";
 const styles = {
   wrapper,
   table,

package/dist/components/Table/Table.module.scss.js

@@ -1,19 +1,19 @@
-const wrapper = "_wrapper_1gugf_1";
-const table = "_table_1gugf_6";
-const caption = "_caption_1gugf_14";
-const captionHidden = "_captionHidden_1gugf_23";
-const sm = "_sm_1gugf_35";
-const th = "_th_1gugf_35";
-const td = "_td_1gugf_36";
-const md = "_md_1gugf_41";
-const thead = "_thead_1gugf_47";
-const headerContent = "_headerContent_1gugf_70";
-const row = "_row_1gugf_76";
-const selected = "_selected_1gugf_87";
-const tfoot = "_tfoot_1gugf_100";
-const striped = "_striped_1gugf_108";
-const tbody = "_tbody_1gugf_108";
-const bordered = "_bordered_1gugf_118";
+const wrapper = "_wrapper_cobfm_1";
+const table = "_table_cobfm_6";
+const caption = "_caption_cobfm_14";
+const captionHidden = "_captionHidden_cobfm_23";
+const sm = "_sm_cobfm_35";
+const th = "_th_cobfm_35";
+const td = "_td_cobfm_36";
+const md = "_md_cobfm_41";
+const thead = "_thead_cobfm_47";
+const headerContent = "_headerContent_cobfm_70";
+const row = "_row_cobfm_76";
+const selected = "_selected_cobfm_87";
+const tfoot = "_tfoot_cobfm_100";
+const striped = "_striped_cobfm_108";
+const tbody = "_tbody_cobfm_108";
+const bordered = "_bordered_cobfm_118";
 const styles = {
   wrapper,
   table,

package/dist/components/Table/index.d.ts

@@ -7,6 +7,10 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
     striped?: boolean;
     /** Wrap table in a bordered container */
     bordered?: boolean;
+    /** Class applied to the outer wrapper element */
+    wrapperClassName?: string;
+    /** Props applied to the outer wrapper element */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
     children?: React.ReactNode;
 }
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
@@ -17,13 +21,15 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
 export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     children?: React.ReactNode;
 }
-export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableHeaderCellElement> {
     /** Scope for the header cell */
     scope?: string;
     children?: React.ReactNode;
 }
-export interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
+export interface TableCaptionProps extends Omit<React.HTMLAttributes<HTMLTableCaptionElement>, 'hidden'> {
     /** Visually hide the caption (screen readers only) */
+    visuallyHidden?: boolean;
+    /** @deprecated Use visuallyHidden */
     hidden?: boolean;
     children?: React.ReactNode;
 }
@@ -33,8 +39,8 @@ declare function TableFooter({ className, children, ...props }: React.HTMLAttrib
 declare function TableRow({ className, selected, children, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
 declare function TableCell({ className, children, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 declare function TableHeaderCell({ className, scope, children, ...props }: TableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
-declare function TableCaption({ className, hidden: visuallyHidden, children, ...props }: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
-declare function TableRoot({ size, striped, bordered, className, children, ...htmlProps }: TableProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, visuallyHidden, hidden, children, ...props }: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
+declare function TableRoot({ size, striped, bordered, wrapperClassName, wrapperProps, className, children, ...htmlProps }: TableProps): import("react/jsx-runtime").JSX.Element;
 export declare const Table: typeof TableRoot & {
     Root: typeof TableRoot;
     Head: typeof TableHead;

package/dist/components/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,2BAA2B,CAAC;AAOnC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IACxF,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC;IACtF,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAMlG;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAMlG;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAMpG;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAU3E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAMnE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAM9F;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CASjG;AAMD,iBAAS,SAAS,CAAC,EACjB,IAAW,EACX,OAAe,EACf,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,2CAiBZ;AAMD,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,2BAA2B,CAAC;AAOnC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;IAC9F,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAAE,QAAQ,CAAC;IACtG,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAMlG;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAMlG;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAMpG;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAU3E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAMnE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAM9F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAUnB;AAMD,iBAAS,SAAS,CAAC,EACjB,IAAW,EACX,OAAe,EACf,QAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,2CAoBZ;AAMD,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC"}

package/dist/components/TableOfContents/index.cjs

@@ -9,10 +9,11 @@ function TableOfContentsRoot({
   title = "On This Page",
   hideTitle = false,
   className,
+  "aria-label": ariaLabel,
   ...htmlProps
 }) {
   const classes = [TableOfContents_module.default.root, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": label, className: classes, ...htmlProps, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...htmlProps, "aria-label": ariaLabel ?? label, className: classes, children: [
     !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", variant: "section-label", className: TableOfContents_module.default.title, children: title }),
     /* @__PURE__ */ jsxRuntime.jsx("ul", { className: TableOfContents_module.default.list, children })
   ] });
@@ -24,6 +25,7 @@ function TableOfContentsItem({
   indent = false,
   className,
   onClick,
+  href: _href,
   ...htmlProps
 }) {
   const linkClasses = [
@@ -33,22 +35,23 @@ function TableOfContentsItem({
     className
   ].filter(Boolean).join(" ");
   const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e);
+    if (e.defaultPrevented) return;
     e.preventDefault();
     const el = document.getElementById(id);
     if (el) {
       el.scrollIntoView({ behavior: "smooth" });
-      history.replaceState(null, "", `#${id}`);
+      window.history.replaceState(null, "", `#${id}`);
     }
-    onClick == null ? void 0 : onClick(e);
   };
   return /* @__PURE__ */ jsxRuntime.jsx("li", { className: TableOfContents_module.default.item, children: /* @__PURE__ */ jsxRuntime.jsx(
     "a",
     {
+      ...htmlProps,
       href: `#${id}`,
       className: linkClasses,
       onClick: handleClick,
-      "aria-current": active ? "true" : void 0,
-      ...htmlProps,
+      "aria-current": active ? "location" : void 0,
       children
     }
   ) });

package/dist/components/TableOfContents/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/TableOfContents/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './TableOfContents.module.scss';\nimport { Text } from '../Text';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Label for the nav landmark (default: \"Table of contents\") */\n  label?: string;\n  /** Title displayed above the list (default: \"On This Page\") */\n  title?: string;\n  /** Hide the title */\n  hideTitle?: boolean;\n}\n\nexport interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  children: React.ReactNode;\n  /** The heading ID to link to */\n  id: string;\n  /** Whether this item is currently active/visible */\n  active?: boolean;\n  /** Indent level — use for sub-headings (h3, h4, etc.) */\n  indent?: boolean;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction TableOfContentsRoot({\n  children,\n  label = 'Table of contents',\n  title = 'On This Page',\n  hideTitle = false,\n  className,\n  ...htmlProps\n}: TableOfContentsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <nav aria-label={label} className={classes} {...htmlProps}>\n      {!hideTitle && (\n        <Text as=\"p\" variant=\"section-label\" className={styles.title}>\n          {title}\n        </Text>\n      )}\n      <ul className={styles.list}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nfunction TableOfContentsItem({\n  children,\n  id,\n  active = false,\n  indent = false,\n  className,\n  onClick,\n  ...htmlProps\n}: TableOfContentsItemProps) {\n  const linkClasses = [\n    styles.link,\n    indent && styles.indent,\n    active && styles.active,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    e.preventDefault();\n    const el = document.getElementById(id);\n    if (el) {\n      el.scrollIntoView({ behavior: 'smooth' });\n      history.replaceState(null, '', `#${id}`);\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <li className={styles.item}>\n      <a\n        href={`#${id}`}\n        className={linkClasses}\n        onClick={handleClick}\n        aria-current={active ? 'true' : undefined}\n        {...htmlProps}\n      >\n        {children}\n      </a>\n    </li>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const TableOfContents = Object.assign(TableOfContentsRoot, {\n  Item: TableOfContentsItem,\n});\n\n// Re-export individual components\nexport { TableOfContentsRoot, TableOfContentsItem };\n"],"names":["styles","jsx","Text"],"mappings":";;;;;AAkCA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,CAACA,uBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,yCACG,OAAA,EAAI,cAAY,OAAO,WAAW,SAAU,GAAG,WAC7C,UAAA;AAAA,IAAA,CAAC,aACAC,2BAAAA,IAACC,MAAAA,MAAA,EAAK,IAAG,KAAI,SAAQ,iBAAgB,WAAWF,uBAAAA,QAAO,OACpD,UAAA,MAAA,CACH;AAAA,IAEFC,2BAAAA,IAAC,MAAA,EAAG,WAAWD,uBAAAA,QAAO,MACnB,SAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,cAAc;AAAA,IAClBA,uBAAAA,QAAO;AAAA,IACP,UAAUA,uBAAAA,QAAO;AAAA,IACjB,UAAUA,uBAAAA,QAAO;AAAA,IACjB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,cAAc,CAAC,MAA2C;AAC9D,MAAE,eAAA;AACF,UAAM,KAAK,SAAS,eAAe,EAAE;AACrC,QAAI,IAAI;AACN,SAAG,eAAe,EAAE,UAAU,SAAA,CAAU;AACxC,cAAQ,aAAa,MAAM,IAAI,IAAI,EAAE,EAAE;AAAA,IACzC;AACA,uCAAU;AAAA,EACZ;AAEA,SACEC,2BAAAA,IAAC,MAAA,EAAG,WAAWD,uBAAAA,QAAO,MACpB,UAAAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,IAAI,EAAE;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,MACT,gBAAc,SAAS,SAAS;AAAA,MAC/B,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,qBAAqB;AAAA,EAChE,MAAM;AACR,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/TableOfContents/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './TableOfContents.module.scss';\nimport { Text } from '../Text';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Label for the nav landmark (default: \"Table of contents\") */\n  label?: string;\n  /** Title displayed above the list (default: \"On This Page\") */\n  title?: string;\n  /** Hide the title */\n  hideTitle?: boolean;\n}\n\nexport interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  children: React.ReactNode;\n  /** The heading ID to link to */\n  id: string;\n  /** Whether this item is currently active/visible */\n  active?: boolean;\n  /** Indent level — use for sub-headings (h3, h4, etc.) */\n  indent?: boolean;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction TableOfContentsRoot({\n  children,\n  label = 'Table of contents',\n  title = 'On This Page',\n  hideTitle = false,\n  className,\n  'aria-label': ariaLabel,\n  ...htmlProps\n}: TableOfContentsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <nav {...htmlProps} aria-label={ariaLabel ?? label} className={classes}>\n      {!hideTitle && (\n        <Text as=\"p\" variant=\"section-label\" className={styles.title}>\n          {title}\n        </Text>\n      )}\n      <ul className={styles.list}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nfunction TableOfContentsItem({\n  children,\n  id,\n  active = false,\n  indent = false,\n  className,\n  onClick,\n  href: _href,\n  ...htmlProps\n}: TableOfContentsItemProps) {\n  const linkClasses = [\n    styles.link,\n    indent && styles.indent,\n    active && styles.active,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(e);\n    if (e.defaultPrevented) return;\n\n    e.preventDefault();\n    const el = document.getElementById(id);\n    if (el) {\n      el.scrollIntoView({ behavior: 'smooth' });\n      window.history.replaceState(null, '', `#${id}`);\n    }\n  };\n\n  return (\n    <li className={styles.item}>\n      <a\n        {...htmlProps}\n        href={`#${id}`}\n        className={linkClasses}\n        onClick={handleClick}\n        aria-current={active ? 'location' : undefined}\n      >\n        {children}\n      </a>\n    </li>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const TableOfContents = Object.assign(TableOfContentsRoot, {\n  Item: TableOfContentsItem,\n});\n\n// Re-export individual components\nexport { TableOfContentsRoot, TableOfContentsItem };\n"],"names":["styles","jsxs","jsx","Text"],"mappings":";;;;;AAkCA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,CAACA,uBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACEC,gCAAC,SAAK,GAAG,WAAW,cAAY,aAAa,OAAO,WAAW,SAC5D,UAAA;AAAA,IAAA,CAAC,aACAC,2BAAAA,IAACC,MAAAA,MAAA,EAAK,IAAG,KAAI,SAAQ,iBAAgB,WAAWH,uBAAAA,QAAO,OACpD,UAAA,MAAA,CACH;AAAA,IAEFE,2BAAAA,IAAC,MAAA,EAAG,WAAWF,uBAAAA,QAAO,MACnB,SAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,GAAG;AACL,GAA6B;AAC3B,QAAM,cAAc;AAAA,IAClBA,uBAAAA,QAAO;AAAA,IACP,UAAUA,uBAAAA,QAAO;AAAA,IACjB,UAAUA,uBAAAA,QAAO;AAAA,IACjB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,cAAc,CAAC,MAA2C;AAC9D,uCAAU;AACV,QAAI,EAAE,iBAAkB;AAExB,MAAE,eAAA;AACF,UAAM,KAAK,SAAS,eAAe,EAAE;AACrC,QAAI,IAAI;AACN,SAAG,eAAe,EAAE,UAAU,SAAA,CAAU;AACxC,aAAO,QAAQ,aAAa,MAAM,IAAI,IAAI,EAAE,EAAE;AAAA,IAChD;AAAA,EACF;AAEA,SACEE,2BAAAA,IAAC,MAAA,EAAG,WAAWF,uBAAAA,QAAO,MACpB,UAAAE,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,IAAI,EAAE;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,MACT,gBAAc,SAAS,aAAa;AAAA,MAEnC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,qBAAqB;AAAA,EAChE,MAAM;AACR,CAAC;;;;"}

package/dist/components/TableOfContents/index.d.ts

@@ -17,8 +17,8 @@ export interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttribute
     /** Indent level — use for sub-headings (h3, h4, etc.) */
     indent?: boolean;
 }
-declare function TableOfContentsRoot({ children, label, title, hideTitle, className, ...htmlProps }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element;
-declare function TableOfContentsItem({ children, id, active, indent, className, onClick, ...htmlProps }: TableOfContentsItemProps): import("react/jsx-runtime").JSX.Element;
+declare function TableOfContentsRoot({ children, label, title, hideTitle, className, 'aria-label': ariaLabel, ...htmlProps }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element;
+declare function TableOfContentsItem({ children, id, active, indent, className, onClick, href: _href, ...htmlProps }: TableOfContentsItemProps): import("react/jsx-runtime").JSX.Element;
 export declare const TableOfContents: typeof TableOfContentsRoot & {
     Item: typeof TableOfContentsItem;
 };

package/dist/components/TableOfContents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableOfContents/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/G,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAMD,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,KAA2B,EAC3B,KAAsB,EACtB,SAAiB,EACjB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAetB;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,MAAc,EACd,MAAc,EACd,SAAS,EACT,OAAO,EACP,GAAG,SAAS,EACb,EAAE,wBAAwB,2CA+B1B;AAMD,eAAO,MAAM,eAAe;;CAE1B,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableOfContents/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/G,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAMD,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,KAA2B,EAC3B,KAAsB,EACtB,SAAiB,EACjB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAetB;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,MAAc,EACd,MAAc,EACd,SAAS,EACT,OAAO,EACP,IAAI,EAAE,KAAK,EACX,GAAG,SAAS,EACb,EAAE,wBAAwB,2CAiC1B;AAMD,eAAO,MAAM,eAAe;;CAE1B,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAC"}