@optiaxiom/react 0.12.0 → 0.12.2

package/dist/packages/react/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-Bza2cQ35.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-CZLwSFqq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_11i0ktz'});
+var box = recipeRuntime({base:'yhoqvm'});
 
 export { box };

package/dist/packages/react/src/box/extractBoxProps.js

@@ -5,7 +5,7 @@ function extractBoxProps(props) {
   const boxProps = {};
   const restProps = {};
   for (const [name, value] of Object.entries(props)) {
-    if (sprinkles.properties.has(name)) {
+    if (name === "className" || sprinkles.properties.has(name)) {
       if (value !== null && value !== undefined) {
         boxProps[name] = value;
       }

package/dist/packages/react/src/breadcrumb-item/BreadcrumbItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-BerEUeXB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-E9ccI8zG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1s04riu']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1ots4nd']});
 
 export { item };

package/dist/packages/react/src/breadcrumb-link/BreadcrumbLink-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-U8K4USWH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-BE6m28tB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1ki8f66']});
+var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'fpc0n0']});
 
 export { link };

package/dist/packages/react/src/breadcrumb-link/BreadcrumbLink.js

@@ -1,13 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Link } from '../link/Link.js';
 import { link } from './BreadcrumbLink-css.js';
 
-const BreadcrumbLink = forwardRef(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : Link;
-  return /* @__PURE__ */ jsx(Comp, { ...link({}, className), ref, ...props });
+const BreadcrumbLink = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Link, { ...link({}, className), ref, ...props });
 });
 BreadcrumbLink.displayName = "@optiaxiom/react/BreadcrumbLink";
 

package/dist/packages/react/src/button/Button.js

@@ -18,8 +18,8 @@ const Button = forwardRef(
     asChild,
     children,
     icon,
-    iconOnly,
     iconPosition = "start",
+    square,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
@@ -27,7 +27,7 @@ const Button = forwardRef(
     children = decorateChildren({ asChild, children }, (children2) => {
       isIconOnly = Boolean(!children2 && icon);
       if (isIconOnly) {
-        iconOnly = true;
+        square = true;
       }
       if (icon && !isIconOnly) {
         if (iconPosition === "start") {
@@ -38,7 +38,7 @@ const Button = forwardRef(
       }
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         addonBefore && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonBefore) }),
-        iconOnly ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon ?? children2 }) }) : /* @__PURE__ */ jsx(ButtonLabel, { children: children2 }),
+        square ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: children2 ? fallbackSpan(children2) : /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }) : /* @__PURE__ */ jsx(ButtonLabel, { children: children2 }),
         addonAfter && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonAfter) })
       ] });
     });
@@ -54,10 +54,10 @@ const Button = forwardRef(
       ButtonBase,
       {
         asChild: true,
-        iconOnly,
         ref,
+        square,
         ...props,
-        ...iconOnly && {
+        ...square && {
           justifyContent: "center"
         },
         children: /* @__PURE__ */ jsx(Comp, { children })

package/dist/packages/react/src/button-base/ButtonBase-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DasptH10.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Df83DDkl.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-RaqyOKA9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_1hiarqc',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'start',transition:'colors'},'_18h1an1'],variants:{iconOnly:{false:'xkgj4h',true:{}},intent:{danger:'_1770xs7',neutral:'loao0b',primary:'l3fnc1'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'lonjyh',solid:'jtcokr',subtle:'_18p5twm'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_1vgkvpq',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'ffdbh1',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1qdgoas',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'_4h9j5o']});
+var buttonBase = recipeRuntime({base:['mkgcyk',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'start',transition:'colors'},'wttpnt'],variants:{intent:{danger:'c0d3ar',neutral:'_1tb55ko',primary:'po27o5'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:'_86p608',true:{}},variant:{outline:'_146n8kk',solid:'aifdwc',subtle:'_15nh2rs'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_1cstbex',variants:{size:'sm',square:false}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1pouqry',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_128pyl8',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'u56ymw']});
 
 export { buttonBase, spinner };

package/dist/packages/react/src/button-base/ButtonBase.js

@@ -26,9 +26,9 @@ const ButtonBase = forwardRef(
     children,
     className,
     disabled,
-    iconOnly,
     loading,
     size = "md",
+    square,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
@@ -43,9 +43,9 @@ const ButtonBase = forwardRef(
         "data-loading": loading ? "" : undefined,
         ...buttonBase(
           {
-            iconOnly: Boolean(iconOnly),
             intent,
             size,
+            square: Boolean(square),
             variant
           },
           className

package/dist/packages/react/src/button-group/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Df83DDkl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'lofb6q'});
+var buttonGroup = recipeRuntime({base:'_1xofa2s'});
 
 export { buttonGroup };

package/dist/packages/react/src/button-loadable/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DasptH10.css';
-import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-CrkKtOoA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Df83DDkl.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-RaqyOKA9.css';
+import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-r-ENpsYC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1dzsvcg']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'mg4wxv']});
 
 export { loadable };

package/dist/packages/react/src/calendar/Calendar.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef } from 'react';
+import { DayPicker } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { CalendarChevron } from './CalendarChevron.js';
+import { CalendarDay } from './CalendarDay.js';
+import { CalendarDayButton } from './CalendarDayButton.js';
+import { CalendarMonthCaption } from './CalendarMonthCaption.js';
+import { CalendarMonthGrid } from './CalendarMonthGrid.js';
+import { CalendarMonths } from './CalendarMonths.js';
+import { CalendarNextMonthButton } from './CalendarNextMonthButton.js';
+import { CalendarPreviousMonthButton } from './CalendarPreviousMonthButton.js';
+import { CalendarWeekday } from './CalendarWeekday.js';
+
+const components = {
+  Chevron: CalendarChevron,
+  Day: CalendarDay,
+  DayButton: CalendarDayButton,
+  MonthCaption: CalendarMonthCaption,
+  MonthGrid: CalendarMonthGrid,
+  Months: CalendarMonths,
+  NextMonthButton: CalendarNextMonthButton,
+  PreviousMonthButton: CalendarPreviousMonthButton,
+  Weekday: CalendarWeekday
+};
+const Calendar = forwardRef(
+  ({
+    defaultValue,
+    max,
+    min,
+    onValueChange,
+    today,
+    value: valueProp,
+    ...props
+  }, ref) => {
+    const [value, setValue] = useControllableState({
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+      prop: valueProp
+    });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        bg: "bg.default",
+        color: "fg.default",
+        fontSize: "md",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          DayPicker,
+          {
+            autoFocus: true,
+            components,
+            defaultMonth: value,
+            endMonth: max,
+            fixedWeeks: true,
+            mode: "single",
+            onSelect: setValue,
+            required: true,
+            selected: value,
+            showOutsideDays: true,
+            startMonth: min,
+            today
+          }
+        )
+      }
+    );
+  }
+);
+Calendar.displayName = "@optiaxiom/react/Calendar";
+
+export { Calendar };

package/dist/packages/react/src/calendar/CalendarChevron.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IconAngleLeft } from '../icons/IconAngleLeft.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+
+function CalendarChevron({
+  orientation,
+  ...props
+}) {
+  return orientation === "left" ? /* @__PURE__ */ jsx(IconAngleLeft, { ...props }) : /* @__PURE__ */ jsx(IconAngleRight, { ...props });
+}
+CalendarChevron.displayName = "@optiaxiom/react/CalendarChevron";
+
+export { CalendarChevron };

package/dist/packages/react/src/calendar/CalendarDay.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Day } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function CalendarDay({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(Day, { ...props, children }) });
+}
+CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
+
+export { CalendarDay };

package/dist/packages/react/src/calendar/CalendarDayButton-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-BfMNvLQ9.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:{mt:'8'},variants:{outside:{false:{},true:'da2avp'}}});
+
+export { button };

package/dist/packages/react/src/calendar/CalendarDayButton.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Button } from '../button/Button.js';
+import { button } from './CalendarDayButton-css.js';
+
+function CalendarDayButton({
+  children,
+  className,
+  color: _color,
+  day: _day,
+  modifiers,
+  ...props
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus();
+    }
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: modifiers.selected ? "primary" : "subtle",
+      "data-state": modifiers.today ? "active" : undefined,
+      ref,
+      square: true,
+      ...button({ outside: modifiers.outside }, className),
+      ...props,
+      children
+    }
+  );
+}
+CalendarDayButton.displayName = "@optiaxiom/react/CalendarDayButton";
+
+export { CalendarDayButton };

package/dist/packages/react/src/calendar/CalendarMonthCaption.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { MonthCaption } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function CalendarMonthCaption({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      alignItems: "center",
+      asChild: true,
+      display: "flex",
+      fontSize: "lg",
+      fontWeight: "500",
+      h: "md",
+      justifyContent: "center",
+      mb: "16",
+      children: /* @__PURE__ */ jsx(MonthCaption, { ...props, children })
+    }
+  );
+}
+CalendarMonthCaption.displayName = "@optiaxiom/react/CalendarMonthCaption";
+
+export { CalendarMonthCaption };

package/dist/packages/react/src/calendar/CalendarMonthGrid.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { MonthGrid } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function CalendarMonthGrid({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(MonthGrid, { ...props, children }) });
+}
+CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
+
+export { CalendarMonthGrid };

package/dist/packages/react/src/calendar/CalendarMonths-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-BlFi_u93.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var months = recipeRuntime({base:'qry5qm'});
+
+export { months };

package/dist/packages/react/src/calendar/CalendarMonths.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Months } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { months } from './CalendarMonths-css.js';
+
+function CalendarMonths({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...months(), children: /* @__PURE__ */ jsx(Months, { ...props, children }) });
+}
+CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
+
+export { CalendarMonths };

package/dist/packages/react/src/calendar/CalendarNextMonthButton-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-BelBX_RG.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'j7it5m'});
+
+export { button };

package/dist/packages/react/src/calendar/CalendarNextMonthButton.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { NextMonthButton } from 'react-day-picker';
+import { Button } from '../button/Button.js';
+import { button } from './CalendarNextMonthButton-css.js';
+
+function CalendarNextMonthButton({
+  children,
+  className,
+  color: _color,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "subtle",
+      asChild: true,
+      icon: children,
+      ...button({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(NextMonthButton, {})
+    }
+  );
+}
+CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
+
+export { CalendarNextMonthButton };

package/dist/packages/react/src/calendar/CalendarPreviousMonthButton-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-Be8w8l08.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'_1sc16bd'});
+
+export { button };

package/dist/packages/react/src/calendar/CalendarPreviousMonthButton.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { PreviousMonthButton } from 'react-day-picker';
+import { Button } from '../button/Button.js';
+import { button } from './CalendarPreviousMonthButton-css.js';
+
+function CalendarPreviousMonthButton({
+  children,
+  className,
+  color: _color,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "subtle",
+      asChild: true,
+      icon: children,
+      ...button({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(PreviousMonthButton, {})
+    }
+  );
+}
+CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
+
+export { CalendarPreviousMonthButton };

package/dist/packages/react/src/calendar/CalendarWeekday.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Weekday } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function CalendarWeekday({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", fontWeight: "400", children: /* @__PURE__ */ jsx(Weekday, { ...props, children }) });
+}
+CalendarWeekday.displayName = "@optiaxiom/react/CalendarWeekday";
+
+export { CalendarWeekday };

package/dist/packages/react/src/card/Card-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/card-checkbox/CardCheckbox.css.ts.vanilla-vs1mZ4Ch.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-Dy_qgnbO.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-DL6BXc5F.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var card = recipeRuntime({base:['hki5m3',{border:'1',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1mf2p8']});
+
+export { card };

package/dist/packages/react/src/card/Card.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
+import { forwardRef } from 'react';
+import { CardContextProvider } from '../card-context/CardContext.js';
+import { Flex } from '../flex/Flex.js';
+import { card } from './Card-css.js';
+
+const mapOrientationToFlexDirection = {
+  horizontal: "row",
+  vertical: "column"
+};
+const Card = forwardRef(
+  ({ children, className, orientation = "vertical", ...props }, ref) => {
+    const descriptionId = useId();
+    const labelId = useId();
+    return /* @__PURE__ */ jsx(
+      CardContextProvider,
+      {
+        descriptionId,
+        labelId,
+        orientation,
+        children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            "aria-describedby": descriptionId,
+            "aria-labelledby": labelId,
+            flexDirection: mapOrientationToFlexDirection[orientation],
+            ref,
+            ...card({}, className),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Card.displayName = "@optiaxiom/react/Card";
+
+export { Card };

package/dist/packages/react/src/card-checkbox/CardCheckbox-css.js

@@ -0,0 +1,10 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-Dy_qgnbO.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-DL6BXc5F.css';
+import './../../../../assets/src/card-checkbox/CardCheckbox.css.ts.vanilla-vs1mZ4Ch.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:['_17nrw3s']});
+var root = recipeRuntime({base:['h7lx0g',{rounded:'inherit',transition:'opacity'},'v71esq']});
+
+export { control, root };

package/dist/packages/react/src/card-checkbox/CardCheckbox.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CheckboxContent } from '../checkbox-content/CheckboxContent.js';
+import { CheckboxControl } from '../checkbox-control/CheckboxControl.js';
+import { CheckboxRoot } from '../checkbox-root/CheckboxRoot.js';
+import { root, control } from './CardCheckbox-css.js';
+
+const CardCheckbox = forwardRef(
+  ({ children, className, description, indeterminate, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      CheckboxRoot,
+      {
+        description: !!description,
+        ref,
+        ...root({}, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            CheckboxControl,
+            {
+              indeterminate,
+              shift: Boolean(children),
+              ...control({}, className)
+            }
+          ),
+          /* @__PURE__ */ jsx(CheckboxContent, { description, children })
+        ]
+      }
+    );
+  }
+);
+CardCheckbox.displayName = "@optiaxiom/react/CardCheckbox";
+
+export { CardCheckbox };

package/dist/packages/react/src/card-content/CardContent.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const CardContent = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { gap: "4", ref, ...props, children });
+  }
+);
+CardContent.displayName = "@optiaxiom/react/CardContent";
+
+export { CardContent };

package/dist/packages/react/src/card-context/CardContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [CardContextProvider, useCardContext] = createContext("Card");
+
+export { CardContextProvider, useCardContext };

package/dist/packages/react/src/card-description/CardDescription.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCardContext } from '../card-context/CardContext.js';
+import { Text } from '../text/Text.js';
+
+const CardDescription = forwardRef(({ children, ...props }, ref) => {
+  const { descriptionId } = useCardContext("CardDescription");
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      color: "fg.tertiary",
+      fontSize: "sm",
+      id: descriptionId,
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+CardDescription.displayName = "@optiaxiom/react/CardDescription";
+
+export { CardDescription };

package/dist/packages/react/src/card-image/CardImage-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/card-image/CardImage.css.ts.vanilla-9-vkAWiZ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_10z8l2b'],variants:{orientation:{horizontal:[{w:'auto'},'_14fdeps'],vertical:[{w:'full'},'d5f39z']}}});
+
+export { cardImage };