@craftzbay/ui 0.10.0 → 0.11.0

package/dist-lib/components/ui/MultiSelect.js

@@ -1,69 +1,72 @@
 "use client";
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { forwardRef as Z, useState as w, useRef as y, useEffect as _, useMemo as F, useCallback as O } from "react";
-import * as f from "@radix-ui/react-popover";
-import { Command as p } from "cmdk";
-import { X as P, ChevronsUpDown as $, Check as ee } from "../../icons/index.js";
-import { cn as i } from "../../lib/utils.js";
-import { useStrings as te } from "../../hooks/use-strings.js";
-import { formatString as re } from "../../lib/strings.js";
-import { useFieldIds as oe } from "../../hooks/use-field-ids.js";
-const ne = Z(function({
+import { forwardRef as Y, useState as N, useRef as O, useCallback as k, useMemo as P } from "react";
+import * as g from "@radix-ui/react-popover";
+import { Command as b } from "cmdk";
+import { X as j, ChevronsUpDown as Z, Check as _ } from "../../icons/index.js";
+import { cn as a } from "../../lib/utils.js";
+import { useStrings as ee } from "../../hooks/use-strings.js";
+import { formatString as te } from "../../lib/strings.js";
+import { useFieldIds as re } from "../../hooks/use-field-ids.js";
+const oe = Y(function({
   options: l,
   value: r,
   onChange: s,
-  label: N,
+  label: d,
   helperText: h,
   error: x,
   placeholder: B,
-  emptyText: E,
-  maxVisibleChips: L = 3,
-  clearable: M = !0,
-  disabled: d,
-  id: j,
+  emptyText: L,
+  maxVisibleChips: M = 3,
+  clearable: E = !0,
+  disabled: c,
+  id: S,
   className: K
 }, U) {
-  const c = te(), q = B ?? c.multiSelect.placeholder, H = E ?? c.multiSelect.empty, g = !!x, { fieldId: k, helperId: Q, errorId: X, describedBy: G } = oe(j, {
+  const i = ee(), z = B ?? i.multiSelect.placeholder, $ = L ?? i.multiSelect.empty, v = !!x, { fieldId: u, helperId: q, errorId: H, describedBy: Q } = re(S, {
     hasHelper: !!h,
-    hasError: g
-  }), [a, u] = w(!1), [m, J] = w(""), S = y(null), C = y(null), z = y(null), [T, V] = w(void 0);
-  _(() => {
-    var e;
-    a && V((e = z.current) == null ? void 0 : e.id);
-  }, [a]);
-  const b = F(() => l.filter((e) => r.includes(e.value)), [l, r]), I = O(
+    hasError: v
+  }), [f, m] = N(!1), [p, X] = N(""), C = O(null), I = O(null), [G, J] = N(void 0), T = k((e) => J(e == null ? void 0 : e.id), []), w = P(() => l.filter((e) => r.includes(e.value)), [l, r]), D = k(
     (e) => {
       r.includes(e) ? s(r.filter((o) => o !== e)) : s([...r, e]);
     },
     [r, s]
-  ), W = O(() => s([]), [s]), Y = (e) => {
-    e.key === "Backspace" && m === "" && r.length > 0 ? s(r.slice(0, -1)) : (e.key === "ArrowDown" || e.key === "ArrowUp") && !a && u(!0);
-  }, D = F(
-    () => l.filter((e) => e.label.toLowerCase().includes(m.toLowerCase())),
-    [l, m]
-  ), v = b.slice(0, L), R = b.length - v.length;
-  return /* @__PURE__ */ n("div", { ref: U, className: i("flex flex-col gap-1.5", K), children: [
-    N && /* @__PURE__ */ t("label", { htmlFor: k, className: "text-foreground text-sm font-medium", children: N }),
-    /* @__PURE__ */ t(p, { shouldFilter: !1, className: "flex w-full flex-col", children: /* @__PURE__ */ n(f.Root, { open: a, onOpenChange: u, children: [
-      /* @__PURE__ */ t(f.Anchor, { asChild: !0, children: /* @__PURE__ */ n(
+  ), V = k(() => s([]), [s]), W = (e) => {
+    e.key === "Backspace" && p === "" && r.length > 0 ? s(r.slice(0, -1)) : (e.key === "ArrowDown" || e.key === "ArrowUp") && !f && m(!0);
+  }, R = P(
+    () => l.filter((e) => e.label.toLowerCase().includes(p.toLowerCase())),
+    [l, p]
+  ), y = w.slice(0, M), A = w.length - y.length;
+  return /* @__PURE__ */ n("div", { ref: U, className: a("flex flex-col gap-1.5", K), children: [
+    d && /* @__PURE__ */ t(
+      "label",
+      {
+        id: `${u}-label`,
+        htmlFor: u,
+        className: "text-foreground text-sm font-medium",
+        children: d
+      }
+    ),
+    /* @__PURE__ */ t(b, { shouldFilter: !1, className: "flex w-full flex-col", children: /* @__PURE__ */ n(g.Root, { open: f, onOpenChange: m, children: [
+      /* @__PURE__ */ t(g.Anchor, { asChild: !0, children: /* @__PURE__ */ n(
         "div",
         {
-          ref: C,
-          "aria-disabled": d || void 0,
-          className: i(
+          ref: I,
+          "aria-disabled": c || void 0,
+          className: a(
             "bg-card flex h-9 w-full cursor-text items-center gap-1.5 overflow-hidden rounded-md border px-2 py-1 text-sm",
             "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
             "focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2",
-            g ? "border-danger focus-within:border-danger focus-within:ring-danger" : "border-border focus-within:border-accent focus-within:ring-ring",
-            d && "pointer-events-none opacity-50"
+            v ? "border-danger focus-within:border-danger focus-within:ring-danger" : "border-border-input focus-within:border-accent focus-within:ring-ring",
+            c && "pointer-events-none opacity-50"
           ),
           onClick: () => {
             var e;
-            (e = S.current) == null || e.focus(), d || u(!0);
+            (e = C.current) == null || e.focus(), c || m(!0);
           },
           children: [
             /* @__PURE__ */ n("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: [
-              v.map((e) => /* @__PURE__ */ n(
+              y.map((e) => /* @__PURE__ */ n(
                 "span",
                 {
                   className: "bg-accent-soft text-on-accent-soft inline-flex max-w-[10rem] shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium",
@@ -73,70 +76,73 @@ const ne = Z(function({
                       "button",
                       {
                         type: "button",
-                        "aria-label": re(c.multiSelect.remove, { label: e.label }),
-                        className: "text-on-accent-soft hover:text-foreground focus-visible:ring-ring inline-flex items-center rounded-sm outline-none focus-visible:ring-2",
+                        "aria-label": te(i.multiSelect.remove, { label: e.label }),
+                        className: "text-on-accent-soft hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex items-center rounded-sm outline-none before:absolute before:-inset-1.5 before:content-[''] focus-visible:ring-2 focus-visible:ring-offset-1",
                         onClick: (o) => {
-                          o.stopPropagation(), I(e.value);
+                          o.stopPropagation(), D(e.value);
                         },
-                        children: /* @__PURE__ */ t(P, { className: "size-3", "aria-hidden": !0 })
+                        children: /* @__PURE__ */ t(j, { className: "size-3", "aria-hidden": !0 })
                       }
                     )
                   ]
                 },
                 e.value
               )),
-              R > 0 && /* @__PURE__ */ n("span", { className: "bg-background-muted text-foreground-muted shrink-0 rounded-md px-1.5 py-0.5 text-xs font-medium", children: [
+              A > 0 && /* @__PURE__ */ n("span", { className: "bg-background-muted text-foreground-muted shrink-0 rounded-md px-1.5 py-0.5 text-xs font-medium", children: [
                 "+",
-                R
+                A
               ] }),
               /* @__PURE__ */ t(
                 "input",
                 {
-                  ref: S,
-                  id: k,
+                  ref: C,
+                  id: u,
                   type: "text",
                   autoComplete: "off",
-                  value: m,
-                  onChange: (e) => J(e.target.value),
-                  onFocus: () => u(!0),
-                  onKeyDown: Y,
-                  placeholder: v.length === 0 ? q : void 0,
+                  value: p,
+                  onChange: (e) => X(e.target.value),
+                  onFocus: () => m(!0),
+                  onKeyDown: W,
+                  placeholder: y.length === 0 ? z : void 0,
                   role: "combobox",
-                  "aria-expanded": a,
-                  "aria-controls": a ? T : void 0,
+                  "aria-expanded": f,
+                  "aria-controls": f ? G : void 0,
                   "aria-haspopup": "listbox",
                   "aria-autocomplete": "list",
-                  "aria-invalid": g || void 0,
-                  "aria-describedby": G,
-                  className: "placeholder:text-foreground-subtle min-w-[6ch] flex-1 bg-transparent text-sm outline-none",
-                  disabled: d
+                  "aria-labelledby": d ? `${u}-label` : void 0,
+                  "aria-label": d || S ? void 0 : z,
+                  "aria-invalid": v || void 0,
+                  "aria-describedby": Q,
+                  className: "placeholder:text-foreground-subtle min-w-[6ch] flex-1 bg-transparent text-lg outline-none md:text-sm",
+                  disabled: c
                 }
               )
             ] }),
             /* @__PURE__ */ n("span", { className: "flex shrink-0 items-center gap-1 pl-1", children: [
-              M && b.length > 0 && /* @__PURE__ */ t(
+              E && w.length > 0 && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  "aria-label": c.multiSelect.clearAll,
+                  "aria-label": i.multiSelect.clearAll,
                   onClick: (e) => {
-                    e.stopPropagation(), W();
+                    e.stopPropagation(), V();
                   },
-                  className: "text-foreground-subtle hover:text-foreground focus-visible:ring-ring rounded-sm outline-none focus-visible:ring-2",
-                  children: /* @__PURE__ */ t(P, { className: "size-4", "aria-hidden": !0 })
+                  className: "text-foreground-subtle hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-6 shrink-0 items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                  children: /* @__PURE__ */ t(j, { className: "size-4", "aria-hidden": !0 })
                 }
               ),
-              /* @__PURE__ */ t($, { className: "text-foreground-subtle size-4", "aria-hidden": !0 })
+              /* @__PURE__ */ t(Z, { className: "text-foreground-subtle size-4", "aria-hidden": !0 })
             ] })
           ]
         }
       ) }),
-      /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ t(
-        f.Content,
+      /* @__PURE__ */ t(g.Portal, { children: /* @__PURE__ */ t(
+        g.Content,
         {
           align: "start",
           sideOffset: 4,
-          className: i(
+          "aria-label": i.command.suggestions,
+          className: a(
             "border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -144,53 +150,61 @@ const ne = Z(function({
           ),
           onOpenAutoFocus: (e) => e.preventDefault(),
           onInteractOutside: (e) => {
-            var A;
+            var F;
             const o = e.target;
-            o && ((A = C.current) != null && A.contains(o)) && e.preventDefault();
+            o && ((F = I.current) != null && F.contains(o)) && e.preventDefault();
           },
-          children: /* @__PURE__ */ n(p.List, { ref: z, className: "max-h-64 overflow-y-auto p-1", children: [
-            D.map((e) => {
-              const o = r.includes(e.value);
-              return /* @__PURE__ */ n(
-                p.Item,
-                {
-                  value: e.value,
-                  disabled: e.disabled,
-                  onSelect: () => I(e.value),
-                  className: i(
-                    "text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
-                    "data-[selected=true]:bg-background-muted",
-                    "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
-                  ),
-                  children: [
-                    /* @__PURE__ */ t(
-                      "span",
-                      {
-                        "aria-hidden": !0,
-                        className: i(
-                          "flex size-4 items-center justify-center rounded-sm border",
-                          o ? "border-accent bg-accent text-on-accent" : "border-border"
+          children: /* @__PURE__ */ n(
+            b.List,
+            {
+              ref: T,
+              label: i.command.suggestions,
+              className: "max-h-64 overflow-y-auto p-1",
+              children: [
+                R.map((e) => {
+                  const o = r.includes(e.value);
+                  return /* @__PURE__ */ n(
+                    b.Item,
+                    {
+                      value: e.value,
+                      disabled: e.disabled,
+                      onSelect: () => D(e.value),
+                      className: a(
+                        "text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                        "data-[selected=true]:bg-background-muted",
+                        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+                      ),
+                      children: [
+                        /* @__PURE__ */ t(
+                          "span",
+                          {
+                            "aria-hidden": !0,
+                            className: a(
+                              "flex size-4 items-center justify-center rounded-sm border",
+                              o ? "border-accent bg-accent text-on-accent" : "border-border-input"
+                            ),
+                            children: o && /* @__PURE__ */ t(_, { className: "size-3", "aria-hidden": !0 })
+                          }
                         ),
-                        children: o && /* @__PURE__ */ t(ee, { className: "size-3", "aria-hidden": !0 })
-                      }
-                    ),
-                    /* @__PURE__ */ t("span", { className: "flex-1", children: e.label }),
-                    e.description && /* @__PURE__ */ t("span", { className: "text-foreground-subtle text-xs", children: e.description })
-                  ]
-                },
-                e.value
-              );
-            }),
-            D.length === 0 && /* @__PURE__ */ t(p.Empty, { className: "text-foreground-subtle px-2 py-6 text-center text-sm", children: H })
-          ] })
+                        /* @__PURE__ */ t("span", { className: "flex-1", children: e.label }),
+                        e.description && /* @__PURE__ */ t("span", { className: "text-foreground-subtle text-xs", children: e.description })
+                      ]
+                    },
+                    e.value
+                  );
+                }),
+                R.length === 0 && /* @__PURE__ */ t(b.Empty, { className: "text-foreground-subtle px-2 py-6 text-center text-sm", children: $ })
+              ]
+            }
+          )
         }
       ) })
     ] }) }),
-    x ? /* @__PURE__ */ t("p", { id: X, role: "alert", className: "text-danger-text text-xs", children: x }) : h ? /* @__PURE__ */ t("p", { id: Q, className: "text-foreground-subtle text-xs", children: h }) : null
+    x ? /* @__PURE__ */ t("p", { id: H, className: "text-danger-text text-xs", children: x }) : h ? /* @__PURE__ */ t("p", { id: q, className: "text-foreground-subtle text-xs", children: h }) : null
   ] });
 });
-ne.displayName = "MultiSelect";
+oe.displayName = "MultiSelect";
 export {
-  ne as MultiSelect
+  oe as MultiSelect
 };
 //# sourceMappingURL=MultiSelect.js.map

package/dist-lib/components/ui/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/ui/MultiSelect.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Check, ChevronsUpDown, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString } from '@/lib/strings';\nimport { useFieldIds } from '@/hooks/use-field-ids';\n\nexport interface MultiSelectOption {\n  /** Stable, unique value submitted in `onChange`. */\n  value: string;\n  /** Visible label shown both in the menu and in the selected chip. */\n  label: string;\n  /** Optional secondary text shown after the label in the menu. */\n  description?: string;\n  /** Disable selecting this option. */\n  disabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n  /** All possible options. */\n  options: MultiSelectOption[];\n  /** Currently selected values. Controlled. */\n  value: string[];\n  /** Called whenever the selection changes. */\n  onChange: (next: string[]) => void;\n  /** Visible label above the field. */\n  label?: ReactNode;\n  /** Hint below the field. Hidden when `error` is set. */\n  helperText?: ReactNode;\n  /** Validation message. */\n  error?: ReactNode;\n  /** Empty-state placeholder shown when nothing is selected. */\n  placeholder?: string;\n  /** Text shown when no options match the search. */\n  emptyText?: string;\n  /** Max number of chips rendered inline; remainder shown as \"+N more\". */\n  maxVisibleChips?: number;\n  /** Whether the user can clear all selections with a single click. */\n  clearable?: boolean;\n  /** Disable the entire field. */\n  disabled?: boolean;\n  /** Consumer-supplied id for the search input (label association). */\n  id?: string;\n  className?: string;\n}\n\n/**\n * Chip-based multi-select with a searchable menu (cmdk under the hood).\n *\n * Keyboard:\n *   - Backspace on the input with empty query removes the last chip\n *   - ArrowUp / ArrowDown move the highlight, Enter toggles the highlighted option\n *   - Escape closes the menu\n *\n * @example Tag picker\n *   <MultiSelect label=\"Tags\"\n *                options={tags}\n *                value={selected}\n *                onChange={setSelected}\n *                placeholder=\"Pick tags\" />\n *\n * @example Bounded with overflow chip\n *   <MultiSelect options={users}\n *                value={value}\n *                onChange={setValue}\n *                maxVisibleChips={3} />\n *\n * @do Cap `maxVisibleChips` (3–5) on narrow surfaces so the field doesn't\n *      reflow as the user adds selections.\n * @dont Use MultiSelect for fewer than ~6 options. CheckboxGroup is clearer.\n */\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n  {\n    options,\n    value,\n    onChange,\n    label,\n    helperText,\n    error,\n    placeholder: placeholderProp,\n    emptyText: emptyTextProp,\n    maxVisibleChips = 3,\n    clearable = true,\n    disabled,\n    id,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const placeholder = placeholderProp ?? strings.multiSelect.placeholder;\n  const emptyText = emptyTextProp ?? strings.multiSelect.empty;\n  const isError = Boolean(error);\n  const { fieldId, helperId, errorId, describedBy } = useFieldIds(id, {\n    hasHelper: Boolean(helperText),\n    hasError: isError,\n  });\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const inputRef = useRef<HTMLInputElement>(null);\n  const fieldRef = useRef<HTMLDivElement>(null);\n  // cmdk assigns its own id to the list (ours is ignored), so read it back\n  // once the portal mounts to keep aria-controls truthful.\n  const listRef = useRef<HTMLDivElement>(null);\n  const [listId, setListId] = useState<string | undefined>(undefined);\n  useEffect(() => {\n    if (open) setListId(listRef.current?.id);\n  }, [open]);\n\n  const selected = useMemo(() => options.filter((o) => value.includes(o.value)), [options, value]);\n\n  const toggle = useCallback(\n    (v: string) => {\n      if (value.includes(v)) onChange(value.filter((x) => x !== v));\n      else onChange([...value, v]);\n    },\n    [value, onChange],\n  );\n\n  const clear = useCallback(() => onChange([]), [onChange]);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace' && query === '' && value.length > 0) {\n      onChange(value.slice(0, -1));\n    } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !open) {\n      setOpen(true);\n    }\n  };\n\n  const filtered = useMemo(\n    () => options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())),\n    [options, query],\n  );\n\n  const visibleChips = selected.slice(0, maxVisibleChips);\n  const overflow = selected.length - visibleChips.length;\n\n  return (\n    <div ref={ref} className={cn('flex flex-col gap-1.5', className)}>\n      {label && (\n        <label htmlFor={fieldId} className=\"text-foreground text-sm font-medium\">\n          {label}\n        </label>\n      )}\n\n      {/* The Command root wraps the whole field so cmdk's root keydown handler\n          (ArrowUp/Down/Enter) sees the input even though the list is portaled.\n          A plain <input> is used instead of Command.Input because cmdk forces\n          its own id / aria-* on that element, breaking the label association. */}\n      <CommandPrimitive shouldFilter={false} className=\"flex w-full flex-col\">\n        <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n          <PopoverPrimitive.Anchor asChild>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- click-to-focus wrapper; the <input role=\"combobox\"> inside owns keyboard handling */}\n            <div\n              ref={fieldRef}\n              aria-disabled={disabled || undefined}\n              className={cn(\n                'bg-card flex h-9 w-full cursor-text items-center gap-1.5 overflow-hidden rounded-md border px-2 py-1 text-sm',\n                'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n                'focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2',\n                isError\n                  ? 'border-danger focus-within:border-danger focus-within:ring-danger'\n                  : 'border-border focus-within:border-accent focus-within:ring-ring',\n                disabled && 'pointer-events-none opacity-50',\n              )}\n              onClick={() => {\n                inputRef.current?.focus();\n                if (!disabled) setOpen(true);\n              }}\n            >\n              <div className=\"flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden\">\n                {visibleChips.map((opt) => (\n                  <span\n                    key={opt.value}\n                    className=\"bg-accent-soft text-on-accent-soft inline-flex max-w-[10rem] shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium\"\n                  >\n                    <span className=\"truncate\" title={opt.label}>\n                      {opt.label}\n                    </span>\n                    <button\n                      type=\"button\"\n                      aria-label={formatString(strings.multiSelect.remove, { label: opt.label })}\n                      className=\"text-on-accent-soft hover:text-foreground focus-visible:ring-ring inline-flex items-center rounded-sm outline-none focus-visible:ring-2\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        toggle(opt.value);\n                      }}\n                    >\n                      <X className=\"size-3\" aria-hidden />\n                    </button>\n                  </span>\n                ))}\n                {overflow > 0 && (\n                  <span className=\"bg-background-muted text-foreground-muted shrink-0 rounded-md px-1.5 py-0.5 text-xs font-medium\">\n                    +{overflow}\n                  </span>\n                )}\n                <input\n                  ref={inputRef}\n                  id={fieldId}\n                  type=\"text\"\n                  autoComplete=\"off\"\n                  value={query}\n                  onChange={(e) => setQuery(e.target.value)}\n                  onFocus={() => setOpen(true)}\n                  onKeyDown={handleKeyDown}\n                  placeholder={visibleChips.length === 0 ? placeholder : undefined}\n                  role=\"combobox\"\n                  aria-expanded={open}\n                  aria-controls={open ? listId : undefined}\n                  aria-haspopup=\"listbox\"\n                  aria-autocomplete=\"list\"\n                  aria-invalid={isError || undefined}\n                  aria-describedby={describedBy}\n                  className=\"placeholder:text-foreground-subtle min-w-[6ch] flex-1 bg-transparent text-sm outline-none\"\n                  disabled={disabled}\n                />\n              </div>\n              <span className=\"flex shrink-0 items-center gap-1 pl-1\">\n                {clearable && selected.length > 0 && (\n                  <button\n                    type=\"button\"\n                    aria-label={strings.multiSelect.clearAll}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      clear();\n                    }}\n                    className=\"text-foreground-subtle hover:text-foreground focus-visible:ring-ring rounded-sm outline-none focus-visible:ring-2\"\n                  >\n                    <X className=\"size-4\" aria-hidden />\n                  </button>\n                )}\n                <ChevronsUpDown className=\"text-foreground-subtle size-4\" aria-hidden />\n              </span>\n            </div>\n          </PopoverPrimitive.Anchor>\n\n          <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n              align=\"start\"\n              sideOffset={4}\n              className={cn(\n                'border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md',\n                'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n              )}\n              onOpenAutoFocus={(e) => e.preventDefault()}\n              onInteractOutside={(e) => {\n                // Clicks inside the anchor (chips, clear) must not close the menu.\n                const target = e.target as Node | null;\n                if (target && fieldRef.current?.contains(target)) e.preventDefault();\n              }}\n            >\n              <CommandPrimitive.List ref={listRef} className=\"max-h-64 overflow-y-auto p-1\">\n                {filtered.map((opt) => {\n                  const isSelected = value.includes(opt.value);\n                  return (\n                    <CommandPrimitive.Item\n                      key={opt.value}\n                      value={opt.value}\n                      disabled={opt.disabled}\n                      onSelect={() => toggle(opt.value)}\n                      className={cn(\n                        'text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm',\n                        'data-[selected=true]:bg-background-muted',\n                        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n                      )}\n                    >\n                      <span\n                        aria-hidden\n                        className={cn(\n                          'flex size-4 items-center justify-center rounded-sm border',\n                          isSelected ? 'border-accent bg-accent text-on-accent' : 'border-border',\n                        )}\n                      >\n                        {isSelected && <Check className=\"size-3\" aria-hidden />}\n                      </span>\n                      <span className=\"flex-1\">{opt.label}</span>\n                      {opt.description && (\n                        <span className=\"text-foreground-subtle text-xs\">{opt.description}</span>\n                      )}\n                    </CommandPrimitive.Item>\n                  );\n                })}\n                {filtered.length === 0 && (\n                  <CommandPrimitive.Empty className=\"text-foreground-subtle px-2 py-6 text-center text-sm\">\n                    {emptyText}\n                  </CommandPrimitive.Empty>\n                )}\n              </CommandPrimitive.List>\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n      </CommandPrimitive>\n\n      {error ? (\n        <p id={errorId} role=\"alert\" className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={helperId} className=\"text-foreground-subtle text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nMultiSelect.displayName = 'MultiSelect';\n"],"names":["MultiSelect","forwardRef","options","value","onChange","label","helperText","error","placeholderProp","emptyTextProp","maxVisibleChips","clearable","disabled","id","className","ref","strings","useStrings","placeholder","emptyText","isError","fieldId","helperId","errorId","describedBy","useFieldIds","open","setOpen","useState","query","setQuery","inputRef","useRef","fieldRef","listRef","listId","setListId","useEffect","_a","selected","useMemo","o","toggle","useCallback","v","x","clear","handleKeyDown","filtered","visibleChips","overflow","cn","jsx","CommandPrimitive","jsxs","PopoverPrimitive","opt","formatString","e","X","ChevronsUpDown","target","isSelected","Check"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/ui/MultiSelect.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Check, ChevronsUpDown, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString } from '@/lib/strings';\nimport { useFieldIds } from '@/hooks/use-field-ids';\n\nexport interface MultiSelectOption {\n  /** Stable, unique value submitted in `onChange`. */\n  value: string;\n  /** Visible label shown both in the menu and in the selected chip. */\n  label: string;\n  /** Optional secondary text shown after the label in the menu. */\n  description?: string;\n  /** Disable selecting this option. */\n  disabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n  /** All possible options. */\n  options: MultiSelectOption[];\n  /** Currently selected values. Controlled. */\n  value: string[];\n  /** Called whenever the selection changes. */\n  onChange: (next: string[]) => void;\n  /** Visible label above the field. */\n  label?: ReactNode;\n  /** Hint below the field. Hidden when `error` is set. */\n  helperText?: ReactNode;\n  /** Validation message. */\n  error?: ReactNode;\n  /** Empty-state placeholder shown when nothing is selected. */\n  placeholder?: string;\n  /** Text shown when no options match the search. */\n  emptyText?: string;\n  /** Max number of chips rendered inline; remainder shown as \"+N more\". */\n  maxVisibleChips?: number;\n  /** Whether the user can clear all selections with a single click. */\n  clearable?: boolean;\n  /** Disable the entire field. */\n  disabled?: boolean;\n  /** Consumer-supplied id for the search input (label association). */\n  id?: string;\n  className?: string;\n}\n\n/**\n * Chip-based multi-select with a searchable menu (cmdk under the hood).\n *\n * Keyboard:\n *   - Backspace on the input with empty query removes the last chip\n *   - ArrowUp / ArrowDown move the highlight, Enter toggles the highlighted option\n *   - Escape closes the menu\n *\n * @example Tag picker\n *   <MultiSelect label=\"Tags\"\n *                options={tags}\n *                value={selected}\n *                onChange={setSelected}\n *                placeholder=\"Pick tags\" />\n *\n * @example Bounded with overflow chip\n *   <MultiSelect options={users}\n *                value={value}\n *                onChange={setValue}\n *                maxVisibleChips={3} />\n *\n * @do Cap `maxVisibleChips` (3–5) on narrow surfaces so the field doesn't\n *      reflow as the user adds selections.\n * @dont Use MultiSelect for fewer than ~6 options. CheckboxGroup is clearer.\n */\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n  {\n    options,\n    value,\n    onChange,\n    label,\n    helperText,\n    error,\n    placeholder: placeholderProp,\n    emptyText: emptyTextProp,\n    maxVisibleChips = 3,\n    clearable = true,\n    disabled,\n    id,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const placeholder = placeholderProp ?? strings.multiSelect.placeholder;\n  const emptyText = emptyTextProp ?? strings.multiSelect.empty;\n  const isError = Boolean(error);\n  const { fieldId, helperId, errorId, describedBy } = useFieldIds(id, {\n    hasHelper: Boolean(helperText),\n    hasError: isError,\n  });\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const inputRef = useRef<HTMLInputElement>(null);\n  const fieldRef = useRef<HTMLDivElement>(null);\n  // cmdk assigns its own id to the list (ours is ignored), so read it back\n  // from the node once the portal mounts to keep aria-controls truthful.\n  const [listId, setListId] = useState<string | undefined>(undefined);\n  const listRef = useCallback((el: HTMLDivElement | null) => setListId(el?.id), []);\n\n  const selected = useMemo(() => options.filter((o) => value.includes(o.value)), [options, value]);\n\n  const toggle = useCallback(\n    (v: string) => {\n      if (value.includes(v)) onChange(value.filter((x) => x !== v));\n      else onChange([...value, v]);\n    },\n    [value, onChange],\n  );\n\n  const clear = useCallback(() => onChange([]), [onChange]);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace' && query === '' && value.length > 0) {\n      onChange(value.slice(0, -1));\n    } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !open) {\n      setOpen(true);\n    }\n  };\n\n  const filtered = useMemo(\n    () => options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())),\n    [options, query],\n  );\n\n  const visibleChips = selected.slice(0, maxVisibleChips);\n  const overflow = selected.length - visibleChips.length;\n\n  return (\n    <div ref={ref} className={cn('flex flex-col gap-1.5', className)}>\n      {label && (\n        <label\n          id={`${fieldId}-label`}\n          htmlFor={fieldId}\n          className=\"text-foreground text-sm font-medium\"\n        >\n          {label}\n        </label>\n      )}\n\n      {/* The Command root wraps the whole field so cmdk's root keydown handler\n          (ArrowUp/Down/Enter) sees the input even though the list is portaled.\n          A plain <input> is used instead of Command.Input because cmdk forces\n          its own id / aria-* on that element, breaking the label association. */}\n      <CommandPrimitive shouldFilter={false} className=\"flex w-full flex-col\">\n        <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n          <PopoverPrimitive.Anchor asChild>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- click-to-focus wrapper; the <input role=\"combobox\"> inside owns keyboard handling */}\n            <div\n              ref={fieldRef}\n              aria-disabled={disabled || undefined}\n              className={cn(\n                'bg-card flex h-9 w-full cursor-text items-center gap-1.5 overflow-hidden rounded-md border px-2 py-1 text-sm',\n                'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n                'focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2',\n                isError\n                  ? 'border-danger focus-within:border-danger focus-within:ring-danger'\n                  : 'border-border-input focus-within:border-accent focus-within:ring-ring',\n                disabled && 'pointer-events-none opacity-50',\n              )}\n              onClick={() => {\n                inputRef.current?.focus();\n                if (!disabled) setOpen(true);\n              }}\n            >\n              <div className=\"flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden\">\n                {visibleChips.map((opt) => (\n                  <span\n                    key={opt.value}\n                    className=\"bg-accent-soft text-on-accent-soft inline-flex max-w-[10rem] shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium\"\n                  >\n                    <span className=\"truncate\" title={opt.label}>\n                      {opt.label}\n                    </span>\n                    <button\n                      type=\"button\"\n                      aria-label={formatString(strings.multiSelect.remove, { label: opt.label })}\n                      className=\"text-on-accent-soft hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex items-center rounded-sm outline-none before:absolute before:-inset-1.5 before:content-[''] focus-visible:ring-2 focus-visible:ring-offset-1\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        toggle(opt.value);\n                      }}\n                    >\n                      <X className=\"size-3\" aria-hidden />\n                    </button>\n                  </span>\n                ))}\n                {overflow > 0 && (\n                  <span className=\"bg-background-muted text-foreground-muted shrink-0 rounded-md px-1.5 py-0.5 text-xs font-medium\">\n                    +{overflow}\n                  </span>\n                )}\n                <input\n                  ref={inputRef}\n                  id={fieldId}\n                  type=\"text\"\n                  autoComplete=\"off\"\n                  value={query}\n                  onChange={(e) => setQuery(e.target.value)}\n                  onFocus={() => setOpen(true)}\n                  onKeyDown={handleKeyDown}\n                  placeholder={visibleChips.length === 0 ? placeholder : undefined}\n                  role=\"combobox\"\n                  aria-expanded={open}\n                  aria-controls={open ? listId : undefined}\n                  aria-haspopup=\"listbox\"\n                  aria-autocomplete=\"list\"\n                  // Unlabelled field: name the input after the placeholder. A\n                  // consumer `id` implies an external <label htmlFor>.\n                  aria-labelledby={label ? `${fieldId}-label` : undefined}\n                  aria-label={label || id ? undefined : placeholder}\n                  aria-invalid={isError || undefined}\n                  aria-describedby={describedBy}\n                  className=\"placeholder:text-foreground-subtle min-w-[6ch] flex-1 bg-transparent text-lg outline-none md:text-sm\"\n                  disabled={disabled}\n                />\n              </div>\n              <span className=\"flex shrink-0 items-center gap-1 pl-1\">\n                {clearable && selected.length > 0 && (\n                  <button\n                    type=\"button\"\n                    aria-label={strings.multiSelect.clearAll}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      clear();\n                    }}\n                    className=\"text-foreground-subtle hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-6 shrink-0 items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2\"\n                  >\n                    <X className=\"size-4\" aria-hidden />\n                  </button>\n                )}\n                <ChevronsUpDown className=\"text-foreground-subtle size-4\" aria-hidden />\n              </span>\n            </div>\n          </PopoverPrimitive.Anchor>\n\n          <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n              align=\"start\"\n              sideOffset={4}\n              // Radix gives the content role=\"dialog\"; a dialog needs a name.\n              aria-label={strings.command.suggestions}\n              className={cn(\n                'border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md',\n                'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n              )}\n              onOpenAutoFocus={(e) => e.preventDefault()}\n              onInteractOutside={(e) => {\n                // Clicks inside the anchor (chips, clear) must not close the menu.\n                const target = e.target as Node | null;\n                if (target && fieldRef.current?.contains(target)) e.preventDefault();\n              }}\n            >\n              <CommandPrimitive.List\n                ref={listRef}\n                label={strings.command.suggestions}\n                className=\"max-h-64 overflow-y-auto p-1\"\n              >\n                {filtered.map((opt) => {\n                  const isSelected = value.includes(opt.value);\n                  return (\n                    <CommandPrimitive.Item\n                      key={opt.value}\n                      value={opt.value}\n                      disabled={opt.disabled}\n                      onSelect={() => toggle(opt.value)}\n                      className={cn(\n                        'text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm',\n                        'data-[selected=true]:bg-background-muted',\n                        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n                      )}\n                    >\n                      <span\n                        aria-hidden\n                        className={cn(\n                          'flex size-4 items-center justify-center rounded-sm border',\n                          isSelected\n                            ? 'border-accent bg-accent text-on-accent'\n                            : 'border-border-input',\n                        )}\n                      >\n                        {isSelected && <Check className=\"size-3\" aria-hidden />}\n                      </span>\n                      <span className=\"flex-1\">{opt.label}</span>\n                      {opt.description && (\n                        <span className=\"text-foreground-subtle text-xs\">{opt.description}</span>\n                      )}\n                    </CommandPrimitive.Item>\n                  );\n                })}\n                {filtered.length === 0 && (\n                  <CommandPrimitive.Empty className=\"text-foreground-subtle px-2 py-6 text-center text-sm\">\n                    {emptyText}\n                  </CommandPrimitive.Empty>\n                )}\n              </CommandPrimitive.List>\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n      </CommandPrimitive>\n\n      {error ? (\n        <p id={errorId} className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={helperId} className=\"text-foreground-subtle text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nMultiSelect.displayName = 'MultiSelect';\n"],"names":["MultiSelect","forwardRef","options","value","onChange","label","helperText","error","placeholderProp","emptyTextProp","maxVisibleChips","clearable","disabled","id","className","ref","strings","useStrings","placeholder","emptyText","isError","fieldId","helperId","errorId","describedBy","useFieldIds","open","setOpen","useState","query","setQuery","inputRef","useRef","fieldRef","listId","setListId","listRef","useCallback","el","selected","useMemo","o","toggle","v","x","clear","handleKeyDown","filtered","visibleChips","overflow","cn","jsx","CommandPrimitive","jsxs","PopoverPrimitive","_a","opt","formatString","e","X","ChevronsUpDown","target","isSelected","Check"],"mappings":"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"}

package/dist-lib/components/ui/Pagination.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { forwardRef as R, useId as S, useMemo as F } from "react";
-import { ChevronsLeft as A, ChevronLeft as B, ChevronRight as T, ChevronsRight as V } from "../../icons/index.js";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { forwardRef as A, useId as B, useMemo as E } from "react";
+import { ChevronsLeft as T, ChevronLeft as V, ChevronRight as _, ChevronsRight as $ } from "../../icons/index.js";
 import { cn as g } from "../../lib/utils.js";
-import { useStrings as _ } from "../../hooks/use-strings.js";
-import { defaultStrings as $, formatString as h } from "../../lib/strings.js";
-import { Select as q, SelectTrigger as z, SelectContent as D, SelectItem as E } from "./Select.js";
-function p(r) {
+import { useStrings as q } from "../../hooks/use-strings.js";
+import { defaultStrings as z, formatString as h } from "../../lib/strings.js";
+import { Select as D, SelectTrigger as G, SelectContent as H, SelectItem as K } from "./Select.js";
+function y(r) {
   return {
-    showing: (e, a, c) => h(r.showing, { from: e, to: a, total: c }),
+    showing: (e, t, c) => h(r.showing, { from: e, to: t, total: c }),
     rowsPerPage: r.rowsPerPage,
     first: r.first,
     last: r.last,
@@ -19,61 +19,61 @@ function p(r) {
     nav: r.nav
   };
 }
-const Z = p(
-  $.pagination
+const ee = y(
+  z.pagination
 );
-function G(r, e, a = 7) {
-  if (e <= a) return Array.from({ length: e }, (l, m) => m + 1);
-  const c = 1, t = [], s = Math.max(2, r - c), d = Math.min(e - 1, r + c);
-  t.push(1), s > 2 && t.push("gap");
-  for (let l = s; l <= d; l++) t.push(l);
-  return d < e - 1 && t.push("gap"), t.push(e), t;
+function Q(r, e, t = 7) {
+  if (e <= t) return Array.from({ length: e }, (l, f) => f + 1);
+  const c = 1, s = [], a = Math.max(2, r - c), u = Math.min(e - 1, r + c);
+  s.push(1), a > 2 && s.push("gap");
+  for (let l = a; l <= u; l++) s.push(l);
+  return u < e - 1 && s.push("gap"), s.push(e), s;
 }
-const H = R(function({
+const U = A(function({
   page: e,
-  pageCount: a,
+  pageCount: t,
   onPageChange: c,
-  totalItems: t,
-  pageSize: s,
-  pageSizeOptions: d,
+  totalItems: s,
+  pageSize: a,
+  pageSizeOptions: u,
   onPageSizeChange: l,
-  showJump: m = !0,
-  labels: w,
-  className: y,
-  "aria-label": P,
-  ...k
-}, C) {
-  const j = _(), o = { ...p(j.pagination), ...w }, v = S(), L = F(() => G(e, a), [e, a]), x = s ? (e - 1) * s + 1 : void 0, N = s && t ? Math.min(e * s, t) : void 0, u = (n) => {
-    n < 1 || n > a || n === e || c(n);
+  showJump: f = !0,
+  labels: P,
+  className: j,
+  "aria-label": C,
+  ...L
+}, M) {
+  const R = q(), o = { ...y(R.pagination), ...P }, v = B(), S = E(() => Q(e, t), [e, t]), x = !s || t <= 0, N = a === void 0 ? void 0 : x ? 0 : (e - 1) * a + 1, p = a === void 0 || s === void 0 ? void 0 : x ? 0 : Math.min(e * a, s), k = e <= 1 || t <= 0, w = e >= t, m = (n) => {
+    n < 1 || n > t || n === e || c(n);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ d(
     "nav",
     {
-      ref: C,
-      "aria-label": P ?? o.nav,
-      className: g("flex flex-wrap items-center justify-between gap-3", y),
-      ...k,
+      ref: M,
+      "aria-label": C ?? o.nav,
+      className: g("flex flex-wrap items-center justify-between gap-3", j),
+      ...L,
       children: [
-        /* @__PURE__ */ f("div", { className: "text-foreground-muted flex items-center gap-3 text-sm", children: [
-          t !== void 0 && s !== void 0 && x !== void 0 && N !== void 0 && /* @__PURE__ */ i("span", { className: "tabular", children: o.showing(x, N, t) }),
-          d && l && s !== void 0 && /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ d("div", { className: "text-foreground-muted flex items-center gap-3 text-sm", children: [
+          s !== void 0 && a !== void 0 && N !== void 0 && p !== void 0 && /* @__PURE__ */ i("span", { className: "tabular", children: o.showing(N, p, s) }),
+          u && l && a !== void 0 && /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ i("label", { htmlFor: v, className: "sr-only", children: o.rowsPerPage }),
-            /* @__PURE__ */ f(q, { value: String(s), onValueChange: (n) => l(Number(n)), children: [
-              /* @__PURE__ */ i(z, { id: v, size: "sm", className: "w-[7.5rem] whitespace-nowrap" }),
-              /* @__PURE__ */ i(D, { children: d.map((n) => /* @__PURE__ */ i(E, { value: String(n), children: o.perPage(n) }, n)) })
+            /* @__PURE__ */ d(D, { value: String(a), onValueChange: (n) => l(Number(n)), children: [
+              /* @__PURE__ */ i(G, { id: v, size: "sm", className: "w-[7.5rem] whitespace-nowrap" }),
+              /* @__PURE__ */ i(H, { children: u.map((n) => /* @__PURE__ */ i(K, { value: String(n), children: o.perPage(n) }, n)) })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ f("ul", { className: "flex items-center gap-1", children: [
-          m && /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+        /* @__PURE__ */ d("ul", { className: "flex items-center gap-1", children: [
+          f && /* @__PURE__ */ i("li", { className: "hidden sm:block", children: /* @__PURE__ */ i(
             "button",
             {
               type: "button",
               "aria-label": o.first,
-              disabled: e === 1,
-              onClick: () => u(1),
+              disabled: k,
+              onClick: () => m(1),
               className: b,
-              children: /* @__PURE__ */ i(A, { className: "size-4", "aria-hidden": !0 })
+              children: /* @__PURE__ */ i(T, { className: "size-4", "aria-hidden": !0 })
             }
           ) }),
           /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
@@ -81,20 +81,25 @@ const H = R(function({
             {
               type: "button",
               "aria-label": o.prev,
-              disabled: e === 1,
-              onClick: () => u(e - 1),
+              disabled: k,
+              onClick: () => m(e - 1),
               className: b,
-              children: /* @__PURE__ */ i(B, { className: "size-4", "aria-hidden": !0 })
+              children: /* @__PURE__ */ i(V, { className: "size-4", "aria-hidden": !0 })
             }
           ) }),
-          L.map(
-            (n, M) => n === "gap" ? /* @__PURE__ */ i("li", { className: "text-foreground-subtle px-2", children: "…" }, `gap-${M}`) : /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+          /* @__PURE__ */ d("li", { className: "tabular text-foreground-muted px-2 text-sm sm:hidden", "aria-current": "page", children: [
+            e,
+            " / ",
+            t
+          ] }),
+          S.map(
+            (n, F) => n === "gap" ? /* @__PURE__ */ i("li", { className: "text-foreground-subtle hidden px-2 sm:block", children: "…" }, `gap-${F}`) : /* @__PURE__ */ i("li", { className: "hidden sm:block", children: /* @__PURE__ */ i(
               "button",
               {
                 type: "button",
                 "aria-label": o.page(n),
                 "aria-current": n === e ? "page" : void 0,
-                onClick: () => u(n),
+                onClick: () => m(n),
                 className: g(
                   "tabular inline-flex size-8 items-center justify-center rounded-md text-sm outline-none",
                   "transition-colors duration-[var(--duration-fast)]",
@@ -110,21 +115,21 @@ const H = R(function({
             {
               type: "button",
               "aria-label": o.next,
-              disabled: e === a,
-              onClick: () => u(e + 1),
+              disabled: w,
+              onClick: () => m(e + 1),
               className: b,
-              children: /* @__PURE__ */ i(T, { className: "size-4", "aria-hidden": !0 })
+              children: /* @__PURE__ */ i(_, { className: "size-4", "aria-hidden": !0 })
             }
           ) }),
-          m && /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+          f && /* @__PURE__ */ i("li", { className: "hidden sm:block", children: /* @__PURE__ */ i(
             "button",
             {
               type: "button",
               "aria-label": o.last,
-              disabled: e === a,
-              onClick: () => u(a),
+              disabled: w,
+              onClick: () => m(t),
               className: b,
-              children: /* @__PURE__ */ i(V, { className: "size-4", "aria-hidden": !0 })
+              children: /* @__PURE__ */ i($, { className: "size-4", "aria-hidden": !0 })
             }
           ) })
         ] })
@@ -132,7 +137,7 @@ const H = R(function({
     }
   );
 });
-H.displayName = "Pagination";
+U.displayName = "Pagination";
 const b = g(
   "inline-flex size-8 items-center justify-center rounded-md text-foreground-muted",
   "transition-colors duration-[var(--duration-fast)]",
@@ -141,8 +146,8 @@ const b = g(
   "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 );
 export {
-  H as Pagination,
-  Z as defaultPaginationLabels,
-  p as paginationLabelsFromStrings
+  U as Pagination,
+  ee as defaultPaginationLabels,
+  y as paginationLabelsFromStrings
 };
 //# sourceMappingURL=Pagination.js.map