@optiaxiom/react 0.1.0-next.11 → 0.1.0-next.13

package/dist/index.js

@@ -1,22 +1,39 @@
+export { Accordion } from './accordion/Accordion.js';
+export { AccordionContent } from './accordion-content/AccordionContent.js';
+export { AccordionItem } from './accordion-item/AccordionItem.js';
+export { AccordionTrigger } from './accordion-trigger/AccordionTrigger.js';
+export { Alert } from './alert/Alert.js';
+export { AlertDescription } from './alert-description/AlertDescription.js';
 export { AlertDialog } from './alert-dialog/AlertDialog.js';
+export { AlertTitle } from './alert-title/AlertTitle.js';
 export { AnimatePresence } from './animate-presence/AnimatePresence.js';
 export { usePresence } from './animate-presence/usePresence.js';
 export { Avatar } from './avatar/Avatar.js';
+export { AvatarGroup } from './avatar-group/AvatarGroup.js';
+export { AxiomProvider } from './axiom-provider/AxiomProvider.js';
 export { Badge } from './badge/Badge.js';
 export { Box } from './box/Box.js';
+export { BreadcrumbItem } from './breadcrumb-item/BreadcrumbItem.js';
+export { Breadcrumbs } from './breadcrumbs/Breadcrumbs.js';
 export { Button } from './button/Button.js';
 export { ButtonGroup } from './button-group/ButtonGroup.js';
 export { Checkbox } from './checkbox/Checkbox.js';
-export { Chip } from './chip/Chip.js';
 export { Code } from './code/Code.js';
 export { Dialog } from './dialog/Dialog.js';
 export { DialogBody } from './dialog-body/DialogBody.js';
 export { DialogFooter } from './dialog-footer/DialogFooter.js';
 export { DialogTitle } from './dialog-title/DialogTitle.js';
+export { Drawer } from './drawer/Drawer.js';
+export { DrawerBody } from './drawer-body/DrawerBody.js';
+export { DrawerFooter } from './drawer-footer/DrawerFooter.js';
+export { DrawerTitle } from './drawer-title/DrawerTitle.js';
 export { Field } from './field/Field.js';
 export { Flex } from './flex/Flex.js';
 export { Grid } from './grid/Grid.js';
 export { Heading } from './heading/Heading.js';
+export { HoverCard } from './hover-card/HoverCard.js';
+export { HoverCardContent } from './hover-card-content/HoverCardContent.js';
+export { HoverCardTrigger } from './hover-card-trigger/HoverCardTrigger.js';
 export { Indicator } from './indicator/Indicator.js';
 export { Input } from './input/Input.js';
 export { Kbd } from './kbd/Kbd.js';
@@ -27,7 +44,7 @@ export { MenuItem } from './menu-item/MenuItem.js';
 export { MenuLabel } from './menu-label/MenuLabel.js';
 export { MenuSeparator } from './menu-separator/MenuSeparator.js';
 export { MenuTrigger } from './menu-trigger/MenuTrigger.js';
-export { Paper } from './paper/Paper.js';
+export { Pagination } from './pagination/Pagination.js';
 export { Popover } from './popover/Popover.js';
 export { PopoverContent } from './popover-content/PopoverContent.js';
 export { PopoverTrigger } from './popover-trigger/PopoverTrigger.js';

package/dist/input-base/InputBase-css.js

@@ -1,9 +1,9 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
-import './../assets/src/input-base/InputBase.css.ts.vanilla-ktVP2iXx.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
+import './../assets/src/input-base/InputBase.css.ts.vanilla-By5uGeYP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:['_4nrdl00',{bg:'transparent',flex:'auto'},'_4nrdl02','_4nrdl03'],variants:{size:{sm:{px:'4',py:'0'},md:{px:'8',py:'4'},lg:{px:'8',py:'8'}}}});
-var wrapper = recipeRuntime({base:[{border:'1',flexDirection:'row',gap:'0',rounded:'sm'},'_4nrdl01']});
+var input = recipeRuntime({base:['_4nrdl00',{bg:'transparent',flex:'auto'},'_4nrdl02','_4nrdl03'],variants:{size:{sm:{px:'4',py:'0'},md:{px:'8',py:'4'},lg:{p:'8'}}}});
+var wrapper = recipeRuntime({base:[{border:'1',flexDirection:'row',gap:'0',rounded:'md'},'_4nrdl01']});
 
 export { input, wrapper };

package/dist/input-base/InputBase.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, cloneElement } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, cloneElement } from 'react';
 import { Box } from '../box/Box.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
@@ -15,6 +16,7 @@ const InputBase = forwardRef(
   ({
     children,
     className,
+    decoratorPointerEvents = "auto",
     disabled,
     endDecorator,
     error: errorProp,
@@ -22,9 +24,22 @@ const InputBase = forwardRef(
     size = "md",
     startDecorator,
     ...props
-  }, ref) => {
+  }, outerRef) => {
     const { error, id, required } = useFieldContext({ error: errorProp });
     const { restProps, sprinkleProps } = extractSprinkles(props);
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const decoratorProps = decoratorPointerEvents === "none" && {
+      cursor: "text",
+      onMouseDown: (event) => {
+        if (event.target !== event.currentTarget) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        innerRef.current?.focus();
+      }
+    };
     return /* @__PURE__ */ jsxs(
       Flex,
       {
@@ -34,7 +49,7 @@ const InputBase = forwardRef(
         ...wrapper({}, className),
         ...sprinkleProps,
         children: [
-          startDecorator && /* @__PURE__ */ jsx(Text, { asChild: true, children: fallbackSpan(startDecorator) }),
+          startDecorator && /* @__PURE__ */ jsx(Text, { asChild: true, ...decoratorProps, children: fallbackSpan(startDecorator) }),
           /* @__PURE__ */ jsx(
             Box,
             {
@@ -55,7 +70,7 @@ const InputBase = forwardRef(
               })
             }
           ),
-          endDecorator && /* @__PURE__ */ jsx(Text, { asChild: true, children: fallbackSpan(endDecorator) })
+          endDecorator && /* @__PURE__ */ jsx(Text, { asChild: true, ...decoratorProps, children: fallbackSpan(endDecorator) })
         ]
       }
     );

package/dist/kbd/Kbd-css.js

@@ -1,7 +1,8 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/kbd/Kbd.css.ts.vanilla-d7Xg4vLz.css';
+import './../assets/src/kbd/Kbd.css.ts.vanilla-CBcapUTx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var keys = recipeRuntime({base:'q5e32p0'});
+var kbd = recipeRuntime({base:{alignItems:'center',display:'inline-flex',flexDirection:'row',whiteSpace:'nowrap'},variants:{variant:{outline:{border:'1',borderB:'2',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
+var keys = recipeRuntime({base:'q5e32p0',variants:{variant:{outline:'q5e32p1',subtle:{}}}});
 
-export { keys };
+export { kbd, keys };

package/dist/kbd/Kbd.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Code } from '../code/Code.js';
-import { keys } from './Kbd-css.js';
+import { kbd, keys } from './Kbd-css.js';
 
 const mapKeyToCode = {
   command: "\u2318",
@@ -19,26 +19,11 @@ const mapKeyToCode = {
   up: "\u2191"
 };
 const Kbd = forwardRef(
-  ({ children, keys: keys$1, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Code,
-      {
-        alignItems: "center",
-        asChild: true,
-        border: "1",
-        borderB: "2",
-        display: "inline-flex",
-        flexDirection: "row",
-        fontWeight: "600",
-        gap: "4",
-        whiteSpace: "nowrap",
-        ...props,
-        children: /* @__PURE__ */ jsxs("kbd", { ref, children: [
-          keys$1 && (Array.isArray(keys$1) ? keys$1 : [keys$1]).map((key) => /* @__PURE__ */ jsx("abbr", { title: key, ...keys(), children: mapKeyToCode[key] }, key)),
-          children
-        ] })
-      }
-    );
+  ({ children, className, keys: keys$1, variant = "outline", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Code, { asChild: true, ...kbd({ variant }, className), ...props, children: /* @__PURE__ */ jsxs("kbd", { ref, children: [
+      keys$1 && (Array.isArray(keys$1) ? keys$1 : [keys$1]).map((key) => /* @__PURE__ */ jsx("abbr", { title: key, ...keys({ variant }), children: mapKeyToCode[key] }, key)),
+      children
+    ] }) });
   }
 );
 Kbd.displayName = "@optiaxiom/react/Kbd";

package/dist/link/Link-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
 import './../assets/src/link/Link.css.ts.vanilla-PjwC2Bar.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/menu/Menu.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { MenuContext } from '../menu-context/MenuContext.js';
+import { MenuContextProvider } from '../menu-context/MenuContext.js';
 
 const Menu = ({
   children,
@@ -15,7 +15,7 @@ const Menu = ({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixMenu.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(MenuContext.Provider, { value: { open }, children }) });
+  return /* @__PURE__ */ jsx(RadixMenu.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(MenuContextProvider, { open, children }) });
 };
 Menu.displayName = "@optiaxiom/react/Menu";
 

package/dist/menu-content/MenuContent-css.js

@@ -2,6 +2,6 @@ import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/menu-content/MenuContent.css.ts.vanilla-BVK7SB5f.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',maxW:'xs',overflow:'auto',p:'4',rounded:'lg',shadow:'md',z:'popover'},'wh2a2g0']});
+var content = recipeRuntime({base:[{bg:'surface',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',maxW:'xs',overflow:'auto',p:'4',rounded:'lg',shadow:'md',z:'popover'},'wh2a2g0']});
 
 export { content };

package/dist/menu-content/MenuContent.js

@@ -1,17 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import '../animate-presence/PresenceContext.js';
-import { MenuContext } from '../menu-context/MenuContext.js';
-import { Paper } from '../paper/Paper.js';
+import { Box } from '../box/Box.js';
+import { useMenuContext } from '../menu-context/MenuContext.js';
 import { Transition } from '../transition/Transition.js';
 import { content } from './MenuContent-css.js';
 
 const MenuContent = forwardRef(
   ({ align = "start", children, className, sideOffset = 2, ...props }, ref) => {
-    const { open } = useContext(MenuContext);
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(
+    const { open } = useMenuContext("MenuContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(
       RadixMenu.Content,
       {
         align,

package/dist/menu-context/MenuContext.js

@@ -1,7 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from '@radix-ui/react-context';
 
-const MenuContext = createContext({
-  open: void 0
-});
+const [MenuContextProvider, useMenuContext] = createContext("Menu");
 
-export { MenuContext };
+export { MenuContextProvider, useMenuContext };

package/dist/menu-item/MenuItem-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
 import './../assets/src/menu-item/MenuItem.css.ts.vanilla-BjEdkhqZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/menu-item/MenuItem.js

@@ -5,6 +5,8 @@ import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles-css.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { item } from './MenuItem-css.js';
 
 const MenuItem = forwardRef(
@@ -24,9 +26,9 @@ const MenuItem = forwardRef(
         ...item({ colorScheme }),
         ...sprinkleProps,
         children: /* @__PURE__ */ jsxs(RadixMenu.Item, { ...restProps, children: [
-          startDecorator,
+          startDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, h: "16", w: "auto", children: fallbackSpan(startDecorator) }),
           /* @__PURE__ */ jsx(Box, { flex: "1", children }),
-          endDecorator
+          endDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "xs", children: fallbackSpan(endDecorator) })
         ] })
       }
     );

package/dist/pagination/Pagination-css.js

@@ -0,0 +1,8 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
+import './../assets/src/pagination/Pagination.css.ts.vanilla-CP7Jjsxf.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'_1w594c40'});
+
+export { button };

package/dist/pagination/Pagination.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { usePagination } from '@mantine/hooks';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { IconAngleLeft } from '../icons/IconAngleLeft.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { IconEllipsis } from '../icons/IconEllipsis.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { button } from './Pagination-css.js';
+
+const Pagination = forwardRef(
+  ({
+    boundaries = 1,
+    defaultPage,
+    disabled,
+    onPageChange,
+    page: pageProp,
+    siblings = 1,
+    total,
+    ...props
+  }, ref) => {
+    const [value, setValue] = useControllableState({
+      defaultProp: defaultPage,
+      onChange: onPageChange,
+      prop: pageProp
+    });
+    const { active, next, previous, range, setPage } = usePagination({
+      boundaries,
+      onChange: setValue,
+      page: value,
+      siblings,
+      total
+    });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "2", children: /* @__PURE__ */ jsxs("ul", { children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Prev", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "secondary",
+          "aria-label": "Previous page",
+          disabled: disabled || active === 1,
+          icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
+          onClick: previous
+        }
+      ) }) }),
+      range.map((page, index) => /* @__PURE__ */ jsx("li", { children: page === "dots" ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          alignItems: "stretch",
+          display: "flex",
+          justifyContent: "center",
+          py: "10",
+          size: "md",
+          children: /* @__PURE__ */ jsx(Box, { alignItems: "end", display: "flex", children: /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(IconEllipsis, {}) }) })
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "secondary",
+          "aria-current": active === page ? "page" : void 0,
+          "data-state": active === page ? "active" : void 0,
+          disabled,
+          onClick: () => setPage(page),
+          ...button(),
+          children: /* @__PURE__ */ jsxs(Box, { mx: "0", children: [
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: "page" }),
+            " ",
+            page,
+            page === 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { children: "(first page)" }) : page === total ? /* @__PURE__ */ jsx(VisuallyHidden, { children: "(last page)" }) : null
+          ] })
+        }
+      ) }, `${index}`)),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Next", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "secondary",
+          "aria-label": "Next page",
+          disabled: disabled || active === total,
+          icon: /* @__PURE__ */ jsx(IconAngleRight, {}),
+          onClick: next
+        }
+      ) }) })
+    ] }) }) }) });
+  }
+);
+Pagination.displayName = "@optiaxiom/react/Pagination";
+
+export { Pagination };

package/dist/pill/Pill-css.js

@@ -0,0 +1,8 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
+import './../assets/src/pill/Pill.css.ts.vanilla-CMi1obNV.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var pill = recipeRuntime({base:[{bg:'neutral.100',border:'0',fontSize:'sm',rounded:'md'},'_176xwa50'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+
+export { pill };

package/dist/pill/Pill.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { Text } from '../text/Text.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { pill } from './Pill-css.js';
+
+const Pill = forwardRef(
+  ({
+    children,
+    className,
+    endDecorator,
+    onRemove,
+    size = "md",
+    startDecorator,
+    ...props
+  }, ref) => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Backspace" && onRemove) {
+        onRemove();
+      }
+    };
+    return /* @__PURE__ */ jsx(Tooltip, { auto: true, content: children, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        endDecorator,
+        onKeyDown: handleKeyDown,
+        ref,
+        startDecorator,
+        ...pill({ size }, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Text, { display: "block", fontSize: "inherit", truncate: true, children })
+      }
+    ) });
+  }
+);
+Pill.displayName = "@optiaxiom/react/Pill";
+
+export { Pill };

package/dist/popover/Popover.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { PopoverContext } from '../popover-context/PopoverContext.js';
+import { PopoverContextProvider } from '../popover-context/PopoverContext.js';
 
 const Popover = ({
   children,
@@ -15,7 +15,7 @@ const Popover = ({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixPopover.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open }, children }) });
+  return /* @__PURE__ */ jsx(RadixPopover.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(PopoverContextProvider, { open, children }) });
 };
 Popover.displayName = "@optiaxiom/react/Popover";
 

package/dist/popover-content/PopoverContent-css.js

@@ -2,6 +2,6 @@ import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/popover-content/PopoverContent.css.ts.vanilla-RHzagv6W.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'_1nk03ow0']});
+var content = recipeRuntime({base:[{bg:'surface',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'_1nk03ow0']});
 
 export { content };

package/dist/popover-content/PopoverContent.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import '../animate-presence/PresenceContext.js';
-import { Paper } from '../paper/Paper.js';
-import { PopoverContext } from '../popover-context/PopoverContext.js';
+import { Box } from '../box/Box.js';
+import { usePopoverContext } from '../popover-context/PopoverContext.js';
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import { theme } from '../styles/theme-css.js';
 import { Transition } from '../transition/Transition.js';
@@ -19,8 +19,8 @@ const PopoverContent = forwardRef(
     withArrow,
     ...props
   }, ref) => {
-    const { open } = useContext(PopoverContext);
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
+    const { open } = usePopoverContext("PopoverContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
       RadixPopover.Content,
       {
         align,

package/dist/popover-context/PopoverContext.js

@@ -1,7 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from '@radix-ui/react-context';
 
-const PopoverContext = createContext({
-  open: void 0
-});
+const [PopoverContextProvider, usePopoverContext] = createContext("Popover");
 
-export { PopoverContext };
+export { PopoverContextProvider, usePopoverContext };

package/dist/radio-group-item/RadioGroupItem-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
 import './../assets/src/control-base/ControlBase.css.ts.vanilla-DGX7Yb9J.css';
 import './../assets/src/radio-group-item/RadioGroupItem.css.ts.vanilla-BFZr4-E-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';

package/dist/separator/Separator-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/separator/Separator.css.ts.vanilla-C_EYtori.css';
+import './../assets/src/separator/Separator.css.ts.vanilla-CnlaHICJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';