@mohasinac/appkit 2.7.56 → 2.7.58

package/dist/tokens/index.d.ts

@@ -366,7 +366,7 @@ export declare const THEME_CONSTANTS: {
         readonly bgInput: "bg-white dark:bg-slate-800/60";
         readonly textPrimary: "text-zinc-900 dark:text-zinc-50";
         readonly textSecondary: "text-zinc-500 dark:text-zinc-400";
-        readonly textMuted: "text-zinc-400 dark:text-zinc-500";
+        readonly textMuted: "text-zinc-400 dark:text-zinc-400";
         readonly textError: "text-red-600 dark:text-red-400";
         readonly textSuccess: "text-emerald-600 dark:text-emerald-400";
         readonly textOnPrimary: "text-white";
@@ -585,7 +585,7 @@ export declare const THEME_CONSTANTS: {
         readonly base: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-base sm:text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/40 dark:focus:ring-secondary-400/40 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
         readonly error: "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
         readonly success: "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
-        readonly disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60";
+        readonly disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-400 cursor-not-allowed opacity-60";
         readonly withIcon: "pl-10";
     };
     readonly card: {
@@ -778,7 +778,7 @@ export declare const THEME_CONSTANTS: {
         readonly emptyState: "flex flex-col items-center justify-center py-12 text-center text-zinc-500 dark:text-zinc-400";
     };
     readonly icon: {
-        readonly muted: "text-zinc-400 dark:text-zinc-500";
+        readonly muted: "text-zinc-400 dark:text-zinc-400";
         readonly primary: "text-primary-600 dark:text-secondary-400";
         readonly success: "text-emerald-500 dark:text-emerald-400";
         readonly danger: "text-red-500 dark:text-red-400";

package/dist/tokens/index.js

@@ -203,7 +203,7 @@ const THEMED = {
     // Text
     textPrimary: "text-zinc-900 dark:text-zinc-50",
     textSecondary: "text-zinc-500 dark:text-zinc-400",
-    textMuted: "text-zinc-400 dark:text-zinc-500",
+    textMuted: "text-zinc-400 dark:text-zinc-400",
     textError: "text-red-600 dark:text-red-400",
     textSuccess: "text-emerald-600 dark:text-emerald-400",
     textOnPrimary: "text-white",
@@ -488,7 +488,7 @@ const INPUT = {
     base: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-base sm:text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/40 dark:focus:ring-secondary-400/40 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500",
     error: "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10",
     success: "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500",
-    disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60",
+    disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-400 cursor-not-allowed opacity-60",
     withIcon: "pl-10",
 };
 /**
@@ -674,7 +674,7 @@ const PATTERNS = {
 };
 /** Icon colour variants and sizes. */
 const ICON = {
-    muted: "text-zinc-400 dark:text-zinc-500",
+    muted: "text-zinc-400 dark:text-zinc-400",
     primary: "text-primary-600 dark:text-secondary-400",
     success: "text-emerald-500 dark:text-emerald-400",
     danger: "text-red-500 dark:text-red-400",

package/dist/tokens/motion.d.ts

@@ -0,0 +1,162 @@
+/**
+ * Motion presets — reusable animation configs for motion/react components.
+ *
+ * All presets respect `prefers-reduced-motion` via the `useReducedMotion` hook
+ * in the consuming component wrappers (Motion.tsx).
+ */
+import type { Transition } from "motion/react";
+export declare const SPRING_SNAPPY: Transition;
+export declare const SPRING_GENTLE: Transition;
+export declare const EASE_OUT: Transition;
+export declare const MOTION_PRESETS: {
+    readonly fadeIn: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+        readonly transition: {
+            readonly duration: 0.2;
+        };
+    };
+    readonly fadeInUp: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 16;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: 16;
+        };
+        readonly transition: Transition;
+    };
+    readonly fadeInDown: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: -16;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: -16;
+        };
+        readonly transition: Transition;
+    };
+    readonly slideUp: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: 20;
+        };
+        readonly transition: Transition;
+    };
+    readonly slideDown: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: -20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: -20;
+        };
+        readonly transition: Transition;
+    };
+    readonly slideInLeft: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly x: -24;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly x: -24;
+        };
+        readonly transition: Transition;
+    };
+    readonly slideInRight: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly x: 24;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly x: 24;
+        };
+        readonly transition: Transition;
+    };
+    readonly scaleIn: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+        };
+        readonly transition: Transition;
+    };
+    readonly pressScale: {
+        readonly whileTap: {
+            readonly scale: 0.97;
+        };
+        readonly transition: {
+            readonly duration: 0.1;
+        };
+    };
+    readonly hoverLift: {
+        readonly whileHover: {
+            readonly y: -2;
+        };
+        readonly transition: Transition;
+    };
+    readonly hoverScale: {
+        readonly whileHover: {
+            readonly scale: 1.02;
+        };
+        readonly transition: Transition;
+    };
+    readonly stagger: {
+        readonly transition: {
+            readonly staggerChildren: 0.05;
+        };
+    };
+    readonly staggerSlow: {
+        readonly transition: {
+            readonly staggerChildren: 0.1;
+        };
+    };
+};
+export type MotionPreset = keyof typeof MOTION_PRESETS;

package/dist/tokens/motion.js

@@ -0,0 +1,89 @@
+/**
+ * Motion presets — reusable animation configs for motion/react components.
+ *
+ * All presets respect `prefers-reduced-motion` via the `useReducedMotion` hook
+ * in the consuming component wrappers (Motion.tsx).
+ */
+export const SPRING_SNAPPY = {
+    type: "spring",
+    stiffness: 400,
+    damping: 30,
+};
+export const SPRING_GENTLE = {
+    type: "spring",
+    stiffness: 200,
+    damping: 25,
+};
+export const EASE_OUT = {
+    type: "tween",
+    ease: [0.25, 0.46, 0.45, 0.94],
+    duration: 0.3,
+};
+export const MOTION_PRESETS = {
+    fadeIn: {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+    },
+    fadeInUp: {
+        initial: { opacity: 0, y: 16 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 16 },
+        transition: EASE_OUT,
+    },
+    fadeInDown: {
+        initial: { opacity: 0, y: -16 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -16 },
+        transition: EASE_OUT,
+    },
+    slideUp: {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 20 },
+        transition: SPRING_SNAPPY,
+    },
+    slideDown: {
+        initial: { opacity: 0, y: -20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -20 },
+        transition: SPRING_SNAPPY,
+    },
+    slideInLeft: {
+        initial: { opacity: 0, x: -24 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: -24 },
+        transition: SPRING_SNAPPY,
+    },
+    slideInRight: {
+        initial: { opacity: 0, x: 24 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: 24 },
+        transition: SPRING_SNAPPY,
+    },
+    scaleIn: {
+        initial: { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.95 },
+        transition: SPRING_GENTLE,
+    },
+    pressScale: {
+        whileTap: { scale: 0.97 },
+        transition: { duration: 0.1 },
+    },
+    hoverLift: {
+        whileHover: { y: -2 },
+        transition: SPRING_SNAPPY,
+    },
+    hoverScale: {
+        whileHover: { scale: 1.02 },
+        transition: SPRING_SNAPPY,
+    },
+    stagger: {
+        transition: { staggerChildren: 0.05 },
+    },
+    staggerSlow: {
+        transition: { staggerChildren: 0.1 },
+    },
+};

package/dist/ui/DataTable.js

@@ -6,6 +6,7 @@ import { Button } from "./components/Button";
 import { Spinner } from "./components/Spinner";
 import { Pagination } from "./components/Pagination";
 import { Text } from "./components/Typography";
+import { AnimatedList } from "./components/Motion";
 import { GRID_MAP } from "./components/Layout";
 import { Row } from "./components/Layout";
 import { mergeTableConfig, DEFAULT_PAGINATION_CONFIG } from "../contracts";
@@ -98,7 +99,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
     if (data.length === 0) {
         if (emptyState)
             return _jsx(_Fragment, { children: emptyState });
-        return (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-632", children: _jsx("div", { className: "appkit-data-table__empty", "data-section": "datatable-div-633", children: _jsxs("div", { className: "text-center px-4", "data-section": "datatable-div-634", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
+        return (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-632", children: _jsx("div", { className: "appkit-data-table__empty", "data-section": "datatable-div-633", children: _jsxs("div", { className: "text-center px-4", "data-section": "datatable-div-634", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
     }
     const renderViewToggle = () => {
         if (!showViewToggle)
@@ -109,9 +110,9 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
     const renderCardGrid = (mode) => {
         if (!mobileCardRender)
             return null;
-        return (_jsx("div", { className: mode === "grid"
+        return (_jsx(AnimatedList, { className: mode === "grid"
                 ? `${GRID_MAP[gridCols]} gap-6`
-                : "flex flex-col gap-4", "data-section": "datatable-div-636", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), listMode: mode === "list", onToggle: (id, checked) => onSelectionChange?.(checked
+                : "flex flex-col gap-4", staggerDelay: 0.03, "data-section": "datatable-div-636", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), listMode: mode === "list", onToggle: (id, checked) => onSelectionChange?.(checked
                     ? [...selectedIds, id]
                     : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) }));
     };
@@ -132,7 +133,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                                         ? "ascending"
                                                         : "descending"
                                                     : "none"
-                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx("span", { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx("span", { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx("span", { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                         "appkit-data-table__row",
                                         striped && index % 2 === 1
                                             ? "appkit-data-table__row--striped"
@@ -157,7 +158,7 @@ function DataTableTableView({ columns, paginatedData, keyExtractor, selectable,
                                         ? sortKey === col.key
                                             ? sortDirection === "asc" ? "ascending" : "descending"
                                             : "none"
-                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx("span", { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx("span", { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx("span", { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                 "appkit-data-table__row",
                                 striped && index % 2 === 1 ? "appkit-data-table__row--striped" : "",
                                 onRowClick ? "appkit-data-table__row--clickable" : "",

package/dist/ui/components/Accordion.js

@@ -4,6 +4,7 @@ import { createContext, useContext, useMemo, useState } from "react";
 import { Button } from "./Button";
 import { Div } from "./Div";
 import { Span } from "./Typography";
+import { Collapse } from "./Motion";
 const AccordionContext = createContext(null);
 function toArray(value) {
     if (!value)
@@ -53,5 +54,5 @@ export function AccordionItem({ value, title, disabled = false, className = "",
         throw new Error("AccordionItem must be used within Accordion.");
     }
     const isOpen = ctx.openValues.includes(value);
-    return (_jsxs(Div, { className: `appkit-accordion__item ${className}`, children: [_jsxs(Button, { type: "button", disabled: disabled, "aria-expanded": isOpen, onClick: () => ctx.toggle(value), className: "appkit-accordion__trigger", children: [_jsx(Span, { children: title }), _jsx(Span, { className: `appkit-accordion__item-chevron ${isOpen ? "appkit-accordion__item-chevron--open" : ""}`, children: "\u25BE" })] }), isOpen && _jsx(Div, { className: "appkit-accordion__panel", children: children })] }));
+    return (_jsxs(Div, { className: `appkit-accordion__item ${className}`, children: [_jsxs(Button, { type: "button", disabled: disabled, "aria-expanded": isOpen, onClick: () => ctx.toggle(value), className: "appkit-accordion__trigger", children: [_jsx(Span, { children: title }), _jsx(Span, { className: `appkit-accordion__item-chevron ${isOpen ? "appkit-accordion__item-chevron--open" : ""}`, children: "\u25BE" })] }), _jsx(Collapse, { isOpen: isOpen, children: _jsx(Div, { className: "appkit-accordion__panel", children: children }) })] }));
 }

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

@@ -107,6 +107,13 @@
   background: var(--appkit-color-secondary-400);
 }
 
+/* Cascade fill foreground to all non-appkit-component children inside filled
+   variants. :not([class*="appkit-"]) preserves Badge / Checkbox / Toggle
+   internal styling. Specificity (0,3,0) beats Tailwind text-* (0,1,0). */
+.appkit-button.appkit-button--primary :not([class*="appkit-"]) {
+  color: inherit;
+}
+
 .appkit-button.appkit-button--secondary {
   background: var(--appkit-color-surface);
   border-color: var(--appkit-color-primary-700);
@@ -173,6 +180,10 @@
   background: var(--appkit-color-error-hover);
 }
 
+.appkit-button.appkit-button--danger :not([class*="appkit-"]) {
+  color: inherit;
+}
+
 .appkit-button.appkit-button--warning {
   background: var(--appkit-color-warning);
   color: var(--appkit-color-text-on-primary);
@@ -182,6 +193,10 @@
   background: var(--appkit-color-amber-400);
 }
 
+.appkit-button.appkit-button--warning :not([class*="appkit-"]) {
+  color: inherit;
+}
+
 .appkit-button__spinner {
   width: 1rem;
   height: 1rem;

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

@@ -1,16 +1,19 @@
 import React from "react";
+import type { SurfaceProps } from "./surface-tokens";
+type CardAnimate = "hoverLift" | "pressScale" | "hoverScale" | "both";
 type CardVariant = "flat" | "outlined" | "elevated" | "default" | "primary" | "bordered" | "interactive" | "glass" | "gradient-indigo" | "gradient-teal" | "gradient-amber" | "gradient-rose" | "stat-indigo" | "stat-teal" | "stat-amber" | "stat-rose" | "stat-emerald";
 type CardPadding = "none" | "sm" | "md" | "lg";
-export interface CardProps {
+export interface CardProps extends SurfaceProps {
     children: React.ReactNode;
     variant?: CardVariant;
     padding?: CardPadding;
     hover?: boolean;
+    animate?: CardAnimate;
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
-export declare function Card({ children, variant, padding, hover, className, style, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ children, variant, padding, hover, animate, surface, rounded, border, shadow, className, style, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export interface CardSectionProps {
     children: React.ReactNode;
     className?: string;

package/dist/ui/components/Card.js

@@ -1,4 +1,8 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { buildSurfaceClasses } from "./surface-tokens";
+import { SPRING_SNAPPY } from "../../tokens/motion";
 const UI_CARD = {
     base: "appkit-card",
     variants: {
@@ -27,17 +31,31 @@ const UI_CARD = {
         lg: "appkit-card--pad-lg",
     },
 };
-export function Card({ children, variant = "flat", padding = "md", hover = false, className = "", style, onClick, }) {
-    return (_jsx("div", { className: [
-            UI_CARD.base,
-            UI_CARD.variants[variant],
-            UI_CARD.padding[padding],
-            hover ? "appkit-card--hoverable" : "",
-            onClick ? "appkit-card--clickable" : "",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
+export function Card({ children, variant = "flat", padding = "md", hover = false, animate, surface, rounded, border, shadow, className = "", style, onClick, }) {
+    const reduced = useReducedMotion();
+    const cls = [
+        UI_CARD.base,
+        UI_CARD.variants[variant],
+        UI_CARD.padding[padding],
+        hover ? "appkit-card--hoverable" : "",
+        onClick ? "appkit-card--clickable" : "",
+        buildSurfaceClasses({ surface, rounded, border, shadow }),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    if (animate && !reduced) {
+        const whileHover = animate === "hoverLift" || animate === "both"
+            ? { y: -2 }
+            : animate === "hoverScale"
+                ? { scale: 1.02 }
+                : undefined;
+        const whileTap = animate === "pressScale" || animate === "both"
+            ? { scale: 0.97 }
+            : undefined;
+        return (_jsx(motion.div, { className: cls, style: style, onClick: onClick, whileHover: whileHover, whileTap: whileTap, transition: SPRING_SNAPPY, "data-section": "card-div-463", children: children }));
+    }
+    return (_jsx("div", { className: cls, style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
 }
 export function CardHeader({ children, className = "" }) {
     return (_jsx("div", { className: ["appkit-card__header", className].filter(Boolean).join(" "), "data-section": "card-div-464", children: children }));

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

@@ -1,20 +1,6 @@
 import React from "react";
-export interface DivProps extends React.HTMLAttributes<HTMLDivElement> {
+import type { SurfaceProps } from "./surface-tokens";
+export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, SurfaceProps {
     children?: React.ReactNode;
 }
-/**
- * Semantic `<div data-section="div-div-477">` wrapper for general-purpose layout containers.
- *
- * Use when no more specific semantic element applies
- * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables
- * future one-place theming and consistent import from `@mohasinac/appkit/ui`.
- *
- * @example
- * ```tsx
- * <Div className="flex items-center gap-4">
- *   <Badge>New</Badge>
- *   <Text>Product title</Text>
- * </Div>
- * ```
- */
 export declare const Div: React.ForwardRefExoticComponent<DivProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/components/Div.js

@@ -1,19 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-/**
- * Semantic `<div data-section="div-div-477">` wrapper for general-purpose layout containers.
- *
- * Use when no more specific semantic element applies
- * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables
- * future one-place theming and consistent import from `@mohasinac/appkit/ui`.
- *
- * @example
- * ```tsx
- * <Div className="flex items-center gap-4">
- *   <Badge>New</Badge>
- *   <Text>Product title</Text>
- * </Div>
- * ```
- */
-export const Div = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("div", { ref: ref, className: className, ...props, "data-section": "div-div-478", children: children })));
+import { buildSurfaceClasses } from "./surface-tokens";
+export const Div = React.forwardRef(({ className = "", surface, padding, rounded, border, shadow, children, ...props }, ref) => (_jsx("div", { ref: ref, className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children })));
 Div.displayName = "Div";

package/dist/ui/components/Input.js

@@ -24,6 +24,6 @@ export const Input = React.forwardRef(function Input({ label, error, helperText,
     }
     const adornment = rightIcon ??
         (success && !error ? (_jsx("svg", { className: "h-4 w-4 text-green-600 dark:text-green-400", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.414-1.42l2.493 2.494 6.493-6.494a1 1 0 011.415 0z", clipRule: "evenodd" }) })) : null);
-    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
 });
 Input.displayName = "Input";

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SurfaceProps } from "./surface-tokens";
 /**
  * Layout Primitives — Container, Stack, Row, Grid
  *
@@ -167,24 +168,13 @@ type JustifyContent = keyof typeof JUSTIFY_MAP;
  * <Container size="full" as="main">...</Container>
  * ```
  */
-export interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Max-width breakpoint preset.
-     * - `sm`    → `max-w-3xl`       (blog / policy)
-     * - `md`    → `max-w-4xl`       (contact / about)
-     * - `lg`    → `max-w-5xl`       (checkout / help)
-     * - `xl`    → `max-w-6xl`       (product detail / cart)
-     * - `2xl`   → `max-w-7xl`       (main content grids — **default**)
-     * - `full`  → `max-w-screen-2xl` (full-bleed)
-     * - `wide`  → `max-w-screen-2xl` (compact px, no lg step)
-     * - `ultra` → `max-w-[1920px]`  (ultra-wide / 4K displays)
-     */
+export interface ContainerProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     size?: ContainerSize;
     /** Render as a different element (e.g. `"main"`, `"section"`). Defaults to `"div"`. */
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Container({ size, as, className, children, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Container({ size, as, surface, padding, rounded, border, shadow, className, children, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Vertical flex column. Use instead of `<div className="flex flex-col gap-4" data-section="layout-div-535">`.
  *
@@ -201,7 +191,7 @@ export declare function Container({ size, as, className, children, ...props }: C
  * </Stack>
  * ```
  */
-export interface StackProps extends React.HTMLAttributes<HTMLElement> {
+export interface StackProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     /** Space between children. Defaults to `"md"` (`gap-4`). */
     gap?: GapKey;
     /** Centers children on both axes (`items-center justify-center`). */
@@ -212,7 +202,7 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Stack({ gap, centered, align, as, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ gap, centered, align, as, surface, padding, 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">`.
  *
@@ -229,7 +219,7 @@ export declare function Stack({ gap, centered, align, as, className, children, .
  * </Row>
  * ```
  */
-export interface RowProps extends React.HTMLAttributes<HTMLElement> {
+export interface RowProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     /** Space between children. Defaults to `"md"` (`gap-4`). */
     gap?: GapKey;
     /** Centers children on both axes (`items-center justify-center`). */
@@ -244,7 +234,7 @@ export interface RowProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Row({ gap, centered, align, justify, wrap, as, className, children, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
+export declare function Row({ gap, centered, align, justify, wrap, as, surface, padding, rounded, border, shadow, className, children, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Responsive CSS grid. Use instead of `<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-section="layout-div-537">`.
  *
@@ -261,7 +251,7 @@ export declare function Row({ gap, centered, align, justify, wrap, as, className
  * </Grid>
  * ```
  */
-export interface GridProps extends React.HTMLAttributes<HTMLElement> {
+export interface GridProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     /**
      * Column preset.
      * - Numbers `1`–`6` → mobile-first responsive stacks
@@ -280,5 +270,5 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Grid({ cols, gap, as, className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ cols, gap, as, surface, padding, rounded, border, shadow, className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export {};