@krizaka/ui 2.10.0 → 3.0.0

package/dist/filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/filter-bar/filter-bar.tsx","../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (menus in a portal). The bar above a list: the controls that narrow it (a SearchField, FilterMenus, a\n// DateRangePicker — any child), the filters in force as removable chips, \"Clear all\", and the count of results in a\n// polite live region. It holds no state: the app keeps the filters — in the address, ideally — and the\n// `readFilterParams` / `writeFilterParams` helpers move them between a `URLSearchParams` and an object.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Chip } from \"../chip\";\nimport { DropdownMenu, menu } from \"../dropdown-menu\";\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const filterBar = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-3\",\n    controls: \"flex w-full flex-wrap items-center gap-2 [&>*]:min-w-0\",\n    active: \"flex flex-wrap items-center gap-2\",\n    clear:\n      \"rounded-md px-2 py-1 text-xs font-semibold text-fg-accent hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    results: \"ml-auto text-xs text-fg-secondary tabular-nums\",\n    trigger:\n      \"inline-flex h-11 shrink-0 items-center gap-2 rounded-lg border border-border-default bg-surface-1 px-3.5 text-sm font-semibold text-fg-secondary \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"data-[active]:border-accent data-[active]:bg-accent-soft data-[active]:text-fg data-[state=open]:border-border-strong\",\n    count: \"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold tabular-nums text-on-accent\",\n    optionCount: \"ml-auto pl-4 text-xs tabular-nums text-fg-secondary\",\n  },\n});\n\nexport type ActiveFilter = {\n  /** A stable key (`\"status:failed\"`). */\n  id: string;\n  /** What the chip says, passed translated (\"Status: Failed\"). */\n  label: string;\n  /** Removes this filter. */\n  onRemove: () => void;\n};\n\nexport type FilterBarProps = Omit<React.ComponentProps<\"div\">, \"children\" | \"results\"> & {\n  /** The accessible name of the bar (\"Filter jobs\"), passed translated. */\n  label: string;\n  /** The controls: `SearchField`, `FilterMenu`, `DateRangePicker`, a `Chip.Group`… */\n  children?: React.ReactNode;\n  /** The filters in force, each a removable chip. */\n  active?: readonly ActiveFilter[];\n  /** Clears every filter; the \"Clear all\" button shows when there is at least one. */\n  onClearAll?: () => void;\n  /** The \"Clear all\" button (\"Clear filters\"), passed translated. */\n  clearLabel?: string;\n  /** A chip's remove button: `(label) => \"Remove \" + label`, passed translated. */\n  removeLabel?: (label: string) => string;\n  /** The count of results (\"42 jobs\"), announced politely when it changes. */\n  results?: string;\n};\n\n/** The bar of filters above a list: controls, active filters as chips, clear all, the count of results. */\nexport function FilterBar({\n  label,\n  children,\n  active = [],\n  onClearAll,\n  clearLabel = \"Clear filters\",\n  removeLabel = (text) => `Remove ${text}`,\n  results,\n  className,\n  ...props\n}: FilterBarProps) {\n  const s = filterBar();\n  return (\n    <div role=\"group\" aria-label={label} className={s.root({ className })} {...props}>\n      {children ? <div className={s.controls()}>{children}</div> : null}\n      {active.length > 0 || results !== undefined ? (\n        <div className={s.active()}>\n          {active.map((filter) => (\n            <Chip key={filter.id} size=\"sm\" removable removeLabel={removeLabel(filter.label)} onRemove={filter.onRemove}>\n              {filter.label}\n            </Chip>\n          ))}\n          {active.length > 0 && onClearAll ? (\n            <button type=\"button\" className={s.clear()} onClick={onClearAll}>\n              {clearLabel}\n            </button>\n          ) : null}\n          <p className={s.results()} aria-live=\"polite\" aria-atomic>\n            {results}\n          </p>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport type FilterOption = {\n  /** What the app stores (and puts in the address). */\n  value: string;\n  /** What the person reads, passed translated. */\n  label: string;\n  /** How many results it would give: shown on the right. */\n  count?: number;\n  /** Shown but not choosable. */\n  disabled?: boolean;\n};\n\ntype FilterMenuBase = {\n  /** The name of the filter on its button (\"Status\"), passed translated. */\n  label: string;\n  /** The choices. */\n  options: readonly FilterOption[];\n  /** Opens the menu at first (a story, a test). */\n  defaultOpen?: boolean;\n  /** Classes merged on the button. */\n  className?: string;\n};\n\nexport type FilterMenuProps =\n  | (FilterMenuBase & {\n      /** Several values (checkboxes, default) or one (radios). */\n      multiple?: true;\n      /** The values chosen. */\n      value: readonly string[];\n      /** Called with the values chosen. */\n      onValueChange: (value: string[]) => void;\n    })\n  | (FilterMenuBase & {\n      /** One value: the options are radios. */\n      multiple: false;\n      /** The value chosen, `\"\"` for none. */\n      value: string;\n      /** Called with the value chosen. */\n      onValueChange: (value: string) => void;\n    });\n\n/** A filter's button and its menu of options — checkboxes (several values) or radios (one) — with a count of chosen ones. */\nexport function FilterMenu(props: FilterMenuProps) {\n  const { label, options, defaultOpen, className } = props;\n  const s = filterBar();\n  const m = menu();\n  const chosen = props.multiple === false ? (props.value ? [props.value] : []) : props.value;\n  const single = props.multiple === false ? options.find((o) => o.value === props.value) : undefined;\n  const content = (option: FilterOption) => (\n    <>\n      {option.label}\n      {option.count !== undefined ? <span className={s.optionCount()}>{option.count}</span> : null}\n    </>\n  );\n  return (\n    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>\n      <DropdownMenu.Trigger className={s.trigger({ className })} data-active={chosen.length > 0 ? \"\" : undefined}>\n        {single ? `${label}: ${single.label}` : label}\n        {props.multiple !== false && chosen.length > 0 ? <span className={s.count()}>{chosen.length}</span> : null}\n        <ChevronGlyph className=\"h-4 w-4\" />\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"start\" aria-label={label}>\n        {props.multiple === false ? (\n          <MenuPrimitive.RadioGroup value={props.value} onValueChange={props.onValueChange}>\n            {options.map((option) => (\n              <MenuPrimitive.RadioItem key={option.value} value={option.value} disabled={option.disabled} className={m.item()}>\n                <span className=\"flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border-strong\">\n                  <MenuPrimitive.ItemIndicator className=\"h-2 w-2 rounded-full bg-accent\" />\n                </span>\n                {content(option)}\n              </MenuPrimitive.RadioItem>\n            ))}\n          </MenuPrimitive.RadioGroup>\n        ) : (\n          options.map((option) => (\n            <DropdownMenu.CheckboxItem\n              key={option.value}\n              disabled={option.disabled}\n              checked={props.value.includes(option.value)}\n              onSelect={(event) => event.preventDefault()}\n              onCheckedChange={(checked) =>\n                props.onValueChange(checked ? [...props.value, option.value] : props.value.filter((v) => v !== option.value))\n              }\n            >\n              {content(option)}\n            </DropdownMenu.CheckboxItem>\n          ))\n        )}\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n\n/** Filters read from an address: `{ status: [\"failed\", \"running\"], q: [\"cat\"] }` for the keys asked (repeated or comma-separated values). */\nexport function readFilterParams(params: URLSearchParams, keys: readonly string[]): Record<string, string[]> {\n  return Object.fromEntries(\n    keys.map((key) => [key, params.getAll(key).flatMap((v) => v.split(\",\")).map((v) => v.trim()).filter(Boolean)]),\n  );\n}\n\n/** Filters written into an address (a copy of `base`): empty filters removed, several values comma-separated, the page reset. */\nexport function writeFilterParams(base: URLSearchParams, filters: Record<string, string | readonly string[] | null | undefined>, resetKey = \"page\") {\n  const next = new URLSearchParams(base);\n  for (const [key, value] of Object.entries(filters)) {\n    const list = value == null ? [] : typeof value === \"string\" ? [value] : [...value];\n    if (list.filter(Boolean).length === 0) next.delete(key);\n    else next.set(key, list.filter(Boolean).join(\",\"));\n  }\n  if (resetKey) next.delete(resetKey);\n  return next;\n}\n","// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"],"mappings":"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","names":["MenuPrimitive","tv","jsx","jsxs","tv","s","MenuPrimitive"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/image-cropper.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-RUPRYJ45.js";
 import {
   clamp
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 
 // src/image-cropper/image-cropper.tsx
 import * as React from "react";

package/dist/media-capture.js

@@ -3,7 +3,7 @@ import {
   formatClock,
   playSafely,
   usePrefersReducedMotion
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 import {
   CameraGlyph,
   FlipGlyph

package/dist/native/list.d.ts

@@ -0,0 +1,95 @@
+import { UseInfiniteQueryResult, InfiniteData } from '@krizaka/query';
+import { FlashListRef } from '@shopify/flash-list';
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+type ListProps<T> = {
+    /** The items (stable: a query's data, state). */
+    data: readonly T[];
+    /** Draws one item. */
+    renderItem: (item: T, index: number) => React.ReactElement | null;
+    /** A stable key per item (an id): FlashList recycles the views by it. */
+    keyExtractor: (item: T, index: number) => string;
+    /** The accessible name of the list ("Notifications"), passed translated. */
+    label: string;
+    /** A hairline between items: `full` (default), `inset` (aligned with the text after an avatar), `none`. */
+    separator?: "full" | "inset" | "none";
+    /** The first page is loading: skeleton rows (`loadingRows` of them) in place of the items. */
+    loading?: boolean;
+    /** How many skeleton rows while loading. Default 6. */
+    loadingRows?: number;
+    /** A failure, shown in place of the items (an `ErrorState` with a retry). */
+    error?: React.ReactNode;
+    /** Shown when there is no item (an `EmptyState`, or its words: `{ title, description, action }`). */
+    empty?: React.ReactNode | {
+        title: string;
+        description?: string;
+        action?: React.ReactNode;
+    };
+    /** The list is reloading after a pull: the system's spinner at the top. */
+    refreshing?: boolean;
+    /** Pull to refresh: called when the person pulls the list down. */
+    onRefresh?: () => void;
+    /** Called when the end comes near: load the next page. */
+    onEndReached?: () => void;
+    /** How far from the end `onEndReached` fires, in screens. Default 0.5. */
+    endReachedThreshold?: number;
+    /** The next page is loading: a spinner under the last item, named by `loadingMoreLabel`. */
+    loadingMore?: boolean;
+    /** The name of that spinner ("Loading more"), passed translated. */
+    loadingMoreLabel?: string;
+    /** Above the first item (a title, filters): scrolls with the list. */
+    header?: React.ReactElement;
+    /** Under the last item. */
+    footer?: React.ReactElement;
+    /** Extra data the items depend on (a selection): a change re-renders the visible items. */
+    extraData?: unknown;
+    /** The FlashList, for `scrollToIndex` / `scrollToOffset`. */
+    ref?: React.Ref<FlashListRef<T>>;
+    /** Styles of the list's content (padding). */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Styles merged last, on the list. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * A long list on FlashList v2 (recycled views, 60 fps): separators, skeleton rows while the first page loads, an empty
+ * or error state in place of the items, pull to refresh tinted with the theme, the next page asked for near the end and
+ * a spinner under the last item. With `useInfiniteList`, a paginated API is one hook and one component.
+ */
+declare function List<T>({ data, renderItem, keyExtractor, label, separator, loading, loadingRows, error, empty, refreshing, onRefresh, onEndReached, endReachedThreshold, loadingMore, loadingMoreLabel, header, footer, extraData, ref, contentContainerStyle, style, }: ListProps<T>): React.JSX.Element;
+type InfiniteListOptions<TPage, TItem, TParam> = {
+    /** The query key (a `defineKeys` key): one cache entry for every page. */
+    queryKey: readonly unknown[];
+    /** Fetches one page (`krizakaFetch`), from its page parameter (a cursor, a page number). */
+    queryFn: (context: {
+        pageParam: TParam;
+        signal: AbortSignal;
+    }) => Promise<TPage>;
+    /** The parameter of the first page (`null` for a cursor, `1` for numbers). */
+    initialPageParam: TParam;
+    /** The parameter of the page after `lastPage`, or `undefined` / `null` when there is none. */
+    getNextPageParam: (lastPage: TPage, pages: TPage[]) => TParam | undefined | null;
+    /** The items of a page (`(page) => page.items`). */
+    getItems: (page: TPage) => readonly TItem[];
+    /** `false` to wait (a missing id). Default `true`. */
+    enabled?: boolean;
+    /** How long a page stays fresh, in ms (the client's default otherwise). */
+    staleTime?: number;
+};
+/** What `useInfiniteList` gives: the props of `List` to spread, and the query itself. */
+type InfiniteListResult<TPage, TItem, TParam = unknown> = {
+    /** `{ data, loading, refreshing, onRefresh, onEndReached, loadingMore }` — spread on `<List>`. */
+    listProps: Pick<ListProps<TItem>, "data" | "loading" | "refreshing" | "onRefresh" | "onEndReached" | "loadingMore">;
+    /** The failure of the first page, if any: render an `ErrorState` in `error` (a later page's failure keeps the list). */
+    error: Error | null;
+    /** The query of @krizaka/query (`refetch`, `status`, the pages…). */
+    query: UseInfiniteQueryResult<InfiniteData<TPage, TParam>, Error>;
+};
+/**
+ * A paginated API as a list: `useInfiniteQuery` of @krizaka/query (a list: `meta: { list: true }`, so an error stays in
+ * the list), the pages flattened, the next page asked for by `onEndReached` (once at a time, only when there is one),
+ * pull to refresh — spread `listProps` on `<List>`.
+ */
+declare function useInfiniteList<TPage, TItem, TParam = unknown>({ queryKey, queryFn, initialPageParam, getNextPageParam, getItems, enabled, staleTime, }: InfiniteListOptions<TPage, TItem, TParam>): InfiniteListResult<TPage, TItem, TParam>;
+
+export { type InfiniteListOptions, type InfiniteListResult, List, type ListProps, useInfiniteList };

package/dist/native/list.js

@@ -0,0 +1,135 @@
+// src/native/list.tsx
+import { useInfiniteQuery } from "@krizaka/query";
+import { EmptyState, Skeleton, Spinner, useTheme } from "@krizaka/ui/native";
+import { FlashList } from "@shopify/flash-list";
+import * as React from "react";
+import { RefreshControl, StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SkeletonRow() {
+  return /* @__PURE__ */ jsxs(View, { style: styles.skeleton, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(Skeleton, { shape: "circle", width: 40, height: 40 }),
+    /* @__PURE__ */ jsxs(View, { style: styles.skeletonText, children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "35%" })
+    ] })
+  ] });
+}
+var isWords = (value) => typeof value === "object" && value !== null && !React.isValidElement(value) && "title" in value;
+function List({
+  data,
+  renderItem,
+  keyExtractor,
+  label,
+  separator = "full",
+  loading,
+  loadingRows = 6,
+  error,
+  empty,
+  refreshing = false,
+  onRefresh,
+  onEndReached,
+  endReachedThreshold = 0.5,
+  loadingMore,
+  loadingMoreLabel = "Loading more",
+  header,
+  footer,
+  extraData,
+  ref,
+  contentContainerStyle,
+  style
+}) {
+  const { theme } = useTheme();
+  const Separator = React.useMemo(
+    () => separator === "none" ? void 0 : function ListSeparator() {
+      return /* @__PURE__ */ jsx(View, { style: [styles.separator, { backgroundColor: theme.borderSubtle }, separator === "inset" && styles.inset] });
+    },
+    [separator, theme.borderSubtle]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsxs(View, { role: "group", style: [styles.fill, style], "aria-busy": true, accessibilityLabel: label, children: [
+      header,
+      Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        i > 0 && Separator ? /* @__PURE__ */ jsx(Separator, {}) : null,
+        /* @__PURE__ */ jsx(SkeletonRow, {})
+      ] }, i))
+    ] });
+  }
+  const state = error ? /* @__PURE__ */ jsx(View, { role: "alert", style: styles.state, children: error }) : isWords(empty) ? /* @__PURE__ */ jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, style: styles.state }) : empty ? /* @__PURE__ */ jsx(View, { style: styles.state, children: empty }) : null;
+  return /* @__PURE__ */ jsx(
+    FlashList,
+    {
+      ref,
+      accessibilityLabel: label,
+      focusable: true,
+      data: error ? [] : data,
+      renderItem: ({ item, index }) => renderItem(item, index),
+      keyExtractor,
+      extraData,
+      ItemSeparatorComponent: Separator,
+      ListHeaderComponent: header,
+      ListEmptyComponent: state,
+      ListFooterComponent: loadingMore || footer ? /* @__PURE__ */ jsxs(View, { children: [
+        loadingMore ? /* @__PURE__ */ jsx(View, { style: styles.more, children: /* @__PURE__ */ jsx(Spinner, { label: loadingMoreLabel }) }) : null,
+        footer
+      ] }) : null,
+      onEndReached,
+      onEndReachedThreshold: endReachedThreshold,
+      refreshControl: onRefresh ? /* @__PURE__ */ jsx(RefreshControl, { refreshing, onRefresh, tintColor: theme.accent, colors: [theme.accent], progressBackgroundColor: theme.surface1 }) : void 0,
+      contentContainerStyle,
+      style
+    }
+  );
+}
+function useInfiniteList({
+  queryKey,
+  queryFn,
+  initialPageParam,
+  getNextPageParam,
+  getItems,
+  enabled,
+  staleTime
+}) {
+  const query = useInfiniteQuery({
+    queryKey,
+    queryFn: ({ pageParam, signal }) => queryFn({ pageParam, signal }),
+    initialPageParam,
+    getNextPageParam: (last, pages2) => getNextPageParam(last, pages2) ?? void 0,
+    enabled,
+    staleTime,
+    meta: { list: true }
+  });
+  const [pulled, setPulled] = React.useState(false);
+  const { data: pages, hasNextPage, isFetchingNextPage, fetchNextPage, refetch, isPending, isError, isRefetching } = query;
+  const data = React.useMemo(() => (pages?.pages ?? []).flatMap((page) => getItems(page)), [pages]);
+  return {
+    listProps: {
+      data,
+      loading: isPending && enabled !== false,
+      refreshing: pulled && isRefetching,
+      onRefresh: () => {
+        setPulled(true);
+        void refetch().finally(() => setPulled(false));
+      },
+      onEndReached: () => {
+        if (hasNextPage && !isFetchingNextPage && !isError) void fetchNextPage();
+      },
+      loadingMore: isFetchingNextPage
+    },
+    error: isError && !pages ? query.error : null,
+    query
+  };
+}
+var styles = StyleSheet.create({
+  fill: { flex: 1 },
+  separator: { height: StyleSheet.hairlineWidth },
+  inset: { marginLeft: 68 },
+  skeleton: { flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
+  skeletonText: { flex: 1, gap: 8 },
+  state: { paddingHorizontal: 16, paddingVertical: 32 },
+  more: { paddingVertical: 20, alignItems: "center" }
+});
+export {
+  List,
+  useInfiniteList
+};
+//# sourceMappingURL=list.js.map

package/dist/native/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/native/list.tsx"],"sourcesContent":["// @krizaka/ui/native/list — its own entry, because it imports FlashList v2 (@shopify/flash-list) and @krizaka/query:\n// optional peers, installed only by the apps that list. The theme and the states come from @krizaka/ui/native (one\n// theme context); the server state comes from @krizaka/query (one QueryClient context — never @tanstack/* here).\nimport { type InfiniteData, useInfiniteQuery, type UseInfiniteQueryResult } from \"@krizaka/query\";\nimport { EmptyState, Skeleton, Spinner, useTheme } from \"@krizaka/ui/native\";\nimport { FlashList, type FlashListRef } from \"@shopify/flash-list\";\nimport * as React from \"react\";\nimport { RefreshControl, type StyleProp, StyleSheet, View, type ViewStyle } from \"react-native\";\n\nexport type ListProps<T> = {\n  /** The items (stable: a query's data, state). */\n  data: readonly T[];\n  /** Draws one item. */\n  renderItem: (item: T, index: number) => React.ReactElement | null;\n  /** A stable key per item (an id): FlashList recycles the views by it. */\n  keyExtractor: (item: T, index: number) => string;\n  /** The accessible name of the list (\"Notifications\"), passed translated. */\n  label: string;\n  /** A hairline between items: `full` (default), `inset` (aligned with the text after an avatar), `none`. */\n  separator?: \"full\" | \"inset\" | \"none\";\n  /** The first page is loading: skeleton rows (`loadingRows` of them) in place of the items. */\n  loading?: boolean;\n  /** How many skeleton rows while loading. Default 6. */\n  loadingRows?: number;\n  /** A failure, shown in place of the items (an `ErrorState` with a retry). */\n  error?: React.ReactNode;\n  /** Shown when there is no item (an `EmptyState`, or its words: `{ title, description, action }`). */\n  empty?: React.ReactNode | { title: string; description?: string; action?: React.ReactNode };\n  /** The list is reloading after a pull: the system's spinner at the top. */\n  refreshing?: boolean;\n  /** Pull to refresh: called when the person pulls the list down. */\n  onRefresh?: () => void;\n  /** Called when the end comes near: load the next page. */\n  onEndReached?: () => void;\n  /** How far from the end `onEndReached` fires, in screens. Default 0.5. */\n  endReachedThreshold?: number;\n  /** The next page is loading: a spinner under the last item, named by `loadingMoreLabel`. */\n  loadingMore?: boolean;\n  /** The name of that spinner (\"Loading more\"), passed translated. */\n  loadingMoreLabel?: string;\n  /** Above the first item (a title, filters): scrolls with the list. */\n  header?: React.ReactElement;\n  /** Under the last item. */\n  footer?: React.ReactElement;\n  /** Extra data the items depend on (a selection): a change re-renders the visible items. */\n  extraData?: unknown;\n  /** The FlashList, for `scrollToIndex` / `scrollToOffset`. */\n  ref?: React.Ref<FlashListRef<T>>;\n  /** Styles of the list's content (padding). */\n  contentContainerStyle?: StyleProp<ViewStyle>;\n  /** Styles merged last, on the list. */\n  style?: StyleProp<ViewStyle>;\n};\n\nfunction SkeletonRow() {\n  return (\n    <View style={styles.skeleton} aria-hidden>\n      <Skeleton shape=\"circle\" width={40} height={40} />\n      <View style={styles.skeletonText}>\n        <Skeleton width=\"60%\" />\n        <Skeleton width=\"35%\" />\n      </View>\n    </View>\n  );\n}\n\nconst isWords = (value: unknown): value is { title: string; description?: string; action?: React.ReactNode } =>\n  typeof value === \"object\" && value !== null && !React.isValidElement(value) && \"title\" in value;\n\n/**\n * A long list on FlashList v2 (recycled views, 60 fps): separators, skeleton rows while the first page loads, an empty\n * or error state in place of the items, pull to refresh tinted with the theme, the next page asked for near the end and\n * a spinner under the last item. With `useInfiniteList`, a paginated API is one hook and one component.\n */\nexport function List<T>({\n  data,\n  renderItem,\n  keyExtractor,\n  label,\n  separator = \"full\",\n  loading,\n  loadingRows = 6,\n  error,\n  empty,\n  refreshing = false,\n  onRefresh,\n  onEndReached,\n  endReachedThreshold = 0.5,\n  loadingMore,\n  loadingMoreLabel = \"Loading more\",\n  header,\n  footer,\n  extraData,\n  ref,\n  contentContainerStyle,\n  style,\n}: ListProps<T>) {\n  const { theme } = useTheme();\n  const Separator = React.useMemo(\n    () =>\n      separator === \"none\"\n        ? undefined\n        : function ListSeparator() {\n            return <View style={[styles.separator, { backgroundColor: theme.borderSubtle }, separator === \"inset\" && styles.inset]} />;\n          },\n    [separator, theme.borderSubtle],\n  );\n\n  if (loading) {\n    return (\n      <View role=\"group\" style={[styles.fill, style]} aria-busy accessibilityLabel={label}>\n        {header}\n        {Array.from({ length: loadingRows }, (_, i) => (\n          <React.Fragment key={i}>\n            {i > 0 && Separator ? <Separator /> : null}\n            <SkeletonRow />\n          </React.Fragment>\n        ))}\n      </View>\n    );\n  }\n\n  const state = error ? (\n    <View role=\"alert\" style={styles.state}>\n      {error}\n    </View>\n  ) : isWords(empty) ? (\n    <EmptyState title={empty.title} description={empty.description} action={empty.action} style={styles.state} />\n  ) : empty ? (\n    <View style={styles.state}>{empty}</View>\n  ) : null;\n\n  return (\n    <FlashList\n      ref={ref}\n      accessibilityLabel={label}\n      // Reachable from a keyboard (a hardware keyboard, the web): a scrolling area takes the focus to be scrolled.\n      focusable\n      data={error ? [] : data}\n      renderItem={({ item, index }) => renderItem(item, index)}\n      keyExtractor={keyExtractor}\n      extraData={extraData}\n      ItemSeparatorComponent={Separator}\n      ListHeaderComponent={header}\n      ListEmptyComponent={state}\n      ListFooterComponent={\n        loadingMore || footer ? (\n          <View>\n            {loadingMore ? (\n              <View style={styles.more}>\n                <Spinner label={loadingMoreLabel} />\n              </View>\n            ) : null}\n            {footer}\n          </View>\n        ) : null\n      }\n      onEndReached={onEndReached}\n      onEndReachedThreshold={endReachedThreshold}\n      refreshControl={\n        onRefresh ? (\n          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={theme.accent} colors={[theme.accent]} progressBackgroundColor={theme.surface1} />\n        ) : undefined\n      }\n      contentContainerStyle={contentContainerStyle as never}\n      style={style}\n    />\n  );\n}\n\nexport type InfiniteListOptions<TPage, TItem, TParam> = {\n  /** The query key (a `defineKeys` key): one cache entry for every page. */\n  queryKey: readonly unknown[];\n  /** Fetches one page (`krizakaFetch`), from its page parameter (a cursor, a page number). */\n  queryFn: (context: { pageParam: TParam; signal: AbortSignal }) => Promise<TPage>;\n  /** The parameter of the first page (`null` for a cursor, `1` for numbers). */\n  initialPageParam: TParam;\n  /** The parameter of the page after `lastPage`, or `undefined` / `null` when there is none. */\n  getNextPageParam: (lastPage: TPage, pages: TPage[]) => TParam | undefined | null;\n  /** The items of a page (`(page) => page.items`). */\n  getItems: (page: TPage) => readonly TItem[];\n  /** `false` to wait (a missing id). Default `true`. */\n  enabled?: boolean;\n  /** How long a page stays fresh, in ms (the client's default otherwise). */\n  staleTime?: number;\n};\n\n/** What `useInfiniteList` gives: the props of `List` to spread, and the query itself. */\nexport type InfiniteListResult<TPage, TItem, TParam = unknown> = {\n  /** `{ data, loading, refreshing, onRefresh, onEndReached, loadingMore }` — spread on `<List>`. */\n  listProps: Pick<ListProps<TItem>, \"data\" | \"loading\" | \"refreshing\" | \"onRefresh\" | \"onEndReached\" | \"loadingMore\">;\n  /** The failure of the first page, if any: render an `ErrorState` in `error` (a later page's failure keeps the list). */\n  error: Error | null;\n  /** The query of @krizaka/query (`refetch`, `status`, the pages…). */\n  query: UseInfiniteQueryResult<InfiniteData<TPage, TParam>, Error>;\n};\n\n/**\n * A paginated API as a list: `useInfiniteQuery` of @krizaka/query (a list: `meta: { list: true }`, so an error stays in\n * the list), the pages flattened, the next page asked for by `onEndReached` (once at a time, only when there is one),\n * pull to refresh — spread `listProps` on `<List>`.\n */\nexport function useInfiniteList<TPage, TItem, TParam = unknown>({\n  queryKey,\n  queryFn,\n  initialPageParam,\n  getNextPageParam,\n  getItems,\n  enabled,\n  staleTime,\n}: InfiniteListOptions<TPage, TItem, TParam>): InfiniteListResult<TPage, TItem, TParam> {\n  const query = useInfiniteQuery<TPage, Error, InfiniteData<TPage, TParam>, readonly unknown[], TParam>({\n    queryKey,\n    queryFn: ({ pageParam, signal }) => queryFn({ pageParam: pageParam as TParam, signal }),\n    initialPageParam,\n    getNextPageParam: (last, pages) => getNextPageParam(last, pages) ?? undefined,\n    enabled,\n    staleTime,\n    meta: { list: true },\n  });\n  const [pulled, setPulled] = React.useState(false);\n  const { data: pages, hasNextPage, isFetchingNextPage, fetchNextPage, refetch, isPending, isError, isRefetching } = query;\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- `getItems` is a projection; the pages decide\n  const data = React.useMemo(() => (pages?.pages ?? []).flatMap((page) => getItems(page)), [pages]);\n  return {\n    listProps: {\n      data,\n      loading: isPending && enabled !== false,\n      refreshing: pulled && isRefetching,\n      onRefresh: () => {\n        setPulled(true);\n        void refetch().finally(() => setPulled(false));\n      },\n      onEndReached: () => {\n        if (hasNextPage && !isFetchingNextPage && !isError) void fetchNextPage();\n      },\n      loadingMore: isFetchingNextPage,\n    },\n    error: isError && !pages ? query.error : null,\n    query,\n  };\n}\n\nconst styles = StyleSheet.create({\n  fill: { flex: 1 },\n  separator: { height: StyleSheet.hairlineWidth },\n  inset: { marginLeft: 68 },\n  skeleton: { flexDirection: \"row\", alignItems: \"center\", gap: 12, paddingHorizontal: 16, paddingVertical: 14 },\n  skeletonText: { flex: 1, gap: 8 },\n  state: { paddingHorizontal: 16, paddingVertical: 32 },\n  more: { paddingVertical: 20, alignItems: \"center\" },\n});\n"],"mappings":"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","names":["pages"]}

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";