@morze/ui 0.2.12 → 0.3.1

package/README.md

@@ -251,13 +251,13 @@ The full list lives in `dist/morze-ui-tokens.css`.
 
 ## Components
 
-| Input and actions | Navigation and output | Overlays |
-| --- | --- | --- |
-| `Button` `Toggle` `ToggleGroup` | `Tabs` `Accordion` | `Dialog` |
-| `Checkbox` `RadioGroup` `Switch` | `Card` `Alert` `Badge` | `DropdownMenu` |
-| `Slider` `Input` `Textarea` | `Progress` `Avatar` | `Popover` |
-| `Label` `Field` `Select` | `Separator` `Skeleton` `Spinner` | `Tooltip` |
-| `DataTable` | `Sidebar` | `Sheet` |
+| Input and actions | Navigation | Output | Overlays |
+| --- | --- | --- | --- |
+| `Button` `Toggle` `ToggleGroup` | `Tabs` `Accordion` | `Card` `Alert` `Badge` | `Dialog` `AlertDialog` |
+| `Checkbox` `RadioGroup` `Switch` | `Sidebar` `Breadcrumb` | `Progress` `Avatar` | `DropdownMenu` `Menubar` |
+| `Slider` `Input` `Textarea` | `Menubar` `NavigationMenu` | `Separator` `Skeleton` `Spinner` | `Popover` `Tooltip` |
+| `Label` `Field` `Select` | `ScrollArea` | `Table` `Chart` | `Sheet` `Toast` |
+| `Calendar` `DataTable` | | | |
 
 The API mirrors shadcn/ui: same names, same sub-component composition,
 `asChild`, a `data-slot` on every part — so examples from the shadcn docs work
@@ -286,6 +286,16 @@ What this kit adds on top:
   `label={null}` makes it purely decorative.
 - `Badge` — `variant`: `solid` `soft` `outline`.
 - `Field` / `FieldHint` / `FieldError` — form scaffolding.
+- `TabsList` — `overflow`: `wrap` (default), `scroll`, or `menu`, which
+  collapses whatever does not fit into a trailing menu. See [Tabs that run out
+  of room](#tabs-that-run-out-of-room).
+- `AlertDialogAction` / `AlertDialogCancel` — `variant`, `size` and `tone` from
+  `Button`, so a destructive confirmation is `tone="danger"`.
+- `Table` — brings its own horizontal scroll container, because a wide table
+  otherwise scrolls the page instead of itself; `containerRef` hands that
+  element back for a synchronised header or a virtualiser.
+- `ScrollArea` — the kit's scrollbar in place of the platform's, so a pane
+  looks scrollable on macOS too. `viewportRef` reaches the scrolling element.
 
 ```tsx
 <ToggleGroup type="single" defaultValue="week" appearance="segmented">
@@ -294,6 +304,149 @@ What this kit adds on top:
 </ToggleGroup>
 ```
 
+## Tabs that run out of room
+
+`overflow="menu"` keeps a tab row on one line and folds the rest into a menu:
+
+```tsx
+<TabsList overflow="menu" overflowLabel="More">
+  {sections.map((s) => <TabsTrigger key={s.id} value={s.id}>{s.name}</TabsTrigger>)}
+</TabsList>
+```
+
+Every trigger stays mounted inside the list — Radix wires them into one
+roving-focus group and a trigger outside it throws — so the collapsed ones are
+hidden rather than unmounted, which also takes them out of the tab order. The
+button lights up when the *selected* tab is one of the hidden ones, so the row
+never looks as if nothing is chosen. Widths are measured off a mirror row of
+inert spans: a hidden trigger measures zero, and a second row of real triggers
+would duplicate every `value`.
+
+## Calendar
+
+A month grid with no date library behind it. Names come from `Intl`, so a
+locale tag is the whole of the localisation story.
+
+```tsx
+<Calendar mode="single" selected={date} onSelect={setDate} locale="ru-RU" />
+
+<Calendar
+  mode="range"
+  numberOfMonths={2}
+  selected={range}
+  onSelect={setRange}
+  disabled={{ before: new Date() }}
+/>
+```
+
+`mode`: `single` (clicking the chosen day clears it unless `required`),
+`multiple`, `range` (the ends are ordered for you, and the span under the
+pointer previews before you commit). `disabled` takes a `Date`, a `Date[]`, a
+`{ from, to }` span, an open `{ before, after }` bound, or a predicate.
+`fromDate` / `toDate` bound both selection and paging; `captionLayout="dropdown"`
+swaps the caption for month and year selects; `showWeekNumbers` adds the ISO
+column; `weekStartsOn` overrides what the locale says.
+
+Six week rows are always drawn, so paging never resizes the popover it sits in.
+Arrows move a day, `Home`/`End` a week, `PageUp`/`PageDown` a month, and exactly
+one day is ever in the tab order.
+
+## Toast
+
+`Toaster` mounts once; `toast()` is a plain function, callable from a fetch
+handler or a store — the places a failure actually happens are rarely places
+that can call a hook.
+
+```tsx
+// once, at the root
+<Toaster position="bottom-right" />
+
+// anywhere
+toast({ title: 'Saved', tone: 'success' })
+
+const t = toast({ title: 'Uploading…', duration: Infinity })
+t.update({ title: 'Uploaded', tone: 'success', duration: 4000 })
+t.dismiss()
+```
+
+Three live at once; beyond that the oldest is dropped, because a taller stack
+is a log and nobody reads a log that is covering the page. `useToast()` returns
+the same `{ toasts, toast, dismiss }` for the rare case that needs to render
+the queue itself.
+
+## Chart
+
+The kit does not draw charts — it dresses them. `ChartContainer` publishes each
+series colour as a CSS custom property scoped to itself, so any library that
+takes a CSS colour can consume it, and the tooltip and legend read like the
+rest of the interface.
+
+```tsx
+const config = {
+  shipped: { label: 'Shipped', color: 'var(--mz-primary)' },
+  returned: { label: 'Returned', theme: { light: '#c2410c', dark: '#fb923c' } },
+} satisfies ChartConfig
+
+<ChartContainer config={config} className="h-64">
+  <ResponsiveContainer>
+    <BarChart data={rows}>
+      <Bar dataKey="shipped" fill="var(--color-shipped)" />
+      <Tooltip content={<ChartTooltipContent />} />
+    </BarChart>
+  </ResponsiveContainer>
+</ChartContainer>
+```
+
+The responsive wrapper stays yours: sizing belongs to the charting library, and
+a container that owned it would only ever work with one of them. Config values
+are validated before they are interpolated into the stylesheet — a config is
+data, and data ends up coming from a server.
+
+`ChartTooltipContent` and `ChartLegendContent` take `nameKey` (and the tooltip
+also `labelKey`) for the charts whose series key lives *inside* the datum
+rather than in `dataKey` — a pie, where every slice comes from one series:
+
+```tsx
+<Tooltip content={<ChartTooltipContent nameKey="material" hideLabel />} />
+```
+
+`ChartTooltip` and `ChartLegend` are not exported: they were only ever
+recharts' own `Tooltip` and `Legend`, so import those from recharts directly.
+
+## Forms
+
+React Hook Form bindings live behind their own entry point, because
+`react-hook-form` is an *optional* peer dependency — an application that does
+not use it should not carry it:
+
+```tsx
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage }
+  from '@morze/ui/form'
+
+<Form {...form}>
+  <FormField
+    control={form.control}
+    name="email"
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+        <FormControl><Input {...field} /></FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+</Form>
+```
+
+What it adds over `Field` is the wiring nobody enjoys writing: one generated id
+per field, `htmlFor` on the label, `aria-describedby` pointing at both the
+description and the message, and `aria-invalid` flipped by the field's own
+state. `FormMessage` renders nothing at all when there is no error, so a form
+does not reserve a blank line under every input.
+
+Without React Hook Form, `Field` / `FieldHint` / `FieldError` from the main
+entry are the same layout with none of the binding.
+
 ## Sidebar
 
 A navigation column: it collapses into an icon rail, turns into a sliding sheet
@@ -506,8 +659,13 @@ column pinned, it does not reflow into cards.
 ## Localisation
 
 Component strings default to English and every one of them can be replaced.
-`Dialog`/`Sheet` take `closeLabel`, `Spinner` takes `label`, `Sidebar` takes
-`mobileTitle` / `mobileDescription` and `SidebarTrigger` takes `label`.
+`Dialog`/`Sheet`/`Toaster` take `closeLabel`, `Spinner` takes `label`, `Sidebar`
+takes `mobileTitle` / `mobileDescription`, `SidebarTrigger` takes `label`,
+`BreadcrumbEllipsis` takes `label` and `TabsList` takes `overflowLabel`.
+
+`Calendar` reads its month, weekday and day names from `Intl` — a `locale` tag
+is enough — and takes a partial `labels` object for the four strings `Intl`
+cannot supply (the nav buttons, the caption selects, the week-number column).
 
 `DataTable` has more strings than the rest, so it takes a partial `labels`
 object — anything omitted falls back to the English default:
@@ -537,14 +695,16 @@ does not hand-carry ~50 strings — and does not silently drift as the kit adds
 them:
 
 ```tsx
-import { dataTable as ru, common } from '@morze/ui/locales/ru'
+import { dataTable as ru, calendar, common } from '@morze/ui/locales/ru'
 
 <DataTable labels={ru} locale="ru-RU" … />
+<Calendar labels={calendar} locale="ru-RU" … />
 <Dialog><DialogContent closeLabel={common.close}>…</DialogContent></Dialog>
 ```
 
 `common` carries the strings the rest of the kit takes as individual props
-(`close`, `loading`, `sidebarNavigation`, `sidebarSections`, `toggleSidebar`).
+(`close`, `loading`, `more`, `sidebarNavigation`, `sidebarSections`,
+`toggleSidebar`), and `calendar` the four the month grid needs.
 A bundle is plain data — no React, no styles — so it is safe to import from a
 server component. `@morze/ui/locales/en` is the same shape for English, and
 `MorzeLocale` types a language of your own.

package/dist/form/index.cjs

@@ -0,0 +1,128 @@
+"use client";
+'use strict';
+
+var React2 = require('react');
+var reactHookForm = require('react-hook-form');
+var radixUi = require('radix-ui');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+function cn(...inputs) {
+  return clsx.clsx(inputs);
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Label.Root, { "data-slot": "label", className: cn("mz-label", className), ...props });
+}
+var Form = reactHookForm.FormProvider;
+var FormFieldContext = React2__namespace.createContext(null);
+var FormItemContext = React2__namespace.createContext(null);
+function FormField({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
+}
+function useFormField() {
+  const fieldContext = React2__namespace.useContext(FormFieldContext);
+  const itemContext = React2__namespace.useContext(FormItemContext);
+  const { getFieldState } = reactHookForm.useFormContext();
+  if (!fieldContext) throw new Error("useFormField must be used inside a <FormField>");
+  if (!itemContext) throw new Error("useFormField must be used inside a <FormItem>");
+  const formState = reactHookForm.useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+}
+function FormItem({ className, ...props }) {
+  const id = React2__namespace.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn("mz-field", className), ...props }) });
+}
+function FormLabel({ className, ...props }) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Label,
+    {
+      "data-slot": "form-label",
+      "data-error": !!error,
+      className: cn(error && "mz-label--error", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+}
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Slot.Root,
+    {
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+function FormDescription({ className, ...props }) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "form-description",
+      id: formDescriptionId,
+      className: cn("mz-field__hint", className),
+      ...props
+    }
+  );
+}
+function FormMessage({ className, children, ...props }) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error.message ?? "") : children;
+  if (!body) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: formMessageId,
+      role: "alert",
+      className: cn("mz-field__error", className),
+      ...props,
+      children: body
+    }
+  );
+}
+
+exports.Form = Form;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.useFormField = useFormField;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/form/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/label.tsx","../../src/form/index.tsx"],"names":["clsx","jsx","LabelPrimitive","FormProvider","React2","Controller","useFormContext","useFormState","Slot"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\n\n/**\n * Class name joiner. Morze UI ships plain, prefixed CSS rather than utility\n * classes, so there is nothing to merge — clsx is enough.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return clsx(inputs)\n}\n\nexport type Tone = 'primary' | 'accent' | 'danger' | 'warning' | 'info' | 'success'\n","'use client'\n\nimport * as React from 'react'\nimport { Label as LabelPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return <LabelPrimitive.Root data-slot=\"label\" className={cn('mz-label', className)} {...props} />\n}\n\nexport { Label }\n","'use client'\n\nimport * as React from 'react'\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form'\nimport { Slot } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { Label } from '../components/label'\n\n/**\n * React Hook Form bindings.\n *\n *   import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage }\n *     from '@morze/ui/form'\n *\n * They live behind their own entry point because `react-hook-form` is an\n * optional peer dependency: an application that does not use it should not\n * carry it, and the main bundle stays free of every form library.\n *\n * What this adds over `Field` is the wiring nobody enjoys writing by hand —\n * one generated id per field, `htmlFor` on the label, `aria-describedby`\n * pointing at the description and the message, and `aria-invalid` flipped by\n * the field's own validation state.\n */\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = { name: TName }\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(null)\nconst FormItemContext = React.createContext<{ id: string } | null>(null)\n\nfunction FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\n/**\n * The ids and validation state of the field this is called inside.\n *\n * The state is read through `useFormState` scoped to this one name, so a\n * keystroke in one field does not re-render every other field's label.\n */\nfunction useFormField() {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n\n  if (!fieldContext) throw new Error('useFormField must be used inside a <FormField>')\n  if (!itemContext) throw new Error('useFormField must be used inside a <FormItem>')\n\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div data-slot=\"form-item\" className={cn('mz-field', className)} {...props} />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(error && 'mz-label--error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\n/**\n * Wraps the control itself — an `Input`, a `SelectTrigger`, anything. It\n * renders nothing of its own; it only stamps the id and the aria wiring onto\n * whatever child it is given.\n */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn('mz-field__hint', className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * The validation message. It renders the field's error when there is one and\n * `children` otherwise, and disappears entirely when there is neither — so a\n * form does not reserve a blank line under every input.\n */\nfunction FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error.message ?? '') : children\n\n  if (!body) return null\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      role=\"alert\"\n      className={cn('mz-field__error', className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  Form,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  useFormField,\n}\n"]}

package/dist/form/index.d.cts

@@ -0,0 +1,58 @@
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { L as Label } from '../label-Bf37KoRc.cjs';
+
+/**
+ * React Hook Form bindings.
+ *
+ *   import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage }
+ *     from '@morze/ui/form'
+ *
+ * They live behind their own entry point because `react-hook-form` is an
+ * optional peer dependency: an application that does not use it should not
+ * carry it, and the main bundle stays free of every form library.
+ *
+ * What this adds over `Field` is the wiring nobody enjoys writing by hand —
+ * one generated id per field, `htmlFor` on the label, `aria-describedby`
+ * pointing at the description and the message, and `aria-invalid` flipped by
+ * the field's own validation state.
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>): React.JSX.Element;
+/**
+ * The ids and validation state of the field this is called inside.
+ *
+ * The state is read through `useFormState` scoped to this one name, so a
+ * keystroke in one field does not re-render every other field's label.
+ */
+declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError | undefined;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
+/**
+ * Wraps the control itself — an `Input`, a `SelectTrigger`, anything. It
+ * renders nothing of its own; it only stamps the id and the aria wiring onto
+ * whatever child it is given.
+ */
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): React.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+/**
+ * The validation message. It renders the field's error when there is one and
+ * `children` otherwise, and disappears entirely when there is neither — so a
+ * form does not reserve a blank line under every input.
+ */
+declare function FormMessage({ className, children, ...props }: React.ComponentProps<'p'>): React.JSX.Element | null;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/form/index.d.ts

@@ -0,0 +1,58 @@
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { L as Label } from '../label-Bf37KoRc.js';
+
+/**
+ * React Hook Form bindings.
+ *
+ *   import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage }
+ *     from '@morze/ui/form'
+ *
+ * They live behind their own entry point because `react-hook-form` is an
+ * optional peer dependency: an application that does not use it should not
+ * carry it, and the main bundle stays free of every form library.
+ *
+ * What this adds over `Field` is the wiring nobody enjoys writing by hand —
+ * one generated id per field, `htmlFor` on the label, `aria-describedby`
+ * pointing at the description and the message, and `aria-invalid` flipped by
+ * the field's own validation state.
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>): React.JSX.Element;
+/**
+ * The ids and validation state of the field this is called inside.
+ *
+ * The state is read through `useFormState` scoped to this one name, so a
+ * keystroke in one field does not re-render every other field's label.
+ */
+declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError | undefined;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
+/**
+ * Wraps the control itself — an `Input`, a `SelectTrigger`, anything. It
+ * renders nothing of its own; it only stamps the id and the aria wiring onto
+ * whatever child it is given.
+ */
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): React.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+/**
+ * The validation message. It renders the field's error when there is one and
+ * `children` otherwise, and disappears entirely when there is neither — so a
+ * form does not reserve a blank line under every input.
+ */
+declare function FormMessage({ className, children, ...props }: React.ComponentProps<'p'>): React.JSX.Element | null;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/form/index.js

@@ -0,0 +1,99 @@
+"use client";
+import * as React2 from 'react';
+import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
+import { Slot, Label as Label$1 } from 'radix-ui';
+import { clsx } from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return clsx(inputs);
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Label$1.Root, { "data-slot": "label", className: cn("mz-label", className), ...props });
+}
+var Form = FormProvider;
+var FormFieldContext = React2.createContext(null);
+var FormItemContext = React2.createContext(null);
+function FormField({ ...props }) {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+function useFormField() {
+  const fieldContext = React2.useContext(FormFieldContext);
+  const itemContext = React2.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  if (!fieldContext) throw new Error("useFormField must be used inside a <FormField>");
+  if (!itemContext) throw new Error("useFormField must be used inside a <FormItem>");
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+}
+function FormItem({ className, ...props }) {
+  const id = React2.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("mz-field", className), ...props }) });
+}
+function FormLabel({ className, ...props }) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "form-label",
+      "data-error": !!error,
+      className: cn(error && "mz-label--error", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+}
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot.Root,
+    {
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+function FormDescription({ className, ...props }) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "form-description",
+      id: formDescriptionId,
+      className: cn("mz-field__hint", className),
+      ...props
+    }
+  );
+}
+function FormMessage({ className, children, ...props }) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error.message ?? "") : children;
+  if (!body) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: formMessageId,
+      role: "alert",
+      className: cn("mz-field__error", className),
+      ...props,
+      children: body
+    }
+  );
+}
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/label.tsx","../../src/form/index.tsx"],"names":["LabelPrimitive","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\n\n/**\n * Class name joiner. Morze UI ships plain, prefixed CSS rather than utility\n * classes, so there is nothing to merge — clsx is enough.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return clsx(inputs)\n}\n\nexport type Tone = 'primary' | 'accent' | 'danger' | 'warning' | 'info' | 'success'\n","'use client'\n\nimport * as React from 'react'\nimport { Label as LabelPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return <LabelPrimitive.Root data-slot=\"label\" className={cn('mz-label', className)} {...props} />\n}\n\nexport { Label }\n","'use client'\n\nimport * as React from 'react'\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form'\nimport { Slot } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { Label } from '../components/label'\n\n/**\n * React Hook Form bindings.\n *\n *   import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage }\n *     from '@morze/ui/form'\n *\n * They live behind their own entry point because `react-hook-form` is an\n * optional peer dependency: an application that does not use it should not\n * carry it, and the main bundle stays free of every form library.\n *\n * What this adds over `Field` is the wiring nobody enjoys writing by hand —\n * one generated id per field, `htmlFor` on the label, `aria-describedby`\n * pointing at the description and the message, and `aria-invalid` flipped by\n * the field's own validation state.\n */\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = { name: TName }\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(null)\nconst FormItemContext = React.createContext<{ id: string } | null>(null)\n\nfunction FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\n/**\n * The ids and validation state of the field this is called inside.\n *\n * The state is read through `useFormState` scoped to this one name, so a\n * keystroke in one field does not re-render every other field's label.\n */\nfunction useFormField() {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n\n  if (!fieldContext) throw new Error('useFormField must be used inside a <FormField>')\n  if (!itemContext) throw new Error('useFormField must be used inside a <FormItem>')\n\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div data-slot=\"form-item\" className={cn('mz-field', className)} {...props} />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(error && 'mz-label--error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\n/**\n * Wraps the control itself — an `Input`, a `SelectTrigger`, anything. It\n * renders nothing of its own; it only stamps the id and the aria wiring onto\n * whatever child it is given.\n */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn('mz-field__hint', className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * The validation message. It renders the field's error when there is one and\n * `children` otherwise, and disappears entirely when there is neither — so a\n * form does not reserve a blank line under every input.\n */\nfunction FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error.message ?? '') : children\n\n  if (!body) return null\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      role=\"alert\"\n      className={cn('mz-field__error', className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  Form,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  useFormField,\n}\n"]}