@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/lib/morph-part.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { Context as Context_rri5bl } from "react";
+import { JSX as JSX_1kxb } from "react";
+/** Set by an overlay root: the id its parts are scoped to and whether it is open. */
+declare const MorphPartScope: Context_rri5bl<{
+	id: string;
+	open: boolean;
+} | null>;
+/** True inside an overlay's surface (`MorphSurface` provides it). */
+declare const MorphPartInOverlay: Context_rri5bl<boolean>;
+interface MorphPartProps {
+	/** Pairs the part in the trigger with its twin in the overlay; unique within one overlay. */
+	id: string;
+	/** Classes for the part's box. */
+	className?: string;
+	/** The part's content: an image, a title. */
+	children?: ReactNode;
+}
+type Element_12xgc = JSX_1kxb["Element"];
+declare function MorphPart({ id, className, children }: MorphPartProps): Element_12xgc;
+export { MorphPart, MorphPartInOverlay, MorphPartProps, MorphPartScope };

package/dist/lib/morph-part.js

@@ -0,0 +1,12 @@
+import {
+  MorphPartScope2,
+  MorphPartInOverlay2,
+  MorphPart2
+} from "../shared/components-b1e239g3.js";
+import"../shared/components-de99ykt7.js";
+import"../shared/components-3ey0hzpb.js";
+export {
+  MorphPart2 as MorphPart,
+  MorphPartInOverlay2 as MorphPartInOverlay,
+  MorphPartScope2 as MorphPartScope
+};

package/dist/lib/popup.d.ts

@@ -0,0 +1,20 @@
+/**
+* Popup lists scroll inside ScrollArea: the hover-revealed thumb instead of
+* the platform scrollbar, and a scroll-aware fade on the viewport. The popup
+* is only max-height constrained, so the viewport's percentage height can't
+* resolve — it inherits the max-height instead (the ScrollArea root inherits
+* it from the popup) and sizes to its rows up to that. The scroll primitive's
+* inline-styled sizer is forced back to a plain block so rows can shrink and
+* truncate; the `[style]` qualifier keeps that off the rows' own wrapper on
+* touch devices, where ScrollArea renders no sizer.
+*/
+declare const popupScrollAreaClass = "min-h-0 flex-1 max-h-[inherit]";
+declare const popupViewportClass = "!h-auto max-h-[inherit] [&>div[style]]:!block [&>div[style]]:!min-w-0 [--scroll-fade-size:32px]";
+/** Keys that count as keyboard navigation inside a popup (earn the ring). */
+declare const POPUP_NAV_KEYS: string[];
+/**
+* Rows the fluid hover must skip: a disabled row is neither a target
+* nor a hover stop, whichever attribute the primitive marks it with.
+*/
+declare function isDisabledRow(el: HTMLElement): boolean;
+export { POPUP_NAV_KEYS, isDisabledRow, popupScrollAreaClass, popupViewportClass };

package/dist/lib/popup.js

@@ -0,0 +1,12 @@
+import {
+  popupScrollAreaClass2,
+  popupViewportClass2,
+  POPUP_NAV_KEYS2,
+  isDisabledRow2
+} from "../shared/components-h6p86be3.js";
+export {
+  POPUP_NAV_KEYS2 as POPUP_NAV_KEYS,
+  isDisabledRow2 as isDisabledRow,
+  popupScrollAreaClass2 as popupScrollAreaClass,
+  popupViewportClass2 as popupViewportClass
+};

package/dist/lib/reduced-motion.d.ts

@@ -0,0 +1,9 @@
+/**
+* Reduce motion when the OS asks for it or a surrounding `MotionConfig` does.
+* motion's `useReducedMotionConfig` alone follows the OS only under
+* `<MotionConfig reducedMotion="user">`; without that wrapper it defaults to
+* "never", so a page that sets none would animate for a user who turned
+* motion off.
+*/
+declare function useReduceMotion(): boolean;
+export { useReduceMotion };

package/dist/lib/reduced-motion.js

@@ -0,0 +1,6 @@
+import {
+  useReduceMotion2
+} from "../shared/components-de99ykt7.js";
+export {
+  useReduceMotion2 as useReduceMotion
+};

package/dist/lib/row-index.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { JSX as JSX_1kxb } from "react";
+type Element_12xgc = JSX_1kxb["Element"];
+/** Gives each element child its position among them. */
+declare function IndexedRows({ children }: {
+	children: ReactNode;
+}): Element_12xgc;
+/** A row's index: its own `index`, else its position in the group. */
+declare function useRowIndex(own?: number): number;
+export { IndexedRows, useRowIndex };

package/dist/lib/row-index.js

@@ -0,0 +1,8 @@
+import {
+  IndexedRows2,
+  useRowIndex2
+} from "../shared/components-r8eqs7gz.js";
+export {
+  IndexedRows2 as IndexedRows,
+  useRowIndex2 as useRowIndex
+};

package/dist/lib/row-order.d.ts

@@ -0,0 +1,28 @@
+import { RefObject } from "react";
+import { Context as Context_rri5bl } from "react";
+interface Slot {
+	element: HTMLElement;
+	/** The row's own `index`; the numbering starts after the highest one. */
+	explicit?: number;
+	/** A label, separator or group: numbered, never a row. */
+	gap?: boolean;
+}
+interface RowOrder {
+	register: (id: string, slot: Slot) => () => void;
+	order: ReadonlyMap<string, number>;
+	/** The first row's number: the inline panel's roving tab stop. */
+	first?: number;
+}
+declare const RowOrderContext: Context_rri5bl<RowOrder | null>;
+/** A panel's numbering. Provide the result through `RowOrderContext`. */
+declare function useRowOrder(): RowOrder;
+/**
+* Takes a place in the surrounding panel's order and returns the row's index
+* (`explicit` when given, else its position; undefined until the first layout
+* pass, and outside a panel) and the panel's first row.
+*/
+declare function useRowSlot(ref: RefObject<HTMLElement | null>, explicit?: number, gap?: boolean): {
+	index: number | undefined;
+	firstRow: number | undefined;
+};
+export { RowOrder, RowOrderContext, useRowOrder, useRowSlot };

package/dist/lib/row-order.js

@@ -0,0 +1,10 @@
+import {
+  RowOrderContext2,
+  useRowOrder2,
+  useRowSlot2
+} from "../shared/components-4bwsd46w.js";
+export {
+  RowOrderContext2 as RowOrderContext,
+  useRowOrder2 as useRowOrder,
+  useRowSlot2 as useRowSlot
+};

package/dist/lib/scroll-column.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { JSX as JSX_1kxb } from "react";
+interface ScrollColumnOption<T extends number | string> {
+	value: T;
+	label: ReactNode;
+	disabled?: boolean;
+}
+interface ScrollColumnProps<T extends number | string> {
+	/** Accessible name of the list ("Month", "Hour"). */
+	label: string;
+	options: ScrollColumnOption<T>[];
+	/** The picked option: a dot and a heavier weight. */
+	value: T | null;
+	onValueChange: (value: T) => void;
+	/** Options to band, as a scrollbar thumb would (the months the calendar shows). */
+	inView?: (value: T) => boolean;
+	/** The option kept centred. Defaults to `value`. */
+	follow?: T | null;
+	/** A column, or a strip on a narrow panel. Defaults to `'vertical'`. */
+	orientation?: "vertical" | "horizontal";
+	className?: string;
+}
+/** For a row of columns: a hairline between neighbours. */
+declare const dividedColumns = "flex [&>*+*]:border-s [&>*]:border-border";
+type Element_12xgc = JSX_1kxb["Element"];
+declare function ScrollColumn<T extends number | string>({ label, options, value, onValueChange, inView, follow, orientation, className }: ScrollColumnProps<T>): Element_12xgc;
+export { ScrollColumn, ScrollColumnOption, ScrollColumnProps, dividedColumns };

package/dist/lib/scroll-column.js

@@ -0,0 +1,18 @@
+import {
+  dividedColumns2,
+  ScrollColumn2
+} from "../shared/components-1k0wv53d.js";
+import"../shared/components-qdm3yh26.js";
+import"../shared/components-pw06rbxq.js";
+import"../shared/components-yhgq0qxx.js";
+import"../shared/components-awra5sff.js";
+import"../shared/components-de99ykt7.js";
+import"../shared/components-3ey0hzpb.js";
+import"../shared/components-h83az0bz.js";
+import"../shared/components-34txk9rj.js";
+import"../shared/components-78x40gee.js";
+import"../shared/components-jcnjay5g.js";
+export {
+  ScrollColumn2 as ScrollColumn,
+  dividedColumns2 as dividedColumns
+};

package/dist/lib/shape-context.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import { JSX as JSX_1kxb } from "react";
+type ShapeVariant = "pill" | "rounded";
+interface ShapeClasses {
+	/** The variant these classes belong to — handy for conditionals. */
+	variant: ShapeVariant;
+	item: string;
+	bg: string;
+	focusRing: string;
+	mergedBg: string;
+	container: string;
+	button: string;
+	input: string;
+	bgRadius: number;
+	mergedRadius: number;
+}
+declare const shapeMap: Record<ShapeVariant, ShapeClasses>;
+interface ShapeContextValue {
+	shape: ShapeVariant;
+	setShape: (shape: ShapeVariant) => void;
+	classes: ShapeClasses;
+}
+declare function useShape(): ShapeClasses;
+declare function useShapeContext(): ShapeContextValue;
+type Element_12xgc = JSX_1kxb["Element"];
+declare function ShapeProvider({ children, defaultShape }: {
+	children: ReactNode;
+	defaultShape?: ShapeVariant;
+}): Element_12xgc;
+export { ShapeClasses, ShapeProvider, ShapeVariant, shapeMap, useShape, useShapeContext };

package/dist/lib/shape-context.js

@@ -0,0 +1,12 @@
+import {
+  shapeMap2,
+  useShape2,
+  useShapeContext2,
+  ShapeProvider2
+} from "../shared/components-78x40gee.js";
+export {
+  ShapeProvider2 as ShapeProvider,
+  shapeMap2 as shapeMap,
+  useShape2 as useShape,
+  useShapeContext2 as useShapeContext
+};

package/dist/lib/size-context.d.ts

@@ -0,0 +1,94 @@
+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;
+import { Context as Context_rri5bl } from "react";
+/** 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;
+}
+declare const SizeContext: Context_rri5bl<SizeContextValue | null>;
+/** 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;
+export { SizeClasses, SizeContext, SizeVariant, TypeScaleRole, TypeScaleStep, sizeMap, typeScale, useSize, useSizeContext, useSizeVariant, useTypeScale };

package/dist/lib/size-context.js

@@ -0,0 +1,20 @@
+import {
+  useTypeScale2,
+  SizeContext2,
+  useSizeVariant2,
+  useSize2,
+  useSizeContext2
+} from "../shared/components-h83az0bz.js";
+import {
+  sizeMap2,
+  typeScale2
+} from "../shared/components-34txk9rj.js";
+export {
+  SizeContext2 as SizeContext,
+  sizeMap2 as sizeMap,
+  typeScale2 as typeScale,
+  useSize2 as useSize,
+  useSizeContext2 as useSizeContext,
+  useSizeVariant2 as useSizeVariant,
+  useTypeScale2 as useTypeScale
+};

package/dist/lib/size-scale.d.ts

@@ -0,0 +1,79 @@
+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;
+export { SizeClasses, SizeVariant, TypeScaleRole, TypeScaleStep, sizeMap, typeScale };

package/dist/lib/size-scale.js

@@ -0,0 +1,8 @@
+import {
+  sizeMap2,
+  typeScale2
+} from "../shared/components-34txk9rj.js";
+export {
+  sizeMap2 as sizeMap,
+  typeScale2 as typeScale
+};

package/dist/lib/slot.d.ts

@@ -0,0 +1,12 @@
+import { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+import { JSXElementConstructor as JSXElementConstructor_dt0ahf } from "react";
+interface SlotProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	/** The element that becomes the control, e.g. a Button. */
+	render?: ReactElement;
+	/** Compose onto the single child instead. Both spellings work in both flavors. Defaults to `false`. */
+	asChild?: boolean;
+	/** Control content when there is no render element. */
+	children?: ReactNode;
+}
+declare function slotRender(render: ReactElement | undefined, asChild: boolean | undefined, children: ReactNode): ReactElement<any, string | JSXElementConstructor_dt0ahf<any>> | undefined;
+export { SlotProps, slotRender };

package/dist/lib/slot.js

@@ -0,0 +1,6 @@
+import {
+  slotRender2
+} from "../shared/components-vfjc9jzz.js";
+export {
+  slotRender2 as slotRender
+};

package/dist/lib/springs.d.ts

@@ -0,0 +1,44 @@
+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;
+export { exitFallbackMs, spring };

package/dist/lib/springs.js

@@ -0,0 +1,8 @@
+import {
+  spring2,
+  exitFallbackMs2
+} from "../shared/components-3ey0hzpb.js";
+export {
+  exitFallbackMs2 as exitFallbackMs,
+  spring2 as spring
+};

package/dist/lib/surface-classes.d.ts

@@ -0,0 +1,19 @@
+/**
+* Static lookup tables for surface tokens.
+*
+* Tailwind v4's static scanner only generates utility classes for literal
+* strings it sees in source. Template-literal class names like
+* `bg-surface-${level}` are invisible to the scanner, so the matching
+* utility never gets generated and the background renders transparent.
+*
+* Use these maps when picking a surface level at runtime:
+*
+*   <div className={surfaceClasses(level)} />
+*
+* Each entry below contains the literal class name, which is enough for
+* Tailwind to detect and emit the utility.
+*/
+declare const SURFACE_BG: Record<number, string>;
+declare const SURFACE_SHADOW: Record<number, string>;
+declare function surfaceClasses(bgLevel: number, shadowLevel?: number): string;
+export { SURFACE_BG, SURFACE_SHADOW, surfaceClasses };

package/dist/lib/surface-classes.js

@@ -0,0 +1,10 @@
+import {
+  SURFACE_BG2,
+  SURFACE_SHADOW2,
+  surfaceClasses2
+} from "../shared/components-vf45j12c.js";
+export {
+  SURFACE_BG2 as SURFACE_BG,
+  SURFACE_SHADOW2 as SURFACE_SHADOW,
+  surfaceClasses2 as surfaceClasses
+};

package/dist/lib/surface-context.d.ts

@@ -0,0 +1,9 @@
+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;
+export { SurfaceProvider, useSurface };

package/dist/lib/surface-context.js

@@ -0,0 +1,8 @@
+import {
+  useSurface2,
+  SurfaceProvider2
+} from "../shared/components-dhgk6mbt.js";
+export {
+  SurfaceProvider2 as SurfaceProvider,
+  useSurface2 as useSurface
+};

package/dist/lib/use-controllable-state.d.ts

@@ -0,0 +1,2 @@
+declare function useControllableState<T>(value: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (next: T | ((prev: T) => T)) => void];
+export { useControllableState };

package/dist/lib/use-controllable-state.js

@@ -0,0 +1,6 @@
+import {
+  useControllableState2
+} from "../shared/components-tz1fv35x.js";
+export {
+  useControllableState2 as useControllableState
+};