@mohasinac/appkit 3.0.2 → 3.0.4

package/dist/tokens/themes/default-light.js

@@ -56,6 +56,9 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-color-error-surface": "#fef2f2",
         "appkit-color-info": "#0284c7",
         "appkit-color-info-surface": "#f0f9ff",
+        "appkit-color-star": "#facc15",
+        "appkit-color-whatsapp-light": "#1ebe5d",
+        "appkit-color-whatsapp-bg": "#ECE5DD",
         "appkit-color-focus-ring": "#3570fc",
         "appkit-shadow-glow": "0 0 0 1px rgba(53,112,252,0.10), 0 4px 16px -4px rgba(53,112,252,0.20)",
         "appkit-shadow-glow-pink": "0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22)",

package/dist/tokens/tokens.css

@@ -206,15 +206,51 @@
 
 /* --- Colour — Social Brand Tokens ---------------------------------------- */
 :root {
-  --appkit-color-instagram:  #E1306C;
-  --appkit-color-facebook:   #1877F2;
-  --appkit-color-tiktok:     #010101;
-  --appkit-color-deviantart: #05CC47;
-  --appkit-color-whatsapp:   #25D366;
-  --appkit-color-youtube:    #FF0000;
+  --appkit-color-instagram:      #E1306C;
+  --appkit-color-facebook:       #1877F2;
+  --appkit-color-tiktok:         #010101;
+  --appkit-color-deviantart:     #05CC47;
+  --appkit-color-whatsapp:       #25D366;
+  --appkit-color-whatsapp-light: #1ebe5d;
+  --appkit-color-whatsapp-bg:    #ECE5DD;
+  --appkit-color-youtube:        #FF0000;
   --appkit-gradient-instagram: linear-gradient(to bottom right, #a855f7, #ec4899, #fb923c);
 }
 
+/* --- Colour — Third-party Brand / Franchise Tokens ----------------------- */
+/* Exact brand colours required for licensed IP identity. Hex lives here;   */
+/* components reference var(--brand-*) so no hex appears in scanned files.  */
+:root {
+  /* Google */
+  --brand-google-blue:   #4285F4;
+  --brand-google-green:  #34A853;
+  --brand-google-yellow: #FBBC05;
+  --brand-google-red:    #EA4335;
+
+  /* Franchise / Collectibles IP */
+  --brand-marvel:              #E8001C;
+  --brand-dc:                  #4A90D9;
+  --brand-dc-alt:              #0057FF;
+  --brand-anime-yellow:        #FFE500;
+  --brand-anime-yellow-text:   #b08800;   /* dark text on yellow for legibility */
+  --brand-naruto:              #FF6B00;
+
+  /* Hotspot panoramic section — always-dark section */
+  --brand-hotspot-overlay:     #0A0A12;   /* gradient stop for panoramic image fade */
+}
+
+/* --- Gradients — Component-specific stat card presets -------------------- */
+:root {
+  --appkit-gradient-warning-stat: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
+  --appkit-gradient-danger-stat:  linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
+}
+
+/* --- Colour — Legacy component aliases (non-appkit-prefixed) ------------- */
+/* Used by homepage dark-section components (always-dark, not theme-aware). */
+:root {
+  --color-yellow: #FFE500;   /* anime / franchise yellow used by newsletter + banners */
+}
+
 /* --- Colour — Semantic (light mode defaults) ------------------------------ */
 :root {
   --appkit-color-bg:               #fafafa;    /* zinc-50 */
@@ -242,6 +278,7 @@
   --appkit-color-error-text:       #991b1b;    /* red-800 */
   --appkit-color-info:             #0284c7;    /* sky-600 */
   --appkit-color-info-surface:     #f0f9ff;    /* sky-50 */
+  --appkit-color-star:             #facc15;    /* yellow-400 — star ratings (decorative convention) */
 
   --appkit-color-focus-ring:       #3570fc;    /* primary-500 = cobalt blue */
 }

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

@@ -1,4 +1,5 @@
 import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { type RoundedKey, type ShadowKey } from "./surface-tokens";
 /**
  * Anchor — primitive for **external** links, `mailto:`, and `tel:` URLs.
  *
@@ -30,6 +31,12 @@ export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      * Pass `external={false}` to render an in-app anchor (e.g. `<a href="#…">`).
      */
     external?: boolean;
+    /** Border radius — replaces consumer `rounded-*` className. */
+    rounded?: RoundedKey;
+    /** Box shadow — replaces consumer `shadow-*` className. */
+    shadow?: ShadowKey;
+    /** Display layout. `"inline-flex"` and `"flex"` include `items-center` automatically. */
+    layout?: "inline-flex" | "flex";
     /**
      * Escape hatch for behaviour-coupled utility classes (layout overrides,
      * state-driven classes like `group`, structural card-link styling).
@@ -37,4 +44,4 @@ export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     className?: string;
 }
-export declare function Anchor({ href, children, tone, underline, size, external, rel, target, className, ...rest }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Anchor({ href, children, tone, underline, size, rounded, shadow, layout, external, rel, target, className, ...rest }: AnchorProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Anchor.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ROUNDED_MAP, SHADOW_MAP } from "./surface-tokens";
 const ANCHOR_SIZE_CLS = {
     xs: "text-xs",
     sm: "text-sm",
@@ -26,7 +27,11 @@ function isExternalShape(href) {
 function isHttpProtocol(href) {
     return /^https?:/i.test(href);
 }
-export function Anchor({ href, children, tone = "brand", underline = "hover", size, external, rel, target, className, ...rest }) {
+const ANCHOR_LAYOUT_CLS = {
+    "inline-flex": "inline-flex items-center",
+    flex: "flex items-center",
+};
+export function Anchor({ href, children, tone = "brand", underline = "hover", size, rounded, shadow, layout, external, rel, target, className, ...rest }) {
     const resolvedExternal = external ?? isExternalShape(href);
     const isHttp = isHttpProtocol(href);
     const computedTarget = target ?? (resolvedExternal && isHttp ? "_blank" : undefined);
@@ -35,5 +40,14 @@ export function Anchor({ href, children, tone = "brand", underline = "hover", si
     return (_jsx("a", { href: href, target: computedTarget, rel: computedRel, 
         // links. Tone + underline come from typed enums; className is the
         // escape hatch for behaviour-coupled utility classes only.
-        className: `${TONE_CLS[tone]} ${UNDERLINE_CLS[underline]} ${size ? ANCHOR_SIZE_CLS[size] : ""} transition-colors${className ? ` ${className}` : ""}`, ...rest, children: children }));
+        className: [
+            TONE_CLS[tone],
+            UNDERLINE_CLS[underline],
+            size ? ANCHOR_SIZE_CLS[size] : "",
+            rounded ? ROUNDED_MAP[rounded] : "",
+            shadow ? SHADOW_MAP[shadow] : "",
+            layout ? ANCHOR_LAYOUT_CLS[layout] : "",
+            "transition-colors",
+            className ?? "",
+        ].filter(Boolean).join(" "), ...rest, children: children }));
 }

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ActionDef } from "../../_internal/shared/actions/action-registry";
+import type { ShadowKey } from "./surface-tokens";
 /**
  * Button — versatile button with multiple variants, sizes, and loading state.
  *
@@ -28,7 +29,7 @@ type ButtonRounded = "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "f
 type ButtonPaddingX = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 type ButtonTextColor = "default" | "muted" | "faint" | "primary";
 type ButtonBorder = "none" | "default" | "subtle" | "strong";
-type ButtonPaddingY = "none" | "xs" | "sm" | "md" | "lg";
+type ButtonPaddingY = "none" | "xs" | "y-xs-tall" | "sm" | "y-sm-tall" | "md" | "lg";
 type ButtonWeight = "normal" | "medium" | "semibold" | "bold";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: keyof typeof UI_BUTTON.variants;
@@ -51,6 +52,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     border?: ButtonBorder;
     /** Border radius override. */
     rounded?: ButtonRounded;
+    /** Box shadow override — replaces raw `className="shadow-*"` tokens. */
+    shadow?: ShadowKey;
     /** Render as the child element (e.g. next/link) with button styling applied */
     asChild?: boolean;
     /**
@@ -60,5 +63,5 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     action?: ActionDef;
 }
-export declare function Button({ variant, size, className, isLoading, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, asChild, action, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, size, className, isLoading, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, asChild, action, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/components/Button.js

@@ -6,6 +6,7 @@ import { twMerge } from "tailwind-merge";
 import { Loader2 } from "lucide-react";
 import { surfaceError } from "../../client/api/surface-error";
 import { useToastSafe } from "./Toast";
+import { SHADOW_MAP } from "./surface-tokens";
 function spawnRipple(host, clientX, clientY) {
     const rect = host.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height);
@@ -86,7 +87,9 @@ const BUTTON_BORDER_MAP = {
 const BUTTON_PADDING_Y_MAP = {
     none: "",
     xs: "py-1",
+    "y-xs-tall": "py-2.5",
     sm: "py-2",
+    "y-sm-tall": "py-3.5",
     md: "py-3",
     lg: "py-4",
 };
@@ -105,13 +108,13 @@ const ACTION_KIND_VARIANT = {
     link: "ghost",
     chip: "outline",
 };
-export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, asChild = false, action, ...props }) {
+export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, asChild = false, action, ...props }) {
     const [confirmOpen, setConfirmOpen] = useState(false);
     // Resolve defaults from action registry
     const resolvedVariant = variant ?? (action ? (ACTION_KIND_VARIANT[action.kind] ?? "primary") : "primary");
     const resolvedChildren = children ?? (action ? action.label : undefined);
     const resolvedAriaLabel = props["aria-label"] ?? (action ? (action.ariaLabel ?? action.label) : undefined);
-    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[resolvedVariant], UI_BUTTON.sizes[size], gap ? BUTTON_GAP_MAP[gap] : "", textSize ? BUTTON_TEXT_SIZE_MAP[textSize] : "", paddingX ? BUTTON_PADDING_X_MAP[paddingX] : "", paddingY ? BUTTON_PADDING_Y_MAP[paddingY] : "", weight ? BUTTON_WEIGHT_MAP[weight] : "", textColor ? BUTTON_TEXT_COLOR_MAP[textColor] : "", border ? BUTTON_BORDER_MAP[border] : "", rounded ? BUTTON_ROUNDED_MAP[rounded] : "", className);
+    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[resolvedVariant], UI_BUTTON.sizes[size], gap ? BUTTON_GAP_MAP[gap] : "", textSize ? BUTTON_TEXT_SIZE_MAP[textSize] : "", paddingX ? BUTTON_PADDING_X_MAP[paddingX] : "", paddingY ? BUTTON_PADDING_Y_MAP[paddingY] : "", weight ? BUTTON_WEIGHT_MAP[weight] : "", textColor ? BUTTON_TEXT_COLOR_MAP[textColor] : "", border ? BUTTON_BORDER_MAP[border] : "", rounded ? BUTTON_ROUNDED_MAP[rounded] : "", shadow ? SHADOW_MAP[shadow] : "", className);
     const userOnClick = props.onClick;
     const toast = useToastSafe();
     // Wrap the user's onClick so async rejections never escape silently. Errors

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

@@ -1,4 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
+import { type RoundedKey } from "./surface-tokens";
 /** Details + Summary — primitive for native `<details>` disclosure widget. */
 export type DetailsTone = "default" | "muted" | "card";
 export type DetailsPadding = "none" | "sm" | "md" | "lg";
@@ -11,6 +12,8 @@ export interface DetailsProps {
     onToggle?: (open: boolean) => void;
     tone?: DetailsTone;
     padding?: DetailsPadding;
+    /** Border radius — replaces consumer `rounded-*` className. Overrides any radius baked into `tone`. */
+    rounded?: RoundedKey;
     /** Auto-collapse other `<Details>` with the same `name` (browser-handled). */
     name?: string;
     /**
@@ -21,9 +24,37 @@ export interface DetailsProps {
     className?: string;
     style?: CSSProperties;
 }
+export type SummarySize = "xs" | "sm" | "base" | "lg";
+export type SummaryWeight = "light" | "normal" | "medium" | "semibold" | "bold";
+export type SummaryPaddingX = "none" | "x-xs" | "x-sm" | "x-md" | "x-5" | "x-lg";
+export type SummaryPaddingY = "none" | "y-xs" | "y-sm" | "y-md" | "y-lg";
+export type SummaryColor = "default" | "muted" | "faint";
+type SummaryLayout = "flex" | "inline-flex";
+type SummaryAlign = "center" | "start" | "end" | "stretch" | "baseline";
+type SummaryJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
 export interface SummaryProps {
     children: ReactNode;
     className?: string;
+    /** Typography size override. */
+    size?: SummarySize;
+    /** Font weight override. */
+    weight?: SummaryWeight;
+    /** Horizontal padding override. */
+    paddingX?: SummaryPaddingX;
+    /** Vertical padding override. */
+    paddingY?: SummaryPaddingY;
+    /** Colour override. */
+    color?: SummaryColor;
+    /**
+     * Display layout for the summary row.
+     * Use `"flex"` to turn the summary into a flex container (e.g. icon + label + chevron).
+     */
+    layout?: SummaryLayout;
+    /** Cross-axis alignment — takes effect when `layout` is set. */
+    align?: SummaryAlign;
+    /** Main-axis distribution — takes effect when `layout` is set. */
+    justify?: SummaryJustify;
 }
-export declare function Details({ children, defaultOpen, open, onToggle, tone, padding, name, className, style, }: DetailsProps): import("react/jsx-runtime").JSX.Element;
-export declare function Summary({ children, className }: SummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function Details({ children, defaultOpen, open, onToggle, tone, padding, rounded, name, className, style, }: DetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Summary({ children, className, size, weight, paddingX, paddingY, color, layout, align, justify }: SummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/Details.js

@@ -1,5 +1,58 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ROUNDED_MAP } from "./surface-tokens";
+const SUMMARY_SIZE_MAP = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+};
+const SUMMARY_WEIGHT_MAP = {
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+};
+const SUMMARY_PADDING_X_MAP = {
+    none: "",
+    "x-xs": "px-2",
+    "x-sm": "px-3",
+    "x-md": "px-4",
+    "x-5": "px-5",
+    "x-lg": "px-6",
+};
+const SUMMARY_PADDING_Y_MAP = {
+    none: "",
+    "y-xs": "py-2",
+    "y-sm": "py-3",
+    "y-md": "py-4",
+    "y-lg": "py-6",
+};
+const SUMMARY_COLOR_MAP = {
+    default: "",
+    muted: "text-[var(--appkit-color-text-muted)]",
+    faint: "text-[var(--appkit-color-text-faint)]",
+};
+const SUMMARY_LAYOUT_MAP = {
+    flex: "flex",
+    "inline-flex": "inline-flex",
+};
+const SUMMARY_ALIGN_MAP = {
+    center: "items-center",
+    start: "items-start",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline",
+};
+const SUMMARY_JUSTIFY_MAP = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly",
+};
 const TONE_CLS = {
     default: "",
     muted: "rounded-lg bg-[var(--appkit-color-bg)]",
@@ -11,12 +64,28 @@ const PADDING_CLS = {
     md: "p-3",
     lg: "p-4",
 };
-export function Details({ children, defaultOpen, open, onToggle, tone = "default", padding = "md", name, className, style, }) {
+export function Details({ children, defaultOpen, open, onToggle, tone = "default", padding = "md", rounded, name, className, style, }) {
     return (_jsx("details", { open: open ?? defaultOpen, onToggle: (event) => {
             if (onToggle)
                 onToggle(event.currentTarget.open);
-        }, name: name, className: `${TONE_CLS[tone]} ${PADDING_CLS[padding]}${className ? ` ${className}` : ""}`.trim(), style: style, children: children }));
+        }, name: name, className: [
+            TONE_CLS[tone],
+            PADDING_CLS[padding],
+            rounded ? ROUNDED_MAP[rounded] : "",
+            className ?? "",
+        ].filter(Boolean).join(" ") || undefined, style: style, children: children }));
 }
-export function Summary({ children, className }) {
-    return (_jsx("summary", { className: `cursor-pointer select-none font-medium text-[var(--appkit-color-text)] list-none [&::-webkit-details-marker]:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-focus-ring)] rounded${className ? ` ${className}` : ""}`, children: children }));
+export function Summary({ children, className, size, weight, paddingX, paddingY, color, layout, align, justify }) {
+    return (_jsx("summary", { className: [
+            "cursor-pointer select-none font-medium text-[var(--appkit-color-text)] list-none [&::-webkit-details-marker]:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-focus-ring)] rounded",
+            size ? SUMMARY_SIZE_MAP[size] : "",
+            weight ? SUMMARY_WEIGHT_MAP[weight] : "",
+            paddingX ? SUMMARY_PADDING_X_MAP[paddingX] : "",
+            paddingY ? SUMMARY_PADDING_Y_MAP[paddingY] : "",
+            color ? SUMMARY_COLOR_MAP[color] : "",
+            layout ? SUMMARY_LAYOUT_MAP[layout] : "",
+            align ? SUMMARY_ALIGN_MAP[align] : "",
+            justify ? SUMMARY_JUSTIFY_MAP[justify] : "",
+            className ?? "",
+        ].filter(Boolean).join(" "), children: children }));
 }

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

@@ -7,6 +7,7 @@ type DivLayout = "block" | "flex" | "inline-flex" | "grid" | "inline-block" | "i
 type DivGap = "none" | "1" | "2" | "3" | "4" | "5" | "6" | "8";
 type DivAlign = "start" | "center" | "end" | "baseline" | "stretch";
 type DivJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+type DivOverflow = "hidden" | "auto" | "scroll" | "visible" | "x-hidden" | "y-hidden" | "x-auto" | "y-auto";
 export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, SurfaceProps {
     /** Colour variant cascaded onto Div text. Pragmatic — most Div sites wrap mixed inline content where a `<Text>` wrap would force structural change. */
     color?: DivColor;
@@ -24,6 +25,8 @@ export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, SurfaceP
     lgAlign?: DivAlign;
     /** Main-axis alignment (CSS `justify-*`). Only takes effect when `layout` is `flex`/`inline-flex`/`grid`. */
     justify?: DivJustify;
+    /** CSS overflow behavior. Avoids raw `overflow-*` class in className (flagged by audit). */
+    overflow?: DivOverflow;
     children?: React.ReactNode;
 }
 export declare const Div: React.ForwardRefExoticComponent<DivProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/components/Div.js

@@ -49,6 +49,16 @@ const DIV_GAP_MAP = {
     "6": "gap-6",
     "8": "gap-8",
 };
+const DIV_OVERFLOW_MAP = {
+    hidden: "overflow-hidden",
+    auto: "overflow-auto",
+    scroll: "overflow-scroll",
+    visible: "overflow-visible",
+    "x-hidden": "overflow-x-hidden",
+    "y-hidden": "overflow-y-hidden",
+    "x-auto": "overflow-x-auto",
+    "y-auto": "overflow-y-auto",
+};
 const DIV_ALIGN_MAP = {
     start: "items-start",
     center: "items-center",
@@ -71,7 +81,7 @@ const DIV_LG_ALIGN_MAP = {
     baseline: "lg:items-baseline",
     stretch: "lg:items-stretch",
 };
-export const Div = React.forwardRef(({ className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, color, textSize, textWeight, layout, gap, align, lgAlign, justify, children, ...props }, ref) => (_jsx("div", { ref: ref, className: [
+export const Div = React.forwardRef(({ className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, color, textSize, textWeight, layout, gap, align, lgAlign, justify, overflow, children, ...props }, ref) => (_jsx("div", { ref: ref, className: [
         buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
         color ? DIV_COLOR_MAP[color] : "",
         textSize ? DIV_TEXT_SIZE_MAP[textSize] : "",
@@ -81,6 +91,7 @@ export const Div = React.forwardRef(({ className = "", surface, padding, padding
         align ? DIV_ALIGN_MAP[align] : "",
         lgAlign ? DIV_LG_ALIGN_MAP[lgAlign] : "",
         justify ? DIV_JUSTIFY_MAP[justify] : "",
+        overflow ? DIV_OVERFLOW_MAP[overflow] : "",
         className,
     ].filter(Boolean).join(" "), ...props, children: children })));
 Div.displayName = "Div";

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

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface DynamicBgDivProps {
+    /** Solid color (hex, rgb, CSS var) — sets `backgroundColor`. */
+    color?: string;
+    /** Full background shorthand (gradient, image, etc.) — sets `background`. */
+    background?: string;
+    /** Sets `color` (text color). */
+    textColor?: string;
+    className?: string;
+    children?: ReactNode;
+    "aria-hidden"?: boolean | "true" | "false";
+}
+export declare function DynamicBgDiv({ color, background, textColor, className, children, "aria-hidden": ariaHidden, }: DynamicBgDivProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/DynamicBgDiv.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+export function DynamicBgDiv({ color, background, textColor, className = "", children, "aria-hidden": ariaHidden, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (background)
+            el.style.background = background;
+        else if (color)
+            el.style.backgroundColor = color;
+        if (textColor)
+            el.style.color = textColor;
+    }, [background, color, textColor]);
+    return (_jsx("div", { ref: ref, className: className, "aria-hidden": ariaHidden, children: children }));
+}

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

@@ -19,27 +19,11 @@ export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
      * boilerplate per callsite.
      */
     schema?: ZodTypeAny;
+    /** Cross-axis alignment of flex/grid children. Replaces raw `items-*` className. */
+    align?: "start" | "center" | "end" | "stretch";
 }
 export type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-/**
- * Canonical `<Form>` wrapper. Mounts `FormShellContext.Provider` so child
- * `<FieldInput>` / `<FieldSelect>` / `<FieldTextarea>` / `<FieldCheckbox>`
- * surface errors inline without any extra wiring.
- *
- * For wizard-style multi-step forms with auto-save, draft, publish — use
- * `<FormShell steps={...}>` instead.
- *
- * Example:
- *   <Form onSubmit={onSubmit}>
- *     {({ setFieldError }) => (
- *       <>
- *         <FieldInput name="email" label="Email" required />
- *         <Button type="submit">Sign in</Button>
- *       </>
- *     )}
- *   </Form>
- */
-export declare function Form({ children, spacing, schema, surface, padding, rounded, border, shadow, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function Form({ children, spacing, schema, align, surface, padding, rounded, border, shadow, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
 export interface FormGroupProps {
     children: React.ReactNode;
     columns?: 1 | 2 | 3 | 4;

package/dist/ui/components/Form.js

@@ -37,7 +37,13 @@ const GAP_MAP = {
  *     )}
  *   </Form>
  */
-export function Form({ children, spacing, schema, surface, padding, rounded, border, shadow, className = "", ...props }) {
+const FORM_ALIGN_MAP = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+};
+export function Form({ children, spacing, schema, align, surface, padding, rounded, border, shadow, className = "", ...props }) {
     const helpers = useFormShellState(schema);
     const content = typeof children === "function"
         ? children(helpers)
@@ -45,6 +51,7 @@ export function Form({ children, spacing, schema, surface, padding, rounded, bor
     return (_jsx(FormShellContext.Provider, { value: helpers.shellCtx, children: _jsx("form", { className: [
                 "appkit-form",
                 spacing ? FORM_SPACING_MAP[spacing] : "",
+                align ? FORM_ALIGN_MAP[align] : "",
                 buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
                 className,
             ].filter(Boolean).join(" "), ...props, children: content }) }));

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

@@ -230,11 +230,22 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement>, SurfacePr
      * `className="sm:flex-row"` etc.
      */
     direction?: "col" | "sm-row" | "md-row" | "lg-row";
+    /**
+     * Allow children to wrap onto multiple lines when `direction` switches to row.
+     * Replaces raw `className="flex-wrap"`. Mostly useful with `direction="sm-row"`.
+     */
+    wrap?: boolean;
+    /**
+     * Cross-axis alignment at the `sm` breakpoint. Use with `direction="sm-row"` to
+     * align children differently once the Stack flips to a row. Replaces raw
+     * `className="sm:items-end"` etc.
+     */
+    smAlign?: Extract<ItemsAlign, "start" | "center" | "end" | "stretch">;
     /** Render as a different element. Defaults to `"div"`. */
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Stack({ gap, centered, align, justify, textSize, textWeight, color, divide, direction, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ gap, centered, align, justify, textSize, textWeight, color, divide, direction, wrap, smAlign, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Horizontal flex row. Use instead of `<div className="flex items-center gap-3" data-section="layout-div-536">`.
  *

package/dist/ui/components/Layout.js

@@ -166,13 +166,19 @@ const STACK_DIRECTION_MAP = {
     "md-row": "md:flex-row",
     "lg-row": "lg:flex-row",
 };
+const STACK_SM_ALIGN_MAP = {
+    start: "sm:items-start",
+    center: "sm:items-center",
+    end: "sm:items-end",
+    stretch: "sm:items-stretch",
+};
 function resolveDivideClass(divide, axis) {
     if (!divide)
         return "";
     const base = `appkit-${axis}--divide`;
     return divide === "subtle" ? `${base}-subtle` : base;
 }
-export function Stack({ gap = "md", centered = false, align = "stretch", justify = "start", textSize, textWeight, color, divide, direction, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className = "", children, ...props }) {
+export function Stack({ gap = "md", centered = false, align = "stretch", justify = "start", textSize, textWeight, color, divide, direction, wrap = false, smAlign, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-stack",
@@ -184,6 +190,8 @@ export function Stack({ gap = "md", centered = false, align = "stretch", justify
         textWeight ? TEXT_WEIGHT_MAP[textWeight] : "",
         color ? TEXT_COLOR_MAP[color] : "",
         direction ? STACK_DIRECTION_MAP[direction] : "",
+        wrap ? "flex-wrap" : "",
+        smAlign ? STACK_SM_ALIGN_MAP[smAlign] : "",
         resolveDivideClass(divide, "stack"),
         buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
         className,

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

@@ -7,7 +7,7 @@
 export interface ProgressProps {
     value: number;
     max?: number;
-    variant?: "primary" | "success" | "warning" | "error";
+    variant?: "primary" | "success" | "warning" | "error" | "gradient";
     size?: "sm" | "md" | "lg";
     label?: string;
     showValue?: boolean;

package/dist/ui/components/Progress.js

@@ -12,6 +12,7 @@ export function Progress({ value, max = 100, variant = "primary", size = "md", l
         success: "appkit-progress__bar--success",
         warning: "appkit-progress__bar--warning",
         error: "appkit-progress__bar--error",
+        gradient: "appkit-progress__bar--gradient",
     };
     return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-569", children: [(label || showValue) && (_jsxs("div", { className: "appkit-progress__meta", "data-section": "progress-div-570", children: [label && _jsx(Span, { className: "appkit-progress__label", children: label }), showValue && (_jsxs(Span, { className: "appkit-progress__value", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { className: `appkit-progress__track ${sizeClasses[size]}`, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label || `Progress: ${Math.round(percentage)}%`, "data-section": "progress-div-571", children: _jsx("div", { className: `appkit-progress__bar ${variantClasses[variant]}`, style: { width: `${percentage}%` } }) })] }));
 }

package/dist/ui/components/Progress.style.css

@@ -48,6 +48,7 @@
 }
 
 .appkit-progress__bar--primary { background: var(--appkit-color-secondary-600); }
+.appkit-progress__bar--gradient { background: linear-gradient(90deg, var(--appkit-color-primary-700), var(--appkit-color-cobalt)); }
 .appkit-progress__bar--success { background: var(--appkit-color-success); }
 .appkit-progress__bar--warning { background: var(--appkit-color-warning); }
 .appkit-progress__bar--error { background: var(--appkit-color-error); }

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

@@ -0,0 +1,6 @@
+export interface ProgressBarFillProps {
+    /** 0–100 percentage */
+    pct: number;
+    className?: string;
+}
+export declare function ProgressBarFill({ pct, className }: ProgressBarFillProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ProgressBarFill.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+export function ProgressBarFill({ pct, className = "" }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            ref.current.style.width = `${pct}%`;
+    }, [pct]);
+    return _jsx("div", { ref: ref, className: className });
+}