@mohasinac/ui 0.1.0 → 1.1.0

package/dist/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -69,6 +70,7 @@ __export(index_exports, {
   Button: () => Button,
   Caption: () => Caption,
   Container: () => Container,
+  CountdownDisplay: () => CountdownDisplay,
   DEFAULT_PAGINATION_CONFIG: () => import_contracts3.DEFAULT_PAGINATION_CONFIG,
   DEFAULT_STICKY_CONFIG: () => import_contracts3.DEFAULT_STICKY_CONFIG,
   DEFAULT_TABLE_CONFIG: () => import_contracts3.DEFAULT_TABLE_CONFIG,
@@ -80,6 +82,7 @@ __export(index_exports, {
   Heading: () => Heading,
   ImageLightbox: () => ImageLightbox,
   IndeterminateProgress: () => IndeterminateProgress,
+  ItemRow: () => ItemRow,
   Label: () => Label,
   Li: () => Li,
   Main: () => Main,
@@ -87,7 +90,9 @@ __export(index_exports, {
   Nav: () => Nav,
   Ol: () => Ol,
   Pagination: () => Pagination,
+  PriceDisplay: () => PriceDisplay,
   Progress: () => Progress,
+  RatingDisplay: () => RatingDisplay,
   Row: () => Row,
   Section: () => Section,
   Select: () => Select,
@@ -96,10 +101,21 @@ __export(index_exports, {
   Spinner: () => Spinner,
   Stack: () => Stack,
   StarRating: () => StarRating,
+  StatsGrid: () => StatsGrid,
   StatusBadge: () => StatusBadge,
+  StepperNav: () => StepperNav,
+  SummaryCard: () => SummaryCard,
+  TagInput: () => TagInput,
   Text: () => Text,
   Ul: () => Ul,
-  mergeTableConfig: () => import_contracts3.mergeTableConfig
+  ViewToggle: () => ViewToggle,
+  classNames: () => classNames,
+  easings: () => easings,
+  getContrastColor: () => getContrastColor,
+  hexToRgb: () => hexToRgb,
+  mergeTableConfig: () => import_contracts3.mergeTableConfig,
+  mergeTailwindClasses: () => mergeTailwindClasses,
+  rgbToHex: () => rgbToHex
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1759,11 +1775,502 @@ function ImageLightbox({
   );
 }
 
-// src/DataTable.tsx
+// src/components/TagInput.tsx
 var import_react7 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function TagInput({
+  value,
+  onChange,
+  disabled = false,
+  label,
+  placeholder = "Add a tag...",
+  className = "",
+  helperText = "Press Enter or comma to add a tag"
+}) {
+  const [draft, setDraft] = (0, import_react7.useState)("");
+  const inputRef = (0, import_react7.useRef)(null);
+  const addTag = (raw) => {
+    const tag = raw.trim().replace(/,+$/, "").trim();
+    if (!tag || value.includes(tag)) {
+      setDraft("");
+      return;
+    }
+    onChange([...value, tag]);
+    setDraft("");
+  };
+  const removeTag = (tag) => {
+    onChange(value.filter((t) => t !== tag));
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addTag(draft);
+      return;
+    }
+    if (e.key === "Backspace" && draft === "" && value.length > 0) {
+      onChange(value.slice(0, -1));
+    }
+  };
+  const handleChange = (e) => {
+    var _a;
+    const inputValue = e.target.value;
+    if (inputValue.includes(",")) {
+      const parts = inputValue.split(",");
+      const last = (_a = parts.pop()) != null ? _a : "";
+      parts.forEach((part) => addTag(part));
+      setDraft(last);
+      return;
+    }
+    setDraft(inputValue);
+  };
+  const handleBlur = () => {
+    if (draft.trim()) {
+      addTag(draft);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { className: "mb-1.5 block text-sm font-medium", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "div",
+      {
+        onClick: () => {
+          var _a;
+          return !disabled && ((_a = inputRef.current) == null ? void 0 : _a.focus());
+        },
+        className: [
+          "flex min-h-[42px] w-full cursor-text flex-wrap items-center gap-1.5 rounded-lg border px-3 py-2",
+          "border-zinc-300 bg-white dark:border-slate-700 dark:bg-slate-900",
+          disabled ? "cursor-not-allowed opacity-50" : "transition-colors focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30"
+        ].join(" "),
+        children: [
+          value.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-full bg-primary-500/10 px-2 py-0.5 text-xs font-medium text-primary-700 dark:text-primary-300",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Span, { size: "xs", children: tag }),
+                !disabled && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeTag(tag);
+                    },
+                    className: "ml-0.5 text-primary-700/70 hover:text-primary-700 dark:text-primary-300/70 dark:hover:text-primary-300",
+                    "aria-label": `Remove tag ${tag}`,
+                    children: "x"
+                  }
+                )
+              ]
+            },
+            tag
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              value: draft,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              disabled,
+              placeholder: value.length === 0 ? placeholder : "",
+              className: [
+                "min-w-[100px] flex-1 bg-transparent text-sm outline-none",
+                "text-zinc-900 placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500",
+                disabled ? "cursor-not-allowed" : ""
+              ].join(" "),
+              "aria-label": label != null ? label : "Tag input"
+            }
+          )
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Span, { size: "xs", className: "mt-1 text-zinc-500 dark:text-zinc-400", children: helperText })
+  ] });
+}
+
+// src/style.helper.ts
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function mergeTailwindClasses(...classes) {
+  const classArray = classes.filter(Boolean).join(" ").split(" ");
+  return Array.from(new Set(classArray)).join(" ");
+}
+
+// src/components/StepperNav.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function StepperNav({ steps, currentStep, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Nav, { "aria-label": "Steps", className: classNames("mb-8", className), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Ol, { className: "flex items-center gap-0", children: steps.map((step, i) => {
+    const isComplete = step.number < currentStep;
+    const isActive = step.number === currentStep;
+    const isLast = i === steps.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Li, { className: "flex flex-1 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-shrink-0 items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "div",
+          {
+            className: classNames(
+              "flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors",
+              isComplete ? "border-primary bg-primary text-white" : isActive ? "border-primary bg-transparent text-primary" : "border-zinc-300 text-zinc-500 dark:border-slate-700 dark:text-zinc-400"
+            ),
+            children: isComplete ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "svg",
+              {
+                className: "h-4 w-4",
+                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: 2.5,
+                    d: "M5 13l4 4L19 7"
+                  }
+                )
+              }
+            ) : step.number
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Span,
+          {
+            className: classNames(
+              "hidden text-sm font-medium sm:block",
+              isActive ? "text-primary" : isComplete ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-500 dark:text-zinc-400"
+            ),
+            children: step.label
+          }
+        )
+      ] }),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "div",
+        {
+          className: classNames(
+            "mx-3 h-0.5 flex-1 transition-colors",
+            isComplete ? "bg-primary" : "bg-zinc-200 dark:bg-slate-700"
+          )
+        }
+      )
+    ] }, step.number);
+  }) }) });
+}
+
+// src/components/ViewToggle.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ACTIVE = "bg-primary/5 text-primary ring-primary/30 dark:bg-primary/10";
+var INACTIVE = "text-zinc-500 ring-zinc-200 hover:bg-zinc-100 dark:text-zinc-400 dark:ring-slate-700 dark:hover:bg-slate-800";
+var DEFAULT_LABELS = {
+  grid: "Grid view",
+  list: "List view",
+  toolbar: "View mode"
+};
+function ViewToggle({
+  value,
+  onChange,
+  labels,
+  className
+}) {
+  const mergedLabels = __spreadValues(__spreadValues({}, DEFAULT_LABELS), labels);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: ["flex gap-1", className != null ? className : ""].join(" ").trim(),
+      role: "toolbar",
+      "aria-label": mergedLabels.toolbar,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onChange("grid"),
+            "aria-label": mergedLabels.grid,
+            "aria-pressed": value === "grid",
+            className: `flex items-center justify-center rounded-lg p-2 ring-1 transition-colors ${value === "grid" ? ACTIVE : INACTIVE}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "svg",
+              {
+                className: "h-5 w-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsx)(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onChange("list"),
+            "aria-label": mergedLabels.list,
+            "aria-pressed": value === "list",
+            className: `flex items-center justify-center rounded-lg p-2 ring-1 transition-colors ${value === "list" ? ACTIVE : INACTIVE}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "svg",
+              {
+                className: "h-5 w-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.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"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/RatingDisplay.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var sizeClass = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+function RatingDisplay({
+  rating,
+  maxRating = 5,
+  size = "sm",
+  showValue = false,
+  className
+}) {
+  const starSize = sizeClass[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: classNames("flex items-center gap-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex", children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "svg",
+      {
+        className: classNames(
+          starSize,
+          star <= rating ? "text-amber-400 dark:text-secondary-500" : "text-zinc-300 dark:text-zinc-700"
+        ),
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+      },
+      star
+    )) }),
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Span, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: rating.toFixed(1) })
+  ] });
+}
+
+// src/components/PriceDisplay.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function formatCurrency(amount, currency) {
+  return new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency,
+    maximumFractionDigits: 2
+  }).format(amount);
+}
+function formatPercent(value) {
+  return `${Math.round(value * 100)}%`;
+}
+function PriceDisplay({
+  amount,
+  currency = "INR",
+  originalAmount,
+  variant = "compact",
+  className
+}) {
+  const hasDiscount = originalAmount !== void 0 && originalAmount > amount;
+  const discountPct = hasDiscount ? (originalAmount - amount) / originalAmount : 0;
+  const priceClass = variant === "detail" ? "text-xl font-bold text-primary" : "text-base font-bold text-primary";
+  const originalClass = variant === "detail" ? "text-sm text-zinc-400 line-through dark:text-zinc-500" : "text-xs text-zinc-400 line-through dark:text-zinc-500";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: classNames("flex flex-wrap items-baseline gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Span, { className: priceClass, children: formatCurrency(amount, currency) }),
+    hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Span, { className: originalClass, children: formatCurrency(originalAmount, currency) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Span, { className: "rounded bg-emerald-100 px-1 py-0.5 text-xs font-semibold text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: [
+        "-",
+        formatPercent(discountPct)
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/StatsGrid.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var columnsClass = {
+  2: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+  3: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3",
+  4: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+};
+function StatsGrid({ stats, columns = 3, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: classNames(columnsClass[columns], className), children: stats.map((stat, i) => {
+    var _a;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        className: "rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900",
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: stat.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { className: "mt-1 text-3xl font-bold", children: stat.value })
+          ] }),
+          stat.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              className: classNames(
+                (_a = stat.colorClass) != null ? _a : "text-zinc-400 dark:text-zinc-500"
+              ),
+              children: stat.icon
+            }
+          )
+        ] })
+      },
+      `${stat.label}-${i}`
+    );
+  }) });
+}
+
+// src/components/SummaryCard.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function SummaryCard({
+  lines,
+  total,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      className: classNames(
+        "space-y-4 rounded-xl border border-zinc-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "space-y-2", children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Span, { className: "text-zinc-500 dark:text-zinc-400", children: line.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            Span,
+            {
+              className: line.muted ? "text-zinc-500 dark:text-zinc-400" : "text-zinc-900 dark:text-zinc-100",
+              children: line.value
+            }
+          )
+        ] }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Span, { className: "font-bold text-zinc-900 dark:text-zinc-100", children: total.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Span, { className: "text-lg font-bold text-primary", children: total.value })
+        ] }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: action })
+      ]
+    }
+  );
+}
+
+// src/components/CountdownDisplay.tsx
+var import_react8 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function getRemaining(targetDate) {
+  const now = Date.now();
+  const distance = targetDate.getTime() - now;
+  if (distance <= 0) {
+    return null;
+  }
+  const totalSeconds = Math.floor(distance / 1e3);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor(totalSeconds % 86400 / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  return { days, hours, minutes, seconds };
+}
+function formatLabel(remaining, format) {
+  const { days, hours, minutes, seconds } = remaining;
+  if (format === "hms") {
+    const totalHours = days * 24 + hours;
+    return `${totalHours}h ${minutes}m ${seconds}s`;
+  }
+  if (format === "dhms") {
+    return `${days}d ${hours}h ${minutes}m ${seconds}s`;
+  }
+  if (days > 0) {
+    return `${days}d ${hours}h ${minutes}m`;
+  }
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`;
+  }
+  return `${minutes}m ${seconds}s`;
+}
+function CountdownDisplay({
+  targetDate,
+  format = "auto",
+  expiredLabel = "Ended",
+  className
+}) {
+  const [tick, setTick] = (0, import_react8.useState)(0);
+  (0, import_react8.useEffect)(() => {
+    const id = window.setInterval(() => {
+      setTick((value) => value + 1);
+    }, 1e3);
+    return () => {
+      window.clearInterval(id);
+    };
+  }, []);
+  const remaining = (0, import_react8.useMemo)(() => getRemaining(targetDate), [targetDate, tick]);
+  const label = remaining ? formatLabel(remaining, format) : expiredLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Span, { variant: "inherit", className: classNames("tabular-nums", className), children: label });
+}
+
+// src/components/ItemRow.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function ItemRow({
+  thumbnail,
+  title,
+  subtitle,
+  rightSlot,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: classNames("flex items-start gap-4", className), children: [
+    thumbnail && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-shrink-0", children: thumbnail }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { size: "sm", weight: "medium", className: "line-clamp-2", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Caption, { className: "mt-0.5", children: subtitle }),
+      actions && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mt-2", children: actions })
+    ] }),
+    rightSlot && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-shrink-0", children: rightSlot })
+  ] });
+}
+
+// src/DataTable.tsx
+var import_react9 = require("react");
 
 // src/components/Layout.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var GAP_MAP = {
   none: "",
   px: "gap-px",
@@ -1848,7 +2355,7 @@ function Container(_a) {
     "children"
   ]);
   const Tag = as != null ? as : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Tag,
     __spreadProps(__spreadValues({
       className: [CONTAINER_MAP[size], className].filter(Boolean).join(" ")
@@ -1878,7 +2385,7 @@ function Stack(_a) {
     align !== "stretch" ? ITEMS_MAP[align] : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
 }
 function Row(_a) {
   var _b = _a, {
@@ -1907,7 +2414,7 @@ function Row(_a) {
     wrap ? "flex-wrap" : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
 }
 function Grid(_a) {
   var _b = _a, {
@@ -1926,12 +2433,12 @@ function Grid(_a) {
   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 }));
+  return /* @__PURE__ */ (0, import_jsx_runtime27.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");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function DataTable({
   data,
   columns,
@@ -1970,10 +2477,10 @@ function DataTable({
   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 [sortKey, setSortKey] = (0, import_react9.useState)(null);
+  const [sortDirection, setSortDirection] = (0, import_react9.useState)(null);
+  const [currentPage, setCurrentPage] = (0, import_react9.useState)(1);
+  const [internalViewMode, setInternalViewMode] = (0, import_react9.useState)(defaultViewMode);
   const activeViewMode = controlledViewMode != null ? controlledViewMode : internalViewMode;
   const {
     loading: labelLoading = "Loading\u2026",
@@ -2002,7 +2509,7 @@ function DataTable({
       setSortDirection("asc");
     }
   };
-  const sortedData = (0, import_react7.useMemo)(() => {
+  const sortedData = (0, import_react9.useMemo)(() => {
     const sorted = [...data];
     if (sortKey && sortDirection) {
       sorted.sort((a, b) => {
@@ -2020,19 +2527,19 @@ function DataTable({
     }
     return sorted;
   }, [data, sortKey, sortDirection]);
-  const paginatedData = (0, import_react7.useMemo)(() => {
+  const paginatedData = (0, import_react9.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 }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime28.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)(
+    if (emptyState) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: emptyState });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-center px-4", children: [
+      emptyIcon != null ? emptyIcon : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "svg",
         {
           className: "mx-auto h-12 w-12 text-zinc-400",
@@ -2040,7 +2547,7 @@ function DataTable({
           viewBox: "0 0 24 24",
           stroke: "currentColor",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               strokeLinecap: "round",
@@ -2051,20 +2558,20 @@ function DataTable({
           )
         }
       ),
-      /* @__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 })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle != null ? emptyTitle : noDataTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "div",
       {
         className: "flex justify-end gap-1",
         role: "toolbar",
         "aria-label": "View mode",
         children: [
-          showTableView && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          showTableView && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button,
             {
               type: "button",
@@ -2074,7 +2581,7 @@ function DataTable({
               "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)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "svg",
                 {
                   className: "w-4 h-4",
@@ -2083,7 +2590,7 @@ function DataTable({
                   stroke: "currentColor",
                   strokeWidth: 1.5,
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2095,7 +2602,7 @@ function DataTable({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button,
             {
               type: "button",
@@ -2105,7 +2612,7 @@ function DataTable({
               "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)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "svg",
                 {
                   className: "w-4 h-4",
@@ -2114,7 +2621,7 @@ function DataTable({
                   stroke: "currentColor",
                   strokeWidth: 1.5,
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2126,7 +2633,7 @@ function DataTable({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button,
             {
               type: "button",
@@ -2136,7 +2643,7 @@ function DataTable({
               "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)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "svg",
                 {
                   className: "w-4 h-4",
@@ -2145,7 +2652,7 @@ function DataTable({
                   stroke: "currentColor",
                   strokeWidth: 1.5,
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2163,11 +2670,11 @@ function DataTable({
   };
   const renderCardGrid = (mode) => {
     if (!mobileCardRender) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.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)(
+        children: paginatedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           SelectableCard,
           {
             id: keyExtractor(item),
@@ -2184,10 +2691,10 @@ function DataTable({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.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)(
+    activeViewMode === "table" && mobileCardRender && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "md:hidden space-y-6", children: paginatedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       SelectableCard,
       {
         id: keyExtractor(item),
@@ -2200,17 +2707,17 @@ function DataTable({
       },
       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)(
+    activeViewMode === "table" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("table", { className: "min-w-full divide-y divide-zinc-200 dark:divide-slate-700", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.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)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("tr", { children: [
+                selectable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { scope: "col", className: "px-4 py-3 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -2229,7 +2736,7 @@ function DataTable({
                     }
                   }
                 ) }),
-                columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "th",
                   {
                     scope: "col",
@@ -2237,14 +2744,14 @@ function DataTable({
                     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: [
+                    children: /* @__PURE__ */ (0, import_jsx_runtime28.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.sortable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? sortDirection === "asc" ? "\u2191" : "\u2193" : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "opacity-30", children: "\u2195" }) })
                     ] })
                   },
                   col.key
                 )),
-                actions && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                actions && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "th",
                   {
                     scope: "col",
@@ -2255,7 +2762,7 @@ function DataTable({
               ] })
             }
           ),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsxs)(
             "tr",
             {
               className: [
@@ -2265,12 +2772,12 @@ function DataTable({
               ].join(" "),
               onClick: () => onRowClick == null ? void 0 : onRowClick(item),
               children: [
-                selectable && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                selectable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "td",
                   {
                     className: "px-4 py-4 w-8",
                     onClick: (e) => e.stopPropagation(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                       "input",
                       {
                         type: "checkbox",
@@ -2289,7 +2796,7 @@ function DataTable({
                 ),
                 columns.map((col) => {
                   var _a;
-                  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     "td",
                     {
                       className: "px-6 py-4 whitespace-nowrap text-sm text-zinc-900 dark:text-zinc-100",
@@ -2298,7 +2805,7 @@ function DataTable({
                     col.key
                   );
                 }),
-                actions && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                actions && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "td",
                   {
                     className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium",
@@ -2313,7 +2820,7 @@ function DataTable({
         ] })
       }
     ) }),
-    !externalPagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    !externalPagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Pagination,
       {
         currentPage,
@@ -2335,9 +2842,9 @@ function SelectableCard({
   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)(
+  if (!selectable) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-full", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative group h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         className: [
@@ -2345,8 +2852,8 @@ function SelectableCard({
           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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsxs)("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "input",
             {
               type: "checkbox",
@@ -2359,7 +2866,7 @@ function SelectableCard({
               "aria-label": "Select item"
             }
           ),
-          selected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          selected && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "svg",
             {
               className: "absolute inset-0 m-auto w-2.5 h-2.5 text-white pointer-events-none",
@@ -2367,7 +2874,7 @@ function SelectableCard({
               stroke: "currentColor",
               viewBox: "0 0 24 24",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -2381,7 +2888,7 @@ function SelectableCard({
         ] }) })
       }
     ),
-    selected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    selected && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         className: "absolute inset-0 z-[5] rounded-xl ring-2 ring-primary ring-offset-0 pointer-events-none",
@@ -2394,6 +2901,42 @@ function SelectableCard({
 
 // src/index.ts
 var import_contracts3 = require("@mohasinac/contracts");
+
+// src/animation.helper.ts
+var easings = {
+  linear: (t) => t,
+  easeInQuad: (t) => t * t,
+  easeOutQuad: (t) => t * (2 - t),
+  easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+  easeInCubic: (t) => t * t * t,
+  easeOutCubic: (t) => --t * t * t + 1,
+  easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+  easeInQuart: (t) => t * t * t * t,
+  easeOutQuart: (t) => 1 - --t * t * t * t,
+  easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t
+};
+
+// src/color.helper.ts
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((x) => {
+    const hex = x.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }).join("");
+}
+function getContrastColor(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return "#000000";
+  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -2406,6 +2949,7 @@ var import_contracts3 = require("@mohasinac/contracts");
   Button,
   Caption,
   Container,
+  CountdownDisplay,
   DEFAULT_PAGINATION_CONFIG,
   DEFAULT_STICKY_CONFIG,
   DEFAULT_TABLE_CONFIG,
@@ -2417,6 +2961,7 @@ var import_contracts3 = require("@mohasinac/contracts");
   Heading,
   ImageLightbox,
   IndeterminateProgress,
+  ItemRow,
   Label,
   Li,
   Main,
@@ -2424,7 +2969,9 @@ var import_contracts3 = require("@mohasinac/contracts");
   Nav,
   Ol,
   Pagination,
+  PriceDisplay,
   Progress,
+  RatingDisplay,
   Row,
   Section,
   Select,
@@ -2433,8 +2980,19 @@ var import_contracts3 = require("@mohasinac/contracts");
   Spinner,
   Stack,
   StarRating,
+  StatsGrid,
   StatusBadge,
+  StepperNav,
+  SummaryCard,
+  TagInput,
   Text,
   Ul,
-  mergeTableConfig
+  ViewToggle,
+  classNames,
+  easings,
+  getContrastColor,
+  hexToRgb,
+  mergeTableConfig,
+  mergeTailwindClasses,
+  rgbToHex
 });