@mks2508/sidebar-headless 0.2.1 → 0.3.1

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.
Files changed (130) hide show
  1. package/CHANGELOG.md +53 -53
  2. package/LICENSE +21 -21
  3. package/README.md +165 -165
  4. package/dist/components/BottomNavBar/MobileBottomNav.d.ts +65 -0
  5. package/dist/components/BottomNavBar/MobileBottomNav.d.ts.map +1 -0
  6. package/dist/components/BottomNavBar/MobileBottomNav.styles.d.ts +94 -0
  7. package/dist/components/BottomNavBar/MobileBottomNav.styles.d.ts.map +1 -0
  8. package/dist/components/BottomNavBar/index.d.ts +10 -0
  9. package/dist/components/BottomNavBar/index.d.ts.map +1 -0
  10. package/dist/components/BottomNavBar/types.d.ts +363 -0
  11. package/dist/components/BottomNavBar/types.d.ts.map +1 -0
  12. package/dist/components/BottomNavBar/useIOSSafariFix.d.ts +74 -0
  13. package/dist/components/BottomNavBar/useIOSSafariFix.d.ts.map +1 -0
  14. package/dist/components/Sidebar/Sidebar.constants.d.ts +285 -0
  15. package/dist/components/Sidebar/Sidebar.constants.d.ts.map +1 -0
  16. package/dist/components/Sidebar/Sidebar.d.ts +80 -0
  17. package/dist/components/Sidebar/Sidebar.d.ts.map +1 -0
  18. package/dist/components/Sidebar/Sidebar.styles.d.ts +77 -0
  19. package/dist/components/Sidebar/Sidebar.styles.d.ts.map +1 -0
  20. package/dist/components/Sidebar/Sidebar.types.d.ts +638 -0
  21. package/dist/components/Sidebar/Sidebar.types.d.ts.map +1 -0
  22. package/dist/components/Sidebar/SidebarContent.d.ts +46 -0
  23. package/dist/components/Sidebar/SidebarContent.d.ts.map +1 -0
  24. package/dist/components/Sidebar/SidebarContext.d.ts +87 -0
  25. package/dist/components/Sidebar/SidebarContext.d.ts.map +1 -0
  26. package/dist/components/Sidebar/SidebarFluidIndicator.d.ts +37 -0
  27. package/dist/components/Sidebar/SidebarFluidIndicator.d.ts.map +1 -0
  28. package/dist/components/Sidebar/SidebarIndicator.d.ts +59 -0
  29. package/dist/components/Sidebar/SidebarIndicator.d.ts.map +1 -0
  30. package/dist/components/Sidebar/SidebarItem.d.ts +82 -0
  31. package/dist/components/Sidebar/SidebarItem.d.ts.map +1 -0
  32. package/dist/components/Sidebar/SidebarNav.d.ts +48 -0
  33. package/dist/components/Sidebar/SidebarNav.d.ts.map +1 -0
  34. package/dist/components/Sidebar/SidebarSafeArea.d.ts +56 -0
  35. package/dist/components/Sidebar/SidebarSafeArea.d.ts.map +1 -0
  36. package/dist/components/Sidebar/SidebarSubContent.d.ts +10 -0
  37. package/dist/components/Sidebar/SidebarSubContent.d.ts.map +1 -0
  38. package/dist/components/Sidebar/SidebarSubLink.d.ts +18 -0
  39. package/dist/components/Sidebar/SidebarSubLink.d.ts.map +1 -0
  40. package/dist/components/Sidebar/SidebarToggle.d.ts +52 -0
  41. package/dist/components/Sidebar/SidebarToggle.d.ts.map +1 -0
  42. package/dist/components/Sidebar/SidebarTooltip.d.ts +26 -0
  43. package/dist/components/Sidebar/SidebarTooltip.d.ts.map +1 -0
  44. package/dist/components/Sidebar/TooltipTitle3D.d.ts +42 -0
  45. package/dist/components/Sidebar/TooltipTitle3D.d.ts.map +1 -0
  46. package/dist/components/Sidebar/TooltipTitle3DCrossfade.d.ts +46 -0
  47. package/dist/components/Sidebar/TooltipTitle3DCrossfade.d.ts.map +1 -0
  48. package/dist/components/Sidebar/TooltipTitleCylinder.d.ts +9 -0
  49. package/dist/components/Sidebar/TooltipTitleCylinder.d.ts.map +1 -0
  50. package/dist/components/Sidebar/hooks/useSidebarContext.d.ts +48 -0
  51. package/dist/components/Sidebar/hooks/useSidebarContext.d.ts.map +1 -0
  52. package/dist/components/Sidebar/hooks/useSidebarIndicator.d.ts +72 -0
  53. package/dist/components/Sidebar/hooks/useSidebarIndicator.d.ts.map +1 -0
  54. package/dist/components/Sidebar/hooks/useSidebarKeyboard.d.ts +51 -0
  55. package/dist/components/Sidebar/hooks/useSidebarKeyboard.d.ts.map +1 -0
  56. package/dist/components/Sidebar/hooks/useSubContent.d.ts +7 -0
  57. package/dist/components/Sidebar/hooks/useSubContent.d.ts.map +1 -0
  58. package/dist/components/Sidebar/hooks/useTitleHistory.d.ts +41 -0
  59. package/dist/components/Sidebar/hooks/useTitleHistory.d.ts.map +1 -0
  60. package/dist/components/Sidebar/hooks/useTooltipDirection.d.ts +29 -0
  61. package/dist/components/Sidebar/hooks/useTooltipDirection.d.ts.map +1 -0
  62. package/dist/components/Sidebar/hooks/useTooltipTransition.d.ts +60 -0
  63. package/dist/components/Sidebar/hooks/useTooltipTransition.d.ts.map +1 -0
  64. package/dist/components/Sidebar/index.d.ts +163 -0
  65. package/dist/components/Sidebar/index.d.ts.map +1 -0
  66. package/dist/components/Sidebar/sidebar-defaults.d.ts +54 -0
  67. package/dist/components/Sidebar/sidebar-defaults.d.ts.map +1 -0
  68. package/dist/components/animate-ui/components/base/switch.d.ts +11 -0
  69. package/dist/components/animate-ui/components/base/switch.d.ts.map +1 -0
  70. package/dist/components/animate-ui/primitives/base/switch.d.ts +23 -0
  71. package/dist/components/animate-ui/primitives/base/switch.d.ts.map +1 -0
  72. package/dist/components/fluid-hover-indicator-v2.d.ts +46 -0
  73. package/dist/components/fluid-hover-indicator-v2.d.ts.map +1 -0
  74. package/dist/components/fluid-hover-indicator.d.ts +28 -0
  75. package/dist/components/fluid-hover-indicator.d.ts.map +1 -0
  76. package/dist/components/ui/TextCylinder.d.ts +21 -0
  77. package/dist/components/ui/TextCylinder.d.ts.map +1 -0
  78. package/dist/components/ui/button.d.ts +11 -0
  79. package/dist/components/ui/button.d.ts.map +1 -0
  80. package/dist/components/ui/card.d.ts +10 -0
  81. package/dist/components/ui/card.d.ts.map +1 -0
  82. package/dist/components/ui/custom-icon.d.ts +45 -0
  83. package/dist/components/ui/custom-icon.d.ts.map +1 -0
  84. package/dist/components/ui/dotted-glow-background.d.ts +42 -0
  85. package/dist/components/ui/dotted-glow-background.d.ts.map +1 -0
  86. package/dist/components/ui/input.d.ts +4 -0
  87. package/dist/components/ui/input.d.ts.map +1 -0
  88. package/dist/components/ui/label.d.ts +5 -0
  89. package/dist/components/ui/label.d.ts.map +1 -0
  90. package/dist/components/ui/optimized-image.d.ts +12 -0
  91. package/dist/components/ui/optimized-image.d.ts.map +1 -0
  92. package/dist/components/ui/select.d.ts +16 -0
  93. package/dist/components/ui/select.d.ts.map +1 -0
  94. package/dist/components/ui/slider.d.ts +5 -0
  95. package/dist/components/ui/slider.d.ts.map +1 -0
  96. package/dist/components/ui/textarea.d.ts +4 -0
  97. package/dist/components/ui/textarea.d.ts.map +1 -0
  98. package/dist/{index.css → dist/index.css} +945 -908
  99. package/dist/dist/index.css.map +1 -0
  100. package/dist/hooks/use-controlled-state.d.ts +9 -0
  101. package/dist/hooks/use-controlled-state.d.ts.map +1 -0
  102. package/dist/hooks/use-fluid-animation.d.ts +18 -0
  103. package/dist/hooks/use-fluid-animation.d.ts.map +1 -0
  104. package/dist/hooks/use-liquid-glass.d.ts +40 -0
  105. package/dist/hooks/use-liquid-glass.d.ts.map +1 -0
  106. package/dist/hooks/use-sidebar-liquid-glass.d.ts +48 -0
  107. package/dist/hooks/use-sidebar-liquid-glass.d.ts.map +1 -0
  108. package/dist/hooks/use-text-cylinder.d.ts +67 -0
  109. package/dist/hooks/use-text-cylinder.d.ts.map +1 -0
  110. package/dist/index.cjs +13192 -52272
  111. package/dist/index.cjs.map +1 -1
  112. package/dist/index.d.ts +171 -2234
  113. package/dist/index.d.ts.map +1 -0
  114. package/dist/index.js +13131 -52248
  115. package/dist/index.js.map +1 -1
  116. package/dist/lib/get-strict-context.d.ts +10 -0
  117. package/dist/lib/get-strict-context.d.ts.map +1 -0
  118. package/dist/lib/liquid-glass-presets.d.ts +43 -0
  119. package/dist/lib/liquid-glass-presets.d.ts.map +1 -0
  120. package/dist/lib/utils.d.ts +3 -0
  121. package/dist/lib/utils.d.ts.map +1 -0
  122. package/dist/types/sidebar-minimal.d.ts +21 -0
  123. package/dist/types/sidebar-minimal.d.ts.map +1 -0
  124. package/dist/utils/TooltipAnimationController.d.ts +122 -0
  125. package/dist/utils/TooltipAnimationController.d.ts.map +1 -0
  126. package/package.json +113 -106
  127. package/dist/MobileOptimizations.css +0 -570
  128. package/dist/index.css.map +0 -1
  129. package/dist/index.d.cts +0 -2235
  130. package/dist/tooltip-keyframes.css +0 -329
package/CHANGELOG.md CHANGED
@@ -70,57 +70,57 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
70
70
  - **Performance Optimized** - Tree-shakeable and minimal bundle impact
71
71
 
72
72
  ## [0.1.0] - 2025-01-18
73
-
74
- ### Added
75
-
76
- - 🎉 Initial release of `@mks2508/sidebar-headless`
77
- - 🎨 Headless architecture with primitive components
78
- - ⌨️ Full keyboard navigation support (arrows, Home, End)
79
- - ♿ WAI-ARIA accessibility compliant
80
- - 🎭 Advanced animations:
81
- - Fluid hover indicators with spring physics
82
- - Glassmorphism effects (optional)
83
- - 3D tooltip title animations
84
- - Chromatic aberration effects (experimental)
85
- - 🔧 Highly configurable:
86
- - Collapse modes (collapse/hide)
87
- - Layout behaviours (floating/inline)
88
- - Custom dimensions and animations
89
- - Visual style presets
90
- - 🎨 Dark/light mode support via CSS tokens
91
- - 📦 Minimal dependencies (clsx + tailwind-merge)
92
- - 🎯 Full TypeScript support with comprehensive type definitions
93
- - 📚 Complete JSDoc documentation
94
-
95
- ### Components
96
-
97
- - `Sidebar` - Root provider component
98
- - `SidebarNav` - Navigation container
99
- - `SidebarToggle` - Toggle button
100
- - `SidebarContent` - Items container
101
- - `SidebarItem` - Navigation item
102
- - `SidebarIndicator` - Visual hover indicator
103
- - `SidebarFluidIndicator` - Advanced glassmorphism indicator
104
- - `SidebarSafeArea` - Top/bottom safe areas
105
- - `SidebarSubContent` - Tooltip sub-content container
106
- - `SidebarSubLink` - Tooltip navigation link
107
- - `SidebarTooltip` - Generic tooltip component
108
-
109
- ### Hooks
110
-
111
- - `useSidebarContext` - Access sidebar context
112
- - `useSidebarKeyboard` - Keyboard navigation
113
- - `useSidebarIndicator` - Visual indicator management
114
- - `useSubContent` - Sub-content registration
115
-
116
- ### Features
117
-
118
- - Controlled and uncontrolled mode support
119
- - Render props for state access
120
- - Polymorphic components (customizable element types)
121
- - CSS-first approach with `:has()` selector
122
- - Tree-shakeable exports
123
- - Source maps for debugging
124
-
73
+
74
+ ### Added
75
+
76
+ - 🎉 Initial release of `@mks2508/sidebar-headless`
77
+ - 🎨 Headless architecture with primitive components
78
+ - ⌨️ Full keyboard navigation support (arrows, Home, End)
79
+ - ♿ WAI-ARIA accessibility compliant
80
+ - 🎭 Advanced animations:
81
+ - Fluid hover indicators with spring physics
82
+ - Glassmorphism effects (optional)
83
+ - 3D tooltip title animations
84
+ - Chromatic aberration effects (experimental)
85
+ - 🔧 Highly configurable:
86
+ - Collapse modes (collapse/hide)
87
+ - Layout behaviours (floating/inline)
88
+ - Custom dimensions and animations
89
+ - Visual style presets
90
+ - 🎨 Dark/light mode support via CSS tokens
91
+ - 📦 Minimal dependencies (clsx + tailwind-merge)
92
+ - 🎯 Full TypeScript support with comprehensive type definitions
93
+ - 📚 Complete JSDoc documentation
94
+
95
+ ### Components
96
+
97
+ - `Sidebar` - Root provider component
98
+ - `SidebarNav` - Navigation container
99
+ - `SidebarToggle` - Toggle button
100
+ - `SidebarContent` - Items container
101
+ - `SidebarItem` - Navigation item
102
+ - `SidebarIndicator` - Visual hover indicator
103
+ - `SidebarFluidIndicator` - Advanced glassmorphism indicator
104
+ - `SidebarSafeArea` - Top/bottom safe areas
105
+ - `SidebarSubContent` - Tooltip sub-content container
106
+ - `SidebarSubLink` - Tooltip navigation link
107
+ - `SidebarTooltip` - Generic tooltip component
108
+
109
+ ### Hooks
110
+
111
+ - `useSidebarContext` - Access sidebar context
112
+ - `useSidebarKeyboard` - Keyboard navigation
113
+ - `useSidebarIndicator` - Visual indicator management
114
+ - `useSubContent` - Sub-content registration
115
+
116
+ ### Features
117
+
118
+ - Controlled and uncontrolled mode support
119
+ - Render props for state access
120
+ - Polymorphic components (customizable element types)
121
+ - CSS-first approach with `:has()` selector
122
+ - Tree-shakeable exports
123
+ - Source maps for debugging
124
+
125
125
  [0.2.0]: https://github.com/mks2508/sidebar-headless/releases/tag/v0.2.0
126
- [0.1.0]: https://github.com/mks2508/sidebar-headless/releases/tag/v0.1.0
126
+ [0.1.0]: https://github.com/mks2508/sidebar-headless/releases/tag/v0.1.0
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 MKS2508
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 MKS2508
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
- # @mks2508/sidebar-headless
2
-
3
- Headless sidebar component for React with advanced animations, keyboard navigation, and full WAI-ARIA accessibility.
4
-
5
- [![npm version](https://img.shields.io/npm/v/@mks2508/sidebar-headless.svg)](https://www.npmjs.com/package/@mks2508/sidebar-headless)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
7
-
1
+ # @mks2508/sidebar-headless
2
+
3
+ Headless sidebar component for React with advanced animations, keyboard navigation, and full WAI-ARIA accessibility.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@mks2508/sidebar-headless.svg)](https://www.npmjs.com/package/@mks2508/sidebar-headless)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
7
+
8
8
  ## Features
9
9
 
10
10
  - 🎨 **Headless Architecture** - Complete control over styling and behavior
@@ -16,7 +16,7 @@ Headless sidebar component for React with advanced animations, keyboard navigati
16
16
  - 🪶 **Lightweight** - Minimal dependencies (only clsx + tailwind-merge)
17
17
  - 🎨 **Dark/Light Mode** - Automatic theme support via CSS tokens
18
18
  - 🔧 **Highly Configurable** - Extensive customization options
19
-
19
+
20
20
  ## Installation
21
21
 
22
22
  ```bash
@@ -44,7 +44,7 @@ For advanced liquid glass effects (optional):
44
44
  ```bash
45
45
  npm install @liquid-svg-glass/core @liquid-svg-glass/react
46
46
  ```
47
-
47
+
48
48
  ## Quick Start
49
49
 
50
50
  ```tsx
@@ -313,161 +313,161 @@ const version = detectIOSVersion()
313
313
  ## Core Components
314
314
 
315
315
  ### Sidebar (Root Provider)
316
-
317
- The main container that provides context to all child components.
318
-
319
- ```tsx
320
- <Sidebar
321
- defaultOpen={true}
322
- collapseMode="hide"
323
- layoutBehaviour="floating"
324
- >
325
- {/* ... */}
326
- </Sidebar>
327
- ```
328
-
329
- ### SidebarNav
330
-
331
- Navigation container with event management.
332
-
333
- ```tsx
334
- <SidebarNav>
335
- <SidebarToggle />
336
- <SidebarContent>
337
- {/* items */}
338
- </SidebarContent>
339
- </SidebarNav>
340
- ```
341
-
342
- ### SidebarItem
343
-
344
- Individual navigation item with optional sub-content.
345
-
346
- ```tsx
347
- <SidebarItem
348
- href="/dashboard"
349
- icon={<DashboardIcon />}
350
- label="Dashboard"
351
- >
352
- <SidebarSubContent title="Dashboard">
353
- <SidebarSubLink href="/analytics">Analytics</SidebarSubLink>
354
- <SidebarSubLink href="/reports">Reports</SidebarSubLink>
355
- </SidebarSubContent>
356
- </SidebarItem>
357
- ```
358
-
359
- ## Configuration Options
360
-
361
- ### Collapse Modes
362
-
363
- ```tsx
364
- import { SidebarCollapseMode } from '@mks2508/sidebar-headless'
365
-
366
- // Collapse to icon-only width
367
- <Sidebar collapseMode={SidebarCollapseMode.COLLAPSE} />
368
-
369
- // Hide completely
370
- <Sidebar collapseMode={SidebarCollapseMode.HIDE} />
371
- ```
372
-
373
- ### Layout Behaviours
374
-
375
- ```tsx
376
- import { SidebarLayoutBehaviour } from '@mks2508/sidebar-headless'
377
-
378
- // Floating sidebar (doesn't push content)
379
- <Sidebar layoutBehaviour={SidebarLayoutBehaviour.FLOATING} />
380
-
381
- // Inline sidebar (pushes content)
382
- <Sidebar layoutBehaviour={SidebarLayoutBehaviour.INLINE} />
383
- ```
384
-
385
- ### Custom Dimensions
386
-
387
- ```tsx
388
- <Sidebar
389
- dimensions={{
390
- collapsedWidth: "4rem",
391
- expandedWidth: "18rem",
392
- indicatorHeight: "3rem",
393
- tooltipDistance: "16px"
394
- }}
395
- />
396
- ```
397
-
398
- ## Advanced Features
399
-
400
- ### Fluid Indicators
401
-
402
- Enable glassmorphism-style hover indicators:
403
-
404
- ```tsx
405
- <Sidebar
406
- enableFluidIndicator={true}
407
- liquidGlass={{
408
- enableLiquidGlassV2: true,
409
- enableChromaticAberration: true
410
- }}
411
- />
412
- ```
413
-
414
- ### Keyboard Navigation
415
-
416
- Built-in keyboard shortcuts:
417
-
418
- - **Arrow Up/Down**: Navigate between items
419
- - **Home**: Jump to first item
420
- - **End**: Jump to last item
421
- - **Enter**: Activate focused item
422
-
423
- ### Render Props
424
-
425
- Access sidebar state via render props:
426
-
427
- ```tsx
428
- <Sidebar>
429
- {({ open, collapsed }) => (
430
- <div>
431
- <SidebarNav />
432
- <p>Sidebar is {open ? 'open' : 'closed'}</p>
433
- </div>
434
- )}
435
- </Sidebar>
436
- ```
437
-
438
- ## Styling
439
-
440
- The sidebar uses shadcn-style CSS tokens for theming:
441
-
442
- ```css
443
- :root {
444
- --sidebar: oklch(98% 0 0);
445
- --sidebar-foreground: oklch(20% 0 0);
446
- --sidebar-primary: oklch(55% 0.2 250);
447
- --sidebar-accent: oklch(95% 0.01 250);
448
- --sidebar-border: oklch(90% 0.01 250);
449
- --sidebar-ring: oklch(55% 0.2 250);
450
- }
451
-
452
- .dark {
453
- --sidebar: oklch(17% 0 0);
454
- --sidebar-foreground: oklch(90% 0 0);
455
- /* ... */
456
- }
457
- ```
458
-
459
- ## TypeScript Support
460
-
461
- Full TypeScript support with comprehensive type definitions:
462
-
463
- ```tsx
464
- import type {
465
- SidebarProps,
466
- SidebarItemProps,
467
- SidebarContextValue
468
- } from '@mks2508/sidebar-headless'
469
- ```
470
-
316
+
317
+ The main container that provides context to all child components.
318
+
319
+ ```tsx
320
+ <Sidebar
321
+ defaultOpen={true}
322
+ collapseMode="hide"
323
+ layoutBehaviour="floating"
324
+ >
325
+ {/* ... */}
326
+ </Sidebar>
327
+ ```
328
+
329
+ ### SidebarNav
330
+
331
+ Navigation container with event management.
332
+
333
+ ```tsx
334
+ <SidebarNav>
335
+ <SidebarToggle />
336
+ <SidebarContent>
337
+ {/* items */}
338
+ </SidebarContent>
339
+ </SidebarNav>
340
+ ```
341
+
342
+ ### SidebarItem
343
+
344
+ Individual navigation item with optional sub-content.
345
+
346
+ ```tsx
347
+ <SidebarItem
348
+ href="/dashboard"
349
+ icon={<DashboardIcon />}
350
+ label="Dashboard"
351
+ >
352
+ <SidebarSubContent title="Dashboard">
353
+ <SidebarSubLink href="/analytics">Analytics</SidebarSubLink>
354
+ <SidebarSubLink href="/reports">Reports</SidebarSubLink>
355
+ </SidebarSubContent>
356
+ </SidebarItem>
357
+ ```
358
+
359
+ ## Configuration Options
360
+
361
+ ### Collapse Modes
362
+
363
+ ```tsx
364
+ import { SidebarCollapseMode } from '@mks2508/sidebar-headless'
365
+
366
+ // Collapse to icon-only width
367
+ <Sidebar collapseMode={SidebarCollapseMode.COLLAPSE} />
368
+
369
+ // Hide completely
370
+ <Sidebar collapseMode={SidebarCollapseMode.HIDE} />
371
+ ```
372
+
373
+ ### Layout Behaviours
374
+
375
+ ```tsx
376
+ import { SidebarLayoutBehaviour } from '@mks2508/sidebar-headless'
377
+
378
+ // Floating sidebar (doesn't push content)
379
+ <Sidebar layoutBehaviour={SidebarLayoutBehaviour.FLOATING} />
380
+
381
+ // Inline sidebar (pushes content)
382
+ <Sidebar layoutBehaviour={SidebarLayoutBehaviour.INLINE} />
383
+ ```
384
+
385
+ ### Custom Dimensions
386
+
387
+ ```tsx
388
+ <Sidebar
389
+ dimensions={{
390
+ collapsedWidth: "4rem",
391
+ expandedWidth: "18rem",
392
+ indicatorHeight: "3rem",
393
+ tooltipDistance: "16px"
394
+ }}
395
+ />
396
+ ```
397
+
398
+ ## Advanced Features
399
+
400
+ ### Fluid Indicators
401
+
402
+ Enable glassmorphism-style hover indicators:
403
+
404
+ ```tsx
405
+ <Sidebar
406
+ enableFluidIndicator={true}
407
+ liquidGlass={{
408
+ enableLiquidGlassV2: true,
409
+ enableChromaticAberration: true
410
+ }}
411
+ />
412
+ ```
413
+
414
+ ### Keyboard Navigation
415
+
416
+ Built-in keyboard shortcuts:
417
+
418
+ - **Arrow Up/Down**: Navigate between items
419
+ - **Home**: Jump to first item
420
+ - **End**: Jump to last item
421
+ - **Enter**: Activate focused item
422
+
423
+ ### Render Props
424
+
425
+ Access sidebar state via render props:
426
+
427
+ ```tsx
428
+ <Sidebar>
429
+ {({ open, collapsed }) => (
430
+ <div>
431
+ <SidebarNav />
432
+ <p>Sidebar is {open ? 'open' : 'closed'}</p>
433
+ </div>
434
+ )}
435
+ </Sidebar>
436
+ ```
437
+
438
+ ## Styling
439
+
440
+ The sidebar uses shadcn-style CSS tokens for theming:
441
+
442
+ ```css
443
+ :root {
444
+ --sidebar: oklch(98% 0 0);
445
+ --sidebar-foreground: oklch(20% 0 0);
446
+ --sidebar-primary: oklch(55% 0.2 250);
447
+ --sidebar-accent: oklch(95% 0.01 250);
448
+ --sidebar-border: oklch(90% 0.01 250);
449
+ --sidebar-ring: oklch(55% 0.2 250);
450
+ }
451
+
452
+ .dark {
453
+ --sidebar: oklch(17% 0 0);
454
+ --sidebar-foreground: oklch(90% 0 0);
455
+ /* ... */
456
+ }
457
+ ```
458
+
459
+ ## TypeScript Support
460
+
461
+ Full TypeScript support with comprehensive type definitions:
462
+
463
+ ```tsx
464
+ import type {
465
+ SidebarProps,
466
+ SidebarItemProps,
467
+ SidebarContextValue
468
+ } from '@mks2508/sidebar-headless'
469
+ ```
470
+
471
471
  ## Performance & Troubleshooting
472
472
 
473
473
  ### Performance Tips
@@ -596,7 +596,7 @@ Enable debug mode to see internal state and iOS detection:
596
596
  - Material Design navigation patterns compatible
597
597
  - Back gesture handling respected
598
598
  - Dynamic viewport units supported
599
-
599
+
600
600
  ## API Reference
601
601
 
602
602
  ### MobileBottomNav Components
@@ -0,0 +1,65 @@
1
+ /**
2
+ * @fileoverview MobileBottomNav component with slot architecture
3
+ * @description A composable bottom navigation component optimized for mobile devices
4
+ * @module MobileBottomNav
5
+ * @version 2.0.0 - iOS 26 compatibility update
6
+ */
7
+ import * as React from "react";
8
+ import { type RootProps, type NavListProps, type NavItemProps, NavSize } from "./types";
9
+ import "./MobileOptimizations.css";
10
+ /**
11
+ * Spacer component to prevent content from being hidden under navigation
12
+ *
13
+ * @component
14
+ * @example
15
+ * \`\`\`tsx
16
+ * <main>
17
+ * {content}
18
+ * <MobileBottomNav.Spacer />
19
+ * </main>
20
+ * \`\`\`
21
+ *
22
+ * @param {object} props - Component props
23
+ * @returns {React.ReactElement} Spacer element
24
+ */
25
+ interface SpacerProps {
26
+ /** Additional CSS classes */
27
+ className?: string;
28
+ /** Size matching the navigation */
29
+ size?: NavSize;
30
+ }
31
+ /**
32
+ * MobileBottomNav compound component
33
+ *
34
+ * A fully accessible, mobile-optimized bottom navigation with:
35
+ * - Slot-based architecture (Root, NavList, NavItem)
36
+ * - Glassmorphism visual effects
37
+ * - Motion animations
38
+ * - Safe area support for notched devices
39
+ * - Headless mode for custom styling
40
+ *
41
+ * @example
42
+ * \`\`\`tsx
43
+ * <MobileBottomNav.Root variant={NavVariant.GLASS}>
44
+ * <MobileBottomNav.NavList>
45
+ * <MobileBottomNav.NavItem
46
+ * icon={<Home />}
47
+ * label="Home"
48
+ * state={NavItemState.ACTIVE}
49
+ * />
50
+ * <MobileBottomNav.NavItem
51
+ * icon={<Search />}
52
+ * label="Search"
53
+ * />
54
+ * </MobileBottomNav.NavList>
55
+ * </MobileBottomNav.Root>
56
+ * \`\`\`
57
+ */
58
+ export declare const MobileBottomNav: {
59
+ Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
60
+ NavList: React.ForwardRefExoticComponent<NavListProps & React.RefAttributes<HTMLUListElement>>;
61
+ NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement>>;
62
+ Spacer: React.FC<SpacerProps>;
63
+ };
64
+ export default MobileBottomNav;
65
+ //# sourceMappingURL=MobileBottomNav.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MobileBottomNav.d.ts","sourceRoot":"","sources":["../../../src/components/BottomNavBar/MobileBottomNav.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EAGjB,OAAO,EASR,MAAM,SAAS,CAAA;AAWhB,OAAO,2BAA2B,CAAA;AAwWlC;;;;;;;;;;;;;;GAcG;AACH,UAAU,WAAW;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,eAAe;;;;;CAK3B,CAAA;AAED,eAAe,eAAe,CAAA"}
@@ -0,0 +1,94 @@
1
+ /**
2
+ * @fileoverview CVA style variants for MobileBottomNav component
3
+ * @description Headless-friendly style system using class-variance-authority
4
+ * @module MobileBottomNav/styles
5
+ * @version 1.0.0
6
+ */
7
+ import { type VariantProps } from "class-variance-authority";
8
+ import { NavVariant, NavSize, NavItemState, LabelPosition, IconSize } from "./types";
9
+ /**
10
+ * Root container styles with variant support
11
+ * @description Styles for the main navigation wrapper
12
+ */
13
+ export declare const rootVariants: (props?: ({
14
+ variant?: NavVariant | null | undefined;
15
+ size?: NavSize | null | undefined;
16
+ visible?: boolean | null | undefined;
17
+ full?: boolean | null | undefined;
18
+ rounded?: "full" | "lg" | "md" | "none" | "sm" | "xl" | null | undefined;
19
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
20
+ /**
21
+ * Extract variant props type for Root
22
+ */
23
+ export type RootVariantProps = VariantProps<typeof rootVariants>;
24
+ /**
25
+ * Navigation list styles
26
+ * @description Styles for the ul element containing nav items
27
+ */
28
+ export declare const navListVariants: (props?: ({
29
+ size?: NavSize | null | undefined;
30
+ justify?: "around" | "between" | "center" | "end" | "evenly" | "start" | null | undefined;
31
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
32
+ /**
33
+ * Extract variant props type for NavList
34
+ */
35
+ export type NavListVariantProps = VariantProps<typeof navListVariants>;
36
+ /**
37
+ * Navigation item styles
38
+ * @description Styles for individual navigation buttons/links
39
+ */
40
+ export declare const navItemVariants: (props?: ({
41
+ state?: NavItemState | null | undefined;
42
+ labelPosition?: LabelPosition | null | undefined;
43
+ size?: NavSize | null | undefined;
44
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
45
+ /**
46
+ * Extract variant props type for NavItem
47
+ */
48
+ export type NavItemVariantProps = VariantProps<typeof navItemVariants>;
49
+ /**
50
+ * Icon container styles
51
+ * @description Styles for the icon wrapper
52
+ */
53
+ export declare const iconVariants: (props?: ({
54
+ size?: IconSize | null | undefined;
55
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
56
+ /**
57
+ * Extract variant props type for Icon
58
+ */
59
+ export type IconVariantProps = VariantProps<typeof iconVariants>;
60
+ /**
61
+ * Label text styles
62
+ * @description Styles for the navigation item label
63
+ */
64
+ export declare const labelVariants: (props?: ({
65
+ position?: LabelPosition | null | undefined;
66
+ size?: NavSize | null | undefined;
67
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
68
+ /**
69
+ * Extract variant props type for Label
70
+ */
71
+ export type LabelVariantProps = VariantProps<typeof labelVariants>;
72
+ /**
73
+ * Badge indicator styles
74
+ * @description Styles for notification badges on nav items
75
+ */
76
+ export declare const badgeVariants: (props?: ({
77
+ type?: "count" | "dot" | null | undefined;
78
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
79
+ /**
80
+ * Extract variant props type for Badge
81
+ */
82
+ export type BadgeVariantProps = VariantProps<typeof badgeVariants>;
83
+ /**
84
+ * Spacer styles to prevent content from going under navigation
85
+ * @description Used as a placeholder element below main content
86
+ */
87
+ export declare const spacerVariants: (props?: ({
88
+ size?: NavSize | null | undefined;
89
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
90
+ /**
91
+ * Extract variant props type for Spacer
92
+ */
93
+ export type SpacerVariantProps = VariantProps<typeof spacerVariants>;
94
+ //# sourceMappingURL=MobileBottomNav.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MobileBottomNav.styles.d.ts","sourceRoot":"","sources":["../../../src/components/BottomNavBar/MobileBottomNav.styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAMpF;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;8EAiFxB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAMhE;;;GAGG;AACH,eAAO,MAAM,eAAe;;;8EAoC3B,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAMtE;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;8EA2D3B,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAMtE;;;GAGG;AACH,eAAO,MAAM,YAAY;;8EAcvB,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAMhE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;8EAuBxB,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAMlE;;;GAGG;AACH,eAAO,MAAM,aAAa;;8EAuBzB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAMlE;;;GAGG;AACH,eAAO,MAAM,cAAc;;8EAczB,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA"}