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

package/dist/radio-group/Radio.d.ts

@@ -1,9 +1,9 @@
 import { Ref } from 'react';
 import { RadioInputProps } from './RadioInput';
 export type RadioProps = RadioInputProps & {
-    ref?: Ref<HTMLElement>;
+    ref?: Ref<HTMLButtonElement>;
 };
 export declare const Radio: {
-    ({ className, children, disabled: disabledProp, ref, ...others }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, id, disabled: disabledProp, ref, ...others }: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/radio-group/RadioGroup.d.ts

@@ -38,6 +38,10 @@ export interface RadioGroupProps extends RadioGroupVariantsProps, Pick<RadioInpu
      * The reading direction of the radio group.
      */
     dir?: 'ltr' | 'rtl';
+    /**
+     * When true, keyboard navigation will loop from last item to first, and vice versa.
+     */
+    loop?: boolean;
     /**
      * When true, the label will be placed on the left side of the Radio
      */
@@ -45,6 +49,6 @@ export interface RadioGroupProps extends RadioGroupVariantsProps, Pick<RadioInpu
     ref?: Ref<HTMLDivElement>;
 }
 export declare const RadioGroup: {
-    ({ orientation, intent, disabled, className, required: requiredProp, reverse, onValueChange: onValueChangeProp, ref, ...others }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ orientation, loop, intent, disabled, className, required: requiredProp, reverse, ref, ...others }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/radio-group/RadioIndicator.d.ts

@@ -3,13 +3,16 @@ import { RadioIndicatorStylesProps } from './RadioIndicator.styles';
 export interface RadioIndicatorProps extends RadioIndicatorStylesProps {
     className?: string;
     /**
-     * Whether to keep the indicator mounted in the DOM when the radio is unchecked.
-     * Useful when controlling animation with React animation libraries.
+     * Change the component to the HTML tag or custom component of the only child.
      */
-    keepMounted?: boolean;
+    asChild?: boolean;
+    /**
+     * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+     */
+    forceMount?: true | undefined;
     ref?: Ref<HTMLSpanElement>;
 }
 export declare const RadioIndicator: {
-    ({ intent, className, keepMounted, ref, ...others }: RadioIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, className, ref, ...others }: RadioIndicatorProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/radio-group/RadioInput.d.ts

@@ -1,9 +1,8 @@
-import { HTMLAttributes, Ref } from 'react';
+import { ButtonHTMLAttributes, Ref } from 'react';
 import { RadioInputVariantsProps } from './RadioInput.styles';
-export interface RadioInputProps extends RadioInputVariantsProps, Omit<HTMLAttributes<HTMLElement>, 'value' | 'onChange'> {
+export interface RadioInputProps extends RadioInputVariantsProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
     /**
      * Change the component to the HTML tag or custom component of the only child.
-     * Uses Base UI's render prop internally to merge behaviour into the child element.
      */
     asChild?: boolean;
     /**
@@ -18,20 +17,9 @@ export interface RadioInputProps extends RadioInputVariantsProps, Omit<HTMLAttri
      * When true, indicates that the user must check the radio item before the owning form can be submitted.
      */
     required?: boolean;
-    /**
-     * Ref forwarded to the hidden `<input type="radio">` rendered by Base UI.
-     * Useful for programmatic activation (e.g. clicking from an associated label span).
-     */
-    inputRef?: Ref<HTMLInputElement>;
-    ref?: Ref<HTMLElement>;
-    /**
-     * When true, the visual radio input (outer ring and inner dot) is visually hidden but remains
-     * accessible in the DOM. Useful for custom radio appearances where only the label matters visually.
-     * @default false
-     */
-    hideInput?: boolean;
+    ref?: Ref<HTMLButtonElement>;
 }
 export declare const RadioInput: {
-    ({ intent: intentProp, className, asChild, children, inputRef, hideInput, ref, ...others }: RadioInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent: intentProp, className, ref, ...others }: RadioInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/radio-group/RadioLabel.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { RadioLabelStylesProps } from './RadioLabel.styles';
+export interface RadioLabelProps extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * The id of the element the label is associated with.
+     */
+    htmlFor?: string;
+    /**
+     * When true, prevents the user from interacting with the radio item.
+     */
+    disabled?: boolean;
+}
+export declare const RadioLabel: {
+    ({ disabled, ...others }: RadioLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/radio-group/RadioLabel.styles.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const radioLabelStyles: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>;

package/dist/radio-group/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("class-variance-authority"),f=require("react"),F=require("../label/index.js"),v=require("@base-ui/react/radio"),R=require("@spark-ui/components/form-field"),x=require("@spark-ui/internal-utils"),V=require("@base-ui/react/radio-group"),k=f.createContext(null),C=()=>{const e=f.useContext(k);if(!e)throw Error("useRadioGroup must be used within a RadioGroup provider");return e},z=u.cva(["relative block","size-3/5","after:absolute","after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2","after:h-0","after:w-0","after:block","after:rounded-[50%]","after:content-['']","after:transition-all","data-checked:after:size-full"],{variants:{intent:x.makeVariants({main:["after:bg-main"],support:["after:bg-support"],accent:["after:bg-accent"],neutral:["after:bg-neutral"],success:["after:bg-success"],alert:["after:bg-alert"],error:["after:bg-error"],info:["after:bg-info"]})},defaultVariants:{intent:"support"}}),y=({intent:e,className:t,keepMounted:r,ref:n,...o})=>a.jsx(v.Radio.Indicator,{ref:n,keepMounted:r,className:z({intent:e,className:t}),...o});y.displayName="RadioGroup.RadioIndicator";const S=u.cva(["flex shrink-0 items-center justify-center","rounded-full","border-md","outline-hidden","hover:ring-4","focus-visible:u-outline","data-disabled:cursor-not-allowed data-disabled:border-outline/dim-2 data-disabled:hover:ring-transparent","u-shadow-border-transition","size-sz-24"],{variants:{intent:x.makeVariants({main:["border-outline","data-checked:border-main","hover:ring-main-container"],support:["border-outline","data-checked:border-support","hover:ring-support-container"],accent:["border-outline","data-checked:border-accent","hover:ring-accent-container"],neutral:["border-outline","data-checked:border-neutral","hover:ring-neutral-container"],info:["border-info","data-checked:border-info","hover:ring-info-container"],success:["border-success","data-checked:border-success","hover:ring-success-container"],alert:["border-alert","data-checked:border-alert","hover:ring-alert-container"],error:["border-error","data-checked:border-error","hover:ring-error-container"]})},defaultVariants:{intent:"support"}}),G=({intent:e,className:t,asChild:r,children:n,inputRef:o,hideInput:i=!1,ref:s,...c})=>{const{state:l}=R.useFormFieldControl(),d=l??e;return a.jsx(v.Radio.Root,{"data-spark-component":"radio-input",ref:s,inputRef:o,render:r?n:void 0,className:i?"sr-only":S({intent:d,className:t}),...c,children:!r&&!i&&a.jsx(y,{intent:d,keepMounted:!0})})};G.displayName="RadioGroup.RadioInput";const L=":radio",g=({className:e,children:t,disabled:r,ref:n,...o})=>{const i=`${L}-label-${f.useId()}`,{intent:s,disabled:c,reverse:l}=C(),d=r||c,p=t&&a.jsx(F.Label,{"data-spark-component":"radio-label",id:i,className:u.cx("grow",d?"text-neutral/dim-2 cursor-not-allowed":"cursor-pointer"),children:t}),b=a.jsx(G,{ref:n,intent:s,"aria-labelledby":t?i:void 0,...o,disabled:r}),m=l?a.jsxs(a.Fragment,{children:[p,b]}):a.jsxs(a.Fragment,{children:[b,p]});return a.jsx("span",{className:u.cx("gap-md text-body-1 flex items-start",e),children:m})};g.displayName="RadioGroup.Radio";const M=u.cva(["flex"],{variants:{orientation:{vertical:["flex-col","gap-lg"],horizontal:["flex-row","gap-xl"]}}}),$=({intent:e,disabled:t,reverse:r,children:n})=>{const o=f.useMemo(()=>({intent:e,disabled:t,reverse:r}),[e,t,r]);return a.jsx(k.Provider,{value:o,children:n})},j=({orientation:e="vertical",intent:t="support",disabled:r,className:n,required:o,reverse:i=!1,onValueChange:s,ref:c,...l})=>{const{labelId:d,isInvalid:p,isRequired:b,description:m,name:q}=R.useFormFieldControl(),h=o!==void 0?o:b,N=s?w=>s(w):void 0;return a.jsx($,{reverse:i,intent:t,disabled:r,children:a.jsx(V.RadioGroup,{"data-spark-component":"radio-group",className:M({orientation:e,className:n}),name:q,ref:c,disabled:r,required:h,onValueChange:N,"aria-orientation":e,"aria-labelledby":d,"aria-invalid":p,"aria-required":h,"aria-describedby":m,...l})})};j.displayName="RadioGroup";const I=Object.assign(j,{Radio:g});I.displayName="RadioGroup";g.displayName="RadioGroup.Radio";exports.RadioGroup=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("class-variance-authority"),s=require("react"),G=require("@spark-ui/components/form-field"),b=require("radix-ui"),y=require("@spark-ui/internal-utils"),k=s.createContext(null),w=()=>{const e=s.useContext(k);if(!e)throw Error("useRadioGroup must be used within a RadioGroup provider");return e},V=d.cva(["relative block","size-3/5","after:absolute","after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2","after:h-0","after:w-0","after:block","after:rounded-[50%]","after:content-['']","after:transition-all","data-[state=checked]:after:size-full"],{variants:{intent:y.makeVariants({main:["after:bg-main"],support:["after:bg-support"],accent:["after:bg-accent"],neutral:["after:bg-neutral"],success:["after:bg-success"],alert:["after:bg-alert"],error:["after:bg-error"],info:["after:bg-info"]})},defaultVariants:{intent:"support"}}),I=({intent:e,className:r,ref:t,...o})=>a.jsx(b.RadioGroup.Indicator,{ref:t,className:V({intent:e,className:r}),...o});I.displayName="RadioGroup.RadioIndicator";const L=d.cva(["flex shrink-0 items-center justify-center","rounded-full","border-md","outline-hidden","hover:ring-4","focus-visible:u-outline","disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent","u-shadow-border-transition","size-sz-24"],{variants:{intent:y.makeVariants({main:["border-outline","data-[state=checked]:border-main","hover:ring-main-container"],support:["border-outline","data-[state=checked]:border-support","hover:ring-support-container"],accent:["border-outline","data-[state=checked]:border-accent","hover:ring-accent-container"],neutral:["border-outline","data-[state=checked]:border-neutral","hover:ring-neutral-container"],info:["border-info","data-[state=checked]:border-info","hover:ring-info-container"],success:["border-success","data-[state=checked]:border-success","hover:ring-success-container"],alert:["border-alert","data-[state=checked]:border-alert","hover:ring-alert-container"],error:["border-error","data-[state=checked]:border-error","hover:ring-error-container"]})},defaultVariants:{intent:"support"}}),j=({intent:e,className:r,ref:t,...o})=>{const{state:n}=G.useFormFieldControl(),i=n??e;return a.jsx(b.RadioGroup.RadioGroupItem,{"data-spark-component":"radio-input",ref:t,className:L({intent:i,className:r}),...o,children:a.jsx(I,{intent:i,forceMount:!0})})};j.displayName="RadioGroup.RadioInput";const z=d.cva("grow",{variants:{disabled:{true:["text-neutral/dim-2","cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),N=({disabled:e,...r})=>a.jsx(b.Label.Root,{"data-spark-component":"radio-label",className:z({disabled:e}),...r});N.displayName="RadioGroup.RadioLabel";const x=":radio",v=({className:e,children:r,id:t,disabled:o,ref:n,...i})=>{const c=`${x}-input-${s.useId()}`,l=`${x}-label-${s.useId()}`,{intent:f,disabled:m,reverse:R}=w(),u=r&&a.jsx(N,{disabled:o||m,htmlFor:t||c,id:l,children:r}),p=a.jsx(j,{ref:n,id:t||c,intent:f,"aria-labelledby":r?l:void 0,...i,disabled:o}),h=R?a.jsxs(a.Fragment,{children:[u,p]}):a.jsxs(a.Fragment,{children:[p,u]});return a.jsx("span",{className:d.cx("gap-md text-body-1 flex items-start",e),children:h})};v.displayName="RadioGroup.Radio";const C=d.cva(["flex"],{variants:{orientation:{vertical:["flex-col","gap-lg"],horizontal:["flex-row","gap-xl"]}}}),S=({intent:e,disabled:r,reverse:t,children:o})=>{const n=s.useMemo(()=>({intent:e,disabled:r,reverse:t}),[e,r,t]);return a.jsx(k.Provider,{value:n,children:o})},q=({orientation:e="vertical",loop:r=!0,intent:t="support",disabled:o,className:n,required:i,reverse:c=!1,ref:l,...f})=>{const{labelId:m,isInvalid:R,isRequired:u,description:p,name:h}=G.useFormFieldControl(),g=i!==void 0?i:u;return a.jsx(S,{reverse:c,intent:t,disabled:o,children:a.jsx(b.RadioGroup.RadioGroup,{"data-spark-component":"radio-group",className:C({orientation:e,className:n}),name:h,ref:l,disabled:o,orientation:e,loop:r,required:g,"aria-labelledby":m,"aria-invalid":R,"aria-required":g,"aria-describedby":p,...f})})};q.displayName="RadioGroup";const F=Object.assign(q,{Radio:v});F.displayName="RadioGroup";v.displayName="RadioGroup.Radio";exports.RadioGroup=F;
 //# sourceMappingURL=index.js.map

package/dist/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-checked:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { Radio } from '@base-ui/react/radio'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Whether to keep the indicator mounted in the DOM when the radio is unchecked.\n   * Useful when controlling animation with React animation libraries.\n   */\n  keepMounted?: boolean\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({\n  intent,\n  className,\n  keepMounted,\n  ref,\n  ...others\n}: RadioIndicatorProps) => {\n  return (\n    <Radio.Indicator\n      ref={ref}\n      keepMounted={keepMounted}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'data-disabled:cursor-not-allowed data-disabled:border-outline/dim-2 data-disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-checked:border-main', 'hover:ring-main-container'],\n        support: ['border-outline', 'data-checked:border-support', 'hover:ring-support-container'],\n        accent: ['border-outline', 'data-checked:border-accent', 'hover:ring-accent-container'],\n        neutral: ['border-outline', 'data-checked:border-neutral', 'hover:ring-neutral-container'],\n        info: ['border-info', 'data-checked:border-info', 'hover:ring-info-container'],\n        success: ['border-success', 'data-checked:border-success', 'hover:ring-success-container'],\n        alert: ['border-alert', 'data-checked:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-checked:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { Radio } from '@base-ui/react/radio'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { HTMLAttributes, ReactElement, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends RadioInputVariantsProps,\n    Omit<HTMLAttributes<HTMLElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Uses Base UI's render prop internally to merge behaviour into the child element.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * Ref forwarded to the hidden `<input type=\"radio\">` rendered by Base UI.\n   * Useful for programmatic activation (e.g. clicking from an associated label span).\n   */\n  inputRef?: Ref<HTMLInputElement>\n  ref?: Ref<HTMLElement>\n  /**\n   * When true, the visual radio input (outer ring and inner dot) is visually hidden but remains\n   * accessible in the DOM. Useful for custom radio appearances where only the label matters visually.\n   * @default false\n   */\n  hideInput?: boolean\n}\n\nexport const RadioInput = ({\n  intent: intentProp,\n  className,\n  asChild,\n  children,\n  inputRef,\n  hideInput = false,\n  ref,\n  ...others\n}: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <Radio.Root\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      inputRef={inputRef}\n      render={asChild ? (children as ReactElement) : undefined}\n      className={hideInput ? 'sr-only' : radioInputVariants({ intent, className })}\n      {...others}\n    >\n      {!asChild && !hideInput && <RadioIndicator intent={intent} keepMounted />}\n    </Radio.Root>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { Label } from '../label'\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n  className,\n  children,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const isDisabled = disabledProp || disabled\n\n  const radioLabel = children && (\n    <Label\n      data-spark-component=\"radio-label\"\n      id={innerLabelId}\n      className={cx(\n        'grow',\n        isDisabled ? 'text-neutral/dim-2 cursor-not-allowed' : 'cursor-pointer'\n      )}\n    >\n      {children}\n    </Label>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>,\n    Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  onValueChange: onValueChangeProp,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  const handleValueChange = onValueChangeProp\n    ? (value: unknown) => onValueChangeProp(value as string)\n    : undefined\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <BaseUIRadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        required={required}\n        onValueChange={handleValueChange}\n        aria-orientation={orientation}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"names":["RadioGroupContext","createContext","useRadioGroup","context","useContext","radioIndicatorStyles","cva","makeVariants","RadioIndicator","intent","className","keepMounted","ref","others","jsx","Radio","radioInputVariants","RadioInput","intentProp","asChild","children","inputRef","hideInput","state","useFormFieldControl","ID_PREFIX","disabledProp","innerLabelId","useId","disabled","reverse","isDisabled","radioLabel","Label","cx","radioInput","content","jsxs","Fragment","radioGroupStyles","RadioGroupProvider","value","useMemo","RadioGroup","orientation","requiredProp","onValueChangeProp","labelId","isInvalid","isRequired","description","name","required","handleValueChange","BaseUIRadioGroup","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps,\n    PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>,\n    Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"names":["RadioGroupContext","createContext","useRadioGroup","context","useContext","radioIndicatorStyles","cva","makeVariants","RadioIndicator","intent","className","ref","others","jsx","RadixRadioGroup","radioInputVariants","RadioInput","intentProp","state","useFormFieldControl","radioLabelStyles","RadioLabel","disabled","Label","ID_PREFIX","Radio","children","id","disabledProp","innerId","useId","innerLabelId","reverse","radioLabel","radioInput","content","jsxs","Fragment","cx","radioGroupStyles","RadioGroupProvider","value","useMemo","RadioGroup","orientation","loop","requiredProp","labelId","isInvalid","isRequired","description","name","required","Root"],"mappings":"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"}

package/dist/radio-group/index.mjs

@@ -1,17 +1,15 @@
-import { jsx as n, jsxs as g, Fragment as v } from "react/jsx-runtime";
-import { cva as f, cx as R } from "class-variance-authority";
-import { createContext as $, useContext as j, useId as F, useMemo as q } from "react";
-import { Label as D } from "../label/index.mjs";
-import { Radio as k } from "@base-ui/react/radio";
-import { useFormFieldControl as x } from "@spark-ui/components/form-field";
-import { makeVariants as G } from "@spark-ui/internal-utils";
-import { RadioGroup as L } from "@base-ui/react/radio-group";
-const y = $(null), E = () => {
-  const r = j(y);
+import { jsx as o, jsxs as g, Fragment as G } from "react/jsx-runtime";
+import { cva as u, cx as F } from "class-variance-authority";
+import { createContext as V, useContext as j, useId as x, useMemo as C } from "react";
+import { useFormFieldControl as y } from "@spark-ui/components/form-field";
+import { RadioGroup as h, Label as q } from "radix-ui";
+import { makeVariants as I } from "@spark-ui/internal-utils";
+const N = V(null), S = () => {
+  const r = j(N);
   if (!r)
     throw Error("useRadioGroup must be used within a RadioGroup provider");
   return r;
-}, M = f(
+}, E = u(
   [
     "relative block",
     "size-3/5",
@@ -23,11 +21,11 @@ const y = $(null), E = () => {
     "after:rounded-[50%]",
     "after:content-['']",
     "after:transition-all",
-    "data-checked:after:size-full"
+    "data-[state=checked]:after:size-full"
   ],
   {
     variants: {
-      intent: G({
+      intent: I({
         main: ["after:bg-main"],
         support: ["after:bg-support"],
         accent: ["after:bg-accent"],
@@ -42,23 +40,16 @@ const y = $(null), E = () => {
       intent: "support"
     }
   }
-), I = ({
-  intent: r,
-  className: a,
-  keepMounted: e,
-  ref: t,
-  ...o
-}) => /* @__PURE__ */ n(
-  k.Indicator,
+), w = ({ intent: r, className: e, ref: a, ...t }) => /* @__PURE__ */ o(
+  h.Indicator,
   {
-    ref: t,
-    keepMounted: e,
-    className: M({ intent: r, className: a }),
-    ...o
+    ref: a,
+    className: E({ intent: r, className: e }),
+    ...t
   }
 );
-I.displayName = "RadioGroup.RadioIndicator";
-const S = f(
+w.displayName = "RadioGroup.RadioIndicator";
+const M = u(
   [
     "flex shrink-0 items-center justify-center",
     "rounded-full",
@@ -66,7 +57,7 @@ const S = f(
     "outline-hidden",
     "hover:ring-4",
     "focus-visible:u-outline",
-    "data-disabled:cursor-not-allowed data-disabled:border-outline/dim-2 data-disabled:hover:ring-transparent",
+    "disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent",
     "u-shadow-border-transition",
     "size-sz-24"
   ],
@@ -75,136 +66,151 @@ const S = f(
       /**
        * Color scheme of the radio input.
        */
-      intent: G({
-        main: ["border-outline", "data-checked:border-main", "hover:ring-main-container"],
-        support: ["border-outline", "data-checked:border-support", "hover:ring-support-container"],
-        accent: ["border-outline", "data-checked:border-accent", "hover:ring-accent-container"],
-        neutral: ["border-outline", "data-checked:border-neutral", "hover:ring-neutral-container"],
-        info: ["border-info", "data-checked:border-info", "hover:ring-info-container"],
-        success: ["border-success", "data-checked:border-success", "hover:ring-success-container"],
-        alert: ["border-alert", "data-checked:border-alert", "hover:ring-alert-container"],
-        error: ["border-error", "data-checked:border-error", "hover:ring-error-container"]
+      intent: I({
+        main: ["border-outline", "data-[state=checked]:border-main", "hover:ring-main-container"],
+        support: [
+          "border-outline",
+          "data-[state=checked]:border-support",
+          "hover:ring-support-container"
+        ],
+        accent: [
+          "border-outline",
+          "data-[state=checked]:border-accent",
+          "hover:ring-accent-container"
+        ],
+        neutral: [
+          "border-outline",
+          "data-[state=checked]:border-neutral",
+          "hover:ring-neutral-container"
+        ],
+        info: ["border-info", "data-[state=checked]:border-info", "hover:ring-info-container"],
+        success: [
+          "border-success",
+          "data-[state=checked]:border-success",
+          "hover:ring-success-container"
+        ],
+        alert: ["border-alert", "data-[state=checked]:border-alert", "hover:ring-alert-container"],
+        error: ["border-error", "data-[state=checked]:border-error", "hover:ring-error-container"]
       })
     },
     defaultVariants: {
       intent: "support"
     }
   }
-), N = ({
-  intent: r,
-  className: a,
-  asChild: e,
-  children: t,
-  inputRef: o,
-  hideInput: i = !1,
-  ref: d,
-  ...s
-}) => {
-  const { state: c } = x(), l = c ?? r;
-  return /* @__PURE__ */ n(
-    k.Root,
+), L = ({ intent: r, className: e, ref: a, ...t }) => {
+  const { state: n } = y(), i = n ?? r;
+  return /* @__PURE__ */ o(
+    h.RadioGroupItem,
     {
       "data-spark-component": "radio-input",
-      ref: d,
-      inputRef: o,
-      render: e ? t : void 0,
-      className: i ? "sr-only" : S({ intent: l, className: a }),
-      ...s,
-      children: !e && !i && /* @__PURE__ */ n(I, { intent: l, keepMounted: !0 })
+      ref: a,
+      className: M({ intent: i, className: e }),
+      ...t,
+      children: /* @__PURE__ */ o(w, { intent: i, forceMount: !0 })
     }
   );
 };
-N.displayName = "RadioGroup.RadioInput";
-const O = ":radio", m = ({
+L.displayName = "RadioGroup.RadioInput";
+const D = u("grow", {
+  variants: {
+    disabled: {
+      true: ["text-neutral/dim-2", "cursor-not-allowed"],
+      false: ["cursor-pointer"]
+    }
+  },
+  defaultVariants: {
+    disabled: !1
+  }
+}), $ = ({ disabled: r, ...e }) => /* @__PURE__ */ o(
+  q.Root,
+  {
+    "data-spark-component": "radio-label",
+    className: D({ disabled: r }),
+    ...e
+  }
+);
+$.displayName = "RadioGroup.RadioLabel";
+const k = ":radio", R = ({
   className: r,
-  children: a,
-  disabled: e,
-  ref: t,
-  ...o
+  children: e,
+  id: a,
+  disabled: t,
+  ref: n,
+  ...i
 }) => {
-  const i = `${O}-label-${F()}`, { intent: d, disabled: s, reverse: c } = E(), u = a && /* @__PURE__ */ n(
-    D,
-    {
-      "data-spark-component": "radio-label",
-      id: i,
-      className: R(
-        "grow",
-        e || s ? "text-neutral/dim-2 cursor-not-allowed" : "cursor-pointer"
-      ),
-      children: a
-    }
-  ), p = /* @__PURE__ */ n(
-    N,
+  const s = `${k}-input-${x()}`, d = `${k}-label-${x()}`, { intent: p, disabled: b, reverse: f } = S(), c = e && /* @__PURE__ */ o($, { disabled: t || b, htmlFor: a || s, id: d, children: e }), l = /* @__PURE__ */ o(
+    L,
     {
-      ref: t,
-      intent: d,
-      "aria-labelledby": a ? i : void 0,
-      ...o,
-      disabled: e
+      ref: n,
+      id: a || s,
+      intent: p,
+      "aria-labelledby": e ? d : void 0,
+      ...i,
+      disabled: t
     }
-  ), b = c ? /* @__PURE__ */ g(v, { children: [
-    u,
-    p
-  ] }) : /* @__PURE__ */ g(v, { children: [
-    p,
-    u
+  ), m = f ? /* @__PURE__ */ g(G, { children: [
+    c,
+    l
+  ] }) : /* @__PURE__ */ g(G, { children: [
+    l,
+    c
   ] });
-  return /* @__PURE__ */ n("span", { className: R("gap-md text-body-1 flex items-start", r), children: b });
+  return /* @__PURE__ */ o("span", { className: F("gap-md text-body-1 flex items-start", r), children: m });
 };
-m.displayName = "RadioGroup.Radio";
-const X = f(["flex"], {
+R.displayName = "RadioGroup.Radio";
+const O = u(["flex"], {
   variants: {
     orientation: {
       vertical: ["flex-col", "gap-lg"],
       horizontal: ["flex-row", "gap-xl"]
     }
   }
-}), _ = ({
+}), P = ({
   intent: r,
-  disabled: a,
-  reverse: e,
+  disabled: e,
+  reverse: a,
   children: t
 }) => {
-  const o = q(() => ({ intent: r, disabled: a, reverse: e }), [r, a, e]);
-  return /* @__PURE__ */ n(y.Provider, { value: o, children: t });
-}, w = ({
+  const n = C(() => ({ intent: r, disabled: e, reverse: a }), [r, e, a]);
+  return /* @__PURE__ */ o(N.Provider, { value: n, children: t });
+}, z = ({
   orientation: r = "vertical",
+  loop: e = !0,
   intent: a = "support",
-  disabled: e,
-  className: t,
-  required: o,
-  reverse: i = !1,
-  onValueChange: d,
-  ref: s,
-  ...c
+  disabled: t,
+  className: n,
+  required: i,
+  reverse: s = !1,
+  ref: d,
+  ...p
 }) => {
-  const { labelId: l, isInvalid: u, isRequired: p, description: b, name: V } = x(), h = o !== void 0 ? o : p, z = d ? (C) => d(C) : void 0;
-  return /* @__PURE__ */ n(_, { reverse: i, intent: a, disabled: e, children: /* @__PURE__ */ n(
-    L,
+  const { labelId: b, isInvalid: f, isRequired: c, description: l, name: m } = y(), v = i !== void 0 ? i : c;
+  return /* @__PURE__ */ o(P, { reverse: s, intent: a, disabled: t, children: /* @__PURE__ */ o(
+    h.RadioGroup,
     {
       "data-spark-component": "radio-group",
-      className: X({ orientation: r, className: t }),
-      name: V,
-      ref: s,
-      disabled: e,
-      required: h,
-      onValueChange: z,
-      "aria-orientation": r,
-      "aria-labelledby": l,
-      "aria-invalid": u,
-      "aria-required": h,
-      "aria-describedby": b,
-      ...c
+      className: O({ orientation: r, className: n }),
+      name: m,
+      ref: d,
+      disabled: t,
+      orientation: r,
+      loop: e,
+      required: v,
+      "aria-labelledby": b,
+      "aria-invalid": f,
+      "aria-required": v,
+      "aria-describedby": l,
+      ...p
     }
   ) });
 };
-w.displayName = "RadioGroup";
-const A = Object.assign(w, {
-  Radio: m
+z.displayName = "RadioGroup";
+const X = Object.assign(z, {
+  Radio: R
 });
-A.displayName = "RadioGroup";
-m.displayName = "RadioGroup.Radio";
+X.displayName = "RadioGroup";
+R.displayName = "RadioGroup.Radio";
 export {
-  A as RadioGroup
+  X as RadioGroup
 };
 //# sourceMappingURL=index.mjs.map

package/dist/radio-group/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-checked:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { Radio } from '@base-ui/react/radio'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Whether to keep the indicator mounted in the DOM when the radio is unchecked.\n   * Useful when controlling animation with React animation libraries.\n   */\n  keepMounted?: boolean\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({\n  intent,\n  className,\n  keepMounted,\n  ref,\n  ...others\n}: RadioIndicatorProps) => {\n  return (\n    <Radio.Indicator\n      ref={ref}\n      keepMounted={keepMounted}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'data-disabled:cursor-not-allowed data-disabled:border-outline/dim-2 data-disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-checked:border-main', 'hover:ring-main-container'],\n        support: ['border-outline', 'data-checked:border-support', 'hover:ring-support-container'],\n        accent: ['border-outline', 'data-checked:border-accent', 'hover:ring-accent-container'],\n        neutral: ['border-outline', 'data-checked:border-neutral', 'hover:ring-neutral-container'],\n        info: ['border-info', 'data-checked:border-info', 'hover:ring-info-container'],\n        success: ['border-success', 'data-checked:border-success', 'hover:ring-success-container'],\n        alert: ['border-alert', 'data-checked:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-checked:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { Radio } from '@base-ui/react/radio'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { HTMLAttributes, ReactElement, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends RadioInputVariantsProps,\n    Omit<HTMLAttributes<HTMLElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Uses Base UI's render prop internally to merge behaviour into the child element.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * Ref forwarded to the hidden `<input type=\"radio\">` rendered by Base UI.\n   * Useful for programmatic activation (e.g. clicking from an associated label span).\n   */\n  inputRef?: Ref<HTMLInputElement>\n  ref?: Ref<HTMLElement>\n  /**\n   * When true, the visual radio input (outer ring and inner dot) is visually hidden but remains\n   * accessible in the DOM. Useful for custom radio appearances where only the label matters visually.\n   * @default false\n   */\n  hideInput?: boolean\n}\n\nexport const RadioInput = ({\n  intent: intentProp,\n  className,\n  asChild,\n  children,\n  inputRef,\n  hideInput = false,\n  ref,\n  ...others\n}: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <Radio.Root\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      inputRef={inputRef}\n      render={asChild ? (children as ReactElement) : undefined}\n      className={hideInput ? 'sr-only' : radioInputVariants({ intent, className })}\n      {...others}\n    >\n      {!asChild && !hideInput && <RadioIndicator intent={intent} keepMounted />}\n    </Radio.Root>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { Label } from '../label'\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n  className,\n  children,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const isDisabled = disabledProp || disabled\n\n  const radioLabel = children && (\n    <Label\n      data-spark-component=\"radio-label\"\n      id={innerLabelId}\n      className={cx(\n        'grow',\n        isDisabled ? 'text-neutral/dim-2 cursor-not-allowed' : 'cursor-pointer'\n      )}\n    >\n      {children}\n    </Label>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>,\n    Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  onValueChange: onValueChangeProp,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  const handleValueChange = onValueChangeProp\n    ? (value: unknown) => onValueChangeProp(value as string)\n    : undefined\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <BaseUIRadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        required={required}\n        onValueChange={handleValueChange}\n        aria-orientation={orientation}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"names":["RadioGroupContext","createContext","useRadioGroup","context","useContext","radioIndicatorStyles","cva","makeVariants","RadioIndicator","intent","className","keepMounted","ref","others","jsx","Radio","radioInputVariants","RadioInput","intentProp","asChild","children","inputRef","hideInput","state","useFormFieldControl","ID_PREFIX","disabledProp","innerLabelId","useId","disabled","reverse","radioLabel","Label","cx","radioInput","content","jsxs","Fragment","radioGroupStyles","RadioGroupProvider","value","useMemo","RadioGroup","orientation","requiredProp","onValueChangeProp","labelId","isInvalid","isRequired","description","name","required","handleValueChange","BaseUIRadioGroup","Root"],"mappings":";;;;;;;;AAQO,MAAMA,IAAoBC,EAA6C,IAAI,GAErEC,IAAgB,MAAM;AACjC,QAAMC,IAAUC,EAAWJ,CAAiB;AAE5C,MAAI,CAACG;AACH,UAAM,MAAM,yDAAyD;AAGvE,SAAOA;AACT,GCfaE,IAAuBC;AAAA,EAClC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,QAAQC,EAGN;AAAA,QACA,MAAM,CAAC,eAAe;AAAA,QACtB,SAAS,CAAC,kBAAkB;AAAA,QAC5B,QAAQ,CAAC,iBAAiB;AAAA,QAC1B,SAAS,CAAC,kBAAkB;AAAA,QAC5B,SAAS,CAAC,kBAAkB;AAAA,QAC5B,OAAO,CAAC,gBAAgB;AAAA,QACxB,OAAO,CAAC,gBAAgB;AAAA,QACxB,MAAM,CAAC,eAAe;AAAA,MAAA,CACvB;AAAA,IAAA;AAAA,IAEH,iBAAiB;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,GCtBaC,IAAiB,CAAC;AAAA,EAC7B,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACC,EAAM;AAAA,EAAN;AAAA,IACC,KAAAH;AAAA,IACA,aAAAD;AAAA,IACA,WAAWN,EAAqB,EAAE,QAAAI,GAAQ,WAAAC,GAAW;AAAA,IACpD,GAAGG;AAAA,EAAA;AAAA;AAKVL,EAAe,cAAc;AC7BtB,MAAMQ,IAAqBV;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,QAAQC,EAGN;AAAA,QACA,MAAM,CAAC,kBAAkB,4BAA4B,2BAA2B;AAAA,QAChF,SAAS,CAAC,kBAAkB,+BAA+B,8BAA8B;AAAA,QACzF,QAAQ,CAAC,kBAAkB,8BAA8B,6BAA6B;AAAA,QACtF,SAAS,CAAC,kBAAkB,+BAA+B,8BAA8B;AAAA,QACzF,MAAM,CAAC,eAAe,4BAA4B,2BAA2B;AAAA,QAC7E,SAAS,CAAC,kBAAkB,+BAA+B,8BAA8B;AAAA,QACzF,OAAO,CAAC,gBAAgB,6BAA6B,4BAA4B;AAAA,QACjF,OAAO,CAAC,gBAAgB,6BAA6B,4BAA4B;AAAA,MAAA,CAClF;AAAA,IAAA;AAAA,IAEH,iBAAiB;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,GCGaU,IAAa,CAAC;AAAA,EACzB,QAAQC;AAAA,EACR,WAAAR;AAAA,EACA,SAAAS;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,KAAAV;AAAA,EACA,GAAGC;AACL,MAAuB;AACrB,QAAM,EAAE,OAAAU,EAAA,IAAUC,EAAA,GAEZf,IAASc,KAASL;AAExB,SACE,gBAAAJ;AAAA,IAACC,EAAM;AAAA,IAAN;AAAA,MACC,wBAAqB;AAAA,MACrB,KAAAH;AAAA,MACA,UAAAS;AAAA,MACA,QAAQF,IAAWC,IAA4B;AAAA,MAC/C,WAAWE,IAAY,YAAYN,EAAmB,EAAE,QAAAP,GAAQ,WAAAC,GAAW;AAAA,MAC1E,GAAGG;AAAA,MAEH,UAAA,CAACM,KAAW,CAACG,uBAAcd,GAAA,EAAe,QAAAC,GAAgB,aAAW,GAAA,CAAC;AAAA,IAAA;AAAA,EAAA;AAG7E;AAEAQ,EAAW,cAAc;AC1DzB,MAAMQ,IAAY,UAELV,IAAQ,CAAC;AAAA,EACpB,WAAAL;AAAA,EACA,UAAAU;AAAA,EACA,UAAUM;AAAA,EACV,KAAAd;AAAA,EACA,GAAGC;AACL,MAAkB;AAChB,QAAMc,IAAe,GAAGF,CAAS,UAAUG,GAAO,IAE5C,EAAE,QAAAnB,GAAQ,UAAAoB,GAAU,SAAAC,EAAA,IAAY5B,EAAA,GAIhC6B,IAAaX,KACjB,gBAAAN;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,IAAIL;AAAA,MACJ,WAAWM;AAAA,QACT;AAAA,QAPaP,KAAgBG,IAQhB,0CAA0C;AAAA,MAAA;AAAA,MAGxD,UAAAT;AAAA,IAAA;AAAA,EAAA,GAICc,IACJ,gBAAApB;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,QAAAH;AAAA,MACA,mBAAiBW,IAAWO,IAAe;AAAA,MAC1C,GAAGd;AAAA,MACJ,UAAUa;AAAA,IAAA;AAAA,EAAA,GAIRS,IAAUL,IACd,gBAAAM,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACAG;AAAA,EAAA,EAAA,CACH,IAEA,gBAAAE,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAH;AAAA,IACAH;AAAA,EAAA,GACH;AAGF,2BAAQ,QAAA,EAAK,WAAWE,EAAG,uCAAuCvB,CAAS,GAAI,UAAAyB,GAAQ;AACzF;AAEApB,EAAM,cAAc;AC9Db,MAAMuB,IAAmBhC,EAAI,CAAC,MAAM,GAAG;AAAA,EAC5C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,UAAU,CAAC,YAAY,QAAQ;AAAA,MAC/B,YAAY,CAAC,YAAY,QAAQ;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC,GCGYiC,IAAqB,CAAC;AAAA,EACjC,QAAA9B;AAAA,EACA,UAAAoB;AAAA,EACA,SAAAC;AAAA,EACA,UAAAV;AACF,MAA+B;AAC7B,QAAMoB,IAAQC,EAAQ,OAAO,EAAE,QAAAhC,GAAQ,UAAAoB,GAAU,SAAAC,EAAA,IAAY,CAACrB,GAAQoB,GAAUC,CAAO,CAAC;AAExF,SAAO,gBAAAhB,EAACd,EAAkB,UAAlB,EAA2B,OAAAwC,GAAe,UAAApB,EAAA,CAAS;AAC7D,GCkCasB,IAAa,CAAC;AAAA,EACzB,aAAAC,IAAc;AAAA,EACd,QAAAlC,IAAS;AAAA,EACT,UAAAoB;AAAA,EACA,WAAAnB;AAAA,EACA,UAAUkC;AAAA,EACV,SAAAd,IAAU;AAAA,EACV,eAAee;AAAA,EACf,KAAAjC;AAAA,EACA,GAAGC;AACL,MAAuB;AACrB,QAAM,EAAE,SAAAiC,GAAS,WAAAC,GAAW,YAAAC,GAAY,aAAAC,GAAa,MAAAC,EAAA,IAAS1B,EAAA,GACxD2B,IAAWP,MAAiB,SAAYA,IAAeI,GAEvDI,IAAoBP,IACtB,CAACL,MAAmBK,EAAkBL,CAAe,IACrD;AAEJ,SACE,gBAAA1B,EAACyB,GAAA,EAAmB,SAAAT,GAAkB,QAAArB,GAAgB,UAAAoB,GACpD,UAAA,gBAAAf;AAAA,IAACuC;AAAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,WAAWf,EAAiB,EAAE,aAAAK,GAAa,WAAAjC,GAAW;AAAA,MACtD,MAAAwC;AAAA,MACA,KAAAtC;AAAA,MACA,UAAAiB;AAAA,MACA,UAAAsB;AAAA,MACA,eAAeC;AAAA,MACf,oBAAkBT;AAAA,MAClB,mBAAiBG;AAAA,MACjB,gBAAcC;AAAA,MACd,iBAAeI;AAAA,MACf,oBAAkBF;AAAA,MACjB,GAAGpC;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;AAEA6B,EAAW,cAAc;AC3FlB,MAAMA,IAET,OAAO,OAAOY,GAAM;AAAA,EACtB,OAAAvC;AACF,CAAC;AAED2B,EAAW,cAAc;AACzB3B,EAAM,cAAc;"}
+{"version":3,"file":"index.mjs","sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps,\n    PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>,\n    Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"names":["RadioGroupContext","createContext","useRadioGroup","context","useContext","radioIndicatorStyles","cva","makeVariants","RadioIndicator","intent","className","ref","others","jsx","RadixRadioGroup","radioInputVariants","RadioInput","intentProp","state","useFormFieldControl","radioLabelStyles","RadioLabel","disabled","Label","ID_PREFIX","Radio","children","id","disabledProp","innerId","useId","innerLabelId","reverse","radioLabel","radioInput","content","jsxs","Fragment","cx","radioGroupStyles","RadioGroupProvider","value","useMemo","RadioGroup","orientation","loop","requiredProp","labelId","isInvalid","isRequired","description","name","required","Root"],"mappings":"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"}

package/dist/segmented-control/index.js

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

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.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -54,9 +54,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^17.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.1",
+    "@spark-ui/icons": "^17.2.1",
+    "@spark-ui/internal-utils": "^17.2.1",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",