@axtec/components 0.1.8 → 0.1.10

package/dist/index32.js

@@ -1,48 +1,95 @@
-import { jsxs as e, jsx as t, Fragment as o } from "react/jsx-runtime";
-import { cn as r } from "./index3.js";
-const h = ({
-  image: i,
-  progress: a,
-  url: l,
-  className: s
+import { jsxs as r, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { cn as i } from "./index3.js";
+import { Dialog as w, DialogPanel as j } from "@headlessui/react";
+import { XMarkIcon as C } from "@heroicons/react/24/outline";
+const k = {
+  auto: "",
+  square: "aspect-square",
+  video: "aspect-video",
+  "4/3": "aspect-[4/3]",
+  "3/2": "aspect-[3/2]"
+}, O = ({
+  src: m,
+  alt: o = "",
+  fallbackSrc: f = "/png/No_Img.png",
+  enablePreview: t = !0,
+  aspectRatio: u = "auto",
+  objectFit: s = "cover",
+  className: d,
+  imageClassName: p,
+  children: h
 }) => {
-  const n = l || i, d = a >= 100 || !!l;
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      className: r(
-        "relative aspect-square rounded-lg overflow-hidden bg-slate-200",
-        s
-      ),
-      children: [
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: "absolute inset-0 bg-cover bg-center",
-            style: { backgroundImage: `url(${n})` }
-          }
+  const [a, v] = c(!1), [g, l] = c(!1), n = a ? f : m, x = () => {
+    v(!0);
+  }, N = () => {
+    t && !a && l(!0);
+  };
+  return /* @__PURE__ */ r(b, { children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: i(
+          "relative overflow-hidden",
+          k[u],
+          t && !a && "cursor-pointer",
+          d
         ),
-        !d && /* @__PURE__ */ e(o, { children: [
-          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-black/50" }),
-          /* @__PURE__ */ e("div", { className: "absolute inset-x-4 top-1/2 -translate-y-1/2", children: [
-            /* @__PURE__ */ t("div", { className: "h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ t(
-              "div",
+        onClick: N,
+        children: [
+          /* @__PURE__ */ e(
+            "img",
+            {
+              src: n,
+              alt: o,
+              onError: x,
+              className: i(
+                "w-full h-full",
+                s === "cover" && "object-cover",
+                s === "contain" && "object-contain",
+                s === "fill" && "object-fill",
+                s === "none" && "object-none",
+                p
+              )
+            }
+          ),
+          h
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      w,
+      {
+        open: g,
+        onClose: () => l(!1),
+        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__ */ r(j, { className: "relative w-full h-full flex items-center justify-center", children: [
+            /* @__PURE__ */ e(
+              "button",
               {
-                className: "h-full bg-white rounded-full transition-all duration-300",
-                style: { width: `${Math.min(a, 100)}%` }
+                onClick: () => l(!1),
+                className: "absolute top-8 left-8 p-2 rounded-full bg-white hover:bg-slate-100 transition-colors",
+                "aria-label": "Close preview",
+                children: /* @__PURE__ */ e(C, { className: "w-6 h-6 text-slate-700" })
               }
-            ) }),
-            /* @__PURE__ */ e("div", { className: "text-center text-white text-xs mt-2 font-medium", children: [
-              Math.round(a),
-              "%"
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
+            ),
+            /* @__PURE__ */ e(
+              "img",
+              {
+                src: n,
+                alt: o,
+                className: "max-w-full max-h-full object-contain"
+              }
+            )
+          ] }) })
+        ]
+      }
+    )
+  ] });
 };
 export {
-  h as ImageUploading
+  O as Image
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/ImageUploading/ImageUploading.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\n\nexport interface ImageUploadingProps {\n  image: string\n  progress: number\n  url?: string\n  className?: string\n}\n\nexport const ImageUploading = ({\n  image,\n  progress,\n  url,\n  className,\n}: ImageUploadingProps) => {\n  const displayImage = url || image\n  const isComplete = progress >= 100 || !!url\n\n  return (\n    <div\n      className={cn(\n        'relative aspect-square rounded-lg overflow-hidden bg-slate-200',\n        className\n      )}\n    >\n      {/* Background Image */}\n      <div\n        className=\"absolute inset-0 bg-cover bg-center\"\n        style={{ backgroundImage: `url(${displayImage})` }}\n      />\n\n      {/* Loading Overlay */}\n      {!isComplete && (\n        <>\n          <div className=\"absolute inset-0 bg-black/50\" />\n\n          {/* Progress Bar */}\n          <div className=\"absolute inset-x-4 top-1/2 -translate-y-1/2\">\n            <div className=\"h-1.5 bg-white/30 rounded-full overflow-hidden\">\n              <div\n                className=\"h-full bg-white rounded-full transition-all duration-300\"\n                style={{ width: `${Math.min(progress, 100)}%` }}\n              />\n            </div>\n            <div className=\"text-center text-white text-xs mt-2 font-medium\">\n              {Math.round(progress)}%\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":["ImageUploading","image","progress","url","className","displayImage","isComplete","jsxs","cn","jsx","Fragment"],"mappings":";;AASO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AACF,MAA2B;AACzB,QAAMC,IAAeF,KAAOF,GACtBK,IAAaJ,KAAY,OAAO,CAAC,CAACC;AAExC,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAIF,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,OAAOJ,CAAY,IAAA;AAAA,UAAI;AAAA,QAAA;AAAA,QAIlD,CAACC,KACA,gBAAAC,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,+BAAA,CAA+B;AAAA,UAG9C,gBAAAF,EAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,YAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,kDACb,UAAA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAIP,GAAU,GAAG,CAAC,IAAA;AAAA,cAAI;AAAA,YAAA,GAElD;AAAA,YACA,gBAAAK,EAAC,OAAA,EAAI,WAAU,mDACZ,UAAA;AAAA,cAAA,KAAK,MAAML,CAAQ;AAAA,cAAE;AAAA,YAAA,EAAA,CACxB;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"index32.js","sources":["../src/components/Image/Image.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\nimport { Dialog, DialogPanel } from '@headlessui/react'\nimport { XMarkIcon } from '@heroicons/react/24/outline'\n\nexport interface ImageProps {\n  src: string\n  alt?: string\n  fallbackSrc?: string\n  enablePreview?: boolean\n  aspectRatio?: 'auto' | 'square' | 'video' | '4/3' | '3/2'\n  objectFit?: 'cover' | 'contain' | 'fill' | 'none'\n  className?: string\n  imageClassName?: string\n  children?: ReactNode\n}\n\nconst aspectRatioClasses = {\n  auto: '',\n  square: 'aspect-square',\n  video: 'aspect-video',\n  '4/3': 'aspect-[4/3]',\n  '3/2': 'aspect-[3/2]',\n}\n\nexport const Image = ({\n  src,\n  alt = '',\n  fallbackSrc = '/png/No_Img.png',\n  enablePreview = true,\n  aspectRatio = 'auto',\n  objectFit = 'cover',\n  className,\n  imageClassName,\n  children,\n}: ImageProps) => {\n  const [hasError, setHasError] = useState(false)\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false)\n\n  const imageSrc = hasError ? fallbackSrc : src\n\n  const handleError = () => {\n    setHasError(true)\n  }\n\n  const handleClick = () => {\n    if (enablePreview && !hasError) {\n      setIsPreviewOpen(true)\n    }\n  }\n\n  return (\n    <>\n      <div\n        className={cn(\n          'relative overflow-hidden',\n          aspectRatioClasses[aspectRatio],\n          enablePreview && !hasError && 'cursor-pointer',\n          className\n        )}\n        onClick={handleClick}\n      >\n        <img\n          src={imageSrc}\n          alt={alt}\n          onError={handleError}\n          className={cn(\n            'w-full h-full',\n            objectFit === 'cover' && 'object-cover',\n            objectFit === 'contain' && 'object-contain',\n            objectFit === 'fill' && 'object-fill',\n            objectFit === 'none' && 'object-none',\n            imageClassName\n          )}\n        />\n        {children}\n      </div>\n\n      {/* Preview Modal */}\n      <Dialog\n        open={isPreviewOpen}\n        onClose={() => setIsPreviewOpen(false)}\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            <button\n              onClick={() => setIsPreviewOpen(false)}\n              className=\"absolute top-8 left-8 p-2 rounded-full bg-white hover:bg-slate-100 transition-colors\"\n              aria-label=\"Close preview\"\n            >\n              <XMarkIcon className=\"w-6 h-6 text-slate-700\" />\n            </button>\n\n            <img\n              src={imageSrc}\n              alt={alt}\n              className=\"max-w-full max-h-full object-contain\"\n            />\n          </DialogPanel>\n        </div>\n      </Dialog>\n    </>\n  )\n}\n"],"names":["aspectRatioClasses","Image","src","alt","fallbackSrc","enablePreview","aspectRatio","objectFit","className","imageClassName","children","hasError","setHasError","useState","isPreviewOpen","setIsPreviewOpen","imageSrc","handleError","handleClick","jsxs","Fragment","cn","jsx","Dialog","DialogPanel","XMarkIcon"],"mappings":";;;;;AAiBA,MAAMA,IAAqB;AAAA,EACzB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT,GAEaC,IAAQ,CAAC;AAAA,EACpB,KAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AACF,MAAkB;AAChB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAeC,CAAgB,IAAIF,EAAS,EAAK,GAElDG,IAAWL,IAAWP,IAAcF,GAEpCe,IAAc,MAAM;AACxB,IAAAL,EAAY,EAAI;AAAA,EAClB,GAEMM,IAAc,MAAM;AACxB,IAAIb,KAAiB,CAACM,KACpBI,EAAiB,EAAI;AAAA,EAEzB;AAEA,SACE,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE;AAAA,UACT;AAAA,UACArB,EAAmBM,CAAW;AAAA,UAC9BD,KAAiB,CAACM,KAAY;AAAA,UAC9BH;AAAA,QAAA;AAAA,QAEF,SAASU;AAAA,QAET,UAAA;AAAA,UAAA,gBAAAI;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKN;AAAA,cACL,KAAAb;AAAA,cACA,SAASc;AAAA,cACT,WAAWI;AAAA,gBACT;AAAA,gBACAd,MAAc,WAAW;AAAA,gBACzBA,MAAc,aAAa;AAAA,gBAC3BA,MAAc,UAAU;AAAA,gBACxBA,MAAc,UAAU;AAAA,gBACxBE;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,UAEDC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,gBAAAS;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAMT;AAAA,QACN,SAAS,MAAMC,EAAiB,EAAK;AAAA,QACrC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,0BAAyB,eAAY,QAAO;AAAA,4BAE1D,OAAA,EAAI,WAAU,kDACb,UAAA,gBAAAH,EAACK,GAAA,EAAY,WAAU,2DACrB,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,MAAMP,EAAiB,EAAK;AAAA,gBACrC,WAAU;AAAA,gBACV,cAAW;AAAA,gBAEX,UAAA,gBAAAO,EAACG,GAAA,EAAU,WAAU,yBAAA,CAAyB;AAAA,cAAA;AAAA,YAAA;AAAA,YAGhD,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAKN;AAAA,gBACL,KAAAb;AAAA,gBACA,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ,EAAA,CACF,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/index33.js

@@ -1,51 +1,63 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { cn as d } from "./index3.js";
-const u = m(
-  ({ className: i, label: t, error: e, helperText: o, id: a, ...n }, c) => {
-    const r = a || (t == null ? void 0 : t.toLowerCase().replace(/\s+/g, "-"));
-    return /* @__PURE__ */ l("div", { className: "w-full", children: [
-      t && /* @__PURE__ */ s(
-        "label",
-        {
-          htmlFor: r,
-          className: "block text-sm font-medium text-slate-700 mb-1.5",
-          children: t
-        }
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { cn as i } from "./index3.js";
+import { PlusIcon as m } from "@heroicons/react/24/outline";
+const d = {
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6"
+}, p = ({ item: a, onClick: n }) => {
+  const { name: r, image: l, url: t, isTemplate: e } = a, o = /* @__PURE__ */ s(
+    "div",
+    {
+      className: i(
+        "aspect-video rounded overflow-hidden mb-1.5 cursor-pointer",
+        "bg-cover bg-center bg-no-repeat",
+        "flex items-center justify-center",
+        e ? "bg-primary-50" : "bg-slate-200"
       ),
-      /* @__PURE__ */ s(
-        "input",
-        {
-          ref: c,
-          id: r,
-          className: d(
-            "w-full px-4 py-2.5 text-base",
-            "bg-white border rounded-lg",
-            "transition-colors duration-200",
-            "placeholder:text-slate-400",
-            "focus:outline-none focus:ring-2 focus:ring-offset-0",
-            e ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-slate-300 focus:border-primary-500 focus:ring-primary-500",
-            "disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed",
-            i
-          ),
-          ...n
-        }
-      ),
-      (e || o) && /* @__PURE__ */ s(
-        "p",
-        {
-          className: d(
-            "mt-1.5 text-sm",
-            e ? "text-red-600" : "text-slate-500"
-          ),
-          children: e || o
-        }
-      )
-    ] });
+      style: l && !e ? { backgroundImage: `url(${l})` } : void 0,
+      onClick: n,
+      children: e && /* @__PURE__ */ c("div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ s(m, { className: "w-8 h-8 text-primary-500" }),
+        /* @__PURE__ */ s("span", { className: "text-sm font-semibold text-slate-900", children: r })
+      ] })
+    }
+  );
+  return t && !e ? /* @__PURE__ */ s("li", { className: "flex flex-col", children: /* @__PURE__ */ c("a", { href: t, className: "no-underline", children: [
+    o,
+    /* @__PURE__ */ s("span", { className: "text-sm font-semibold text-slate-900 truncate", children: r })
+  ] }) }) : /* @__PURE__ */ c("li", { className: "flex flex-col", children: [
+    o,
+    !e && /* @__PURE__ */ s("span", { className: "text-sm font-semibold text-slate-900 truncate", children: r })
+  ] });
+}, u = ({
+  items: a,
+  columns: n = 4,
+  gap: r = 36,
+  onItemClick: l,
+  className: t
+}) => /* @__PURE__ */ s(
+  "ul",
+  {
+    className: i(
+      "list-none m-0 p-0 grid",
+      d[n],
+      t
+    ),
+    style: { gap: `14px ${r}px` },
+    children: a.map((e) => /* @__PURE__ */ s(
+      p,
+      {
+        item: e,
+        onClick: () => l == null ? void 0 : l(e)
+      },
+      e.id || e.name
+    ))
   }
 );
-u.displayName = "Input";
 export {
-  u as Input
+  u as ImageGrid
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: string\n  error?: string\n  helperText?: string\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, label, error, helperText, id, ...props }, ref) => {\n    const inputId = id || label?.toLowerCase().replace(/\\s+/g, '-')\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"block text-sm font-medium text-slate-700 mb-1.5\"\n          >\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          className={cn(\n            'w-full px-4 py-2.5 text-base',\n            'bg-white border rounded-lg',\n            'transition-colors duration-200',\n            'placeholder:text-slate-400',\n            'focus:outline-none focus:ring-2 focus:ring-offset-0',\n            error\n              ? 'border-red-500 focus:border-red-500 focus:ring-red-500'\n              : 'border-slate-300 focus:border-primary-500 focus:ring-primary-500',\n            'disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed',\n            className\n          )}\n          {...props}\n        />\n        {(error || helperText) && (\n          <p\n            className={cn(\n              'mt-1.5 text-sm',\n              error ? 'text-red-600' : 'text-slate-500'\n            )}\n          >\n            {error || helperText}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","className","label","error","helperText","id","props","ref","inputId","jsxs","jsx","cn"],"mappings":";;;AASO,MAAMA,IAAQC;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,GAAO,YAAAC,GAAY,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AAC9D,UAAMC,IAAUH,MAAMH,KAAA,gBAAAA,EAAO,cAAc,QAAQ,QAAQ;AAE3D,WACE,gBAAAO,EAAC,OAAA,EAAI,WAAU,UACZ,UAAA;AAAA,MAAAP,KACC,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASF;AAAA,UACT,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAH;AAAA,UACA,IAAIC;AAAA,UACJ,WAAWG;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAR,IACI,2DACA;AAAA,YACJ;AAAA,YACAF;AAAA,UAAA;AAAA,UAED,GAAGK;AAAA,QAAA;AAAA,MAAA;AAAA,OAEJH,KAASC,MACT,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAR,IAAQ,iBAAiB;AAAA,UAAA;AAAA,UAG1B,UAAAA,KAASC;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAM,cAAc;"}
+{"version":3,"file":"index33.js","sources":["../src/components/ImageGrid/ImageGrid.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport { PlusIcon } from '@heroicons/react/24/outline'\n\nexport interface ImageGridItem {\n  id?: string\n  name: string\n  image?: string\n  url?: string\n  isTemplate?: boolean\n}\n\nexport interface ImageGridProps {\n  items: ImageGridItem[]\n  columns?: 2 | 3 | 4 | 5 | 6\n  gap?: number\n  onItemClick?: (item: ImageGridItem) => void\n  className?: string\n}\n\nconst columnStyles = {\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n  4: 'grid-cols-4',\n  5: 'grid-cols-5',\n  6: 'grid-cols-6',\n}\n\nexport interface ImageGridItemProps {\n  item: ImageGridItem\n  onClick?: () => void\n}\n\nconst ImageGridItemComponent = ({ item, onClick }: ImageGridItemProps) => {\n  const { name, image, url, isTemplate } = item\n\n  const imageContent = (\n    <div\n      className={cn(\n        'aspect-video rounded overflow-hidden mb-1.5 cursor-pointer',\n        'bg-cover bg-center bg-no-repeat',\n        'flex items-center justify-center',\n        isTemplate ? 'bg-primary-50' : 'bg-slate-200'\n      )}\n      style={image && !isTemplate ? { backgroundImage: `url(${image})` } : undefined}\n      onClick={onClick}\n    >\n      {isTemplate && (\n        <div className=\"flex flex-col items-center gap-2\">\n          <PlusIcon className=\"w-8 h-8 text-primary-500\" />\n          <span className=\"text-sm font-semibold text-slate-900\">{name}</span>\n        </div>\n      )}\n    </div>\n  )\n\n  if (url && !isTemplate) {\n    return (\n      <li className=\"flex flex-col\">\n        <a href={url} className=\"no-underline\">\n          {imageContent}\n          <span className=\"text-sm font-semibold text-slate-900 truncate\">\n            {name}\n          </span>\n        </a>\n      </li>\n    )\n  }\n\n  return (\n    <li className=\"flex flex-col\">\n      {imageContent}\n      {!isTemplate && (\n        <span className=\"text-sm font-semibold text-slate-900 truncate\">\n          {name}\n        </span>\n      )}\n    </li>\n  )\n}\n\nexport const ImageGrid = ({\n  items,\n  columns = 4,\n  gap = 36,\n  onItemClick,\n  className,\n}: ImageGridProps) => {\n  return (\n    <ul\n      className={cn(\n        'list-none m-0 p-0 grid',\n        columnStyles[columns],\n        className\n      )}\n      style={{ gap: `14px ${gap}px` }}\n    >\n      {items.map((item) => (\n        <ImageGridItemComponent\n          key={item.id || item.name}\n          item={item}\n          onClick={() => onItemClick?.(item)}\n        />\n      ))}\n    </ul>\n  )\n}\n"],"names":["columnStyles","ImageGridItemComponent","item","onClick","name","image","url","isTemplate","imageContent","jsx","cn","jsxs","PlusIcon","ImageGrid","items","columns","gap","onItemClick","className"],"mappings":";;;AAmBA,MAAMA,IAAe;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL,GAOMC,IAAyB,CAAC,EAAE,MAAAC,GAAM,SAAAC,QAAkC;AACxE,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,KAAAC,GAAK,YAAAC,MAAeL,GAEnCM,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAH,IAAa,kBAAkB;AAAA,MAAA;AAAA,MAEjC,OAAOF,KAAS,CAACE,IAAa,EAAE,iBAAiB,OAAOF,CAAK,IAAA,IAAQ;AAAA,MACrE,SAAAF;AAAA,MAEC,UAAAI,KACC,gBAAAI,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,QAAA,gBAAAF,EAACG,GAAA,EAAS,WAAU,2BAAA,CAA2B;AAAA,QAC/C,gBAAAH,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAL,EAAA,CAAK;AAAA,MAAA,EAAA,CAC/D;AAAA,IAAA;AAAA,EAAA;AAKN,SAAIE,KAAO,CAACC,IAER,gBAAAE,EAAC,QAAG,WAAU,iBACZ,4BAAC,KAAA,EAAE,MAAMH,GAAK,WAAU,gBACrB,UAAA;AAAA,IAAAE;AAAA,IACD,gBAAAC,EAAC,QAAA,EAAK,WAAU,iDACb,UAAAL,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF,IAKF,gBAAAO,EAAC,MAAA,EAAG,WAAU,iBACX,UAAA;AAAA,IAAAH;AAAA,IACA,CAACD,KACA,gBAAAE,EAAC,QAAA,EAAK,WAAU,iDACb,UAAAL,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ,GAEaS,IAAY,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,KAAAC,IAAM;AAAA,EACN,aAAAC;AAAA,EACA,WAAAC;AACF,MAEI,gBAAAT;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAV,EAAae,CAAO;AAAA,MACpBG;AAAA,IAAA;AAAA,IAEF,OAAO,EAAE,KAAK,QAAQF,CAAG,KAAA;AAAA,IAExB,UAAAF,EAAM,IAAI,CAACZ,MACV,gBAAAO;AAAA,MAACR;AAAA,MAAA;AAAA,QAEC,MAAAC;AAAA,QACA,SAAS,MAAMe,KAAA,gBAAAA,EAAcf;AAAA,MAAI;AAAA,MAF5BA,EAAK,MAAMA,EAAK;AAAA,IAAA,CAIxB;AAAA,EAAA;AAAA;"}

package/dist/index34.js

@@ -1,55 +1,48 @@
-import { jsx as e, jsxs as h, Fragment as f } from "react/jsx-runtime";
-import { cn as n } from "./index3.js";
-const v = {
-  default: "text-slate-700 hover:text-slate-900",
-  primary: "text-primary-500 hover:text-primary-600",
-  muted: "text-slate-500 hover:text-slate-600"
-}, b = ({
-  label: i,
-  href: r,
-  onClick: o,
-  leftIcon: l,
-  rightIcon: c,
-  variant: m = "default",
-  underline: p = !0,
-  disabled: t = !1,
-  target: u,
-  rel: x,
-  className: d
+import { jsxs as e, jsx as t, Fragment as o } from "react/jsx-runtime";
+import { cn as r } from "./index3.js";
+const h = ({
+  image: i,
+  progress: a,
+  url: l,
+  className: s
 }) => {
-  const s = n(
-    "inline-flex items-center gap-2 transition-colors",
-    v[m],
-    p && "hover:underline",
-    t && "opacity-50 cursor-not-allowed pointer-events-none",
-    d
-  ), a = /* @__PURE__ */ h(f, { children: [
-    l,
-    /* @__PURE__ */ e("span", { children: i }),
-    c
-  ] });
-  return r && !t ? /* @__PURE__ */ e(
-    "a",
+  const n = l || i, d = a >= 100 || !!l;
+  return /* @__PURE__ */ e(
+    "div",
     {
-      href: r,
-      target: u,
-      rel: x,
-      className: n(s, "no-underline"),
-      onClick: o,
-      children: a
-    }
-  ) : /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: o,
-      disabled: t,
-      className: n(s, "bg-transparent border-none cursor-pointer p-0"),
-      children: a
+      className: r(
+        "relative aspect-square rounded-lg overflow-hidden bg-slate-200",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "absolute inset-0 bg-cover bg-center",
+            style: { backgroundImage: `url(${n})` }
+          }
+        ),
+        !d && /* @__PURE__ */ e(o, { children: [
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-black/50" }),
+          /* @__PURE__ */ e("div", { className: "absolute inset-x-4 top-1/2 -translate-y-1/2", children: [
+            /* @__PURE__ */ t("div", { className: "h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ t(
+              "div",
+              {
+                className: "h-full bg-white rounded-full transition-all duration-300",
+                style: { width: `${Math.min(a, 100)}%` }
+              }
+            ) }),
+            /* @__PURE__ */ e("div", { className: "text-center text-white text-xs mt-2 font-medium", children: [
+              Math.round(a),
+              "%"
+            ] })
+          ] })
+        ] })
+      ]
     }
   );
 };
 export {
-  b as LinkButton
+  h as ImageUploading
 };
 //# sourceMappingURL=index34.js.map

package/dist/index34.js.map

@@ -1 +1 @@
-{"version":3,"file":"index34.js","sources":["../src/components/LinkButton/LinkButton.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface LinkButtonProps {\n  label: string\n  href?: string\n  onClick?: () => void\n  leftIcon?: ReactNode\n  rightIcon?: ReactNode\n  variant?: 'default' | 'primary' | 'muted'\n  underline?: boolean\n  disabled?: boolean\n  target?: string\n  rel?: string\n  className?: string\n}\n\nconst variantStyles = {\n  default: 'text-slate-700 hover:text-slate-900',\n  primary: 'text-primary-500 hover:text-primary-600',\n  muted: 'text-slate-500 hover:text-slate-600',\n}\n\nexport const LinkButton = ({\n  label,\n  href,\n  onClick,\n  leftIcon,\n  rightIcon,\n  variant = 'default',\n  underline = true,\n  disabled = false,\n  target,\n  rel,\n  className,\n}: LinkButtonProps) => {\n  const commonClasses = cn(\n    'inline-flex items-center gap-2 transition-colors',\n    variantStyles[variant],\n    underline && 'hover:underline',\n    disabled && 'opacity-50 cursor-not-allowed pointer-events-none',\n    className\n  )\n\n  const content = (\n    <>\n      {leftIcon}\n      <span>{label}</span>\n      {rightIcon}\n    </>\n  )\n\n  if (href && !disabled) {\n    return (\n      <a\n        href={href}\n        target={target}\n        rel={rel}\n        className={cn(commonClasses, 'no-underline')}\n        onClick={onClick}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      className={cn(commonClasses, 'bg-transparent border-none cursor-pointer p-0')}\n    >\n      {content}\n    </button>\n  )\n}\n"],"names":["variantStyles","LinkButton","label","href","onClick","leftIcon","rightIcon","variant","underline","disabled","target","rel","className","commonClasses","cn","content","jsxs","Fragment","jsx"],"mappings":";;AAiBA,MAAMA,IAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAEaC,IAAa,CAAC;AAAA,EACzB,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AACF,MAAuB;AACrB,QAAMC,IAAgBC;AAAA,IACpB;AAAA,IACAd,EAAcO,CAAO;AAAA,IACrBC,KAAa;AAAA,IACbC,KAAY;AAAA,IACZG;AAAA,EAAA,GAGIG,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAZ;AAAA,IACD,gBAAAa,EAAC,UAAM,UAAAhB,EAAA,CAAM;AAAA,IACZI;AAAA,EAAA,GACH;AAGF,SAAIH,KAAQ,CAACM,IAET,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAf;AAAA,MACA,QAAAO;AAAA,MACA,KAAAC;AAAA,MACA,WAAWG,EAAGD,GAAe,cAAc;AAAA,MAC3C,SAAAT;AAAA,MAEC,UAAAW;AAAA,IAAA;AAAA,EAAA,IAML,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAAd;AAAA,MACA,UAAAK;AAAA,MACA,WAAWK,EAAGD,GAAe,+CAA+C;AAAA,MAE3E,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"index34.js","sources":["../src/components/ImageUploading/ImageUploading.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\n\nexport interface ImageUploadingProps {\n  image: string\n  progress: number\n  url?: string\n  className?: string\n}\n\nexport const ImageUploading = ({\n  image,\n  progress,\n  url,\n  className,\n}: ImageUploadingProps) => {\n  const displayImage = url || image\n  const isComplete = progress >= 100 || !!url\n\n  return (\n    <div\n      className={cn(\n        'relative aspect-square rounded-lg overflow-hidden bg-slate-200',\n        className\n      )}\n    >\n      {/* Background Image */}\n      <div\n        className=\"absolute inset-0 bg-cover bg-center\"\n        style={{ backgroundImage: `url(${displayImage})` }}\n      />\n\n      {/* Loading Overlay */}\n      {!isComplete && (\n        <>\n          <div className=\"absolute inset-0 bg-black/50\" />\n\n          {/* Progress Bar */}\n          <div className=\"absolute inset-x-4 top-1/2 -translate-y-1/2\">\n            <div className=\"h-1.5 bg-white/30 rounded-full overflow-hidden\">\n              <div\n                className=\"h-full bg-white rounded-full transition-all duration-300\"\n                style={{ width: `${Math.min(progress, 100)}%` }}\n              />\n            </div>\n            <div className=\"text-center text-white text-xs mt-2 font-medium\">\n              {Math.round(progress)}%\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":["ImageUploading","image","progress","url","className","displayImage","isComplete","jsxs","cn","jsx","Fragment"],"mappings":";;AASO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AACF,MAA2B;AACzB,QAAMC,IAAeF,KAAOF,GACtBK,IAAaJ,KAAY,OAAO,CAAC,CAACC;AAExC,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAIF,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,OAAOJ,CAAY,IAAA;AAAA,UAAI;AAAA,QAAA;AAAA,QAIlD,CAACC,KACA,gBAAAC,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,+BAAA,CAA+B;AAAA,UAG9C,gBAAAF,EAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,YAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,kDACb,UAAA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAIP,GAAU,GAAG,CAAC,IAAA;AAAA,cAAI;AAAA,YAAA,GAElD;AAAA,YACA,gBAAAK,EAAC,OAAA,EAAI,WAAU,mDACZ,UAAA;AAAA,cAAA,KAAK,MAAML,CAAQ;AAAA,cAAE;AAAA,YAAA,EAAA,CACxB;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/index35.js

@@ -1,31 +1,51 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as a } from "./index3.js";
-const n = {
-  sm: "h-4 w-4 border-2",
-  md: "h-6 w-6 border-2",
-  lg: "h-8 w-8 border-3"
-}, d = {
-  primary: "border-primary-500 border-t-transparent",
-  white: "border-white border-t-transparent",
-  current: "border-current border-t-transparent"
-};
-function l({ size: e = "md", color: o = "primary", className: t }) {
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      className: a(
-        "animate-spin rounded-full",
-        n[e],
-        d[o],
-        t
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { cn as d } from "./index3.js";
+const u = m(
+  ({ className: i, label: t, error: e, helperText: o, id: a, ...n }, c) => {
+    const r = a || (t == null ? void 0 : t.toLowerCase().replace(/\s+/g, "-"));
+    return /* @__PURE__ */ l("div", { className: "w-full", children: [
+      t && /* @__PURE__ */ s(
+        "label",
+        {
+          htmlFor: r,
+          className: "block text-sm font-medium text-slate-700 mb-1.5",
+          children: t
+        }
+      ),
+      /* @__PURE__ */ s(
+        "input",
+        {
+          ref: c,
+          id: r,
+          className: d(
+            "w-full px-4 py-2.5 text-base",
+            "bg-white border rounded-lg",
+            "transition-colors duration-200",
+            "placeholder:text-slate-400",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0",
+            e ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-slate-300 focus:border-primary-500 focus:ring-primary-500",
+            "disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed",
+            i
+          ),
+          ...n
+        }
       ),
-      role: "status",
-      "aria-label": "Loading",
-      children: /* @__PURE__ */ r("span", { className: "sr-only", children: "Loading..." })
-    }
-  );
-}
+      (e || o) && /* @__PURE__ */ s(
+        "p",
+        {
+          className: d(
+            "mt-1.5 text-sm",
+            e ? "text-red-600" : "text-slate-500"
+          ),
+          children: e || o
+        }
+      )
+    ] });
+  }
+);
+u.displayName = "Input";
 export {
-  l as Loader
+  u as Input
 };
 //# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -1 +1 @@
-{"version":3,"file":"index35.js","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\n\nexport interface LoaderProps {\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'primary' | 'white' | 'current'\n  className?: string\n}\n\nconst sizeStyles = {\n  sm: 'h-4 w-4 border-2',\n  md: 'h-6 w-6 border-2',\n  lg: 'h-8 w-8 border-3',\n}\n\nconst colorStyles = {\n  primary: 'border-primary-500 border-t-transparent',\n  white: 'border-white border-t-transparent',\n  current: 'border-current border-t-transparent',\n}\n\nexport function Loader({ size = 'md', color = 'primary', className }: LoaderProps) {\n  return (\n    <div\n      className={cn(\n        'animate-spin rounded-full',\n        sizeStyles[size],\n        colorStyles[color],\n        className\n      )}\n      role=\"status\"\n      aria-label=\"Loading\"\n    >\n      <span className=\"sr-only\">Loading...</span>\n    </div>\n  )\n}\n"],"names":["sizeStyles","colorStyles","Loader","size","color","className","jsx","cn"],"mappings":";;AAQA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAc;AAAA,EAClB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX;AAEO,SAASC,EAAO,EAAE,MAAAC,IAAO,MAAM,OAAAC,IAAQ,WAAW,WAAAC,KAA0B;AACjF,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAP,EAAWG,CAAI;AAAA,QACfF,EAAYG,CAAK;AAAA,QACjBC;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG1C;"}
+{"version":3,"file":"index35.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: string\n  error?: string\n  helperText?: string\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, label, error, helperText, id, ...props }, ref) => {\n    const inputId = id || label?.toLowerCase().replace(/\\s+/g, '-')\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"block text-sm font-medium text-slate-700 mb-1.5\"\n          >\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          className={cn(\n            'w-full px-4 py-2.5 text-base',\n            'bg-white border rounded-lg',\n            'transition-colors duration-200',\n            'placeholder:text-slate-400',\n            'focus:outline-none focus:ring-2 focus:ring-offset-0',\n            error\n              ? 'border-red-500 focus:border-red-500 focus:ring-red-500'\n              : 'border-slate-300 focus:border-primary-500 focus:ring-primary-500',\n            'disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed',\n            className\n          )}\n          {...props}\n        />\n        {(error || helperText) && (\n          <p\n            className={cn(\n              'mt-1.5 text-sm',\n              error ? 'text-red-600' : 'text-slate-500'\n            )}\n          >\n            {error || helperText}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","className","label","error","helperText","id","props","ref","inputId","jsxs","jsx","cn"],"mappings":";;;AASO,MAAMA,IAAQC;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,GAAO,YAAAC,GAAY,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AAC9D,UAAMC,IAAUH,MAAMH,KAAA,gBAAAA,EAAO,cAAc,QAAQ,QAAQ;AAE3D,WACE,gBAAAO,EAAC,OAAA,EAAI,WAAU,UACZ,UAAA;AAAA,MAAAP,KACC,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASF;AAAA,UACT,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAH;AAAA,UACA,IAAIC;AAAA,UACJ,WAAWG;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAR,IACI,2DACA;AAAA,YACJ;AAAA,YACAF;AAAA,UAAA;AAAA,UAED,GAAGK;AAAA,QAAA;AAAA,MAAA;AAAA,OAEJH,KAASC,MACT,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAR,IAAQ,iBAAiB;AAAA,UAAA;AAAA,UAG1B,UAAAA,KAASC;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAM,cAAc;"}