@motor-hero/ui-kit 0.48.1 → 0.50.0

package/dist/index.js

@@ -261,6 +261,8 @@ function AppShell({
   defaultCollapsed = false,
   sidebarFooter,
   banner,
+  sidebarClassName,
+  headerClassName,
   children
 }) {
   const [collapsed, setCollapsed] = useState3(defaultCollapsed);
@@ -281,18 +283,21 @@ function AppShell({
     /* @__PURE__ */ jsxs3(
       "aside",
       {
+        "data-slot": "sidebar",
         className: cn(
           "hidden shrink-0 flex-col border-r bg-card transition-all duration-300 md:flex",
-          collapsed ? "w-16" : "w-60"
+          collapsed ? "w-16" : "w-60",
+          sidebarClassName
         ),
         children: [
-          /* @__PURE__ */ jsx4("div", { className: "flex h-14 shrink-0 items-center border-b px-4", children: collapsed ? brandCollapsed ?? brand : brand }),
-          /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto px-2 py-4", children: nav(collapsed) }),
-          sidebarFooter && /* @__PURE__ */ jsx4("div", { className: "border-t px-3 py-2", "data-slot": "sidebar-footer", children: typeof sidebarFooter === "function" ? sidebarFooter(collapsed) : sidebarFooter }),
-          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx4("div", { className: "flex h-14 shrink-0 items-center border-b border-inherit px-4", "data-slot": "sidebar-brand", children: collapsed ? brandCollapsed ?? brand : brand }),
+          /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto px-2 py-4", "data-slot": "sidebar-content", children: nav(collapsed) }),
+          sidebarFooter && /* @__PURE__ */ jsx4("div", { className: "border-t border-inherit px-3 py-2", "data-slot": "sidebar-footer", children: typeof sidebarFooter === "function" ? sidebarFooter(collapsed) : sidebarFooter }),
+          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-inherit p-2", children: /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
+              "data-slot": "sidebar-toggle",
               onClick: () => setCollapsed((v) => !v),
               className: "flex w-full items-center justify-center rounded-md px-2 py-2 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
               "aria-label": collapsed ? "Expandir menu" : "Recolher menu",
@@ -315,14 +320,16 @@ function AppShell({
           /* @__PURE__ */ jsxs3(
             "div",
             {
+              "data-slot": "sidebar-drawer",
               className: cn(
                 "absolute left-0 top-0 flex h-full w-64 flex-col border-r bg-card transition-transform duration-300",
-                mobileOpen ? "translate-x-0" : "-translate-x-full"
+                mobileOpen ? "translate-x-0" : "-translate-x-full",
+                sidebarClassName
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                /* @__PURE__ */ jsx4("div", { className: "flex h-14 shrink-0 items-center border-b px-4", children: brand }),
-                /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto px-2 py-4", children: nav(false, () => setMobileOpen(false)) })
+                /* @__PURE__ */ jsx4("div", { className: "flex h-14 shrink-0 items-center border-b border-inherit px-4", "data-slot": "sidebar-brand", children: brand }),
+                /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto px-2 py-4", "data-slot": "sidebar-content", children: nav(false, () => setMobileOpen(false)) })
               ]
             }
           )
@@ -331,22 +338,29 @@ function AppShell({
     ),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
       banner,
-      /* @__PURE__ */ jsxs3("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4", children: [
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => setMobileOpen(true),
-            className: "inline-flex h-9 w-9 max-sm:h-10 max-sm:w-10 items-center justify-center rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground md:hidden",
-            "aria-label": "Abrir menu",
-            children: /* @__PURE__ */ jsx4(Menu, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxs3("div", { className: "ml-auto flex items-center gap-2", children: [
-          headerActions,
-          (user || onLogout) && /* @__PURE__ */ jsx4(UserMenu, { user, items: userMenuItems, onLogout, renderLink })
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxs3(
+        "header",
+        {
+          "data-slot": "header",
+          className: cn("flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4", headerClassName),
+          children: [
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: () => setMobileOpen(true),
+                className: "inline-flex h-9 w-9 max-sm:h-10 max-sm:w-10 items-center justify-center rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground md:hidden",
+                "aria-label": "Abrir menu",
+                children: /* @__PURE__ */ jsx4(Menu, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs3("div", { className: "ml-auto flex items-center gap-2", children: [
+              headerActions,
+              (user || onLogout) && /* @__PURE__ */ jsx4(UserMenu, { user, items: userMenuItems, onLogout, renderLink })
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx4("main", { className: "flex-1 overflow-y-auto", children })
     ] })
   ] });
@@ -1970,6 +1984,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({
@@ -1978,6 +1993,7 @@ function Pagination({
   hasNextPage,
   hasPreviousPage,
   totalPages,
+  showPageJump = false,
   showPageSizeSelector = false,
   pageSize,
   onPageSizeChange,
@@ -2013,7 +2029,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}` : ""
@@ -2033,6 +2049,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";
@@ -2155,7 +2215,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";
@@ -2169,7 +2229,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",
@@ -2513,14 +2573,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;
@@ -2598,7 +2658,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(".");
@@ -2631,7 +2691,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;
@@ -2643,9 +2703,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), []);