@carbonbits/sixr 1.1.0 → 1.2.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,121 @@ 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.
-
-## Contributing
+## Components
 
-Requires Node.js >= 20.19 and pnpm (see the `packageManager` field; `corepack enable`
-picks up the right version).
+### `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
+```tsx
+import { Cart } from "@carbonbits/sixr/cart";
 ```
 
-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).
-
-`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.
-
-### Adding a component
+| 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;
+};
+```
 
-Add it under `src/components/`, then wire it up in three places:
+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`.
 
-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
+### `TextInput`
 
-Give it a `*.stories.tsx` file too, so Chromatic picks it up.
+```tsx
+import { TextInput } from "@carbonbits/sixr/text-input";
+```
 
-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.
+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.
 
-## Releasing
+```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}
+/>;
+```
 
-Releases are automated by [semantic-release](https://semantic-release.gitbook.io/)
-on every push to `master`, driven by
-[conventional commits](https://www.conventionalcommits.org/):
+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`.
 
-| Commit prefix                    | Release |
-| -------------------------------- | ------- |
-| `fix:`                           | patch   |
-| `feat:`                          | minor   |
-| `feat!:` / `BREAKING CHANGE:`    | major   |
-| `chore:`, `ci:`, `docs:`, `test:`| none    |
+`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.
 
-The pipeline works out the version, writes `CHANGELOG.md`, builds `dist/`, commits
-the bump back to `master`, tags it, and opens a GitHub release.
+## Validation schemas
 
-### Staged publishing
+```tsx
+import { emailSchema, passwordSchema } from "@carbonbits/sixr/validation";
+```
 
-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:
+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, "…")`.
 
-```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
-```
+This subpath needs `zod` (`^4`), which is an optional peer dependency. Nothing else in
+the package requires it.
 
-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.
+## Styling
 
-### Required secrets
+`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.
 
-| 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                                    |
+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:
 
-Granular tokens lose the ability to publish new versions directly in January 2027,
-which is why the release token is stage-only.
+```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/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 };

package/dist/index.d.ts

@@ -1,2 +1,64 @@
 export { Cart, CartProduct, CartProps } from './cart.js';
-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 };

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.contents{display:contents}.flex{display:flex}.w-full{width:100%}.max-w-md{max-width:var(--container-md)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-col{flex-direction:column}.items-baseline{align-items:baseline}.justify-between{justify-content:space-between}.gap-4{gap:calc(var(--spacing) * 4)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.top-1\/2{top:50%}.right-\[9px\]{right:9px}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.ml-auto{margin-left:auto}.contents{display:contents}.flex{display:flex}.inline{display:inline}.table{display:table}.h-10{height:calc(var(--spacing) * 10)}.w-full{width:100%}.max-w-md{max-width:var(--container-md)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-col{flex-direction:column}.items-baseline{align-items:baseline}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4{gap:calc(var(--spacing) * 4)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}.rounded-field{border-radius:4px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-danger{border-color:var(--sixr-danger)}.border-gray-200{border-color:var(--color-gray-200)}.border-line{border-color:var(--sixr-line)}.bg-surface{background-color:var(--sixr-surface)}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing) * 4)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pr-16{padding-right:calc(var(--spacing) * 16)}.font-\[inherit\]{font-family:inherit}.font-code{font-family:var(--sixr-font-code)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-field{font-size:13px}.text-hint{font-size:11px}.text-label{font-size:11.5px}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-danger{color:var(--sixr-danger)}.text-fg{color:var(--sixr-fg)}.text-fg-muted{color:var(--sixr-fg-muted)}.text-fg-subtle{color:var(--sixr-fg-subtle)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.placeholder\:text-fg-subtle::placeholder{color:var(--sixr-fg-subtle)}.focus\:border-accent:focus{border-color:var(--sixr-accent)}.focus\:border-danger:focus{border-color:var(--sixr-danger)}.focus\:ring-3:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-accent-soft:focus{--tw-ring-color:var(--sixr-accent-soft)}.focus\:ring-danger-soft:focus{--tw-ring-color:var(--sixr-danger-soft)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-45:disabled{opacity:.45}}:root{--sixr-bg:#f4f4f5;--sixr-surface:#fff;--sixr-surface-2:#f4f4f6;--sixr-surface-3:#eaeaec;--sixr-line:#e2e2e5;--sixr-line-strong:#cdcdd2;--sixr-fg:#0b0b0d;--sixr-fg-muted:#55555e;--sixr-fg-subtle:#8e8e99;--sixr-accent:#0b0b0d;--sixr-accent-2:#000;--sixr-accent-soft:#ededef;--sixr-on-accent:#fff;--sixr-success:#16a34a;--sixr-success-soft:#e9f5ec;--sixr-warning:#b45309;--sixr-info:#2563eb;--sixr-danger:#dc2626;--sixr-danger-soft:#fdecec;--sixr-font-code:"JetBrains Mono", ui-monospace, monospace}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--sixr-bg:#000;--sixr-surface:#0b0b0d;--sixr-surface-2:#121215;--sixr-surface-3:#1b1b1f;--sixr-line:#232328;--sixr-line-strong:#3a3a42;--sixr-fg:#fff;--sixr-fg-muted:#a3a3ad;--sixr-fg-subtle:#70707b;--sixr-accent:#fff;--sixr-accent-2:#e4e4e8;--sixr-accent-soft:#17171b;--sixr-on-accent:#000;--sixr-success:#34d399;--sixr-success-soft:#12301e;--sixr-warning:#fbbf24;--sixr-info:#60a5fa;--sixr-danger:#f87171;--sixr-danger-soft:#2a1416}}:root[data-theme=dark]{--sixr-bg:#000;--sixr-surface:#0b0b0d;--sixr-surface-2:#121215;--sixr-surface-3:#1b1b1f;--sixr-line:#232328;--sixr-line-strong:#3a3a42;--sixr-fg:#fff;--sixr-fg-muted:#a3a3ad;--sixr-fg-subtle:#70707b;--sixr-accent:#fff;--sixr-accent-2:#e4e4e8;--sixr-accent-soft:#17171b;--sixr-on-accent:#000;--sixr-success:#34d399;--sixr-success-soft:#12301e;--sixr-warning:#fbbf24;--sixr-info:#60a5fa;--sixr-danger:#f87171;--sixr-danger-soft:#2a1416}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/dist/text-input.cjs

@@ -0,0 +1,216 @@
+"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/text-input/index.tsx
+var text_input_exports = {};
+__export(text_input_exports, {
+  TextInput: () => TextInput
+});
+module.exports = __toCommonJS(text_input_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FIELD_CLASSES = "h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45";
+var VALID_CLASSES = "border-line focus:border-accent focus:ring-3 focus:ring-accent-soft";
+var INVALID_CLASSES = "border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft";
+var FALLBACK_MESSAGE = "Invalid value";
+function runSchema(schema, value) {
+  if (!schema) {
+    return { valid: true };
+  }
+  const result = schema.safeParse(value);
+  if (result.success) {
+    return { valid: true };
+  }
+  return {
+    valid: false,
+    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE
+  };
+}
+function fieldClassName(invalid, mono, hasTrailing, className) {
+  return [
+    FIELD_CLASSES,
+    invalid ? INVALID_CLASSES : VALID_CLASSES,
+    mono ? "font-code" : "",
+    hasTrailing ? "pr-16" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+}
+function FieldLabel({
+  htmlFor,
+  label,
+  optional,
+  action
+}) {
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "label",
+    {
+      htmlFor,
+      className: "mb-1.5 flex items-center text-label font-semibold text-fg-muted",
+      children: [
+        label,
+        optional ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-auto text-hint font-semibold text-fg-subtle", children: "Optional" }) : null,
+        action ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-auto", children: action }) : null
+      ]
+    }
+  );
+}
+function FieldMessage({
+  id,
+  error,
+  hint
+}) {
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id, role: "alert", className: "mt-1.5 text-hint text-danger", children: error });
+  }
+  if (hint) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id, className: "mt-1.5 text-hint text-fg-subtle", children: hint });
+  }
+  return null;
+}
+function useFieldBehaviour({
+  value,
+  defaultValue,
+  error,
+  onChange,
+  onBlur,
+  schema,
+  validateOn = "blur",
+  onValidationChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(
+    defaultValue ?? ""
+  );
+  const [schemaError, setSchemaError] = (0, import_react.useState)(void 0);
+  const isControlled = value !== void 0;
+  const validate = (0, import_react.useCallback)(
+    (next) => {
+      const state = runSchema(schema, next);
+      setSchemaError(state.error);
+      onValidationChange?.(state);
+    },
+    [schema, onValidationChange]
+  );
+  const handleChange = (0, import_react.useCallback)(
+    (event) => {
+      const next = event.target.value;
+      if (!isControlled) {
+        setUncontrolledValue(next);
+      }
+      onChange?.(next);
+      if (validateOn === "change" || validateOn === "blur" && schemaError) {
+        validate(next);
+      }
+    },
+    [isControlled, onChange, validateOn, schemaError, validate]
+  );
+  const handleBlur = (0, import_react.useCallback)(
+    (event) => {
+      if (validateOn === "blur") {
+        validate(event.target.value);
+      }
+      onBlur?.(event);
+    },
+    [validateOn, validate, onBlur]
+  );
+  return {
+    currentValue: isControlled ? value : uncontrolledValue,
+    // A caller-supplied error outranks the schema's verdict.
+    shownError: error ?? schemaError,
+    handleChange,
+    handleBlur
+  };
+}
+function TextInput({
+  label,
+  hint,
+  error,
+  optional = false,
+  action,
+  trailing,
+  mono = false,
+  type = "text",
+  value,
+  defaultValue,
+  onChange,
+  schema,
+  validateOn = "blur",
+  onValidationChange,
+  id,
+  className,
+  onBlur,
+  ...rest
+}) {
+  const generatedId = (0, import_react.useId)();
+  const inputId = id ?? generatedId;
+  const describedById = `${inputId}-description`;
+  const { currentValue, shownError, handleChange, handleBlur } = useFieldBehaviour({
+    value,
+    defaultValue,
+    error,
+    onChange,
+    onBlur,
+    schema,
+    validateOn,
+    onValidationChange
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      FieldLabel,
+      {
+        htmlFor: inputId,
+        label,
+        optional,
+        action
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: trailing ? "relative" : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ...rest,
+          id: inputId,
+          type,
+          value: currentValue,
+          "aria-invalid": shownError ? true : void 0,
+          "aria-describedby": shownError || hint ? describedById : void 0,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          className: fieldClassName(
+            Boolean(shownError),
+            mono,
+            Boolean(trailing),
+            className
+          )
+        }
+      ),
+      trailing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute top-1/2 right-[9px] -translate-y-1/2 text-hint font-semibold text-fg-subtle", children: trailing }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldMessage, { id: describedById, error: shownError, hint })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextInput
+});
+//# sourceMappingURL=text-input.cjs.map

package/dist/text-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/text-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useId,\n  useState,\n} from \"react\";\n\n/**\n * Structural shape of a zod schema — every zod schema satisfies it, and any\n * version of zod does. Declaring it this way rather than importing `ZodType`\n * keeps zod out of this module's public types, so consumers who only want an\n * input do not have to install zod to typecheck it.\n */\nexport type TextInputSchema = {\n  safeParse: (\n    value: unknown,\n  ) =>\n    | { success: true }\n    | { success: false; error: { issues: readonly { message: string }[] } };\n};\n\n/** Outcome of a single validation pass, handed to `onValidationChange`. */\nexport type TextInputValidation = {\n  valid: boolean;\n  /** First issue reported by the schema, or `undefined` when valid. */\n  error?: string;\n};\n\nexport type TextInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"type\"\n> & {\n  label?: string;\n  /** Guidance under the field. Replaced by the error message while invalid. */\n  hint?: ReactNode;\n  /**\n   * Error supplied by the caller — a server-side or cross-field failure. Takes\n   * precedence over the schema, so a form can hold a field invalid regardless\n   * of what `schema` makes of the value on its own.\n   */\n  error?: string;\n  /** Renders the design's muted \"Optional\" marker at the end of the label. */\n  optional?: boolean;\n  /** Trailing label slot, for affordances like the design's \"Forgot?\" link. */\n  action?: ReactNode;\n  /** Trailing in-field slot, for affordances like the design's password peek. */\n  trailing?: ReactNode;\n  /** Renders the value in the design's monospace face. */\n  mono?: boolean;\n  type?: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\";\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /**\n   * Any zod schema that accepts a string. Only `safeParse` is used, so a\n   * refined, transformed or preprocessed schema works as well as a plain one.\n   */\n  schema?: TextInputSchema;\n  /**\n   * When the schema runs. `blur` — the default — avoids scolding someone\n   * mid-keystroke; once a field has gone invalid it revalidates on every\n   * keystroke so the message clears as soon as it is fixed.\n   */\n  validateOn?: \"blur\" | \"change\" | \"never\";\n  onValidationChange?: (state: TextInputValidation) => void;\n};\n\nconst FIELD_CLASSES =\n  \"h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45\";\nconst VALID_CLASSES =\n  \"border-line focus:border-accent focus:ring-3 focus:ring-accent-soft\";\nconst INVALID_CLASSES =\n  \"border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft\";\nconst FALLBACK_MESSAGE = \"Invalid value\";\n\nfunction runSchema(\n  schema: TextInputSchema | undefined,\n  value: string,\n): TextInputValidation {\n  if (!schema) {\n    return { valid: true };\n  }\n\n  const result = schema.safeParse(value);\n  if (result.success) {\n    return { valid: true };\n  }\n\n  return {\n    valid: false,\n    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE,\n  };\n}\n\nfunction fieldClassName(\n  invalid: boolean,\n  mono: boolean,\n  hasTrailing: boolean,\n  className: string | undefined,\n): string {\n  return [\n    FIELD_CLASSES,\n    invalid ? INVALID_CLASSES : VALID_CLASSES,\n    mono ? \"font-code\" : \"\",\n    hasTrailing ? \"pr-16\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction FieldLabel({\n  htmlFor,\n  label,\n  optional,\n  action,\n}: {\n  htmlFor: string;\n  label: string | undefined;\n  optional: boolean;\n  action: ReactNode;\n}) {\n  if (!label) {\n    return null;\n  }\n\n  return (\n    <label\n      htmlFor={htmlFor}\n      className=\"mb-1.5 flex items-center text-label font-semibold text-fg-muted\"\n    >\n      {label}\n      {optional ? (\n        <span className=\"ml-auto text-hint font-semibold text-fg-subtle\">\n          Optional\n        </span>\n      ) : null}\n      {action ? <span className=\"ml-auto\">{action}</span> : null}\n    </label>\n  );\n}\n\nfunction FieldMessage({\n  id,\n  error,\n  hint,\n}: {\n  id: string;\n  error: string | undefined;\n  hint: ReactNode;\n}) {\n  if (error) {\n    return (\n      <p id={id} role=\"alert\" className=\"mt-1.5 text-hint text-danger\">\n        {error}\n      </p>\n    );\n  }\n\n  if (hint) {\n    return (\n      <p id={id} className=\"mt-1.5 text-hint text-fg-subtle\">\n        {hint}\n      </p>\n    );\n  }\n\n  return null;\n}\n\ntype FieldBehaviour = Pick<\n  TextInputProps,\n  | \"value\"\n  | \"defaultValue\"\n  | \"error\"\n  | \"onChange\"\n  | \"onBlur\"\n  | \"schema\"\n  | \"validateOn\"\n  | \"onValidationChange\"\n>;\n\n/**\n * Owns the value (controlled or not), the schema verdict, and when to re-run\n * it. Split out so the component itself stays markup.\n */\nfunction useFieldBehaviour({\n  value,\n  defaultValue,\n  error,\n  onChange,\n  onBlur,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n}: FieldBehaviour) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? \"\",\n  );\n  const [schemaError, setSchemaError] = useState<string | undefined>(undefined);\n\n  const isControlled = value !== undefined;\n\n  const validate = useCallback(\n    (next: string) => {\n      const state = runSchema(schema, next);\n      setSchemaError(state.error);\n      onValidationChange?.(state);\n    },\n    [schema, onValidationChange],\n  );\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const next = event.target.value;\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n\n      // Revalidate on every keystroke once the field is already invalid, so a\n      // corrected value clears the message without waiting for another blur.\n      if (validateOn === \"change\" || (validateOn === \"blur\" && schemaError)) {\n        validate(next);\n      }\n    },\n    [isControlled, onChange, validateOn, schemaError, validate],\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      if (validateOn === \"blur\") {\n        validate(event.target.value);\n      }\n      onBlur?.(event);\n    },\n    [validateOn, validate, onBlur],\n  );\n\n  return {\n    currentValue: isControlled ? value : uncontrolledValue,\n    // A caller-supplied error outranks the schema's verdict.\n    shownError: error ?? schemaError,\n    handleChange,\n    handleBlur,\n  };\n}\n\nexport function TextInput({\n  label,\n  hint,\n  error,\n  optional = false,\n  action,\n  trailing,\n  mono = false,\n  type = \"text\",\n  value,\n  defaultValue,\n  onChange,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n  id,\n  className,\n  onBlur,\n  ...rest\n}: TextInputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const describedById = `${inputId}-description`;\n\n  const { currentValue, shownError, handleChange, handleBlur } =\n    useFieldBehaviour({\n      value,\n      defaultValue,\n      error,\n      onChange,\n      onBlur,\n      schema,\n      validateOn,\n      onValidationChange,\n    });\n\n  return (\n    <div className=\"flex flex-col\">\n      <FieldLabel\n        htmlFor={inputId}\n        label={label}\n        optional={optional}\n        action={action}\n      />\n\n      <div className={trailing ? \"relative\" : undefined}>\n        <input\n          {...rest}\n          id={inputId}\n          type={type}\n          value={currentValue}\n          aria-invalid={shownError ? true : undefined}\n          aria-describedby={shownError || hint ? describedById : undefined}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          className={fieldClassName(\n            Boolean(shownError),\n            mono,\n            Boolean(trailing),\n            className,\n          )}\n        />\n        {trailing ? (\n          <span className=\"absolute top-1/2 right-[9px] -translate-y-1/2 text-hint font-semibold text-fg-subtle\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n\n      <FieldMessage id={describedById} error={shownError} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/text-input.d.cts

@@ -0,0 +1,65 @@
+import * as react from '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;
+};
+declare function TextInput({ label, hint, error, optional, action, trailing, mono, type, value, defaultValue, onChange, schema, validateOn, onValidationChange, id, className, onBlur, ...rest }: TextInputProps): react.JSX.Element;
+
+export { TextInput, type TextInputProps, type TextInputSchema, type TextInputValidation };

package/dist/text-input.d.ts

@@ -0,0 +1,65 @@
+import * as react from '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;
+};
+declare function TextInput({ label, hint, error, optional, action, trailing, mono, type, value, defaultValue, onChange, schema, validateOn, onValidationChange, id, className, onBlur, ...rest }: TextInputProps): react.JSX.Element;
+
+export { TextInput, type TextInputProps, type TextInputSchema, type TextInputValidation };

package/dist/text-input.js

@@ -0,0 +1,196 @@
+"use client";
+"use client";
+
+// src/components/text-input/index.tsx
+import {
+  useCallback,
+  useId,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FIELD_CLASSES = "h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45";
+var VALID_CLASSES = "border-line focus:border-accent focus:ring-3 focus:ring-accent-soft";
+var INVALID_CLASSES = "border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft";
+var FALLBACK_MESSAGE = "Invalid value";
+function runSchema(schema, value) {
+  if (!schema) {
+    return { valid: true };
+  }
+  const result = schema.safeParse(value);
+  if (result.success) {
+    return { valid: true };
+  }
+  return {
+    valid: false,
+    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE
+  };
+}
+function fieldClassName(invalid, mono, hasTrailing, className) {
+  return [
+    FIELD_CLASSES,
+    invalid ? INVALID_CLASSES : VALID_CLASSES,
+    mono ? "font-code" : "",
+    hasTrailing ? "pr-16" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+}
+function FieldLabel({
+  htmlFor,
+  label,
+  optional,
+  action
+}) {
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor,
+      className: "mb-1.5 flex items-center text-label font-semibold text-fg-muted",
+      children: [
+        label,
+        optional ? /* @__PURE__ */ jsx("span", { className: "ml-auto text-hint font-semibold text-fg-subtle", children: "Optional" }) : null,
+        action ? /* @__PURE__ */ jsx("span", { className: "ml-auto", children: action }) : null
+      ]
+    }
+  );
+}
+function FieldMessage({
+  id,
+  error,
+  hint
+}) {
+  if (error) {
+    return /* @__PURE__ */ jsx("p", { id, role: "alert", className: "mt-1.5 text-hint text-danger", children: error });
+  }
+  if (hint) {
+    return /* @__PURE__ */ jsx("p", { id, className: "mt-1.5 text-hint text-fg-subtle", children: hint });
+  }
+  return null;
+}
+function useFieldBehaviour({
+  value,
+  defaultValue,
+  error,
+  onChange,
+  onBlur,
+  schema,
+  validateOn = "blur",
+  onValidationChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    defaultValue ?? ""
+  );
+  const [schemaError, setSchemaError] = useState(void 0);
+  const isControlled = value !== void 0;
+  const validate = useCallback(
+    (next) => {
+      const state = runSchema(schema, next);
+      setSchemaError(state.error);
+      onValidationChange?.(state);
+    },
+    [schema, onValidationChange]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      const next = event.target.value;
+      if (!isControlled) {
+        setUncontrolledValue(next);
+      }
+      onChange?.(next);
+      if (validateOn === "change" || validateOn === "blur" && schemaError) {
+        validate(next);
+      }
+    },
+    [isControlled, onChange, validateOn, schemaError, validate]
+  );
+  const handleBlur = useCallback(
+    (event) => {
+      if (validateOn === "blur") {
+        validate(event.target.value);
+      }
+      onBlur?.(event);
+    },
+    [validateOn, validate, onBlur]
+  );
+  return {
+    currentValue: isControlled ? value : uncontrolledValue,
+    // A caller-supplied error outranks the schema's verdict.
+    shownError: error ?? schemaError,
+    handleChange,
+    handleBlur
+  };
+}
+function TextInput({
+  label,
+  hint,
+  error,
+  optional = false,
+  action,
+  trailing,
+  mono = false,
+  type = "text",
+  value,
+  defaultValue,
+  onChange,
+  schema,
+  validateOn = "blur",
+  onValidationChange,
+  id,
+  className,
+  onBlur,
+  ...rest
+}) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const describedById = `${inputId}-description`;
+  const { currentValue, shownError, handleChange, handleBlur } = useFieldBehaviour({
+    value,
+    defaultValue,
+    error,
+    onChange,
+    onBlur,
+    schema,
+    validateOn,
+    onValidationChange
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        htmlFor: inputId,
+        label,
+        optional,
+        action
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: trailing ? "relative" : void 0, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          id: inputId,
+          type,
+          value: currentValue,
+          "aria-invalid": shownError ? true : void 0,
+          "aria-describedby": shownError || hint ? describedById : void 0,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          className: fieldClassName(
+            Boolean(shownError),
+            mono,
+            Boolean(trailing),
+            className
+          )
+        }
+      ),
+      trailing ? /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 right-[9px] -translate-y-1/2 text-hint font-semibold text-fg-subtle", children: trailing }) : null
+    ] }),
+    /* @__PURE__ */ jsx(FieldMessage, { id: describedById, error: shownError, hint })
+  ] });
+}
+export {
+  TextInput
+};
+//# sourceMappingURL=text-input.js.map

package/dist/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/text-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useId,\n  useState,\n} from \"react\";\n\n/**\n * Structural shape of a zod schema — every zod schema satisfies it, and any\n * version of zod does. Declaring it this way rather than importing `ZodType`\n * keeps zod out of this module's public types, so consumers who only want an\n * input do not have to install zod to typecheck it.\n */\nexport type TextInputSchema = {\n  safeParse: (\n    value: unknown,\n  ) =>\n    | { success: true }\n    | { success: false; error: { issues: readonly { message: string }[] } };\n};\n\n/** Outcome of a single validation pass, handed to `onValidationChange`. */\nexport type TextInputValidation = {\n  valid: boolean;\n  /** First issue reported by the schema, or `undefined` when valid. */\n  error?: string;\n};\n\nexport type TextInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"type\"\n> & {\n  label?: string;\n  /** Guidance under the field. Replaced by the error message while invalid. */\n  hint?: ReactNode;\n  /**\n   * Error supplied by the caller — a server-side or cross-field failure. Takes\n   * precedence over the schema, so a form can hold a field invalid regardless\n   * of what `schema` makes of the value on its own.\n   */\n  error?: string;\n  /** Renders the design's muted \"Optional\" marker at the end of the label. */\n  optional?: boolean;\n  /** Trailing label slot, for affordances like the design's \"Forgot?\" link. */\n  action?: ReactNode;\n  /** Trailing in-field slot, for affordances like the design's password peek. */\n  trailing?: ReactNode;\n  /** Renders the value in the design's monospace face. */\n  mono?: boolean;\n  type?: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\";\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /**\n   * Any zod schema that accepts a string. Only `safeParse` is used, so a\n   * refined, transformed or preprocessed schema works as well as a plain one.\n   */\n  schema?: TextInputSchema;\n  /**\n   * When the schema runs. `blur` — the default — avoids scolding someone\n   * mid-keystroke; once a field has gone invalid it revalidates on every\n   * keystroke so the message clears as soon as it is fixed.\n   */\n  validateOn?: \"blur\" | \"change\" | \"never\";\n  onValidationChange?: (state: TextInputValidation) => void;\n};\n\nconst FIELD_CLASSES =\n  \"h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45\";\nconst VALID_CLASSES =\n  \"border-line focus:border-accent focus:ring-3 focus:ring-accent-soft\";\nconst INVALID_CLASSES =\n  \"border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft\";\nconst FALLBACK_MESSAGE = \"Invalid value\";\n\nfunction runSchema(\n  schema: TextInputSchema | undefined,\n  value: string,\n): TextInputValidation {\n  if (!schema) {\n    return { valid: true };\n  }\n\n  const result = schema.safeParse(value);\n  if (result.success) {\n    return { valid: true };\n  }\n\n  return {\n    valid: false,\n    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE,\n  };\n}\n\nfunction fieldClassName(\n  invalid: boolean,\n  mono: boolean,\n  hasTrailing: boolean,\n  className: string | undefined,\n): string {\n  return [\n    FIELD_CLASSES,\n    invalid ? INVALID_CLASSES : VALID_CLASSES,\n    mono ? \"font-code\" : \"\",\n    hasTrailing ? \"pr-16\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction FieldLabel({\n  htmlFor,\n  label,\n  optional,\n  action,\n}: {\n  htmlFor: string;\n  label: string | undefined;\n  optional: boolean;\n  action: ReactNode;\n}) {\n  if (!label) {\n    return null;\n  }\n\n  return (\n    <label\n      htmlFor={htmlFor}\n      className=\"mb-1.5 flex items-center text-label font-semibold text-fg-muted\"\n    >\n      {label}\n      {optional ? (\n        <span className=\"ml-auto text-hint font-semibold text-fg-subtle\">\n          Optional\n        </span>\n      ) : null}\n      {action ? <span className=\"ml-auto\">{action}</span> : null}\n    </label>\n  );\n}\n\nfunction FieldMessage({\n  id,\n  error,\n  hint,\n}: {\n  id: string;\n  error: string | undefined;\n  hint: ReactNode;\n}) {\n  if (error) {\n    return (\n      <p id={id} role=\"alert\" className=\"mt-1.5 text-hint text-danger\">\n        {error}\n      </p>\n    );\n  }\n\n  if (hint) {\n    return (\n      <p id={id} className=\"mt-1.5 text-hint text-fg-subtle\">\n        {hint}\n      </p>\n    );\n  }\n\n  return null;\n}\n\ntype FieldBehaviour = Pick<\n  TextInputProps,\n  | \"value\"\n  | \"defaultValue\"\n  | \"error\"\n  | \"onChange\"\n  | \"onBlur\"\n  | \"schema\"\n  | \"validateOn\"\n  | \"onValidationChange\"\n>;\n\n/**\n * Owns the value (controlled or not), the schema verdict, and when to re-run\n * it. Split out so the component itself stays markup.\n */\nfunction useFieldBehaviour({\n  value,\n  defaultValue,\n  error,\n  onChange,\n  onBlur,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n}: FieldBehaviour) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? \"\",\n  );\n  const [schemaError, setSchemaError] = useState<string | undefined>(undefined);\n\n  const isControlled = value !== undefined;\n\n  const validate = useCallback(\n    (next: string) => {\n      const state = runSchema(schema, next);\n      setSchemaError(state.error);\n      onValidationChange?.(state);\n    },\n    [schema, onValidationChange],\n  );\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const next = event.target.value;\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n\n      // Revalidate on every keystroke once the field is already invalid, so a\n      // corrected value clears the message without waiting for another blur.\n      if (validateOn === \"change\" || (validateOn === \"blur\" && schemaError)) {\n        validate(next);\n      }\n    },\n    [isControlled, onChange, validateOn, schemaError, validate],\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      if (validateOn === \"blur\") {\n        validate(event.target.value);\n      }\n      onBlur?.(event);\n    },\n    [validateOn, validate, onBlur],\n  );\n\n  return {\n    currentValue: isControlled ? value : uncontrolledValue,\n    // A caller-supplied error outranks the schema's verdict.\n    shownError: error ?? schemaError,\n    handleChange,\n    handleBlur,\n  };\n}\n\nexport function TextInput({\n  label,\n  hint,\n  error,\n  optional = false,\n  action,\n  trailing,\n  mono = false,\n  type = \"text\",\n  value,\n  defaultValue,\n  onChange,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n  id,\n  className,\n  onBlur,\n  ...rest\n}: TextInputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const describedById = `${inputId}-description`;\n\n  const { currentValue, shownError, handleChange, handleBlur } =\n    useFieldBehaviour({\n      value,\n      defaultValue,\n      error,\n      onChange,\n      onBlur,\n      schema,\n      validateOn,\n      onValidationChange,\n    });\n\n  return (\n    <div className=\"flex flex-col\">\n      <FieldLabel\n        htmlFor={inputId}\n        label={label}\n        optional={optional}\n        action={action}\n      />\n\n      <div className={trailing ? \"relative\" : undefined}>\n        <input\n          {...rest}\n          id={inputId}\n          type={type}\n          value={currentValue}\n          aria-invalid={shownError ? true : undefined}\n          aria-describedby={shownError || hint ? describedById : undefined}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          className={fieldClassName(\n            Boolean(shownError),\n            mono,\n            Boolean(trailing),\n            className,\n          )}\n        />\n        {trailing ? (\n          <span className=\"absolute top-1/2 right-[9px] -translate-y-1/2 text-hint font-semibold text-fg-subtle\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n\n      <FieldMessage id={describedById} error={shownError} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/validation.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var zod = require('zod');
+
+// src/validation/index.ts
+var REQUIRED = 1;
+var MIN_PASSWORD_LENGTH = 8;
+var VERIFICATION_CODE_LENGTH = 8;
+var MIN_BACKUP_CODE_LENGTH = 6;
+var MIN_PHONE_LENGTH = 7;
+var EMAIL_PATTERN = /.+@.+\..+/;
+var UPPER_CASE = /[A-Z]/;
+var LOWER_CASE = /[a-z]/;
+var DIGIT = /[0-9]/;
+var SYMBOL = /[^A-Za-z0-9]/;
+var SEPARATORS = /-/g;
+var PHONE_PATTERN = new RegExp(`^[+]?[\\d\\s().-]{${MIN_PHONE_LENGTH},}$`);
+var emailSchema = zod.z.string().trim().min(REQUIRED, "Enter your work email").regex(EMAIL_PATTERN, "Enter a valid email address");
+var passwordSchema = zod.z.string().min(MIN_PASSWORD_LENGTH, "Use at least 8 characters").refine(
+  (value) => UPPER_CASE.test(value) && LOWER_CASE.test(value),
+  "Use both upper and lower case letters"
+).refine(
+  (value) => DIGIT.test(value) || SYMBOL.test(value),
+  "Add a number or symbol"
+);
+var verificationCodeSchema = zod.z.string().transform((value) => value.replace(SEPARATORS, "").toUpperCase()).refine(
+  (value) => value.length === VERIFICATION_CODE_LENGTH,
+  "Enter the 8-character code"
+);
+var backupCodeSchema = zod.z.string().trim().min(MIN_BACKUP_CODE_LENGTH, "Enter a backup code");
+var fullNameSchema = zod.z.string().trim().min(REQUIRED, "Enter your full name");
+var jobTitleSchema = zod.z.string().trim().min(REQUIRED, "Enter your job title");
+var phoneSchema = zod.z.string().trim().regex(PHONE_PATTERN, "Enter a valid mobile number");
+
+exports.backupCodeSchema = backupCodeSchema;
+exports.emailSchema = emailSchema;
+exports.fullNameSchema = fullNameSchema;
+exports.jobTitleSchema = jobTitleSchema;
+exports.passwordSchema = passwordSchema;
+exports.phoneSchema = phoneSchema;
+exports.verificationCodeSchema = verificationCodeSchema;
+//# sourceMappingURL=validation.cjs.map
+//# sourceMappingURL=validation.cjs.map

package/dist/validation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/validation/index.ts"],"names":["z"],"mappings":";;;;;AAYA,IAAM,QAAA,GAAW,CAAA;AACjB,IAAM,mBAAA,GAAsB,CAAA;AAC5B,IAAM,wBAAA,GAA2B,CAAA;AACjC,IAAM,sBAAA,GAAyB,CAAA;AAC/B,IAAM,gBAAA,GAAmB,CAAA;AAEzB,IAAM,aAAA,GAAgB,WAAA;AACtB,IAAM,UAAA,GAAa,OAAA;AACnB,IAAM,UAAA,GAAa,OAAA;AACnB,IAAM,KAAA,GAAQ,OAAA;AACd,IAAM,MAAA,GAAS,cAAA;AACf,IAAM,UAAA,GAAa,IAAA;AACnB,IAAM,aAAA,GAAgB,IAAI,MAAA,CAAO,CAAA,kBAAA,EAAqB,gBAAgB,CAAA,GAAA,CAAK,CAAA;AAOpE,IAAM,WAAA,GAAcA,KAAA,CACxB,MAAA,EAAO,CACP,IAAA,EAAK,CACL,GAAA,CAAI,QAAA,EAAU,uBAAuB,CAAA,CACrC,KAAA,CAAM,aAAA,EAAe,6BAA6B;AAG9C,IAAM,iBAAiBA,KAAA,CAC3B,MAAA,GACA,GAAA,CAAI,mBAAA,EAAqB,2BAA2B,CAAA,CACpD,MAAA;AAAA,EACC,CAAC,UAAU,UAAA,CAAW,IAAA,CAAK,KAAK,CAAA,IAAK,UAAA,CAAW,KAAK,KAAK,CAAA;AAAA,EAC1D;AACF,CAAA,CACC,MAAA;AAAA,EACC,CAAC,UAAU,KAAA,CAAM,IAAA,CAAK,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA,EACjD;AACF;AAOK,IAAM,sBAAA,GAAyBA,KAAA,CACnC,MAAA,EAAO,CACP,UAAU,CAAC,KAAA,KAAU,KAAA,CAAM,OAAA,CAAQ,UAAA,EAAY,EAAE,CAAA,CAAE,WAAA,EAAa,CAAA,CAChE,MAAA;AAAA,EACC,CAAC,KAAA,KAAU,KAAA,CAAM,MAAA,KAAW,wBAAA;AAAA,EAC5B;AACF;AAGK,IAAM,gBAAA,GAAmBA,MAC7B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,wBAAwB,qBAAqB;AAG7C,IAAM,cAAA,GAAiBA,MAC3B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,UAAU,sBAAsB;AAEhC,IAAM,cAAA,GAAiBA,MAC3B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,UAAU,sBAAsB;AAMhC,IAAM,WAAA,GAAcA,MACxB,MAAA,EAAO,CACP,MAAK,CACL,KAAA,CAAM,eAAe,6BAA6B","file":"validation.cjs","sourcesContent":["import { z } from \"zod\";\n\n/**\n * Field rules taken from the Carbonbits V1 auth design, which validates inline\n * as you type. The predicates here are the ones that screen actually applies —\n * kept in one place so a form built from `TextInput` agrees with the design\n * rather than re-deriving the rules per screen.\n *\n * These are ordinary zod schemas: extend them with `.refine`, swap a message\n * with `.min(8, \"…\")`, or ignore them and pass your own.\n */\n\nconst REQUIRED = 1;\nconst MIN_PASSWORD_LENGTH = 8;\nconst VERIFICATION_CODE_LENGTH = 8;\nconst MIN_BACKUP_CODE_LENGTH = 6;\nconst MIN_PHONE_LENGTH = 7;\n\nconst EMAIL_PATTERN = /.+@.+\\..+/;\nconst UPPER_CASE = /[A-Z]/;\nconst LOWER_CASE = /[a-z]/;\nconst DIGIT = /[0-9]/;\nconst SYMBOL = /[^A-Za-z0-9]/;\nconst SEPARATORS = /-/g;\nconst PHONE_PATTERN = new RegExp(`^[+]?[\\\\d\\\\s().-]{${MIN_PHONE_LENGTH},}$`);\n\n/**\n * The design checks `/.+@.+\\..+/` rather than anything stricter, which accepts\n * the addresses people actually type and leaves real verification to the\n * confirmation email. Kept deliberately, in place of `z.email()`.\n */\nexport const emailSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your work email\")\n  .regex(EMAIL_PATTERN, \"Enter a valid email address\");\n\n/** At least 8 characters, upper and lower case, and a number or symbol. */\nexport const passwordSchema = z\n  .string()\n  .min(MIN_PASSWORD_LENGTH, \"Use at least 8 characters\")\n  .refine(\n    (value) => UPPER_CASE.test(value) && LOWER_CASE.test(value),\n    \"Use both upper and lower case letters\",\n  )\n  .refine(\n    (value) => DIGIT.test(value) || SYMBOL.test(value),\n    \"Add a number or symbol\",\n  );\n\n/**\n * Eight characters, displayed as `XXXX-XXXX`. The separator is presentational,\n * so it is stripped before the length is counted and the parsed value comes\n * back normalised and upper-cased.\n */\nexport const verificationCodeSchema = z\n  .string()\n  .transform((value) => value.replace(SEPARATORS, \"\").toUpperCase())\n  .refine(\n    (value) => value.length === VERIFICATION_CODE_LENGTH,\n    \"Enter the 8-character code\",\n  );\n\n/** Recovery codes; the design enables the button at 6 characters. */\nexport const backupCodeSchema = z\n  .string()\n  .trim()\n  .min(MIN_BACKUP_CODE_LENGTH, \"Enter a backup code\");\n\n/** Free-text profile fields — the design only requires them to be non-empty. */\nexport const fullNameSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your full name\");\n\nexport const jobTitleSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your job title\");\n\n/**\n * Optional in the design, and used for recovery and alerts only, so this stays\n * permissive: digits, spaces and the usual punctuation, in any arrangement.\n */\nexport const phoneSchema = z\n  .string()\n  .trim()\n  .regex(PHONE_PATTERN, \"Enter a valid mobile number\");\n"]}

package/dist/validation.d.cts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+/**
+ * The design checks `/.+@.+\..+/` rather than anything stricter, which accepts
+ * the addresses people actually type and leaves real verification to the
+ * confirmation email. Kept deliberately, in place of `z.email()`.
+ */
+declare const emailSchema: z.ZodString;
+/** At least 8 characters, upper and lower case, and a number or symbol. */
+declare const passwordSchema: z.ZodString;
+/**
+ * Eight characters, displayed as `XXXX-XXXX`. The separator is presentational,
+ * so it is stripped before the length is counted and the parsed value comes
+ * back normalised and upper-cased.
+ */
+declare const verificationCodeSchema: z.ZodPipe<z.ZodString, z.ZodTransform<string, string>>;
+/** Recovery codes; the design enables the button at 6 characters. */
+declare const backupCodeSchema: z.ZodString;
+/** Free-text profile fields — the design only requires them to be non-empty. */
+declare const fullNameSchema: z.ZodString;
+declare const jobTitleSchema: z.ZodString;
+/**
+ * Optional in the design, and used for recovery and alerts only, so this stays
+ * permissive: digits, spaces and the usual punctuation, in any arrangement.
+ */
+declare const phoneSchema: z.ZodString;
+
+export { backupCodeSchema, emailSchema, fullNameSchema, jobTitleSchema, passwordSchema, phoneSchema, verificationCodeSchema };

package/dist/validation.d.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+/**
+ * The design checks `/.+@.+\..+/` rather than anything stricter, which accepts
+ * the addresses people actually type and leaves real verification to the
+ * confirmation email. Kept deliberately, in place of `z.email()`.
+ */
+declare const emailSchema: z.ZodString;
+/** At least 8 characters, upper and lower case, and a number or symbol. */
+declare const passwordSchema: z.ZodString;
+/**
+ * Eight characters, displayed as `XXXX-XXXX`. The separator is presentational,
+ * so it is stripped before the length is counted and the parsed value comes
+ * back normalised and upper-cased.
+ */
+declare const verificationCodeSchema: z.ZodPipe<z.ZodString, z.ZodTransform<string, string>>;
+/** Recovery codes; the design enables the button at 6 characters. */
+declare const backupCodeSchema: z.ZodString;
+/** Free-text profile fields — the design only requires them to be non-empty. */
+declare const fullNameSchema: z.ZodString;
+declare const jobTitleSchema: z.ZodString;
+/**
+ * Optional in the design, and used for recovery and alerts only, so this stays
+ * permissive: digits, spaces and the usual punctuation, in any arrangement.
+ */
+declare const phoneSchema: z.ZodString;
+
+export { backupCodeSchema, emailSchema, fullNameSchema, jobTitleSchema, passwordSchema, phoneSchema, verificationCodeSchema };

package/dist/validation.js

@@ -0,0 +1,35 @@
+import { z } from 'zod';
+
+// src/validation/index.ts
+var REQUIRED = 1;
+var MIN_PASSWORD_LENGTH = 8;
+var VERIFICATION_CODE_LENGTH = 8;
+var MIN_BACKUP_CODE_LENGTH = 6;
+var MIN_PHONE_LENGTH = 7;
+var EMAIL_PATTERN = /.+@.+\..+/;
+var UPPER_CASE = /[A-Z]/;
+var LOWER_CASE = /[a-z]/;
+var DIGIT = /[0-9]/;
+var SYMBOL = /[^A-Za-z0-9]/;
+var SEPARATORS = /-/g;
+var PHONE_PATTERN = new RegExp(`^[+]?[\\d\\s().-]{${MIN_PHONE_LENGTH},}$`);
+var emailSchema = z.string().trim().min(REQUIRED, "Enter your work email").regex(EMAIL_PATTERN, "Enter a valid email address");
+var passwordSchema = z.string().min(MIN_PASSWORD_LENGTH, "Use at least 8 characters").refine(
+  (value) => UPPER_CASE.test(value) && LOWER_CASE.test(value),
+  "Use both upper and lower case letters"
+).refine(
+  (value) => DIGIT.test(value) || SYMBOL.test(value),
+  "Add a number or symbol"
+);
+var verificationCodeSchema = z.string().transform((value) => value.replace(SEPARATORS, "").toUpperCase()).refine(
+  (value) => value.length === VERIFICATION_CODE_LENGTH,
+  "Enter the 8-character code"
+);
+var backupCodeSchema = z.string().trim().min(MIN_BACKUP_CODE_LENGTH, "Enter a backup code");
+var fullNameSchema = z.string().trim().min(REQUIRED, "Enter your full name");
+var jobTitleSchema = z.string().trim().min(REQUIRED, "Enter your job title");
+var phoneSchema = z.string().trim().regex(PHONE_PATTERN, "Enter a valid mobile number");
+
+export { backupCodeSchema, emailSchema, fullNameSchema, jobTitleSchema, passwordSchema, phoneSchema, verificationCodeSchema };
+//# sourceMappingURL=validation.js.map
+//# sourceMappingURL=validation.js.map

package/dist/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/validation/index.ts"],"names":[],"mappings":";;;AAYA,IAAM,QAAA,GAAW,CAAA;AACjB,IAAM,mBAAA,GAAsB,CAAA;AAC5B,IAAM,wBAAA,GAA2B,CAAA;AACjC,IAAM,sBAAA,GAAyB,CAAA;AAC/B,IAAM,gBAAA,GAAmB,CAAA;AAEzB,IAAM,aAAA,GAAgB,WAAA;AACtB,IAAM,UAAA,GAAa,OAAA;AACnB,IAAM,UAAA,GAAa,OAAA;AACnB,IAAM,KAAA,GAAQ,OAAA;AACd,IAAM,MAAA,GAAS,cAAA;AACf,IAAM,UAAA,GAAa,IAAA;AACnB,IAAM,aAAA,GAAgB,IAAI,MAAA,CAAO,CAAA,kBAAA,EAAqB,gBAAgB,CAAA,GAAA,CAAK,CAAA;AAOpE,IAAM,WAAA,GAAc,CAAA,CACxB,MAAA,EAAO,CACP,IAAA,EAAK,CACL,GAAA,CAAI,QAAA,EAAU,uBAAuB,CAAA,CACrC,KAAA,CAAM,aAAA,EAAe,6BAA6B;AAG9C,IAAM,iBAAiB,CAAA,CAC3B,MAAA,GACA,GAAA,CAAI,mBAAA,EAAqB,2BAA2B,CAAA,CACpD,MAAA;AAAA,EACC,CAAC,UAAU,UAAA,CAAW,IAAA,CAAK,KAAK,CAAA,IAAK,UAAA,CAAW,KAAK,KAAK,CAAA;AAAA,EAC1D;AACF,CAAA,CACC,MAAA;AAAA,EACC,CAAC,UAAU,KAAA,CAAM,IAAA,CAAK,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA,EACjD;AACF;AAOK,IAAM,sBAAA,GAAyB,CAAA,CACnC,MAAA,EAAO,CACP,UAAU,CAAC,KAAA,KAAU,KAAA,CAAM,OAAA,CAAQ,UAAA,EAAY,EAAE,CAAA,CAAE,WAAA,EAAa,CAAA,CAChE,MAAA;AAAA,EACC,CAAC,KAAA,KAAU,KAAA,CAAM,MAAA,KAAW,wBAAA;AAAA,EAC5B;AACF;AAGK,IAAM,gBAAA,GAAmB,EAC7B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,wBAAwB,qBAAqB;AAG7C,IAAM,cAAA,GAAiB,EAC3B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,UAAU,sBAAsB;AAEhC,IAAM,cAAA,GAAiB,EAC3B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,UAAU,sBAAsB;AAMhC,IAAM,WAAA,GAAc,EACxB,MAAA,EAAO,CACP,MAAK,CACL,KAAA,CAAM,eAAe,6BAA6B","file":"validation.js","sourcesContent":["import { z } from \"zod\";\n\n/**\n * Field rules taken from the Carbonbits V1 auth design, which validates inline\n * as you type. The predicates here are the ones that screen actually applies —\n * kept in one place so a form built from `TextInput` agrees with the design\n * rather than re-deriving the rules per screen.\n *\n * These are ordinary zod schemas: extend them with `.refine`, swap a message\n * with `.min(8, \"…\")`, or ignore them and pass your own.\n */\n\nconst REQUIRED = 1;\nconst MIN_PASSWORD_LENGTH = 8;\nconst VERIFICATION_CODE_LENGTH = 8;\nconst MIN_BACKUP_CODE_LENGTH = 6;\nconst MIN_PHONE_LENGTH = 7;\n\nconst EMAIL_PATTERN = /.+@.+\\..+/;\nconst UPPER_CASE = /[A-Z]/;\nconst LOWER_CASE = /[a-z]/;\nconst DIGIT = /[0-9]/;\nconst SYMBOL = /[^A-Za-z0-9]/;\nconst SEPARATORS = /-/g;\nconst PHONE_PATTERN = new RegExp(`^[+]?[\\\\d\\\\s().-]{${MIN_PHONE_LENGTH},}$`);\n\n/**\n * The design checks `/.+@.+\\..+/` rather than anything stricter, which accepts\n * the addresses people actually type and leaves real verification to the\n * confirmation email. Kept deliberately, in place of `z.email()`.\n */\nexport const emailSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your work email\")\n  .regex(EMAIL_PATTERN, \"Enter a valid email address\");\n\n/** At least 8 characters, upper and lower case, and a number or symbol. */\nexport const passwordSchema = z\n  .string()\n  .min(MIN_PASSWORD_LENGTH, \"Use at least 8 characters\")\n  .refine(\n    (value) => UPPER_CASE.test(value) && LOWER_CASE.test(value),\n    \"Use both upper and lower case letters\",\n  )\n  .refine(\n    (value) => DIGIT.test(value) || SYMBOL.test(value),\n    \"Add a number or symbol\",\n  );\n\n/**\n * Eight characters, displayed as `XXXX-XXXX`. The separator is presentational,\n * so it is stripped before the length is counted and the parsed value comes\n * back normalised and upper-cased.\n */\nexport const verificationCodeSchema = z\n  .string()\n  .transform((value) => value.replace(SEPARATORS, \"\").toUpperCase())\n  .refine(\n    (value) => value.length === VERIFICATION_CODE_LENGTH,\n    \"Enter the 8-character code\",\n  );\n\n/** Recovery codes; the design enables the button at 6 characters. */\nexport const backupCodeSchema = z\n  .string()\n  .trim()\n  .min(MIN_BACKUP_CODE_LENGTH, \"Enter a backup code\");\n\n/** Free-text profile fields — the design only requires them to be non-empty. */\nexport const fullNameSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your full name\");\n\nexport const jobTitleSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your job title\");\n\n/**\n * Optional in the design, and used for recovery and alerts only, so this stays\n * permissive: digits, spaces and the usual punctuation, in any arrangement.\n */\nexport const phoneSchema = z\n  .string()\n  .trim()\n  .regex(PHONE_PATTERN, \"Enter a valid mobile number\");\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonbits/sixr",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "e-commerce geared component library",
   "homepage": "https://carbonbits.co.ke/sixr",
   "repository": {
@@ -42,6 +42,26 @@
         "default": "./dist/cart.cjs"
       }
     },
+    "./text-input": {
+      "import": {
+        "types": "./dist/text-input.d.ts",
+        "default": "./dist/text-input.js"
+      },
+      "require": {
+        "types": "./dist/text-input.d.cts",
+        "default": "./dist/text-input.cjs"
+      }
+    },
+    "./validation": {
+      "import": {
+        "types": "./dist/validation.d.ts",
+        "default": "./dist/validation.js"
+      },
+      "require": {
+        "types": "./dist/validation.d.cts",
+        "default": "./dist/validation.cjs"
+      }
+    },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
@@ -54,7 +74,7 @@
   "packageManager": "pnpm@12.4.2",
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",
-    "build:js": "tsup",
+    "build:js": "rm -rf dist && tsup",
     "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify",
     "typecheck": "tsc --noEmit",
     "lint": "biome check --error-on-warnings",
@@ -68,7 +88,13 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zod": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.14",
@@ -101,6 +127,7 @@
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
     "vite": "^8.3.0",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.1",
+    "zod": "^4.0.0"
   }
 }