@chayns-ui/core 0.6.0 → 0.7.0

package/dist/components/date-time-picker/DateTimePicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/date-time-picker/DateTimePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,eAAO,MAAM,sBAAsB,2BAA4B,CAAC;AAChE,eAAO,MAAM,6BAA6B,yBAA0B,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AACzE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtF,MAAM,WAAW,yBAAyB;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,qBAAqB,CAAC,QAAQ,CAAC,EAC7B,eAAe,GACf,eAAe,GACf,eAAe,GACf,YAAY,GACZ,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,CACV;IACC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,WAAW,EAAE,yBAAyB,CAAC;CACxC"}

package/dist/components/date-time-picker/DateTimePicker.types.js

@@ -0,0 +1,12 @@
+//#region src/components/date-time-picker/DateTimePicker.types.ts
+var DATE_TIME_PICKER_MODES = ["date", "time"];
+var DATE_TIME_PICKER_MINUTE_STEPS = [
+	1,
+	5,
+	15,
+	30
+];
+//#endregion
+export { DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES };
+
+//# sourceMappingURL=DateTimePicker.types.js.map

package/dist/components/date-time-picker/DateTimePicker.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.types.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.types.ts"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\n\nexport const DATE_TIME_PICKER_MODES = ['date', 'time'] as const;\nexport const DATE_TIME_PICKER_MINUTE_STEPS = [1, 5, 15, 30] as const;\n\nexport type DateTimePickerMode = (typeof DATE_TIME_PICKER_MODES)[number];\nexport type DateTimePickerMinuteStep = (typeof DATE_TIME_PICKER_MINUTE_STEPS)[number];\n\nexport interface DateTimePickerWheelLabels {\n  day: string;\n  dayPeriod: string;\n  hour: string;\n  minute: string;\n  month: string;\n  year: string;\n}\n\nexport interface DateTimePickerProps extends Omit<\n  ComponentPropsWithRef<'button'>,\n  | 'aria-controls'\n  | 'aria-expanded'\n  | 'aria-haspopup'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'children'\n  | 'onChange'\n  | 'type'\n  | 'value'\n> {\n  label: string;\n  locale: string;\n  minDate?: Date;\n  maxDate?: Date;\n  minuteStep?: DateTimePickerMinuteStep;\n  mode?: DateTimePickerMode;\n  onChange: (value: Date) => void;\n  placeholder: string;\n  value: Date | null;\n  wheelLabels: DateTimePickerWheelLabels;\n}\n"],"mappings":";AAEA,IAAa,yBAAyB,CAAC,QAAQ,MAAM;AACrD,IAAa,gCAAgC;CAAC;CAAG;CAAG;CAAI;AAAE"}

package/dist/components/icon-button/IconButton.d.ts

@@ -1,4 +1,9 @@
-import type { IconButtonProps } from './IconButton.types.js';
-declare function IconButton({ className, icon, type, variant, ...buttonProps }: IconButtonProps): import("react").JSX.Element;
+declare const IconButton: import("react").ForwardRefExoticComponent<(Omit<import("./IconButton.types.js").IconButtonBaseProps & {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+}, "ref"> | Omit<import("./IconButton.types.js").IconButtonBaseProps & {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/icon-button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7D,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,IAAI,EACJ,IAAe,EACf,OAAO,EACP,GAAG,WAAW,EACf,EAAE,eAAe,+BAUjB;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,UAAU;;;;;;8DAkCd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/components/icon-button/IconButton.js

@@ -1,19 +1,24 @@
 import ButtonIcon from "../button/button-icon/ButtonIcon.js";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon-button/IconButton.tsx
-function IconButton({ className, icon, type = "button", variant, ...buttonProps }) {
+var IconButton = forwardRef(function IconButton({ "aria-busy": ariaBusy, className, disabled, icon, loading = false, type = "button", variant, ...buttonProps }, ref) {
 	const resolvedClassName = [
 		"chayns-icon-button",
 		`chayns-icon-button--${variant}`,
+		loading ? "chayns-icon-button--loading" : "",
 		className
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx("button", {
 		...buttonProps,
+		"aria-busy": loading ? true : ariaBusy,
 		className: resolvedClassName,
+		disabled: loading || disabled,
+		ref,
 		type,
-		children: /* @__PURE__ */ jsx(ButtonIcon, { icon })
+		children: /* @__PURE__ */ jsx(ButtonIcon, { icon: loading ? "fa-spinner" : icon })
 	});
-}
+});
 //#endregion
 export { IconButton as default };
 

package/dist/components/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { IconButtonProps } from './IconButton.types.js';\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\n\nfunction IconButton({\n  className,\n  icon,\n  type = 'button',\n  variant,\n  ...buttonProps\n}: IconButtonProps) {\n  const resolvedClassName = ['chayns-icon-button', `chayns-icon-button--${variant}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button {...buttonProps} className={resolvedClassName} type={type}>\n      <ButtonIcon icon={icon} />\n    </button>\n  );\n}\n\nexport default IconButton;\n"],"mappings":";;;AAGA,SAAS,WAAW,EAClB,WACA,MACA,OAAO,UACP,SACA,GAAG,eACe;CAClB,MAAM,oBAAoB;EAAC;EAAsB,uBAAuB;EAAW;CAAS,CAAC,CAC1F,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAa,WAAW;EAAyB;EAC3D,UAAA,oBAAC,YAAD,EAAkB,KAAO,CAAA;CACnB,CAAA;AAEZ"}
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { IconButtonProps } from './IconButton.types.js';\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    'aria-busy': ariaBusy,\n    className,\n    disabled,\n    icon,\n    loading = false,\n    type = 'button',\n    variant,\n    ...buttonProps\n  },\n  ref,\n) {\n  const resolvedClassName = [\n    'chayns-icon-button',\n    `chayns-icon-button--${variant}`,\n    loading ? 'chayns-icon-button--loading' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      {...buttonProps}\n      aria-busy={loading ? true : ariaBusy}\n      className={resolvedClassName}\n      disabled={loading || disabled}\n      ref={ref}\n      type={type}\n    >\n      <ButtonIcon icon={loading ? 'fa-spinner' : icon} />\n    </button>\n  );\n});\n\nexport default IconButton;\n"],"mappings":";;;;AAKA,IAAM,aAAa,WAA+C,SAAS,WACzE,EACE,aAAa,UACb,WACA,UACA,MACA,UAAU,OACV,OAAO,UACP,SACA,GAAG,eAEL,KACA;CACA,MAAM,oBAAoB;EACxB;EACA,uBAAuB;EACvB,UAAU,gCAAgC;EAC1C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,aAAW,UAAU,OAAO;EAC5B,WAAW;EACX,UAAU,WAAW;EAChB;EACC;EAEN,UAAA,oBAAC,YAAD,EAAY,MAAM,UAAU,eAAe,KAAO,CAAA;CAC5C,CAAA;AAEZ,CAAC"}

package/dist/components/icon-button/IconButton.types.d.ts

@@ -20,7 +20,7 @@ type IconButtonAccessibleName = {
      */
     'aria-labelledby': string;
 };
-interface IconButtonBaseProps extends Omit<ComponentPropsWithRef<'button'>, 'aria-label' | 'aria-labelledby' | 'children'> {
+export interface IconButtonBaseProps extends Omit<ComponentPropsWithRef<'button'>, 'aria-label' | 'aria-labelledby' | 'children'> {
     /**
      * @description Visual emphasis that communicates the action's role within
      * its action scope, using the same four values as `Button`.
@@ -33,6 +33,8 @@ interface IconButtonBaseProps extends Omit<ComponentPropsWithRef<'button'>, 'ari
      * so this is its only visible content.
      */
     icon: ButtonIcon;
+    /** Shows a spinner while preserving the accessible name and disabling the action. */
+    loading?: boolean;
 }
 /**
  * @description Props for a compact, icon-only native action button. Does not

package/dist/components/icon-button/IconButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE3E;;;;GAIG;AACH,KAAK,wBAAwB,GACzB;IACE;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,GACD;IACE,YAAY,CAAC,EAAE,KAAK,CAAC;IAErB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEN,UAAU,mBAAoB,SAAQ,IAAI,CACxC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,YAAY,GAAG,iBAAiB,GAAG,UAAU,CAC9C;IACC;;;OAGG;IACH,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;;OAKG;IACH,IAAI,EAAE,UAAU,CAAC;CAClB;AAED;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,wBAAwB,CAAC"}
+{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE3E;;;;GAIG;AACH,KAAK,wBAAwB,GACzB;IACE;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,GACD;IACE,YAAY,CAAC,EAAE,KAAK,CAAC;IAErB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEN,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,YAAY,GAAG,iBAAiB,GAAG,UAAU,CAC9C;IACC;;;OAGG;IACH,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;;OAKG;IACH,IAAI,EAAE,UAAU,CAAC;IAEjB,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,wBAAwB,CAAC"}

package/dist/components/list/List.js

@@ -1,6 +1,6 @@
 import { ListContext, ListItemContext, useListContext, useListItemContext } from "./ListContext.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list/List.tsx
 var Item = forwardRef(function Item({ children, className, ...itemProps }, ref) {
 	useListContext();

package/dist/components/popup/Popup.js

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
 import { cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/popup/Popup.tsx
 var PopupContext = createContext(null);

package/dist/components/popup/PopupList.js

@@ -1,7 +1,7 @@
 import ButtonIcon from "../button/button-icon/ButtonIcon.js";
 import Popup_default from "./Popup.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/popup/PopupList.tsx
 var PopupList = ({ className, items, trigger }) => {
 	const itemRefs = useRef([]);

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAoEzE,QAAA,MAAM,UAAU;;CAA2C,CAAC;AAE5D,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAgFzE,QAAA,MAAM,UAAU;;CAA2C,CAAC;AAE5D,eAAe,UAAU,CAAC"}

package/dist/components/radio-group/RadioGroup.js

@@ -1,8 +1,8 @@
 import { RadioGroupContext, useRadioGroupContext } from "./RadioGroupContext.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/radio-group/RadioGroup.tsx
-var Radio = forwardRef(function Radio({ children, className, disabled, value, ...inputProps }, ref) {
+var Radio = forwardRef(function Radio({ children, className, description, disabled, onChange, value, ...inputProps }, ref) {
 	const group = useRadioGroupContext();
 	const isDisabled = group.disabled || disabled === true;
 	const inputClassName = ["chayns-radio__input", className].filter(Boolean).join(" ");
@@ -15,7 +15,10 @@ var Radio = forwardRef(function Radio({ children, className, disabled, value, ..
 				className: inputClassName,
 				disabled: isDisabled,
 				name: group.name,
-				onChange: () => group.selectValue(value),
+				onChange: (event) => {
+					onChange?.(event);
+					if (!event.defaultPrevented) group.selectValue(value);
+				},
 				ref,
 				type: "radio",
 				value
@@ -24,9 +27,15 @@ var Radio = forwardRef(function Radio({ children, className, disabled, value, ..
 				"aria-hidden": "true",
 				className: "chayns-radio__control"
 			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "chayns-radio__label",
-				children
+			/* @__PURE__ */ jsxs("span", {
+				className: "chayns-radio__content",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "chayns-radio__label",
+					children
+				}), description !== void 0 ? /* @__PURE__ */ jsx("span", {
+					className: "chayns-radio__description",
+					children: description
+				}) : null]
 			})
 		]
 	});
@@ -52,10 +61,10 @@ var RadioGroupRoot = forwardRef(function RadioGroupRoot({ children, className, d
 			className: resolvedClassName,
 			disabled,
 			ref,
-			children: [/* @__PURE__ */ jsx("legend", {
+			children: [label !== void 0 ? /* @__PURE__ */ jsx("legend", {
 				className: "chayns-radio-group__legend",
 				children: label
-			}), /* @__PURE__ */ jsx("div", {
+			}) : null, /* @__PURE__ */ jsx("div", {
 				className: "chayns-radio-group__options",
 				children
 			})]

package/dist/components/radio-group/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\n\nimport { RadioGroupContext, useRadioGroupContext } from './RadioGroupContext.js';\nimport type { RadioGroupProps, RadioProps } from './RadioGroup.types.js';\n\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { children, className, disabled, value, ...inputProps },\n  ref,\n) {\n  const group = useRadioGroupContext();\n  const isDisabled = group.disabled || disabled === true;\n  const inputClassName = ['chayns-radio__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-radio\">\n      <input\n        {...inputProps}\n        checked={group.value === value}\n        className={inputClassName}\n        disabled={isDisabled}\n        name={group.name}\n        onChange={() => group.selectValue(value)}\n        ref={ref}\n        type=\"radio\"\n        value={value}\n      />\n      <span aria-hidden=\"true\" className=\"chayns-radio__control\" />\n      <span className=\"chayns-radio__label\">{children}</span>\n    </label>\n  );\n});\n\nconst RadioGroupRoot = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroupRoot(\n  {\n    children,\n    className,\n    defaultValue,\n    disabled,\n    label,\n    name,\n    onValueChange,\n    value,\n    ...fieldsetProps\n  },\n  ref,\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const selectedValue = isControlled ? value : uncontrolledValue;\n  const resolvedClassName = ['chayns-radio-group', className].filter(Boolean).join(' ');\n\n  function selectValue(nextValue: string) {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    onValueChange?.(nextValue);\n  }\n\n  return (\n    <RadioGroupContext.Provider\n      value={{ disabled: disabled === true, name, selectValue, value: selectedValue }}\n    >\n      <fieldset {...fieldsetProps} className={resolvedClassName} disabled={disabled} ref={ref}>\n        <legend className=\"chayns-radio-group__legend\">{label}</legend>\n        <div className=\"chayns-radio-group__options\">{children}</div>\n      </fieldset>\n    </RadioGroupContext.Provider>\n  );\n});\n\nconst RadioGroup = Object.assign(RadioGroupRoot, { Radio });\n\nexport default RadioGroup;\n"],"mappings":";;;;AAKA,IAAM,QAAQ,WAAyC,SAAS,MAC9D,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,cAC3C,KACA;CACA,MAAM,QAAQ,qBAAqB;CACnC,MAAM,aAAa,MAAM,YAAY,aAAa;CAClD,MAAM,iBAAiB,CAAC,uBAAuB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAElF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,SAAD;IACE,GAAI;IACJ,SAAS,MAAM,UAAU;IACzB,WAAW;IACX,UAAU;IACV,MAAM,MAAM;IACZ,gBAAgB,MAAM,YAAY,KAAK;IAClC;IACL,MAAK;IACE;GACR,CAAA;GACD,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;GAAyB,CAAA;GAC5D,oBAAC,QAAD;IAAM,WAAU;IAAuB;GAAe,CAAA;EACjD;;AAEX,CAAC;AAED,IAAM,iBAAiB,WAAiD,SAAS,eAC/E,EACE,UACA,WACA,cACA,UACA,OACA,MACA,eACA,OACA,GAAG,iBAEL,KACA;CACA,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,YAAY;CACvE,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,gBAAgB,eAAe,QAAQ;CAC7C,MAAM,oBAAoB,CAAC,sBAAsB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpF,SAAS,YAAY,WAAmB;EACtC,IAAI,CAAC,cACH,qBAAqB,SAAS;EAGhC,gBAAgB,SAAS;CAC3B;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EACE,OAAO;GAAE,UAAU,aAAa;GAAM;GAAM;GAAa,OAAO;EAAc;EAE9E,UAAA,qBAAC,YAAD;GAAU,GAAI;GAAe,WAAW;GAA6B;GAAe;GAApF,UAAA,CACE,oBAAC,UAAD;IAAQ,WAAU;IAA8B,UAAA;GAAc,CAAA,GAC9D,oBAAC,OAAD;IAAK,WAAU;IAA+B;GAAc,CAAA,CACpD;;CACgB,CAAA;AAEhC,CAAC;AAED,IAAM,aAAa,OAAO,OAAO,gBAAgB,EAAE,MAAM,CAAC"}
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\n\nimport { RadioGroupContext, useRadioGroupContext } from './RadioGroupContext.js';\nimport type { RadioGroupProps, RadioProps } from './RadioGroup.types.js';\n\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { children, className, description, disabled, onChange, value, ...inputProps },\n  ref,\n) {\n  const group = useRadioGroupContext();\n  const isDisabled = group.disabled || disabled === true;\n  const inputClassName = ['chayns-radio__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-radio\">\n      <input\n        {...inputProps}\n        checked={group.value === value}\n        className={inputClassName}\n        disabled={isDisabled}\n        name={group.name}\n        onChange={(event) => {\n          onChange?.(event);\n          if (!event.defaultPrevented) {\n            group.selectValue(value);\n          }\n        }}\n        ref={ref}\n        type=\"radio\"\n        value={value}\n      />\n      <span aria-hidden=\"true\" className=\"chayns-radio__control\" />\n      <span className=\"chayns-radio__content\">\n        <span className=\"chayns-radio__label\">{children}</span>\n        {description !== undefined ? (\n          <span className=\"chayns-radio__description\">{description}</span>\n        ) : null}\n      </span>\n    </label>\n  );\n});\n\nconst RadioGroupRoot = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroupRoot(\n  {\n    children,\n    className,\n    defaultValue,\n    disabled,\n    label,\n    name,\n    onValueChange,\n    value,\n    ...fieldsetProps\n  },\n  ref,\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const selectedValue = isControlled ? value : uncontrolledValue;\n  const resolvedClassName = ['chayns-radio-group', className].filter(Boolean).join(' ');\n\n  function selectValue(nextValue: string) {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    onValueChange?.(nextValue);\n  }\n\n  return (\n    <RadioGroupContext.Provider\n      value={{ disabled: disabled === true, name, selectValue, value: selectedValue }}\n    >\n      <fieldset {...fieldsetProps} className={resolvedClassName} disabled={disabled} ref={ref}>\n        {label !== undefined ? (\n          <legend className=\"chayns-radio-group__legend\">{label}</legend>\n        ) : null}\n        <div className=\"chayns-radio-group__options\">{children}</div>\n      </fieldset>\n    </RadioGroupContext.Provider>\n  );\n});\n\nconst RadioGroup = Object.assign(RadioGroupRoot, { Radio });\n\nexport default RadioGroup;\n"],"mappings":";;;;AAKA,IAAM,QAAQ,WAAyC,SAAS,MAC9D,EAAE,UAAU,WAAW,aAAa,UAAU,UAAU,OAAO,GAAG,cAClE,KACA;CACA,MAAM,QAAQ,qBAAqB;CACnC,MAAM,aAAa,MAAM,YAAY,aAAa;CAClD,MAAM,iBAAiB,CAAC,uBAAuB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAElF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,SAAD;IACE,GAAI;IACJ,SAAS,MAAM,UAAU;IACzB,WAAW;IACX,UAAU;IACV,MAAM,MAAM;IACZ,WAAW,UAAU;KACnB,WAAW,KAAK;KAChB,IAAI,CAAC,MAAM,kBACT,MAAM,YAAY,KAAK;IAE3B;IACK;IACL,MAAK;IACE;GACR,CAAA;GACD,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;GAAyB,CAAA;GAC5D,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAuB;IAAe,CAAA,GACrD,gBAAgB,KAAA,IACf,oBAAC,QAAD;KAAM,WAAU;KAA6B,UAAA;IAAkB,CAAA,IAC7D,IACA;;EACD;;AAEX,CAAC;AAED,IAAM,iBAAiB,WAAiD,SAAS,eAC/E,EACE,UACA,WACA,cACA,UACA,OACA,MACA,eACA,OACA,GAAG,iBAEL,KACA;CACA,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,YAAY;CACvE,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,gBAAgB,eAAe,QAAQ;CAC7C,MAAM,oBAAoB,CAAC,sBAAsB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpF,SAAS,YAAY,WAAmB;EACtC,IAAI,CAAC,cACH,qBAAqB,SAAS;EAGhC,gBAAgB,SAAS;CAC3B;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EACE,OAAO;GAAE,UAAU,aAAa;GAAM;GAAM;GAAa,OAAO;EAAc;EAE9E,UAAA,qBAAC,YAAD;GAAU,GAAI;GAAe,WAAW;GAA6B;GAAe;GAApF,UAAA,CACG,UAAU,KAAA,IACT,oBAAC,UAAD;IAAQ,WAAU;IAA8B,UAAA;GAAc,CAAA,IAC5D,MACJ,oBAAC,OAAD;IAAK,WAAU;IAA+B;GAAc,CAAA,CACpD;;CACgB,CAAA;AAEhC,CAAC;AAED,IAAM,aAAa,OAAO,OAAO,gBAAgB,EAAE,MAAM,CAAC"}

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

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 /** Props for a labelled native radio fieldset. */
 export interface RadioGroupProps extends Omit<ComponentPropsWithRef<'fieldset'>, 'children' | 'name'> {
-    /** Visible, localized group label rendered as its legend. */
-    label: Exclude<ReactNode, boolean | null | undefined>;
+    /** Optional visible, localized group label rendered as its legend. */
+    label?: Exclude<ReactNode, boolean | null | undefined>;
     /** Shared native name forwarded to every Radio. */
     name: string;
     /** Controlled selected option value. */
@@ -20,11 +20,13 @@ export interface RadioProps extends Omit<ComponentPropsWithRef<'input'>, 'childr
     value: string;
     /** Visible, localized option label. */
     children: Exclude<ReactNode, boolean | null | undefined>;
+    /** Optional localized supporting text associated with the radio label. */
+    description?: ReactNode;
     /** RadioGroup owns the input type and selection relationship. */
     type?: never;
     name?: never;
     checked?: never;
     defaultChecked?: never;
-    onChange?: never;
+    onChange?: ComponentPropsWithRef<'input'>['onChange'];
 }
 //# sourceMappingURL=RadioGroup.types.d.ts.map

package/dist/components/radio-group/RadioGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,kDAAkD;AAClD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,qBAAqB,CAAC,UAAU,CAAC,EACjC,UAAU,GAAG,MAAM,CACpB;IACC,6DAA6D;IAC7D,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtD,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,gEAAgE;AAChE,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,qBAAqB,CAAC,OAAO,CAAC,EAC9B,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CACzE;IACC,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,iEAAiE;IACjE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB"}
+{"version":3,"file":"RadioGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,kDAAkD;AAClD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,qBAAqB,CAAC,UAAU,CAAC,EACjC,UAAU,GAAG,MAAM,CACpB;IACC,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvD,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,gEAAgE;AAChE,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,qBAAqB,CAAC,OAAO,CAAC,EAC9B,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CACzE;IACC,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,iEAAiE;IACjE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC;CACvD"}

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAyB,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAqMvF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;CAAmD,CAAC;AAE1E,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAyB,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAkNvF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;CAAmD,CAAC;AAE1E,eAAe,gBAAgB,CAAC"}

package/dist/components/segmented-control/SegmentedControl.js

@@ -1,13 +1,14 @@
+import ButtonIcon from "../button/button-icon/ButtonIcon.js";
 import { SegmentedControlContext, useSegmentedControlContext } from "./SegmentedControlContext.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControl.tsx
 function getOrderedSegments(segments) {
 	return [...segments.entries()].filter(([, element]) => !element.disabled).sort(([, first], [, second]) => {
 		return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
 	});
 }
-var Segment = forwardRef(function Segment({ children, className, disabled, value, ...buttonProps }, ref) {
+var Segment = forwardRef(function Segment({ children, className, disabled, icon, onClick, onKeyDown, value, ...buttonProps }, ref) {
 	const control = useSegmentedControlContext();
 	const localRef = useRef(null);
 	const isSelected = control.value === value;
@@ -26,6 +27,8 @@ var Segment = forwardRef(function Segment({ children, className, disabled, value
 		else if (ref !== null) ref.current = element;
 	}
 	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
 		if ([
 			"ArrowDown",
 			"ArrowLeft",
@@ -38,18 +41,22 @@ var Segment = forwardRef(function Segment({ children, className, disabled, value
 			control.moveFocus(value, event.key);
 		}
 	}
-	return /* @__PURE__ */ jsx("button", {
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) control.selectValue(value);
+	}
+	return /* @__PURE__ */ jsxs("button", {
 		...buttonProps,
 		"aria-checked": isSelected,
 		className: resolvedClassName,
 		disabled,
-		onClick: () => control.selectValue(value),
+		onClick: handleClick,
 		onKeyDown: handleKeyDown,
 		ref: setRef,
 		role: "radio",
 		tabIndex: isSelected ? 0 : -1,
 		type: "button",
-		children
+		children: [icon ? /* @__PURE__ */ jsx(ButtonIcon, { icon }) : null, children]
 	});
 });
 var SegmentedControlRoot = forwardRef(function SegmentedControlRoot({ children, className, defaultValue, label, onValueChange, value, ...rootProps }, ref) {

package/dist/components/segmented-control/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { SegmentedControlContext, useSegmentedControlContext } from './SegmentedControlContext.js';\nimport type { SegmentedControlProps, SegmentProps } from './SegmentedControl.types.js';\n\nfunction getOrderedSegments(segments: Map<string, HTMLButtonElement>) {\n  return [...segments.entries()]\n    .filter(([, element]) => !element.disabled)\n    .sort(([, first], [, second]) => {\n      const position = first.compareDocumentPosition(second);\n      return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n    });\n}\n\nconst Segment = forwardRef<HTMLButtonElement, SegmentProps>(function Segment(\n  { children, className, disabled, value, ...buttonProps },\n  ref,\n) {\n  const control = useSegmentedControlContext();\n  const localRef = useRef<HTMLButtonElement>(null);\n  const isSelected = control.value === value;\n  const resolvedClassName = [\n    'chayns-segmented-control__segment',\n    isSelected ? 'chayns-segmented-control__segment--selected' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useLayoutEffect(() => {\n    if (localRef.current === null) {\n      return undefined;\n    }\n\n    return control.registerSegment(value, localRef.current);\n  }, [control, value]);\n\n  function setRef(element: HTMLButtonElement | null) {\n    localRef.current = element;\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else if (ref !== null) {\n      ref.current = element;\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    const keys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home'];\n\n    if (keys.includes(event.key)) {\n      event.preventDefault();\n      control.moveFocus(value, event.key);\n    }\n  }\n\n  return (\n    <button\n      {...buttonProps}\n      aria-checked={isSelected}\n      className={resolvedClassName}\n      disabled={disabled}\n      onClick={() => control.selectValue(value)}\n      onKeyDown={handleKeyDown}\n      ref={setRef}\n      role=\"radio\"\n      tabIndex={isSelected ? 0 : -1}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControlRoot(\n    { children, className, defaultValue, label, onValueChange, value, ...rootProps },\n    ref,\n  ) {\n    const labelId = useId();\n    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n    const segments = useRef(new Map<string, HTMLButtonElement>());\n    const segmentsElement = useRef<HTMLDivElement>(null);\n    const [indicator, setIndicator] = useState({ offset: 0, width: 0 });\n    const selectedValue = value ?? uncontrolledValue ?? '';\n    const resolvedClassName = ['chayns-segmented-control', className].filter(Boolean).join(' ');\n\n    function selectValue(nextValue: string) {\n      if (value === undefined) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onValueChange?.(nextValue);\n    }\n\n    function registerSegment(segmentValue: string, element: HTMLButtonElement) {\n      segments.current.set(segmentValue, element);\n\n      return () => {\n        segments.current.delete(segmentValue);\n      };\n    }\n\n    function moveFocus(currentValue: string, key: string) {\n      const enabledSegments = getOrderedSegments(segments.current);\n      const currentIndex = enabledSegments.findIndex(\n        ([segmentValue]) => segmentValue === currentValue,\n      );\n\n      if (currentIndex === -1 || enabledSegments.length === 0) {\n        return;\n      }\n\n      let targetIndex = currentIndex;\n\n      if (key === 'Home') {\n        targetIndex = 0;\n      } else if (key === 'End') {\n        targetIndex = enabledSegments.length - 1;\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        targetIndex = (currentIndex - 1 + enabledSegments.length) % enabledSegments.length;\n      } else if (key === 'ArrowRight' || key === 'ArrowDown') {\n        targetIndex = (currentIndex + 1) % enabledSegments.length;\n      }\n\n      const nextSegment = enabledSegments[targetIndex];\n\n      if (nextSegment === undefined) {\n        return;\n      }\n\n      const [nextValue, nextElement] = nextSegment;\n      selectValue(nextValue);\n      nextElement.focus();\n    }\n\n    useLayoutEffect(() => {\n      const container = segmentsElement.current;\n      const selectedSegment = segments.current.get(selectedValue);\n\n      if (container === null || selectedSegment === undefined) {\n        return undefined;\n      }\n\n      const observedContainer = container;\n      const observedSegment = selectedSegment;\n\n      function updateIndicator() {\n        const paddingInlineStart = Number.parseFloat(\n          window.getComputedStyle(observedContainer).paddingInlineStart,\n        );\n\n        setIndicator({\n          offset:\n            observedSegment.offsetLeft -\n            (Number.isNaN(paddingInlineStart) ? 0 : paddingInlineStart),\n          width: observedSegment.offsetWidth,\n        });\n      }\n\n      updateIndicator();\n\n      if (typeof ResizeObserver === 'undefined') {\n        return undefined;\n      }\n\n      const observer = new ResizeObserver(updateIndicator);\n      observer.observe(observedContainer);\n\n      return () => observer.disconnect();\n    }, [selectedValue]);\n\n    return (\n      <SegmentedControlContext.Provider\n        value={{ moveFocus, registerSegment, selectValue, value: selectedValue }}\n      >\n        <div\n          {...rootProps}\n          aria-labelledby={labelId}\n          className={resolvedClassName}\n          ref={ref}\n          role=\"radiogroup\"\n        >\n          <span className=\"chayns-segmented-control__label\" id={labelId}>\n            {label}\n          </span>\n          <div className=\"chayns-segmented-control__segments\" ref={segmentsElement}>\n            <span\n              aria-hidden=\"true\"\n              className=\"chayns-segmented-control__indicator\"\n              style={{ transform: `translateX(${indicator.offset}px)`, width: indicator.width }}\n            />\n            {children}\n          </div>\n        </div>\n      </SegmentedControlContext.Provider>\n    );\n  },\n);\n\nconst SegmentedControl = Object.assign(SegmentedControlRoot, { Segment });\n\nexport default SegmentedControl;\n"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport { SegmentedControlContext, useSegmentedControlContext } from './SegmentedControlContext.js';\nimport type { SegmentedControlProps, SegmentProps } from './SegmentedControl.types.js';\n\nfunction getOrderedSegments(segments: Map<string, HTMLButtonElement>) {\n  return [...segments.entries()]\n    .filter(([, element]) => !element.disabled)\n    .sort(([, first], [, second]) => {\n      const position = first.compareDocumentPosition(second);\n      return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n    });\n}\n\nconst Segment = forwardRef<HTMLButtonElement, SegmentProps>(function Segment(\n  { children, className, disabled, icon, onClick, onKeyDown, value, ...buttonProps },\n  ref,\n) {\n  const control = useSegmentedControlContext();\n  const localRef = useRef<HTMLButtonElement>(null);\n  const isSelected = control.value === value;\n  const resolvedClassName = [\n    'chayns-segmented-control__segment',\n    isSelected ? 'chayns-segmented-control__segment--selected' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useLayoutEffect(() => {\n    if (localRef.current === null) {\n      return undefined;\n    }\n\n    return control.registerSegment(value, localRef.current);\n  }, [control, value]);\n\n  function setRef(element: HTMLButtonElement | null) {\n    localRef.current = element;\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else if (ref !== null) {\n      ref.current = element;\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const keys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home'];\n\n    if (keys.includes(event.key)) {\n      event.preventDefault();\n      control.moveFocus(value, event.key);\n    }\n  }\n\n  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (!event.defaultPrevented) {\n      control.selectValue(value);\n    }\n  }\n\n  return (\n    <button\n      {...buttonProps}\n      aria-checked={isSelected}\n      className={resolvedClassName}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      ref={setRef}\n      role=\"radio\"\n      tabIndex={isSelected ? 0 : -1}\n      type=\"button\"\n    >\n      {icon ? <ButtonIcon icon={icon} /> : null}\n      {children}\n    </button>\n  );\n});\n\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControlRoot(\n    { children, className, defaultValue, label, onValueChange, value, ...rootProps },\n    ref,\n  ) {\n    const labelId = useId();\n    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n    const segments = useRef(new Map<string, HTMLButtonElement>());\n    const segmentsElement = useRef<HTMLDivElement>(null);\n    const [indicator, setIndicator] = useState({ offset: 0, width: 0 });\n    const selectedValue = value ?? uncontrolledValue ?? '';\n    const resolvedClassName = ['chayns-segmented-control', className].filter(Boolean).join(' ');\n\n    function selectValue(nextValue: string) {\n      if (value === undefined) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onValueChange?.(nextValue);\n    }\n\n    function registerSegment(segmentValue: string, element: HTMLButtonElement) {\n      segments.current.set(segmentValue, element);\n\n      return () => {\n        segments.current.delete(segmentValue);\n      };\n    }\n\n    function moveFocus(currentValue: string, key: string) {\n      const enabledSegments = getOrderedSegments(segments.current);\n      const currentIndex = enabledSegments.findIndex(\n        ([segmentValue]) => segmentValue === currentValue,\n      );\n\n      if (currentIndex === -1 || enabledSegments.length === 0) {\n        return;\n      }\n\n      let targetIndex = currentIndex;\n\n      if (key === 'Home') {\n        targetIndex = 0;\n      } else if (key === 'End') {\n        targetIndex = enabledSegments.length - 1;\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        targetIndex = (currentIndex - 1 + enabledSegments.length) % enabledSegments.length;\n      } else if (key === 'ArrowRight' || key === 'ArrowDown') {\n        targetIndex = (currentIndex + 1) % enabledSegments.length;\n      }\n\n      const nextSegment = enabledSegments[targetIndex];\n\n      if (nextSegment === undefined) {\n        return;\n      }\n\n      const [nextValue, nextElement] = nextSegment;\n      selectValue(nextValue);\n      nextElement.focus();\n    }\n\n    useLayoutEffect(() => {\n      const container = segmentsElement.current;\n      const selectedSegment = segments.current.get(selectedValue);\n\n      if (container === null || selectedSegment === undefined) {\n        return undefined;\n      }\n\n      const observedContainer = container;\n      const observedSegment = selectedSegment;\n\n      function updateIndicator() {\n        const paddingInlineStart = Number.parseFloat(\n          window.getComputedStyle(observedContainer).paddingInlineStart,\n        );\n\n        setIndicator({\n          offset:\n            observedSegment.offsetLeft -\n            (Number.isNaN(paddingInlineStart) ? 0 : paddingInlineStart),\n          width: observedSegment.offsetWidth,\n        });\n      }\n\n      updateIndicator();\n\n      if (typeof ResizeObserver === 'undefined') {\n        return undefined;\n      }\n\n      const observer = new ResizeObserver(updateIndicator);\n      observer.observe(observedContainer);\n\n      return () => observer.disconnect();\n    }, [selectedValue]);\n\n    return (\n      <SegmentedControlContext.Provider\n        value={{ moveFocus, registerSegment, selectValue, value: selectedValue }}\n      >\n        <div\n          {...rootProps}\n          aria-labelledby={labelId}\n          className={resolvedClassName}\n          ref={ref}\n          role=\"radiogroup\"\n        >\n          <span className=\"chayns-segmented-control__label\" id={labelId}>\n            {label}\n          </span>\n          <div className=\"chayns-segmented-control__segments\" ref={segmentsElement}>\n            <span\n              aria-hidden=\"true\"\n              className=\"chayns-segmented-control__indicator\"\n              style={{ transform: `translateX(${indicator.offset}px)`, width: indicator.width }}\n            />\n            {children}\n          </div>\n        </div>\n      </SegmentedControlContext.Provider>\n    );\n  },\n);\n\nconst SegmentedControl = Object.assign(SegmentedControlRoot, { Segment });\n\nexport default SegmentedControl;\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { ButtonIcon } from '../button/Button.types.js';
 export interface ControlledSelection {
     /** Controlled selected segment value. */
     value: string;
@@ -30,12 +31,14 @@ export interface SegmentProps extends Omit<ComponentPropsWithRef<'button'>, 'ari
     value: string;
     /** Visible, localized button label. */
     children: Exclude<ReactNode, boolean | null | undefined>;
+    /** Optional leading FontAwesome icon shown with the segment label. */
+    icon?: ButtonIcon;
     /** SegmentedControl owns the native button semantics and interactions. */
     type?: never;
     role?: never;
     'aria-checked'?: never;
     tabIndex?: never;
-    onClick?: never;
-    onKeyDown?: never;
+    onClick?: ComponentPropsWithRef<'button'>['onClick'];
+    onKeyDown?: ComponentPropsWithRef<'button'>['onKeyDown'];
 }
 //# sourceMappingURL=SegmentedControl.types.d.ts.map

package/dist/components/segmented-control/SegmentedControl.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.types.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,mEAAmE;AACnE,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,qBAAqB,CAAC,KAAK,CAAC,EAC5B,iBAAiB,GAAG,UAAU,GAAG,MAAM,CACxC,GACC,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,GAAG;IAC9C,sCAAsC;IACtC,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtD,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CAAC;AAEJ,uDAAuD;AACvD,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CACrF;IACC,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD,0EAA0E;IAC1E,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB"}
+{"version":3,"file":"SegmentedControl.types.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,mEAAmE;AACnE,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,qBAAqB,CAAC,KAAK,CAAC,EAC5B,iBAAiB,GAAG,UAAU,GAAG,MAAM,CACxC,GACC,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,GAAG;IAC9C,sCAAsC;IACtC,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtD,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CAAC;AAEJ,uDAAuD;AACvD,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CACrF;IACC,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD,sEAAsE;IACtE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,OAAO,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC;CAC1D"}

package/dist/components/split-button/SplitButton.d.ts

@@ -1,4 +1,4 @@
 import type { SplitButtonProps } from './SplitButton.types.js';
-declare const SplitButton: ({ children, className, disabled, icon, items, onClick, variant, ...containerProps }: SplitButtonProps) => import("react").JSX.Element;
+declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<SplitButtonProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default SplitButton;
 //# sourceMappingURL=SplitButton.d.ts.map

package/dist/components/split-button/SplitButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../../src/components/split-button/SplitButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,QAAA,MAAM,WAAW,GAAI,qFASlB,gBAAgB,gCA+ClB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../../src/components/split-button/SplitButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,QAAA,MAAM,WAAW,0HAwCf,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/components/split-button/SplitButton.js

@@ -1,30 +1,21 @@
 import ButtonIcon from "../button/button-icon/ButtonIcon.js";
 import Button from "../button/Button.js";
 import PopupList from "../popup/PopupList.js";
+import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 //#region src/components/split-button/SplitButton.tsx
-var SplitButton = ({ children, className, disabled, icon, items, onClick, variant, ...containerProps }) => {
+var SplitButton = forwardRef(function SplitButton({ children, className, disabled, icon, items, onClick, variant, ...containerProps }, ref) {
 	const labelId = useId();
 	return /* @__PURE__ */ jsxs("div", {
 		...containerProps,
 		className: ["chayns-split-button", className].filter(Boolean).join(" "),
-		children: [icon ? /* @__PURE__ */ jsx(Button, {
+		ref,
+		children: [/* @__PURE__ */ jsx(Button, {
 			"aria-labelledby": labelId,
 			className: "chayns-split-button__primary",
-			...disabled ? { disabled: true } : {},
-			icon,
-			...onClick ? { onClick } : {},
-			variant,
-			children: /* @__PURE__ */ jsx("span", {
-				id: labelId,
-				children
-			})
-		}) : /* @__PURE__ */ jsx(Button, {
-			"aria-labelledby": labelId,
-			className: "chayns-split-button__primary",
-			...disabled ? { disabled: true } : {},
-			...onClick ? { onClick } : {},
+			disabled,
+			...icon ? { icon } : {},
+			onClick,
 			variant,
 			children: /* @__PURE__ */ jsx("span", {
 				id: labelId,
@@ -34,6 +25,7 @@ var SplitButton = ({ children, className, disabled, icon, items, onClick, varian
 			items,
 			trigger: /* @__PURE__ */ jsx("button", {
 				"aria-labelledby": labelId,
+				"aria-haspopup": "menu",
 				className: `chayns-split-button__trigger chayns-button--${variant}`,
 				...disabled ? { disabled: true } : {},
 				type: "button",
@@ -45,7 +37,7 @@ var SplitButton = ({ children, className, disabled, icon, items, onClick, varian
 			})
 		})]
 	});
-};
+});
 //#endregion
 export { SplitButton as default };
 

package/dist/components/split-button/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.js","names":[],"sources":["../../../src/components/split-button/SplitButton.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport Button from '../button/Button.js';\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport PopupList from '../popup/PopupList.js';\nimport type { SplitButtonProps } from './SplitButton.types.js';\n\nconst SplitButton = ({\n  children,\n  className,\n  disabled,\n  icon,\n  items,\n  onClick,\n  variant,\n  ...containerProps\n}: SplitButtonProps) => {\n  const labelId = useId();\n\n  return (\n    <div\n      {...containerProps}\n      className={['chayns-split-button', className].filter(Boolean).join(' ')}\n    >\n      {icon ? (\n        <Button\n          aria-labelledby={labelId}\n          className=\"chayns-split-button__primary\"\n          {...(disabled ? { disabled: true } : {})}\n          icon={icon}\n          {...(onClick ? { onClick } : {})}\n          variant={variant}\n        >\n          <span id={labelId}>{children}</span>\n        </Button>\n      ) : (\n        <Button\n          aria-labelledby={labelId}\n          className=\"chayns-split-button__primary\"\n          {...(disabled ? { disabled: true } : {})}\n          {...(onClick ? { onClick } : {})}\n          variant={variant}\n        >\n          <span id={labelId}>{children}</span>\n        </Button>\n      )}\n      <PopupList\n        items={items}\n        trigger={\n          <button\n            aria-labelledby={labelId}\n            className={`chayns-split-button__trigger chayns-button--${variant}`}\n            {...(disabled ? { disabled: true } : {})}\n            type=\"button\"\n          >\n            <span aria-hidden=\"true\" className=\"chayns-split-button__chevron\">\n              <ButtonIcon icon=\"fa-chevron-down\" />\n            </span>\n          </button>\n        }\n      />\n    </div>\n  );\n};\n\nexport default SplitButton;\n"],"mappings":";;;;;;AAOA,IAAM,eAAe,EACnB,UACA,WACA,UACA,MACA,OACA,SACA,SACA,GAAG,qBACmB;CACtB,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,CAAC,uBAAuB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAFxE,UAAA,CAIG,OACC,oBAAC,QAAD;GACE,mBAAiB;GACjB,WAAU;GACV,GAAK,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;GAChC;GACN,GAAK,UAAU,EAAE,QAAQ,IAAI,CAAC;GACrB;GAET,UAAA,oBAAC,QAAD;IAAM,IAAI;IAAU;GAAe,CAAA;EAC7B,CAAA,IAER,oBAAC,QAAD;GACE,mBAAiB;GACjB,WAAU;GACV,GAAK,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;GACtC,GAAK,UAAU,EAAE,QAAQ,IAAI,CAAC;GACrB;GAET,UAAA,oBAAC,QAAD;IAAM,IAAI;IAAU;GAAe,CAAA;EAC7B,CAAA,GAEV,oBAAC,WAAD;GACS;GACP,SACE,oBAAC,UAAD;IACE,mBAAiB;IACjB,WAAW,+CAA+C;IAC1D,GAAK,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAK;IAEL,UAAA,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KACjC,UAAA,oBAAC,YAAD,EAAY,MAAK,kBAAmB,CAAA;IAChC,CAAA;GACA,CAAA;EAEX,CAAA,CACE;;AAET"}
+{"version":3,"file":"SplitButton.js","names":[],"sources":["../../../src/components/split-button/SplitButton.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport Button from '../button/Button.js';\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport PopupList from '../popup/PopupList.js';\nimport type { SplitButtonProps } from './SplitButton.types.js';\n\nconst SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(function SplitButton(\n  { children, className, disabled, icon, items, onClick, variant, ...containerProps },\n  ref,\n) {\n  const labelId = useId();\n\n  return (\n    <div\n      {...containerProps}\n      className={['chayns-split-button', className].filter(Boolean).join(' ')}\n      ref={ref}\n    >\n      <Button\n        aria-labelledby={labelId}\n        className=\"chayns-split-button__primary\"\n        disabled={disabled}\n        {...(icon ? { icon } : {})}\n        onClick={onClick}\n        variant={variant}\n      >\n        <span id={labelId}>{children}</span>\n      </Button>\n      <PopupList\n        items={items}\n        trigger={\n          <button\n            aria-labelledby={labelId}\n            aria-haspopup=\"menu\"\n            className={`chayns-split-button__trigger chayns-button--${variant}`}\n            {...(disabled ? { disabled: true } : {})}\n            type=\"button\"\n          >\n            <span aria-hidden=\"true\" className=\"chayns-split-button__chevron\">\n              <ButtonIcon icon=\"fa-chevron-down\" />\n            </span>\n          </button>\n        }\n      />\n    </div>\n  );\n});\n\nexport default SplitButton;\n"],"mappings":";;;;;;AAOA,IAAM,cAAc,WAA6C,SAAS,YACxE,EAAE,UAAU,WAAW,UAAU,MAAM,OAAO,SAAS,SAAS,GAAG,kBACnE,KACA;CACA,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,CAAC,uBAAuB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACjE;EAHP,UAAA,CAKE,oBAAC,QAAD;GACE,mBAAiB;GACjB,WAAU;GACA;GACV,GAAK,OAAO,EAAE,KAAK,IAAI,CAAC;GACf;GACA;GAET,UAAA,oBAAC,QAAD;IAAM,IAAI;IAAU;GAAe,CAAA;EAC7B,CAAA,GACR,oBAAC,WAAD;GACS;GACP,SACE,oBAAC,UAAD;IACE,mBAAiB;IACjB,iBAAc;IACd,WAAW,+CAA+C;IAC1D,GAAK,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAK;IAEL,UAAA,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KACjC,UAAA,oBAAC,YAAD,EAAY,MAAK,kBAAmB,CAAA;IAChC,CAAA;GACA,CAAA;EAEX,CAAA,CACE;;AAET,CAAC"}

package/dist/components/switch/Switch.d.ts

@@ -1,4 +1,4 @@
 import type { SwitchProps } from './Switch.types.js';
-declare function Switch({ children, className, ...inputProps }: SwitchProps): import("react").JSX.Element;
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Switch;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/components/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,EAAE,WAAW,+BAYlE;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,QAAA,MAAM,MAAM,uHAoBV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/components/switch/Switch.js

@@ -1,17 +1,25 @@
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/switch/Switch.tsx
-function Switch({ children, className, ...inputProps }) {
+var Switch = forwardRef(function Switch({ children, className, description, ...inputProps }, ref) {
 	const inputClassName = ["chayns-switch__input", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("label", {
 		className: "chayns-switch",
 		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "chayns-switch__label",
-				children
+			/* @__PURE__ */ jsxs("span", {
+				className: "chayns-switch__content",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "chayns-switch__label",
+					children
+				}), description !== void 0 ? /* @__PURE__ */ jsx("span", {
+					className: "chayns-switch__description",
+					children: description
+				}) : null]
 			}),
 			/* @__PURE__ */ jsx("input", {
 				...inputProps,
 				className: inputClassName,
+				ref,
 				type: "checkbox"
 			}),
 			/* @__PURE__ */ jsx("span", {
@@ -21,7 +29,7 @@ function Switch({ children, className, ...inputProps }) {
 			})
 		]
 	});
-}
+});
 //#endregion
 export { Switch as default };
 

package/dist/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { SwitchProps } from './Switch.types.js';\n\nfunction Switch({ children, className, ...inputProps }: SwitchProps) {\n  const inputClassName = ['chayns-switch__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-switch\">\n      <span className=\"chayns-switch__label\">{children}</span>\n      <input {...inputProps} className={inputClassName} type=\"checkbox\" />\n      <span aria-hidden=\"true\" className=\"chayns-switch__control\">\n        <span className=\"chayns-switch__knob\" />\n      </span>\n    </label>\n  );\n}\n\nexport default Switch;\n"],"mappings":";;AAEA,SAAS,OAAO,EAAE,UAAU,WAAW,GAAG,cAA2B;CACnE,MAAM,iBAAiB,CAAC,wBAAwB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEnF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,QAAD;IAAM,WAAU;IAAwB;GAAe,CAAA;GACvD,oBAAC,SAAD;IAAO,GAAI;IAAY,WAAW;IAAgB,MAAK;GAAY,CAAA;GACnE,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,oBAAC,QAAD,EAAM,WAAU,sBAAuB,CAAA;GACnC,CAAA;EACD;;AAEX"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { SwitchProps } from './Switch.types.js';\n\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  { children, className, description, ...inputProps },\n  ref,\n) {\n  const inputClassName = ['chayns-switch__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-switch\">\n      <span className=\"chayns-switch__content\">\n        <span className=\"chayns-switch__label\">{children}</span>\n        {description !== undefined ? (\n          <span className=\"chayns-switch__description\">{description}</span>\n        ) : null}\n      </span>\n      <input {...inputProps} className={inputClassName} ref={ref} type=\"checkbox\" />\n      <span aria-hidden=\"true\" className=\"chayns-switch__control\">\n        <span className=\"chayns-switch__knob\" />\n      </span>\n    </label>\n  );\n});\n\nexport default Switch;\n"],"mappings":";;;AAIA,IAAM,SAAS,WAA0C,SAAS,OAChE,EAAE,UAAU,WAAW,aAAa,GAAG,cACvC,KACA;CACA,MAAM,iBAAiB,CAAC,wBAAwB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEnF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAwB;IAAe,CAAA,GACtD,gBAAgB,KAAA,IACf,oBAAC,QAAD;KAAM,WAAU;KAA8B,UAAA;IAAkB,CAAA,IAC9D,IACA;;GACN,oBAAC,SAAD;IAAO,GAAI;IAAY,WAAW;IAAqB;IAAK,MAAK;GAAY,CAAA;GAC7E,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,oBAAC,QAAD,EAAM,WAAU,sBAAuB,CAAA;GACnC,CAAA;EACD;;AAEX,CAAC"}

package/dist/components/switch/Switch.types.d.ts

@@ -3,6 +3,8 @@ import type { ComponentPropsWithRef, ReactNode } from 'react';
 export interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'children' | 'type'> {
     /** Visible, localized label associated with the native checkbox. */
     children: Exclude<ReactNode, boolean | null | undefined>;
+    /** Optional localized supporting text associated with the switch label. */
+    description?: ReactNode;
     /** Switch owns its native input type. */
     type?: never;
 }

package/dist/components/switch/Switch.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,8EAA8E;AAC9E,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5F,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,yCAAyC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}
+{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,8EAA8E;AAC9E,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5F,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,2EAA2E;IAC3E,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,yCAAyC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}

package/dist/components/text-area/TextArea.d.ts

@@ -1,4 +1,4 @@
 import type { TextAreaProps } from './TextArea.types.js';
-declare function TextArea({ className, counter, error, helpText, id, placeholder, ...textareaProps }: TextAreaProps): import("react").JSX.Element;
+declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/components/text-area/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,WAAW,EACX,GAAG,aAAa,EACjB,EAAE,aAAa,+BAuCf;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,QAAA,MAAM,QAAQ,4HA2CZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/components/text-area/TextArea.js

@@ -1,7 +1,7 @@
+import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 //#region src/components/text-area/TextArea.tsx
-function TextArea({ className, counter, error, helpText, id, placeholder, ...textareaProps }) {
+var TextArea = forwardRef(function TextArea({ className, counter, error, helpText, id, placeholder, ...textareaProps }, ref) {
 	const generatedId = useId();
 	const textareaId = id ?? generatedId;
 	const hasError = error !== void 0;
@@ -18,7 +18,8 @@ function TextArea({ className, counter, error, helpText, id, placeholder, ...tex
 				"aria-invalid": hasError || void 0,
 				className: textareaClassName,
 				id: textareaId,
-				placeholder: placeholder === void 0 ? void 0 : " "
+				placeholder: placeholder === void 0 ? void 0 : " ",
+				ref
 			}),
 			placeholder !== void 0 ? /* @__PURE__ */ jsx("label", {
 				className: "chayns-text-area__label",
@@ -38,7 +39,7 @@ function TextArea({ className, counter, error, helpText, id, placeholder, ...tex
 			}) : null
 		]
 	});
-}
+});
 //#endregion
 export { TextArea as default };