@justanarthur/modo-ui 0.2.0 → 0.3.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-cbxjn9p8.js → components-k809mbn0.js}

@@ -1,13 +1,13 @@
 import {
   defaultLocale,
   parseDateText
-} 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

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-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-7ans7ce5.js → components-re6rs21k.js}

@@ -3,7 +3,7 @@ import {
   fieldLabel,
   dividedColumns,
   ScrollColumn
-} from "./components-9jvzzvt1.js";
+} from "./components-gz8zf3ec.js";
 import {
   cn2
 } from "./components-ezxhrmer.js";
@@ -16,7 +16,7 @@ import {
 } from "./components-7btqt08d.js";
 import {
   pad
-} from "./components-q4daerx0.js";
+} from "./components-mjthm1kf.js";
 
 // components/inputs/date-time/duration-picker/index.tsx
 import { formatDuration } from "date-fns";

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-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";

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-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; --radius-md: 0.375rem; --radius-DEFAULT: 0.25rem; --radius-none: 0; --radius-2xl: 1rem; --radius-lg: 0.5rem; --leading-snug: 1.375; --leading-normal: 1.5; --radius-xs: 0.125rem; --tracking-wide: 0.025em; --leading-relaxed: 1.625; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --radius-3xl: 1.5rem; --radius-xl: 0.75rem; --leading-none: 1; --radius-sm: 0.25rem; --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-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); }
 }
 /* layer: base */
 @layer base{

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justanarthur/modo-ui",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.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": [

package/dist/components/inputs/checkbox-group/index.d.ts

@@ -1,50 +0,0 @@
-import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
-type SizeVariant = "default" | "compact";
-interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
-	/** CheckboxGroup.Item children. */
-	children: ReactNode;
-	/** Set of checked item indices; drives the merged background across contiguous picks. Controlled — pair it with `onCheckedIndicesChange` (or per-item `onToggle`). */
-	checkedIndices?: Set<number>;
-	/** Checked indices on first render when uncontrolled (a Set or an array). Defaults to none. */
-	defaultCheckedIndices?: Set<number> | number[];
-	/** Called with the next checked set whenever an item is toggled. */
-	onCheckedIndicesChange?: (checkedIndices: Set<number>) => void;
-	/** Pins the group's rows to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
-	size?: SizeVariant;
-}
-type CheckboxGroupComponent = ForwardRefExoticComponent<CheckboxGroupProps & RefAttributes<HTMLDivElement>> & {
-	Item: typeof CheckboxItem;
-};
-/**
-* Checkbox group with merged backgrounds for contiguous selections.
-*
-* Each row is a `CheckboxGroup.Item` with a stable `index`. Contiguous checked
-* rows share one background: a checked row's background grows out of its
-* center and melts into its neighbours, an unchecked one pinches off and
-* shrinks away (the liquid indicators in Morph). A fluid hover highlight melts
-* from row to row, and Arrow Up/Down,
-* Home and End move focus while Space or Enter toggles. The checked label
-* animates to semibold without shifting its width. The group is uncontrolled
-* with `defaultCheckedIndices`, or controlled with `checkedIndices` plus
-* `onCheckedIndicesChange` — FF's per-item `checked` / `onToggle` still work
-* and override the group state for their row.
-*
-* Statics:
-* - `CheckboxGroup.Item` — one checkbox row: `label`, `index`, and optional
-*   `checked` / `onToggle`.
-*
-* @example {@include ./examples.mdx}
-*/
-declare const CheckboxGroup: CheckboxGroupComponent;
-interface CheckboxItemProps extends HTMLAttributes<HTMLDivElement> {
-	/** Text label for the checkbox. */
-	label: string;
-	/** Position index within the group. */
-	index: number;
-	/** Whether this item is checked. Defaults to the group's checked set. */
-	checked?: boolean;
-	/** Called when this item is toggled (the group's `onCheckedIndicesChange` fires too). */
-	onToggle?: () => void;
-}
-declare const CheckboxItem: ForwardRefExoticComponent<CheckboxItemProps & RefAttributes<HTMLDivElement>>;
-export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, CheckboxItemProps, CheckboxGroup as default };

package/dist/components/inputs/input-copy/index.js

@@ -1,16 +0,0 @@
-import {
-  InputCopy2,
-  input_copy_default
-} from "../../../shared/components-1j9791sn.js";
-import"../../../shared/components-ng72k97e.js";
-import"../../../shared/components-zrkzcayz.js";
-import"../../../shared/components-0q0sqfh4.js";
-import"../../../shared/components-hqeq3w9q.js";
-import"../../../shared/components-men63rwj.js";
-import"../../../shared/components-0sn7ypjw.js";
-import"../../../shared/components-cv16mryv.js";
-import"../../../shared/components-ezxhrmer.js";
-export {
-  InputCopy2 as InputCopy,
-  input_copy_default as default
-};

package/dist/components/navigation/accordion/index.js

@@ -1,28 +0,0 @@
-import {
-  AccordionGroup2,
-  Accordion2,
-  AccordionItem2,
-  AccordionTrigger2,
-  AccordionContent2,
-  accordion_default
-} from "../../../shared/components-3wk0w46f.js";
-import"../../../shared/components-zrkzcayz.js";
-import"../../../shared/components-0q0sqfh4.js";
-import"../../../shared/components-kvr7f9hy.js";
-import"../../../shared/components-59efxjd9.js";
-import"../../../shared/components-chacnk61.js";
-import"../../../shared/components-hqeq3w9q.js";
-import"../../../shared/components-jjw69c4c.js";
-import"../../../shared/components-n7mjr357.js";
-import"../../../shared/components-men63rwj.js";
-import"../../../shared/components-0sn7ypjw.js";
-import"../../../shared/components-cv16mryv.js";
-import"../../../shared/components-ezxhrmer.js";
-export {
-  Accordion2 as Accordion,
-  AccordionContent2 as AccordionContent,
-  AccordionGroup2 as AccordionGroup,
-  AccordionItem2 as AccordionItem,
-  AccordionTrigger2 as AccordionTrigger,
-  accordion_default as default
-};

package/dist/components/thinking-indicator/index.js

@@ -1,13 +0,0 @@
-import {
-  ThinkingIndicator2,
-  thinking_indicator_default
-} from "../../shared/components-7x9kawxv.js";
-import"../../shared/components-0q0sqfh4.js";
-import"../../shared/components-hqeq3w9q.js";
-import"../../shared/components-men63rwj.js";
-import"../../shared/components-0sn7ypjw.js";
-import"../../shared/components-ezxhrmer.js";
-export {
-  ThinkingIndicator2 as ThinkingIndicator,
-  thinking_indicator_default as default
-};