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

package/dist/{menu-trigger/MenuTrigger.js → dialog-close/DialogClose.js}

@@ -1,17 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { IconAngleDown } from '../icons/IconAngleDown.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles-css.js';
 
-const MenuTrigger = forwardRef(
+const DialogClose = forwardRef(
   ({ asChild, children, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", ...restProps, children }) });
+    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children }) });
   }
 );
-MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
+DialogClose.displayName = "@optiaxiom/react/DialogClose";
 
-export { MenuTrigger };
+export { DialogClose };

package/dist/{dialog/Dialog-css.js → dialog-content/DialogContent-css.js}

@@ -1,9 +1,9 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/dialog/Dialog.css.ts.vanilla-BlNHlzx8.css';
+import './../assets/src/dialog-content/DialogContent.css.ts.vanilla-B-pX7DR_.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'_1hgarxm5']});
-var content = recipeRuntime({base:[{bg:'surface',rounded:'lg',shadow:'md',z:'popover'},'_1hgarxm0'],variants:{size:{sm:'_1hgarxm1',md:'_1hgarxm2',lg:'_1hgarxm3'}}});
-var overlay = recipeRuntime({base:[{bg:'overlay',z:'popover'},'_1hgarxm4']});
+var close = recipeRuntime({base:[{rounded:'full'},'_16k1qec5']});
+var content = recipeRuntime({base:[{bg:'surface',rounded:'lg',shadow:'md',z:'popover'},'_16k1qec0'],variants:{size:{sm:'_16k1qec1',md:'_16k1qec2',lg:'_16k1qec3'}}});
+var overlay = recipeRuntime({base:[{bg:'overlay',z:'popover'},'_16k1qec4']});
 
 export { close, content, overlay };

package/dist/dialog-content/DialogContent.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import '../animate-presence/PresenceContext.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { useDialogContext } from '../dialog-context/DialogContext.js';
+import { IconX } from '../icons/IconX.js';
+import { Transition } from '../transition/Transition.js';
+import { overlay, content, close } from './DialogContent-css.js';
+
+const DialogContent = forwardRef(
+  ({ children, size = "md", withCloseButton = false, ...props }, ref) => {
+    const { open } = useDialogContext("DialogContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, ...props, children: [
+        children,
+        withCloseButton && /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "secondary",
+            "aria-label": "Close",
+            asChild: true,
+            icon: /* @__PURE__ */ jsx(IconX, {}),
+            size: "sm",
+            ...close(),
+            children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
+          }
+        )
+      ] }) }) })
+    ] }) });
+  }
+);
+DialogContent.displayName = "@optiaxiom/react/DialogContent";
+
+export { DialogContent };

package/dist/dialog-context/DialogContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [DialogContextProvider, useDialogContext] = createContext("Dialog");
+
+export { DialogContextProvider, useDialogContext };

package/dist/dialog-description/DialogDescription.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Text } from '../text/Text.js';
+
+const DialogDescription = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      asChild: true,
+      color: "fg.secondary",
+      fontWeight: "400",
+      pb: "xs",
+      px: "lg",
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixDialog.Description, { children })
+    }
+  );
+});
+DialogDescription.displayName = "@optiaxiom/react/DialogDescription";
+
+export { DialogDescription };

package/dist/dialog-title/DialogTitle.js

@@ -1,19 +1,23 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
 import { Heading } from '../heading/Heading.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles-css.js';
-import { Text } from '../text/Text.js';
 
 const DialogTitle = forwardRef(
-  ({ children, description, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsxs(Flex, { gap: "xs", pb: "md", pt: "lg", px: "lg", ...sprinkleProps, children: [
-      /* @__PURE__ */ jsx(Heading, { asChild: true, fontWeight: "500", level: "3", children: /* @__PURE__ */ jsx(RadixDialog.Title, { ref, ...restProps, children }) }),
-      /* @__PURE__ */ jsx(Text, { asChild: true, color: "fg.secondary", empty: "hidden", fontWeight: "400", children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description }) })
-    ] });
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Heading,
+      {
+        asChild: true,
+        fontWeight: "500",
+        level: "3",
+        p: "lg",
+        pb: "xs",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx(RadixDialog.Title, { children })
+      }
+    );
   }
 );
 DialogTitle.displayName = "@optiaxiom/react/DialogTitle";

package/dist/dialog-trigger/DialogTrigger.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles-css.js';
+
+const DialogTrigger = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children }) });
+  }
+);
+DialogTrigger.displayName = "@optiaxiom/react/DialogTrigger";
+
+export { DialogTrigger };

package/dist/{menu/Menu.js → dropdown-menu/DropdownMenu.js}

@@ -1,22 +1,22 @@
 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 { MenuContextProvider } from '../menu-context/MenuContext.js';
+import { DropdownMenuContextProvider } from '../dropdown-menu-context/DropdownMenuContext.js';
 
-const Menu = ({
+function DropdownMenu({
   children,
   defaultOpen,
   onOpenChange,
   open: openProp,
   ...props
-}) => {
+}) {
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixMenu.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(MenuContextProvider, { open, children }) });
-};
-Menu.displayName = "@optiaxiom/react/Menu";
+  return /* @__PURE__ */ jsx(RadixMenu.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DropdownMenuContextProvider, { open, children }) });
+}
+DropdownMenu.displayName = "@optiaxiom/react/DropdownMenu";
 
-export { Menu };
+export { DropdownMenu };

package/dist/{menu-content/MenuContent-css.js → dropdown-menu-content/DropdownMenuContent-css.js}

@@ -1,7 +1,7 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/menu-content/MenuContent.css.ts.vanilla-BVK7SB5f.css';
+import './../assets/src/dropdown-menu-content/DropdownMenuContent.css.ts.vanilla-EXOZ-w-n.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-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']});
+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'},'yxbc160']});
 
 export { content };

package/dist/{menu-content/MenuContent.js → dropdown-menu-content/DropdownMenuContent.js}

@@ -4,13 +4,13 @@ import { forwardRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import '../animate-presence/PresenceContext.js';
 import { Box } from '../box/Box.js';
-import { useMenuContext } from '../menu-context/MenuContext.js';
+import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
 import { Transition } from '../transition/Transition.js';
-import { content } from './MenuContent-css.js';
+import { content } from './DropdownMenuContent-css.js';
 
-const MenuContent = forwardRef(
+const DropdownMenuContent = forwardRef(
   ({ align = "start", children, className, sideOffset = 2, ...props }, ref) => {
-    const { open } = useMenuContext("MenuContent");
+    const { open } = useDropdownMenuContext("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,
       {
@@ -22,6 +22,6 @@ const MenuContent = forwardRef(
     ) }) }) }) });
   }
 );
-MenuContent.displayName = "@optiaxiom/react/MenuContent";
+DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
 
-export { MenuContent };
+export { DropdownMenuContent };

package/dist/dropdown-menu-context/DropdownMenuContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [DropdownMenuContextProvider, useDropdownMenuContext] = createContext("Menu");
+
+export { DropdownMenuContextProvider, useDropdownMenuContext };

package/dist/dropdown-menu-item/DropdownMenuItem-css.js

@@ -0,0 +1,8 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/styles/theme.css.ts.vanilla-BZP-0Wgr.css';
+import './../assets/src/dropdown-menu-item/DropdownMenuItem.css.ts.vanilla-iU0t5wQu.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_10p8y0d2'],variants:{colorScheme:{danger:'_10p8y0d3',neutral:'_10p8y0d4'}}});
+
+export { item };

package/dist/{menu-item/MenuItem.js → dropdown-menu-item/DropdownMenuItem.js}

@@ -7,9 +7,9 @@ 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';
+import { item } from './DropdownMenuItem-css.js';
 
-const MenuItem = forwardRef(
+const DropdownMenuItem = forwardRef(
   ({
     children,
     colorScheme = "neutral",
@@ -34,6 +34,6 @@ const MenuItem = forwardRef(
     );
   }
 );
-MenuItem.displayName = "@optiaxiom/react/MenuItem";
+DropdownMenuItem.displayName = "@optiaxiom/react/DropdownMenuItem";
 
-export { MenuItem };
+export { DropdownMenuItem };

package/dist/{menu-label/MenuLabel.js → dropdown-menu-label/DropdownMenuLabel.js}

@@ -3,7 +3,7 @@ import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 
-const MenuLabel = forwardRef(
+const DropdownMenuLabel = forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -20,6 +20,6 @@ const MenuLabel = forwardRef(
     );
   }
 );
-MenuLabel.displayName = "@optiaxiom/react/MenuLabel";
+DropdownMenuLabel.displayName = "@optiaxiom/react/DropdownMenuLabel";
 
-export { MenuLabel };
+export { DropdownMenuLabel };

package/dist/dropdown-menu-separator/DropdownMenuSeparator.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { Separator } from '../separator/Separator.js';
+
+const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", mx: "-4", my: "2", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
+DropdownMenuSeparator.displayName = "@optiaxiom/react/DropdownMenuSeparator";
+
+export { DropdownMenuSeparator };

package/dist/dropdown-menu-trigger/DropdownMenuTrigger.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles-css.js';
+
+const DropdownMenuTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", ...restProps, children }) });
+});
+DropdownMenuTrigger.displayName = "@optiaxiom/react/DropdownMenuTrigger";
+
+export { DropdownMenuTrigger };

package/dist/grid/Grid.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 
 const Grid = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Box, { cols: "1", display: "grid", gap: "md", ref, ...props });
+  return /* @__PURE__ */ jsx(Box, { display: "grid", gap: "md", gridTemplateColumns: "1", ref, ...props });
 });
 Grid.displayName = "@optiaxiom/react/Grid";
 

package/dist/heading/Heading.js

@@ -20,9 +20,9 @@ const mapTagToFontSize = {
   h6: "md"
 };
 const Heading = forwardRef(
-  ({ asChild, children, level = "1", variant, ...props }, ref) => {
+  ({ appearance, asChild, children, level = "1", ...props }, ref) => {
     const Comp = asChild ? Slot : mapLevelToTag[level];
-    const fontSize = mapTagToFontSize[variant ?? mapLevelToTag[level]];
+    const fontSize = mapTagToFontSize[appearance ?? mapLevelToTag[level]];
     return /* @__PURE__ */ jsx(Text, { asChild: true, fontSize, fontWeight: "700", ref, ...props, children: /* @__PURE__ */ jsx(Comp, { children }) });
   }
 );

package/dist/hover-card/HoverCard.js

@@ -3,7 +3,7 @@ import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { HoverCardContextProvider } from '../hover-card-context/HoverCardContext.js';
 
-const HoverCard = ({
+function HoverCard({
   children,
   defaultOpen,
   keepOpenOnActivation,
@@ -11,7 +11,7 @@ const HoverCard = ({
   open: openProp,
   openDelay = 500,
   ...props
-}) => {
+}) {
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
@@ -35,7 +35,7 @@ const HoverCard = ({
       )
     }
   );
-};
+}
 HoverCard.displayName = "@optiaxiom/react/HoverCard";
 
 export { HoverCard };