@kismet-ux/constellation 1.11.1 → 1.12.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/dist/form/Checkbox/checkbox.js +55 -4
- package/dist/form/Checkbox/checkbox.js.map +1 -1
- package/dist/form/DatePicker/date-picker.js +54 -4
- package/dist/form/DatePicker/date-picker.js.map +1 -1
- package/dist/form/Input/input.css +9 -0
- package/dist/form.d.ts +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/use-keyboard-inset.d.ts +38 -0
- package/dist/hooks/use-keyboard-inset.d.ts.map +1 -0
- package/dist/hooks/use-keyboard-inset.js +76 -0
- package/dist/hooks/use-keyboard-inset.js.map +1 -0
- package/dist/index-B0d2advx.d.ts +354 -0
- package/dist/index-CLUKMTTu.d.ts +354 -0
- package/dist/index-CVEb-8MV.d.ts +566 -0
- package/dist/index-D81GIX01.d.ts +566 -0
- package/dist/index-DOKRFZ3I.d.ts +354 -0
- package/dist/index-DiR9pLJe.d.ts +566 -0
- package/dist/index.d.ts +45 -7
- package/dist/index.js +31 -30
- package/dist/index.js.map +1 -1
- package/dist/layout/AppContentFooter/app-content-footer.css +18 -1
- package/dist/layout/AppContentMain/app-content-main.css +9 -0
- package/dist/layout/AppShell/app-shell.d.ts.map +1 -1
- package/dist/layout/AppShell/app-shell.js +10 -0
- package/dist/layout/AppShell/app-shell.js.map +1 -1
- package/dist/layout/AppSidebarHeader/app-sidebar-header.css +14 -1
- package/dist/layout/AppSidebarHeader/app-sidebar-header.js +29 -1
- package/dist/layout/AppSidebarHeader/app-sidebar-header.js.map +1 -1
- package/dist/layout/Sidebar/sidebar.css +32 -0
- package/dist/layout.d.ts +2 -2
- package/dist/navigation/NavUser/nav-user.js +2 -2
- package/dist/navigation/Sheet/sheet.css +20 -0
- package/dist/navigation/Sheet/sheet.js +28 -3
- package/dist/navigation/Sheet/sheet.js.map +1 -1
- package/dist/navigation.d.ts +1 -1
- package/dist/settings/AppearanceTabs/appearance-tabs.js +26 -1
- package/dist/settings/AppearanceTabs/appearance-tabs.js.map +1 -1
- package/dist/tooltip-X3uiRSnA.d.ts +46 -0
- package/dist/tooltip-zSCQCLLI.d.ts +46 -0
- package/dist/ui.d.ts +2 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
|
+
export { Logo } from './brand/Logo/logo.js';
|
|
2
|
+
export { Checkbox } from './form/Checkbox/checkbox.js';
|
|
3
|
+
export { Combobox } from './form/Combobox/combobox.js';
|
|
4
|
+
export { DatePicker } from './form/DatePicker/date-picker.js';
|
|
5
|
+
export { Input } from './form/Input/input.js';
|
|
6
|
+
export { Label } from './form/Label/label.js';
|
|
7
|
+
export { Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue, __Surface } from './form/Select/select.js';
|
|
1
8
|
export { useFlip } from './hooks/layout/use-flip.js';
|
|
2
9
|
export { useSidebar } from './hooks/layout/use-sidebar.js';
|
|
3
10
|
export { useAlerts } from './hooks/ui/use-alerts.js';
|
|
4
11
|
export { useTableSorting } from './hooks/ui/use-table-sorting.js';
|
|
5
12
|
export { initializeTheme, useAppearance } from './hooks/use-appearance.js';
|
|
6
13
|
export { useInitials } from './hooks/use-initials.js';
|
|
14
|
+
export { useKeyboardInset } from './hooks/use-keyboard-inset.js';
|
|
7
15
|
export { useBreakpoint, useIsMobile } from './hooks/use-mobile.js';
|
|
8
16
|
export { initializeMotion, prefersReducedMotion, useMotion, useReducedMotion } from './hooks/use-motion.js';
|
|
9
|
-
import './index.css';
|
|
10
|
-
export { Alert, AlertBanner, AlertDescription, AlertTitle } from './ui/Alert/alert.js';
|
|
11
|
-
export { AlertProvider } from './ui/Alert/alert-provider.js';
|
|
12
17
|
export { AppContent } from './layout/AppContent/app-content.js';
|
|
13
18
|
export { AppContentFooter } from './layout/AppContentFooter/app-content-footer.js';
|
|
14
19
|
export { AppContentMain } from './layout/AppContentMain/app-content-main.js';
|
|
@@ -16,44 +21,43 @@ export { AppFooter } from './layout/AppFooter/app-footer.js';
|
|
|
16
21
|
export { AppShell } from './layout/AppShell/app-shell.js';
|
|
17
22
|
export { AppSidebar } from './layout/AppSidebar/app-sidebar.js';
|
|
18
23
|
export { AppSidebarHeader } from './layout/AppSidebarHeader/app-sidebar-header.js';
|
|
19
|
-
export {
|
|
24
|
+
export { Collapse } from './layout/Collapse/collapse.js';
|
|
25
|
+
export { Column } from './layout/Column/column.js';
|
|
26
|
+
export { Container } from './layout/Container/container.js';
|
|
27
|
+
export { Grid } from './layout/Grid/grid.js';
|
|
28
|
+
export { Row } from './layout/Row/row.js';
|
|
29
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger } from './layout/Sidebar/sidebar.js';
|
|
30
|
+
export { Skeleton } from './layout/Skeleton/skeleton.js';
|
|
31
|
+
export { Breadcrumbs } from './navigation/Breadcrumbs/breadcrumbs.js';
|
|
32
|
+
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './navigation/DropdownMenu/dropdown-menu.js';
|
|
33
|
+
export { Link } from './navigation/Link/link.js';
|
|
34
|
+
export { NavUser } from './navigation/NavUser/nav-user.js';
|
|
35
|
+
export { RouterProvider, useRouterAdapter } from './navigation/Router/router-context.js';
|
|
36
|
+
export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './navigation/Sheet/sheet.js';
|
|
20
37
|
export { AppearanceToggleDropdown } from './settings/AppearanceDropdown/appearance-dropdown.js';
|
|
38
|
+
export { AppearanceTabs } from './settings/AppearanceTabs/appearance-tabs.js';
|
|
39
|
+
import './index.css';
|
|
40
|
+
export { Heading } from './typography/Heading/heading.js';
|
|
41
|
+
export { TruncatedText } from './typography/TruncatedText/truncated-text.js';
|
|
42
|
+
export { Typography } from './typography/Typography/typography.js';
|
|
43
|
+
export { Alert, AlertBanner, AlertDescription, AlertTitle } from './ui/Alert/alert.js';
|
|
44
|
+
export { persistAlert } from './ui/Alert/alert-persist.js';
|
|
45
|
+
export { AlertProvider } from './ui/Alert/alert-provider.js';
|
|
21
46
|
export { Avatar, AvatarFallback, AvatarImage } from './ui/Avatar/avatar.js';
|
|
22
|
-
export { Breadcrumbs } from './navigation/Breadcrumbs/breadcrumbs.js';
|
|
23
47
|
export { Button } from './ui/Button/button.js';
|
|
24
|
-
export { CONSTELLATION_PORTAL_SELECTOR, isInConstellationPortal } from './utils/portal.js';
|
|
25
|
-
export { Checkbox } from './form/Checkbox/checkbox.js';
|
|
26
48
|
export { Chip } from './ui/Chip/chip.js';
|
|
27
49
|
export { CodeBlock } from './ui/CodeBlock/code-block.js';
|
|
28
|
-
export { Collapse } from './layout/Collapse/collapse.js';
|
|
29
|
-
export { Column } from './layout/Column/column.js';
|
|
30
|
-
export { Combobox } from './form/Combobox/combobox.js';
|
|
31
|
-
export { Container } from './layout/Container/container.js';
|
|
32
|
-
export { DatePicker } from './form/DatePicker/date-picker.js';
|
|
33
50
|
export { DevIndicator } from './ui/DevIndicator/dev-indicator.js';
|
|
34
51
|
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './ui/Dialog/dialog.js';
|
|
35
|
-
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './navigation/DropdownMenu/dropdown-menu.js';
|
|
36
52
|
export { EmptyState } from './ui/EmptyState/empty-state.js';
|
|
37
|
-
export { Grid } from './layout/Grid/grid.js';
|
|
38
|
-
export { Heading } from './typography/Heading/heading.js';
|
|
39
53
|
export { Icon } from './ui/Icon/icon.js';
|
|
40
|
-
export { Input } from './form/Input/input.js';
|
|
41
|
-
export { Label } from './form/Label/label.js';
|
|
42
|
-
export { Link } from './navigation/Link/link.js';
|
|
43
54
|
export { List, ListItem } from './ui/List/list.js';
|
|
44
|
-
export { Logo } from './brand/Logo/logo.js';
|
|
45
|
-
export { NavUser } from './navigation/NavUser/nav-user.js';
|
|
46
55
|
export { Pagination } from './ui/Pagination/pagination.js';
|
|
47
56
|
export { ProgressBar } from './ui/ProgressBar/progress-bar.js';
|
|
48
|
-
export { RouterProvider, useRouterAdapter } from './navigation/Router/router-context.js';
|
|
49
|
-
export { Row } from './layout/Row/row.js';
|
|
50
|
-
export { Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue, __Surface } from './form/Select/select.js';
|
|
51
57
|
export { Separator } from './ui/Separator/separator.js';
|
|
52
|
-
export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './navigation/Sheet/sheet.js';
|
|
53
|
-
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger } from './layout/Sidebar/sidebar.js';
|
|
54
|
-
export { Skeleton } from './layout/Skeleton/skeleton.js';
|
|
55
58
|
export { StatCard } from './ui/StatCard/stat-card.js';
|
|
56
59
|
export { StatusDot } from './ui/StatusDot/status-dot.js';
|
|
60
|
+
export { statusDotVariants } from './ui/StatusDot/status-dot-variants.js';
|
|
57
61
|
export { StepProgress } from './ui/StepProgress/step-progress.js';
|
|
58
62
|
export { Switch } from './ui/Switch/switch.js';
|
|
59
63
|
export { Table, TableBody, TableCard, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortableHeader } from './ui/Table/table.js';
|
|
@@ -62,11 +66,8 @@ export { TableToolbar } from './ui/TableToolbar/table-toolbar.js';
|
|
|
62
66
|
export { Toggle } from './ui/Toggle/toggle.js';
|
|
63
67
|
export { ToggleGroup } from './ui/ToggleGroup/toggle-group.js';
|
|
64
68
|
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/Tooltip/tooltip.js';
|
|
65
|
-
export { TruncatedText } from './typography/TruncatedText/truncated-text.js';
|
|
66
|
-
export { Typography } from './typography/Typography/typography.js';
|
|
67
69
|
export { UserInfo } from './user/UserInfo/user-info.js';
|
|
68
70
|
export { UserMenuContent } from './user/UserMenuContent/user-menu-content.js';
|
|
69
71
|
export { getCsrfToken } from './utils/csrf.js';
|
|
70
|
-
export {
|
|
71
|
-
export { statusDotVariants } from './ui/StatusDot/status-dot-variants.js';
|
|
72
|
+
export { CONSTELLATION_PORTAL_SELECTOR, isInConstellationPortal } from './utils/portal.js';
|
|
72
73
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,26 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
1
2
|
.app-content-footer-module_app-content-footer__B1kjp {
|
|
2
3
|
backdrop-filter: blur(12px);
|
|
3
4
|
background-color: color-mix(in srgb, var(--background-default) 88%, transparent);
|
|
4
5
|
border-top: 1px solid var(--divider);
|
|
5
6
|
flex: 0 0 auto;
|
|
6
7
|
margin-top: auto;
|
|
7
|
-
|
|
8
|
+
/*
|
|
9
|
+
* Clear of the home indicator, and clear of the keyboard.
|
|
10
|
+
*
|
|
11
|
+
* `--kb` is how far an on-screen keyboard reaches up the screen, published
|
|
12
|
+
* by `useKeyboardInset` (mounted by `AppShell`, so every app gets it). It is
|
|
13
|
+
* 0 whenever the keyboard is down.
|
|
14
|
+
*
|
|
15
|
+
* ⚠️ `max()`, never a sum: while the keyboard is up it covers the home
|
|
16
|
+
* indicator, so the two insets describe the same strip of screen and adding
|
|
17
|
+
* them lifts the band a thumb's width too high.
|
|
18
|
+
*
|
|
19
|
+
* The band grows UPWARD as this grows — it is the last row of a column whose
|
|
20
|
+
* middle row takes the slack — so its contents come to rest exactly on top
|
|
21
|
+
* of the keyboard and the scrolling band keeps what is left.
|
|
22
|
+
*/
|
|
23
|
+
padding-bottom: max(env(safe-area-inset-bottom), var(--kb, 0px));
|
|
24
|
+
transition: padding-bottom 180ms ease-out;
|
|
8
25
|
z-index: var(--z-sticky);
|
|
9
26
|
}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
1
2
|
.app-content-main-module_app-content-main__5IeB4 {
|
|
2
3
|
flex: 1 1 auto;
|
|
3
4
|
min-height: 0;
|
|
4
5
|
overflow-x: hidden;
|
|
5
6
|
overflow-y: auto;
|
|
7
|
+
/*
|
|
8
|
+
* Room at the foot of the scroll for whatever the keyboard is covering.
|
|
9
|
+
* A browser scrolls a focused field into view against the LAYOUT viewport,
|
|
10
|
+
* which on iOS does not shrink for the keyboard — so a field low in a long
|
|
11
|
+
* page is scrolled to a position that is behind it. `--kb` is 0 with the
|
|
12
|
+
* keyboard down, which makes this a no-op on a desktop.
|
|
13
|
+
*/
|
|
14
|
+
scroll-padding-bottom: var(--kb, 0px);
|
|
6
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/layout/AppShell/app-shell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/layout/AppShell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,kBAAyB,EAAE,EAAE,aAAa,qBAgB9E"}
|
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useKeyboardInset } from '../../hooks/use-keyboard-inset.js';
|
|
2
3
|
import { SidebarProvider } from '../Sidebar/sidebar.js';
|
|
3
4
|
|
|
4
5
|
function AppShell({ children, defaultSidebarOpen = true }) {
|
|
6
|
+
/*
|
|
7
|
+
* Publishes `--kb` — how far an on-screen keyboard reaches up the screen —
|
|
8
|
+
* so the footer band can sit on top of it and the scrolling band can leave
|
|
9
|
+
* room for it. Mounted here because the shell is the one component every app
|
|
10
|
+
* renders exactly once, and because a phone keyboard is a fact about the
|
|
11
|
+
* platform rather than a decision an app should have to re-make. It is inert
|
|
12
|
+
* where `visualViewport` does not exist, which includes the server.
|
|
13
|
+
*/
|
|
14
|
+
useKeyboardInset();
|
|
5
15
|
return (jsx(SidebarProvider, { "data-slot": 'app-shell', defaultOpen: defaultSidebarOpen, children: children }));
|
|
6
16
|
}
|
|
7
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-shell.js","sources":["../../../src/layout/AppShell/app-shell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SidebarProvider } from '../Sidebar';\n\nexport interface AppShellProps {\n children: React.ReactNode;\n /**\n * Initial sidebar state. Persist this server-side (cookie, session) or in\n * localStorage and pass it in, so the sidebar doesn't flash open on load.\n */\n defaultSidebarOpen?: boolean;\n}\n\nexport function AppShell({ children, defaultSidebarOpen = true }: AppShellProps) {\n return (\n <SidebarProvider data-slot={'app-shell'} defaultOpen={defaultSidebarOpen}>\n {children}\n </SidebarProvider>\n );\n}\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"app-shell.js","sources":["../../../src/layout/AppShell/app-shell.tsx"],"sourcesContent":["import { useKeyboardInset } from '@constellation/hooks/use-keyboard-inset';\nimport * as React from 'react';\nimport { SidebarProvider } from '../Sidebar';\n\nexport interface AppShellProps {\n children: React.ReactNode;\n /**\n * Initial sidebar state. Persist this server-side (cookie, session) or in\n * localStorage and pass it in, so the sidebar doesn't flash open on load.\n */\n defaultSidebarOpen?: boolean;\n}\n\nexport function AppShell({ children, defaultSidebarOpen = true }: AppShellProps) {\n /*\n * Publishes `--kb` — how far an on-screen keyboard reaches up the screen —\n * so the footer band can sit on top of it and the scrolling band can leave\n * room for it. Mounted here because the shell is the one component every app\n * renders exactly once, and because a phone keyboard is a fact about the\n * platform rather than a decision an app should have to re-make. It is inert\n * where `visualViewport` does not exist, which includes the server.\n */\n useKeyboardInset();\n\n return (\n <SidebarProvider data-slot={'app-shell'} defaultOpen={defaultSidebarOpen}>\n {children}\n </SidebarProvider>\n );\n}\n"],"names":["_jsx"],"mappings":";;;;AAaM,SAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,kBAAkB,GAAG,IAAI,EAAiB,EAAA;AAC7E;;;;;;;AAOG;AACH,IAAA,gBAAgB,EAAE;AAElB,IAAA,QACEA,GAAA,CAAC,eAAe,EAAA,EAAA,WAAA,EAAY,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAA,QAAA,EACrE,QAAQ,EAAA,CACO;AAEtB;;"}
|
|
@@ -1,12 +1,25 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
1
2
|
.app-sidebar-header-module_app-sidebar-header__h-3UU {
|
|
2
3
|
border-bottom: 1px solid var(--sidebar-border);
|
|
3
4
|
flex-shrink: 0;
|
|
4
5
|
padding: 0 var(--size-0-5);
|
|
6
|
+
/*
|
|
7
|
+
* THE TOP BAND MEETS THE NOTCH, SO THE TOP BAND PAYS FOR IT.
|
|
8
|
+
*
|
|
9
|
+
* On a phone with `viewport-fit=cover` — which an installed web app needs,
|
|
10
|
+
* or every inset reads 0 and iOS letterboxes it in landscape — the page owns
|
|
11
|
+
* the strip behind the status bar. Padding rather than a margin so the
|
|
12
|
+
* header's ground runs up behind the clock the way a native navigation bar
|
|
13
|
+
* does, while its CONTENT clears it. Zero everywhere there is no inset.
|
|
14
|
+
*/
|
|
15
|
+
padding-top: env(safe-area-inset-top);
|
|
5
16
|
transition: all var(--sidebar-transition-duration) var(--sidebar-transition-ease);
|
|
6
17
|
}
|
|
7
18
|
@media (min-width: 769px) {
|
|
8
19
|
.app-sidebar-header-module_app-sidebar-header__h-3UU {
|
|
9
|
-
padding
|
|
20
|
+
/* ⚠️ Inline only. The shorthand here used to reset `padding-top` to 0 and
|
|
21
|
+
take the safe-area inset with it. */
|
|
22
|
+
padding-inline: var(--size-1);
|
|
10
23
|
}
|
|
11
24
|
}
|
|
12
25
|
.app-sidebar-header-module_app-sidebar-header__h-3UU {
|
|
@@ -7,9 +7,37 @@ import { Row } from '../Row/row.js';
|
|
|
7
7
|
import { SidebarTrigger } from '../Sidebar/sidebar.js';
|
|
8
8
|
import { Breadcrumbs } from '../../navigation/Breadcrumbs/breadcrumbs.js';
|
|
9
9
|
import { NavUser } from '../../navigation/NavUser/nav-user.js';
|
|
10
|
+
import { AppearanceToggleDropdown } from '../../settings/AppearanceDropdown/appearance-dropdown.js';
|
|
11
|
+
import '../../ui/Alert/alert.js';
|
|
12
|
+
import 'react-dom';
|
|
13
|
+
import '../../ui/Alert/alert.css';
|
|
14
|
+
import '../../ui/Avatar/avatar.js';
|
|
15
|
+
import '../../ui/Button/button.js';
|
|
16
|
+
import '../../ui/Chip/chip.js';
|
|
17
|
+
import '../../ui/CodeBlock/code-block.js';
|
|
10
18
|
import cn from 'clsx';
|
|
19
|
+
import '../../ui/DevIndicator/dev-indicator.css';
|
|
20
|
+
import '../../ui/Dialog/dialog.js';
|
|
21
|
+
import '../../ui/EmptyState/empty-state.js';
|
|
22
|
+
import '../../ui/Icon/icon.js';
|
|
23
|
+
import '../../ui/List/list.js';
|
|
24
|
+
import '../../ui/Pagination/pagination.js';
|
|
25
|
+
import '../../ui/ProgressBar/progress-bar.js';
|
|
26
|
+
import '../../ui/Separator/separator.js';
|
|
27
|
+
import '../../ui/StatCard/stat-card.js';
|
|
28
|
+
import '../../ui/StatusDot/status-dot.js';
|
|
29
|
+
import '../../ui/StatusDot/status-dot-variants.js';
|
|
30
|
+
import '../../ui/StepProgress/step-progress.js';
|
|
31
|
+
import '../../ui/Switch/switch.js';
|
|
32
|
+
import '../../ui/Table/table.js';
|
|
33
|
+
import '../../ui/TableActionCell/table-action-cell.js';
|
|
34
|
+
import '../../ui/TableToolbar/table-toolbar.js';
|
|
35
|
+
import '../../ui/Toggle/toggle.js';
|
|
36
|
+
import '../../ui/ToggleGroup/toggle-group.js';
|
|
37
|
+
import '../../ui/Tooltip/tooltip.js';
|
|
38
|
+
import 'lucide-react';
|
|
39
|
+
import '../../settings/AppearanceTabs/appearance-tabs.css';
|
|
11
40
|
import s from './app-sidebar-header.module.scss.js';
|
|
12
|
-
import { AppearanceToggleDropdown } from '../../settings/AppearanceDropdown/appearance-dropdown.js';
|
|
13
41
|
|
|
14
42
|
/**
|
|
15
43
|
* The header band of a content area.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-sidebar-header.js","sources":["../../../src/layout/AppSidebarHeader/app-sidebar-header.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { Row } from '@constellation/layout/Row';\nimport { SidebarTrigger } from '@constellation/layout/Sidebar';\nimport { Breadcrumbs } from '@constellation/navigation/Breadcrumbs';\nimport { NavUser, type NavUserProps } from '@constellation/navigation/NavUser';\nimport { AppearanceToggleDropdown } from '@constellation/settings';\nimport { type BreadcrumbItemData } from '@constellation/types';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-sidebar-header.module.scss';\n\nexport interface AppSidebarHeaderProps extends React.HTMLAttributes<HTMLElement> {\n breadcrumbs?: BreadcrumbItemData[];\n /** Omit to hide the account menu (e.g. on signed-out chrome). */\n user?: NavUserProps['user'];\n userMenu?: Omit<NavUserProps, 'user'>;\n /** Extra controls between the appearance toggle and the account menu. */\n actions?: React.ReactNode;\n}\n\n/**\n * The header band of a content area.\n *\n * `className` and any other DOM props reach the `header` element. They used to\n * be dropped on the floor — the component took four named props and spread\n * nothing — so a caller passing `className` got no error and no class, and\n * spent the difference looking at its own stylesheet.\n */\nexport function AppSidebarHeader({\n breadcrumbs = [],\n user,\n userMenu,\n actions,\n className,\n ...props\n}: AppSidebarHeaderProps) {\n const { state } = useSidebar();\n\n return (\n <Row\n data-slot={'app-sidebar-header'}\n el={'header'}\n align={'center'}\n gap={1}\n justify={'space-between'}\n className={cn(\n s['app-sidebar-header'],\n state === 'collapsed' && s['sidebar-header-collapsed'],\n className,\n )}\n {...props}\n >\n <Row gap={1}>\n <SidebarTrigger />\n <Breadcrumbs breadcrumbs={breadcrumbs} />\n </Row>\n <Row gap={1} align={'center'}>\n {actions}\n <AppearanceToggleDropdown />\n {user && <NavUser user={user} {...userMenu} />}\n </Row>\n </Row>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"app-sidebar-header.js","sources":["../../../src/layout/AppSidebarHeader/app-sidebar-header.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { Row } from '@constellation/layout/Row';\nimport { SidebarTrigger } from '@constellation/layout/Sidebar';\nimport { Breadcrumbs } from '@constellation/navigation/Breadcrumbs';\nimport { NavUser, type NavUserProps } from '@constellation/navigation/NavUser';\nimport { AppearanceToggleDropdown } from '@constellation/settings';\nimport { type BreadcrumbItemData } from '@constellation/types';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-sidebar-header.module.scss';\n\nexport interface AppSidebarHeaderProps extends React.HTMLAttributes<HTMLElement> {\n breadcrumbs?: BreadcrumbItemData[];\n /** Omit to hide the account menu (e.g. on signed-out chrome). */\n user?: NavUserProps['user'];\n userMenu?: Omit<NavUserProps, 'user'>;\n /** Extra controls between the appearance toggle and the account menu. */\n actions?: React.ReactNode;\n}\n\n/**\n * The header band of a content area.\n *\n * `className` and any other DOM props reach the `header` element. They used to\n * be dropped on the floor — the component took four named props and spread\n * nothing — so a caller passing `className` got no error and no class, and\n * spent the difference looking at its own stylesheet.\n */\nexport function AppSidebarHeader({\n breadcrumbs = [],\n user,\n userMenu,\n actions,\n className,\n ...props\n}: AppSidebarHeaderProps) {\n const { state } = useSidebar();\n\n return (\n <Row\n data-slot={'app-sidebar-header'}\n el={'header'}\n align={'center'}\n gap={1}\n justify={'space-between'}\n className={cn(\n s['app-sidebar-header'],\n state === 'collapsed' && s['sidebar-header-collapsed'],\n className,\n )}\n {...props}\n >\n <Row gap={1}>\n <SidebarTrigger />\n <Breadcrumbs breadcrumbs={breadcrumbs} />\n </Row>\n <Row gap={1} align={'center'}>\n {actions}\n <AppearanceToggleDropdown />\n {user && <NavUser user={user} {...userMenu} />}\n </Row>\n </Row>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;;;;;;;AAOG;SACa,gBAAgB,CAAC,EAC/B,WAAW,GAAG,EAAE,EAChB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACc,EAAA;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE;IAE9B,QACEA,KAAC,GAAG,EAAA,EAAA,WAAA,EACS,oBAAoB,EAC/B,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,oBAAoB,CAAC,EACvB,KAAK,KAAK,WAAW,IAAI,CAAC,CAAC,0BAA0B,CAAC,EACtD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,QAAA,EAAA,CAETA,IAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,aACTC,GAAA,CAAC,cAAc,KAAG,EAClBA,GAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,WAAW,EAAA,CAAI,IACrC,EACND,IAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAA,QAAA,EAAA,CACzB,OAAO,EACRC,GAAA,CAAC,wBAAwB,EAAA,EAAA,CAAG,EAC3B,IAAI,IAAIA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,GAAM,QAAQ,EAAA,CAAI,CAAA,EAAA,CAC1C,CAAA,EAAA,CACF;AAEV;;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
1
2
|
:root {
|
|
2
3
|
--sidebar-collapsed-gap: 0.5rem;
|
|
3
4
|
--sidebar-transition-duration: 200ms;
|
|
@@ -8,6 +9,28 @@
|
|
|
8
9
|
display: flex;
|
|
9
10
|
min-height: 100svh;
|
|
10
11
|
width: 100%;
|
|
12
|
+
/*
|
|
13
|
+
* INSTALLED, THE SHELL IS PINNED RATHER THAN SIZED.
|
|
14
|
+
*
|
|
15
|
+
* WebKit in iOS 26 undercounts `100dvh`, `innerHeight` and
|
|
16
|
+
* `visualViewport.height` by exactly the top safe-area inset when a site is
|
|
17
|
+
* running as a home-screen app — so a shell sized in viewport units comes up
|
|
18
|
+
* 47-59px short and everything anchored to the bottom (a docked search band,
|
|
19
|
+
* a toolbar) sits above the real edge of the screen. A box pinned by both
|
|
20
|
+
* edges has no height to get wrong.
|
|
21
|
+
*
|
|
22
|
+
* Scoped to `display-mode` on purpose. In a browser tab the shell stays in
|
|
23
|
+
* normal flow, because a consumer may well have page chrome above or below
|
|
24
|
+
* it and `position: fixed` would take the whole document out from under
|
|
25
|
+
* them; installed, there is nothing else on the screen by definition.
|
|
26
|
+
*/
|
|
27
|
+
}
|
|
28
|
+
@media (display-mode: standalone), (display-mode: fullscreen) {
|
|
29
|
+
.sidebar-module_sidebar-wrapper__vmUud {
|
|
30
|
+
inset: 0;
|
|
31
|
+
min-height: 0;
|
|
32
|
+
position: fixed;
|
|
33
|
+
}
|
|
11
34
|
}
|
|
12
35
|
.sidebar-module_sidebar-wrapper__vmUud.sidebar-module_inset__I909E {
|
|
13
36
|
background: var(--sidebar);
|
|
@@ -99,6 +122,15 @@
|
|
|
99
122
|
flex: 1 1 auto;
|
|
100
123
|
flex-direction: column;
|
|
101
124
|
height: 100svh;
|
|
125
|
+
/* Fills the pinned wrapper above rather than measuring the viewport a second
|
|
126
|
+
time — `100svh` is the measurement iOS 26 gets wrong. */
|
|
127
|
+
}
|
|
128
|
+
@media (display-mode: standalone), (display-mode: fullscreen) {
|
|
129
|
+
.sidebar-module_sidebar-inset__DVzuf {
|
|
130
|
+
height: 100%;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
.sidebar-module_sidebar-inset__DVzuf {
|
|
102
134
|
max-width: 100%;
|
|
103
135
|
min-width: 0;
|
|
104
136
|
position: relative;
|
package/dist/layout.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export { A as AppContent, a as AppContentFooter, b as AppContentFooterProps, c as AppContentMain, d as AppContentMainProps, e as AppFooter, f as AppFooterProps, g as AppShell, h as AppShellProps, i as AppSidebar, j as AppSidebarHeader, k as AppSidebarHeaderProps, l as AppSidebarProps, C as Collapse, m as CollapseProps, n as Column, o as ColumnProps, p as Container, G as Grid, R as Row, t as Sidebar, u as SidebarContent, v as SidebarFooter, w as SidebarGroup, x as SidebarGroupAction, y as SidebarGroupContent, z as SidebarGroupLabel, B as SidebarHeader, D as SidebarInput, E as SidebarInset, F as SidebarMenu, H as SidebarMenuAction, I as SidebarMenuBadge, J as SidebarMenuButton, K as SidebarMenuItem, L as SidebarMenuSkeleton, M as SidebarMenuSub, N as SidebarMenuSubButton, O as SidebarMenuSubItem, P as SidebarProvider, Q as SidebarRail, T as SidebarTrigger, V as Skeleton } from './index-
|
|
1
|
+
export { A as AppContent, a as AppContentFooter, b as AppContentFooterProps, c as AppContentMain, d as AppContentMainProps, e as AppFooter, f as AppFooterProps, g as AppShell, h as AppShellProps, i as AppSidebar, j as AppSidebarHeader, k as AppSidebarHeaderProps, l as AppSidebarProps, C as Collapse, m as CollapseProps, n as Column, o as ColumnProps, p as Container, G as Grid, R as Row, t as Sidebar, u as SidebarContent, v as SidebarFooter, w as SidebarGroup, x as SidebarGroupAction, y as SidebarGroupContent, z as SidebarGroupLabel, B as SidebarHeader, D as SidebarInput, E as SidebarInset, F as SidebarMenu, H as SidebarMenuAction, I as SidebarMenuBadge, J as SidebarMenuButton, K as SidebarMenuItem, L as SidebarMenuSkeleton, M as SidebarMenuSub, N as SidebarMenuSubButton, O as SidebarMenuSubItem, P as SidebarProvider, Q as SidebarRail, T as SidebarTrigger, V as Skeleton } from './index-DOKRFZ3I.js';
|
|
2
2
|
export { R as RowProps } from './row-CuhTBQhK.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './nav-user-CilmWvtr.js';
|
|
5
5
|
import 'lucide-react';
|
|
6
6
|
import './user-menu-content-D0Ldzigm.js';
|
|
7
7
|
import './input-Cp5LET5i.js';
|
|
8
|
-
import './tooltip-
|
|
8
|
+
import './tooltip-540OmbEG.js';
|
|
9
9
|
import 'class-variance-authority';
|
|
10
10
|
import 'class-variance-authority/types';
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { SidebarMenuButton } from '../../layout/Sidebar/sidebar.js';
|
|
3
3
|
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '../DropdownMenu/dropdown-menu.js';
|
|
4
|
-
import { ChevronsUpDownIcon } from 'lucide-react';
|
|
5
|
-
import s from './nav-user.module.scss.js';
|
|
6
4
|
import { UserInfo } from '../../user/UserInfo/user-info.js';
|
|
7
5
|
import { UserMenuContent } from '../../user/UserMenuContent/user-menu-content.js';
|
|
6
|
+
import { ChevronsUpDownIcon } from 'lucide-react';
|
|
7
|
+
import s from './nav-user.module.scss.js';
|
|
8
8
|
|
|
9
9
|
/** Sidebar footer control: the signed-in user plus their account menu. */
|
|
10
10
|
function NavUser({ user, ...menuProps }) {
|
|
@@ -128,6 +128,17 @@
|
|
|
128
128
|
display: flex;
|
|
129
129
|
flex-direction: column;
|
|
130
130
|
overflow: hidden;
|
|
131
|
+
/*
|
|
132
|
+
* A sheet is its own layer over the whole page, pinned edge to edge, so it
|
|
133
|
+
* meets the notch and the home indicator itself — nothing above it in the
|
|
134
|
+
* tree can pay for them on its behalf. Without this the title of a
|
|
135
|
+
* full-height sheet sits under the status bar on a phone.
|
|
136
|
+
*
|
|
137
|
+
* Padding, so the sheet's ground still runs all the way to the edge of the
|
|
138
|
+
* screen. Zero everywhere there is no inset, which is every desktop.
|
|
139
|
+
*/
|
|
140
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
141
|
+
padding-top: env(safe-area-inset-top);
|
|
131
142
|
position: fixed;
|
|
132
143
|
z-index: var(--z-modal);
|
|
133
144
|
}
|
|
@@ -137,6 +148,15 @@
|
|
|
137
148
|
min-height: 0;
|
|
138
149
|
overflow-y: auto;
|
|
139
150
|
padding: 0 1rem 1rem;
|
|
151
|
+
/*
|
|
152
|
+
* Room for the keyboard, for the same reason `AppContentMain` has it: a
|
|
153
|
+
* browser scrolls a focused field into view against the LAYOUT viewport,
|
|
154
|
+
* which on iOS does not shrink for the keyboard — so a field low in a long
|
|
155
|
+
* sheet is scrolled to a position behind it. `--kb` is 0 with the keyboard
|
|
156
|
+
* down, so this is a no-op on a desktop.
|
|
157
|
+
*/
|
|
158
|
+
padding-bottom: calc(1rem + var(--kb, 0px));
|
|
159
|
+
scroll-padding-bottom: var(--kb, 0px);
|
|
140
160
|
}
|
|
141
161
|
|
|
142
162
|
.sheet-module_content-right__pLrfN {
|
|
@@ -1,14 +1,39 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import { XIcon } from 'lucide-react';
|
|
2
|
+
import '../../ui/Alert/alert.js';
|
|
4
3
|
import * as React from 'react';
|
|
5
4
|
import { createPortal } from 'react-dom';
|
|
5
|
+
import '../../ui/Alert/alert-context.js';
|
|
6
|
+
import '../../ui/Alert/alert.css';
|
|
7
|
+
import '../../ui/Avatar/avatar.js';
|
|
8
|
+
import { Button } from '../../ui/Button/button.js';
|
|
9
|
+
import '../../ui/Chip/chip.js';
|
|
10
|
+
import '../../ui/CodeBlock/code-block.js';
|
|
11
|
+
import cn from 'clsx';
|
|
12
|
+
import '../../ui/DevIndicator/dev-indicator.css';
|
|
13
|
+
import '../../ui/Dialog/dialog.js';
|
|
14
|
+
import '../../ui/EmptyState/empty-state.js';
|
|
15
|
+
import '../../ui/Icon/icon.js';
|
|
16
|
+
import '../../ui/List/list.js';
|
|
17
|
+
import '../../ui/Pagination/pagination.js';
|
|
18
|
+
import '../../ui/ProgressBar/progress-bar.js';
|
|
19
|
+
import '../../ui/Separator/separator.js';
|
|
20
|
+
import '../../ui/StatCard/stat-card.js';
|
|
21
|
+
import '../../ui/StatusDot/status-dot.js';
|
|
22
|
+
import '../../ui/StatusDot/status-dot-variants.js';
|
|
23
|
+
import '../../ui/StepProgress/step-progress.js';
|
|
24
|
+
import '../../ui/Switch/switch.js';
|
|
25
|
+
import '../../ui/Table/table.js';
|
|
26
|
+
import '../../ui/TableActionCell/table-action-cell.js';
|
|
27
|
+
import '../../ui/TableToolbar/table-toolbar.js';
|
|
28
|
+
import '../../ui/Toggle/toggle.js';
|
|
29
|
+
import '../../ui/ToggleGroup/toggle-group.js';
|
|
30
|
+
import '../../ui/Tooltip/tooltip.js';
|
|
31
|
+
import { XIcon } from 'lucide-react';
|
|
6
32
|
import { Slot } from '../../internal/slot.js';
|
|
7
33
|
import { useAnimationState } from '../../internal/use-animation-state.js';
|
|
8
34
|
import { useFocusTrap } from '../../internal/use-focus-trap.js';
|
|
9
35
|
import { useScrollLock } from '../../internal/use-scroll-lock.js';
|
|
10
36
|
import s from './sheet.module.scss.js';
|
|
11
|
-
import { Button } from '../../ui/Button/button.js';
|
|
12
37
|
|
|
13
38
|
const SheetContext = React.createContext(null);
|
|
14
39
|
function useSheet() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sources":["../../../src/navigation/Sheet/sheet.tsx"],"sourcesContent":["import { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { XIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { Slot } from '../../internal/slot';\nimport { useAnimationState } from '../../internal/use-animation-state';\nimport { useFocusTrap } from '../../internal/use-focus-trap';\nimport { useScrollLock } from '../../internal/use-scroll-lock';\nimport s from './sheet.module.scss';\n\n// ── Context ──────────────────────────────────────────────\n\ntype SheetContextValue = {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n titleId: string;\n descriptionId: string;\n};\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nfunction useSheet() {\n const ctx = React.useContext(SheetContext);\n if (!ctx) throw new Error('Sheet compound components must be used within <Sheet>');\n return ctx;\n}\n\n// ── Root ─────────────────────────────────────────────────\n\nexport interface SheetProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nfunction Sheet({ open: controlledOpen, defaultOpen = false, onOpenChange, children }: SheetProps) {\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const isControlled = controlledOpen !== undefined;\n const open = isControlled ? controlledOpen : internalOpen;\n const titleId = React.useId();\n const descriptionId = React.useId();\n\n const handleOpenChange = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange],\n );\n\n return (\n <SheetContext.Provider value={{ open, onOpenChange: handleOpenChange, titleId, descriptionId }}>\n {children}\n </SheetContext.Provider>\n );\n}\n\n// ── Trigger ──────────────────────────────────────────────\n\nexport interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n}\n\nconst SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(\n ({ asChild, onClick, children, ...props }, ref) => {\n const { onOpenChange } = useSheet();\n const Comp = asChild ? Slot : 'button';\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onOpenChange(true);\n };\n\n return (\n <Comp ref={ref} data-slot={'sheet-trigger'} onClick={handleClick} {...props}>\n {children}\n </Comp>\n );\n },\n);\nSheetTrigger.displayName = 'SheetTrigger';\n\n// ── Close ────────────────────────────────────────────────\n\nexport interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n}\n\nconst SheetClose = React.forwardRef<HTMLButtonElement, SheetCloseProps>(\n ({ asChild, onClick, children, ...props }, ref) => {\n const { onOpenChange } = useSheet();\n const Comp = asChild ? Slot : 'button';\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onOpenChange(false);\n };\n\n return (\n <Comp ref={ref} data-slot={'sheet-close'} onClick={handleClick} {...props}>\n {children}\n </Comp>\n );\n },\n);\nSheetClose.displayName = 'SheetClose';\n\n// ── Content ──────────────────────────────────────────────\n\nconst sideClassMap = {\n right: s['content-right'],\n left: s['content-left'],\n top: s['content-top'],\n bottom: s['content-bottom'],\n} as const;\n\ntype SheetSide = keyof typeof sideClassMap;\n\nexport type SheetContentProps = React.HTMLAttributes<HTMLDivElement> & {\n side?: SheetSide;\n /**\n * How much room the panel gets. `sm` suits a confirm or a short form; `lg`\n * is for a working surface — a queue of editable cards needs the width or\n * its own content starts scrolling sideways.\n */\n size?: 'sm' | 'md' | 'lg';\n /**\n * Float the panel off the viewport edge instead of sitting flush to it.\n * Reads as a card over the page rather than a second wall of it.\n */\n inset?: boolean;\n};\n\nconst SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(\n ({ className, children, side = 'right', size = 'md', inset = false, ...props }, ref) => {\n const { open, onOpenChange, titleId, descriptionId } = useSheet();\n const { mounted, state } = useAnimationState(open, 250);\n const focusTrapRef = useFocusTrap(open);\n useScrollLock(mounted);\n\n React.useEffect(() => {\n if (!open) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // A nested layer (an open Select, DatePicker or menu) marks Escape as\n // handled with preventDefault. Escape should dismiss the topmost layer\n // only, so the modal ignores an event something inside it already took.\n if (e.key === 'Escape' && !e.defaultPrevented) {\n onOpenChange(false);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [open, onOpenChange]);\n\n if (!mounted || state === 'idle') return null;\n\n return createPortal(\n <div data-constellation-portal={''} ref={focusTrapRef}>\n <div\n data-slot={'sheet-overlay'}\n data-state={state}\n className={s.overlay}\n onClick={() => onOpenChange(false)}\n aria-hidden={'true'}\n />\n <div\n ref={ref}\n data-slot={'sheet-content'}\n data-state={state}\n role={'dialog'}\n aria-modal={'true'}\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n className={cn(\n s['sheet-content'],\n sideClassMap[side],\n s[`size-${size}`],\n inset && s['content-inset'],\n className,\n )}\n onClick={e => e.stopPropagation()}\n {...props}\n >\n {children}\n <SheetClose className={s['close-button']} asChild>\n <Button variant={'ghost'} theme={'inherit'} iconOnly size={'sm'}>\n <XIcon />\n <span className={'srOnly'}>Close</span>\n </Button>\n </SheetClose>\n </div>\n </div>,\n document.body,\n );\n },\n);\nSheetContent.displayName = 'SheetContent';\n\n// ── Semantic sub-components ──────────────────────────────\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-header'} className={cn(s.header, className)} {...props} />;\n}\n\nfunction SheetBody({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-body'} className={cn(s.body, className)} {...props} />;\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-footer'} className={cn(s.footer, className)} {...props} />;\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n const { titleId } = useSheet();\n\n return (\n <h2 id={titleId} data-slot={'sheet-title'} className={cn(s.title, className)} {...props} />\n );\n}\n\nfunction SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {\n const { descriptionId } = useSheet();\n\n return (\n <p\n id={descriptionId}\n data-slot={'sheet-description'}\n className={cn(s.description, className)}\n {...props}\n />\n );\n}\n\nexport {\n Sheet,\n SheetBody,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sheet.js","sources":["../../../src/navigation/Sheet/sheet.tsx"],"sourcesContent":["import { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { XIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { Slot } from '../../internal/slot';\nimport { useAnimationState } from '../../internal/use-animation-state';\nimport { useFocusTrap } from '../../internal/use-focus-trap';\nimport { useScrollLock } from '../../internal/use-scroll-lock';\nimport s from './sheet.module.scss';\n\n// ── Context ──────────────────────────────────────────────\n\ntype SheetContextValue = {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n titleId: string;\n descriptionId: string;\n};\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nfunction useSheet() {\n const ctx = React.useContext(SheetContext);\n if (!ctx) throw new Error('Sheet compound components must be used within <Sheet>');\n return ctx;\n}\n\n// ── Root ─────────────────────────────────────────────────\n\nexport interface SheetProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nfunction Sheet({ open: controlledOpen, defaultOpen = false, onOpenChange, children }: SheetProps) {\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const isControlled = controlledOpen !== undefined;\n const open = isControlled ? controlledOpen : internalOpen;\n const titleId = React.useId();\n const descriptionId = React.useId();\n\n const handleOpenChange = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange],\n );\n\n return (\n <SheetContext.Provider value={{ open, onOpenChange: handleOpenChange, titleId, descriptionId }}>\n {children}\n </SheetContext.Provider>\n );\n}\n\n// ── Trigger ──────────────────────────────────────────────\n\nexport interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n}\n\nconst SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(\n ({ asChild, onClick, children, ...props }, ref) => {\n const { onOpenChange } = useSheet();\n const Comp = asChild ? Slot : 'button';\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onOpenChange(true);\n };\n\n return (\n <Comp ref={ref} data-slot={'sheet-trigger'} onClick={handleClick} {...props}>\n {children}\n </Comp>\n );\n },\n);\nSheetTrigger.displayName = 'SheetTrigger';\n\n// ── Close ────────────────────────────────────────────────\n\nexport interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n}\n\nconst SheetClose = React.forwardRef<HTMLButtonElement, SheetCloseProps>(\n ({ asChild, onClick, children, ...props }, ref) => {\n const { onOpenChange } = useSheet();\n const Comp = asChild ? Slot : 'button';\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onOpenChange(false);\n };\n\n return (\n <Comp ref={ref} data-slot={'sheet-close'} onClick={handleClick} {...props}>\n {children}\n </Comp>\n );\n },\n);\nSheetClose.displayName = 'SheetClose';\n\n// ── Content ──────────────────────────────────────────────\n\nconst sideClassMap = {\n right: s['content-right'],\n left: s['content-left'],\n top: s['content-top'],\n bottom: s['content-bottom'],\n} as const;\n\ntype SheetSide = keyof typeof sideClassMap;\n\nexport type SheetContentProps = React.HTMLAttributes<HTMLDivElement> & {\n side?: SheetSide;\n /**\n * How much room the panel gets. `sm` suits a confirm or a short form; `lg`\n * is for a working surface — a queue of editable cards needs the width or\n * its own content starts scrolling sideways.\n */\n size?: 'sm' | 'md' | 'lg';\n /**\n * Float the panel off the viewport edge instead of sitting flush to it.\n * Reads as a card over the page rather than a second wall of it.\n */\n inset?: boolean;\n};\n\nconst SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(\n ({ className, children, side = 'right', size = 'md', inset = false, ...props }, ref) => {\n const { open, onOpenChange, titleId, descriptionId } = useSheet();\n const { mounted, state } = useAnimationState(open, 250);\n const focusTrapRef = useFocusTrap(open);\n useScrollLock(mounted);\n\n React.useEffect(() => {\n if (!open) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // A nested layer (an open Select, DatePicker or menu) marks Escape as\n // handled with preventDefault. Escape should dismiss the topmost layer\n // only, so the modal ignores an event something inside it already took.\n if (e.key === 'Escape' && !e.defaultPrevented) {\n onOpenChange(false);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [open, onOpenChange]);\n\n if (!mounted || state === 'idle') return null;\n\n return createPortal(\n <div data-constellation-portal={''} ref={focusTrapRef}>\n <div\n data-slot={'sheet-overlay'}\n data-state={state}\n className={s.overlay}\n onClick={() => onOpenChange(false)}\n aria-hidden={'true'}\n />\n <div\n ref={ref}\n data-slot={'sheet-content'}\n data-state={state}\n role={'dialog'}\n aria-modal={'true'}\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n className={cn(\n s['sheet-content'],\n sideClassMap[side],\n s[`size-${size}`],\n inset && s['content-inset'],\n className,\n )}\n onClick={e => e.stopPropagation()}\n {...props}\n >\n {children}\n <SheetClose className={s['close-button']} asChild>\n <Button variant={'ghost'} theme={'inherit'} iconOnly size={'sm'}>\n <XIcon />\n <span className={'srOnly'}>Close</span>\n </Button>\n </SheetClose>\n </div>\n </div>,\n document.body,\n );\n },\n);\nSheetContent.displayName = 'SheetContent';\n\n// ── Semantic sub-components ──────────────────────────────\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-header'} className={cn(s.header, className)} {...props} />;\n}\n\nfunction SheetBody({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-body'} className={cn(s.body, className)} {...props} />;\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-footer'} className={cn(s.footer, className)} {...props} />;\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n const { titleId } = useSheet();\n\n return (\n <h2 id={titleId} data-slot={'sheet-title'} className={cn(s.title, className)} {...props} />\n );\n}\n\nfunction SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {\n const { descriptionId } = useSheet();\n\n return (\n <p\n id={descriptionId}\n data-slot={'sheet-description'}\n className={cn(s.description, className)}\n {...props}\n />\n );\n}\n\nexport {\n Sheet,\n SheetBody,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA2B,IAAI,CAAC;AAExE,SAAS,QAAQ,GAAA;IACf,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC;AAC1C,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC;AAClF,IAAA,OAAO,GAAG;AACZ;AAWA,SAAS,KAAK,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAc,EAAA;AAC9F,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC;AACnE,IAAA,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IACjD,MAAM,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY;AACzD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE;IAEnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,CAAC,IAAa,KAAI;AAChB,QAAA,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,IAAI,CAAC;AACxC,QAAA,YAAY,GAAG,IAAI,CAAC;AACtB,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B;IAED,QACEA,IAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,EAAA,QAAA,EAC3F,QAAQ,EAAA,CACa;AAE5B;AAQA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAChD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE;IACnC,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ;AAEtC,IAAA,MAAM,WAAW,GAAG,CAAC,CAAsC,KAAI;AAC7D,QAAA,OAAO,GAAG,CAAC,CAAC;QACZ,YAAY,CAAC,IAAI,CAAC;AACpB,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAA,WAAA,EAAa,eAAe,EAAE,OAAO,EAAE,WAAW,EAAA,GAAM,KAAK,YACxE,QAAQ,EAAA,CACJ;AAEX,CAAC;AAEH,YAAY,CAAC,WAAW,GAAG,cAAc;AAQzC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAChD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE;IACnC,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ;AAEtC,IAAA,MAAM,WAAW,GAAG,CAAC,CAAsC,KAAI;AAC7D,QAAA,OAAO,GAAG,CAAC,CAAC;QACZ,YAAY,CAAC,KAAK,CAAC;AACrB,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAA,WAAA,EAAa,aAAa,EAAE,OAAO,EAAE,WAAW,EAAA,GAAM,KAAK,YACtE,QAAQ,EAAA,CACJ;AAEX,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC;AAEA,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC;AACzB,IAAA,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC;AACvB,IAAA,GAAG,EAAE,CAAC,CAAC,aAAa,CAAC;AACrB,IAAA,MAAM,EAAE,CAAC,CAAC,gBAAgB,CAAC;CACnB;AAmBV,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACrF,IAAA,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,QAAQ,EAAE;AACjE,IAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,iBAAiB,CAAC,IAAI,EAAE,GAAG,CAAC;AACvD,IAAA,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC;IACvC,aAAa,CAAC,OAAO,CAAC;AAEtB,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,IAAI;YAAE;AAEX,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;;;;YAIzC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE;gBAC7C,YAAY,CAAC,KAAK,CAAC;YACrB;AACF,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;QACnD,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AACrE,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAExB,IAAA,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;AAE7C,IAAA,OAAO,YAAY,CACjBC,IAAA,CAAA,KAAA,EAAA,EAAA,2BAAA,EAAgC,EAAE,EAAE,GAAG,EAAE,YAAY,EAAA,QAAA,EAAA,CACnDD,GAAA,CAAA,KAAA,EAAA,EAAA,WAAA,EACa,eAAe,EAAA,YAAA,EACd,KAAK,EACjB,SAAS,EAAE,CAAC,CAAC,OAAO,EACpB,OAAO,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAA,aAAA,EACrB,MAAM,EAAA,CACnB,EACFC,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EAAA,WAAA,EACG,eAAe,EAAA,YAAA,EACd,KAAK,EACjB,IAAI,EAAE,QAAQ,EAAA,YAAA,EACF,MAAM,EAAA,iBAAA,EACD,OAAO,EAAA,kBAAA,EACN,aAAa,EAC/B,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,eAAe,CAAC,EAClB,YAAY,CAAC,IAAI,CAAC,EAClB,CAAC,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAC,EACjB,KAAK,IAAI,CAAC,CAAC,eAAe,CAAC,EAC3B,SAAS,CACV,EACD,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAAA,GAC7B,KAAK,EAAA,QAAA,EAAA,CAER,QAAQ,EACTD,GAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,EAAA,IAAA,EAAA,QAAA,EAC/CC,IAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAA,IAAA,EAAC,IAAI,EAAE,IAAI,EAAA,QAAA,EAAA,CAC7DD,GAAA,CAAC,KAAK,EAAA,EAAA,CAAG,EACTA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,QAAQ,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CAChC,EAAA,CACE,CAAA,EAAA,CACT,IACF,EACN,QAAQ,CAAC,IAAI,CACd;AACH,CAAC;AAEH,YAAY,CAAC,WAAW,GAAG,cAAc;AAEzC;AAEA,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B,EAAA;AACvE,IAAA,OAAOA,0BAAgB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,GAAI;AAC1F;AAEA,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B,EAAA;AACrE,IAAA,OAAOA,0BAAgB,YAAY,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,GAAI;AACtF;AAEA,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B,EAAA;AACvE,IAAA,OAAOA,0BAAgB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,GAAI;AAC1F;AAEA,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B,EAAA;AACrE,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE;IAE9B,QACEA,YAAI,EAAE,EAAE,OAAO,EAAA,WAAA,EAAa,aAAa,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI;AAE/F;AAEA,SAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA6B,EAAA;AAC1E,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,QAAQ,EAAE;IAEpC,QACEA,WACE,EAAE,EAAE,aAAa,EAAA,WAAA,EACN,mBAAmB,EAC9B,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,EAAA,GACnC,KAAK,EAAA,CACT;AAEN;;"}
|
package/dist/navigation.d.ts
CHANGED
|
@@ -62,7 +62,7 @@ declare function DropdownMenuSubContent({ className, ...props }: React.HTMLAttri
|
|
|
62
62
|
declare const linkVariants: (props?: ({
|
|
63
63
|
underline?: boolean | null | undefined;
|
|
64
64
|
hover?: "default" | "none" | null | undefined;
|
|
65
|
-
theme?: "
|
|
65
|
+
theme?: "inherit" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | null | undefined;
|
|
66
66
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
67
67
|
|
|
68
68
|
interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>, VariantProps<typeof linkVariants> {
|
|
@@ -4,10 +4,35 @@ import '../../layout/Sidebar/sidebar-context.js';
|
|
|
4
4
|
import '../../ui/Alert/alert-context.js';
|
|
5
5
|
import '../../ui/Table/table-sort-context.js';
|
|
6
6
|
import { useAppearance } from '../../hooks/use-appearance.js';
|
|
7
|
+
import '../../ui/Alert/alert.js';
|
|
8
|
+
import 'react-dom';
|
|
9
|
+
import '../../ui/Alert/alert.css';
|
|
10
|
+
import '../../ui/Avatar/avatar.js';
|
|
11
|
+
import { Button } from '../../ui/Button/button.js';
|
|
12
|
+
import '../../ui/Chip/chip.js';
|
|
13
|
+
import '../../ui/CodeBlock/code-block.js';
|
|
7
14
|
import cn from 'clsx';
|
|
15
|
+
import '../../ui/DevIndicator/dev-indicator.css';
|
|
16
|
+
import '../../ui/Dialog/dialog.js';
|
|
17
|
+
import '../../ui/EmptyState/empty-state.js';
|
|
18
|
+
import '../../ui/Icon/icon.js';
|
|
19
|
+
import '../../ui/List/list.js';
|
|
20
|
+
import '../../ui/Pagination/pagination.js';
|
|
21
|
+
import '../../ui/ProgressBar/progress-bar.js';
|
|
22
|
+
import '../../ui/Separator/separator.js';
|
|
23
|
+
import '../../ui/StatCard/stat-card.js';
|
|
24
|
+
import '../../ui/StatusDot/status-dot.js';
|
|
25
|
+
import '../../ui/StatusDot/status-dot-variants.js';
|
|
26
|
+
import '../../ui/StepProgress/step-progress.js';
|
|
27
|
+
import '../../ui/Switch/switch.js';
|
|
28
|
+
import '../../ui/Table/table.js';
|
|
29
|
+
import '../../ui/TableActionCell/table-action-cell.js';
|
|
30
|
+
import '../../ui/TableToolbar/table-toolbar.js';
|
|
31
|
+
import '../../ui/Toggle/toggle.js';
|
|
32
|
+
import '../../ui/ToggleGroup/toggle-group.js';
|
|
33
|
+
import '../../ui/Tooltip/tooltip.js';
|
|
8
34
|
import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
|
|
9
35
|
import s from './appearance-tabs.module.scss.js';
|
|
10
|
-
import { Button } from '../../ui/Button/button.js';
|
|
11
36
|
|
|
12
37
|
function AppearanceTabs({ className = '', iconOnly = false, ...props }) {
|
|
13
38
|
const { appearance, updateAppearance } = useAppearance();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance-tabs.js","sources":["../../../src/settings/AppearanceTabs/appearance-tabs.tsx"],"sourcesContent":["import { type Appearance, useAppearance } from '@constellation/hooks';\nimport { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './appearance-tabs.module.scss';\n\ntype AppearanceTabsProps = React.HTMLAttributes<HTMLDivElement> & {\n iconOnly?: boolean;\n};\n\nexport function AppearanceTabs({\n className = '',\n iconOnly = false,\n ...props\n}: AppearanceTabsProps) {\n const { appearance, updateAppearance } = useAppearance();\n\n const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [\n { value: 'light', icon: SunIcon, label: 'Light' },\n { value: 'dark', icon: MoonIcon, label: 'Dark' },\n { value: 'system', icon: MonitorIcon, label: 'System' },\n ];\n\n return (\n <div data-slot={'appearance-tabs'} className={cn(s['tabs-root'], className)} {...props}>\n {tabs.map(({ value, icon: Icon, label }) => (\n <Button\n key={value}\n variant={'ghost'}\n theme={'inherit'}\n rounded\n onClick={() => updateAppearance(value)}\n aria-label={label}\n iconOnly={iconOnly}\n aria-pressed={appearance === value}\n className={cn(s['tab-button'], appearance === value && s['tab-button-active'])}\n title={iconOnly ? label : undefined}\n >\n <Icon />\n {!iconOnly && <span>{label}</span>}\n </Button>\n ))}\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"appearance-tabs.js","sources":["../../../src/settings/AppearanceTabs/appearance-tabs.tsx"],"sourcesContent":["import { type Appearance, useAppearance } from '@constellation/hooks';\nimport { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './appearance-tabs.module.scss';\n\ntype AppearanceTabsProps = React.HTMLAttributes<HTMLDivElement> & {\n iconOnly?: boolean;\n};\n\nexport function AppearanceTabs({\n className = '',\n iconOnly = false,\n ...props\n}: AppearanceTabsProps) {\n const { appearance, updateAppearance } = useAppearance();\n\n const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [\n { value: 'light', icon: SunIcon, label: 'Light' },\n { value: 'dark', icon: MoonIcon, label: 'Dark' },\n { value: 'system', icon: MonitorIcon, label: 'System' },\n ];\n\n return (\n <div data-slot={'appearance-tabs'} className={cn(s['tabs-root'], className)} {...props}>\n {tabs.map(({ value, icon: Icon, label }) => (\n <Button\n key={value}\n variant={'ghost'}\n theme={'inherit'}\n rounded\n onClick={() => updateAppearance(value)}\n aria-label={label}\n iconOnly={iconOnly}\n aria-pressed={appearance === value}\n className={cn(s['tab-button'], appearance === value && s['tab-button-active'])}\n title={iconOnly ? label : undefined}\n >\n <Icon />\n {!iconOnly && <span>{label}</span>}\n </Button>\n ))}\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWM,SAAU,cAAc,CAAC,EAC7B,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACY,EAAA;IACpB,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE;AAExD,IAAA,MAAM,IAAI,GAA6D;QACrE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QACjD,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;QAChD,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;KACxD;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,WAAA,EAAgB,iBAAiB,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EACnF,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MACrCC,IAAA,CAAC,MAAM,EAAA,EAEL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAA,IAAA,EACP,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,CAAC,gBAC1B,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,UAAU,KAAK,KAAK,EAClC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,UAAU,KAAK,KAAK,IAAI,CAAC,CAAC,mBAAmB,CAAC,CAAC,EAC9E,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,EAAA,QAAA,EAAA,CAEnCD,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,EACP,CAAC,QAAQ,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,KAAK,EAAA,CAAQ,CAAA,EAAA,EAZ7B,KAAK,CAaH,CACV,CAAC,EAAA,CACE;AAEV;;"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
|
|
5
|
+
declare const buttonVariants: (props?: ({
|
|
6
|
+
variant?: "ghost" | "contained" | "outlined" | null | undefined;
|
|
7
|
+
theme?: "inherit" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | null | undefined;
|
|
8
|
+
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
9
|
+
iconOnly?: boolean | null | undefined;
|
|
10
|
+
fullWidth?: boolean | null | undefined;
|
|
11
|
+
rounded?: boolean | "extra" | null | undefined;
|
|
12
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
|
+
|
|
14
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
15
|
+
/** A colour outside the theme scale; overrides the theme's colour roles. */
|
|
16
|
+
color?: string;
|
|
17
|
+
/** Ink for `contained` when `color` is set and the default contrast is wrong. */
|
|
18
|
+
onColor?: string;
|
|
19
|
+
asChild?: boolean;
|
|
20
|
+
}
|
|
21
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
22
|
+
|
|
23
|
+
declare function TooltipProvider({ children, delayDuration, }: {
|
|
24
|
+
children?: React.ReactNode;
|
|
25
|
+
delayDuration?: number;
|
|
26
|
+
}): React.JSX.Element;
|
|
27
|
+
interface TooltipProps {
|
|
28
|
+
children?: React.ReactNode;
|
|
29
|
+
open?: boolean;
|
|
30
|
+
defaultOpen?: boolean;
|
|
31
|
+
onOpenChange?: (open: boolean) => void;
|
|
32
|
+
delayDuration?: number;
|
|
33
|
+
}
|
|
34
|
+
declare function Tooltip({ children, open: controlledOpen, defaultOpen, onOpenChange, delayDuration, }: TooltipProps): React.JSX.Element;
|
|
35
|
+
interface TooltipTriggerProps extends React.HTMLAttributes<HTMLElement> {
|
|
36
|
+
asChild?: boolean;
|
|
37
|
+
}
|
|
38
|
+
declare function TooltipTrigger({ asChild, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: TooltipTriggerProps): React.JSX.Element;
|
|
39
|
+
interface TooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
40
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
41
|
+
sideOffset?: number;
|
|
42
|
+
}
|
|
43
|
+
declare function TooltipContent({ className, children, side, sideOffset, ...props }: TooltipContentProps): React.ReactPortal | null;
|
|
44
|
+
|
|
45
|
+
export { Button as B, Tooltip as T, TooltipContent as b, TooltipProvider as e, TooltipTrigger as f };
|
|
46
|
+
export type { ButtonProps as a, TooltipContentProps as c, TooltipProps as d, TooltipTriggerProps as g };
|