@spark-ui/components 17.0.1 → 17.1.1

package/dist/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,22 @@
+import { RadioGroup } from '@base-ui/react/radio-group';
+import { ComponentProps, Ref } from 'react';
+import { SegmentedControlStylesProps } from './SegmentedControl.styles';
+export interface SegmentedControlProps extends Omit<ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'>, SegmentedControlStylesProps {
+    /**
+     * The controlled selected value.
+     */
+    value?: string;
+    /**
+     * The uncontrolled default selected value.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const SegmentedControl: {
+    ({ value, defaultValue, onValueChange, className, children, ref, ...rest }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/segmented-control/SegmentedControl.styles.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const rootStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const itemStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const indicatorStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type SegmentedControlStylesProps = VariantProps<typeof itemStyles>;

package/dist/segmented-control/SegmentedControlContext.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+export interface SegmentedControlContextInterface {
+    checkedValue: string | null;
+    containerRef: RefObject<HTMLDivElement | null>;
+}
+export declare const SegmentedControlContext: import('react').Context<SegmentedControlContextInterface>;
+export declare const useSegmentedControlContext: () => SegmentedControlContextInterface;

package/dist/segmented-control/SegmentedControlIndicator.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, Ref } from 'react';
+export interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const SegmentedControlIndicator: {
+    ({ className, ref, ...rest }: SegmentedControlIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/segmented-control/SegmentedControlItem.d.ts

@@ -0,0 +1,18 @@
+import { Radio } from '@base-ui/react/radio';
+import { ComponentProps, Ref } from 'react';
+export interface SegmentedControlItemProps extends Omit<ComponentProps<typeof Radio.Root>, 'value'> {
+    /**
+     * A unique value that identifies this item within the segmented control.
+     */
+    value: string;
+    /**
+     * When true, prevents the user from interacting with this item.
+     * @default false
+     */
+    disabled?: boolean;
+    ref?: Ref<HTMLElement>;
+}
+export declare const SegmentedControlItem: {
+    ({ value, disabled, children, className, ref, ...rest }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/segmented-control/index.d.mts

@@ -0,0 +1,10 @@
+import { SegmentedControl as Root } from './SegmentedControl';
+import { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator';
+import { SegmentedControlItem as Item } from './SegmentedControlItem';
+export declare const SegmentedControl: typeof Root & {
+    Item: typeof Item;
+    Indicator: typeof Indicator;
+};
+export type { SegmentedControlProps } from './SegmentedControl';
+export type { SegmentedControlItemProps } from './SegmentedControlItem';
+export type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator';

package/dist/segmented-control/index.d.ts

@@ -0,0 +1,10 @@
+import { SegmentedControl as Root } from './SegmentedControl';
+import { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator';
+import { SegmentedControlItem as Item } from './SegmentedControlItem';
+export declare const SegmentedControl: typeof Root & {
+    Item: typeof Item;
+    Indicator: typeof Indicator;
+};
+export type { SegmentedControlProps } from './SegmentedControl';
+export type { SegmentedControlItemProps } from './SegmentedControlItem';
+export type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator';

package/dist/segmented-control/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),k=require("@base-ui/react/radio-group"),E=require("@spark-ui/components/form-field"),F=require("@spark-ui/hooks/use-merge-refs"),r=require("react"),g=require("class-variance-authority"),z=require("@base-ui/react/radio"),B=g.cva(["default:self-start","group inline-grid grid-flow-col auto-cols-fr","relative items-stretch min-w-max","rounded-xl p-sm","bg-surface border-sm border-outline"]),M=g.cva(["relative z-raised min-h-sz-44 focus-visible:outline-none","flex flex-none items-center justify-center flex-col","default:px-lg default:py-md","rounded-[20px]","cursor-pointer select-none","font-medium","transition-colors duration-150","outline-none","focus-visible:u-outline","data-disabled:cursor-not-allowed data-disabled:opacity-dim-3","data-checked:text-on-support-container","data-checked:font-bold"]),P=g.cva(["absolute z-base","rounded-[20px]","bg-support-container border-md border-support","group-has-focus-visible:border-focus","transition-[left,top,width,height] duration-200 ease-in-out","pointer-events-none"]),v=r.createContext({}),G=()=>{const e=r.useContext(v);if(!e)throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");return e},O=e=>{let t=null;return r.Children.forEach(e,o=>{t===null&&r.isValidElement(o)&&typeof o.props.value=="string"&&(t=o.props.value)}),t},x=({value:e,defaultValue:t,onValueChange:o,className:s,children:i,ref:n,...m})=>{const f=r.useRef(null),d=F.useMergeRefs(f,n),c=O(i),a=e!==void 0,[l,p]=r.useState(()=>t??c),y=a?e??null:l,R=j=>{const b=j;a||p(b),o?.(b)},{labelId:I,description:w,isRequired:V,isInvalid:q,name:N}=E.useFormFieldControl();return u.jsx(v.Provider,{value:{checkedValue:y,containerRef:f},children:u.jsx(k.RadioGroup,{ref:d,value:a?e:void 0,defaultValue:a?void 0:t??c??void 0,onValueChange:R,"data-spark-component":"segmented-control",className:B({className:s}),"aria-labelledby":I,"aria-describedby":w,"aria-required":V||void 0,"aria-invalid":q||void 0,name:N,...m,children:i})})};x.displayName="SegmentedControl";const h=({className:e,ref:t,...o})=>{const{checkedValue:s,containerRef:i}=G(),[n,m]=r.useState(null);if(r.useEffect(()=>{const d=i.current;if(!d)return;const c=s?d.querySelector(`[data-value="${s}"]`):null;if(!c){m(null);return}const a=d.getBoundingClientRect(),l=c.getBoundingClientRect(),p=1;m({left:l.left-a.left-p,top:l.top-a.top-p,width:l.width,height:l.height})},[s,i]),!n)return null;const f={left:n.left,top:n.top,width:n.width,height:n.height};return u.jsx("span",{ref:t,"data-spark-component":"segmented-control-indicator","aria-hidden":!0,className:P({className:e}),style:f,...o})};h.displayName="SegmentedControl.Indicator";const C=({value:e,disabled:t=!1,children:o,className:s,ref:i,...n})=>u.jsxs(z.Radio.Root,{ref:i,"data-spark-component":"segmented-control-item","data-value":e,value:e,disabled:t,className:M({className:s}),...n,children:[o,u.jsx("span",{"aria-hidden":"true",className:"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']",children:o})]});C.displayName="SegmentedControl.Item";const S=Object.assign(x,{Item:C,Indicator:h});S.displayName="SegmentedControl";C.displayName="SegmentedControl.Item";h.displayName="SegmentedControl.Indicator";exports.SegmentedControl=S;
+//# sourceMappingURL=index.js.map

package/dist/segmented-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/segmented-control/SegmentedControl.styles.ts","../../src/segmented-control/SegmentedControlContext.tsx","../../src/segmented-control/SegmentedControl.tsx","../../src/segmented-control/SegmentedControlIndicator.tsx","../../src/segmented-control/SegmentedControlItem.tsx","../../src/segmented-control/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'default:self-start',\n  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl p-sm',\n  'bg-surface border-sm border-outline',\n])\n\nexport const itemStyles = cva([\n  'relative z-raised min-h-sz-44 focus-visible:outline-none',\n  'flex flex-none items-center justify-center flex-col',\n  'default:px-lg default:py-md',\n  'rounded-[20px]',\n  'cursor-pointer select-none',\n  'font-medium',\n  'transition-colors duration-150',\n  'outline-none',\n  'focus-visible:u-outline',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n  'data-checked:text-on-support-container',\n  'data-checked:font-bold',\n])\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-[20px]',\n  'bg-support-container border-md border-support',\n  'group-has-focus-visible:border-focus',\n  'transition-[left,top,width,height] duration-200 ease-in-out',\n  'pointer-events-none',\n])\n\nexport type SegmentedControlStylesProps = VariantProps<typeof itemStyles>\n","import { createContext, RefObject, useContext } from 'react'\n\nexport interface SegmentedControlContextInterface {\n  checkedValue: string | null\n  containerRef: RefObject<HTMLDivElement | null>\n}\n\nexport const SegmentedControlContext = createContext<SegmentedControlContextInterface>(\n  {} as SegmentedControlContextInterface\n)\n\nexport const useSegmentedControlContext = () => {\n  const context = useContext(SegmentedControlContext)\n\n  if (!context) {\n    throw Error('useSegmentedControlContext must be used within a SegmentedControlContext Provider')\n  }\n\n  return context\n}\n","import { RadioGroup } from '@base-ui/react/radio-group'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Children, type ComponentProps, isValidElement, Ref, useRef, useState } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\nimport { rootStyles } from './SegmentedControl.styles'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlProps\n  extends Omit<ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'>,\n    SegmentedControlStylesProps {\n  /**\n   * The controlled selected value.\n   */\n  value?: string\n  /**\n   * The uncontrolled default selected value.\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nconst getFirstItemValue = (children: React.ReactNode): string | null => {\n  let firstValue: string | null = null\n\n  Children.forEach(children, child => {\n    if (firstValue !== null) return\n    if (isValidElement(child) && typeof (child.props as { value?: string }).value === 'string') {\n      firstValue = (child.props as { value: string }).value\n    }\n  })\n\n  return firstValue\n}\n\nexport const SegmentedControl = ({\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const mergedRef = useMergeRefs(containerRef, ref)\n\n  const firstValue = getFirstItemValue(children)\n\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? firstValue\n  )\n  const checkedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValue: unknown) => {\n    const next = newValue as string\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const { labelId, description, isRequired, isInvalid, name } = useFormFieldControl()\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        checkedValue,\n        containerRef,\n      }}\n    >\n      <RadioGroup\n        ref={mergedRef}\n        value={isControlled ? value : undefined}\n        defaultValue={!isControlled ? (defaultValue ?? firstValue ?? undefined) : undefined}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        aria-required={isRequired || undefined}\n        aria-invalid={isInvalid || undefined}\n        name={name}\n        {...rest}\n      >\n        {children}\n      </RadioGroup>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nSegmentedControl.displayName = 'SegmentedControl'\n","import { type ComponentProps, type CSSProperties, Ref, useEffect, useState } from 'react'\n\nimport { indicatorStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\ninterface IndicatorRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SegmentedControlIndicator = ({\n  className,\n  ref,\n  ...rest\n}: SegmentedControlIndicatorProps) => {\n  const { checkedValue, containerRef } = useSegmentedControlContext()\n  const [rect, setRect] = useState<IndicatorRect | null>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = checkedValue\n      ? container.querySelector<HTMLElement>(`[data-value=\"${checkedValue}\"]`)\n      : null\n\n    if (!selectedItem) {\n      setRect(null)\n\n      return\n    }\n\n    const containerRect = container.getBoundingClientRect()\n    const itemRect = selectedItem.getBoundingClientRect()\n\n    const rootBorderWidth = 1\n\n    setRect({\n      left: itemRect.left - containerRect.left - rootBorderWidth,\n      top: itemRect.top - containerRect.top - rootBorderWidth,\n      width: itemRect.width,\n      height: itemRect.height,\n    })\n  }, [checkedValue, containerRef])\n\n  if (!rect) return null\n\n  const style: CSSProperties = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n    height: rect.height,\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"segmented-control-indicator\"\n      aria-hidden\n      className={indicatorStyles({ className })}\n      style={style}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator'\n","import { Radio } from '@base-ui/react/radio'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\n\nexport interface SegmentedControlItemProps\n  extends Omit<ComponentProps<typeof Radio.Root>, 'value'> {\n  /**\n   * A unique value that identifies this item within the segmented control.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with this item.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  return (\n    <Radio.Root\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ className })}\n      {...rest}\n    >\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']\"\n      >\n        {children}\n      </span>\n    </Radio.Root>\n  )\n}\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item'\n","import { SegmentedControl as Root } from './SegmentedControl'\nimport { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator'\nimport { SegmentedControlItem as Item } from './SegmentedControlItem'\n\nexport const SegmentedControl: typeof Root & {\n  Item: typeof Item\n  Indicator: typeof Indicator\n} = Object.assign(Root, {\n  Item,\n  Indicator,\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\nItem.displayName = 'SegmentedControl.Item'\nIndicator.displayName = 'SegmentedControl.Indicator'\n\nexport type { SegmentedControlProps } from './SegmentedControl'\nexport type { SegmentedControlItemProps } from './SegmentedControlItem'\nexport type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator'\n"],"names":["rootStyles","cva","itemStyles","indicatorStyles","SegmentedControlContext","createContext","useSegmentedControlContext","context","useContext","getFirstItemValue","children","firstValue","Children","child","isValidElement","SegmentedControl","value","defaultValue","onValueChange","className","ref","rest","containerRef","useRef","mergedRef","useMergeRefs","isControlled","internalValue","setInternalValue","useState","checkedValue","handleValueChange","newValue","next","labelId","description","isRequired","isInvalid","name","useFormFieldControl","jsx","RadioGroup","SegmentedControlIndicator","rect","setRect","useEffect","container","selectedItem","containerRect","itemRect","rootBorderWidth","style","SegmentedControlItem","disabled","jsxs","Radio","Root","Item","Indicator"],"mappings":"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"}

package/dist/segmented-control/index.mjs

@@ -0,0 +1,173 @@
+import { jsx as f, jsxs as j } from "react/jsx-runtime";
+import { RadioGroup as E } from "@base-ui/react/radio-group";
+import { useFormFieldControl as q } from "@spark-ui/components/form-field";
+import { useMergeRefs as z } from "@spark-ui/hooks/use-merge-refs";
+import { createContext as B, useContext as F, useRef as P, useState as b, Children as $, isValidElement as G, useEffect as M } from "react";
+import { cva as p } from "class-variance-authority";
+import { Radio as O } from "@base-ui/react/radio";
+const W = p([
+  "default:self-start",
+  "group inline-grid grid-flow-col auto-cols-fr",
+  "relative items-stretch min-w-max",
+  "rounded-xl p-sm",
+  "bg-surface border-sm border-outline"
+]), A = p([
+  "relative z-raised min-h-sz-44 focus-visible:outline-none",
+  "flex flex-none items-center justify-center flex-col",
+  "default:px-lg default:py-md",
+  "rounded-[20px]",
+  "cursor-pointer select-none",
+  "font-medium",
+  "transition-colors duration-150",
+  "outline-none",
+  "focus-visible:u-outline",
+  "data-disabled:cursor-not-allowed data-disabled:opacity-dim-3",
+  "data-checked:text-on-support-container",
+  "data-checked:font-bold"
+]), D = p([
+  "absolute z-base",
+  "rounded-[20px]",
+  "bg-support-container border-md border-support",
+  "group-has-focus-visible:border-focus",
+  "transition-[left,top,width,height] duration-200 ease-in-out",
+  "pointer-events-none"
+]), v = B(
+  {}
+), H = () => {
+  const e = F(v);
+  if (!e)
+    throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");
+  return e;
+}, J = (e) => {
+  let t = null;
+  return $.forEach(e, (o) => {
+    t === null && G(o) && typeof o.props.value == "string" && (t = o.props.value);
+  }), t;
+}, x = ({
+  value: e,
+  defaultValue: t,
+  onValueChange: o,
+  className: r,
+  children: i,
+  ref: n,
+  ...c
+}) => {
+  const u = P(null), l = z(u, n), d = J(i), s = e !== void 0, [a, m] = b(
+    () => t ?? d
+  ), S = s ? e ?? null : a, y = (k) => {
+    const C = k;
+    s || m(C), o?.(C);
+  }, { labelId: R, description: I, isRequired: w, isInvalid: N, name: V } = q();
+  return /* @__PURE__ */ f(
+    v.Provider,
+    {
+      value: {
+        checkedValue: S,
+        containerRef: u
+      },
+      children: /* @__PURE__ */ f(
+        E,
+        {
+          ref: l,
+          value: s ? e : void 0,
+          defaultValue: s ? void 0 : t ?? d ?? void 0,
+          onValueChange: y,
+          "data-spark-component": "segmented-control",
+          className: W({ className: r }),
+          "aria-labelledby": R,
+          "aria-describedby": I,
+          "aria-required": w || void 0,
+          "aria-invalid": N || void 0,
+          name: V,
+          ...c,
+          children: i
+        }
+      )
+    }
+  );
+};
+x.displayName = "SegmentedControl";
+const g = ({
+  className: e,
+  ref: t,
+  ...o
+}) => {
+  const { checkedValue: r, containerRef: i } = H(), [n, c] = b(null);
+  if (M(() => {
+    const l = i.current;
+    if (!l)
+      return;
+    const d = r ? l.querySelector(`[data-value="${r}"]`) : null;
+    if (!d) {
+      c(null);
+      return;
+    }
+    const s = l.getBoundingClientRect(), a = d.getBoundingClientRect(), m = 1;
+    c({
+      left: a.left - s.left - m,
+      top: a.top - s.top - m,
+      width: a.width,
+      height: a.height
+    });
+  }, [r, i]), !n) return null;
+  const u = {
+    left: n.left,
+    top: n.top,
+    width: n.width,
+    height: n.height
+  };
+  return /* @__PURE__ */ f(
+    "span",
+    {
+      ref: t,
+      "data-spark-component": "segmented-control-indicator",
+      "aria-hidden": !0,
+      className: D({ className: e }),
+      style: u,
+      ...o
+    }
+  );
+};
+g.displayName = "SegmentedControl.Indicator";
+const h = ({
+  value: e,
+  disabled: t = !1,
+  children: o,
+  className: r,
+  ref: i,
+  ...n
+}) => /* @__PURE__ */ j(
+  O.Root,
+  {
+    ref: i,
+    "data-spark-component": "segmented-control-item",
+    "data-value": e,
+    value: e,
+    disabled: t,
+    className: A({ className: r }),
+    ...n,
+    children: [
+      o,
+      /* @__PURE__ */ f(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']",
+          children: o
+        }
+      )
+    ]
+  }
+);
+h.displayName = "SegmentedControl.Item";
+const K = Object.assign(x, {
+  Item: h,
+  Indicator: g
+});
+K.displayName = "SegmentedControl";
+h.displayName = "SegmentedControl.Item";
+g.displayName = "SegmentedControl.Indicator";
+export {
+  K as SegmentedControl
+};
+//# sourceMappingURL=index.mjs.map

package/dist/segmented-control/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/segmented-control/SegmentedControl.styles.ts","../../src/segmented-control/SegmentedControlContext.tsx","../../src/segmented-control/SegmentedControl.tsx","../../src/segmented-control/SegmentedControlIndicator.tsx","../../src/segmented-control/SegmentedControlItem.tsx","../../src/segmented-control/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'default:self-start',\n  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl p-sm',\n  'bg-surface border-sm border-outline',\n])\n\nexport const itemStyles = cva([\n  'relative z-raised min-h-sz-44 focus-visible:outline-none',\n  'flex flex-none items-center justify-center flex-col',\n  'default:px-lg default:py-md',\n  'rounded-[20px]',\n  'cursor-pointer select-none',\n  'font-medium',\n  'transition-colors duration-150',\n  'outline-none',\n  'focus-visible:u-outline',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n  'data-checked:text-on-support-container',\n  'data-checked:font-bold',\n])\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-[20px]',\n  'bg-support-container border-md border-support',\n  'group-has-focus-visible:border-focus',\n  'transition-[left,top,width,height] duration-200 ease-in-out',\n  'pointer-events-none',\n])\n\nexport type SegmentedControlStylesProps = VariantProps<typeof itemStyles>\n","import { createContext, RefObject, useContext } from 'react'\n\nexport interface SegmentedControlContextInterface {\n  checkedValue: string | null\n  containerRef: RefObject<HTMLDivElement | null>\n}\n\nexport const SegmentedControlContext = createContext<SegmentedControlContextInterface>(\n  {} as SegmentedControlContextInterface\n)\n\nexport const useSegmentedControlContext = () => {\n  const context = useContext(SegmentedControlContext)\n\n  if (!context) {\n    throw Error('useSegmentedControlContext must be used within a SegmentedControlContext Provider')\n  }\n\n  return context\n}\n","import { RadioGroup } from '@base-ui/react/radio-group'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Children, type ComponentProps, isValidElement, Ref, useRef, useState } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\nimport { rootStyles } from './SegmentedControl.styles'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlProps\n  extends Omit<ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'>,\n    SegmentedControlStylesProps {\n  /**\n   * The controlled selected value.\n   */\n  value?: string\n  /**\n   * The uncontrolled default selected value.\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nconst getFirstItemValue = (children: React.ReactNode): string | null => {\n  let firstValue: string | null = null\n\n  Children.forEach(children, child => {\n    if (firstValue !== null) return\n    if (isValidElement(child) && typeof (child.props as { value?: string }).value === 'string') {\n      firstValue = (child.props as { value: string }).value\n    }\n  })\n\n  return firstValue\n}\n\nexport const SegmentedControl = ({\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const mergedRef = useMergeRefs(containerRef, ref)\n\n  const firstValue = getFirstItemValue(children)\n\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? firstValue\n  )\n  const checkedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValue: unknown) => {\n    const next = newValue as string\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const { labelId, description, isRequired, isInvalid, name } = useFormFieldControl()\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        checkedValue,\n        containerRef,\n      }}\n    >\n      <RadioGroup\n        ref={mergedRef}\n        value={isControlled ? value : undefined}\n        defaultValue={!isControlled ? (defaultValue ?? firstValue ?? undefined) : undefined}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        aria-required={isRequired || undefined}\n        aria-invalid={isInvalid || undefined}\n        name={name}\n        {...rest}\n      >\n        {children}\n      </RadioGroup>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nSegmentedControl.displayName = 'SegmentedControl'\n","import { type ComponentProps, type CSSProperties, Ref, useEffect, useState } from 'react'\n\nimport { indicatorStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\ninterface IndicatorRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SegmentedControlIndicator = ({\n  className,\n  ref,\n  ...rest\n}: SegmentedControlIndicatorProps) => {\n  const { checkedValue, containerRef } = useSegmentedControlContext()\n  const [rect, setRect] = useState<IndicatorRect | null>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = checkedValue\n      ? container.querySelector<HTMLElement>(`[data-value=\"${checkedValue}\"]`)\n      : null\n\n    if (!selectedItem) {\n      setRect(null)\n\n      return\n    }\n\n    const containerRect = container.getBoundingClientRect()\n    const itemRect = selectedItem.getBoundingClientRect()\n\n    const rootBorderWidth = 1\n\n    setRect({\n      left: itemRect.left - containerRect.left - rootBorderWidth,\n      top: itemRect.top - containerRect.top - rootBorderWidth,\n      width: itemRect.width,\n      height: itemRect.height,\n    })\n  }, [checkedValue, containerRef])\n\n  if (!rect) return null\n\n  const style: CSSProperties = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n    height: rect.height,\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"segmented-control-indicator\"\n      aria-hidden\n      className={indicatorStyles({ className })}\n      style={style}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator'\n","import { Radio } from '@base-ui/react/radio'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\n\nexport interface SegmentedControlItemProps\n  extends Omit<ComponentProps<typeof Radio.Root>, 'value'> {\n  /**\n   * A unique value that identifies this item within the segmented control.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with this item.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  return (\n    <Radio.Root\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ className })}\n      {...rest}\n    >\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']\"\n      >\n        {children}\n      </span>\n    </Radio.Root>\n  )\n}\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item'\n","import { SegmentedControl as Root } from './SegmentedControl'\nimport { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator'\nimport { SegmentedControlItem as Item } from './SegmentedControlItem'\n\nexport const SegmentedControl: typeof Root & {\n  Item: typeof Item\n  Indicator: typeof Indicator\n} = Object.assign(Root, {\n  Item,\n  Indicator,\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\nItem.displayName = 'SegmentedControl.Item'\nIndicator.displayName = 'SegmentedControl.Indicator'\n\nexport type { SegmentedControlProps } from './SegmentedControl'\nexport type { SegmentedControlItemProps } from './SegmentedControlItem'\nexport type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator'\n"],"names":["rootStyles","cva","itemStyles","indicatorStyles","SegmentedControlContext","createContext","useSegmentedControlContext","context","useContext","getFirstItemValue","children","firstValue","Children","child","isValidElement","SegmentedControl","value","defaultValue","onValueChange","className","ref","rest","containerRef","useRef","mergedRef","useMergeRefs","isControlled","internalValue","setInternalValue","useState","checkedValue","handleValueChange","newValue","next","labelId","description","isRequired","isInvalid","name","useFormFieldControl","jsx","RadioGroup","SegmentedControlIndicator","rect","setRect","useEffect","container","selectedItem","containerRect","itemRect","rootBorderWidth","style","SegmentedControlItem","disabled","jsxs","Radio","Root","Item","Indicator"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.0.1",
+  "version": "17.1.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -54,9 +54,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^17.0.1",
-    "@spark-ui/icons": "^17.0.1",
-    "@spark-ui/internal-utils": "^17.0.1",
+    "@spark-ui/hooks": "^17.1.1",
+    "@spark-ui/icons": "^17.1.1",
+    "@spark-ui/internal-utils": "^17.1.1",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",