@edux-design/forms 0.0.3 → 0.0.4

package/dist/index.d.mts

@@ -0,0 +1,187 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Label({ children, hint, description, ...props }: {
+    children: React.ReactNode;
+    hint?: "required" | "optional" | undefined;
+    description?: string;
+    hidden?: boolean;
+}): React.ReactElement;
+
+/**
+ * Props for the Input component.
+ *
+ * Extends all native HTML `<input>` attributes, while adding
+ * custom props for variants, icons, and clearable control.
+ *
+ * @typedef {React.InputHTMLAttributes<HTMLInputElement> & {
+ *   children?: React.ReactNode,
+ *   autocomplete?: string,
+ *   variant?: "primary"|"error"|"corrective"|"success"|"inactive",
+ *   clearable?: boolean,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode|string,
+ *   value?: any,
+ *   onChange?: (e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } }) => void,
+ * }} InputProps
+ */
+/**
+ * Input component for form fields.
+ *
+ * Provides a styled text input that integrates with `useFieldContext` for
+ * accessible label association. Supports variants, start/end icons, and
+ * an optional clearable control.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>}
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Props for the Input component.
+ *
+ * Extends all native HTML `<input>` attributes, while adding
+ * custom props for variants, icons, and clearable control.
+ */
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    children?: React.ReactNode;
+    autocomplete?: string;
+    variant?: "primary" | "error" | "corrective" | "success" | "inactive";
+    clearable?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode | string;
+    value?: any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement> | {
+        target: {
+            value: string;
+        };
+    }) => void;
+};
+
+declare function Radio(): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the Textarea component.
+ *
+ * Extends all native HTML `<textarea>` attributes, while adding
+ * custom props for variants, icons, and clearable control.
+ *
+ * @typedef {React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+ *   children?: React.ReactNode,
+ *   variant?: "primary"|"error"|"corrective"|"success"|"inactive",
+ *   clearable?: boolean,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode|string,
+ *   value?: any,
+ *   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | { target: { value: string } }) => void,
+ * }} TextareaProps
+ */
+/**
+ * Textarea component for form fields.
+ *
+ * Provides a styled multi-line text area that integrates with `useFieldContext`
+ * for accessible label association. Supports variants, start/end icons, and
+ * an optional clearable control.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>}
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+/**
+ * Props for the Textarea component.
+ *
+ * Extends all native HTML `<textarea>` attributes, while adding
+ * custom props for variants, icons, and clearable control.
+ */
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    children?: React.ReactNode;
+    variant?: "primary" | "error" | "corrective" | "success" | "inactive";
+    clearable?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode | string;
+    value?: any;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | {
+        target: {
+            value: string;
+        };
+    }) => void;
+};
+
+/**
+ * Feedback tone values.
+ * @typedef {"info"|"success"|"warning"|"error" | "corrective" | undefined} FeedbackTone
+ */
+/**
+ * Props for the Feedback component.
+ *
+ * @typedef {Object} FeedbackProps
+ * @property {string} [id] - Optional ID; falls back to auto-generated based on parent Field.
+ * @property {FeedbackTone} [tone] - Visual + semantic feedback tone.
+ * @property {React.ReactNode} [children] - Content of the feedback message.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {any} [rest] - Extra props passed to the container `<div>`.
+ */
+/**
+ * Context-aware field feedback (help, error, success, etc.)
+ * Registers its id with the parent Field so Input can set `aria-describedby`.
+ *
+ * Can be used as:
+ * ```jsx
+ * <Field.Feedback tone="help">Helpful hint</Field.Feedback>
+ * ```
+ * or imported directly:
+ * ```jsx
+ * import { Feedback } from "./Field";
+ * ```
+ *
+ * Accessibility:
+ * - `"error"` tone sets `role="alert"` and `aria-live="assertive"`.
+ * - All other tones use `aria-live="polite"`.
+ *
+ * @component
+ * @param {FeedbackProps} props
+ * @returns {React.ReactElement}
+ */
+declare function Feedback({ id, tone, children, className, ...rest }: FeedbackProps): React.ReactElement;
+declare function Field({ children }: FieldProps): React.ReactElement;
+declare namespace Field {
+    export { Feedback };
+}
+/**
+ * Feedback tone values.
+ */
+type FeedbackTone = "info" | "success" | "warning" | "error" | "corrective" | undefined;
+/**
+ * Props for the Feedback component.
+ */
+type FeedbackProps = {
+    /**
+     * - Optional ID; falls back to auto-generated based on parent Field.
+     */
+    id?: string;
+    /**
+     * - Visual + semantic feedback tone.
+     */
+    tone?: FeedbackTone;
+    /**
+     * - Content of the feedback message.
+     */
+    children?: React.ReactNode;
+    /**
+     * - Additional CSS classes.
+     */
+    className?: string;
+    /**
+     * - Extra props passed to the container `<div>`.
+     */
+    rest?: any;
+};
+/**
+ * Props for the Field component.
+ */
+type FieldProps = {
+    /**
+     * - Elements to render inside the field wrapper.
+     */
+    children: React.ReactNode;
+};
+
+export { Feedback, Field, Input, Label, Radio, Textarea };

package/dist/index.d.ts

@@ -0,0 +1,187 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Label({ children, hint, description, ...props }: {
+    children: React.ReactNode;
+    hint?: "required" | "optional" | undefined;
+    description?: string;
+    hidden?: boolean;
+}): React.ReactElement;
+
+/**
+ * Props for the Input component.
+ *
+ * Extends all native HTML `<input>` attributes, while adding
+ * custom props for variants, icons, and clearable control.
+ *
+ * @typedef {React.InputHTMLAttributes<HTMLInputElement> & {
+ *   children?: React.ReactNode,
+ *   autocomplete?: string,
+ *   variant?: "primary"|"error"|"corrective"|"success"|"inactive",
+ *   clearable?: boolean,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode|string,
+ *   value?: any,
+ *   onChange?: (e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } }) => void,
+ * }} InputProps
+ */
+/**
+ * Input component for form fields.
+ *
+ * Provides a styled text input that integrates with `useFieldContext` for
+ * accessible label association. Supports variants, start/end icons, and
+ * an optional clearable control.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>}
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Props for the Input component.
+ *
+ * Extends all native HTML `<input>` attributes, while adding
+ * custom props for variants, icons, and clearable control.
+ */
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    children?: React.ReactNode;
+    autocomplete?: string;
+    variant?: "primary" | "error" | "corrective" | "success" | "inactive";
+    clearable?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode | string;
+    value?: any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement> | {
+        target: {
+            value: string;
+        };
+    }) => void;
+};
+
+declare function Radio(): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the Textarea component.
+ *
+ * Extends all native HTML `<textarea>` attributes, while adding
+ * custom props for variants, icons, and clearable control.
+ *
+ * @typedef {React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+ *   children?: React.ReactNode,
+ *   variant?: "primary"|"error"|"corrective"|"success"|"inactive",
+ *   clearable?: boolean,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode|string,
+ *   value?: any,
+ *   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | { target: { value: string } }) => void,
+ * }} TextareaProps
+ */
+/**
+ * Textarea component for form fields.
+ *
+ * Provides a styled multi-line text area that integrates with `useFieldContext`
+ * for accessible label association. Supports variants, start/end icons, and
+ * an optional clearable control.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>}
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+/**
+ * Props for the Textarea component.
+ *
+ * Extends all native HTML `<textarea>` attributes, while adding
+ * custom props for variants, icons, and clearable control.
+ */
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    children?: React.ReactNode;
+    variant?: "primary" | "error" | "corrective" | "success" | "inactive";
+    clearable?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode | string;
+    value?: any;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | {
+        target: {
+            value: string;
+        };
+    }) => void;
+};
+
+/**
+ * Feedback tone values.
+ * @typedef {"info"|"success"|"warning"|"error" | "corrective" | undefined} FeedbackTone
+ */
+/**
+ * Props for the Feedback component.
+ *
+ * @typedef {Object} FeedbackProps
+ * @property {string} [id] - Optional ID; falls back to auto-generated based on parent Field.
+ * @property {FeedbackTone} [tone] - Visual + semantic feedback tone.
+ * @property {React.ReactNode} [children] - Content of the feedback message.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {any} [rest] - Extra props passed to the container `<div>`.
+ */
+/**
+ * Context-aware field feedback (help, error, success, etc.)
+ * Registers its id with the parent Field so Input can set `aria-describedby`.
+ *
+ * Can be used as:
+ * ```jsx
+ * <Field.Feedback tone="help">Helpful hint</Field.Feedback>
+ * ```
+ * or imported directly:
+ * ```jsx
+ * import { Feedback } from "./Field";
+ * ```
+ *
+ * Accessibility:
+ * - `"error"` tone sets `role="alert"` and `aria-live="assertive"`.
+ * - All other tones use `aria-live="polite"`.
+ *
+ * @component
+ * @param {FeedbackProps} props
+ * @returns {React.ReactElement}
+ */
+declare function Feedback({ id, tone, children, className, ...rest }: FeedbackProps): React.ReactElement;
+declare function Field({ children }: FieldProps): React.ReactElement;
+declare namespace Field {
+    export { Feedback };
+}
+/**
+ * Feedback tone values.
+ */
+type FeedbackTone = "info" | "success" | "warning" | "error" | "corrective" | undefined;
+/**
+ * Props for the Feedback component.
+ */
+type FeedbackProps = {
+    /**
+     * - Optional ID; falls back to auto-generated based on parent Field.
+     */
+    id?: string;
+    /**
+     * - Visual + semantic feedback tone.
+     */
+    tone?: FeedbackTone;
+    /**
+     * - Content of the feedback message.
+     */
+    children?: React.ReactNode;
+    /**
+     * - Additional CSS classes.
+     */
+    className?: string;
+    /**
+     * - Extra props passed to the container `<div>`.
+     */
+    rest?: any;
+};
+/**
+ * Props for the Field component.
+ */
+type FieldProps = {
+    /**
+     * - Elements to render inside the field wrapper.
+     */
+    children: React.ReactNode;
+};
+
+export { Feedback, Field, Input, Label, Radio, Textarea };

package/dist/index.js

@@ -32,7 +32,9 @@ __export(index_exports, {
   Feedback: () => Feedback,
   Field: () => Field,
   Input: () => Input,
-  Label: () => Label
+  Label: () => Label,
+  Radio: () => Radio,
+  Textarea: () => Textarea
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -42,6 +44,7 @@ var import_react3 = require("react");
 
 // src/utils/useFieldContext.jsx
 var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var FieldContext = (0, import_react.createContext)(null);
 var FieldProvider = ({ children }) => {
   const baseId = (0, import_react.useId)();
@@ -66,7 +69,7 @@ var FieldProvider = ({ children }) => {
     }),
     [baseId, type, describedByIds, registerDescription, unregisterDescription]
   );
-  return /* @__PURE__ */ import_react.default.createElement(FieldContext.Provider, { value }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldContext.Provider, { value, children });
 };
 var useFieldContext = () => {
   const context = (0, import_react.useContext)(FieldContext);
@@ -77,6 +80,7 @@ var useFieldContext = () => {
 };
 
 // src/elements/Label.jsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Label = ({ children, hint, description, ...props }) => {
   const { labelHTMLForId } = useFieldContext();
   const returnHintType = (0, import_react3.useCallback)((hint2) => {
@@ -84,9 +88,9 @@ var Label = ({ children, hint, description, ...props }) => {
       case void 0:
         return;
       case "required":
-        return /* @__PURE__ */ import_react2.default.createElement("span", { className: "ml-2 text-fg-danger-base" }, "[required]");
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 text-fg-danger-base", children: "[required]" });
       case "optional":
-        return /* @__PURE__ */ import_react2.default.createElement("span", { className: "ml-2" }, "[optional]");
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2", children: "[optional]" });
       default:
         console.warn(
           "[Invalid prop arg] - The <Label> component only accepts 'Required' || 'Optional'. Nothing has been returned."
@@ -94,15 +98,20 @@ var Label = ({ children, hint, description, ...props }) => {
     }
   }, []);
   const hintEl = returnHintType(hint);
-  return /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "label",
     {
       hidden: props.hidden,
       className: "tracking-normal leading-none flex flex-col gap-4",
-      htmlFor: labelHTMLForId
-    },
-    /* @__PURE__ */ import_react2.default.createElement("div", { className: "h-[21px]" }, children, hintEl),
-    description && /* @__PURE__ */ import_react2.default.createElement("div", { className: "h-[21px] text-sm font-light text-fg-base" }, description)
+      htmlFor: labelHTMLForId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "h-[21px]", children: [
+          children,
+          hintEl
+        ] }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-[21px] text-sm font-light text-fg-base", children: description })
+      ]
+    }
   );
 };
 
@@ -110,6 +119,7 @@ var Label = ({ children, hint, description, ...props }) => {
 var import_react4 = __toESM(require("react"));
 var import_utils = require("@edux-design/utils");
 var import_icons = require("@edux-design/icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Input = (0, import_react4.forwardRef)(
   ({
     children,
@@ -140,51 +150,56 @@ var Input = (0, import_react4.forwardRef)(
       clearable && endIcon && "pr-10",
       clearable && !endIcon && "pr-5"
     );
-    return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full relative flex items-center" }, startIcon && /* @__PURE__ */ import_react4.default.createElement(
-      "span",
-      {
-        className: "absolute left-3 flex items-center pointer-events-none text-fg-subtle",
-        "aria-hidden": "true"
-      },
-      startIcon
-    ), /* @__PURE__ */ import_react4.default.createElement(
-      "input",
-      {
-        id: labelHTMLForId,
-        ref,
-        className: INPUT_STYLES,
-        autoComplete: autocomplete || "",
-        "aria-disabled": props.disabled || variant === "inactive",
-        "aria-invalid": variant === "error" ? "true" : void 0,
-        disabled: props.disabled || variant === "inactive",
-        ...props
-      }
-    ), clearable && /* @__PURE__ */ import_react4.default.createElement(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Clear input",
-        onClick: () => {
-          var _a;
-          return (_a = props.onChange) == null ? void 0 : _a.call(props, { target: { value: "" } });
-        },
-        className: (0, import_utils.cx)(
-          clearable && hasValue && endIcon ? "right-9" : "right-3",
-          "absolute flex items-center p-1 rounded-full outline-none",
-          "transition-all duration-300 ease-in-out",
-          hasValue ? "opacity-100 scale-100" : "opacity-0 scale-90 pointer-events-none",
-          "focus:shadow-focus"
-        )
-      },
-      /* @__PURE__ */ import_react4.default.createElement(import_icons.Close, { "aria-hidden": "true", className: "text-fg-subtle" })
-    ), endIcon && /* @__PURE__ */ import_react4.default.createElement(
-      "span",
-      {
-        className: (0, import_utils.cx)("absolute flex items-center right-3 text-fg-subtle"),
-        "aria-hidden": typeof endIcon === "string" ? void 0 : "true"
-      },
-      endIcon
-    ));
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-full relative flex items-center", children: [
+      startIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: "absolute left-3 flex items-center pointer-events-none text-fg-subtle",
+          "aria-hidden": "true",
+          children: startIcon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          id: labelHTMLForId,
+          ref,
+          className: INPUT_STYLES,
+          autoComplete: autocomplete || "",
+          "aria-disabled": props.disabled || variant === "inactive",
+          "aria-invalid": variant === "error" ? "true" : void 0,
+          disabled: props.disabled || variant === "inactive",
+          ...props
+        }
+      ),
+      clearable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear input",
+          onClick: () => {
+            var _a;
+            return (_a = props.onChange) == null ? void 0 : _a.call(props, { target: { value: "" } });
+          },
+          className: (0, import_utils.cx)(
+            clearable && hasValue && endIcon ? "right-9" : "right-3",
+            "absolute flex items-center p-1 rounded-full outline-none",
+            "transition-all duration-300 ease-in-out",
+            hasValue ? "opacity-100 scale-100" : "opacity-0 scale-90 pointer-events-none",
+            "focus:shadow-focus"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.Close, { "aria-hidden": "true", className: "text-fg-subtle" })
+        }
+      ),
+      endIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: (0, import_utils.cx)("absolute flex items-center right-3 text-fg-subtle"),
+          "aria-hidden": typeof endIcon === "string" ? void 0 : "true",
+          children: endIcon
+        }
+      )
+    ] });
   }
 );
 
@@ -192,13 +207,14 @@ var Input = (0, import_react4.forwardRef)(
 var import_react5 = __toESM(require("react"));
 var import_utils2 = require("@edux-design/utils");
 var import_icons2 = require("@edux-design/icons");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Field = ({ children }) => {
   const FIELD_GROUP_WRAPPER_STYLES = (0, import_utils2.cx)(
     "flex flex-col items-start relative gap-8"
   );
-  return /* @__PURE__ */ import_react5.default.createElement(FieldProvider, null, /* @__PURE__ */ import_react5.default.createElement("div", { className: FIELD_GROUP_WRAPPER_STYLES }, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: FIELD_GROUP_WRAPPER_STYLES, children }) });
 };
-function Feedback({ id, tone = "help", children, className, ...rest }) {
+function Feedback({ id, tone, children, className, ...rest }) {
   const { labelHTMLForId, registerDescription, unregisterDescription } = useFieldContext();
   const autoId = (0, import_react5.useId)();
   const feedbackId = id ?? `${labelHTMLForId}-fb-${autoId}`;
@@ -214,29 +230,156 @@ function Feedback({ id, tone = "help", children, className, ...rest }) {
     error: "bg-fg-danger-base"
   }[tone];
   const liveProps = tone === "error" ? { role: "alert", "aria-live": "assertive" } : { "aria-live": "polite" };
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       id: feedbackId,
       className: (0, import_utils2.cx)("text-sm mt-1 flex gap-6", className),
       ...liveProps,
-      ...rest
-    },
-    /* @__PURE__ */ import_react5.default.createElement(
-      "div",
-      {
-        className: `h-[20px] w-[20px] ${colorByTone} rounded-full flex flex-col justify-center items-center`
-      },
-      /* @__PURE__ */ import_react5.default.createElement(import_icons2.Close, { className: "text-white" })
-    ),
-    children
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: `h-[20px] w-[20px] ${colorByTone} rounded-full flex flex-col justify-center items-center`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.Close, { className: "text-white" })
+          }
+        ),
+        children
+      ]
+    }
   );
 }
 Field.Feedback = Feedback;
+
+// src/elements/Radio.jsx
+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",
+      {
+        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"
+        )
+      }
+    )
+  ] });
+}
+
+// src/elements/Textarea.jsx
+var import_react7 = __toESM(require("react"));
+var import_utils4 = require("@edux-design/utils");
+var import_icons3 = require("@edux-design/icons");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Textarea = (0, import_react7.forwardRef)(
+  ({
+    children,
+    validation,
+    variant = "primary",
+    clearable = false,
+    startIcon,
+    endIcon,
+    rows = 4,
+    ...props
+  }, ref) => {
+    const { labelHTMLForId } = useFieldContext();
+    const hasValue = Boolean(props.value);
+    const defaults = "w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5 py-3 resize-y";
+    const fonts = "font-normal text-base leading-relaxed";
+    const variants = {
+      primary: "hover:border-2 hover:border-border-primary-base focus:border-2 focus:border-border-primary-base focus-within:border-2 focus-within:border-border-primary-base",
+      error: "border-border-danger-base bg-bg-danger-subtle",
+      corrective: "border-border-corrective-base",
+      success: "border-border-success-base",
+      inactive: "border-border-subtle bg-bg-subtle"
+    };
+    const TEXTAREA_STYLES = (0, import_utils4.cx)(
+      defaults,
+      fonts,
+      variants[variant],
+      startIcon && "pl-10",
+      clearable && endIcon && "pr-10",
+      clearable && !endIcon && "pr-5"
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full relative flex items-start", children: [
+      startIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "span",
+        {
+          className: "absolute left-3 top-3 flex items-center pointer-events-none text-fg-subtle",
+          "aria-hidden": "true",
+          children: startIcon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "textarea",
+        {
+          id: labelHTMLForId,
+          ref,
+          className: TEXTAREA_STYLES,
+          "aria-disabled": props.disabled || variant === "inactive",
+          "aria-invalid": variant === "error" ? "true" : void 0,
+          disabled: props.disabled || variant === "inactive",
+          rows,
+          ...props
+        }
+      ),
+      clearable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear text area",
+          onClick: () => {
+            var _a;
+            return (_a = props.onChange) == null ? void 0 : _a.call(props, { target: { value: "" } });
+          },
+          className: (0, import_utils4.cx)(
+            clearable && hasValue && endIcon ? "right-9" : "right-3",
+            "absolute top-3 flex items-center p-1 rounded-full outline-none",
+            "transition-all duration-300 ease-in-out",
+            hasValue ? "opacity-100 scale-100" : "opacity-0 scale-90 pointer-events-none",
+            "focus:shadow-focus"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.Close, { "aria-hidden": "true", className: "text-fg-subtle" })
+        }
+      ),
+      endIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "span",
+        {
+          className: (0, import_utils4.cx)(
+            "absolute flex items-center right-3 top-3 text-fg-subtle"
+          ),
+          "aria-hidden": typeof endIcon === "string" ? void 0 : "true",
+          children: endIcon
+        }
+      )
+    ] });
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Feedback,
   Field,
   Input,
-  Label
+  Label,
+  Radio,
+  Textarea
 });

package/dist/index.mjs

@@ -11,6 +11,7 @@ import React, {
   useState,
   useCallback
 } from "react";
+import { jsx } from "react/jsx-runtime";
 var FieldContext = createContext(null);
 var FieldProvider = ({ children }) => {
   const baseId = useId();
@@ -35,7 +36,7 @@ var FieldProvider = ({ children }) => {
     }),
     [baseId, type, describedByIds, registerDescription, unregisterDescription]
   );
-  return /* @__PURE__ */ React.createElement(FieldContext.Provider, { value }, children);
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children });
 };
 var useFieldContext = () => {
   const context = useContext(FieldContext);
@@ -46,6 +47,7 @@ var useFieldContext = () => {
 };
 
 // src/elements/Label.jsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Label = ({ children, hint, description, ...props }) => {
   const { labelHTMLForId } = useFieldContext();
   const returnHintType = useCallback2((hint2) => {
@@ -53,9 +55,9 @@ var Label = ({ children, hint, description, ...props }) => {
       case void 0:
         return;
       case "required":
-        return /* @__PURE__ */ React2.createElement("span", { className: "ml-2 text-fg-danger-base" }, "[required]");
+        return /* @__PURE__ */ jsx2("span", { className: "ml-2 text-fg-danger-base", children: "[required]" });
       case "optional":
-        return /* @__PURE__ */ React2.createElement("span", { className: "ml-2" }, "[optional]");
+        return /* @__PURE__ */ jsx2("span", { className: "ml-2", children: "[optional]" });
       default:
         console.warn(
           "[Invalid prop arg] - The <Label> component only accepts 'Required' || 'Optional'. Nothing has been returned."
@@ -63,15 +65,20 @@ var Label = ({ children, hint, description, ...props }) => {
     }
   }, []);
   const hintEl = returnHintType(hint);
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ jsxs(
     "label",
     {
       hidden: props.hidden,
       className: "tracking-normal leading-none flex flex-col gap-4",
-      htmlFor: labelHTMLForId
-    },
-    /* @__PURE__ */ React2.createElement("div", { className: "h-[21px]" }, children, hintEl),
-    description && /* @__PURE__ */ React2.createElement("div", { className: "h-[21px] text-sm font-light text-fg-base" }, description)
+      htmlFor: labelHTMLForId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "h-[21px]", children: [
+          children,
+          hintEl
+        ] }),
+        description && /* @__PURE__ */ jsx2("div", { className: "h-[21px] text-sm font-light text-fg-base", children: description })
+      ]
+    }
   );
 };
 
@@ -79,6 +86,7 @@ var Label = ({ children, hint, description, ...props }) => {
 import React3, { forwardRef } from "react";
 import { cx } from "@edux-design/utils";
 import { Close } from "@edux-design/icons";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Input = forwardRef(
   ({
     children,
@@ -109,51 +117,56 @@ var Input = forwardRef(
       clearable && endIcon && "pr-10",
       clearable && !endIcon && "pr-5"
     );
-    return /* @__PURE__ */ React3.createElement("div", { className: "w-full relative flex items-center" }, startIcon && /* @__PURE__ */ React3.createElement(
-      "span",
-      {
-        className: "absolute left-3 flex items-center pointer-events-none text-fg-subtle",
-        "aria-hidden": "true"
-      },
-      startIcon
-    ), /* @__PURE__ */ React3.createElement(
-      "input",
-      {
-        id: labelHTMLForId,
-        ref,
-        className: INPUT_STYLES,
-        autoComplete: autocomplete || "",
-        "aria-disabled": props.disabled || variant === "inactive",
-        "aria-invalid": variant === "error" ? "true" : void 0,
-        disabled: props.disabled || variant === "inactive",
-        ...props
-      }
-    ), clearable && /* @__PURE__ */ React3.createElement(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Clear input",
-        onClick: () => {
-          var _a;
-          return (_a = props.onChange) == null ? void 0 : _a.call(props, { target: { value: "" } });
-        },
-        className: cx(
-          clearable && hasValue && endIcon ? "right-9" : "right-3",
-          "absolute flex items-center p-1 rounded-full outline-none",
-          "transition-all duration-300 ease-in-out",
-          hasValue ? "opacity-100 scale-100" : "opacity-0 scale-90 pointer-events-none",
-          "focus:shadow-focus"
-        )
-      },
-      /* @__PURE__ */ React3.createElement(Close, { "aria-hidden": "true", className: "text-fg-subtle" })
-    ), endIcon && /* @__PURE__ */ React3.createElement(
-      "span",
-      {
-        className: cx("absolute flex items-center right-3 text-fg-subtle"),
-        "aria-hidden": typeof endIcon === "string" ? void 0 : "true"
-      },
-      endIcon
-    ));
+    return /* @__PURE__ */ jsxs2("div", { className: "w-full relative flex items-center", children: [
+      startIcon && /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "absolute left-3 flex items-center pointer-events-none text-fg-subtle",
+          "aria-hidden": "true",
+          children: startIcon
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          id: labelHTMLForId,
+          ref,
+          className: INPUT_STYLES,
+          autoComplete: autocomplete || "",
+          "aria-disabled": props.disabled || variant === "inactive",
+          "aria-invalid": variant === "error" ? "true" : void 0,
+          disabled: props.disabled || variant === "inactive",
+          ...props
+        }
+      ),
+      clearable && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear input",
+          onClick: () => {
+            var _a;
+            return (_a = props.onChange) == null ? void 0 : _a.call(props, { target: { value: "" } });
+          },
+          className: cx(
+            clearable && hasValue && endIcon ? "right-9" : "right-3",
+            "absolute flex items-center p-1 rounded-full outline-none",
+            "transition-all duration-300 ease-in-out",
+            hasValue ? "opacity-100 scale-100" : "opacity-0 scale-90 pointer-events-none",
+            "focus:shadow-focus"
+          ),
+          children: /* @__PURE__ */ jsx3(Close, { "aria-hidden": "true", className: "text-fg-subtle" })
+        }
+      ),
+      endIcon && /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: cx("absolute flex items-center right-3 text-fg-subtle"),
+          "aria-hidden": typeof endIcon === "string" ? void 0 : "true",
+          children: endIcon
+        }
+      )
+    ] });
   }
 );
 
@@ -161,13 +174,14 @@ var Input = forwardRef(
 import React4, { useEffect, useId as useId2 } from "react";
 import { cx as cx2 } from "@edux-design/utils";
 import { Close as Close2 } from "@edux-design/icons";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Field = ({ children }) => {
   const FIELD_GROUP_WRAPPER_STYLES = cx2(
     "flex flex-col items-start relative gap-8"
   );
-  return /* @__PURE__ */ React4.createElement(FieldProvider, null, /* @__PURE__ */ React4.createElement("div", { className: FIELD_GROUP_WRAPPER_STYLES }, children));
+  return /* @__PURE__ */ jsx4(FieldProvider, { children: /* @__PURE__ */ jsx4("div", { className: FIELD_GROUP_WRAPPER_STYLES, children }) });
 };
-function Feedback({ id, tone = "help", children, className, ...rest }) {
+function Feedback({ id, tone, children, className, ...rest }) {
   const { labelHTMLForId, registerDescription, unregisterDescription } = useFieldContext();
   const autoId = useId2();
   const feedbackId = id ?? `${labelHTMLForId}-fb-${autoId}`;
@@ -183,28 +197,155 @@ function Feedback({ id, tone = "help", children, className, ...rest }) {
     error: "bg-fg-danger-base"
   }[tone];
   const liveProps = tone === "error" ? { role: "alert", "aria-live": "assertive" } : { "aria-live": "polite" };
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       id: feedbackId,
       className: cx2("text-sm mt-1 flex gap-6", className),
       ...liveProps,
-      ...rest
-    },
-    /* @__PURE__ */ React4.createElement(
-      "div",
-      {
-        className: `h-[20px] w-[20px] ${colorByTone} rounded-full flex flex-col justify-center items-center`
-      },
-      /* @__PURE__ */ React4.createElement(Close2, { className: "text-white" })
-    ),
-    children
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: `h-[20px] w-[20px] ${colorByTone} rounded-full flex flex-col justify-center items-center`,
+            children: /* @__PURE__ */ jsx4(Close2, { className: "text-white" })
+          }
+        ),
+        children
+      ]
+    }
   );
 }
 Field.Feedback = Feedback;
+
+// src/elements/Radio.jsx
+import React5 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",
+      {
+        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"
+        )
+      }
+    )
+  ] });
+}
+
+// src/elements/Textarea.jsx
+import React6, { forwardRef as forwardRef2 } from "react";
+import { cx as cx4 } from "@edux-design/utils";
+import { Close as Close3 } from "@edux-design/icons";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var Textarea = forwardRef2(
+  ({
+    children,
+    validation,
+    variant = "primary",
+    clearable = false,
+    startIcon,
+    endIcon,
+    rows = 4,
+    ...props
+  }, ref) => {
+    const { labelHTMLForId } = useFieldContext();
+    const hasValue = Boolean(props.value);
+    const defaults = "w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5 py-3 resize-y";
+    const fonts = "font-normal text-base leading-relaxed";
+    const variants = {
+      primary: "hover:border-2 hover:border-border-primary-base focus:border-2 focus:border-border-primary-base focus-within:border-2 focus-within:border-border-primary-base",
+      error: "border-border-danger-base bg-bg-danger-subtle",
+      corrective: "border-border-corrective-base",
+      success: "border-border-success-base",
+      inactive: "border-border-subtle bg-bg-subtle"
+    };
+    const TEXTAREA_STYLES = cx4(
+      defaults,
+      fonts,
+      variants[variant],
+      startIcon && "pl-10",
+      clearable && endIcon && "pr-10",
+      clearable && !endIcon && "pr-5"
+    );
+    return /* @__PURE__ */ jsxs5("div", { className: "w-full relative flex items-start", children: [
+      startIcon && /* @__PURE__ */ jsx6(
+        "span",
+        {
+          className: "absolute left-3 top-3 flex items-center pointer-events-none text-fg-subtle",
+          "aria-hidden": "true",
+          children: startIcon
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "textarea",
+        {
+          id: labelHTMLForId,
+          ref,
+          className: TEXTAREA_STYLES,
+          "aria-disabled": props.disabled || variant === "inactive",
+          "aria-invalid": variant === "error" ? "true" : void 0,
+          disabled: props.disabled || variant === "inactive",
+          rows,
+          ...props
+        }
+      ),
+      clearable && /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear text area",
+          onClick: () => {
+            var _a;
+            return (_a = props.onChange) == null ? void 0 : _a.call(props, { target: { value: "" } });
+          },
+          className: cx4(
+            clearable && hasValue && endIcon ? "right-9" : "right-3",
+            "absolute top-3 flex items-center p-1 rounded-full outline-none",
+            "transition-all duration-300 ease-in-out",
+            hasValue ? "opacity-100 scale-100" : "opacity-0 scale-90 pointer-events-none",
+            "focus:shadow-focus"
+          ),
+          children: /* @__PURE__ */ jsx6(Close3, { "aria-hidden": "true", className: "text-fg-subtle" })
+        }
+      ),
+      endIcon && /* @__PURE__ */ jsx6(
+        "span",
+        {
+          className: cx4(
+            "absolute flex items-center right-3 top-3 text-fg-subtle"
+          ),
+          "aria-hidden": typeof endIcon === "string" ? void 0 : "true",
+          children: endIcon
+        }
+      )
+    ] });
+  }
+);
 export {
   Feedback,
   Field,
   Input,
-  Label
+  Label,
+  Radio,
+  Textarea
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/forms",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "sideEffects": [
     "**/*.css"
   ],
@@ -8,20 +8,23 @@
   "files": [
     "dist"
   ],
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
-    "build": "tsup src/index.js --format esm,cjs",
-    "dev": "tsup src/index.js --watch --format esm,cjs",
+    "build": "tsup src/index.js --format esm,cjs --dts",
+    "dev": "tsup src/index.js --watch --format esm,cjs --dts",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit"
   },
   "devDependencies": {
+    "@repo/typescript-config": "*",
     "typescript": "^5.9.2",
     "tailwindcss": "^4.1.12",
     "postcss": "^8.5.6",