@motor-hero/ui-kit 0.49.0 → 0.51.0

package/dist/index.js

@@ -846,6 +846,7 @@ function Combobox({
                 CommandPrimitive.Item,
                 {
                   value: isServer ? option.value : option.label,
+                  keywords: option.description ? [option.description] : void 0,
                   disabled: option.disabled,
                   onSelect: () => handleSelect(option.value),
                   className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5",
@@ -860,7 +861,7 @@ function Combobox({
                       }
                     ),
                     option.icon,
-                    /* @__PURE__ */ jsx9("span", { className: "truncate", children: option.label })
+                    /* @__PURE__ */ jsx9(OptionText, { option })
                   ]
                 },
                 option.value
@@ -901,6 +902,21 @@ function Combobox({
     ] })
   ] });
 }
+function OptionText({ option }) {
+  if (!option.description)
+    return /* @__PURE__ */ jsx9("span", { className: "truncate", children: option.label });
+  return /* @__PURE__ */ jsxs7("span", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsx9("span", { className: "truncate", children: option.label }),
+    /* @__PURE__ */ jsx9(
+      "span",
+      {
+        title: option.description,
+        className: "truncate text-xs text-muted-foreground",
+        children: option.description
+      }
+    )
+  ] });
+}
 
 // src/components/confirm-dialog.tsx
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
@@ -1818,6 +1834,10 @@ function MultiCombobox({
     for (const [key, option] of byValue) labelCache.current.set(key, option);
   });
   const selected = value.map((v) => byValue.get(v) ?? labelCache.current.get(v)).filter((option) => option !== void 0);
+  const labelCounts = /* @__PURE__ */ new Map();
+  for (const option of selected)
+    labelCounts.set(option.label, (labelCounts.get(option.label) ?? 0) + 1);
+  const chipLabel = (option) => option.description && (labelCounts.get(option.label) ?? 0) > 1 ? `${option.label} \xB7 ${option.description}` : option.label;
   const { listRef, sentinelRef } = useInfiniteScrollSentinel({
     enabled: isServer && !!hasMore,
     loading,
@@ -1856,9 +1876,10 @@ function MultiCombobox({
         selected.length === 0 ? /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: placeholder }) : selected.map((option) => /* @__PURE__ */ jsxs17(
           "span",
           {
+            title: option.description,
             className: "inline-flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground",
             children: [
-              option.label,
+              chipLabel(option),
               /* @__PURE__ */ jsx21(
                 "button",
                 {
@@ -1910,6 +1931,7 @@ function MultiCombobox({
                 CommandPrimitive2.Item,
                 {
                   value: isServer ? option.value : option.label,
+                  keywords: option.description ? [option.description] : void 0,
                   disabled: option.disabled,
                   onSelect: () => toggleValue(option.value),
                   className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5",
@@ -1923,7 +1945,7 @@ function MultiCombobox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx21("span", { className: "truncate", children: option.label })
+                    /* @__PURE__ */ jsx21(OptionText, { option })
                   ]
                 },
                 option.value
@@ -1984,6 +2006,7 @@ function PageHeader({ title, description, action, className }) {
 }
 
 // src/components/pagination.tsx
+import { useId as useId2, useState as useState11 } from "react";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var navButtonClass2 = "inline-flex h-8 max-sm:h-10 items-center justify-center rounded-md border border-input bg-background px-3 text-xs font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50";
 function Pagination({
@@ -1992,6 +2015,7 @@ function Pagination({
   hasNextPage,
   hasPreviousPage,
   totalPages,
+  showPageJump = false,
   showPageSizeSelector = false,
   pageSize,
   onPageSizeChange,
@@ -2027,7 +2051,7 @@ function Pagination({
               children: "Anterior"
             }
           ),
-          /* @__PURE__ */ jsxs19("span", { className: "text-sm text-muted-foreground", children: [
+          showPageJump && totalPages !== void 0 ? /* @__PURE__ */ jsx23(PageJumpInput, { page, totalPages, onPageChange }) : /* @__PURE__ */ jsxs19("span", { className: "text-sm text-muted-foreground", children: [
             "P\xE1gina ",
             page,
             totalPages ? ` de ${totalPages}` : ""
@@ -2047,6 +2071,50 @@ function Pagination({
     }
   );
 }
+function PageJumpInput({ page, totalPages, onPageChange }) {
+  const inputId = useId2();
+  const [draft, setDraft] = useState11(null);
+  const [prevPage, setPrevPage] = useState11(page);
+  if (page !== prevPage) {
+    setPrevPage(page);
+    setDraft(null);
+  }
+  const commit = () => {
+    if (draft === null) return;
+    setDraft(null);
+    if (draft === "") return;
+    const target = Math.max(1, Math.min(Number(draft), totalPages));
+    if (target !== page) onPageChange(target);
+  };
+  return /* @__PURE__ */ jsxs19("span", { className: "flex items-center gap-1.5 whitespace-nowrap text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx23("label", { htmlFor: inputId, className: "max-sm:sr-only", children: "P\xE1gina" }),
+    /* @__PURE__ */ jsx23(
+      "input",
+      {
+        id: inputId,
+        type: "text",
+        inputMode: "numeric",
+        enterKeyHint: "go",
+        autoComplete: "off",
+        "aria-label": "Ir para a p\xE1gina",
+        value: draft ?? String(page),
+        onChange: (e) => setDraft(e.target.value.replace(/\D/g, "")),
+        onFocus: (e) => e.target.select(),
+        onBlur: commit,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit();
+          else if (e.key === "Escape") setDraft(null);
+        },
+        style: { width: `${String(totalPages).length + 3}ch` },
+        className: "h-8 max-sm:h-10 rounded-md border border-input bg-background px-1.5 text-center text-xs font-medium tabular-nums text-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      }
+    ),
+    /* @__PURE__ */ jsxs19("span", { children: [
+      "de ",
+      totalPages
+    ] })
+  ] });
+}
 
 // src/components/password-input.tsx
 import { Eye, EyeOff } from "lucide-react";
@@ -2169,7 +2237,7 @@ function ResponsiveDataView({
 // src/components/row-actions-menu.tsx
 import * as DropdownMenu3 from "@radix-ui/react-dropdown-menu";
 import { ChevronRight as ChevronRight3, MoreVertical } from "lucide-react";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { Drawer as DrawerPrimitive6 } from "vaul";
 import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var triggerClass = "inline-flex h-8 w-8 max-sm:h-10 max-sm:w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
@@ -2183,7 +2251,7 @@ function RowActionsMenu({
   renderLink = defaultRenderLink
 }) {
   const isDesktop = useIsDesktop();
-  const [open, setOpen] = useState12(false);
+  const [open, setOpen] = useState13(false);
   if (actions.length === 0) return null;
   const trigger = /* @__PURE__ */ jsx27(
     "button",
@@ -2527,14 +2595,14 @@ function Toaster(props) {
 import { RefreshCw } from "lucide-react";
 
 // src/hooks/use-version-check.ts
-import { useCallback as useCallback3, useEffect as useEffect7, useState as useState13 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7, useState as useState14 } from "react";
 function useVersionCheck({
   currentBuild,
   url = "/version.json",
   intervalMs = 6e4
 }) {
-  const [latestBuild, setLatestBuild] = useState13(null);
-  const [staleChecks, setStaleChecks] = useState13(0);
+  const [latestBuild, setLatestBuild] = useState14(null);
+  const [staleChecks, setStaleChecks] = useState14(0);
   useEffect7(() => {
     if (!currentBuild) return;
     let cancelled = false;
@@ -2612,7 +2680,7 @@ function UpdateBanner({
 }
 
 // src/hooks/use-company-subdomain.ts
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 var ALWAYS_RESERVED = ["www", "localhost"];
 function getSubdomain(hostname, reservedSubdomains = []) {
   const labels = hostname.split(".");
@@ -2645,7 +2713,7 @@ function useCompanySubdomain(opts = {}) {
     overrideStorageKey = "company-subdomain",
     reservedSubdomains = []
   } = opts;
-  const [subdomain] = useState14(() => {
+  const [subdomain] = useState15(() => {
     if (enableOverride) {
       const override = resolveOverride(overrideStorageKey);
       if (override) return override;
@@ -2657,9 +2725,9 @@ function useCompanySubdomain(opts = {}) {
 }
 
 // src/hooks/use-disclosure.ts
-import { useCallback as useCallback4, useState as useState15 } from "react";
+import { useCallback as useCallback4, useState as useState16 } from "react";
 function useDisclosure(initial = false) {
-  const [open, setOpen] = useState15(initial);
+  const [open, setOpen] = useState16(initial);
   const onOpen = useCallback4(() => setOpen(true), []);
   const onClose = useCallback4(() => setOpen(false), []);
   const onToggle = useCallback4(() => setOpen((v) => !v), []);