@spark-ui/components 17.2.1-beta.1 → 17.2.2

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

@@ -1 +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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"}
+{"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 gap-md',\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  // Avoid layout shift: simulate \"bold\" without changing font metrics.\n  // Apply only to wrapped text nodes (not arbitrary nested JSX like Tag).\n  'data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]',\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, useMemo, 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  const selector = useMemo(\n    () => (checkedValue ? `[data-value=\"${CSS.escape(checkedValue)}\"]` : null),\n    [checkedValue]\n  )\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = selector ? container.querySelector<HTMLElement>(selector) : null\n\n    const update = () => {\n      const currentContainer = containerRef.current\n      if (!currentContainer || !selector) {\n        setRect(null)\n\n        return\n      }\n\n      const currentSelected = currentContainer.querySelector<HTMLElement>(selector)\n      if (!currentSelected) {\n        setRect(null)\n\n        return\n      }\n\n      const containerRect = currentContainer.getBoundingClientRect()\n      const itemRect = currentSelected.getBoundingClientRect()\n\n      // Storybook canvas \"zoom\" can be implemented via `transform: scale()`.\n      // In that case, `getBoundingClientRect()` returns *scaled* values, but CSS positioning/sizing\n      // expects unscaled layout pixels. We infer the scale factor from offset sizes and normalize.\n      const scaleX =\n        currentSelected.offsetWidth > 0 ? itemRect.width / currentSelected.offsetWidth : 1\n      const scaleY =\n        currentSelected.offsetHeight > 0 ? itemRect.height / currentSelected.offsetHeight : 1\n\n      // `getBoundingClientRect()` is border-box; absolute positioning is relative to the padding box.\n      setRect({\n        left: (itemRect.left - containerRect.left) / scaleX - currentContainer.clientLeft,\n        top: (itemRect.top - containerRect.top) / scaleY - currentContainer.clientTop,\n        width: itemRect.width / scaleX,\n        height: itemRect.height / scaleY,\n      })\n    }\n\n    update()\n\n    const ro =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(() => {\n            update()\n          })\n        : null\n\n    ro?.observe(container)\n    if (selectedItem) ro?.observe(selectedItem)\n\n    window.addEventListener('resize', update, { passive: true })\n    window.visualViewport?.addEventListener('resize', update, { passive: true })\n\n    return () => {\n      ro?.disconnect()\n      window.removeEventListener('resize', update)\n      window.visualViewport?.removeEventListener('resize', update)\n    }\n  }, [containerRef, selector])\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 { Children, 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  const content = Children.toArray(children).map((child, index) => {\n    if (typeof child === 'string' || typeof child === 'number') {\n      return (\n        <span key={`text-${index}`} data-spark-segmented-control-text>\n          {child}\n        </span>\n      )\n    }\n\n    return child\n  })\n\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      {content}\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","selector","useMemo","useEffect","container","selectedItem","update","currentContainer","currentSelected","containerRect","itemRect","scaleX","scaleY","ro","style","SegmentedControlItem","disabled","content","index","Radio","Root","Item","Indicator"],"mappings":"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"}

package/dist/segmented-control/index.mjs

@@ -1,19 +1,19 @@
-import { jsx as f, jsxs as j } from "react/jsx-runtime";
+import { jsx as h } 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([
+import { useFormFieldControl as L } from "@spark-ui/components/form-field";
+import { useMergeRefs as q } from "@spark-ui/hooks/use-merge-refs";
+import { createContext as _, useContext as j, useRef as F, useState as R, Children as I, isValidElement as O, useMemo as $, useEffect as B } from "react";
+import { cva as x } from "class-variance-authority";
+import { Radio as H } from "@base-ui/react/radio";
+const M = x([
   "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([
+]), P = x([
   "relative z-raised min-h-sz-44 focus-visible:outline-none",
-  "flex flex-none items-center justify-center flex-col",
+  "flex flex-none items-center justify-center gap-md",
   "default:px-lg default:py-md",
   "rounded-[20px]",
   "cursor-pointer select-none",
@@ -23,151 +23,163 @@ const W = p([
   "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([
+  // Avoid layout shift: simulate "bold" without changing font metrics.
+  // Apply only to wrapped text nodes (not arbitrary nested JSX like Tag).
+  "data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]"
+]), W = x([
   "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(
+]), V = _(
   {}
-), H = () => {
-  const e = F(v);
+), A = () => {
+  const e = j(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 = ({
+}, G = (e) => {
+  let o = null;
+  return I.forEach(e, (n) => {
+    o === null && O(n) && typeof n.props.value == "string" && (o = n.props.value);
+  }), o;
+}, k = ({
   value: e,
-  defaultValue: t,
-  onValueChange: o,
-  className: r,
-  children: i,
-  ref: n,
+  defaultValue: o,
+  onValueChange: n,
+  className: d,
+  children: s,
+  ref: r,
   ...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,
+  const t = F(null), f = q(t, r), p = G(s), u = e !== void 0, [i, g] = R(
+    () => o ?? p
+  ), m = u ? e ?? null : i, a = (N) => {
+    const y = N;
+    u || g(y), n?.(y);
+  }, { labelId: v, description: l, isRequired: C, isInvalid: b, name: z } = L();
+  return /* @__PURE__ */ h(
+    V.Provider,
     {
       value: {
-        checkedValue: S,
-        containerRef: u
+        checkedValue: m,
+        containerRef: t
       },
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ h(
         E,
         {
-          ref: l,
-          value: s ? e : void 0,
-          defaultValue: s ? void 0 : t ?? d ?? void 0,
-          onValueChange: y,
+          ref: f,
+          value: u ? e : void 0,
+          defaultValue: u ? void 0 : o ?? p ?? void 0,
+          onValueChange: a,
           "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,
+          className: M({ className: d }),
+          "aria-labelledby": v,
+          "aria-describedby": l,
+          "aria-required": C || void 0,
+          "aria-invalid": b || void 0,
+          name: z,
           ...c,
-          children: i
+          children: s
         }
       )
     }
   );
 };
-x.displayName = "SegmentedControl";
-const g = ({
+k.displayName = "SegmentedControl";
+const w = ({
   className: e,
-  ref: t,
-  ...o
+  ref: o,
+  ...n
 }) => {
-  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);
+  const { checkedValue: d, containerRef: s } = A(), [r, c] = R(null), t = $(
+    () => d ? `[data-value="${CSS.escape(d)}"]` : null,
+    [d]
+  );
+  if (B(() => {
+    const p = s.current;
+    if (!p)
       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
+    const u = t ? p.querySelector(t) : null, i = () => {
+      const m = s.current;
+      if (!m || !t) {
+        c(null);
+        return;
+      }
+      const a = m.querySelector(t);
+      if (!a) {
+        c(null);
+        return;
+      }
+      const v = m.getBoundingClientRect(), l = a.getBoundingClientRect(), C = a.offsetWidth > 0 ? l.width / a.offsetWidth : 1, b = a.offsetHeight > 0 ? l.height / a.offsetHeight : 1;
+      c({
+        left: (l.left - v.left) / C - m.clientLeft,
+        top: (l.top - v.top) / b - m.clientTop,
+        width: l.width / C,
+        height: l.height / b
+      });
+    };
+    i();
+    const g = typeof ResizeObserver < "u" ? new ResizeObserver(() => {
+      i();
+    }) : null;
+    return g?.observe(p), u && g?.observe(u), window.addEventListener("resize", i, { passive: !0 }), window.visualViewport?.addEventListener("resize", i, { passive: !0 }), () => {
+      g?.disconnect(), window.removeEventListener("resize", i), window.visualViewport?.removeEventListener("resize", i);
+    };
+  }, [s, t]), !r) return null;
+  const f = {
+    left: r.left,
+    top: r.top,
+    width: r.width,
+    height: r.height
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ h(
     "span",
     {
-      ref: t,
+      ref: o,
       "data-spark-component": "segmented-control-indicator",
       "aria-hidden": !0,
-      className: D({ className: e }),
-      style: u,
-      ...o
+      className: W({ className: e }),
+      style: f,
+      ...n
     }
   );
 };
-g.displayName = "SegmentedControl.Indicator";
-const h = ({
+w.displayName = "SegmentedControl.Indicator";
+const S = ({
   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
+  disabled: o = !1,
+  children: n,
+  className: d,
+  ref: s,
+  ...r
+}) => {
+  const c = I.toArray(n).map((t, f) => typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ h("span", { "data-spark-segmented-control-text": !0, children: t }, `text-${f}`) : t);
+  return /* @__PURE__ */ h(
+    H.Root,
+    {
+      ref: s,
+      "data-spark-component": "segmented-control-item",
+      "data-value": e,
+      value: e,
+      disabled: o,
+      className: P({ className: d }),
+      ...r,
+      children: c
+    }
+  );
+};
+S.displayName = "SegmentedControl.Item";
+const T = Object.assign(k, {
+  Item: S,
+  Indicator: w
 });
-K.displayName = "SegmentedControl";
-h.displayName = "SegmentedControl.Item";
-g.displayName = "SegmentedControl.Indicator";
+T.displayName = "SegmentedControl";
+S.displayName = "SegmentedControl.Item";
+w.displayName = "SegmentedControl.Indicator";
 export {
-  K as SegmentedControl
+  T as SegmentedControl
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +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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"}
+{"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 gap-md',\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  // Avoid layout shift: simulate \"bold\" without changing font metrics.\n  // Apply only to wrapped text nodes (not arbitrary nested JSX like Tag).\n  'data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]',\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, useMemo, 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  const selector = useMemo(\n    () => (checkedValue ? `[data-value=\"${CSS.escape(checkedValue)}\"]` : null),\n    [checkedValue]\n  )\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = selector ? container.querySelector<HTMLElement>(selector) : null\n\n    const update = () => {\n      const currentContainer = containerRef.current\n      if (!currentContainer || !selector) {\n        setRect(null)\n\n        return\n      }\n\n      const currentSelected = currentContainer.querySelector<HTMLElement>(selector)\n      if (!currentSelected) {\n        setRect(null)\n\n        return\n      }\n\n      const containerRect = currentContainer.getBoundingClientRect()\n      const itemRect = currentSelected.getBoundingClientRect()\n\n      // Storybook canvas \"zoom\" can be implemented via `transform: scale()`.\n      // In that case, `getBoundingClientRect()` returns *scaled* values, but CSS positioning/sizing\n      // expects unscaled layout pixels. We infer the scale factor from offset sizes and normalize.\n      const scaleX =\n        currentSelected.offsetWidth > 0 ? itemRect.width / currentSelected.offsetWidth : 1\n      const scaleY =\n        currentSelected.offsetHeight > 0 ? itemRect.height / currentSelected.offsetHeight : 1\n\n      // `getBoundingClientRect()` is border-box; absolute positioning is relative to the padding box.\n      setRect({\n        left: (itemRect.left - containerRect.left) / scaleX - currentContainer.clientLeft,\n        top: (itemRect.top - containerRect.top) / scaleY - currentContainer.clientTop,\n        width: itemRect.width / scaleX,\n        height: itemRect.height / scaleY,\n      })\n    }\n\n    update()\n\n    const ro =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(() => {\n            update()\n          })\n        : null\n\n    ro?.observe(container)\n    if (selectedItem) ro?.observe(selectedItem)\n\n    window.addEventListener('resize', update, { passive: true })\n    window.visualViewport?.addEventListener('resize', update, { passive: true })\n\n    return () => {\n      ro?.disconnect()\n      window.removeEventListener('resize', update)\n      window.visualViewport?.removeEventListener('resize', update)\n    }\n  }, [containerRef, selector])\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 { Children, 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  const content = Children.toArray(children).map((child, index) => {\n    if (typeof child === 'string' || typeof child === 'number') {\n      return (\n        <span key={`text-${index}`} data-spark-segmented-control-text>\n          {child}\n        </span>\n      )\n    }\n\n    return child\n  })\n\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      {content}\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","selector","useMemo","useEffect","container","selectedItem","update","currentContainer","currentSelected","containerRect","itemRect","scaleX","scaleY","ro","style","SegmentedControlItem","disabled","content","index","Radio","Root","Item","Indicator"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.2.1-beta.1",
+  "version": "17.2.2",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -44,7 +44,6 @@
     "a11y"
   ],
   "scripts": {
-    "build:tsup": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
     "build": "NODE_OPTIONS='--max-old-space-size=8192' vite build"
   },
   "dependencies": {
@@ -54,9 +53,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.2.1-beta.1",
-    "@spark-ui/icons": "^17.2.1-beta.1",
-    "@spark-ui/internal-utils": "^17.2.1-beta.1",
+    "@spark-ui/hooks": "^17.2.2",
+    "@spark-ui/icons": "^17.2.2",
+    "@spark-ui/internal-utils": "^17.2.2",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",

package/dist/accordion/Accordion.d.ts

@@ -1,27 +0,0 @@
-import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
-import { ComponentProps, Ref } from 'react';
-type ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>;
-export interface AccordionProps extends ExtentedZagInterface {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     */
-    asChild?: boolean;
-    /**
-     * Whether the accordion items are disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether multiple items can be open at the same time.
-     */
-    multiple?: boolean;
-    design?: 'filled' | 'outlined';
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const Accordion: {
-    ({ asChild, children, design, hiddenUntilFound, multiple, className, ref, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const useAccordionContext: () => {
-    design: "filled" | "outlined";
-};
-export {};

package/dist/accordion/AccordionItem.d.ts

@@ -1,12 +0,0 @@
-import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
-import { ComponentProps, Ref } from 'react';
-type ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>;
-export interface AccordionItemProps extends ExtentedZagInterface {
-    asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const Item: {
-    ({ asChild, className, children, ref, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

package/dist/accordion/AccordionItemContent.d.ts

@@ -1,12 +0,0 @@
-import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
-import { ComponentProps, Ref } from 'react';
-type ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>;
-export interface AccordionItemContentProps extends ExtentedZagInterface {
-    asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const ItemContent: {
-    ({ asChild, className, children, ref, ...props }: AccordionItemContentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

package/dist/accordion/AccordionItemHeader.d.ts

@@ -1,9 +0,0 @@
-import { ComponentProps, Ref } from 'react';
-export interface AccordionItemHeaderProps extends ComponentProps<'h3'> {
-    asChild?: boolean;
-    ref?: Ref<HTMLHeadingElement>;
-}
-export declare const ItemHeader: {
-    ({ asChild, children, className, ref, }: AccordionItemHeaderProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/accordion/AccordionItemTrigger.d.ts

@@ -1,12 +0,0 @@
-import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
-import { ComponentProps, Ref } from 'react';
-type ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>;
-export interface AccordionItemTriggerProps extends ExtentedZagInterface {
-    asChild?: boolean;
-    ref?: Ref<HTMLButtonElement>;
-}
-export declare const ItemTrigger: {
-    ({ asChild, children, className, ref, ...props }: AccordionItemTriggerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

package/dist/accordion/index.d.mts

@@ -1,15 +0,0 @@
-import { Accordion as Root } from './Accordion';
-import { Item } from './AccordionItem';
-import { ItemContent } from './AccordionItemContent';
-import { ItemHeader } from './AccordionItemHeader';
-import { ItemTrigger } from './AccordionItemTrigger';
-export declare const Accordion: typeof Root & {
-    Item: typeof Item;
-    ItemHeader: typeof ItemHeader;
-    ItemTrigger: typeof ItemTrigger;
-    ItemContent: typeof ItemContent;
-};
-export { type AccordionProps } from './Accordion';
-export { type AccordionItemHeaderProps } from './AccordionItemHeader';
-export { type AccordionItemContentProps } from './AccordionItemContent';
-export { type AccordionItemTriggerProps } from './AccordionItemTrigger';

package/dist/accordion/index.d.ts

@@ -1,15 +0,0 @@
-import { Accordion as Root } from './Accordion';
-import { Item } from './AccordionItem';
-import { ItemContent } from './AccordionItemContent';
-import { ItemHeader } from './AccordionItemHeader';
-import { ItemTrigger } from './AccordionItemTrigger';
-export declare const Accordion: typeof Root & {
-    Item: typeof Item;
-    ItemHeader: typeof ItemHeader;
-    ItemTrigger: typeof ItemTrigger;
-    ItemContent: typeof ItemContent;
-};
-export { type AccordionProps } from './Accordion';
-export { type AccordionItemHeaderProps } from './AccordionItemHeader';
-export { type AccordionItemContentProps } from './AccordionItemContent';
-export { type AccordionItemTriggerProps } from './AccordionItemTrigger';

package/dist/accordion/useRenderSlot.d.ts

@@ -1,3 +0,0 @@
-export declare function useRenderSlot(asChild: boolean, defaultTag: string): (({ ...props }: {
-    [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element) | undefined;

package/dist/alert-dialog/AlertDialog.d.ts

@@ -1,29 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
-import { ComponentProps, Ref } from 'react';
-export interface AlertDialogProps extends Omit<ComponentProps<typeof BaseAlertDialog.Root>, 'onOpenChange' | 'render'> {
-    /**
-     * Specifies if the dialog is open or not.
-     */
-    open?: boolean;
-    /**
-     * Default open state.
-     */
-    defaultOpen?: boolean;
-    /**
-     * Handler executed on every dialog open state change.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).
-     */
-    withFade?: boolean;
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const AlertDialog: {
-    ({ onOpenChange, withFade, ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};