@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/dist/icons.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Decorative SVG on the 20×20 grid. Hidden from assistive technology unless
+ * `decorative` is false; meaning is carried by surrounding text.
+ */
+export function Icon({ className, viewBox = "0 0 20 20", fill = "none", stroke, strokeWidth, decorative = true, focusable = false, children, }) {
+    return (_jsx("svg", { className: className, viewBox: viewBox, fill: fill ?? undefined, stroke: stroke, strokeWidth: strokeWidth, "aria-hidden": decorative ? "true" : undefined, focusable: decorative && !focusable ? "false" : undefined, children: children }));
+}
+/** Round-capped currentColor stroke. */
+function Stroke({ d, width, fill, join = true, }) {
+    return (_jsx("path", { d: d, fill: fill, stroke: "currentColor", strokeWidth: width, strokeLinecap: "round", strokeLinejoin: join ? "round" : undefined }));
+}
+export function ChevronDown() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: "m6 8 4 4 4-4", width: "1.5" }) }));
+}
+export function ChevronLeft() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: "m12 5-5 5 5 5", width: "1.75" }) }));
+}
+export function ChevronRight() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: "m8 5 5 5-5 5", width: "1.75" }) }));
+}
+/**
+ * Check mark. The three call sites predate this module and differ:
+ * `option` (listbox/combobox selected option), `list` (CheckList, 16×16 grid,
+ * fill on the path) and `step` (ProgressSteps circles: stroke on the svg,
+ * heavier weight, not aria-hidden because its marker span already is).
+ */
+export function Check({ variant = "option", className, }) {
+    if (variant === "list")
+        return (_jsx(Icon, { viewBox: "0 0 16 16", fill: null, children: _jsx(Stroke, { d: "M3.5 8.5 6.5 11.5 12.5 4.5", width: "1.75", fill: "none" }) }));
+    if (variant === "step")
+        return (_jsx(Icon, { stroke: "currentColor", strokeWidth: "2.5", decorative: false, children: _jsx("path", { d: "M5 10.5l3.5 3.5L15 7", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    return (_jsx(Icon, { className: className, children: _jsx(Stroke, { d: "m5 10 3.5 3.5L15 7", width: "1.75" }) }));
+}
+export function Close() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: "m5 5 10 10M15 5 5 15", width: "1.75", join: false }) }));
+}
+export function ArrowUp() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: "M10 15V5m0 0-4 4m4-4 4 4", width: "1.75" }) }));
+}
+export function ArrowDown() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: "M10 5v10m0 0-4-4m4 4 4-4", width: "1.75" }) }));
+}
+export function Star() {
+    return (_jsx(Icon, { fill: null, children: _jsx("path", { d: "M10 1.8l2.5 5.3 5.8.7-4.3 4 1.1 5.7L10 14.7l-5.1 2.8 1.1-5.7-4.3-4 5.8-.7z", fill: "currentColor" }) }));
+}
+export function Paperclip() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: "M7 10.5l5-5a2.5 2.5 0 0 1 3.5 3.5l-6.5 6.5a4 4 0 0 1-5.7-5.7l6.2-6.2", width: "1.5" }) }));
+}
+/** Generic person silhouette for avatars without a photo (24×24 grid, filled). */
+export function Person({ className }) {
+    return (_jsx(Icon, { className: className, viewBox: "0 0 24 24", fill: "currentColor", focusable: true, children: _jsx("path", { d: "M24 20.993V24H0v-2.996A14.977 14.977 0 0 1 12.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 1 1-8 0 4 4 0 0 1 8 0z" }) }));
+}
+/** Table sort indicator; the active direction's chevron is marked data-active. */
+export function SortArrows({ direction, }) {
+    return (_jsxs(Icon, { viewBox: "0 0 12 12", fill: null, children: [_jsx("path", { d: "M3.5 4.5 6 2l2.5 2.5", "data-active": direction === "ascending" || undefined }), _jsx("path", { d: "M3.5 7.5 6 10l2.5-2.5", "data-active": direction === "descending" || undefined })] }));
+}
+const EYE = "M1.75 10S4.75 4.25 10 4.25 18.25 10 18.25 10 15.25 15.75 10 15.75 1.75 10 1.75 10zM10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z";
+/** Open eye: shown while a password is hidden. */
+export function Eye() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: EYE, width: "1.5" }) }));
+}
+/** Struck-through eye: shown while a password is visible. */
+export function EyeOff() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: EYE + "M3 3l14 14", width: "1.5" }) }));
+}
+/** Hollow circle: a requirement that is not met yet. */
+export function Circle() {
+    return (_jsx(Icon, { children: _jsx(Stroke, { d: "M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10z", width: "1.5" }) }));
+}

package/dist/illustration.d.ts

@@ -0,0 +1,47 @@
+/** A point in the drawing, in the illustration's viewBox units. */
+export interface NetworkNode {
+    id: string;
+    x: number;
+    y: number;
+    /** Short text drawn under the node. */
+    label?: string;
+    /** accent: the brand's accent fill, to pick out a node. */
+    tone?: "default" | "accent";
+}
+/** A straight connection between two node ids. */
+export interface NetworkConnection {
+    from: string;
+    to: string;
+    /** Whether a signal travels from `from` to `to`. Default true. */
+    signal?: boolean;
+    /** Seconds for this signal to cross; defaults to the illustration's duration. */
+    duration?: number;
+    /** Seconds before this signal starts; defaults to an even stagger. */
+    delay?: number;
+}
+/**
+ * A lightweight network drawing: nodes and connections supplied as data, with
+ * optional signals travelling along the connections. Decorative unless it has
+ * a label. The animation is illustrative: it never represents live activity.
+ */
+export declare function NetworkIllustration({ nodes, connections, width, height, label, description, motion, duration, paused, onPausedChange, id, className, }: {
+    nodes: NetworkNode[];
+    connections: NetworkConnection[];
+    /** Width of the viewBox; the drawing scales to its container. */
+    width?: number;
+    /** Height of the viewBox. */
+    height?: number;
+    /** Makes the drawing informative: an image with this accessible name. Omitted, it is decorative and hidden from assistive technology. */
+    label?: string;
+    /** With a label, a longer description of what the drawing shows. */
+    description?: string;
+    /** auto: signals travel where connections carry one, with a pause control. static: the same drawing without motion. */
+    motion?: "auto" | "static";
+    /** Seconds for a signal to cross a connection. */
+    duration?: number;
+    /** Whether the user has paused the animation; pass with onPausedChange to control it or share it between illustrations. */
+    paused?: boolean;
+    onPausedChange?: (paused: boolean) => void;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/illustration.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { componentRoot, cx, useDomId, usePlayback } from "./internal.js";
+const NODE_RADIUS = 8;
+const SIGNAL_RADIUS = 4;
+/**
+ * A lightweight network drawing: nodes and connections supplied as data, with
+ * optional signals travelling along the connections. Decorative unless it has
+ * a label. The animation is illustrative: it never represents live activity.
+ */
+export function NetworkIllustration({ nodes, connections, width = 480, height = 320, label, description, motion = "auto", duration = 3, paused, onPausedChange, id, className, }) {
+    const ref = useRef(null);
+    const titleId = useDomId("m-network-title");
+    const descId = useDomId("m-network-desc");
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const links = connections.flatMap((connection) => {
+        const from = byId.get(connection.from);
+        const to = byId.get(connection.to);
+        return from && to ? [{ ...connection, a: from, b: to }] : [];
+    });
+    const carriers = links.filter((link) => link.signal !== false);
+    const animated = motion === "auto" && carriers.length > 0;
+    const { reason, reduced, userPaused, toggle } = usePlayback(ref, {
+        paused,
+        onPausedChange,
+        enabled: animated,
+    });
+    const informative = Boolean(label);
+    return (_jsxs("div", { ref: ref, id: id, className: cx("m-network", className), ...componentRoot("NetworkIllustration"), "data-motion": motion === "static" ? "static" : undefined, "data-paused": animated ? (reason ?? undefined) : undefined, children: [_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, ...(informative
+                    ? {
+                        role: "img",
+                        "aria-labelledby": titleId,
+                        "aria-describedby": description ? descId : undefined,
+                    }
+                    : { "aria-hidden": true, focusable: false }), children: [informative && _jsx("title", { id: titleId, children: label }), informative && description && _jsx("desc", { id: descId, children: description }), links.map((link, index) => (_jsx("line", { className: "m-network-link", x1: link.a.x, y1: link.a.y, x2: link.b.x, y2: link.b.y }, `${link.from}:${link.to}:${index}`))), animated &&
+                        !reduced &&
+                        carriers.map((link, index) => {
+                            const time = link.duration ?? duration;
+                            const delay = link.delay ?? -((index * time) / carriers.length);
+                            return (_jsx("circle", { className: "m-network-signal", r: SIGNAL_RADIUS, style: {
+                                    "--m-signal-from": `${link.a.x}px ${link.a.y}px`,
+                                    "--m-signal-to": `${link.b.x}px ${link.b.y}px`,
+                                    animationDuration: `${time}s`,
+                                    animationDelay: delay ? `${delay}s` : undefined,
+                                } }, `${link.from}:${link.to}:${index}`));
+                        }), nodes.map((node) => (_jsx("circle", { className: "m-network-node", cx: node.x, cy: node.y, r: NODE_RADIUS, "data-tone": node.tone === "accent" ? "accent" : undefined }, node.id))), nodes.map((node) => node.label && (_jsx("text", { className: "m-network-label", x: node.x, y: node.y + NODE_RADIUS + 16, textAnchor: "middle", children: node.label }, node.id)))] }), animated && !reduced && (_jsx("button", { type: "button", className: "m-network-toggle", onClick: toggle, children: userPaused ? "Play animation" : "Pause animation" }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+export { ThemeProvider, AppearanceControl } from "./foundation.js";
+export type { BrandDefinition, BrandAppearanceTokens } from "./brand.js";
+export type { ThemeProviderProps, Appearance, Brand, Density, } from "./foundation.js";
+export { Button, ButtonGroup, ActionLink, Input, Select, TextArea, Checkbox, Fieldset, RadioGroup, Switch, Badge, Tabs, Modal, Dropdown, Notice, EmptyState, ErrorSummary, } from "./primitives.js";
+export type { ButtonProps, ButtonGroupItem, DropdownItem, ErrorSummaryItem, InputProps, LinkAction, Tone, } from "./primitives.js";
+export { AppShell, PageHeading, MetricGroup, DataTable, Table, Pagination, SettingsSection, ActivityFeed, SignInPanel, Sidebar, Navbar, StackedShell, Breadcrumbs, ProgressSteps, TabNav, ActionPanel, } from "./application.js";
+export type { AppShellProps, NavigationItem, DataTableProps, DataTableColumn, TableSort, SortDirection, SignInProvider, SidebarProps, BreadcrumbItem, ProgressStep, TabNavItem, StackedShellProps, NavbarProps, BreadcrumbsProps, TabNavProps, ProgressStepsProps, ActionPanelProps, PageHeadingProps, MetricGroupProps, TableProps, PaginationProps, SettingsSectionProps, ActivityFeedProps, SignInPanelProps, } from "./application.js";
+export { AuthLayout, ProviderButtons, PasswordInput, CodeInput, } from "./auth.js";
+export type { AuthLayoutProps, ProviderButtonsProps, PasswordInputProps, PasswordRequirement, PasswordStrength, CodeInputProps, } from "./auth.js";
+export { MarketingHeader, MarketingPage, Hero, FeatureGrid, FeatureSection, ProcessSteps, Testimonial, LogoCloud, Pricing, FAQ, CallToAction, Footer, HeaderSection, ContentSection, } from "./marketing.js";
+export type { PricingPlan, PricingExtra, HeaderLink, FlyoutItem, } from "./marketing.js";
+export { SegmentedControl, CodeBlock, PreviewFrame } from "./inspection.js";
+export { Avatar, AvatarGroup, Kbd, ProgressBar, FilterChip, CheckList, DescriptionList, GridList, AttachmentList, } from "./display.js";
+export type { GridListItem, Attachment, AvatarProps, AvatarGroupProps, KbdProps, ProgressBarProps, FilterChipProps, CheckListProps, DescriptionListProps, GridListProps, AttachmentListProps, } from "./display.js";
+export { Stack, Container, Text, Section, Divider, Card, MediaObject, SectionHeading, Prose, } from "./layout.js";
+export type { SectionTone, StackProps, ContainerProps, TextProps, SectionProps, DividerProps, CardProps, MediaObjectProps, SectionHeadingProps, ProseProps, } from "./layout.js";
+export { MockWindow, ChatPreview } from "./showcase.js";
+export type { ChatMessage } from "./showcase.js";
+export { Toast, Toaster, ConfirmDialog, SaveBar, Banner } from "./feedback.js";
+export type { ToastItem, ToastAction } from "./feedback.js";
+export { SlideOver, CommandPalette, StackedList } from "./workspace.js";
+export type { CommandItem, StackedListItem, SlideOverProps, CommandPaletteProps, StackedListProps, } from "./workspace.js";
+export { BentoGrid, StatGroup, TestimonialGrid, PlanComparison, PostList, TeamGrid, ContactSection, Newsletter, NotFound, } from "./marketing-sections.js";
+export { DocsShell, SearchTrigger, SearchDialog, Steps, Callout, FileTree, CodeTabs, Release, ApiEndpoint, PageFeedback, PagerLinks, LinkCards, } from "./docs.js";
+export type { DocsShellProps, FileNode } from "./docs.js";
+export { Listbox, Combobox } from "./choice.js";
+export type { ChoiceOption } from "./choice.js";
+export { Calendar } from "./calendar.js";
+export type { CalendarEvent, CalendarView, CalendarProps } from "./calendar.js";
+export { ProductList, ProductOverview, ShoppingCart, OrderSummary, ProductQuickView, ProductFilters, ProductReviews, OrderHistory, } from "./ecommerce.js";
+export type { ProductImage, ProductCard, ProductOption, CartItem, FilterFacet, Review, Order, ProductListProps, ProductOverviewProps, ShoppingCartProps, } from "./ecommerce.js";
+export { CommentComposer } from "./composer.js";
+export type { LinkItem, ItemGroup } from "./navigation.js";
+export type { HeadingLevel } from "./heading.js";
+export { NetworkIllustration } from "./illustration.js";
+export type { NetworkNode, NetworkConnection } from "./illustration.js";

package/dist/index.js

@@ -0,0 +1,18 @@
+export { ThemeProvider, AppearanceControl } from "./foundation.js";
+export { Button, ButtonGroup, ActionLink, Input, Select, TextArea, Checkbox, Fieldset, RadioGroup, Switch, Badge, Tabs, Modal, Dropdown, Notice, EmptyState, ErrorSummary, } from "./primitives.js";
+export { AppShell, PageHeading, MetricGroup, DataTable, Table, Pagination, SettingsSection, ActivityFeed, SignInPanel, Sidebar, Navbar, StackedShell, Breadcrumbs, ProgressSteps, TabNav, ActionPanel, } from "./application.js";
+export { AuthLayout, ProviderButtons, PasswordInput, CodeInput, } from "./auth.js";
+export { MarketingHeader, MarketingPage, Hero, FeatureGrid, FeatureSection, ProcessSteps, Testimonial, LogoCloud, Pricing, FAQ, CallToAction, Footer, HeaderSection, ContentSection, } from "./marketing.js";
+export { SegmentedControl, CodeBlock, PreviewFrame } from "./inspection.js";
+export { Avatar, AvatarGroup, Kbd, ProgressBar, FilterChip, CheckList, DescriptionList, GridList, AttachmentList, } from "./display.js";
+export { Stack, Container, Text, Section, Divider, Card, MediaObject, SectionHeading, Prose, } from "./layout.js";
+export { MockWindow, ChatPreview } from "./showcase.js";
+export { Toast, Toaster, ConfirmDialog, SaveBar, Banner } from "./feedback.js";
+export { SlideOver, CommandPalette, StackedList } from "./workspace.js";
+export { BentoGrid, StatGroup, TestimonialGrid, PlanComparison, PostList, TeamGrid, ContactSection, Newsletter, NotFound, } from "./marketing-sections.js";
+export { DocsShell, SearchTrigger, SearchDialog, Steps, Callout, FileTree, CodeTabs, Release, ApiEndpoint, PageFeedback, PagerLinks, LinkCards, } from "./docs.js";
+export { Listbox, Combobox } from "./choice.js";
+export { Calendar } from "./calendar.js";
+export { ProductList, ProductOverview, ShoppingCart, OrderSummary, ProductQuickView, ProductFilters, ProductReviews, OrderHistory, } from "./ecommerce.js";
+export { CommentComposer } from "./composer.js";
+export { NetworkIllustration } from "./illustration.js";

package/dist/inspection.d.ts

@@ -0,0 +1,24 @@
+export declare function SegmentedControl({ label, value, options, onChange, className, }: {
+    label: string;
+    value: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (value: string) => void;
+    className?: string;
+}): import("react").JSX.Element;
+/** A scrollable code sample in a figure; the caption names the figure. */
+export declare function CodeBlock({ code, label, className, }: {
+    code: string;
+    /** Visible caption, and the figure's accessible name. */
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function PreviewFrame({ label, src, id, className, }: {
+    /** Accessible name of the section and the frame. */
+    label: string;
+    src: string;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/inspection.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KitLink } from "./navigation.js";
+import { componentRoot, cx, useComponentName } from "./internal.js";
+export function SegmentedControl({ label, value, options, onChange, className, }) {
+    const name = useComponentName("SegmentedControl");
+    return (_jsx("div", { ...componentRoot(name), className: cx("m-segmented", className), role: "group", "aria-label": label, children: options.map((option) => (_jsx("button", { type: "button", "aria-pressed": value === option.value, onClick: () => onChange(option.value), children: option.label }, option.value))) }));
+}
+/** A scrollable code sample in a figure; the caption names the figure. */
+export function CodeBlock({ code, label = "Code", className, }) {
+    return (_jsxs("figure", { ...componentRoot("CodeBlock"), className: cx("m-code-block", className), children: [_jsx("figcaption", { children: label }), _jsx("pre", { tabIndex: 0, children: _jsx("code", { children: code }) })] }));
+}
+export function PreviewFrame({ label, src, id, className, }) {
+    return (_jsxs("section", { id: id, ...componentRoot("PreviewFrame"), className: cx("m-preview-frame", className), "aria-label": label, children: [_jsx(KitLink, { href: src, target: "_blank", rel: "noopener noreferrer", children: "Open full preview" }), _jsx("iframe", { title: label, src: src, sandbox: "allow-scripts", referrerPolicy: "no-referrer" })] }));
+}