@spark-ui/components 17.2.3 → 17.2.4

package/dist/radio-group/index.mjs

@@ -1,216 +1,207 @@
-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;
-}, E = u(
-  [
-    "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: I({
-        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"
-    }
-  }
-), w = ({ intent: r, className: e, ref: a, ...t }) => /* @__PURE__ */ o(
-  h.Indicator,
-  {
-    ref: a,
-    className: E({ intent: r, className: e }),
-    ...t
-  }
-);
-w.displayName = "RadioGroup.RadioIndicator";
-const M = u(
-  [
-    "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: {
-      /**
-       * Color scheme of the radio input.
-       */
-      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"
-    }
-  }
-), 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: a,
-      className: M({ intent: i, className: e }),
-      ...t,
-      children: /* @__PURE__ */ o(w, { intent: i, forceMount: !0 })
-    }
-  );
-};
-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: e,
-  id: a,
-  disabled: t,
-  ref: n,
-  ...i
-}) => {
-  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: n,
-      id: a || s,
-      intent: p,
-      "aria-labelledby": e ? d : void 0,
-      ...i,
-      disabled: t
-    }
-  ), m = f ? /* @__PURE__ */ g(G, { children: [
-    c,
-    l
-  ] }) : /* @__PURE__ */ g(G, { children: [
-    l,
-    c
-  ] });
-  return /* @__PURE__ */ o("span", { className: F("gap-md text-body-1 flex items-start", r), children: m });
-};
-R.displayName = "RadioGroup.Radio";
-const O = u(["flex"], {
-  variants: {
-    orientation: {
-      vertical: ["flex-col", "gap-lg"],
-      horizontal: ["flex-row", "gap-xl"]
-    }
-  }
-}), P = ({
-  intent: r,
-  disabled: e,
-  reverse: a,
-  children: t
-}) => {
-  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: t,
-  className: n,
-  required: i,
-  reverse: s = !1,
-  ref: d,
-  ...p
-}) => {
-  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: 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
-    }
-  ) });
+import { cva as e, cx as t } from "class-variance-authority";
+import { createContext as n, useContext as r, useId as i, useMemo as a } from "react";
+import { Label as o, RadioGroup as s } from "radix-ui";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { makeVariants as d } from "@spark-ui/internal-utils";
+import { useFormFieldControl as f } from "@spark-ui/components/form-field";
+//#region src/radio-group/RadioGroupContext.tsx
+var p = n(null), m = () => {
+	let e = r(p);
+	if (!e) throw Error("useRadioGroup must be used within a RadioGroup provider");
+	return e;
+}, h = e([
+	"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: d({
+		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" }
+}), g = ({ intent: e, className: t, ref: n, ...r }) => /* @__PURE__ */ l(s.Indicator, {
+	ref: n,
+	className: h({
+		intent: e,
+		className: t
+	}),
+	...r
+});
+g.displayName = "RadioGroup.RadioIndicator";
+//#endregion
+//#region src/radio-group/RadioInput.styles.ts
+var _ = e([
+	"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: d({
+		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" }
+}), v = ({ intent: e, className: t, ref: n, ...r }) => {
+	let { state: i } = f(), a = i ?? e;
+	return /* @__PURE__ */ l(s.RadioGroupItem, {
+		"data-spark-component": "radio-input",
+		ref: n,
+		className: _({
+			intent: a,
+			className: t
+		}),
+		...r,
+		children: /* @__PURE__ */ l(g, {
+			intent: a,
+			forceMount: !0
+		})
+	});
 };
-z.displayName = "RadioGroup";
-const X = Object.assign(z, {
-  Radio: R
+v.displayName = "RadioGroup.RadioInput";
+//#endregion
+//#region src/radio-group/RadioLabel.styles.tsx
+var y = e("grow", {
+	variants: { disabled: {
+		true: ["text-neutral/dim-2", "cursor-not-allowed"],
+		false: ["cursor-pointer"]
+	} },
+	defaultVariants: { disabled: !1 }
+}), b = ({ disabled: e, ...t }) => /* @__PURE__ */ l(o.Root, {
+	"data-spark-component": "radio-label",
+	className: y({ disabled: e }),
+	...t
 });
-X.displayName = "RadioGroup";
-R.displayName = "RadioGroup.Radio";
-export {
-  X as RadioGroup
+b.displayName = "RadioGroup.RadioLabel";
+//#endregion
+//#region src/radio-group/Radio.tsx
+var x = ":radio", S = ({ className: e, children: n, id: r, disabled: a, ref: o, ...s }) => {
+	let d = `${x}-input-${i()}`, f = `${x}-label-${i()}`, { intent: p, disabled: h, reverse: g } = m(), _ = n && /* @__PURE__ */ l(b, {
+		disabled: a || h,
+		htmlFor: r || d,
+		id: f,
+		children: n
+	}), y = /* @__PURE__ */ l(v, {
+		ref: o,
+		id: r || d,
+		intent: p,
+		"aria-labelledby": n ? f : void 0,
+		...s,
+		disabled: a
+	}), S = g ? /* @__PURE__ */ u(c, { children: [_, y] }) : /* @__PURE__ */ u(c, { children: [y, _] });
+	return /* @__PURE__ */ l("span", {
+		className: t("gap-md text-body-1 flex items-start", e),
+		children: S
+	});
+};
+S.displayName = "RadioGroup.Radio";
+//#endregion
+//#region src/radio-group/RadioGroup.styles.ts
+var C = e(["flex"], { variants: { orientation: {
+	vertical: ["flex-col", "gap-lg"],
+	horizontal: ["flex-row", "gap-xl"]
+} } }), w = ({ intent: e, disabled: t, reverse: n, children: r }) => {
+	let i = a(() => ({
+		intent: e,
+		disabled: t,
+		reverse: n
+	}), [
+		e,
+		t,
+		n
+	]);
+	return /* @__PURE__ */ l(p.Provider, {
+		value: i,
+		children: r
+	});
+}, T = ({ orientation: e = "vertical", loop: t = !0, intent: n = "support", disabled: r, className: i, required: a, reverse: o = !1, ref: c, ...u }) => {
+	let { labelId: d, isInvalid: p, isRequired: m, description: h, name: g } = f(), _ = a === void 0 ? m : a;
+	return /* @__PURE__ */ l(w, {
+		reverse: o,
+		intent: n,
+		disabled: r,
+		children: /* @__PURE__ */ l(s.RadioGroup, {
+			"data-spark-component": "radio-group",
+			className: C({
+				orientation: e,
+				className: i
+			}),
+			name: g,
+			ref: c,
+			disabled: r,
+			orientation: e,
+			loop: t,
+			required: _,
+			"aria-labelledby": d,
+			"aria-invalid": p,
+			"aria-required": _,
+			"aria-describedby": h,
+			...u
+		})
+	});
 };
-//# sourceMappingURL=index.mjs.map
+T.displayName = "RadioGroup";
+//#endregion
+//#region src/radio-group/index.ts
+var E = Object.assign(T, { Radio: S });
+E.displayName = "RadioGroup", S.displayName = "RadioGroup.Radio";
+//#endregion
+export { E 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/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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"}
+{"version":3,"file":"index.mjs","names":[],"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\n    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, 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'>, 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\n    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"],"mappings":"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"}

package/dist/rating/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),G=require("@spark-ui/hooks/use-combined-state"),f=require("class-variance-authority"),u=require("react"),Q=require("../form-field/index.js"),W=require("@spark-ui/icons/StarFill"),X=require("@spark-ui/icons/StarOutline"),V=require("../Icon-C-cNTnzd.js"),Y=f.cx("[&_>_div]:peer-hover:w-0!"),Z=f.cva(["peer after:inset-0 group relative after:block after:absolute"],{variants:{disabled:{true:"opacity-dim-3",false:""},readOnly:{true:"",false:""},gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},compoundVariants:[{readOnly:!1,disabled:!1,className:f.cx(Y,"cursor-pointer transition-all duration-200 scale-100","hover:scale-150 focus-visible:scale-150","[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100")}],defaultVariants:{disabled:!1,readOnly:!1,gap:"sm"}}),H=f.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-1"},design:{filled:["text-main-variant","group-[[data-part=star][data-hovered]]:text-main-variant-hovered"],outlined:["text-on-surface/dim-3"]}}}),ee=({value:e,size:t,disabled:r,readOnly:o,checked:i=!1,ariaLabel:l,ariaLabelledBy:c,tabIndex:I,onClick:v,onKeyDown:h,onMouseEnter:k,children:w,ref:p})=>{const g=!r&&!o,[j,y]=u.useState(!1),C=R=>{v?.(R),g&&y(!0)},S=()=>y(!1);return n.jsxs("div",{ref:p,role:"radio","aria-checked":i,"aria-label":l,"aria-labelledby":c,tabIndex:I,"data-spark-component":"rating-star","data-part":"star",...g&&j&&{"data-suppress-scale":""},className:Z({gap:t==="lg"?"md":"sm",disabled:r,readOnly:o}),onClick:C,onKeyDown:h,onMouseEnter:k,onMouseLeave:S,onMouseMove:S,children:[n.jsx("div",{className:f.cx("z-raised absolute overflow-hidden","group-[[data-part=star][data-hovered]]:overflow-visible"),style:{width:e*100+"%"},children:n.jsx(V.Icon,{className:H({size:t,design:"filled"}),children:n.jsx(W.StarFill,{})})}),n.jsx(V.Icon,{className:H({size:t,design:"outlined"}),children:n.jsx(X.StarOutline,{})}),w]})};function ae({value:e,index:t}){if(e===void 0)return 0;const r=t+1;return e>=r?1:0}function te(e,t){const r=e.slice(0,t),o=e.slice(t);return[r,o]}const re=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function se(e,t,r,o){return i=>{if(o)switch(i.key){case"ArrowRight":case"ArrowDown":i.preventDefault();const l=Math.min(4,e+1);r(l+1),t.current[l]?.focus();break;case"ArrowLeft":case"ArrowUp":i.preventDefault();const c=Math.max(0,e-1);r(c+1),t.current[c]?.focus();break;case" ":i.preventDefault(),r(e+1);break}}}function ne(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}const oe=({defaultValue:e,value:t,onValueChange:r,disabled:o,readOnly:i,required:l,name:c,id:I,"aria-label":v,getStarLabel:h,ref:k,...w})=>{const{labelId:p,isInvalid:g,isRequired:j,description:y,name:C,disabled:S,readOnly:R}=Q.useFormFieldControl(),d=u.useRef([]),N=u.useId(),[D,O]=u.useState(null),[K,q]=G.useCombinedState(t,e,r),x=re(K??0),F=o??S,$=i??R,L=l!==void 0?l:j,E=c??C,m=!(F||$),A=h!==void 0||v!==void 0,_=D!==null?D+1:x;function J(s){if(!m)return;const a=s+1;q(a),d.current[s]?.focus()}const P=u.useCallback(s=>se(s,d,q,m),[m,q]);function T({currentTarget:s}){const a=d.current.findIndex(b=>b===s);O(a>=0?a:null);const[M,U]=te(d.current,a+1);M.forEach(b=>b?.setAttribute("data-hovered","")),U.forEach(b=>b?.removeAttribute("data-hovered"))}const z=u.useCallback(s=>a=>{d.current[s]=a},[]);function B(){O(null),d.current.forEach(s=>s?.removeAttribute("data-hovered"))}return n.jsxs("div",{ref:k,id:I,role:"radiogroup","aria-label":v,"aria-labelledby":p,"aria-invalid":g,"aria-required":L,"aria-describedby":y,className:"relative inline-flex","data-spark-component":"rating",...w,onMouseLeave:B,children:[E!==void 0&&n.jsx("input",{type:"hidden",name:E,value:x,"aria-hidden":!0,"data-part":"input"}),n.jsx("div",{className:f.cx("gap-x-md","flex"),children:Array.from({length:5}).map((s,a)=>n.jsx(ee,{ref:z(a),disabled:F,readOnly:$,size:"lg",value:ae({index:a,value:_}),checked:x===a+1,ariaLabel:A?h?.(a)??`${v} ${a+1}`:void 0,ariaLabelledBy:!A&&p?`${p} ${N}-star-${a+1}`:void 0,tabIndex:m?ne(a,x):-1,onClick:()=>J(a),onKeyDown:P(a),onMouseEnter:M=>m&&T(M),children:!A&&n.jsx("span",{id:`${N}-star-${a+1}`,className:"sr-only",children:a+1})},a))})]})};exports.Rating=oe;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../form-field-Bu_0E9tb.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-combined-state`),o=require(`@spark-ui/icons/StarFill`),s=require(`@spark-ui/icons/StarOutline`);var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption-link`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:e>=t+1?1:0}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){V&&(F(e+1),A.current[e]?.focus())}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
+//# sourceMappingURL=index.js.map