@justanarthur/modo-ui 0.3.0 → 0.4.0

package/dist/index.js

@@ -54,7 +54,7 @@ import {
 } from "./shared/components-rr7a6ja9.js";
 import {
   fieldVariants
-} from "./shared/components-mhd39z7x.js";
+} from "./shared/components-3myrw7ne.js";
 import"./shared/components-c6s6b43g.js";
 import {
   TooltipPortalContainer2,
@@ -98,7 +98,7 @@ import {
   SidebarMenuSubButton2,
   Sidebar2,
   SidebarContent2
-} from "./shared/components-nb87fjy4.js";
+} from "./shared/components-mqyvvh8k.js";
 import"./shared/components-chacnk61.js";
 import {
   FluidHoverHighlight2
@@ -129,7 +129,7 @@ import {
 } from "./shared/components-a86dytt0.js";
 import {
   SidebarApp2
-} from "./shared/components-2n3whx7z.js";
+} from "./shared/components-ye0ze0h8.js";
 import {
   FileThumbnail2,
   InputMessage2
@@ -193,7 +193,7 @@ import {
   ComboboxList2,
   ComboboxItem2,
   ComboboxEmpty2
-} from "./shared/components-8ey44d79.js";
+} from "./shared/components-tcee5k0s.js";
 import"./shared/components-gz8zf3ec.js";
 import {
   Calendar2
@@ -202,24 +202,24 @@ import {
   Input2,
   Label2,
   InputGroup2
-} from "./shared/components-gvr9w41t.js";
-import"./shared/components-7btqt08d.js";
+} from "./shared/components-50m950y9.js";
+import"./shared/components-qtqxgfrb.js";
 import"./shared/components-mjthm1kf.js";
 import {
   DatePicker2
-} from "./shared/components-2nhgyh31.js";
+} from "./shared/components-wtbesgdp.js";
 import {
   DateRangePicker2
-} from "./shared/components-k809mbn0.js";
+} from "./shared/components-zwhtxm15.js";
 import {
   DurationPicker2
-} from "./shared/components-re6rs21k.js";
+} from "./shared/components-nyq0rym2.js";
 import {
   MonthPicker2
-} from "./shared/components-3fbbvq5j.js";
+} from "./shared/components-nsjec21k.js";
 import {
   TimePicker2
-} from "./shared/components-bshdmf75.js";
+} from "./shared/components-wshd8f3n.js";
 import {
   RadioGroup2,
   Radio2
@@ -250,6 +250,9 @@ import {
   Switch2,
   SwitchGroup2
 } from "./shared/components-8snj490h.js";
+import {
+  Textarea2
+} from "./shared/components-rd9tbsqv.js";
 import {
   Tabs2,
   TabsList2,
@@ -478,6 +481,7 @@ export {
   TabsSubtle2 as TabsSubtle,
   TabsSubtleItem2 as TabsSubtleItem,
   TabsSubtlePanel2 as TabsSubtlePanel,
+  Textarea2 as Textarea,
   ThinkingIndicator2 as ThinkingIndicator,
   TimePicker2 as TimePicker,
   Toast2 as Toast,

package/dist/shared/{components-mhd39z7x.js → components-3myrw7ne.js}

@@ -1,3 +1,13 @@
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+
 // lib/field-classes.ts
 import { cva } from "class-variance-authority";
 var fieldVariants = cva([
@@ -18,5 +28,30 @@ var fieldVariants = cva([
   }
 });
 var fieldIconClasses = "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-hover/field:text-foreground group-hover/field:stroke-[2] group-data-[active]/field:text-foreground group-data-[active]/field:stroke-[2] group-focus-within/field:text-foreground group-focus-within/field:stroke-[2]";
+var FIELD_PX = {
+  default: "px-2.5",
+  compact: "px-2"
+};
+function useFieldBox({ variant, invalid, disabled, active, size }) {
+  const shape = useShape();
+  const sizeClasses = useSize2(size);
+  return {
+    size: sizeClasses,
+    props: {
+      "data-active": active || undefined,
+      "data-invalid": invalid || undefined,
+      "data-disabled": disabled || undefined,
+      className: cn2(fieldVariants({ variant }), shape.input, FIELD_PX[sizeClasses.variant])
+    }
+  };
+}
+function focusControlOnPress(control) {
+  return (e) => {
+    if (e.target === control.current)
+      return;
+    e.preventDefault();
+    control.current?.focus();
+  };
+}
 
-export { fieldVariants, fieldIconClasses };
+export { fieldVariants, fieldIconClasses, useFieldBox, focusControlOnPress };

package/dist/shared/{components-gvr9w41t.js → components-50m950y9.js}

@@ -1,13 +1,14 @@
-import {
-  fieldVariants,
-  fieldIconClasses
-} from "./components-mhd39z7x.js";
-import {
-  useShape
-} from "./components-cv16mryv.js";
 import {
   useSize2
 } from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  fieldIconClasses,
+  useFieldBox,
+  focusControlOnPress
+} from "./components-3myrw7ne.js";
 import {
   useControllableState
 } from "./components-n7mjr357.js";
@@ -15,9 +16,6 @@ import {
   useFluidHover2,
   useRegisterFluidHoverItem2
 } from "./components-59efxjd9.js";
-import {
-  cn2
-} from "./components-ezxhrmer.js";
 import {
   SizeProvider2
 } from "./components-jjw69c4c.js";
@@ -45,6 +43,7 @@ var Input2 = forwardRef(({
   value: valueProp,
   defaultValue = "",
   onChange: onChangeProp,
+  variant = "borderless",
   invalid,
   disabled,
   size,
@@ -54,20 +53,17 @@ var Input2 = forwardRef(({
   const [value, onChange] = useControllableState(valueProp, defaultValue, onChangeProp);
   const inputRef = useRef(null);
   const field = useContext(FieldStateContext);
-  const shape = useShape();
-  const sizeClasses = useSize2(size);
-  const compact = sizeClasses.variant === "compact";
+  const { size: sizeClasses, props: boxProps } = useFieldBox({
+    variant,
+    invalid,
+    disabled,
+    active: field?.active,
+    size
+  });
   return /* @__PURE__ */ jsxs("div", {
-    onMouseDown: (e) => {
-      if (e.target === inputRef.current)
-        return;
-      e.preventDefault();
-      inputRef.current?.focus();
-    },
-    "data-active": field?.active || undefined,
-    "data-invalid": invalid || undefined,
-    "data-disabled": disabled || undefined,
-    className: cn2(fieldVariants(), "flex items-center", sizeClasses.gap, shape.input, compact ? "px-2" : "px-2.5", sizeClasses.control, className),
+    onMouseDown: focusControlOnPress(inputRef),
+    ...boxProps,
+    className: cn2(boxProps.className, "flex items-center", sizeClasses.gap, sizeClasses.control, className),
     children: [
       Icon && /* @__PURE__ */ jsx(Icon, {
         size: sizeClasses.icon,

package/dist/shared/{components-nb87fjy4.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-3fbbvq5j.js → components-nsjec21k.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-re6rs21k.js → components-nyq0rym2.js}

@@ -13,7 +13,7 @@ import {
 import {
   PickerShell,
   PickerInput
-} from "./components-7btqt08d.js";
+} from "./components-qtqxgfrb.js";
 import {
   pad
 } from "./components-mjthm1kf.js";
@@ -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-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-8ey44d79.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-bshdmf75.js → components-wshd8f3n.js}

@@ -13,7 +13,7 @@ import {
 import {
   PickerShell,
   PickerInput
-} from "./components-7btqt08d.js";
+} from "./components-qtqxgfrb.js";
 import {
   pad,
   TimeColumns
@@ -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-2nhgyh31.js → components-wtbesgdp.js}

@@ -13,7 +13,7 @@ import {
 import {
   PickerShell,
   PickerInput
-} from "./components-7btqt08d.js";
+} from "./components-qtqxgfrb.js";
 import {
   TimeColumns
 } from "./components-mjthm1kf.js";
@@ -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-2n3whx7z.js → components-ye0ze0h8.js}

@@ -23,7 +23,7 @@ import {
   SidebarMenuItem2,
   SidebarMenuButton2,
   sidebar_default
-} from "./components-nb87fjy4.js";
+} from "./components-mqyvvh8k.js";
 import {
   MenuItem2,
   DropdownMenu2,

package/dist/shared/{components-k809mbn0.js → components-zwhtxm15.js}

@@ -11,7 +11,7 @@ import {
 import {
   PickerShell,
   PickerInput
-} from "./components-7btqt08d.js";
+} from "./components-qtqxgfrb.js";
 
 // components/inputs/date-time/date-range-picker/index.tsx
 import { endOfMonth, format } from "date-fns";
@@ -27,6 +27,7 @@ function DateRangePicker2({
   disabled,
   startMonth,
   endMonth,
+  variant,
   invalid,
   size,
   open: openProp,
@@ -109,6 +110,7 @@ function DateRangePicker2({
     open,
     onOpenChange: setOpen,
     size,
+    variant,
     invalid,
     disabled: off,
     icon: "calendar",

package/dist/styles.css

@@ -59,7 +59,7 @@
 }
 /* layer: theme */
 @layer theme{
-:root, :host { --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --spacing: 0.25rem; --ease-DEFAULT: cubic-bezier(0.4, 0, 0.2, 1); --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; --radius-md: 0.375rem; --radius-DEFAULT: 0.25rem; --radius-none: 0; --leading-relaxed: 1.625; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --leading-none: 1; --ease-out: cubic-bezier(0, 0, 0.2, 1); --radius-sm: 0.25rem; --leading-snug: 1.375; --leading-normal: 1.5; --radius-xs: 0.125rem; --tracking-wide: 0.025em; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --leading-tight: 1.25; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
+:root, :host { --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --spacing: 0.25rem; --ease-DEFAULT: cubic-bezier(0.4, 0, 0.2, 1); --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; --radius-none: 0; --leading-relaxed: 1.625; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-DEFAULT: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --leading-none: 1; --ease-out: cubic-bezier(0, 0, 0.2, 1); --radius-sm: 0.25rem; --leading-snug: 1.375; --leading-normal: 1.5; --radius-xs: 0.125rem; --tracking-wide: 0.025em; --radius-md: 0.375rem; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --leading-tight: 1.25; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
 }
 /* layer: base */
 @layer base{

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justanarthur/modo-ui",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Fluid Functionalism (Base UI flavor, MIT © 2026 Micka Touillaud) ported to UnoCSS: motion springs, fluid hover, a two-step size ladder and an eight-level elevated surface system. Documented with modo.",
   "license": "MIT",
   "keywords": [