@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/components/overlays/toast/index.d.ts

@@ -0,0 +1,107 @@
+import { ReactNode as ReactNode2 } from "react";
+import { ButtonHTMLAttributes, ReactElement, ReactNode } 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;
+}
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+import { JSX as JSX_1kxb } from "react";
+type ToastType = "success" | "loading" | "error" | "warning" | "info" | "action";
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToastOptions {
+	title?: string;
+	description?: string;
+	type?: ToastType;
+	/** Ms before it leaves; 0 keeps it until dismissed. */
+	timeout?: number;
+	action?: {
+		label: string;
+		onClick?: () => void;
+	};
+}
+/** Shows toasts from inside a `Toast`: `show`, the per-state shortcuts, `promise` and `close`. */
+declare function useToast(): {
+	show: (o: ToastOptions) => string;
+	success: (o: ToastOptions) => string;
+	error: (o: ToastOptions) => string;
+	warning: (o: ToastOptions) => string;
+	info: (o: ToastOptions) => string;
+	promise: <T>(promise: Promise<T>, o: {
+		loading: ToastOptions;
+		success: ToastOptions;
+		error: ToastOptions;
+	}) => Promise<T>;
+	close: (toastId?: string) => void;
+};
+interface ToastTriggerProps extends Omit<SlotProps, "type"> {
+	/** The toast's title, in the pill. */
+	title?: string;
+	/** Text for the body the pill melts into. */
+	description?: string;
+	/** State: sets the icon and its color. Defaults to `'info'`. */
+	type?: "success" | "loading" | "error" | "warning" | "info" | "action";
+	/** Ms before it leaves; 0 keeps it until dismissed. Defaults to the `Toast`'s `timeout`. */
+	timeout?: number;
+	/** A button in the body. */
+	action?: {
+		label: string;
+		onClick?: () => void;
+	};
+	/** Runs a task: the toast shows `title` while it is pending, then `success` or `error`. */
+	promise?: () => Promise<unknown>;
+	/** The toast once `promise` resolves. */
+	success?: {
+		title?: string;
+		description?: string;
+	};
+	/** The toast if `promise` rejects. */
+	error?: {
+		title?: string;
+		description?: string;
+	};
+}
+declare const ToastTrigger: ForwardRefExoticComponent_tcubfn<ToastTriggerProps & RefAttributes_miuf56<HTMLButtonElement>>;
+interface ToastProps {
+	/** Where toasts stack; the pill sits on that side and the body opens away from the edge. Defaults to `'top-right'`. */
+	position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+	/** How many toasts show at once; older ones wait. Defaults to `3`. */
+	limit?: number;
+	/** Ms a toast stays; hovering pauses it. Defaults to `6000`. */
+	timeout?: number;
+	/** The part of the app that can show toasts, with `Toast.Trigger`s or `useToast()`. */
+	children?: ReactNode2;
+}
+type Element_12xgc = JSX_1kxb["Element"];
+/**
+* Gooey toasts: a pill with the state's icon and title that melts into a body
+* with the details.
+*
+* Each toast lands as a pill one control tall; when it has a description or
+* an action, the pill melts into a body a beat later through the shared goo
+* filter (see Morph), and folds back before it leaves, or stays open while
+* hovered. Six states (`success`, `loading`, `error`, `warning`, `info`,
+* `action`) set the icon and its status color; a promise toast spins as
+* `loading` and crossfades into its result. Built on Base UI's Toast:
+* timers pause on hover, a swipe toward the edge dismisses, and screen
+* readers hear every toast.
+*
+* `Toast` wraps the part of the app that shows toasts and renders them at
+* its `position`. Show one with `Toast.Trigger`, or call `useToast()`
+* inside it: `show`, `success`, `error`, `warning`, `info`, `promise` and
+* `close`.
+*
+* Statics:
+* - `Toast.Trigger` — a control that shows a toast when pressed:
+*   `render={<Button/>}` or `asChild`, with the toast's `title`,
+*   `description`, `type`, `timeout`, `action`, or a `promise` with its
+*   `success` / `error` toasts.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Toast({ position, limit, timeout, children }: ToastProps): Element_12xgc;
+export { Toast, ToastOptions, ToastPosition, ToastProps, ToastTrigger, ToastTriggerProps, ToastType, Toast as default, useToast };

package/dist/components/overlays/toast/index.js

@@ -0,0 +1,21 @@
+import {
+  useToast2,
+  ToastTrigger2,
+  Toast2,
+  toast_default
+} from "../../../shared/components-jwst3vtj.js";
+import"../../../shared/components-3ky44908.js";
+import"../../../shared/components-0q0sqfh4.js";
+import"../../../shared/components-hqeq3w9q.js";
+import"../../../shared/components-b2wyq2cq.js";
+import"../../../shared/components-men63rwj.js";
+import"../../../shared/components-0sn7ypjw.js";
+import"../../../shared/components-cv16mryv.js";
+import"../../../shared/components-zx6b6yby.js";
+import"../../../shared/components-ezxhrmer.js";
+export {
+  Toast2 as Toast,
+  ToastTrigger2 as ToastTrigger,
+  toast_default as default,
+  useToast2 as useToast
+};

package/dist/components/overlays/tooltip/index.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode, RefObject } from "react";
+import { JSX as JSX_1kxb } from "react";
+type Element_12xgc = JSX_1kxb["Element"];
+declare function TooltipPortalContainer({ value, children }: {
+	value: HTMLElement | null;
+	children: ReactNode;
+}): Element_12xgc;
+interface TooltipProviderProps {
+	children: ReactNode;
+	/** Hover delay before tooltips open, in ms. Defaults to 200. */
+	delayDuration?: number;
+	/** After a tooltip closes, adjacent tooltips opened within this window
+	*  skip the hover delay, in ms. Defaults to 300. */
+	skipDelayDuration?: number;
+}
+/** Groups descendant Tooltips so that once one opens, moving to an adjacent
+*  trigger shows its tooltip instantly instead of re-waiting the full delay.
+*  Wrap once at the app (or section) level; bare Tooltips still work without
+*  it via a per-instance fallback. */
+declare function TooltipProvider({ children, delayDuration, skipDelayDuration }: TooltipProviderProps): Element_12xgc;
+type TooltipSide = "top" | "right" | "bottom" | "left";
+interface TooltipProps {
+	/** The content displayed inside the tooltip. */
+	content: ReactNode;
+	/** The trigger element. Must accept a ref. */
+	children: React.ReactElement;
+	/** Preferred side of the trigger to render the tooltip on. Defaults to `"top"`. */
+	side?: TooltipSide;
+	/** Distance in pixels between the tooltip and the trigger. Defaults to 8. */
+	sideOffset?: number;
+	/** Hover delay before this tooltip opens, in ms. Defaults to 200, or to the
+	*  ambient TooltipProvider's delayDuration when one is present. */
+	delayDuration?: number;
+	/** Additional classes applied to the tooltip content container. */
+	className?: string;
+	/** Extra classes for the portalled positioner element — pass a z utility
+	*  here to lift the whole tooltip above other fixed layers (default z-50). */
+	contentClassName?: string;
+	/** When true, forces the tooltip open. When false, forces it closed. When undefined, uses default hover/focus behavior. */
+	forceOpen?: boolean;
+	/** Follow the cursor along one axis while hovering the trigger — for tall
+	*  or wide triggers (the Sidebar rail) where a centered tooltip sits far
+	*  from the pointer. The other axis stays anchored by `side`. */
+	followCursor?: "x" | "y";
+	/** Called when the tooltip's internal open state changes (before forceOpen is applied). */
+	onOpenChange?: (open: boolean) => void;
+	/** Where the label grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
+	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject<HTMLElement | null>;
+	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. `followCursor` tooltips always fade. Defaults to `'goo'`. */
+	effect?: "goo" | "morph" | "slide" | "fade";
+	/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
+	tier?: "moderate" | "slow";
+}
+/**
+* Floating tooltip with spring-based animations, configurable placement, and
+* rich content support.
+*
+* The trigger is whatever element you pass as the single child — it only has
+* to accept a ref. The label is portalled and grows out of its trigger
+* through the shared morph (see Morph), with the goo neck by default on
+* `spring.goo`, and flips when it would collide with the viewport edge.
+* `followCursor` tracks the pointer along one axis for tall or wide triggers,
+* while the other stays anchored by `side`. Built on Base UI's Tooltip.
+*
+* Statics:
+* - `Tooltip.Provider` — `TooltipProvider`: groups tooltips so moving from
+*   one trigger to an adjacent one skips the hover delay, and the morph: the
+*   next label shows in place.
+* - `Tooltip.PortalContainer` — `TooltipPortalContainer`: portal every
+*   descendant tooltip into a given element instead of the body.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Tooltip({ content, children, side, sideOffset, delayDuration, className, contentClassName, forceOpen, onOpenChange: onOpenChangeProp, followCursor, from, effect, tier }: TooltipProps): Element_12xgc;
+export { Tooltip, TooltipPortalContainer, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide, Tooltip as default };

package/dist/components/overlays/tooltip/index.js

@@ -0,0 +1,17 @@
+import {
+  TooltipPortalContainer2,
+  TooltipProvider2,
+  Tooltip2,
+  tooltip_default
+} from "../../../shared/components-ng72k97e.js";
+import"../../../shared/components-0q0sqfh4.js";
+import"../../../shared/components-hqeq3w9q.js";
+import"../../../shared/components-men63rwj.js";
+import"../../../shared/components-cv16mryv.js";
+import"../../../shared/components-ezxhrmer.js";
+export {
+  Tooltip2 as Tooltip,
+  TooltipPortalContainer2 as TooltipPortalContainer,
+  TooltipProvider2 as TooltipProvider,
+  tooltip_default as default
+};

package/dist/components/table/index.d.ts

@@ -0,0 +1,44 @@
+import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
+type SizeVariant = "default" | "compact";
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+	/** `Table.Header` and `Table.Body` children. */
+	children: ReactNode;
+	/** Pins the table's rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Defaults to the surrounding SizeProvider, else `"default"`. */
+	size?: SizeVariant;
+}
+/** The root plus its compound parts, typed so `<Table.Row>` type-checks. */
+type TableComponent = ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>> & {
+	Header: typeof TableHeader;
+	Body: typeof TableBody;
+	Row: typeof TableRow;
+	Head: typeof TableHead;
+	Cell: typeof TableCell;
+};
+/**
+* Data table with row hover effects and semantic markup.
+*
+* A plain `<table>` whose body rows share one fluid hover highlight: the
+* background glides from row to row under the pointer, the row borders next
+* to the lit row fade out so it reads as one pill, and the lit row's cells
+* brighten from muted to foreground. Header cells render semibold, body
+* cells regular, with the weight change width-compensated. `size` pins every
+* row to one step of the size ladder; otherwise the table follows the
+* surrounding SizeProvider.
+*
+* Parts: `Table.Header` (`<thead>`), `Table.Body` (`<tbody>`), `Table.Row`
+* (`<tr>` — give body rows an `index`, starting at 0, so they join the hover
+* highlight; omit it on header rows), `Table.Head` (`<th>`) and `Table.Cell`
+* (`<td>`). Each forwards its ref and native attributes.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Table: TableComponent;
+declare const TableHeader: ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+	index?: number;
+}
+declare const TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & RefAttributes<HTMLTableCellElement>>;
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableProps, TableRow, TableRowProps, Table as default };

package/dist/components/table/index.js

@@ -0,0 +1,26 @@
+import {
+  Table2,
+  TableHeader2,
+  TableBody2,
+  TableRow2,
+  TableHead2,
+  TableCell2,
+  table_default
+} from "../../shared/components-0ke6xada.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-men63rwj.js";
+import"../../shared/components-0sn7ypjw.js";
+import"../../shared/components-ezxhrmer.js";
+export {
+  Table2 as Table,
+  TableBody2 as TableBody,
+  TableCell2 as TableCell,
+  TableHead2 as TableHead,
+  TableHeader2 as TableHeader,
+  TableRow2 as TableRow,
+  table_default as default
+};

package/dist/components/thinking-indicator/index.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from "react";
+type SizeVariant = "default" | "compact";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+interface ThinkingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+	/** The look: `shimmer` morphs a circle⇄infinity glyph beside a shimmering label (Fluid Functionalism's), `goo` melts three dots into one blob and splits them again beside a plain label. Defaults to `"shimmer"`. */
+	variant?: "shimmer" | "goo";
+	/** Show the glyph (or, for `goo`, the dots) before the label. Set to `false` for a text-only indicator (e.g. inline before a streamed reply). Defaults to `true`. */
+	showIcon?: boolean;
+	/** Step on the size ladder. Wins over the surrounding SizeProvider. Defaults to the provider's step, else `"default"`. */
+	size?: SizeVariant;
+}
+/**
+* Animated status indicator with morphing SVG and cycling text — the
+* assistant's working state.
+*
+* A glyph that morphs circle to infinity and back sits next to a shimmering
+* label that cycles Thinking, Moonwalking, Planning, Refining, each word
+* swapped on a spring. The row reserves the width of the longest word, so
+* nothing around it shifts while the words change. One static "Thinking…" is
+* announced to screen readers instead of a re-announcement every four
+* seconds, and reduced motion drops both the morph and the cycling for a
+* still glyph and label.
+*
+* `variant="goo"` swaps the glyph for three dots that melt into one blob and
+* split again through the goo filter (see Morph), beside a plain label;
+* reduced motion holds them split.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const ThinkingIndicator: ForwardRefExoticComponent_tcubfn<ThinkingIndicatorProps & RefAttributes_miuf56<HTMLDivElement>>;
+export { ThinkingIndicator, ThinkingIndicatorProps, ThinkingIndicator as default };

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

@@ -0,0 +1,13 @@
+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
+};