@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.
Files changed (42) hide show
  1. package/dist/form/Checkbox/checkbox.js +55 -4
  2. package/dist/form/Checkbox/checkbox.js.map +1 -1
  3. package/dist/form/DatePicker/date-picker.js +54 -4
  4. package/dist/form/DatePicker/date-picker.js.map +1 -1
  5. package/dist/form/Input/input.css +9 -0
  6. package/dist/form.d.ts +1 -1
  7. package/dist/hooks/index.d.ts +1 -0
  8. package/dist/hooks/index.d.ts.map +1 -1
  9. package/dist/hooks/use-keyboard-inset.d.ts +38 -0
  10. package/dist/hooks/use-keyboard-inset.d.ts.map +1 -0
  11. package/dist/hooks/use-keyboard-inset.js +76 -0
  12. package/dist/hooks/use-keyboard-inset.js.map +1 -0
  13. package/dist/index-B0d2advx.d.ts +354 -0
  14. package/dist/index-CLUKMTTu.d.ts +354 -0
  15. package/dist/index-CVEb-8MV.d.ts +566 -0
  16. package/dist/index-D81GIX01.d.ts +566 -0
  17. package/dist/index-DOKRFZ3I.d.ts +354 -0
  18. package/dist/index-DiR9pLJe.d.ts +566 -0
  19. package/dist/index.d.ts +45 -7
  20. package/dist/index.js +31 -30
  21. package/dist/index.js.map +1 -1
  22. package/dist/layout/AppContentFooter/app-content-footer.css +18 -1
  23. package/dist/layout/AppContentMain/app-content-main.css +9 -0
  24. package/dist/layout/AppShell/app-shell.d.ts.map +1 -1
  25. package/dist/layout/AppShell/app-shell.js +10 -0
  26. package/dist/layout/AppShell/app-shell.js.map +1 -1
  27. package/dist/layout/AppSidebarHeader/app-sidebar-header.css +14 -1
  28. package/dist/layout/AppSidebarHeader/app-sidebar-header.js +29 -1
  29. package/dist/layout/AppSidebarHeader/app-sidebar-header.js.map +1 -1
  30. package/dist/layout/Sidebar/sidebar.css +32 -0
  31. package/dist/layout.d.ts +2 -2
  32. package/dist/navigation/NavUser/nav-user.js +2 -2
  33. package/dist/navigation/Sheet/sheet.css +20 -0
  34. package/dist/navigation/Sheet/sheet.js +28 -3
  35. package/dist/navigation/Sheet/sheet.js.map +1 -1
  36. package/dist/navigation.d.ts +1 -1
  37. package/dist/settings/AppearanceTabs/appearance-tabs.js +26 -1
  38. package/dist/settings/AppearanceTabs/appearance-tabs.js.map +1 -1
  39. package/dist/tooltip-X3uiRSnA.d.ts +46 -0
  40. package/dist/tooltip-zSCQCLLI.d.ts +46 -0
  41. package/dist/ui.d.ts +2 -2
  42. 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 { AppearanceTabs } from './settings/AppearanceTabs/appearance-tabs.js';
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 { persistAlert } from './ui/Alert/alert-persist.js';
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
- padding-bottom: env(safe-area-inset-bottom);
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":"AAAA,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,qBAM9E"}
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":";;;AAYM,SAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,kBAAkB,GAAG,IAAI,EAAiB,EAAA;AAC7E,IAAA,QACEA,GAAA,CAAC,eAAe,EAAA,EAAA,WAAA,EAAY,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAA,QAAA,EACrE,QAAQ,EAAA,CACO;AAEtB;;"}
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: 0 var(--size-1);
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":";;;;;;;;;;;;;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
+ {"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-BxBAq63A.js';
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-DxO_DWMO.js';
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 cn from 'clsx';
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":"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"}
@@ -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?: "primary" | "secondary" | "destructive" | "warning" | "success" | "info" | "slate" | "inherit" | null | undefined;
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":";;;;;;;;;;;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;;"}
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 };