@mohasinac/ui 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -1686,11 +1687,502 @@ function ImageLightbox({
   );
 }
 
+// src/components/TagInput.tsx
+import { useRef as useRef5, useState as useState4 } from "react";
+import { jsx as jsx18, jsxs as jsxs15 } from "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] = useState4("");
+  const inputRef = useRef5(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__ */ jsxs15("div", { className, children: [
+    label && /* @__PURE__ */ jsx18(Label, { className: "mb-1.5 block text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs15(
+      "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__ */ jsxs15(
+            "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__ */ jsx18(Span, { size: "xs", children: tag }),
+                !disabled && /* @__PURE__ */ jsx18(
+                  "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__ */ jsx18(
+            "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__ */ jsx18(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
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function StepperNav({ steps, currentStep, className }) {
+  return /* @__PURE__ */ jsx19(Nav, { "aria-label": "Steps", className: classNames("mb-8", className), children: /* @__PURE__ */ jsx19(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__ */ jsxs16(Li, { className: "flex flex-1 items-center", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex flex-shrink-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx19(
+          "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__ */ jsx19(
+              "svg",
+              {
+                className: "h-4 w-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx19(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2.5,
+                    d: "M5 13l4 4L19 7"
+                  }
+                )
+              }
+            ) : step.number
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          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__ */ jsx19(
+        "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
+import { jsx as jsx20, jsxs as jsxs17 } from "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__ */ jsxs17(
+    "div",
+    {
+      className: ["flex gap-1", className != null ? className : ""].join(" ").trim(),
+      role: "toolbar",
+      "aria-label": mergedLabels.toolbar,
+      children: [
+        /* @__PURE__ */ jsx20(
+          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__ */ jsx20(
+              "svg",
+              {
+                className: "h-5 w-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx20(
+                  "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__ */ jsx20(
+          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__ */ jsx20(
+              "svg",
+              {
+                className: "h-5 w-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx20(
+                  "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
+import { jsx as jsx21, jsxs as jsxs18 } from "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__ */ jsxs18("div", { className: classNames("flex items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx21("div", { className: "flex", children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => /* @__PURE__ */ jsx21(
+      "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__ */ jsx21("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__ */ jsx21(Span, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: rating.toFixed(1) })
+  ] });
+}
+
+// src/components/PriceDisplay.tsx
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs19 } from "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__ */ jsxs19("div", { className: classNames("flex flex-wrap items-baseline gap-1.5", className), children: [
+    /* @__PURE__ */ jsx22(Span, { className: priceClass, children: formatCurrency(amount, currency) }),
+    hasDiscount && /* @__PURE__ */ jsxs19(Fragment2, { children: [
+      /* @__PURE__ */ jsx22(Span, { className: originalClass, children: formatCurrency(originalAmount, currency) }),
+      /* @__PURE__ */ jsxs19(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
+import { jsx as jsx23, jsxs as jsxs20 } from "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__ */ jsx23("div", { className: classNames(columnsClass[columns], className), children: stats.map((stat, i) => {
+    var _a;
+    return /* @__PURE__ */ jsx23(
+      "div",
+      {
+        className: "rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900",
+        children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx23(Text, { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: stat.label }),
+            /* @__PURE__ */ jsx23(Text, { className: "mt-1 text-3xl font-bold", children: stat.value })
+          ] }),
+          stat.icon && /* @__PURE__ */ jsx23(
+            "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
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+function SummaryCard({
+  lines,
+  total,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs21(
+    "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__ */ jsx24("div", { className: "space-y-2", children: lines.map((line, i) => /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between text-sm", children: [
+          /* @__PURE__ */ jsx24(Span, { className: "text-zinc-500 dark:text-zinc-400", children: line.label }),
+          /* @__PURE__ */ jsx24(
+            Span,
+            {
+              className: line.muted ? "text-zinc-500 dark:text-zinc-400" : "text-zinc-900 dark:text-zinc-100",
+              children: line.value
+            }
+          )
+        ] }, i)) }),
+        /* @__PURE__ */ jsx24(Divider, {}),
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx24(Span, { className: "font-bold text-zinc-900 dark:text-zinc-100", children: total.label }),
+          /* @__PURE__ */ jsx24(Span, { className: "text-lg font-bold text-primary", children: total.value })
+        ] }),
+        action && /* @__PURE__ */ jsx24("div", { children: action })
+      ]
+    }
+  );
+}
+
+// src/components/CountdownDisplay.tsx
+import { useEffect as useEffect5, useMemo, useState as useState5 } from "react";
+import { jsx as jsx25 } from "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] = useState5(0);
+  useEffect5(() => {
+    const id = window.setInterval(() => {
+      setTick((value) => value + 1);
+    }, 1e3);
+    return () => {
+      window.clearInterval(id);
+    };
+  }, []);
+  const remaining = useMemo(() => getRemaining(targetDate), [targetDate, tick]);
+  const label = remaining ? formatLabel(remaining, format) : expiredLabel;
+  return /* @__PURE__ */ jsx25(Span, { variant: "inherit", className: classNames("tabular-nums", className), children: label });
+}
+
+// src/components/ItemRow.tsx
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+function ItemRow({
+  thumbnail,
+  title,
+  subtitle,
+  rightSlot,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs22("div", { className: classNames("flex items-start gap-4", className), children: [
+    thumbnail && /* @__PURE__ */ jsx26("div", { className: "flex-shrink-0", children: thumbnail }),
+    /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx26(Text, { size: "sm", weight: "medium", className: "line-clamp-2", children: title }),
+      subtitle && /* @__PURE__ */ jsx26(Caption, { className: "mt-0.5", children: subtitle }),
+      actions && /* @__PURE__ */ jsx26("div", { className: "mt-2", children: actions })
+    ] }),
+    rightSlot && /* @__PURE__ */ jsx26("div", { className: "flex-shrink-0", children: rightSlot })
+  ] });
+}
+
 // src/DataTable.tsx
-import { useState as useState4, useMemo } from "react";
+import { useState as useState6, useMemo as useMemo2 } from "react";
 
 // src/components/Layout.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var GAP_MAP = {
   none: "",
   px: "gap-px",
@@ -1775,7 +2267,7 @@ function Container(_a) {
     "children"
   ]);
   const Tag = as != null ? as : "div";
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx27(
     Tag,
     __spreadProps(__spreadValues({
       className: [CONTAINER_MAP[size], className].filter(Boolean).join(" ")
@@ -1805,7 +2297,7 @@ function Stack(_a) {
     align !== "stretch" ? ITEMS_MAP[align] : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx18(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
+  return /* @__PURE__ */ jsx27(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
 }
 function Row(_a) {
   var _b = _a, {
@@ -1834,7 +2326,7 @@ function Row(_a) {
     wrap ? "flex-wrap" : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx18(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
+  return /* @__PURE__ */ jsx27(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
 }
 function Grid(_a) {
   var _b = _a, {
@@ -1853,12 +2345,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__ */ jsx18(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
+  return /* @__PURE__ */ jsx27(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
 }
 
 // src/DataTable.tsx
 import { mergeTableConfig, DEFAULT_PAGINATION_CONFIG as DEFAULT_PAGINATION_CONFIG2 } from "@mohasinac/contracts";
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function DataTable({
   data,
   columns,
@@ -1897,10 +2389,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] = useState4(null);
-  const [sortDirection, setSortDirection] = useState4(null);
-  const [currentPage, setCurrentPage] = useState4(1);
-  const [internalViewMode, setInternalViewMode] = useState4(defaultViewMode);
+  const [sortKey, setSortKey] = useState6(null);
+  const [sortDirection, setSortDirection] = useState6(null);
+  const [currentPage, setCurrentPage] = useState6(1);
+  const [internalViewMode, setInternalViewMode] = useState6(defaultViewMode);
   const activeViewMode = controlledViewMode != null ? controlledViewMode : internalViewMode;
   const {
     loading: labelLoading = "Loading\u2026",
@@ -1929,7 +2421,7 @@ function DataTable({
       setSortDirection("asc");
     }
   };
-  const sortedData = useMemo(() => {
+  const sortedData = useMemo2(() => {
     const sorted = [...data];
     if (sortKey && sortDirection) {
       sorted.sort((a, b) => {
@@ -1947,19 +2439,19 @@ function DataTable({
     }
     return sorted;
   }, [data, sortKey, sortDirection]);
-  const paginatedData = useMemo(() => {
+  const paginatedData = useMemo2(() => {
     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__ */ jsx19("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx19(Spinner, { size: "lg", label: labelLoading }) }) });
+    return /* @__PURE__ */ jsx28("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx28(Spinner, { size: "lg", label: labelLoading }) }) });
   }
   if (data.length === 0) {
-    if (emptyState) return /* @__PURE__ */ jsx19(Fragment2, { children: emptyState });
-    return /* @__PURE__ */ jsx19("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsxs15("div", { className: "text-center px-4", children: [
-      emptyIcon != null ? emptyIcon : /* @__PURE__ */ jsx19(
+    if (emptyState) return /* @__PURE__ */ jsx28(Fragment3, { children: emptyState });
+    return /* @__PURE__ */ jsx28("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsxs23("div", { className: "text-center px-4", children: [
+      emptyIcon != null ? emptyIcon : /* @__PURE__ */ jsx28(
         "svg",
         {
           className: "mx-auto h-12 w-12 text-zinc-400",
@@ -1967,7 +2459,7 @@ function DataTable({
           viewBox: "0 0 24 24",
           stroke: "currentColor",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx19(
+          children: /* @__PURE__ */ jsx28(
             "path",
             {
               strokeLinecap: "round",
@@ -1978,20 +2470,20 @@ function DataTable({
           )
         }
       ),
-      /* @__PURE__ */ jsx19(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle != null ? emptyTitle : noDataTitle }),
-      /* @__PURE__ */ jsx19(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage != null ? emptyMessage : noDataDescription })
+      /* @__PURE__ */ jsx28(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle != null ? emptyTitle : noDataTitle }),
+      /* @__PURE__ */ jsx28(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage != null ? emptyMessage : noDataDescription })
     ] }) }) });
   }
   const renderViewToggle = () => {
     if (!showViewToggle) return null;
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs23(
       "div",
       {
         className: "flex justify-end gap-1",
         role: "toolbar",
         "aria-label": "View mode",
         children: [
-          showTableView && /* @__PURE__ */ jsx19(
+          showTableView && /* @__PURE__ */ jsx28(
             Button,
             {
               type: "button",
@@ -2001,7 +2493,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__ */ jsx19(
+              children: /* @__PURE__ */ jsx28(
                 "svg",
                 {
                   className: "w-4 h-4",
@@ -2010,7 +2502,7 @@ function DataTable({
                   stroke: "currentColor",
                   strokeWidth: 1.5,
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx19(
+                  children: /* @__PURE__ */ jsx28(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2022,7 +2514,7 @@ function DataTable({
               )
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx28(
             Button,
             {
               type: "button",
@@ -2032,7 +2524,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__ */ jsx19(
+              children: /* @__PURE__ */ jsx28(
                 "svg",
                 {
                   className: "w-4 h-4",
@@ -2041,7 +2533,7 @@ function DataTable({
                   stroke: "currentColor",
                   strokeWidth: 1.5,
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx19(
+                  children: /* @__PURE__ */ jsx28(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2053,7 +2545,7 @@ function DataTable({
               )
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx28(
             Button,
             {
               type: "button",
@@ -2063,7 +2555,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__ */ jsx19(
+              children: /* @__PURE__ */ jsx28(
                 "svg",
                 {
                   className: "w-4 h-4",
@@ -2072,7 +2564,7 @@ function DataTable({
                   stroke: "currentColor",
                   strokeWidth: 1.5,
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx19(
+                  children: /* @__PURE__ */ jsx28(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2090,11 +2582,11 @@ function DataTable({
   };
   const renderCardGrid = (mode) => {
     if (!mobileCardRender) return null;
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx28(
       "div",
       {
         className: mode === "grid" ? `${GRID_MAP[gridCols]} gap-6` : "flex flex-col gap-4",
-        children: paginatedData.map((item) => /* @__PURE__ */ jsx19(
+        children: paginatedData.map((item) => /* @__PURE__ */ jsx28(
           SelectableCard,
           {
             id: keyExtractor(item),
@@ -2111,10 +2603,10 @@ function DataTable({
       }
     );
   };
-  return /* @__PURE__ */ jsxs15("div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "space-y-4", children: [
     renderViewToggle(),
     activeViewMode !== "table" && mobileCardRender && renderCardGrid(activeViewMode),
-    activeViewMode === "table" && mobileCardRender && /* @__PURE__ */ jsx19("div", { className: "md:hidden space-y-6", children: paginatedData.map((item) => /* @__PURE__ */ jsx19(
+    activeViewMode === "table" && mobileCardRender && /* @__PURE__ */ jsx28("div", { className: "md:hidden space-y-6", children: paginatedData.map((item) => /* @__PURE__ */ jsx28(
       SelectableCard,
       {
         id: keyExtractor(item),
@@ -2127,17 +2619,17 @@ function DataTable({
       },
       keyExtractor(item)
     )) }),
-    activeViewMode === "table" && /* @__PURE__ */ jsx19("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsx19(
+    activeViewMode === "table" && /* @__PURE__ */ jsx28("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsx28(
       "div",
       {
         className: `overflow-x-auto ${stickyHeader ? "max-h-[600px] overflow-y-auto" : ""}`,
-        children: /* @__PURE__ */ jsxs15("table", { className: "min-w-full divide-y divide-zinc-200 dark:divide-slate-700", children: [
-          /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsxs23("table", { className: "min-w-full divide-y divide-zinc-200 dark:divide-slate-700", children: [
+          /* @__PURE__ */ jsx28(
             "thead",
             {
               className: `bg-zinc-50 dark:bg-slate-800 ${stickyHeader ? "sticky top-0 z-10" : ""}`,
-              children: /* @__PURE__ */ jsxs15("tr", { children: [
-                selectable && /* @__PURE__ */ jsx19("th", { scope: "col", className: "px-4 py-3 w-8", children: /* @__PURE__ */ jsx19(
+              children: /* @__PURE__ */ jsxs23("tr", { children: [
+                selectable && /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-3 w-8", children: /* @__PURE__ */ jsx28(
                   "input",
                   {
                     type: "checkbox",
@@ -2156,7 +2648,7 @@ function DataTable({
                     }
                   }
                 ) }),
-                columns.map((col) => /* @__PURE__ */ jsx19(
+                columns.map((col) => /* @__PURE__ */ jsx28(
                   "th",
                   {
                     scope: "col",
@@ -2164,14 +2656,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__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+                    children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
                       col.header,
-                      col.sortable && /* @__PURE__ */ jsx19("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? sortDirection === "asc" ? "\u2191" : "\u2193" : /* @__PURE__ */ jsx19("span", { className: "opacity-30", children: "\u2195" }) })
+                      col.sortable && /* @__PURE__ */ jsx28("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? sortDirection === "asc" ? "\u2191" : "\u2193" : /* @__PURE__ */ jsx28("span", { className: "opacity-30", children: "\u2195" }) })
                     ] })
                   },
                   col.key
                 )),
-                actions && /* @__PURE__ */ jsx19(
+                actions && /* @__PURE__ */ jsx28(
                   "th",
                   {
                     scope: "col",
@@ -2182,7 +2674,7 @@ function DataTable({
               ] })
             }
           ),
-          /* @__PURE__ */ jsx19("tbody", { className: "bg-white dark:bg-slate-900 divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => /* @__PURE__ */ jsxs15(
+          /* @__PURE__ */ jsx28("tbody", { className: "bg-white dark:bg-slate-900 divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => /* @__PURE__ */ jsxs23(
             "tr",
             {
               className: [
@@ -2192,12 +2684,12 @@ function DataTable({
               ].join(" "),
               onClick: () => onRowClick == null ? void 0 : onRowClick(item),
               children: [
-                selectable && /* @__PURE__ */ jsx19(
+                selectable && /* @__PURE__ */ jsx28(
                   "td",
                   {
                     className: "px-4 py-4 w-8",
                     onClick: (e) => e.stopPropagation(),
-                    children: /* @__PURE__ */ jsx19(
+                    children: /* @__PURE__ */ jsx28(
                       "input",
                       {
                         type: "checkbox",
@@ -2216,7 +2708,7 @@ function DataTable({
                 ),
                 columns.map((col) => {
                   var _a;
-                  return /* @__PURE__ */ jsx19(
+                  return /* @__PURE__ */ jsx28(
                     "td",
                     {
                       className: "px-6 py-4 whitespace-nowrap text-sm text-zinc-900 dark:text-zinc-100",
@@ -2225,7 +2717,7 @@ function DataTable({
                     col.key
                   );
                 }),
-                actions && /* @__PURE__ */ jsx19(
+                actions && /* @__PURE__ */ jsx28(
                   "td",
                   {
                     className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium",
@@ -2240,7 +2732,7 @@ function DataTable({
         ] })
       }
     ) }),
-    !externalPagination && totalPages > 1 && /* @__PURE__ */ jsx19("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx19(
+    !externalPagination && totalPages > 1 && /* @__PURE__ */ jsx28("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx28(
       Pagination,
       {
         currentPage,
@@ -2262,9 +2754,9 @@ function SelectableCard({
   children,
   listMode = false
 }) {
-  if (!selectable) return /* @__PURE__ */ jsx19("div", { className: "h-full", children });
-  return /* @__PURE__ */ jsxs15("div", { className: "relative group h-full", children: [
-    /* @__PURE__ */ jsx19(
+  if (!selectable) return /* @__PURE__ */ jsx28("div", { className: "h-full", children });
+  return /* @__PURE__ */ jsxs23("div", { className: "relative group h-full", children: [
+    /* @__PURE__ */ jsx28(
       "div",
       {
         className: [
@@ -2272,8 +2764,8 @@ function SelectableCard({
           listMode ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-2"
         ].join(" "),
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsx19("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__ */ jsxs15("div", { className: "relative flex items-center justify-center", children: [
-          /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx28("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__ */ jsxs23("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx28(
             "input",
             {
               type: "checkbox",
@@ -2286,7 +2778,7 @@ function SelectableCard({
               "aria-label": "Select item"
             }
           ),
-          selected && /* @__PURE__ */ jsx19(
+          selected && /* @__PURE__ */ jsx28(
             "svg",
             {
               className: "absolute inset-0 m-auto w-2.5 h-2.5 text-white pointer-events-none",
@@ -2294,7 +2786,7 @@ function SelectableCard({
               stroke: "currentColor",
               viewBox: "0 0 24 24",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx19(
+              children: /* @__PURE__ */ jsx28(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -2308,7 +2800,7 @@ function SelectableCard({
         ] }) })
       }
     ),
-    selected && /* @__PURE__ */ jsx19(
+    selected && /* @__PURE__ */ jsx28(
       "div",
       {
         className: "absolute inset-0 z-[5] rounded-xl ring-2 ring-primary ring-offset-0 pointer-events-none",
@@ -2326,6 +2818,42 @@ import {
   DEFAULT_STICKY_CONFIG,
   mergeTableConfig as mergeTableConfig2
 } from "@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";
+}
 export {
   Alert,
   Article,
@@ -2337,6 +2865,7 @@ export {
   Button,
   Caption,
   Container,
+  CountdownDisplay,
   DEFAULT_PAGINATION_CONFIG3 as DEFAULT_PAGINATION_CONFIG,
   DEFAULT_STICKY_CONFIG,
   DEFAULT_TABLE_CONFIG,
@@ -2348,6 +2877,7 @@ export {
   Heading,
   ImageLightbox,
   IndeterminateProgress,
+  ItemRow,
   Label,
   Li,
   Main,
@@ -2355,7 +2885,9 @@ export {
   Nav,
   Ol,
   Pagination,
+  PriceDisplay,
   Progress,
+  RatingDisplay,
   Row,
   Section,
   Select,
@@ -2364,8 +2896,19 @@ export {
   Spinner,
   Stack,
   StarRating,
+  StatsGrid,
   StatusBadge,
+  StepperNav,
+  SummaryCard,
+  TagInput,
   Text,
   Ul,
-  mergeTableConfig2 as mergeTableConfig
+  ViewToggle,
+  classNames,
+  easings,
+  getContrastColor,
+  hexToRgb,
+  mergeTableConfig2 as mergeTableConfig,
+  mergeTailwindClasses,
+  rgbToHex
 };