@spark-ui/components 17.0.1 → 17.1.0

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

@@ -0,0 +1,22 @@
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { ComponentProps, Ref } from 'react';
+import { SegmentedControlStylesProps } from './SegmentedControl.styles';
+export interface SegmentedControlProps extends Omit<ComponentProps<typeof ToggleGroup>, 'multiple' | '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 | null) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const SegmentedControl: {
+    ({ value, defaultValue, onValueChange, size, className, children, ref, ...rest }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const rootStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const itemStyles: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & 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,8 @@
+import { RefObject } from 'react';
+import { SegmentedControlStylesProps } from './SegmentedControl.styles';
+export interface SegmentedControlContextInterface extends Required<Pick<SegmentedControlStylesProps, 'size'>> {
+    pressedValue: 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 { Toggle } from '@base-ui/react/toggle';
+import { ComponentProps, Ref } from 'react';
+export interface SegmentedControlItemProps extends Omit<ComponentProps<typeof Toggle>, '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<HTMLButtonElement>;
+}
+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"),I=require("@base-ui/react/toggle-group"),N=require("@spark-ui/hooks/use-merge-refs"),s=require("react"),f=require("class-variance-authority"),j=require("@base-ui/react/toggle"),q=f.cva(["group inline-grid grid-flow-col auto-cols-fr","relative items-stretch min-w-max","rounded-xl","bg-surface border-md border-outline","p-sz-2"]),E=f.cva(["relative z-raised min-h-sz-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset","flex flex-none items-center justify-center flex-col","px-lg","rounded-xl","cursor-pointer select-none","font-medium","transition-colors duration-150","outline-none","focus-visible:u-outline","disabled:cursor-not-allowed disabled:opacity-dim-3","not-disabled:hover:text-on-surface","aria-pressed:text-on-support-container","aria-pressed:font-bold"],{variants:{size:{sm:["h-sz-32 min-w-sz-32 text-caption"],md:["h-sz-36 min-w-sz-36 text-body-2"],lg:["h-sz-40 min-w-sz-40 text-body-1"]}},defaultVariants:{size:"md"}}),k=f.cva(["absolute z-base","rounded-xl","bg-support-container border-md border-support","transition-[left,top,width,height] duration-200 ease-in-out","pointer-events-none"]),b=s.createContext({}),v=()=>{const e=s.useContext(b);if(!e)throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");return e},M=e=>{let o=null;return s.Children.forEach(e,t=>{o===null&&s.isValidElement(t)&&typeof t.props.value=="string"&&(o=t.props.value)}),o},S=({value:e,defaultValue:o,onValueChange:t,size:r="md",className:l,children:n,ref:a,...p})=>{const d=s.useRef(null),[m,g]=s.useState(()=>o??M(n)),i=e!==void 0,c=i?e??null:m,w=V=>{const C=V[0]??null;i||g(C),t?.(C)},z=N.useMergeRefs(d,a),R=c!=null?[c]:[];return u.jsx(b.Provider,{value:{pressedValue:c,containerRef:d,size:r??"md"},children:u.jsx(I.ToggleGroup,{ref:z,multiple:!1,value:R,onValueChange:w,"data-spark-component":"segmented-control",className:q({className:l}),...p,children:n})})};S.displayName="SegmentedControl";const h=({className:e,ref:o,...t})=>{const{pressedValue:r,containerRef:l}=v(),[n,a]=s.useState(null);if(s.useEffect(()=>{const d=l.current;if(!d)return;const m=r?d.querySelector(`[data-value="${r}"]`):null;if(!m){a(null);return}const g=d.getBoundingClientRect(),i=m.getBoundingClientRect(),c=2;a({left:i.left-g.left-c,top:i.top-g.top-c,width:i.width,height:i.height})},[r,l]),!n)return null;const p={left:n.left,top:n.top,width:n.width,height:n.height};return u.jsx("span",{ref:o,"data-spark-component":"segmented-control-indicator","aria-hidden":!0,className:k({className:e}),style:p,...t})};h.displayName="SegmentedControl.Indicator";const x=({value:e,disabled:o=!1,children:t,className:r,ref:l,...n})=>{const{size:a}=v();return u.jsxs(j.Toggle,{ref:l,"data-spark-component":"segmented-control-item","data-value":e,value:e,disabled:o,className:E({size:a,className:r}),...n,children:[t,u.jsx("span",{"aria-hidden":"true",className:"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']",children:t})]})};x.displayName="SegmentedControl.Item";const y=Object.assign(S,{Item:x,Indicator:h});y.displayName="SegmentedControl";x.displayName="SegmentedControl.Item";h.displayName="SegmentedControl.Indicator";exports.SegmentedControl=y;
+//# 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  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl',\n  'bg-surface border-md border-outline',\n  'p-sz-2',\n])\n\nexport const itemStyles = cva(\n  [\n    'relative z-raised min-h-sz-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset',\n    'flex flex-none items-center justify-center flex-col',\n    'px-lg',\n    'rounded-xl',\n    'cursor-pointer select-none',\n    'font-medium',\n    'transition-colors duration-150',\n    'outline-none',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'not-disabled:hover:text-on-surface',\n    'aria-pressed:text-on-support-container',\n    'aria-pressed:font-bold',\n  ],\n  {\n    variants: {\n      /**\n       * Change the size of the segmented control\n       * @default md\n       */\n      size: {\n        sm: ['h-sz-32 min-w-sz-32 text-caption'],\n        md: ['h-sz-36 min-w-sz-36 text-body-2'],\n        lg: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-xl',\n  'bg-support-container border-md border-support',\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\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\n\nexport interface SegmentedControlContextInterface\n  extends Required<Pick<SegmentedControlStylesProps, 'size'>> {\n  pressedValue: 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 { ToggleGroup } from '@base-ui/react/toggle-group'\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<\n      ComponentProps<typeof ToggleGroup>,\n      'multiple' | 'value' | 'defaultValue' | 'onValueChange'\n    >,\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 | null) => 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  size = 'md',\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? getFirstItemValue(children)\n  )\n\n  const isControlled = value !== undefined\n  const pressedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValues: unknown[]) => {\n    const next = (newValues[0] as string) ?? null\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const mergedRef = useMergeRefs(containerRef, ref)\n  const groupValue = pressedValue != null ? [pressedValue] : []\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        pressedValue,\n        containerRef,\n        size: size ?? 'md',\n      }}\n    >\n      <ToggleGroup\n        ref={mergedRef}\n        multiple={false}\n        value={groupValue}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        {...rest}\n      >\n        {children}\n      </ToggleGroup>\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 { pressedValue, 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 = pressedValue\n      ? container.querySelector<HTMLElement>(`[data-value=\"${pressedValue}\"]`)\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 borderWidth = 2\n\n    setRect({\n      left: itemRect.left - containerRect.left - borderWidth,\n      top: itemRect.top - containerRect.top - borderWidth,\n      width: itemRect.width,\n      height: itemRect.height,\n    })\n  }, [pressedValue, 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 { Toggle } from '@base-ui/react/toggle'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlItemProps extends Omit<ComponentProps<typeof Toggle>, '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<HTMLButtonElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  const { size } = useSegmentedControlContext()\n\n  return (\n    <Toggle\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ size, 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    </Toggle>\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","size","className","ref","rest","containerRef","useRef","internalValue","setInternalValue","useState","isControlled","pressedValue","handleValueChange","newValues","next","mergedRef","useMergeRefs","groupValue","jsx","ToggleGroup","SegmentedControlIndicator","rect","setRect","useEffect","container","selectedItem","containerRect","itemRect","borderWidth","style","SegmentedControlItem","disabled","jsxs","Toggle","Root","Item","Indicator"],"mappings":"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"}

package/dist/segmented-control/index.mjs

@@ -0,0 +1,190 @@
+import { jsx as m, jsxs as V } from "react/jsx-runtime";
+import { ToggleGroup as N } from "@base-ui/react/toggle-group";
+import { useMergeRefs as R } from "@spark-ui/hooks/use-merge-refs";
+import { createContext as j, useContext as E, useRef as k, useState as x, Children as B, isValidElement as P, useEffect as T } from "react";
+import { cva as f } from "class-variance-authority";
+import { Toggle as $ } from "@base-ui/react/toggle";
+const q = f([
+  "group inline-grid grid-flow-col auto-cols-fr",
+  "relative items-stretch min-w-max",
+  "rounded-xl",
+  "bg-surface border-md border-outline",
+  "p-sz-2"
+]), F = f(
+  [
+    "relative z-raised min-h-sz-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset",
+    "flex flex-none items-center justify-center flex-col",
+    "px-lg",
+    "rounded-xl",
+    "cursor-pointer select-none",
+    "font-medium",
+    "transition-colors duration-150",
+    "outline-none",
+    "focus-visible:u-outline",
+    "disabled:cursor-not-allowed disabled:opacity-dim-3",
+    "not-disabled:hover:text-on-surface",
+    "aria-pressed:text-on-support-container",
+    "aria-pressed:font-bold"
+  ],
+  {
+    variants: {
+      /**
+       * Change the size of the segmented control
+       * @default md
+       */
+      size: {
+        sm: ["h-sz-32 min-w-sz-32 text-caption"],
+        md: ["h-sz-36 min-w-sz-36 text-body-2"],
+        lg: ["h-sz-40 min-w-sz-40 text-body-1"]
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), G = f([
+  "absolute z-base",
+  "rounded-xl",
+  "bg-support-container border-md border-support",
+  "transition-[left,top,width,height] duration-200 ease-in-out",
+  "pointer-events-none"
+]), b = j(
+  {}
+), v = () => {
+  const e = E(b);
+  if (!e)
+    throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");
+  return e;
+}, M = (e) => {
+  let o = null;
+  return B.forEach(e, (t) => {
+    o === null && P(t) && typeof t.props.value == "string" && (o = t.props.value);
+  }), o;
+}, S = ({
+  value: e,
+  defaultValue: o,
+  onValueChange: t,
+  size: r = "md",
+  className: i,
+  children: n,
+  ref: l,
+  ...p
+}) => {
+  const a = k(null), [c, u] = x(
+    () => o ?? M(n)
+  ), s = e !== void 0, d = s ? e ?? null : c, y = (I) => {
+    const C = I[0] ?? null;
+    s || u(C), t?.(C);
+  }, w = R(a, l), z = d != null ? [d] : [];
+  return /* @__PURE__ */ m(
+    b.Provider,
+    {
+      value: {
+        pressedValue: d,
+        containerRef: a,
+        size: r ?? "md"
+      },
+      children: /* @__PURE__ */ m(
+        N,
+        {
+          ref: w,
+          multiple: !1,
+          value: z,
+          onValueChange: y,
+          "data-spark-component": "segmented-control",
+          className: q({ className: i }),
+          ...p,
+          children: n
+        }
+      )
+    }
+  );
+};
+S.displayName = "SegmentedControl";
+const g = ({
+  className: e,
+  ref: o,
+  ...t
+}) => {
+  const { pressedValue: r, containerRef: i } = v(), [n, l] = x(null);
+  if (T(() => {
+    const a = i.current;
+    if (!a)
+      return;
+    const c = r ? a.querySelector(`[data-value="${r}"]`) : null;
+    if (!c) {
+      l(null);
+      return;
+    }
+    const u = a.getBoundingClientRect(), s = c.getBoundingClientRect(), d = 2;
+    l({
+      left: s.left - u.left - d,
+      top: s.top - u.top - d,
+      width: s.width,
+      height: s.height
+    });
+  }, [r, i]), !n) return null;
+  const p = {
+    left: n.left,
+    top: n.top,
+    width: n.width,
+    height: n.height
+  };
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      ref: o,
+      "data-spark-component": "segmented-control-indicator",
+      "aria-hidden": !0,
+      className: G({ className: e }),
+      style: p,
+      ...t
+    }
+  );
+};
+g.displayName = "SegmentedControl.Indicator";
+const h = ({
+  value: e,
+  disabled: o = !1,
+  children: t,
+  className: r,
+  ref: i,
+  ...n
+}) => {
+  const { size: l } = v();
+  return /* @__PURE__ */ V(
+    $,
+    {
+      ref: i,
+      "data-spark-component": "segmented-control-item",
+      "data-value": e,
+      value: e,
+      disabled: o,
+      className: F({ size: l, className: r }),
+      ...n,
+      children: [
+        t,
+        /* @__PURE__ */ m(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']",
+            children: t
+          }
+        )
+      ]
+    }
+  );
+};
+h.displayName = "SegmentedControl.Item";
+const O = Object.assign(S, {
+  Item: h,
+  Indicator: g
+});
+O.displayName = "SegmentedControl";
+h.displayName = "SegmentedControl.Item";
+g.displayName = "SegmentedControl.Indicator";
+export {
+  O 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  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl',\n  'bg-surface border-md border-outline',\n  'p-sz-2',\n])\n\nexport const itemStyles = cva(\n  [\n    'relative z-raised min-h-sz-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset',\n    'flex flex-none items-center justify-center flex-col',\n    'px-lg',\n    'rounded-xl',\n    'cursor-pointer select-none',\n    'font-medium',\n    'transition-colors duration-150',\n    'outline-none',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'not-disabled:hover:text-on-surface',\n    'aria-pressed:text-on-support-container',\n    'aria-pressed:font-bold',\n  ],\n  {\n    variants: {\n      /**\n       * Change the size of the segmented control\n       * @default md\n       */\n      size: {\n        sm: ['h-sz-32 min-w-sz-32 text-caption'],\n        md: ['h-sz-36 min-w-sz-36 text-body-2'],\n        lg: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-xl',\n  'bg-support-container border-md border-support',\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\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\n\nexport interface SegmentedControlContextInterface\n  extends Required<Pick<SegmentedControlStylesProps, 'size'>> {\n  pressedValue: 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 { ToggleGroup } from '@base-ui/react/toggle-group'\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<\n      ComponentProps<typeof ToggleGroup>,\n      'multiple' | 'value' | 'defaultValue' | 'onValueChange'\n    >,\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 | null) => 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  size = 'md',\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? getFirstItemValue(children)\n  )\n\n  const isControlled = value !== undefined\n  const pressedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValues: unknown[]) => {\n    const next = (newValues[0] as string) ?? null\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const mergedRef = useMergeRefs(containerRef, ref)\n  const groupValue = pressedValue != null ? [pressedValue] : []\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        pressedValue,\n        containerRef,\n        size: size ?? 'md',\n      }}\n    >\n      <ToggleGroup\n        ref={mergedRef}\n        multiple={false}\n        value={groupValue}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        {...rest}\n      >\n        {children}\n      </ToggleGroup>\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 { pressedValue, 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 = pressedValue\n      ? container.querySelector<HTMLElement>(`[data-value=\"${pressedValue}\"]`)\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 borderWidth = 2\n\n    setRect({\n      left: itemRect.left - containerRect.left - borderWidth,\n      top: itemRect.top - containerRect.top - borderWidth,\n      width: itemRect.width,\n      height: itemRect.height,\n    })\n  }, [pressedValue, 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 { Toggle } from '@base-ui/react/toggle'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlItemProps extends Omit<ComponentProps<typeof Toggle>, '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<HTMLButtonElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  const { size } = useSegmentedControlContext()\n\n  return (\n    <Toggle\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ size, 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    </Toggle>\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","size","className","ref","rest","containerRef","useRef","internalValue","setInternalValue","useState","isControlled","pressedValue","handleValueChange","newValues","next","mergedRef","useMergeRefs","groupValue","jsx","ToggleGroup","SegmentedControlIndicator","rect","setRect","useEffect","container","selectedItem","containerRect","itemRect","borderWidth","style","SegmentedControlItem","disabled","jsxs","Toggle","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.0",
   "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.0",
+    "@spark-ui/icons": "^17.1.0",
+    "@spark-ui/internal-utils": "^17.1.0",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",