@neynar/ui 0.3.0 → 0.4.0
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/.llm/accordion-content.llm.md +67 -0
- package/.llm/accordion-item.llm.md +61 -0
- package/.llm/accordion-trigger.llm.md +69 -0
- package/.llm/accordion.llm.md +88 -0
- package/.llm/alert-description.llm.md +78 -0
- package/.llm/alert-dialog-action.llm.md +51 -0
- package/.llm/alert-dialog-cancel.llm.md +48 -0
- package/.llm/alert-dialog-content.llm.md +88 -0
- package/.llm/alert-dialog-description.llm.md +53 -0
- package/.llm/alert-dialog-footer.llm.md +41 -0
- package/.llm/alert-dialog-header.llm.md +39 -0
- package/.llm/alert-dialog-overlay.llm.md +44 -0
- package/.llm/alert-dialog-portal.llm.md +41 -0
- package/.llm/alert-dialog-title.llm.md +46 -0
- package/.llm/alert-dialog-trigger.llm.md +40 -0
- package/.llm/alert-dialog.llm.md +80 -0
- package/.llm/alert-title.llm.md +48 -0
- package/.llm/alert.llm.md +92 -0
- package/.llm/aspect-ratio.llm.md +41 -0
- package/.llm/avatar-fallback.llm.md +41 -0
- package/.llm/avatar-image.llm.md +48 -0
- package/.llm/avatar.llm.md +35 -0
- package/.llm/badge.llm.md +117 -0
- package/.llm/blockquote.llm.md +55 -0
- package/.llm/body-text-large.llm.md +49 -0
- package/.llm/body-text-small.llm.md +49 -0
- package/.llm/body-text.llm.md +52 -0
- package/.llm/breadcrumb-ellipsis.llm.md +73 -0
- package/.llm/breadcrumb-item.llm.md +53 -0
- package/.llm/breadcrumb-link.llm.md +84 -0
- package/.llm/breadcrumb-list.llm.md +54 -0
- package/.llm/breadcrumb-page.llm.md +52 -0
- package/.llm/breadcrumb-separator.llm.md +60 -0
- package/.llm/breadcrumb.llm.md +110 -0
- package/.llm/button-group-separator.llm.md +53 -0
- package/.llm/button-group-text.llm.md +56 -0
- package/.llm/button-group.llm.md +81 -0
- package/.llm/button.llm.md +281 -0
- package/.llm/calendar-day-button.llm.md +57 -0
- package/.llm/calendar.llm.md +340 -0
- package/.llm/caption.llm.md +48 -0
- package/.llm/card-action.llm.md +64 -0
- package/.llm/card-content.llm.md +48 -0
- package/.llm/card-description.llm.md +46 -0
- package/.llm/card-footer.llm.md +56 -0
- package/.llm/card-header.llm.md +53 -0
- package/.llm/card-title.llm.md +43 -0
- package/.llm/card.llm.md +100 -0
- package/.llm/carousel-content.llm.md +77 -0
- package/.llm/carousel-item.llm.md +96 -0
- package/.llm/carousel-next.llm.md +95 -0
- package/.llm/carousel-previous.llm.md +95 -0
- package/.llm/carousel.llm.md +211 -0
- package/.llm/chart-config.llm.md +71 -0
- package/.llm/chart-container.llm.md +148 -0
- package/.llm/chart-legend-content.llm.md +85 -0
- package/.llm/chart-legend.llm.md +144 -0
- package/.llm/chart-style.llm.md +28 -0
- package/.llm/chart-tooltip-content.llm.md +149 -0
- package/.llm/chart-tooltip.llm.md +184 -0
- package/.llm/checkbox.llm.md +100 -0
- package/.llm/cn.llm.md +46 -0
- package/.llm/code.llm.md +45 -0
- package/.llm/collapsible-content.llm.md +109 -0
- package/.llm/collapsible-trigger.llm.md +75 -0
- package/.llm/collapsible.llm.md +109 -0
- package/.llm/combobox-option.llm.md +53 -0
- package/.llm/combobox.llm.md +208 -0
- package/.llm/command-dialog.llm.md +112 -0
- package/.llm/command-empty.llm.md +63 -0
- package/.llm/command-group.llm.md +83 -0
- package/.llm/command-input.llm.md +82 -0
- package/.llm/command-item.llm.md +97 -0
- package/.llm/command-list.llm.md +53 -0
- package/.llm/command-loading.llm.md +48 -0
- package/.llm/command-separator.llm.md +44 -0
- package/.llm/command-shortcut.llm.md +63 -0
- package/.llm/command.llm.md +147 -0
- package/.llm/container.llm.md +236 -0
- package/.llm/context-menu-checkbox-item.llm.md +97 -0
- package/.llm/context-menu-content.llm.md +91 -0
- package/.llm/context-menu-group.llm.md +61 -0
- package/.llm/context-menu-item.llm.md +94 -0
- package/.llm/context-menu-label.llm.md +60 -0
- package/.llm/context-menu-portal.llm.md +49 -0
- package/.llm/context-menu-radio-group.llm.md +66 -0
- package/.llm/context-menu-radio-item.llm.md +76 -0
- package/.llm/context-menu-separator.llm.md +51 -0
- package/.llm/context-menu-shortcut.llm.md +57 -0
- package/.llm/context-menu-sub-content.llm.md +90 -0
- package/.llm/context-menu-sub-trigger.llm.md +73 -0
- package/.llm/context-menu-sub.llm.md +61 -0
- package/.llm/context-menu-trigger.llm.md +53 -0
- package/.llm/context-menu.llm.md +103 -0
- package/.llm/date-picker.llm.md +90 -0
- package/.llm/dialog-close.llm.md +61 -0
- package/.llm/dialog-content.llm.md +128 -0
- package/.llm/dialog-description.llm.md +44 -0
- package/.llm/dialog-footer.llm.md +38 -0
- package/.llm/dialog-header.llm.md +40 -0
- package/.llm/dialog-overlay.llm.md +57 -0
- package/.llm/dialog-portal.llm.md +47 -0
- package/.llm/dialog-title.llm.md +41 -0
- package/.llm/dialog-trigger.llm.md +51 -0
- package/.llm/dialog.llm.md +113 -0
- package/.llm/drawer-close.llm.md +53 -0
- package/.llm/drawer-content.llm.md +58 -0
- package/.llm/drawer-description.llm.md +54 -0
- package/.llm/drawer-footer.llm.md +67 -0
- package/.llm/drawer-header.llm.md +60 -0
- package/.llm/drawer-overlay.llm.md +40 -0
- package/.llm/drawer-portal.llm.md +42 -0
- package/.llm/drawer-title.llm.md +51 -0
- package/.llm/drawer-trigger.llm.md +44 -0
- package/.llm/drawer.llm.md +194 -0
- package/.llm/dropdown-menu-checkbox-item.llm.md +111 -0
- package/.llm/dropdown-menu-content.llm.md +109 -0
- package/.llm/dropdown-menu-group.llm.md +38 -0
- package/.llm/dropdown-menu-item.llm.md +94 -0
- package/.llm/dropdown-menu-label.llm.md +66 -0
- package/.llm/dropdown-menu-portal.llm.md +32 -0
- package/.llm/dropdown-menu-radio-group.llm.md +73 -0
- package/.llm/dropdown-menu-radio-item.llm.md +92 -0
- package/.llm/dropdown-menu-separator.llm.md +55 -0
- package/.llm/dropdown-menu-shortcut.llm.md +74 -0
- package/.llm/dropdown-menu-sub-content.llm.md +80 -0
- package/.llm/dropdown-menu-sub-trigger.llm.md +84 -0
- package/.llm/dropdown-menu-sub.llm.md +74 -0
- package/.llm/dropdown-menu-trigger.llm.md +48 -0
- package/.llm/dropdown-menu.llm.md +120 -0
- package/.llm/empty-content.llm.md +103 -0
- package/.llm/empty-description.llm.md +70 -0
- package/.llm/empty-header.llm.md +64 -0
- package/.llm/empty-media.llm.md +81 -0
- package/.llm/empty-state.llm.md +174 -0
- package/.llm/empty-title.llm.md +54 -0
- package/.llm/empty.llm.md +158 -0
- package/.llm/field-content.llm.md +28 -0
- package/.llm/field-description.llm.md +28 -0
- package/.llm/field-error.llm.md +41 -0
- package/.llm/field-group.llm.md +84 -0
- package/.llm/field-label.llm.md +28 -0
- package/.llm/field-legend.llm.md +77 -0
- package/.llm/field-separator.llm.md +35 -0
- package/.llm/field-set.llm.md +80 -0
- package/.llm/field-title.llm.md +28 -0
- package/.llm/field.llm.md +35 -0
- package/.llm/hover-card-content.llm.md +167 -0
- package/.llm/hover-card-trigger.llm.md +65 -0
- package/.llm/hover-card.llm.md +121 -0
- package/.llm/input-group-addon.llm.md +91 -0
- package/.llm/input-group-button.llm.md +120 -0
- package/.llm/input-group-input.llm.md +145 -0
- package/.llm/input-group-text.llm.md +75 -0
- package/.llm/input-group-textarea.llm.md +157 -0
- package/.llm/input-group.llm.md +108 -0
- package/.llm/input.llm.md +319 -0
- package/.llm/item-actions.llm.md +77 -0
- package/.llm/item-content.llm.md +73 -0
- package/.llm/item-description.llm.md +61 -0
- package/.llm/item-footer.llm.md +68 -0
- package/.llm/item-group.llm.md +73 -0
- package/.llm/item-header.llm.md +66 -0
- package/.llm/item-media.llm.md +75 -0
- package/.llm/item-separator.llm.md +80 -0
- package/.llm/item-title.llm.md +59 -0
- package/.llm/item.llm.md +115 -0
- package/.llm/kbd-group.llm.md +71 -0
- package/.llm/kbd.llm.md +71 -0
- package/.llm/label.llm.md +145 -0
- package/.llm/menubar-checkbox-item.llm.md +66 -0
- package/.llm/menubar-content.llm.md +128 -0
- package/.llm/menubar-group.llm.md +40 -0
- package/.llm/menubar-item.llm.md +62 -0
- package/.llm/menubar-label.llm.md +40 -0
- package/.llm/menubar-menu.llm.md +32 -0
- package/.llm/menubar-portal.llm.md +38 -0
- package/.llm/menubar-radio-group.llm.md +39 -0
- package/.llm/menubar-radio-item.llm.md +59 -0
- package/.llm/menubar-separator.llm.md +35 -0
- package/.llm/menubar-shortcut.llm.md +37 -0
- package/.llm/menubar-sub-content.llm.md +127 -0
- package/.llm/menubar-sub-trigger.llm.md +51 -0
- package/.llm/menubar-sub.llm.md +53 -0
- package/.llm/menubar-trigger.llm.md +37 -0
- package/.llm/menubar.llm.md +115 -0
- package/.llm/navigation-menu-content.llm.md +116 -0
- package/.llm/navigation-menu-indicator.llm.md +68 -0
- package/.llm/navigation-menu-item.llm.md +62 -0
- package/.llm/navigation-menu-link.llm.md +109 -0
- package/.llm/navigation-menu-list.llm.md +52 -0
- package/.llm/navigation-menu-trigger-style.llm.md +22 -0
- package/.llm/navigation-menu-trigger.llm.md +57 -0
- package/.llm/navigation-menu-viewport.llm.md +51 -0
- package/.llm/navigation-menu.llm.md +184 -0
- package/.llm/overline.llm.md +51 -0
- package/.llm/page-title.llm.md +52 -0
- package/.llm/pagination-content.llm.md +60 -0
- package/.llm/pagination-ellipsis.llm.md +107 -0
- package/.llm/pagination-item.llm.md +59 -0
- package/.llm/pagination-link.llm.md +150 -0
- package/.llm/pagination-next.llm.md +115 -0
- package/.llm/pagination-previous.llm.md +115 -0
- package/.llm/pagination.llm.md +190 -0
- package/.llm/popover-anchor.llm.md +53 -0
- package/.llm/popover-content.llm.md +109 -0
- package/.llm/popover-trigger.llm.md +54 -0
- package/.llm/popover.llm.md +116 -0
- package/.llm/progress.llm.md +76 -0
- package/.llm/radio-group-indicator.llm.md +28 -0
- package/.llm/radio-group-item.llm.md +40 -0
- package/.llm/radio-group.llm.md +76 -0
- package/.llm/resizable-handle.llm.md +156 -0
- package/.llm/resizable-panel-group.llm.md +149 -0
- package/.llm/resizable-panel.llm.md +157 -0
- package/.llm/scroll-area-corner.llm.md +41 -0
- package/.llm/scroll-area-thumb.llm.md +39 -0
- package/.llm/scroll-area-viewport.llm.md +60 -0
- package/.llm/scroll-area.llm.md +125 -0
- package/.llm/scroll-bar.llm.md +78 -0
- package/.llm/sdk-items-registry.json +2984 -0
- package/.llm/section-title.llm.md +48 -0
- package/.llm/select-content.llm.md +139 -0
- package/.llm/select-group.llm.md +60 -0
- package/.llm/select-item.llm.md +75 -0
- package/.llm/select-label.llm.md +62 -0
- package/.llm/select-scroll-down-button.llm.md +45 -0
- package/.llm/select-scroll-up-button.llm.md +45 -0
- package/.llm/select-separator.llm.md +59 -0
- package/.llm/select-trigger.llm.md +66 -0
- package/.llm/select-value.llm.md +67 -0
- package/.llm/select.llm.md +159 -0
- package/.llm/separator.llm.md +129 -0
- package/.llm/sheet-close.llm.md +49 -0
- package/.llm/sheet-content.llm.md +115 -0
- package/.llm/sheet-description.llm.md +62 -0
- package/.llm/sheet-footer.llm.md +64 -0
- package/.llm/sheet-header.llm.md +52 -0
- package/.llm/sheet-title.llm.md +53 -0
- package/.llm/sheet-trigger.llm.md +46 -0
- package/.llm/sheet.llm.md +126 -0
- package/.llm/sidebar-content.llm.md +63 -0
- package/.llm/sidebar-footer.llm.md +50 -0
- package/.llm/sidebar-group-action.llm.md +60 -0
- package/.llm/sidebar-group-content.llm.md +64 -0
- package/.llm/sidebar-group-label.llm.md +53 -0
- package/.llm/sidebar-group.llm.md +56 -0
- package/.llm/sidebar-header.llm.md +67 -0
- package/.llm/sidebar-input.llm.md +50 -0
- package/.llm/sidebar-inset.llm.md +52 -0
- package/.llm/sidebar-menu-action.llm.md +84 -0
- package/.llm/sidebar-menu-badge.llm.md +60 -0
- package/.llm/sidebar-menu-button.llm.md +103 -0
- package/.llm/sidebar-menu-item.llm.md +75 -0
- package/.llm/sidebar-menu-skeleton.llm.md +76 -0
- package/.llm/sidebar-menu-sub-button.llm.md +85 -0
- package/.llm/sidebar-menu-sub-item.llm.md +54 -0
- package/.llm/sidebar-menu-sub.llm.md +74 -0
- package/.llm/sidebar-menu.llm.md +65 -0
- package/.llm/sidebar-provider.llm.md +79 -0
- package/.llm/sidebar-rail.llm.md +34 -0
- package/.llm/sidebar-separator.llm.md +57 -0
- package/.llm/sidebar-trigger.llm.md +49 -0
- package/.llm/sidebar.llm.md +129 -0
- package/.llm/skeleton.llm.md +134 -0
- package/.llm/slider.llm.md +173 -0
- package/.llm/spinner.llm.md +182 -0
- package/.llm/stack.llm.md +28 -0
- package/.llm/subsection-title.llm.md +46 -0
- package/.llm/switch.llm.md +76 -0
- package/.llm/table-body.llm.md +36 -0
- package/.llm/table-caption.llm.md +48 -0
- package/.llm/table-cell.llm.md +53 -0
- package/.llm/table-footer.llm.md +41 -0
- package/.llm/table-head.llm.md +69 -0
- package/.llm/table-header.llm.md +41 -0
- package/.llm/table-row.llm.md +42 -0
- package/.llm/table.llm.md +123 -0
- package/.llm/tabs-content.llm.md +47 -0
- package/.llm/tabs-list.llm.md +41 -0
- package/.llm/tabs-trigger.llm.md +47 -0
- package/.llm/tabs.llm.md +71 -0
- package/.llm/text-field.llm.md +327 -0
- package/.llm/textarea.llm.md +311 -0
- package/.llm/theme-preference.llm.md +25 -0
- package/.llm/theme-toggle.llm.md +57 -0
- package/.llm/theme.llm.md +14 -0
- package/.llm/toaster.llm.md +193 -0
- package/.llm/toggle-group-item.llm.md +59 -0
- package/.llm/toggle-group.llm.md +101 -0
- package/.llm/toggle.llm.md +40 -0
- package/.llm/tooltip-content.llm.md +185 -0
- package/.llm/tooltip-provider.llm.md +68 -0
- package/.llm/tooltip-trigger.llm.md +70 -0
- package/.llm/tooltip.llm.md +129 -0
- package/.llm/use-carousel.llm.md +55 -0
- package/.llm/use-command-state.llm.md +32 -0
- package/.llm/use-is-mobile.llm.md +73 -0
- package/.llm/use-sidebar.llm.md +61 -0
- package/dist/components/ui/scroll-area.d.ts +5 -5
- package/dist/components/ui/scroll-area.d.ts.map +1 -1
- package/dist/components/ui/stack.d.ts.map +1 -1
- package/dist/components/ui/stories/scroll-area.stories.d.ts +1 -1
- package/dist/components/ui/stories/typography.stories.d.ts +8 -108
- package/dist/components/ui/stories/typography.stories.d.ts.map +1 -1
- package/dist/components/ui/theme-toggle.d.ts +0 -3
- package/dist/components/ui/theme-toggle.d.ts.map +1 -1
- package/dist/components/ui/theme.d.ts.map +1 -1
- package/dist/components/ui/typography.d.ts +211 -474
- package/dist/components/ui/typography.d.ts.map +1 -1
- package/dist/index.js +5160 -9875
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/ui/stack.tsx +3 -1
- package/src/components/ui/stories/typography.stories.tsx +261 -1512
- package/src/components/ui/theme-toggle.tsx +1 -3
- package/src/components/ui/theme.tsx +6 -1
- package/src/components/ui/typography.tsx +416 -1136
- package/src/styles/globals.css +57 -106
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# useIsMobile
|
|
2
|
+
|
|
3
|
+
**Type**: hook
|
|
4
|
+
|
|
5
|
+
Hook for detecting mobile viewport width based on Tailwind CSS breakpoints A React hook that monitors viewport width and returns true when the width is less than 768px (Tailwind's `md` breakpoint). This hook provides a consistent way to conditionally render mobile and desktop layouts, following the same responsive patterns used throughout the shadcn/ui ecosystem. The hook uses `window.matchMedia` for efficient viewport monitoring and properly handles server-side rendering by returning `false` initially, then updating on the client side.
|
|
6
|
+
|
|
7
|
+
## API Surface
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
import { useIsMobile } from '@neynar/ui';
|
|
11
|
+
|
|
12
|
+
export function useIsMobile(): ReturnType<typeof useIsMobile> { ... }
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Returns
|
|
16
|
+
|
|
17
|
+
**Return Type**: `ReturnType<typeof useIsMobile>`
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
**Description**: `true` if viewport width is less than 768px, `false` otherwise
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { useIsMobile } from '@neynar/ui';
|
|
25
|
+
|
|
26
|
+
const result = useIsMobile();
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Examples
|
|
30
|
+
|
|
31
|
+
### Example 1
|
|
32
|
+
Basic responsive layout switching
|
|
33
|
+
```tsx
|
|
34
|
+
function ResponsiveComponent() {
|
|
35
|
+
const isMobile = useIsMobile();
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<div>
|
|
39
|
+
{isMobile ? (
|
|
40
|
+
<MobileLayout />
|
|
41
|
+
) : (
|
|
42
|
+
<DesktopLayout />
|
|
43
|
+
)}
|
|
44
|
+
</div>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
### Example 2
|
|
49
|
+
Conditional navigation rendering
|
|
50
|
+
```tsx
|
|
51
|
+
function Navigation() {
|
|
52
|
+
const isMobile = useIsMobile();
|
|
53
|
+
|
|
54
|
+
if (isMobile) {
|
|
55
|
+
return <Sheet><MobileNavContent /></Sheet>;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
return <NavigationMenu><DesktopNavContent /></NavigationMenu>;
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
### Example 3
|
|
62
|
+
Responsive component behavior within forms
|
|
63
|
+
```tsx
|
|
64
|
+
function SearchDialog() {
|
|
65
|
+
const isMobile = useIsMobile();
|
|
66
|
+
|
|
67
|
+
if (isMobile) {
|
|
68
|
+
return <Drawer><SearchForm /></Drawer>;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return <Dialog><SearchForm /></Dialog>;
|
|
72
|
+
}
|
|
73
|
+
```
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# useSidebar
|
|
2
|
+
|
|
3
|
+
**Type**: hook
|
|
4
|
+
|
|
5
|
+
Hook to access sidebar state and control functions Provides access to the sidebar's state management including expanded/collapsed states, mobile-specific behavior, and toggle functions. This hook must be used within a SidebarProvider component tree to function properly.
|
|
6
|
+
|
|
7
|
+
## API Surface
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
import { useSidebar } from '@neynar/ui';
|
|
11
|
+
|
|
12
|
+
export function useSidebar(): ReturnType<typeof useSidebar> { ... }
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Returns
|
|
16
|
+
|
|
17
|
+
**Return Type**: `ReturnType<typeof useSidebar>`
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
**Description**: Object containing sidebar state and control functions:
|
|
21
|
+
- `state`: "expanded" | "collapsed" - Current sidebar state
|
|
22
|
+
- `open`: boolean - Whether sidebar is open (desktop)
|
|
23
|
+
- `setOpen`: (open: boolean) => void - Function to control sidebar open state
|
|
24
|
+
- `openMobile`: boolean - Whether sidebar is open on mobile
|
|
25
|
+
- `setOpenMobile`: (open: boolean) => void - Function to control mobile sidebar state
|
|
26
|
+
- `isMobile`: boolean - Whether current viewport is considered mobile
|
|
27
|
+
- `toggleSidebar`: () => void - Function to toggle sidebar state
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
```typescript
|
|
31
|
+
import { useSidebar } from '@neynar/ui';
|
|
32
|
+
|
|
33
|
+
const result = useSidebar();
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Examples
|
|
37
|
+
|
|
38
|
+
### Example 1
|
|
39
|
+
```tsx
|
|
40
|
+
// Basic usage for toggle button
|
|
41
|
+
function ToggleButton() {
|
|
42
|
+
const { state, toggleSidebar } = useSidebar()
|
|
43
|
+
return (
|
|
44
|
+
<button onClick={toggleSidebar}>
|
|
45
|
+
{state === "expanded" ? "Collapse" : "Expand"}
|
|
46
|
+
</button>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
### Example 2
|
|
51
|
+
```tsx
|
|
52
|
+
// Conditional rendering based on state
|
|
53
|
+
function ConditionalContent() {
|
|
54
|
+
const { state, isMobile } = useSidebar()
|
|
55
|
+
if (isMobile) return <MobileOnlyContent />
|
|
56
|
+
return state === "expanded" ? <FullContent /> : <CompactContent />
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
## Throws
|
|
60
|
+
|
|
61
|
+
- When used outside of SidebarProvider context
|
|
@@ -94,7 +94,7 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
|
94
94
|
* @see {@link https://ui.shadcn.com/docs/components/scroll-area} shadcn/ui ScrollArea Documentation
|
|
95
95
|
* @since 1.0.0
|
|
96
96
|
*/
|
|
97
|
-
declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps &
|
|
97
|
+
declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
|
|
98
98
|
/**
|
|
99
99
|
* ScrollBar - Custom styled scrollbar for ScrollArea
|
|
100
100
|
*
|
|
@@ -155,7 +155,7 @@ declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimiti
|
|
|
155
155
|
* @see {@link ScrollArea} Main scrollable container component
|
|
156
156
|
* @since 1.0.0
|
|
157
157
|
*/
|
|
158
|
-
declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps &
|
|
158
|
+
declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
|
|
159
159
|
/**
|
|
160
160
|
* ScrollAreaViewport - The viewport area of the scroll area
|
|
161
161
|
*
|
|
@@ -192,7 +192,7 @@ declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitiv
|
|
|
192
192
|
* @see {@link ScrollArea} Main scrollable container component
|
|
193
193
|
* @since 1.0.0
|
|
194
194
|
*/
|
|
195
|
-
declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaViewportProps &
|
|
195
|
+
declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
|
|
196
196
|
/**
|
|
197
197
|
* ScrollAreaThumb - The draggable thumb element within the scrollbar
|
|
198
198
|
*
|
|
@@ -213,7 +213,7 @@ declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAre
|
|
|
213
213
|
* @see {@link ScrollBar} Parent scrollbar component
|
|
214
214
|
* @since 1.0.0
|
|
215
215
|
*/
|
|
216
|
-
declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaThumbProps &
|
|
216
|
+
declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
|
|
217
217
|
/**
|
|
218
218
|
* ScrollAreaCorner - The corner element where horizontal and vertical scrollbars meet
|
|
219
219
|
*
|
|
@@ -236,6 +236,6 @@ declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaPr
|
|
|
236
236
|
* @see {@link ScrollArea} Main scrollable container component
|
|
237
237
|
* @since 1.0.0
|
|
238
238
|
*/
|
|
239
|
-
declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaCornerProps &
|
|
239
|
+
declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaCornerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
|
|
240
240
|
export { ScrollArea, ScrollBar, ScrollAreaViewport, ScrollAreaThumb, ScrollAreaCorner, };
|
|
241
241
|
//# sourceMappingURL=scroll-area.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAgFnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,QAAA,MAAM,UAAU
|
|
1
|
+
{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAgFnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,QAAA,MAAM,UAAU,gKAmCf,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,QAAA,MAAM,SAAS,yKAmCd,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,QAAA,MAAM,kBAAkB,wKAgBtB,CAAC;AAGH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,eAAe,qKAWnB,CAAC;AAGH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,gBAAgB,sKAWpB,CAAC;AAGH,OAAO,EACL,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../src/components/ui/stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;GAYG;AACH,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAEnD;;;;;GAKG;AACH,KAAK,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;AAwIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiTG;AACH,QAAA,MAAM,KAAK;cAGG,YAAY;gBACV,cAAc;
|
|
1
|
+
{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../src/components/ui/stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;GAYG;AACH,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAEnD;;;;;GAKG;AACH,KAAK,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;AAwIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiTG;AACH,QAAA,MAAM,KAAK;cAGG,YAAY;gBACV,cAAc;wCAiC5B,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { StoryObj } from "@storybook/react-vite";
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<
|
|
4
|
+
component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<never>>;
|
|
5
5
|
parameters: {
|
|
6
6
|
layout: string;
|
|
7
7
|
docs: {
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import type { StoryObj } from "@storybook/react-vite";
|
|
2
|
-
import {
|
|
2
|
+
import { PageTitle } from "../typography";
|
|
3
3
|
/**
|
|
4
4
|
* Typography component stories for design system documentation
|
|
5
5
|
*
|
|
6
|
-
* This story file demonstrates
|
|
7
|
-
*
|
|
8
|
-
* - Variants: Systematic showcase of all available typography variants
|
|
9
|
-
* - InContext: Real-world usage examples for business and design teams
|
|
6
|
+
* This story file demonstrates purpose-named typography components following 2025 best practices.
|
|
7
|
+
* Components are Tailwind-first with semantic HTML defaults and zero abstraction.
|
|
10
8
|
*/
|
|
11
9
|
declare const meta: {
|
|
12
10
|
title: string;
|
|
13
|
-
component: typeof
|
|
11
|
+
component: typeof PageTitle;
|
|
14
12
|
parameters: {
|
|
15
13
|
layout: string;
|
|
16
14
|
docs: {
|
|
@@ -19,118 +17,20 @@ declare const meta: {
|
|
|
19
17
|
};
|
|
20
18
|
};
|
|
21
19
|
};
|
|
22
|
-
argTypes: {
|
|
23
|
-
variant: {
|
|
24
|
-
control: {
|
|
25
|
-
type: "select";
|
|
26
|
-
};
|
|
27
|
-
options: string[];
|
|
28
|
-
description: string;
|
|
29
|
-
};
|
|
30
|
-
color: {
|
|
31
|
-
control: {
|
|
32
|
-
type: "select";
|
|
33
|
-
};
|
|
34
|
-
options: string[];
|
|
35
|
-
description: string;
|
|
36
|
-
};
|
|
37
|
-
align: {
|
|
38
|
-
control: {
|
|
39
|
-
type: "select";
|
|
40
|
-
};
|
|
41
|
-
options: string[];
|
|
42
|
-
description: string;
|
|
43
|
-
};
|
|
44
|
-
transform: {
|
|
45
|
-
control: {
|
|
46
|
-
type: "select";
|
|
47
|
-
};
|
|
48
|
-
options: string[];
|
|
49
|
-
description: string;
|
|
50
|
-
};
|
|
51
|
-
weight: {
|
|
52
|
-
control: {
|
|
53
|
-
type: "select";
|
|
54
|
-
};
|
|
55
|
-
options: string[];
|
|
56
|
-
description: string;
|
|
57
|
-
};
|
|
58
|
-
as: {
|
|
59
|
-
control: {
|
|
60
|
-
type: "select";
|
|
61
|
-
};
|
|
62
|
-
options: string[];
|
|
63
|
-
description: string;
|
|
64
|
-
};
|
|
65
|
-
asChild: {
|
|
66
|
-
control: {
|
|
67
|
-
type: "boolean";
|
|
68
|
-
};
|
|
69
|
-
description: string;
|
|
70
|
-
};
|
|
71
|
-
italic: {
|
|
72
|
-
control: {
|
|
73
|
-
type: "boolean";
|
|
74
|
-
};
|
|
75
|
-
description: string;
|
|
76
|
-
};
|
|
77
|
-
underline: {
|
|
78
|
-
control: {
|
|
79
|
-
type: "boolean";
|
|
80
|
-
};
|
|
81
|
-
description: string;
|
|
82
|
-
};
|
|
83
|
-
strikethrough: {
|
|
84
|
-
control: {
|
|
85
|
-
type: "boolean";
|
|
86
|
-
};
|
|
87
|
-
description: string;
|
|
88
|
-
};
|
|
89
|
-
truncate: {
|
|
90
|
-
control: {
|
|
91
|
-
type: "boolean";
|
|
92
|
-
};
|
|
93
|
-
description: string;
|
|
94
|
-
};
|
|
95
|
-
srOnly: {
|
|
96
|
-
control: {
|
|
97
|
-
type: "boolean";
|
|
98
|
-
};
|
|
99
|
-
description: string;
|
|
100
|
-
};
|
|
101
|
-
children: {
|
|
102
|
-
control: {
|
|
103
|
-
type: "text";
|
|
104
|
-
};
|
|
105
|
-
description: string;
|
|
106
|
-
};
|
|
107
|
-
};
|
|
108
20
|
};
|
|
109
21
|
export default meta;
|
|
110
22
|
type Story = StoryObj<typeof meta>;
|
|
111
23
|
/**
|
|
112
|
-
* Interactive playground for testing
|
|
113
|
-
* Use controls to experiment with different combinations of props.
|
|
24
|
+
* Interactive playground for testing Typography components.
|
|
114
25
|
*/
|
|
115
26
|
export declare const Interactive: Story;
|
|
116
27
|
/**
|
|
117
|
-
* Systematic showcase of all typography
|
|
118
|
-
* Demonstrates the visual hierarchy and
|
|
28
|
+
* Systematic showcase of all typography components.
|
|
29
|
+
* Demonstrates the visual hierarchy and appropriate sizing for web applications.
|
|
119
30
|
*/
|
|
120
|
-
export declare const
|
|
31
|
+
export declare const AllComponents: Story;
|
|
121
32
|
/**
|
|
122
33
|
* Real-world usage examples demonstrating Typography in practical scenarios.
|
|
123
|
-
* Shows how to combine variants with semantic HTML and accessibility features.
|
|
124
34
|
*/
|
|
125
35
|
export declare const InContext: Story;
|
|
126
|
-
/**
|
|
127
|
-
* Showcase of individual semantic typography components for better TypeScript support.
|
|
128
|
-
* Demonstrates the recommended approach using semantic components vs generic Typography.
|
|
129
|
-
*/
|
|
130
|
-
export declare const SemanticComponents: Story;
|
|
131
|
-
/**
|
|
132
|
-
* Complete reference table of all semantic typography components with their defaults and usage.
|
|
133
|
-
* Provides a comprehensive overview for developers to quickly understand each component.
|
|
134
|
-
*/
|
|
135
|
-
export declare const ComponentReference: Story;
|
|
136
36
|
//# sourceMappingURL=typography.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/typography.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"typography.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/typography.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,SAAS,EAUV,MAAM,eAAe,CAAC;AASvB;;;;;GAKG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;CAYwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAoF3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAoOvB,CAAC"}
|
|
@@ -223,8 +223,5 @@ type ThemeToggleProps = {
|
|
|
223
223
|
* @since 1.0.0
|
|
224
224
|
*/
|
|
225
225
|
declare function ThemeToggle({ variant, size, className, showLabel, align, ...props }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
226
|
-
declare namespace ThemeToggle {
|
|
227
|
-
var displayName: string;
|
|
228
|
-
}
|
|
229
226
|
export { ThemeToggle };
|
|
230
227
|
//# sourceMappingURL=theme-toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAShE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AA4H7D,KAAK,gBAAgB,GAAG;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GACrC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiNG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAmB,EACnB,IAAa,EACb,SAAS,EACT,SAAS,EACT,KAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA6DlB;
|
|
1
|
+
{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAShE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AA4H7D,KAAK,gBAAgB,GAAG;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GACrC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiNG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAmB,EACnB,IAAa,EACb,SAAS,EACT,SAAS,EACT,KAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA6DlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme.tsx"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+LG;AACH,wBAAgB,KAAK,4CAwCpB"}
|