@optiaxiom/react 0.1.0-next.8 → 0.1.0

package/dist/src/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/src/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/src/dialog-footer/DialogFooter-css.js

@@ -0,0 +1,6 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'md',justifyContent:'end',px:'lg',py:'20'}]});
+
+export { footer };

package/dist/src/dialog-footer/DialogFooter.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { footer } from './DialogFooter-css.js';
+
+const DialogFooter = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { ref, ...footer({}, className), ...props, children });
+  }
+);
+DialogFooter.displayName = "@optiaxiom/react/DialogFooter";
+
+export { DialogFooter };

package/dist/src/dialog-title/DialogTitle.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Heading } from '../heading/Heading.js';
+
+const DialogTitle = forwardRef(
+  ({ 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";
+
+export { DialogTitle };

package/dist/src/dialog-trigger/DialogTrigger.js

@@ -0,0 +1,17 @@
+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.js';
+import '../sprinkles/sprinklesMerge.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/src/disclosure/Disclosure.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const Disclosure = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Root, { children }) });
+  }
+);
+Disclosure.displayName = "@optiaxiom/react/Disclosure";
+
+export { Disclosure };

package/dist/src/disclosure-content/DisclosureContent-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-BqeurMvw.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{overflow:'hidden'},'_1sbcqc1']});
+
+export { content };

package/dist/src/disclosure-content/DisclosureContent.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { content } from './DisclosureContent-css.js';
+
+const DisclosureContent = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "xs", pt: "0", children }) }) });
+});
+DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
+
+export { DisclosureContent };

package/dist/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-0sn-enS-.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1kaw8ei',start:'p8rn8v'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_101kb7']});
+
+export { icon, trigger };

package/dist/src/disclosure-trigger/DisclosureTrigger.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { trigger, icon } from './DisclosureTrigger-css.js';
+
+const DisclosureTrigger = forwardRef(
+  ({ addonAfter, addonBefore, chevronPosition = "start", children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const startIcon = addonBefore || chevronPosition === "start" && !addonAfter && /* @__PURE__ */ jsx(IconAngleRight, {});
+    const endIcon = addonAfter || chevronPosition === "end" && /* @__PURE__ */ jsx(IconAngleDown, {});
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger(), ...sprinkleProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
+      startIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: startIcon }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", px: "4", children }),
+      endIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: endIcon })
+    ] }) });
+  }
+);
+DisclosureTrigger.displayName = "@optiaxiom/react/DisclosureTrigger";
+
+export { DisclosureTrigger };

package/dist/src/drawer/Drawer-css.js

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/drawer/Drawer.css.ts.vanilla-DWe4kLbE.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var close = recipeRuntime({base:[{rounded:'full'},'_1yioncz']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_1bdjsab'],variants:{position:{bottom:[{borderT:'1'},'j3b4i8'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1wh6fft'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'tzviu8']}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'bhi6hh']});
+
+export { close, content, overlay };

package/dist/src/drawer/Drawer.js

@@ -0,0 +1,55 @@
+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 { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { IconX } from '../icons/IconX.js';
+import { Transition } from '../transition/Transition.js';
+import { overlay, content, close } from './Drawer-css.js';
+
+const mapPositionToTransitionSide = {
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+const Drawer = forwardRef(
+  ({
+    children,
+    modal,
+    onClose,
+    open,
+    position = "right",
+    withCloseButton = false,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(RadixDialog.Root, { modal, onOpenChange: onClose, open, children: /* @__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": mapPositionToTransitionSide[position],
+          type: "fade",
+          children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ position }), children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, ...props, children: [
+            children,
+            withCloseButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "Close",
+                asChild: true,
+                icon: /* @__PURE__ */ jsx(IconX, {}),
+                size: "sm",
+                ...close(),
+                children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
+              }
+            )
+          ] }) })
+        }
+      )
+    ] }) }) });
+  }
+);
+Drawer.displayName = "@optiaxiom/react/Drawer";
+
+export { Drawer };

package/dist/src/drawer-body/DrawerBody.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const DrawerBody = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        flex: "1",
+        fontSize: "md",
+        overflow: "auto",
+        px: "lg",
+        py: "md",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DrawerBody.displayName = "@optiaxiom/react/DrawerBody";
+
+export { DrawerBody };

package/dist/src/drawer-footer/DrawerFooter.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const DrawerFooter = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        borderT: "1",
+        flexDirection: "row",
+        gap: "md",
+        justifyContent: "end",
+        p: "md",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "@optiaxiom/react/DrawerFooter";
+
+export { DrawerFooter };

package/dist/src/drawer-title/DrawerTitle.js

@@ -0,0 +1,18 @@
+import { jsxs, 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 { Text } from '../text/Text.js';
+
+const DrawerTitle = forwardRef(
+  ({ children, description, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Flex, { gap: "xs", pb: "md", pt: "lg", px: "lg", ref, ...props, children: [
+      /* @__PURE__ */ jsx(Heading, { asChild: true, level: "4", children: /* @__PURE__ */ jsx(RadixDialog.Title, { children }) }),
+      /* @__PURE__ */ jsx(Text, { asChild: true, empty: "hidden", fontWeight: "400", children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description }) })
+    ] });
+  }
+);
+DrawerTitle.displayName = "@optiaxiom/react/DrawerTitle";
+
+export { DrawerTitle };

package/dist/src/dropdown-menu/DropdownMenu.js

@@ -0,0 +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 { DropdownMenuContextProvider } from '../dropdown-menu-context/DropdownMenuContext.js';
+
+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(DropdownMenuContextProvider, { open, children }) });
+}
+DropdownMenu.displayName = "@optiaxiom/react/DropdownMenu";
+
+export { DropdownMenu };

package/dist/src/dropdown-menu-content/DropdownMenuContent.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
+import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+
+const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 2, ...props }, ref) => {
+  const { open } = useDropdownMenuContext("DropdownMenuContent");
+  return /* @__PURE__ */ jsx(MenuContentBase, { open, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children }) });
+});
+DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
+
+export { DropdownMenuContent };

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

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

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
+
+const DropdownMenuItem = forwardRef(({ children, onSelect, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(MenuItemBase, { ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
+});
+DropdownMenuItem.displayName = "@optiaxiom/react/DropdownMenuItem";
+
+export { DropdownMenuItem };

package/dist/src/dropdown-menu-label/DropdownMenuLabel.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const DropdownMenuLabel = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        color: "fg.default",
+        fontSize: "md",
+        fontWeight: "600",
+        p: "xs",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx(RadixMenu.Label, { children })
+      }
+    );
+  }
+);
+DropdownMenuLabel.displayName = "@optiaxiom/react/DropdownMenuLabel";
+
+export { DropdownMenuLabel };

package/dist/src/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/src/dropdown-menu-sub/DropdownMenuSub.js

@@ -0,0 +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 { DropdownMenuSubContextProvider } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
+
+function DropdownMenuSub({
+  children,
+  defaultOpen,
+  onOpenChange,
+  open: openProp,
+  ...props
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(RadixMenu.Sub, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DropdownMenuSubContextProvider, { open, children }) });
+}
+DropdownMenuSub.displayName = "@optiaxiom/react/DropdownMenuSub";
+
+export { DropdownMenuSub };

package/dist/src/dropdown-menu-sub-content/DropdownMenuSubContent.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
+import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+
+const DropdownMenuSubContent = forwardRef(({ alignOffset = -4, children, sideOffset = 2, ...props }, ref) => {
+  const { open } = useDropdownMenuSubContext("DropdownMenuSubContent");
+  return /* @__PURE__ */ jsx(MenuContentBase, { open, ...props, children: /* @__PURE__ */ jsx(
+    RadixMenu.SubContent,
+    {
+      alignOffset,
+      ref,
+      sideOffset,
+      children
+    }
+  ) });
+});
+DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
+
+export { DropdownMenuSubContent };

package/dist/src/dropdown-menu-sub-context/DropdownMenuSubContext.js

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

package/dist/src/dropdown-menu-sub-trigger/DropdownMenuSubTrigger.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
+
+const DropdownMenuSubTrigger = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(MenuItemBase, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });
+});
+DropdownMenuSubTrigger.displayName = "@optiaxiom/react/DropdownMenuSubTrigger";
+
+export { DropdownMenuSubTrigger };

package/dist/src/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 { MenuButton } from '../menu-button/MenuButton.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.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(MenuButton, { ...restProps, children }) });
+});
+DropdownMenuTrigger.displayName = "@optiaxiom/react/DropdownMenuTrigger";
+
+export { DropdownMenuTrigger };

package/dist/src/field/Field.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixLabel from '@radix-ui/react-label';
+import { useId } from '@reach/auto-id';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { FieldContext } from '../field-context/FieldContext.js';
+import { Flex } from '../flex/Flex.js';
+import { HoverCard } from '../hover-card/HoverCard.js';
+import { HoverCardContent } from '../hover-card-content/HoverCardContent.js';
+import { HoverCardTrigger } from '../hover-card-trigger/HoverCardTrigger.js';
+import { IconCircleQuestion } from '../icons/IconCircleQuestion.js';
+import { Text } from '../text/Text.js';
+
+const Field = forwardRef(
+  ({
+    children,
+    description,
+    error,
+    id: idProp,
+    info,
+    label,
+    required,
+    ...props
+  }, ref) => {
+    const id = useId(idProp);
+    return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "4", ref, ...props, children: [
+      label && /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "4", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            alignItems: "center",
+            asChild: true,
+            color: "fg.secondary",
+            display: "flex",
+            fontWeight: "400",
+            gap: "2",
+            children: /* @__PURE__ */ jsxs(RadixLabel.Root, { htmlFor: id, children: [
+              label,
+              required && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  "aria-hidden": "true",
+                  asChild: true,
+                  color: "fg.error",
+                  fontWeight: "400",
+                  children: /* @__PURE__ */ jsx("span", { children: "*" })
+                }
+              )
+            ] })
+          }
+        ),
+        info && /* @__PURE__ */ jsxs(HoverCard, { keepOpenOnActivation: true, children: [
+          /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Information hover",
+              border: "0",
+              h: "12",
+              icon: /* @__PURE__ */ jsx(IconCircleQuestion, {}),
+              p: "0",
+              w: "12"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(HoverCardContent, { side: "top", sideOffset: 5, children: info })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        FieldContext.Provider,
+        {
+          value: {
+            error: !!error,
+            id,
+            required
+          },
+          children
+        }
+      ),
+      error && /* @__PURE__ */ jsx(Text, { color: "fg.error", fontSize: "sm", children: error }),
+      description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", children: description })
+    ] });
+  }
+);
+Field.displayName = "@optiaxiom/react/Field";
+
+export { Field };

package/dist/src/field-context/FieldContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const FieldContext = createContext(void 0);
+
+export { FieldContext };

package/dist/src/field-context/useFieldContext.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { FieldContext } from './FieldContext.js';
+
+const useFieldContext = (overrides = {}) => {
+  return {
+    ...useContext(FieldContext) ?? {},
+    ..."error" in overrides && typeof overrides.error !== "undefined" && { error: overrides.error }
+  };
+};
+
+export { useFieldContext };

package/dist/{flex → src/flex}/Flex.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { mapResponsiveValue } from '../sprinkles/sprinkles-css.js';
+import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const mapDirectionToAlign = {
   column: "stretch",

package/dist/{grid → src/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 → src/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 }) });
   }
 );