@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/primitives/motion/index.d.ts

@@ -0,0 +1,115 @@
+import { ReactNode } from "react";
+declare const spring: {
+	readonly fast: {
+		readonly type: "spring";
+		readonly duration: 0.08;
+		readonly bounce: 0;
+		readonly exit: {
+			readonly duration: 0.06;
+		};
+	};
+	readonly moderate: {
+		readonly type: "spring";
+		readonly duration: 0.16;
+		readonly bounce: 0;
+		readonly exit: {
+			readonly duration: 0.12;
+		};
+	};
+	readonly slow: {
+		readonly type: "spring";
+		readonly duration: 0.24;
+		readonly bounce: 0.12;
+		readonly exit: {
+			readonly duration: 0.16;
+		};
+	};
+	readonly goo: {
+		readonly type: "spring";
+		readonly visualDuration: 0.25;
+		readonly bounce: 0.15;
+		readonly exit: {
+			readonly type: "spring";
+			readonly visualDuration: 0.2;
+			readonly bounce: 0;
+		};
+	};
+};
+declare const exitFallbackMs: (tier: {
+	exit: {
+		duration: number;
+	} | {
+		visualDuration: number;
+	};
+}) => number;
+import { JSX as JSX_1kxb } from "react";
+type SpringTier = keyof typeof spring;
+interface MotionProps {
+	/** Spring tier the children enter on (`spring.<tier>`); they leave on its `.exit` tween. `fast` for hover, fades and small toggles, `moderate` for dropdowns and tabs, `slow` for dialogs and large surfaces. Defaults to `'moderate'`. */
+	tier?: "fast" | "moderate" | "slow";
+	/** Controlled visibility — `true` animates the children in, `false` animates them out. Pair with `onShowChange`. */
+	show?: boolean;
+	/** Uncontrolled initial visibility, toggled by the built-in trigger. Defaults to `true`. */
+	defaultShow?: boolean;
+	/** Called with the next visibility when the built-in trigger is pressed. */
+	onShowChange?: (show: boolean) => void;
+	/** Leave on the tier's enter spring instead of its faster `.exit` tween — the drag FF's motion rules avoid; only for side-by-side comparisons. Defaults to `false`. */
+	sameExit?: boolean;
+	/** Forwarded to motion's `<MotionConfig reducedMotion>`: `'user'` follows the OS setting, `'always'` previews it (transforms drop out, opacity fades stay), `'never'` ignores it. Defaults to `'user'`. */
+	reducedMotion?: "user" | "always" | "never";
+	/** Extra classes for the wrapper (stage + trigger column). */
+	className?: string;
+	/** The content that animates in and out. */
+	children: ReactNode;
+}
+type Element_12xgc = JSX_1kxb["Element"];
+/**
+* Three spring speeds, exits a little faster than entrances, and one fluid
+* hover shared by every list. Pick a speed, wire it in — every component
+* follows the same pattern.
+*
+* All animation comes from one of three springs in `lib/springs`
+* (re-exported here as `spring`). Hover states and small toggles use `fast`,
+* dropdowns and tabs use `moderate`, dialogs and drawers use `slow`. No
+* component invents its own timing, so things you've never thought about
+* together move at the same pace.
+*
+* Each tier's value is the **enter** transition; its `.exit` is the matching
+* **exit** — a plain tween, no bounce, one tier quicker — so a dismissal reads
+* as crisp and final rather than replaying the entrance in reverse. The bigger
+* the thing that moves, the slower the tier. `moderate` is critically damped: it
+* lands exactly with no overshoot, so it also carries panels that must settle
+* precisely.
+*
+* A fourth tier, `goo`, belongs to the morph engine alone (see Morph): the goo
+* effect lands in about 200ms with a little bounce and springs back rather
+* than tweening, so its liquid neck has time to stretch and pinch off.
+*
+* ## Usage
+*
+* Enter with `transition={spring.fast}` and leave with `exit={{ opacity: 0,
+* transition: spring.fast.exit }}`. Never hand-write a duration: the values
+* belong in `springs`, not in component code.
+*
+* - `exitFallbackMs(tier)` (also exported) is the tier's exit in ms plus a 100ms
+*   buffer, for deferred-unmount timers that guard an exit tween.
+* - CSS consumers get the same tiers from `tokens/motion.css`
+*   (`--duration-<tier>` and `--duration-<tier>-exit`).
+*
+* ## Reduced motion
+*
+* Every spring respects the OS setting once the app tree is wrapped in
+* `<MotionConfig reducedMotion="user">`. With reduced motion on, position and
+* scale changes drop out and only the opacity fades remain.
+*
+* ## The `Motion` demo
+*
+* `Motion` itself is a docs demo, not a building block: it shows or hides its
+* children with one tier's enter spring and exit tween (fade + scale + a short
+* rise), with a built-in Show/Hide trigger and a readout of the token it plays.
+* Hidden children keep their space and leave the accessibility tree.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Motion({ tier, show, defaultShow, onShowChange, sameExit, reducedMotion, className, children }: MotionProps): Element_12xgc;
+export { Motion, MotionProps, SpringTier, Motion as default, exitFallbackMs, spring };

package/dist/primitives/motion/index.js

@@ -0,0 +1,19 @@
+import {
+  Motion2
+} from "../../shared/components-q5xj5c16.js";
+import"../../shared/components-b2wyq2cq.js";
+import"../../shared/components-n7mjr357.js";
+import"../../shared/components-men63rwj.js";
+import {
+  spring2,
+  exitFallbackMs2
+} from "../../shared/components-1v7rxytx.js";
+import"../../shared/components-0sn7ypjw.js";
+import"../../shared/components-cv16mryv.js";
+import"../../shared/components-ezxhrmer.js";
+export {
+  Motion2 as Motion,
+  Motion2 as default,
+  exitFallbackMs2 as exitFallbackMs,
+  spring2 as spring
+};

package/dist/primitives/scroll-area/index.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import { ScrollAreaScrollbarProps as ScrollAreaScrollbarProps_g9nf4s } from "@base-ui/react";
+type Orientation = "vertical" | "horizontal" | "both";
+interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
+	/** Classes for the inner scrolling viewport — where the `scroll-fade` / `scroll-fade-x` utility goes. */
+	viewportClassName?: string;
+	/** Which axes get scrollbars. Defaults to `"vertical"`. */
+	orientation?: Orientation;
+	/** Classes for the outer container — set the height/width constraint here. */
+	className?: string;
+	/** The scrolling content. Give it an intrinsic size (`w-max`, `whitespace-nowrap`) to overflow horizontally. */
+	children?: ReactNode;
+}
+interface ScrollAreaStatics {
+	/** `ScrollBar` — one scrollbar, for composing a Base UI scroll area by hand. */
+	Bar: typeof ScrollBar;
+}
+/**
+* A scrollbar that stays out of the way but never disappears, over shadcn's
+* scroll-fade as the baseline edge treatment — restyled to the shape system,
+* with native scroll physics on touch.
+*
+* macOS hides the scrollbar until you start scrolling, so a clipped list
+* gives no sign it has more below. Here the thumb rests narrow and
+* low-contrast, then widens and darkens on hover, and its radius follows the
+* shape system. `className` constrains the outer box; `viewportClassName`
+* goes on the inner scrolling viewport, where the `scroll-fade` (or
+* `scroll-fade-x`) utility dissolves the edges that have more to scroll. On
+* touch-primary devices the whole thing steps aside for native overflow
+* scrolling. Built on Base UI's ScrollArea; scrollbar machinery adapted from
+* Lina (https://lina.sameer.sh).
+*
+* Statics:
+* - `ScrollArea.Bar` — the standalone `ScrollBar`, for hand-composed scroll
+*   areas.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const ScrollArea: ForwardRefExoticComponent<ScrollAreaProps & RefAttributes<HTMLDivElement>> & ScrollAreaStatics;
+declare const ScrollBar: ForwardRefExoticComponent<Omit<Omit<ScrollAreaScrollbarProps_g9nf4s, "ref"> & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollAreaProps, ScrollBar, ScrollArea as default };

package/dist/primitives/scroll-area/index.js

@@ -0,0 +1,12 @@
+import {
+  ScrollArea2,
+  ScrollBar2,
+  scroll_area_default
+} from "../../shared/components-hawvy2qz.js";
+import"../../shared/components-cv16mryv.js";
+import"../../shared/components-ezxhrmer.js";
+export {
+  ScrollArea2 as ScrollArea,
+  ScrollBar2 as ScrollBar,
+  scroll_area_default as default
+};

package/dist/primitives/sizes/index.d.ts

@@ -0,0 +1,128 @@
+import { ReactNode } from "react";
+import { JSX as JSX_1kxb } from "react";
+type SizeVariant = "default" | "compact";
+interface SizeClasses {
+	/** The variant these classes belong to — handy for conditionals. */
+	variant: SizeVariant;
+	/** Bounded control height — buttons, inputs, select triggers, subtle tabs —
+	*  AND list/menu rows (select options, dropdown, checkbox and radio rows).
+	*  One token by design: a popup row lines up with the trigger that opened
+	*  it because they share this height. */
+	control: string;
+	/** `control` as a number, for consumers that need raw pixels. */
+	controlHeight: number;
+	/** Tab trigger height inside a padded segmented list. Sized so
+	*  `segmentPad` + `segmentItem` adds back up to the control height —
+	*  the segmented control's outer box stays on the same ladder. */
+	segmentItem: string;
+	/** Padding of the segmented list around its tabs. */
+	segmentPad: string;
+	/** Body text inside controls. */
+	text: string;
+	/** Horizontal padding of bounded controls (select trigger, inputs). */
+	px: string;
+	/** Horizontal padding of list/menu rows, which sit inside a padded popup
+	*  or group and need less inset than a bounded control. */
+	itemPx: string;
+	/** Gap between an icon / control glyph and its label, and between
+	*  neighbouring controls in a row (toolbars, filter bars, button
+	*  clusters). Density is spacing as much as control height, so the
+	*  compact step halves it. */
+	gap: string;
+	/** Glyph size in px: leading/trailing icons inside controls, and the
+	*  checkbox square / radio circle. */
+	icon: number;
+}
+declare const sizeMap: Record<SizeVariant, SizeClasses>;
+/** One role of the type scale: px per ladder step. */
+interface TypeScaleStep {
+	default: number;
+	compact: number;
+}
+/**
+* Role-based type scale, per ladder step (px values).
+*
+* The default column is the system as shipped; the compact column steps each
+* role down one notch so dense regions read as a smaller sibling of the same
+* hierarchy, not a squeezed copy. `body`, `caption`, and `subtitle` are what
+* the sized components already render through `SizeClasses.text` and their
+* compact conditionals; `display` and `title` are the page-level roles
+* for consumers composing their own screens.
+*/
+declare const typeScale: {
+	/** Page titles. */
+	readonly display: {
+		readonly default: 28;
+		readonly compact: 24;
+	};
+	/** Section headings, dialog titles. */
+	readonly title: {
+		readonly default: 16;
+		readonly compact: 15;
+	};
+	/** Card titles, chat bubbles, emphasized rows. */
+	readonly subtitle: {
+		readonly default: 14;
+		readonly compact: 13;
+	};
+	/** Control labels and body copy — `SizeClasses.text`. */
+	readonly body: {
+		readonly default: 13;
+		readonly compact: 12;
+	};
+	/** Secondary text: descriptions, meta rows, errors, eyebrows and group
+	*  labels (the former overline role — an uppercase or muted caption). */
+	readonly caption: {
+		readonly default: 12;
+		readonly compact: 11;
+	};
+};
+type TypeScaleRole = keyof typeof typeScale;
+/** The type scale resolved for the active ladder step (px per role):
+*  explicit override > surrounding SizeProvider > "default". */
+declare function useTypeScale(override?: SizeVariant | null): Record<TypeScaleRole, number>;
+interface SizeContextValue {
+	size: SizeVariant;
+	setSize: (size: SizeVariant) => void;
+	classes: SizeClasses;
+}
+/** Resolve the active size variant: explicit prop > provider > "default". */
+declare function useSizeVariant(override?: SizeVariant | null): SizeVariant;
+/** Resolve size classes: explicit prop > provider > "default". */
+declare function useSize(override?: SizeVariant | null): SizeClasses;
+declare function useSizeContext(): SizeContextValue;
+type Element_12xgc = JSX_1kxb["Element"];
+/**
+* Two component sizes: a 36px default and a 28px compact. An interface reads
+* as one product when its controls share a sizing rhythm — a button next to a
+* select next to a tab should land on the same height. Each size scales text,
+* icons, padding and gaps together, not just the box. Compact is for dense,
+* data-heavy tools (filter bars, toolbars, table headers, sidebars); default
+* is the right call for everything else.
+*
+* Density is a region decision, not a per-control one: wrap the region in a
+* `SizeProvider` and every sized component inside follows — menus included,
+* since React context crosses portals. Precedence is explicit `size` prop on
+* the component > nearest `SizeProvider` > `'default'`. Button, Badge,
+* Select, Tabs, TabsSubtle, Dropdown, CheckboxGroup, RadioGroup, Input,
+* InputGroup, InputCopy, InputMessage, Table, Switch, Slider, Accordion, Card,
+* ColorPicker, ThinkingIndicator, Calendar and the date and time pickers all
+* take that per-component `size`. Type follows the ladder too: compact drops
+* each type role one notch.
+*
+* Also exported from this item: `useSize(override?)`, `useSizeVariant(override?)`,
+* `useSizeContext()` (`{ size, setSize }` inside a provider), `useTypeScale(override?)`,
+* the `sizeMap` and `typeScale` tables, and the `SizeVariant`, `SizeClasses`,
+* `TypeScaleRole`, `TypeScaleStep` types.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function SizeProvider({ children, size, defaultSize }: {
+	/** The region whose controls follow the step — popups opened from inside it included. */
+	children: ReactNode;
+	/** Controlled variant — pins every control in the subtree to one step, overriding internal state. `'default'` is 36px controls, `'compact'` is 28px. */
+	size?: "default" | "compact";
+	/** Uncontrolled initial variant, switchable via `useSizeContext().setSize`. Defaults to `'default'`. */
+	defaultSize?: "default" | "compact";
+}): Element_12xgc;
+export { SizeClasses, SizeProvider, SizeVariant, TypeScaleRole, TypeScaleStep, SizeProvider as default, sizeMap, typeScale, useSize, useSizeContext, useSizeVariant, useTypeScale };

package/dist/primitives/sizes/index.js

@@ -0,0 +1,21 @@
+import {
+  SizeProvider2
+} from "../../shared/components-jjw69c4c.js";
+import {
+  sizeMap2,
+  typeScale2,
+  useTypeScale2,
+  useSizeVariant2,
+  useSize2,
+  useSizeContext2
+} from "../../shared/components-0sn7ypjw.js";
+export {
+  SizeProvider2 as SizeProvider,
+  SizeProvider2 as default,
+  sizeMap2 as sizeMap,
+  typeScale2 as typeScale,
+  useSize2 as useSize,
+  useSizeContext2 as useSizeContext,
+  useSizeVariant2 as useSizeVariant,
+  useTypeScale2 as useTypeScale
+};

package/dist/primitives/surface/index.d.ts

@@ -0,0 +1,69 @@
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode as ReactNode2, RefAttributes } from "react";
+declare function surfaceClasses(bgLevel: number, shadowLevel?: number): string;
+import { ReactNode } from "react";
+import { JSX as JSX_1kxb } from "react";
+declare function useSurface(): number;
+type Element_12xgc = JSX_1kxb["Element"];
+declare function SurfaceProvider({ value, children }: {
+	value: number;
+	children: ReactNode;
+}): Element_12xgc;
+interface ElevatedProps extends ComponentPropsWithoutRef<"div"> {
+	/**
+	* Steps above the current substrate.
+	*
+	* The component's own surface level becomes `min(substrate + offset, 8)`
+	* and is re-provided to descendants via SurfaceProvider, so further
+	* nesting walks up the ladder automatically.
+	*
+	* Conventional offsets:
+	*   2 — dropdown / popover / select menu
+	*   4 — dialog / modal
+	*/
+	offset: number;
+	/**
+	* Override for the shadow level. Defaults to the computed surface level.
+	*
+	* Pass a fixed value when the component should keep a constant shadow
+	* weight regardless of how deeply it's nested — e.g. a dropdown always
+	* reads `shadow-surface-3` whether it opens on the page or inside a
+	* dialog, even though its background tracks the substrate.
+	*/
+	shadowLevel?: number;
+	/** Merged after the surface classes; radius and padding go here. */
+	className?: string;
+	/** Content of the surface. Everything inside reads this surface's level as its substrate. */
+	children?: ReactNode2;
+}
+interface ElevatedStatics {
+	/** `SurfaceProvider` — set the substrate for a subtree by hand. */
+	Provider: typeof SurfaceProvider;
+}
+/**
+* Eight surface levels that nest. Components read their substrate from
+* context and lift relative to it, so popovers, dropdowns, and dialogs stay
+* visible at any depth — in both light and dark mode.
+*
+* Three pieces: tokens, substrate context, and the primitive. The tokens are
+* eight `bg-surface-N` / `shadow-surface-N` pairs. The substrate is a React
+* context holding the level of the container you are in (1, the page, when
+* nothing provides one). `Elevated` reads that substrate, settles at
+* `min(substrate + offset, 8)`, paints the matching background and shadow,
+* and re-provides its own level, so nested surfaces keep climbing the ladder
+* without anything passed between them. Conventional offsets: 2 for a
+* dropdown, popover or select menu; 4 for a dialog or modal. All other props
+* (ref included) go to the `div`.
+*
+* Statics:
+* - `Elevated.Provider` — `SurfaceProvider`: set the substrate for a subtree
+*   by hand (1 page, 3 popover, 5 dialog).
+*
+* Also exported: `SurfaceProvider`, `useSurface()` (the current substrate
+* level, 1 when no provider is present) and `surfaceClasses(bgLevel,
+* shadowLevel = bgLevel)` for components that paint a level without
+* `Elevated`.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Elevated: ForwardRefExoticComponent<ElevatedProps & RefAttributes<HTMLDivElement>> & ElevatedStatics;
+export { Elevated, ElevatedProps, SurfaceProvider, Elevated as default, surfaceClasses, useSurface };

package/dist/primitives/surface/index.js

@@ -0,0 +1,17 @@
+import {
+  Elevated2,
+  surface_default
+} from "../../shared/components-vc7vq5nz.js";
+import {
+  surfaceClasses2,
+  useSurface2,
+  SurfaceProvider2
+} from "../../shared/components-zx6b6yby.js";
+import"../../shared/components-ezxhrmer.js";
+export {
+  Elevated2 as Elevated,
+  SurfaceProvider2 as SurfaceProvider,
+  surface_default as default,
+  surfaceClasses2 as surfaceClasses,
+  useSurface2 as useSurface
+};

package/dist/shared/components-0ke6xada.js

@@ -0,0 +1,123 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+
+// components/table/index.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TableContext = createContext(null);
+var Table2 = forwardRef(({ children, size, className, ...props }, ref) => {
+  const containerRef = useRef(null);
+  const sizeClasses = useSize2(size);
+  const hover = useFluidHover2(containerRef);
+  const { activeIndex, handlers, registerItem } = hover;
+  const contextValue = useMemo(() => ({ registerItem, activeIndex }), [registerItem, activeIndex]);
+  const table = /* @__PURE__ */ jsx(TableContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: containerRef,
+      className: "relative",
+      onMouseEnter: handlers.onMouseEnter,
+      onMouseMove: handlers.onMouseMove,
+      onMouseLeave: handlers.onMouseLeave,
+      onClick: handlers.onClick,
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          hover
+        }),
+        /* @__PURE__ */ jsx("table", {
+          ref,
+          className: cn2("w-full border-collapse", sizeClasses.text, className),
+          ...props,
+          children
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: table
+  }) : table;
+});
+Table2.displayName = "Table";
+var TableHeader2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
+  ref,
+  className: cn2("", className),
+  ...props
+}));
+TableHeader2.displayName = "TableHeader";
+var TableBody2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
+  ref,
+  className: cn2("", className),
+  ...props
+}));
+TableBody2.displayName = "TableBody";
+var TableRow2 = forwardRef(({ index, className, style, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const ctx = useContext(TableContext);
+  useRegisterFluidHoverItem2(ctx?.registerItem, index, internalRef);
+  const isBodyRow = index !== undefined;
+  const activeIdx = ctx?.activeIndex ?? null;
+  const hideBorder = activeIdx !== null && (isBodyRow && (index === activeIdx || index === activeIdx - 1) || !isBodyRow && activeIdx === 0);
+  return /* @__PURE__ */ jsx("tr", {
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    "data-fluid-hover-index": index,
+    className: cn2("group/row relative z-10 border-b transition-[border-color] duration-fast", hideBorder ? "border-transparent" : "border-accent/40", isBodyRow && activeIdx === index && "is-active", isBodyRow ? "weight-normal" : "weight-semibold", className),
+    style,
+    ...props
+  });
+});
+TableRow2.displayName = "TableRow";
+var TableHead2 = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize2();
+  return /* @__PURE__ */ jsx("th", {
+    ref,
+    className: cn2("text-left text-foreground", sizeClasses.variant === "compact" ? "px-2.5 py-[5px]" : "px-3 py-2", className),
+    ...props
+  });
+});
+TableHead2.displayName = "TableHead";
+var TableCell2 = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize2();
+  return /* @__PURE__ */ jsx("td", {
+    ref,
+    className: cn2("text-muted-foreground transition-colors duration-fast group-[.is-active]/row:text-foreground", sizeClasses.variant === "compact" ? "px-2.5 py-[5px]" : "px-3 py-2", className),
+    ...props
+  });
+});
+TableCell2.displayName = "TableCell";
+Object.assign(Table2, {
+  Header: TableHeader2,
+  Body: TableBody2,
+  Row: TableRow2,
+  Head: TableHead2,
+  Cell: TableCell2
+});
+var table_default = Table2;
+
+export { Table2, TableHeader2, TableBody2, TableRow2, TableHead2, TableCell2, table_default };