@optiaxiom/react 0.2.1 → 0.3.0

package/dist/src/alert-context/AlertContext.js

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

package/dist/src/alert-description/AlertDescription.js

@@ -1,9 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useAlertContext } from '../alert-context/AlertContext.js';
 import { Flex } from '../flex/Flex.js';
 
 const AlertDescription = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Flex, { gap: "xs", ref, ...props, children });
+  const { descriptionId } = useAlertContext("AlertDescription");
+  return /* @__PURE__ */ jsx(Flex, { gap: "xs", id: descriptionId, ref, ...props, children });
 });
 AlertDescription.displayName = "@optiaxiom/react/AlertDescription";
 

package/dist/src/alert-dialog-content/AlertDialogContent-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-CXU9RPlt.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-Cjw-y6Yy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_4agbqh'],variants:{size:{sm:'_7vn4mr',md:'s0zo4b',lg:'xyb5q3'}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_14h5a4e']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_1g7le8y'],variants:{size:{sm:'cn3bd5',md:'ny2rde',lg:'g5qmt5'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1rxb4v5']});
 
 export { content, overlay };

package/dist/src/alert-dialog-description/AlertDialogDescription-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',px:'24',py:'16'}]});

package/dist/src/alert-dialog-footer/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-C1jTI0n3.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-BsT6XyGm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_3tt6db']});
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'nfqh29']});
 
 export { footer };

package/dist/src/alert-title/AlertTitle.js

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useAlertContext } from '../alert-context/AlertContext.js';
 import { Box } from '../box/Box.js';
 
 const AlertTitle = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { fontWeight: "600", ref, ...props, children });
+    const { labelId } = useAlertContext("AlertTitle");
+    return /* @__PURE__ */ jsx(Box, { fontWeight: "600", id: labelId, ref, ...props, children });
   }
 );
 AlertTitle.displayName = "@optiaxiom/react/AlertTitle";

package/dist/src/autocomplete-content/AutocompleteContent-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-DJeeq1LR.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-B9mxe2pf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{p:'4'},'_8yc5mk']});
+var content = recipeRuntime({base:[{p:'4'},'y6zzyz']});
 
 export { content };

package/dist/src/avatar/Avatar-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-ApP8nAcG.css';
-import './../../assets/src/avatar/Avatar.css.ts.vanilla-BqFo8Ckf.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-CrcN69E1.css';
+import './../../assets/src/avatar/Avatar.css.ts.vanilla-hiaeqDOF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'eyn7pe'],variants:{colorScheme:{blue:{bg:'avatar.bg.blue',color:'avatar.fg.blue'},cyan:{bg:'avatar.bg.cyan',color:'avatar.fg.cyan'},green:{bg:'avatar.bg.green',color:'avatar.fg.green'},magenta:{bg:'avatar.bg.magenta',color:'avatar.fg.magenta'},neutral:{bg:'bg.secondary',color:'fg.default'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'},red:{bg:'bg.error.subtle',color:'fg.error.strong'},yellow:{bg:'avatar.bg.yellow',color:'avatar.fg.yellow'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'ddvs1n'],sm:[{fontSize:'xs',size:'sm'},'pbq83z'],md:[{fontSize:'md',size:'md'},'_1s252x2'],lg:[{fontSize:'lg',size:'lg'},'_12icwkh'],xl:[{fontSize:'2xl',size:'xl'},'injbr8'],'5xl':[{fontSize:'4xl',size:'5xl'},'_10qp5p6']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'xze9na'],variants:{colorScheme:{blue:{bg:'avatar.bg.blue',color:'avatar.fg.blue'},cyan:{bg:'avatar.bg.cyan',color:'avatar.fg.cyan'},green:{bg:'avatar.bg.green',color:'avatar.fg.green'},magenta:{bg:'avatar.bg.magenta',color:'avatar.fg.magenta'},neutral:{bg:'bg.secondary',color:'fg.default'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'},red:{bg:'bg.error.subtle',color:'fg.error.strong'},yellow:{bg:'avatar.bg.yellow',color:'avatar.fg.yellow'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_1e7or4v'],sm:[{fontSize:'xs',size:'sm'},'_17ozpbu'],md:[{fontSize:'md',size:'md'},'_7p5dks'],lg:[{fontSize:'lg',size:'lg'},'ethjpt'],xl:[{fontSize:'2xl',size:'xl'},'_1bxo80m'],'5xl':[{fontSize:'4xl',size:'5xl'},'ghb47u']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{h:'auto'}],variants:{size:{xs:{w:'12'},sm:{w:'12'},md:{w:'16'},lg:{w:'20'},xl:{w:'20'},'5xl':{w:'32'}}}});
 

package/dist/src/avatar-group/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-ApP8nAcG.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-CrcN69E1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['pullcv',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['_1aq2l5y',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/badge/Badge.css.ts.vanilla-hRYSETVs.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/badge/Badge.css.ts.vanilla-BGDmv1hz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_23puf6'],variants:{colorScheme:{danger:'_1xw54gy',information:'_1n8plxt',neutral:'_19zs5ef',primary:'jf181d',success:'_17b1bj6',warning:'j9557h'},variant:{light:'fwod71',solid:'_1reguyi'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'qnam8u'],variants:{colorScheme:{danger:'hn1rzl',information:'zfe98y',neutral:'_1mwxer4',primary:'_1g8jsk7',success:'ssn6hs',warning:'hds9jj'},variant:{light:'_1eaou4m',solid:'_9teq84'}}});
 
 export { badge };

package/dist/src/banner/Banner-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{colorScheme:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});

package/dist/src/banner/Banner.js

@@ -1,5 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from '@reach/auto-id';
 import { forwardRef, createElement } from 'react';
+import { BannerContextProvider } from '../banner-context/BannerContext.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
@@ -19,22 +21,35 @@ const iconMap = {
 };
 const Banner = forwardRef(
   ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...banner({ colorScheme }, className), ...props, children: [
-      /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
-      /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
-      !!onClose && /* @__PURE__ */ jsx(
-        Button,
-        {
-          appearance: "subtle",
-          "aria-label": "close",
-          color: "fg.default",
-          flex: "none",
-          icon: /* @__PURE__ */ jsx(IconX, {}),
-          onClick: onClose,
-          size: "sm"
-        }
-      )
-    ] });
+    const descriptionId = useId();
+    const labelId = useId();
+    return /* @__PURE__ */ jsx(BannerContextProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        "aria-describedby": descriptionId,
+        "aria-labelledby": labelId,
+        ref,
+        role: "alert",
+        ...banner({ colorScheme }, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
+          !!onClose && /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "subtle",
+              "aria-label": "close",
+              color: "fg.default",
+              flex: "none",
+              icon: /* @__PURE__ */ jsx(IconX, {}),
+              onClick: onClose,
+              size: "sm"
+            }
+          )
+        ]
+      }
+    ) });
   }
 );
 Banner.displayName = "@optiaxiom/react/Banner";

package/dist/src/banner-context/BannerContext.js

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

package/dist/src/banner-description/BannerDescription.js

@@ -1,9 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useBannerContext } from '../banner-context/BannerContext.js';
 import { Flex } from '../flex/Flex.js';
 
 const BannerDescription = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Flex, { gap: "xs", ref, ...props, children });
+  const { descriptionId } = useBannerContext("BannerDescription");
+  return /* @__PURE__ */ jsx(Flex, { gap: "xs", id: descriptionId, ref, ...props, children });
 });
 BannerDescription.displayName = "@optiaxiom/react/BannerDescription";
 

package/dist/src/banner-title/BannerTitle.js

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useBannerContext } from '../banner-context/BannerContext.js';
 import { Box } from '../box/Box.js';
 
 const BannerTitle = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { fontWeight: "600", ref, ...props, children });
+    const { labelId } = useBannerContext("BannerTitle");
+    return /* @__PURE__ */ jsx(Box, { fontWeight: "600", id: labelId, ref, ...props, children });
   }
 );
 BannerTitle.displayName = "@optiaxiom/react/BannerTitle";

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/box/Box.css.ts.vanilla-l5pxeqpC.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/box/Box.css.ts.vanilla-s1o67Nu2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1iwktq8'});
+var box = recipeRuntime({base:'_10gfdsp'});
 
 export { box };

package/dist/src/breadcrumb-ellipsis/BreadcrumbEllipsis.js

@@ -3,7 +3,7 @@ import { Box } from '../box/Box.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 
 function BreadcrumbEllipsis({ ...props }) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", ...props, children: /* @__PURE__ */ jsx(IconEllipsis, {}) });
+  return /* @__PURE__ */ jsx(Box, { display: "grid", placeItems: "center", ...props, children: /* @__PURE__ */ jsx(IconEllipsis, {}) });
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 

package/dist/src/breadcrumb-separator/BreadcrumbSeparator.js

@@ -2,12 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import { Box } from '../box/Box.js';
 
 function BreadcrumbSeparator({
-  asChild,
   children,
   ...props
 }) {
-  const Comp = asChild ? Box : "span";
-  return /* @__PURE__ */ jsx(Comp, { ...props, children: children ?? /* @__PURE__ */ jsx("span", { children: "/" }) });
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("li", { children: children ?? /* @__PURE__ */ jsx("span", { children: "/" }) }) });
 }
 BreadcrumbSeparator.displayName = "@optiaxiom/react/BreadcrumbSeparator";
 

package/dist/src/button/Button-css.js

@@ -1,12 +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/button/Button.css.ts.vanilla-BiYA392f.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-CrcN69E1.css';
+import './../../assets/src/button/Button.css.ts.vanilla-B1QifN0w.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{transition:'opacity'},'i5ot4w']});
-var button = recipeRuntime({base:['pvd8yv',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_10oo7xe'],variants:{colorScheme:{danger:'efdrg9',neutral:'_1yqlj65',primary:'wan7jv'},iconOnly:{false:'lbnmsc',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_22dmcp',solid:'zh1ybk',subtle:'_503k7b'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'trzodf',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'yus9ei',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'ttoro1',variants:{iconOnly:false,size:'lg'}}]});
-var icon = recipeRuntime({base:[{transition:'opacity'},'i5ot4w']});
-var label = recipeRuntime({base:[{flexDirection:'row',gap:'4',mx:'4'},{transition:'opacity'},'i5ot4w']});
-var spinner = recipeRuntime({base:'l7xneb'});
+var addon = recipeRuntime({base:[{transition:'opacity'},'_14yf7lh']});
+var button = recipeRuntime({base:['_1t6d3d7',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_193lbiv'],variants:{colorScheme:{danger:'ionh8j',neutral:'_1odcqwd',primary:'ygedj7'},iconOnly:{false:'kwsewx',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_11v077j',solid:'_2fb49j',subtle:'ib2j35'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'eioh5h',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_1wpbprr',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'yvtso',variants:{iconOnly:false,size:'lg'}}]});
+var icon = recipeRuntime({base:[{transition:'opacity'},'_14yf7lh']});
+var label = recipeRuntime({base:[{flexDirection:'row',gap:'4',mx:'4'},{transition:'opacity'},'_14yf7lh']});
+var spinner = recipeRuntime({base:'iarkek'});
 
 export { addon, button, icon, label, spinner };

package/dist/src/button/Button.js

@@ -85,6 +85,7 @@ const Button = forwardRef(
           className
         ),
         ...sprinkleProps,
+        ...isIconOnly && { justifyContent: "center" },
         children: /* @__PURE__ */ jsxs(Comp, { disabled: disabled || loading, ref, ...restProps, children: [
           /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
             Spinner,

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-ApP8nAcG.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-CrcN69E1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1t97w3x'});
+var buttonGroup = recipeRuntime({base:'dqcfz2'});
 
 export { buttonGroup };

package/dist/src/checkbox/Checkbox-css.js

@@ -1,13 +1,13 @@
-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/checkbox/Checkbox.css.ts.vanilla-v8ueXwNh.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-CrcN69E1.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BrGeFhyB.css';
+import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-CExS1ZqL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'_8f437s'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',mt:'2',rounded:'xs',size:'16'},'_1r6j2fg']});
-var icon = recipeRuntime({base:['_1y90mf7']});
+var checkbox = recipeRuntime({base:'_1d48mat'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',mt:'2',rounded:'xs',size:'16'},'_1b6ozsy']});
+var icon = recipeRuntime({base:['wsrswe']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'jyev48'});
+var input = recipeRuntime({base:'_4tpd91'});
 
 export { checkbox, control, icon, indicator, input };

package/dist/src/checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { IconCheck } from '../icons/IconCheck.js';
+import { CheckboxCheck } from '../icons/CheckboxCheck.js';
 import { IconMinus } from '../icons/IconMinus.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
@@ -25,7 +25,7 @@ const Checkbox = forwardRef(
         ...sprinkleProps,
         children: [
           /* @__PURE__ */ jsx(ToggleInputHiddenInput, { ref, ...input(), ...restProps }),
-          /* @__PURE__ */ jsx(ToggleInputControl, { ...control(), children: /* @__PURE__ */ jsx(Box, { ...indicator(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(IconCheck, {}) }) }) }),
+          /* @__PURE__ */ jsx(ToggleInputControl, { ...control(), children: /* @__PURE__ */ jsx(Box, { ...indicator(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(CheckboxCheck, {}) }) }) }),
           /* @__PURE__ */ jsxs(ToggleInputContent, { children: [
             /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
             description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })

package/dist/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/code/Code.css.ts.vanilla-CgFRu84v.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/code/Code.css.ts.vanilla-B4cXFjkE.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_6e5p5i']});
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_1t01fhs']});
 
 export { code };

package/dist/src/data-table/DataTable-css.js

@@ -0,0 +1,11 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/data-table/DataTable.css.ts.vanilla-f32O9yLT.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cellOffsetVar = 'var(--_1e45muq)';
+var columnWidthVar = 'var(--_9jb8x0)';
+var tableCell = recipeRuntime({base:[{bg:'bg.default'},'_17uhrmk'],variants:{pinned:{false:{},left:'_8cdgxd',right:{}}}});
+var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_7h1350'],variants:{pinned:{false:{},left:'_1paes0m',right:{}}}});
+var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'vqm9j5']});
+
+export { cellOffsetVar, columnWidthVar, tableCell, tableHead, tableHeader };

package/dist/src/data-table/DataTable.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useState, createElement } from 'react';
+import { Box } from '../box/Box.js';
+import { DataTableHeader } from '../data-table-header/DataTableHeader.js';
+import { Pagination } from '../pagination/Pagination.js';
+import { Table } from '../table/Table.js';
+import { TableBody } from '../table-body/TableBody.js';
+import { TableCell } from '../table-cell/TableCell.js';
+import { TableHead } from '../table-head/TableHead.js';
+import { TableHeaderCell } from '../table-header-cell/TableHeaderCell.js';
+import { TableRow } from '../table-row/TableRow.js';
+import { tableHeader, cellOffsetVar, columnWidthVar, tableHead, tableCell } from './DataTable-css.js';
+
+const DataTable = ({
+  columns,
+  data,
+  ...props
+}) => {
+  const [sorting, setSorting] = useState([]);
+  const [{ pageIndex, pageSize }, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const table = useReactTable({
+    ...props,
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    state: {
+      ...props.state,
+      pagination: {
+        pageIndex,
+        pageSize
+      },
+      sorting
+    }
+  });
+  let offset = 0;
+  const offsets = Object.fromEntries(
+    table.getAllColumns().flatMap((column) => [
+      [column.id, (offset += column.getSize()) - column.getSize()]
+    ])
+  );
+  return /* @__PURE__ */ jsxs(Box, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHead, { ...tableHeader(), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+        return /* @__PURE__ */ jsx(
+          TableHeaderCell,
+          {
+            style: {
+              ...assignInlineVars({
+                [cellOffsetVar]: header.column.getIsPinned() ? `${offsets[header.column.id]}px` : void 0,
+                [columnWidthVar]: `${header.getSize()}px`
+              })
+            },
+            ...tableHead({
+              pinned: header.column.getIsPinned() ?? void 0
+            }),
+            children: header.column.columnDef.header && typeof header.column.columnDef.header !== "string" ? createElement(
+              header.column.columnDef.header,
+              header.getContext()
+            ) : /* @__PURE__ */ jsx(DataTableHeader, { ...header.getContext(), children: header.column.columnDef.header })
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => {
+        return /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            style: {
+              ...assignInlineVars({
+                [cellOffsetVar]: cell.column.getIsPinned() ? `${offsets[cell.column.id]}px` : void 0,
+                [columnWidthVar]: `${cell.column.getSize()}px`
+              })
+            },
+            ...tableCell({
+              pinned: cell.column.getIsPinned() ?? void 0
+            }),
+            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+          },
+          cell.id
+        );
+      }) }, row.id)) })
+    ] }),
+    data.length > table.getState().pagination.pageSize && /* @__PURE__ */ jsx(Box, { mt: "8", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        onPageChange: (newPage) => table.setPageIndex(newPage - 1),
+        page: table.getState().pagination.pageIndex + 1,
+        total: table.getPageCount()
+      }
+    ) })
+  ] });
+};
+
+export { DataTable };

package/dist/src/data-table-header/DataTableHeader-css.js

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-Mck1Jygh.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var header = recipeRuntime({base:[{gap:'4'},'_16dd48f'],variants:{sortable:{false:'z193qz',true:'_1gkcchz'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
+var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'_1i6d1w6',true:{}}}});
+
+export { header, icon };

package/dist/src/data-table-header/DataTableHeader.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
+import { IconSort } from '../icons/IconSort.js';
+import { IconSortDown } from '../icons/IconSortDown.js';
+import { IconSortUp } from '../icons/IconSortUp.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { header, icon } from './DataTableHeader-css.js';
+
+const DataTableHeader = ({
+  children,
+  column,
+  variant = "text"
+}) => {
+  if (!column)
+    return null;
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      ...header({
+        sortable: column.columnDef.enableSorting,
+        variant
+      }),
+      onClick: () => column.columnDef.enableSorting && column.toggleSorting(),
+      children: [
+        children,
+        column.columnDef.enableSorting && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: column.getCanSort() ? column.getNextSortingOrder() === "asc" ? "Sort ascending" : column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                asChild: true,
+                ...icon({
+                  sorted: column.getIsSorted() === false ? false : true
+                }),
+                children: column.getIsSorted() === false ? /* @__PURE__ */ jsx(IconSort, {}) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(IconSortUp, {}) : /* @__PURE__ */ jsx(IconSortDown, {})
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+DataTableHeader.displayName = "@optiaxiom/react/DataTableHeader";
+
+export { DataTableHeader };

package/dist/src/dialog-body/DialogBody-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',pb:'md',pt:'lg',px:'lg'}]});

package/dist/src/dialog-content/DialogContent-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DYjXMRmn.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-Lsk9W2tM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'dgkqoj']});
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_1f8afo'],variants:{size:{sm:'j0yw89',md:'_1iq1x68',lg:'hi7b7p'}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1egklxj']});
+var close = recipeRuntime({base:[{rounded:'full'},'_17m6std']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_2f4nab'],variants:{size:{sm:'t1jvec',md:'_6l72ql',lg:'_1ako8ny'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_3xfkw9']});
 
 export { close, content, overlay };

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

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.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'}]});

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-C_E7EWK6.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-Bmhi1C7J.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{overflow:'hidden'},'qmrzgk']});
+var content = recipeRuntime({base:[{overflow:'hidden'},'d95bp6']});
 
 export { content };

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-Crev7Ydc.css';
-import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-Ut0pM30M.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-WPx7EAgK.css';
+import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DBVCni4f.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1opkqoa',start:'v9jya7'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1yfpbmr']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_9hb62s',start:'_1ru8j5m'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1f1gbbn']});
 
 export { icon, trigger };