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

package/dist/{hover-card-content → src/hover-card-content}/HoverCardContent.js

@@ -6,8 +6,7 @@ import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import '../animate-presence/PresenceContext.js';
 import { Box } from '../box/Box.js';
 import { useHoverCardContext } from '../hover-card-context/HoverCardContext.js';
-import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import { theme } from '../styles/theme-css.js';
+import { theme } from '../theme/theme-css.js';
 import { Transition } from '../transition/Transition.js';
 import { content } from './HoverCardContent-css.js';
 

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

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/indicator/Indicator.css.ts.vanilla-CsGJ0-lJ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var badge = recipeRuntime({base:'_73l3nf',variants:{ping:{false:{},true:[{animation:'ping',color:'transparent'},'_4aunxl']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1m6zqva'],variants:{offset:{false:'_19idmw8',true:{}},position:{'bottom-right':'e6wesq','top-right':'_1n2gjw3'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_3bs4fl']});
+
+export { badge, floating, indicator };

package/dist/{input → src/input}/Input-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var decorator = 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/{input → src/input}/Input.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { InputBase } from '../input-base/InputBase.js';
@@ -9,11 +10,14 @@ import { decorator, input } from './Input-css.js';
 const Input = forwardRef(
   ({
     appearance = "default",
+    asChild,
+    children,
     endDecorator,
     size = "md",
     startDecorator,
     ...props
   }, ref) => {
+    const Comp = asChild ? Slot : "input";
     return /* @__PURE__ */ jsx(
       InputBase,
       {
@@ -21,7 +25,7 @@ const Input = forwardRef(
         size,
         startDecorator: startDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, ...decorator({ position: "start", size }), children: fallbackSpan(startDecorator) }),
         ...props,
-        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input({ appearance }), children: /* @__PURE__ */ jsx("input", { ref }) })
+        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input({ appearance }), children: /* @__PURE__ */ jsx(Comp, { ref, children }) })
       }
     );
   }

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

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/input-base/InputBase.css.ts.vanilla-BhhkBhKO.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var input = recipeRuntime({base:['hka04z',{bg:'transparent',flex:'auto',w:'full'},'_6i79h2','fj1az9'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
+var wrapper = recipeRuntime({base:[{border:'1',flexDirection:'row',gap:'0',rounded:'md'},'_1jxrj6q']});
+
+export { input, wrapper };

package/dist/{input-base → 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 { forwardRef, useRef, cloneElement } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
@@ -17,14 +18,14 @@ const InputBase = forwardRef(
     children,
     className,
     decoratorPointerEvents = "auto",
-    disabled,
     endDecorator,
     error: errorProp,
-    readOnly,
     size = "md",
     startDecorator,
     ...props
   }, outerRef) => {
+    const disabled = props.disabled;
+    const readOnly = props.readOnly;
     const { error, id, required } = useFieldContext({ error: errorProp });
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const innerRef = useRef(null);
@@ -60,14 +61,7 @@ const InputBase = forwardRef(
               "data-invalid": error ? "" : void 0,
               "data-readonly": readOnly ? "" : void 0,
               ...input({ size }),
-              children: cloneElement(children, {
-                disabled,
-                id,
-                readOnly,
-                ref,
-                required,
-                ...restProps
-              })
+              children: /* @__PURE__ */ jsx(Slot, { id, ref, required, ...restProps, children })
             }
           ),
           endDecorator && /* @__PURE__ */ jsx(Text, { asChild: true, ...decoratorProps, children: fallbackSpan(endDecorator) })

package/dist/{kbd → src/kbd}/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/kbd/Kbd.css.ts.vanilla-CBcapUTx.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/kbd/Kbd.css.ts.vanilla-BNbTnAS8.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:'q5e32p0',variants:{variant:{outline:'q5e32p1',subtle:{}}}});
+var keys = recipeRuntime({base:'o1n20w',variants:{variant:{outline:'_6tbfi1',subtle:{}}}});
 
 export { kbd, keys };

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

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+
+var axiom = 'optiaxiom';
+var base = 'optiaxiom.base';
+var components = 'optiaxiom._1srm0cz';
+var reset = 'optiaxiom.f4g07h';
+
+export { axiom, base, components, reset };

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

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/link/Link.css.ts.vanilla-B50afo8G.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1dq28v9']});
+var link = recipeRuntime({base:['_14nwixl'],variants:{colorScheme:{neutral:'_68ai34',primary:'_106gr8h',secondary:'_124082'}}});
+
+export { icon, link };

package/dist/{dropdown-menu-content/DropdownMenuContent-css.js → src/menu-content-base/MenuContentBase-css.js}

@@ -1,7 +1,7 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/dropdown-menu-content/DropdownMenuContent.css.ts.vanilla-EXOZ-w-n.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/menu-content-base/MenuContentBase.css.ts.vanilla-DVkYjEHI.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'},'yxbc160']});
+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'},'jfq1be']});
 
 export { content };

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

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import '../animate-presence/PresenceContext.js';
+import { Box } from '../box/Box.js';
+import { Transition } from '../transition/Transition.js';
+import { content } from './MenuContentBase-css.js';
+
+const MenuContentBase = forwardRef(
+  ({ children, className, 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(
+      Box,
+      {
+        asChild: true,
+        ref,
+        ...content({}, className),
+        ...props,
+        children
+      }
+    ) }) }) });
+  }
+);
+MenuContentBase.displayName = "@optiaxiom/react/MenuContentBase";
+
+export { MenuContentBase };

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

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/menu-item-base/MenuItemBase.css.ts.vanilla-BofvfwxR.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'gn5125'],variants:{colorScheme:{danger:'_11mn4g9',neutral:'_1qc1c87'}}});
+
+export { item };

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

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { useId } from '@reach/auto-id';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { Text } from '../text/Text.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { item } from './MenuItemBase-css.js';
+
+const MenuItemBase = forwardRef(
+  ({
+    children,
+    className,
+    colorScheme = "neutral",
+    description,
+    endDecorator,
+    startDecorator,
+    ...props
+  }, ref) => {
+    const labelId = useId();
+    const descriptionId = useId();
+    const newElement = isValidElement(children) ? children : null;
+    children = newElement ? cloneElement(
+      newElement,
+      void 0,
+      /* @__PURE__ */ jsxs(Box, { flex: "1", children: [
+        /* @__PURE__ */ jsx(Box, { asChild: true, id: labelId, children: fallbackSpan(newElement.props.children) }),
+        description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: description })
+      ] })
+    ) : children;
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        "aria-describedby": description ? descriptionId : void 0,
+        "aria-labelledby": labelId,
+        asChild: true,
+        ref,
+        ...item({ colorScheme }, className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(Slot, { children: [
+          startDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, h: "16", w: "auto", children: fallbackSpan(startDecorator) }),
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          endDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "xs", children: fallbackSpan(endDecorator) })
+        ] })
+      }
+    );
+  }
+);
+MenuItemBase.displayName = "@optiaxiom/react/MenuItemBase";
+
+export { MenuItemBase };

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

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/pagination/Pagination.css.ts.vanilla-CZDsjjh5.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'_185l5xz'});
+
+export { button };

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

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

package/dist/src/popover-anchor/PopoverAnchor.js

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

package/dist/{hover-card-content/HoverCardContent-css.js → src/popover-content/PopoverContent-css.js}

@@ -1,7 +1,7 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-C10dKVXP.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/popover-content/PopoverContent.css.ts.vanilla-B1oQBmKn.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',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'iub1v90']});
+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'},'_4v2e8o']});
 
 export { content };

package/dist/{popover-content → src/popover-content}/PopoverContent.js

@@ -5,8 +5,7 @@ import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import '../animate-presence/PresenceContext.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 { theme } from '../theme/theme-css.js';
 import { Transition } from '../transition/Transition.js';
 import { content } from './PopoverContent-css.js';
 

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

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/control-base/ControlBase.css.ts.vanilla-C8TB4dNA.css';
+import './../../assets/src/radio-group-item/RadioGroupItem.css.ts.vanilla-B7bA3BdJ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var indicator = recipeRuntime({base:[{display:'block',rounded:'inherit',size:'full'},'_1ep9afu']});
+var item = recipeRuntime({base:[{border:'1',mt:'2',p:'2',rounded:'full',size:'16'},'lzcrb4']});
+
+export { indicator, item };

package/dist/{radio-group-item → src/radio-group-item}/RadioGroupItem.js

@@ -6,12 +6,12 @@ import { ControlBase } from '../control-base/ControlBase.js';
 import { item, indicator } from './RadioGroupItem-css.js';
 
 const RadioGroupItem = forwardRef(
-  ({ children, endDecorator, id, value, ...props }, ref) => {
+  ({ children, description, id, value, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       ControlBase,
       {
         control: /* @__PURE__ */ jsx(Box, { asChild: true, ...item(), children: /* @__PURE__ */ jsx(RadixRadio.Item, { value, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: /* @__PURE__ */ jsx(RadixRadio.Indicator, {}) }) }) }),
-        endDecorator,
+        description,
         id,
         ref,
         ...props,

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

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/search-input/SearchInput.css.ts.vanilla-C9G4HY4I.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var clear = recipeRuntime({base:[{rounded:'full',size:'sm'},'x0dq4o']});
+var search = recipeRuntime({base:'q906vn'});
+
+export { clear, search };

package/dist/{separator → src/separator}/Separator-css.js

@@ -1,9 +1,9 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/separator/Separator.css.ts.vanilla-CnlaHICJ.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/separator/Separator.css.ts.vanilla-BNAE0XuM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';
 
 var base = recipeRuntime({base:{bg:'border.default'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'tlk8150',md:'tlk8151',lg:'tlk8152',base:'tlk8153'},defaultClass:'tlk8153'},vertical:{conditions:{sm:'tlk8154',md:'tlk8155',lg:'tlk8156',base:'tlk8157'},defaultClass:'tlk8157'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1eyk44i',md:'_16xttsu',lg:'_10pb1u3',base:'me58gw'},defaultClass:'me58gw'},vertical:{conditions:{sm:'n2llr6',md:'_1nrp5ys',lg:'_155sf3m',base:'xt3zmu'},defaultClass:'xt3zmu'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/src/skeleton/Skeleton-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
+import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-alpjtld8.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.neutral',color:'surface',display:'block'},'_1lvma38']});
+
+export { skeleton };