@optiaxiom/react 0.13.9 → 0.13.11

package/dist/cjs/unstable.js

@@ -3,87 +3,85 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-Ce2P3ovf.js');
-require('./assets/src/layers/layers.css.ts.vanilla-COiQatzf.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DoxeDHuR.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-BHdWBlF8.css');
+var Skeleton = require('./Skeleton-CZgaFkoI.js');
+require('./assets/src/layers/layers.css.ts.vanilla-DWDfT8-L.css');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-CwhG2nDf.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-2VyWE4wt.css');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-SyenhKe4.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-C7UZZd2i.css');
-require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-wDCjCmT-.css');
-require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-D-_ekKTp.css');
+var reactSlot = require('@radix-ui/react-slot');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-3nZKQGjz.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-B4auCEXz.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-ljRynESV.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BO1Huehi.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DYL5VseG.css');
 var reactContext = require('@radix-ui/react-context');
-require('./assets/src/cover/Cover.css.ts.vanilla-Cf8Y2X99.css');
-require('./assets/src/link/Link.css.ts.vanilla-Biniflpf.css');
-require('./assets/src/card/Card.css.ts.vanilla-CK1wishH.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-BGgc8FKd.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-x3gB8tGn.css');
-require('./assets/src/card-actions/CardActions.css.ts.vanilla-kXvCyL4o.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-BiP4aP7J.css');
+require('./assets/src/link/Link.css.ts.vanilla-BN5b6lYM.css');
+require('./assets/src/card/Card.css.ts.vanilla-CVCjYFuZ.css');
+require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-SnF9m67G.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-BF9OzXd6.css');
+require('./assets/src/card-actions/CardActions.css.ts.vanilla-C2fE1EcC.css');
 var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-DzikvT_8.css');
-var reactSlot = require('@radix-ui/react-slot');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-FW_DvLEe.css');
 var RadixDialog = require('@radix-ui/react-dialog');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-DsEAhC9c.css');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-C1O1RVDt.css');
 var downshift = require('downshift');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-wnRroqNw.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DXjLy5l_.css');
-require('./assets/src/table/Table.css.ts.vanilla-CCU-5Mqf.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-B0PnghhJ.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-Dr-tbOIn.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-DEzEH-85.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-BUWI9H-H.css');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-DOmKRkLb.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CYNVfLex.css');
+require('./assets/src/table/Table.css.ts.vanilla-DYLvPFMB.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-vm0l17-k.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-D-0hyctR.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-gSB5EdI2.css');
+require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-D5mjQ_wI.css');
 var reactPopper = require('@radix-ui/react-popper');
 var reactPortal = require('@radix-ui/react-portal');
-require('./assets/src/select-content/SelectContent.css.ts.vanilla-BfzIl6kQ.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-CTKWbu6k.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-BZiBxQBX.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-C8Mkm9f8.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-DKxsvgid.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-0ISn8PVt.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-CSztJiz8.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-DZ3NGueL.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BdWJJTCs.css');
-require('./assets/src/sub-nav/SubNav.css.ts.vanilla-BBcLkDgx.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DutzeoPg.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-D81mSo0t.css');
-require('@radix-ui/react-collapsible');
-require('./assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-BZkThAKT.css');
-require('./assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DXsW9GKC.css');
+require('./assets/src/select-content/SelectContent.css.ts.vanilla-RxyUX-cq.css');
+require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-Dttxxg5e.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-Dlo5a245.css');
+require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-YfVYW-E6.css');
+require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-Dc69aJse.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-CdujAl4B.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-B_9yL0of.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-CYlJfo00.css');
+require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-BalhOkjF.css');
+require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-B6XBrp63.css');
+require('./assets/src/badge/Badge.css.ts.vanilla-BxorUPCC.css');
+require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BBtDA3ZF.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-CQQt3kyz.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-DiEKBpt2.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-DW-FAMhx.css');
-require('./assets/src/input-control/InputControl.css.ts.vanilla--xz4hLcB.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BO1Huehi.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-q49vlm1O.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BO1Huehi.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-t4Shregl.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-DRAhK3L1.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-wMyeCZMl.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-2vqnEN4X.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-DqHQ83UZ.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-D8WPSee8.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DYL5VseG.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-Ip1MWEbm.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DYL5VseG.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-VrDa4liD.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-Mm44i0L9.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-CCq3lJxj.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-C8duxcS_.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/text/Text.css.ts.vanilla-CkLlWoIr.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-8djD8VIJ.css');
+require('./assets/src/text/Text.css.ts.vanilla-NvXH3Ems.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-fWS7exyc.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-BdLlMZFt.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-NHB_mKnX.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-B9JA-1eV.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-rEqPa-kV.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-DnGtVtTl.css');
+require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-DNb4kgA3.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-Bxbzd_T5.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BL6x-gCI.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-BD6gnyKv.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-BBLRChdl.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-BTIz0HJr.css');
-require('./assets/src/box/Box.css.ts.vanilla-B446X7gA.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-DXJHB2ne.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-Hns0MSgX.css');
+require('./assets/src/box/Box.css.ts.vanilla-C7rkoeOD.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-9ZEESQeP.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -235,7 +233,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'v5afe9']});
+var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'cuvsvc']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -245,7 +243,7 @@ const BreadcrumbItem = React.forwardRef(
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'fy6q7h']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'dxwiig']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -259,6 +257,21 @@ const BreadcrumbPage = React.forwardRef(
 );
 BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";
 
+const list = ["md", "sm"];
+const useResponsiveMatches = (config) => {
+  const matches = {
+    base: true,
+    sm: useMediaQuery(Skeleton.conditions.conditions.sm["@media"]),
+    md: useMediaQuery(Skeleton.conditions.conditions.md["@media"])
+  };
+  for (const name of list) {
+    if (config[name] && matches[name]) {
+      return config[name];
+    }
+  }
+  return config.base;
+};
+
 function CalendarChevron({
   orientation,
   ...props
@@ -272,7 +285,8 @@ function CalendarDay({ children, ...props }) {
 }
 CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
 
-var button$3 = Skeleton.recipeRuntime({base:{mt:'8'},variants:{outside:{false:{},true:'_1jdi2uj'}}});
+var button$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',mt:'8',size:'md',transition:'colors'},'_5gtzhw'],variants:{appearance:{'default':'le7apf',holiday:[{color:'fg.error'},'yjhl1d'],range_middle:'_1l64pgv',selected:[{color:'fg.white'},'n76jy2'],weekend:{color:'fg.tertiary'}},range:{end:['w2qosd'],middle:['_1it32y0'],start:['_1cxr42f']}}});
+var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'u1qhov']});
 
 function CalendarDayButton({
   children,
@@ -289,15 +303,20 @@ function CalendarDayButton({
     }
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Button,
+    Skeleton.Box,
     {
-      appearance: modifiers.selected ? "primary" : "subtle",
-      "data-state": modifiers.today ? "active" : void 0,
-      ref,
-      square: true,
-      ...button$3({ outside: modifiers.outside }, className),
-      ...props,
-      children
+      asChild: true,
+      ...button$1(
+        {
+          appearance: modifiers.range_middle ? "range_middle" : modifiers.selected ? "selected" : modifiers.holiday ? "holiday" : modifiers.weekend ? "weekend" : "default",
+          range: modifiers.range_start && modifiers.range_end ? void 0 : modifiers.range_start ? "start" : modifiers.range_middle ? "middle" : modifiers.range_end ? "end" : void 0
+        },
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("button", { ref, ...props, children: [
+        children,
+        modifiers.today && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...today() })
+      ] })
     }
   );
 }
@@ -332,54 +351,35 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:'mmaxaf'});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'ezlfu3']});
 
 function CalendarMonths({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
 }
 CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
 
-var button$2 = Skeleton.recipeRuntime({base:'px7p78'});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_1ik9jtd']});
+
+function CalendarNav({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
+}
+CalendarNav.displayName = "@optiaxiom/react/CalendarNav";
 
 function CalendarNextMonthButton({
   children,
-  className,
   color: _color,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Button,
-    {
-      appearance: "subtle",
-      asChild: true,
-      icon: children,
-      ...button$2({}, className),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.NextMonthButton, {})
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance: "subtle", asChild: true, icon: children, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.NextMonthButton, {}) });
 }
 CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
 
-var button$1 = Skeleton.recipeRuntime({base:'uei8sx'});
-
 function CalendarPreviousMonthButton({
   children,
-  className,
   color: _color,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Button,
-    {
-      appearance: "subtle",
-      asChild: true,
-      icon: children,
-      ...button$1({}, className),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.PreviousMonthButton, {})
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance: "subtle", asChild: true, icon: children, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.PreviousMonthButton, {}) });
 }
 CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
 
@@ -395,6 +395,7 @@ const components = {
   MonthCaption: CalendarMonthCaption,
   MonthGrid: CalendarMonthGrid,
   Months: CalendarMonths,
+  Nav: CalendarNav,
   NextMonthButton: CalendarNextMonthButton,
   PreviousMonthButton: CalendarPreviousMonthButton,
   Weekday: CalendarWeekday
@@ -402,11 +403,14 @@ const components = {
 const Calendar = React.forwardRef(
   ({
     defaultValue,
+    holiday,
     max,
     min,
+    mode = "single",
     onValueChange,
     today,
     value: valueProp,
+    weekend,
     ...props
   }, ref) => {
     const [value, setValue] = reactUseControllableState.useControllableState({
@@ -414,6 +418,10 @@ const Calendar = React.forwardRef(
       onChange: onValueChange,
       prop: valueProp
     });
+    const numberOfMonths = useResponsiveMatches({
+      base: 1,
+      sm: 2
+    });
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Box,
       {
@@ -427,13 +435,14 @@ const Calendar = React.forwardRef(
           {
             autoFocus: true,
             components,
-            defaultMonth: value,
+            defaultMonth: value && "from" in value ? value.from : value,
             endMonth: max,
-            mode: "single",
+            mode,
+            modifiers: { holiday, weekend },
+            numberOfMonths: mode === "range" ? numberOfMonths : 1,
             onSelect: setValue,
             required: true,
             selected: value,
-            showOutsideDays: true,
             startMonth: min,
             today
           }
@@ -444,7 +453,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'_1s6hs80'});
+var root = Skeleton.recipeRuntime({base:'bbmj3v'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -455,7 +464,7 @@ ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
 const [CardContextProvider, useCardContext] = reactContext.createContext("Card");
 
-var card = Skeleton.recipeRuntime({base:['_13qsbnm',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'oks52p']});
+var card = Skeleton.recipeRuntime({base:['budzzj',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'dj6a3n']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -487,7 +496,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'knbvne'],variants:{visible:{false:'uzn5ah',true:'bzwhaq'}}});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'k7is55'],variants:{visible:{false:'_1wtoxkx',true:'_1gys6js'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
@@ -496,7 +505,7 @@ const ActionsContent = React.forwardRef(
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var actions = Skeleton.recipeRuntime({base:['_10okgoq']});
+var actions = Skeleton.recipeRuntime({base:['vc1z3r']});
 
 const CardActions = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -566,7 +575,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'qtct2s'],variants:{orientation:{horizontal:[{w:'auto'},'_14x4szk'],vertical:[{w:'full'},'_19a4mvd']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1qoib4g'],variants:{orientation:{horizontal:[{w:'auto'},'_1bj8eyr'],vertical:[{w:'full'},'_7qq1i8']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -592,7 +601,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['ymu97w',{alignSelf:'stretch'},'_18qj6ii'],variants:{orientation:{horizontal:['zywkux'],vertical:['_1evmfnd']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_11txnvd',{alignSelf:'stretch'},'wdm135'],variants:{orientation:{horizontal:['avz25d'],vertical:['ei3xso']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -660,21 +669,6 @@ function useEffectEvent(callback) {
   }, []);
 }
 
-const list = ["md", "sm"];
-const useResponsiveMatches = (config) => {
-  const matches = {
-    base: true,
-    sm: useMediaQuery(Skeleton.conditions.conditions.sm["@media"]),
-    md: useMediaQuery(Skeleton.conditions.conditions.md["@media"])
-  };
-  for (const name of list) {
-    if (config[name] && matches[name]) {
-      return config[name];
-    }
-  }
-  return config.base;
-};
-
 function Combobox({
   children,
   defaultOpen = false,
@@ -741,7 +735,7 @@ Combobox.displayName = "@optiaxiom/react/Combobox";
 
 const [CommandContextProvider, useCommandContext] = reactContext.createContext("Command");
 
-var item$2 = Skeleton.recipeRuntime({base:'_1rqpp2u'});
+var item$2 = Skeleton.recipeRuntime({base:'_1i9d352'});
 
 const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
   const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
@@ -1126,25 +1120,45 @@ const ComboboxSeparator = React.forwardRef((props, ref) => {
 });
 ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
 
+const useFieldLabelTrigger = (ref, ariaLabelledBy) => {
+  const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
+  React.useEffect(() => {
+    if (!labelId || !ref.current) {
+      return;
+    }
+    const button = ref.current;
+    const label = document.getElementById(labelId);
+    if (!label) {
+      return;
+    }
+    const onLabelClick = () => button.focus();
+    label.addEventListener("click", onLabelClick);
+    return () => label.removeEventListener("click", onLabelClick);
+  }, [labelId, ref]);
+  return labelId;
+};
+
 const ComboboxTrigger = React.forwardRef(
-  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
-    const { components, setOpen } = useComboboxContext("ComboboxTrigger");
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    asChild,
+    children,
+    placeholder,
+    ...props
+  }, outerRef) => {
+    const {
+      components,
+      itemToString,
+      setOpen,
+      value: valueContext
+    } = useComboboxContext("ComboboxTrigger");
+    const value = React.useMemo(
+      () => valueContext instanceof Set ? [...valueContext] : valueContext,
+      [valueContext]
+    );
     const buttonRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-    const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
-    React.useEffect(() => {
-      if (!labelId || !buttonRef.current) {
-        return;
-      }
-      const button = buttonRef.current;
-      const label = document.getElementById(labelId);
-      if (!label) {
-        return;
-      }
-      const onLabelClick = () => button.focus();
-      label.addEventListener("click", onLabelClick);
-      return () => label.removeEventListener("click", onLabelClick);
-    }, [labelId]);
+    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
     return /* @__PURE__ */ jsxRuntime.jsx(
       components.Trigger,
       {
@@ -1160,28 +1174,16 @@ const ComboboxTrigger = React.forwardRef(
         ref,
         role: "combobox",
         ...props,
-        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.length === 1 ? itemToString(value[0]) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          value.length,
+          " selected"
+        ] }) }) : placeholder })
       }
     );
   }
 );
 ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
 
-const ComboboxValue = React.forwardRef(
-  ({ children, placeholder, ...props }, ref) => {
-    const { itemToString, value: valueContext } = useComboboxContext("ComboboxValue");
-    const value = React.useMemo(
-      () => valueContext instanceof Set ? [...valueContext] : valueContext,
-      [valueContext]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.length === 1 ? itemToString(value[0]) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      value.length,
-      " selected"
-    ] }) }) : placeholder });
-  }
-);
-ComboboxValue.displayName = "@optiaxiom/react/ComboboxValue";
-
 const ComboboxVirtualized = React.forwardRef(({ children, items, ...props }, outerRef) => {
   const innerRef = React.useRef(null);
   const ref = reactComposeRefs.useComposedRefs(outerRef, innerRef);
@@ -1234,7 +1236,18 @@ const [DataTableContextProvider, useDataTableContext] = reactContext.createConte
 
 const DataTable = React.forwardRef(
   ({ children, table, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { alignItems: "start", gap: "8", maxW: "full", ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableContextProvider, { table, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Flex,
+      {
+        gap: "8",
+        justifyContent: "start",
+        maxH: "full",
+        maxW: "full",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DataTableContextProvider, { table, children })
+      }
+    );
   }
 );
 DataTable.displayName = "@optiaxiom/react/DataTable";
@@ -1284,15 +1297,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_11x67kf'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',px:'16',py:'12',size:'full'},'bb4ree']});
+var cell$2 = Skeleton.recipeRuntime({base:'ja9cjb'});
+var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'uef7wa']});
 
-const TableHeaderCell = React.forwardRef(({ children, className, colSpan, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), children }) }) }));
+const TableHeaderCell = React.forwardRef(
+  ({ children, className, colSpan, p, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), px: p ?? px, py: p ?? py, children }) }) })
+);
 TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
 
-var button = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1clllsx']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_50bmhr'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_10twzbi'],variants:{active:{false:'_171krdz',true:'eek0et'}}});
+var button = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'sh6bmb']});
+var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_5ehgcm'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'tf9jxk'],variants:{active:{false:'ac7ypt',true:'otr1y4'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1345,22 +1360,22 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
 });
 DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
 
-var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md'},'_7yltob'],variants:{layout:{auto:[{w:'full'},'_14z4h77'],fixed:[{display:'grid',w:'fit'},'_7l1ru5']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_60wzo9']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'ff2b4y'],variants:{layout:{auto:['_1ufzore'],fixed:[{display:'grid'},'eoqvdb']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_38e3zo']});
 
 const Table = React.forwardRef(
   ({ children, className, layout = "auto", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...wrapper({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...table$1({ layout }), children: /* @__PURE__ */ jsxRuntime.jsx("table", { children }) }) })
 );
 Table.displayName = "@optiaxiom/react/Table";
 
-var body = Skeleton.recipeRuntime({base:['_1ab14ci']});
+var body = Skeleton.recipeRuntime({base:['_140zbur']});
 
 const TableBody = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...body({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, children }) })
 );
 TableBody.displayName = "@optiaxiom/react/TableBody";
 
-var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'h3tb8v']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_71a7t5']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1372,20 +1387,20 @@ TableCell.displayName = "@optiaxiom/react/TableCell";
 const TableHeader = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, children }) }));
 TableHeader.displayName = "@optiaxiom/react/TableHeader";
 
-var row = Skeleton.recipeRuntime({base:['_1wejh37',{transition:'colors',w:'full'},'_13tpu6n']});
+var row = Skeleton.recipeRuntime({base:['_12hy4g5',{transition:'colors',w:'full'},'s259mn']});
 
 const TableRow = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...row({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, children }) }) })
 );
 TableRow.displayName = "@optiaxiom/react/TableRow";
 
-var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1tn3rtf'],variants:{pinned:{left:'sqvcjz',right:'_4vxqvq'},pinnedType:{body:'_1brs2zz',header:{}}}});
-var cellOffsetVar = 'var(--_1o92e7c)';
-var cellSizeVar = 'var(--zq9qzv)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'livqtu']});
-var leftTotalSizeVar = 'var(--_11aogxn)';
-var rightTotalSizeVar = 'var(--_1tb049k)';
-var table = Skeleton.recipeRuntime({base:'_1dyp1ey',variants:{pinned:{both:'_1cpds01',left:'_1y5gmi8',none:{},right:'_1dj5qcm'}}});
+var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1pa1nv5'],variants:{pinned:{left:'gsr9xl',right:'_9x3h9k'},pinnedType:{body:'bifv5g',header:{}}}});
+var cellOffsetVar = 'var(--dkj37b)';
+var cellSizeVar = 'var(--_15fra1p)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_1k633cr']});
+var leftTotalSizeVar = 'var(--_1h96vcy)';
+var rightTotalSizeVar = 'var(--_1uy7uiq)';
+var table = Skeleton.recipeRuntime({base:'_1q2re9c',variants:{pinned:{both:'y7ie3u',left:'ew089x',none:{},right:'_1besteb'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -1428,27 +1443,30 @@ const DataTableBody = React.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
-            DataTableHeaderCell,
-            {
-              header,
-              style: {
-                ...dynamic.assignInlineVars({
-                  [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
-                  [cellSizeVar]: `${header.getSize()}px`
-                })
+          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { display: "flex", children: [
+            headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
+              DataTableHeaderCell,
+              {
+                header,
+                style: {
+                  ...dynamic.assignInlineVars({
+                    [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                    [cellSizeVar]: `${header.getSize()}px`
+                  })
+                },
+                ...cell({
+                  pinned: header.column.getIsPinned() || void 0,
+                  pinnedType: header.column.getIsPinned() ? "header" : void 0
+                }),
+                children: header.isPlaceholder ? null : reactTable.flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
               },
-              ...cell({
-                pinned: header.column.getIsPinned() || void 0,
-                pinnedType: header.column.getIsPinned() ? "header" : void 0
-              }),
-              children: header.isPlaceholder ? null : reactTable.flexRender(
-                header.column.columnDef.header,
-                header.getContext()
-              )
-            },
-            header.id
-          )) }, headerGroup.id)) }),
+              header.id
+            )),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { flex: "1", p: "0", w: "0" })
+          ] }, headerGroup.id)) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             TableBody,
             {
@@ -1523,7 +1541,8 @@ const DataTableBody = React.forwardRef(
                         children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                       },
                       cell$1.id
-                    ))
+                    )),
+                    /* @__PURE__ */ jsxRuntime.jsx(TableCell, { flex: "1", p: "0", w: "0" })
                   ]
                 },
                 row.id
@@ -1627,7 +1646,7 @@ function Select({
 }
 Select.displayName = "@optiaxiom/react/Select";
 
-var content = Skeleton.recipeRuntime({base:['hnx47s']});
+var content = Skeleton.recipeRuntime({base:['_1uwhvka']});
 
 const SelectContent = React.forwardRef(
   ({
@@ -1701,25 +1720,13 @@ const SelectTrigger = React.forwardRef(
     asChild,
     children,
     onKeyDown,
+    placeholder,
     ...props
   }, ref) => {
-    const { disabled, downshift, isOpen } = useSelectContext("SelectTrigger");
+    const { disabled, downshift, isOpen, itemToString, selectedItem } = useSelectContext("SelectTrigger");
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
     const buttonRef = React.useRef(null);
-    React.useEffect(() => {
-      if (!labelId || !buttonRef.current) {
-        return;
-      }
-      const button = buttonRef.current;
-      const label = document.getElementById(labelId);
-      if (!label) {
-        return;
-      }
-      const onLabelClick = () => button.focus();
-      label.addEventListener("click", onLabelClick);
-      return () => label.removeEventListener("click", onLabelClick);
-    }, [labelId]);
+    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
     const [focusOnOpen] = React.useState(isOpen);
     React.useEffect(
       function() {
@@ -1743,20 +1750,14 @@ const SelectTrigger = React.forwardRef(
             document.dispatchEvent(new Event("tooltip.open"));
           }
         }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { ref: buttonRef, children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { ref: buttonRef, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) }) })
       }
     );
   }
 );
 SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
 
-const SelectValue = React.forwardRef(
-  ({ children, placeholder, ...props }, ref) => {
-    const { itemToString, selectedItem } = useSelectContext("SelectValue");
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...props, ref, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) });
-  }
-);
-SelectValue.displayName = "@optiaxiom/react/SelectValue";
+var addon = Skeleton.recipeRuntime({base:'_1nefg2t',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
 const DataTableFooter = React.forwardRef(
@@ -1770,10 +1771,11 @@ const DataTableFooter = React.forwardRef(
         alignSelf: "stretch",
         flexDirection: "row",
         justifyContent: "space-between",
+        mt: "auto",
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "8", children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...addon({ position: "start" }), children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", gap: "8", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", id: pageSizeId, children: "Page Size" }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               Select,
@@ -1782,7 +1784,13 @@ const DataTableFooter = React.forwardRef(
                 onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
                 value: pagination.pageSize.toString(),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { appearance: "subtle", "aria-labelledby": pageSizeId, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SelectTrigger,
+                    {
+                      appearance: "subtle",
+                      "aria-labelledby": pageSizeId
+                    }
+                  ),
                   /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: pageSizeOptions.map((rows) => /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item: rows, children: rows }, rows)) })
                 ]
               }
@@ -1796,7 +1804,7 @@ const DataTableFooter = React.forwardRef(
               total: table.getPageCount()
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { children: table.getRowCount() > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { ...addon({ position: "end" }), children: table.getRowCount() > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             pagination.pageIndex * pagination.pageSize + 1,
             " -",
             " ",
@@ -1830,7 +1838,7 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'zojbsi'});
+var picker = Skeleton.recipeRuntime({base:'iyw311'});
 
 function format(date) {
   return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).toISOString().split("T")[0];
@@ -1842,7 +1850,7 @@ function parse(str) {
 const isValidDate = (date) => date ? !isNaN(+date) : false;
 
 const DateInput = React.forwardRef(
-  ({ disabled, max, min, onChange, ...props }, outerRef) => {
+  ({ disabled, holiday, max, min, onChange, weekend, ...props }, outerRef) => {
     const [open, setOpen] = React.useState(false);
     const [value, setValue] = reactUseControllableState.useControllableState({
       defaultProp: props.defaultValue,
@@ -1900,6 +1908,7 @@ const DateInput = React.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               Calendar,
               {
+                holiday,
                 max: maxDate,
                 min: minDate,
                 onValueChange: (date) => {
@@ -1911,7 +1920,8 @@ const DateInput = React.forwardRef(
                   }
                   setOpen(false);
                 },
-                value: parse(value)
+                value: parse(value),
+                weekend
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1935,7 +1945,226 @@ const DateInput = React.forwardRef(
 );
 DateInput.displayName = "@optiaxiom/react/DateInput";
 
-var mark = Skeleton.recipeRuntime({base:'kdbr6h'});
+const [DatePickerContextProvider, useDatePickerContext] = reactContext.createContext("DatePicker");
+
+function DatePicker({
+  children,
+  defaultOpen,
+  defaultValue,
+  disabled,
+  onOpenChange,
+  onValueChange,
+  open: openProp,
+  value: valueProp,
+  ...props
+}) {
+  const [open, setOpen] = reactUseControllableState.useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const [value, setValue] = reactUseControllableState.useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    DatePickerContextProvider,
+    {
+      disabled,
+      setValue,
+      value,
+      children
+    }
+  ) });
+}
+DatePicker.displayName = "@optiaxiom/react/DatePicker";
+
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1u0lmee']});
+
+const DatePickerContent = React.forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    children,
+    holiday,
+    max,
+    min,
+    today,
+    weekend,
+    ...props
+  }, ref) => {
+    const { setValue, value } = useDatePickerContext("DatePickerContent");
+    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...panels$1(), children: [
+        addonBefore,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            holiday,
+            max,
+            min,
+            onValueChange: setValue,
+            today,
+            value,
+            weekend
+          }
+        ),
+        addonAfter
+      ] }),
+      children
+    ] });
+  }
+);
+DatePickerContent.displayName = "@optiaxiom/react/DatePickerContent";
+
+const DEFAULT_FORMATTER$1 = (date) => date.toLocaleDateString(void 0, {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+});
+const DatePickerTrigger = React.forwardRef(
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    children,
+    format = DEFAULT_FORMATTER$1,
+    placeholder = "Pick a date",
+    ...props
+  }, outerRef) => {
+    const { disabled, value } = useDatePickerContext("DatePickerTrigger");
+    const buttonRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
+    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.PopoverTrigger,
+      {
+        "aria-labelledby": labelId,
+        disabled,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
+        ref,
+        ...props,
+        children: children ?? (value ? format(value) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children: placeholder }))
+      }
+    );
+  }
+);
+DatePickerTrigger.displayName = "@optiaxiom/react/DatePickerTrigger";
+
+const [DateRangePickerContextProvider, useDateRangePickerContext] = reactContext.createContext("DateRangePicker");
+
+function DateRangePicker({
+  children,
+  defaultOpen,
+  defaultValue,
+  disabled,
+  onOpenChange,
+  onValueChange,
+  open: openProp,
+  value: valueProp,
+  ...props
+}) {
+  const [open, setOpen] = reactUseControllableState.useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const [value, setValue] = reactUseControllableState.useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    DateRangePickerContextProvider,
+    {
+      disabled,
+      setValue,
+      value,
+      children
+    }
+  ) });
+}
+DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
+
+var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_13xej1g']});
+
+const DateRangePickerContent = React.forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    children,
+    holiday,
+    max,
+    min,
+    today,
+    weekend,
+    ...props
+  }, ref) => {
+    const { setValue, value } = useDateRangePickerContext(
+      "DateRangePickerContent"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...panels(), children: [
+        addonBefore,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            holiday,
+            max,
+            min,
+            mode: "range",
+            onValueChange: setValue,
+            today,
+            value,
+            weekend
+          }
+        ),
+        addonAfter
+      ] }),
+      children
+    ] });
+  }
+);
+DateRangePickerContent.displayName = "@optiaxiom/react/DateRangePickerContent";
+
+const DEFAULT_FORMATTER = (date) => date.from && date.to ? date.from.toLocaleDateString(void 0, {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+}) + " - " + date.to.toLocaleDateString(void 0, {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+}) : null;
+const DateRangePickerTrigger = React.forwardRef(
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    children,
+    format = DEFAULT_FORMATTER,
+    placeholder = "Pick a date",
+    ...props
+  }, outerRef) => {
+    const { disabled, value } = useDateRangePickerContext(
+      "DateRangePickerTrigger"
+    );
+    const buttonRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
+    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.PopoverTrigger,
+      {
+        "aria-labelledby": labelId,
+        disabled,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
+        ref,
+        ...props,
+        children: children ?? (value ? format(value) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children: placeholder }))
+      }
+    );
+  }
+);
+DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
+
+var mark = Skeleton.recipeRuntime({base:'_1ld953i'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -1967,8 +2196,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'e5rg6a',variants:{empty:{false:{},true:'_1716gl2'}}});
-var input$1 = Skeleton.recipeRuntime({base:'_19h1lam'});
+var editor = Skeleton.recipeRuntime({base:'y59arp',variants:{empty:{false:{},true:'_6wlgvt'}}});
+var input$1 = Skeleton.recipeRuntime({base:'sk400a'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2070,74 +2299,7 @@ const Layout = React.forwardRef(
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-const NavGroup = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    const groupId = reactId.useId();
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.NavGroupContextProvider, { id: groupId, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Disclosure,
-      {
-        alignItems: "stretch",
-        "aria-labelledby": props["aria-label"] ? void 0 : groupId,
-        asChild: true,
-        defaultOpen: true,
-        display: "flex",
-        flexDirection: "column",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, children })
-      }
-    ) });
-  }
-);
-NavGroup.displayName = "@optiaxiom/react/NavGroup";
-
-const NavGroupContent = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.DisclosureContent,
-    {
-      asChild: true,
-      display: "flex",
-      flexDirection: "column",
-      gap: "4",
-      p: "0",
-      transitionType: "slidePop",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { ref, children })
-    }
-  );
-});
-NavGroupContent.displayName = "@optiaxiom/react/NavGroupContent";
-
-const NavGroupTrigger = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    const { id } = Skeleton.useNavGroupContext("NavGroupTrigger");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.DisclosureTrigger,
-      {
-        chevronPosition: "end",
-        color: "fg.tertiary",
-        fontSize: "sm",
-        h: "sm",
-        id,
-        mb: "4",
-        mt: "8",
-        p: "0",
-        px: "12",
-        ref,
-        w: "auto",
-        ...props,
-        children
-      }
-    );
-  }
-);
-NavGroupTrigger.displayName = "@optiaxiom/react/NavGroupTrigger";
-
-const NavSeparator = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Separator, { flex: "none", mx: "12", my: "8", ref, ...props })
-);
-NavSeparator.displayName = "@optiaxiom/react/NavSeparator";
-
-var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1ef8cbf'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'drpk6t'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
@@ -2304,7 +2466,7 @@ const SpotlightEmpty = React.forwardRef(
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1dv9upj']});
+var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1a41pq']});
 
 const SpotlightInput = React.forwardRef(
   ({ addonAfter, className, ...props }, ref) => {
@@ -2361,7 +2523,7 @@ const SpotlightLabel = React.forwardRef(
 );
 SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'t0wqqa']});
+var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_8hc6ru']});
 
 const SpotlightRadioItem = React.forwardRef(({ addonAfter, children, className, description, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SpotlightItem, { asChild: true, ref, ...item$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2458,7 +2620,7 @@ const CommandSubItem = React.forwardRef(
 );
 CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1xwzfwl',true:'_110q9ko'}}});
+var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_5b2be0',true:'_174sjq3'}}});
 
 const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2483,52 +2645,13 @@ const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...p
 SpotlightSubItem.displayName = "@optiaxiom/react/SpotlightSubItem";
 
 const DEFAULT_HOTKEY = "mod+K";
-const SpotlightTrigger = React.forwardRef(({ addonAfter, children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
+const SpotlightTrigger = React.forwardRef(({ children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
   const { open, setOpen } = useSpotlightContext("SpotlightTrigger");
   useHotkeys([[hotkey, () => setOpen(!open)]]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.DialogTrigger,
-    {
-      addonAfter,
-      icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
-      ref,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogTrigger, { icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children }) });
 });
 SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
 
-var nav = Skeleton.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',py:'16'},'iy6nx']});
-
-const SubNav = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Flex,
-      {
-        borderColor: "border.tertiary",
-        borderR: "1",
-        h: "full",
-        ref,
-        w: "fit",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Secondary", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.SidebarContextProvider,
-          {
-            expanded: true,
-            navId: "",
-            onExpandedChange: () => {
-            },
-            spacing: "12",
-            children
-          }
-        ) }) })
-      }
-    );
-  }
-);
-SubNav.displayName = "@optiaxiom/react/SubNav";
-
 const TableActions = React.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { ref, ...props });
@@ -2564,7 +2687,6 @@ exports.ComboboxRadioItem = ComboboxRadioItem;
 exports.ComboboxScrollArea = ComboboxScrollArea;
 exports.ComboboxSeparator = ComboboxSeparator;
 exports.ComboboxTrigger = ComboboxTrigger;
-exports.ComboboxValue = ComboboxValue;
 exports.ComboboxVirtualized = ComboboxVirtualized;
 exports.Command = Command;
 exports.CommandInput = CommandInput;
@@ -2574,13 +2696,15 @@ exports.DataTable = DataTable;
 exports.DataTableBody = DataTableBody;
 exports.DataTableFooter = DataTableFooter;
 exports.DateInput = DateInput;
+exports.DatePicker = DatePicker;
+exports.DatePickerContent = DatePickerContent;
+exports.DatePickerTrigger = DatePickerTrigger;
+exports.DateRangePicker = DateRangePicker;
+exports.DateRangePickerContent = DateRangePickerContent;
+exports.DateRangePickerTrigger = DateRangePickerTrigger;
 exports.Highlight = Highlight;
 exports.InlineInput = InlineInput;
 exports.Layout = Layout;
-exports.NavGroup = NavGroup;
-exports.NavGroupContent = NavGroupContent;
-exports.NavGroupTrigger = NavGroupTrigger;
-exports.NavSeparator = NavSeparator;
 exports.Pill = Pill;
 exports.PillGroup = PillGroup;
 exports.Select = Select;
@@ -2591,7 +2715,6 @@ exports.SelectLabel = SelectLabel;
 exports.SelectRadioItem = SelectRadioItem;
 exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
-exports.SelectValue = SelectValue;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
 exports.SpotlightEmpty = SpotlightEmpty;
@@ -2603,7 +2726,6 @@ exports.SpotlightScrollArea = SpotlightScrollArea;
 exports.SpotlightSub = SpotlightSub;
 exports.SpotlightSubItem = SpotlightSubItem;
 exports.SpotlightTrigger = SpotlightTrigger;
-exports.SubNav = SubNav;
 exports.Table = Table;
 exports.TableActions = TableActions;
 exports.TableBody = TableBody;