@tonycodes-ui/mortar 0.0.0-stage → 0.11.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/index.d.ts

@@ -0,0 +1,34 @@
+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, 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";

package/dist/index.js

@@ -0,0 +1,17 @@
+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, 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";

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" })] }));
+}