@mohasinac/appkit 2.7.57 → 2.7.58

package/dist/ui/components/Motion.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { motion, useReducedMotion, AnimatePresence as MotionAnimatePresence, } from "motion/react";
+import { MOTION_PRESETS, SPRING_SNAPPY, EASE_OUT } from "../../tokens/motion";
+// Re-export AnimatePresence for consumer convenience
+export const AnimatePresence = MotionAnimatePresence;
+// ── Reduced motion helper ────────────────────────────────────────────────────
+function useMotionProps(props) {
+    const reduced = useReducedMotion();
+    if (!reduced)
+        return props;
+    const { initial, animate, exit, whileHover, whileTap, whileInView, transition, ...rest } = props;
+    return { ...rest, initial: false, animate: false };
+}
+export function FadeIn({ delay = 0, duration = 0.3, children, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+export function SlideUp({ delay = 0, distance = 20, children, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0, y: distance },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: distance },
+        transition: { ...SPRING_SNAPPY, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+const SLIDE_OFFSETS = {
+    left: { x: -24, y: 0 },
+    right: { x: 24, y: 0 },
+    up: { x: 0, y: -20 },
+    down: { x: 0, y: 20 },
+};
+export function SlideIn({ direction = "left", delay = 0, distance, children, ...props }) {
+    const offset = SLIDE_OFFSETS[direction];
+    const scale = distance ? distance / Math.max(Math.abs(offset.x || 1), Math.abs(offset.y || 1)) : 1;
+    const motionProps = useMotionProps({
+        initial: { opacity: 0, x: offset.x * scale, y: offset.y * scale },
+        animate: { opacity: 1, x: 0, y: 0 },
+        exit: { opacity: 0, x: offset.x * scale, y: offset.y * scale },
+        transition: { ...SPRING_SNAPPY, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+export function ScaleIn({ delay = 0, children, ...props }) {
+    const motionProps = useMotionProps({
+        ...MOTION_PRESETS.scaleIn,
+        transition: { ...MOTION_PRESETS.scaleIn.transition, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+export function Collapse({ isOpen, children, ...props }) {
+    const reduced = useReducedMotion();
+    return (_jsx(MotionAnimatePresence, { initial: false, children: isOpen && (_jsx(motion.div, { initial: reduced ? false : { height: 0, opacity: 0, overflow: "hidden" }, animate: { height: "auto", opacity: 1, overflow: "hidden" }, exit: { height: 0, opacity: 0, overflow: "hidden" }, transition: EASE_OUT, ...props, children: children })) }));
+}
+export function PressScale({ scale = 0.97, children, ...props }) {
+    const reduced = useReducedMotion();
+    return (_jsx(motion.div, { whileTap: reduced ? undefined : { scale }, transition: { duration: 0.1 }, ...props, children: children }));
+}
+export function HoverLift({ lift = 2, children, ...props }) {
+    const reduced = useReducedMotion();
+    return (_jsx(motion.div, { whileHover: reduced ? undefined : { y: -lift }, transition: SPRING_SNAPPY, ...props, children: children }));
+}
+export function AnimatedList({ staggerDelay = 0.05, children, ...props }) {
+    const reduced = useReducedMotion();
+    const items = React.Children.toArray(children);
+    return (_jsx(motion.div, { ...props, children: items.map((child, i) => (_jsx(motion.div, { initial: reduced ? false : { opacity: 0, y: 16 }, animate: { opacity: 1, y: 0 }, transition: { ...EASE_OUT, delay: i * staggerDelay }, children: child }, React.isValidElement(child) ? (child.key ?? i) : i))) }));
+}
+export function AnimatedDiv({ delay = 0, children, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+export function AnimatedStack({ delay = 0, children, className, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2, delay },
+        ...props,
+    });
+    return (_jsx(motion.div, { ...motionProps, className: ["flex flex-col gap-4", className].filter(Boolean).join(" "), children: children }));
+}
+export function AnimatedRow({ delay = 0, children, className, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2, delay },
+        ...props,
+    });
+    return (_jsx(motion.div, { ...motionProps, className: ["flex flex-row gap-4", className].filter(Boolean).join(" "), children: children }));
+}
+export function Draggable({ axis, constraints, dragElastic = 0.1, children, ...props }) {
+    const reduced = useReducedMotion();
+    const drag = reduced ? false : (axis === true ? true : axis || true);
+    return (_jsx(motion.div, { drag: drag, dragConstraints: constraints, dragElastic: dragElastic, ...props, children: children }));
+}
+export function Swipeable({ onSwipeLeft, onSwipeRight, threshold = 50, children, ...props }) {
+    const reduced = useReducedMotion();
+    return (_jsx(motion.div, { drag: reduced ? false : "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 0.2, onDragEnd: (_e, info) => {
+            if (info.offset.x < -threshold)
+                onSwipeLeft?.();
+            if (info.offset.x > threshold)
+                onSwipeRight?.();
+        }, ...props, children: children }));
+}

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SurfaceProps } from "./surface-tokens";
 /**
  * Semantic HTML Wrapper Components
  *
@@ -35,7 +36,7 @@ import React from "react";
  * Use for thematically grouped content that would appear in an outline.
  * Prefer this over a plain `<div data-section="semantic-div-596">` when the block has a heading.
  */
-export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+export interface SectionProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
 export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
@@ -43,24 +44,24 @@ export declare const Section: React.ForwardRefExoticComponent<SectionProps & Rea
  * Semantic `<article>` element.
  * Use for self-contained compositions: blog posts, product cards, reviews, forum posts.
  */
-export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
+export interface ArticleProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children?: React.ReactNode;
 }
-export declare function Article({ className, children, ...props }: ArticleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Article({ className, surface, padding, rounded, border, shadow, children, ...props }: ArticleProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Semantic `<main>` element.
  * Wraps the primary content of the document. Should appear only once per page.
  */
-export interface MainProps extends React.HTMLAttributes<HTMLElement> {
+export interface MainProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function Main({ className, children, ...props }: MainProps): import("react/jsx-runtime").JSX.Element;
+export declare function Main({ className, surface, padding, rounded, border, shadow, children, ...props }: MainProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Semantic `<aside>` element.
  * Use for supplementary content tangentially related to the main content:
  * sidebars, callout boxes, related-link panels.
  */
-export interface AsideProps extends React.HTMLAttributes<HTMLElement> {
+export interface AsideProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
 export declare const Aside: React.ForwardRefExoticComponent<AsideProps & React.RefAttributes<HTMLElement>>;
@@ -95,18 +96,18 @@ export declare function Nav({ className, children, ...props }: NavProps): import
  * </Article>
  * ```
  */
-export interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement> {
+export interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function BlockHeader({ className, children, ...props }: BlockHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlockHeader({ className, surface, padding, rounded, border, shadow, children, ...props }: BlockHeaderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Semantic `<footer>` element for block-level component footers.
  * Use inside `Section`, `Article`, or card bodies — NOT as the page-level footer.
  */
-export interface BlockFooterProps extends React.HTMLAttributes<HTMLElement> {
+export interface BlockFooterProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function BlockFooter({ className, children, ...props }: BlockFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlockFooter({ className, surface, padding, rounded, border, shadow, children, ...props }: BlockFooterProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Semantic `<ul>` (unordered list) element.
  *
@@ -144,11 +145,77 @@ export interface LiProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
 }
 export declare function Li({ className, children, ...props }: LiProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Aliases for `BlockHeader` and `BlockFooter`.
- * Use when importing from the standard `<Header>` / `<Footer>` names.
- */
 export type HeaderProps = BlockHeaderProps;
 export declare const Header: typeof BlockHeader;
 export type FooterProps = BlockFooterProps;
 export declare const Footer: typeof BlockFooter;
+type TableVariant = "default" | "striped" | "bordered";
+type TableSize = "sm" | "md" | "lg";
+export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, "border">, SurfaceProps {
+    variant?: TableVariant;
+    size?: TableSize;
+    stickyHeader?: boolean;
+    children: React.ReactNode;
+}
+export declare function Table({ variant, size, stickyHeader, className, surface, padding, rounded, border, shadow, children, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children: React.ReactNode;
+}
+export declare function Thead({ className, children, ...props }: TheadProps): import("react/jsx-runtime").JSX.Element;
+export interface TbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children: React.ReactNode;
+}
+export declare function Tbody({ className, children, ...props }: TbodyProps): import("react/jsx-runtime").JSX.Element;
+export interface TrProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    hover?: boolean;
+    children: React.ReactNode;
+}
+export declare function Tr({ hover, className, children, ...props }: TrProps): import("react/jsx-runtime").JSX.Element;
+type CellAlign = "left" | "center" | "right";
+export interface ThProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    align?: CellAlign;
+    children?: React.ReactNode;
+}
+export declare function Th({ align, className, children, ...props }: ThProps): import("react/jsx-runtime").JSX.Element;
+export interface TdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    align?: CellAlign;
+    children?: React.ReactNode;
+}
+export declare function Td({ align, className, children, ...props }: TdProps): import("react/jsx-runtime").JSX.Element;
+export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+    color?: "default" | "primary" | "error" | "success";
+    children: React.ReactNode;
+}
+export declare function Code({ color, className, children, ...props }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export interface PreProps extends React.HTMLAttributes<HTMLPreElement>, SurfaceProps {
+    children: React.ReactNode;
+}
+export declare function Pre({ className, surface, padding, rounded, border, shadow, children, ...props }: PreProps): import("react/jsx-runtime").JSX.Element;
+export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement>, SurfaceProps {
+    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 interface FigureProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
+    children: React.ReactNode;
+}
+export declare function Figure({ className, surface, padding, rounded, border, shadow, children, ...props }: FigureProps): import("react/jsx-runtime").JSX.Element;
+export interface FigcaptionProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function Figcaption({ className, children, ...props }: FigcaptionProps): import("react/jsx-runtime").JSX.Element;
+type DlVariant = "stacked" | "inline";
+export interface DlProps extends React.HTMLAttributes<HTMLDListElement>, SurfaceProps {
+    variant?: DlVariant;
+    children: React.ReactNode;
+}
+export declare function Dl({ variant, className, surface, padding, rounded, border, shadow, children, ...props }: DlProps): import("react/jsx-runtime").JSX.Element;
+export interface DtProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function Dt({ className, children, ...props }: DtProps): import("react/jsx-runtime").JSX.Element;
+export interface DdProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function Dd({ className, children, ...props }: DdProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/Semantic.js

@@ -1,23 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-export const Section = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("section", { className: className, ref: ref, ...props, children: children })));
+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 })));
 Section.displayName = "Section";
-export function Article({ className = "", children, ...props }) {
-    return (_jsx("article", { className: className, ...props, children: children }));
+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 Main({ className = "", children, ...props }) {
-    return (_jsx("main", { className: className, ...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 const Aside = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("aside", { className: className, ref: ref, ...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 })));
 Aside.displayName = "Aside";
 export function Nav({ className = "", children, ...props }) {
     return (_jsx("nav", { className: className, ...props, children: children }));
 }
-export function BlockHeader({ className = "", children, ...props }) {
-    return (_jsx("header", { className: className, ...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 }));
 }
-export function BlockFooter({ className = "", children, ...props }) {
-    return (_jsx("footer", { className: className, ...props, children: children }));
+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 }));
@@ -30,3 +31,67 @@ export function Li({ className = "", children, ...props }) {
 }
 export const Header = BlockHeader;
 export const Footer = BlockFooter;
+const TABLE_VARIANT_MAP = {
+    default: "appkit-table--default",
+    striped: "appkit-table--striped",
+    bordered: "appkit-table--bordered",
+};
+const TABLE_SIZE_MAP = {
+    sm: "appkit-table--sm",
+    md: "appkit-table--md",
+    lg: "appkit-table--lg",
+};
+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 }));
+}
+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 }));
+}
+export function Th({ align, className = "", children, ...props }) {
+    return (_jsx("th", { className: ["appkit-th", align ? `text-${align}` : "", 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 }));
+}
+const CODE_COLOR_MAP = {
+    default: "appkit-code--default",
+    primary: "appkit-code--primary",
+    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 }));
+}
+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 }));
+}
+const BLOCKQUOTE_COLOR_MAP = {
+    default: "appkit-blockquote--default",
+    primary: "appkit-blockquote--primary",
+    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 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 }));
+}
+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 Dt({ className = "", children, ...props }) {
+    return (_jsx("dt", { className: ["appkit-dt", 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 }));
+}

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

@@ -1,6 +1,4 @@
 /* Semantic — HTML5 landmark wrappers (Section, Article, Main, Aside, Nav, etc.) */
-/* Pure passthroughs — no default styles. Exists for style contract compliance. */
-/* Consumer themes may add base landmark styles via these hooks. */
 
 .appkit-section {}
 .appkit-article {}
@@ -12,3 +10,264 @@
 .appkit-ul {}
 .appkit-ol {}
 .appkit-li {}
+
+/* --- Table family --------------------------------------------------------- */
+
+.appkit-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.appkit-table--sm .appkit-th,
+.appkit-table--sm .appkit-td { padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
+
+.appkit-table--md .appkit-th,
+.appkit-table--md .appkit-td { padding: 0.625rem 0.75rem; font-size: 0.875rem; }
+
+.appkit-table--lg .appkit-th,
+.appkit-table--lg .appkit-td { padding: 0.875rem 1rem; font-size: 1rem; }
+
+.appkit-thead {}
+
+.appkit-th {
+  font-weight: 600;
+  color: var(--appkit-color-zinc-600, #52525b);
+  border-bottom: 1px solid var(--appkit-color-zinc-200, #e4e4e7);
+}
+
+.dark .appkit-th {
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+  border-bottom-color: var(--appkit-color-slate-700, #334155);
+}
+
+.appkit-td {
+  border-bottom: 1px solid var(--appkit-color-zinc-100, #f4f4f5);
+}
+
+.dark .appkit-td {
+  border-bottom-color: var(--appkit-color-slate-800, #1e293b);
+}
+
+.appkit-table--default .appkit-th {
+  background: var(--appkit-color-zinc-50, #fafafa);
+}
+
+.dark .appkit-table--default .appkit-th {
+  background: var(--appkit-color-slate-900, #0f172a);
+}
+
+.appkit-table--striped .appkit-tbody .appkit-tr:nth-child(even) {
+  background: var(--appkit-color-zinc-50, #fafafa);
+}
+
+.dark .appkit-table--striped .appkit-tbody .appkit-tr:nth-child(even) {
+  background: var(--appkit-color-slate-800, #1e293b);
+}
+
+.appkit-table--bordered .appkit-th,
+.appkit-table--bordered .appkit-td {
+  border: 1px solid var(--appkit-color-zinc-200, #e4e4e7);
+}
+
+.dark .appkit-table--bordered .appkit-th,
+.dark .appkit-table--bordered .appkit-td {
+  border-color: var(--appkit-color-slate-700, #334155);
+}
+
+.appkit-table--sticky-header .appkit-th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--appkit-color-zinc-50, #fafafa);
+}
+
+.dark .appkit-table--sticky-header .appkit-th {
+  background: var(--appkit-color-slate-900, #0f172a);
+}
+
+.appkit-tr--hover:hover {
+  background: var(--appkit-color-zinc-50, #fafafa);
+}
+
+.dark .appkit-tr--hover:hover {
+  background: var(--appkit-color-slate-800, #1e293b);
+}
+
+/* --- Code / Pre ----------------------------------------------------------- */
+
+.appkit-code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875em;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+.appkit-code--default {
+  background: var(--appkit-color-zinc-100, #f4f4f5);
+  color: var(--appkit-color-zinc-800, #27272a);
+}
+
+.dark .appkit-code--default {
+  background: var(--appkit-color-slate-800, #1e293b);
+  color: var(--appkit-color-zinc-200, #e4e4e7);
+}
+
+.appkit-code--primary {
+  background: var(--appkit-color-primary-50, #eef5ff);
+  color: var(--appkit-color-primary-700, #1343de);
+}
+
+.dark .appkit-code--primary {
+  background: var(--appkit-color-primary-950, #111e58);
+  color: var(--appkit-color-primary-300, #8eb9ff);
+}
+
+.appkit-code--error {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.dark .appkit-code--error {
+  background: #1c0a0a;
+  color: #fca5a5;
+}
+
+.appkit-code--success {
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.dark .appkit-code--success {
+  background: #052e16;
+  color: #86efac;
+}
+
+.appkit-pre {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  margin: 0;
+  overflow-x: auto;
+  background: var(--appkit-color-zinc-50, #fafafa);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.dark .appkit-pre {
+  background: var(--appkit-color-slate-900, #0f172a);
+}
+
+/* --- Blockquote ----------------------------------------------------------- */
+
+.appkit-blockquote {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border-left: 3px solid;
+  font-style: italic;
+}
+
+.appkit-blockquote--default {
+  border-left-color: var(--appkit-color-zinc-300, #d4d4d8);
+  color: var(--appkit-color-zinc-600, #52525b);
+}
+
+.dark .appkit-blockquote--default {
+  border-left-color: var(--appkit-color-slate-600, #475569);
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+}
+
+.appkit-blockquote--primary {
+  border-left-color: var(--appkit-color-primary);
+  color: var(--appkit-color-primary-700, #1343de);
+}
+
+.dark .appkit-blockquote--primary {
+  color: var(--appkit-color-primary-300, #8eb9ff);
+}
+
+.appkit-blockquote--info {
+  border-left-color: var(--appkit-color-info, #0284c7);
+  color: var(--appkit-color-info, #0284c7);
+}
+
+.dark .appkit-blockquote--info {
+  border-left-color: var(--appkit-color-info, #38bdf8);
+  color: var(--appkit-color-info, #38bdf8);
+}
+
+.appkit-blockquote--warning {
+  border-left-color: var(--appkit-color-warning, #d97706);
+  color: var(--appkit-color-warning, #d97706);
+}
+
+.dark .appkit-blockquote--warning {
+  border-left-color: var(--appkit-color-warning, #fbbf24);
+  color: var(--appkit-color-warning, #fbbf24);
+}
+
+/* --- Figure / Figcaption -------------------------------------------------- */
+
+.appkit-figure {
+  margin: 0;
+}
+
+.appkit-figcaption {
+  font-size: 0.875rem;
+  color: var(--appkit-color-zinc-500, #71717a);
+  margin-top: 0.5rem;
+}
+
+.dark .appkit-figcaption {
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+}
+
+/* --- Dl / Dt / Dd (description list) -------------------------------------- */
+
+.appkit-dl {
+  margin: 0;
+}
+
+.appkit-dl--stacked .appkit-dt {
+  font-weight: 600;
+  color: var(--appkit-color-zinc-700, #3f3f46);
+  margin-bottom: 0.25rem;
+}
+
+.dark .appkit-dl--stacked .appkit-dt {
+  color: var(--appkit-color-zinc-300, #d4d4d8);
+}
+
+.appkit-dl--stacked .appkit-dd {
+  margin: 0 0 1rem 0;
+  color: var(--appkit-color-zinc-600, #52525b);
+}
+
+.dark .appkit-dl--stacked .appkit-dd {
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+}
+
+.appkit-dl--inline {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem 1rem;
+  align-items: baseline;
+}
+
+.appkit-dl--inline .appkit-dt {
+  font-weight: 600;
+  color: var(--appkit-color-zinc-700, #3f3f46);
+}
+
+.dark .appkit-dl--inline .appkit-dt {
+  color: var(--appkit-color-zinc-300, #d4d4d8);
+}
+
+.appkit-dl--inline .appkit-dd {
+  margin: 0;
+  color: var(--appkit-color-zinc-600, #52525b);
+}
+
+.dark .appkit-dl--inline .appkit-dd {
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+}

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

@@ -24,4 +24,4 @@ export interface SideDrawerProps {
  * </SideDrawer>
  * ```
  */
-export declare function SideDrawer({ isOpen, onClose, title, children, footer, mode, isDirty, side, }: SideDrawerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SideDrawer({ isOpen, onClose, title, children, footer, mode, isDirty, side, }: SideDrawerProps): import("react/jsx-runtime").JSX.Element;