@edux-design/forms 0.0.1

package/dist/index.js

@@ -0,0 +1,241 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Feedback: () => Feedback,
+  Field: () => Field,
+  Input: () => Input,
+  Label: () => Label
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/elements/Label.jsx
+var import_react2 = __toESM(require("react"));
+var import_react3 = require("react");
+
+// src/utils/useFieldContext.jsx
+var import_react = __toESM(require("react"));
+var FieldContext = (0, import_react.createContext)(null);
+var FieldProvider = ({ children }) => {
+  const baseId = (0, import_react.useId)();
+  const [type, setType] = (0, import_react.useState)("");
+  const [describedByIds, setDescribedByIds] = (0, import_react.useState)([]);
+  const registerDescription = (0, import_react.useCallback)((id) => {
+    if (!id) return;
+    setDescribedByIds((prev) => prev.includes(id) ? prev : [...prev, id]);
+  }, []);
+  const unregisterDescription = (0, import_react.useCallback)((id) => {
+    if (!id) return;
+    setDescribedByIds((prev) => prev.filter((x) => x !== id));
+  }, []);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      labelHTMLForId: baseId,
+      type,
+      setType,
+      describedByIds,
+      registerDescription,
+      unregisterDescription
+    }),
+    [baseId, type, describedByIds, registerDescription, unregisterDescription]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(FieldContext.Provider, { value }, children);
+};
+var useFieldContext = () => {
+  const context = (0, import_react.useContext)(FieldContext);
+  if (!context) {
+    throw new Error("useFieldContext must be used within a FieldProvider");
+  }
+  return context;
+};
+
+// src/elements/Label.jsx
+var Label = ({ children, hint, description, ...props }) => {
+  const { labelHTMLForId } = useFieldContext();
+  const returnHintType = (0, import_react3.useCallback)((hint2) => {
+    switch (hint2 == null ? void 0 : hint2.toLowerCase()) {
+      case void 0:
+        return;
+      case "required":
+        return /* @__PURE__ */ import_react2.default.createElement("span", { className: "ml-2 text-fg-danger-base" }, "[required]");
+      case "optional":
+        return /* @__PURE__ */ import_react2.default.createElement("span", { className: "ml-2" }, "[optional]");
+      default:
+        console.warn(
+          "[Invalid prop arg] - The <Label> component only accepts 'Required' || 'Optional'. Nothing has been returned."
+        );
+    }
+  }, []);
+  const hintEl = returnHintType(hint);
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "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)
+  );
+};
+
+// src/elements/Input.jsx
+var import_react4 = __toESM(require("react"));
+var import_utils = require("@edux-design/utils");
+var import_icons = require("@edux-design/icons");
+var Input = (0, import_react4.forwardRef)(
+  ({
+    children,
+    autocomplete,
+    validation,
+    variant = "primary",
+    clearable = false,
+    startIcon,
+    endIcon,
+    ...props
+  }, ref) => {
+    const { labelHTMLForId } = useFieldContext();
+    const hasValue = Boolean(props.value);
+    const defaults = "h-[44px] 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";
+    const fonts = "font-normal text-base";
+    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 INPUT_STYLES = (0, import_utils.cx)(
+      defaults,
+      fonts,
+      variants[variant],
+      startIcon && "pl-10",
+      (clearable || endIcon) && "pr-10"
+    );
+    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 ? "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
+    ));
+  }
+);
+
+// src/elements/Field.jsx
+var import_react5 = __toESM(require("react"));
+var import_utils2 = require("@edux-design/utils");
+var import_icons2 = require("@edux-design/icons");
+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));
+};
+function Feedback({ id, tone = "help", children, className, ...rest }) {
+  const { labelHTMLForId, registerDescription, unregisterDescription } = useFieldContext();
+  const autoId = (0, import_react5.useId)();
+  const feedbackId = id ?? `${labelHTMLForId}-fb-${autoId}`;
+  (0, import_react5.useEffect)(() => {
+    registerDescription(feedbackId);
+    return () => unregisterDescription(feedbackId);
+  }, [feedbackId, registerDescription, unregisterDescription]);
+  const colorByTone = {
+    corrective: "bg-fg-corrective-base",
+    info: "bg-fg-info-base",
+    success: "bg-fg-success-base",
+    warning: "bg-fg-warning-base",
+    error: "bg-fg-danger-base"
+  }[tone];
+  const liveProps = tone === "error" ? { role: "alert", "aria-live": "assertive" } : { "aria-live": "polite" };
+  return /* @__PURE__ */ import_react5.default.createElement(
+    "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
+  );
+}
+Field.Feedback = Feedback;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Feedback,
+  Field,
+  Input,
+  Label
+});

package/dist/index.mjs

@@ -0,0 +1,209 @@
+// src/elements/Label.jsx
+import React2 from "react";
+import { useCallback as useCallback2 } from "react";
+
+// src/utils/useFieldContext.jsx
+import React, {
+  createContext,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+  useCallback
+} from "react";
+var FieldContext = createContext(null);
+var FieldProvider = ({ children }) => {
+  const baseId = useId();
+  const [type, setType] = useState("");
+  const [describedByIds, setDescribedByIds] = useState([]);
+  const registerDescription = useCallback((id) => {
+    if (!id) return;
+    setDescribedByIds((prev) => prev.includes(id) ? prev : [...prev, id]);
+  }, []);
+  const unregisterDescription = useCallback((id) => {
+    if (!id) return;
+    setDescribedByIds((prev) => prev.filter((x) => x !== id));
+  }, []);
+  const value = useMemo(
+    () => ({
+      labelHTMLForId: baseId,
+      type,
+      setType,
+      describedByIds,
+      registerDescription,
+      unregisterDescription
+    }),
+    [baseId, type, describedByIds, registerDescription, unregisterDescription]
+  );
+  return /* @__PURE__ */ React.createElement(FieldContext.Provider, { value }, children);
+};
+var useFieldContext = () => {
+  const context = useContext(FieldContext);
+  if (!context) {
+    throw new Error("useFieldContext must be used within a FieldProvider");
+  }
+  return context;
+};
+
+// src/elements/Label.jsx
+var Label = ({ children, hint, description, ...props }) => {
+  const { labelHTMLForId } = useFieldContext();
+  const returnHintType = useCallback2((hint2) => {
+    switch (hint2 == null ? void 0 : hint2.toLowerCase()) {
+      case void 0:
+        return;
+      case "required":
+        return /* @__PURE__ */ React2.createElement("span", { className: "ml-2 text-fg-danger-base" }, "[required]");
+      case "optional":
+        return /* @__PURE__ */ React2.createElement("span", { className: "ml-2" }, "[optional]");
+      default:
+        console.warn(
+          "[Invalid prop arg] - The <Label> component only accepts 'Required' || 'Optional'. Nothing has been returned."
+        );
+    }
+  }, []);
+  const hintEl = returnHintType(hint);
+  return /* @__PURE__ */ React2.createElement(
+    "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)
+  );
+};
+
+// src/elements/Input.jsx
+import React3, { forwardRef } from "react";
+import { cx } from "@edux-design/utils";
+import { Close } from "@edux-design/icons";
+var Input = forwardRef(
+  ({
+    children,
+    autocomplete,
+    validation,
+    variant = "primary",
+    clearable = false,
+    startIcon,
+    endIcon,
+    ...props
+  }, ref) => {
+    const { labelHTMLForId } = useFieldContext();
+    const hasValue = Boolean(props.value);
+    const defaults = "h-[44px] 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";
+    const fonts = "font-normal text-base";
+    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 INPUT_STYLES = cx(
+      defaults,
+      fonts,
+      variants[variant],
+      startIcon && "pl-10",
+      (clearable || endIcon) && "pr-10"
+    );
+    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 ? "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
+    ));
+  }
+);
+
+// src/elements/Field.jsx
+import React4, { useEffect, useId as useId2 } from "react";
+import { cx as cx2 } from "@edux-design/utils";
+import { Close as Close2 } from "@edux-design/icons";
+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));
+};
+function Feedback({ id, tone = "help", children, className, ...rest }) {
+  const { labelHTMLForId, registerDescription, unregisterDescription } = useFieldContext();
+  const autoId = useId2();
+  const feedbackId = id ?? `${labelHTMLForId}-fb-${autoId}`;
+  useEffect(() => {
+    registerDescription(feedbackId);
+    return () => unregisterDescription(feedbackId);
+  }, [feedbackId, registerDescription, unregisterDescription]);
+  const colorByTone = {
+    corrective: "bg-fg-corrective-base",
+    info: "bg-fg-info-base",
+    success: "bg-fg-success-base",
+    warning: "bg-fg-warning-base",
+    error: "bg-fg-danger-base"
+  }[tone];
+  const liveProps = tone === "error" ? { role: "alert", "aria-live": "assertive" } : { "aria-live": "polite" };
+  return /* @__PURE__ */ React4.createElement(
+    "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
+  );
+}
+Field.Feedback = Feedback;
+export {
+  Feedback,
+  Field,
+  Input,
+  Label
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@edux-design/forms",
+  "version": "0.0.1",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "private": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "build": "tsup src/index.js --format esm,cjs",
+    "dev": "tsup src/index.js --watch --format esm,cjs",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+    "tailwindcss": "^4.1.12",
+    "postcss": "^8.5.6",
+    "tsup": "^8.5.0",
+    "@tailwindcss/cli": "^4.1.12",
+    "@tailwindcss/postcss": "^4.1.12"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@edux-design/utils": "*",
+    "@edux-design/icons": "*"
+  }
+}