@onnechat/ui 0.2.0 → 0.2.1

package/dist/index.d.mts

@@ -383,10 +383,18 @@ declare const Sidebar: typeof SidebarRoot & {
  * `AppShell.Navbar`. `AppShell.Header` automatically renders one toggle per
  * enabled side (left before the title, right after the actions), so any
  * sidebar combination — none, left only, right only, both — gets exactly
- * the toggles that apply. `AppShell.LeftSidebarTrigger` and
- * `AppShell.RightSidebarTrigger` exist for custom placements (both accept a
- * custom `icon`), and `useLeftSidebarToggle`/`useRightSidebarToggle` expose
- * just the toggle function for fully custom elements.
+ * the toggles that apply; its `leftSidebarTrigger`/`rightSidebarTrigger`
+ * slots replace that default (pass a node) or remove it (pass `null`).
+ * `AppShell.LeftSidebarTrigger` and `AppShell.RightSidebarTrigger` exist for
+ * custom placements (both accept a custom `icon`), and
+ * `useLeftSidebarToggle`/`useRightSidebarToggle` expose just the toggle
+ * function for fully custom elements.
+ *
+ * `AppShell.Inset` additionally takes pinned `top`/`bottom` slots
+ * (`<AppShell.Inset top={…} bottom={…}>`): rows fixed on screen above/below
+ * the rounded panel, on the shell background (Linear-style), while the page
+ * scrolls the panel between them — the sticky Header docks right below the
+ * `top` row.
  */
 declare function AppShellRoot({ leftSidebar, rightSidebar, className, children, ...props }: React$1.ComponentProps<'div'> & {
     /**
@@ -499,7 +507,7 @@ declare function AppShellSidebarItem({ index, isDropdownChild, level, ...item }:
 declare function AppShellCommandButton({ className, children, ...props }: React$1.ComponentProps<'button'>): react_jsx_runtime.JSX.Element;
 declare function AppShellSidebarFooter({ className, children, ...props }: React$1.ComponentProps<typeof Sidebar.Footer>): react_jsx_runtime.JSX.Element;
 declare function AppShellCopyright({ className, children, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
-declare function AppShellHeader({ className, logo, title, actions, user, leftSidebarToggleLabel, rightSidebarToggleLabel, mobileActionsClassName, ...props }: Omit<React$1.ComponentProps<'div'>, 'title'> & {
+declare function AppShellHeader({ className, logo, title, actions, user, leftSidebarTrigger, rightSidebarTrigger, leftSidebarToggleLabel, rightSidebarToggleLabel, mobileActionsClassName, ...props }: Omit<React$1.ComponentProps<'div'>, 'title'> & {
     /** Mobile-only logo slot (top-left). */
     logo?: React$1.ReactNode;
     /** Page title area (both breakpoints). */
@@ -508,6 +516,20 @@ declare function AppShellHeader({ className, logo, title, actions, user, leftSid
     actions?: React$1.ReactNode;
     /** Mobile-only user slot (top-right, e.g. avatar). */
     user?: React$1.ReactNode;
+    /**
+     * Left sidebar toggle slot (desktop header only — mobile has no sidebars).
+     * Omit for the automatic trigger (shown while `leftSidebar` is enabled on
+     * AppShell), pass a node to replace it (e.g.
+     * `<AppShell.LeftSidebarTrigger icon="…" />`), or `null` to render none.
+     */
+    leftSidebarTrigger?: React$1.ReactNode;
+    /**
+     * Right sidebar toggle slot (desktop header only — mobile has no
+     * sidebars). Omit for the automatic trigger (shown while `rightSidebar`
+     * is enabled on AppShell), pass a node to replace it, or `null` to render
+     * none.
+     */
+    rightSidebarTrigger?: React$1.ReactNode;
     /** Tooltip label of the auto-rendered left sidebar toggle. */
     leftSidebarToggleLabel?: string;
     /** Tooltip label of the auto-rendered right sidebar toggle. */
@@ -520,7 +542,7 @@ declare function AppShellNavbarItem({ className, icon, active, href, children, .
     active?: boolean;
     children?: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function AppShellInset({ className, style, children, loading, spacing, ...props }: React$1.ComponentProps<'div'> & {
+declare function AppShellInset({ className, style, children, loading, spacing, top, bottom, ...props }: React$1.ComponentProps<'div'> & {
     /**
      * Shows a blocking loading overlay while keeping the shell (sidebar,
      * navbar) interactive. Content stays mounted but hidden.
@@ -528,6 +550,21 @@ declare function AppShellInset({ className, style, children, loading, spacing, .
     loading?: boolean;
     /** Spacing scale unit for `--calculated-spacing` (bottom paddings, widget offsets). */
     spacing?: number;
+    /**
+     * Pinned row rendered above the inset panel, on the shell background.
+     * The page keeps its normal document scroll — the row stays fixed on
+     * screen (below the announcement banner) while the panel slides beneath
+     * it, and the sticky Header docks right under it.
+     */
+    top?: React$1.ReactNode;
+    /**
+     * Pinned row rendered below the inset panel, on the shell background
+     * (Linear-style). The page keeps its normal document scroll — the row
+     * stays fixed at the bottom of the screen while the panel slides beneath
+     * it. Below `lg`, the row hides automatically whenever an
+     * `AppShell.Navbar` is mounted (the floating navbar owns that space).
+     */
+    bottom?: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function AppShellLoading({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare const AppShell: typeof AppShellRoot & {
@@ -1970,4 +2007,4 @@ declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_r
     ScrollBar: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 };
 
-export { ANNOUNCEMENT_TYPES, Accordion, ActionGroup, Alert, AnnouncementBanner, type AnnouncementBannerProps, type AnnouncementType, AppShell, type AppShellSidebarItemData, AreaChart, Avatar, type BackgroundVariant, Badge, type BadgeProps, BarChart, BrandDomainInput, type BrandIconName, Breadcrumb, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonVariants, Calendar, Card, CardContent, CardFooter, CardHeader, CardSlider, ChartBackground, ChartBrush, type ChartBrushProps, type ChartBrushRange, type ChartBrushVariant, type ChartConfig, ChartContainer, ChartDot, ChartLegend, ChartLegendContent, type ChartLegendVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChatPreview, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, Command, type Country, type Currency, CurrencyInput, type CurrencyInputProps, type CustomIconName, DATA_CUSTOM_TABLE_VARIANTS, DEFAULT_DATA_CUSTOM_TABLE_VARIANT, DataCustomTable, type DataCustomTableVariant, DataTable, DataTableColumnHeader, DataTablePagination, DataTableToolbar, DataTableViewOptions, Devices, Dialog$1 as Dialog, DialogStack, type DotVariant, Drawer, DropdownMenu, type DuoIconName, EmojiPicker, EmptyState, type FillIconName, HoverCard, type HoverCardContentProps, Icon, type IconProps, type IconSharedProps, type IconType, type IconVariant, ImageUpload, type ImageUploadProps, Input, InputGroup, type InputProps, InputTime, InputTimePicker, type InputTimePickerProps, type InputTimeProps, type InputTimeType, InputTimeUnit, type InputTimeUnitProps, Kbd, type KbdKey, type KbdProps, Label, LanguageSwitch, LineChart, Loader, LoadingIndicator, Marquee, MarqueeContent, type MarqueeContentProps, MarqueeFade, type MarqueeFadeProps, MarqueeItem, type MarqueeItemProps, type MarqueeProps, NetworkStatus, OnneLogo, OnnebookLogo, PhoneInput, type PhoneInputProps, PieChart, Popover, Progress, RadioGroup, SIDEBAR_WIDTH, ScrollArea, Select, SelectInfiniteScroll, type SelectInfiniteScrollProps, SelectMulti, type SelectMultiProps, Separator, Sheet, Sidebar, Skeleton, Slider, type SocialIconName, TIME_UNITS, Table, Tabs, Text, TextShimmer, type TextShimmerProps, Textarea, type ThemeIcon, type TimeUnit, type TimeUnitLabel, type TimeUnitOption, Toaster, type TooltipRoundness, type TooltipVariant, TrackerChart, type TrackerChartBlockProps, VideoPlayer, VideoPlayerContent, type VideoPlayerContentProps, VideoPlayerControlBar, type VideoPlayerControlBarProps, VideoPlayerMuteButton, type VideoPlayerMuteButtonProps, VideoPlayerPlayButton, type VideoPlayerPlayButtonProps, type VideoPlayerProps, VideoPlayerSeekBackwardButton, type VideoPlayerSeekBackwardButtonProps, VideoPlayerSeekForwardButton, type VideoPlayerSeekForwardButtonProps, VideoPlayerTimeDisplay, type VideoPlayerTimeDisplayProps, VideoPlayerTimeRange, type VideoPlayerTimeRangeProps, VideoPlayerVolumeRange, type VideoPlayerVolumeRangeProps, axisValueToPercentFormatter, badgeVariants, buttonGroupVariants, buttonVariants, collapsibleContentVariants, collapsibleRootVariants, collapsibleTriggerSettingsOverlayVariants, getColorsCount, getLoadingData, getPayloadConfigFromPayload, resolveThemeIcon, useAppShellLeftSidebar, useAppShellRightSidebar, useChart, useChartBrush, useCollapsibleOpen, useDialog, useDialogStack, useLeftSidebarToggle, useOptionalCollapsibleContext, useRightSidebarToggle, useSidebar };
+export { ANNOUNCEMENT_TYPES, Accordion, ActionGroup, Alert, AnnouncementBanner, type AnnouncementBannerProps, type AnnouncementType, AppShell, type AppShellSidebarItemData, AreaChart, Avatar, type BackgroundVariant, Badge, type BadgeProps, BarChart, BrandDomainInput, type BrandIconName, Breadcrumb, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonVariants, Calendar, Card, CardContent, CardFooter, CardHeader, CardSlider, ChartBackground, ChartBrush, type ChartBrushProps, type ChartBrushRange, type ChartBrushVariant, type ChartConfig, ChartContainer, ChartDot, ChartLegend, ChartLegendContent, type ChartLegendVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChatPreview, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, Command, type Country, type Currency, CurrencyInput, type CurrencyInputProps, type CustomIconName, DATA_CUSTOM_TABLE_VARIANTS, DEFAULT_DATA_CUSTOM_TABLE_VARIANT, DataCustomTable, type DataCustomTableVariant, DataTable, DataTableColumnHeader, DataTablePagination, DataTableToolbar, DataTableViewOptions, Devices, Dialog$1 as Dialog, DialogStack, type DotVariant, Drawer, DropdownMenu, type DuoIconName, EmojiPicker, EmptyState, type FillIconName, HoverCard, type HoverCardContentProps, Icon, type IconProps, type IconSharedProps, type IconType, type IconVariant, ImageUpload, type ImageUploadProps, Input, InputGroup, type InputProps, InputTime, InputTimePicker, type InputTimePickerProps, type InputTimeProps, type InputTimeType, InputTimeUnit, type InputTimeUnitProps, Kbd, type KbdKey, type KbdProps, Label, LanguageSwitch, LineChart, Loader, LoadingIndicator, Marquee, MarqueeContent, type MarqueeContentProps, MarqueeFade, type MarqueeFadeProps, MarqueeItem, type MarqueeItemProps, type MarqueeProps, NetworkStatus, OnneLogo, OnnebookLogo, PhoneInput, type PhoneInputProps, PieChart, Popover, Progress, RadioGroup, SIDEBAR_WIDTH, ScrollArea, Select, SelectInfiniteScroll, type SelectInfiniteScrollProps, SelectMulti, type SelectMultiProps, Separator, Sheet, Sidebar, Skeleton, Slider, type SocialIconName, TIME_UNITS, Table, Tabs, Text, TextShimmer, type TextShimmerProps, Textarea, type ThemeIcon, type TimeUnit, type TimeUnitLabel, type TimeUnitOption, Toaster, Tooltip, type TooltipRoundness, type TooltipVariant, TrackerChart, type TrackerChartBlockProps, VideoPlayer, VideoPlayerContent, type VideoPlayerContentProps, VideoPlayerControlBar, type VideoPlayerControlBarProps, VideoPlayerMuteButton, type VideoPlayerMuteButtonProps, VideoPlayerPlayButton, type VideoPlayerPlayButtonProps, type VideoPlayerProps, VideoPlayerSeekBackwardButton, type VideoPlayerSeekBackwardButtonProps, VideoPlayerSeekForwardButton, type VideoPlayerSeekForwardButtonProps, VideoPlayerTimeDisplay, type VideoPlayerTimeDisplayProps, VideoPlayerTimeRange, type VideoPlayerTimeRangeProps, VideoPlayerVolumeRange, type VideoPlayerVolumeRangeProps, axisValueToPercentFormatter, badgeVariants, buttonGroupVariants, buttonVariants, collapsibleContentVariants, collapsibleRootVariants, collapsibleTriggerSettingsOverlayVariants, getColorsCount, getLoadingData, getPayloadConfigFromPayload, resolveThemeIcon, useAppShellLeftSidebar, useAppShellRightSidebar, useChart, useChartBrush, useCollapsibleOpen, useDialog, useDialogStack, useLeftSidebarToggle, useOptionalCollapsibleContext, useRightSidebarToggle, useSidebar };

package/dist/index.d.ts

@@ -383,10 +383,18 @@ declare const Sidebar: typeof SidebarRoot & {
  * `AppShell.Navbar`. `AppShell.Header` automatically renders one toggle per
  * enabled side (left before the title, right after the actions), so any
  * sidebar combination — none, left only, right only, both — gets exactly
- * the toggles that apply. `AppShell.LeftSidebarTrigger` and
- * `AppShell.RightSidebarTrigger` exist for custom placements (both accept a
- * custom `icon`), and `useLeftSidebarToggle`/`useRightSidebarToggle` expose
- * just the toggle function for fully custom elements.
+ * the toggles that apply; its `leftSidebarTrigger`/`rightSidebarTrigger`
+ * slots replace that default (pass a node) or remove it (pass `null`).
+ * `AppShell.LeftSidebarTrigger` and `AppShell.RightSidebarTrigger` exist for
+ * custom placements (both accept a custom `icon`), and
+ * `useLeftSidebarToggle`/`useRightSidebarToggle` expose just the toggle
+ * function for fully custom elements.
+ *
+ * `AppShell.Inset` additionally takes pinned `top`/`bottom` slots
+ * (`<AppShell.Inset top={…} bottom={…}>`): rows fixed on screen above/below
+ * the rounded panel, on the shell background (Linear-style), while the page
+ * scrolls the panel between them — the sticky Header docks right below the
+ * `top` row.
  */
 declare function AppShellRoot({ leftSidebar, rightSidebar, className, children, ...props }: React$1.ComponentProps<'div'> & {
     /**
@@ -499,7 +507,7 @@ declare function AppShellSidebarItem({ index, isDropdownChild, level, ...item }:
 declare function AppShellCommandButton({ className, children, ...props }: React$1.ComponentProps<'button'>): react_jsx_runtime.JSX.Element;
 declare function AppShellSidebarFooter({ className, children, ...props }: React$1.ComponentProps<typeof Sidebar.Footer>): react_jsx_runtime.JSX.Element;
 declare function AppShellCopyright({ className, children, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
-declare function AppShellHeader({ className, logo, title, actions, user, leftSidebarToggleLabel, rightSidebarToggleLabel, mobileActionsClassName, ...props }: Omit<React$1.ComponentProps<'div'>, 'title'> & {
+declare function AppShellHeader({ className, logo, title, actions, user, leftSidebarTrigger, rightSidebarTrigger, leftSidebarToggleLabel, rightSidebarToggleLabel, mobileActionsClassName, ...props }: Omit<React$1.ComponentProps<'div'>, 'title'> & {
     /** Mobile-only logo slot (top-left). */
     logo?: React$1.ReactNode;
     /** Page title area (both breakpoints). */
@@ -508,6 +516,20 @@ declare function AppShellHeader({ className, logo, title, actions, user, leftSid
     actions?: React$1.ReactNode;
     /** Mobile-only user slot (top-right, e.g. avatar). */
     user?: React$1.ReactNode;
+    /**
+     * Left sidebar toggle slot (desktop header only — mobile has no sidebars).
+     * Omit for the automatic trigger (shown while `leftSidebar` is enabled on
+     * AppShell), pass a node to replace it (e.g.
+     * `<AppShell.LeftSidebarTrigger icon="…" />`), or `null` to render none.
+     */
+    leftSidebarTrigger?: React$1.ReactNode;
+    /**
+     * Right sidebar toggle slot (desktop header only — mobile has no
+     * sidebars). Omit for the automatic trigger (shown while `rightSidebar`
+     * is enabled on AppShell), pass a node to replace it, or `null` to render
+     * none.
+     */
+    rightSidebarTrigger?: React$1.ReactNode;
     /** Tooltip label of the auto-rendered left sidebar toggle. */
     leftSidebarToggleLabel?: string;
     /** Tooltip label of the auto-rendered right sidebar toggle. */
@@ -520,7 +542,7 @@ declare function AppShellNavbarItem({ className, icon, active, href, children, .
     active?: boolean;
     children?: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function AppShellInset({ className, style, children, loading, spacing, ...props }: React$1.ComponentProps<'div'> & {
+declare function AppShellInset({ className, style, children, loading, spacing, top, bottom, ...props }: React$1.ComponentProps<'div'> & {
     /**
      * Shows a blocking loading overlay while keeping the shell (sidebar,
      * navbar) interactive. Content stays mounted but hidden.
@@ -528,6 +550,21 @@ declare function AppShellInset({ className, style, children, loading, spacing, .
     loading?: boolean;
     /** Spacing scale unit for `--calculated-spacing` (bottom paddings, widget offsets). */
     spacing?: number;
+    /**
+     * Pinned row rendered above the inset panel, on the shell background.
+     * The page keeps its normal document scroll — the row stays fixed on
+     * screen (below the announcement banner) while the panel slides beneath
+     * it, and the sticky Header docks right under it.
+     */
+    top?: React$1.ReactNode;
+    /**
+     * Pinned row rendered below the inset panel, on the shell background
+     * (Linear-style). The page keeps its normal document scroll — the row
+     * stays fixed at the bottom of the screen while the panel slides beneath
+     * it. Below `lg`, the row hides automatically whenever an
+     * `AppShell.Navbar` is mounted (the floating navbar owns that space).
+     */
+    bottom?: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function AppShellLoading({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare const AppShell: typeof AppShellRoot & {
@@ -1970,4 +2007,4 @@ declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_r
     ScrollBar: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 };
 
-export { ANNOUNCEMENT_TYPES, Accordion, ActionGroup, Alert, AnnouncementBanner, type AnnouncementBannerProps, type AnnouncementType, AppShell, type AppShellSidebarItemData, AreaChart, Avatar, type BackgroundVariant, Badge, type BadgeProps, BarChart, BrandDomainInput, type BrandIconName, Breadcrumb, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonVariants, Calendar, Card, CardContent, CardFooter, CardHeader, CardSlider, ChartBackground, ChartBrush, type ChartBrushProps, type ChartBrushRange, type ChartBrushVariant, type ChartConfig, ChartContainer, ChartDot, ChartLegend, ChartLegendContent, type ChartLegendVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChatPreview, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, Command, type Country, type Currency, CurrencyInput, type CurrencyInputProps, type CustomIconName, DATA_CUSTOM_TABLE_VARIANTS, DEFAULT_DATA_CUSTOM_TABLE_VARIANT, DataCustomTable, type DataCustomTableVariant, DataTable, DataTableColumnHeader, DataTablePagination, DataTableToolbar, DataTableViewOptions, Devices, Dialog$1 as Dialog, DialogStack, type DotVariant, Drawer, DropdownMenu, type DuoIconName, EmojiPicker, EmptyState, type FillIconName, HoverCard, type HoverCardContentProps, Icon, type IconProps, type IconSharedProps, type IconType, type IconVariant, ImageUpload, type ImageUploadProps, Input, InputGroup, type InputProps, InputTime, InputTimePicker, type InputTimePickerProps, type InputTimeProps, type InputTimeType, InputTimeUnit, type InputTimeUnitProps, Kbd, type KbdKey, type KbdProps, Label, LanguageSwitch, LineChart, Loader, LoadingIndicator, Marquee, MarqueeContent, type MarqueeContentProps, MarqueeFade, type MarqueeFadeProps, MarqueeItem, type MarqueeItemProps, type MarqueeProps, NetworkStatus, OnneLogo, OnnebookLogo, PhoneInput, type PhoneInputProps, PieChart, Popover, Progress, RadioGroup, SIDEBAR_WIDTH, ScrollArea, Select, SelectInfiniteScroll, type SelectInfiniteScrollProps, SelectMulti, type SelectMultiProps, Separator, Sheet, Sidebar, Skeleton, Slider, type SocialIconName, TIME_UNITS, Table, Tabs, Text, TextShimmer, type TextShimmerProps, Textarea, type ThemeIcon, type TimeUnit, type TimeUnitLabel, type TimeUnitOption, Toaster, type TooltipRoundness, type TooltipVariant, TrackerChart, type TrackerChartBlockProps, VideoPlayer, VideoPlayerContent, type VideoPlayerContentProps, VideoPlayerControlBar, type VideoPlayerControlBarProps, VideoPlayerMuteButton, type VideoPlayerMuteButtonProps, VideoPlayerPlayButton, type VideoPlayerPlayButtonProps, type VideoPlayerProps, VideoPlayerSeekBackwardButton, type VideoPlayerSeekBackwardButtonProps, VideoPlayerSeekForwardButton, type VideoPlayerSeekForwardButtonProps, VideoPlayerTimeDisplay, type VideoPlayerTimeDisplayProps, VideoPlayerTimeRange, type VideoPlayerTimeRangeProps, VideoPlayerVolumeRange, type VideoPlayerVolumeRangeProps, axisValueToPercentFormatter, badgeVariants, buttonGroupVariants, buttonVariants, collapsibleContentVariants, collapsibleRootVariants, collapsibleTriggerSettingsOverlayVariants, getColorsCount, getLoadingData, getPayloadConfigFromPayload, resolveThemeIcon, useAppShellLeftSidebar, useAppShellRightSidebar, useChart, useChartBrush, useCollapsibleOpen, useDialog, useDialogStack, useLeftSidebarToggle, useOptionalCollapsibleContext, useRightSidebarToggle, useSidebar };
+export { ANNOUNCEMENT_TYPES, Accordion, ActionGroup, Alert, AnnouncementBanner, type AnnouncementBannerProps, type AnnouncementType, AppShell, type AppShellSidebarItemData, AreaChart, Avatar, type BackgroundVariant, Badge, type BadgeProps, BarChart, BrandDomainInput, type BrandIconName, Breadcrumb, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonVariants, Calendar, Card, CardContent, CardFooter, CardHeader, CardSlider, ChartBackground, ChartBrush, type ChartBrushProps, type ChartBrushRange, type ChartBrushVariant, type ChartConfig, ChartContainer, ChartDot, ChartLegend, ChartLegendContent, type ChartLegendVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChatPreview, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, Command, type Country, type Currency, CurrencyInput, type CurrencyInputProps, type CustomIconName, DATA_CUSTOM_TABLE_VARIANTS, DEFAULT_DATA_CUSTOM_TABLE_VARIANT, DataCustomTable, type DataCustomTableVariant, DataTable, DataTableColumnHeader, DataTablePagination, DataTableToolbar, DataTableViewOptions, Devices, Dialog$1 as Dialog, DialogStack, type DotVariant, Drawer, DropdownMenu, type DuoIconName, EmojiPicker, EmptyState, type FillIconName, HoverCard, type HoverCardContentProps, Icon, type IconProps, type IconSharedProps, type IconType, type IconVariant, ImageUpload, type ImageUploadProps, Input, InputGroup, type InputProps, InputTime, InputTimePicker, type InputTimePickerProps, type InputTimeProps, type InputTimeType, InputTimeUnit, type InputTimeUnitProps, Kbd, type KbdKey, type KbdProps, Label, LanguageSwitch, LineChart, Loader, LoadingIndicator, Marquee, MarqueeContent, type MarqueeContentProps, MarqueeFade, type MarqueeFadeProps, MarqueeItem, type MarqueeItemProps, type MarqueeProps, NetworkStatus, OnneLogo, OnnebookLogo, PhoneInput, type PhoneInputProps, PieChart, Popover, Progress, RadioGroup, SIDEBAR_WIDTH, ScrollArea, Select, SelectInfiniteScroll, type SelectInfiniteScrollProps, SelectMulti, type SelectMultiProps, Separator, Sheet, Sidebar, Skeleton, Slider, type SocialIconName, TIME_UNITS, Table, Tabs, Text, TextShimmer, type TextShimmerProps, Textarea, type ThemeIcon, type TimeUnit, type TimeUnitLabel, type TimeUnitOption, Toaster, Tooltip, type TooltipRoundness, type TooltipVariant, TrackerChart, type TrackerChartBlockProps, VideoPlayer, VideoPlayerContent, type VideoPlayerContentProps, VideoPlayerControlBar, type VideoPlayerControlBarProps, VideoPlayerMuteButton, type VideoPlayerMuteButtonProps, VideoPlayerPlayButton, type VideoPlayerPlayButtonProps, type VideoPlayerProps, VideoPlayerSeekBackwardButton, type VideoPlayerSeekBackwardButtonProps, VideoPlayerSeekForwardButton, type VideoPlayerSeekForwardButtonProps, VideoPlayerTimeDisplay, type VideoPlayerTimeDisplayProps, VideoPlayerTimeRange, type VideoPlayerTimeRangeProps, VideoPlayerVolumeRange, type VideoPlayerVolumeRangeProps, axisValueToPercentFormatter, badgeVariants, buttonGroupVariants, buttonVariants, collapsibleContentVariants, collapsibleRootVariants, collapsibleTriggerSettingsOverlayVariants, getColorsCount, getLoadingData, getPayloadConfigFromPayload, resolveThemeIcon, useAppShellLeftSidebar, useAppShellRightSidebar, useChart, useChartBrush, useCollapsibleOpen, useDialog, useDialogStack, useLeftSidebarToggle, useOptionalCollapsibleContext, useRightSidebarToggle, useSidebar };

package/dist/index.js

@@ -125,6 +125,7 @@ __export(index_exports, {
   TextShimmer: () => TextShimmer,
   Textarea: () => Textarea,
   Toaster: () => Toaster,
+  Tooltip: () => Tooltip,
   TrackerChart: () => TrackerChart,
   VideoPlayer: () => VideoPlayer,
   VideoPlayerContent: () => VideoPlayerContent,
@@ -2071,6 +2072,7 @@ var MIN_SIDEBAR_WIDTH = 16 * 16;
 var MAX_SIDEBAR_WIDTH = 20 * 16;
 var COLLAPSE_THRESHOLD = MIN_SIDEBAR_WIDTH / 2;
 var SIDEBAR_COOKIE_TTL_DAYS = 365;
+var SIDEBAR_ANIMATION_DURATION = "duration-300";
 var SIDEBAR_SIDE_CONFIG = {
   left: {
     defaultWidth: SIDEBAR_WIDTH,
@@ -2394,7 +2396,8 @@ function SidebarSidePanel({
             "aria-hidden": true,
             "data-slot": config.gapSlot,
             className: cn(
-              "relative shrink-0 bg-transparent transition-[width] duration-300",
+              "relative shrink-0 bg-transparent transition-[width]",
+              SIDEBAR_ANIMATION_DURATION,
               state === "expanded" ? side === "left" ? "w-(--left-sidebar-width)" : "w-(--right-sidebar-width)" : "w-0"
             )
           }
@@ -2404,7 +2407,8 @@ function SidebarSidePanel({
           {
             "data-slot": config.containerSlot,
             className: cn(
-              "fixed z-10 hidden overflow-clip bg-sidebar transition-[width] duration-300 lg:flex",
+              "fixed z-10 hidden overflow-clip bg-sidebar transition-[width] lg:flex",
+              SIDEBAR_ANIMATION_DURATION,
               side === "left" ? "left-0 w-(--left-sidebar-width) group-data-[collapsible=offcanvas]:w-0 justify-end" : "right-0 w-(--right-sidebar-width) group-data-[collapsible=offcanvas]:w-0"
             ),
             style: {
@@ -2444,7 +2448,8 @@ function SidebarSidePanel({
               "after:absolute after:inset-y-0 after:w-1 after:rounded-full after:transition-transform",
               "hover:after:translate-x-0 hover:after:bg-sidebar-border",
               "outline-none focus-visible:ring-ring focus-visible:ring-2 focus-visible:border-ring bg-transparent!",
-              side === "left" ? "left-(--left-sidebar-width) group-data-[collapsible=offcanvas]:left-0 -translate-x-1/2 after:left-1/2 after:-translate-x-1/2 transition-[left,transform] duration-300" : "right-(--right-sidebar-width) group-data-[collapsible=offcanvas]:right-0 translate-x-1/2 after:right-1/2 after:translate-x-1/2 transition-[right,transform] duration-300",
+              side === "left" ? "left-(--left-sidebar-width) group-data-[collapsible=offcanvas]:left-0 -translate-x-1/2 after:left-1/2 after:-translate-x-1/2 transition-[left,transform]" : "right-(--right-sidebar-width) group-data-[collapsible=offcanvas]:right-0 translate-x-1/2 after:right-1/2 after:translate-x-1/2 transition-[right,transform]",
+              SIDEBAR_ANIMATION_DURATION,
               isDragging && "after:translate-x-0 after:bg-sidebar-border"
             )
           }
@@ -2904,6 +2909,8 @@ function AppShellHeader({
   title,
   actions,
   user,
+  leftSidebarTrigger,
+  rightSidebarTrigger,
   leftSidebarToggleLabel = "Toggle left sidebar",
   rightSidebarToggleLabel = "Toggle right sidebar",
   mobileActionsClassName,
@@ -2911,8 +2918,10 @@ function AppShellHeader({
 }) {
   const leftSidebar = React9.useContext(AppShellLeftSidebarContext);
   const rightSidebar = React9.useContext(AppShellRightSidebarContext);
+  const resolvedLeftTrigger = leftSidebarTrigger === void 0 ? leftSidebar && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppShellLeftSidebarTrigger, { label: leftSidebarToggleLabel }) : leftSidebarTrigger;
+  const resolvedRightTrigger = rightSidebarTrigger === void 0 ? rightSidebar && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppShellRightSidebarTrigger, { label: rightSidebarToggleLabel }) : rightSidebarTrigger;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-slot": "app-shell-header", className: cn("contents", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "lg:hidden flex items-center justify-between gap-2 md:gap-4 p-4 min-h-16 h-full max-h-16 glass-dashboard-header max-lg:sticky top-(--announcement-height,0px) z-50 transition-all max-lg:border-b max-lg:border-border/70", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "lg:hidden flex items-center justify-between gap-2 md:gap-4 p-4 min-h-16 h-full max-h-16 glass-dashboard-header max-lg:sticky top-[calc(var(--announcement-height,0px)_+_var(--inset-top-height,0px))] z-50 transition-colors max-lg:border-b max-lg:border-border/70", children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
         logo && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "shrink-0 active:scale-99", children: logo }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex min-h-7 min-w-0 flex-1 items-center overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex min-w-0 flex-1 items-center", children: title }) })
@@ -2920,11 +2929,11 @@ function AppShellHeader({
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("flex gap-2 empty:hidden", mobileActionsClassName), children: actions }),
       user
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "max-lg:hidden sticky top-(--announcement-height,0px) z-50 w-full flex min-w-0 items-center gap-2 md:gap-4 p-4 min-h-16 h-full max-h-16 border-b glass-dashboard-header border-border/70 transition-colors lg:rounded-t-2xl", children: [
-      leftSidebar && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppShellLeftSidebarTrigger, { label: leftSidebarToggleLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "max-lg:hidden sticky top-[calc(var(--announcement-height,0px)_+_var(--inset-top-height,0px))] z-50 w-full flex min-w-0 items-center gap-2 md:gap-4 p-4 min-h-16 h-full max-h-16 border-b glass-dashboard-header border-border/70 transition-colors lg:rounded-t-2xl", children: [
+      resolvedLeftTrigger,
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex min-h-7 min-w-0 flex-1 items-center overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex min-w-0 flex-1 items-center", children: title }) }),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative z-1 grid grid-flow-col shrink-0 ml-auto gap-2 md:gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "min-w-0 flex items-center gap-2 empty:hidden", children: actions }) }),
-      rightSidebar && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppShellRightSidebarTrigger, { label: rightSidebarToggleLabel })
+      resolvedRightTrigger
     ] })
   ] });
 }
@@ -2986,49 +2995,136 @@ function AppShellInset({
   children,
   loading = false,
   spacing = 24,
+  top,
+  bottom,
   ...props
 }) {
   const leftSidebar = React9.useContext(AppShellLeftSidebarContext);
   const rightSidebar = React9.useContext(AppShellRightSidebarContext);
   const hasSidebar = Boolean(leftSidebar || rightSidebar);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    "div",
-    {
-      "data-slot": "app-shell-inset",
-      style: {
-        "--sidebar-spacing": spacing,
-        ...style
-      },
-      className: cn(
-        "relative flex w-full min-h-full flex-1 flex-col transition-[margin] duration-300",
-        // The inset chrome (margins + rounding) only exists when at least one
-        // sidebar provider frames the page; each margin collapses against the
-        // side whose sidebar is expanded.
-        hasSidebar && "lg:m-2 lg:rounded-2xl",
-        leftSidebar?.state === "expanded" && "lg:ml-0",
-        rightSidebar?.state === "expanded" && "lg:mr-0",
-        loading && "min-h-0 overflow-hidden",
-        "max-lg:bg-dashboard-background! bg-dashboard-background",
-        "[--calculated-spacing:--spacing(var(--sidebar-spacing))]",
-        // `isolate` keeps composited children (e.g. the glass header's
-        // backdrop-filter) inside the rounded overflow clip on all engines.
-        "w-full min-w-0 lg:overflow-clip isolate",
-        "max-lg:pb-(--calculated-spacing)",
-        className
-      ),
-      ...props,
-      children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppShellLoading, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "div",
-          {
-            "aria-hidden": loading || void 0,
-            className: cn(loading ? "hidden" : "contents"),
-            children
-          }
-        )
-      ]
+  const columnRef = React9.useRef(null);
+  const topRef = React9.useRef(null);
+  React9.useLayoutEffect(() => {
+    const column = columnRef.current;
+    if (!column) return;
+    const el = topRef.current;
+    if (!top || !el) {
+      column.style.setProperty("--inset-top-height", "0px");
+      return;
     }
+    const update = () => {
+      column.style.setProperty(
+        "--inset-top-height",
+        `${el.getBoundingClientRect().height}px`
+      );
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      column.style.setProperty("--inset-top-height", "0px");
+    };
+  }, [top]);
+  const pinnedRowBackground = cn(
+    "bg-dashboard-background",
+    hasSidebar && "lg:bg-sidebar"
+  );
+  return (
+    // Transparent column that owns the inset's flex cell so pinned rows can
+    // live outside the rounded panel, over the shell background. The page
+    // keeps its document scroll: the sticky rows hold their screen position
+    // while the panel in between slides normally.
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      {
+        ref: columnRef,
+        "data-slot": "app-shell-inset-column",
+        className: "relative flex w-full min-w-0 min-h-full flex-1 flex-col",
+        children: [
+          top ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              ref: topRef,
+              "data-slot": "app-shell-inset-top",
+              className: cn(
+                "sticky top-(--announcement-height,0px) z-40 shrink-0",
+                // On mobile the row and the panel share the same background —
+                // without a divider, scrolling content is chopped at an
+                // invisible line. Desktop gets a tonal boundary from bg-sidebar.
+                "max-lg:border-b max-lg:border-border/70",
+                pinnedRowBackground
+              ),
+              children: top
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "div",
+            {
+              "data-slot": "app-shell-inset",
+              style: {
+                "--sidebar-spacing": spacing,
+                ...style
+              },
+              className: cn(
+                // No `w-full` here: the column's cross-axis stretch sizes the panel
+                // to its width MINUS the side margins below — `w-full` + `mr-2`
+                // would overflow the column by the margin, gluing the panel to the
+                // viewport edge (and clipping its rounded corner) whenever the
+                // right sidebar is collapsed.
+                "relative flex flex-1 flex-col transition-[margin]",
+                SIDEBAR_ANIMATION_DURATION,
+                // The inset chrome (margins + rounding) only exists when at least one
+                // sidebar provider frames the page; each margin collapses against the
+                // side whose sidebar is expanded.
+                hasSidebar && "lg:m-2 lg:rounded-2xl",
+                leftSidebar?.state === "expanded" && "lg:ml-0",
+                rightSidebar?.state === "expanded" && "lg:mr-0",
+                loading && "min-h-0 overflow-hidden",
+                "max-lg:bg-dashboard-background! bg-dashboard-background",
+                "[--calculated-spacing:--spacing(var(--sidebar-spacing))]",
+                // `isolate` keeps composited children (e.g. the glass header's
+                // backdrop-filter) inside the rounded overflow clip on all engines.
+                "min-w-0 isolate lg:overflow-clip",
+                "max-lg:pb-(--calculated-spacing)",
+                className
+              ),
+              ...props,
+              children: [
+                loading && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppShellLoading, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  "div",
+                  {
+                    "aria-hidden": loading || void 0,
+                    className: cn(loading ? "hidden" : "contents"),
+                    children
+                  }
+                )
+              ]
+            }
+          ),
+          bottom ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              "data-slot": "app-shell-inset-bottom",
+              className: cn(
+                "sticky bottom-0 z-40 shrink-0",
+                // Divider against the same-background panel on mobile (mirrors
+                // the mobile Header's border-b).
+                "max-lg:border-t max-lg:border-border/70",
+                // The floating mobile Navbar (fixed bottom, z-50, ~100px tall)
+                // would bury and cover this row — when a Navbar is mounted in
+                // the shell, the row yields to it below `lg`.
+                "max-lg:[[data-slot=app-shell]:has([data-slot=app-shell-navbar])_&]:hidden",
+                pinnedRowBackground
+              ),
+              children: bottom
+            }
+          ) : null
+        ]
+      }
+    )
   );
 }
 function AppShellLoading({ className, ...props }) {
@@ -15098,6 +15194,7 @@ var ScrollArea = Object.assign(ScrollAreaRoot, { ScrollBar });
   TextShimmer,
   Textarea,
   Toaster,
+  Tooltip,
   TrackerChart,
   VideoPlayer,
   VideoPlayerContent,