@mithrl/design-system 0.4.0 → 0.4.1

package/dist/components/text-reveal/TextReveal.d.ts

@@ -0,0 +1,62 @@
+import { type CSSProperties } from "react";
+
+/**
+ * Milliseconds one swap takes. Both halves of the strip share it — see the
+ * stylesheet for why they cannot be decoupled. Mirrors `--motion-duration-slow`;
+ * the CSS reads the token directly and only falls back to this number when the
+ * caller overrides `revealDuration`.
+ */
+export declare const TEXT_REVEAL_DEFAULT_DURATION_MS = 320;
+export type TextRevealElement = "span" | "div" | "p" | "strong" | "em";
+export type TextRevealAlign = "start" | "center" | "end";
+export interface TextRevealProps {
+    /** The string to display. Changing it rolls the whole line over. */
+    text: string;
+    /** Host element. @default "span" */
+    as?: TextRevealElement;
+    /** Swap duration, in milliseconds. @default `--motion-duration-slow` */
+    revealDuration?: number;
+    /** Horizontal alignment of the rendered line. @default "start" */
+    align?: TextRevealAlign;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Roller-style line transition.
+ *
+ * The line lives behind a one-line mask. When `text` changes the two lines move
+ * together as one rigid strip, downwards: the incoming line starts one line
+ * height *above* the window and slides down into place, while the outgoing line
+ * slides down and out through the bottom. New copy is revealed from the top,
+ * the way a station roller tag turns over.
+ *
+ * This is the transitions.dev "texts-reveal" technique — opacity, `translateY`
+ * and blur transitioned together on a smooth-out curve — kept strictly 2D. An
+ * earlier `rotateX` version could not survive a consumer that clips the label:
+ * each half collapsed into a sliver at its own hinge, so the flip never read as
+ * completing. A masked strip is both the sturdier mechanism and the closer
+ * match to the roller reference.
+ *
+ * Layout: the outgoing line is lifted out of flow and the mask is exactly one
+ * line tall, so the host's height never changes across a swap.
+ *
+ * Interruption: one swap is identified by a token. A `text` change mid-flight
+ * bumps the token, which re-keys both lines and restarts the animation from a
+ * known state — there is no partial transform to inherit. Settling is driven by
+ * the incoming line's `animationend` *and* by a token-guarded timer, so a
+ * dropped event or a throttled background tab still resolves to the settled
+ * DOM: exactly one line, no outgoing line, no transform.
+ *
+ * Accessibility: the visual lines are `aria-hidden`, the host carries
+ * `aria-label={text}`, and a visually hidden polite live region announces the
+ * settled string once.
+ *
+ * Reduced motion: no travel and no blur — the line crossfades in place.
+ */
+export declare function TextReveal({ text, as, revealDuration, align, className, style, }: TextRevealProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: CSSProperties | undefined;
+    "aria-label": string;
+    "data-align": TextRevealAlign;
+    "data-revealing": string;
+}, HTMLElement>;

package/dist/index.d.ts

@@ -29,6 +29,8 @@ export { Textarea, textareaVariants } from "./components/textarea/Textarea";
 export type { TextareaPreviewState, TextareaProps, TextareaResize, TextareaStatus, TextareaSurface, } from "./components/textarea/Textarea";
 export { Composer } from "./components/composer/Composer";
 export type { ComposerLabels, ComposerMode, ComposerPreviewState, ComposerProps, ComposerStatus, } from "./components/composer/Composer";
+export { ApprovalCard } from "./components/approval-card/ApprovalCard";
+export type { ApprovalCardAnswer, ApprovalCardLabels, ApprovalCardMode, ApprovalCardNavigationReason, ApprovalCardOption, ApprovalCardProps, ApprovalCardQuestion, } from "./components/approval-card/ApprovalCard";
 export { ComposerViewTransition } from "./components/composer/ComposerViewTransition";
 export type { ComposerView, ComposerViewTransitionProps, } from "./components/composer/ComposerViewTransition";
 export { ComposerAttachmentView } from "./components/composer/ComposerAttachmentView";
@@ -97,24 +99,30 @@ export { WorkspaceQuestionSurface } from "./patterns/workspace-app-shell/Workspa
 export type { WorkspaceAppShellNavigationRenderContext, WorkspaceAppShellNavigationRenderer, WorkspaceAppShellLayout, WorkspaceAppShellProps, WorkspaceNavigationConfiguration, } from "./patterns/workspace-app-shell/WorkspaceAppShell";
 export type { WorkspaceNewQuestionDialogProps, WorkspaceNewQuestionDraft, } from "./patterns/workspace-app-shell/WorkspaceNewQuestionDialog";
 export type { WorkspaceQuestionSurfacePanel, WorkspaceQuestionSurfaceProps, WorkspaceQuestionSurfaceScroll, } from "./patterns/workspace-app-shell/WorkspaceQuestionSurface";
+export { PIXEL_LOADER_DEFAULT_LABEL, PIXEL_LOADER_GRID, PixelLoader, pixelLoaderCellDelay, pixelLoaderCellPhase, pixelLoaderLitCellsAt, pixelLoaderVariants, } from "./components/pixel-loader/PixelLoader";
+export type { PixelLoaderProps, PixelLoaderSize, PixelLoaderVariant, } from "./components/pixel-loader/PixelLoader";
+export { DotField, dotFieldDistanceToRect, dotFieldExclusionAlpha, dotFieldFalloff, dotFieldInflateRect, } from "./components/dot-field/DotField";
+export type { DotFieldProps, DotFieldRect, } from "./components/dot-field/DotField";
 export { StatusOrb } from "./components/status-orb/StatusOrb";
 export type { StatusOrbProps, StatusOrbSize, StatusOrbState, StatusOrbTheme, } from "./components/status-orb/StatusOrb";
 export { FlapText, FLAP_TEXT_DEFAULT_DURATION_MS, FLAP_TEXT_DEFAULT_STAGGER_MS, } from "./components/flap-text/FlapText";
 export type { FlapTextAlign, FlapTextElement, FlapTextProps, } from "./components/flap-text/FlapText";
+export { TextReveal, TEXT_REVEAL_DEFAULT_DURATION_MS, } from "./components/text-reveal/TextReveal";
+export type { TextRevealAlign, TextRevealElement, TextRevealProps, } from "./components/text-reveal/TextReveal";
 export { NumberFlow, numberFlowCells, NUMBER_FLOW_DEFAULT_DURATION_MS, NUMBER_FLOW_DEFAULT_STAGGER_MS, } from "./components/number-flow/NumberFlow";
 export type { NumberFlowCell, NumberFlowDirection, NumberFlowElement, NumberFlowProps, NumberFlowSize, } from "./components/number-flow/NumberFlow";
-export { ApprovalCard } from "./components/approval-card/ApprovalCard";
-export type { ApprovalAnswers, ApprovalCardProps, ApprovalOption, ApprovalQuestion, } from "./components/approval-card/ApprovalCard";
 export { CodeBlock } from "./components/code-block/CodeBlock";
 export type { CodeBlockLabels, CodeBlockProps, CodeBlockRenderLineArgs, CodeBlockVariant, CodeLine, CodeLineKind, } from "./components/code-block/CodeBlock";
 export { CommandSearch } from "./components/command-search/CommandSearch";
-export type { CommandSearchItem, CommandSearchProps, } from "./components/command-search/CommandSearch";
+export type { CommandSearchItem, CommandSearchItemState, CommandSearchProps, } from "./components/command-search/CommandSearch";
 export { ContextCard, ContextCardList, FileTypeChip, } from "./components/context-cards/ContextCards";
 export type { ContextCardListProps, ContextCardProps, ContextFileType, FileTypeChipProps, } from "./components/context-cards/ContextCards";
 export { FilterTable, filterTableStatusLabels, filterTableStatuses, } from "./components/filter-table/FilterTable";
 export type { FilterTableProps, FilterTableRow, FilterTableStatus, FilterTableStatusLabelMap, } from "./components/filter-table/FilterTable";
-export { FlowchartAction, FlowchartCanvas, FlowchartCondition, FlowchartConnector, FlowchartTrigger, } from "./components/flowchart/Flowchart";
-export type { FlowchartActionProps, FlowchartCanvasProps, FlowchartClauseJoin, FlowchartConditionClause, FlowchartConditionProps, FlowchartConnectorProps, FlowchartConnectorVariant, FlowchartTriggerProps, } from "./components/flowchart/Flowchart";
+export { FlowchartAction, FlowchartCanvas, FlowchartCondition, FlowchartConnector, FlowchartGraph, FlowchartTrigger, } from "./components/flowchart/Flowchart";
+export type { FlowchartActionProps, FlowchartCanvasProps, FlowchartClauseJoin, FlowchartConditionClause, FlowchartConditionProps, FlowchartConnectorProps, FlowchartConnectorVariant, FlowchartGraphNode, FlowchartGraphProps, FlowchartTriggerProps, } from "./components/flowchart/Flowchart";
+export { FLOWCHART_GRAPH_MAX_LANES, FLOWCHART_GRAPH_MAX_NODES, layoutFlowchartGraph, } from "./components/flowchart/graphLayout";
+export type { FlowchartGraphEdge, FlowchartGraphLayout, FlowchartGraphNodeKind, } from "./components/flowchart/graphLayout";
 export { InsightCards } from "./components/insight-cards/InsightCards";
 export type { Insight, InsightCardsProps, InsightChart, InsightChartPoint, InsightComparison, InsightFollowUp, InsightSegment, InsightTone, } from "./components/insight-cards/InsightCards";
 export { PromptBar, readTriggerAtCaret, } from "./components/prompt-bar/PromptBar";