@optiaxiom/react 1.3.1 → 1.3.3

package/dist/esm/packages/react/src/clock/Clock.js

@@ -4,13 +4,20 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { Select } from '../select/Select.js';
-import { SelectContent } from '../select-content/SelectContent.js';
-import { SelectTrigger } from '../select-trigger/SelectTrigger.js';
+import { SelectContent } from '../select/SelectContent.js';
+import { SelectTrigger } from '../select/SelectTrigger.js';
 import { parse, range, format } from './utils.js';
 
 const Clock = forwardRef(
-  ({ defaultValue, onValueChange, step = "60", value: valueProp, ...props }, ref) => {
+  ({
+    defaultValue = "",
+    onValueChange,
+    step = "60",
+    value: valueProp,
+    ...props
+  }, ref) => {
     const [value, setValue] = useControllableState({
+      caller: "@optiaxiom/react/Clock",
       defaultProp: defaultValue,
       onChange: onValueChange,
       prop: valueProp

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-hQQx4Fln.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-CluXn8FS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_1uh3krl']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_13hxal0']});
 
 export { code };

package/dist/esm/packages/react/src/code/Code.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
+import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
 import { code } from './Code-css.js';
 
+const Slot = createSlot("@optiaxiom/react/Code");
 const Code = forwardRef(
   ({ asChild, children, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "code";

package/dist/esm/packages/react/src/command/Command.js

@@ -2,11 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useCombobox } from 'downshift';
-import { useEffect, useRef } from 'react';
-import { resolveItemProperty, CommandProvider } from '../command-context/CommandContext.js';
+import { useRef } from 'react';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
-import { useCommandItems } from '../use-command-items/useCommandItems.js';
-import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { resolveItemProperty, CommandProvider } from './CommandContext.js';
+import { useCommandItems } from './useCommandItems.js';
 
 function Command({
   children,
@@ -16,23 +15,22 @@ function Command({
   onHover,
   onInputValueChange,
   onSelect: onItemSelect,
+  open,
   options
 }) {
   const [inputValue, setInputValue] = useControllableState({
+    caller: "@optiaxiom/react/Command",
     defaultProp: "",
     onChange: onInputValueChange,
     prop: inputValueProp
   });
   const items = useCommandItems({ inputValue, options });
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    () => items.findIndex((item) => resolveItemProperty(item.selected))
+  const [highlightedIndex, setHighlightedIndex, placed] = usePortalPatch(
+    open,
+    () => items.findIndex(
+      (item) => !resolveItemProperty(item.disabledReason) && resolveItemProperty(item.selected) && !item.multi
+    )
   );
-  const setInputValueStable = useEffectEvent(setInputValue);
-  useEffect(() => {
-    if (placed) {
-      setInputValueStable("");
-    }
-  }, [placed, setInputValueStable]);
   const pauseInteractionRef = useRef({
     isInsideTriangle: null,
     timer: void 0
@@ -93,10 +91,8 @@ function Command({
       items,
       loading,
       pauseInteractionRef,
-      placed,
       setHighlightedIndex,
       setInputValue,
-      setPlaced,
       children
     }
   );

package/dist/esm/packages/react/src/{command-input → command}/CommandInput.js

@@ -1,15 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useCommandContext } from '../command-context/CommandContext.js';
+import { forwardRef, useEffect } from 'react';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { Input } from '../input/Input.js';
+import '../input/InputAddon.js';
+import '../input/InputControl.js';
+import '../input/InputRoot.js';
+import { useCommandContext } from './CommandContext.js';
 
 const CommandInput = forwardRef(
   ({ onKeyDown, size, ...props }, ref) => {
     const { downshift, highlightedItem, setInputValue } = useCommandContext(
       "@optiaxiom/react/CommandInput"
     );
+    const setInputValueStable = useEffectEvent(setInputValue);
+    useEffect(() => {
+      setInputValueStable("");
+    }, [setInputValueStable]);
     return /* @__PURE__ */ jsx(
       Input,
       {

package/dist/esm/packages/react/src/{command-item → command}/CommandItem.js

@@ -4,12 +4,12 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useCommandContext, resolveItemProperty } from '../command-context/CommandContext.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import '../utils/isHoverSupported.js';
+import { useCommandContext, resolveItemProperty } from './CommandContext.js';
 
 const CommandItem = forwardRef(
   ({ asChild, children, item, selected, size, ...props }, ref) => {

package/dist/esm/packages/react/src/command/CommandListbox.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import '../listbox/Listbox.js';
+import '../listbox/ListboxCheckboxItem.js';
+import '../listbox/ListboxEmpty.js';
+import '../listbox/ListboxFooter.js';
+import '../listbox/ListboxGroup.js';
+import '../listbox/ListboxItem.js';
+import '../listbox/ListboxItemIndicator.js';
+import { ListboxItemized } from '../listbox/ListboxItemized.js';
+import '../listbox/ListboxLabel.js';
+import '../listbox/ListboxRadioItem.js';
+import '../listbox/ListboxSeparator.js';
+import '../listbox/ListboxSwitchItem.js';
+import '../listbox/ListboxVirtualized.js';
+import { useCommandContext, resolveItemProperty } from './CommandContext.js';
+
+const CommandListbox = forwardRef(
+  ({ children, size, ...props }, ref) => {
+    const { downshift, highlightedItem, inputValue, items } = useCommandContext(
+      "@optiaxiom/react/CommandListbox"
+    );
+    const [placed, setPlaced] = useState(false);
+    return /* @__PURE__ */ jsx(
+      ListboxItemized,
+      {
+        highlightedItem,
+        items,
+        itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
+        onPlacedChange: setPlaced,
+        placed,
+        size,
+        ...downshift.getMenuProps({ ref, ...props }),
+        children
+      }
+    );
+  }
+);
+CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
+
+export { CommandListbox };

package/dist/esm/packages/react/src/{use-command-items → command}/useCommandItems.js

@@ -1,6 +1,10 @@
 import { useMemo } from 'react';
-import { resolveItemProperty } from '../command-context/CommandContext.js';
-import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import 'react/jsx-runtime';
+import '../utils/isHoverSupported.js';
+import { resolveItemProperty } from './CommandContext.js';
 import { fuzzysearch } from './fuzzysearch.js';
 
 const useCommandItems = ({

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-CFXkX2QS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-l3bRDSQn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['pto8cg','_1svo1ab'],true:{}},inset:{false:'_401jb6',true:'_18zvqg5'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['_1p0lo0','t1kr1w'],true:{}},inset:{false:'_1p6uldc',true:'_1azwnya'}}});
 
 export { cover };

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { DataTableProvider } from '../data-table-context/DataTableContext.js';
 import { Flex } from '../flex/Flex.js';
+import { DataTableProvider } from './DataTableContext.js';
 
 const DataTable = forwardRef(
   ({ children, table, ...props }, ref) => {

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

@@ -0,0 +1,14 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-Cej-0j8c.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-BLMDpMYk.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1hhhe1d'],variants:{pinned:{left:'p9mm24',right:'_1vqvdtj'},pinnedType:{body:'_3nxwar',header:{}}}});
+var cellOffsetVar = 'var(--_1werpep)';
+var cellSizeVar = 'var(--_52cn80)';
+var header = recipeRuntime({base:[{display:'grid'},'okd5gf']});
+var leftTotalSizeVar = 'var(--mickdd)';
+var rightTotalSizeVar = 'var(--_1m1726f)';
+var table = recipeRuntime({base:'o0sxdt',variants:{pinned:{both:'_19joz6c',left:'_185g4wt',none:{},right:'_1ry5vr9'}}});
+
+export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

package/dist/esm/packages/react/src/{data-table-body → data-table}/DataTableBody.js

@@ -5,16 +5,17 @@ import { flexRender } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef, useRef } from 'react';
-import { useDataTableContext } from '../data-table-context/DataTableContext.js';
-import { DataTableHeaderCell } from '../data-table-header-cell/DataTableHeaderCell.js';
 import { Skeleton } from '../skeleton/Skeleton.js';
 import { Table } from '../table/Table.js';
-import { TableBody } from '../table-body/TableBody.js';
-import { TableCell } from '../table-cell/TableCell.js';
-import { TableHeader } from '../table-header/TableHeader.js';
-import { TableHeaderCell } from '../table-header-cell/TableHeaderCell.js';
-import { TableRow } from '../table-row/TableRow.js';
+import '../table/TableAction.js';
+import { TableBody } from '../table/TableBody.js';
+import { TableCell } from '../table/TableCell.js';
+import { TableHeader } from '../table/TableHeader.js';
+import { TableHeaderCell } from '../table/TableHeaderCell.js';
+import { TableRow } from '../table/TableRow.js';
 import { table, header, cell, cellSizeVar, cellOffsetVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
+import { useDataTableContext } from './DataTableContext.js';
+import { DataTableHeaderCell } from './DataTableHeaderCell.js';
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-ByVCphpT.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var addon = recipeRuntime({base:'_1rmni24',variants:{position:{end:{textAlign:'end'},start:{}}}});
+
+export { addon };

package/dist/esm/packages/react/src/{data-table-footer → data-table}/DataTableFooter.js

@@ -5,13 +5,13 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useDataTableContext } from '../data-table-context/DataTableContext.js';
 import { Flex } from '../flex/Flex.js';
 import { Pagination } from '../pagination/Pagination.js';
 import { Select } from '../select/Select.js';
-import { SelectContent } from '../select-content/SelectContent.js';
-import { SelectTrigger } from '../select-trigger/SelectTrigger.js';
+import { SelectContent } from '../select/SelectContent.js';
+import { SelectTrigger } from '../select/SelectTrigger.js';
 import { Text } from '../text/Text.js';
+import { useDataTableContext } from './DataTableContext.js';
 import { addon } from './DataTableFooter-css.js';
 
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DK2BQHue.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_23doc3']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_9ivp1w'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1ag9scj'],variants:{active:{false:'xq9s52',true:'_1bwixve'}}});
+
+export { button, handle, icon };

package/dist/esm/packages/react/src/{data-table-header-cell → data-table}/DataTableHeaderCell.js

@@ -1,16 +1,22 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef } from 'react';
-import { ActionsContent } from '../actions-content/ActionsContent.js';
-import { ActionsRoot } from '../actions-root/ActionsRoot.js';
+import { ActionsContent } from '../actions/ActionsContent.js';
+import { ActionsRoot } from '../actions/ActionsRoot.js';
 import { Cover } from '../cover/Cover.js';
 import { Icon } from '../icon/Icon.js';
 import { IconSort } from '../icons/IconSort.js';
 import { IconSortDown } from '../icons/IconSortDown.js';
 import { IconSortUp } from '../icons/IconSortUp.js';
 import { Separator } from '../separator/Separator.js';
-import { TableHeaderCell } from '../table-header-cell/TableHeaderCell.js';
+import '../table/Table.js';
+import '../table/TableAction.js';
+import '../table/TableBody.js';
+import '../table/TableCell.js';
+import '../table/TableHeader.js';
+import { TableHeaderCell } from '../table/TableHeaderCell.js';
+import '../table/TableRow.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { handle, button, icon } from './DataTableHeaderCell-css.js';
 
 const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) => {

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BaJS33T7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-C7ZsmRf9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({base:'_4cn5iy'});
+var picker = recipeRuntime({base:'_13hrj79'});
 
 export { picker };

package/dist/esm/packages/react/src/date-input/DateInput.js

@@ -4,20 +4,24 @@ import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef, useState, useRef } from 'react';
 import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
 import { Calendar } from '../calendar/Calendar.js';
 import { Flex } from '../flex/Flex.js';
-import { IconCalendar } from '../icons/IconCalendar.js';
-import { Input } from '../input/Input.js';
-import { Popover } from '../popover/Popover.js';
-import { PopoverAnchor } from '../popover-anchor/PopoverAnchor.js';
-import { PopoverContent } from '../popover-content/PopoverContent.js';
-import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
-import { useObserveValue } from '../use-observe-value/useObserveValue.js';
+import '../field/FieldContext.js';
+import { useObserveValue } from '../hooks/useObserveValue.js';
 import '../utils/conditions.js';
-import '@radix-ui/react-slot';
 import '../utils/isHoverSupported.js';
 import { toPlainDate } from '../utils/toPlainDate.js';
 import { toPlainDateTime } from '../utils/toPlainDateTime.js';
+import { IconCalendar } from '../icons/IconCalendar.js';
+import { Input } from '../input/Input.js';
+import '../input/InputAddon.js';
+import '../input/InputControl.js';
+import '../input/InputRoot.js';
+import { Popover } from '../popover/Popover.js';
+import { PopoverAnchor } from '../popover/PopoverAnchor.js';
+import { PopoverContent } from '../popover/PopoverContent.js';
+import { PopoverTrigger } from '../popover/PopoverTrigger.js';
 import { picker } from './DateInput-css.js';
 import { toInstant } from './utils.js';
 
@@ -39,13 +43,14 @@ const DateInput = forwardRef(
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const [value, setValue] = useControllableState({
+      caller: "@optiaxiom/react/DateInput",
       defaultProp: props.defaultValue,
       prop: props.value
     });
     const forceValueChange = useObserveValue(innerRef, setValue);
-    const instant = typeof value === "string" ? toInstant(value.includes("T") ? value : value + "T00:00") : void 0;
-    const maxDate = max ? new Date(max) : void 0;
-    const minDate = min ? new Date(min) : void 0;
+    const instant = typeof value === "string" ? toInstant(value) ?? null : null;
+    const maxDate = max ? toInstant(max) : void 0;
+    const minDate = min ? toInstant(min) : void 0;
     return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
       /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsx(
         Input,
@@ -70,7 +75,9 @@ const DateInput = forwardRef(
             setValue(event.target.value);
           },
           onClick: (e) => {
-            e.preventDefault();
+            if (CSS.supports("selector(::-webkit-datetime-edit)")) {
+              e.preventDefault();
+            }
           },
           onKeyDown: (e) => {
             if (e.key === " " && CSS.supports("selector(::-webkit-datetime-edit)")) {
@@ -125,8 +132,8 @@ const DateInput = forwardRef(
                 weekend
               }
             ),
-            /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", children: [
-              /* @__PURE__ */ jsx(
+            (!props.required || type === "datetime-local") && /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", children: [
+              !props.required && /* @__PURE__ */ jsx(
                 Button,
                 {
                   onClick: () => {

package/dist/esm/packages/react/src/date-input/utils.js

@@ -1,5 +1,5 @@
 function toInstant(str) {
-  const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
+  const rawDate = str && typeof str === "string" ? new Date(str.includes("T") ? str : str + "T00:00") : void 0;
   return isValidDate(rawDate) ? rawDate : void 0;
 }
 const isValidDate = (date) => date ? !isNaN(+date) : false;

package/dist/esm/packages/react/src/date-picker/DatePicker.js

@@ -1,13 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { DatePickerProvider } from '../date-picker-context/DatePickerContext.js';
 import { Popover } from '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
+import { DatePickerProvider } from './DatePickerContext.js';
 
 function DatePicker({
   children,
-  defaultOpen,
-  defaultValue,
+  defaultOpen = false,
+  defaultValue = null,
   disabled,
   onOpenChange,
   onValueChange,
@@ -18,11 +21,13 @@ function DatePicker({
   ...props
 }) {
   const [open, setOpen] = useControllableState({
+    caller: "@optiaxiom/react/DatePicker",
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
   const [value, setValue] = useControllableState({
+    caller: "@optiaxiom/react/DatePicker",
     defaultProp: defaultValue,
     onChange: onValueChange,
     prop: valueProp
@@ -31,6 +36,7 @@ function DatePicker({
     DatePickerProvider,
     {
       disabled,
+      setOpen,
       setValue,
       step,
       type,

package/dist/esm/packages/react/src/date-picker/DatePickerContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/date-picker/DatePickerContent.css.ts.vanilla-DtRKdrg_.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1kd0p0i']});
+
+export { panels };

package/dist/esm/packages/react/src/{date-picker-content → date-picker}/DatePickerContent.js

@@ -2,10 +2,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { Calendar } from '../calendar/Calendar.js';
-import { useDatePickerContext } from '../date-picker-context/DatePickerContext.js';
 import { Flex } from '../flex/Flex.js';
-import { PopoverContent } from '../popover-content/PopoverContent.js';
+import '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import { PopoverContent } from '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
 import { panels } from './DatePickerContent-css.js';
+import { useDatePickerContext } from './DatePickerContext.js';
 
 const DatePickerContent = forwardRef(
   ({
@@ -19,7 +22,7 @@ const DatePickerContent = forwardRef(
     weekend,
     ...props
   }, ref) => {
-    const { setValue, step, type, value } = useDatePickerContext(
+    const { setOpen, setValue, step, type, value } = useDatePickerContext(
       "@optiaxiom/react/DatePickerContent"
     );
     const panelRef = useRef(null);
@@ -38,7 +41,12 @@ const DatePickerContent = forwardRef(
                 panelRef.current.style.height = `${height}px`;
               }
             },
-            onValueChange: setValue,
+            onValueChange: (date) => {
+              setValue(date);
+              if (type === "date") {
+                setOpen(false);
+              }
+            },
             step,
             today,
             type,

package/dist/esm/packages/react/src/{date-picker-trigger → date-picker}/DatePickerTrigger.js

@@ -5,10 +5,15 @@ import { forwardRef, useRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useDatePickerContext } from '../date-picker-context/DatePickerContext.js';
+import { useFieldLabelTrigger } from '../hooks/useFieldLabelTrigger.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
 import { IconCalendar } from '../icons/IconCalendar.js';
-import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
-import { useFieldLabelTrigger } from '../use-field-label-trigger/useFieldLabelTrigger.js';
+import '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import { PopoverTrigger } from '../popover/PopoverTrigger.js';
+import { useDatePickerContext } from './DatePickerContext.js';
 
 const dateFormatter = new Intl.DateTimeFormat(void 0, {
   day: "numeric",

package/dist/esm/packages/react/src/date-range-picker/DateRangePicker.js

@@ -1,13 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { DateRangePickerProvider } from '../date-range-picker-context/DateRangePickerContext.js';
 import { Popover } from '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
+import { DateRangePickerProvider } from './DateRangePickerContext.js';
 
 function DateRangePicker({
   children,
-  defaultOpen,
-  defaultValue,
+  defaultOpen = false,
+  defaultValue = null,
   disabled,
   onOpenChange,
   onValueChange,
@@ -16,11 +19,13 @@ function DateRangePicker({
   ...props
 }) {
   const [open, setOpen] = useControllableState({
+    caller: "@optiaxiom/react/DateRangePicker",
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
   const [value, setValue] = useControllableState({
+    caller: "@optiaxiom/react/DateRangePicker",
     defaultProp: defaultValue,
     onChange: onValueChange,
     prop: valueProp

package/dist/esm/packages/react/src/{date-range-picker-content → date-range-picker}/DateRangePickerContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});