@keepkit/ui 0.5.0 → 0.6.0

package/dist/index.js

@@ -11,27 +11,49 @@ import {
 } from "@keepkit/core/react";
 import {
   cloneElement,
-  createContext,
   isValidElement,
   useCallback,
-  useContext,
-  useEffect,
-  useMemo,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
   useRef,
-  useState
+  useState as useState2
 } from "react";
-import { KeepProvider, useKeepContext as useKeepContext2, useKeepItem as useKeepItem2, useKeepList as useKeepList2, useKeepShortcut } from "@keepkit/core/react";
-import {
-  createBrowserStorageAdapter,
-  createStorageAdapter,
-  FallbackStorageAdapter,
-  IndexedDBAdapter,
-  IndexedDBSyncQueueAdapter,
-  LocalStorageAdapter,
-  LocalStorageSyncQueueAdapter,
-  SyncStorageAdapter
-} from "@keepkit/core/storage";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/KeepItemCheckbox.tsx
+import { jsx } from "react/jsx-runtime";
+function KeepItemCheckbox({
+  item,
+  checked = false,
+  label,
+  onCheckedChange,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const itemLabel = getItemLabel(item) ?? item.id;
+  const accessibleLabel = ariaLabel ?? (typeof label === "string" ? label : itemLabel);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      type: "checkbox",
+      checked,
+      "aria-label": accessibleLabel,
+      onChange: (event) => onCheckedChange?.(event.currentTarget.checked)
+    }
+  );
+}
+function getItemLabel(item) {
+  if (typeof item.meta !== "object" || item.meta === null || !("title" in item.meta)) return void 0;
+  const title = item.meta.title;
+  return typeof title === "string" && title.trim() ? title.trim() : void 0;
+}
+
+// src/query-controls.tsx
+import { useEffect, useState } from "react";
+
+// src/ui-context.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
   save: "Save",
   saved: "Saved",
@@ -51,6 +73,10 @@ var DEFAULT_LABELS = {
   sort: "Sort saved items",
   newest: "Newest first",
   oldest: "Oldest first",
+  savedNewest: "Saved newest first",
+  savedOldest: "Saved oldest first",
+  updatedNewest: "Updated newest first",
+  updatedOldest: "Updated oldest first",
   previousPage: "Previous page",
   nextPage: "Next page",
   pagination: "Pagination",
@@ -70,8 +96,149 @@ function KeepUiProvider({ labels, locale, labelResolver, children }) {
     const resolved = { ...DEFAULT_LABELS, ...labels };
     return { locale, labels: resolved, labelResolver };
   }, [labelResolver, labels, locale]);
-  return /* @__PURE__ */ jsx(KeepUiLabelsContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(KeepUiLabelsContext.Provider, { value, children });
+}
+function useKeepUiLabels() {
+  return useContext(KeepUiLabelsContext);
+}
+function useUiLabel(key, override) {
+  const context = useKeepUiLabels();
+  return override ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
+}
+
+// src/query-controls.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+function KeepSearchInput({
+  value: controlledValue,
+  defaultValue = "",
+  debounceMs = 300,
+  onValueChange,
+  "aria-label": ariaLabel,
+  placeholder,
+  ...props
+}) {
+  const label = useUiLabel("search");
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  useEffect(() => {
+    if (!onValueChange) return;
+    if (debounceMs <= 0) {
+      onValueChange(value);
+      return;
+    }
+    const timer = window.setTimeout(() => onValueChange(value), debounceMs);
+    return () => window.clearTimeout(timer);
+  }, [debounceMs, onValueChange, value]);
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ...props,
+      type: "search",
+      value,
+      "aria-label": ariaLabel ?? label,
+      placeholder: placeholder ?? label,
+      onChange: (event) => {
+        const nextValue = event.currentTarget.value;
+        if (controlledValue === void 0) setUncontrolledValue(nextValue);
+      }
+    }
+  );
+}
+function KeepSortSelect({
+  value: controlledValue,
+  defaultValue = "updatedAt:desc",
+  onValueChange,
+  "aria-label": ariaLabel,
+  children,
+  ...props
+}) {
+  const label = useUiLabel("sort");
+  const updatedNewestLabel = useUiLabel("updatedNewest");
+  const updatedOldestLabel = useUiLabel("updatedOldest");
+  const savedNewestLabel = useUiLabel("savedNewest");
+  const savedOldestLabel = useUiLabel("savedOldest");
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  const options = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3("option", { value: "updatedAt:desc", children: updatedNewestLabel }),
+    /* @__PURE__ */ jsx3("option", { value: "updatedAt:asc", children: updatedOldestLabel }),
+    /* @__PURE__ */ jsx3("option", { value: "savedAt:desc", children: savedNewestLabel }),
+    /* @__PURE__ */ jsx3("option", { value: "savedAt:asc", children: savedOldestLabel })
+  ] });
+  return /* @__PURE__ */ jsx3(
+    "select",
+    {
+      ...props,
+      value,
+      "aria-label": ariaLabel ?? label,
+      onChange: (event) => {
+        const nextValue = event.currentTarget.value;
+        if (controlledValue === void 0) setUncontrolledValue(nextValue);
+        const [by, direction] = nextValue.split(":");
+        onValueChange?.(nextValue, { by, direction });
+      },
+      children: options
+    }
+  );
+}
+function KeepPagination({
+  totalCount,
+  pageSize,
+  page = 1,
+  maxPageButtons = 7,
+  onPageChange,
+  render,
+  ...props
+}) {
+  const previousPageLabel = useUiLabel("previousPage");
+  const nextPageLabel = useUiLabel("nextPage");
+  const pageLabel = useUiLabel("page");
+  const paginationLabel = useUiLabel("pagination");
+  const pageCount = Math.max(1, Math.ceil(totalCount / Math.max(1, pageSize)));
+  const currentPage = Math.min(Math.max(1, page), pageCount);
+  const goToPage = (nextPage) => {
+    const next = Math.min(Math.max(1, nextPage), pageCount);
+    onPageChange?.(next, (next - 1) * pageSize);
+  };
+  const navProps = { ...props, "aria-label": props["aria-label"] ?? paginationLabel };
+  if (render) return /* @__PURE__ */ jsx3("nav", { ...navProps, children: render({ page: currentPage, pageCount, goToPage }) });
+  const visiblePages = getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons));
+  return /* @__PURE__ */ jsxs("nav", { ...navProps, children: [
+    /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage <= 1, children: previousPageLabel }),
+    visiblePages.map((nextPage) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        "aria-current": nextPage === currentPage ? "page" : void 0,
+        "aria-label": `${pageLabel} ${nextPage}`,
+        onClick: () => goToPage(nextPage),
+        children: nextPage
+      },
+      nextPage
+    )),
+    /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage >= pageCount, children: nextPageLabel })
+  ] });
 }
+function getVisiblePages(currentPage, pageCount, maxPageButtons) {
+  if (pageCount <= maxPageButtons) return Array.from({ length: pageCount }, (_, index) => index + 1);
+  const half = Math.floor(maxPageButtons / 2);
+  const start = Math.min(Math.max(1, currentPage - half), pageCount - maxPageButtons + 1);
+  return Array.from({ length: maxPageButtons }, (_, index) => start + index);
+}
+
+// src/index.tsx
+import { KeepProvider, useKeepContext as useKeepContext2, useKeepItem as useKeepItem2, useKeepList as useKeepList2, useKeepShortcut } from "@keepkit/core/react";
+import {
+  createBrowserStorageAdapter,
+  createStorageAdapter,
+  FallbackStorageAdapter,
+  IndexedDBAdapter,
+  IndexedDBSyncQueueAdapter,
+  LocalStorageAdapter,
+  LocalStorageSyncQueueAdapter,
+  SyncStorageAdapter
+} from "@keepkit/core/storage";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -79,20 +246,16 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsx(CoreKeepProvider, { ...providerProps, children }) });
-}
-function useKeepUiLabels() {
-  return useContext(KeepUiLabelsContext);
-}
-function useUiLabel(key, override) {
-  const context = useKeepUiLabels();
-  return override ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
+  return /* @__PURE__ */ jsx4(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs2(CoreKeepProvider, { ...providerProps, children: [
+    children,
+    /* @__PURE__ */ jsx4(KeepAnnouncements, {})
+  ] }) });
 }
 function createKeepKit(options = {}) {
   const { labels, locale, labelResolver, getTitle, getImageProps, ...coreOptions } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx(
+    Provider: (props) => /* @__PURE__ */ jsx4(
       KeepKitProvider,
       {
         ...coreOptions,
@@ -102,8 +265,8 @@ function createKeepKit(options = {}) {
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx(KeepButton, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx(
+    Button: (props) => /* @__PURE__ */ jsx4(KeepButton, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx4(
       KeepCollection,
       {
         ...props,
@@ -143,12 +306,12 @@ function KeepButton({ labels, ...props }) {
       savedAriaLabel: labels?.savedAriaLabel ?? props.savedAriaLabel,
       unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
     };
-    if (!customStateLabel) return /* @__PURE__ */ jsx(CoreKeepButton, { ...sharedProps2 });
+    if (!customStateLabel) return /* @__PURE__ */ jsx4(CoreKeepButton, { ...sharedProps2 });
     const statefulProps2 = {
       ...sharedProps2,
-      children: (state) => /* @__PURE__ */ jsx(Fragment, { children: getStateContent(state) })
+      children: (state) => /* @__PURE__ */ jsx4(Fragment2, { children: getStateContent(state) })
     };
-    return /* @__PURE__ */ jsx(CoreKeepButton, { ...statefulProps2 });
+    return /* @__PURE__ */ jsx4(CoreKeepButton, { ...statefulProps2 });
   }
   const sharedProps = {
     ...props,
@@ -158,9 +321,9 @@ function KeepButton({ labels, ...props }) {
     savedAriaLabel: labels?.savedAriaLabel ?? props.savedAriaLabel,
     unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
   };
-  if (!customStateLabel) return /* @__PURE__ */ jsx(CoreKeepButton, { ...sharedProps });
+  if (!customStateLabel) return /* @__PURE__ */ jsx4(CoreKeepButton, { ...sharedProps });
   const statefulProps = { ...sharedProps, children: (state) => getStateContent(state) };
-  return /* @__PURE__ */ jsx(CoreKeepButton, { ...statefulProps });
+  return /* @__PURE__ */ jsx4(CoreKeepButton, { ...statefulProps });
 }
 function KeepItemCard({
   item,
@@ -202,10 +365,10 @@ function KeepItemCard({
       onRemoveError?.(error);
     }
   }
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
-    /* @__PURE__ */ jsx("h3", { children: resolvedTitle }),
-    showSaveButton ? /* @__PURE__ */ jsx(
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx4(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx4("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
+    /* @__PURE__ */ jsx4("h3", { children: resolvedTitle }),
+    showSaveButton ? /* @__PURE__ */ jsx4(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -213,7 +376,7 @@ function KeepItemCard({
         getAriaLabel: (buttonState) => `${buttonState.isSaved ? removeActionLabel : saveActionLabel} ${String(resolvedTitle)}`
       }
     ) : null,
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
+    /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
   ] });
   return renderRoot(
     asChild,
@@ -263,9 +426,9 @@ function getListBody(state, options) {
   if (typeof options.children === "function") return options.children(state);
   if (options.children !== void 0 && !isValidElement(options.children)) return options.children;
   const items = state.items.map(
-    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
+    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
   );
-  return /* @__PURE__ */ jsx("ul", { children: items });
+  return /* @__PURE__ */ jsx4("ul", { children: items });
 }
 function KeepCollection({
   query = {},
@@ -287,12 +450,12 @@ function KeepCollection({
     bulkActions: false,
     ...features
   };
-  const [searchValue, setSearchValue] = useState(query.search?.query ?? "");
-  const [sort, setSort] = useState(query.sort ?? { by: "updatedAt", direction: "desc" });
-  const [tag, setTag] = useState(query.tags?.[0]);
-  const [page, setPage] = useState(query.pagination?.page ?? 1);
+  const [searchValue, setSearchValue] = useState2(query.search?.query ?? "");
+  const [sort, setSort] = useState2(query.sort ?? { by: "updatedAt", direction: "desc" });
+  const [tag, setTag] = useState2(query.tags?.[0]);
+  const [page, setPage] = useState2(query.pagination?.page ?? 1);
   const resolvedPageSize = query.pagination?.pageSize ?? pageSize;
-  const resolvedQuery = useMemo(
+  const resolvedQuery = useMemo2(
     () => ({
       ...query,
       search: enabled.search ? { ...query.search, query: searchValue } : query.search,
@@ -303,24 +466,24 @@ function KeepCollection({
     [enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort, tag]
   );
   const list = useKeepList(resolvedQuery);
-  useEffect(() => {
+  useEffect2(() => {
     if (searchValue !== void 0 || sort.by !== void 0 || sort.direction !== void 0 || tag !== void 0) {
       setPage(1);
     }
   }, [searchValue, sort.by, sort.direction, tag]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "section",
     {
       ...rootProps,
       className,
       "aria-busy": list.isLoading || list.isMutating || rootProps["aria-busy"],
       children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          enabled.search ? /* @__PURE__ */ jsx(KeepSearchInput, { value: searchValue, onValueChange: setSearchValue }) : null,
-          enabled.sort ? /* @__PURE__ */ jsx(KeepSortSelect, { value: sortToValue(sort), onValueChange: (_value, nextSort) => setSort(nextSort) }) : null,
-          enabled.tagFilter ? /* @__PURE__ */ jsx(KeepTagFilter, { query, value: tag, onValueChange: setTag }) : null
+        /* @__PURE__ */ jsxs2("div", { children: [
+          enabled.search ? /* @__PURE__ */ jsx4(KeepSearchInput, { value: searchValue, onValueChange: setSearchValue }) : null,
+          enabled.sort ? /* @__PURE__ */ jsx4(KeepSortSelect, { value: sortToValue(sort), onValueChange: (_value, nextSort) => setSort(nextSort) }) : null,
+          enabled.tagFilter ? /* @__PURE__ */ jsx4(KeepTagFilter, { query, value: tag, onValueChange: setTag }) : null
         ] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx4(
           KeepList,
           {
             query: resolvedQuery,
@@ -331,7 +494,7 @@ function KeepCollection({
             error
           }
         ),
-        enabled.pagination ? /* @__PURE__ */ jsx(
+        enabled.pagination ? /* @__PURE__ */ jsx4(
           KeepPagination,
           {
             totalCount: list.totalCount,
@@ -340,8 +503,7 @@ function KeepCollection({
             onPageChange: (_nextPage, nextPageOffset) => setPage(Math.floor(nextPageOffset / resolvedPageSize) + 1)
           }
         ) : null,
-        enabled.bulkActions ? /* @__PURE__ */ jsx(KeepBulkActions, { query: resolvedQuery }) : null,
-        /* @__PURE__ */ jsx(KeepAnnouncements, {})
+        enabled.bulkActions ? /* @__PURE__ */ jsx4(KeepBulkActions, { query: resolvedQuery }) : null
       ]
     }
   );
@@ -366,7 +528,7 @@ function KeepTagFilter({
   const defaultAllLabel = allLabel ?? uiAllLabel;
   const defaultAriaLabel = ariaLabel ?? uiAriaLabel;
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
   const list = useKeepList({ ...query, tags: value ? [...query?.tags ?? [], value] : query?.tags });
   const select = useCallback(
@@ -377,16 +539,16 @@ function KeepTagFilter({
     },
     [controlledValue, onChange, onValueChange]
   );
-  const state = useMemo(
+  const state = useMemo2(
     () => ({ tags: list.tags, tagCounts: list.tagCounts, value, select }),
     [list.tagCounts, list.tags, select, value]
   );
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs("fieldset", { children: [
-    /* @__PURE__ */ jsx("legend", { children: defaultAriaLabel }),
-    /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": value === void 0, onClick: () => select(), children: defaultAllLabel }),
-    list.tags.map((tag) => /* @__PURE__ */ jsxs("button", { type: "button", "aria-pressed": value === tag, onClick: () => select(tag), children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs2("fieldset", { children: [
+    /* @__PURE__ */ jsx4("legend", { children: defaultAriaLabel }),
+    /* @__PURE__ */ jsx4("button", { type: "button", "aria-pressed": value === void 0, onClick: () => select(), children: defaultAllLabel }),
+    list.tags.map((tag) => /* @__PURE__ */ jsxs2("button", { type: "button", "aria-pressed": value === tag, onClick: () => select(tag), children: [
       renderTag ? renderTag(tag, list.tagCounts[tag] ?? 0, value === tag) : tag,
-      /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs2("span", { children: [
         " (",
         list.tagCounts[tag] ?? 0,
         ")"
@@ -418,8 +580,8 @@ function KeepNoteEditor({
   const defaultSaveLabel = useUiLabel("saveNote");
   const itemState = useKeepItem(item);
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const [note, setNote] = useState(item.note ?? "");
-  useEffect(() => setNote(itemState.item?.note ?? item.note ?? ""), [item.note, itemState.item?.note]);
+  const [note, setNote] = useState2(item.note ?? "");
+  useEffect2(() => setNote(itemState.item?.note ?? item.note ?? ""), [item.note, itemState.item?.note]);
   const save = useCallback(async () => {
     const nextNote = note.trim() || void 0;
     try {
@@ -439,10 +601,10 @@ function KeepNoteEditor({
     error: itemState.error,
     save
   };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("label", { children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("label", { children: [
       label ?? defaultLabel,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx4(
         "textarea",
         {
           value: note,
@@ -452,14 +614,14 @@ function KeepNoteEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: saveLabel ?? defaultSaveLabel })
+    /* @__PURE__ */ jsx4("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: saveLabel ?? defaultSaveLabel })
   ] });
   const handleSubmit = (event) => {
     event.preventDefault();
     void save().catch(() => void 0);
   };
   if (!asChild) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx4(
       "form",
       {
         ...formProps,
@@ -478,100 +640,6 @@ function KeepNoteEditor({
     "KeepNoteEditor"
   );
 }
-function KeepSearchInput({
-  value: controlledValue,
-  defaultValue = "",
-  onValueChange,
-  "aria-label": ariaLabel,
-  placeholder,
-  ...props
-}) {
-  const label = useUiLabel("search");
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ...props,
-      type: "search",
-      value,
-      "aria-label": ariaLabel ?? label,
-      placeholder: placeholder ?? label,
-      onChange: (event) => {
-        const nextValue = event.currentTarget.value;
-        if (controlledValue === void 0) setUncontrolledValue(nextValue);
-        onValueChange?.(nextValue);
-      }
-    }
-  );
-}
-function KeepSortSelect({
-  value: controlledValue,
-  defaultValue = "updatedAt:desc",
-  onValueChange,
-  "aria-label": ariaLabel,
-  children,
-  ...props
-}) {
-  const label = useUiLabel("sort");
-  const newestLabel = useUiLabel("newest");
-  const savedLabel = useUiLabel("saved");
-  const oldestLabel = useUiLabel("oldest");
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  const options = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("option", { value: "updatedAt:desc", children: newestLabel }),
-    /* @__PURE__ */ jsx("option", { value: "savedAt:desc", children: savedLabel }),
-    /* @__PURE__ */ jsx("option", { value: "updatedAt:asc", children: oldestLabel }),
-    /* @__PURE__ */ jsx("option", { value: "savedAt:asc", children: oldestLabel })
-  ] });
-  return /* @__PURE__ */ jsx(
-    "select",
-    {
-      ...props,
-      value,
-      "aria-label": ariaLabel ?? label,
-      onChange: (event) => {
-        const nextValue = event.currentTarget.value;
-        if (controlledValue === void 0) setUncontrolledValue(nextValue);
-        const [by, direction] = nextValue.split(":");
-        onValueChange?.(nextValue, { by, direction });
-      },
-      children: options
-    }
-  );
-}
-function KeepPagination({
-  totalCount,
-  pageSize,
-  page = 1,
-  onPageChange,
-  render,
-  ...props
-}) {
-  const previousPageLabel = useUiLabel("previousPage");
-  const nextPageLabel = useUiLabel("nextPage");
-  const pageLabel = useUiLabel("page");
-  const paginationLabel = useUiLabel("pagination");
-  const pageCount = Math.max(1, Math.ceil(totalCount / Math.max(1, pageSize)));
-  const currentPage = Math.min(Math.max(1, page), pageCount);
-  const goToPage = (nextPage) => {
-    const next = Math.min(Math.max(1, nextPage), pageCount);
-    onPageChange?.(next, (next - 1) * pageSize);
-  };
-  if (render) return /* @__PURE__ */ jsx("nav", { ...props, children: render({ page: currentPage, pageCount, goToPage }) });
-  return /* @__PURE__ */ jsxs("nav", { ...props, "aria-label": props["aria-label"] ?? paginationLabel, children: [
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage <= 1, children: previousPageLabel }),
-    /* @__PURE__ */ jsxs("span", { "aria-current": "page", children: [
-      pageLabel,
-      " ",
-      currentPage,
-      " / ",
-      pageCount
-    ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage >= pageCount, children: nextPageLabel })
-  ] });
-}
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -584,9 +652,9 @@ function KeepTagEditor({
   const removeLabel = useUiLabel("remove");
   const applyTagsLabel = useUiLabel("applyTags");
   const itemState = useKeepItem(item);
-  const [tags, setTags] = useState(item.tags ?? []);
-  const [input, setInput] = useState("");
-  useEffect(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const [tags, setTags] = useState2(item.tags ?? []);
+  const [input, setInput] = useState2("");
+  useEffect2(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
   const save = useCallback(async () => {
     const nextTags = normalizeUiTags(tags);
     try {
@@ -603,10 +671,10 @@ function KeepTagEditor({
     setTags(next);
     setInput("");
   };
-  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("label", { children: [
+  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("label", { children: [
       tagsLabel,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           value: input,
@@ -616,19 +684,22 @@ function KeepTagEditor({
             if (event.key === "Enter") {
               event.preventDefault();
               if (input.trim()) addTag(input);
+            } else if (event.key === "Backspace" && input.length === 0 && tags.length > 0) {
+              event.preventDefault();
+              setTags(tags.slice(0, -1));
             }
           }
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs("li", { children: [
+    availableTags.length > 0 ? /* @__PURE__ */ jsx4("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx4("option", { value: tag }, tag)) }) : null,
+    /* @__PURE__ */ jsx4("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs2("li", { children: [
       tag,
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
+      /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
+    /* @__PURE__ */ jsx4("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
   ] });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     "form",
     {
       ...props,
@@ -648,6 +719,8 @@ function KeepBulkActions({
   onSelectedIdsChange,
   renderItem,
   onCompleted,
+  render,
+  children,
   ...props
 }) {
   const selectItemsLabel = useUiLabel("selectItems");
@@ -656,10 +729,10 @@ function KeepBulkActions({
   const tagsLabel = useUiLabel("tagsToApply");
   const applyTagsLabel = useUiLabel("applyTags");
   const list = useKeepList(query);
-  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState(defaultSelectedIds);
+  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState2(defaultSelectedIds);
   const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
   const selected = new Set(selectedIds);
-  const [tagsInput, setTagsInput] = useState("");
+  const [tagsInput, setTagsInput] = useState2("");
   const setSelectedIds = (ids) => {
     if (controlledSelectedIds === void 0) setUncontrolledSelectedIds(ids);
     onSelectedIdsChange?.(ids);
@@ -678,27 +751,56 @@ function KeepBulkActions({
     onCompleted?.("tags", selectedIds);
     setSelectedIds([]);
   };
-  return /* @__PURE__ */ jsxs("section", { ...props, "aria-busy": list.isMutating || props["aria-busy"], children: [
-    /* @__PURE__ */ jsxs("fieldset", { children: [
-      /* @__PURE__ */ jsx("legend", { children: selectItemsLabel }),
-      /* @__PURE__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: allSelected, onChange: toggleAll }),
+  const state = {
+    items: list.items,
+    selectedIds,
+    selectedCount: selectedIds.length,
+    allSelected,
+    tagsInput,
+    setTagsInput,
+    toggle,
+    toggleAll,
+    remove,
+    updateTags,
+    isMutating: list.isMutating
+  };
+  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("fieldset", { children: [
+      /* @__PURE__ */ jsx4("legend", { children: selectItemsLabel }),
+      /* @__PURE__ */ jsxs2("label", { children: [
+        /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": selectItemsLabel }),
         selectedIds.length,
         " ",
         selectedCountLabel
       ] }),
-      list.items.map((item) => /* @__PURE__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: selected.has(item.id), onChange: () => toggle(item.id) }),
+      list.items.map((item) => /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx4(
+          KeepItemCheckbox,
+          {
+            item,
+            checked: selected.has(item.id),
+            onCheckedChange: () => toggle(item.id)
+          }
+        ),
         renderItem ? renderItem(item, selected.has(item.id)) : getMetaTitle(item.meta) ?? item.id
       ] }, item.id))
     ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void remove(), disabled: selectedIds.length === 0 || list.isMutating, children: deleteSelectedLabel }),
-    /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void remove(), disabled: selectedIds.length === 0 || list.isMutating, children: deleteSelectedLabel }),
+    /* @__PURE__ */ jsxs2("label", { children: [
       tagsLabel,
-      /* @__PURE__ */ jsx("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
+      /* @__PURE__ */ jsx4("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
     ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void updateTags(), disabled: selectedIds.length === 0 || list.isMutating, children: applyTagsLabel })
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: () => void updateTags(),
+        disabled: selectedIds.length === 0 || list.isMutating,
+        children: applyTagsLabel
+      }
+    )
   ] });
+  return /* @__PURE__ */ jsx4("section", { ...props, "aria-busy": list.isMutating || props["aria-busy"], children: body });
 }
 function KeepEmptyState({
   title,
@@ -711,9 +813,9 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useUiLabel("noItems").replace(/\.$/, "");
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+  const body = contentChildren ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("h2", { children: title ?? defaultTitle }),
+    description ? /* @__PURE__ */ jsx4("p", { children: description }) : null,
     action
   ] });
   return renderRoot(asChild, children, { ...rootProps, className }, body, "KeepEmptyState");
@@ -752,9 +854,9 @@ function KeepAnnouncements({ messages, ...props }) {
   const savedMessage = useUiLabel("savedMessage", messages?.save);
   const removedMessage = useUiLabel("removedMessage", messages?.remove);
   const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
-  const [message, setMessage] = useState("");
+  const [message, setMessage] = useState2("");
   const lastChangeRef = useRef(void 0);
-  useEffect(() => {
+  useEffect2(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -762,7 +864,7 @@ function KeepAnnouncements({ messages, ...props }) {
     else if (change.action === "remove" || change.action === "removeBatch") setMessage(removedMessage);
     else if (change.action === "updateNote") setMessage(noteSavedMessage);
   }, [context.lastChange, noteSavedMessage, removedMessage, savedMessage]);
-  return /* @__PURE__ */ jsx("div", { ...props, role: props.role ?? "status", "aria-live": props["aria-live"] ?? "polite", "aria-atomic": "true", children: message });
+  return /* @__PURE__ */ jsx4("div", { ...props, role: props.role ?? "status", "aria-live": props["aria-live"] ?? "polite", "aria-atomic": "true", children: message });
 }
 function getDerivedStatus(context) {
   if (context.error) return "error";
@@ -808,7 +910,7 @@ function renderRoot(asChild, child, props, body, componentName) {
     if (!isValidElement(child)) throw new Error(`${componentName} with asChild requires a single React element child.`);
     return cloneElement(child, { ...props, children: body });
   }
-  return /* @__PURE__ */ jsx("div", { ...props, children: body });
+  return /* @__PURE__ */ jsx4("div", { ...props, children: body });
 }
 export {
   FallbackStorageAdapter,
@@ -820,6 +922,7 @@ export {
   KeepCollection,
   KeepEmptyState,
   KeepItemCard,
+  KeepItemCheckbox,
   KeepKitProvider,
   KeepList,
   KeepNoteEditor,