@optiaxiom/react 0.1.0 → 0.2.1

package/dist/src/icons/IconUpRightFromSquare.js

@@ -1,17 +1,40 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { withIcon } from './withIcon.js';
 
 const IconUpRightFromSquare = withIcon(
   {
+    fill: "none",
     name: "IconUpRightFromSquare"
   },
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M14.4907 9C14.2095 9 13.9907 9.25 13.9907 9.5V14C13.9907 14.5625 13.522 15 12.9907 15H3.99072C3.42822 15 2.99072 14.5625 2.99072 14V5C2.99072 4.46875 3.42822 4 3.99072 4H7.49072C7.74072 4 7.99072 3.78125 7.99072 3.5C7.99072 3.25 7.74072 3 7.49072 3H3.99072C2.86572 3 1.99072 3.90625 1.99072 5V14C1.99072 15.125 2.86572 16 3.99072 16H12.9907C14.0845 16 14.9907 15.125 14.9907 14V9.5C14.9907 9.25 14.7407 9 14.4907 9ZM17.4907 0H12.4907C12.2095 0 11.9907 0.25 11.9907 0.5C11.9907 0.78125 12.2095 1 12.4907 1H16.272L7.61572 9.65625C7.42822 9.84375 7.42822 10.1875 7.61572 10.375C7.70947 10.4688 7.83447 10.5 7.99072 10.5C8.11572 10.5 8.24072 10.4688 8.33447 10.375L16.9907 1.71875V5.5C16.9907 5.78125 17.2095 6 17.4907 6C17.7407 6 17.9907 5.78125 17.9907 5.5V0.5C17.9907 0.25 17.7407 0 17.4907 0Z",
-      fill: "currentColor"
-    }
-  )
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M15 8.83333V13.8333C15 14.2754 14.8244 14.6993 14.5118 15.0118C14.1993 15.3244 13.7754 15.5 13.3333 15.5H4.16667C3.72464 15.5 3.30072 15.3244 2.98816 15.0118C2.67559 14.6993 2.5 14.2754 2.5 13.8333V4.66667C2.5 4.22464 2.67559 3.80072 2.98816 3.48816C3.30072 3.17559 3.72464 3 4.16667 3H9.16667",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12.5 0.5H17.5V5.5",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8.33333 9.66667L17.5 0.5",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] })
 );
 
 export { IconUpRightFromSquare };

package/dist/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/indicator/Indicator.css.ts.vanilla-VGeZf61K.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/indicator/Indicator.css.ts.vanilla-BGp9E6-V.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_1xcndhx',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_86ljul']},ping:{false:{},true:[{animation:'ping',color:'transparent'},'_1vn6xqj']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_13weodm'],variants:{offset:{false:'tei1o6',true:{}},position:{'bottom-right':'_16o1jsz','top-right':'nyd93t'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1ddzktk']});
+var badge = recipeRuntime({base:'_1qf0tld',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_1vg9mbg']},ping:{false:{},true:[{animation:'ping',color:'transparent'},'zn00s6']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_12jl85'],variants:{offset:{false:'_1jkrmpr',true:{}},position:{'bottom-right':'y3l42c','top-right':'_580m5u'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'nbfto7']});
 
 export { badge, floating, indicator };

package/dist/src/input/Input-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{flex:'none'},variants:{position:{end:{mr:'8'},start:{ml:'8'}},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:{mr:'4'},variants:{position:'end',size:'sm'}},{style:{ml:'4'},variants:{position:'start',size:'sm'}}]});

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

@@ -1,8 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/input-base/InputBase.css.ts.vanilla-BWyzXodK.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-ApP8nAcG.css';
+import './../../assets/src/input-base/InputBase.css.ts.vanilla-xClOcyVV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:['_1ocifj9',{bg:'transparent',flex:'auto',w:'full'},'do1dv4','_1guywm1'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
-var wrapper = recipeRuntime({base:[{border:'1',flexDirection:'row',gap:'0',rounded:'md'},'lnh6mx']});
+var input = recipeRuntime({base:['_1u5qc6m',{bg:'transparent',flex:'auto',w:'full'},'_1juyslt','ks87y2'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
+var wrapper = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'flkn02']});
 
 export { input, wrapper };

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../field-context/FieldContext.js';
@@ -27,7 +28,9 @@ const InputBase = forwardRef(
   }, outerRef) => {
     const disabled = props.disabled;
     const readOnly = props.readOnly;
-    const { error, id, required } = useFieldContext({ error: errorProp });
+    const { descriptionId, error, errorId, inputId } = useFieldContext({
+      error: errorProp
+    });
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
@@ -55,14 +58,15 @@ const InputBase = forwardRef(
           /* @__PURE__ */ jsx(
             Box,
             {
+              "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
               "aria-disabled": disabled,
-              "aria-invalid": error,
+              "aria-invalid": error ? true : void 0,
               asChild: true,
               "data-disabled": disabled ? "" : void 0,
               "data-invalid": error ? "" : void 0,
               "data-readonly": readOnly ? "" : void 0,
               ...input({ size }),
-              children: /* @__PURE__ */ jsx(Slot, { id, ref, required, ...restProps, children })
+              children: /* @__PURE__ */ jsx(Slot, { id: inputId, ref, ...restProps, children })
             }
           ),
           addonAfter && /* @__PURE__ */ jsx(Text, { asChild: true, ...addonProps, children: fallbackSpan(addonAfter) })

package/dist/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/kbd/Kbd.css.ts.vanilla-bKFa-HZJ.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/kbd/Kbd.css.ts.vanilla-BgKxZdBA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 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:'rfpb89',variants:{variant:{outline:'u0z2da',subtle:{}}}});
+var keys = recipeRuntime({base:'_1hsj3bj',variants:{variant:{outline:'anw9n1',subtle:{}}}});
 
 export { kbd, keys };

package/dist/src/layers/layers-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._4awegg';
-var reset = 'optiaxiom._1v6qbuj';
+var components = 'optiaxiom._1jg1fzn';
+var reset = 'optiaxiom._1dpkrs0';
 
 export { axiom, base, components, reset };

package/dist/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/link/Link.css.ts.vanilla-CpjSWnSg.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/link/Link.css.ts.vanilla-BwsjRbT8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'y6is2e']});
-var link = recipeRuntime({base:['_1hh765b'],variants:{colorScheme:{neutral:'_13ko111',primary:'sjl5jg',secondary:'_1tinx4z'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1ikbekv']});
+var link = recipeRuntime({base:['_14pqu3n'],variants:{appearance:{'default':'_1ixcrzf',inverse:'_1r7e5j',subtle:'_1u8si0g'}}});
 
 export { icon, link };

package/dist/src/link/Link.js

@@ -9,9 +9,9 @@ import { link, icon } from './Link-css.js';
 
 const Link = forwardRef(
   ({
+    appearance = "default",
     children,
     className,
-    colorScheme = "primary",
     disabled,
     external,
     href,
@@ -22,7 +22,7 @@ const Link = forwardRef(
       Box,
       {
         asChild: true,
-        ...link({ colorScheme }, className),
+        ...link({ appearance }, className),
         ...sprinkleProps,
         children: /* @__PURE__ */ jsxs(
           "a",

package/dist/src/menu-button/MenuButton.js

@@ -5,7 +5,17 @@ import { IconAngleDown } from '../icons/IconAngleDown.js';
 
 const MenuButton = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", ref, ...props, children });
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(IconAngleDown, {}),
+        iconPosition: "end",
+        justifyContent: "space-between",
+        ref,
+        ...props,
+        children
+      }
+    );
   }
 );
 MenuButton.displayName = "@optiaxiom/react/MenuButton";

package/dist/src/menu-content-base/MenuContentBase-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/menu-content-base/MenuContentBase.css.ts.vanilla-CBmc2U7h.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/menu-content-base/MenuContentBase.css.ts.vanilla-ZuE5SZF1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',maxW:'xs',overflow:'auto',p:'4',rounded:'lg',shadow:'md',z:'popover'},'n8qy2k'],variants:{minW:{'0':{},trigger:'dsq765'}}});
+var content = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',maxW:'xs',overflow:'auto',p:'4',rounded:'lg',shadow:'md',z:'popover'},'_1uz2ces'],variants:{minW:{'0':{},trigger:'_1xirjv0'},provider:{'dropdown-menu':'_1i978zx',popover:'_7sagwa',popper:'t4wd6q'}}});
 
 export { content };

package/dist/src/menu-content-base/MenuContentBase.js

@@ -1,23 +1,40 @@
 import { jsx } from 'react/jsx-runtime';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { DropdownMenuPortal } from '@radix-ui/react-dropdown-menu';
+import { PopoverPortal } from '@radix-ui/react-popover';
+import { Portal } from '@radix-ui/react-portal';
 import { forwardRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Box } from '../box/Box.js';
 import { Transition } from '../transition/Transition.js';
 import { content } from './MenuContentBase-css.js';
 
+const mapProviderToPortal = {
+  "dropdown-menu": DropdownMenuPortal,
+  popover: PopoverPortal,
+  popper: Portal
+};
 const MenuContentBase = forwardRef(
-  ({ children, className, minW, open, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(
+  ({
+    children,
+    className,
+    enableExitAnimation,
+    minW,
+    open,
+    provider = "popover",
+    ...props
+  }, ref) => {
+    const Portal2 = mapProviderToPortal[provider];
+    const element = /* @__PURE__ */ jsx(Portal2, { ...provider !== "popper" && { forceMount: true }, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
         ref,
-        ...content({ minW }, className),
+        ...content({ minW, provider }, className),
         ...props,
         children
       }
-    ) }) }) });
+    ) }) });
+    return enableExitAnimation ? /* @__PURE__ */ jsx(AnimatePresence, { children: open && element }) : open && element;
   }
 );
 MenuContentBase.displayName = "@optiaxiom/react/MenuContentBase";

package/dist/src/menu-item-base/MenuItemBase-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/menu-item-base/MenuItemBase.css.ts.vanilla-DrCV8udS.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/menu-item-base/MenuItemBase.css.ts.vanilla-qvZSWu96.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_1us0ec5'],variants:{colorScheme:{danger:'_43zp6h',neutral:'_19v5aym'}}});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_107sy75'],variants:{colorScheme:{danger:'_8hje6k',neutral:'_4sdyzc'}}});
 
 export { item };

package/dist/src/pagination/Pagination-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/pagination/Pagination.css.ts.vanilla-BzTZvoeC.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/pagination/Pagination.css.ts.vanilla-BeD33iJx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_1y8kzcv'});
+var button = recipeRuntime({base:'_1hdjjgv'});
 
 export { button };

package/dist/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/pill/Pill.css.ts.vanilla-0ZyLCs4p.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/pill/Pill.css.ts.vanilla-Cr5zCRpC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{bg:'neutral.100',border:'0',fontSize:'sm',rounded:'md'},'_1oift6a'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'tmvppy'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
 
 export { pill };

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

@@ -1,57 +1,39 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { theme } from '@optiaxiom/globals';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
-import { Box } from '../box/Box.js';
+import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
 import { usePopoverContext } from '../popover-context/PopoverContext.js';
-import { theme } from '@optiaxiom/globals';
-import { Transition } from '../transition/Transition.js';
-import { content } from './PopoverContent-css.js';
 
 const PopoverContent = forwardRef(
-  ({
-    align = "start",
-    children,
-    className,
-    sideOffset = 2,
-    withArrow,
-    ...props
-  }, ref) => {
+  ({ align = "start", children, sideOffset = 2, withArrow, ...props }, ref) => {
     const { open } = usePopoverContext("PopoverContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
-      RadixPopover.Content,
-      {
-        align,
-        ref,
-        sideOffset,
-        children: [
-          children,
-          withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              fill: theme.colors["bg.default"],
-              height: 4,
-              preserveAspectRatio: "none",
-              stroke: theme.colors["border.secondary"],
-              viewBox: "0 0 30 10",
-              width: 8,
-              children: [
-                /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
-                /* @__PURE__ */ jsx(
-                  "polyline",
-                  {
-                    points: "0,0 15,10 30,0",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "2.5"
-                  }
-                )
-              ]
-            }
-          ) })
-        ]
-      }
-    ) }) }) }) });
+    return /* @__PURE__ */ jsx(MenuContentBase, { open, p: "sm", provider: "popover", ...props, children: /* @__PURE__ */ jsxs(RadixPopover.Content, { align, ref, sideOffset, children: [
+      children,
+      withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          fill: theme.colors["bg.default"],
+          height: 4,
+          preserveAspectRatio: "none",
+          stroke: theme.colors["border.secondary"],
+          viewBox: "0 0 30 10",
+          width: 8,
+          children: [
+            /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
+            /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                points: "0,0 15,10 30,0",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5"
+              }
+            )
+          ]
+        }
+      ) })
+    ] }) });
   }
 );
 PopoverContent.displayName = "@optiaxiom/react/PopoverContent";

package/dist/src/radio/Radio-css.js

@@ -0,0 +1,12 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-ApP8nAcG.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-D_YmZiLz.css';
+import './../../assets/src/radio/Radio.css.ts.vanilla-ss7fiJd-.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',mt:'2',p:'2',rounded:'full',size:'16'},'_1wrfjkf']});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_1s1maef']});
+var input = recipeRuntime({base:'xcl4sb'});
+var radio = recipeRuntime({base:'_18j6oig'});
+
+export { control, indicator, input, radio };

package/dist/src/radio/Radio.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useRadioGroupContext } from '../radio-group-context/RadioGroupContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { ToggleInput } from '../toggle-input/ToggleInput.js';
+import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
+import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
+import { ToggleInputDescription } from '../toggle-input-description/ToggleInputDescription.js';
+import { ToggleInputHiddenInput } from '../toggle-input-hidden-input/ToggleInputHiddenInput.js';
+import { ToggleInputLabel } from '../toggle-input-label/ToggleInputLabel.js';
+import { radio, input, control, indicator } from './Radio-css.js';
+
+const Radio = forwardRef(
+  ({
+    children,
+    className,
+    description,
+    disabled,
+    name,
+    onBlur,
+    onChange,
+    ...props
+  }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const groupContext = useRadioGroupContext("Radio");
+    if (groupContext) {
+      if ("checked" in props) {
+        throw new Error(
+          `Cannot use \`checked\` prop when \`Radio\` is used within \`RadioGroup\``
+        );
+      }
+      if (props.value === void 0) {
+        throw new Error(
+          `Must use \`value\` prop when \`Radio\` is used within \`RadioGroup\``
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      ToggleInput,
+      {
+        description: !!description,
+        ...radio({}, className),
+        ...sprinkleProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleInputHiddenInput,
+            {
+              checked: groupContext?.value !== void 0 ? groupContext.value === props.value : void 0,
+              defaultChecked: groupContext?.defaultValue !== void 0 ? groupContext.defaultValue === props.value : void 0,
+              disabled: groupContext?.disabled ?? disabled,
+              name: groupContext?.name ?? name,
+              onBlur: groupContext?.onBlur ?? onBlur,
+              onChange: groupContext?.onChange ?? onChange,
+              ref,
+              type: "radio",
+              ...input(),
+              ...restProps
+            }
+          ),
+          /* @__PURE__ */ jsx(ToggleInputControl, { ...control(), children: /* @__PURE__ */ jsx(Box, { ...indicator() }) }),
+          /* @__PURE__ */ jsxs(ToggleInputContent, { children: [
+            /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
+            description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "@optiaxiom/react/Radio";
+
+export { Radio };

package/dist/src/radio-group/RadioGroup.js

@@ -1,15 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import * as RadixRadio from '@radix-ui/react-radio-group';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import { RadioGroupContextProvider } from '../radio-group-context/RadioGroupContext.js';
 import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const mapDirectionToOrientation = {
-  column: "vertical",
-  row: "horizontal"
-};
 const mapGapToOrientation = {
   column: "sm",
   "column-reverse": "sm",
@@ -17,24 +12,40 @@ const mapGapToOrientation = {
   "row-reverse": "md"
 };
 const RadioGroup = forwardRef(
-  ({ children, flexDirection = "column", ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({
+    children,
+    defaultValue,
+    disabled,
+    flexDirection = "column",
+    name,
+    onBlur,
+    onChange,
+    onValueChange,
+    value,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ jsx(
-      Flex,
+      RadioGroupContextProvider,
       {
-        asChild: true,
-        flexDirection,
-        gap: mapResponsiveValue(
-          flexDirection,
-          (value) => mapGapToOrientation[value]
-        ),
-        ...sprinkleProps,
+        defaultValue,
+        disabled,
+        name,
+        onBlur,
+        onChange: (event) => {
+          onChange?.(event);
+          onValueChange?.(event.target.value);
+        },
+        value,
         children: /* @__PURE__ */ jsx(
-          RadixRadio.RadioGroup,
+          Flex,
           {
-            orientation: flexDirection === "row" || flexDirection === "column" ? mapDirectionToOrientation[flexDirection] : void 0,
+            flexDirection,
+            gap: mapResponsiveValue(
+              flexDirection,
+              (value2) => mapGapToOrientation[value2]
+            ),
             ref,
-            ...restProps,
+            ...props,
             children
           }
         )

package/dist/src/radio-group-context/RadioGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [RadioGroupContextProvider, useRadioGroupContext] = createContext("RadioGroup", null);
+
+export { RadioGroupContextProvider, useRadioGroupContext };

package/dist/src/search-input/SearchInput-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/search-input/SearchInput.css.ts.vanilla-2JAkiMlw.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/search-input/SearchInput.css.ts.vanilla-sXrssmhH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{rounded:'full',size:'sm'},'tyrea0']});
-var search = recipeRuntime({base:'_8bzigm'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1gb3u5u']});
+var search = recipeRuntime({base:'_1euv7kk'});
 
 export { clear, search };

package/dist/src/select/Select.js

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import { Popper } from '@radix-ui/react-popper';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import 'downshift';
+import 'react';
+import { useSelect } from '../downshift/useSelect.js';
+import { SelectContextProvider } from '../select-context/SelectContext.js';
+
+function Select({
+  children,
+  defaultOpen = false,
+  defaultValue,
+  disabled,
+  items,
+  itemToKey = (value2) => value2,
+  itemToString = (value2) => value2 ? String(value2) : "",
+  onOpenChange,
+  onValueChange,
+  open,
+  value,
+  ...props
+}) {
+  const [selectedItem, setSelectedItem] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: value
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: open
+  });
+  const downshift = useSelect({
+    ...props,
+    isOpen,
+    items,
+    itemToKey,
+    itemToString,
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      setIsOpen(isOpen2);
+    },
+    onSelectedItemChange({ selectedItem: selectedItem2 }) {
+      setSelectedItem(selectedItem2);
+    },
+    selectedItem: selectedItem ?? null
+  });
+  return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
+    SelectContextProvider,
+    {
+      disabled,
+      downshift,
+      highlightedItem: items[downshift.highlightedIndex],
+      isOpen: downshift.isOpen,
+      items,
+      itemToKey,
+      itemToString,
+      selectedItem,
+      children
+    }
+  ) });
+}
+Select.displayName = "@optiaxiom/react/Select";
+
+export { Select };