@alkimi.org/ui-kit 0.1.23 → 0.1.24

package/README.md

@@ -242,6 +242,187 @@ Make sure to include your custom font using `@font-face` or a web font service l
 }
 ```
 
+## Available Components
+
+### Sidebar
+
+A collapsible sidebar component with responsive design and keyboard shortcuts. The sidebar supports multiple variants, collapsible modes, and includes all necessary sub-components for building navigation interfaces.
+
+#### Basic Usage
+
+```tsx
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarProvider,
+  SidebarInset,
+  SidebarTrigger,
+} from "@alkimi.org/ui-kit"
+
+function App() {
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">
+        <SidebarHeader showTrigger>
+          <h2>My App</h2>
+        </SidebarHeader>
+        <SidebarContent>
+          {/* Your sidebar content */}
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header>
+          <SidebarTrigger />
+          <h1>Main Content Area</h1>
+        </header>
+        {/* Your main content */}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+```
+
+#### Components
+
+##### SidebarProvider
+
+Wraps your entire layout and provides sidebar context.
+
+**Props:**
+- `defaultOpen?: boolean` - Initial sidebar state (default: `true`)
+- `open?: boolean` - Controlled sidebar state
+- `onOpenChange?: (open: boolean) => void` - Callback when sidebar state changes
+
+##### Sidebar
+
+The main sidebar container.
+
+**Props:**
+- `side?: "left" | "right"` - Sidebar position (default: `"left"`)
+- `variant?: "sidebar" | "floating" | "inset"` - Visual style (default: `"sidebar"`)
+- `collapsible?: "offcanvas" | "icon" | "none"` - Collapse behavior (default: `"offcanvas"`)
+  - `offcanvas` - Sidebar slides completely off-screen
+  - `icon` - Sidebar collapses to icon-only mode
+  - `none` - Sidebar is always visible and non-collapsible
+
+##### SidebarHeader
+
+Header section of the sidebar.
+
+**Props:**
+- `showTrigger?: boolean` - Show toggle button in header (default: `false`)
+
+##### SidebarContent
+
+Scrollable content area of the sidebar.
+
+##### SidebarFooter
+
+Footer section of the sidebar.
+
+##### SidebarTrigger
+
+Button to toggle sidebar visibility. Automatically shows appropriate icons for mobile and desktop.
+
+##### SidebarInset
+
+Main content area wrapper that adapts to sidebar state.
+
+##### Navigation Components
+
+Build navigation menus using these components:
+
+```tsx
+import {
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+} from "@alkimi.org/ui-kit"
+
+<SidebarGroup>
+  <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+  <SidebarGroupContent>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton tooltip="Home">
+          <Home />
+          <span>Home</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroupContent>
+</SidebarGroup>
+```
+
+**Available Components:**
+- `SidebarGroup` - Groups related menu items
+- `SidebarGroupLabel` - Label for a group
+- `SidebarGroupContent` - Container for group items
+- `SidebarGroupAction` - Action button for a group
+- `SidebarMenu` - Menu list container
+- `SidebarMenuItem` - Individual menu item
+- `SidebarMenuButton` - Interactive menu button with tooltip support
+- `SidebarMenuAction` - Action button for menu items
+- `SidebarMenuBadge` - Badge/count indicator
+- `SidebarMenuSub` - Submenu container
+- `SidebarMenuSubItem` - Submenu item
+- `SidebarMenuSubButton` - Submenu button
+
+##### SidebarMenuButton Props
+
+- `variant?: "default" | "outline"` - Visual style
+- `size?: "default" | "sm" | "lg"` - Button size
+- `isActive?: boolean` - Highlight as active
+- `tooltip?: string | TooltipProps` - Tooltip text or props
+- `asChild?: boolean` - Render as child component (e.g., for links)
+
+##### Utility Components
+
+- `SidebarInput` - Styled input for sidebar (e.g., search)
+- `SidebarSeparator` - Visual separator
+- `SidebarRail` - Clickable rail for toggling sidebar
+- `SidebarMenuSkeleton` - Loading skeleton for menu items
+
+##### useSidebar Hook
+
+Access sidebar state and controls from any component within `SidebarProvider`:
+
+```tsx
+import { useSidebar } from "@alkimi.org/ui-kit"
+
+function MyComponent() {
+  const { state, open, toggleSidebar, isMobile } = useSidebar()
+
+  return (
+    <div>
+      Sidebar is {state} {/* "expanded" or "collapsed" */}
+    </div>
+  )
+}
+```
+
+**Returns:**
+- `state: "expanded" | "collapsed"` - Current sidebar state
+- `open: boolean` - Whether sidebar is open (desktop)
+- `setOpen: (open: boolean) => void` - Set sidebar state
+- `openMobile: boolean` - Whether sidebar is open (mobile)
+- `setOpenMobile: (open: boolean) => void` - Set mobile sidebar state
+- `isMobile: boolean` - Whether viewing on mobile
+- `toggleSidebar: () => void` - Toggle sidebar visibility
+
+#### Keyboard Shortcuts
+
+- `Cmd+B` (Mac) or `Ctrl+B` (Windows/Linux) - Toggle sidebar
+
+#### Responsive Behavior
+
+- **Desktop**: Sidebar is fixed and collapsible based on the `collapsible` prop
+- **Mobile**: Sidebar automatically becomes a slide-out sheet overlay
+
 ## Usage
 
 You can import components in two ways:

package/README.npm.md

@@ -242,6 +242,187 @@ Make sure to include your custom font using `@font-face` or a web font service l
 }
 ```
 
+## Available Components
+
+### Sidebar
+
+A collapsible sidebar component with responsive design and keyboard shortcuts. The sidebar supports multiple variants, collapsible modes, and includes all necessary sub-components for building navigation interfaces.
+
+#### Basic Usage
+
+```tsx
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarProvider,
+  SidebarInset,
+  SidebarTrigger,
+} from "@alkimi.org/ui-kit"
+
+function App() {
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">
+        <SidebarHeader showTrigger>
+          <h2>My App</h2>
+        </SidebarHeader>
+        <SidebarContent>
+          {/* Your sidebar content */}
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header>
+          <SidebarTrigger />
+          <h1>Main Content Area</h1>
+        </header>
+        {/* Your main content */}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+```
+
+#### Components
+
+##### SidebarProvider
+
+Wraps your entire layout and provides sidebar context.
+
+**Props:**
+- `defaultOpen?: boolean` - Initial sidebar state (default: `true`)
+- `open?: boolean` - Controlled sidebar state
+- `onOpenChange?: (open: boolean) => void` - Callback when sidebar state changes
+
+##### Sidebar
+
+The main sidebar container.
+
+**Props:**
+- `side?: "left" | "right"` - Sidebar position (default: `"left"`)
+- `variant?: "sidebar" | "floating" | "inset"` - Visual style (default: `"sidebar"`)
+- `collapsible?: "offcanvas" | "icon" | "none"` - Collapse behavior (default: `"offcanvas"`)
+  - `offcanvas` - Sidebar slides completely off-screen
+  - `icon` - Sidebar collapses to icon-only mode
+  - `none` - Sidebar is always visible and non-collapsible
+
+##### SidebarHeader
+
+Header section of the sidebar.
+
+**Props:**
+- `showTrigger?: boolean` - Show toggle button in header (default: `false`)
+
+##### SidebarContent
+
+Scrollable content area of the sidebar.
+
+##### SidebarFooter
+
+Footer section of the sidebar.
+
+##### SidebarTrigger
+
+Button to toggle sidebar visibility. Automatically shows appropriate icons for mobile and desktop.
+
+##### SidebarInset
+
+Main content area wrapper that adapts to sidebar state.
+
+##### Navigation Components
+
+Build navigation menus using these components:
+
+```tsx
+import {
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+} from "@alkimi.org/ui-kit"
+
+<SidebarGroup>
+  <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+  <SidebarGroupContent>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton tooltip="Home">
+          <Home />
+          <span>Home</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroupContent>
+</SidebarGroup>
+```
+
+**Available Components:**
+- `SidebarGroup` - Groups related menu items
+- `SidebarGroupLabel` - Label for a group
+- `SidebarGroupContent` - Container for group items
+- `SidebarGroupAction` - Action button for a group
+- `SidebarMenu` - Menu list container
+- `SidebarMenuItem` - Individual menu item
+- `SidebarMenuButton` - Interactive menu button with tooltip support
+- `SidebarMenuAction` - Action button for menu items
+- `SidebarMenuBadge` - Badge/count indicator
+- `SidebarMenuSub` - Submenu container
+- `SidebarMenuSubItem` - Submenu item
+- `SidebarMenuSubButton` - Submenu button
+
+##### SidebarMenuButton Props
+
+- `variant?: "default" | "outline"` - Visual style
+- `size?: "default" | "sm" | "lg"` - Button size
+- `isActive?: boolean` - Highlight as active
+- `tooltip?: string | TooltipProps` - Tooltip text or props
+- `asChild?: boolean` - Render as child component (e.g., for links)
+
+##### Utility Components
+
+- `SidebarInput` - Styled input for sidebar (e.g., search)
+- `SidebarSeparator` - Visual separator
+- `SidebarRail` - Clickable rail for toggling sidebar
+- `SidebarMenuSkeleton` - Loading skeleton for menu items
+
+##### useSidebar Hook
+
+Access sidebar state and controls from any component within `SidebarProvider`:
+
+```tsx
+import { useSidebar } from "@alkimi.org/ui-kit"
+
+function MyComponent() {
+  const { state, open, toggleSidebar, isMobile } = useSidebar()
+
+  return (
+    <div>
+      Sidebar is {state} {/* "expanded" or "collapsed" */}
+    </div>
+  )
+}
+```
+
+**Returns:**
+- `state: "expanded" | "collapsed"` - Current sidebar state
+- `open: boolean` - Whether sidebar is open (desktop)
+- `setOpen: (open: boolean) => void` - Set sidebar state
+- `openMobile: boolean` - Whether sidebar is open (mobile)
+- `setOpenMobile: (open: boolean) => void` - Set mobile sidebar state
+- `isMobile: boolean` - Whether viewing on mobile
+- `toggleSidebar: () => void` - Toggle sidebar visibility
+
+#### Keyboard Shortcuts
+
+- `Cmd+B` (Mac) or `Ctrl+B` (Windows/Linux) - Toggle sidebar
+
+#### Responsive Behavior
+
+- **Desktop**: Sidebar is fixed and collapsible based on the `collapsible` prop
+- **Mobile**: Sidebar automatically becomes a slide-out sheet overlay
+
 ## Usage
 
 You can import components in two ways:

package/dist/components/button.d.mts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alkimi.org/ui-kit",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "packageManager": "pnpm@10.26.0",
   "description": "A React component library built with shadcn/ui and Tailwind CSS",
   "main": "./dist/index.js",