@optiaxiom/react 0.11.0 → 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.0";
+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-ChC54CMt.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/AlertDialog.js

@@ -18,11 +18,13 @@ function AlertDialog({
     onChange: onOpenChange,
     prop: openProp
   });
-  const [isRootDialog, nestedDialogCount, setNestedDialogCount] = useNestedDialogCount("AlertDialog", open);
+  const [nestedDialogCount, setNestedDialogCount] = useNestedDialogCount(
+    "AlertDialog",
+    open
+  );
   return /* @__PURE__ */ jsx(NestedDialogContextProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixAlertDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
     AlertDialogContextProvider,
     {
-      isRootDialog,
       nestedDialogCount,
       open,
       children

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

@@ -1,9 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-C1ZBxxAq.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 content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1mtnjlh'],variants:{size:{sm:'ce4kam',md:'k3kd81',lg:'_1maefxp'}}});
-var nestedDialogCountVar = 'var(--axjnmk)';
-var root = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_1yl84x9']});
+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 { content, nestedDialogCountVar, root };
+export { backdrop, content, nestedDialogCountVar, root };

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef } from 'react';
 import { useAlertDialogContext } from '../alert-dialog-context/AlertDialogContext.js';
@@ -13,13 +12,19 @@ import { Flex } from '../flex/Flex.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
-import { root, nestedDialogCountVar, content } from './AlertDialogContent-css.js';
+import { backdrop, root, nestedDialogCountVar, content } from './AlertDialogContent-css.js';
 
 const AlertDialogContent = forwardRef(({ children, size = "sm", style, ...props }, ref) => {
-  const { isRootDialog, nestedDialogCount, open } = useAlertDialogContext("AlertDialogContent");
-  const BackdropContainer = isRootDialog ? Transition : VisuallyHidden;
+  const { nestedDialogCount, open } = useAlertDialogContext("AlertDialogContent");
   return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixAlertDialog.Portal, { forceMount: true, children: [
-    /* @__PURE__ */ jsx(BackdropContainer, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {}) }) }),
+    /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
+      Backdrop,
+      {
+        asChild: true,
+        ...backdrop({ hidden: nestedDialogCount > 0 }),
+        children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {})
+      }
+    ) }),
     /* @__PURE__ */ jsxs(Flex, { ...root(), children: [
       /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
       /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(
@@ -34,10 +39,7 @@ const AlertDialogContent = forwardRef(({ children, size = "sm", style, ...props
             ...style
           },
           ...content({ size }),
-          children: /* @__PURE__ */ jsxs(RadixAlertDialog.Content, { ref, ...props, children: [
-            children,
-            nestedDialogCount > 0 && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { rounded: "inherit" }) })
-          ] })
+          children: /* @__PURE__ */ jsx(RadixAlertDialog.Content, { ref, ...props, children })
         }
       ) }),
       /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),

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-ChC54CMt.css';
-import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-GXqRk14z.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'},'_3rbfl4']});
+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-ChC54CMt.css';
-import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-DMIqK71P.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'},'g7tsdd']});
+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-ChC54CMt.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-kCeuibvy.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-DdwbT9iB.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'},'yyxpw4'],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'},'_1x8htko'],sm:[{fontSize:'xs',size:'sm'},'_964u5l'],md:[{fontSize:'md',size:'md'},'_1hmqidj'],lg:[{fontSize:'lg',size:'lg'},'_1uf8b7i'],xl:[{fontSize:'2xl',size:'xl'},'xg9l2c'],'3xl':[{fontSize:'4xl',size:'3xl'},'rsulhq']}}});
+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-ChC54CMt.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-kCeuibvy.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:['ck9sc0',{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-ChC54CMt.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DfW2ecLx.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'},'_5ieef6']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_4hisb']});
 
 export { backdrop };