@carbonbits/sixr 1.1.0 → 1.3.0

package/README.md

@@ -2,9 +2,10 @@
 
 E-commerce geared React component library for [carbonbits](https://carbonbits.co.ke/sixr).
 
-Ships ESM + CJS builds with type declarations, and a prebuilt stylesheet. Components
-are React Server Component safe, so they work in the Next.js App Router without a
-`"use client"` boundary.
+Ships ESM + CJS builds with type declarations, and a prebuilt stylesheet. Static
+components are React Server Component safe and need no `"use client"` boundary in the
+Next.js App Router; interactive ones carry their own directive, so either kind imports
+cleanly into a server component.
 
 ## Install
 
@@ -12,10 +13,13 @@ are React Server Component safe, so they work in the Next.js App Router without
 pnpm add @carbonbits/sixr
 ```
 
-`react` and `react-dom` are peer dependencies (`^19.0.0`).
+`react` and `react-dom` are peer dependencies (`^19.0.0`). `zod` (`^4`) is an optional
+peer dependency, needed only for `@carbonbits/sixr/validation`.
 
 ## Usage
 
+Load the stylesheet once, at the root of your app:
+
 ```tsx
 // app/layout.tsx
 import "@carbonbits/sixr/styles.css";
@@ -40,113 +44,171 @@ export default function Page() {
 The root barrel (`@carbonbits/sixr`) re-exports everything and works too, but the
 subpath is the one to reach for.
 
-`dist/styles.css` is compiled by Tailwind 4 and contains only the utilities the
-library itself uses, so it is safe to load alongside a consumer's own Tailwind build.
+## Components
 
-## Contributing
+### `Cart`
 
-Requires Node.js >= 20.19 and pnpm (see the `packageManager` field; `corepack enable`
-picks up the right version).
+```tsx
+import { Cart } from "@carbonbits/sixr/cart";
+```
 
-```sh
-pnpm install
-pnpm storybook        # component workbench on :6006
-pnpm test             # vitest
-pnpm run lint         # biome: lint + format check
-pnpm run lint:fix     # biome: apply safe fixes
-pnpm run typecheck
-pnpm run build        # dist/ — JS, .d.ts and styles.css
-pnpm run build-storybook
+| Prop       | Type            | Default   | Description                             |
+| ---------- | --------------- | --------- | --------------------------------------- |
+| `products` | `CartProduct[]` | `[]`      | Lines to render. Empty shows a placeholder. |
+| `currency` | `string`        | `"KES"`   | ISO 4217 code used to format prices.    |
+| `locale`   | `string`        | `"en-KE"` | BCP 47 locale used to format prices.    |
+
+```ts
+type CartProduct = {
+  /** Stable identity for the line, used as the React key. Falls back to `name`. */
+  id?: string;
+  name: string;
+  price: number;
+};
 ```
 
-Linting and formatting are both [Biome](https://biomejs.dev/) (`biome.json`); there
-is no ESLint or Prettier. It runs strict: every rule group is on at `error`, `style`
-and `performance` use the full `all` preset, and `--error-on-warnings` means a
-warning fails CI too. The handful of disabled rules each carry a reason in
-`biome.json`, and stories, tests and config files get narrow overrides where a tool
-mandates something the rules forbid (Storybook's `export default meta`, for one).
+Pass an `id` whenever a cart can hold two lines with the same name. Prices are
+formatted with `Intl.NumberFormat`, and the total is summed from `price`.
 
-`biome check` also fails on unformatted files, so run `pnpm run lint:fix` before
-pushing. Most editors have a Biome extension that formats on save.
+### `TextInput`
 
-### Adding a component
+```tsx
+import { TextInput } from "@carbonbits/sixr/text-input";
+```
+
+A labelled text field with optional schema validation. Interactive, so it ships its
+own `"use client"` directive and is reachable only at this subpath — it is not on the
+root barrel, which stays server-safe.
+
+| Prop                 | Type                                 | Default  | Description                                           |
+| -------------------- | ------------------------------------ | -------- | ----------------------------------------------------- |
+| `label`              | `string`                             | —        | Field label, associated with the input.               |
+| `hint`               | `ReactNode`                          | —        | Guidance below the field. Replaced by an error.       |
+| `error`              | `string`                             | —        | Caller-supplied error. Outranks the schema.           |
+| `schema`             | `TextInputSchema`                    | —        | Any zod schema. Only `safeParse` is called.           |
+| `validateOn`         | `"blur" \| "change" \| "never"`      | `"blur"` | When the schema runs.                                 |
+| `onValidationChange` | `(state: TextInputValidation) => void` | —      | Fires on each validation pass.                        |
+| `onChange`           | `(value: string) => void`            | —        | Receives the value, not the event.                    |
+| `value`              | `string`                             | —        | Makes the field controlled.                           |
+| `defaultValue`       | `string`                             | `""`     | Initial value when uncontrolled.                      |
+| `optional`           | `boolean`                            | `false`  | Shows an "Optional" marker on the label.              |
+| `action`             | `ReactNode`                          | —        | Trailing label slot, e.g. a "Forgot?" link.           |
+| `trailing`           | `ReactNode`                          | —        | Trailing in-field slot, e.g. a password peek.         |
+| `mono`               | `boolean`                            | `false`  | Renders the value in the monospace face.              |
+| `type`               | `"text" \| "email" \| "password" \| "tel" \| "url" \| "search"` | `"text"` | Input type.       |
+
+Any other `<input>` attribute — `placeholder`, `maxLength`, `disabled`, `inputMode` —
+is passed straight through.
 
-Add it under `src/components/`, then wire it up in three places:
+```tsx
+import { TextInput } from "@carbonbits/sixr/text-input";
+import { emailSchema } from "@carbonbits/sixr/validation";
+
+<TextInput
+  label="Work email"
+  type="email"
+  placeholder="you@company.com"
+  schema={emailSchema}
+  onChange={setEmail}
+/>;
+```
 
-1. an entry in `tsup.config.ts`, so it gets its own bundle
-2. a matching subpath in the package.json `exports` map
-3. a re-export from `src/index.ts`, for the barrel
+Validation runs on blur by default, then on every keystroke once the field has gone
+invalid, so a corrected value clears the message immediately. The first schema issue
+is shown, the input gets `aria-invalid`, and the message is announced via `role="alert"`
+and wired up with `aria-describedby`.
 
-Give it a `*.stories.tsx` file too, so Chromatic picks it up.
+`schema` is structurally typed, so any zod schema satisfies it without zod appearing
+in this package's types — you only need zod installed if you use it.
 
-Client components (anything on Radix, or using hooks) need a `"use client"` banner
-on their tsup entry — a directive in the source file does not survive bundling. Not
-wired up yet; there are no client components in the library so far.
+### `Form` / `FormError` / `SubmitButton`
 
-## Releasing
+```tsx
+import { Form, FormError, SubmitButton } from "@carbonbits/sixr/form";
+```
 
-Releases are automated by [semantic-release](https://semantic-release.gitbook.io/)
-on every push to `master`, driven by
-[conventional commits](https://www.conventionalcommits.org/):
+The shared skeleton behind the login/signup screens: a `<form>` that disables its
+fields for the duration of `onSubmit`, plus a submit button that swaps to a spinner
+for the same duration. Interactive, so it ships its own `"use client"` directive and
+is reachable only at this subpath.
 
-| Commit prefix                    | Release |
-| -------------------------------- | ------- |
-| `fix:`                           | patch   |
-| `feat:`                          | minor   |
-| `feat!:` / `BREAKING CHANGE:`    | major   |
-| `chore:`, `ci:`, `docs:`, `test:`| none    |
+| Component     | Prop           | Type                       | Description                                             |
+| ------------- | -------------- | -------------------------- | --------------------------------------------------------- |
+| `Form`        | `onSubmit`     | `() => void \| Promise<void>` | Called after `preventDefault`. A returned promise drives the disabled/spinner state until it settles. |
+| `Form`        | `children`     | `ReactNode`                 | Fields, `FormError`, `SubmitButton` — whatever the design calls for, in order. |
+| `FormError`   | `children`     | `ReactNode`                 | Form-level error (a rejected credential, a failed request). Renders nothing when empty. |
+| `SubmitButton`| `loadingLabel` | `ReactNode`                 | Shown next to the spinner in place of `children` while submitting. |
 
-The pipeline works out the version, writes `CHANGELOG.md`, builds `dist/`, commits
-the bump back to `master`, tags it, and opens a GitHub release.
+```tsx
+import { Form, FormError, SubmitButton } from "@carbonbits/sixr/form";
+import { TextInput } from "@carbonbits/sixr/text-input";
+
+function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string>();
+
+  const handleSubmit = async () => {
+    setError(undefined);
+    const ok = await signIn(email, password);
+    if (!ok) setError("That email and password don't match.");
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <TextInput label="Work email" type="email" onChange={setEmail} />
+      <TextInput label="Password" type="password" onChange={setPassword} />
+      <FormError>{error}</FormError>
+      <SubmitButton loadingLabel="Signing in…">Sign in</SubmitButton>
+    </Form>
+  );
+}
+```
 
-### Staged publishing
+A field never needs its own `disabled={isLoading}` — `Form` groups its children in a
+fieldset that disables for the duration of `onSubmit`, so `SubmitButton` (and any other
+control inside `Form`) picks that up for free. Fields, OAuth rows, dividers — anything
+the design puts between the top of the form and the submit button — are just children;
+`Form` doesn't assume a shape beyond that.
 
-npm is moving publishing behind a human approval step, so CI does **not** push the
-package live. It runs `npm stage publish`, which uploads the tarball and parks it.
-A maintainer then approves it with 2FA:
+## Validation schemas
 
-```sh
-npm stage list @carbonbits/sixr
-npm stage view <stage-id>       # inspect before approving
-npm stage approve <stage-id>    # prompts for 2FA, goes live
-npm stage reject <stage-id>     # discard instead
+```tsx
+import { emailSchema, passwordSchema } from "@carbonbits/sixr/validation";
 ```
 
-Until approval the version does not appear in `npm view @carbonbits/sixr versions`,
-even though the GitHub release and tag already exist. Staging needs npm >= 11.15.0
-and Node >= 22.14, which CI pins.
+Ready-made zod schemas matching the Carbonbits auth rules: `emailSchema`,
+`passwordSchema`, `verificationCodeSchema`, `backupCodeSchema`, `fullNameSchema`,
+`jobTitleSchema` and `phoneSchema`. They are ordinary zod schemas — extend them with
+`.refine`, or replace the message with `.min(8, "…")`.
 
-### Required secrets
+This subpath needs `zod` (`^4`), which is an optional peer dependency. Nothing else in
+the package requires it.
 
-| Secret                     | Used by                                              |
-| -------------------------- | ---------------------------------------------------- |
-| `NPM_STAGING_TOKEN`        | `npm stage publish` — a *Read and write (stage only)* granular token |
-| `GH_APP_ID`                | the release GitHub App                               |
-| `GH_APP_PRIVATE_KEY`       | that App's private key, **base64-encoded**           |
-| `CHROMATIC_PROJECT_TOKEN`  | Chromatic publish                                    |
+## Styling
 
-Granular tokens lose the ability to publish new versions directly in January 2027,
-which is why the release token is stage-only.
+`dist/styles.css` is compiled by Tailwind 4 and contains only the utilities the
+library itself uses, so it is safe to load alongside a consumer's own Tailwind build.
+
+Colours and control metrics come from CSS custom properties, all namespaced `--sixr-*`,
+so nothing here can clobber your own Tailwind theme. Override any of them to retheme
+the library without rebuilding it:
+
+```css
+:root {
+  --sixr-accent: #0f766e;
+  --sixr-line: #d4d4d8;
+}
+```
 
-`master` carries a ruleset that blocks direct writes, so the release commit and tag
-cannot be pushed with the default `GITHUB_TOKEN`. The workflow mints a short-lived
-installation token from a GitHub App instead, and **that App must be listed in the
-ruleset's bypass list** or the push still fails. The App needs `contents: write` and
-`pull_requests: write` on this repo, nothing more.
+Dark values follow `prefers-color-scheme` by default. To drive the theme yourself, set
+`data-theme="dark"` or `data-theme="light"` on the root element.
 
-That installation token is handed to semantic-release as `GITHUB_TOKEN`, and this
-is not interchangeable with `GH_TOKEN`. semantic-release builds its push URL as
-`https://<GH_TOKEN>@github.com/...`, but as
-`https://x-access-token:<GITHUB_TOKEN>@github.com/...` when it detects Actions.
-An App installation token is only accepted in the second form — via `GH_TOKEN` it
-fails on `git ls-remote` with `Invalid username or token`.
+## Versioning
 
-There is deliberately no `GH_TOKEN` secret. `@semantic-release/github` resolves
-`GH_TOKEN || GITHUB_TOKEN`, so a leftover expired PAT in `GH_TOKEN` silently
-shadows any working token and fails with `EINVALIDGHTOKEN`. If that secret still
-exists in repo settings, delete it.
+Released under [semantic versioning](https://semver.org/): breaking changes only land
+in major versions, so `^` ranges are safe to pin against.
 
-## Visual review
+## License
 
-Every push and pull request publishes Storybook to
-[Chromatic](https://www.chromatic.com/) for visual regression review.
+MIT

package/dist/form.cjs

@@ -0,0 +1,124 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/form/index.tsx
+var form_exports = {};
+__export(form_exports, {
+  Form: () => Form,
+  FormError: () => FormError,
+  SubmitButton: () => SubmitButton
+});
+module.exports = __toCommonJS(form_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SubmittingContext = (0, import_react.createContext)(false);
+var FORM_CLASSES = "flex flex-col gap-4";
+var FIELDSET_CLASSES = "contents border-0 p-0 m-0 min-w-0";
+function Form({ onSubmit, children, className, ...rest }) {
+  const [submitting, setSubmitting] = (0, import_react.useState)(false);
+  const handleSubmit = (0, import_react.useCallback)(
+    (event) => {
+      event.preventDefault();
+      const result = onSubmit();
+      if (result && typeof result.then === "function") {
+        setSubmitting(true);
+        result.finally(() => setSubmitting(false)).catch(() => void 0);
+      }
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "form",
+    {
+      noValidate: true,
+      ...rest,
+      onSubmit: handleSubmit,
+      className: [FORM_CLASSES, className ?? ""].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubmittingContext.Provider, { value: submitting, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { disabled: submitting, className: FIELDSET_CLASSES, children }) })
+    }
+  );
+}
+function FormError({ children }) {
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: "text-hint text-danger", children });
+}
+function Spinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className: "h-4 w-4 animate-spin",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z"
+          }
+        )
+      ]
+    }
+  );
+}
+var BUTTON_CLASSES = "flex h-10 w-full items-center justify-center gap-2 rounded-field bg-accent font-[inherit] text-field font-semibold text-on-accent outline-none focus:ring-3 focus:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45";
+function SubmitButton({
+  children,
+  loadingLabel,
+  className,
+  ...rest
+}) {
+  const submitting = (0, import_react.useContext)(SubmittingContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ...rest,
+      type: "submit",
+      className: [BUTTON_CLASSES, className ?? ""].filter(Boolean).join(" "),
+      children: submitting ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}),
+        loadingLabel
+      ] }) : children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormError,
+  SubmitButton
+});
+//# sourceMappingURL=form.cjs.map

package/dist/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ButtonHTMLAttributes,\n  createContext,\n  type FormHTMLAttributes,\n  type ReactNode,\n  type SubmitEvent,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\n\nconst SubmittingContext = createContext(false);\n\nexport type FormProps = Omit<\n  FormHTMLAttributes<HTMLFormElement>,\n  \"onSubmit\"\n> & {\n  onSubmit: () => void | Promise<void>;\n  children: ReactNode;\n};\n\nconst FORM_CLASSES = \"flex flex-col gap-4\";\nconst FIELDSET_CLASSES = \"contents border-0 p-0 m-0 min-w-0\";\n\nexport function Form({ onSubmit, children, className, ...rest }: FormProps) {\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = useCallback(\n    (event: SubmitEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      const result = onSubmit();\n      if (result && typeof result.then === \"function\") {\n        setSubmitting(true);\n        result.finally(() => setSubmitting(false)).catch(() => undefined);\n      }\n    },\n    [onSubmit],\n  );\n\n  return (\n    <form\n      noValidate\n      {...rest}\n      onSubmit={handleSubmit}\n      className={[FORM_CLASSES, className ?? \"\"].filter(Boolean).join(\" \")}\n    >\n      <SubmittingContext.Provider value={submitting}>\n        <fieldset disabled={submitting} className={FIELDSET_CLASSES}>\n          {children}\n        </fieldset>\n      </SubmittingContext.Provider>\n    </form>\n  );\n}\n\nexport function FormError({ children }: { children?: ReactNode }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <p role=\"alert\" className=\"text-hint text-danger\">\n      {children}\n    </p>\n  );\n}\n\nfunction Spinner() {\n  return (\n    <svg\n      className=\"h-4 w-4 animate-spin\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z\"\n      />\n    </svg>\n  );\n}\n\nexport type SubmitButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"type\"\n> & {\n  loadingLabel?: ReactNode;\n};\n\nconst BUTTON_CLASSES =\n  \"flex h-10 w-full items-center justify-center gap-2 rounded-field bg-accent font-[inherit] text-field font-semibold text-on-accent outline-none focus:ring-3 focus:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45\";\n\nexport function SubmitButton({\n  children,\n  loadingLabel,\n  className,\n  ...rest\n}: SubmitButtonProps) {\n  const submitting = useContext(SubmittingContext);\n\n  return (\n    <button\n      {...rest}\n      type=\"submit\"\n      className={[BUTTON_CLASSES, className ?? \"\"].filter(Boolean).join(\" \")}\n    >\n      {submitting ? (\n        <>\n          <Spinner />\n          {loadingLabel}\n        </>\n      ) : (\n        children\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBASO;AAsCC;AApCR,IAAM,wBAAoB,4BAAc,KAAK;AAU7C,IAAM,eAAe;AACrB,IAAM,mBAAmB;AAElB,SAAS,KAAK,EAAE,UAAU,UAAU,WAAW,GAAG,KAAK,GAAc;AAC1E,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,mBAAe;AAAA,IACnB,CAAC,UAAwC;AACvC,YAAM,eAAe;AACrB,YAAM,SAAS,SAAS;AACxB,UAAI,UAAU,OAAO,OAAO,SAAS,YAAY;AAC/C,sBAAc,IAAI;AAClB,eAAO,QAAQ,MAAM,cAAc,KAAK,CAAC,EAAE,MAAM,MAAM,MAAS;AAAA,MAClE;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACT,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,WAAW,CAAC,cAAc,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEnE,sDAAC,kBAAkB,UAAlB,EAA2B,OAAO,YACjC,sDAAC,cAAS,UAAU,YAAY,WAAW,kBACxC,UACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,UAAU,EAAE,SAAS,GAA6B;AAChE,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,OAAE,MAAK,SAAQ,WAAU,yBACvB,UACH;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACF;AAEJ;AASA,IAAM,iBACJ;AAEK,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,iBAAa,yBAAW,iBAAiB;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,WAAW,CAAC,gBAAgB,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEpE,uBACC,4EACE;AAAA,oDAAC,WAAQ;AAAA,QACR;AAAA,SACH,IAEA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/form.d.cts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { FormHTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+
+type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & {
+    onSubmit: () => void | Promise<void>;
+    children: ReactNode;
+};
+declare function Form({ onSubmit, children, className, ...rest }: FormProps): react.JSX.Element;
+declare function FormError({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element | null;
+type SubmitButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    loadingLabel?: ReactNode;
+};
+declare function SubmitButton({ children, loadingLabel, className, ...rest }: SubmitButtonProps): react.JSX.Element;
+
+export { Form, FormError, type FormProps, SubmitButton, type SubmitButtonProps };

package/dist/form.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { FormHTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+
+type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & {
+    onSubmit: () => void | Promise<void>;
+    children: ReactNode;
+};
+declare function Form({ onSubmit, children, className, ...rest }: FormProps): react.JSX.Element;
+declare function FormError({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element | null;
+type SubmitButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    loadingLabel?: ReactNode;
+};
+declare function SubmitButton({ children, loadingLabel, className, ...rest }: SubmitButtonProps): react.JSX.Element;
+
+export { Form, FormError, type FormProps, SubmitButton, type SubmitButtonProps };

package/dist/form.js

@@ -0,0 +1,103 @@
+"use client";
+"use client";
+
+// src/components/form/index.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SubmittingContext = createContext(false);
+var FORM_CLASSES = "flex flex-col gap-4";
+var FIELDSET_CLASSES = "contents border-0 p-0 m-0 min-w-0";
+function Form({ onSubmit, children, className, ...rest }) {
+  const [submitting, setSubmitting] = useState(false);
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      const result = onSubmit();
+      if (result && typeof result.then === "function") {
+        setSubmitting(true);
+        result.finally(() => setSubmitting(false)).catch(() => void 0);
+      }
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      noValidate: true,
+      ...rest,
+      onSubmit: handleSubmit,
+      className: [FORM_CLASSES, className ?? ""].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx(SubmittingContext.Provider, { value: submitting, children: /* @__PURE__ */ jsx("fieldset", { disabled: submitting, className: FIELDSET_CLASSES, children }) })
+    }
+  );
+}
+function FormError({ children }) {
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("p", { role: "alert", className: "text-hint text-danger", children });
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "h-4 w-4 animate-spin",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z"
+          }
+        )
+      ]
+    }
+  );
+}
+var BUTTON_CLASSES = "flex h-10 w-full items-center justify-center gap-2 rounded-field bg-accent font-[inherit] text-field font-semibold text-on-accent outline-none focus:ring-3 focus:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45";
+function SubmitButton({
+  children,
+  loadingLabel,
+  className,
+  ...rest
+}) {
+  const submitting = useContext(SubmittingContext);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...rest,
+      type: "submit",
+      className: [BUTTON_CLASSES, className ?? ""].filter(Boolean).join(" "),
+      children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, {}),
+        loadingLabel
+      ] }) : children
+    }
+  );
+}
+export {
+  Form,
+  FormError,
+  SubmitButton
+};
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ButtonHTMLAttributes,\n  createContext,\n  type FormHTMLAttributes,\n  type ReactNode,\n  type SubmitEvent,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\n\nconst SubmittingContext = createContext(false);\n\nexport type FormProps = Omit<\n  FormHTMLAttributes<HTMLFormElement>,\n  \"onSubmit\"\n> & {\n  onSubmit: () => void | Promise<void>;\n  children: ReactNode;\n};\n\nconst FORM_CLASSES = \"flex flex-col gap-4\";\nconst FIELDSET_CLASSES = \"contents border-0 p-0 m-0 min-w-0\";\n\nexport function Form({ onSubmit, children, className, ...rest }: FormProps) {\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = useCallback(\n    (event: SubmitEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      const result = onSubmit();\n      if (result && typeof result.then === \"function\") {\n        setSubmitting(true);\n        result.finally(() => setSubmitting(false)).catch(() => undefined);\n      }\n    },\n    [onSubmit],\n  );\n\n  return (\n    <form\n      noValidate\n      {...rest}\n      onSubmit={handleSubmit}\n      className={[FORM_CLASSES, className ?? \"\"].filter(Boolean).join(\" \")}\n    >\n      <SubmittingContext.Provider value={submitting}>\n        <fieldset disabled={submitting} className={FIELDSET_CLASSES}>\n          {children}\n        </fieldset>\n      </SubmittingContext.Provider>\n    </form>\n  );\n}\n\nexport function FormError({ children }: { children?: ReactNode }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <p role=\"alert\" className=\"text-hint text-danger\">\n      {children}\n    </p>\n  );\n}\n\nfunction Spinner() {\n  return (\n    <svg\n      className=\"h-4 w-4 animate-spin\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z\"\n      />\n    </svg>\n  );\n}\n\nexport type SubmitButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"type\"\n> & {\n  loadingLabel?: ReactNode;\n};\n\nconst BUTTON_CLASSES =\n  \"flex h-10 w-full items-center justify-center gap-2 rounded-field bg-accent font-[inherit] text-field font-semibold text-on-accent outline-none focus:ring-3 focus:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45\";\n\nexport function SubmitButton({\n  children,\n  loadingLabel,\n  className,\n  ...rest\n}: SubmitButtonProps) {\n  const submitting = useContext(SubmittingContext);\n\n  return (\n    <button\n      {...rest}\n      type=\"submit\"\n      className={[BUTTON_CLASSES, className ?? \"\"].filter(Boolean).join(\" \")}\n    >\n      {submitting ? (\n        <>\n          <Spinner />\n          {loadingLabel}\n        </>\n      ) : (\n        children\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;AAEA;AAAA,EAEE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAsCC,SAsEA,UAtEA,KAsBJ,YAtBI;AApCR,IAAM,oBAAoB,cAAc,KAAK;AAU7C,IAAM,eAAe;AACrB,IAAM,mBAAmB;AAElB,SAAS,KAAK,EAAE,UAAU,UAAU,WAAW,GAAG,KAAK,GAAc;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,eAAe;AAAA,IACnB,CAAC,UAAwC;AACvC,YAAM,eAAe;AACrB,YAAM,SAAS,SAAS;AACxB,UAAI,UAAU,OAAO,OAAO,SAAS,YAAY;AAC/C,sBAAc,IAAI;AAClB,eAAO,QAAQ,MAAM,cAAc,KAAK,CAAC,EAAE,MAAM,MAAM,MAAS;AAAA,MAClE;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACT,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,WAAW,CAAC,cAAc,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEnE,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,YACjC,8BAAC,cAAS,UAAU,YAAY,WAAW,kBACxC,UACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,UAAU,EAAE,SAAS,GAA6B;AAChE,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,OAAE,MAAK,SAAQ,WAAU,yBACvB,UACH;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACF;AAEJ;AASA,IAAM,iBACJ;AAEK,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,aAAa,WAAW,iBAAiB;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,WAAW,CAAC,gBAAgB,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEpE,uBACC,iCACE;AAAA,4BAAC,WAAQ;AAAA,QACR;AAAA,SACH,IAEA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/index.d.cts

@@ -1,2 +1,64 @@
 export { Cart, CartProduct, CartProps } from './cart.cjs';
-import 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Structural shape of a zod schema — every zod schema satisfies it, and any
+ * version of zod does. Declaring it this way rather than importing `ZodType`
+ * keeps zod out of this module's public types, so consumers who only want an
+ * input do not have to install zod to typecheck it.
+ */
+type TextInputSchema = {
+    safeParse: (value: unknown) => {
+        success: true;
+    } | {
+        success: false;
+        error: {
+            issues: readonly {
+                message: string;
+            }[];
+        };
+    };
+};
+/** Outcome of a single validation pass, handed to `onValidationChange`. */
+type TextInputValidation = {
+    valid: boolean;
+    /** First issue reported by the schema, or `undefined` when valid. */
+    error?: string;
+};
+type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "type"> & {
+    label?: string;
+    /** Guidance under the field. Replaced by the error message while invalid. */
+    hint?: ReactNode;
+    /**
+     * Error supplied by the caller — a server-side or cross-field failure. Takes
+     * precedence over the schema, so a form can hold a field invalid regardless
+     * of what `schema` makes of the value on its own.
+     */
+    error?: string;
+    /** Renders the design's muted "Optional" marker at the end of the label. */
+    optional?: boolean;
+    /** Trailing label slot, for affordances like the design's "Forgot?" link. */
+    action?: ReactNode;
+    /** Trailing in-field slot, for affordances like the design's password peek. */
+    trailing?: ReactNode;
+    /** Renders the value in the design's monospace face. */
+    mono?: boolean;
+    type?: "text" | "email" | "password" | "tel" | "url" | "search";
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /**
+     * Any zod schema that accepts a string. Only `safeParse` is used, so a
+     * refined, transformed or preprocessed schema works as well as a plain one.
+     */
+    schema?: TextInputSchema;
+    /**
+     * When the schema runs. `blur` — the default — avoids scolding someone
+     * mid-keystroke; once a field has gone invalid it revalidates on every
+     * keystroke so the message clears as soon as it is fixed.
+     */
+    validateOn?: "blur" | "change" | "never";
+    onValidationChange?: (state: TextInputValidation) => void;
+};
+
+export type { TextInputProps, TextInputSchema, TextInputValidation };