@alkimi.org/ui-kit 0.1.22 → 0.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.github.md +181 -0
- package/README.md +181 -0
- package/README.npm.md +181 -0
- package/dist/chunk-5L5DM2X5.js +3 -0
- package/dist/chunk-5L5DM2X5.js.map +1 -0
- package/dist/chunk-6BEVEBGO.mjs +3 -0
- package/dist/chunk-6BEVEBGO.mjs.map +1 -0
- package/dist/chunk-73BUNE7H.mjs +3 -0
- package/dist/chunk-73BUNE7H.mjs.map +1 -0
- package/dist/chunk-7SOZ6MOV.js +3 -0
- package/dist/chunk-7SOZ6MOV.js.map +1 -0
- package/dist/chunk-C5AZO7RU.js +3 -0
- package/dist/chunk-C5AZO7RU.js.map +1 -0
- package/dist/chunk-CNRZOMR4.mjs +3 -0
- package/dist/chunk-CNRZOMR4.mjs.map +1 -0
- package/dist/chunk-HQ6XIPS3.mjs +3 -0
- package/dist/chunk-HQ6XIPS3.mjs.map +1 -0
- package/dist/chunk-NCJ5RAGG.js +3 -0
- package/dist/chunk-NCJ5RAGG.js.map +1 -0
- package/dist/chunk-NKYU43T6.js +3 -0
- package/dist/chunk-NKYU43T6.js.map +1 -0
- package/dist/chunk-PY6WBMT2.mjs +3 -0
- package/dist/chunk-PY6WBMT2.mjs.map +1 -0
- package/dist/chunk-QZ2ZUF7Q.js +3 -0
- package/dist/chunk-QZ2ZUF7Q.js.map +1 -0
- package/dist/chunk-YBV4CPVD.mjs +3 -0
- package/dist/chunk-YBV4CPVD.mjs.map +1 -0
- package/dist/components/button.d.mts +1 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/input.d.mts +7 -0
- package/dist/components/input.d.ts +7 -0
- package/dist/components/input.js +3 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/input.mjs +3 -0
- package/dist/components/input.mjs.map +1 -0
- package/dist/components/separator.d.mts +6 -0
- package/dist/components/separator.d.ts +6 -0
- package/dist/components/separator.js +3 -0
- package/dist/components/separator.js.map +1 -0
- package/dist/components/separator.mjs +3 -0
- package/dist/components/separator.mjs.map +1 -0
- package/dist/components/sheet.d.mts +29 -0
- package/dist/components/sheet.d.ts +29 -0
- package/dist/components/sheet.js +3 -0
- package/dist/components/sheet.js.map +1 -0
- package/dist/components/sheet.mjs +3 -0
- package/dist/components/sheet.mjs.map +1 -0
- package/dist/components/sidebar.d.mts +74 -0
- package/dist/components/sidebar.d.ts +74 -0
- package/dist/components/sidebar.js +3 -0
- package/dist/components/sidebar.js.map +1 -0
- package/dist/components/sidebar.mjs +3 -0
- package/dist/components/sidebar.mjs.map +1 -0
- package/dist/components/skeleton.d.mts +5 -0
- package/dist/components/skeleton.d.ts +5 -0
- package/dist/components/skeleton.js +3 -0
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/skeleton.mjs +3 -0
- package/dist/components/skeleton.mjs.map +1 -0
- package/dist/components/tooltip.d.mts +9 -0
- package/dist/components/tooltip.d.ts +9 -0
- package/dist/components/tooltip.js +3 -0
- package/dist/components/tooltip.js.map +1 -0
- package/dist/components/tooltip.mjs +3 -0
- package/dist/components/tooltip.mjs.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +12 -1
- package/dist/index.d.ts +12 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/dist/styles.d.mts +2 -0
- package/dist/styles.d.ts +2 -0
- package/package.json +7 -2
package/README.github.md
CHANGED
|
@@ -247,6 +247,187 @@ Make sure to include your custom font using `@font-face` or a web font service l
|
|
|
247
247
|
}
|
|
248
248
|
```
|
|
249
249
|
|
|
250
|
+
## Available Components
|
|
251
|
+
|
|
252
|
+
### Sidebar
|
|
253
|
+
|
|
254
|
+
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.
|
|
255
|
+
|
|
256
|
+
#### Basic Usage
|
|
257
|
+
|
|
258
|
+
```tsx
|
|
259
|
+
import {
|
|
260
|
+
Sidebar,
|
|
261
|
+
SidebarContent,
|
|
262
|
+
SidebarHeader,
|
|
263
|
+
SidebarProvider,
|
|
264
|
+
SidebarInset,
|
|
265
|
+
SidebarTrigger,
|
|
266
|
+
} from "@alkimi.org/ui-kit"
|
|
267
|
+
|
|
268
|
+
function App() {
|
|
269
|
+
return (
|
|
270
|
+
<SidebarProvider>
|
|
271
|
+
<Sidebar collapsible="icon">
|
|
272
|
+
<SidebarHeader showTrigger>
|
|
273
|
+
<h2>My App</h2>
|
|
274
|
+
</SidebarHeader>
|
|
275
|
+
<SidebarContent>
|
|
276
|
+
{/* Your sidebar content */}
|
|
277
|
+
</SidebarContent>
|
|
278
|
+
</Sidebar>
|
|
279
|
+
<SidebarInset>
|
|
280
|
+
<header>
|
|
281
|
+
<SidebarTrigger />
|
|
282
|
+
<h1>Main Content Area</h1>
|
|
283
|
+
</header>
|
|
284
|
+
{/* Your main content */}
|
|
285
|
+
</SidebarInset>
|
|
286
|
+
</SidebarProvider>
|
|
287
|
+
)
|
|
288
|
+
}
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
#### Components
|
|
292
|
+
|
|
293
|
+
##### SidebarProvider
|
|
294
|
+
|
|
295
|
+
Wraps your entire layout and provides sidebar context.
|
|
296
|
+
|
|
297
|
+
**Props:**
|
|
298
|
+
- `defaultOpen?: boolean` - Initial sidebar state (default: `true`)
|
|
299
|
+
- `open?: boolean` - Controlled sidebar state
|
|
300
|
+
- `onOpenChange?: (open: boolean) => void` - Callback when sidebar state changes
|
|
301
|
+
|
|
302
|
+
##### Sidebar
|
|
303
|
+
|
|
304
|
+
The main sidebar container.
|
|
305
|
+
|
|
306
|
+
**Props:**
|
|
307
|
+
- `side?: "left" | "right"` - Sidebar position (default: `"left"`)
|
|
308
|
+
- `variant?: "sidebar" | "floating" | "inset"` - Visual style (default: `"sidebar"`)
|
|
309
|
+
- `collapsible?: "offcanvas" | "icon" | "none"` - Collapse behavior (default: `"offcanvas"`)
|
|
310
|
+
- `offcanvas` - Sidebar slides completely off-screen
|
|
311
|
+
- `icon` - Sidebar collapses to icon-only mode
|
|
312
|
+
- `none` - Sidebar is always visible and non-collapsible
|
|
313
|
+
|
|
314
|
+
##### SidebarHeader
|
|
315
|
+
|
|
316
|
+
Header section of the sidebar.
|
|
317
|
+
|
|
318
|
+
**Props:**
|
|
319
|
+
- `showTrigger?: boolean` - Show toggle button in header (default: `false`)
|
|
320
|
+
|
|
321
|
+
##### SidebarContent
|
|
322
|
+
|
|
323
|
+
Scrollable content area of the sidebar.
|
|
324
|
+
|
|
325
|
+
##### SidebarFooter
|
|
326
|
+
|
|
327
|
+
Footer section of the sidebar.
|
|
328
|
+
|
|
329
|
+
##### SidebarTrigger
|
|
330
|
+
|
|
331
|
+
Button to toggle sidebar visibility. Automatically shows appropriate icons for mobile and desktop.
|
|
332
|
+
|
|
333
|
+
##### SidebarInset
|
|
334
|
+
|
|
335
|
+
Main content area wrapper that adapts to sidebar state.
|
|
336
|
+
|
|
337
|
+
##### Navigation Components
|
|
338
|
+
|
|
339
|
+
Build navigation menus using these components:
|
|
340
|
+
|
|
341
|
+
```tsx
|
|
342
|
+
import {
|
|
343
|
+
SidebarMenu,
|
|
344
|
+
SidebarMenuItem,
|
|
345
|
+
SidebarMenuButton,
|
|
346
|
+
SidebarGroup,
|
|
347
|
+
SidebarGroupLabel,
|
|
348
|
+
SidebarGroupContent,
|
|
349
|
+
} from "@alkimi.org/ui-kit"
|
|
350
|
+
|
|
351
|
+
<SidebarGroup>
|
|
352
|
+
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
|
|
353
|
+
<SidebarGroupContent>
|
|
354
|
+
<SidebarMenu>
|
|
355
|
+
<SidebarMenuItem>
|
|
356
|
+
<SidebarMenuButton tooltip="Home">
|
|
357
|
+
<Home />
|
|
358
|
+
<span>Home</span>
|
|
359
|
+
</SidebarMenuButton>
|
|
360
|
+
</SidebarMenuItem>
|
|
361
|
+
</SidebarMenu>
|
|
362
|
+
</SidebarGroupContent>
|
|
363
|
+
</SidebarGroup>
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
**Available Components:**
|
|
367
|
+
- `SidebarGroup` - Groups related menu items
|
|
368
|
+
- `SidebarGroupLabel` - Label for a group
|
|
369
|
+
- `SidebarGroupContent` - Container for group items
|
|
370
|
+
- `SidebarGroupAction` - Action button for a group
|
|
371
|
+
- `SidebarMenu` - Menu list container
|
|
372
|
+
- `SidebarMenuItem` - Individual menu item
|
|
373
|
+
- `SidebarMenuButton` - Interactive menu button with tooltip support
|
|
374
|
+
- `SidebarMenuAction` - Action button for menu items
|
|
375
|
+
- `SidebarMenuBadge` - Badge/count indicator
|
|
376
|
+
- `SidebarMenuSub` - Submenu container
|
|
377
|
+
- `SidebarMenuSubItem` - Submenu item
|
|
378
|
+
- `SidebarMenuSubButton` - Submenu button
|
|
379
|
+
|
|
380
|
+
##### SidebarMenuButton Props
|
|
381
|
+
|
|
382
|
+
- `variant?: "default" | "outline"` - Visual style
|
|
383
|
+
- `size?: "default" | "sm" | "lg"` - Button size
|
|
384
|
+
- `isActive?: boolean` - Highlight as active
|
|
385
|
+
- `tooltip?: string | TooltipProps` - Tooltip text or props
|
|
386
|
+
- `asChild?: boolean` - Render as child component (e.g., for links)
|
|
387
|
+
|
|
388
|
+
##### Utility Components
|
|
389
|
+
|
|
390
|
+
- `SidebarInput` - Styled input for sidebar (e.g., search)
|
|
391
|
+
- `SidebarSeparator` - Visual separator
|
|
392
|
+
- `SidebarRail` - Clickable rail for toggling sidebar
|
|
393
|
+
- `SidebarMenuSkeleton` - Loading skeleton for menu items
|
|
394
|
+
|
|
395
|
+
##### useSidebar Hook
|
|
396
|
+
|
|
397
|
+
Access sidebar state and controls from any component within `SidebarProvider`:
|
|
398
|
+
|
|
399
|
+
```tsx
|
|
400
|
+
import { useSidebar } from "@alkimi.org/ui-kit"
|
|
401
|
+
|
|
402
|
+
function MyComponent() {
|
|
403
|
+
const { state, open, toggleSidebar, isMobile } = useSidebar()
|
|
404
|
+
|
|
405
|
+
return (
|
|
406
|
+
<div>
|
|
407
|
+
Sidebar is {state} {/* "expanded" or "collapsed" */}
|
|
408
|
+
</div>
|
|
409
|
+
)
|
|
410
|
+
}
|
|
411
|
+
```
|
|
412
|
+
|
|
413
|
+
**Returns:**
|
|
414
|
+
- `state: "expanded" | "collapsed"` - Current sidebar state
|
|
415
|
+
- `open: boolean` - Whether sidebar is open (desktop)
|
|
416
|
+
- `setOpen: (open: boolean) => void` - Set sidebar state
|
|
417
|
+
- `openMobile: boolean` - Whether sidebar is open (mobile)
|
|
418
|
+
- `setOpenMobile: (open: boolean) => void` - Set mobile sidebar state
|
|
419
|
+
- `isMobile: boolean` - Whether viewing on mobile
|
|
420
|
+
- `toggleSidebar: () => void` - Toggle sidebar visibility
|
|
421
|
+
|
|
422
|
+
#### Keyboard Shortcuts
|
|
423
|
+
|
|
424
|
+
- `Cmd+B` (Mac) or `Ctrl+B` (Windows/Linux) - Toggle sidebar
|
|
425
|
+
|
|
426
|
+
#### Responsive Behavior
|
|
427
|
+
|
|
428
|
+
- **Desktop**: Sidebar is fixed and collapsible based on the `collapsible` prop
|
|
429
|
+
- **Mobile**: Sidebar automatically becomes a slide-out sheet overlay
|
|
430
|
+
|
|
250
431
|
## Usage
|
|
251
432
|
|
|
252
433
|
You can import components in two ways:
|
package/README.md
CHANGED
|
@@ -242,6 +242,187 @@ Make sure to include your custom font using `@font-face` or a web font service l
|
|
|
242
242
|
}
|
|
243
243
|
```
|
|
244
244
|
|
|
245
|
+
## Available Components
|
|
246
|
+
|
|
247
|
+
### Sidebar
|
|
248
|
+
|
|
249
|
+
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.
|
|
250
|
+
|
|
251
|
+
#### Basic Usage
|
|
252
|
+
|
|
253
|
+
```tsx
|
|
254
|
+
import {
|
|
255
|
+
Sidebar,
|
|
256
|
+
SidebarContent,
|
|
257
|
+
SidebarHeader,
|
|
258
|
+
SidebarProvider,
|
|
259
|
+
SidebarInset,
|
|
260
|
+
SidebarTrigger,
|
|
261
|
+
} from "@alkimi.org/ui-kit"
|
|
262
|
+
|
|
263
|
+
function App() {
|
|
264
|
+
return (
|
|
265
|
+
<SidebarProvider>
|
|
266
|
+
<Sidebar collapsible="icon">
|
|
267
|
+
<SidebarHeader showTrigger>
|
|
268
|
+
<h2>My App</h2>
|
|
269
|
+
</SidebarHeader>
|
|
270
|
+
<SidebarContent>
|
|
271
|
+
{/* Your sidebar content */}
|
|
272
|
+
</SidebarContent>
|
|
273
|
+
</Sidebar>
|
|
274
|
+
<SidebarInset>
|
|
275
|
+
<header>
|
|
276
|
+
<SidebarTrigger />
|
|
277
|
+
<h1>Main Content Area</h1>
|
|
278
|
+
</header>
|
|
279
|
+
{/* Your main content */}
|
|
280
|
+
</SidebarInset>
|
|
281
|
+
</SidebarProvider>
|
|
282
|
+
)
|
|
283
|
+
}
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
#### Components
|
|
287
|
+
|
|
288
|
+
##### SidebarProvider
|
|
289
|
+
|
|
290
|
+
Wraps your entire layout and provides sidebar context.
|
|
291
|
+
|
|
292
|
+
**Props:**
|
|
293
|
+
- `defaultOpen?: boolean` - Initial sidebar state (default: `true`)
|
|
294
|
+
- `open?: boolean` - Controlled sidebar state
|
|
295
|
+
- `onOpenChange?: (open: boolean) => void` - Callback when sidebar state changes
|
|
296
|
+
|
|
297
|
+
##### Sidebar
|
|
298
|
+
|
|
299
|
+
The main sidebar container.
|
|
300
|
+
|
|
301
|
+
**Props:**
|
|
302
|
+
- `side?: "left" | "right"` - Sidebar position (default: `"left"`)
|
|
303
|
+
- `variant?: "sidebar" | "floating" | "inset"` - Visual style (default: `"sidebar"`)
|
|
304
|
+
- `collapsible?: "offcanvas" | "icon" | "none"` - Collapse behavior (default: `"offcanvas"`)
|
|
305
|
+
- `offcanvas` - Sidebar slides completely off-screen
|
|
306
|
+
- `icon` - Sidebar collapses to icon-only mode
|
|
307
|
+
- `none` - Sidebar is always visible and non-collapsible
|
|
308
|
+
|
|
309
|
+
##### SidebarHeader
|
|
310
|
+
|
|
311
|
+
Header section of the sidebar.
|
|
312
|
+
|
|
313
|
+
**Props:**
|
|
314
|
+
- `showTrigger?: boolean` - Show toggle button in header (default: `false`)
|
|
315
|
+
|
|
316
|
+
##### SidebarContent
|
|
317
|
+
|
|
318
|
+
Scrollable content area of the sidebar.
|
|
319
|
+
|
|
320
|
+
##### SidebarFooter
|
|
321
|
+
|
|
322
|
+
Footer section of the sidebar.
|
|
323
|
+
|
|
324
|
+
##### SidebarTrigger
|
|
325
|
+
|
|
326
|
+
Button to toggle sidebar visibility. Automatically shows appropriate icons for mobile and desktop.
|
|
327
|
+
|
|
328
|
+
##### SidebarInset
|
|
329
|
+
|
|
330
|
+
Main content area wrapper that adapts to sidebar state.
|
|
331
|
+
|
|
332
|
+
##### Navigation Components
|
|
333
|
+
|
|
334
|
+
Build navigation menus using these components:
|
|
335
|
+
|
|
336
|
+
```tsx
|
|
337
|
+
import {
|
|
338
|
+
SidebarMenu,
|
|
339
|
+
SidebarMenuItem,
|
|
340
|
+
SidebarMenuButton,
|
|
341
|
+
SidebarGroup,
|
|
342
|
+
SidebarGroupLabel,
|
|
343
|
+
SidebarGroupContent,
|
|
344
|
+
} from "@alkimi.org/ui-kit"
|
|
345
|
+
|
|
346
|
+
<SidebarGroup>
|
|
347
|
+
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
|
|
348
|
+
<SidebarGroupContent>
|
|
349
|
+
<SidebarMenu>
|
|
350
|
+
<SidebarMenuItem>
|
|
351
|
+
<SidebarMenuButton tooltip="Home">
|
|
352
|
+
<Home />
|
|
353
|
+
<span>Home</span>
|
|
354
|
+
</SidebarMenuButton>
|
|
355
|
+
</SidebarMenuItem>
|
|
356
|
+
</SidebarMenu>
|
|
357
|
+
</SidebarGroupContent>
|
|
358
|
+
</SidebarGroup>
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
**Available Components:**
|
|
362
|
+
- `SidebarGroup` - Groups related menu items
|
|
363
|
+
- `SidebarGroupLabel` - Label for a group
|
|
364
|
+
- `SidebarGroupContent` - Container for group items
|
|
365
|
+
- `SidebarGroupAction` - Action button for a group
|
|
366
|
+
- `SidebarMenu` - Menu list container
|
|
367
|
+
- `SidebarMenuItem` - Individual menu item
|
|
368
|
+
- `SidebarMenuButton` - Interactive menu button with tooltip support
|
|
369
|
+
- `SidebarMenuAction` - Action button for menu items
|
|
370
|
+
- `SidebarMenuBadge` - Badge/count indicator
|
|
371
|
+
- `SidebarMenuSub` - Submenu container
|
|
372
|
+
- `SidebarMenuSubItem` - Submenu item
|
|
373
|
+
- `SidebarMenuSubButton` - Submenu button
|
|
374
|
+
|
|
375
|
+
##### SidebarMenuButton Props
|
|
376
|
+
|
|
377
|
+
- `variant?: "default" | "outline"` - Visual style
|
|
378
|
+
- `size?: "default" | "sm" | "lg"` - Button size
|
|
379
|
+
- `isActive?: boolean` - Highlight as active
|
|
380
|
+
- `tooltip?: string | TooltipProps` - Tooltip text or props
|
|
381
|
+
- `asChild?: boolean` - Render as child component (e.g., for links)
|
|
382
|
+
|
|
383
|
+
##### Utility Components
|
|
384
|
+
|
|
385
|
+
- `SidebarInput` - Styled input for sidebar (e.g., search)
|
|
386
|
+
- `SidebarSeparator` - Visual separator
|
|
387
|
+
- `SidebarRail` - Clickable rail for toggling sidebar
|
|
388
|
+
- `SidebarMenuSkeleton` - Loading skeleton for menu items
|
|
389
|
+
|
|
390
|
+
##### useSidebar Hook
|
|
391
|
+
|
|
392
|
+
Access sidebar state and controls from any component within `SidebarProvider`:
|
|
393
|
+
|
|
394
|
+
```tsx
|
|
395
|
+
import { useSidebar } from "@alkimi.org/ui-kit"
|
|
396
|
+
|
|
397
|
+
function MyComponent() {
|
|
398
|
+
const { state, open, toggleSidebar, isMobile } = useSidebar()
|
|
399
|
+
|
|
400
|
+
return (
|
|
401
|
+
<div>
|
|
402
|
+
Sidebar is {state} {/* "expanded" or "collapsed" */}
|
|
403
|
+
</div>
|
|
404
|
+
)
|
|
405
|
+
}
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
**Returns:**
|
|
409
|
+
- `state: "expanded" | "collapsed"` - Current sidebar state
|
|
410
|
+
- `open: boolean` - Whether sidebar is open (desktop)
|
|
411
|
+
- `setOpen: (open: boolean) => void` - Set sidebar state
|
|
412
|
+
- `openMobile: boolean` - Whether sidebar is open (mobile)
|
|
413
|
+
- `setOpenMobile: (open: boolean) => void` - Set mobile sidebar state
|
|
414
|
+
- `isMobile: boolean` - Whether viewing on mobile
|
|
415
|
+
- `toggleSidebar: () => void` - Toggle sidebar visibility
|
|
416
|
+
|
|
417
|
+
#### Keyboard Shortcuts
|
|
418
|
+
|
|
419
|
+
- `Cmd+B` (Mac) or `Ctrl+B` (Windows/Linux) - Toggle sidebar
|
|
420
|
+
|
|
421
|
+
#### Responsive Behavior
|
|
422
|
+
|
|
423
|
+
- **Desktop**: Sidebar is fixed and collapsible based on the `collapsible` prop
|
|
424
|
+
- **Mobile**: Sidebar automatically becomes a slide-out sheet overlay
|
|
425
|
+
|
|
245
426
|
## Usage
|
|
246
427
|
|
|
247
428
|
You can import components in two ways:
|
package/README.npm.md
CHANGED
|
@@ -242,6 +242,187 @@ Make sure to include your custom font using `@font-face` or a web font service l
|
|
|
242
242
|
}
|
|
243
243
|
```
|
|
244
244
|
|
|
245
|
+
## Available Components
|
|
246
|
+
|
|
247
|
+
### Sidebar
|
|
248
|
+
|
|
249
|
+
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.
|
|
250
|
+
|
|
251
|
+
#### Basic Usage
|
|
252
|
+
|
|
253
|
+
```tsx
|
|
254
|
+
import {
|
|
255
|
+
Sidebar,
|
|
256
|
+
SidebarContent,
|
|
257
|
+
SidebarHeader,
|
|
258
|
+
SidebarProvider,
|
|
259
|
+
SidebarInset,
|
|
260
|
+
SidebarTrigger,
|
|
261
|
+
} from "@alkimi.org/ui-kit"
|
|
262
|
+
|
|
263
|
+
function App() {
|
|
264
|
+
return (
|
|
265
|
+
<SidebarProvider>
|
|
266
|
+
<Sidebar collapsible="icon">
|
|
267
|
+
<SidebarHeader showTrigger>
|
|
268
|
+
<h2>My App</h2>
|
|
269
|
+
</SidebarHeader>
|
|
270
|
+
<SidebarContent>
|
|
271
|
+
{/* Your sidebar content */}
|
|
272
|
+
</SidebarContent>
|
|
273
|
+
</Sidebar>
|
|
274
|
+
<SidebarInset>
|
|
275
|
+
<header>
|
|
276
|
+
<SidebarTrigger />
|
|
277
|
+
<h1>Main Content Area</h1>
|
|
278
|
+
</header>
|
|
279
|
+
{/* Your main content */}
|
|
280
|
+
</SidebarInset>
|
|
281
|
+
</SidebarProvider>
|
|
282
|
+
)
|
|
283
|
+
}
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
#### Components
|
|
287
|
+
|
|
288
|
+
##### SidebarProvider
|
|
289
|
+
|
|
290
|
+
Wraps your entire layout and provides sidebar context.
|
|
291
|
+
|
|
292
|
+
**Props:**
|
|
293
|
+
- `defaultOpen?: boolean` - Initial sidebar state (default: `true`)
|
|
294
|
+
- `open?: boolean` - Controlled sidebar state
|
|
295
|
+
- `onOpenChange?: (open: boolean) => void` - Callback when sidebar state changes
|
|
296
|
+
|
|
297
|
+
##### Sidebar
|
|
298
|
+
|
|
299
|
+
The main sidebar container.
|
|
300
|
+
|
|
301
|
+
**Props:**
|
|
302
|
+
- `side?: "left" | "right"` - Sidebar position (default: `"left"`)
|
|
303
|
+
- `variant?: "sidebar" | "floating" | "inset"` - Visual style (default: `"sidebar"`)
|
|
304
|
+
- `collapsible?: "offcanvas" | "icon" | "none"` - Collapse behavior (default: `"offcanvas"`)
|
|
305
|
+
- `offcanvas` - Sidebar slides completely off-screen
|
|
306
|
+
- `icon` - Sidebar collapses to icon-only mode
|
|
307
|
+
- `none` - Sidebar is always visible and non-collapsible
|
|
308
|
+
|
|
309
|
+
##### SidebarHeader
|
|
310
|
+
|
|
311
|
+
Header section of the sidebar.
|
|
312
|
+
|
|
313
|
+
**Props:**
|
|
314
|
+
- `showTrigger?: boolean` - Show toggle button in header (default: `false`)
|
|
315
|
+
|
|
316
|
+
##### SidebarContent
|
|
317
|
+
|
|
318
|
+
Scrollable content area of the sidebar.
|
|
319
|
+
|
|
320
|
+
##### SidebarFooter
|
|
321
|
+
|
|
322
|
+
Footer section of the sidebar.
|
|
323
|
+
|
|
324
|
+
##### SidebarTrigger
|
|
325
|
+
|
|
326
|
+
Button to toggle sidebar visibility. Automatically shows appropriate icons for mobile and desktop.
|
|
327
|
+
|
|
328
|
+
##### SidebarInset
|
|
329
|
+
|
|
330
|
+
Main content area wrapper that adapts to sidebar state.
|
|
331
|
+
|
|
332
|
+
##### Navigation Components
|
|
333
|
+
|
|
334
|
+
Build navigation menus using these components:
|
|
335
|
+
|
|
336
|
+
```tsx
|
|
337
|
+
import {
|
|
338
|
+
SidebarMenu,
|
|
339
|
+
SidebarMenuItem,
|
|
340
|
+
SidebarMenuButton,
|
|
341
|
+
SidebarGroup,
|
|
342
|
+
SidebarGroupLabel,
|
|
343
|
+
SidebarGroupContent,
|
|
344
|
+
} from "@alkimi.org/ui-kit"
|
|
345
|
+
|
|
346
|
+
<SidebarGroup>
|
|
347
|
+
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
|
|
348
|
+
<SidebarGroupContent>
|
|
349
|
+
<SidebarMenu>
|
|
350
|
+
<SidebarMenuItem>
|
|
351
|
+
<SidebarMenuButton tooltip="Home">
|
|
352
|
+
<Home />
|
|
353
|
+
<span>Home</span>
|
|
354
|
+
</SidebarMenuButton>
|
|
355
|
+
</SidebarMenuItem>
|
|
356
|
+
</SidebarMenu>
|
|
357
|
+
</SidebarGroupContent>
|
|
358
|
+
</SidebarGroup>
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
**Available Components:**
|
|
362
|
+
- `SidebarGroup` - Groups related menu items
|
|
363
|
+
- `SidebarGroupLabel` - Label for a group
|
|
364
|
+
- `SidebarGroupContent` - Container for group items
|
|
365
|
+
- `SidebarGroupAction` - Action button for a group
|
|
366
|
+
- `SidebarMenu` - Menu list container
|
|
367
|
+
- `SidebarMenuItem` - Individual menu item
|
|
368
|
+
- `SidebarMenuButton` - Interactive menu button with tooltip support
|
|
369
|
+
- `SidebarMenuAction` - Action button for menu items
|
|
370
|
+
- `SidebarMenuBadge` - Badge/count indicator
|
|
371
|
+
- `SidebarMenuSub` - Submenu container
|
|
372
|
+
- `SidebarMenuSubItem` - Submenu item
|
|
373
|
+
- `SidebarMenuSubButton` - Submenu button
|
|
374
|
+
|
|
375
|
+
##### SidebarMenuButton Props
|
|
376
|
+
|
|
377
|
+
- `variant?: "default" | "outline"` - Visual style
|
|
378
|
+
- `size?: "default" | "sm" | "lg"` - Button size
|
|
379
|
+
- `isActive?: boolean` - Highlight as active
|
|
380
|
+
- `tooltip?: string | TooltipProps` - Tooltip text or props
|
|
381
|
+
- `asChild?: boolean` - Render as child component (e.g., for links)
|
|
382
|
+
|
|
383
|
+
##### Utility Components
|
|
384
|
+
|
|
385
|
+
- `SidebarInput` - Styled input for sidebar (e.g., search)
|
|
386
|
+
- `SidebarSeparator` - Visual separator
|
|
387
|
+
- `SidebarRail` - Clickable rail for toggling sidebar
|
|
388
|
+
- `SidebarMenuSkeleton` - Loading skeleton for menu items
|
|
389
|
+
|
|
390
|
+
##### useSidebar Hook
|
|
391
|
+
|
|
392
|
+
Access sidebar state and controls from any component within `SidebarProvider`:
|
|
393
|
+
|
|
394
|
+
```tsx
|
|
395
|
+
import { useSidebar } from "@alkimi.org/ui-kit"
|
|
396
|
+
|
|
397
|
+
function MyComponent() {
|
|
398
|
+
const { state, open, toggleSidebar, isMobile } = useSidebar()
|
|
399
|
+
|
|
400
|
+
return (
|
|
401
|
+
<div>
|
|
402
|
+
Sidebar is {state} {/* "expanded" or "collapsed" */}
|
|
403
|
+
</div>
|
|
404
|
+
)
|
|
405
|
+
}
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
**Returns:**
|
|
409
|
+
- `state: "expanded" | "collapsed"` - Current sidebar state
|
|
410
|
+
- `open: boolean` - Whether sidebar is open (desktop)
|
|
411
|
+
- `setOpen: (open: boolean) => void` - Set sidebar state
|
|
412
|
+
- `openMobile: boolean` - Whether sidebar is open (mobile)
|
|
413
|
+
- `setOpenMobile: (open: boolean) => void` - Set mobile sidebar state
|
|
414
|
+
- `isMobile: boolean` - Whether viewing on mobile
|
|
415
|
+
- `toggleSidebar: () => void` - Toggle sidebar visibility
|
|
416
|
+
|
|
417
|
+
#### Keyboard Shortcuts
|
|
418
|
+
|
|
419
|
+
- `Cmd+B` (Mac) or `Ctrl+B` (Windows/Linux) - Toggle sidebar
|
|
420
|
+
|
|
421
|
+
#### Responsive Behavior
|
|
422
|
+
|
|
423
|
+
- **Desktop**: Sidebar is fixed and collapsible based on the `collapsible` prop
|
|
424
|
+
- **Mobile**: Sidebar automatically becomes a slide-out sheet overlay
|
|
425
|
+
|
|
245
426
|
## Usage
|
|
246
427
|
|
|
247
428
|
You can import components in two ways:
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
|
+
var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _jsxruntime = require('react/jsx-runtime');function d({className:t,...n}){return _jsxruntime.jsx.call(void 0, "div",{className:_chunkFUYXCJOQjs.a.call(void 0, "animate-pulse rounded-md bg-muted",t),...n})}exports.a = d;
|
|
3
|
+
//# sourceMappingURL=chunk-5L5DM2X5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-5L5DM2X5.js","../src/components/skeleton.tsx"],"names":["Skeleton","className","props","jsx","cn"],"mappings":"AAAA,qFAAY;AACZ,sDAAuC,+CCMnC,SALKA,CAAAA,CAAS,CAChB,SAAA,CAAAC,CAAAA,CACA,GAAGC,CACL,CAAA,CAAyC,CACvC,OACEC,6BAAAA,KAAC,CAAA,CACC,SAAA,CAAWC,gCAAAA,mCAAG,CAAqCH,CAAS,CAAA,CAC3D,GAAGC,CAAAA,CACN,CAEJ,CAAA,cAAA","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-5L5DM2X5.js","sourcesContent":[null,"import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n {...props}\n />\n )\n}\n\nexport { Skeleton }\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import{a as e}from"./chunk-S5TKCF6T.mjs";import*as t from"react";import{jsx as u}from"react/jsx-runtime";var s=t.forwardRef(({className:r,type:o,...n},i)=>u("input",{type:o,className:e("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",r),ref:i,...n}));s.displayName="Input";export{s as a};
|
|
3
|
+
//# sourceMappingURL=chunk-6BEVEBGO.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/input.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, type, ...props }, ref) => {\n return (\n <input\n type={type}\n className={cn(\n \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n ref={ref}\n {...props}\n />\n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"],"mappings":";yCAAA,UAAYA,MAAW,QAUjB,cAAAC,MAAA,oBAHN,IAAMC,EAAc,aAClB,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAE5BL,EAAC,SACC,KAAMG,EACN,UAAWG,EACT,+VACAJ,CACF,EACA,IAAKG,EACJ,GAAGD,EACN,CAGN,EACAH,EAAM,YAAc","names":["React","jsx","Input","className","type","props","ref","cn"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import{a as s}from"./chunk-S5TKCF6T.mjs";import*as r from"react";import*as e from"@radix-ui/react-dialog";import{cva as f}from"class-variance-authority";import{X as c}from"lucide-react";import{jsx as a,jsxs as n}from"react/jsx-runtime";var x=e.Root,N=e.Trigger,C=e.Close,p=e.Portal,m=r.forwardRef(({className:t,...i},o)=>a(e.Overlay,{className:s("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",t),...i,ref:o}));m.displayName=e.Overlay.displayName;var h=f("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-500",{variants:{side:{top:"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",bottom:"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"}},defaultVariants:{side:"right"}}),S=r.forwardRef(({side:t="right",className:i,children:o,...l},d)=>n(p,{children:[a(m,{}),n(e.Content,{ref:d,className:s(h({side:t}),i),...l,children:[o,n(e.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",children:[a(c,{className:"h-4 w-4"}),a("span",{className:"sr-only",children:"Close"})]})]})]}));S.displayName=e.Content.displayName;var v=({className:t,...i})=>a("div",{className:s("flex flex-col space-y-2 text-center sm:text-left",t),...i});v.displayName="SheetHeader";var P=({className:t,...i})=>a("div",{className:s("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",t),...i});P.displayName="SheetFooter";var y=r.forwardRef(({className:t,...i},o)=>a(e.Title,{ref:o,className:s("text-lg font-semibold text-foreground",t),...i}));y.displayName=e.Title.displayName;var u=r.forwardRef(({className:t,...i},o)=>a(e.Description,{ref:o,className:s("text-sm text-muted-foreground",t),...i}));u.displayName=e.Description.displayName;export{x as a,N as b,C as c,p as d,m as e,S as f,v as g,P as h,y as i,u as j};
|
|
3
|
+
//# sourceMappingURL=chunk-73BUNE7H.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/sheet.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className\n )}\n {...props}\n ref={ref}\n />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n ref={ref}\n className={cn(sheetVariants({ side }), className)}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col space-y-2 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className\n )}\n {...props}\n />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold text-foreground\", className)}\n {...props}\n />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n"],"mappings":";yCAEA,UAAYA,MAAW,QACvB,UAAYC,MAAoB,yBAChC,OAAS,OAAAC,MAA8B,2BACvC,OAAS,KAAAC,MAAS,eAgBhB,cAAAC,EA+CI,QAAAC,MA/CJ,oBAZF,IAAMC,EAAuB,OAEvBC,EAA8B,UAE9BC,EAA4B,QAE5BC,EAA6B,SAE7BC,EAAqB,aAGzB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC1BT,EAAgB,UAAf,CACC,UAAWU,EACT,0JACAH,CACF,EACC,GAAGC,EACJ,IAAKC,EACP,CACD,EACDH,EAAa,YAA6B,UAAQ,YAElD,IAAMK,EAAgBC,EACpB,mMACA,CACE,SAAU,CACR,KAAM,CACJ,IAAK,oGACL,OACE,6GACF,KAAM,gIACN,MACE,mIACJ,CACF,EACA,gBAAiB,CACf,KAAM,OACR,CACF,CACF,EAOMC,EAAqB,aAGzB,CAAC,CAAE,KAAAC,EAAO,QAAS,UAAAP,EAAW,SAAAQ,EAAU,GAAGP,CAAM,EAAGC,IACpDR,EAACI,EAAA,CACC,UAAAL,EAACM,EAAA,EAAa,EACdL,EAAgB,UAAf,CACC,IAAKQ,EACL,UAAWC,EAAGC,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGP,CAAS,EAC/C,GAAGC,EAEH,UAAAO,EACDd,EAAgB,QAAf,CAAqB,UAAU,2OAC9B,UAAAD,EAACgB,EAAA,CAAE,UAAU,UAAU,EACvBhB,EAAC,QAAK,UAAU,UAAU,iBAAK,GACjC,GACF,GACF,CACD,EACDa,EAAa,YAA6B,UAAQ,YAElD,IAAMI,EAAc,CAAC,CACnB,UAAAV,EACA,GAAGC,CACL,IACER,EAAC,OACC,UAAWU,EACT,mDACAH,CACF,EACC,GAAGC,EACN,EAEFS,EAAY,YAAc,cAE1B,IAAMC,EAAc,CAAC,CACnB,UAAAX,EACA,GAAGC,CACL,IACER,EAAC,OACC,UAAWU,EACT,gEACAH,CACF,EACC,GAAGC,EACN,EAEFU,EAAY,YAAc,cAE1B,IAAMC,EAAmB,aAGvB,CAAC,CAAE,UAAAZ,EAAW,GAAGC,CAAM,EAAGC,IAC1BT,EAAgB,QAAf,CACC,IAAKS,EACL,UAAWC,EAAG,wCAAyCH,CAAS,EAC/D,GAAGC,EACN,CACD,EACDW,EAAW,YAA6B,QAAM,YAE9C,IAAMC,EAAyB,aAG7B,CAAC,CAAE,UAAAb,EAAW,GAAGC,CAAM,EAAGC,IAC1BT,EAAgB,cAAf,CACC,IAAKS,EACL,UAAWC,EAAG,gCAAiCH,CAAS,EACvD,GAAGC,EACN,CACD,EACDY,EAAiB,YAA6B,cAAY","names":["React","SheetPrimitive","cva","X","jsx","jsxs","Sheet","SheetTrigger","SheetClose","SheetPortal","SheetOverlay","className","props","ref","cn","sheetVariants","cva","SheetContent","side","children","X","SheetHeader","SheetFooter","SheetTitle","SheetDescription"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
|
|
2
|
+
var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _react = require('react'); var e = _interopRequireWildcard(_react);var _reactseparator = require('@radix-ui/react-separator'); var o = _interopRequireWildcard(_reactseparator);var _jsxruntime = require('react/jsx-runtime');var f=e.forwardRef(({className:a,orientation:r="horizontal",decorative:i=!0,...p},m)=>_jsxruntime.jsx.call(void 0, o.Root,{ref:m,decorative:i,orientation:r,className:_chunkFUYXCJOQjs.a.call(void 0, "shrink-0 bg-border",r==="horizontal"?"h-[1px] w-full":"h-full w-[1px]",a),...p}));f.displayName=o.Root.displayName;exports.a = f;
|
|
3
|
+
//# sourceMappingURL=chunk-7SOZ6MOV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-7SOZ6MOV.js","../src/components/separator.tsx"],"names":["Separator","className","orientation","decorative","props","ref","jsx","cn"],"mappings":"AAAA,uWAAY;AACZ,sDAAuC,uECChB,6GACa,+CAYhC,IAREA,CAAAA,CAAkB,CAAA,CAAA,UAAA,CAItB,CACE,CAAE,SAAA,CAAAC,CAAAA,CAAW,WAAA,CAAAC,CAAAA,CAAc,YAAA,CAAc,UAAA,CAAAC,CAAAA,CAAa,CAAA,CAAA,CAAM,GAAGC,CAAM,CAAA,CACrEC,CAAAA,CAAAA,EAEAC,6BAAAA,CAAoB,CAAA,IAAA,CAAnB,CACC,GAAA,CAAKD,CAAAA,CACL,UAAA,CAAYF,CAAAA,CACZ,WAAA,CAAaD,CAAAA,CACb,SAAA,CAAWK,gCAAAA,oBACT,CACAL,CAAAA,GAAgB,YAAA,CAAe,gBAAA,CAAmB,gBAAA,CAClDD,CACF,CAAA,CACC,GAAGG,CAAAA,CACN,CAEJ,CAAA,CACAJ,CAAAA,CAAU,WAAA,CAAiC,CAAA,CAAA,IAAA,CAAK,WAAA,CAAA,cAAA","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-7SOZ6MOV.js","sourcesContent":[null,"\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n (\n { className, orientation = \"horizontal\", decorative = true, ...props },\n ref\n ) => (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n \"shrink-0 bg-border\",\n orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n className\n )}\n {...props}\n />\n )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
|
|
2
|
+
var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _react = require('react'); var i = _interopRequireWildcard(_react);var _reacttooltip = require('@radix-ui/react-tooltip'); var o = _interopRequireWildcard(_reacttooltip);var _jsxruntime = require('react/jsx-runtime');var s=o.Provider,l= exports.b =o.Root,f= exports.c =o.Trigger,m= exports.d =i.forwardRef(({className:e,sideOffset:r=4,...a},d)=>_jsxruntime.jsx.call(void 0, o.Content,{ref:d,sideOffset:r,className:_chunkFUYXCJOQjs.a.call(void 0, "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...a}));m.displayName=o.Content.displayName;exports.a = s; exports.b = l; exports.c = f; exports.d = m;
|
|
3
|
+
//# sourceMappingURL=chunk-C5AZO7RU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-C5AZO7RU.js","../src/components/tooltip.tsx"],"names":["TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","props","ref","jsx","cn"],"mappings":"AAAA,uWAAY;AACZ,sDAAuC,uECChB,uGACW,+CAchC,IAVIA,CAAAA,CAAmC,CAAA,CAAA,QAAA,CAEnCC,CAAAA,aAA2B,CAAA,CAAA,IAAA,CAE3BC,CAAAA,aAAkC,CAAA,CAAA,OAAA,CAElCC,CAAAA,aAAuB,CAAA,CAAA,UAAA,CAG3B,CAAC,CAAE,SAAA,CAAAC,CAAAA,CAAW,UAAA,CAAAC,CAAAA,CAAa,CAAA,CAAG,GAAGC,CAAM,CAAA,CAAGC,CAAAA,CAAAA,EAC1CC,6BAAAA,CAAkB,CAAA,OAAA,CAAjB,CACC,GAAA,CAAKD,CAAAA,CACL,UAAA,CAAYF,CAAAA,CACZ,SAAA,CAAWI,gCAAAA,oYACT,CACAL,CACF,CAAA,CACC,GAAGE,CAAAA,CACN,CACD,CAAA,CACDH,CAAAA,CAAe,WAAA,CAA+B,CAAA,CAAA,OAAA,CAAQ,WAAA,CAAA,2DAAA","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-C5AZO7RU.js","sourcesContent":[null,"\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/skeleton.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n {...props}\n />\n )\n}\n\nexport { Skeleton }\n"],"mappings":";yCAOI,cAAAA,MAAA,oBALJ,SAASC,EAAS,CAChB,UAAAC,EACA,GAAGC,CACL,EAAyC,CACvC,OACEH,EAAC,OACC,UAAWI,EAAG,oCAAqCF,CAAS,EAC3D,GAAGC,EACN,CAEJ","names":["jsx","Skeleton","className","props","cn"]}
|