@krizaka/ui 2.3.0 → 2.5.0

package/dist/chunk-ZIXB33X7.js

@@ -0,0 +1,95 @@
+"use client";
+
+// src/listbox.ts
+import * as React from "react";
+function useListbox({ count, isDisabled = () => false, onPick, open, setOpen }) {
+  const id = React.useId();
+  const listId = `${id}-list`;
+  const [chosen, setActive] = React.useState(-1);
+  const active = open ? Math.min(chosen, count - 1) : -1;
+  const optionId = (index) => `${id}-opt-${index}`;
+  const step = (from, delta) => {
+    for (let i = 1; i <= count; i += 1) {
+      const next = (from + delta * i + count * 2) % count;
+      if (!isDisabled(next)) return next;
+    }
+    return -1;
+  };
+  const first = () => step(-1, 1);
+  const last = () => step(count, -1);
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActive(event.altKey ? -1 : first());
+        } else setActive(active < 0 ? first() : step(active, 1));
+        return true;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActive(last());
+        } else setActive(active < 0 ? last() : step(active, -1));
+        return true;
+      case "Home":
+      case "End":
+        if (!open || count === 0) return false;
+        event.preventDefault();
+        setActive(event.key === "Home" ? first() : last());
+        return true;
+      case "Enter":
+        if (!open || active < 0) return false;
+        event.preventDefault();
+        onPick(active);
+        return true;
+      case "Escape":
+        if (!open) return false;
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        return true;
+      case "Tab":
+        if (open) setOpen(false);
+        return false;
+      default:
+        return false;
+    }
+  };
+  React.useEffect(() => {
+    if (active < 0 || typeof document === "undefined") return;
+    document.getElementById(`${id}-opt-${active}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [active, id]);
+  return {
+    listId,
+    active,
+    setActive,
+    optionId,
+    onKeyDown,
+    /** The ARIA of the text input. */
+    inputProps: {
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-controls": listId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": open && active >= 0 ? optionId(active) : void 0
+    },
+    /** The ARIA and pointer handlers of option `i` (a mouse down keeps the focus in the input). */
+    optionProps: (index, selected) => ({
+      id: optionId(index),
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": isDisabled(index) || void 0,
+      "data-active": index === active ? "" : void 0,
+      onMouseDown: (event) => event.preventDefault(),
+      onMouseMove: () => !isDisabled(index) && index !== active && setActive(index),
+      onClick: () => !isDisabled(index) && onPick(index)
+    })
+  };
+}
+
+export {
+  useListbox
+};
+//# sourceMappingURL=chunk-ZIXB33X7.js.map

package/dist/chunk-ZIXB33X7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/listbox.ts"],"sourcesContent":["// The ARIA 1.2 combobox engine shared by `combobox`, `tag-input` and `search-field` (client): the focus stays in the\n// text input, the active option is pointed at by `aria-activedescendant`, the arrows walk the enabled options, Enter\n// picks, Escape closes. The caller renders the input and the options; this hook gives them their ARIA and keys.\nimport * as React from \"react\";\n\nexport type ListboxOptions = {\n  /** How many options are shown. */\n  count: number;\n  /** Whether option `i` can be picked. */\n  isDisabled?: (index: number) => boolean;\n  /** Called when option `i` is picked (Enter or a click). */\n  onPick: (index: number) => void;\n  /** Whether the list is shown. */\n  open: boolean;\n  /** Opens or closes the list. */\n  setOpen: (open: boolean) => void;\n};\n\nexport function useListbox({ count, isDisabled = () => false, onPick, open, setOpen }: ListboxOptions) {\n  const id = React.useId();\n  const listId = `${id}-list`;\n  const [chosen, setActive] = React.useState(-1);\n  // The active option is cleared when the list closes and stays inside it when it shrinks.\n  const active = open ? Math.min(chosen, count - 1) : -1;\n  const optionId = (index: number) => `${id}-opt-${index}`;\n\n  const step = (from: number, delta: 1 | -1) => {\n    for (let i = 1; i <= count; i += 1) {\n      const next = (from + delta * i + count * 2) % count;\n      if (!isDisabled(next)) return next;\n    }\n    return -1;\n  };\n  const first = () => step(-1, 1);\n  const last = () => step(count, -1);\n\n  /** Keys of the text input. Returns `true` when the key was handled (the caller then does nothing else with it). */\n  const onKeyDown = (event: React.KeyboardEvent): boolean => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        if (!open) {\n          setOpen(true);\n          setActive(event.altKey ? -1 : first());\n        } else setActive(active < 0 ? first() : step(active, 1));\n        return true;\n      case \"ArrowUp\":\n        event.preventDefault();\n        if (!open) {\n          setOpen(true);\n          setActive(last());\n        } else setActive(active < 0 ? last() : step(active, -1));\n        return true;\n      case \"Home\":\n      case \"End\":\n        if (!open || count === 0) return false;\n        event.preventDefault();\n        setActive(event.key === \"Home\" ? first() : last());\n        return true;\n      case \"Enter\":\n        if (!open || active < 0) return false;\n        event.preventDefault();\n        onPick(active);\n        return true;\n      case \"Escape\":\n        if (!open) return false;\n        event.preventDefault();\n        event.stopPropagation();\n        setOpen(false);\n        return true;\n      case \"Tab\":\n        if (open) setOpen(false);\n        return false;\n      default:\n        return false;\n    }\n  };\n\n  // Keeps the active option in view while the arrows walk a long list.\n  React.useEffect(() => {\n    if (active < 0 || typeof document === \"undefined\") return;\n    document.getElementById(`${id}-opt-${active}`)?.scrollIntoView?.({ block: \"nearest\" });\n  }, [active, id]);\n\n  return {\n    listId,\n    active,\n    setActive,\n    optionId,\n    onKeyDown,\n    /** The ARIA of the text input. */\n    inputProps: {\n      role: \"combobox\" as const,\n      \"aria-expanded\": open,\n      \"aria-controls\": listId,\n      \"aria-autocomplete\": \"list\" as const,\n      \"aria-activedescendant\": open && active >= 0 ? optionId(active) : undefined,\n    },\n    /** The ARIA and pointer handlers of option `i` (a mouse down keeps the focus in the input). */\n    optionProps: (index: number, selected: boolean) => ({\n      id: optionId(index),\n      role: \"option\" as const,\n      \"aria-selected\": selected,\n      \"aria-disabled\": isDisabled(index) || undefined,\n      \"data-active\": index === active ? \"\" : undefined,\n      onMouseDown: (event: React.MouseEvent) => event.preventDefault(),\n      onMouseMove: () => !isDisabled(index) && index !== active && setActive(index),\n      onClick: () => !isDisabled(index) && onPick(index),\n    }),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/combobox.d.ts

@@ -0,0 +1,188 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const combobox: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            option?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            option?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    control: string;
+    input: string;
+    icon: string;
+    list: string;
+    option: string;
+    check: string;
+    description: string;
+    status: string;
+    hint: string;
+    error: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            option?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    control: string;
+    input: string;
+    icon: string;
+    list: string;
+    option: string;
+    check: string;
+    description: string;
+    status: string;
+    hint: string;
+    error: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    label: string;
+    control: string;
+    input: string;
+    icon: string;
+    list: string;
+    option: string;
+    check: string;
+    description: string;
+    status: string;
+    hint: string;
+    error: string;
+}>>;
+type ComboboxOption = {
+    /** What the app stores. */
+    value: string;
+    /** What the person reads, passed translated. */
+    label: string;
+    /** A second line under the label. */
+    description?: string;
+    /** Shown but not choosable. */
+    disabled?: boolean;
+};
+type ComboboxLabels = {
+    /** No option matches ("No results"). */
+    empty: string;
+    /** While `onSearch` runs ("Searching…"). */
+    loading: string;
+    /** `onSearch` failed ("Search unavailable"). */
+    error: string;
+    /** The option that creates a value: `(query) => "Create “" + query + "”"`. */
+    create: (query: string) => string;
+    /** A chip's remove button: `(label) => "Remove " + label`. */
+    remove: (label: string) => string;
+    /** The button that empties a single choice ("Clear"). */
+    clear: string;
+    /** The button that opens the list ("Show options"). */
+    toggle: string;
+    /** Announced when the results change: `(n) => n + " results"`. */
+    results: (count: number) => string;
+};
+declare const comboboxLabels: ComboboxLabels;
+type BaseProps = {
+    /** The visible label of the field, passed translated (also its accessible name). */
+    label: string;
+    /** Hides the label visually, keeping it as the accessible name (a search bar with its own context). */
+    hideLabel?: boolean;
+    /** The options, filtered as the person types (by `filter`). */
+    options?: readonly ComboboxOption[];
+    /** Fetches the options for a query (debounced by `debounce`); the `signal` aborts when a newer query starts. */
+    onSearch?: (query: string, signal: AbortSignal) => Promise<readonly ComboboxOption[]>;
+    /** The wait, in ms, between the last key and `onSearch`. Default 250. */
+    debounce?: number;
+    /** Whether an option matches a query. Default: its label contains the query, ignoring case and accents. */
+    filter?: (option: ComboboxOption, query: string) => boolean;
+    /** Offers to create the query as a new value when no option has that exact label. */
+    creatable?: boolean;
+    /** Turns a query into the created option (an id from the server…). Default `{ value: query, label: query }`. */
+    onCreate?: (query: string) => ComboboxOption;
+    /** Keys that create the query at once, as Enter does (`[","]` for tags); a paste is split on them too. */
+    separators?: readonly string[];
+    /** The input's placeholder, passed translated. */
+    placeholder?: string;
+    /** A help text under the field. */
+    hint?: string;
+    /** An error under the field: marks it invalid and is read with it. */
+    error?: string;
+    /** Not available. */
+    disabled?: boolean;
+    /** The name of a hidden input holding the value(s), for a plain `<form>` post. */
+    name?: string;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<ComboboxLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+    /** The id of the text input (default: generated). */
+    id?: string;
+};
+type SingleProps = BaseProps & {
+    /** One value (default) or several. */
+    multiple?: false;
+    /** The chosen option (controlled), `null` for none. */
+    value?: ComboboxOption | null;
+    /** The chosen option at first, uncontrolled. */
+    defaultValue?: ComboboxOption | null;
+    /** Called with the chosen option, or `null` when it is cleared. */
+    onValueChange?: (value: ComboboxOption | null) => void;
+    /** Most options that can be chosen (several values only). */
+    maxSelected?: never;
+};
+type MultipleProps = BaseProps & {
+    /** Several values, shown as chips. */
+    multiple: true;
+    /** The chosen options (controlled). */
+    value?: readonly ComboboxOption[];
+    /** The chosen options at first, uncontrolled. */
+    defaultValue?: readonly ComboboxOption[];
+    /** Called with every chosen option. */
+    onValueChange?: (value: ComboboxOption[]) => void;
+    /** Most options that can be chosen; the list stops offering more past it. */
+    maxSelected?: number;
+};
+type ComboboxProps = SingleProps | MultipleProps;
+/** A text field that suggests, filters and completes: one value or several (chips), static or fetched, creatable. */
+declare function Combobox(props: ComboboxProps): React.JSX.Element;
+
+export { Combobox, type ComboboxLabels, type ComboboxOption, type ComboboxProps, combobox, comboboxLabels };

package/dist/combobox.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  Combobox,
+  combobox,
+  comboboxLabels
+} from "./chunk-XUMJA5ZI.js";
+import "./chunk-YH4LMWRU.js";
+import "./chunk-ZIXB33X7.js";
+import "./chunk-EUPTXKH7.js";
+import "./chunk-YX6CNVJA.js";
+export {
+  Combobox,
+  combobox,
+  comboboxLabels
+};
+//# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

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

package/dist/data-table.d.ts

@@ -0,0 +1,246 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const dataTable: tailwind_variants.TVReturnType<{
+    layout: {
+        table: {};
+        auto: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+        cards: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+    };
+    density: {
+        comfortable: {};
+        compact: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    table: string;
+    caption: string;
+    thead: string;
+    headRow: string;
+    th: string;
+    sortButton: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    select: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}, undefined, {
+    layout: {
+        table: {};
+        auto: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+        cards: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+    };
+    density: {
+        comfortable: {};
+        compact: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    table: string;
+    caption: string;
+    thead: string;
+    headRow: string;
+    th: string;
+    sortButton: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    select: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    layout: {
+        table: {};
+        auto: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+        cards: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+    };
+    density: {
+        comfortable: {};
+        compact: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    table: string;
+    caption: string;
+    thead: string;
+    headRow: string;
+    th: string;
+    sortButton: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    select: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}>>;
+type SortDirection = "ascending" | "descending";
+type DataTableSort = {
+    column: string;
+    direction: SortDirection;
+} | null;
+type Sortable = string | number | boolean | Date | null | undefined;
+type DataTableColumn<T> = {
+    /** A key of the column (and of the row, for the default cell and sort). */
+    id: string;
+    /** The column's name, passed translated: the header, and the label of the value in a card. */
+    header: string;
+    /** What a cell shows. Default: `value(row)`, or `row[id]`. */
+    cell?: (row: T) => React.ReactNode;
+    /** The value sorted on (and shown by default): a string, a number, a date. Default `row[id]`. */
+    value?: (row: T) => Sortable;
+    /** The header becomes a sort button (ascending → descending → none). */
+    sortable?: boolean;
+    /** Text alignment: `end` for amounts and counts. */
+    align?: "start" | "center" | "end";
+    /** A CSS width (`"8rem"`, `"30%"`). */
+    width?: string;
+    /** In a card: `title` (the heading of the card), `label` (default: "Header  value"), `hidden`. */
+    card?: "title" | "label" | "hidden";
+    /** Hides the header visually (an actions column), keeping it for screen readers. */
+    headerHidden?: boolean;
+};
+type DataTableLabels = {
+    /** The checkbox of the header ("Select all rows"). */
+    selectAll: string;
+    /** The checkbox of a row: `(name) => "Select " + name`, the name from `rowLabel`. */
+    selectRow: (name: string) => string;
+    /** Read while the rows load ("Loading"). */
+    loading: string;
+    /** The default empty state ("Nothing to show"). */
+    empty: string;
+};
+declare const dataTableLabels: DataTableLabels;
+type DataTableProps<T> = {
+    /** The rows, in the order the server gave (sorted here unless `manualSort`). */
+    rows: readonly T[];
+    /** The columns, in order. */
+    columns: readonly DataTableColumn<T>[];
+    /** A stable id per row: the React key and the selection's value. */
+    getRowId: (row: T) => string;
+    /** What the table lists ("Jobs", "Your videos"): its `<caption>`, hidden unless `showCaption`. */
+    caption: string;
+    /** Shows the caption above the table. */
+    showCaption?: boolean;
+    /** The sorted column (controlled), `null` for none. */
+    sort?: DataTableSort;
+    /** The sort at first, uncontrolled. */
+    defaultSort?: DataTableSort;
+    /** Called when a header asks for a new sort. */
+    onSortChange?: (sort: DataTableSort) => void;
+    /** The server sorts (`onSortChange` fetches): the rows are shown as given. */
+    manualSort?: boolean;
+    /** Adds a checkbox per row and one in the header. */
+    selectable?: boolean;
+    /** The ids selected (controlled). */
+    selected?: readonly string[];
+    /** The ids selected at first, uncontrolled. */
+    defaultSelected?: readonly string[];
+    /** Called with the new selection. */
+    onSelectedChange?: (selected: string[]) => void;
+    /** The name of a row in its checkbox's label (default: its id). */
+    rowLabel?: (row: T) => string;
+    /** Rows are loading: skeleton rows (`loadingRows` of them) and `aria-busy`. */
+    loading?: boolean;
+    /** How many skeleton rows while loading. Default 5. */
+    loadingRows?: number;
+    /** A failure, shown in place of the rows (an `Alert`, a retry button); announced. */
+    error?: React.ReactNode;
+    /** Shown when there is no row (an `EmptyState`). Default: `labels.empty`. */
+    empty?: React.ReactNode;
+    /** `auto` (default): a table, cards below 36rem of container width. `table` or `cards` to force one. */
+    layout?: "auto" | "table" | "cards";
+    /** comfortable (default) · compact. */
+    density?: "comfortable" | "compact";
+    /** Renders only the rows in view (fixed `rowHeight`, a scrolling body of `height` px). Forces the table layout. */
+    virtualize?: {
+        rowHeight: number;
+        height: number;
+        overscan?: number;
+    };
+    /** Under the table: a `Pagination`, a total. */
+    footer?: React.ReactNode;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<DataTableLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** A table of records: sort, selection, loading / empty / error, cards on a phone, windowing for long lists. */
+declare function DataTable<T>({ rows, columns, getRowId, caption, showCaption, sort: sortProp, defaultSort, onSortChange, manualSort, selectable, selected: selectedProp, defaultSelected, onSelectedChange, rowLabel, loading, loadingRows, error, empty, layout, density, virtualize, footer, labels: given, className, }: DataTableProps<T>): React.JSX.Element;
+
+export { DataTable, type DataTableColumn, type DataTableLabels, type DataTableProps, type DataTableSort, type SortDirection, dataTable, dataTableLabels };