@krizaka/ui 3.44.0 → 3.46.0

package/README.md

@@ -181,7 +181,7 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/section-backdrop` | `SectionBackdrop` (`as`, `direction` down·up, `dome`, `grid`, `media` blurred for depth of field, `animated`): a page section on the brand's section gradient — see `@krizaka/tokens` BRAND.md, "Visual language" | server |
 | `@krizaka/ui/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon·lovebird·crane, `mood` welcome·thinking·success·empty·error, `tone` brand·own, `size`, `animated`, `title`), `MASCOT_BIRDS`, `MASCOT_MOODS`: the Krizaka flock, in the host brand's accent — one bird at a moment that matters (onboarding, a long wait, a success, an empty list, an error); native `Mascot` in `/native` | client |
 | `@krizaka/ui/iso` | the isometric kit: `IsoHub` (a hero driven by data: `layers`, `dome`, `satellites`, `highlight`), `IsoScene`, `IsoPrism`, `IsoStack`, `IsoDome`, `IsoTile`, `IsoLink`, `IsoNode`, `IsoLabel`, the projection helpers — static SVG animated by motion.css | server |
-| `@krizaka/ui/motion` | `MotionObserver` (reveal, off-screen pause, settle, spotlight, magnetism) and `RotatingWord` (no layout shift) | client |
+| `@krizaka/ui/motion` | `MotionObserver` (reveal, off-screen pause, settle, spotlight, magnetism) `RotatingWord` (no layout shift), `PageTransition` (wrap the root layout's children once: the page cross-fades through React's ViewTransition, instant under reduced motion) and the view-transition helpers | client |
 | `@krizaka/ui/pagination` | `Pagination` (pages: `page`, `pageCount`, `onPageChange` or `getHref` for links; cursor: `hasPrevious`/`hasNext`, `onPrevious`/`onNext`; `status`, `pageSize` + `pageSizeOptions`, `siblings`, `boundaries`, `labels`; folds into "Page 3 of 12" in a narrow container), `pageRange` | server |
 | `@krizaka/ui/data-table` | **v2, on TanStack Table v9** (never imported by a product): `DataTable` (`rows`, `columns` with `header`, `cell`, `value`, `sortable`, `filter` text·facet·range + `options`, `groupable` + `aggregate`, `align`, `width`, `card`, `hideable`; `caption`, `sort`, `filters`, `selected` + `selectable`, `groupBy`, `columnVisibility`, `expanded` + `renderDetail` / `getSubRows`, `page` + `pageSize` / `pageSizeOptions`, each controlled or `default*`; `pinning`, `resizing`, `manual` sorting·filtering·pagination + `rowCount` + `onStateChange` (server mode), `virtualized`, `loading`, `empty`, `error`, `layout` auto·table·cards, `density`, `toolbar`, `footer`, `labels`), the toolbar `DataTableFilters` · `DataTableColumnsMenu` · `DataTableExport`, `useDataTable()` (the TanStack instance), `dataTableCsv` | client |
 | `@krizaka/ui/virtual` | On TanStack Virtual v3: `VirtualList` (own region or `scroll="window"`, measured items, `onEndReached`, `ref.scrollToIndex`), `VirtualGrid` (columns that fit the width), `useVirtualizer` / `useWindowVirtualizer` through the facade | client |

package/dist/form.d.ts

@@ -213,6 +213,34 @@ interface KrizakaFieldArray<T = unknown> {
 declare function useKrizakaFieldArray<T = unknown>(name: string): KrizakaFieldArray<T>;
 /** The value of a field, kept up to date (`form.Watch`): show a part of the form only when a box is ticked. */
 declare function useFormValue<T = unknown>(name: string): T;
+type FormFieldProps<T = unknown> = {
+    /** The field's name in the schema (typed by the form). */
+    name: string;
+    /** Checks the value on the server as it changes. */
+    validateAsync?: FieldCheck<T>;
+    /** The wait, in ms, before `validateAsync`. */
+    asyncDebounceMs?: number;
+    /** Draws the field: its value, setter, error (and the ids, on the web) (`useKrizakaField`). */
+    children: (field: KrizakaField<T>) => React.ReactNode;
+};
+/** A field drawn by the app (a control the package does not have): the form's value and errors, any markup. */
+declare function FormField({ name, validateAsync, asyncDebounceMs, children }: FormFieldProps): React.JSX.Element;
+type FieldArrayProps<T = unknown> = {
+    /** The array's name in the schema (typed by the form). */
+    name: string;
+    /** Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, "url")` for the fields of an item. */
+    children: (array: KrizakaFieldArray<T>) => React.ReactNode;
+};
+/** A list of fields that grows and shrinks (links, tiers, guests): each item's fields named `links[0].url`. */
+declare function FieldArray({ name, children }: FieldArrayProps): React.JSX.Element;
+type WatchProps<T = unknown> = {
+    /** The field to follow (typed by the form). */
+    name: string;
+    /** Draws from its current value: show a part of the form only when a choice is made. */
+    children: (value: T) => React.ReactNode;
+};
+/** Renders from a field's current value (a part shown only when a choice is made, a total). */
+declare function Watch({ name, children }: WatchProps): React.JSX.Element;
 /** The state of the submit, for a button: sending, and whether the last try succeeded. */
 declare function useFormStatus(): {
     submitting: boolean;
@@ -451,34 +479,6 @@ type SliderProps = Base & {
 };
 /** A number (or a range) of the form, chosen by feel: a share, a volume, a price range — the value floats while it is touched. */
 declare function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels, ticks, marks }: SliderProps): React.JSX.Element;
-type FormFieldProps<T = unknown> = {
-    /** The field's name in the schema (typed by the form). */
-    name: string;
-    /** Checks the value on the server as it changes. */
-    validateAsync?: FieldCheck<T>;
-    /** The wait, in ms, before `validateAsync`. */
-    asyncDebounceMs?: number;
-    /** Draws the field: its value, setter, error and ids (`useKrizakaField`). */
-    children: (field: KrizakaField<T>) => React.ReactNode;
-};
-/** A field drawn by the app (a control the package does not have): the form's value, errors and ids, any markup. */
-declare function FormField({ name, validateAsync, asyncDebounceMs, children }: FormFieldProps): React.JSX.Element;
-type FieldArrayProps<T = unknown> = {
-    /** The array's name in the schema (typed by the form). */
-    name: string;
-    /** Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, "url")` for the fields of an item. */
-    children: (array: KrizakaFieldArray<T>) => React.ReactNode;
-};
-/** A list of fields that grows and shrinks (links, tiers, guests): each item's fields named `links[0].url`. */
-declare function FieldArray({ name, children }: FieldArrayProps): React.JSX.Element;
-type WatchProps<T = unknown> = {
-    /** The field to follow (typed by the form). */
-    name: string;
-    /** Draws from its current value: show a part of the form only when a box is ticked. */
-    children: (value: T) => React.ReactNode;
-};
-/** Renders from a field's current value (a part shown only when a box is ticked, a total). */
-declare function Watch({ name, children }: WatchProps): React.JSX.Element;
 /**
  * A form, defined once: its schema (zod 4) and default values — the same schema the server parses with. In a component,
  * `signUp.useForm({ onSubmit })` gives the form and its fields, typed by the schema: `<form.Form>`, `<form.TextField

package/dist/form.js

@@ -147,7 +147,7 @@ function problemToErrors(problem, i18n = {}, known, codeFields = {}) {
 }
 
 // src/form/core.tsx
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 var FormContext = React.createContext(null);
 function useFormContext() {
   const ctx = React.useContext(FormContext);
@@ -292,6 +292,15 @@ function useFormValue(name) {
   const ctx = useFormContext();
   return useStore(ctx.api.store, (state) => getPath(state.values, name));
 }
+function FormField({ name, validateAsync, asyncDebounceMs, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: children(useKrizakaField(name, { validateAsync, asyncDebounceMs })) });
+}
+function FieldArray({ name, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: children(useKrizakaFieldArray(name)) });
+}
+function Watch({ name, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: children(useFormValue(name)) });
+}
 function useFormStatus() {
   const ctx = useFormContext();
   const submitting = useStore(ctx.api.store, (s) => s.isSubmitting);
@@ -412,14 +421,14 @@ import { Spinner } from "@krizaka/ui/spinner";
 import { Switch as SwitchControl } from "@krizaka/ui/switch";
 import { TagInput as TagInputControl } from "@krizaka/ui/tag-input";
 import * as React2 from "react";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var ids = (f, hint) => [hint && !f.error ? f.hintId : null, f.error ? f.errorId : null].filter(Boolean).join(" ") || void 0;
 function Caption({ field, hint, ok }) {
   const suggestion = field.errorDetail?.suggestion;
   if (field.error)
     return /* @__PURE__ */ jsx2(Field.Error, { id: field.errorId, children: /* @__PURE__ */ jsxs("span", { children: [
       field.error,
-      suggestion ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      suggestion ? /* @__PURE__ */ jsxs(Fragment2, { children: [
         " ",
         /* @__PURE__ */ jsx2("button", { type: "button", className: "font-semibold text-accent-text underline underline-offset-2", onClick: () => field.setValue(suggestion.value), children: suggestion.label })
       ] }) : null
@@ -669,15 +678,6 @@ function Slider({ name, label, hint, disabled, className, min, max, step, format
     /* @__PURE__ */ jsx2(Caption, { field: f, hint })
   ] });
 }
-function FormField({ name, validateAsync, asyncDebounceMs, children }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: children(useKrizakaField(name, { validateAsync, asyncDebounceMs })) });
-}
-function FieldArray({ name, children }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: children(useKrizakaFieldArray(name)) });
-}
-function Watch({ name, children }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: children(useFormValue(name)) });
-}
 var fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, Combobox, DateField, TagInput, FileUpload, Money, Slider, Field: FormField, FieldArray, Watch, Submit, FormError };
 var createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);
 function useFormWithAction(form, ...args) {