@krizaka/ui 2.10.0 → 3.1.0

package/dist/search-field.js

@@ -1,165 +1,11 @@
 "use client";
 import {
-  useListbox
-} from "./chunk-ZIXB33X7.js";
-import {
-  useControllable,
-  useDebouncedCallback
-} from "./chunk-EUPTXKH7.js";
-import {
-  CloseGlyph,
-  SearchGlyph
-} from "./chunk-CPA5CF35.js";
-
-// src/search-field/search-field.tsx
-import * as React from "react";
-import { tv as tv2 } from "tailwind-variants";
-
-// src/kbd/kbd.tsx
-import { tv } from "tailwind-variants";
-import { jsx } from "react/jsx-runtime";
-var kbdVariants = tv({
-  base: "inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 font-mono font-semibold text-fg-secondary",
-  variants: { size: { sm: "h-5 min-w-5 px-1 text-[10px]", md: "h-6 min-w-6 px-1.5 text-xs" } },
-  defaultVariants: { size: "md" }
-});
-function Kbd({ size, className, ...props }) {
-  return /* @__PURE__ */ jsx("kbd", { className: kbdVariants({ size, className }), ...props });
-}
-
-// src/search-field/search-field.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var searchField = tv2({
-  slots: {
-    root: "relative w-full",
-    control: "flex h-11 w-full items-center gap-2 rounded-lg border border-border-default bg-surface-2 pl-3 pr-1.5 text-sm text-fg transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring",
-    icon: "h-4 w-4 shrink-0 text-fg-secondary",
-    input: "h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted [&::-webkit-search-cancel-button]:appearance-none",
-    clear: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
-    shortcut: "hidden shrink-0 items-center gap-0.5 pr-1 sm:flex",
-    list: "absolute inset-x-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg",
-    option: "flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3",
-    group: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase text-fg-muted"
-  },
-  variants: {
-    size: { md: {}, sm: { control: "h-9", clear: "h-7 w-7" } }
-  },
-  defaultVariants: { size: "md" }
-});
-var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-function SearchField({
-  label,
-  value: valueProp,
-  defaultValue = "",
-  onValueChange,
-  onSearch,
-  debounce = 250,
-  onSubmit,
-  shortcut = false,
-  suggestions,
-  suggestionsLabel,
-  onSuggestionSelect,
-  clearLabel = "Clear search",
-  landmark = true,
-  size,
-  className,
-  placeholder,
-  ...props
-}) {
-  const s = searchField({ size });
-  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
-  const [open, setOpen] = React.useState(false);
-  const [apple, setApple] = React.useState(false);
-  const input = React.useRef(null);
-  const search = useDebouncedCallback((query) => onSearch?.(query), debounce);
-  const list = suggestions ?? [];
-  const pick = (i) => {
-    const suggestion = list[i];
-    if (!suggestion) return;
-    setOpen(false);
-    onSuggestionSelect?.(suggestion);
-  };
-  const listbox = useListbox({ count: list.length, onPick: pick, open: open && list.length > 0, setOpen });
-  React.useEffect(() => {
-    if (!shortcut) return;
-    setApple(isApple());
-    const onKey = (event) => {
-      if (event.key.toLowerCase() === shortcut.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey) {
-        event.preventDefault();
-        input.current?.focus();
-        input.current?.select();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [shortcut]);
-  const change = (query) => {
-    setValue(query);
-    search(query);
-    listbox.setActive(-1);
-    setOpen(true);
-  };
-  const field = /* @__PURE__ */ jsxs("div", { className: s.root({ className }), onBlur: (event) => !event.currentTarget.contains(event.relatedTarget) && setOpen(false), children: [
-    /* @__PURE__ */ jsxs("div", { className: s.control(), children: [
-      /* @__PURE__ */ jsx2(SearchGlyph, { className: s.icon() }),
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          ref: input,
-          type: "search",
-          "aria-label": label,
-          enterKeyHint: "search",
-          autoComplete: "off",
-          ...list.length > 0 ? listbox.inputProps : {},
-          value,
-          placeholder,
-          className: s.input(),
-          onChange: (event) => change(event.target.value),
-          onFocus: () => setOpen(true),
-          onKeyDown: (event) => {
-            if (list.length > 0 && listbox.onKeyDown(event)) return;
-            if (event.key === "Enter") {
-              event.preventDefault();
-              search.cancel();
-              onSearch?.(value);
-              onSubmit?.(value);
-              setOpen(false);
-            } else if (event.key === "Escape" && value) {
-              event.preventDefault();
-              change("");
-            }
-          },
-          ...props
-        }
-      ),
-      value ? /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          "aria-label": clearLabel,
-          className: s.clear(),
-          onClick: () => {
-            change("");
-            input.current?.focus();
-          },
-          children: /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" })
-        }
-      ) : shortcut ? /* @__PURE__ */ jsxs("span", { className: s.shortcut(), "aria-hidden": true, children: [
-        /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: apple ? "\u2318" : "Ctrl" }),
-        /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: shortcut.toUpperCase() })
-      ] }) : null
-    ] }),
-    list.length > 0 && /* @__PURE__ */ jsxs("div", { hidden: !open, className: s.list(), children: [
-      suggestionsLabel ? /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: s.group(), children: suggestionsLabel }) : null,
-      /* @__PURE__ */ jsx2("div", { id: listbox.listId, role: "listbox", "aria-label": suggestionsLabel ?? label, children: list.map((suggestion, i) => /* @__PURE__ */ jsxs("div", { ...listbox.optionProps(i, false), className: s.option(), children: [
-        /* @__PURE__ */ jsx2(SearchGlyph, { className: "h-3.5 w-3.5 shrink-0 text-fg-muted" }),
-        /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: suggestion.label }),
-        suggestion.meta ? /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-xs text-fg-secondary", children: suggestion.meta }) : null
-      ] }, suggestion.value)) })
-    ] })
-  ] });
-  return landmark ? /* @__PURE__ */ jsx2("div", { role: "search", children: field }) : field;
-}
+  SearchField,
+  searchField
+} from "./chunk-FDCMBWUU.js";
+import "./chunk-ZIXB33X7.js";
+import "./chunk-BRKMQ6JV.js";
+import "./chunk-CPA5CF35.js";
 export {
   SearchField,
   searchField

package/dist/search-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/search-field/search-field.tsx","../src/kbd/kbd.tsx"],"sourcesContent":["// Client. A search input (`type=\"search\"` inside a `role=\"search\"` landmark when it stands alone): a leading glyph,\n// a clear button, a global shortcut that focuses it (⌘K on Apple devices, Ctrl+K elsewhere, shown as `Kbd`), and\n// optional suggestions through the shared combobox engine. `onSearch` is debounced; Enter submits.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CloseGlyph, SearchGlyph } from \"../glyphs\";\nimport { Kbd } from \"../kbd\";\nimport { useListbox } from \"../listbox\";\nimport { useControllable, useDebouncedCallback } from \"../media\";\n\nexport const searchField = tv({\n  slots: {\n    root: \"relative w-full\",\n    control:\n      \"flex h-11 w-full items-center gap-2 rounded-lg border border-border-default bg-surface-2 pl-3 pr-1.5 text-sm text-fg \" +\n      \"transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring\",\n    icon: \"h-4 w-4 shrink-0 text-fg-secondary\",\n    input:\n      \"h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted \" +\n      \"[&::-webkit-search-cancel-button]:appearance-none\",\n    clear:\n      \"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    shortcut: \"hidden shrink-0 items-center gap-0.5 pr-1 sm:flex\",\n    list: \"absolute inset-x-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg\",\n    option: \"flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3\",\n    group: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase text-fg-muted\",\n  },\n  variants: {\n    size: { md: {}, sm: { control: \"h-9\", clear: \"h-7 w-7\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SearchSuggestion = {\n  /** What `onSuggestionSelect` receives. */\n  value: string;\n  /** What the person reads. */\n  label: string;\n  /** A small text on the right (\"Creator\", \"12 videos\"). */\n  meta?: string;\n};\n\nexport type SearchFieldProps = Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"size\" | \"type\"> & {\n  /** The accessible name of the input (\"Search videos\"), passed translated. */\n  label: string;\n  /** The query (controlled). */\n  value?: string;\n  /** The query at first, uncontrolled. */\n  defaultValue?: string;\n  /** Called on every key with the query. */\n  onValueChange?: (query: string) => void;\n  /** Called with the query once typing pauses (`debounce` ms): fetch the results here. */\n  onSearch?: (query: string) => void;\n  /** The pause, in ms, before `onSearch`. Default 250. */\n  debounce?: number;\n  /** Called on Enter (no suggestion active) with the query: go to the results page. */\n  onSubmit?: (query: string) => void;\n  /** The global key that focuses the field with ⌘ / Ctrl (`\"k\"`), or `false` for none. Default `false`. */\n  shortcut?: string | false;\n  /** Suggestions under the field (recent searches, completions). */\n  suggestions?: readonly SearchSuggestion[];\n  /** A title above the suggestions (\"Recent searches\"). */\n  suggestionsLabel?: string;\n  /** Called with a suggestion picked (Enter on it, or a click). */\n  onSuggestionSelect?: (suggestion: SearchSuggestion) => void;\n  /** The clear button's name (\"Clear search\"), passed translated. */\n  clearLabel?: string;\n  /** Wraps the field in a `role=\"search\"` landmark (default) — `false` inside a form that already is one. */\n  landmark?: boolean;\n  /** md (default) · sm. */\n  size?: \"md\" | \"sm\";\n};\n\nconst isApple = () => typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\n\n/** A search box: clear, shortcut, debounced search, submit on Enter, suggestions with the keyboard. */\nexport function SearchField({\n  label,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onSearch,\n  debounce = 250,\n  onSubmit,\n  shortcut = false,\n  suggestions,\n  suggestionsLabel,\n  onSuggestionSelect,\n  clearLabel = \"Clear search\",\n  landmark = true,\n  size,\n  className,\n  placeholder,\n  ...props\n}: SearchFieldProps) {\n  const s = searchField({ size });\n  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(false);\n  const [apple, setApple] = React.useState(false);\n  const input = React.useRef<HTMLInputElement>(null);\n  const search = useDebouncedCallback((query: string) => onSearch?.(query), debounce);\n  const list = suggestions ?? [];\n\n  const pick = (i: number) => {\n    const suggestion = list[i];\n    if (!suggestion) return;\n    setOpen(false);\n    onSuggestionSelect?.(suggestion);\n  };\n  const listbox = useListbox({ count: list.length, onPick: pick, open: open && list.length > 0, setOpen });\n\n  React.useEffect(() => {\n    if (!shortcut) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- the platform is only known in the browser (no hydration mismatch)\n    setApple(isApple());\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === shortcut.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey) {\n        event.preventDefault();\n        input.current?.focus();\n        input.current?.select();\n      }\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [shortcut]);\n\n  const change = (query: string) => {\n    setValue(query);\n    search(query);\n    listbox.setActive(-1);\n    setOpen(true);\n  };\n\n  const field = (\n    <div className={s.root({ className })} onBlur={(event) => !event.currentTarget.contains(event.relatedTarget as Node | null) && setOpen(false)}>\n      <div className={s.control()}>\n        <SearchGlyph className={s.icon()} />\n        <input\n          ref={input}\n          type=\"search\"\n          aria-label={label}\n          enterKeyHint=\"search\"\n          autoComplete=\"off\"\n          {...(list.length > 0 ? listbox.inputProps : {})}\n          value={value}\n          placeholder={placeholder}\n          className={s.input()}\n          onChange={(event) => change(event.target.value)}\n          onFocus={() => setOpen(true)}\n          onKeyDown={(event) => {\n            if (list.length > 0 && listbox.onKeyDown(event)) return;\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              search.cancel();\n              onSearch?.(value);\n              onSubmit?.(value);\n              setOpen(false);\n            } else if (event.key === \"Escape\" && value) {\n              event.preventDefault();\n              change(\"\");\n            }\n          }}\n          {...props}\n        />\n        {value ? (\n          <button\n            type=\"button\"\n            aria-label={clearLabel}\n            className={s.clear()}\n            onClick={() => {\n              change(\"\");\n              input.current?.focus();\n            }}\n          >\n            <CloseGlyph className=\"h-4 w-4\" />\n          </button>\n        ) : shortcut ? (\n          <span className={s.shortcut()} aria-hidden>\n            <Kbd size=\"sm\">{apple ? \"⌘\" : \"Ctrl\"}</Kbd>\n            <Kbd size=\"sm\">{shortcut.toUpperCase()}</Kbd>\n          </span>\n        ) : null}\n      </div>\n      {list.length > 0 && (\n        <div hidden={!open} className={s.list()}>\n          {suggestionsLabel ? (\n            <div aria-hidden className={s.group()}>\n              {suggestionsLabel}\n            </div>\n          ) : null}\n          <div id={listbox.listId} role=\"listbox\" aria-label={suggestionsLabel ?? label}>\n            {list.map((suggestion, i) => (\n              <div key={suggestion.value} {...listbox.optionProps(i, false)} className={s.option()}>\n                <SearchGlyph className=\"h-3.5 w-3.5 shrink-0 text-fg-muted\" />\n                <span className=\"min-w-0 flex-1 truncate\">{suggestion.label}</span>\n                {suggestion.meta ? <span className=\"shrink-0 text-xs text-fg-secondary\">{suggestion.meta}</span> : null}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n  return landmark ? <div role=\"search\">{field}</div> : field;\n}\n","// Server-safe. A key, or a shortcut of several (`<Kbd>⌘</Kbd><Kbd>K</Kbd>`).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbdVariants = tv({\n  base:\n    \"inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 \" +\n    \"font-mono font-semibold text-fg-secondary\",\n  variants: { size: { sm: \"h-5 min-w-5 px-1 text-[10px]\", md: \"h-6 min-w-6 px-1.5 text-xs\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type KbdProps = React.ComponentProps<\"kbd\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: VariantProps<typeof kbdVariants>[\"size\"];\n};\n\nexport function Kbd({ size, className, ...props }: KbdProps) {\n  return <kbd className={kbdVariants({ size, className })} {...props} />;\n}\n"],"mappings":"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","names":["tv","jsx","tv"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tag-input.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   Combobox
-} from "./chunk-X6TW3X6Y.js";
+} from "./chunk-LCZXS6AK.js";
 import "./chunk-YH4LMWRU.js";
 import "./chunk-ZIXB33X7.js";
 import {
   useControllable
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 import "./chunk-CPA5CF35.js";
 
 // src/tag-input/tag-input.tsx

package/dist/video-player.js

@@ -8,7 +8,7 @@ import {
   playSafely,
   useInView,
   usePrefersReducedMotion
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 import {
   CaptionsGlyph,
   FullscreenGlyph,

package/dist/video-trimmer.js

@@ -2,7 +2,7 @@
 import {
   clamp,
   formatClock
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 
 // src/video-trimmer/video-trimmer.tsx
 import * as React from "react";

package/dist/virtual.d.ts

@@ -0,0 +1,140 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { ReactVirtualizer, useVirtualizer as useVirtualizer$1, useWindowVirtualizer as useWindowVirtualizer$1 } from '@tanstack/react-virtual';
+export { VirtualItem } from '@tanstack/react-virtual';
+import * as React from 'react';
+
+declare const virtual: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    viewport: string;
+    list: string;
+    item: string;
+    row: string;
+    empty: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    viewport: string;
+    list: string;
+    item: string;
+    row: string;
+    empty: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    viewport: string;
+    list: string;
+    item: string;
+    row: string;
+    empty: string;
+}>>;
+/** What a list or a grid can be asked to do from outside (`ref`). */
+type VirtualHandle = {
+    /** Scrolls the item at `index` into view — smoothly, unless the person asked for less motion. */
+    scrollToIndex: (index: number, align?: "start" | "center" | "end" | "auto") => void;
+};
+/** The window virtualizer of TanStack Virtual (a feed that scrolls the page), re-exported through the facade. */
+declare const useWindowVirtualizer: typeof useWindowVirtualizer$1;
+/** The element virtualizer of TanStack Virtual (anything the components do not cover), re-exported through the facade. */
+declare const useVirtualizer: typeof useVirtualizer$1;
+type Virtualizer<S extends Element | Window = Element, I extends Element = Element> = ReactVirtualizer<S, I>;
+type Size = number | ((index: number) => number);
+type VirtualListProps<T> = {
+    /** The items, all of them: only those in view (and `overscan` around) are rendered. */
+    items: readonly T[];
+    /** Draws one item. */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** A stable key per item (an id): keeps measurements on the right item when the list changes. Default: the index. */
+    getKey?: (item: T, index: number) => string | number;
+    /** The size of an item in px, or a guess per index; each item is then measured (dynamic sizes). */
+    estimateSize: Size;
+    /** The accessible name of the list ("Messages", "Events"), passed translated. */
+    label: string;
+    /** `self` (default): the list scrolls in its own region of `height`. `window`: the page scrolls (a feed). */
+    scroll?: "self" | "window";
+    /** The height of the scrolling region (`self`): px or any CSS length. Default 400. */
+    height?: number | string;
+    /** Items rendered beyond the visible ones, on each side. Default 6. */
+    overscan?: number;
+    /** Space between two items, in px. Default 0. */
+    gap?: number;
+    /** Called when the end comes near (load the next page): once per length of `items`. */
+    onEndReached?: () => void;
+    /** How many items before the end `onEndReached` fires. Default 5. */
+    endReachedThreshold?: number;
+    /** Shown instead of the list when there is no item. */
+    empty?: React.ReactNode;
+    /** Shown after the last item (a spinner while the next page loads). */
+    footer?: React.ReactNode;
+    /** `scrollToIndex` from outside. */
+    ref?: React.Ref<VirtualHandle>;
+    /** Classes merged on the scrolling region (`self`) or the list (`window`). */
+    className?: string;
+};
+/**
+ * A long list rendered by what is in view: fixed or measured sizes, its own scrolling region or the page's, the end
+ * announced for infinite loading, items placed in the whole for assistive technology.
+ */
+declare function VirtualList<T>({ items, renderItem, getKey, estimateSize, label, scroll, height, overscan, gap, onEndReached, endReachedThreshold, empty, footer, ref, className, }: VirtualListProps<T>): React.JSX.Element;
+type VirtualGridProps<T> = {
+    /** The items, all of them: only the rows in view are rendered. */
+    items: readonly T[];
+    /** Draws one cell (a card, a thumbnail). */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** A stable key per item. Default: the index. */
+    getKey?: (item: T, index: number) => string | number;
+    /** The height of a row in px (a guess: rows are measured). */
+    estimateRowHeight: number;
+    /** The accessible name of the grid of items ("Videos"), passed translated. */
+    label: string;
+    /** A fixed number of columns. Without it, as many columns of at least `minItemWidth` as the width allows. */
+    columns?: number;
+    /** The narrowest a cell may be, in px, when `columns` is not set. Default 220. */
+    minItemWidth?: number;
+    /** The height of the scrolling region: px or any CSS length. Default 480. */
+    height?: number | string;
+    /** Space between cells, in px. Default 16. */
+    gap?: number;
+    /** Rows rendered beyond the visible ones. Default 3. */
+    overscan?: number;
+    /** Called when the last rows come near (load the next page). */
+    onEndReached?: () => void;
+    /** Shown instead of the grid when there is no item. */
+    empty?: React.ReactNode;
+    /** Shown after the last row. */
+    footer?: React.ReactNode;
+    /** `scrollToIndex` (of an item) from outside. */
+    ref?: React.Ref<VirtualHandle>;
+    /** Classes merged on the scrolling region. */
+    className?: string;
+};
+/** The number of columns a width holds at `minItemWidth` each (at least one). */
+declare const columnsFor: (width: number, minItemWidth: number, gap: number) => number;
+/** A gallery rendered by the rows in view: as many columns as the width allows (or a fixed number), measured rows. */
+declare function VirtualGrid<T>({ items, renderItem, getKey, estimateRowHeight, label, columns: fixed, minItemWidth, height, gap, overscan, onEndReached, empty, footer, ref, className, }: VirtualGridProps<T>): React.JSX.Element;
+
+export { VirtualGrid, type VirtualGridProps, type VirtualHandle, VirtualList, type VirtualListProps, type Virtualizer, columnsFor, useVirtualizer, useWindowVirtualizer, virtual };

package/dist/virtual.js

@@ -0,0 +1,19 @@
+"use client";
+import {
+  VirtualGrid,
+  VirtualList,
+  columnsFor,
+  useVirtualizer,
+  useWindowVirtualizer,
+  virtual
+} from "./chunk-HCNOOPZE.js";
+import "./chunk-BRKMQ6JV.js";
+export {
+  VirtualGrid,
+  VirtualList,
+  columnsFor,
+  useVirtualizer,
+  useWindowVirtualizer,
+  virtual
+};
+//# sourceMappingURL=virtual.js.map

package/dist/virtual.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "2.10.0",
+  "version": "3.1.0",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yazakia, Yororis) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -25,7 +25,12 @@
     "page-layout",
     "layouts",
     "templates",
-    "app-shell"
+    "app-shell",
+    "data-table",
+    "virtual-list",
+    "flashlist",
+    "tanstack",
+    "tanstack-intent"
   ],
   "homepage": "https://github.com/krizaka/krizaka-ui#readme",
   "bugs": "https://github.com/krizaka/krizaka-ui/issues",
@@ -233,10 +238,22 @@
       "types": "./dist/data-table.d.ts",
       "import": "./dist/data-table.js"
     },
+    "./virtual": {
+      "types": "./dist/virtual.d.ts",
+      "import": "./dist/virtual.js"
+    },
     "./filter-bar": {
       "types": "./dist/filter-bar.d.ts",
       "import": "./dist/filter-bar.js"
     },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js"
+    },
+    "./form/server": {
+      "types": "./dist/form/server.d.ts",
+      "import": "./dist/form/server.js"
+    },
     "./combobox": {
       "types": "./dist/combobox.d.ts",
       "import": "./dist/combobox.js"
@@ -469,6 +486,14 @@
       "types": "./dist/native/media-capture.d.ts",
       "import": "./dist/native/media-capture.js"
     },
+    "./native/list": {
+      "types": "./dist/native/list.d.ts",
+      "import": "./dist/native/list.js"
+    },
+    "./native/form": {
+      "types": "./dist/native/form.d.ts",
+      "import": "./dist/native/form.js"
+    },
     "./registry/examples/*": {
       "types": "./registry/examples/*.d.ts",
       "import": "./registry/examples/*.js"
@@ -483,6 +508,7 @@
     "registry/examples/**/*.js",
     "registry/examples/**/*.d.ts",
     "registry/examples/**/*.png",
+    "skills",
     "tailwind.css",
     "README.md",
     "LICENSE"
@@ -491,7 +517,9 @@
     "*.css"
   ],
   "peerDependencies": {
-    "@krizaka/tailwind": ">=2.10.0",
+    "@krizaka/query": ">=0.1.0",
+    "@krizaka/tailwind": ">=3.1.0",
+    "@shopify/flash-list": ">=2",
     "expo-camera": ">=16",
     "expo-video": ">=2",
     "hls.js": ">=1.5",
@@ -507,6 +535,7 @@
     "@jest/globals": "30.4.1",
     "@react-native/babel-preset": "0.86.3",
     "@react-native/jest-preset": "0.86.3",
+    "@shopify/flash-list": "2.3.3",
     "@size-limit/preset-small-lib": "^14.2.0",
     "@storybook/react-vite": "10.6.1",
     "@testing-library/dom": "^10.4.0",
@@ -540,8 +569,10 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.0",
     "vitest": "^4.1.11",
-    "@krizaka/config": "0.2.0",
-    "@krizaka/tokens": "2.10.0"
+    "zod": "^4.6.5",
+    "@krizaka/query": "0.1.0",
+    "@krizaka/tokens": "3.1.0",
+    "@krizaka/config": "0.2.0"
   },
   "engines": {
     "node": ">=20"
@@ -550,9 +581,15 @@
     "access": "public"
   },
   "peerDependenciesMeta": {
+    "@krizaka/query": {
+      "optional": true
+    },
     "@krizaka/tailwind": {
       "optional": true
     },
+    "@shopify/flash-list": {
+      "optional": true
+    },
     "expo-camera": {
       "optional": true
     },
@@ -585,7 +622,7 @@
     {
       "name": "./native (bundled into the app by Metro, never downloaded: a regression guard, not a budget)",
       "path": "dist/native.js",
-      "limit": "19.4 kB",
+      "limit": "21.5 kB",
       "gzip": true
     },
     {
@@ -1041,9 +1078,31 @@
       ]
     },
     {
-      "name": "./data-table",
+      "name": "./data-table: DataTable (TanStack Table v9, the windowing of TanStack Virtual, Radix Checkbox, the pagination)",
+      "path": "dist/data-table.js",
+      "import": "{ DataTable }",
+      "limit": "44 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./data-table: the toolbar (FilterBar on Radix DropdownMenu, SearchField, the columns menu, the export)",
       "path": "dist/data-table.js",
-      "limit": "9.5 kB",
+      "import": "{ DataTableFilters, DataTableColumnsMenu, DataTableExport }",
+      "limit": "40 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./virtual (TanStack Virtual v3)",
+      "path": "dist/virtual.js",
+      "limit": "12 kB",
       "gzip": true,
       "ignore": [
         "tailwind-variants",
@@ -1060,6 +1119,24 @@
         "clsx"
       ]
     },
+    {
+      "name": "./form (TanStack Form v1; the fields import the primitives' own entries)",
+      "path": "dist/form.js",
+      "limit": "24.5 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx",
+        "@krizaka/intl",
+        "@krizaka/ui"
+      ]
+    },
+    {
+      "name": "./form/server",
+      "path": "dist/form/server.js",
+      "limit": "1.5 kB",
+      "gzip": true
+    },
     {
       "name": "./combobox",
       "path": "dist/combobox.js",
@@ -1182,6 +1259,29 @@
         "@krizaka/ui"
       ]
     },
+    {
+      "name": "./native/list (FlashList and @krizaka/query are the app's)",
+      "path": "dist/native/list.js",
+      "limit": "2 kB",
+      "gzip": true,
+      "ignore": [
+        "@shopify/flash-list",
+        "@krizaka/query",
+        "@krizaka/ui",
+        "react-native"
+      ]
+    },
+    {
+      "name": "./native/form (TanStack Form v1; the platform is the app's)",
+      "path": "dist/native/form.js",
+      "limit": "23 kB",
+      "gzip": true,
+      "ignore": [
+        "@krizaka/ui",
+        "@krizaka/intl",
+        "react-native"
+      ]
+    },
     {
       "name": "./page",
       "path": "dist/page.js",
@@ -1640,6 +1740,9 @@
   ],
   "dependencies": {
     "@krizaka/intl": "^0.1.0",
+    "@tanstack/react-form": "1.33.5",
+    "@tanstack/react-table": "9.2.8",
+    "@tanstack/react-virtual": "3.14.15",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "radix-ui": "^1.7.0",