@justanarthur/modo-ui 0.2.0 → 0.4.0

package/dist/shared/{components-ytb2tefr.js → components-hyq23phv.js}

@@ -4,6 +4,10 @@ import {
 import {
   FluidHoverHighlight2
 } from "./components-kvr7f9hy.js";
+import {
+  IndexedRows,
+  useRowIndex
+} from "./components-ta7shw28.js";
 import {
   useShape
 } from "./components-cv16mryv.js";
@@ -29,7 +33,7 @@ import {
   spring2
 } from "./components-1v7rxytx.js";
 
-// components/inputs/checkbox-group/index.tsx
+// components/inputs/checkbox/index.tsx
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { AnimatePresence, motion } from "motion/react";
 import {
@@ -43,12 +47,6 @@ import {
 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext(null);
-function useCheckboxGroup() {
-  const ctx = useContext(CheckboxGroupContext);
-  if (!ctx)
-    throw new Error("useCheckboxGroup must be used within a CheckboxGroup");
-  return ctx;
-}
 var CheckboxGroup2 = forwardRef(({
   children,
   checkedIndices: checkedIndicesProp,
@@ -152,7 +150,9 @@ var CheckboxGroup2 = forwardRef(({
             }
           })
         }),
-        children
+        /* @__PURE__ */ jsx(IndexedRows, {
+          children
+        })
       ]
     })
   });
@@ -162,23 +162,37 @@ var CheckboxGroup2 = forwardRef(({
   }) : group;
 });
 CheckboxGroup2.displayName = "CheckboxGroup";
-var CheckboxItem2 = forwardRef(({ label, index, checked: checkedProp, onToggle: onToggleProp, className, ...props }, ref) => {
+var Checkbox2 = forwardRef(({
+  label,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  onToggle: onToggleProp,
+  index: indexProp,
+  size,
+  className,
+  ...props
+}, ref) => {
   const internalRef = useRef(null);
   const hasMounted = useRef(false);
-  const { registerItem, activeIndex, checkedIndices, setItemChecked } = useCheckboxGroup();
-  const checked = checkedProp ?? checkedIndices.has(index);
+  const group = useContext(CheckboxGroupContext);
+  const index = useRowIndex(indexProp);
+  const [ownChecked, setOwnChecked] = useControllableState(checkedProp, defaultChecked, onCheckedChange);
+  const [hovered, setHovered] = useState(false);
+  const checked = checkedProp ?? (group ? group.checkedIndices.has(index) : ownChecked);
   const onToggle = () => {
     onToggleProp?.();
-    setItemChecked(index, !checked);
+    group?.setItemChecked(index, !checked);
+    setOwnChecked(!checked);
   };
-  useRegisterFluidHoverItem2(registerItem, index, internalRef);
+  useRegisterFluidHoverItem2(group?.registerItem, index, internalRef);
   useEffect(() => {
     hasMounted.current = true;
   }, []);
-  const isActive = activeIndex === index;
+  const isActive = group ? group.activeIndex === index : hovered;
   const skipAnimation = !hasMounted.current;
   const shape = useShape();
-  const sizeClasses = useSize2();
+  const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsxs("div", {
     ref: (node) => {
@@ -194,6 +208,11 @@ var CheckboxItem2 = forwardRef(({ label, index, checked: checkedProp, onToggle:
     "aria-checked": checked,
     "aria-label": label,
     onClick: onToggle,
+    onPointerEnter: (e) => {
+      if (e.pointerType === "mouse")
+        setHovered(true);
+    },
+    onPointerLeave: () => setHovered(false),
     onMouseDown: (e) => {
       const interactive = e.target.closest('button:not([tabindex="-1"]), a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
       if (interactive && interactive !== e.currentTarget)
@@ -207,7 +226,7 @@ var CheckboxItem2 = forwardRef(({ label, index, checked: checkedProp, onToggle:
         onToggle();
       }
     },
-    className: cn2(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, className),
+    className: cn2(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, !group && "focus-visible:ring-1 focus-visible:ring-focus-ring", className),
     ...props,
     children: [
       /* @__PURE__ */ jsxs(CheckboxPrimitive.Root, {
@@ -284,8 +303,8 @@ var CheckboxItem2 = forwardRef(({ label, index, checked: checkedProp, onToggle:
     ]
   });
 });
-CheckboxItem2.displayName = "CheckboxItem";
-Object.assign(CheckboxGroup2, { Item: CheckboxItem2 });
-var checkbox_group_default = CheckboxGroup2;
+Checkbox2.displayName = "Checkbox";
+Object.assign(Checkbox2, { Group: CheckboxGroup2 });
+var checkbox_default = Checkbox2;
 
-export { CheckboxGroup2, CheckboxItem2, checkbox_group_default };
+export { CheckboxGroup2, Checkbox2, checkbox_default };

package/dist/shared/{components-q4daerx0.js → components-mjthm1kf.js}

@@ -1,7 +1,7 @@
 import {
   fieldLabel,
   ScrollColumn
-} from "./components-9jvzzvt1.js";
+} from "./components-gz8zf3ec.js";
 import {
   cn2
 } from "./components-ezxhrmer.js";

package/dist/shared/{components-ca2c898n.js → components-mqyvvh8k.js}

@@ -30,7 +30,7 @@ import {
 } from "./components-rr7a6ja9.js";
 import {
   fieldVariants
-} from "./components-mhd39z7x.js";
+} from "./components-3myrw7ne.js";
 import {
   useIsMobile
 } from "./components-c6s6b43g.js";

package/dist/shared/{components-4cnjmgex.js → components-nsjec21k.js}

@@ -4,7 +4,7 @@ import {
   fieldLabel,
   dividedColumns,
   ScrollColumn
-} from "./components-9jvzzvt1.js";
+} from "./components-gz8zf3ec.js";
 import {
   cn2
 } from "./components-ezxhrmer.js";
@@ -14,7 +14,7 @@ import {
 import {
   PickerShell,
   PickerInput
-} from "./components-7btqt08d.js";
+} from "./components-qtqxgfrb.js";
 
 // components/inputs/date-time/month-picker/index.tsx
 import { addYears, endOfYear, format, startOfMonth, startOfYear } from "date-fns";
@@ -29,6 +29,7 @@ function MonthPicker2({
   startMonth,
   endMonth,
   disabled,
+  variant,
   invalid,
   size,
   open: openProp,
@@ -74,6 +75,7 @@ function MonthPicker2({
     open,
     onOpenChange: setOpen,
     size,
+    variant,
     invalid,
     disabled,
     icon: "calendar",

package/dist/shared/{components-7ans7ce5.js → components-nyq0rym2.js}

@@ -3,7 +3,7 @@ import {
   fieldLabel,
   dividedColumns,
   ScrollColumn
-} from "./components-9jvzzvt1.js";
+} from "./components-gz8zf3ec.js";
 import {
   cn2
 } from "./components-ezxhrmer.js";
@@ -13,10 +13,10 @@ import {
 import {
   PickerShell,
   PickerInput
-} from "./components-7btqt08d.js";
+} from "./components-qtqxgfrb.js";
 import {
   pad
-} from "./components-q4daerx0.js";
+} from "./components-mjthm1kf.js";
 
 // components/inputs/date-time/duration-picker/index.tsx
 import { formatDuration } from "date-fns";
@@ -32,6 +32,7 @@ function DurationPicker2({
   locale = defaultLocale,
   placeholder,
   disabled,
+  variant,
   invalid,
   size,
   open: openProp,
@@ -72,6 +73,7 @@ function DurationPicker2({
     open,
     onOpenChange: setOpen,
     size,
+    variant,
     invalid,
     disabled,
     icon: "clock",

package/dist/shared/{components-ny774h8p.js → components-pbmqctfa.js}

@@ -7,6 +7,10 @@ import {
 import {
   FluidHoverHighlight2
 } from "./components-kvr7f9hy.js";
+import {
+  IndexedRows,
+  useRowIndex
+} from "./components-ta7shw28.js";
 import {
   useShape
 } from "./components-cv16mryv.js";
@@ -27,7 +31,7 @@ import {
   spring2
 } from "./components-1v7rxytx.js";
 
-// components/inputs/radio-group/index.tsx
+// components/inputs/radio/index.tsx
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { AnimatePresence, motion } from "motion/react";
@@ -46,7 +50,7 @@ var RadioGroupContext = createContext(null);
 function useRadioGroupContext() {
   const ctx = useContext(RadioGroupContext);
   if (!ctx)
-    throw new Error("useRadioGroup must be used within a RadioGroup");
+    throw new Error("Radio must be used within a Radio.Group");
   return ctx;
 }
 var RadioGroup2 = forwardRef(({
@@ -152,7 +156,9 @@ var RadioGroup2 = forwardRef(({
           }
         })
       }),
-      children
+      /* @__PURE__ */ jsx(IndexedRows, {
+        children
+      })
     ]
   });
   const withSize = (node) => size ? /* @__PURE__ */ jsx(SizeProvider2, {
@@ -189,10 +195,11 @@ var RadioGroup2 = forwardRef(({
   }));
 });
 RadioGroup2.displayName = "RadioGroup";
-var RadioItem2 = forwardRef(({ label, index, selected, onSelect, value, className, ...props }, ref) => {
+var Radio2 = forwardRef(({ label, index: indexProp, selected, onSelect, value, className, ...props }, ref) => {
   const internalRef = useRef(null);
   const hasMounted = useRef(false);
   const { registerItem, activeIndex, selectedIndex, selectedValue, onValueChange, hasSelection, selectIndex } = useRadioGroupContext();
+  const index = useRowIndex(indexProp);
   useRegisterFluidHoverItem2(registerItem, index, internalRef);
   useEffect(() => {
     hasMounted.current = true;
@@ -286,8 +293,8 @@ var RadioItem2 = forwardRef(({ label, index, selected, onSelect, value, classNam
     ]
   });
 });
-RadioItem2.displayName = "RadioItem";
-Object.assign(RadioGroup2, { Item: RadioItem2 });
-var radio_group_default = RadioGroup2;
+Radio2.displayName = "Radio";
+Object.assign(Radio2, { Group: RadioGroup2 });
+var radio_default = Radio2;
 
-export { RadioGroup2, RadioItem2, radio_group_default };
+export { RadioGroup2, Radio2, radio_default };

package/dist/shared/{components-7btqt08d.js → components-qtqxgfrb.js}

@@ -1,7 +1,16 @@
 import {
-  fieldVariants,
-  fieldIconClasses
-} from "./components-mhd39z7x.js";
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  fieldIconClasses,
+  useFieldBox
+} from "./components-3myrw7ne.js";
 import {
   useIcon
 } from "./components-zrkzcayz.js";
@@ -14,15 +23,6 @@ import {
   useMorphOrigin,
   useMorph
 } from "./components-hqeq3w9q.js";
-import {
-  cn2
-} from "./components-ezxhrmer.js";
-import {
-  useShape
-} from "./components-cv16mryv.js";
-import {
-  useSize2
-} from "./components-0sn7ypjw.js";
 import {
   SURFACE_BG,
   SURFACE_SHADOW,
@@ -46,7 +46,7 @@ import {
 } from "./components-rr7a6ja9.js";
 import {
   input_default
-} from "./components-gvr9w41t.js";
+} from "./components-50m950y9.js";
 
 // components/inputs/date-time/picker-shell.tsx
 import { Popover } from "@base-ui/react/popover";
@@ -69,21 +69,18 @@ function PickerShell({ open: openProp, defaultOpen = false, onOpenChange, size,
     children: shell
   }) : shell;
 }
-var PickerField = forwardRef(({ icon, display, placeholder, invalid, disabled, id, className, ...props }, ref) => {
+var PickerField = forwardRef(({ icon, display, placeholder, variant = "bordered", invalid, disabled, id, className, ...props }, ref) => {
   const Icon = useIcon(icon);
-  const shape = useShape();
-  const sizeClasses = useSize2();
-  const compact = sizeClasses.variant === "compact";
+  const { size: sizeClasses, props: boxProps } = useFieldBox({ variant, invalid, disabled });
   return /* @__PURE__ */ jsxs("button", {
     ref,
     type: "button",
     id,
     disabled,
     "aria-invalid": invalid || undefined,
-    "data-invalid": invalid || undefined,
-    "data-disabled": disabled || undefined,
+    ...boxProps,
     ...props,
-    className: cn2(fieldVariants({ variant: "bordered" }), "flex w-full min-w-0 items-center text-left cursor-pointer outline-none focus-visible:ring-focus-ring", sizeClasses.gap, sizeClasses.control, compact ? "px-2" : "px-2.5", shape.input, className),
+    className: cn2(boxProps.className, "flex w-full min-w-0 items-center text-left cursor-pointer outline-none focus-visible:ring-focus-ring", sizeClasses.gap, sizeClasses.control, className),
     children: [
       /* @__PURE__ */ jsx(Icon, {
         size: sizeClasses.icon,

package/dist/shared/components-rd9tbsqv.js

@@ -0,0 +1,89 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useFieldBox,
+  focusControlOnPress
+} from "./components-3myrw7ne.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+
+// components/inputs/textarea/index.tsx
+import { Field } from "@base-ui/react/field";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var PADDING_Y = {
+  default: "py-2",
+  compact: "py-1"
+};
+var Textarea2 = forwardRef(({
+  value: valueProp,
+  defaultValue = "",
+  onChange: onChangeProp,
+  minRows = 3,
+  maxRows = 8,
+  variant = "borderless",
+  invalid,
+  disabled,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [value, onChange] = useControllableState(valueProp, defaultValue, onChangeProp);
+  const textareaRef = useRef(null);
+  const box = useFieldBox({ variant, invalid, disabled, size });
+  const resize = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el)
+      return;
+    el.style.height = "auto";
+    const lineHeight = Number.parseFloat(getComputedStyle(el).lineHeight);
+    const max = lineHeight * Math.max(maxRows, minRows);
+    el.style.height = `${Math.min(Math.max(el.scrollHeight, lineHeight * minRows), max)}px`;
+    el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden";
+  }, [minRows, maxRows]);
+  useLayoutEffect(resize, [resize, value, box.size.variant]);
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el)
+      return;
+    let lastWidth = el.offsetWidth;
+    const observer = new ResizeObserver(() => {
+      if (el.offsetWidth === lastWidth)
+        return;
+      lastWidth = el.offsetWidth;
+      resize();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [resize]);
+  return /* @__PURE__ */ jsx("div", {
+    onMouseDown: focusControlOnPress(textareaRef),
+    ...box.props,
+    className: cn2(box.props.className, "flex", PADDING_Y[box.size.variant], className),
+    children: /* @__PURE__ */ jsx(Field.Control, {
+      ref: (node) => {
+        const textarea = node;
+        textareaRef.current = textarea;
+        if (typeof ref === "function")
+          ref(textarea);
+        else if (ref)
+          ref.current = textarea;
+      },
+      render: /* @__PURE__ */ jsx("textarea", {
+        rows: minRows,
+        ...props
+      }),
+      value,
+      onChange: (e) => onChange(e.target.value),
+      disabled,
+      "aria-invalid": invalid || undefined,
+      className: cn2("block w-full resize-none rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", box.size.text, "weight-normal")
+    })
+  });
+});
+Textarea2.displayName = "Textarea";
+var textarea_default = Textarea2;
+
+export { Textarea2, textarea_default };

package/dist/shared/{components-1j9791sn.js → components-s083f38z.js}

@@ -26,7 +26,7 @@ import {
   spring2
 } from "./components-1v7rxytx.js";
 
-// components/inputs/input-copy/index.tsx
+// components/copy/index.tsx
 import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
 import {
   forwardRef,
@@ -176,7 +176,7 @@ function CopyGlyph({
     ]
   });
 }
-var InputCopy2 = forwardRef(({ value, label, onCopy, disabled, variant = "icon", align = "right", size, className, ...props }, ref) => {
+var Copy2 = forwardRef(({ value, label, onCopy, disabled, variant = "icon", align = "right", size, className, ...props }, ref) => {
   const CopyIcon = useIcon("copy");
   const [status, setStatus] = useState("idle");
   const [copyCount, setCopyCount] = useState(0);
@@ -339,7 +339,7 @@ var InputCopy2 = forwardRef(({ value, label, onCopy, disabled, variant = "icon",
     ]
   });
 });
-InputCopy2.displayName = "InputCopy";
-var input_copy_default = InputCopy2;
+Copy2.displayName = "Copy";
+var copy_default = Copy2;
 
-export { InputCopy2, input_copy_default };
+export { Copy2, copy_default };

package/dist/shared/components-ta7shw28.js

@@ -0,0 +1,19 @@
+// lib/row-index.tsx
+import { Children, createContext, isValidElement, useContext } from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+var RowIndexContext = createContext(0);
+function IndexedRows({ children }) {
+  let index = 0;
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: Children.map(children, (child) => isValidElement(child) ? /* @__PURE__ */ jsx(RowIndexContext.Provider, {
+      value: index++,
+      children: child
+    }) : child)
+  });
+}
+function useRowIndex(own) {
+  const position = useContext(RowIndexContext);
+  return own ?? position;
+}
+
+export { IndexedRows, useRowIndex };

package/dist/shared/{components-3gae8nta.js → components-tcee5k0s.js}

@@ -1,16 +1,23 @@
 import {
-  fieldVariants,
-  fieldIconClasses
-} from "./components-mhd39z7x.js";
+  shapeMap,
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  fieldIconClasses,
+  useFieldBox
+} from "./components-3myrw7ne.js";
 import {
   opensInPlace,
   inPlaceOffset,
   useMorphOrigin,
   useMorph
 } from "./components-hqeq3w9q.js";
-import {
-  cn2
-} from "./components-ezxhrmer.js";
 import {
   FluidHoverHighlight2
 } from "./components-kvr7f9hy.js";
@@ -20,13 +27,6 @@ import {
 import {
   MorphSurface
 } from "./components-0q0sqfh4.js";
-import {
-  shapeMap,
-  useShape
-} from "./components-cv16mryv.js";
-import {
-  useSize2
-} from "./components-0sn7ypjw.js";
 import {
   SURFACE_BG,
   SURFACE_SHADOW,
@@ -279,9 +279,8 @@ function FieldControls({ clearable, compact, iconSize }) {
     ]
   });
 }
-var ComboboxInput2 = forwardRef(({ className, variant, icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref) => {
-  const shape = useShape();
-  const sizeClasses = useSize2(size);
+var ComboboxInput2 = forwardRef(({ className, variant = "bordered", icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref) => {
+  const { size: sizeClasses, props: boxProps } = useFieldBox({ variant, invalid: !!error, size });
   const compact = sizeClasses.variant === "compact";
   const { anchorRef } = useComboboxContext();
   return /* @__PURE__ */ jsxs("div", {
@@ -289,8 +288,8 @@ var ComboboxInput2 = forwardRef(({ className, variant, icon: Icon, placeholder =
     children: [
       /* @__PURE__ */ jsxs(ComboboxPrimitive.InputGroup, {
         ref: anchorRef,
-        "data-invalid": !!error || undefined,
-        className: cn2(fieldVariants({ variant: variant ?? "bordered" }), "flex items-center", sizeClasses.control, sizeClasses.gap, compact ? "px-2" : "px-2.5", compact ? "min-w-[128px]" : "min-w-[160px]", shape.input, className),
+        ...boxProps,
+        className: cn2(boxProps.className, "flex items-center", sizeClasses.control, sizeClasses.gap, compact ? "min-w-[128px]" : "min-w-[160px]", className),
         children: [
           Icon && /* @__PURE__ */ jsx(Icon, {
             size: sizeClasses.icon,
@@ -345,12 +344,12 @@ function useChipRowHeight(padY) {
   }, [height]);
   return { ref, height };
 }
-var ComboboxChips2 = forwardRef(({ className, variant, icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref) => {
+var ComboboxChips2 = forwardRef(({ className, variant = "bordered", icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref) => {
   const XIcon = useIcon("x");
   const shape = useShape();
-  const sizeClasses = useSize2(size);
-  const compact = sizeClasses.variant === "compact";
   const { anchorRef, open, disabled, inputValue, values } = useComboboxContext();
+  const { size: sizeClasses, props: boxProps } = useFieldBox({ variant, invalid: !!error, disabled, size });
+  const compact = sizeClasses.variant === "compact";
   const rowHeight = useChipRowHeight(compact ? 8 : 12);
   return /* @__PURE__ */ jsxs("div", {
     className: "flex flex-col gap-1",
@@ -360,10 +359,9 @@ var ComboboxChips2 = forwardRef(({ className, variant, icon: Icon, placeholder =
         render: /* @__PURE__ */ jsx(motion.div, {
           style: { height: rowHeight.height }
         }),
-        "data-disabled": disabled || undefined,
-        "data-invalid": !!error || undefined,
+        ...boxProps,
         "data-popup-open": open || undefined,
-        className: cn2(fieldVariants({ variant: variant ?? "bordered" }), "flex items-center", "transition-[color,background-color,border-radius,box-shadow,opacity]", "!items-start", compact ? "min-h-7 py-1" : "min-h-9 py-1.5", sizeClasses.gap, compact ? "px-2" : "px-2.5", compact ? "min-w-[128px]" : "min-w-[160px]", shape.input, className),
+        className: cn2(boxProps.className, "flex items-center", "transition-[color,background-color,border-radius,box-shadow,opacity]", "!items-start", compact ? "min-h-7 py-1" : "min-h-9 py-1.5", sizeClasses.gap, compact ? "min-w-[128px]" : "min-w-[160px]", className),
         children: [
           Icon && /* @__PURE__ */ jsx("span", {
             className: cn2("flex shrink-0 items-center", compact ? "h-5" : "h-6"),

package/dist/shared/{components-ez65vtbq.js → components-wshd8f3n.js}

@@ -3,7 +3,7 @@ import {
   hourCycleOf,
   parseTimeText,
   dividedColumns
-} from "./components-9jvzzvt1.js";
+} from "./components-gz8zf3ec.js";
 import {
   cn2
 } from "./components-ezxhrmer.js";
@@ -13,11 +13,11 @@ import {
 import {
   PickerShell,
   PickerInput
-} from "./components-7btqt08d.js";
+} from "./components-qtqxgfrb.js";
 import {
   pad,
   TimeColumns
-} from "./components-q4daerx0.js";
+} from "./components-mjthm1kf.js";
 
 // components/inputs/date-time/time-picker/index.tsx
 import { format, set } from "date-fns";
@@ -37,6 +37,7 @@ function TimePicker2({
   locale = defaultLocale,
   placeholder,
   disabled,
+  variant,
   invalid,
   size,
   open: openProp,
@@ -69,6 +70,7 @@ function TimePicker2({
     open,
     onOpenChange: setOpen,
     size,
+    variant,
     invalid,
     disabled,
     icon: "clock",

package/dist/shared/{components-v7wtz8hk.js → components-wtbesgdp.js}

@@ -3,20 +3,20 @@ import {
   hourCycleOf,
   parseDateText,
   parseTimeText
-} from "./components-9jvzzvt1.js";
+} from "./components-gz8zf3ec.js";
 import {
   useControllableState
 } from "./components-n7mjr357.js";
 import {
   calendar_default
-} from "./components-1rfwbyyc.js";
+} from "./components-1z6tdadk.js";
 import {
   PickerShell,
   PickerInput
-} from "./components-7btqt08d.js";
+} from "./components-qtqxgfrb.js";
 import {
   TimeColumns
-} from "./components-q4daerx0.js";
+} from "./components-mjthm1kf.js";
 
 // components/inputs/date-time/date-picker/index.tsx
 import { endOfMonth, format, set } from "date-fns";
@@ -36,6 +36,7 @@ function DatePicker2({
   disabled,
   startMonth,
   endMonth,
+  variant,
   invalid,
   size,
   open: openProp,
@@ -99,6 +100,7 @@ function DatePicker2({
     open,
     onOpenChange: setOpen,
     size,
+    variant,
     invalid,
     disabled: off,
     icon: "calendar",

package/dist/shared/{components-66mv71kx.js → components-xxvdw7k1.js}

@@ -33,7 +33,7 @@ import {
   CommandListRoot2,
   CommandShortcut2,
   CommandList2
-} from "./components-8fpr3s4p.js";
+} from "./components-39vmfq9s.js";
 import {
   spring2
 } from "./components-1v7rxytx.js";