@pittorica/text-field-react 0.25.0 → 0.26.0

package/README.md

@@ -4,16 +4,33 @@ The `TextField` component.
 
 ## Installation
 
-```bash
+\`\`\`bash
 npm install @pittorica/text-field-react
-```
+\`\`\`
 
 ## Usage
 
-```jsx
+\`\`\`jsx
 import { TextField } from '@pittorica/text-field-react';
-// TODO: Add usage example
-```
+
+function MyForm() {
+return (
+
+<form>
+<TextField.Root
+label="Username"
+name="username"
+required // Mark as required
+color="source" // Default color is now 'source'
+size="sm"
+helperText="Enter your username." >
+<TextField.Input placeholder="e.g. john_doe" />
+</TextField.Root>
+<button type="submit">Submit</button>
+</form>
+);
+}
+\`\`\`
 
 ## License
 

package/dist/TextField.d.ts

@@ -12,6 +12,7 @@ export type TextFieldRootProps<E extends ElementType = 'div'> = BoxProps<E> & {
     color?: PittoricaColor;
     disabled?: boolean;
     name?: string;
+    required?: boolean;
     /** @default 'sm' */
     size?: TextFieldSize;
 };
@@ -19,7 +20,7 @@ export type TextFieldRootProps<E extends ElementType = 'div'> = BoxProps<E> & {
  * Root container for TextField. Orchestrates layout, context, and sizes.
  */
 export declare const TextFieldRoot: {
-    <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
+    <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, required, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
@@ -43,8 +44,11 @@ export declare const TextFieldSlot: {
     displayName: string;
 };
 export declare const TextField: {
+    <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, required, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
     Root: {
-        <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
+        <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, required, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Input: {

package/dist/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,WAAW,EAChB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAuBtD;;GAEG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,+GAahD,kBAAkB,CAAC,CAAC,CAAC;;CA2DvB,CAAC;AAIF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,cAAc;8BAGxB,mBAAmB;;CAarB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,iDAKhD,QAAQ,CAAC,CAAC,CAAC;;CAWb,CAAC;AAEF,eAAO,MAAM,SAAS;;SA/HQ,CAAC,SAAS,WAAW,+GAahD,kBAAkB,CAAC,CAAC,CAAC;;;;kCA2ErB,mBAAmB;;;;SAqBQ,CAAC,SAAS,WAAW,iDAKhD,QAAQ,CAAC,CAAC,CAAC;;;CAiBb,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,WAAW,EAChB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAwBtD;;GAEG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,yHAchD,kBAAkB,CAAC,CAAC,CAAC;;CA6DvB,CAAC;AAIF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,cAAc;8BAGxB,mBAAmB;;CAoBrB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,iDAKhD,QAAQ,CAAC,CAAC,CAAC;;CAWb,CAAC;AAEF,eAAO,MAAM,SAAS;KAzIQ,CAAC,SAAS,WAAW,yHAchD,kBAAkB,CAAC,CAAC,CAAC;;;;SAdM,CAAC,SAAS,WAAW,yHAchD,kBAAkB,CAAC,CAAC,CAAC;;;;kCA6ErB,mBAAmB;;;;SA4BQ,CAAC,SAAS,WAAW,iDAKhD,QAAQ,CAAC,CAAC,CAAC;;;CAiBZ,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export type { TextFieldInputProps, TextFieldRootProps } from './TextField.js';
-export { TextField, TextFieldInput, TextFieldRoot, TextFieldSlot, } from './TextField.js';
+export * from './TextField.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EACL,SAAS,EACT,cAAc,EACd,aAAa,EACb,aAAa,GACd,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -1,158 +1,162 @@
-import { jsx as u, jsxs as J } from "react/jsx-runtime";
-import { createContext as K, useId as L, use as M } from "react";
-function S(t) {
-  var r, a, i = "";
+import { jsx as x, jsxs as q } from "react/jsx-runtime";
+import { createContext as K, useId as I, use as M } from "react";
+function W(t) {
+  var e, r, i = "";
   if (typeof t == "string" || typeof t == "number") i += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var p = t.length;
-    for (r = 0; r < p; r++) t[r] && (a = S(t[r])) && (i && (i += " "), i += a);
-  } else for (a in t) t[a] && (i && (i += " "), i += a);
+    for (e = 0; e < p; e++) t[e] && (r = W(t[e])) && (i && (i += " "), i += r);
+  } else for (r in t) t[r] && (i && (i += " "), i += r);
   return i;
 }
-function B() {
-  for (var t, r, a = 0, i = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (r = S(t)) && (i && (i += " "), i += r);
+function L() {
+  for (var t, e, r = 0, i = "", p = arguments.length; r < p; r++) (t = arguments[r]) && (e = W(t)) && (i && (i += " "), i += e);
   return i;
 }
-function j(t) {
-  var r, a, i = "";
+function C(t) {
+  var e, r, i = "";
   if (typeof t == "string" || typeof t == "number") i += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var p = t.length;
-    for (r = 0; r < p; r++) t[r] && (a = j(t[r])) && (i && (i += " "), i += a);
-  } else for (a in t) t[a] && (i && (i += " "), i += a);
+    for (e = 0; e < p; e++) t[e] && (r = C(t[e])) && (i && (i += " "), i += r);
+  } else for (r in t) t[r] && (i && (i += " "), i += r);
   return i;
 }
-function O() {
-  for (var t, r, a = 0, i = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (r = j(t)) && (i && (i += " "), i += r);
+function P() {
+  for (var t, e, r = 0, i = "", p = arguments.length; r < p; r++) (t = arguments[r]) && (e = C(t)) && (i && (i += " "), i += e);
   return i;
 }
-const z = ({
+const S = ({
   as: t,
-  children: r,
-  display: a,
+  children: e,
+  display: r,
   m: i,
   mt: p,
   mr: s,
   mb: o,
-  ml: l,
+  ml: d,
   mx: n,
   my: c,
-  p: f,
-  pt: v,
-  pr: m,
-  pb: g,
-  pl: h,
-  px: d,
-  py: x,
+  p: u,
+  pt: f,
+  pr: v,
+  pb: l,
+  pl: m,
+  px: g,
+  py: h,
   width: $,
   height: y,
   position: b,
   style: T,
   className: N,
   disabled: w,
+  required: R,
   ...F
 }) => {
-  const R = t || "div", e = {};
-  a && (e.display = a), $ && (e.width = $), y && (e.height = y), b && (e.position = b), i && (e.margin = `var(--pittorica-space-${i})`), p && (e.marginTop = `var(--pittorica-space-${p})`), s && (e.marginRight = `var(--pittorica-space-${s})`), o && (e.marginBottom = `var(--pittorica-space-${o})`), l && (e.marginLeft = `var(--pittorica-space-${l})`), n && (e.marginLeft = `var(--pittorica-space-${n})`, e.marginRight = `var(--pittorica-space-${n})`), c && (e.marginTop = `var(--pittorica-space-${c})`, e.marginBottom = `var(--pittorica-space-${c})`), f && (e.padding = `var(--pittorica-space-${f})`), v && (e.paddingTop = `var(--pittorica-space-${v})`), m && (e.paddingRight = `var(--pittorica-space-${m})`), g && (e.paddingBottom = `var(--pittorica-space-${g})`), h && (e.paddingLeft = `var(--pittorica-space-${h})`), d && (e.paddingLeft = `var(--pittorica-space-${d})`, e.paddingRight = `var(--pittorica-space-${d})`), x && (e.paddingTop = `var(--pittorica-space-${x})`, e.paddingBottom = `var(--pittorica-space-${x})`);
-  const A = {
+  const A = t || "div", a = {};
+  r && (a.display = r), $ && (a.width = $), y && (a.height = y), b && (a.position = b), i && (a.margin = `var(--pittorica-space-${i})`), p && (a.marginTop = `var(--pittorica-space-${p})`), s && (a.marginRight = `var(--pittorica-space-${s})`), o && (a.marginBottom = `var(--pittorica-space-${o})`), d && (a.marginLeft = `var(--pittorica-space-${d})`), n && (a.marginLeft = `var(--pittorica-space-${n})`, a.marginRight = `var(--pittorica-space-${n})`), c && (a.marginTop = `var(--pittorica-space-${c})`, a.marginBottom = `var(--pittorica-space-${c})`), u && (a.padding = `var(--pittorica-space-${u})`), f && (a.paddingTop = `var(--pittorica-space-${f})`), v && (a.paddingRight = `var(--pittorica-space-${v})`), l && (a.paddingBottom = `var(--pittorica-space-${l})`), m && (a.paddingLeft = `var(--pittorica-space-${m})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`, a.paddingRight = `var(--pittorica-space-${g})`), h && (a.paddingTop = `var(--pittorica-space-${h})`, a.paddingBottom = `var(--pittorica-space-${h})`);
+  const B = {
     ...T,
-    ...e
+    ...a
   };
-  return /* @__PURE__ */ u(
-    R,
+  return /* @__PURE__ */ x(
+    A,
     {
-      className: O("pittorica-box", N),
-      style: A,
+      className: P("pittorica-box", N),
+      style: B,
       disabled: w,
+      required: R,
       ...F,
-      children: r
+      children: e
     }
   );
 };
-z.displayName = "Box";
-function W(t) {
-  var r, a, i = "";
+S.displayName = "Box";
+function k(t) {
+  var e, r, i = "";
   if (typeof t == "string" || typeof t == "number") i += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var p = t.length;
-    for (r = 0; r < p; r++) t[r] && (a = W(t[r])) && (i && (i += " "), i += a);
-  } else for (a in t) t[a] && (i && (i += " "), i += a);
+    for (e = 0; e < p; e++) t[e] && (r = k(t[e])) && (i && (i += " "), i += r);
+  } else for (r in t) t[r] && (i && (i += " "), i += r);
   return i;
 }
-function I() {
-  for (var t, r, a = 0, i = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (r = W(t)) && (i && (i += " "), i += r);
+function j() {
+  for (var t, e, r = 0, i = "", p = arguments.length; r < p; r++) (t = arguments[r]) && (e = k(t)) && (i && (i += " "), i += e);
   return i;
 }
-function C(t) {
-  var r, a, i = "";
+function E(t) {
+  var e, r, i = "";
   if (typeof t == "string" || typeof t == "number") i += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var p = t.length;
-    for (r = 0; r < p; r++) t[r] && (a = C(t[r])) && (i && (i += " "), i += a);
-  } else for (a in t) t[a] && (i && (i += " "), i += a);
+    for (e = 0; e < p; e++) t[e] && (r = E(t[e])) && (i && (i += " "), i += r);
+  } else for (r in t) t[r] && (i && (i += " "), i += r);
   return i;
 }
-function P() {
-  for (var t, r, a = 0, i = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (r = C(t)) && (i && (i += " "), i += r);
+function Q() {
+  for (var t, e, r = 0, i = "", p = arguments.length; r < p; r++) (t = arguments[r]) && (e = E(t)) && (i && (i += " "), i += e);
   return i;
 }
-const k = ({
+const O = ({
   as: t,
-  children: r,
-  display: a,
+  children: e,
+  display: r,
   m: i,
   mt: p,
   mr: s,
   mb: o,
-  ml: l,
+  ml: d,
   mx: n,
   my: c,
-  p: f,
-  pt: v,
-  pr: m,
-  pb: g,
-  pl: h,
-  px: d,
-  py: x,
+  p: u,
+  pt: f,
+  pr: v,
+  pb: l,
+  pl: m,
+  px: g,
+  py: h,
   width: $,
   height: y,
   position: b,
   style: T,
   className: N,
   disabled: w,
+  required: R,
   ...F
 }) => {
-  const R = t || "div", e = {};
-  a && (e.display = a), $ && (e.width = $), y && (e.height = y), b && (e.position = b), i && (e.margin = `var(--pittorica-space-${i})`), p && (e.marginTop = `var(--pittorica-space-${p})`), s && (e.marginRight = `var(--pittorica-space-${s})`), o && (e.marginBottom = `var(--pittorica-space-${o})`), l && (e.marginLeft = `var(--pittorica-space-${l})`), n && (e.marginLeft = `var(--pittorica-space-${n})`, e.marginRight = `var(--pittorica-space-${n})`), c && (e.marginTop = `var(--pittorica-space-${c})`, e.marginBottom = `var(--pittorica-space-${c})`), f && (e.padding = `var(--pittorica-space-${f})`), v && (e.paddingTop = `var(--pittorica-space-${v})`), m && (e.paddingRight = `var(--pittorica-space-${m})`), g && (e.paddingBottom = `var(--pittorica-space-${g})`), h && (e.paddingLeft = `var(--pittorica-space-${h})`), d && (e.paddingLeft = `var(--pittorica-space-${d})`, e.paddingRight = `var(--pittorica-space-${d})`), x && (e.paddingTop = `var(--pittorica-space-${x})`, e.paddingBottom = `var(--pittorica-space-${x})`);
-  const A = {
+  const A = t || "div", a = {};
+  r && (a.display = r), $ && (a.width = $), y && (a.height = y), b && (a.position = b), i && (a.margin = `var(--pittorica-space-${i})`), p && (a.marginTop = `var(--pittorica-space-${p})`), s && (a.marginRight = `var(--pittorica-space-${s})`), o && (a.marginBottom = `var(--pittorica-space-${o})`), d && (a.marginLeft = `var(--pittorica-space-${d})`), n && (a.marginLeft = `var(--pittorica-space-${n})`, a.marginRight = `var(--pittorica-space-${n})`), c && (a.marginTop = `var(--pittorica-space-${c})`, a.marginBottom = `var(--pittorica-space-${c})`), u && (a.padding = `var(--pittorica-space-${u})`), f && (a.paddingTop = `var(--pittorica-space-${f})`), v && (a.paddingRight = `var(--pittorica-space-${v})`), l && (a.paddingBottom = `var(--pittorica-space-${l})`), m && (a.paddingLeft = `var(--pittorica-space-${m})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`, a.paddingRight = `var(--pittorica-space-${g})`), h && (a.paddingTop = `var(--pittorica-space-${h})`, a.paddingBottom = `var(--pittorica-space-${h})`);
+  const B = {
     ...T,
-    ...e
+    ...a
   };
-  return /* @__PURE__ */ u(
-    R,
+  return /* @__PURE__ */ x(
+    A,
     {
-      className: P("pittorica-box", N),
-      style: A,
+      className: Q("pittorica-box", N),
+      style: B,
       disabled: w,
+      required: R,
       ...F,
-      children: r
+      children: e
     }
   );
 };
-k.displayName = "Box";
-const E = ({
+O.displayName = "Box";
+const D = ({
   children: t,
-  as: r,
-  size: a,
+  as: e,
+  size: r,
   weight: i = "regular",
   align: p,
   truncate: s = !1,
   color: o,
-  className: l,
+  className: d,
   style: n,
   ...c
 }) => {
-  const f = r || "span", v = (o == null ? void 0 : o.startsWith("#")) || (o == null ? void 0 : o.startsWith("rgb")) || (o == null ? void 0 : o.startsWith("hsl")), m = /* @__PURE__ */ new Set([
+  const u = e || "span", f = (o == null ? void 0 : o.startsWith("#")) || (o == null ? void 0 : o.startsWith("rgb")) || (o == null ? void 0 : o.startsWith("hsl")), v = /* @__PURE__ */ new Set([
     "danger",
     "success",
     "error",
@@ -164,144 +168,162 @@ const E = ({
     "slate",
     "blue",
     "red"
-  ]), g = (() => {
+  ]), l = (() => {
     if (o)
-      return o === "inherit" ? "inherit" : v ? o : m.has(o) ? `var(--pittorica-${o}-9)` : o;
-  })(), h = a ? typeof a == "string" ? `pittorica-text--size-${a}` : I({
-    [`pittorica-text--size-${a.initial}`]: a.initial,
-    [`pittorica-text--xs-size-${a.xs}`]: a.xs,
-    [`pittorica-text--sm-size-${a.sm}`]: a.sm,
-    [`pittorica-text--md-size-${a.md}`]: a.md,
-    [`pittorica-text--lg-size-${a.lg}`]: a.lg,
-    [`pittorica-text--xl-size-${a.xl}`]: a.xl
-  }) : null, d = {
+      return o === "inherit" ? "inherit" : f ? o : v.has(o) ? `var(--pittorica-${o}-9)` : o;
+  })(), m = r ? typeof r == "string" ? `pittorica-text--size-${r}` : j({
+    [`pittorica-text--size-${r.initial}`]: r.initial,
+    [`pittorica-text--xs-size-${r.xs}`]: r.xs,
+    [`pittorica-text--sm-size-${r.sm}`]: r.sm,
+    [`pittorica-text--md-size-${r.md}`]: r.md,
+    [`pittorica-text--lg-size-${r.lg}`]: r.lg,
+    [`pittorica-text--xl-size-${r.xl}`]: r.xl
+  }) : null, g = {
     ...n,
     textAlign: p,
-    color: g
+    color: l
   };
-  return /* @__PURE__ */ u(
-    k,
+  return /* @__PURE__ */ x(
+    O,
     {
-      as: f,
-      className: I(
+      as: u,
+      className: j(
         "pittorica-text",
-        h,
+        m,
         { "pittorica-text--truncate": s },
-        l
+        d
       ),
       "data-weight": i,
-      style: d,
+      style: g,
       ...c,
       children: t
     }
   );
 };
-E.displayName = "Text";
-const q = K(null), Q = () => {
-  const t = M(q);
+D.displayName = "Text";
+const G = K(null), U = () => {
+  const t = M(G);
   if (!t)
     throw new Error(
       "TextField components must be wrapped in <TextField.Root />"
     );
   return t;
-}, D = ({
+}, z = ({
   children: t,
-  label: r,
-  helperText: a,
+  label: e,
+  helperText: r,
   error: i,
-  color: p = "indigo",
+  color: p = "source",
   disabled: s,
   name: o,
-  size: l = "sm",
-  className: n,
-  style: c,
+  required: d,
+  size: n = "sm",
+  className: c,
+  style: u,
   as: f,
   ...v
 }) => {
-  const m = L(), g = L(), d = p !== "inherit" && !(p != null && p.startsWith("#")) && !(p != null && p.startsWith("rgb")) ? `var(--pittorica-${p}-9)` : p;
-  return /* @__PURE__ */ u(q, { value: { inputId: m, helperId: g, disabled: s, size: l, name: o }, children: /* @__PURE__ */ J(
-    z,
+  const l = I(), m = I(), h = p !== "inherit" && !(p != null && p.startsWith("#")) && !(p != null && p.startsWith("rgb")) ? `var(--pittorica-${p}-9)` : p;
+  return /* @__PURE__ */ x(
+    G,
     {
-      as: f || "div",
-      className: B(
-        "pittorica-text-field-root",
-        `pittorica-text-field--${l}`,
-        n
-      ),
-      "data-error": i,
-      ...v,
-      children: [
-        r && /* @__PURE__ */ u(
-          E,
-          {
-            as: "label",
-            htmlFor: m,
-            weight: "medium",
-            style: {
-              paddingLeft: "4px",
-              fontSize: "var(--pittorica-font-size-1)",
-              marginBottom: "4px",
-              display: "inline-block"
-            },
-            children: r
-          }
-        ),
-        /* @__PURE__ */ u(
-          "div",
-          {
-            className: "pittorica-text-field-input-wrapper",
-            "data-disabled": s,
-            style: {
-              "--pittorica-source-color": d,
-              ...c
-            },
-            children: t
-          }
-        ),
-        a && /* @__PURE__ */ u("div", { id: g, className: "pittorica-text-field-helper", children: a })
-      ]
+      value: { inputId: l, helperId: m, disabled: s, size: n, name: o, required: d },
+      children: /* @__PURE__ */ q(
+        S,
+        {
+          as: f || "div",
+          className: L(
+            "pittorica-text-field-root",
+            `pittorica-text-field--${n}`,
+            c
+          ),
+          "data-error": i,
+          ...v,
+          children: [
+            e && /* @__PURE__ */ q(
+              D,
+              {
+                as: "label",
+                htmlFor: l,
+                weight: "medium",
+                style: {
+                  paddingLeft: "4px",
+                  fontSize: "var(--pittorica-font-size-1)",
+                  marginBottom: "4px",
+                  display: "inline-block"
+                },
+                children: [
+                  e,
+                  " ",
+                  d && /* @__PURE__ */ x("span", { "aria-hidden": "true", children: "*" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ x(
+              "div",
+              {
+                className: "pittorica-text-field-input-wrapper",
+                "data-disabled": s,
+                style: {
+                  "--pittorica-source-color": h,
+                  ...u
+                },
+                children: t
+              }
+            ),
+            r && /* @__PURE__ */ x("div", { id: m, className: "pittorica-text-field-helper", children: r })
+          ]
+        }
+      )
     }
-  ) });
-}, G = ({
+  );
+}, H = ({
   className: t,
-  ...r
+  ...e
 }) => {
-  const { inputId: a, helperId: i, disabled: p, name: s } = Q();
-  return /* @__PURE__ */ u(
+  const {
+    inputId: r,
+    helperId: i,
+    disabled: p,
+    name: s,
+    required: o
+  } = U();
+  return /* @__PURE__ */ x(
     "input",
     {
       name: s,
-      ...r,
-      id: a,
+      ...e,
+      id: r,
       "aria-describedby": i,
       disabled: p,
-      className: B("pittorica-text-field-input", t)
+      required: o,
+      className: L("pittorica-text-field-input", t)
     }
   );
-}, H = ({
+}, J = ({
   children: t,
-  className: r,
-  as: a,
+  className: e,
+  as: r,
   ...i
-}) => /* @__PURE__ */ u(
-  z,
+}) => /* @__PURE__ */ x(
+  S,
   {
-    as: a || "div",
-    className: B("pittorica-text-field-slot", r),
+    as: r || "div",
+    className: L("pittorica-text-field-slot", e),
     ...i,
     children: t
   }
-), X = {
-  Root: D,
-  Input: G,
-  Slot: H
-};
-D.displayName = "TextField.Root";
-G.displayName = "TextField.Input";
-H.displayName = "TextField.Slot";
+), Y = Object.assign(z, {
+  Root: z,
+  Input: H,
+  Slot: J
+});
+z.displayName = "TextField.Root";
+H.displayName = "TextField.Input";
+J.displayName = "TextField.Slot";
 export {
-  X as TextField,
-  G as TextFieldInput,
-  D as TextFieldRoot,
-  H as TextFieldSlot
+  Y as TextField,
+  H as TextFieldInput,
+  z as TextFieldRoot,
+  J as TextFieldSlot
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pittorica/text-field-react",
-  "version": "0.25.0",
+  "version": "0.26.0",
+  "homepage": "https://pittorica.dcdavidev.me",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,8 +11,8 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "@pittorica/text-react": "0.25.0",
-    "@pittorica/box-react": "0.25.0"
+    "@pittorica/text-react": "0.26.0",
+    "@pittorica/box-react": "0.26.0"
   },
   "devDependencies": {
     "@tabler/icons-react": "^3.36.1",
@@ -22,11 +23,11 @@
     "@vitejs/plugin-react": "^4.0.0",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.1.9",
-    "@pittorica/flex-react": "0.25.0",
-    "@pittorica/theme-react": "0.25.0",
-    "pittorica": "0.25.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "@pittorica/theme-react": "0.26.0",
+    "@pittorica/flex-react": "0.26.0",
+    "pittorica": "0.26.0"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -36,7 +37,7 @@
     "build": "npm run clean && npm run build:js && npm run build:types",
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist *.tsbuildinfo",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/dist/TextField.stories.d.ts

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TextField } from './TextField.js';
-/**
- * TextField component following Radix UI's compact design.
- * Supports 5 sizes and compound component architecture for slots.
- */
-declare const meta: Meta<typeof TextField.Root>;
-export default meta;
-export declare const Basic: StoryObj;
-/**
- * Visualization of the 5 sizes scaling height and font-size.
- */
-export declare const AllSizes: StoryObj;
-export declare const WithDecorators: StoryObj;
-export declare const Search: StoryObj;
-//# sourceMappingURL=TextField.stories.d.ts.map

package/dist/TextField.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.stories.d.ts","sourceRoot":"","sources":["../src/TextField.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAAC,IAAI,CAiBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,QAUnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,QAoBtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAuB5B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAqBpB,CAAC"}

package/dist/TextField.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import '@testing-library/jest-dom';
-//# sourceMappingURL=TextField.test.d.ts.map

package/dist/TextField.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.test.d.ts","sourceRoot":"","sources":["../src/TextField.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}