@edux-design/forms 0.0.7 → 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"));
@@ -383,6 +425,7 @@ var Checkbox = (0, import_react7.forwardRef)(
   ({
     className,
     indeterminate = false,
+    plus = false,
     variant = "primary",
     disabled,
     id: providedId,
@@ -407,7 +450,7 @@ var Checkbox = (0, import_react7.forwardRef)(
       ...ariaDescribedByProp ? ariaDescribedByProp.split(" ") : []
     ].filter(Boolean);
     const describedBy = describedByTokens.length ? describedByTokens.join(" ") : void 0;
-    const ariaChecked = indeterminate ? "mixed" : ariaCheckedProp;
+    const ariaChecked = indeterminate || plus ? "mixed" : ariaCheckedProp;
     const inputRef = (0, import_react7.useRef)(null);
     const setRefs = (0, import_react7.useCallback)(
       (node) => {
@@ -468,8 +511,8 @@ var Checkbox = (0, import_react7.forwardRef)(
                 !isDisabled && intent.activeBg,
                 intent.peerSelectedBorder,
                 intent.peerSelectedBg,
-                indeterminate && intent.selectedBorder,
-                indeterminate && intent.selectedBg
+                (indeterminate || plus) && intent.selectedBorder,
+                (indeterminate || plus) && intent.selectedBg
               )
             }
           ),
@@ -481,7 +524,7 @@ var Checkbox = (0, import_react7.forwardRef)(
                 "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150",
                 intent.iconColor,
                 "peer-disabled:text-fg-inactive",
-                indeterminate ? "opacity-0" : "opacity-0 peer-checked:opacity-100"
+                indeterminate || plus ? "opacity-0" : "opacity-0 peer-checked:opacity-100"
               )
             }
           ),
@@ -493,7 +536,19 @@ var Checkbox = (0, import_react7.forwardRef)(
                 "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150",
                 intent.iconColor,
                 "peer-disabled:text-fg-inactive",
-                indeterminate ? "opacity-100" : "opacity-0"
+                indeterminate && !plus ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_icons3.Plus,
+            {
+              "aria-hidden": "true",
+              className: (0, import_utils4.cx)(
+                "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150",
+                intent.iconColor,
+                "peer-disabled:text-fg-inactive",
+                plus ? "opacity-100" : "opacity-0"
               )
             }
           )
@@ -578,6 +633,7 @@ var Switch = (0, import_react8.forwardRef)(
     disabled,
     id: providedId,
     checked,
+    defaultChecked = false,
     onChange,
     ...rest
   }, ref) => {
@@ -593,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",
       {
@@ -608,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)(
@@ -658,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,42 +242,84 @@ 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 } from "@edux-design/icons";
+import { Check, Indeterminate, Plus } from "@edux-design/icons";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var VARIANT_INTENTS = {
   primary: {
@@ -341,10 +383,11 @@ var VARIANT_INTENTS = {
     iconColor: "text-fg-inactive"
   }
 };
-var Checkbox = forwardRef2(
+var Checkbox = forwardRef3(
   ({
     className,
     indeterminate = false,
+    plus = false,
     variant = "primary",
     disabled,
     id: providedId,
@@ -369,7 +412,7 @@ var Checkbox = forwardRef2(
       ...ariaDescribedByProp ? ariaDescribedByProp.split(" ") : []
     ].filter(Boolean);
     const describedBy = describedByTokens.length ? describedByTokens.join(" ") : void 0;
-    const ariaChecked = indeterminate ? "mixed" : ariaCheckedProp;
+    const ariaChecked = indeterminate || plus ? "mixed" : ariaCheckedProp;
     const inputRef = useRef(null);
     const setRefs = useCallback3(
       (node) => {
@@ -430,8 +473,8 @@ var Checkbox = forwardRef2(
                 !isDisabled && intent.activeBg,
                 intent.peerSelectedBorder,
                 intent.peerSelectedBg,
-                indeterminate && intent.selectedBorder,
-                indeterminate && intent.selectedBg
+                (indeterminate || plus) && intent.selectedBorder,
+                (indeterminate || plus) && intent.selectedBg
               )
             }
           ),
@@ -443,7 +486,7 @@ var Checkbox = forwardRef2(
                 "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150",
                 intent.iconColor,
                 "peer-disabled:text-fg-inactive",
-                indeterminate ? "opacity-0" : "opacity-0 peer-checked:opacity-100"
+                indeterminate || plus ? "opacity-0" : "opacity-0 peer-checked:opacity-100"
               )
             }
           ),
@@ -455,7 +498,19 @@ var Checkbox = forwardRef2(
                 "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150",
                 intent.iconColor,
                 "peer-disabled:text-fg-inactive",
-                indeterminate ? "opacity-100" : "opacity-0"
+                indeterminate && !plus ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Plus,
+            {
+              "aria-hidden": "true",
+              className: cx4(
+                "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150",
+                intent.iconColor,
+                "peer-disabled:text-fg-inactive",
+                plus ? "opacity-100" : "opacity-0"
               )
             }
           )
@@ -467,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";
@@ -533,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) => {
@@ -555,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",
       {
@@ -570,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(
@@ -620,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)
                 }
               )
@@ -639,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,
@@ -730,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,
@@ -768,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,
@@ -1264,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.7",
+  "version": "0.0.9",
   "sideEffects": [
     "**/*.css"
   ],