@mohasinac/appkit 3.0.2 → 3.0.4

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { SurfaceProps } from "./surface-tokens";
+import type { SurfaceProps, RoundedKey, PaddingKey, BorderKey, SurfaceKey } from "./surface-tokens";
 /**
  * Semantic HTML Wrapper Components
  *
@@ -170,6 +170,7 @@ export type ListSize = "xs" | "sm" | "base" | "lg";
 export type ListColor = "default" | "primary" | "muted" | "faint";
 type UlPaddingX = "none" | "x-xs" | "x-sm" | "x-md" | "x-lg";
 type UlPaddingY = "none" | "y-2xs" | "y-xs" | "y-sm" | "y-md" | "y-lg" | "y-bottom-xs";
+type UlGap = "none" | "1" | "2" | "3" | "4" | "6";
 export interface UlProps extends React.HTMLAttributes<HTMLUListElement> {
     /** Marker style — replaces consumer `list-disc`/`list-none` className. */
     marker?: ListMarker;
@@ -185,6 +186,10 @@ export interface UlProps extends React.HTMLAttributes<HTMLUListElement> {
     size?: ListSize;
     /** Colour variant cascaded onto list items. */
     color?: ListColor;
+    /** Border radius — replaces consumer `rounded-*` className. */
+    rounded?: RoundedKey;
+    /** Gap between items (for grid/flex list shells). */
+    gap?: UlGap;
     children: React.ReactNode;
 }
 export declare const Ul: React.ForwardRefExoticComponent<UlProps & React.RefAttributes<HTMLUListElement>>;
@@ -229,9 +234,17 @@ export interface LiProps extends React.LiHTMLAttributes<HTMLLIElement> {
     textSize?: LiTextSize;
     /** Cascaded text colour. */
     color?: LiColor;
+    /** Padding — replaces consumer `p-*` / `px-* py-*` className. */
+    padding?: PaddingKey;
+    /** Border radius — replaces consumer `rounded-*` className. */
+    rounded?: RoundedKey;
+    /** Border style — replaces consumer `border border-*` className. */
+    border?: BorderKey;
+    /** Background surface — replaces consumer `bg-*` className. */
+    surface?: SurfaceKey;
     children: React.ReactNode;
 }
-export declare function Li({ layout, gap, textSize, color, className, children, ...props }: LiProps): import("react/jsx-runtime").JSX.Element;
+export declare function Li({ layout, gap, textSize, color, padding, rounded, border, surface, className, children, ...props }: LiProps): import("react/jsx-runtime").JSX.Element;
 type TableVariant = "default" | "striped" | "bordered";
 type TableSize = "sm" | "md" | "lg";
 export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, "border">, SurfaceProps {
@@ -249,9 +262,13 @@ export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement
 }
 export declare function Thead({ surface, className, children, ...props }: TheadProps): import("react/jsx-runtime").JSX.Element;
 export interface TbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    /** Cascaded typography size for all cells in this tbody. */
+    size?: CellTypographySize;
+    /** Cascaded text colour for all cells in this tbody. */
+    color?: CellColor;
     children: React.ReactNode;
 }
-export declare function Tbody({ className, children, ...props }: TbodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tbody({ className, size, color, children, ...props }: TbodyProps): import("react/jsx-runtime").JSX.Element;
 type TrBorder = "none" | "default" | "subtle" | "strong";
 type TrSurface = "none" | "default" | "muted" | "subtle";
 export interface TrProps extends React.HTMLAttributes<HTMLTableRowElement> {
@@ -268,7 +285,7 @@ type CellPadding = "none" | "xs" | "xs-tall" | "xs-3" | "sm" | "sm-tall" | "md"
 type CellColor = "default" | "primary" | "muted" | "faint" | "success" | "warning" | "error" | "info";
 type CellPaddingX = "none" | "xs" | "sm" | "md" | "lg";
 type CellPaddingY = "none" | "2xs" | "xs" | "sm" | "md";
-type CellPaddingSide = "none" | "pr-md" | "pl-md" | "pr-lg" | "pl-lg" | "pt-md" | "pb-md";
+type CellPaddingSide = "none" | "pr-sm" | "pb-sm" | "pr-md" | "pl-md" | "pr-lg" | "pl-lg" | "pt-md" | "pb-md";
 export interface ThProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     align?: CellAlign;
     size?: CellTypographySize;
@@ -303,15 +320,17 @@ type CodeSize = "xs" | "sm" | "base";
 type CodePadding = "none" | "xs" | "sm" | "inline";
 type CodeRounded = "none" | "default" | "sm" | "md" | "lg";
 type CodeSurface = "none" | "muted" | "subtle" | "default";
+type CodeWeight = "normal" | "medium" | "semibold" | "bold";
 export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
-    color?: "default" | "primary" | "error" | "success";
+    color?: "default" | "primary" | "error" | "success" | "muted" | "faint";
+    weight?: CodeWeight;
     size?: CodeSize;
     padding?: CodePadding;
     rounded?: CodeRounded;
     surface?: CodeSurface;
     children: React.ReactNode;
 }
-export declare function Code({ color, size, padding, rounded, surface, className, children, ...props }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Code({ color, weight, size, padding, rounded, surface, className, children, ...props }: CodeProps): import("react/jsx-runtime").JSX.Element;
 export interface PreProps extends React.HTMLAttributes<HTMLPreElement>, SurfaceProps {
     children: React.ReactNode;
 }
@@ -320,7 +339,7 @@ export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuot
     color?: "default" | "primary" | "info" | "warning";
     children: React.ReactNode;
 }
-export declare function Blockquote({ color, className, surface, padding, rounded, border, shadow, children, ...props }: BlockquoteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Blockquote({ color, className, surface, padding, paddingX, paddingY, rounded, border, shadow, children, ...props }: BlockquoteProps): import("react/jsx-runtime").JSX.Element;
 export interface FigureProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }

package/dist/ui/components/Semantic.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { buildSurfaceClasses } from "./surface-tokens";
+import { buildSurfaceClasses, ROUNDED_MAP, PADDING_MAP, BORDER_MAP, SURFACE_MAP } from "./surface-tokens";
 const SECTION_TONE_MAP = {
     plain: "",
     "page-header": "appkit-section--tone-page-header",
@@ -167,7 +167,15 @@ const UL_PADDING_Y_MAP = {
     "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: [
+const UL_GAP_MAP = {
+    none: "",
+    "1": "gap-1",
+    "2": "gap-2",
+    "3": "gap-3",
+    "4": "gap-4",
+    "6": "gap-6",
+};
+export const Ul = React.forwardRef(({ marker, spacing, indent, paddingX, paddingY, size, color, rounded, gap, className = "", children, ...props }, ref) => (_jsx("ul", { ref: ref, className: [
         marker ? LIST_MARKER_MAP[marker] : "",
         spacing ? LIST_SPACING_MAP[spacing] : "",
         indent ? LIST_INDENT_MAP[indent] : "",
@@ -175,6 +183,8 @@ export const Ul = React.forwardRef(({ marker, spacing, indent, paddingX, padding
         paddingY ? UL_PADDING_Y_MAP[paddingY] : "",
         size ? LIST_SIZE_MAP[size] : "",
         color ? LIST_COLOR_MAP[color] : "",
+        rounded ? ROUNDED_MAP[rounded] : "",
+        gap ? UL_GAP_MAP[gap] : "",
         className,
     ]
         .filter(Boolean)
@@ -216,12 +226,16 @@ const LI_COLOR_MAP = {
     muted: "text-[var(--appkit-color-text-muted)]",
     faint: "text-[var(--appkit-color-text-faint)]",
 };
-export function Li({ layout, gap, textSize, color, className = "", children, ...props }) {
+export function Li({ layout, gap, textSize, color, padding, rounded, border, surface, 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] : "",
+        padding ? PADDING_MAP[padding] : "",
+        rounded ? ROUNDED_MAP[rounded] : "",
+        border ? BORDER_MAP[border] : "",
+        surface ? SURFACE_MAP[surface] : "",
         className,
     ].filter(Boolean).join(" ");
     return (_jsx("li", { className: classes, ...props, children: children }));
@@ -252,8 +266,8 @@ export function Thead({ surface, className = "", children, ...props }) {
             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 Tbody({ className = "", size, color, children, ...props }) {
+    return (_jsx("tbody", { className: ["appkit-tbody", size ? CELL_SIZE_MAP[size] : "", color ? CELL_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ...props, children: children }));
 }
 const TR_BORDER_MAP = {
     none: "",
@@ -306,6 +320,8 @@ const CELL_PADDING_Y_MAP = {
 };
 const CELL_PADDING_SIDE_MAP = {
     none: "",
+    "pr-sm": "pr-3",
+    "pb-sm": "pb-2",
     "pr-md": "pr-4",
     "pl-md": "pl-4",
     "pr-lg": "pr-6",
@@ -365,11 +381,19 @@ export function Td({ align, size, weight, padding, paddingX, paddingY, paddingSi
             className,
         ].filter(Boolean).join(" "), ...props, children: children }));
 }
+const CODE_WEIGHT_MAP = {
+    normal: "appkit-font--normal",
+    medium: "appkit-font--medium",
+    semibold: "appkit-font--semibold",
+    bold: "appkit-font--bold",
+};
 const CODE_COLOR_MAP = {
     default: "appkit-code--default",
     primary: "appkit-code--primary",
     error: "appkit-code--error",
     success: "appkit-code--success",
+    muted: "appkit-color--muted",
+    faint: "appkit-color--faint",
 };
 const CODE_SIZE_MAP = {
     xs: "appkit-text--xs",
@@ -395,10 +419,11 @@ const CODE_SURFACE_MAP = {
     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 }) {
+export function Code({ color = "default", weight, size, padding, rounded, surface, className = "", children, ...props }) {
     return (_jsx("code", { className: [
             "appkit-code",
             CODE_COLOR_MAP[color],
+            weight ? CODE_WEIGHT_MAP[weight] : "",
             size ? CODE_SIZE_MAP[size] : "",
             padding ? CODE_PADDING_MAP[padding] : "",
             rounded ? CODE_ROUNDED_MAP[rounded] : "",
@@ -415,8 +440,8 @@ const BLOCKQUOTE_COLOR_MAP = {
     info: "appkit-blockquote--info",
     warning: "appkit-blockquote--warning",
 };
-export function Blockquote({ color = "default", className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("blockquote", { className: ["appkit-blockquote", BLOCKQUOTE_COLOR_MAP[color], buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function Blockquote({ color = "default", className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, children, ...props }) {
+    return (_jsx("blockquote", { className: ["appkit-blockquote", BLOCKQUOTE_COLOR_MAP[color], buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
 export function Figure({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
     return (_jsx("figure", { className: ["appkit-figure", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { ShadowKey } from "./surface-tokens";
 declare const VARIANTS: {
     readonly default: "appkit-text-link appkit-text-link--default";
     readonly muted: "appkit-text-link appkit-text-link--muted";
@@ -19,6 +20,14 @@ type LinkTruncate = boolean | 1 | 2 | 3 | 4;
 type LinkRounded = "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
 type LinkPaddingX = "none" | "sm" | "md" | "lg" | "xl";
 type LinkPaddingY = "none" | "xs" | "sm" | "md";
+/** Display layout for button-style / nav-style links. */
+type LinkLayout = "flex" | "inline-flex" | "flex-col";
+/** Cross-axis alignment — only takes effect when `layout` is set. */
+type LinkAlign = "center" | "start" | "end" | "stretch" | "baseline";
+/** Main-axis distribution — only takes effect when `layout` is set. */
+type LinkJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+/** Gap between flex children — only takes effect when `layout` is set. */
+type LinkGap = "none" | "xs" | "sm" | "md" | "lg";
 export interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
     children: React.ReactNode;
@@ -35,6 +44,32 @@ export interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElem
     paddingX?: LinkPaddingX;
     /** Vertical padding — for button-shaped links. */
     paddingY?: LinkPaddingY;
+    /**
+     * Display layout. Use `"flex"` or `"inline-flex"` to turn the link into a
+     * flex container (e.g. nav items that need icon + label side by side).
+     * Replaces raw `className="flex"` / `"inline-flex"` tokens.
+     */
+    layout?: LinkLayout;
+    /**
+     * Cross-axis alignment. Only takes effect when `layout` is set.
+     * Replaces raw `className="items-center"` etc.
+     */
+    align?: LinkAlign;
+    /**
+     * Main-axis distribution. Only takes effect when `layout` is set.
+     * Replaces raw `className="justify-between"` etc.
+     */
+    justify?: LinkJustify;
+    /**
+     * Gap between flex children. Only takes effect when `layout` is set.
+     * Replaces raw `className="gap-2"` etc.
+     */
+    gap?: LinkGap;
+    /**
+     * Box shadow variant — replaces raw `className="shadow-*"` / `hover:shadow-*`.
+     * Uses the same `SHADOW_MAP` as layout primitives.
+     */
+    shadow?: ShadowKey;
     /**
      * Force external rendering (`<a target="_blank" rel="noopener noreferrer">`).
      * Auto-detected when `href` starts with http/https/mailto/tel.
@@ -56,5 +91,5 @@ export interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElem
  * <TextLink href="#" variant="danger" onClick={handleDelete}>Delete</TextLink>
  * ```
  */
-export declare function TextLink({ href, children, variant, size, weight, truncate, rounded, paddingX, paddingY, external, className, ...props }: TextLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextLink({ href, children, variant, size, weight, truncate, rounded, paddingX, paddingY, layout, align, justify, gap, shadow, external, className, ...props }: TextLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/components/TextLink.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link";
+import { SHADOW_MAP } from "./surface-tokens";
 import { twMerge } from "tailwind-merge";
 const VARIANTS = {
     default: "appkit-text-link appkit-text-link--default",
@@ -67,6 +68,33 @@ const LINK_PADDING_Y_MAP = {
     sm: "py-2.5",
     md: "py-3",
 };
+const LINK_LAYOUT_MAP = {
+    flex: "flex",
+    "inline-flex": "inline-flex",
+    "flex-col": "flex flex-col",
+};
+const LINK_ALIGN_MAP = {
+    center: "items-center",
+    start: "items-start",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline",
+};
+const LINK_JUSTIFY_MAP = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly",
+};
+const LINK_GAP_MAP = {
+    none: "",
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+};
 /**
  * Styled anchor wrapper. Uses `next/link` for internal navigation and
  * a plain `<a>` for external/mailto/tel links.
@@ -82,8 +110,8 @@ const LINK_PADDING_Y_MAP = {
  * <TextLink href="#" variant="danger" onClick={handleDelete}>Delete</TextLink>
  * ```
  */
-export function TextLink({ href, children, variant = "default", size, weight, truncate, rounded, paddingX, paddingY, external, className = "", ...props }) {
-    const cls = twMerge(VARIANTS[variant], size ? LINK_SIZE_MAP[size] : "", weight ? LINK_WEIGHT_MAP[weight] : "", truncateClass(truncate), rounded ? LINK_ROUNDED_MAP[rounded] : "", paddingX ? LINK_PADDING_X_MAP[paddingX] : "", paddingY ? LINK_PADDING_Y_MAP[paddingY] : "", className);
+export function TextLink({ href, children, variant = "default", size, weight, truncate, rounded, paddingX, paddingY, layout, align, justify, gap, shadow, external, className = "", ...props }) {
+    const cls = twMerge(VARIANTS[variant], size ? LINK_SIZE_MAP[size] : "", weight ? LINK_WEIGHT_MAP[weight] : "", truncateClass(truncate), rounded ? LINK_ROUNDED_MAP[rounded] : "", paddingX ? LINK_PADDING_X_MAP[paddingX] : "", paddingY ? LINK_PADDING_Y_MAP[paddingY] : "", layout ? LINK_LAYOUT_MAP[layout] : "", align ? LINK_ALIGN_MAP[align] : "", justify ? LINK_JUSTIFY_MAP[justify] : "", gap ? LINK_GAP_MAP[gap] : "", shadow ? SHADOW_MAP[shadow] : "", className);
     const shouldBeExternal = external ?? isExternalUrl(href);
     if (shouldBeExternal) {
         return (_jsx("a", { href: href, className: cls, target: "_blank", rel: "noopener noreferrer", ...props, children: children }));

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { type RoundedKey, type PaddingKey, type XPaddingKey } from "./surface-tokens";
 declare const TYPOGRAPHY: {
     readonly headingLevel: {
         readonly 1: "appkit-heading--h1";
@@ -53,6 +54,10 @@ export type FontFamily = "sans" | "display" | "editorial" | "mono";
 export type TextGradient = "none" | "brand" | "brand-tri" | "accent";
 /** Multi-line ellipsis: `true` = 1 line; pass `2`, `3`, or `4` for line-clamp. */
 export type TextTruncate = boolean | 1 | 2 | 3 | 4;
+/** Drop-shadow preset shared by Heading and Text (over-image/hero text). */
+export type DropShadowPreset = "none" | "sm" | "md" | "lg" | "2xl";
+/** CSS text-shadow preset for hero headings where filter drop-shadow is insufficient. */
+export type HeadingTextShadow = "soft-dark";
 type HeadingSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl";
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
@@ -77,9 +82,13 @@ interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     family?: FontFamily;
     align?: TextAlign;
     gradient?: TextGradient;
+    /** Drop-shadow filter preset for over-image / hero-section headings. */
+    shadow?: DropShadowPreset;
+    /** CSS text-shadow preset — use instead of wrapping children in a native `<span style>`. */
+    textShadow?: HeadingTextShadow;
     children: React.ReactNode;
 }
-export declare function Heading({ level, variant, color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, className, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Heading({ level, variant, color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, shadow, textShadow, className, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
 type TextPaddingY = "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 type TextLayout = "default" | "inline-flex" | "flex" | "inline-block";
 type TextGap = "none" | "1" | "1.5" | "2" | "3";
@@ -102,6 +111,10 @@ interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
     gradient?: TextGradient;
     /** Vertical padding — used for empty-state Text wrappers. */
     paddingY?: TextPaddingY;
+    /** Horizontal padding — use instead of raw `px-*` className. */
+    paddingX?: XPaddingKey;
+    /** Border radius — use instead of raw `rounded-*` className. */
+    rounded?: RoundedKey;
     /** Layout — `inline-flex` / `flex` for icon + label compositions. */
     layout?: TextLayout;
     /** Flex gap between children (only when `layout` is `inline-flex` / `flex`). */
@@ -112,8 +125,8 @@ interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
     as?: React.ElementType;
     children: React.ReactNode;
 }
-export declare function Text({ variant, color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, paddingY, layout, gap, shadow, className, as: Tag, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
-type LabelLayout = "inline" | "inline-flex" | "flex" | "flex-start";
+export declare function Text({ variant, color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, paddingY, paddingX, rounded, layout, gap, shadow, className, as: Tag, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+type LabelLayout = "inline" | "inline-flex" | "flex" | "flex-start" | "flex-col-center";
 type LabelGap = "none" | "xs" | "sm" | "md" | "lg";
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     required?: boolean;
@@ -128,9 +141,13 @@ interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     layout?: LabelLayout;
     /** Gap between children. Only takes effect when `layout` is set to a flex variant. */
     gap?: LabelGap;
+    /** Border radius — replaces consumer `rounded-*` className. */
+    rounded?: RoundedKey;
+    /** Padding — replaces consumer `p-*` className. */
+    padding?: PaddingKey;
     children: React.ReactNode;
 }
-export declare function Label({ required, size, weight, color, transform, align, layout, gap, className, children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ required, size, weight, color, transform, align, layout, gap, rounded, padding, className, children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
 interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** "default" — muted grey (default); "accent" — indigo, semibold; "inverse" — light indigo for use on dark indigo backgrounds */
     variant?: "default" | "accent" | "inverse";
@@ -158,10 +175,11 @@ export declare function Caption({ variant, color, weight, className, children, .
 /** Inline-decorations allowed on Span (pill chips, code-like wraps, etc). */
 type SpanRounded = "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 type SpanBorder = "none" | "default" | "subtle" | "strong";
-type SpanPadding = "none" | "x-xs" | "x-sm" | "x-md" | "y-2xs" | "y-xs" | "y-sm" | "inline-sm" | "inline" | "pill-2xs" | "pill-xs" | "pill-sm" | "pill-sm-tall" | "pill-md" | "pill-lg";
+type SpanPadding = "none" | "2xs" | "x-xs" | "x-sm" | "x-md" | "y-2xs" | "y-xs" | "y-sm" | "inline-sm" | "inline" | "pill-2xs" | "pill-xs" | "pill-sm" | "pill-sm-tall" | "pill-md" | "pill-lg";
 type SpanBg = "none" | "muted" | "subtle" | "default" | "success-surface" | "danger-surface" | "warning-surface" | "info-surface" | "overlay-xs" | "overlay-sm" | "overlay-md" | "overlay-lg" | "overlay-xl";
 type SpanLayout = "inline" | "inline-flex" | "flex" | "inline-flex-center" | "flex-center" | "inline-block" | "block";
 type SpanGap = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
+type SpanShadow = "none" | "sm" | "md" | "lg" | "2xl" | "default";
 interface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Colour variant. "inherit" (default) applies no colour class. */
     variant?: "inherit" | "primary" | "secondary" | "muted" | "error" | "success" | "accent";
@@ -194,7 +212,9 @@ interface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {
     padding?: SpanPadding;
     surface?: SpanBg;
     border?: SpanBorder;
+    /** Box shadow preset for Span overlays (e.g. toggle thumb). */
+    shadow?: SpanShadow;
     children?: React.ReactNode;
 }
-export declare function Span({ variant, color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, rounded, padding, surface, border, layout, gap, className, children, ...props }: SpanProps): import("react/jsx-runtime").JSX.Element;
+export declare const Span: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/dist/ui/components/Typography.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { ROUNDED_MAP, PADDING_MAP, X_ONLY_MAP } from "./surface-tokens";
 const TYPOGRAPHY = {
     headingLevel: {
         1: "appkit-heading--h1",
@@ -45,6 +47,16 @@ const TYPOGRAPHY = {
         inverse: "appkit-color--inverse",
     },
 };
+const DROP_SHADOW_MAP = {
+    none: "",
+    sm: "drop-shadow-sm",
+    md: "drop-shadow-md",
+    lg: "drop-shadow-lg",
+    "2xl": "drop-shadow-2xl",
+};
+const HEADING_TEXT_SHADOW_MAP = {
+    "soft-dark": "[text-shadow:0_4px_32px_rgba(0,0,0,0.5)]",
+};
 function shapingClasses(opts) {
     const out = [];
     if (opts.transform && opts.transform !== "none") {
@@ -74,7 +86,7 @@ function responsiveSizeClass(prefix, size) {
     // than the custom .appkit-text--N classes (which don't).
     return `${prefix}text-${size}`;
 }
-export function Heading({ level = 1, variant = "primary", color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, className = "", children, ...props }) {
+export function Heading({ level = 1, variant = "primary", color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, shadow, textShadow, className = "", children, ...props }) {
     const Tag = `h${level}`;
     const resolvedColor = color ?? variant;
     return (_jsx(Tag, { className: [
@@ -88,6 +100,8 @@ export function Heading({ level = 1, variant = "primary", color, size, smSize, m
             responsiveSizeClass("xl:", xlSize),
             weight ? TYPOGRAPHY.textWeight[weight] : "",
             ...shapingClasses({ transform, truncate, numeric, italic, family, align, gradient }),
+            shadow ? DROP_SHADOW_MAP[shadow] : "",
+            textShadow ? HEADING_TEXT_SHADOW_MAP[textShadow] : "",
             className,
         ]
             .filter(Boolean)
@@ -126,14 +140,8 @@ const TEXT_GAP_MAP = {
     "2": "gap-2",
     "3": "gap-3",
 };
-const TEXT_SHADOW_MAP = {
-    none: "",
-    sm: "drop-shadow-sm",
-    md: "drop-shadow-md",
-    lg: "drop-shadow-lg",
-    "2xl": "drop-shadow-2xl",
-};
-export function Text({ variant = "primary", color, size = "base", smSize, mdSize, lgSize, xlSize, weight = "normal", transform, truncate, numeric, italic, family, align, gradient, paddingY, layout, gap, shadow, className = "", as: Tag = "p", children, ...props }) {
+const TEXT_SHADOW_MAP = DROP_SHADOW_MAP;
+export function Text({ variant = "primary", color, size = "base", smSize, mdSize, lgSize, xlSize, weight = "normal", transform, truncate, numeric, italic, family, align, gradient, paddingY, paddingX, rounded, layout, gap, shadow, className = "", as: Tag = "p", children, ...props }) {
     const resolvedColor = color ?? variant;
     return (_jsx(Tag, { className: [
             "appkit-text",
@@ -146,6 +154,8 @@ export function Text({ variant = "primary", color, size = "base", smSize, mdSize
             TYPOGRAPHY.colorVariant[resolvedColor],
             ...shapingClasses({ transform, truncate, numeric, italic, family, align, gradient }),
             paddingY ? TEXT_PADDING_Y_MAP[paddingY] : "",
+            paddingX ? X_ONLY_MAP[paddingX] : "",
+            rounded ? ROUNDED_MAP[rounded] : "",
             layout ? TEXT_LAYOUT_MAP[layout] : "",
             gap ? TEXT_GAP_MAP[gap] : "",
             shadow ? TEXT_SHADOW_MAP[shadow] : "",
@@ -160,6 +170,8 @@ const LABEL_LAYOUT_MAP = {
     flex: CLS_FLEX,
     /** Flex container with `items-start` cross-axis alignment — for checkbox + multi-line description rows. */
     "flex-start": "flex items-start",
+    /** Flex column with center cross-axis + main-axis alignment — for upload drop-zone labels. */
+    "flex-col-center": "flex flex-col items-center justify-center",
 };
 const LABEL_GAP_MAP = {
     none: "",
@@ -168,7 +180,7 @@ const LABEL_GAP_MAP = {
     md: "gap-2",
     lg: "gap-3",
 };
-export function Label({ required, size, weight, color, transform, align, layout, gap, className = "", children, ...props }) {
+export function Label({ required, size, weight, color, transform, align, layout, gap, rounded, padding, className = "", children, ...props }) {
     return (_jsxs("label", { className: [
             "appkit-label",
             size ? TYPOGRAPHY.textSize[size] : "",
@@ -178,6 +190,8 @@ export function Label({ required, size, weight, color, transform, align, layout,
             align ? `appkit-text--align-${align}` : "",
             layout ? LABEL_LAYOUT_MAP[layout] : "",
             gap ? LABEL_GAP_MAP[gap] : "",
+            rounded ? ROUNDED_MAP[rounded] : "",
+            padding ? PADDING_MAP[padding] : "",
             className,
         ]
             .filter(Boolean)
@@ -217,6 +231,7 @@ const SPAN_ROUNDED_MAP = {
 };
 const SPAN_PADDING_MAP = {
     none: "",
+    "2xs": "p-2",
     "x-xs": "px-2",
     "x-sm": "px-3",
     "x-md": "px-4",
@@ -264,7 +279,15 @@ const SPAN_GAP_MAP = {
     md: "gap-2",
     lg: "gap-3",
 };
-export function Span({ variant = "inherit", color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, rounded, padding, surface, border, layout, gap, className = "", children, ...props }) {
+const SPAN_SHADOW_MAP = {
+    none: "",
+    default: "shadow",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+    "2xl": "shadow-2xl",
+};
+export const Span = React.forwardRef(function Span({ variant = "inherit", color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, rounded, padding, surface, border, layout, gap, shadow, className = "", children, ...props }, ref) {
     const resolvedColor = color ?? variant;
     const classes = [
         "appkit-span",
@@ -282,9 +305,10 @@ export function Span({ variant = "inherit", color, size, smSize, mdSize, lgSize,
         border ? SPAN_BORDER_MAP[border] : "",
         layout ? SPAN_LAYOUT_MAP[layout] : "",
         gap ? SPAN_GAP_MAP[gap] : "",
+        shadow ? SPAN_SHADOW_MAP[shadow] : "",
         className,
     ]
         .filter(Boolean)
         .join(" ");
-    return (_jsx("span", { className: classes, ...props, children: children }));
-}
+    return (_jsx("span", { ref: ref, className: classes, ...props, children: children }));
+});

package/dist/ui/components/VacationBanner.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert } from "./Alert";
 import { Div } from "./Div";

package/dist/ui/components/surface-tokens.d.ts

@@ -39,6 +39,7 @@ export declare const PADDING_MAP: {
     readonly "5": "p-5";
     readonly lg: "p-6";
     readonly xl: "p-8";
+    readonly "3xl": "p-12";
     readonly card: "p-5 sm:p-6 lg:p-8";
     readonly "card-tight": "p-3 sm:p-4";
     readonly section: "py-10 sm:py-14 xl:py-20";
@@ -122,6 +123,10 @@ export declare const SHADOW_MAP: {
     readonly "hover-md": "hover:shadow-md transition-shadow";
     /** No static shadow; transitions to shadow-lg on hover. */
     readonly "hover-lg": "hover:shadow-lg transition-shadow";
+    /** Resting shadow-sm that lifts to shadow-md on hover. */
+    readonly "sm-hover-md": "shadow-sm hover:shadow-md transition-shadow";
+    /** Themed card shadow via --card-shadow CSS variable. */
+    readonly card: "shadow-[var(--card-shadow)]";
 };
 export type ShadowKey = keyof typeof SHADOW_MAP;
 /**
@@ -164,6 +169,7 @@ export declare const PADDING_PRESETS: {
     readonly "5": "p-5";
     readonly lg: "p-6";
     readonly xl: "p-8";
+    readonly "3xl": "p-12";
     readonly card: "p-5 sm:p-6 lg:p-8";
     readonly "card-tight": "p-3 sm:p-4";
     readonly section: "py-10 sm:py-14 xl:py-20";
@@ -210,8 +216,10 @@ export declare const PADDING_PRESETS: {
     readonly "content-banner": "py-10 md:py-12 lg:py-16";
 };
 export type PaddingPresetKey = PaddingKey;
-type XPaddingKey = "none" | "x-xs" | "x-sm" | "x-md" | "x-5" | "x-lg" | "x-xl" | "x-sm-md" | "x-sm-lg-md" | "x-md-lg" | "x-md-xl" | "x-md-2xl" | "x-page";
-type YPaddingKey = "none" | "y-2xs" | "y-2xs-tall" | "y-xs" | "y-xs-tall" | "y-sm" | "y-sm-tall" | "y-md" | "y-md-lg" | "y-lg" | "y-xl" | "y-2xl" | "y-3xl" | "y-4xl" | "y-5xl" | "y-6xl" | "y-2-5xl" | "t-2xs" | "b-2xs" | "t-xs" | "b-xs" | "t-sm" | "b-sm" | "t-md" | "b-md" | "b-md-lg" | "b-lg";
+export type XPaddingKey = "none" | "x-xs" | "x-sm" | "x-md" | "x-5" | "x-lg" | "x-xl" | "x-sm-md" | "x-sm-lg-md" | "x-md-lg" | "x-md-xl" | "x-md-2xl" | "x-page";
+type YPaddingKey = "none" | "y-2xs" | "y-2xs-tall" | "y-xs" | "y-xs-tall" | "y-sm" | "y-sm-tall" | "y-md" | "y-md-lg" | "y-lg" | "y-xl" | "y-2xl" | "y-3xl" | "y-4xl" | "y-5xl" | "y-6xl" | "y-2-5xl" | "t-2xs" | "b-2xs" | "t-xs" | "b-xs" | "t-sm" | "b-sm" | "t-md" | "b-md" | "b-md-lg" | "b-lg" | "t-md-b-lg";
+export declare const X_ONLY_MAP: Record<XPaddingKey, string>;
+export type OverflowKey = "auto" | "hidden" | "scroll" | "visible" | "x-auto" | "x-hidden" | "y-auto" | "y-hidden";
 export interface SurfaceProps {
     surface?: SurfaceKey;
     padding?: PaddingKey;
@@ -222,6 +230,8 @@ export interface SurfaceProps {
     rounded?: RoundedKey;
     border?: BorderKey;
     shadow?: ShadowKey;
+    /** Overflow behaviour — replaces consumer `overflow-*` className. */
+    overflow?: OverflowKey;
 }
 export declare function buildSurfaceClasses(props: SurfaceProps): string;
 export {};