@foi/design-system 0.0.15 → 0.0.17

package/README.md

@@ -42,20 +42,21 @@ npm publish --access public
 
 ### Atoms
 
-| Component    | Description                                                         |
-| ------------ | ------------------------------------------------------------------- |
-| `Button`     | Primary action button with variant/size/color support               |
-| `Checkbox`   | Single checkbox — standalone, RHF, or inside a group                |
-| `DatePicker` | Date input with calendar menu, integrates with RHF                  |
-| `Icon`       | Font-based icon using Material Symbols Rounded — pass a `name` prop |
-| `IconButton` | Clickable icon with button semantics                                |
-| `Input`      | Text input field with label, helper text, and error state           |
-| `Pagination` | Page navigation bar with first/prev/next/last buttons and optional rows-per-page selector |
-| `Radio`      | Single radio button — used inside `RadioGroup`                      |
-| `Select`     | Dropdown select with RHF integration                                |
-| `Skeleton`   | Animated placeholder shown while content is loading — rectangular or circular |
-| `Slider`     | Range slider with RHF integration                                   |
-| `Switch`     | Toggle switch — boolean RHF field                                   |
+| Component     | Description                                                                                |
+| ------------- | ------------------------------------------------------------------------------------------ |
+| `Button`      | Primary action button with variant/size/color support                                      |
+| `Checkbox`    | Single checkbox — standalone, RHF, or inside a group                                       |
+| `DatePicker`  | Date input with calendar menu, integrates with RHF                                         |
+| `Icon`        | Font-based icon using Material Symbols Rounded — pass a `name` prop                        |
+| `IconButton`  | Clickable icon with button semantics                                                        |
+| `NumberField` | Numeric input with increment/decrement buttons, min/max/step support, and two layout modes |
+| `Pagination`  | Page navigation bar with first/prev/next/last buttons and optional rows-per-page selector  |
+| `Radio`       | Single radio button — used inside `RadioGroup`                                              |
+| `Select`      | Dropdown select with RHF integration                                                       |
+| `Skeleton`    | Animated placeholder shown while content is loading — rectangular or circular              |
+| `Slider`      | Range slider with RHF integration                                                          |
+| `Switch`      | Toggle switch — boolean RHF field                                                          |
+| `TextField`   | Text input (text, password, email) with label, helper text, and error state                |
 
 ### Molecules
 
@@ -80,12 +81,13 @@ All field components share the same integration pattern. Define a Zod schema, pa
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import Input from '@components/atoms/Input';
+import TextField from '@components/atoms/TextField';
+import NumberField from '@components/atoms/NumberField';
 import Button from '@components/atoms/Button';
 
 const schema = z.object({
   email: z.string().email('Invalid email'),
-  age: z.number().min(18, 'Must be 18 or older'),
+  age: z.number({ message: 'Required' }).min(18, 'Must be 18 or older'),
 });
 
 type FormValues = z.infer<typeof schema>;
@@ -97,8 +99,8 @@ const MyForm = () => {
 
   return (
     <form onSubmit={handleSubmit(console.log)}>
-      <Input name='email' control={control} label='Email' />
-      <Input name='age' control={control} label='Age' type='number' />
+      <TextField name='email' control={control} label='Email' />
+      <NumberField name='age' control={control} label='Age' min={18} />
       <Button type='submit' label='Submit' />
     </form>
   );
@@ -131,6 +133,103 @@ const [agreed, setAgreed] = useState(false);
 <Checkbox checked={agreed} onChecked={setAgreed} label='I agree to the terms' />;
 ```
 
+## TextField
+
+A text input field with a floating label, helper text, and full error state integration. Only accepts `text`, `password`, and `email` as input types. For numeric input use `NumberField`.
+
+### Props
+
+| Prop            | Type                                      | Default    | Description                                          |
+| --------------- | ----------------------------------------- | ---------- | ---------------------------------------------------- |
+| `name`          | `string`                                  | —          | Field name, used by RHF                              |
+| `label`         | `string`                                  | —          | Floating label text                                  |
+| `control`       | `Control`                                 | —          | RHF control object; omit for uncontrolled mode       |
+| `value`         | `string`                                  | —          | Value in uncontrolled mode                           |
+| `onValueChange` | `(value: string) => void`                 | —          | Change handler in uncontrolled mode                  |
+| `type`          | `'text' \| 'password' \| 'email'`         | `'text'`   | HTML input type                                      |
+| `width`         | `'small' \| 'medium' \| 'large' \| 'full'` | —        | Preset width                                         |
+| `helperText`    | `string`                                  | —          | Hint text shown below the field when there is no error |
+| `showErrorText` | `boolean`                                 | `true`     | Show the validation error message below the field    |
+| `hasPadding`    | `boolean`                                 | `false`    | Add bottom padding to reserve space for helper/error text |
+| `startAdornment`| `JSX.Element`                             | —          | Element rendered to the left of the input            |
+| `endAdornment`  | `JSX.Element`                             | —          | Element rendered to the right of the input           |
+| `regex`         | `RegExp`                                  | —          | Block keystrokes that don't match the pattern        |
+| `format`        | `(value: string) => string`               | —          | Transform the value before it is stored              |
+| `disabled`      | `boolean`                                 | `false`    | Disable the field                                    |
+| `theme`         | `EVENTS`                                  | —          | One-off token override for this instance             |
+| `variant`       | `string`                                  | `'default'`| Theme variant name                                   |
+
+### Example
+
+```tsx
+import TextField from '@components/atoms/TextField';
+import Icon from '@components/atoms/Icon';
+
+<TextField
+  name='email'
+  control={control}
+  label='Email'
+  type='email'
+  startAdornment={<Icon name='mail' />}
+  helperText='We will never share your email'
+/>
+```
+
+## NumberField
+
+A numeric input that stores a `number` in RHF (or `undefined` when empty). The field always renders increment/decrement buttons; their position depends on the `display` prop.
+
+### Props
+
+All `TextField` props apply except `type`, `endAdornment`, and `startAdornment` (in `spinner` mode). The following props are specific to `NumberField`:
+
+| Prop      | Type                          | Default      | Description                                                              |
+| --------- | ----------------------------- | ------------ | ------------------------------------------------------------------------ |
+| `min`     | `number`                      | —            | Minimum allowed value; decrement button disables at this bound           |
+| `max`     | `number`                      | —            | Maximum allowed value; increment button disables at this bound           |
+| `step`    | `number`                      | `1`          | Amount added or subtracted on each button click                          |
+| `display` | `'standard' \| 'spinner'`     | `'standard'` | `standard`: both buttons on the right; `spinner`: remove left, input centre, add right |
+
+### Display modes
+
+**`standard`** (default) — both buttons grouped on the right:
+
+```
+[startAdornment?]  [    input    ]  [− +]
+```
+
+**`spinner`** — decrement on the left, input centred, increment on the right:
+
+```
+[−]  [    input    ]  [+]
+```
+
+### Example
+
+```tsx
+import NumberField from '@components/atoms/NumberField';
+
+// Standard — quantity picker with bounds
+<NumberField
+  name='quantity'
+  control={control}
+  label='Quantity'
+  min={1}
+  max={99}
+  step={1}
+/>
+
+// Spinner layout
+<NumberField
+  name='quantity'
+  control={control}
+  label='Quantity'
+  display='spinner'
+  min={0}
+  max={100}
+/>
+```
+
 ## Theming
 
 Wrap your app in `ThemeProvider` and pass one or more named themes. The active theme is selected by the `theme` prop and its tokens are injected as CSS custom properties that every component consumes.
@@ -230,7 +329,7 @@ interface Product { id: number; name: string; price: number; }
 const columns: DataGridColumn<Product>[] = [
   {
     key: 'name',
-    label: 'Product',
+    label: 'Product',      // string → wrapped in the themed --DATAGRID-thLabel span
     type: 'text',
     filter: { type: 'search' },
   },
@@ -243,6 +342,23 @@ const columns: DataGridColumn<Product>[] = [
 ];
 ```
 
+`label` accepts any `ReactNode`. A plain string is automatically wrapped in the themed `--DATAGRID-thLabel` span so it inherits the header typography. Pass a custom node to render icons, badges, or anything else without that wrapper:
+
+```tsx
+import Icon from '@components/atoms/Icon';
+
+{
+  key: 'price',
+  label: (
+    <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+      <Icon name='payments' size='sm' />
+      Price
+    </span>
+  ),
+  type: 'number',
+}
+```
+
 ### The `onFetch` contract
 
 `onFetch` receives `{ page, pageSize, sort?, filters? }` and must return `{ data, total }`. It is called automatically whenever the page, sort, or any filter changes.

package/dist/RadioGroup-DzEJw4WJ.js

@@ -0,0 +1,456 @@
+import { i as e, n as t, r as n } from "./emotion-react-jsx-runtime.browser.esm-Ch-DwUYg.js";
+import { r } from "./theme-D01EcUA9.js";
+import { a as i, i as a, n as o, o as s, r as c, s as l, t as u } from "./RadioGroup.context-Bu218uUX.js";
+import d, { useEffect as f, useMemo as p, useRef as m } from "react";
+import { css as h } from "@emotion/react";
+import { useController as g } from "react-hook-form";
+import { createPortal as _ } from "react-dom";
+//#region src/components/molecules/CheckboxGroup/CheckboxGroup.emotion.ts
+var v = (e, t) => `
+  .--CHECKBOXGROUP-label {
+    ${r(e, "color", `--CHECKBOXGROUP-EVENTS-${t}-COLOR-PRIMARY`)}
+  }
+
+  .--CHECKBOXGROUP-helperText {
+    ${r(e, "color", `--CHECKBOXGROUP-EVENTS-${t}-COLOR-SECONDARY`)}
+  }
+`, y = (e) => h`
+  &.--CHECKBOXGROUP {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+
+    // ENABLED
+    ${v(e, "ENABLED")};
+
+    // ERROR
+    &.--CHECKBOXGROUP-error {
+      ${v(e, "ERROR")};
+    }
+
+    // DISABLED
+    &.--CHECKBOXGROUP-disabled {
+      ${v(e, "DISABLED")};
+    }
+
+    .--CHECKBOXGROUP-items {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &.--CHECKBOXGROUP--horizontal .--CHECKBOXGROUP-items {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .--CHECKBOXGROUP-label {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    .--CHECKBOXGROUP-helperText {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 13px;
+      line-height: 16px;
+      margin-left: 14px;
+    }
+  }
+`, b = "--CHECKBOXGROUP", x = ({ name: e, control: r, children: a, label: o, helperText: s, showErrorText: c = !0, disabled: l, direction: u = "vertical", style: d, className: f }) => {
+	let { field: p, fieldState: m } = g({
+		control: r,
+		name: e
+	}), h = Array.isArray(p.value) ? p.value : [], _ = m.error;
+	return /* @__PURE__ */ t(i.Provider, {
+		value: {
+			checkedValues: h,
+			onChange: (e, t) => {
+				let n = t ? [...h, e] : h.filter((t) => t !== e);
+				p.onChange(n), p.onBlur();
+			},
+			disabled: l,
+			error: _
+		},
+		children: /* @__PURE__ */ n("div", {
+			className: [
+				b,
+				`${b}--${u}`,
+				c && _?.message && `${b}-error`,
+				l && `${b}-disabled`,
+				f || ""
+			].join(" "),
+			css: y(d),
+			"data-testid": b,
+			children: [
+				o && /* @__PURE__ */ t("span", {
+					className: `${b}-label`,
+					"data-testid": `${b}-label`,
+					children: o
+				}),
+				/* @__PURE__ */ t("div", {
+					className: `${b}-items`,
+					"data-testid": `${b}-items`,
+					children: a
+				}),
+				/* @__PURE__ */ n("span", {
+					className: `${b}-helperText`,
+					"data-testid": `${b}-helperText`,
+					children: [s && (!_ || !c) && s, c && _ && _.message]
+				})
+			]
+		})
+	});
+}, S = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([l.CHECKBOXGROUP], n, r.toUpperCase());
+	return /* @__PURE__ */ t(x, {
+		...i,
+		style: a
+	});
+}, C = (e) => h`
+  &.--CHECKBOXTREE {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+
+    .--CHECKBOXTREE-children {
+      display: flex;
+      flex-direction: column;
+      padding-left: 36px;
+      gap: 16px;
+    }
+
+    .--CHECKBOXTREE-helperText {
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 13px;
+      line-height: 16px;
+      margin-left: 14px;
+      ${r(e, "color", "--CHECKBOXTREE-EVENTS-ENABLED-COLOR-SECONDARY")}
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &.--CHECKBOXTREE-error {
+      .--CHECKBOXTREE-helperText {
+        ${r(e, "color", "--CHECKBOXTREE-EVENTS-ERROR-COLOR-SECONDARY")}
+      }
+    }
+
+    &.--CHECKBOXTREE-disabled {
+      .--CHECKBOXTREE-helperText {
+        ${r(e, "color", "--CHECKBOXTREE-EVENTS-DISABLED-COLOR-SECONDARY")}
+      }
+    }
+  }
+`, w = "--CHECKBOXTREE", T = ({ name: e, control: r, children: i, label: o, iconChecked: l = /* @__PURE__ */ t(s, { name: "check" }), iconIndeterminate: u = /* @__PURE__ */ t(s, { name: "remove" }), helperText: h, showErrorText: _ = !0, disabled: v, style: y, className: b }) => {
+	let { field: x, fieldState: S } = g({
+		control: r,
+		name: e
+	}), T = Array.isArray(x.value) ? x.value : [], E = S.error, D = p(() => d.Children.toArray(i).map((e) => {
+		let t = e;
+		return t.props?.value ?? t.props?.name ?? "";
+	}).filter(Boolean), [i]), O = D.length > 0 && D.every((e) => T.includes(e)), k = !O && D.some((e) => T.includes(e)), A = m(null);
+	return f(() => {
+		let e = A.current?.querySelectorAll("input[type=\"checkbox\"]")[0];
+		e && (e.indeterminate = k);
+	}, [k]), /* @__PURE__ */ n("div", {
+		ref: A,
+		className: [
+			w,
+			_ && E?.message ? `${w}-error` : "",
+			v ? `${w}-disabled` : "",
+			b || ""
+		].join(" "),
+		css: C(y),
+		"data-testid": w,
+		children: [
+			/* @__PURE__ */ t(c, {
+				checked: O || k,
+				onChecked: (e) => {
+					let t = e ? [...D] : [];
+					x.onChange(t), x.onBlur();
+				},
+				label: o,
+				icon: k ? u : l,
+				disabled: v,
+				showErrorText: !1,
+				helperText: void 0
+			}),
+			/* @__PURE__ */ t(a.Provider, {
+				value: {
+					checkedValues: T,
+					onChange: (e, t) => {
+						let n = t ? [...T, e] : T.filter((t) => t !== e);
+						x.onChange(n), x.onBlur();
+					},
+					disabled: v,
+					error: E
+				},
+				children: /* @__PURE__ */ t("div", {
+					className: `${w}-children`,
+					"data-testid": `${w}-children`,
+					children: i
+				})
+			}),
+			/* @__PURE__ */ n("span", {
+				className: `${w}-helperText`,
+				"data-testid": `${w}-helperText`,
+				children: [h && (!E || !_) && h, _ && E && E.message]
+			})
+		]
+	});
+}, E = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([l.CHECKBOXTREE], n, r.toUpperCase());
+	return /* @__PURE__ */ t(T, {
+		...i,
+		style: a
+	});
+}, D = (e, t) => `
+    // BACKGROUNDS
+    ${r(e, "background-color", `--MODAL-${t}-BACKGROUND-COLOR`)}
+        
+    // BORDERS
+    ${r(e, "border-color", `--MODAL-${t}-BORDER-COLOR`)}
+    ${r(e, "border-width", `--MODAL-${t}-BORDER-WIDTH`)}
+    ${r(e, "border-style", `--MODAL-${t}-BORDER-STYLE`)}
+    ${r(e, "border-radius", `--MODAL-${t}-BORDER-RADIUS`)}
+`, O = (e) => h`
+  &.--MODAL-scrim {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .--MODAL {
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+    max-width: calc(100vw - 48px);
+    max-height: calc(100vh - 64px);
+    overflow: hidden;
+    box-shadow:
+      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
+      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+
+    ${D(e, "ROOT")}
+
+    &.--MODAL-lg {
+      width: 720px;
+    }
+
+    .--MODAL-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 16px 20px;
+      flex-shrink: 0;
+    }
+
+    .--MODAL-title {
+      flex: 1;
+      margin: 0;
+
+      ${r(e, "color", "--MODAL-EVENTS-ENABLED-COLOR-PRIMARY")};
+
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 1rem;
+      font-weight: 600;
+      line-height: 1.25;
+    }
+
+    .--MODAL-body {
+      flex: 1;
+      padding: 20px;
+      overflow-y: auto;
+
+      ${r(e, "color", "--MODAL-EVENTS-ENABLED-COLOR-SECONDARY")};
+
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .--MODAL-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      padding: 16px 20px;
+      flex-shrink: 0;
+    }
+  }
+`, k = "--MODAL", A = ({ open: e, onClose: r, header: i, showCloseButton: a = !0, size: c = "md", children: l, footer: u, staticBackdrop: d = !1, className: p, style: m }) => (f(() => {
+	if (!e || d) return;
+	let t = (e) => {
+		e.key === "Escape" && r();
+	};
+	return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+}, [
+	e,
+	r,
+	d
+]), e ? _(/* @__PURE__ */ t("div", {
+	className: `${k}-scrim`,
+	css: O(m),
+	role: "dialog",
+	"aria-modal": "true",
+	onClick: (e) => {
+		!d && e.target === e.currentTarget && r();
+	},
+	children: /* @__PURE__ */ n("div", {
+		className: [
+			k,
+			c === "lg" ? `${k}-lg` : "",
+			p || ""
+		].filter(Boolean).join(" "),
+		children: [
+			(i !== void 0 || a) && /* @__PURE__ */ n("header", {
+				className: `${k}-header`,
+				children: [i, a && /* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(s, { name: "close" }),
+					onClick: r,
+					"aria-label": "Cerrar modal"
+				})]
+			}),
+			l !== void 0 && /* @__PURE__ */ t("div", {
+				className: `${k}-body`,
+				children: l
+			}),
+			u && /* @__PURE__ */ t("footer", {
+				className: `${k}-footer`,
+				children: u
+			})
+		]
+	})
+}), document.body) : null);
+A.displayName = "Modal";
+//#endregion
+//#region src/components/molecules/Modal/index.tsx
+var j = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([l.MODAL], n, r.toUpperCase());
+	return /* @__PURE__ */ t(A, {
+		...i,
+		style: a
+	});
+}, M = (e, t) => `
+  .--RADIOGROUP-label {
+    ${r(e, "color", `--RADIOGROUP-EVENTS-${t}-COLOR-PRIMARY`)}
+  }
+
+  .--RADIOGROUP-helperText {
+    ${r(e, "color", `--RADIOGROUP-EVENTS-${t}-COLOR-SECONDARY`)}
+  }
+`, N = (e) => h`
+  &.--RADIOGROUP {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+
+    // ENABLED
+    ${M(e, "ENABLED")};
+
+    // ERROR
+    &.--RADIOGROUP-error {
+      ${M(e, "ERROR")};
+    }
+
+    // DISABLED
+    &.--RADIOGROUP-disabled {
+      ${M(e, "DISABLED")};
+    }
+
+    .--RADIOGROUP-items {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &.--RADIOGROUP--horizontal .--RADIOGROUP-items {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .--RADIOGROUP-label {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    .--RADIOGROUP-helperText {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 13px;
+      line-height: 16px;
+      margin-left: 14px;
+    }
+  }
+`, P = "--RADIOGROUP", F = ({ name: e, control: r, children: i, label: a, helperText: o, showErrorText: s = !0, disabled: c, direction: l = "vertical", style: f, className: p }) => {
+	let { field: m, fieldState: h } = g({
+		control: r,
+		name: e
+	}), _ = typeof m.value == "string" ? m.value : "", v = h.error, y = (e) => {
+		m.onChange(e), m.onBlur();
+	}, b = d.Children.toArray(i).find((e) => d.isValidElement(e) && !e.props.disabled)?.props.value ?? "";
+	return /* @__PURE__ */ t(u.Provider, {
+		value: {
+			name: e,
+			selectedValue: _,
+			onChange: y,
+			disabled: c,
+			error: v,
+			firstValue: b
+		},
+		children: /* @__PURE__ */ n("div", {
+			className: [
+				P,
+				`${P}--${l}`,
+				s && v?.message && `${P}-error`,
+				c && `${P}-disabled`,
+				p || ""
+			].join(" "),
+			css: N(f),
+			"data-testid": P,
+			children: [
+				a && /* @__PURE__ */ t("span", {
+					className: `${P}-label`,
+					"data-testid": `${P}-label`,
+					children: a
+				}),
+				/* @__PURE__ */ t("div", {
+					className: `${P}-items`,
+					"data-testid": `${P}-items`,
+					children: i
+				}),
+				/* @__PURE__ */ n("span", {
+					className: `${P}-helperText`,
+					"data-testid": `${P}-helperText`,
+					children: [o && (!v || !s) && o, s && v && v.message]
+				})
+			]
+		})
+	});
+}, I = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([l.RADIOGROUP], n, r.toUpperCase());
+	return /* @__PURE__ */ t(F, {
+		...i,
+		style: a
+	});
+};
+//#endregion
+export { S as i, j as n, E as r, I as t };
+
+//# sourceMappingURL=RadioGroup-DzEJw4WJ.js.map