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

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":"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"}
+{"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