@k3-universe/react-kit 0.0.28 → 0.0.30

package/src/kit/components/timepicker/TimeRangePicker.tsx

@@ -4,7 +4,11 @@ import * as React from 'react';
 import { Clock } from 'lucide-react';
 import { cn } from '../../../shadcn/lib/utils';
 import { Button } from '../../../shadcn/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '../../../shadcn/ui/popover';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../../shadcn/ui/popover';
 import {
   Select,
   SelectContent,
@@ -20,7 +24,8 @@ export interface TimeRangePickerValue {
   to?: Date | null;
 }
 
-export interface TimeRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface TimeRangePickerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   value?: TimeRangePickerValue | null;
   onChange?: (range: TimeRangePickerValue | null) => void;
   placeholder?: string;
@@ -60,9 +65,29 @@ function TimeUnitSelector({
   value: Date | null | undefined;
   onChange: (next: Date | null) => void;
 }) {
-  const hours = React.useMemo(() => (hourCycle === 12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i)), [hourCycle]);
-  const minutes = React.useMemo(() => Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep), [minuteStep]);
-  const seconds = React.useMemo(() => Array.from({ length: Math.ceil(60 / secondStep) }, (_, i) => i * secondStep), [secondStep]);
+  const hours = React.useMemo(
+    () =>
+      hourCycle === 12
+        ? Array.from({ length: 12 }, (_, i) => i + 1)
+        : Array.from({ length: 24 }, (_, i) => i),
+    [hourCycle],
+  );
+  const minutes = React.useMemo(
+    () =>
+      Array.from(
+        { length: Math.ceil(60 / minuteStep) },
+        (_, i) => i * minuteStep,
+      ),
+    [minuteStep],
+  );
+  const seconds = React.useMemo(
+    () =>
+      Array.from(
+        { length: Math.ceil(60 / secondStep) },
+        (_, i) => i * secondStep,
+      ),
+    [secondStep],
+  );
   const selectedHour = React.useMemo(() => {
     if (!value) return hourCycle === 12 ? 12 : 0;
     const h = value.getHours();
@@ -70,21 +95,33 @@ function TimeUnitSelector({
   }, [value, hourCycle]);
   const selectedMinute = value?.getMinutes() ?? 0;
   const selectedSecond = value?.getSeconds() ?? 0;
-  const selectedPeriod: 'AM' | 'PM' = value && value.getHours() >= 12 ? 'PM' : 'AM';
+  const selectedPeriod: 'AM' | 'PM' =
+    value && value.getHours() >= 12 ? 'PM' : 'AM';
 
-  const setPart = (part: 'hour' | 'minute' | 'second' | 'period', v: number | 'AM' | 'PM') => {
+  const setPart = (
+    part: 'hour' | 'minute' | 'second' | 'period',
+    v: number | 'AM' | 'PM',
+  ) => {
     const base = value
       ? new Date(value)
       : (() => {
           const n = new Date();
-          return new Date(n.getFullYear(), n.getMonth(), n.getDate(), 0, 0, 0, 0);
+          return new Date(
+            n.getFullYear(),
+            n.getMonth(),
+            n.getDate(),
+            0,
+            0,
+            0,
+            0,
+          );
         })();
     if (part === 'hour') {
       let h = Number(v);
       if (hourCycle === 12) {
         const isPM = base.getHours() >= 12;
         h = h % 12;
-        base.setHours(isPM ? (h === 12 ? 12 : h + 12) : (h === 12 ? 0 : h));
+        base.setHours(isPM ? (h === 12 ? 12 : h + 12) : h === 12 ? 0 : h);
       } else {
         base.setHours(h);
       }
@@ -108,13 +145,19 @@ function TimeUnitSelector({
       <div className="flex items-end gap-2">
         <div className="w-24">
           <div className="mb-1 block text-xs text-muted-foreground">Hour</div>
-          <Select disabled={disabled} value={String(selectedHour)} onValueChange={(v) => setPart('hour', Number(v))}>
+          <Select
+            disabled={disabled}
+            value={String(selectedHour)}
+            onValueChange={(v) => setPart('hour', Number(v))}
+          >
             <SelectTrigger aria-label={`${label} hour`}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
               {hours.map((h) => (
-                <SelectItem key={h} value={String(h)}>{hourCycle === 12 ? h : pad2(h)}</SelectItem>
+                <SelectItem key={h} value={String(h)}>
+                  {hourCycle === 12 ? h : pad2(h)}
+                </SelectItem>
               ))}
             </SelectContent>
           </Select>
@@ -122,14 +165,22 @@ function TimeUnitSelector({
 
         {(precision === 'minute' || precision === 'second') && (
           <div className="w-24">
-            <div className="mb-1 block text-xs text-muted-foreground">Minute</div>
-            <Select disabled={disabled} value={String(selectedMinute - (selectedMinute % minuteStep))} onValueChange={(v) => setPart('minute', Number(v))}>
+            <div className="mb-1 block text-xs text-muted-foreground">
+              Minute
+            </div>
+            <Select
+              disabled={disabled}
+              value={String(selectedMinute - (selectedMinute % minuteStep))}
+              onValueChange={(v) => setPart('minute', Number(v))}
+            >
               <SelectTrigger aria-label={`${label} minute`}>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
                 {minutes.map((m) => (
-                  <SelectItem key={m} value={String(m)}>{pad2(m)}</SelectItem>
+                  <SelectItem key={m} value={String(m)}>
+                    {pad2(m)}
+                  </SelectItem>
                 ))}
               </SelectContent>
             </Select>
@@ -138,14 +189,22 @@ function TimeUnitSelector({
 
         {precision === 'second' && (
           <div className="w-24">
-            <div className="mb-1 block text-xs text-muted-foreground">Second</div>
-            <Select disabled={disabled} value={String(selectedSecond - (selectedSecond % secondStep))} onValueChange={(v) => setPart('second', Number(v))}>
+            <div className="mb-1 block text-xs text-muted-foreground">
+              Second
+            </div>
+            <Select
+              disabled={disabled}
+              value={String(selectedSecond - (selectedSecond % secondStep))}
+              onValueChange={(v) => setPart('second', Number(v))}
+            >
               <SelectTrigger aria-label={`${label} second`}>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
                 {seconds.map((s) => (
-                  <SelectItem key={s} value={String(s)}>{pad2(s)}</SelectItem>
+                  <SelectItem key={s} value={String(s)}>
+                    {pad2(s)}
+                  </SelectItem>
                 ))}
               </SelectContent>
             </Select>
@@ -154,8 +213,14 @@ function TimeUnitSelector({
 
         {hourCycle === 12 && (
           <div className="w-24">
-            <div className="mb-1 block text-xs text-muted-foreground">Period</div>
-            <Select disabled={disabled} value={selectedPeriod} onValueChange={(v) => setPart('period', v as 'AM' | 'PM')}>
+            <div className="mb-1 block text-xs text-muted-foreground">
+              Period
+            </div>
+            <Select
+              disabled={disabled}
+              value={selectedPeriod}
+              onValueChange={(v) => setPart('period', v as 'AM' | 'PM')}
+            >
               <SelectTrigger aria-label={`${label} period`}>
                 <SelectValue />
               </SelectTrigger>
@@ -187,8 +252,11 @@ export function TimeRangePicker({
 }: TimeRangePickerProps) {
   const [internalOpen, setInternalOpen] = React.useState(false);
   const isOpen = typeof props.open === 'boolean' ? props.open : internalOpen;
-  const setOpen = (o: boolean) => (props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o));
-  const [draft, setDraft] = React.useState<TimeRangePickerValue | null>(value ?? null);
+  const setOpen = (o: boolean) =>
+    props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o);
+  const [draft, setDraft] = React.useState<TimeRangePickerValue | null>(
+    value ?? null,
+  );
 
   React.useEffect(() => {
     if (isOpen) setDraft(value ?? null);
@@ -198,12 +266,16 @@ export function TimeRangePicker({
     const f = draft?.from ?? value?.from ?? null;
     const t = draft?.to ?? value?.to ?? null;
     if (format) return format(f ?? null, t ?? null);
-    const fs = f ? (hourCycle === 12
-      ? `${((f.getHours() % 12) || 12)}:${pad2(f.getMinutes())}${precision === 'second' ? `:${pad2(f.getSeconds())}` : ''} ${f.getHours() >= 12 ? 'PM' : 'AM'}`
-      : `${pad2(f.getHours())}:${pad2(f.getMinutes())}${precision === 'second' ? `:${pad2(f.getSeconds())}` : ''}`) : null;
-    const ts = t ? (hourCycle === 12
-      ? `${((t.getHours() % 12) || 12)}:${pad2(t.getMinutes())}${precision === 'second' ? `:${pad2(t.getSeconds())}` : ''} ${t.getHours() >= 12 ? 'PM' : 'AM'}`
-      : `${pad2(t.getHours())}:${pad2(t.getMinutes())}${precision === 'second' ? `:${pad2(t.getSeconds())}` : ''}`) : null;
+    const fs = f
+      ? hourCycle === 12
+        ? `${f.getHours() % 12 || 12}:${pad2(f.getMinutes())}${precision === 'second' ? `:${pad2(f.getSeconds())}` : ''} ${f.getHours() >= 12 ? 'PM' : 'AM'}`
+        : `${pad2(f.getHours())}:${pad2(f.getMinutes())}${precision === 'second' ? `:${pad2(f.getSeconds())}` : ''}`
+      : null;
+    const ts = t
+      ? hourCycle === 12
+        ? `${t.getHours() % 12 || 12}:${pad2(t.getMinutes())}${precision === 'second' ? `:${pad2(t.getSeconds())}` : ''} ${t.getHours() >= 12 ? 'PM' : 'AM'}`
+        : `${pad2(t.getHours())}:${pad2(t.getMinutes())}${precision === 'second' ? `:${pad2(t.getSeconds())}` : ''}`
+      : null;
     return fs && ts ? `${fs} – ${ts}` : placeholder;
   }, [draft, value, format, hourCycle, precision, placeholder]);
 
@@ -215,7 +287,10 @@ export function TimeRangePicker({
             type="button"
             disabled={disabled}
             variant={buttonVariant}
-            className={cn('w-[280px] justify-start text-left font-normal', !value && 'text-muted-foreground')}
+            className={cn(
+              'w-[280px] justify-start text-left font-normal',
+              !value && 'text-muted-foreground',
+            )}
           >
             <Clock className="mr-2 h-4 w-4" />
             {label}
@@ -226,7 +301,9 @@ export function TimeRangePicker({
             <TimeUnitSelector
               label="From"
               value={draft?.from ?? null}
-              onChange={(d) => setDraft((prev) => ({ ...(prev ?? {}), from: d }))}
+              onChange={(d) =>
+                setDraft((prev) => ({ ...(prev ?? {}), from: d }))
+              }
               hourCycle={hourCycle}
               precision={precision}
               minuteStep={minuteStep}

package/src/kit/components/timepicker/index.ts

@@ -1,3 +1,3 @@
-export { TimePicker } from './TimePicker'
-export { TimeRangePicker } from './TimeRangePicker'
-export default void 0
+export { TimePicker } from './TimePicker';
+export { TimeRangePicker } from './TimeRangePicker';
+export default void 0;

package/src/kit/layouts/admin/components/AdminLayout.tsx

@@ -41,6 +41,7 @@ type AdminLayoutProps = {
   // Header bar customization
   headerAfterTrigger?: React.ReactNode; // renders right after the collapsible icon trigger
   headerAfterTheme?: React.ReactNode; // renders right after the ThemeToggle on the right
+  onLogout?: () => void | Promise<void>;
 };
 
 function AdminLayoutContent({
@@ -52,6 +53,7 @@ function AdminLayoutContent({
   sidebarHeaderIcon,
   headerAfterTrigger,
   headerAfterTheme,
+  onLogout,
 }: AdminLayoutProps) {
   const { groups: sidebarGroups } = useAdminSidebarMenu();
   const location = useLocation();
@@ -63,7 +65,10 @@ function AdminLayoutContent({
   // Function to check if menu item is active
   const isMenuItemActive = (itemUrl: string | undefined) => {
     if (!itemUrl) return false;
-    return location.pathname === itemUrl || location.pathname.startsWith(itemUrl + '/');
+    return (
+      location.pathname === itemUrl ||
+      location.pathname.startsWith(`${itemUrl}/`)
+    );
   };
 
   const setOpen = useCallback((id: string, val?: boolean) => {
@@ -72,19 +77,26 @@ function AdminLayoutContent({
 
   const hasActiveDescendant = (item: AdminMenuItem): boolean => {
     if (!item.children || item.children.length === 0) return false;
-    return item.children.some((c) => isMenuItemActive(c.url) || hasActiveDescendant(c));
+    return item.children.some(
+      (c) => isMenuItemActive(c.url) || hasActiveDescendant(c),
+    );
   };
 
   const renderItem = (item: AdminMenuItem, level = 0) => {
-    const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+    const hasChildren =
+      Array.isArray(item.children) && item.children.length > 0;
     const isActive = isMenuItemActive(item.url);
-    const isOpen = openMap[item.id] ?? (hasChildren && hasActiveDescendant(item));
+    const isOpen =
+      openMap[item.id] ?? (hasChildren && hasActiveDescendant(item));
 
-    const indentClassMap = ['','pl-6','pl-10','pl-14'] as const;
+    const indentClassMap = ['', 'pl-6', 'pl-10', 'pl-14'] as const;
     const indent = indentClassMap[Math.min(level, 3)];
 
     const content = (
-      <SidebarMenuItem key={item.id} className={`mb-1 ${level > 0 ? 'ml-1' : ''}`}>
+      <SidebarMenuItem
+        key={item.id}
+        className={`mb-1 ${level > 0 ? 'ml-1' : ''}`}
+      >
         <SidebarMenuButton
           asChild={!!item.url && !hasChildren}
           isActive={isActive}
@@ -102,7 +114,11 @@ function AdminLayoutContent({
                   className={`h-4 w-4 transition-colors ${isActive ? 'text-primary-foreground' : 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground'}`}
                 />
               )}
-              <span className={`font-medium transition-colors ${isActive ? 'text-primary-foreground' : 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground'}`}>{item.title}</span>
+              <span
+                className={`font-medium transition-colors ${isActive ? 'text-primary-foreground' : 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground'}`}
+              >
+                {item.title}
+              </span>
               {item.badge && (
                 <span className="ml-auto text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
                   {item.badge}
@@ -111,13 +127,12 @@ function AdminLayoutContent({
             </Link>
           ) : (
             <div className="flex items-center gap-3 px-3 py-2.5 w-full">
-              {hasChildren && (
-                isOpen ? (
+              {hasChildren &&
+                (isOpen ? (
                   <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
                 ) : (
                   <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
-                )
-              )}
+                ))}
               {item.icon ? (
                 <item.icon className="h-4 w-4 text-sidebar-foreground group-hover:text-sidebar-accent-foreground" />
               ) : (
@@ -125,10 +140,14 @@ function AdminLayoutContent({
               )}
               {item.url ? (
                 <Link to={item.url} className="flex-1 text-left">
-                  <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground">{item.title}</span>
+                  <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground">
+                    {item.title}
+                  </span>
                 </Link>
               ) : (
-                <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground flex-1">{item.title}</span>
+                <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground flex-1">
+                  {item.title}
+                </span>
               )}
               {item.badge && (
                 <span className="ml-auto text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
@@ -140,7 +159,9 @@ function AdminLayoutContent({
         </SidebarMenuButton>
         {hasChildren && isOpen && (
           <div className="mt-1 flex flex-col">
-            {(item.children ?? []).map((child: AdminMenuItem) => renderItem(child, Math.min(level + 1, 3)))}
+            {(item.children ?? []).map((child: AdminMenuItem) =>
+              renderItem(child, Math.min(level + 1, 3)),
+            )}
           </div>
         )}
       </SidebarMenuItem>
@@ -150,8 +171,11 @@ function AdminLayoutContent({
   };
 
   return (
-      <div className="flex min-h-dvh w-full">
-      <Sidebar className="bg-sidebar border-r border-sidebar-border" collapsible={sidebarCollapsible ? "icon" : "none"}>
+    <div className="flex min-h-dvh w-full">
+      <Sidebar
+        className="bg-sidebar border-r border-sidebar-border"
+        collapsible={sidebarCollapsible ? 'icon' : 'none'}
+      >
         <SidebarHeader className="bg-sidebar border-b border-sidebar-border">
           {sidebarHeader ? (
             sidebarHeader
@@ -161,7 +185,9 @@ function AdminLayoutContent({
                 <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                   <SidebarHeaderIcon className="h-4 w-4" />
                 </div>
-                <span className="font-semibold text-sidebar-foreground">{sidebarTitle}</span>
+                <span className="font-semibold text-sidebar-foreground">
+                  {sidebarTitle}
+                </span>
               </div>
             </div>
           )}
@@ -170,7 +196,9 @@ function AdminLayoutContent({
           {sidebarGroups.map((group, idx) => (
             <Fragment key={group.id}>
               <SidebarGroup>
-                <SidebarGroupLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-3 mb-2 group-data-[collapsible=icon]:hidden">{group.label}</SidebarGroupLabel>
+                <SidebarGroupLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-3 mb-2 group-data-[collapsible=icon]:hidden">
+                  {group.label}
+                </SidebarGroupLabel>
                 <SidebarGroupContent>
                   <SidebarMenu className="group-data-[collapsible=icon]:items-center">
                     {group.items.map((item) => renderItem(item, 0))}
@@ -178,26 +206,34 @@ function AdminLayoutContent({
                 </SidebarGroupContent>
               </SidebarGroup>
               {idx < sidebarGroups.length - 1 && (
-                <Separator orientation="horizontal" className="bg-sidebar-border group-data-[collapsible=icon]:hidden" />
+                <Separator
+                  orientation="horizontal"
+                  className="bg-sidebar-border group-data-[collapsible=icon]:hidden"
+                />
               )}
             </Fragment>
           ))}
         </SidebarContent>
-        <SidebarFooter className="bg-sidebar border-t border-sidebar-border px-2 py-3">
-          <SidebarMenu>
-            <SidebarMenuItem className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:justify-center">
-              <SidebarMenuButton
-                tooltip="Logout"
-                className="group relative overflow-hidden rounded-lg mx-1 transition-all duration-200 hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0"
-              >
-                <div className="flex items-center gap-3 px-3 py-2.5 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!px-0">
-                  <LogOut className="h-4 w-4 text-sidebar-foreground group-hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:mr-0" />
-                  <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden">Logout</span>
-                </div>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarFooter>
+        {onLogout && (
+          <SidebarFooter className="bg-sidebar border-t border-sidebar-border px-2 py-3">
+            <SidebarMenu>
+              <SidebarMenuItem className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:justify-center">
+                <SidebarMenuButton
+                  tooltip="Logout"
+                  className="cursor-pointer group relative overflow-hidden rounded-lg mx-1 transition-all duration-200 hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0"
+                  onClick={() => { void onLogout(); }}
+                >
+                  <div className="flex items-center gap-3 px-3 py-2.5 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!px-0">
+                    <LogOut className="h-4 w-4 text-sidebar-foreground group-hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:mr-0" />
+                    <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden">
+                      Logout
+                    </span>
+                  </div>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+        )}
       </Sidebar>
       <SidebarInset>
         <header className="flex h-16 shrink-0 items-center justify-between gap-4 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-6">
@@ -212,11 +248,9 @@ function AdminLayoutContent({
             {headerAfterTheme}
           </div>
         </header>
-        <main className="flex flex-1 flex-col gap-4 p-4">
-          {children}
-        </main>
+        <main className="flex flex-1 flex-col gap-4 p-4">{children}</main>
       </SidebarInset>
-      </div>
+    </div>
   );
 }
 
@@ -229,6 +263,7 @@ export default function AdminLayout({
   sidebarHeaderIcon,
   headerAfterTrigger,
   headerAfterTheme,
+  onLogout,
 }: AdminLayoutProps) {
   return (
     <AdminMenuProvider>
@@ -241,6 +276,7 @@ export default function AdminLayout({
           sidebarHeaderIcon={sidebarHeaderIcon}
           headerAfterTrigger={headerAfterTrigger}
           headerAfterTheme={headerAfterTheme}
+          onLogout={onLogout}
         >
           {children}
         </AdminLayoutContent>

package/src/kit/layouts/admin/components/ThemeToggle.tsx

@@ -40,19 +40,13 @@ export default function ThemeToggle({ className }: ThemeToggleProps) {
         <DropdownMenuLabel>Theme</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={() => setTheme('light')}>
-          <Sun className="mr-2 h-4 w-4" />
-          {' '}
-          Light
+          <Sun className="mr-2 h-4 w-4" /> Light
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme('dark')}>
-          <Moon className="mr-2 h-4 w-4" />
-          {' '}
-          Dark
+          <Moon className="mr-2 h-4 w-4" /> Dark
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme('system')}>
-          <Laptop className="mr-2 h-4 w-4" />
-          {' '}
-          System
+          <Laptop className="mr-2 h-4 w-4" /> System
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

package/src/kit/layouts/admin/hooks/menu.ts

@@ -1,7 +1,10 @@
-import React, { createContext, useContext } from 'react';
-import { AdminMenuContextValue, AdminMenuGroup } from '../types';
+import type React from 'react';
+import { createContext, useContext } from 'react';
+import type { AdminMenuContextValue, AdminMenuGroup } from '../types';
 
-export const AdminMenuContext = createContext<AdminMenuContextValue | null>(null);
+export const AdminMenuContext = createContext<AdminMenuContextValue | null>(
+  null,
+);
 
 export function useAdminSidebarMenu() {
   const ctx = useContext(AdminMenuContext);
@@ -11,7 +14,9 @@ export function useAdminSidebarMenu() {
     const noop = () => {};
     return {
       groups: [] as AdminMenuGroup[],
-      setGroups: noop as unknown as React.Dispatch<React.SetStateAction<AdminMenuGroup[]>>,
+      setGroups: noop as unknown as React.Dispatch<
+        React.SetStateAction<AdminMenuGroup[]>
+      >,
       registerGroup: noop as AdminMenuContextValue['registerGroup'],
       registerItem: noop as AdminMenuContextValue['registerItem'],
       clear: noop,
@@ -21,6 +26,7 @@ export function useAdminSidebarMenu() {
 }
 
 export function useAdminSidebarMenuRegistration() {
-  const { setGroups, registerGroup, registerItem, clear } = useAdminSidebarMenu();
+  const { setGroups, registerGroup, registerItem, clear } =
+    useAdminSidebarMenu();
   return { setGroups, registerGroup, registerItem, clear };
 }

package/src/kit/layouts/admin/providers/AdminMenuProvider.tsx

@@ -1,48 +1,61 @@
-import { useState, useCallback, useMemo } from "react";
-import { AdminMenuGroup, AdminMenuContextValue } from "../types";
-import { AdminMenuContext } from "../hooks/menu";
+import { useState, useCallback, useMemo } from 'react';
+import type { AdminMenuGroup, AdminMenuContextValue } from '../types';
+import { AdminMenuContext } from '../hooks/menu';
 
 export type AdminMenuProviderProps = {
   initialGroups?: AdminMenuGroup[];
   children: React.ReactNode;
 };
 
-export function AdminMenuProvider({ initialGroups = [], children }: AdminMenuProviderProps) {
+export function AdminMenuProvider({
+  initialGroups = [],
+  children,
+}: AdminMenuProviderProps) {
   const [groups, setGroups] = useState<AdminMenuGroup[]>(initialGroups);
 
-  const registerGroup = useCallback<AdminMenuContextValue['registerGroup']>((group) => {
-    setGroups((prev) => {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.log('[AdminMenuProvider] registerGroup', group);
-      }
-      const exists = prev.some((g) => g.id === group.id);
-      if (exists) return prev;
-      return [...prev, { id: group.id, label: group.label, items: group.items ?? [] }];
-    });
-  }, []);
+  const registerGroup = useCallback<AdminMenuContextValue['registerGroup']>(
+    (group) => {
+      setGroups((prev) => {
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.log('[AdminMenuProvider] registerGroup', group);
+        }
+        const exists = prev.some((g) => g.id === group.id);
+        if (exists) return prev;
+        return [
+          ...prev,
+          { id: group.id, label: group.label, items: group.items ?? [] },
+        ];
+      });
+    },
+    [],
+  );
 
-  const registerItem = useCallback<AdminMenuContextValue['registerItem']>((groupId, item) => {
-    setGroups((prev) => {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.log('[AdminMenuProvider] registerItem', groupId, item);
-      }
-      // if group exists, append or replace item by id
-      const idx = prev.findIndex((g) => g.id === groupId);
-      if (idx >= 0) {
-        const group = prev[idx];
-        const items = [...group.items];
-        const existingIdx = items.findIndex((it) => it.id === item.id);
-        if (existingIdx >= 0) items[existingIdx] = item; else items.push(item);
-        const next = [...prev];
-        next[idx] = { ...group, items };
-        return next;
-      }
-      // create group if missing
-      return [...prev, { id: groupId, label: groupId, items: [item] }];
-    });
-  }, []);
+  const registerItem = useCallback<AdminMenuContextValue['registerItem']>(
+    (groupId, item) => {
+      setGroups((prev) => {
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.log('[AdminMenuProvider] registerItem', groupId, item);
+        }
+        // if group exists, append or replace item by id
+        const idx = prev.findIndex((g) => g.id === groupId);
+        if (idx >= 0) {
+          const group = prev[idx];
+          const items = [...group.items];
+          const existingIdx = items.findIndex((it) => it.id === item.id);
+          if (existingIdx >= 0) items[existingIdx] = item;
+          else items.push(item);
+          const next = [...prev];
+          next[idx] = { ...group, items };
+          return next;
+        }
+        // create group if missing
+        return [...prev, { id: groupId, label: groupId, items: [item] }];
+      });
+    },
+    [],
+  );
 
   const clear = useCallback(() => {
     if (process.env.NODE_ENV !== 'production') {
@@ -52,7 +65,14 @@ export function AdminMenuProvider({ initialGroups = [], children }: AdminMenuPro
     setGroups([]);
   }, []);
 
-  const value = useMemo<AdminMenuContextValue>(() => ({ groups, setGroups, registerGroup, registerItem, clear }), [groups, registerGroup, registerItem, clear]);
+  const value = useMemo<AdminMenuContextValue>(
+    () => ({ groups, setGroups, registerGroup, registerItem, clear }),
+    [groups, registerGroup, registerItem, clear],
+  );
 
-  return <AdminMenuContext.Provider value={value}>{children}</AdminMenuContext.Provider>;
-}
+  return (
+    <AdminMenuContext.Provider value={value}>
+      {children}
+    </AdminMenuContext.Provider>
+  );
+}