@axtec/components 0.1.8 → 0.1.10

package/dist/index47.js

@@ -1,125 +1,94 @@
-import { jsx as e, jsxs as n, Fragment as p } from "react/jsx-runtime";
-import { useState as g } from "react";
-import { cn as v } from "./index3.js";
-import { EmptyData as x } from "./index27.js";
-import { Dialog as w, DialogPanel as N } from "@headlessui/react";
-import { XMarkIcon as C, TrashIcon as y, ChevronLeftIcon as k, ChevronRightIcon as I } from "@heroicons/react/24/outline";
-const T = ({
-  images: t,
-  columns: c = 4,
-  gap: u = 16,
-  emptyMessage: d = "To add images, upload them directly or import from another source.",
-  onDelete: a,
-  className: i
-}) => {
-  const [l, r] = g(null), h = {
-    3: "grid-cols-3",
-    4: "grid-cols-4",
-    5: "grid-cols-5",
-    6: "grid-cols-6"
-  }, m = () => {
-    l !== null && l > 0 && r(l - 1);
-  }, f = () => {
-    l !== null && l < t.length - 1 && r(l + 1);
-  }, b = () => {
-    l !== null && a && (a(t[l], l), t.length === 1 ? r(null) : l >= t.length - 1 && r(t.length - 2));
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { ChevronLeftIcon as b, ChevronRightIcon as f } from "@heroicons/react/20/solid";
+import { cn as c } from "./index3.js";
+function p(i, t) {
+  return Array.from({ length: t - i + 1 }, (e, l) => i + l);
+}
+function u(i, t, e) {
+  const l = e * 2 + 5;
+  if (t <= l)
+    return p(1, t);
+  const o = Math.max(i - e, 1), r = Math.min(i + e, t), a = o > 2, d = r < t - 1;
+  return !a && d ? [...p(1, 3 + e * 2), "ellipsis", t] : a && !d ? [1, "ellipsis", ...p(t - (2 + e * 2), t)] : [1, "ellipsis", ...p(o, r), "ellipsis", t];
+}
+function R({
+  currentPage: i,
+  totalPages: t,
+  onPageChange: e,
+  siblingCount: l = 1,
+  className: o
+}) {
+  const r = u(i, t, l);
+  if (t <= 1)
+    return null;
+  const a = () => {
+    i > 1 && e(i - 1);
+  }, d = () => {
+    i < t && e(i + 1);
   };
-  return t.length === 0 ? /* @__PURE__ */ e(
-    x,
+  return /* @__PURE__ */ m(
+    "nav",
     {
-      fullBlock: !0,
-      message: d,
-      className: i
-    }
-  ) : /* @__PURE__ */ n(p, { children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: v("grid", h[c], i),
-        style: { gap: `${u}px` },
-        children: t.map((o, s) => /* @__PURE__ */ e(
-          "div",
+      "aria-label": "Pagination",
+      className: c("flex items-center justify-center gap-1", o),
+      children: [
+        /* @__PURE__ */ s(
+          "button",
           {
-            className: "aspect-square rounded-lg overflow-hidden cursor-pointer bg-slate-200 hover:opacity-90 transition-opacity",
-            onClick: () => r(s),
-            children: /* @__PURE__ */ e(
-              "img",
-              {
-                src: o.url,
-                alt: o.alt || `Image ${s + 1}`,
-                className: "w-full h-full object-cover"
-              }
-            )
-          },
-          o.id || o.url
-        ))
-      }
-    ),
-    /* @__PURE__ */ n(
-      w,
-      {
-        open: l !== null,
-        onClose: () => r(null),
-        className: "relative z-50",
-        children: [
-          /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black", "aria-hidden": "true" }),
-          /* @__PURE__ */ e("div", { className: "fixed inset-0 flex items-center justify-center", children: /* @__PURE__ */ n(N, { className: "relative w-full h-full flex items-center justify-center", children: [
-            /* @__PURE__ */ e(
-              "button",
-              {
-                onClick: () => r(null),
-                className: "absolute top-8 left-8 p-2 rounded-full bg-white hover:bg-slate-100 transition-colors z-10",
-                "aria-label": "Close preview",
-                children: /* @__PURE__ */ e(C, { className: "w-6 h-6 text-slate-700" })
-              }
-            ),
-            a && /* @__PURE__ */ e(
-              "button",
-              {
-                onClick: b,
-                className: "absolute top-8 right-8 p-2 rounded-full bg-white hover:bg-red-50 transition-colors z-10",
-                "aria-label": "Delete image",
-                children: /* @__PURE__ */ e(y, { className: "w-6 h-6 text-red-500" })
-              }
+            type: "button",
+            onClick: a,
+            disabled: i === 1,
+            className: c(
+              "p-2 rounded-lg transition-colors duration-150",
+              "text-slate-500 hover:bg-slate-100 hover:text-slate-700",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
             ),
-            l !== null && l > 0 && /* @__PURE__ */ e(
-              "button",
-              {
-                onClick: m,
-                className: "absolute left-8 p-3 rounded-full bg-white/80 hover:bg-white transition-colors z-10",
-                "aria-label": "Previous image",
-                children: /* @__PURE__ */ e(k, { className: "w-6 h-6 text-slate-700" })
-              }
-            ),
-            l !== null && l < t.length - 1 && /* @__PURE__ */ e(
-              "button",
-              {
-                onClick: f,
-                className: "absolute right-8 p-3 rounded-full bg-white/80 hover:bg-white transition-colors z-10",
-                "aria-label": "Next image",
-                children: /* @__PURE__ */ e(I, { className: "w-6 h-6 text-slate-700" })
-              }
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ s(b, { className: "h-5 w-5" })
+          }
+        ),
+        r.map((n, h) => n === "ellipsis" ? /* @__PURE__ */ s(
+          "span",
+          {
+            className: "px-3 py-2 text-slate-400",
+            children: "..."
+          },
+          `ellipsis-${h}`
+        ) : /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: () => e(n),
+            className: c(
+              "min-w-[40px] h-10 px-3 rounded-lg text-sm font-medium",
+              "transition-colors duration-150",
+              n === i ? "bg-primary-500 text-white" : "text-slate-700 hover:bg-slate-100"
             ),
-            l !== null && /* @__PURE__ */ e(
-              "img",
-              {
-                src: t[l].url,
-                alt: t[l].alt || `Image ${l + 1}`,
-                className: "max-w-full max-h-full object-contain"
-              }
+            "aria-current": n === i ? "page" : void 0,
+            children: n
+          },
+          n
+        )),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: d,
+            disabled: i === t,
+            className: c(
+              "p-2 rounded-lg transition-colors duration-150",
+              "text-slate-500 hover:bg-slate-100 hover:text-slate-700",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
             ),
-            l !== null && /* @__PURE__ */ n("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-white/80 text-sm font-medium", children: [
-              l + 1,
-              " / ",
-              t.length
-            ] })
-          ] }) })
-        ]
-      }
-    )
-  ] });
-};
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ s(f, { className: "h-5 w-5" })
+          }
+        )
+      ]
+    }
+  );
+}
 export {
-  T as PhotoLibrary
+  R as Pagination
 };
 //# sourceMappingURL=index47.js.map

package/dist/index47.js.map

@@ -1 +1 @@
-{"version":3,"file":"index47.js","sources":["../src/components/PhotoLibrary/PhotoLibrary.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { cn } from '@/lib/utils'\nimport { EmptyData } from '../EmptyData/EmptyData'\nimport { Dialog, DialogPanel } from '@headlessui/react'\nimport { XMarkIcon, ChevronLeftIcon, ChevronRightIcon, TrashIcon } from '@heroicons/react/24/outline'\n\nexport interface PhotoLibraryImage {\n  url: string\n  alt?: string\n  id?: string\n}\n\nexport interface PhotoLibraryProps {\n  images: PhotoLibraryImage[]\n  columns?: 3 | 4 | 5 | 6\n  gap?: number\n  emptyMessage?: string\n  onDelete?: (image: PhotoLibraryImage, index: number) => void\n  className?: string\n}\n\nexport const PhotoLibrary = ({\n  images,\n  columns = 4,\n  gap = 16,\n  emptyMessage = 'To add images, upload them directly or import from another source.',\n  onDelete,\n  className,\n}: PhotoLibraryProps) => {\n  const [previewIndex, setPreviewIndex] = useState<number | null>(null)\n\n  const columnClasses = {\n    3: 'grid-cols-3',\n    4: 'grid-cols-4',\n    5: 'grid-cols-5',\n    6: 'grid-cols-6',\n  }\n\n  const handlePrevious = () => {\n    if (previewIndex !== null && previewIndex > 0) {\n      setPreviewIndex(previewIndex - 1)\n    }\n  }\n\n  const handleNext = () => {\n    if (previewIndex !== null && previewIndex < images.length - 1) {\n      setPreviewIndex(previewIndex + 1)\n    }\n  }\n\n  const handleDelete = () => {\n    if (previewIndex !== null && onDelete) {\n      onDelete(images[previewIndex], previewIndex)\n      if (images.length === 1) {\n        setPreviewIndex(null)\n      } else if (previewIndex >= images.length - 1) {\n        setPreviewIndex(images.length - 2)\n      }\n    }\n  }\n\n  if (images.length === 0) {\n    return (\n      <EmptyData\n        fullBlock\n        message={emptyMessage}\n        className={className}\n      />\n    )\n  }\n\n  return (\n    <>\n      <div\n        className={cn('grid', columnClasses[columns], className)}\n        style={{ gap: `${gap}px` }}\n      >\n        {images.map((image, index) => (\n          <div\n            key={image.id || image.url}\n            className=\"aspect-square rounded-lg overflow-hidden cursor-pointer bg-slate-200 hover:opacity-90 transition-opacity\"\n            onClick={() => setPreviewIndex(index)}\n          >\n            <img\n              src={image.url}\n              alt={image.alt || `Image ${index + 1}`}\n              className=\"w-full h-full object-cover\"\n            />\n          </div>\n        ))}\n      </div>\n\n      {/* Preview Modal */}\n      <Dialog\n        open={previewIndex !== null}\n        onClose={() => setPreviewIndex(null)}\n        className=\"relative z-50\"\n      >\n        <div className=\"fixed inset-0 bg-black\" aria-hidden=\"true\" />\n\n        <div className=\"fixed inset-0 flex items-center justify-center\">\n          <DialogPanel className=\"relative w-full h-full flex items-center justify-center\">\n            {/* Close button */}\n            <button\n              onClick={() => setPreviewIndex(null)}\n              className=\"absolute top-8 left-8 p-2 rounded-full bg-white hover:bg-slate-100 transition-colors z-10\"\n              aria-label=\"Close preview\"\n            >\n              <XMarkIcon className=\"w-6 h-6 text-slate-700\" />\n            </button>\n\n            {/* Delete button */}\n            {onDelete && (\n              <button\n                onClick={handleDelete}\n                className=\"absolute top-8 right-8 p-2 rounded-full bg-white hover:bg-red-50 transition-colors z-10\"\n                aria-label=\"Delete image\"\n              >\n                <TrashIcon className=\"w-6 h-6 text-red-500\" />\n              </button>\n            )}\n\n            {/* Navigation */}\n            {previewIndex !== null && previewIndex > 0 && (\n              <button\n                onClick={handlePrevious}\n                className=\"absolute left-8 p-3 rounded-full bg-white/80 hover:bg-white transition-colors z-10\"\n                aria-label=\"Previous image\"\n              >\n                <ChevronLeftIcon className=\"w-6 h-6 text-slate-700\" />\n              </button>\n            )}\n\n            {previewIndex !== null && previewIndex < images.length - 1 && (\n              <button\n                onClick={handleNext}\n                className=\"absolute right-8 p-3 rounded-full bg-white/80 hover:bg-white transition-colors z-10\"\n                aria-label=\"Next image\"\n              >\n                <ChevronRightIcon className=\"w-6 h-6 text-slate-700\" />\n              </button>\n            )}\n\n            {/* Image */}\n            {previewIndex !== null && (\n              <img\n                src={images[previewIndex].url}\n                alt={images[previewIndex].alt || `Image ${previewIndex + 1}`}\n                className=\"max-w-full max-h-full object-contain\"\n              />\n            )}\n\n            {/* Counter */}\n            {previewIndex !== null && (\n              <div className=\"absolute bottom-8 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-white/80 text-sm font-medium\">\n                {previewIndex + 1} / {images.length}\n              </div>\n            )}\n          </DialogPanel>\n        </div>\n      </Dialog>\n    </>\n  )\n}\n"],"names":["PhotoLibrary","images","columns","gap","emptyMessage","onDelete","className","previewIndex","setPreviewIndex","useState","columnClasses","handlePrevious","handleNext","handleDelete","jsx","EmptyData","jsxs","Fragment","cn","image","index","Dialog","DialogPanel","XMarkIcon","TrashIcon","ChevronLeftIcon","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"index47.js","sources":["../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'\nimport { cn } from '@/lib/utils'\n\nexport interface PaginationProps {\n  currentPage: number\n  totalPages: number\n  onPageChange: (page: number) => void\n  siblingCount?: number\n  className?: string\n}\n\nfunction range(start: number, end: number): number[] {\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i)\n}\n\nfunction getPaginationRange(\n  currentPage: number,\n  totalPages: number,\n  siblingCount: number\n): (number | 'ellipsis')[] {\n  const totalPageNumbers = siblingCount * 2 + 5 // siblings + first + last + current + 2 ellipsis\n\n  if (totalPages <= totalPageNumbers) {\n    return range(1, totalPages)\n  }\n\n  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)\n  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages)\n\n  const showLeftEllipsis = leftSiblingIndex > 2\n  const showRightEllipsis = rightSiblingIndex < totalPages - 1\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRange = range(1, 3 + siblingCount * 2)\n    return [...leftRange, 'ellipsis', totalPages]\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightRange = range(totalPages - (2 + siblingCount * 2), totalPages)\n    return [1, 'ellipsis', ...rightRange]\n  }\n\n  const middleRange = range(leftSiblingIndex, rightSiblingIndex)\n  return [1, 'ellipsis', ...middleRange, 'ellipsis', totalPages]\n}\n\nexport function Pagination({\n  currentPage,\n  totalPages,\n  onPageChange,\n  siblingCount = 1,\n  className,\n}: PaginationProps) {\n  const paginationRange = getPaginationRange(currentPage, totalPages, siblingCount)\n\n  if (totalPages <= 1) {\n    return null\n  }\n\n  const onPrevious = () => {\n    if (currentPage > 1) {\n      onPageChange(currentPage - 1)\n    }\n  }\n\n  const onNext = () => {\n    if (currentPage < totalPages) {\n      onPageChange(currentPage + 1)\n    }\n  }\n\n  return (\n    <nav\n      aria-label=\"Pagination\"\n      className={cn('flex items-center justify-center gap-1', className)}\n    >\n      <button\n        type=\"button\"\n        onClick={onPrevious}\n        disabled={currentPage === 1}\n        className={cn(\n          'p-2 rounded-lg transition-colors duration-150',\n          'text-slate-500 hover:bg-slate-100 hover:text-slate-700',\n          'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'\n        )}\n        aria-label=\"Previous page\"\n      >\n        <ChevronLeftIcon className=\"h-5 w-5\" />\n      </button>\n\n      {paginationRange.map((page, index) => {\n        if (page === 'ellipsis') {\n          return (\n            <span\n              key={`ellipsis-${index}`}\n              className=\"px-3 py-2 text-slate-400\"\n            >\n              ...\n            </span>\n          )\n        }\n\n        return (\n          <button\n            key={page}\n            type=\"button\"\n            onClick={() => onPageChange(page)}\n            className={cn(\n              'min-w-[40px] h-10 px-3 rounded-lg text-sm font-medium',\n              'transition-colors duration-150',\n              page === currentPage\n                ? 'bg-primary-500 text-white'\n                : 'text-slate-700 hover:bg-slate-100'\n            )}\n            aria-current={page === currentPage ? 'page' : undefined}\n          >\n            {page}\n          </button>\n        )\n      })}\n\n      <button\n        type=\"button\"\n        onClick={onNext}\n        disabled={currentPage === totalPages}\n        className={cn(\n          'p-2 rounded-lg transition-colors duration-150',\n          'text-slate-500 hover:bg-slate-100 hover:text-slate-700',\n          'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'\n        )}\n        aria-label=\"Next page\"\n      >\n        <ChevronRightIcon className=\"h-5 w-5\" />\n      </button>\n    </nav>\n  )\n}\n"],"names":["range","start","end","_","i","getPaginationRange","currentPage","totalPages","siblingCount","totalPageNumbers","leftSiblingIndex","rightSiblingIndex","showLeftEllipsis","showRightEllipsis","Pagination","onPageChange","className","paginationRange","onPrevious","onNext","jsxs","cn","jsx","ChevronLeftIcon","page","index","ChevronRightIcon"],"mappings":";;;AAWA,SAASA,EAAMC,GAAeC,GAAuB;AACnD,SAAO,MAAM,KAAK,EAAE,QAAQA,IAAMD,IAAQ,EAAA,GAAK,CAACE,GAAGC,MAAMH,IAAQG,CAAC;AACpE;AAEA,SAASC,EACPC,GACAC,GACAC,GACyB;AACzB,QAAMC,IAAmBD,IAAe,IAAI;AAE5C,MAAID,KAAcE;AAChB,WAAOT,EAAM,GAAGO,CAAU;AAG5B,QAAMG,IAAmB,KAAK,IAAIJ,IAAcE,GAAc,CAAC,GACzDG,IAAoB,KAAK,IAAIL,IAAcE,GAAcD,CAAU,GAEnEK,IAAmBF,IAAmB,GACtCG,IAAoBF,IAAoBJ,IAAa;AAE3D,SAAI,CAACK,KAAoBC,IAEhB,CAAC,GADUb,EAAM,GAAG,IAAIQ,IAAe,CAAC,GACzB,YAAYD,CAAU,IAG1CK,KAAoB,CAACC,IAEhB,CAAC,GAAG,YAAY,GADJb,EAAMO,KAAc,IAAIC,IAAe,IAAID,CAAU,CACpC,IAI/B,CAAC,GAAG,YAAY,GADHP,EAAMU,GAAkBC,CAAiB,GACtB,YAAYJ,CAAU;AAC/D;AAEO,SAASO,EAAW;AAAA,EACzB,aAAAR;AAAA,EACA,YAAAC;AAAA,EACA,cAAAQ;AAAA,EACA,cAAAP,IAAe;AAAA,EACf,WAAAQ;AACF,GAAoB;AAClB,QAAMC,IAAkBZ,EAAmBC,GAAaC,GAAYC,CAAY;AAEhF,MAAID,KAAc;AAChB,WAAO;AAGT,QAAMW,IAAa,MAAM;AACvB,IAAIZ,IAAc,KAChBS,EAAaT,IAAc,CAAC;AAAA,EAEhC,GAEMa,IAAS,MAAM;AACnB,IAAIb,IAAcC,KAChBQ,EAAaT,IAAc,CAAC;AAAA,EAEhC;AAEA,SACE,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAWC,EAAG,0CAA0CL,CAAS;AAAA,MAEjE,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASJ;AAAA,YACT,UAAUZ,MAAgB;AAAA,YAC1B,WAAWe;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,cAAW;AAAA,YAEX,UAAA,gBAAAC,EAACC,GAAA,EAAgB,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtCN,EAAgB,IAAI,CAACO,GAAMC,MACtBD,MAAS,aAET,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,UAFM,YAAYG,CAAK;AAAA,QAAA,IAS1B,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAMP,EAAaS,CAAI;AAAA,YAChC,WAAWH;AAAA,cACT;AAAA,cACA;AAAA,cACAG,MAASlB,IACL,8BACA;AAAA,YAAA;AAAA,YAEN,gBAAckB,MAASlB,IAAc,SAAS;AAAA,YAE7C,UAAAkB;AAAA,UAAA;AAAA,UAZIA;AAAA,QAAA,CAeV;AAAA,QAED,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASH;AAAA,YACT,UAAUb,MAAgBC;AAAA,YAC1B,WAAWc;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,cAAW;AAAA,YAEX,UAAA,gBAAAC,EAACI,GAAA,EAAiB,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/index48.js

@@ -1,43 +1,72 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as o } from "./index3.js";
-const p = {
-  default: "bg-slate-100 text-slate-700",
-  primary: "bg-primary-500 text-white",
-  success: "bg-green-100 text-green-700",
-  warning: "bg-amber-100 text-amber-700",
-  danger: "bg-red-100 text-red-700",
-  info: "bg-blue-100 text-blue-700"
-}, x = {
-  sm: "px-2 py-0.5 text-xs",
-  md: "px-2.5 py-1 text-sm",
-  lg: "px-3 py-1.5 text-base"
-}, y = ({
-  label: n,
-  variant: i = "default",
-  size: a = "md",
-  className: l,
-  onClick: e,
-  backgroundColor: t,
-  textColor: r
-}) => {
-  const s = t || r ? { backgroundColor: t, color: r } : void 0;
-  return /* @__PURE__ */ m(
-    "span",
-    {
-      onClick: e,
-      className: o(
-        "inline-flex items-center rounded-full font-medium whitespace-nowrap",
-        !s && p[i],
-        x[a],
-        e && "cursor-pointer hover:opacity-80 transition-opacity",
-        l
-      ),
-      style: s,
-      children: n
-    }
-  );
-};
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { cn as n } from "./index3.js";
+const i = ({ children: e, className: t }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: n(
+      "border border-slate-200 rounded-2xl p-6 bg-white relative",
+      t
+    ),
+    children: e
+  }
+), m = ({ children: e, className: t }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: n(
+      "flex justify-between items-center mb-5",
+      t
+    ),
+    children: e
+  }
+), d = ({ children: e, badge: t, className: s }) => /* @__PURE__ */ a("div", { className: n("flex items-center gap-3", s), children: [
+  /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-primary-500 m-0", children: e }),
+  t
+] }), p = ({ children: e, onClick: t, disabled: s, className: o }) => /* @__PURE__ */ r(
+  "button",
+  {
+    type: "button",
+    onClick: t,
+    disabled: s,
+    className: n(
+      "bg-transparent border-none p-0",
+      "flex items-center gap-1.5",
+      "cursor-pointer text-primary-500",
+      "text-sm font-semibold",
+      "transition-opacity hover:opacity-70",
+      "disabled:opacity-40 disabled:cursor-not-allowed",
+      o
+    ),
+    children: e
+  }
+), x = ({ children: e, className: t }) => /* @__PURE__ */ r("div", { className: t, children: e }), b = ({ children: e, className: t }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: n(
+      "border-t border-slate-100 pt-3 mt-4 text-center",
+      t
+    ),
+    children: e
+  }
+), u = ({ message: e, action: t, className: s }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: n(
+      "flex flex-col items-center justify-center py-8 text-center",
+      s
+    ),
+    children: [
+      /* @__PURE__ */ r("p", { className: "text-sm text-slate-500 mb-4", children: e }),
+      t
+    ]
+  }
+);
 export {
-  y as Pill
+  i as Panel,
+  p as PanelAction,
+  x as PanelBody,
+  u as PanelEmptyState,
+  b as PanelFooter,
+  m as PanelHeader,
+  d as PanelTitle
 };
 //# sourceMappingURL=index48.js.map

package/dist/index48.js.map

@@ -1 +1 @@
-{"version":3,"file":"index48.js","sources":["../src/components/Pill/Pill.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface PillProps {\n  label: ReactNode\n  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  onClick?: (event: React.MouseEvent) => void\n  backgroundColor?: string\n  textColor?: string\n}\n\nconst variantStyles = {\n  default: 'bg-slate-100 text-slate-700',\n  primary: 'bg-primary-500 text-white',\n  success: 'bg-green-100 text-green-700',\n  warning: 'bg-amber-100 text-amber-700',\n  danger: 'bg-red-100 text-red-700',\n  info: 'bg-blue-100 text-blue-700',\n}\n\nconst sizeStyles = {\n  sm: 'px-2 py-0.5 text-xs',\n  md: 'px-2.5 py-1 text-sm',\n  lg: 'px-3 py-1.5 text-base',\n}\n\nexport const Pill = ({\n  label,\n  variant = 'default',\n  size = 'md',\n  className,\n  onClick,\n  backgroundColor,\n  textColor,\n}: PillProps) => {\n  const customStyles = backgroundColor || textColor\n    ? { backgroundColor, color: textColor }\n    : undefined\n\n  return (\n    <span\n      onClick={onClick}\n      className={cn(\n        'inline-flex items-center rounded-full font-medium whitespace-nowrap',\n        !customStyles && variantStyles[variant],\n        sizeStyles[size],\n        onClick && 'cursor-pointer hover:opacity-80 transition-opacity',\n        className\n      )}\n      style={customStyles}\n    >\n      {label}\n    </span>\n  )\n}\n"],"names":["variantStyles","sizeStyles","Pill","label","variant","size","className","onClick","backgroundColor","textColor","customStyles","jsx","cn"],"mappings":";;AAaA,MAAMA,IAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR,GAEMC,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAO,CAAC;AAAA,EACnB,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACF,MAAiB;AACf,QAAMC,IAAeF,KAAmBC,IACpC,EAAE,iBAAAD,GAAiB,OAAOC,MAC1B;AAEJ,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAJ;AAAA,MACA,WAAWK;AAAA,QACT;AAAA,QACA,CAACF,KAAgBV,EAAcI,CAAO;AAAA,QACtCH,EAAWI,CAAI;AAAA,QACfE,KAAW;AAAA,QACXD;AAAA,MAAA;AAAA,MAEF,OAAOI;AAAA,MAEN,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"index48.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface PanelProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const Panel = ({ children, className }: PanelProps) => {\n  return (\n    <div\n      className={cn(\n        'border border-slate-200 rounded-2xl p-6 bg-white relative',\n        className\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport interface PanelHeaderProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const PanelHeader = ({ children, className }: PanelHeaderProps) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between items-center mb-5',\n        className\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport interface PanelTitleProps {\n  children: ReactNode\n  badge?: ReactNode\n  className?: string\n}\n\nexport const PanelTitle = ({ children, badge, className }: PanelTitleProps) => {\n  return (\n    <div className={cn('flex items-center gap-3', className)}>\n      <h2 className=\"text-lg font-semibold text-primary-500 m-0\">\n        {children}\n      </h2>\n      {badge}\n    </div>\n  )\n}\n\nexport interface PanelActionProps {\n  children: ReactNode\n  onClick?: () => void\n  disabled?: boolean\n  className?: string\n}\n\nexport const PanelAction = ({ children, onClick, disabled, className }: PanelActionProps) => {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      className={cn(\n        'bg-transparent border-none p-0',\n        'flex items-center gap-1.5',\n        'cursor-pointer text-primary-500',\n        'text-sm font-semibold',\n        'transition-opacity hover:opacity-70',\n        'disabled:opacity-40 disabled:cursor-not-allowed',\n        className\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport interface PanelBodyProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const PanelBody = ({ children, className }: PanelBodyProps) => {\n  return (\n    <div className={className}>\n      {children}\n    </div>\n  )\n}\n\nexport interface PanelFooterProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const PanelFooter = ({ children, className }: PanelFooterProps) => {\n  return (\n    <div\n      className={cn(\n        'border-t border-slate-100 pt-3 mt-4 text-center',\n        className\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport interface PanelEmptyStateProps {\n  message: string\n  action?: ReactNode\n  className?: string\n}\n\nexport const PanelEmptyState = ({ message, action, className }: PanelEmptyStateProps) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center py-8 text-center',\n        className\n      )}\n    >\n      <p className=\"text-sm text-slate-500 mb-4\">{message}</p>\n      {action}\n    </div>\n  )\n}\n"],"names":["Panel","children","className","jsx","cn","PanelHeader","PanelTitle","badge","PanelAction","onClick","disabled","PanelBody","PanelFooter","PanelEmptyState","message","action","jsxs"],"mappings":";;AAQO,MAAMA,IAAQ,CAAC,EAAE,UAAAC,GAAU,WAAAC,QAE9B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAGD,UAAAD;AAAA,EAAA;AAAA,GAUMI,IAAc,CAAC,EAAE,UAAAJ,GAAU,WAAAC,QAEpC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAGD,UAAAD;AAAA,EAAA;AAAA,GAWMK,IAAa,CAAC,EAAE,UAAAL,GAAU,OAAAM,GAAO,WAAAL,0BAEzC,OAAA,EAAI,WAAWE,EAAG,2BAA2BF,CAAS,GACrD,UAAA;AAAA,EAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,8CACX,UAAAF,EAAA,CACH;AAAA,EACCM;AAAA,GACH,GAWSC,IAAc,CAAC,EAAE,UAAAP,GAAU,SAAAQ,GAAS,UAAAC,GAAU,WAAAR,QAEvD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAAM;AAAA,IACA,UAAAC;AAAA,IACA,WAAWN;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAF;AAAA,IAAA;AAAA,IAGD,UAAAD;AAAA,EAAA;AAAA,GAUMU,IAAY,CAAC,EAAE,UAAAV,GAAU,WAAAC,QAElC,gBAAAC,EAAC,OAAA,EAAI,WAAAD,GACF,UAAAD,EAAA,CACH,GASSW,IAAc,CAAC,EAAE,UAAAX,GAAU,WAAAC,QAEpC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAGD,UAAAD;AAAA,EAAA;AAAA,GAWMY,IAAkB,CAAC,EAAE,SAAAC,GAAS,QAAAC,GAAQ,WAAAb,QAE/C,gBAAAc;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWZ;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,+BAA+B,UAAAW,GAAQ;AAAA,MACnDC;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/index49.js

@@ -1,47 +1,125 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { cn as t } from "./index3.js";
-const h = ({
-  icon: l,
-  title: o,
-  description: x,
-  buttonLabel: r,
-  onAction: a,
-  children: s,
-  size: m = "md",
+import { jsx as e, jsxs as n, Fragment as p } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { cn as v } from "./index3.js";
+import { EmptyData as x } from "./index29.js";
+import { Dialog as w, DialogPanel as N } from "@headlessui/react";
+import { XMarkIcon as C, TrashIcon as y, ChevronLeftIcon as k, ChevronRightIcon as I } from "@heroicons/react/24/outline";
+const T = ({
+  images: t,
+  columns: c = 4,
+  gap: u = 16,
+  emptyMessage: d = "To add images, upload them directly or import from another source.",
+  onDelete: a,
   className: i
-}) => /* @__PURE__ */ p(
-  "div",
-  {
-    className: t(
-      "rounded-xl bg-gradient-to-br from-primary-500 to-primary-500/80 text-white",
-      m === "sm" ? "p-3" : "p-4",
-      i
+}) => {
+  const [l, r] = g(null), h = {
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6"
+  }, m = () => {
+    l !== null && l > 0 && r(l - 1);
+  }, f = () => {
+    l !== null && l < t.length - 1 && r(l + 1);
+  }, b = () => {
+    l !== null && a && (a(t[l], l), t.length === 1 ? r(null) : l >= t.length - 1 && r(t.length - 2));
+  };
+  return t.length === 0 ? /* @__PURE__ */ e(
+    x,
+    {
+      fullBlock: !0,
+      message: d,
+      className: i
+    }
+  ) : /* @__PURE__ */ n(p, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: v("grid", h[c], i),
+        style: { gap: `${u}px` },
+        children: t.map((o, s) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "aspect-square rounded-lg overflow-hidden cursor-pointer bg-slate-200 hover:opacity-90 transition-opacity",
+            onClick: () => r(s),
+            children: /* @__PURE__ */ e(
+              "img",
+              {
+                src: o.url,
+                alt: o.alt || `Image ${s + 1}`,
+                className: "w-full h-full object-cover"
+              }
+            )
+          },
+          o.id || o.url
+        ))
+      }
     ),
-    children: [
-      /* @__PURE__ */ p("div", { className: t("flex items-center gap-2", (x || r || s) && "mb-2"), children: [
-        l && /* @__PURE__ */ e(l, { className: t(m === "sm" ? "h-4 w-4" : "h-5 w-5") }),
-        /* @__PURE__ */ e("span", { className: t("font-semibold", m === "sm" ? "text-xs" : "text-sm"), children: o })
-      ] }),
-      x && /* @__PURE__ */ e("p", { className: t(
-        "text-white/90",
-        m === "sm" ? "text-[11px]" : "text-xs",
-        s || r && a ? m === "sm" ? "mb-2" : "mb-3" : ""
-      ), children: x }),
-      s || (r && a ? /* @__PURE__ */ e(
-        "button",
-        {
-          onClick: a,
-          className: t(
-            "w-full bg-white text-primary-600 rounded-lg font-semibold hover:bg-white/90 transition-colors cursor-pointer",
-            m === "sm" ? "px-2 py-1.5 text-xs" : "px-3 py-2 text-sm"
-          ),
-          children: r
-        }
-      ) : null)
-    ]
-  }
-);
+    /* @__PURE__ */ n(
+      w,
+      {
+        open: l !== null,
+        onClose: () => r(null),
+        className: "relative z-50",
+        children: [
+          /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black", "aria-hidden": "true" }),
+          /* @__PURE__ */ e("div", { className: "fixed inset-0 flex items-center justify-center", children: /* @__PURE__ */ n(N, { className: "relative w-full h-full flex items-center justify-center", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => r(null),
+                className: "absolute top-8 left-8 p-2 rounded-full bg-white hover:bg-slate-100 transition-colors z-10",
+                "aria-label": "Close preview",
+                children: /* @__PURE__ */ e(C, { className: "w-6 h-6 text-slate-700" })
+              }
+            ),
+            a && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: b,
+                className: "absolute top-8 right-8 p-2 rounded-full bg-white hover:bg-red-50 transition-colors z-10",
+                "aria-label": "Delete image",
+                children: /* @__PURE__ */ e(y, { className: "w-6 h-6 text-red-500" })
+              }
+            ),
+            l !== null && l > 0 && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: m,
+                className: "absolute left-8 p-3 rounded-full bg-white/80 hover:bg-white transition-colors z-10",
+                "aria-label": "Previous image",
+                children: /* @__PURE__ */ e(k, { className: "w-6 h-6 text-slate-700" })
+              }
+            ),
+            l !== null && l < t.length - 1 && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: f,
+                className: "absolute right-8 p-3 rounded-full bg-white/80 hover:bg-white transition-colors z-10",
+                "aria-label": "Next image",
+                children: /* @__PURE__ */ e(I, { className: "w-6 h-6 text-slate-700" })
+              }
+            ),
+            l !== null && /* @__PURE__ */ e(
+              "img",
+              {
+                src: t[l].url,
+                alt: t[l].alt || `Image ${l + 1}`,
+                className: "max-w-full max-h-full object-contain"
+              }
+            ),
+            l !== null && /* @__PURE__ */ n("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-white/80 text-sm font-medium", children: [
+              l + 1,
+              " / ",
+              t.length
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+};
 export {
-  h as PrimaryCard
+  T as PhotoLibrary
 };
 //# sourceMappingURL=index49.js.map