@nucleux/md3-text-field 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @nucleux/md3-text-field
+
+Material 3 text field (filled, outlined) — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-text-field @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3TextField } from "@nucleux/md3-text-field";
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,118 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var Md3TextField = React__namespace.forwardRef(
+  ({
+    label,
+    variant = "filled",
+    supportingText,
+    error = false,
+    leadingIcon,
+    trailingIcon,
+    id,
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    const generatedId = React__namespace.useId();
+    const inputId = id ?? generatedId;
+    const supportId = `${inputId}-support`;
+    const filled = variant === "filled";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("w-full", disabled && "opacity-[0.38]", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-md-on-surface-variant [&_svg]:size-5", children: leadingIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            placeholder: " ",
+            disabled,
+            "aria-invalid": error || void 0,
+            "aria-describedby": supportingText ? supportId : void 0,
+            className: utils.cn(
+              "peer h-14 w-full text-base text-md-on-surface outline-none transition-colors placeholder:text-transparent disabled:cursor-not-allowed",
+              leadingIcon ? "pl-11" : "pl-4",
+              trailingIcon ? "pr-11" : "pr-4",
+              filled ? utils.cn(
+                "rounded-t-md-xs border-0 border-b-2 bg-md-surface-container-high pb-2 pt-6",
+                error ? "border-md-error" : "border-md-on-surface-variant focus:border-md-primary"
+              ) : utils.cn(
+                "rounded-md-xs border bg-transparent py-4",
+                error ? "border-md-error" : "border-md-outline focus:border-md-primary"
+              )
+            ),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: inputId,
+            className: utils.cn(
+              "pointer-events-none absolute transition-all",
+              leadingIcon ? "left-11" : "left-4",
+              // Floated (default: filled value / outlined value) position
+              filled ? "top-2 text-xs" : "-top-2 bg-md-surface px-1 text-xs",
+              // Resting position when empty & unfocused
+              "peer-placeholder-shown:text-base peer-placeholder-shown:text-md-on-surface-variant",
+              filled ? "peer-placeholder-shown:top-4" : "peer-placeholder-shown:top-4 peer-placeholder-shown:bg-transparent",
+              // Focused position + color
+              filled ? "peer-focus:top-2 peer-focus:text-xs" : "peer-focus:-top-2 peer-focus:bg-md-surface peer-focus:px-1 peer-focus:text-xs",
+              error ? "text-md-error peer-focus:text-md-error" : "text-md-on-surface-variant peer-focus:text-md-primary"
+            ),
+            children: label
+          }
+        ),
+        trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils.cn(
+              "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 [&_svg]:size-5",
+              error ? "text-md-error" : "text-md-on-surface-variant"
+            ),
+            children: trailingIcon
+          }
+        )
+      ] }),
+      supportingText && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          id: supportId,
+          className: utils.cn("px-4 pt-1 text-xs", error ? "text-md-error" : "text-md-on-surface-variant"),
+          children: supportingText
+        }
+      )
+    ] });
+  }
+);
+Md3TextField.displayName = "Md3TextField";
+
+exports.Md3TextField = Md3TextField;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,IAAM,YAAA,GAAqBA,gBAAA,CAAA,UAAA;AAAA,EAChC,CACE;AAAA,IACE,KAAA;AAAA,IACA,OAAA,GAAU,QAAA;AAAA,IACV,cAAA;AAAA,IACA,KAAA,GAAQ,KAAA;AAAA,IACR,WAAA;AAAA,IACA,YAAA;AAAA,IACA,EAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,cAAoBA,gBAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAM,WAAA;AACtB,IAAA,MAAM,SAAA,GAAY,GAAG,OAAO,CAAA,QAAA,CAAA;AAC5B,IAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,IAAA,uBACEC,eAAA,CAAC,SAAI,SAAA,EAAWC,QAAA,CAAG,UAAU,QAAA,IAAY,gBAAA,EAAkB,SAAS,CAAA,EAClE,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,UAAA,EACZ,QAAA,EAAA;AAAA,QAAA,WAAA,oBACCE,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wGAAA,EACb,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAGFA,cAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,EAAA,EAAI,OAAA;AAAA,YACJ,WAAA,EAAY,GAAA;AAAA,YACZ,QAAA;AAAA,YACA,gBAAc,KAAA,IAAS,MAAA;AAAA,YACvB,kBAAA,EAAkB,iBAAiB,SAAA,GAAY,MAAA;AAAA,YAC/C,SAAA,EAAWD,QAAA;AAAA,cACT,uIAAA;AAAA,cACA,cAAc,OAAA,GAAU,MAAA;AAAA,cACxB,eAAe,OAAA,GAAU,MAAA;AAAA,cACzB,MAAA,GACIA,QAAA;AAAA,gBACE,4EAAA;AAAA,gBACA,QAAQ,iBAAA,GAAoB;AAAA,eAC9B,GACAA,QAAA;AAAA,gBACE,0CAAA;AAAA,gBACA,QAAQ,iBAAA,GAAoB;AAAA;AAC9B,aACN;AAAA,YACC,GAAG;AAAA;AAAA,SACN;AAAA,wBAEAC,cAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,SAAA,EAAWD,QAAA;AAAA,cACT,6CAAA;AAAA,cACA,cAAc,SAAA,GAAY,QAAA;AAAA;AAAA,cAE1B,SAAS,eAAA,GAAkB,mCAAA;AAAA;AAAA,cAE3B,oFAAA;AAAA,cACA,SACI,8BAAA,GACA,oEAAA;AAAA;AAAA,cAEJ,SACI,qCAAA,GACA,+EAAA;AAAA,cACJ,QACI,wCAAA,GACA;AAAA,aACN;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAEC,YAAA,oBACCC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,QAAA;AAAA,cACT,8EAAA;AAAA,cACA,QAAQ,eAAA,GAAkB;AAAA,aAC5B;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EAEJ,CAAA;AAAA,MAEC,cAAA,oBACCC,cAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAWD,QAAA,CAAG,mBAAA,EAAqB,KAAA,GAAQ,kBAAkB,4BAA4B,CAAA;AAAA,UAExF,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type Md3TextFieldVariant = \"filled\" | \"outlined\";\n\nexport interface Md3TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"placeholder\"> {\n  label: string;\n  variant?: Md3TextFieldVariant;\n  supportingText?: React.ReactNode;\n  error?: boolean;\n  leadingIcon?: React.ReactNode;\n  trailingIcon?: React.ReactNode;\n}\n\n/**\n * A Material Design 3 text field (filled or outlined) with a floating label,\n * optional leading/trailing icons, supporting text, and an error state.\n */\nexport const Md3TextField = React.forwardRef<HTMLInputElement, Md3TextFieldProps>(\n  (\n    {\n      label,\n      variant = \"filled\",\n      supportingText,\n      error = false,\n      leadingIcon,\n      trailingIcon,\n      id,\n      className,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id ?? generatedId;\n    const supportId = `${inputId}-support`;\n    const filled = variant === \"filled\";\n\n    return (\n      <div className={cn(\"w-full\", disabled && \"opacity-[0.38]\", className)}>\n        <div className=\"relative\">\n          {leadingIcon && (\n            <span className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-md-on-surface-variant [&_svg]:size-5\">\n              {leadingIcon}\n            </span>\n          )}\n\n          <input\n            ref={ref}\n            id={inputId}\n            placeholder=\" \"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            aria-describedby={supportingText ? supportId : undefined}\n            className={cn(\n              \"peer h-14 w-full text-base text-md-on-surface outline-none transition-colors placeholder:text-transparent disabled:cursor-not-allowed\",\n              leadingIcon ? \"pl-11\" : \"pl-4\",\n              trailingIcon ? \"pr-11\" : \"pr-4\",\n              filled\n                ? cn(\n                    \"rounded-t-md-xs border-0 border-b-2 bg-md-surface-container-high pb-2 pt-6\",\n                    error ? \"border-md-error\" : \"border-md-on-surface-variant focus:border-md-primary\",\n                  )\n                : cn(\n                    \"rounded-md-xs border bg-transparent py-4\",\n                    error ? \"border-md-error\" : \"border-md-outline focus:border-md-primary\",\n                  ),\n            )}\n            {...props}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"pointer-events-none absolute transition-all\",\n              leadingIcon ? \"left-11\" : \"left-4\",\n              // Floated (default: filled value / outlined value) position\n              filled ? \"top-2 text-xs\" : \"-top-2 bg-md-surface px-1 text-xs\",\n              // Resting position when empty & unfocused\n              \"peer-placeholder-shown:text-base peer-placeholder-shown:text-md-on-surface-variant\",\n              filled\n                ? \"peer-placeholder-shown:top-4\"\n                : \"peer-placeholder-shown:top-4 peer-placeholder-shown:bg-transparent\",\n              // Focused position + color\n              filled\n                ? \"peer-focus:top-2 peer-focus:text-xs\"\n                : \"peer-focus:-top-2 peer-focus:bg-md-surface peer-focus:px-1 peer-focus:text-xs\",\n              error\n                ? \"text-md-error peer-focus:text-md-error\"\n                : \"text-md-on-surface-variant peer-focus:text-md-primary\",\n            )}\n          >\n            {label}\n          </label>\n\n          {trailingIcon && (\n            <span\n              className={cn(\n                \"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 [&_svg]:size-5\",\n                error ? \"text-md-error\" : \"text-md-on-surface-variant\",\n              )}\n            >\n              {trailingIcon}\n            </span>\n          )}\n        </div>\n\n        {supportingText && (\n          <p\n            id={supportId}\n            className={cn(\"px-4 pt-1 text-xs\", error ? \"text-md-error\" : \"text-md-on-surface-variant\")}\n          >\n            {supportingText}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\nMd3TextField.displayName = \"Md3TextField\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+type Md3TextFieldVariant = "filled" | "outlined";
+interface Md3TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder"> {
+    label: string;
+    variant?: Md3TextFieldVariant;
+    supportingText?: React.ReactNode;
+    error?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+}
+/**
+ * A Material Design 3 text field (filled or outlined) with a floating label,
+ * optional leading/trailing icons, supporting text, and an error state.
+ */
+declare const Md3TextField: React.ForwardRefExoticComponent<Md3TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Md3TextField, type Md3TextFieldProps, type Md3TextFieldVariant };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+type Md3TextFieldVariant = "filled" | "outlined";
+interface Md3TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder"> {
+    label: string;
+    variant?: Md3TextFieldVariant;
+    supportingText?: React.ReactNode;
+    error?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+}
+/**
+ * A Material Design 3 text field (filled or outlined) with a floating label,
+ * optional leading/trailing icons, supporting text, and an error state.
+ */
+declare const Md3TextField: React.ForwardRefExoticComponent<Md3TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Md3TextField, type Md3TextFieldProps, type Md3TextFieldVariant };

package/dist/index.js

@@ -0,0 +1,96 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@nucleux/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var Md3TextField = React.forwardRef(
+  ({
+    label,
+    variant = "filled",
+    supportingText,
+    error = false,
+    leadingIcon,
+    trailingIcon,
+    id,
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const supportId = `${inputId}-support`;
+    const filled = variant === "filled";
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", disabled && "opacity-[0.38]", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        leadingIcon && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-md-on-surface-variant [&_svg]:size-5", children: leadingIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            placeholder: " ",
+            disabled,
+            "aria-invalid": error || void 0,
+            "aria-describedby": supportingText ? supportId : void 0,
+            className: cn(
+              "peer h-14 w-full text-base text-md-on-surface outline-none transition-colors placeholder:text-transparent disabled:cursor-not-allowed",
+              leadingIcon ? "pl-11" : "pl-4",
+              trailingIcon ? "pr-11" : "pr-4",
+              filled ? cn(
+                "rounded-t-md-xs border-0 border-b-2 bg-md-surface-container-high pb-2 pt-6",
+                error ? "border-md-error" : "border-md-on-surface-variant focus:border-md-primary"
+              ) : cn(
+                "rounded-md-xs border bg-transparent py-4",
+                error ? "border-md-error" : "border-md-outline focus:border-md-primary"
+              )
+            ),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "pointer-events-none absolute transition-all",
+              leadingIcon ? "left-11" : "left-4",
+              // Floated (default: filled value / outlined value) position
+              filled ? "top-2 text-xs" : "-top-2 bg-md-surface px-1 text-xs",
+              // Resting position when empty & unfocused
+              "peer-placeholder-shown:text-base peer-placeholder-shown:text-md-on-surface-variant",
+              filled ? "peer-placeholder-shown:top-4" : "peer-placeholder-shown:top-4 peer-placeholder-shown:bg-transparent",
+              // Focused position + color
+              filled ? "peer-focus:top-2 peer-focus:text-xs" : "peer-focus:-top-2 peer-focus:bg-md-surface peer-focus:px-1 peer-focus:text-xs",
+              error ? "text-md-error peer-focus:text-md-error" : "text-md-on-surface-variant peer-focus:text-md-primary"
+            ),
+            children: label
+          }
+        ),
+        trailingIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 [&_svg]:size-5",
+              error ? "text-md-error" : "text-md-on-surface-variant"
+            ),
+            children: trailingIcon
+          }
+        )
+      ] }),
+      supportingText && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: supportId,
+          className: cn("px-4 pt-1 text-xs", error ? "text-md-error" : "text-md-on-surface-variant"),
+          children: supportingText
+        }
+      )
+    ] });
+  }
+);
+Md3TextField.displayName = "Md3TextField";
+
+export { Md3TextField };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;AAmBO,IAAM,YAAA,GAAqB,KAAA,CAAA,UAAA;AAAA,EAChC,CACE;AAAA,IACE,KAAA;AAAA,IACA,OAAA,GAAU,QAAA;AAAA,IACV,cAAA;AAAA,IACA,KAAA,GAAQ,KAAA;AAAA,IACR,WAAA;AAAA,IACA,YAAA;AAAA,IACA,EAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,cAAoB,KAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAM,WAAA;AACtB,IAAA,MAAM,SAAA,GAAY,GAAG,OAAO,CAAA,QAAA,CAAA;AAC5B,IAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,IAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,UAAU,QAAA,IAAY,gBAAA,EAAkB,SAAS,CAAA,EAClE,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,UAAA,EACZ,QAAA,EAAA;AAAA,QAAA,WAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wGAAA,EACb,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAGF,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,EAAA,EAAI,OAAA;AAAA,YACJ,WAAA,EAAY,GAAA;AAAA,YACZ,QAAA;AAAA,YACA,gBAAc,KAAA,IAAS,MAAA;AAAA,YACvB,kBAAA,EAAkB,iBAAiB,SAAA,GAAY,MAAA;AAAA,YAC/C,SAAA,EAAW,EAAA;AAAA,cACT,uIAAA;AAAA,cACA,cAAc,OAAA,GAAU,MAAA;AAAA,cACxB,eAAe,OAAA,GAAU,MAAA;AAAA,cACzB,MAAA,GACI,EAAA;AAAA,gBACE,4EAAA;AAAA,gBACA,QAAQ,iBAAA,GAAoB;AAAA,eAC9B,GACA,EAAA;AAAA,gBACE,0CAAA;AAAA,gBACA,QAAQ,iBAAA,GAAoB;AAAA;AAC9B,aACN;AAAA,YACC,GAAG;AAAA;AAAA,SACN;AAAA,wBAEA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,SAAA,EAAW,EAAA;AAAA,cACT,6CAAA;AAAA,cACA,cAAc,SAAA,GAAY,QAAA;AAAA;AAAA,cAE1B,SAAS,eAAA,GAAkB,mCAAA;AAAA;AAAA,cAE3B,oFAAA;AAAA,cACA,SACI,8BAAA,GACA,oEAAA;AAAA;AAAA,cAEJ,SACI,qCAAA,GACA,+EAAA;AAAA,cACJ,QACI,wCAAA,GACA;AAAA,aACN;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAEC,YAAA,oBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,8EAAA;AAAA,cACA,QAAQ,eAAA,GAAkB;AAAA,aAC5B;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EAEJ,CAAA;AAAA,MAEC,cAAA,oBACC,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,KAAA,GAAQ,kBAAkB,4BAA4B,CAAA;AAAA,UAExF,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type Md3TextFieldVariant = \"filled\" | \"outlined\";\n\nexport interface Md3TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"placeholder\"> {\n  label: string;\n  variant?: Md3TextFieldVariant;\n  supportingText?: React.ReactNode;\n  error?: boolean;\n  leadingIcon?: React.ReactNode;\n  trailingIcon?: React.ReactNode;\n}\n\n/**\n * A Material Design 3 text field (filled or outlined) with a floating label,\n * optional leading/trailing icons, supporting text, and an error state.\n */\nexport const Md3TextField = React.forwardRef<HTMLInputElement, Md3TextFieldProps>(\n  (\n    {\n      label,\n      variant = \"filled\",\n      supportingText,\n      error = false,\n      leadingIcon,\n      trailingIcon,\n      id,\n      className,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id ?? generatedId;\n    const supportId = `${inputId}-support`;\n    const filled = variant === \"filled\";\n\n    return (\n      <div className={cn(\"w-full\", disabled && \"opacity-[0.38]\", className)}>\n        <div className=\"relative\">\n          {leadingIcon && (\n            <span className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-md-on-surface-variant [&_svg]:size-5\">\n              {leadingIcon}\n            </span>\n          )}\n\n          <input\n            ref={ref}\n            id={inputId}\n            placeholder=\" \"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            aria-describedby={supportingText ? supportId : undefined}\n            className={cn(\n              \"peer h-14 w-full text-base text-md-on-surface outline-none transition-colors placeholder:text-transparent disabled:cursor-not-allowed\",\n              leadingIcon ? \"pl-11\" : \"pl-4\",\n              trailingIcon ? \"pr-11\" : \"pr-4\",\n              filled\n                ? cn(\n                    \"rounded-t-md-xs border-0 border-b-2 bg-md-surface-container-high pb-2 pt-6\",\n                    error ? \"border-md-error\" : \"border-md-on-surface-variant focus:border-md-primary\",\n                  )\n                : cn(\n                    \"rounded-md-xs border bg-transparent py-4\",\n                    error ? \"border-md-error\" : \"border-md-outline focus:border-md-primary\",\n                  ),\n            )}\n            {...props}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"pointer-events-none absolute transition-all\",\n              leadingIcon ? \"left-11\" : \"left-4\",\n              // Floated (default: filled value / outlined value) position\n              filled ? \"top-2 text-xs\" : \"-top-2 bg-md-surface px-1 text-xs\",\n              // Resting position when empty & unfocused\n              \"peer-placeholder-shown:text-base peer-placeholder-shown:text-md-on-surface-variant\",\n              filled\n                ? \"peer-placeholder-shown:top-4\"\n                : \"peer-placeholder-shown:top-4 peer-placeholder-shown:bg-transparent\",\n              // Focused position + color\n              filled\n                ? \"peer-focus:top-2 peer-focus:text-xs\"\n                : \"peer-focus:-top-2 peer-focus:bg-md-surface peer-focus:px-1 peer-focus:text-xs\",\n              error\n                ? \"text-md-error peer-focus:text-md-error\"\n                : \"text-md-on-surface-variant peer-focus:text-md-primary\",\n            )}\n          >\n            {label}\n          </label>\n\n          {trailingIcon && (\n            <span\n              className={cn(\n                \"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 [&_svg]:size-5\",\n                error ? \"text-md-error\" : \"text-md-on-surface-variant\",\n              )}\n            >\n              {trailingIcon}\n            </span>\n          )}\n        </div>\n\n        {supportingText && (\n          <p\n            id={supportId}\n            className={cn(\"px-4 pt-1 text-xs\", error ? \"text-md-error\" : \"text-md-on-surface-variant\")}\n          >\n            {supportingText}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\nMd3TextField.displayName = \"Md3TextField\";\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@nucleux/md3-text-field",
+  "version": "0.3.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Material 3 text field (filled, outlined) — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "md3-text-field"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nucleux/utils": "0.3.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "lucide-react": "^0.469.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/md3-text-field"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}