@edux-design/forms 0.0.8 → 0.0.9

package/dist/index.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 
 declare function Label({ children, hint, description, ...props }: {
@@ -57,7 +56,29 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     }) => void;
 };
 
-declare function Radio(): react_jsx_runtime.JSX.Element;
+/**
+ * Minimal radio control wired to the surrounding Field context.
+ *
+ * @typedef {React.InputHTMLAttributes<HTMLInputElement> & {
+ *   className?: string,
+ * }} RadioProps
+ */
+/**
+ * Radio component.
+ *
+ * Provides a styled radio input that integrates with the Field context and
+ * supports both controlled (`checked`) and uncontrolled (`defaultChecked`) use.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>}
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Minimal radio control wired to the surrounding Field context.
+ */
+type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string;
+};
 
 declare const Checkbox: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
 

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 
 declare function Label({ children, hint, description, ...props }: {
@@ -57,7 +56,29 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     }) => void;
 };
 
-declare function Radio(): react_jsx_runtime.JSX.Element;
+/**
+ * Minimal radio control wired to the surrounding Field context.
+ *
+ * @typedef {React.InputHTMLAttributes<HTMLInputElement> & {
+ *   className?: string,
+ * }} RadioProps
+ */
+/**
+ * Radio component.
+ *
+ * Provides a styled radio input that integrates with the Field context and
+ * supports both controlled (`checked`) and uncontrolled (`defaultChecked`) use.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>}
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Minimal radio control wired to the surrounding Field context.
+ */
+type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string;
+};
 
 declare const Checkbox: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
 

package/dist/index.js

@@ -283,34 +283,76 @@ Field.Feedback = Feedback;
 var import_react6 = __toESM(require("react"));
 var import_utils3 = require("@edux-design/utils");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function Radio() {
-  const { labelHTMLForId } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative inline-flex items-center justify-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "input",
-      {
-        id: labelHTMLForId,
-        type: "radio",
-        className: (0, import_utils3.cx)(
-          "peer absolute inset-0 z-10 cursor-pointer appearance-none rounded-full",
-          "focus:shadow-focus focus-visible:shadow-focus focus:outline-none focus-visible:outline-none"
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "span",
+var Radio = (0, import_react6.forwardRef)(
+  ({
+    className,
+    id: providedId,
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    ...rest
+  }, ref) => {
+    const {
+      ["aria-describedby"]: ariaDescribedByProp,
+      ...inputProps
+    } = rest;
+    const { labelHTMLForId, describedByIds = [] } = useFieldContext();
+    const resolvedId = providedId ?? labelHTMLForId;
+    const isControlled = checked !== void 0;
+    const isDisabled = Boolean(disabled);
+    const describedByTokens = [
+      ...describedByIds,
+      ...ariaDescribedByProp ? ariaDescribedByProp.split(" ") : []
+    ].filter(Boolean);
+    const ariaDescribedBy = describedByTokens.length ? describedByTokens.join(" ") : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
       {
         className: (0, import_utils3.cx)(
-          "block rounded-full border-1 border-border-base",
-          "h-[28px] w-[28px]",
-          "peer-checked:border-border-primary-base peer-checked:border-8",
-          "transition-colors",
-          "peer-hover:border-2 peer-hover:border-border-primary-base peer-checked:peer-hover:border-8 peer-checked:peer-hover:border-border-primary-base"
-        )
+          "relative inline-flex h-[28px] w-[28px] items-center justify-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              id: resolvedId,
+              ref,
+              type: "radio",
+              className: (0, import_utils3.cx)(
+                "peer absolute inset-0 h-full w-full cursor-pointer appearance-none rounded-full bg-transparent",
+                "focus:shadow-focus focus-visible:shadow-focus focus:outline-none focus-visible:outline-none",
+                isDisabled && "cursor-not-allowed"
+              ),
+              "aria-describedby": ariaDescribedBy,
+              "aria-disabled": isDisabled ? "true" : void 0,
+              disabled: isDisabled,
+              checked: isControlled ? checked : void 0,
+              defaultChecked: !isControlled ? defaultChecked : void 0,
+              onChange,
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "radio-control",
+              className: (0, import_utils3.cx)(
+                "block h-full w-full rounded-full border-2 border-border-base transition-colors",
+                "peer-checked:border-border-primary-base peer-checked:border-[8px]",
+                "peer-hover:border-2 peer-hover:border-border-primary-base peer-checked:peer-hover:border-[8px] peer-checked:peer-hover:border-border-primary-base",
+                "peer-disabled:border-border-subtle peer-disabled:bg-bg-inactive"
+              )
+            }
+          )
+        ]
       }
-    )
-  ] });
-}
+    );
+  }
+);
+Radio.displayName = "Radio";
 
 // src/elements/Checkbox.jsx
 var import_react7 = __toESM(require("react"));
@@ -591,6 +633,7 @@ var Switch = (0, import_react8.forwardRef)(
     disabled,
     id: providedId,
     checked,
+    defaultChecked = false,
     onChange,
     ...rest
   }, ref) => {
@@ -606,8 +649,11 @@ var Switch = (0, import_react8.forwardRef)(
     const derivedDisabled = Boolean(disabled);
     const isInactiveVariant = variant === "inactive";
     const isDisabled = derivedDisabled || isInactiveVariant;
-    const [unControlledChecked, setUnControlledChecked] = (0, import_react8.useState)(false);
-    const isOn = checked ?? unControlledChecked;
+    const [unControlledChecked, setUnControlledChecked] = (0, import_react8.useState)(
+      () => Boolean(defaultChecked)
+    );
+    const isControlled = checked !== void 0;
+    const isOn = isControlled ? checked : unControlledChecked;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
@@ -621,8 +667,8 @@ var Switch = (0, import_react8.forwardRef)(
             {
               id: resolvedId,
               ref,
-              onChange: onChange ? onChange : () => setUnControlledChecked(!unControlledChecked),
-              checked: checked ? checked : unControlledChecked,
+              onChange: onChange ? onChange : (event) => setUnControlledChecked(event.target.checked),
+              checked: isControlled ? checked : unControlledChecked,
               type: "checkbox",
               role: "switch",
               className: (0, import_utils5.cx)(
@@ -671,12 +717,14 @@ var Switch = (0, import_react8.forwardRef)(
                 import_icons4.Close,
                 {
                   "aria-hidden": "true",
+                  "data-state": "off",
                   className: (0, import_utils5.cx)("absolute  duration-150", intent.offIcon)
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 import_icons4.Check,
                 {
                   "aria-hidden": "true",
+                  "data-state": "on",
                   className: (0, import_utils5.cx)("absolute   duration-150", intent.onIcon)
                 }
               )

package/dist/index.mjs

@@ -242,40 +242,82 @@ function Feedback({ id, tone, children, className, ...rest }) {
 Field.Feedback = Feedback;
 
 // src/elements/Radio.jsx
-import React5 from "react";
+import React5, { forwardRef as forwardRef2 } from "react";
 import { cx as cx3 } from "@edux-design/utils";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function Radio() {
-  const { labelHTMLForId } = useFieldContext();
-  return /* @__PURE__ */ jsxs4("div", { className: "relative inline-flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        id: labelHTMLForId,
-        type: "radio",
-        className: cx3(
-          "peer absolute inset-0 z-10 cursor-pointer appearance-none rounded-full",
-          "focus:shadow-focus focus-visible:shadow-focus focus:outline-none focus-visible:outline-none"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      "span",
+var Radio = forwardRef2(
+  ({
+    className,
+    id: providedId,
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    ...rest
+  }, ref) => {
+    const {
+      ["aria-describedby"]: ariaDescribedByProp,
+      ...inputProps
+    } = rest;
+    const { labelHTMLForId, describedByIds = [] } = useFieldContext();
+    const resolvedId = providedId ?? labelHTMLForId;
+    const isControlled = checked !== void 0;
+    const isDisabled = Boolean(disabled);
+    const describedByTokens = [
+      ...describedByIds,
+      ...ariaDescribedByProp ? ariaDescribedByProp.split(" ") : []
+    ].filter(Boolean);
+    const ariaDescribedBy = describedByTokens.length ? describedByTokens.join(" ") : void 0;
+    return /* @__PURE__ */ jsxs4(
+      "div",
       {
         className: cx3(
-          "block rounded-full border-1 border-border-base",
-          "h-[28px] w-[28px]",
-          "peer-checked:border-border-primary-base peer-checked:border-8",
-          "transition-colors",
-          "peer-hover:border-2 peer-hover:border-border-primary-base peer-checked:peer-hover:border-8 peer-checked:peer-hover:border-border-primary-base"
-        )
+          "relative inline-flex h-[28px] w-[28px] items-center justify-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              id: resolvedId,
+              ref,
+              type: "radio",
+              className: cx3(
+                "peer absolute inset-0 h-full w-full cursor-pointer appearance-none rounded-full bg-transparent",
+                "focus:shadow-focus focus-visible:shadow-focus focus:outline-none focus-visible:outline-none",
+                isDisabled && "cursor-not-allowed"
+              ),
+              "aria-describedby": ariaDescribedBy,
+              "aria-disabled": isDisabled ? "true" : void 0,
+              disabled: isDisabled,
+              checked: isControlled ? checked : void 0,
+              defaultChecked: !isControlled ? defaultChecked : void 0,
+              onChange,
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "radio-control",
+              className: cx3(
+                "block h-full w-full rounded-full border-2 border-border-base transition-colors",
+                "peer-checked:border-border-primary-base peer-checked:border-[8px]",
+                "peer-hover:border-2 peer-hover:border-border-primary-base peer-checked:peer-hover:border-[8px] peer-checked:peer-hover:border-border-primary-base",
+                "peer-disabled:border-border-subtle peer-disabled:bg-bg-inactive"
+              )
+            }
+          )
+        ]
       }
-    )
-  ] });
-}
+    );
+  }
+);
+Radio.displayName = "Radio";
 
 // src/elements/Checkbox.jsx
-import React6, { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect2, useRef } from "react";
+import React6, { forwardRef as forwardRef3, useCallback as useCallback3, useEffect as useEffect2, useRef } from "react";
 import { cx as cx4 } from "@edux-design/utils";
 import { Check, Indeterminate, Plus } from "@edux-design/icons";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -341,7 +383,7 @@ var VARIANT_INTENTS = {
     iconColor: "text-fg-inactive"
   }
 };
-var Checkbox = forwardRef2(
+var Checkbox = forwardRef3(
   ({
     className,
     indeterminate = false,
@@ -480,7 +522,7 @@ var Checkbox = forwardRef2(
 Checkbox.displayName = "Checkbox";
 
 // src/elements/Switch.jsx
-import React7, { forwardRef as forwardRef3, useState as useState2 } from "react";
+import React7, { forwardRef as forwardRef4, useState as useState2 } from "react";
 import { cx as cx5 } from "@edux-design/utils";
 import { Check as Check2, Close as Close3 } from "@edux-design/icons";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -546,13 +588,14 @@ var SWITCH_INTENTS = {
     onIcon: "text-fg-inactive"
   }
 };
-var Switch = forwardRef3(
+var Switch = forwardRef4(
   ({
     className,
     variant = "primary",
     disabled,
     id: providedId,
     checked,
+    defaultChecked = false,
     onChange,
     ...rest
   }, ref) => {
@@ -568,8 +611,11 @@ var Switch = forwardRef3(
     const derivedDisabled = Boolean(disabled);
     const isInactiveVariant = variant === "inactive";
     const isDisabled = derivedDisabled || isInactiveVariant;
-    const [unControlledChecked, setUnControlledChecked] = useState2(false);
-    const isOn = checked ?? unControlledChecked;
+    const [unControlledChecked, setUnControlledChecked] = useState2(
+      () => Boolean(defaultChecked)
+    );
+    const isControlled = checked !== void 0;
+    const isOn = isControlled ? checked : unControlledChecked;
     return /* @__PURE__ */ jsxs6(
       "div",
       {
@@ -583,8 +629,8 @@ var Switch = forwardRef3(
             {
               id: resolvedId,
               ref,
-              onChange: onChange ? onChange : () => setUnControlledChecked(!unControlledChecked),
-              checked: checked ? checked : unControlledChecked,
+              onChange: onChange ? onChange : (event) => setUnControlledChecked(event.target.checked),
+              checked: isControlled ? checked : unControlledChecked,
               type: "checkbox",
               role: "switch",
               className: cx5(
@@ -633,12 +679,14 @@ var Switch = forwardRef3(
                 Close3,
                 {
                   "aria-hidden": "true",
+                  "data-state": "off",
                   className: cx5("absolute  duration-150", intent.offIcon)
                 }
               ) : /* @__PURE__ */ jsx7(
                 Check2,
                 {
                   "aria-hidden": "true",
+                  "data-state": "on",
                   className: cx5("absolute   duration-150", intent.onIcon)
                 }
               )
@@ -652,11 +700,11 @@ var Switch = forwardRef3(
 Switch.displayName = "Switch";
 
 // src/elements/Textarea.jsx
-import React8, { forwardRef as forwardRef4 } from "react";
+import React8, { forwardRef as forwardRef5 } from "react";
 import { cx as cx6 } from "@edux-design/utils";
 import { Close as Close4 } from "@edux-design/icons";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var Textarea = forwardRef4(
+var Textarea = forwardRef5(
   ({
     children,
     validation,
@@ -743,7 +791,7 @@ var Textarea = forwardRef4(
 
 // src/elements/Combobox.jsx
 import React9, {
-  forwardRef as forwardRef5,
+  forwardRef as forwardRef6,
   useCallback as useCallback4,
   useEffect as useEffect3,
   useId as useId3,
@@ -781,7 +829,7 @@ var defaultFilter = (option, query) => {
   const normalisedLabel = ((_a = option.label) == null ? void 0 : _a.toString().toLowerCase()) ?? "";
   return normalisedLabel.includes(query.trim().toLowerCase());
 };
-var ComboboxRoot = forwardRef5(
+var ComboboxRoot = forwardRef6(
   ({
     children,
     value,
@@ -1277,7 +1325,7 @@ var ComboboxRoot = forwardRef5(
   }
 );
 ComboboxRoot.displayName = "Combobox";
-var ComboboxOption = forwardRef5(function ComboboxOption2({ children, label, ...props }, ref) {
+var ComboboxOption = forwardRef6(function ComboboxOption2({ children, label, ...props }, ref) {
   return /* @__PURE__ */ jsx9("li", { ref, ...props, children: children ?? label });
 });
 ComboboxOption.displayName = OPTION_COMPONENT_NAME;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/forms",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "sideEffects": [
     "**/*.css"
   ],