@optiaxiom/react 0.11.1 → 0.12.0

package/dist/index.d.ts

@@ -25,7 +25,7 @@ declare const Alert: react.ForwardRefExoticComponent<{
     /**
      * Show a close button inside the alert and invoke this callback when the close button is clicked.
      */
-    onClose?: () => void;
+    onDismiss?: () => void;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
@@ -198,13 +198,13 @@ declare const ToastProvider: react.ForwardRefExoticComponent<RadixToast.ToastPro
     className?: string;
 }>, never> & Omit<Omit<RadixToast.ToastViewportProps & react.RefAttributes<HTMLOListElement>, "ref">, "asChild" | "children" | "label" | "color" | "className"> & react.RefAttributes<HTMLOListElement>>;
 
-type TooltipProviderProps = ExtendProps<ComponentPropsWithoutRef<typeof RadixTooltip.Provider>, {
+type TooltipProviderProps$1 = ExtendProps<ComponentPropsWithoutRef<typeof RadixTooltip.Provider>, {
     /**
      * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
      */
     disableHoverableContent?: boolean;
 }>;
-declare function TooltipProvider({ disableHoverableContent, ...props }: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+declare function TooltipProvider({ disableHoverableContent, ...props }: TooltipProviderProps$1): react_jsx_runtime.JSX.Element;
 declare namespace TooltipProvider {
     var displayName: string;
 }
@@ -222,10 +222,12 @@ type AxiomProviderProps = {
      *
      * {@link https://optimizely-axiom.github.io/optiaxiom/components/tooltip/ Documentation}
      */
-    tooltip?: Omit<ComponentPropsWithoutRef<typeof TooltipProvider>, "children">;
+    tooltip?: Omit<TooltipProviderProps, "children">;
 };
 interface ToastProviderProps extends ComponentPropsWithoutRef<typeof ToastProvider> {
 }
+interface TooltipProviderProps extends ComponentPropsWithoutRef<typeof TooltipProvider> {
+}
 declare function AxiomProvider({ children, toast, tooltip, }: AxiomProviderProps): react_jsx_runtime.JSX.Element;
 declare namespace AxiomProvider {
     var displayName: string;
@@ -248,7 +250,7 @@ declare const Banner: react.ForwardRefExoticComponent<{
     /**
      * Show a close button inside the banner and invoke this callback when the close button is clicked.
      */
-    onClose?: () => void;
+    onDismiss?: () => void;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
@@ -494,10 +496,8 @@ declare const Disclosure: react.ForwardRefExoticComponent<{
     className?: string;
 }>, never> & Omit<Omit<RadixCollapsible.CollapsibleProps & react.RefAttributes<HTMLDivElement>, "ref">, "asChild" | "color" | "className" | "open" | "defaultOpen" | "onOpenChange"> & react.RefAttributes<HTMLDivElement>>;
 
-declare const DisclosureContent: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<RadixCollapsible.CollapsibleContentProps & react.RefAttributes<HTMLDivElement>, "ref">, "asChild" | "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+type DisclosureContentProps = ExcludeProps<BoxProps<typeof RadixCollapsible.Content>, "forceMount">;
+declare const DisclosureContent: react.ForwardRefExoticComponent<DisclosureContentProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const DisclosureTrigger: react.ForwardRefExoticComponent<{
     addonAfter?: ReactNode;
@@ -627,6 +627,18 @@ declare namespace DropdownMenu {
     var displayName: string;
 }
 
+declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<NonNullable<{
+    intent?: "danger" | "neutral" | undefined;
+} & {
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
+    description?: react.ReactNode;
+    icon?: react.ReactNode;
+}>, never> & Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<RadixMenu.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref">, "asChild" | "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+
 type DropdownMenuContentProps = ExcludeProps<BoxProps<typeof RadixMenu.Content, Pick<ComponentPropsWithoutRef<typeof MenuListbox>, "maxH" | "minW"> & {
     /**
      * Whether to show loading spinner inside the menu.
@@ -1124,6 +1136,87 @@ declare const ModalLayer: react.ForwardRefExoticComponent<Pick<Omit<Omit<NonNull
     children?: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
 
+declare const Nav: react.ForwardRefExoticComponent<{
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+} & Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+
+type NavAccountItemProps = BoxProps<"div", {
+    name?: string;
+    organization?: string;
+    src?: string;
+}>;
+declare const NavAccountItem: react.ForwardRefExoticComponent<{
+    name?: string;
+    organization?: string;
+    src?: string;
+} & Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLButtonElement>>;
+
+declare const NavBody: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const NavFooter: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const NavHeader: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+
+type NavItemProps = ButtonProps<typeof Button, {
+    active?: boolean;
+    "aria-label": string;
+}>;
+declare const NavItem: react.ForwardRefExoticComponent<{
+    active?: boolean;
+    "aria-label": string;
+} & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
+    icon?: react.ReactNode;
+    iconPosition?: "end" | "start";
+}, never> & Omit<NonNullable<Omit<{
+    iconOnly?: boolean | undefined;
+    intent?: "danger" | "neutral" | "primary" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "outline" | "solid" | "subtle" | undefined;
+}, "intent" | "variant"> & {
+    appearance?: "default" | "danger" | "primary" | "subtle" | "inverse" | "danger-outline";
+    disabled?: boolean;
+    loading?: boolean;
+}>, never> & Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, "size"> & Omit<Omit<Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
+    icon?: react.ReactNode;
+    iconPosition?: "end" | "start";
+}, never> & Omit<NonNullable<Omit<{
+    iconOnly?: boolean | undefined;
+    intent?: "danger" | "neutral" | "primary" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "outline" | "solid" | "subtle" | undefined;
+}, "intent" | "variant"> & {
+    appearance?: "default" | "danger" | "primary" | "subtle" | "inverse" | "danger-outline";
+    disabled?: boolean;
+    loading?: boolean;
+}>, never> & Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "color" | "disabled" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref">, "asChild" | "p" | "fontFamily" | "fontSize" | "size" | "animation" | "borderColor" | "color" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "disabled" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "className" | "aria-label" | "iconOnly" | "appearance" | "loading" | "addonAfter" | "addonBefore" | "icon" | "iconPosition"> & react.RefAttributes<HTMLButtonElement>>;
+
 type PaginationProps = BoxProps<"nav", {
     /**
      * The default active page in uncontrolled mode.
@@ -1302,91 +1395,30 @@ declare const Separator: react.ForwardRefExoticComponent<{
     className?: string;
 }>, never> & Omit<Omit<_radix_ui_react_separator.SeparatorProps & react.RefAttributes<HTMLDivElement>, "ref">, "asChild" | "color" | "className" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
-declare const Sidenav: react.ForwardRefExoticComponent<{
+type SidebarProps = {
+    children?: ReactNode;
+    /**
+     * The initial expanded state in uncontrolled mode.
+     */
     defaultExpanded?: boolean;
+    /**
+     * The expanded state in controlled mode.
+     */
     expanded?: boolean;
+    /**
+     * Handler that is called when the expanded state changes.
+     */
     onExpandedChange?: (expanded: boolean) => void;
-} & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLElement>>;
-
-type SidenavAccountItemProps = BoxProps<"div", {
-    name?: string;
-    organization?: string;
-    src?: string;
-}>;
-declare const SidenavAccountItem: react.ForwardRefExoticComponent<{
-    name?: string;
-    organization?: string;
-    src?: string;
-} & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLButtonElement>>;
-
-declare const SidenavBody: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
-
-declare const SidenavFooter: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
-
-declare const SidenavHeader: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
-
-type SidenavItemProps = ButtonProps<typeof Button, {
-    active?: boolean;
-    "aria-label": string;
-}>;
-declare const SidenavItem: react.ForwardRefExoticComponent<{
-    active?: boolean;
-    "aria-label": string;
-} & Omit<{
-    addonAfter?: react.ReactNode;
-    addonBefore?: react.ReactNode;
-    icon?: react.ReactNode;
-    iconPosition?: "end" | "start";
-}, never> & Omit<NonNullable<Omit<{
-    iconOnly?: boolean | undefined;
-    intent?: "danger" | "neutral" | "primary" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    variant?: "outline" | "solid" | "subtle" | undefined;
-}, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "inverse" | "danger-outline";
-    disabled?: boolean;
-    loading?: boolean;
-}>, never> & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, "size"> & Omit<Omit<Omit<{
-    addonAfter?: react.ReactNode;
-    addonBefore?: react.ReactNode;
-    icon?: react.ReactNode;
-    iconPosition?: "end" | "start";
-}, never> & Omit<NonNullable<Omit<{
-    iconOnly?: boolean | undefined;
-    intent?: "danger" | "neutral" | "primary" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    variant?: "outline" | "solid" | "subtle" | undefined;
-}, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "inverse" | "danger-outline";
-    disabled?: boolean;
-    loading?: boolean;
-}>, never> & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "color" | "disabled" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref">, "asChild" | "p" | "fontFamily" | "fontSize" | "size" | "animation" | "borderColor" | "color" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "disabled" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "className" | "aria-label" | "iconOnly" | "appearance" | "loading" | "addonAfter" | "addonBefore" | "icon" | "iconPosition"> & react.RefAttributes<HTMLButtonElement>>;
+};
+declare const Sidebar: {
+    ({ children, defaultExpanded, expanded: expandedProp, onExpandedChange, }: SidebarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-type SidenavToggleProps = Omit<ComponentPropsWithRef<typeof SidenavItem>, "aria-label"> & {
+type SidebarToggleProps = Omit<ComponentPropsWithRef<typeof NavItem>, "aria-label"> & {
     "aria-label"?: string;
 };
-declare const SidenavToggle: react.ForwardRefExoticComponent<Omit<SidenavToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const SidebarToggle: react.ForwardRefExoticComponent<Omit<SidebarToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare const Skeleton: react.ForwardRefExoticComponent<{
     children?: ReactElement;
@@ -1444,14 +1476,6 @@ declare const TabsTrigger: react.ForwardRefExoticComponent<{
      * Display content inside the button before `children`.
      */
     addonBefore?: ReactNode;
-    /**
-     * Display an icon before or after the button content.
-     */
-    icon?: ReactNode;
-    /**
-     * Control whether to show the icon before or after the button content.
-     */
-    iconPosition?: "end" | "start";
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
@@ -1622,4 +1646,4 @@ declare namespace TransitionGroup {
     var displayName: string;
 }
 
-export { Alert, AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTrigger, Avatar, AvatarGroup, AxiomProvider, Badge, Banner, BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, Code, Dialog, DialogBody, DialogClose, DialogFooter, DialogForm, DialogHeader, DialogTrigger, Disclosure, DisclosureContent, DisclosureTrigger, Drawer, DrawerActions, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldLabel, Flex, Grid, Heading, type HeadingProps, Indicator, Input, InputAddon, InputControl, type InputControlProps, InputRoot, Kbd, Listbox, ListboxCheckboxItem, ListboxEmpty, ListboxFooter, ListboxGroup, ListboxItem, ListboxItemIndicator, type ListboxItemProps, ListboxLabel, ListboxRadioItem, ListboxScrollArea, ListboxSeparator, MenuButton, ModalLayer, Pagination, type PaginationProps, Paper, Popover, PopoverAnchor, PopoverTrigger, Progress, Radio, RadioGroup, SearchInput, SegmentedControl, SegmentedControlItem, Separator, Sidenav, SidenavAccountItem, type SidenavAccountItemProps, SidenavBody, SidenavFooter, SidenavHeader, SidenavItem, type SidenavItemProps, SidenavToggle, type SidenavToggleProps, Skeleton, Spinner, Sprinkles, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, ThemeProvider, Toast, ToastAction, ToastProvider, ToastTitle, ToggleButton, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, TransitionGlobalConfig, TransitionGroup, extractBoxProps, layers_css as layers, sprinklesMerge };
+export { Alert, AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTrigger, Avatar, AvatarGroup, AxiomProvider, Badge, Banner, BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, Code, Dialog, DialogBody, DialogClose, DialogFooter, DialogForm, DialogHeader, DialogTrigger, Disclosure, DisclosureContent, DisclosureTrigger, Drawer, DrawerActions, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldLabel, Flex, Grid, Heading, type HeadingProps, Indicator, Input, InputAddon, InputControl, type InputControlProps, InputRoot, Kbd, Listbox, ListboxCheckboxItem, ListboxEmpty, ListboxFooter, ListboxGroup, ListboxItem, ListboxItemIndicator, type ListboxItemProps, ListboxLabel, ListboxRadioItem, ListboxScrollArea, ListboxSeparator, MenuButton, ModalLayer, Nav, NavAccountItem, type NavAccountItemProps, NavBody, NavFooter, NavHeader, NavItem, type NavItemProps, Pagination, type PaginationProps, Paper, Popover, PopoverAnchor, PopoverTrigger, Progress, Radio, RadioGroup, SearchInput, SegmentedControl, SegmentedControlItem, Separator, Sidebar, SidebarToggle, type SidebarToggleProps, Skeleton, Spinner, Sprinkles, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, ThemeProvider, Toast, ToastAction, ToastProvider, ToastTitle, ToggleButton, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, TransitionGlobalConfig, TransitionGroup, extractBoxProps, layers_css as layers, sprinklesMerge };

package/dist/index.js

@@ -40,6 +40,7 @@ export { DrawerHeader } from './packages/react/src/drawer-header/DrawerHeader.js
 export { DrawerTitle } from './packages/react/src/drawer-title/DrawerTitle.js';
 export { DrawerTrigger } from './packages/react/src/drawer-trigger/DrawerTrigger.js';
 export { DropdownMenu } from './packages/react/src/dropdown-menu/DropdownMenu.js';
+export { DropdownMenuCheckboxItem } from './packages/react/src/dropdown-menu-checkbox-item/DropdownMenuCheckboxItem.js';
 export { DropdownMenuContent } from './packages/react/src/dropdown-menu-content/DropdownMenuContent.js';
 export { DropdownMenuGroup } from './packages/react/src/dropdown-menu-group/DropdownMenuGroup.js';
 export { DropdownMenuItem } from './packages/react/src/dropdown-menu-item/DropdownMenuItem.js';
@@ -76,6 +77,12 @@ export { ListboxScrollArea } from './packages/react/src/listbox-scroll-area/List
 export { ListboxSeparator } from './packages/react/src/listbox-separator/ListboxSeparator.js';
 export { MenuButton } from './packages/react/src/menu-button/MenuButton.js';
 export { ModalLayer } from './packages/react/src/modal-layer/ModalLayer.js';
+export { Nav } from './packages/react/src/nav/Nav.js';
+export { NavAccountItem } from './packages/react/src/nav-account-item/NavAccountItem.js';
+export { NavBody } from './packages/react/src/nav-body/NavBody.js';
+export { NavFooter } from './packages/react/src/nav-footer/NavFooter.js';
+export { NavHeader } from './packages/react/src/nav-header/NavHeader.js';
+export { NavItem } from './packages/react/src/nav-item/NavItem.js';
 export { Pagination } from './packages/react/src/pagination/Pagination.js';
 export { Paper } from './packages/react/src/paper/Paper.js';
 export { Popover } from './packages/react/src/popover/Popover.js';
@@ -89,13 +96,8 @@ export { SearchInput } from './packages/react/src/search-input/SearchInput.js';
 export { SegmentedControl } from './packages/react/src/segmented-control/SegmentedControl.js';
 export { SegmentedControlItem } from './packages/react/src/segmented-control-item/SegmentedControlItem.js';
 export { Separator } from './packages/react/src/separator/Separator.js';
-export { Sidenav } from './packages/react/src/sidenav/Sidenav.js';
-export { SidenavAccountItem } from './packages/react/src/sidenav-account-item/SidenavAccountItem.js';
-export { SidenavBody } from './packages/react/src/sidenav-body/SidenavBody.js';
-export { SidenavFooter } from './packages/react/src/sidenav-footer/SidenavFooter.js';
-export { SidenavHeader } from './packages/react/src/sidenav-header/SidenavHeader.js';
-export { SidenavItem } from './packages/react/src/sidenav-item/SidenavItem.js';
-export { SidenavToggle } from './packages/react/src/sidenav-toggle/SidenavToggle.js';
+export { Sidebar } from './packages/react/src/sidebar/Sidebar.js';
+export { SidebarToggle } from './packages/react/src/sidebar-toggle/SidebarToggle.js';
 export { Skeleton } from './packages/react/src/skeleton/Skeleton.js';
 export { Spinner } from './packages/react/src/spinner/Spinner.js';
 export { mapResponsiveValue, sprinkles } from './packages/react/src/sprinkles/sprinkles.js';

package/dist/node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/parse-hotkey.js

@@ -1,3 +1,4 @@
+"use client";
 function parseHotkey(hotkey) {
   const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
   const modifiers = {

package/dist/node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/use-hotkeys.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 import { getHotkeyMatcher } from './parse-hotkey.js';
 

package/dist/node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect } from 'react';
 
 function attachMediaListener(query, callback) {

package/dist/node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { useUncontrolled } from '../use-uncontrolled/use-uncontrolled.js';
 

package/dist/node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from 'react';
 
 function useUncontrolled({

package/dist/packages/react/package.json.js

@@ -1,3 +1,3 @@
-var version = "0.11.1";
+var version = "0.12.0";
 
 export { version };

package/dist/packages/react/src/alert/Alert-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',justifyContent:'space-between',p:'12',pr:'16',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});

package/dist/packages/react/src/alert/Alert.js

@@ -20,7 +20,7 @@ const mapIntentToIcon = {
   warning: IconTriangleExclamationSolid
 };
 const Alert = forwardRef(
-  ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
+  ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
     const labelId = useId();
     return /* @__PURE__ */ jsxs(
       Flex,
@@ -33,7 +33,7 @@ const Alert = forwardRef(
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
           /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", id: labelId, my: "2", children }),
-          !!onClose && /* @__PURE__ */ jsx(
+          !!onDismiss && /* @__PURE__ */ jsx(
             Button,
             {
               appearance: "subtle",
@@ -41,7 +41,7 @@ const Alert = forwardRef(
               color: "fg.default",
               flex: "none",
               icon: /* @__PURE__ */ jsx(IconX, {}),
-              onClick: onClose,
+              onClick: onDismiss,
               size: "sm"
             }
           )

package/dist/packages/react/src/alert-dialog-content/AlertDialogContent-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-C0L1W0AH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-CBT4ik99.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'dropx0'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1826sqa'],variants:{size:{sm:'_14ds8yy',md:'_1kmsjxz',lg:'_1q23xxa'}}});
-var nestedDialogCountVar = 'var(--rhkbg7)';
-var root = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'qg7zhy']});
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'ssthbc'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'idt198'],variants:{size:{sm:'_1kw2vj1',md:'_18kv87o',lg:'b6i756'}}});
+var nestedDialogCountVar = 'var(--_1y0sw0f)';
+var root = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_125u4cl']});
 
 export { backdrop, content, nestedDialogCountVar, root };

package/dist/packages/react/src/alert-dialog-context/AlertDialogContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [AlertDialogContextProvider, useAlertDialogContext] = createContext("AlertDialog");

package/dist/packages/react/src/alert-dialog-footer/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-BRTnaXQ8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-DJdMcgnM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'16',justifyContent:'end',px:'24',py:'20'},'mk0cds']});
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'16',justifyContent:'end',px:'24',py:'20'},'_1f7hvb2']});
 
 export { footer };

package/dist/packages/react/src/autocomplete-content/AutocompleteContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-BdLxr1Z_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-DD6Dfjxc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{p:'4'},'sqfxyd']});
+var content = recipeRuntime({base:[{p:'4'},'_1d7aoya']});
 
 export { content };

package/dist/packages/react/src/autocomplete-content/AutocompleteContent.js

@@ -8,6 +8,7 @@ import { useAutocompleteContext } from '../autocomplete-context/AutocompleteCont
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
 import { CommandListbox } from '../command-listbox/CommandListbox.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { ModalLayer } from '../modal-layer/ModalLayer.js';
@@ -24,6 +25,7 @@ const AutocompleteContent = forwardRef(
     ...props
   }, ref) => {
     const { isOpen, items } = useAutocompleteContext("AutocompleteContent");
+    const { setPlaced } = useCommandContext("AutocompleteContent");
     return isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { role: "status", children: loading ? "Loading" : `${items.length} option${items.length === 1 ? "" : "s"} available` }) }) }),
       /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -41,7 +43,16 @@ const AutocompleteContent = forwardRef(
               ref,
               ...content({}, className),
               ...props,
-              children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset: 5, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children })
+              children: /* @__PURE__ */ jsx(
+                PopperContent,
+                {
+                  align,
+                  onPlaced: () => setPlaced(true),
+                  side,
+                  sideOffset: 5,
+                  children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
+                }
+              )
             }
           )
         }

package/dist/packages/react/src/autocomplete-context/AutocompleteContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [AutocompleteContextProvider, useAutocompleteContext] = createContext("Autocomplete");

package/dist/packages/react/src/autocomplete-radio-item/AutocompleteRadioItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { AutocompleteItem } from '../autocomplete-item/AutocompletItem.js';
+import { AutocompleteItem } from '../autocomplete-item/AutocompleteItem.js';
 import { ListboxRadioItem } from '../listbox-radio-item/ListboxRadioItem.js';
 
 const AutocompleteRadioItem = forwardRef(({ children, ...props }, ref) => {

package/dist/packages/react/src/avatar/Avatar-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Vo2OEHTD.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-DfBE8AZb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-DaEbM6Dm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1s6fx03'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'t19ntn'],sm:[{fontSize:'xs',size:'sm'},'k6qu9p'],md:[{fontSize:'md',size:'md'},'hc0fkv'],lg:[{fontSize:'lg',size:'lg'},'_4shcl7'],xl:[{fontSize:'2xl',size:'xl'},'yb25gq'],'3xl':[{fontSize:'4xl',size:'3xl'},'avvcrq']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1xfv4i3'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'xd7dgi'],sm:[{fontSize:'xs',size:'sm'},'_1w6f87l'],md:[{fontSize:'md',size:'md'},'g6hjuv'],lg:[{fontSize:'lg',size:'lg'},'_1hq45yy'],xl:[{fontSize:'2xl',size:'xl'},'_1wemkgd'],'3xl':[{fontSize:'4xl',size:'3xl'},'majuqc']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
 

package/dist/packages/react/src/avatar-group/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Vo2OEHTD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_10e0v01',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['d6twk6',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DJjwTnzN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-aY2Bq-5D.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1l2zuuq']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_4hisb']});
 
 export { backdrop };

package/dist/packages/react/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-35fv_Rde.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-COUckmC-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_4qaa28'],variants:{intent:{danger:'_1fuhj2z',information:'_1dag4qa',neutral:'e0revi',primary:'ojvx0s',success:'_7vxxyq',warning:'_2weqgt'},variant:{light:'r9mbo9',solid:'_117ca5a'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_3p6lo7'],variants:{intent:{danger:'_1oge57o',information:'r4hfnp',neutral:'_1mjqgua',primary:'_1hkfltl',success:'_144p78s',warning:'_1up9d85'},variant:{light:'_68bru9',solid:'e7mx75'}}});
 
 export { badge };

package/dist/packages/react/src/banner/Banner-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});

package/dist/packages/react/src/banner/Banner.js

@@ -20,7 +20,7 @@ const mapIntentToIcon = {
   warning: IconTriangleExclamationSolid
 };
 const Banner = forwardRef(
-  ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
+  ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
     const labelId = useId();
     return /* @__PURE__ */ jsxs(
       Flex,
@@ -33,7 +33,7 @@ const Banner = forwardRef(
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
           /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", id: labelId, my: "2", children }),
-          !!onClose && /* @__PURE__ */ jsx(
+          !!onDismiss && /* @__PURE__ */ jsx(
             Button,
             {
               appearance: "subtle",
@@ -41,7 +41,7 @@ const Banner = forwardRef(
               color: "fg.default",
               flex: "none",
               icon: /* @__PURE__ */ jsx(IconX, {}),
-              onClick: onClose,
+              onClick: onDismiss,
               size: "sm"
             }
           )

package/dist/packages/react/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-CswI2BUt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-Bza2cQ35.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1e1v0fv'});
+var box = recipeRuntime({base:'_11i0ktz'});
 
 export { box };