@adamosuiteservices/ui 1.3.5 → 1.4.5

package/docs/components/layout/sidebar.md

@@ -11,6 +11,8 @@ import {
   Sidebar,
   SidebarContent,
   SidebarInset,
+  SidebarTopBar,
+  SidebarTrigger,
   SidebarHeader,
   SidebarFooter,
   SidebarMenu,
@@ -29,30 +31,37 @@ import { Link } from "react-router-dom"; // o Next.js Link
 ```tsx
 <Sidebar>
   <SidebarContent>
-    <SidebarHeader>
+    <SidebarHeader className="adm:items-center">
       {/* Logo o título */}
     </SidebarHeader>
 
     <SidebarMenu>
       <SidebarMenuItem>
-        <HomeIcon />
-        Dashboard
+        <HomeIcon /> Dashboard
       </SidebarMenuItem>
       <SidebarMenuItem>
-        <SettingsIcon />
-        Settings
+        <FolderIcon /> Projects
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <SettingsIcon /> Settings
       </SidebarMenuItem>
     </SidebarMenu>
 
     <SidebarFooter>
-      {/* Usuario o acciones */}
+      <SidebarMenuItem>
+        <CircleUserRoundIcon /> Profile
+      </SidebarMenuItem>
     </SidebarFooter>
   </SidebarContent>
-</Sidebar>
 
-<SidebarInset>
-  {/* Contenido principal */}
-</SidebarInset>
+  <SidebarInset>
+    <SidebarTopBar>
+      <h1 className="adm:text-lg adm:font-semibold">Dashboard</h1>
+      <SidebarTrigger />
+    </SidebarTopBar>
+    {/* Contenido principal */}
+  </SidebarInset>
+</Sidebar>
 ```
 
 ## Componentes
@@ -69,6 +78,14 @@ Contenido del sidebar con Portal para posicionamiento fijo.
 
 Contenedor para el contenido principal que se ajusta al sidebar.
 
+### SidebarTopBar
+
+Barra superior sticky para el contenido principal, ideal para incluir el trigger del sidebar y el título de la página.
+
+### SidebarTrigger
+
+Botón hamburguesa que abre/cierra el sidebar en mobile. Automáticamente oculto en desktop (xl+).
+
 ### SidebarHeader
 
 Sección superior del sidebar.
@@ -115,6 +132,25 @@ Item individual del menú con hover effects.
 | children  | `ReactNode`             | Contenido principal de la aplicación |
 | ...props  | `ComponentProps<"div">` | Props nativas de div                 |
 
+### SidebarTopBar
+
+| Prop      | Tipo                    | Descripción                                       |
+| --------- | ----------------------- | ------------------------------------------------- |
+| className | `string`                | Clases adicionales                                |
+| children  | `ReactNode`             | Contenido de la barra (trigger, título, acciones) |
+| ...props  | `ComponentProps<"div">` | Props nativas de div                              |
+
+**Estilos por defecto**: sticky, top-0, flex, gap-2, items-center, justify-between, bg-background, p-4, border-b
+
+### SidebarTrigger
+
+| Prop      | Tipo                       | Descripción             |
+| --------- | -------------------------- | ----------------------- |
+| className | `string`                   | Clases adicionales      |
+| ...props  | `ComponentProps<"button">` | Props nativas de button |
+
+**Comportamiento**: Oculto automáticamente en desktop (xl:hidden). Incluye icono MenuIcon de lucide-react.
+
 ### SidebarHeader
 
 | Prop      | Tipo                       | Descripción                         |
@@ -160,51 +196,61 @@ Item individual del menú con hover effects.
 ## Ejemplo Completo
 
 ```tsx
-<Sidebar>
-  <SidebarContent>
-    <SidebarHeader>
-      <div className="p-4">
-        <h2 className="text-lg font-bold">My App</h2>
-      </div>
-    </SidebarHeader>
-
-    <SidebarMenu>
-      <SidebarMenuItem asChild>
-        <a href="/dashboard">
-          <HomeIcon />
-          Dashboard
-        </a>
-      </SidebarMenuItem>
-      <SidebarMenuItem asChild>
-        <a href="/projects">
-          <FolderIcon />
-          Projects
-        </a>
-      </SidebarMenuItem>
-      <SidebarMenuItem asChild>
-        <a href="/settings">
-          <SettingsIcon />
-          Settings
-        </a>
-      </SidebarMenuItem>
-    </SidebarMenu>
-
-    <SidebarFooter>
-      <div className="p-4">
-        <Button variant="outline" className="w-full">
-          <UserIcon />
-          Profile
-        </Button>
-      </div>
-    </SidebarFooter>
-  </SidebarContent>
-</Sidebar>
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarTopBar,
+  SidebarTrigger,
+} from "@adamosuiteservices/ui/sidebar";
+import {
+  CircleUserRoundIcon,
+  HomeIcon,
+  SettingsIcon,
+  FolderIcon,
+} from "lucide-react";
 
-<SidebarInset>
-  <main className="p-6">
-    {/* Tu contenido aquí */}
-  </main>
-</SidebarInset>
+export default function AppLayout() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarHeader className="adm:items-center">
+          <Logo />
+        </SidebarHeader>
+
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <HomeIcon /> Dashboard
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <FolderIcon /> Projects
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SettingsIcon /> Settings
+          </SidebarMenuItem>
+        </SidebarMenu>
+
+        <SidebarFooter>
+          <SidebarMenuItem>
+            <CircleUserRoundIcon /> Profile
+          </SidebarMenuItem>
+        </SidebarFooter>
+      </SidebarContent>
+
+      <SidebarInset>
+        <SidebarTopBar>
+          <h1 className="adm:text-lg adm:font-semibold">Dashboard</h1>
+          <SidebarTrigger />
+        </SidebarTopBar>
+        <main className="adm:p-6">{/* Tu contenido aquí */}</main>
+      </SidebarInset>
+    </Sidebar>
+  );
+}
 ```
 
 ## Hook Personalizado
@@ -217,12 +263,13 @@ Hook para acceder al contexto del Sidebar desde componentes hijos.
 import { useSidebarContext } from "@adamosuiteservices/ui/sidebar";
 
 function CustomSidebarComponent() {
-  const { isXl, sidebarHeight, setSidebarHeight } = useSidebarContext();
+  const { isXl, sidebarHeight, sheetOpen, setSheetOpen } = useSidebarContext();
 
   return (
     <div>
       {isXl ? "Desktop" : "Mobile"}
       <span>Height: {sidebarHeight}</span>
+      <button onClick={() => setSheetOpen(!sheetOpen)}>Toggle Sidebar</button>
     </div>
   );
 }
@@ -234,12 +281,32 @@ function CustomSidebarComponent() {
 | isXl | `boolean` | True si el viewport es >= 1280px |
 | sidebarHeight | `string` | Altura calculada del sidebar ("auto" en desktop, px en mobile) |
 | setSidebarHeight | `Dispatch<SetStateAction<string>>` | Setter para actualizar la altura |
+| sheetOpen | `boolean` | Estado del Sheet en mobile (abierto/cerrado) |
+| setSheetOpen | `Dispatch<SetStateAction<boolean>>` | Setter para controlar el estado del Sheet |
 
 **Nota**: Este hook debe usarse dentro de un componente que sea hijo de `<Sidebar>`.
 
 ## Ejemplos Adicionales
 
-### Con React Router
+### Items Básicos con Iconos
+
+El ejemplo principal muestra el uso más simple - items como buttons con iconos:
+
+```tsx
+<SidebarMenu>
+  <SidebarMenuItem>
+    <HomeIcon /> Dashboard
+  </SidebarMenuItem>
+  <SidebarMenuItem>
+    <FolderIcon /> Projects
+  </SidebarMenuItem>
+  <SidebarMenuItem>
+    <SettingsIcon /> Settings
+  </SidebarMenuItem>
+</SidebarMenu>
+```
+
+### Con React Router (usando asChild)
 
 ```tsx
 import { Link } from "react-router-dom";
@@ -247,20 +314,18 @@ import { Link } from "react-router-dom";
 <SidebarMenu>
   <SidebarMenuItem asChild>
     <Link to="/dashboard">
-      <HomeIcon />
-      Dashboard
+      <HomeIcon /> Dashboard
     </Link>
   </SidebarMenuItem>
   <SidebarMenuItem asChild>
     <Link to="/settings">
-      <SettingsIcon />
-      Settings
+      <SettingsIcon /> Settings
     </Link>
   </SidebarMenuItem>
 </SidebarMenu>;
 ```
 
-### Con Next.js
+### Con Next.js (usando asChild)
 
 ```tsx
 import Link from "next/link";
@@ -268,27 +333,27 @@ import Link from "next/link";
 <SidebarMenu>
   <SidebarMenuItem asChild>
     <Link href="/dashboard">
-      <HomeIcon />
-      Dashboard
+      <HomeIcon /> Dashboard
     </Link>
   </SidebarMenuItem>
 </SidebarMenu>;
 ```
 
-### Sidebar con Estados Activos
+### Estados Activos
 
 ```tsx
 const pathname = usePathname(); // Next.js o similar
 
 <SidebarMenu>
   <SidebarMenuItem
-    asChild
-    className={pathname === "/dashboard" ? "bg-white/20" : ""}
+    className={pathname === "/dashboard" ? "adm:bg-white/20" : ""}
   >
-    <Link href="/dashboard">
-      <HomeIcon />
-      Dashboard
-    </Link>
+    <HomeIcon /> Dashboard
+  </SidebarMenuItem>
+  <SidebarMenuItem
+    className={pathname === "/settings" ? "adm:bg-white/20" : ""}
+  >
+    <SettingsIcon /> Settings
   </SidebarMenuItem>
 </SidebarMenu>;
 ```
@@ -312,7 +377,16 @@ El sidebar usa variables CSS de tema. Puedes personalizarlas:
 - En mobile, el Sheet se abre desde la izquierda
 - `SidebarMenuItem` tiene hover effects y padding predefinidos
 - `SidebarMenu` incluye scroll automático si el contenido excede la altura
-- Los componentes usan `data-slot` attributes para debugging y testing
+- Los componentes usan `data-slot` attributes para debugging y testing:
+  - `sidebar` - Contenedor root
+  - `sidebar-content` - Contenido principal del sidebar
+  - `sidebar-trigger` - Botón hamburguesa para mobile
+  - `sidebar-inset` - Contenedor del contenido principal
+  - `sidebar-top-bar` - Barra superior (si se usa)
+  - `sidebar-header` - Header del sidebar
+  - `sidebar-footer` - Footer del sidebar
+  - `sidebar-menu` - Contenedor de items del menú
+  - `sidebar-menu-item` - Item individual del menú
 
 ## Accesibilidad
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "1.3.5",
+  "version": "1.4.5",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",