@optiaxiom/react 0.8.1 → 0.8.2

package/dist/index.js

@@ -60,9 +60,6 @@ export { FieldLabel } from './packages/react/src/field-label/FieldLabel.js';
 export { Flex } from './packages/react/src/flex/Flex.js';
 export { Grid } from './packages/react/src/grid/Grid.js';
 export { Heading } from './packages/react/src/heading/Heading.js';
-export { HoverCard } from './packages/react/src/hover-card/HoverCard.js';
-export { HoverCardContent } from './packages/react/src/hover-card-content/HoverCardContent.js';
-export { HoverCardTrigger } from './packages/react/src/hover-card-trigger/HoverCardTrigger.js';
 export { Indicator } from './packages/react/src/indicator/Indicator.js';
 export { Input } from './packages/react/src/input/Input.js';
 export { InputAddon } from './packages/react/src/input-addon/InputAddon.js';
@@ -120,7 +117,6 @@ export { Textarea } from './packages/react/src/textarea/Textarea.js';
 export { ThemeProvider } from './packages/react/src/theme-provider/ThemeProvider.js';
 export { Toast } from './packages/react/src/toast/Toast.js';
 export { ToastAction } from './packages/react/src/toast-action/ToastAction.js';
-export { createToaster, toaster } from '@optiaxiom/globals';
 export { ToastProvider } from './packages/react/src/toast-provider/ToastProvider.js';
 export { ToastTitle } from './packages/react/src/toast-title/ToastTitle.js';
 export { ToggleButton } from './packages/react/src/toggle-button/ToggleButton.js';
@@ -130,3 +126,4 @@ export { TooltipRoot } from './packages/react/src/tooltip-root/TooltipRoot.js';
 export { TooltipTrigger } from './packages/react/src/tooltip-trigger/TooltipTrigger.js';
 export { Transition } from './packages/react/src/transition/Transition.js';
 export { TransitionGlobalConfig } from './packages/react/src/transition/TransitionGlobalConfig.js';
+export { createToaster, theme, toaster, tokens } from '@optiaxiom/globals';

package/dist/node_modules/.pnpm/{@mantine_hooks@7.14.3_react@18.3.1 → @mantine_hooks@7.15.1_react@18.3.1}/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js

@@ -21,7 +21,7 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   const [matches, setMatches] = useState(
     getInitialValueInEffect ? initialValue : getInitialValue(query)
   );
-  const queryRef = useRef();
+  const queryRef = useRef(null);
   useEffect(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);

package/dist/node_modules/.pnpm/{framer-motion@11.13.1_patch_hash_fcf7jjqh4eojsxb6ugcpywnnuy_react-dom@18.3.1_react@18.3.1__react@18.3.1 → framer-motion@11.15.0_patch_hash_fcf7jjqh4eojsxb6ugcpywnnuy_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js

@@ -2,7 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo, useRef, useState, useContext } from 'react';
 import { PresenceChild } from './PresenceChild.js';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.js';
-import { invariant } from '../../../../../../../motion-utils@11.13.0/node_modules/motion-utils/dist/es/errors.js';
+import { invariant } from '../../../../../../../motion-utils@11.14.3/node_modules/motion-utils/dist/es/errors.js';
 import { useConstant } from '../../utils/use-constant.js';
 import { onlyElements, getChildKey } from './utils.js';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.js';

package/dist/packages/react/package.json.js

@@ -1,3 +1,3 @@
-var version = "0.8.1";
+var version = "0.8.2";
 
 export { version };

package/dist/packages/react/src/alert/Alert-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',justifyContent:'space-between',p:'12',pr:'16',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});

package/dist/packages/react/src/alert-dialog-body/AlertDialogBody-css.js

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

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-CeUSjGUj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-D1fQixNN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var container = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_1x9mq8e']});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_5hww0j'],variants:{size:{sm:'_1n0feip',md:'_1mhkx9b',lg:'ujorxm'}}});
+var container = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_1aidsz4']});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_18xpf6o'],variants:{size:{sm:'_1quvt1l',md:'_1u74lg8',lg:'_1lr7sbx'}}});
 
 export { container, content };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-BiahfPUu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-Bu54f07F.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'16',justifyContent:'end',px:'24',py:'20'},'n1trzu']});
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'16',justifyContent:'end',px:'24',py:'20'},'_7pf5sp']});
 
 export { footer };

package/dist/packages/react/src/animate-presence/AnimatePresence.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import '../transition/Transition.js';
 import { TransitionGlobalConfig } from '../transition/TransitionGlobalConfig.js';
-import { AnimatePresence as AnimatePresence$1 } from '../../../../node_modules/.pnpm/framer-motion@11.13.1_patch_hash_fcf7jjqh4eojsxb6ugcpywnnuy_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { AnimatePresence as AnimatePresence$1 } from '../../../../node_modules/.pnpm/framer-motion@11.15.0_patch_hash_fcf7jjqh4eojsxb6ugcpywnnuy_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 
 function AnimatePresence({
   children

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-Ayzt3WJF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-DyQDI5n_.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{p:'4'},'zmisds']});
+var content = recipeRuntime({base:[{p:'4'},'_1ua3jri']});
 
 export { content };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-BgPUf0xd.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-CC1YKzaI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'b3w9pf'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'u5e0yo'],sm:[{fontSize:'xs',size:'sm'},'_1nnf3vl'],md:[{fontSize:'md',size:'md'},'_8xuka5'],lg:[{fontSize:'lg',size:'lg'},'faaei7'],xl:[{fontSize:'2xl',size:'xl'},'_1bulhpj'],'3xl':[{fontSize:'4xl',size:'3xl'},'wqjl91']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'z6uw9d'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_8g1u6'],sm:[{fontSize:'xs',size:'sm'},'_3jp066'],md:[{fontSize:'md',size:'md'},'_1w3i6ya'],lg:[{fontSize:'lg',size:'lg'},'cavctl'],xl:[{fontSize:'2xl',size:'xl'},'_1iuf0mm'],'3xl':[{fontSize:'4xl',size:'3xl'},'_1b0gq72']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
 

package/dist/packages/react/src/avatar/Avatar.js

@@ -24,7 +24,6 @@ const Avatar = forwardRef(
     className,
     colorScheme = "neutral",
     fallback: fallback$1 = "user",
-    icon: icon$1,
     name,
     size: sizeProp,
     src,
@@ -40,7 +39,7 @@ const Avatar = forwardRef(
         ...props,
         children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { ref, children: [
           src && /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name, src }) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: src ? 600 : void 0, children: icon$1 ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: icon$1 }) : name ? getInitialsFromName(name) : children || /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: mapFallbackToIcon[fallback$1] }) }) })
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: src ? 600 : void 0, children: (name ? getInitialsFromName(name) : children) || /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: mapFallbackToIcon[fallback$1] }) }) })
         ] })
       }
     );

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_1hc4noe',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['lokr0f',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CgQ2BbGZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CZ0R8IPm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'hanvim']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'xpq40n']});
 
 export { backdrop };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-OwlF8UHd.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-CxenIwSA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_17phaut'],variants:{intent:{danger:'_61jumv',information:'uedkgj',neutral:'_6204yv',primary:'h2m6tu',success:'iba9ro',warning:'_9u2lvz'},variant:{light:'hihkr3',solid:'_9hi5ub'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_8mfgdr'],variants:{intent:{danger:'_1ke76c',information:'_1o5izzo',neutral:'_6nygeo',primary:'_32os2t',success:'_127nqwh',warning:'_1l8m6tk'},variant:{light:'_1fi9ab3',solid:'_1ks8jp2'}}});
 
 export { badge };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{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/packages/react/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-CV_xBQOM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-CxlsAoSo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'epp8j4'});
+var box = recipeRuntime({base:'eb02mt'});
 
 export { box };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-t4oV6SfF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-BCwJOq95.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1uqwur0']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_12phx7h']});
 
 export { item };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-jWjrHmfC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-CYyMTcl3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_6h1wtz']});
+var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_2vnwpj']});
 
 export { link };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CZ1Rbq10.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-LB7W6lTK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['oj5q8',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1n7j922'],variants:{iconOnly:{false:'u3y61h',true:{}},intent:{danger:'w0irs9',neutral:'_1s1j71t',primary:'x3kqei'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1og9wko',solid:'_1agsk9a',subtle:'pvujo'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_1crnf0y',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_165hcdl',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1qa9plu',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'whsl48']});
+var buttonBase = recipeRuntime({base:['_1a820s4',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1cz9anp'],variants:{iconOnly:{false:'_19luy0g',true:{}},intent:{danger:'_5ob8g6',neutral:'_113apm',primary:'_112atqi'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'joyknb',solid:'_1m4uza7',subtle:'_16cc87w'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'snm2kl',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_9d3r3w',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1koqiat',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'_1ci4rb1']});
 
 export { buttonBase, spinner };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1e3d44x'});
+var buttonGroup = recipeRuntime({base:'p8ymh1'});
 
 export { buttonGroup };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CZ1Rbq10.css';
-import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-B21w13d6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-LB7W6lTK.css';
+import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-C_kf7cXQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1woo5nq']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'qaocdt']});
 
 export { loadable };

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

@@ -1,13 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-nCXOMbJx.css';
-import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-YB200lqY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DaiPcs9V.css';
+import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-DQ-T1a-J.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'e9d706'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'2xs'},'_1al890c'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:['_1fq6zvb']});
+var checkbox = recipeRuntime({base:'fgytt2'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'2xs'},'nickw6'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:['_1ia14nw']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'w5y62b'});
+var input = recipeRuntime({base:'_1rmpgid'});
 
 export { checkbox, control, icon, indicator, input };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-Cx6XK1yB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-BoILKpeG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_1lv7010']});
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'z02nzz']});
 
 export { code };

package/dist/packages/react/src/command-focusable-item/CommandFocusableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-D7kWNBAv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CsD5Lm9p.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'l3mnsn'});
+var item = recipeRuntime({base:'_3k27hl'});
 
 export { item };

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

@@ -1,11 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-CMl6wxvT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BP46h_xl.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-D-Y37ogI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cellOffsetVar = 'var(--i7j5ex)';
-var columnWidthVar = 'var(--qyp0sv)';
-var tableCell = recipeRuntime({base:[{bg:'bg.default'},'rh21o3'],variants:{pinned:{false:{},left:'_1uwuqvr',right:{}}}});
-var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_3cff0s'],variants:{pinned:{false:{},left:'_12qxpvr',right:{}}}});
-var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'f5moa5']});
+var cell = recipeRuntime({base:['_3xycix'],variants:{pinned:{left:'_1o96dum',right:'p9tjnr'},pinnedType:{body:'_1s0hb48',header:{}}}});
+var cellOffsetVar = 'var(--k97bpv)';
+var cellSizeVar = 'var(--_1ezzrud)';
+var header = recipeRuntime({base:['ibbf5n']});
+var leftTotalSizeVar = 'var(--_1n5796e)';
+var rightTotalSizeVar = 'var(--_1vghd3a)';
+var table = recipeRuntime({base:'_11ek117',variants:{pinned:{both:'zqte4b',left:'s7h2ib',none:{},right:'_1fov8wc'}}});
 
-export { cellOffsetVar, columnWidthVar, tableCell, tableHead, tableHeader };
+export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -1,104 +1,113 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { useState, createElement } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { DataTableHeader } from '../data-table-header/DataTableHeader.js';
+import { DataTableHeaderCell } from '../data-table-header-cell/DataTableHeaderCell.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 { TableHeader } from '../table-header/TableHeader.js';
 import { TableRow } from '../table-row/TableRow.js';
-import { tableHeader, cellOffsetVar, columnWidthVar, tableHead, tableCell } from './DataTable-css.js';
+import { leftTotalSizeVar, rightTotalSizeVar, table, header, cellOffsetVar, cellSizeVar, cell } 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,
+const DataTable = forwardRef(
+  ({ table: table$1, ...props }, ref) => {
+    let offsetLeft = 0;
+    let offsetRight = table$1.getTotalSize();
+    const offsets = Object.fromEntries(
+      table$1.getAllColumns().flatMap((column) => [
+        [
+          column.id,
           {
-            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,
+            left: (offsetLeft += column.getSize()) - column.getSize(),
+            right: offsetRight -= column.getSize()
+          }
+        ]
+      ])
+    );
+    return /* @__PURE__ */ jsxs(
+      Box,
       {
-        onPageChange: (newPage) => table.setPageIndex(newPage - 1),
-        page: table.getState().pagination.pageIndex + 1,
-        total: table.getPageCount()
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Table,
+            {
+              layout: "fixed",
+              style: assignInlineVars({
+                [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
+                [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
+              }),
+              ...table({
+                pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
+              }),
+              children: [
+                /* @__PURE__ */ jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                  DataTableHeaderCell,
+                  {
+                    header,
+                    style: {
+                      ...assignInlineVars({
+                        [cellOffsetVar]: `${offsets[header.column.id][header.column.getIsPinned() || "left"]}px`,
+                        [cellSizeVar]: `${header.getSize()}px`
+                      })
+                    },
+                    ...cell({
+                      pinned: header.column.getIsPinned() || void 0,
+                      pinnedType: header.column.getIsPinned() ? "header" : void 0
+                    }),
+                    children: flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  },
+                  header.id
+                )) }, headerGroup.id)) }),
+                /* @__PURE__ */ jsx(TableBody, { children: table$1.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell$1) => {
+                  return /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      style: {
+                        ...assignInlineVars({
+                          [cellOffsetVar]: `${offsets[cell$1.column.id][cell$1.column.getIsPinned() || "left"]}px`,
+                          [cellSizeVar]: `${cell$1.column.getSize()}px`
+                        })
+                      },
+                      ...cell({
+                        pinned: cell$1.column.getIsPinned() || void 0,
+                        pinnedType: cell$1.column.getIsPinned() ? "body" : void 0
+                      }),
+                      children: flexRender(
+                        cell$1.column.columnDef.cell,
+                        cell$1.getContext()
+                      )
+                    },
+                    cell$1.id
+                  );
+                }) }, row.id)) })
+              ]
+            }
+          ),
+          table$1.getPageCount() > 1 && /* @__PURE__ */ jsx(Box, { mt: "8", children: /* @__PURE__ */ jsx(
+            Pagination,
+            {
+              onPageChange: (newPage) => table$1.setPageIndex(newPage - 1),
+              page: table$1.getState().pagination.pageIndex + 1,
+              total: table$1.getPageCount()
+            }
+          ) })
+        ]
       }
-    ) })
-  ] });
-};
+    );
+  }
+);
+DataTable.displayName = "@optiaxiom/react/DataTable";
 
 export { DataTable };

package/dist/packages/react/src/data-table-header-cell/DataTableHeaderCell-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DAaoRros.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'_1p42j9r','_91sku7']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1g6wuc7'],variants:{active:{false:'d4q77i',true:'il8kvh'},muted:{false:{},true:'_1i4wjq1'}}});
+
+export { button, icon };