@mohasinac/ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2440 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Alert: () => Alert,
+  Article: () => Article,
+  Aside: () => Aside,
+  Badge: () => Badge,
+  BlockFooter: () => BlockFooter,
+  BlockHeader: () => BlockHeader,
+  Breadcrumb: () => Breadcrumb,
+  Button: () => Button,
+  Caption: () => Caption,
+  Container: () => Container,
+  DEFAULT_PAGINATION_CONFIG: () => import_contracts3.DEFAULT_PAGINATION_CONFIG,
+  DEFAULT_STICKY_CONFIG: () => import_contracts3.DEFAULT_STICKY_CONFIG,
+  DEFAULT_TABLE_CONFIG: () => import_contracts3.DEFAULT_TABLE_CONFIG,
+  DataTable: () => DataTable,
+  Divider: () => Divider,
+  Drawer: () => Drawer,
+  GRID_MAP: () => GRID_MAP,
+  Grid: () => Grid,
+  Heading: () => Heading,
+  ImageLightbox: () => ImageLightbox,
+  IndeterminateProgress: () => IndeterminateProgress,
+  Label: () => Label,
+  Li: () => Li,
+  Main: () => Main,
+  Modal: () => Modal,
+  Nav: () => Nav,
+  Ol: () => Ol,
+  Pagination: () => Pagination,
+  Progress: () => Progress,
+  Row: () => Row,
+  Section: () => Section,
+  Select: () => Select,
+  Skeleton: () => Skeleton,
+  Span: () => Span,
+  Spinner: () => Spinner,
+  Stack: () => Stack,
+  StarRating: () => StarRating,
+  StatusBadge: () => StatusBadge,
+  Text: () => Text,
+  Ul: () => Ul,
+  mergeTableConfig: () => import_contracts3.mergeTableConfig
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Semantic.tsx
+var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var Section = import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", __spreadProps(__spreadValues({ className, ref }, props), { children }));
+  }
+);
+Section.displayName = "Section";
+function Article(_a) {
+  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("article", __spreadProps(__spreadValues({ className }, props), { children }));
+}
+function Main(_a) {
+  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", __spreadProps(__spreadValues({ className }, props), { children }));
+}
+var Aside = import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", __spreadProps(__spreadValues({ className, ref }, props), { children }));
+  }
+);
+Aside.displayName = "Aside";
+function Nav(_a) {
+  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", __spreadProps(__spreadValues({ className }, props), { children }));
+}
+function BlockHeader(_a) {
+  var _b = _a, {
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", __spreadProps(__spreadValues({ className }, props), { children }));
+}
+function BlockFooter(_a) {
+  var _b = _a, {
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", __spreadProps(__spreadValues({ className }, props), { children }));
+}
+function Ul(_a) {
+  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", __spreadProps(__spreadValues({ className }, props), { children }));
+}
+function Ol(_a) {
+  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", __spreadProps(__spreadValues({ className }, props), { children }));
+}
+function Li(_a) {
+  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", __spreadProps(__spreadValues({ className }, props), { children }));
+}
+
+// src/components/Typography.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var UI_THEME = {
+  typography: {
+    h1: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display",
+    h2: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display",
+    h3: "text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display",
+    h4: "text-lg md:text-xl lg:text-2xl font-bold font-display",
+    h5: "text-base md:text-lg lg:text-xl font-medium",
+    h6: "text-sm md:text-base lg:text-lg font-medium",
+    body: "text-base lg:text-lg",
+    small: "text-sm lg:text-base",
+    xs: "text-xs lg:text-sm"
+  },
+  themed: {
+    textPrimary: "text-zinc-900 dark:text-zinc-50",
+    textSecondary: "text-zinc-500 dark:text-zinc-400",
+    textMuted: "text-zinc-400 dark:text-zinc-500",
+    textError: "text-red-600 dark:text-red-400",
+    textSuccess: "text-emerald-600 dark:text-emerald-400"
+  },
+  colors: {
+    form: {
+      required: "text-red-500"
+    }
+  }
+};
+function Heading(_a) {
+  var _b = _a, {
+    level = 1,
+    variant = "primary",
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "level",
+    "variant",
+    "className",
+    "children"
+  ]);
+  const Tag = `h${level}`;
+  const { typography, themed } = UI_THEME;
+  const sizeClasses = {
+    1: typography.h1,
+    2: typography.h2,
+    3: typography.h3,
+    4: typography.h4,
+    5: typography.h5,
+    6: typography.h6
+  };
+  const variantClasses = {
+    primary: themed.textPrimary,
+    secondary: themed.textSecondary,
+    muted: themed.textMuted,
+    none: ""
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Tag,
+    __spreadProps(__spreadValues({
+      className: `${sizeClasses[level]} ${variantClasses[variant]} ${className}`
+    }, props), {
+      children
+    })
+  );
+}
+function Text(_a) {
+  var _b = _a, {
+    variant = "primary",
+    size = "base",
+    weight = "normal",
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "weight",
+    "className",
+    "children"
+  ]);
+  const { typography, themed } = UI_THEME;
+  const sizeClasses = {
+    xs: typography.xs,
+    sm: typography.small,
+    base: typography.body,
+    lg: "text-lg",
+    xl: "text-xl"
+  };
+  const weightClasses = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold"
+  };
+  const variantClasses = {
+    primary: themed.textPrimary,
+    secondary: themed.textSecondary,
+    muted: themed.textMuted,
+    error: themed.textError,
+    success: themed.textSuccess,
+    none: ""
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "p",
+    __spreadProps(__spreadValues({
+      className: `${sizeClasses[size]} ${weightClasses[weight]} ${variantClasses[variant]} ${className}`
+    }, props), {
+      children
+    })
+  );
+}
+function Label(_a) {
+  var _b = _a, {
+    required,
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "required",
+    "className",
+    "children"
+  ]);
+  const { themed, typography, colors } = UI_THEME;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "label",
+    __spreadProps(__spreadValues({
+      className: `block ${typography.small} font-medium ${themed.textSecondary} mb-1.5 ${className}`
+    }, props), {
+      children: [
+        children,
+        required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${colors.form.required} ml-1`, children: "*" })
+      ]
+    })
+  );
+}
+function Caption(_a) {
+  var _b = _a, {
+    variant = "default",
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "className",
+    "children"
+  ]);
+  const { themed, typography } = UI_THEME;
+  const variantClasses = {
+    default: themed.textMuted,
+    accent: "text-primary font-semibold",
+    inverse: "text-primary/40"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    __spreadProps(__spreadValues({
+      className: `${typography.xs} ${variantClasses[variant]} ${className}`
+    }, props), {
+      children
+    })
+  );
+}
+function Span(_a) {
+  var _b = _a, {
+    variant = "inherit",
+    size,
+    weight,
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "weight",
+    "className",
+    "children"
+  ]);
+  const { themed, typography } = UI_THEME;
+  const variantClasses = {
+    inherit: "",
+    primary: themed.textPrimary,
+    secondary: themed.textSecondary,
+    muted: themed.textMuted,
+    error: themed.textError,
+    success: themed.textSuccess,
+    accent: "text-primary"
+  };
+  const sizeClasses = {
+    xs: typography.xs,
+    sm: typography.small,
+    base: typography.body,
+    lg: "text-lg",
+    xl: "text-xl"
+  };
+  const weightClasses = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold"
+  };
+  const classes = [
+    size ? sizeClasses[size] : "",
+    weight ? weightClasses[weight] : "",
+    variantClasses[variant],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", __spreadProps(__spreadValues({ className: classes }, props), { children }));
+}
+
+// src/components/Spinner.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Spinner({
+  size = "md",
+  variant = "primary",
+  className = "",
+  label = "Loading..."
+}) {
+  const sizeClasses = {
+    sm: "w-4 h-4 border-2",
+    md: "w-8 h-8 border-2",
+    lg: "w-12 h-12 border-[3px]",
+    xl: "w-16 h-16 border-4"
+  };
+  const variantClasses = {
+    primary: "border-primary-600 border-t-transparent dark:border-secondary-500 dark:border-t-transparent",
+    white: "border-white border-t-transparent",
+    current: "border-current border-t-transparent"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `inline-flex items-center gap-3 ${className}`,
+      role: "status",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: `${sizeClasses[size]} ${variantClasses[variant]} rounded-full animate-spin`
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/Skeleton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var BG_TERTIARY = "bg-zinc-100 dark:bg-slate-800";
+var WAVE_CSS = `
+@keyframes lir-skeleton-wave {
+  0% { transform: translateX(-100%); }
+  50%, 100% { transform: translateX(100%); }
+}
+.lir-skeleton-wave {
+  position: relative;
+  overflow: hidden;
+}
+.lir-skeleton-wave::after {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
+  animation: lir-skeleton-wave 1.5s infinite;
+}
+`;
+function Skeleton({
+  variant = "text",
+  width,
+  height,
+  className = "",
+  animation = "pulse"
+}) {
+  const variantClass = variant === "circular" ? "rounded-full" : "rounded";
+  const defaultSize = {
+    circular: { width: "40px", height: "40px" },
+    rectangular: { width: "100%", height: "140px" },
+    text: { width: "100%", height: "1em" }
+  }[variant];
+  const animationClass = {
+    pulse: "animate-pulse",
+    wave: "lir-skeleton-wave",
+    none: ""
+  }[animation];
+  const style = {
+    width: width != null ? width : defaultSize.width,
+    height: height != null ? height : defaultSize.height
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    animation === "wave" && // eslint-disable-next-line react/no-danger
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { dangerouslySetInnerHTML: { __html: WAVE_CSS } }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${BG_TERTIARY} ${variantClass} ${animationClass} ${className}`,
+        style,
+        role: "status",
+        "aria-label": "Loading",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Loading..." })
+      }
+    )
+  ] });
+}
+
+// src/components/Button.tsx
+var import_tailwind_merge = require("tailwind-merge");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var UI_BUTTON = {
+  base: "inline-flex items-center justify-center font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+  active: "active:scale-95",
+  variants: {
+    primary: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm focus:ring-primary-500/30 dark:bg-secondary-500 dark:text-white dark:hover:bg-secondary-400 dark:active:bg-secondary-600 dark:focus:ring-secondary-400/30",
+    secondary: "bg-primary-700 text-white hover:bg-primary-600 active:bg-primary-800 shadow-md focus:ring-primary-500 dark:bg-secondary-700 dark:text-white dark:hover:bg-secondary-600 dark:active:bg-secondary-800 dark:focus:ring-secondary-500",
+    outline: "border border-zinc-200 dark:border-slate-700 bg-white dark:bg-transparent text-zinc-900 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-slate-800 focus:ring-zinc-400",
+    ghost: "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 focus:ring-zinc-400",
+    danger: "bg-red-600 text-white hover:bg-red-500 active:bg-red-700 shadow-sm shadow-red-600/10 focus:ring-red-500",
+    warning: "bg-amber-500 text-white hover:bg-amber-400 active:bg-amber-600 shadow-sm shadow-amber-500/10 focus:ring-amber-500"
+  },
+  sizes: {
+    sm: "px-2.5 py-1.5 text-xs sm:px-3 sm:text-sm gap-1.5 min-h-[36px]",
+    md: "px-3 py-2 text-sm sm:px-4 sm:py-2.5 sm:text-base gap-2 min-h-[44px]",
+    lg: "px-4 py-2.5 text-base sm:px-6 sm:py-3 sm:text-lg gap-2.5 min-h-[44px]"
+  }
+};
+function Button(_a) {
+  var _b = _a, {
+    variant = "primary",
+    size = "md",
+    className = "",
+    isLoading = false,
+    disabled,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "className",
+    "isLoading",
+    "disabled",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "button",
+    __spreadProps(__spreadValues({
+      className: (0, import_tailwind_merge.twMerge)(
+        UI_BUTTON.base,
+        UI_BUTTON.active,
+        UI_BUTTON.variants[variant],
+        UI_BUTTON.sizes[size],
+        className
+      ),
+      disabled: disabled || isLoading,
+      "aria-busy": isLoading || void 0
+    }, props), {
+      children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_lucide_react.Loader2,
+          {
+            className: "w-4 h-4 animate-spin flex-shrink-0",
+            "aria-hidden": "true"
+          }
+        ),
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "opacity-70", children }) : children
+      ]
+    })
+  );
+}
+
+// src/components/Badge.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BADGE_CLASSES = {
+  // Status badges
+  active: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
+  inactive: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-600 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-400 dark:ring-zinc-400/20",
+  pending: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20",
+  approved: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
+  rejected: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20",
+  // Semantic badges
+  success: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
+  warning: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20",
+  danger: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20",
+  info: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20",
+  // Role badges
+  admin: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-purple-50 text-purple-700 ring-1 ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-300 dark:ring-purple-400/20",
+  moderator: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20",
+  seller: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-teal-50 text-teal-700 ring-1 ring-teal-600/20 dark:bg-teal-900/30 dark:text-teal-300 dark:ring-teal-400/20",
+  user: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-700 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-300 dark:ring-zinc-400/20",
+  // Legacy / generic variants
+  default: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-700 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-300 dark:ring-zinc-400/20",
+  primary: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300",
+  secondary: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300"
+};
+function Badge({
+  children,
+  variant = "default",
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Span, { className: `${BADGE_CLASSES[variant]} ${className}`, children });
+}
+
+// src/components/Alert.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ALERT_STYLES = {
+  info: {
+    container: "bg-sky-50 border-sky-200/80 dark:bg-sky-950/30 dark:border-sky-800/50",
+    icon: "text-sky-600 dark:text-sky-400",
+    title: "text-sky-900 dark:text-sky-200",
+    text: "text-sky-800 dark:text-sky-300"
+  },
+  success: {
+    container: "bg-emerald-50 border-emerald-200/80 dark:bg-emerald-950/30 dark:border-emerald-800/50",
+    icon: "text-emerald-600 dark:text-emerald-400",
+    title: "text-emerald-900 dark:text-emerald-200",
+    text: "text-emerald-800 dark:text-emerald-300"
+  },
+  warning: {
+    container: "bg-amber-50 border-amber-200/80 dark:bg-amber-950/30 dark:border-amber-800/50",
+    icon: "text-amber-600 dark:text-amber-400",
+    title: "text-amber-900 dark:text-amber-200",
+    text: "text-amber-800 dark:text-amber-300"
+  },
+  error: {
+    container: "bg-red-50 border-red-200/80 dark:bg-red-950/30 dark:border-red-800/50",
+    icon: "text-red-600 dark:text-red-400",
+    title: "text-red-900 dark:text-red-200",
+    text: "text-red-800 dark:text-red-300"
+  }
+};
+var ALERT_CLOSE_HOVER = "hover:bg-black/5 dark:hover:bg-white/5";
+var ICONS = {
+  info: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      className: "w-5 h-5",
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  ),
+  success: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      className: "w-5 h-5",
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  ),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      className: "w-5 h-5",
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  ),
+  error: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      className: "w-5 h-5",
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  )
+};
+function Alert({
+  children,
+  variant = "info",
+  title,
+  onClose,
+  className = ""
+}) {
+  const styles = ALERT_STYLES[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: `relative p-4 rounded-xl border ${styles.container} ${className}`,
+      role: "alert",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `flex-shrink-0 ${styles.icon}`, children: ICONS[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            Heading,
+            {
+              level: 3,
+              className: `text-sm font-semibold mb-1 ${styles.title}`,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `text-sm ${styles.text}`, children })
+        ] }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onClose,
+            className: `flex-shrink-0 ml-3 rounded-lg p-1.5 min-h-0 ${styles.icon} ${ALERT_CLOSE_HOVER}`,
+            "aria-label": "Close",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "svg",
+              {
+                className: "w-5 h-5",
+                fill: "currentColor",
+                viewBox: "0 0 20 20",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/Divider.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var BORDER_LIGHT = "border-zinc-100 dark:border-slate-700/60";
+var TEXT_MUTED = "text-zinc-400 dark:text-zinc-500";
+function Divider({
+  label,
+  orientation = "horizontal",
+  className = ""
+}) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: `w-px h-full border-l ${BORDER_LIGHT} ${className}`,
+        role: "separator",
+        "aria-orientation": "vertical"
+      }
+    );
+  }
+  if (label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `flex items-center gap-4 ${className}`, role: "separator", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `flex-1 h-px border-t ${BORDER_LIGHT}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Span, { className: `text-sm font-medium ${TEXT_MUTED}`, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `flex-1 h-px border-t ${BORDER_LIGHT}` })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className: `w-full h-px border-t ${BORDER_LIGHT} ${className}`,
+      role: "separator",
+      "aria-orientation": "horizontal"
+    }
+  );
+}
+
+// src/components/Progress.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var TEXT_PRIMARY = "text-zinc-900 dark:text-zinc-50";
+var TEXT_SECONDARY = "text-zinc-500 dark:text-zinc-400";
+var BG_SECONDARY = "bg-zinc-50 dark:bg-slate-900";
+var FLEX_BETWEEN = "flex items-center justify-between";
+var INDETERMINATE_CSS = `
+@keyframes lir-progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+.lir-progress-indeterminate {
+  animation: lir-progress-indeterminate 1.5s ease-in-out infinite;
+}
+`;
+function Progress({
+  value,
+  max = 100,
+  variant = "primary",
+  size = "md",
+  label,
+  showValue = false,
+  className = ""
+}) {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const sizeClasses = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3"
+  };
+  const variantClasses = {
+    primary: "bg-primary",
+    success: "bg-green-600 dark:bg-green-500",
+    warning: "bg-yellow-600 dark:bg-yellow-500",
+    error: "bg-red-600 dark:bg-red-500"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${FLEX_BETWEEN} mb-2`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Span, { className: `text-sm font-medium ${TEXT_PRIMARY}`, children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Span, { className: `text-sm font-medium ${TEXT_SECONDARY}`, children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: `w-full ${sizeClasses[size]} rounded-full overflow-hidden ${BG_SECONDARY}`,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label || `Progress: ${Math.round(percentage)}%`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            className: `h-full ${variantClasses[variant]} transition-all duration-300 ease-in-out rounded-full`,
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+function IndeterminateProgress({
+  variant = "primary",
+  size = "md",
+  label,
+  className = ""
+}) {
+  const sizeClasses = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3"
+  };
+  const variantClasses = {
+    primary: "bg-primary",
+    success: "bg-green-600 dark:bg-green-500",
+    warning: "bg-yellow-600 dark:bg-yellow-500",
+    error: "bg-red-600 dark:bg-red-500"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { dangerouslySetInnerHTML: { __html: INDETERMINATE_CSS } }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Span, { className: `block text-sm font-medium mb-2 ${TEXT_PRIMARY}`, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: `w-full ${sizeClasses[size]} rounded-full overflow-hidden ${BG_SECONDARY} relative`,
+        role: "progressbar",
+        "aria-label": label || "Loading...",
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            className: `absolute inset-0 ${variantClasses[variant]} lir-progress-indeterminate rounded-full`,
+            style: { width: "40%" }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Pagination.tsx
+var import_contracts = require("@mohasinac/contracts");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function getPageNumbers(currentPage, totalPages, maxVisible) {
+  if (totalPages <= maxVisible) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const pages = [];
+  const halfVisible = Math.floor(maxVisible / 2);
+  let startPage = Math.max(1, currentPage - halfVisible);
+  let endPage = Math.min(totalPages, currentPage + halfVisible);
+  if (currentPage <= halfVisible) endPage = maxVisible;
+  if (currentPage >= totalPages - halfVisible)
+    startPage = totalPages - maxVisible + 1;
+  if (startPage > 1) {
+    pages.push(1);
+    if (startPage > 2) pages.push("...");
+  }
+  for (let i = startPage; i <= endPage; i++) pages.push(i);
+  if (endPage < totalPages) {
+    if (endPage < totalPages - 1) pages.push("...");
+    pages.push(totalPages);
+  }
+  return pages;
+}
+var SIZE_CLASSES = {
+  sm: "text-xs px-2 py-1 min-w-[28px]",
+  md: "text-sm px-3 py-1.5 min-w-[36px]",
+  lg: "text-base px-4 py-2 min-w-[44px]"
+};
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  paginationConfig,
+  maxVisible: maxVisibleProp,
+  showFirstLast: showFirstLastProp,
+  showPrevNext: showPrevNextProp,
+  disabled = false,
+  size: sizeProp,
+  className = ""
+}) {
+  const resolved = __spreadValues(__spreadValues({}, import_contracts.DEFAULT_PAGINATION_CONFIG), paginationConfig);
+  const maxVisible = maxVisibleProp != null ? maxVisibleProp : resolved.maxVisible;
+  const showFirstLast = showFirstLastProp != null ? showFirstLastProp : resolved.showFirstLast;
+  const showPrevNext = showPrevNextProp != null ? showPrevNextProp : resolved.showPrevNext;
+  const size = sizeProp != null ? sizeProp : resolved.size;
+  const handle = (page) => {
+    if (disabled || page < 1 || page > totalPages || page === currentPage)
+      return;
+    onPageChange(page);
+  };
+  const btnClass = (active, off) => {
+    const base = `${SIZE_CLASSES[size]} rounded border font-medium transition-colors`;
+    if (off)
+      return `${base} bg-zinc-100 dark:bg-slate-800 opacity-50 text-zinc-400 dark:text-zinc-500 border-zinc-200 dark:border-slate-700 cursor-not-allowed`;
+    if (active)
+      return `${base} bg-primary-600 text-white border-primary-600 cursor-default`;
+    return `${base} bg-white dark:bg-slate-900 text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-slate-700 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:border-zinc-300 dark:hover:border-slate-600 cursor-pointer`;
+  };
+  const pages = getPageNumbers(currentPage, totalPages, maxVisible);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "nav",
+    {
+      className: `flex items-center gap-1 ${className}`,
+      "aria-label": "Pagination",
+      children: [
+        showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            type: "button",
+            className: btnClass(false, disabled || currentPage === 1),
+            onClick: () => handle(1),
+            disabled: disabled || currentPage === 1,
+            "aria-label": "First page",
+            children: "\xAB"
+          }
+        ),
+        showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            type: "button",
+            className: btnClass(false, disabled || currentPage === 1),
+            onClick: () => handle(currentPage - 1),
+            disabled: disabled || currentPage === 1,
+            "aria-label": "Previous page",
+            children: "\u2039"
+          }
+        ),
+        pages.map(
+          (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "span",
+            {
+              className: `${SIZE_CLASSES[size]} text-zinc-400 dark:text-zinc-500 text-center`,
+              "aria-hidden": "true",
+              children: "\u2026"
+            },
+            `ellipsis-${i}`
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              className: btnClass(
+                page === currentPage,
+                disabled && page !== currentPage
+              ),
+              onClick: () => handle(page),
+              disabled,
+              "aria-label": `Page ${page}`,
+              "aria-current": page === currentPage ? "page" : void 0,
+              children: page
+            },
+            page
+          )
+        ),
+        showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            type: "button",
+            className: btnClass(false, disabled || currentPage === totalPages),
+            onClick: () => handle(currentPage + 1),
+            disabled: disabled || currentPage === totalPages,
+            "aria-label": "Next page",
+            children: "\u203A"
+          }
+        ),
+        showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            type: "button",
+            className: btnClass(false, disabled || currentPage === totalPages),
+            onClick: () => handle(totalPages),
+            disabled: disabled || currentPage === totalPages,
+            "aria-label": "Last page",
+            children: "\xBB"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/StatusBadge.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var STATUS_TO_VARIANT = {
+  // Generic
+  active: "active",
+  inactive: "inactive",
+  pending: "pending",
+  approved: "approved",
+  rejected: "rejected",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  info: "info",
+  // Order
+  confirmed: "success",
+  processing: "info",
+  shipped: "info",
+  delivered: "success",
+  cancelled: "danger",
+  refunded: "warning",
+  failed: "danger",
+  // Payment
+  paid: "success",
+  partially_refunded: "warning",
+  // Review (pending/approved/rejected already covered)
+  // Ticket
+  open: "warning",
+  in_progress: "info",
+  resolved: "success",
+  closed: "inactive"
+};
+var STATUS_LABELS = {
+  active: "Active",
+  inactive: "Inactive",
+  pending: "Pending",
+  approved: "Approved",
+  rejected: "Rejected",
+  success: "Success",
+  warning: "Warning",
+  danger: "Danger",
+  info: "Info",
+  confirmed: "Confirmed",
+  processing: "Processing",
+  shipped: "Shipped",
+  delivered: "Delivered",
+  cancelled: "Cancelled",
+  refunded: "Refunded",
+  failed: "Failed",
+  paid: "Paid",
+  partially_refunded: "Partially Refunded",
+  open: "Open",
+  in_progress: "In Progress",
+  resolved: "Resolved",
+  closed: "Closed"
+};
+function StatusBadge({ status, label, className }) {
+  var _a, _b;
+  const variant = (_a = STATUS_TO_VARIANT[status]) != null ? _a : "default";
+  const displayLabel = (_b = label != null ? label : STATUS_LABELS[status]) != null ? _b : status;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, { variant, className, children: displayLabel });
+}
+
+// src/components/Modal.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SIZE_CLASSES2 = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[95vw] max-h-[95vh]"
+};
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  showCloseButton = true,
+  className = ""
+}) {
+  const titleId = (0, import_react2.useId)();
+  const panelRef = (0, import_react2.useRef)(null);
+  const prevFocusRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    if (isOpen) {
+      prevFocusRef.current = document.activeElement;
+      requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
+      });
+    } else {
+      (_a = prevFocusRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = Array.from(
+        panel.querySelectorAll(
+          'a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])'
+        )
+      );
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    },
+    [onClose]
+  );
+  if (!isOpen) return null;
+  if (typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
+              "aria-hidden": "true",
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
+            {
+              ref: panelRef,
+              tabIndex: -1,
+              className: [
+                "relative w-full rounded-2xl bg-white dark:bg-slate-900",
+                "shadow-2xl ring-1 ring-zinc-200 dark:ring-slate-700",
+                "flex flex-col max-h-[90vh] overflow-hidden",
+                "animate-[fadeInUp_0.15s_ease_forwards]",
+                SIZE_CLASSES2[size],
+                className
+              ].join(" "),
+              children: [
+                (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0", children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    Heading,
+                    {
+                      level: 2,
+                      id: titleId,
+                      className: "!text-lg !font-semibold !font-sans tracking-tight",
+                      children: title
+                    }
+                  ),
+                  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      type: "button",
+                      onClick: onClose,
+                      className: "ml-auto p-1.5 !min-h-0 rounded-lg text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300",
+                      "aria-label": "Close",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react2.X, { className: "w-5 h-5" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "overflow-y-auto flex-1 px-6 py-4", children })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/Drawer.tsx
+var import_react3 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SIDE_TRANSLATE = {
+  left: {
+    closed: "-translate-x-full",
+    open: "translate-x-0",
+    base: "left-0 top-0 bottom-0"
+  },
+  right: {
+    closed: "translate-x-full",
+    open: "translate-x-0",
+    base: "right-0 top-0 bottom-0"
+  },
+  bottom: {
+    closed: "translate-y-full",
+    open: "translate-y-0",
+    base: "bottom-0 left-0 right-0"
+  }
+};
+var SIDE_SIZE = {
+  sm: "w-72",
+  md: "w-80 sm:w-96",
+  lg: "w-full sm:w-[480px]",
+  full: "w-full"
+};
+function Drawer({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  side = "right",
+  size = "md",
+  showCloseButton = true,
+  className = ""
+}) {
+  const panelRef = (0, import_react3.useRef)(null);
+  const prevFocusRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
+  (0, import_react3.useEffect)(() => {
+    var _a;
+    if (isOpen) {
+      prevFocusRef.current = document.activeElement;
+      requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
+      });
+    } else {
+      (_a = prevFocusRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  const handleKeyDown = (0, import_react3.useCallback)(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  const { closed, open, base } = SIDE_TRANSLATE[side];
+  const isBottom = side === "bottom";
+  if (typeof document === "undefined") return null;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: `fixed inset-0 z-50 ${isOpen ? "pointer-events-auto" : "pointer-events-none"}`,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: `absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0"}`,
+              "aria-hidden": "true",
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "div",
+            {
+              ref: panelRef,
+              tabIndex: -1,
+              role: "dialog",
+              "aria-modal": "true",
+              className: [
+                "absolute bg-white dark:bg-slate-900",
+                "shadow-2xl ring-1 ring-zinc-200 dark:ring-slate-700",
+                "flex flex-col",
+                "transition-transform duration-300 ease-out",
+                base,
+                isBottom ? "rounded-t-2xl max-h-[90vh]" : `${SIDE_SIZE[size]} h-full`,
+                isOpen ? open : closed,
+                className
+              ].join(" "),
+              children: [
+                isBottom && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-center pt-3 pb-1 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "div",
+                  {
+                    className: "w-10 h-1 rounded-full bg-zinc-300 dark:bg-slate-600",
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between px-5 py-4 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0", children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    Heading,
+                    {
+                      level: 2,
+                      className: "!text-base !font-semibold !font-sans",
+                      children: title
+                    }
+                  ),
+                  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      type: "button",
+                      onClick: onClose,
+                      className: "ml-auto p-1.5 !min-h-0 rounded-lg text-zinc-400 hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-300",
+                      "aria-label": "Close",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.X, { className: "w-5 h-5" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-1 overflow-y-auto px-5 py-4", children }),
+                footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-shrink-0 border-t border-zinc-100 dark:border-slate-800 px-5 py-4", children: footer })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/Select.tsx
+var import_react4 = require("react");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Select({
+  options,
+  value,
+  onChange,
+  placeholder = "Select\u2026",
+  label,
+  error,
+  disabled = false,
+  required,
+  className = "",
+  id: externalId
+}) {
+  var _a;
+  const generatedId = (0, import_react4.useId)();
+  const id = externalId != null ? externalId : generatedId;
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [openUp, setOpenUp] = (0, import_react4.useState)(false);
+  const ref = (0, import_react4.useRef)(null);
+  const selected = options.find((o) => o.value === value);
+  const toggle = (0, import_react4.useCallback)(() => {
+    if (!disabled) {
+      if (!open && ref.current) {
+        const rect = ref.current.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        setOpenUp(spaceBelow < 160 && spaceAbove > spaceBelow);
+      }
+      setOpen((v) => !v);
+    }
+  }, [disabled, open]);
+  const handleSelect = (0, import_react4.useCallback)(
+    (val) => {
+      onChange == null ? void 0 : onChange(val);
+      setOpen(false);
+    },
+    [onChange]
+  );
+  (0, import_react4.useEffect)(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const handleKeyDown = (0, import_react4.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        toggle();
+        e.preventDefault();
+        return;
+      }
+      if (e.key === "ArrowDown" && !open) {
+        setOpen(true);
+        e.preventDefault();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const idx = options.findIndex((o) => o.value === value);
+        const next = options.slice(idx < 0 ? 0 : idx + 1).find((o) => !o.disabled);
+        if (next) onChange == null ? void 0 : onChange(next.value);
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const idx = options.findIndex((o) => o.value === value);
+        if (idx < 0) return;
+        const prev = [...options].slice(0, idx).reverse().find((o) => !o.disabled);
+        if (prev) onChange == null ? void 0 : onChange(prev.value);
+      }
+    },
+    [open, options, value, onChange, toggle]
+  );
+  const triggerClass = [
+    "flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm",
+    "transition-colors bg-white dark:bg-slate-800/60",
+    "focus:outline-none focus:ring-2 focus:ring-offset-0",
+    error ? "border-red-400 dark:border-red-500 focus:ring-red-500/20" : "border-zinc-200 dark:border-slate-700 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 focus:border-primary-500 dark:focus:border-secondary-400",
+    disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+    className
+  ].join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref, className: "relative w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      Label,
+      {
+        htmlFor: id,
+        className: "!text-zinc-700 dark:!text-zinc-300",
+        required,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      Button,
+      {
+        id,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-disabled": disabled,
+        disabled,
+        variant: "ghost",
+        className: triggerClass,
+        onClick: toggle,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Span,
+            {
+              className: selected ? "text-zinc-900 dark:text-zinc-50" : "text-zinc-400 dark:text-zinc-500",
+              children: (_a = selected == null ? void 0 : selected.label) != null ? _a : placeholder
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_lucide_react4.ChevronDown,
+            {
+              className: `h-4 w-4 flex-shrink-0 text-zinc-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      Ul,
+      {
+        role: "listbox",
+        className: [
+          "absolute z-50 w-full overflow-auto rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-lg max-h-60 py-1",
+          openUp ? "bottom-full mb-1" : "top-full mt-1"
+        ].join(" "),
+        children: options.map((option) => {
+          const isSelected = option.value === value;
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            Li,
+            {
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": option.disabled,
+              className: [
+                "relative flex cursor-pointer items-center px-3 py-2 text-sm select-none",
+                option.disabled ? "opacity-40 cursor-not-allowed" : isSelected ? "bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300" : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-700"
+              ].join(" "),
+              onClick: () => !option.disabled && handleSelect(option.value),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Span, { className: "flex-1", children: option.label }),
+                isSelected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_lucide_react4.Check,
+                  {
+                    className: "h-4 w-4 ml-2 flex-shrink-0",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { size: "xs", variant: "error", className: "mt-1.5", role: "alert", children: error })
+  ] });
+}
+
+// src/components/StarRating.tsx
+var import_react5 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SIZE_PX = { sm: "w-4 h-4", md: "w-5 h-5", lg: "w-6 h-6" };
+function StarRating({
+  value = 0,
+  onChange,
+  max = 5,
+  size = "md",
+  readOnly = false,
+  className = "",
+  label
+}) {
+  const [hovered, setHovered] = (0, import_react5.useState)(null);
+  const displayed = hovered != null ? hovered : value;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    Span,
+    {
+      className: `inline-flex items-center gap-0.5 ${className}`,
+      role: readOnly ? "img" : "group",
+      "aria-label": label != null ? label : `${value} out of ${max} stars`,
+      children: [
+        Array.from({ length: max }, (_, i) => {
+          const starValue = i + 1;
+          const filled = starValue <= displayed;
+          const half = !filled && starValue - 0.5 <= displayed;
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Span,
+            {
+              className: readOnly ? void 0 : "cursor-pointer",
+              onClick: () => !readOnly && (onChange == null ? void 0 : onChange(starValue)),
+              onMouseEnter: () => !readOnly && setHovered(starValue),
+              onMouseLeave: () => !readOnly && setHovered(null),
+              "aria-hidden": !readOnly ? "true" : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_lucide_react5.Star,
+                {
+                  className: [
+                    SIZE_PX[size],
+                    "transition-colors duration-100",
+                    filled || half ? "fill-amber-400 text-amber-400" : "fill-transparent text-zinc-300 dark:text-slate-600",
+                    !readOnly && !filled ? "hover:fill-amber-300 hover:text-amber-300" : ""
+                  ].join(" "),
+                  "aria-hidden": "true"
+                }
+              )
+            },
+            starValue
+          );
+        }),
+        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Span, { className: "sr-only", children: [
+          value,
+          " out of ",
+          max
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Breadcrumb.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Breadcrumb({ items, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Nav, { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Ol, { className: "flex items-center gap-1 flex-wrap text-sm text-zinc-500 dark:text-zinc-400", children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Li, { className: "flex items-center gap-1", children: [
+      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_lucide_react6.ChevronRight,
+        {
+          className: "w-3.5 h-3.5 flex-shrink-0 text-zinc-400 dark:text-zinc-600",
+          "aria-hidden": "true"
+        }
+      ),
+      isLast || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Span,
+        {
+          className: isLast ? "font-medium text-zinc-900 dark:text-zinc-50" : "text-zinc-500 dark:text-zinc-400",
+          "aria-current": isLast ? "page" : void 0,
+          children: item.label
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "a",
+        {
+          href: item.href,
+          className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
+          children: item.label
+        }
+      )
+    ] }, i);
+  }) }) });
+}
+
+// src/components/ImageLightbox.tsx
+var import_react6 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ImageLightbox({
+  images,
+  activeIndex,
+  onClose,
+  onNavigate
+}) {
+  var _a;
+  const [currentIndex, setCurrentIndex] = (0, import_react6.useState)(activeIndex != null ? activeIndex : 0);
+  const overlayRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    if (activeIndex !== null && activeIndex >= 0) {
+      setCurrentIndex(activeIndex);
+    }
+  }, [activeIndex]);
+  const isOpen = activeIndex !== null && activeIndex >= 0 && images.length > 0;
+  (0, import_react6.useEffect)(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
+  const navigate = (0, import_react6.useCallback)(
+    (dir) => {
+      setCurrentIndex((prev) => {
+        const next = (prev + dir + images.length) % images.length;
+        onNavigate == null ? void 0 : onNavigate(next);
+        return next;
+      });
+    },
+    [images.length, onNavigate]
+  );
+  const handleKeyDown = (0, import_react6.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key === "ArrowLeft") {
+        navigate(-1);
+        return;
+      }
+      if (e.key === "ArrowRight") {
+        navigate(1);
+        return;
+      }
+    },
+    [onClose, navigate]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (isOpen) {
+      requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = overlayRef.current) == null ? void 0 : _a2.focus();
+      });
+    }
+  }, [isOpen]);
+  if (!isOpen || typeof document === "undefined") return null;
+  const image = images[currentIndex];
+  const hasMultiple = images.length > 1;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        ref: overlayRef,
+        tabIndex: -1,
+        className: "fixed inset-0 z-[9999] bg-black/95 flex flex-col items-center justify-center outline-none",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Image lightbox",
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              type: "button",
+              onClick: onClose,
+              className: "absolute top-4 right-4 z-10 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/50 text-white flex items-center justify-center",
+              "aria-label": "Close lightbox",
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { className: "w-7 h-7" })
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 text-white/70 text-sm font-medium", children: [
+            currentIndex + 1,
+            " / ",
+            images.length
+          ] }),
+          hasMultiple && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              type: "button",
+              onClick: () => navigate(-1),
+              className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center",
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ChevronLeft, { className: "w-7 h-7" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 flex items-center justify-center p-16 w-full h-full relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: image.src,
+                alt: (_a = image.alt) != null ? _a : "",
+                className: "max-h-full max-w-full object-contain select-none",
+                draggable: false
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute bottom-4 right-4 text-white/40 flex items-center gap-1 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ZoomIn, { className: "w-4 h-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Span, { className: "text-xs", children: "Scroll to zoom" })
+            ] })
+          ] }),
+          image.caption && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Text,
+            {
+              size: "sm",
+              variant: "secondary",
+              className: "flex-shrink-0 !text-white/70 text-center px-8 pb-4",
+              children: image.caption
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              type: "button",
+              onClick: () => navigate(1),
+              className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center",
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ChevronRight, { className: "w-7 h-7" })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+// src/DataTable.tsx
+var import_react7 = require("react");
+
+// src/components/Layout.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "",
+  px: "gap-px",
+  xs: "gap-1",
+  sm: "gap-2",
+  "2.5": "gap-2.5",
+  "3": "gap-3",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+  "2xl": "gap-12"
+};
+var CONTAINER_MAP = {
+  /** `max-w-3xl` — blog posts, legal / policy pages */
+  sm: "max-w-3xl mx-auto px-4 sm:px-6 lg:px-8",
+  /** `max-w-4xl` — narrow content, contact, about */
+  md: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8",
+  /** `max-w-5xl` — medium content, checkout, help */
+  lg: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8",
+  /** `max-w-6xl` — product detail, cart */
+  xl: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8",
+  /** `max-w-7xl` — main content grids (default) */
+  "2xl": "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
+  /** `max-w-screen-2xl` — full-bleed wide content */
+  full: "max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8",
+  /** `max-w-screen-2xl` — wide store/seller layouts (no lg:px-8) */
+  wide: "max-w-screen-2xl mx-auto px-4 sm:px-6"
+};
+var GRID_MAP = {
+  1: "grid grid-cols-1",
+  2: "grid grid-cols-1 sm:grid-cols-2",
+  3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3",
+  4: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4",
+  5: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
+  6: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
+  /** Card grid — starts at 2 on mobile, max 5 on 2xl */
+  cards: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5",
+  /** Equal halves on md+ */
+  halves: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2",
+  /** 2fr / 1fr split on md+ */
+  twoThird: "grid grid-cols-1 md:grid-cols-[2fr_1fr]",
+  /** 1fr / 2fr split on md+ */
+  oneThird: "grid grid-cols-1 md:grid-cols-[1fr_2fr]",
+  /** Fixed 280px left sidebar + 1fr on lg+ */
+  sidebar: "grid grid-cols-1 lg:grid-cols-[280px_1fr]",
+  /** 1fr + fixed 280px right sidebar on lg+ */
+  sidebarRight: "grid grid-cols-1 lg:grid-cols-[1fr_280px]",
+  /** Fixed 320px left sidebar + 1fr on lg+ (admin layout) */
+  sidebarWide: "grid grid-cols-1 lg:grid-cols-[320px_1fr]",
+  /** CSS auto-fill, min 200px columns */
+  autoSm: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]",
+  /** CSS auto-fill, min 280px columns */
+  autoMd: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))]",
+  /** CSS auto-fill, min 360px columns */
+  autoLg: "grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))]"
+};
+var ITEMS_MAP = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var JUSTIFY_MAP = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+function Container(_a) {
+  var _b = _a, {
+    size = "2xl",
+    as,
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "size",
+    "as",
+    "className",
+    "children"
+  ]);
+  const Tag = as != null ? as : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Tag,
+    __spreadProps(__spreadValues({
+      className: [CONTAINER_MAP[size], className].filter(Boolean).join(" ")
+    }, props), {
+      children
+    })
+  );
+}
+function Stack(_a) {
+  var _b = _a, {
+    gap = "md",
+    align = "stretch",
+    as,
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "gap",
+    "align",
+    "as",
+    "className",
+    "children"
+  ]);
+  const Tag = as != null ? as : "div";
+  const classes = [
+    "flex flex-col",
+    GAP_MAP[gap],
+    align !== "stretch" ? ITEMS_MAP[align] : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
+}
+function Row(_a) {
+  var _b = _a, {
+    gap = "md",
+    align = "center",
+    justify = "start",
+    wrap = false,
+    as,
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "gap",
+    "align",
+    "justify",
+    "wrap",
+    "as",
+    "className",
+    "children"
+  ]);
+  const Tag = as != null ? as : "div";
+  const classes = [
+    "flex flex-row",
+    ITEMS_MAP[align],
+    justify !== "start" ? JUSTIFY_MAP[justify] : "",
+    GAP_MAP[gap],
+    wrap ? "flex-wrap" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
+}
+function Grid(_a) {
+  var _b = _a, {
+    cols,
+    gap = "md",
+    as,
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "cols",
+    "gap",
+    "as",
+    "className",
+    "children"
+  ]);
+  const Tag = as != null ? as : "div";
+  const baseClass = cols !== void 0 ? GRID_MAP[cols] : "grid";
+  const classes = [baseClass, GAP_MAP[gap], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
+}
+
+// src/DataTable.tsx
+var import_contracts2 = require("@mohasinac/contracts");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DataTable({
+  data,
+  columns,
+  keyExtractor,
+  onRowClick,
+  loading = false,
+  emptyMessage,
+  actions,
+  mobileCardRender,
+  emptyState,
+  emptyIcon,
+  emptyTitle,
+  tableConfig,
+  paginationConfig,
+  externalPagination = false,
+  // Explicit flat props — override tableConfig when provided
+  pageSize: pageSizeProp,
+  stickyHeader: stickyHeaderProp,
+  striped: stripedProp,
+  showViewToggle: showViewToggleProp,
+  showTableView = true,
+  viewMode: controlledViewMode,
+  defaultViewMode: defaultViewModeProp,
+  onViewModeChange,
+  selectable: selectableProp,
+  selectedIds = [],
+  onSelectionChange,
+  gridCols = "cards",
+  labels = {}
+}) {
+  const resolvedTable = (0, import_contracts2.mergeTableConfig)(tableConfig);
+  const resolvedPag = __spreadValues(__spreadValues(__spreadValues({}, import_contracts2.DEFAULT_PAGINATION_CONFIG), tableConfig == null ? void 0 : tableConfig.pagination), paginationConfig);
+  const pageSize = pageSizeProp != null ? pageSizeProp : resolvedTable.pageSize;
+  const stickyHeader = stickyHeaderProp != null ? stickyHeaderProp : resolvedTable.sticky.enabled;
+  const striped = stripedProp != null ? stripedProp : resolvedTable.striped;
+  const showViewToggle = showViewToggleProp != null ? showViewToggleProp : resolvedTable.showViewToggle;
+  const selectable = selectableProp != null ? selectableProp : resolvedTable.selectable;
+  const defaultViewMode = defaultViewModeProp != null ? defaultViewModeProp : resolvedTable.defaultViewMode;
+  const [sortKey, setSortKey] = (0, import_react7.useState)(null);
+  const [sortDirection, setSortDirection] = (0, import_react7.useState)(null);
+  const [currentPage, setCurrentPage] = (0, import_react7.useState)(1);
+  const [internalViewMode, setInternalViewMode] = (0, import_react7.useState)(defaultViewMode);
+  const activeViewMode = controlledViewMode != null ? controlledViewMode : internalViewMode;
+  const {
+    loading: labelLoading = "Loading\u2026",
+    noDataTitle = "No data found",
+    noDataDescription = "There are no items to display.",
+    actions: labelActions = "Actions",
+    tableView = "Table view",
+    gridView = "Grid view",
+    listView = "List view"
+  } = labels;
+  const handleViewModeChange = (mode) => {
+    if (controlledViewMode === void 0) setInternalViewMode(mode);
+    onViewModeChange == null ? void 0 : onViewModeChange(mode);
+  };
+  const handleSort = (key) => {
+    const col = columns.find((c) => c.key === key);
+    if (!(col == null ? void 0 : col.sortable)) return;
+    if (sortKey === key) {
+      if (sortDirection === "asc") setSortDirection("desc");
+      else {
+        setSortKey(null);
+        setSortDirection(null);
+      }
+    } else {
+      setSortKey(key);
+      setSortDirection("asc");
+    }
+  };
+  const sortedData = (0, import_react7.useMemo)(() => {
+    const sorted = [...data];
+    if (sortKey && sortDirection) {
+      sorted.sort((a, b) => {
+        const aVal = a[sortKey];
+        const bVal = b[sortKey];
+        if (aVal == null) return 1;
+        if (bVal == null) return -1;
+        if (typeof aVal === "string" && typeof bVal === "string") {
+          return sortDirection === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+        }
+        if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
+        if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
+        return 0;
+      });
+    }
+    return sorted;
+  }, [data, sortKey, sortDirection]);
+  const paginatedData = (0, import_react7.useMemo)(() => {
+    if (externalPagination) return sortedData;
+    const start = (currentPage - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, currentPage, externalPagination, pageSize]);
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Spinner, { size: "lg", label: labelLoading }) }) });
+  }
+  if (data.length === 0) {
+    if (emptyState) return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: emptyState });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-center px-4", children: [
+      emptyIcon != null ? emptyIcon : /* @__PURE__ */ (0, import_jsx_runtime19.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: /* @__PURE__ */ (0, import_jsx_runtime19.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"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle != null ? emptyTitle : noDataTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage != null ? emptyMessage : noDataDescription })
+    ] }) }) });
+  }
+  const renderViewToggle = () => {
+    if (!showViewToggle) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "div",
+      {
+        className: "flex justify-end gap-1",
+        role: "toolbar",
+        "aria-label": "View mode",
+        children: [
+          showTableView && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => handleViewModeChange("table"),
+              "aria-label": tableView,
+              "aria-pressed": activeViewMode === "table",
+              className: `hidden sm:flex items-center justify-center p-2 rounded-lg ring-1 transition-colors ${activeViewMode === "table" ? "bg-primary/5 text-primary dark:bg-primary/10 ring-primary/30" : "text-zinc-500 dark:text-zinc-400 ring-zinc-200 dark:ring-slate-700 hover:bg-zinc-100 dark:hover:bg-slate-800"}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 1.5,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M3 10h18M3 6h18M3 14h18M3 18h18"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => handleViewModeChange("grid"),
+              "aria-label": gridView,
+              "aria-pressed": activeViewMode === "grid",
+              className: `flex items-center justify-center p-2 rounded-lg ring-1 transition-colors ${activeViewMode === "grid" ? "bg-primary/5 text-primary dark:bg-primary/10 ring-primary/30" : "text-zinc-500 dark:text-zinc-400 ring-zinc-200 dark:ring-slate-700 hover:bg-zinc-100 dark:hover:bg-slate-800"}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 1.5,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => handleViewModeChange("list"),
+              "aria-label": listView,
+              "aria-pressed": activeViewMode === "list",
+              className: `flex items-center justify-center p-2 rounded-lg ring-1 transition-colors ${activeViewMode === "list" ? "bg-primary/5 text-primary dark:bg-primary/10 ring-primary/30" : "text-zinc-500 dark:text-zinc-400 ring-zinc-200 dark:ring-slate-700 hover:bg-zinc-100 dark:hover:bg-slate-800"}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 1.5,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  };
+  const renderCardGrid = (mode) => {
+    if (!mobileCardRender) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        className: mode === "grid" ? `${GRID_MAP[gridCols]} gap-6` : "flex flex-col gap-4",
+        children: paginatedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          SelectableCard,
+          {
+            id: keyExtractor(item),
+            selectable,
+            selected: selectedIds.includes(keyExtractor(item)),
+            listMode: mode === "list",
+            onToggle: (id, checked) => onSelectionChange == null ? void 0 : onSelectionChange(
+              checked ? [...selectedIds, id] : selectedIds.filter((s) => s !== id)
+            ),
+            children: mobileCardRender(item)
+          },
+          keyExtractor(item)
+        ))
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4", children: [
+    renderViewToggle(),
+    activeViewMode !== "table" && mobileCardRender && renderCardGrid(activeViewMode),
+    activeViewMode === "table" && mobileCardRender && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "md:hidden space-y-6", children: paginatedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      SelectableCard,
+      {
+        id: keyExtractor(item),
+        selectable,
+        selected: selectedIds.includes(keyExtractor(item)),
+        onToggle: (id, checked) => onSelectionChange == null ? void 0 : onSelectionChange(
+          checked ? [...selectedIds, id] : selectedIds.filter((s) => s !== id)
+        ),
+        children: mobileCardRender(item)
+      },
+      keyExtractor(item)
+    )) }),
+    activeViewMode === "table" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        className: `overflow-x-auto ${stickyHeader ? "max-h-[600px] overflow-y-auto" : ""}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { className: "min-w-full divide-y divide-zinc-200 dark:divide-slate-700", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "thead",
+            {
+              className: `bg-zinc-50 dark:bg-slate-800 ${stickyHeader ? "sticky top-0 z-10" : ""}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { children: [
+                selectable && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { scope: "col", className: "px-4 py-3 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "rounded border-zinc-300",
+                    "aria-label": "Select all on page",
+                    checked: paginatedData.length > 0 && paginatedData.every(
+                      (item) => selectedIds.includes(keyExtractor(item))
+                    ),
+                    onChange: (e) => {
+                      const pageIds = paginatedData.map(keyExtractor);
+                      onSelectionChange == null ? void 0 : onSelectionChange(
+                        e.target.checked ? [.../* @__PURE__ */ new Set([...selectedIds, ...pageIds])] : selectedIds.filter(
+                          (id) => !pageIds.includes(id)
+                        )
+                      );
+                    }
+                  }
+                ) }),
+                columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "th",
+                  {
+                    scope: "col",
+                    "aria-sort": col.sortable ? sortKey === col.key ? sortDirection === "asc" ? "ascending" : "descending" : "none" : void 0,
+                    className: `px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider ${col.sortable ? "cursor-pointer select-none hover:bg-zinc-100 dark:hover:bg-slate-700" : ""}`,
+                    style: { width: col.width },
+                    onClick: () => col.sortable && handleSort(col.key),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      col.header,
+                      col.sortable && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? sortDirection === "asc" ? "\u2191" : "\u2193" : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "opacity-30", children: "\u2195" }) })
+                    ] })
+                  },
+                  col.key
+                )),
+                actions && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "th",
+                  {
+                    scope: "col",
+                    className: "px-6 py-3 text-right text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider",
+                    children: labelActions
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className: "bg-white dark:bg-slate-900 divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            "tr",
+            {
+              className: [
+                striped && index % 2 === 1 ? "bg-zinc-50 dark:bg-slate-800" : "",
+                onRowClick ? "cursor-pointer hover:bg-zinc-50 dark:hover:bg-slate-800/60" : "",
+                "transition-colors duration-150"
+              ].join(" "),
+              onClick: () => onRowClick == null ? void 0 : onRowClick(item),
+              children: [
+                selectable && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "td",
+                  {
+                    className: "px-4 py-4 w-8",
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        className: "rounded border-zinc-300",
+                        "aria-label": "Select row",
+                        checked: selectedIds.includes(keyExtractor(item)),
+                        onChange: (e) => {
+                          const id = keyExtractor(item);
+                          onSelectionChange == null ? void 0 : onSelectionChange(
+                            e.target.checked ? [...selectedIds, id] : selectedIds.filter((s) => s !== id)
+                          );
+                        }
+                      }
+                    )
+                  }
+                ),
+                columns.map((col) => {
+                  var _a;
+                  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "td",
+                    {
+                      className: "px-6 py-4 whitespace-nowrap text-sm text-zinc-900 dark:text-zinc-100",
+                      children: col.render ? col.render(item) : (_a = item[col.key]) != null ? _a : "-"
+                    },
+                    col.key
+                  );
+                }),
+                actions && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "td",
+                  {
+                    className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium",
+                    onClick: (e) => e.stopPropagation(),
+                    children: actions(item)
+                  }
+                )
+              ]
+            },
+            keyExtractor(item)
+          )) })
+        ] })
+      }
+    ) }),
+    !externalPagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Pagination,
+      {
+        currentPage,
+        totalPages,
+        onPageChange: setCurrentPage,
+        maxVisible: resolvedPag.maxVisible,
+        showFirstLast: resolvedPag.showFirstLast,
+        showPrevNext: resolvedPag.showPrevNext,
+        size: resolvedPag.size
+      }
+    ) })
+  ] });
+}
+function SelectableCard({
+  id,
+  selectable,
+  selected,
+  onToggle,
+  children,
+  listMode = false
+}) {
+  if (!selectable) return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-full", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative group h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        className: [
+          "absolute z-10",
+          listMode ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-2"
+        ].join(" "),
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-6 h-6 rounded-md bg-white/95 dark:bg-slate-800/95 shadow-md flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              className: [
+                "w-4 h-4 rounded cursor-pointer transition-all appearance-none",
+                selected ? "border-2 border-primary bg-primary" : "border-2 border-zinc-500 dark:border-slate-400 bg-transparent group-hover:border-primary"
+              ].join(" "),
+              checked: selected,
+              onChange: (e) => onToggle(id, e.target.checked),
+              "aria-label": "Select item"
+            }
+          ),
+          selected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "svg",
+            {
+              className: "absolute inset-0 m-auto w-2.5 h-2.5 text-white pointer-events-none",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 3,
+                  d: "M5 13l4 4L19 7"
+                }
+              )
+            }
+          )
+        ] }) })
+      }
+    ),
+    selected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 z-[5] rounded-xl ring-2 ring-primary ring-offset-0 pointer-events-none",
+        "aria-hidden": "true"
+      }
+    ),
+    children
+  ] });
+}
+
+// src/index.ts
+var import_contracts3 = require("@mohasinac/contracts");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert,
+  Article,
+  Aside,
+  Badge,
+  BlockFooter,
+  BlockHeader,
+  Breadcrumb,
+  Button,
+  Caption,
+  Container,
+  DEFAULT_PAGINATION_CONFIG,
+  DEFAULT_STICKY_CONFIG,
+  DEFAULT_TABLE_CONFIG,
+  DataTable,
+  Divider,
+  Drawer,
+  GRID_MAP,
+  Grid,
+  Heading,
+  ImageLightbox,
+  IndeterminateProgress,
+  Label,
+  Li,
+  Main,
+  Modal,
+  Nav,
+  Ol,
+  Pagination,
+  Progress,
+  Row,
+  Section,
+  Select,
+  Skeleton,
+  Span,
+  Spinner,
+  Stack,
+  StarRating,
+  StatusBadge,
+  Text,
+  Ul,
+  mergeTableConfig
+});