@pittorica/text-field-react 0.22.3 → 0.23.0

package/dist/TextField.d.ts

@@ -1,24 +1,37 @@
 import { type ReactNode, type Ref } from 'react';
 import { type BoxProps } from '@pittorica/box-react';
 import type { PittoricaColor } from '@pittorica/text-react';
+type TextFieldSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface TextFieldRootProps extends BoxProps {
     label?: ReactNode;
     helperText?: ReactNode;
     error?: boolean;
     color?: PittoricaColor;
     disabled?: boolean;
+    /** @default 'sm' */
+    size?: TextFieldSize;
 }
-export declare const TextFieldRoot: ({ children, label, helperText, error, color, disabled, className, style, ...props }: TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Root container for TextField. Orchestrates layout, context, and sizes.
+ */
+export declare const TextFieldRoot: ({ children, label, helperText, error, color, disabled, size, className, style, ...props }: TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
 export type TextFieldInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+/**
+ * Native input element with semantic context and responsive sizing.
+ */
 export declare const TextFieldInput: ({ className, ref, ...props }: TextFieldInputProps & {
     ref?: Ref<HTMLInputElement>;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Visual slot for icons or interactive elements.
+ */
 export declare const TextFieldSlot: ({ children, className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TextField: {
-    Root: ({ children, label, helperText, error, color, disabled, className, style, ...props }: TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, label, helperText, error, color, disabled, size, className, style, ...props }: TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
     Input: ({ className, ref, ...props }: TextFieldInputProps & {
         ref?: Ref<HTMLInputElement>;
     }) => import("react/jsx-runtime").JSX.Element;
     Slot: ({ children, className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 };
+export {};
 //# sourceMappingURL=TextField.d.ts.map

package/dist/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAqB5D,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD,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;CACpB;AAED,eAAO,MAAM,aAAa,GAAI,qFAU3B,kBAAkB,4CAgDpB,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9E,eAAO,MAAM,cAAc,GAAI,8BAI5B,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,4CAavD,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,mCAAmC,QAAQ,4CAIxE,CAAC;AAEF,eAAO,MAAM,SAAS;gGA/EnB,kBAAkB;0CAyDlB,mBAAmB,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;KAAE;8CAgBS,QAAQ;CAUxE,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAI5E,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;AAqBtD,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD,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,oBAAoB;IACpB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,2FAW3B,kBAAkB,4CAwDpB,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,8BAI5B,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,4CAavD,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,mCAAmC,QAAQ,4CAIxE,CAAC;AAEF,eAAO,MAAM,SAAS;sGA7FnB,kBAAkB;0CAoElB,mBAAmB,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;KAAE;8CAmBS,QAAQ;CAUxE,CAAC"}

package/dist/TextField.stories.d.ts

@@ -1,8 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { TextField } from './TextField';
+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 +1 @@
-{"version":3,"file":"TextField.stories.d.ts","sourceRoot":"","sources":["../src/TextField.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAAC,IAAI,CAIrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,QAMnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAsB5B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QASpB,CAAC"}
+{"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/index.js

@@ -1,29 +1,29 @@
-import { jsx as m, jsxs as z } from "react/jsx-runtime";
-import { createContext as D, useId as B, use as G } from "react";
-function L(t) {
+import { jsx as g, jsxs as E } from "react/jsx-runtime";
+import { createContext as D, useId as S, use as G } from "react";
+function j(t) {
   var r, i, e = "";
   if (typeof t == "string" || typeof t == "number") e += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var a = t.length;
-    for (r = 0; r < a; r++) t[r] && (i = L(t[r])) && (e && (e += " "), e += i);
+    for (r = 0; r < a; r++) t[r] && (i = j(t[r])) && (e && (e += " "), e += i);
   } else for (i in t) t[i] && (e && (e += " "), e += i);
   return e;
 }
-function j() {
-  for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = L(t)) && (e && (e += " "), e += r);
+function I() {
+  for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = j(t)) && (e && (e += " "), e += r);
   return e;
 }
-function S(t) {
+function L(t) {
   var r, i, e = "";
   if (typeof t == "string" || typeof t == "number") e += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var a = t.length;
-    for (r = 0; r < a; r++) t[r] && (i = S(t[r])) && (e && (e += " "), e += i);
+    for (r = 0; r < a; r++) t[r] && (i = L(t[r])) && (e && (e += " "), e += i);
   } else for (i in t) t[i] && (e && (e += " "), e += i);
   return e;
 }
 function H() {
-  for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = S(t)) && (e && (e += " "), e += r);
+  for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = L(t)) && (e && (e += " "), e += r);
   return e;
 }
 const W = ({
@@ -32,15 +32,15 @@ const W = ({
   children: i,
   display: e,
   m: a,
-  mt: n,
-  mr: c,
+  mt: s,
+  mr: o,
   mb: l,
   ml: d,
-  p: o,
+  p: f,
   pt: p,
-  pr: g,
-  pb: f,
-  pl: h,
+  pr: c,
+  pb: h,
+  pl: m,
   width: u,
   height: v,
   position: y,
@@ -54,18 +54,18 @@ const W = ({
   disabled: A,
   ...R
 }) => {
-  const s = {};
-  e && (s.display = e), u && (s.width = u), v && (s.height = v), y && (s.position = y), a && (s.margin = `var(--pittorica-space-${a})`), n && (s.marginTop = `var(--pittorica-space-${n})`), c && (s.marginRight = `var(--pittorica-space-${c})`), l && (s.marginBottom = `var(--pittorica-space-${l})`), d && (s.marginLeft = `var(--pittorica-space-${d})`), o && (s.padding = `var(--pittorica-space-${o})`), p && (s.paddingTop = `var(--pittorica-space-${p})`), g && (s.paddingRight = `var(--pittorica-space-${g})`), f && (s.paddingBottom = `var(--pittorica-space-${f})`), h && (s.paddingLeft = `var(--pittorica-space-${h})`);
-  const I = {
+  const n = {};
+  e && (n.display = e), u && (n.width = u), v && (n.height = v), y && (n.position = y), a && (n.margin = `var(--pittorica-space-${a})`), s && (n.marginTop = `var(--pittorica-space-${s})`), o && (n.marginRight = `var(--pittorica-space-${o})`), l && (n.marginBottom = `var(--pittorica-space-${l})`), d && (n.marginLeft = `var(--pittorica-space-${d})`), f && (n.padding = `var(--pittorica-space-${f})`), p && (n.paddingTop = `var(--pittorica-space-${p})`), c && (n.paddingRight = `var(--pittorica-space-${c})`), h && (n.paddingBottom = `var(--pittorica-space-${h})`), m && (n.paddingLeft = `var(--pittorica-space-${m})`);
+  const B = {
     ...x,
-    ...s
+    ...n
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ g(
     r,
     {
       ref: t,
       className: H("pittorica-box", b),
-      style: I,
+      style: B,
       href: $,
       target: F,
       rel: N,
@@ -91,34 +91,34 @@ function J() {
   for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = C(t)) && (e && (e += " "), e += r);
   return e;
 }
-function q(t) {
+function k(t) {
   var r, i, e = "";
   if (typeof t == "string" || typeof t == "number") e += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var a = t.length;
-    for (r = 0; r < a; r++) t[r] && (i = q(t[r])) && (e && (e += " "), e += i);
+    for (r = 0; r < a; r++) t[r] && (i = k(t[r])) && (e && (e += " "), e += i);
   } else for (i in t) t[i] && (e && (e += " "), e += i);
   return e;
 }
 function K() {
-  for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = q(t)) && (e && (e += " "), e += r);
+  for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = k(t)) && (e && (e += " "), e += r);
   return e;
 }
-const k = ({
+const q = ({
   ref: t,
   as: r = "div",
   children: i,
   display: e,
   m: a,
-  mt: n,
-  mr: c,
+  mt: s,
+  mr: o,
   mb: l,
   ml: d,
-  p: o,
+  p: f,
   pt: p,
-  pr: g,
-  pb: f,
-  pl: h,
+  pr: c,
+  pb: h,
+  pl: m,
   width: u,
   height: v,
   position: y,
@@ -132,18 +132,18 @@ const k = ({
   disabled: A,
   ...R
 }) => {
-  const s = {};
-  e && (s.display = e), u && (s.width = u), v && (s.height = v), y && (s.position = y), a && (s.margin = `var(--pittorica-space-${a})`), n && (s.marginTop = `var(--pittorica-space-${n})`), c && (s.marginRight = `var(--pittorica-space-${c})`), l && (s.marginBottom = `var(--pittorica-space-${l})`), d && (s.marginLeft = `var(--pittorica-space-${d})`), o && (s.padding = `var(--pittorica-space-${o})`), p && (s.paddingTop = `var(--pittorica-space-${p})`), g && (s.paddingRight = `var(--pittorica-space-${g})`), f && (s.paddingBottom = `var(--pittorica-space-${f})`), h && (s.paddingLeft = `var(--pittorica-space-${h})`);
-  const I = {
+  const n = {};
+  e && (n.display = e), u && (n.width = u), v && (n.height = v), y && (n.position = y), a && (n.margin = `var(--pittorica-space-${a})`), s && (n.marginTop = `var(--pittorica-space-${s})`), o && (n.marginRight = `var(--pittorica-space-${o})`), l && (n.marginBottom = `var(--pittorica-space-${l})`), d && (n.marginLeft = `var(--pittorica-space-${d})`), f && (n.padding = `var(--pittorica-space-${f})`), p && (n.paddingTop = `var(--pittorica-space-${p})`), c && (n.paddingRight = `var(--pittorica-space-${c})`), h && (n.paddingBottom = `var(--pittorica-space-${h})`), m && (n.paddingLeft = `var(--pittorica-space-${m})`);
+  const B = {
     ...x,
-    ...s
+    ...n
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ g(
     r,
     {
       ref: t,
       className: K("pittorica-box", b),
-      style: I,
+      style: B,
       href: $,
       target: F,
       rel: N,
@@ -155,23 +155,23 @@ const k = ({
     }
   );
 };
-k.displayName = "Box";
+q.displayName = "Box";
 const M = ({
   children: t,
   as: r = "span",
   weight: i = "regular",
   align: e,
   truncate: a = !1,
-  color: n,
-  className: c,
+  color: s,
+  className: o,
   style: l,
   href: d,
-  target: o,
+  target: f,
   rel: p,
-  htmlFor: g,
-  ...f
+  htmlFor: c,
+  ...h
 }) => {
-  const h = (n == null ? void 0 : n.startsWith("#")) || (n == null ? void 0 : n.startsWith("rgb")) || (n == null ? void 0 : n.startsWith("hsl")), u = /* @__PURE__ */ new Set([
+  const m = (s == null ? void 0 : s.startsWith("#")) || (s == null ? void 0 : s.startsWith("rgb")) || (s == null ? void 0 : s.startsWith("hsl")), u = /* @__PURE__ */ new Set([
     "danger",
     "success",
     "error",
@@ -184,34 +184,34 @@ const M = ({
     "blue",
     "red"
   ]), v = (() => {
-    if (n)
-      return n === "inherit" ? "inherit" : h ? n : u.has(n) ? `var(--pittorica-${n}-9)` : n;
+    if (s)
+      return s === "inherit" ? "inherit" : m ? s : u.has(s) ? `var(--pittorica-${s}-9)` : s;
   })(), y = {
     ...l,
     textAlign: e,
     color: v
   };
-  return /* @__PURE__ */ m(
-    k,
+  return /* @__PURE__ */ g(
+    q,
     {
       as: r,
       className: J(
         "pittorica-text",
         { "pittorica-text--truncate": a },
-        c
+        o
       ),
       "data-weight": i,
       style: y,
       href: d,
-      target: o,
+      target: f,
       rel: p,
-      htmlFor: g,
-      ...f,
+      htmlFor: c,
+      ...h,
       children: t
     }
   );
-}, E = D(null), O = () => {
-  const t = G(E);
+}, z = D(null), O = () => {
+  const t = G(z);
   if (!t)
     throw new Error(
       "TextField components must be wrapped in <TextField.Root />"
@@ -223,43 +223,52 @@ const M = ({
   helperText: i,
   error: e,
   color: a = "indigo",
-  disabled: n,
-  className: c,
-  style: l,
-  ...d
+  disabled: s,
+  size: o = "sm",
+  className: l,
+  style: d,
+  ...f
 }) => {
-  const o = B(), p = B(), f = a !== "inherit" && !(a != null && a.startsWith("#")) && !(a != null && a.startsWith("rgb")) ? `var(--pittorica-${a}-9)` : a;
-  return /* @__PURE__ */ m(E, { value: { inputId: o, helperId: p, disabled: n }, children: /* @__PURE__ */ z(
+  const p = S(), c = S(), m = a !== "inherit" && !(a != null && a.startsWith("#")) && !(a != null && a.startsWith("rgb")) ? `var(--pittorica-${a}-9)` : a;
+  return /* @__PURE__ */ g(z, { value: { inputId: p, helperId: c, disabled: s, size: o }, children: /* @__PURE__ */ E(
     W,
     {
-      ...d,
-      className: j("pittorica-text-field-root", c),
+      ...f,
+      className: I(
+        "pittorica-text-field-root",
+        `pittorica-text-field--${o}`,
+        l
+      ),
       "data-error": e,
       children: [
-        r && /* @__PURE__ */ m(
+        r && /* @__PURE__ */ g(
           M,
           {
             as: "label",
-            htmlFor: o,
+            htmlFor: p,
             weight: "medium",
-            mb: "1",
-            style: { paddingLeft: "4px" },
+            style: {
+              paddingLeft: "4px",
+              fontSize: "var(--pittorica-font-size-1)",
+              marginBottom: "4px",
+              display: "inline-block"
+            },
             children: r
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ g(
           "div",
           {
             className: "pittorica-text-field-input-wrapper",
-            "data-disabled": n,
+            "data-disabled": s,
             style: {
-              "--pittorica-source-color": f,
-              ...l
+              "--pittorica-source-color": m,
+              ...d
             },
             children: t
           }
         ),
-        i && /* @__PURE__ */ m("div", { id: p, className: "pittorica-text-field-helper", children: i })
+        i && /* @__PURE__ */ g("div", { id: c, className: "pittorica-text-field-helper", children: i })
       ]
     }
   ) });
@@ -268,19 +277,19 @@ const M = ({
   ref: r,
   ...i
 }) => {
-  const { inputId: e, helperId: a, disabled: n } = O();
-  return /* @__PURE__ */ m(
+  const { inputId: e, helperId: a, disabled: s } = O();
+  return /* @__PURE__ */ g(
     "input",
     {
       ...i,
       id: e,
       "aria-describedby": a,
-      disabled: n,
+      disabled: s,
       ref: r,
-      className: j("pittorica-text-field-input", t)
+      className: I("pittorica-text-field-input", t)
     }
   );
-}, U = ({ children: t, className: r, ...i }) => /* @__PURE__ */ m("div", { className: j("pittorica-text-field-slot", r), ...i, children: t }), Y = {
+}, U = ({ children: t, className: r, ...i }) => /* @__PURE__ */ g("div", { className: I("pittorica-text-field-slot", r), ...i, children: t }), Y = {
   Root: P,
   Input: Q,
   Slot: U

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pittorica/text-field-react",
-  "version": "0.22.3",
+  "version": "0.23.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,8 +10,8 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "@pittorica/box-react": "0.22.3",
-    "@pittorica/text-react": "0.22.3"
+    "@pittorica/box-react": "0.23.0",
+    "@pittorica/text-react": "0.23.0"
   },
   "devDependencies": {
     "@tabler/icons-react": "^3.36.1",
@@ -24,9 +24,9 @@
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
     "vitest": "^2.1.9",
-    "@pittorica/flex-react": "0.22.3",
-    "@pittorica/theme-react": "0.22.3",
-    "pittorica": "0.22.3"
+    "@pittorica/flex-react": "0.23.0",
+    "pittorica": "0.23.0",
+    "@pittorica/theme-react": "0.23.0"
   },
   "peerDependencies": {
     "react": ">=19",