@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/ui/components/Semantic.js

@@ -1,18 +1,116 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { buildSurfaceClasses } from "./surface-tokens";
-export const Section = React.forwardRef(({ className = "", surface, padding, rounded, border, shadow, children, ...props }, ref) => (_jsx("section", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ref: ref, ...props, children: children })));
+const SECTION_TONE_MAP = {
+    plain: "",
+    "page-header": "appkit-section--tone-page-header",
+    hero: "appkit-section--tone-hero",
+    "accent-banner": "appkit-section--tone-accent-banner",
+};
+const SEMANTIC_COLOR_MAP = {
+    default: "",
+    primary: "appkit-color--primary",
+    muted: "appkit-color--muted",
+    faint: "appkit-color--faint",
+    inverse: "appkit-color--inverse",
+    success: "appkit-color--success",
+    warning: "appkit-color--warning",
+    error: "appkit-color--error",
+    info: "appkit-color--info",
+};
+const SECTION_LAYOUT_MAP = {
+    default: "",
+    flex: "flex",
+    "flex-col": "flex flex-col",
+    "flex-sm-row": "flex flex-col sm:flex-row",
+    "flex-sm-row-between": "flex flex-col sm:flex-row sm:items-center sm:justify-between",
+};
+const SECTION_GAP_MAP = {
+    none: "",
+    xs: "gap-2",
+    sm: "gap-3",
+    md: "gap-4",
+    lg: "gap-6",
+};
+const SECTION_ALIGN_MAP = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline",
+};
+const SECTION_JUSTIFY_MAP = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly",
+};
+export const Section = React.forwardRef(({ tone = "plain", color, layout, gap, align, justify, className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, children, ...props }, ref) => (_jsx("section", { className: [
+        SECTION_TONE_MAP[tone],
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
+        color ? SEMANTIC_COLOR_MAP[color] : "",
+        layout ? SECTION_LAYOUT_MAP[layout] : "",
+        gap ? SECTION_GAP_MAP[gap] : "",
+        align ? SECTION_ALIGN_MAP[align] : "",
+        justify ? SECTION_JUSTIFY_MAP[justify] : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" "), ref: ref, ...props, children: children })));
 Section.displayName = "Section";
-export function Article({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("article", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function Article({ className = "", surface, padding, rounded, border, shadow, color, children, ...props }) {
+    return (_jsx("article", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Main({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("main", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function Main({ className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, color, children, ...props }) {
+    return (_jsx("main", { className: [buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export const Aside = React.forwardRef(({ className = "", surface, padding, rounded, border, shadow, children, ...props }, ref) => (_jsx("aside", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ref: ref, ...props, children: children })));
+export const Aside = React.forwardRef(({ className = "", surface, padding, rounded, border, shadow, color, children, ...props }, ref) => (_jsx("aside", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ref: ref, ...props, children: children })));
 Aside.displayName = "Aside";
-export function Nav({ className = "", children, ...props }) {
-    return (_jsx("nav", { className: className, ...props, children: children }));
+const NAV_TEXT_SIZE_MAP = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+};
+const NAV_SPACING_MAP = {
+    none: "",
+    xs: "space-y-1",
+    sm: "space-y-2",
+    md: "space-y-3",
+    lg: "space-y-4",
+    xl: "space-y-6",
+};
+const NAV_GAP_MAP = {
+    none: "",
+    "2xs": "gap-1.5",
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+};
+const NAV_LAYOUT_MAP = {
+    default: "",
+    flex: "flex items-center",
+    "flex-wrap": "flex items-center flex-wrap",
+};
+const NAV_COLOR_MAP = {
+    default: "",
+    primary: "appkit-color--primary",
+    muted: "appkit-color--muted",
+    faint: "appkit-color--faint",
+};
+export function Nav({ surface, padding, rounded, border, shadow, spacing, gap, layout, color, textSize, className = "", children, ...props }) {
+    return (_jsx("nav", { className: [
+            buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
+            spacing ? NAV_SPACING_MAP[spacing] : "",
+            gap ? NAV_GAP_MAP[gap] : "",
+            layout ? NAV_LAYOUT_MAP[layout] : "",
+            color ? NAV_COLOR_MAP[color] : "",
+            textSize ? NAV_TEXT_SIZE_MAP[textSize] : "",
+            className,
+        ].filter(Boolean).join(" "), ...props, children: children }));
 }
 export function BlockHeader({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
     return (_jsx("header", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
@@ -20,14 +118,113 @@ export function BlockHeader({ className = "", surface, padding, rounded, border,
 export function BlockFooter({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
     return (_jsx("footer", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Ul({ className = "", children, ...props }) {
-    return (_jsx("ul", { className: className, ...props, children: children }));
-}
-export function Ol({ className = "", children, ...props }) {
-    return (_jsx("ol", { className: className, ...props, children: children }));
+const LIST_MARKER_MAP = {
+    disc: "appkit-list--marker-disc",
+    decimal: "appkit-list--marker-decimal",
+    none: "appkit-list--marker-none",
+    check: "appkit-list--marker-check",
+    arrow: "appkit-list--marker-arrow",
+};
+const LIST_SPACING_MAP = {
+    none: "",
+    "2xs": "space-y-0.5",
+    tight: "appkit-list--spacing-tight",
+    comfortable: "appkit-list--spacing-comfortable",
+    loose: "appkit-list--spacing-loose",
+};
+const LIST_INDENT_MAP = {
+    none: "",
+    sm: "pl-2",
+    md: "pl-4",
+    lg: "pl-5",
+    xl: "pl-6",
+};
+const LIST_SIZE_MAP = {
+    xs: "appkit-text--xs",
+    sm: "appkit-text--sm",
+    base: "appkit-text--base",
+    lg: "appkit-text--lg",
+};
+const LIST_COLOR_MAP = {
+    default: "",
+    primary: "appkit-color--primary",
+    muted: "appkit-color--muted",
+    faint: "appkit-color--faint",
+};
+const UL_PADDING_X_MAP = {
+    none: "",
+    "x-xs": "px-2",
+    "x-sm": "px-3",
+    "x-md": "px-4",
+    "x-lg": "px-6",
+};
+const UL_PADDING_Y_MAP = {
+    none: "",
+    "y-2xs": "py-1",
+    "y-xs": "py-2",
+    "y-sm": "py-3",
+    "y-md": "py-4",
+    "y-lg": "py-6",
+    "y-bottom-xs": "pb-1",
+};
+export const Ul = React.forwardRef(({ marker, spacing, indent, paddingX, paddingY, size, color, className = "", children, ...props }, ref) => (_jsx("ul", { ref: ref, className: [
+        marker ? LIST_MARKER_MAP[marker] : "",
+        spacing ? LIST_SPACING_MAP[spacing] : "",
+        indent ? LIST_INDENT_MAP[indent] : "",
+        paddingX ? UL_PADDING_X_MAP[paddingX] : "",
+        paddingY ? UL_PADDING_Y_MAP[paddingY] : "",
+        size ? LIST_SIZE_MAP[size] : "",
+        color ? LIST_COLOR_MAP[color] : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" "), ...props, children: children })));
+Ul.displayName = "Ul";
+export function Ol({ marker = "decimal", spacing, indent, size, color, className = "", children, ...props }) {
+    return (_jsx("ol", { className: [
+            LIST_MARKER_MAP[marker],
+            spacing ? LIST_SPACING_MAP[spacing] : "",
+            indent ? LIST_INDENT_MAP[indent] : "",
+            size ? LIST_SIZE_MAP[size] : "",
+            color ? LIST_COLOR_MAP[color] : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), ...props, children: children }));
 }
-export function Li({ className = "", children, ...props }) {
-    return (_jsx("li", { className: className, ...props, children: children }));
+const LI_LAYOUT_MAP = {
+    default: "",
+    flex: "flex",
+    "flex-start": "flex items-start",
+    "flex-center": "flex items-center",
+};
+const LI_GAP_MAP = {
+    none: "",
+    "1": "gap-1",
+    "2": "gap-2",
+    "3": "gap-3",
+    "4": "gap-4",
+};
+const LI_TEXT_SIZE_MAP = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+};
+const LI_COLOR_MAP = {
+    default: "",
+    muted: "text-[var(--appkit-color-text-muted)]",
+    faint: "text-[var(--appkit-color-text-faint)]",
+};
+export function Li({ layout, gap, textSize, color, className = "", children, ...props }) {
+    const classes = [
+        layout ? LI_LAYOUT_MAP[layout] : "",
+        gap ? LI_GAP_MAP[gap] : "",
+        textSize ? LI_TEXT_SIZE_MAP[textSize] : "",
+        color ? LI_COLOR_MAP[color] : "",
+        className,
+    ].filter(Boolean).join(" ");
+    return (_jsx("li", { className: classes, ...props, children: children }));
 }
 const TABLE_VARIANT_MAP = {
     default: "appkit-table--default",
@@ -42,20 +239,131 @@ const TABLE_SIZE_MAP = {
 export function Table({ variant = "default", size = "md", stickyHeader = false, className = "", surface, padding, rounded, border, shadow, children, ...props }) {
     return (_jsx("table", { className: ["appkit-table", TABLE_VARIANT_MAP[variant], TABLE_SIZE_MAP[size], stickyHeader ? "appkit-table--sticky-header" : "", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Thead({ className = "", children, ...props }) {
-    return (_jsx("thead", { className: ["appkit-thead", className].filter(Boolean).join(" "), ...props, children: children }));
+const THEAD_SURFACE_MAP = {
+    none: "",
+    default: "bg-[var(--appkit-color-surface)]",
+    muted: "bg-[var(--appkit-color-bg)]",
+    subtle: "bg-[var(--appkit-color-surface-elevated)]",
+};
+export function Thead({ surface, className = "", children, ...props }) {
+    return (_jsx("thead", { className: [
+            "appkit-thead",
+            surface ? THEAD_SURFACE_MAP[surface] : "",
+            className,
+        ].filter(Boolean).join(" "), ...props, children: children }));
 }
 export function Tbody({ className = "", children, ...props }) {
     return (_jsx("tbody", { className: ["appkit-tbody", className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Tr({ hover = false, className = "", children, ...props }) {
-    return (_jsx("tr", { className: ["appkit-tr", hover ? "appkit-tr--hover" : "", className].filter(Boolean).join(" "), ...props, children: children }));
+const TR_BORDER_MAP = {
+    none: "",
+    default: "border-b border-[var(--appkit-color-border)]",
+    subtle: "border-b border-[var(--appkit-color-border-subtle)]",
+    strong: "border-b border-[var(--appkit-color-border-strong)]",
+};
+const TR_SURFACE_MAP = {
+    none: "",
+    default: "bg-[var(--appkit-color-surface)]",
+    muted: "bg-[var(--appkit-color-bg)]",
+    subtle: "bg-[var(--appkit-color-surface-elevated)]",
+};
+export function Tr({ hover = false, border, surface, className = "", children, ...props }) {
+    return (_jsx("tr", { className: [
+            "appkit-tr",
+            hover ? "appkit-tr--hover" : "",
+            border ? TR_BORDER_MAP[border] : "",
+            surface ? TR_SURFACE_MAP[surface] : "",
+            className,
+        ].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Th({ align, className = "", children, ...props }) {
-    return (_jsx("th", { className: ["appkit-th", align ? `text-${align}` : "", className].filter(Boolean).join(" "), ...props, children: children }));
+const CELL_PADDING_MAP = {
+    none: "",
+    xs: "px-2 py-1",
+    "xs-tall": "px-2 py-2",
+    "xs-3": "px-2 py-3",
+    sm: "px-3 py-2",
+    "sm-tall": "px-3 py-4",
+    md: "px-4 py-3",
+    lg: "px-6 py-4",
+    "lg-tight": "px-6 py-2",
+    "lg-3": "px-6 py-3",
+    compact: "px-2 py-1.5",
+};
+const CELL_PADDING_X_MAP = {
+    none: "",
+    xs: "px-2",
+    sm: "px-3",
+    md: "px-4",
+    lg: "px-6",
+    // alias: leave open
+};
+const CELL_PADDING_Y_MAP = {
+    none: "",
+    "2xs": "py-1",
+    xs: "py-1.5",
+    sm: "py-2",
+    md: "py-3",
+};
+const CELL_PADDING_SIDE_MAP = {
+    none: "",
+    "pr-md": "pr-4",
+    "pl-md": "pl-4",
+    "pr-lg": "pr-6",
+    "pl-lg": "pl-6",
+    "pt-md": "pt-4",
+    "pb-md": "pb-4",
+};
+const CELL_COLOR_MAP = {
+    default: "",
+    primary: "appkit-color--primary",
+    muted: "appkit-color--muted",
+    faint: "appkit-color--faint",
+    success: "appkit-color--success",
+    warning: "appkit-color--warning",
+    error: "appkit-color--error",
+    info: "appkit-color--info",
+};
+const CELL_SIZE_MAP = {
+    xs: "appkit-text--xs",
+    sm: "appkit-text--sm",
+    base: "appkit-text--base",
+    lg: "appkit-text--lg",
+    xl: "appkit-text--xl",
+    "2xl": "appkit-text--2xl",
+};
+const CELL_WEIGHT_MAP = {
+    normal: "appkit-font--normal",
+    medium: "appkit-font--medium",
+    semibold: "appkit-font--semibold",
+    bold: "appkit-font--bold",
+};
+export function Th({ align, size, weight, padding, paddingX, paddingY, paddingSide, color, className = "", children, ...props }) {
+    return (_jsx("th", { className: [
+            "appkit-th",
+            align ? `text-${align}` : "",
+            size ? CELL_SIZE_MAP[size] : "",
+            weight ? CELL_WEIGHT_MAP[weight] : "",
+            padding ? CELL_PADDING_MAP[padding] : "",
+            paddingX ? CELL_PADDING_X_MAP[paddingX] : "",
+            paddingY ? CELL_PADDING_Y_MAP[paddingY] : "",
+            paddingSide ? CELL_PADDING_SIDE_MAP[paddingSide] : "",
+            color ? CELL_COLOR_MAP[color] : "",
+            className,
+        ].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Td({ align, className = "", children, ...props }) {
-    return (_jsx("td", { className: ["appkit-td", align ? `text-${align}` : "", className].filter(Boolean).join(" "), ...props, children: children }));
+export function Td({ align, size, weight, padding, paddingX, paddingY, paddingSide, color, className = "", children, ...props }) {
+    return (_jsx("td", { className: [
+            "appkit-td",
+            align ? `text-${align}` : "",
+            size ? CELL_SIZE_MAP[size] : "",
+            weight ? CELL_WEIGHT_MAP[weight] : "",
+            padding ? CELL_PADDING_MAP[padding] : "",
+            paddingX ? CELL_PADDING_X_MAP[paddingX] : "",
+            paddingY ? CELL_PADDING_Y_MAP[paddingY] : "",
+            paddingSide ? CELL_PADDING_SIDE_MAP[paddingSide] : "",
+            color ? CELL_COLOR_MAP[color] : "",
+            className,
+        ].filter(Boolean).join(" "), ...props, children: children }));
 }
 const CODE_COLOR_MAP = {
     default: "appkit-code--default",
@@ -63,8 +371,40 @@ const CODE_COLOR_MAP = {
     error: "appkit-code--error",
     success: "appkit-code--success",
 };
-export function Code({ color = "default", className = "", children, ...props }) {
-    return (_jsx("code", { className: ["appkit-code", CODE_COLOR_MAP[color], className].filter(Boolean).join(" "), ...props, children: children }));
+const CODE_SIZE_MAP = {
+    xs: "appkit-text--xs",
+    sm: "appkit-text--sm",
+    base: "appkit-text--base",
+};
+const CODE_PADDING_MAP = {
+    none: "",
+    xs: "px-1",
+    sm: "px-1.5 py-0.5",
+    inline: "px-1 py-0.5",
+};
+const CODE_ROUNDED_MAP = {
+    none: "",
+    default: "rounded",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+};
+const CODE_SURFACE_MAP = {
+    none: "",
+    muted: "bg-[var(--appkit-color-bg)]",
+    subtle: "bg-[var(--appkit-color-border-subtle)]",
+    default: "bg-[var(--appkit-color-surface)]",
+};
+export function Code({ color = "default", size, padding, rounded, surface, className = "", children, ...props }) {
+    return (_jsx("code", { className: [
+            "appkit-code",
+            CODE_COLOR_MAP[color],
+            size ? CODE_SIZE_MAP[size] : "",
+            padding ? CODE_PADDING_MAP[padding] : "",
+            rounded ? CODE_ROUNDED_MAP[rounded] : "",
+            surface ? CODE_SURFACE_MAP[surface] : "",
+            className,
+        ].filter(Boolean).join(" "), ...props, children: children }));
 }
 export function Pre({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
     return (_jsx("pre", { className: ["appkit-pre", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
@@ -84,12 +424,39 @@ export function Figure({ className = "", surface, padding, rounded, border, shad
 export function Figcaption({ className = "", children, ...props }) {
     return (_jsx("figcaption", { className: ["appkit-figcaption", className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Dl({ variant = "stacked", className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("dl", { className: ["appkit-dl", variant === "inline" ? "appkit-dl--inline" : "appkit-dl--stacked", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function Dl({ variant = "stacked", divide, className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    const divideCls = divide
+        ? divide === "subtle"
+            ? "appkit-stack--divide-subtle"
+            : "appkit-stack--divide"
+        : "";
+    return (_jsx("dl", { className: ["appkit-dl", variant === "inline" ? "appkit-dl--inline" : "appkit-dl--stacked", divideCls, buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Dt({ className = "", children, ...props }) {
-    return (_jsx("dt", { className: ["appkit-dt", className].filter(Boolean).join(" "), ...props, children: children }));
+const DT_DD_COLOR_MAP = {
+    default: "",
+    primary: "appkit-color--primary",
+    muted: "appkit-color--muted",
+    faint: "appkit-color--faint",
+};
+const DT_DD_WEIGHT_MAP = {
+    normal: "appkit-font--normal",
+    medium: "appkit-font--medium",
+    semibold: "appkit-font--semibold",
+    bold: "appkit-font--bold",
+};
+export function Dt({ color, weight, className = "", children, ...props }) {
+    return (_jsx("dt", { className: [
+            "appkit-dt",
+            color ? DT_DD_COLOR_MAP[color] : "",
+            weight ? DT_DD_WEIGHT_MAP[weight] : "",
+            className,
+        ].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Dd({ className = "", children, ...props }) {
-    return (_jsx("dd", { className: ["appkit-dd", className].filter(Boolean).join(" "), ...props, children: children }));
+export function Dd({ color, weight, className = "", children, ...props }) {
+    return (_jsx("dd", { className: [
+            "appkit-dd",
+            color ? DT_DD_COLOR_MAP[color] : "",
+            weight ? DT_DD_WEIGHT_MAP[weight] : "",
+            className,
+        ].filter(Boolean).join(" "), ...props, children: children }));
 }

package/dist/ui/components/SideDrawer.d.ts

@@ -20,7 +20,7 @@ export interface SideDrawerProps {
  * @example
  * ```tsx
  * <SideDrawer isOpen={open} onClose={() => setOpen(false)} title="Edit product" mode="edit" isDirty={isDirty}>
- *   <MyForm />
+ * <MyForm />
  * </SideDrawer>
  * ```
  */

package/dist/ui/components/SideDrawer.js

@@ -61,7 +61,7 @@ function handleFocusTrap(e, first, last) {
  * @example
  * ```tsx
  * <SideDrawer isOpen={open} onClose={() => setOpen(false)} title="Edit product" mode="edit" isDirty={isDirty}>
- *   <MyForm />
+ * <MyForm />
  * </SideDrawer>
  * ```
  */

package/dist/ui/components/SideModal.js

@@ -58,5 +58,5 @@ export function SideModal({ isOpen, onClose, title, side = "right", children, cl
                         className,
                     ]
                         .filter(Boolean)
-                        .join(" "), initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, children: [title && (_jsxs(Div, { className: "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-neutral-900 dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children })] })] })) }));
+                        .join(" "), initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, children: [title && (_jsxs(Div, { className: "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-neutral-900 dark:text-neutral-100 dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children })] })] })) }));
 }

package/dist/ui/components/SiteLogo.d.ts

@@ -1,26 +1,27 @@
+export type SiteLogoSize = "sm" | "md" | "lg" | "xl" | "hero";
+export type SiteLogoTone = "brand" | "mono" | "inverse" | "on-primary";
 export interface SiteLogoProps {
-    /** Tailwind height class. Logo width scales from viewBox. */
-    className?: string;
-    /** Accessible title; defaults to "LetItRip.in". */
-    title?: string;
     /**
-     * Visual variant:
-     *  - "gradient" (default): brand-gradient wordmark on transparent background
-     *  - "solid": single-colour wordmark using currentColor (useful on coloured surfaces)
+     * Responsive height preset. Default `"md"` matches the title-bar height
+     * across breakpoints used by `TitleBarLayout`.
+     */
+    size?: SiteLogoSize;
+    /**
+     * `"brand"` (default) renders the themed gradient wordmark.
+     * `"mono"` renders the wordmark in `currentColor`.
+     * `"inverse"` renders in `var(--appkit-color-text-on-primary)` for use on
+     * primary-coloured surfaces.
+     * `"on-primary"` renders the wordmark in `var(--appkit-color-text)` — for
+     * dark-primary surfaces in light mode etc.
      */
-    variant?: "gradient" | "solid";
+    tone?: SiteLogoTone;
+    /** Accessible title; defaults to "LetItRip.in". */
+    title?: string;
     /**
-     * Optional image URL — when provided, renders an <img> instead of the SVG
-     * wordmark. Used to honour admin-uploaded site logos. Falls back to the
-     * SVG wordmark automatically when empty/undefined.
+     * Optional admin-uploaded image URL. When present, renders an `<MediaImage>`
+     * instead of the SVG wordmark (so the watermark proxy applies). Falls back
+     * to the SVG when empty/undefined.
      */
     src?: string;
 }
-/**
- * LetItRip site logo — SVG wordmark "LetItRip" + small ".in" superscript.
- *
- * Single source of truth for the site brand mark. Used by the title bar
- * and the welcome / hero section. Scales cleanly at any size via Tailwind
- * height class on the parent (the SVG fills available width via viewBox).
- */
-export declare function SiteLogo({ className, title, variant, src, }: SiteLogoProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteLogo({ size, tone, title, src, }: SiteLogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/SiteLogo.js

@@ -1,24 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GRADIENT_ID = "letitrip-logo-gradient";
 /**
  * LetItRip site logo — SVG wordmark "LetItRip" + small ".in" superscript.
  *
- * Single source of truth for the site brand mark. Used by the title bar
- * and the welcome / hero section. Scales cleanly at any size via Tailwind
- * height class on the parent (the SVG fills available width via viewBox).
+ * Single source of truth for the site brand mark. The wordmark gradient
+ * follows the active theme via `var(--appkit-gradient-logo)`, so a custom
+ * admin theme automatically restyles the logo without forking the SVG.
+ *
+ * Sizes are responsive presets — the variant catalogue forbids consumer-side
+ * className overrides on primitive components.
  */
-export function SiteLogo({ className = "h-7", title = "LetItRip.in", variant = "gradient", src, }) {
+import { MediaImage } from "../../features/media/MediaImage";
+const GRADIENT_ID = "appkit-logo-gradient";
+const SIZE_HEIGHTS = {
+    sm: "h-5",
+    md: "h-7 md:h-9 lg:h-10",
+    lg: "h-9 md:h-11 lg:h-12",
+    xl: "h-12 md:h-16 lg:h-20",
+    hero: "h-24 xl:h-32 2xl:h-40",
+};
+function resolveFill(tone) {
+    switch (tone) {
+        case "mono":
+            return "currentColor";
+        case "inverse":
+            return "var(--appkit-color-text-on-primary)";
+        case "on-primary":
+            return "var(--appkit-color-text)";
+        case "brand":
+        default:
+            return `url(#${GRADIENT_ID})`;
+    }
+}
+export function SiteLogo({ size = "md", tone = "brand", title = "LetItRip.in", src, }) {
+    const heightCls = SIZE_HEIGHTS[size];
     if (src) {
-        return (
-        // eslint-disable-next-line @next/next/no-img-element
-        _jsx("img", { src: src, alt: title, "data-testid": "site-logo", className: `block w-auto object-contain ${className}` }));
+        return (_jsx(MediaImage, { src: src, alt: title, size: "thumbnail", objectFit: "contain", 
+            // audit-variant-ok: SiteLogo uses a fixed-height responsive class set
+            // backed by the catalogued `size` enum; no consumer-provided overrides.
+            className: `block w-auto ${heightCls}` }));
     }
-    const fill = variant === "gradient" ? `url(#${GRADIENT_ID})` : "currentColor";
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", 
-                            // audit-inline-style-ok: SVG gradient stop
-                            style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", 
-                            // audit-inline-style-ok: SVG gradient stop
-                            style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", 
-                            // audit-inline-style-ok: SVG gradient stop
-                            style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
+    const fill = resolveFill(tone);
+    const isGradient = tone === "brand";
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", 
+        // audit-variant-ok: SiteLogo uses a fixed-height responsive class set
+        // backed by the catalogued `size` enum; no consumer-provided overrides.
+        className: `block w-auto ${heightCls}`, children: [_jsx("title", { children: title }), isGradient && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", 
+                            // audit-inline-style-ok: SVG gradient stop must be inline
+                            style: { stopColor: "var(--appkit-color-primary-700)" } }), _jsx("stop", { offset: "55%", 
+                            // audit-inline-style-ok: SVG gradient stop must be inline
+                            style: { stopColor: "var(--appkit-color-primary-500)" } }), _jsx("stop", { offset: "100%", 
+                            // audit-inline-style-ok: SVG gradient stop must be inline
+                            style: { stopColor: "var(--appkit-color-secondary-400)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
 }

package/dist/ui/components/SlottedListingView.js

@@ -32,7 +32,7 @@ export function SlottedListingView({ title, labels = {}, portal, renderHeader, r
     const [selectedIds, setSelectedIds] = useState([]);
     const [sort, setSort] = useState("");
     const displayTitle = title ?? labels?.title;
-    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "text-2xl font-bold mb-6", children: displayTitle })) : null, renderTabs?.(), inlineToolbar && (renderSearch || renderSort) ? (_jsxs(Div, { className: "flex gap-2 mb-4", children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort)] })) : (_jsxs(_Fragment, { children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort)] })), renderFilters?.(), renderActiveFilters?.(), effectiveManageSelection && renderBulkActions
+    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: displayTitle })) : null, renderTabs?.(), inlineToolbar && (renderSearch || renderSort) ? (_jsxs(Div, { className: "flex gap-2 mb-4", children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort)] })) : (_jsxs(_Fragment, { children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort)] })), renderFilters?.(), renderActiveFilters?.(), effectiveManageSelection && renderBulkActions
                 ? renderBulkActions(selectedIds, () => setSelectedIds([]))
                 : renderBulkActions?.(selectedIds, () => setSelectedIds([])), effectiveManageSelection
                 ? renderTable && renderTable(selectedIds, setSelectedIds, isLoading)

package/dist/ui/components/StackedViewShell.js

@@ -33,7 +33,7 @@ export function StackedViewShell({ title, labels = {},
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 portal, renderHeader, sections = [], isEmpty = false, renderEmpty, overlays, className = "", }) {
     const displayTitle = title ?? labels?.title;
-    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "text-2xl font-bold mb-6", children: displayTitle })) : null, isEmpty && renderEmpty ? (renderEmpty()) : (_jsx(_Fragment, { children: sections.map((slot, i) => {
+    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: displayTitle })) : null, isEmpty && renderEmpty ? (renderEmpty()) : (_jsx(_Fragment, { children: sections.map((slot, i) => {
                     const resolved = resolveSlot(slot);
                     if (resolved == null)
                         return null;