@axtec/components 0.1.7 → 0.1.10

package/dist/index28.js

@@ -1,81 +1,81 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useRef as h } from "react";
-import { cn as i } from "./index3.js";
-import { CloudArrowUpIcon as x, PlusIcon as v } from "@heroicons/react/24/outline";
-import { Button as y } from "./index17.js";
-const w = ({
-  onFilesSelected: u,
-  accept: s,
-  multiple: c = !0,
-  label: a = "Add document",
-  variant: p = "button",
-  disabled: t = !1,
-  className: m
-}) => {
-  const r = h(null), d = (o) => {
-    const n = o.target.files;
-    n && n.length > 0 && u(Array.from(n)), r.current && (r.current.value = "");
-  }, f = () => {
-    var o;
-    (o = r.current) == null || o.click();
-  };
-  return p === "dropzone" ? /* @__PURE__ */ l("div", { className: i("relative", m), children: [
-    /* @__PURE__ */ l(
-      "div",
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Fragment as l } from "react";
+import { Menu as d, MenuButton as m, Transition as f, MenuItems as p, MenuItem as h } from "@headlessui/react";
+import { ChevronDownIcon as g } from "@heroicons/react/20/solid";
+import { cn as o } from "./index3.js";
+function N({
+  trigger: r,
+  items: n,
+  align: i = "left",
+  className: c
+}) {
+  return /* @__PURE__ */ a(d, { as: "div", className: o("relative inline-block text-left", c), children: [
+    /* @__PURE__ */ t(m, { as: l, children: r }),
+    /* @__PURE__ */ t(
+      f,
       {
-        onClick: f,
-        className: i(
-          "flex flex-col items-center justify-center",
-          "border-2 border-dashed border-slate-300 rounded-lg",
-          "py-12 px-6 cursor-pointer",
-          "hover:border-primary-500 hover:bg-primary-50/50",
-          "transition-colors",
-          t && "opacity-50 cursor-not-allowed"
-        ),
-        children: [
-          /* @__PURE__ */ e(x, { className: "w-16 h-16 text-slate-400 mb-4" }),
-          /* @__PURE__ */ e("span", { className: "text-slate-600 font-medium", children: a }),
-          /* @__PURE__ */ e("span", { className: "text-sm text-slate-400 mt-1", children: "Click to browse files" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e(
-      "input",
-      {
-        ref: r,
-        type: "file",
-        accept: s,
-        multiple: c,
-        onChange: d,
-        disabled: t,
-        className: "hidden"
-      }
-    )
-  ] }) : /* @__PURE__ */ l("div", { className: i("relative inline-block", m), children: [
-    /* @__PURE__ */ e(
-      y,
-      {
-        onClick: f,
-        disabled: t,
-        leftIcon: /* @__PURE__ */ e(v, { className: "w-5 h-5" }),
-        children: a
-      }
-    ),
-    /* @__PURE__ */ e(
-      "input",
-      {
-        ref: r,
-        type: "file",
-        accept: s,
-        multiple: c,
-        onChange: d,
-        disabled: t,
-        className: "hidden"
+        as: l,
+        enter: "transition ease-out duration-100",
+        enterFrom: "transform opacity-0 scale-95",
+        enterTo: "transform opacity-100 scale-100",
+        leave: "transition ease-in duration-75",
+        leaveFrom: "transform opacity-100 scale-100",
+        leaveTo: "transform opacity-0 scale-95",
+        children: /* @__PURE__ */ t(
+          p,
+          {
+            className: o(
+              "absolute z-10 mt-2 w-56 origin-top-right",
+              "bg-white rounded-lg border border-slate-200 shadow-lg",
+              "py-1 focus:outline-none",
+              i === "right" ? "right-0" : "left-0"
+            ),
+            children: n.map((e) => /* @__PURE__ */ t(h, { disabled: e.disabled, children: ({ active: u, disabled: s }) => /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                onClick: e.onClick,
+                disabled: s,
+                className: o(
+                  "w-full flex items-center gap-2 px-4 py-2 text-sm text-left",
+                  "transition-colors duration-150",
+                  u && "bg-slate-50",
+                  s && "opacity-50 cursor-not-allowed",
+                  e.danger ? "text-red-600 hover:bg-red-50" : "text-slate-700"
+                ),
+                children: [
+                  e.icon && /* @__PURE__ */ t("span", { className: "flex-shrink-0 w-5 h-5", children: e.icon }),
+                  e.label
+                ]
+              }
+            ) }, e.key))
+          }
+        )
       }
     )
   ] });
-};
+}
+function k({ children: r, className: n }) {
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: o(
+        "inline-flex items-center gap-2 px-4 py-2",
+        "bg-white border border-slate-300 rounded-lg",
+        "text-sm font-medium text-slate-700",
+        "hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+        n
+      ),
+      children: [
+        r,
+        /* @__PURE__ */ t(g, { className: "h-5 w-5 text-slate-400" })
+      ]
+    }
+  );
+}
 export {
-  w as FileUploader
+  N as Dropdown,
+  k as DropdownButton
 };
 //# sourceMappingURL=index28.js.map

package/dist/index28.js.map

@@ -1 +1 @@
-{"version":3,"file":"index28.js","sources":["../src/components/FileUploader/FileUploader.tsx"],"sourcesContent":["import { useRef, type ChangeEvent } from 'react'\nimport { cn } from '@/lib/utils'\nimport { CloudArrowUpIcon, PlusIcon } from '@heroicons/react/24/outline'\nimport { Button } from '../Button/Button'\n\nexport interface FileUploaderProps {\n  onFilesSelected: (files: File[]) => void\n  accept?: string\n  multiple?: boolean\n  label?: string\n  variant?: 'button' | 'dropzone'\n  disabled?: boolean\n  className?: string\n}\n\nexport const FileUploader = ({\n  onFilesSelected,\n  accept,\n  multiple = true,\n  label = 'Add document',\n  variant = 'button',\n  disabled = false,\n  className,\n}: FileUploaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files\n    if (files && files.length > 0) {\n      onFilesSelected(Array.from(files))\n    }\n    // Reset input so the same file can be selected again\n    if (inputRef.current) {\n      inputRef.current.value = ''\n    }\n  }\n\n  const handleClick = () => {\n    inputRef.current?.click()\n  }\n\n  if (variant === 'dropzone') {\n    return (\n      <div className={cn('relative', className)}>\n        <div\n          onClick={handleClick}\n          className={cn(\n            'flex flex-col items-center justify-center',\n            'border-2 border-dashed border-slate-300 rounded-lg',\n            'py-12 px-6 cursor-pointer',\n            'hover:border-primary-500 hover:bg-primary-50/50',\n            'transition-colors',\n            disabled && 'opacity-50 cursor-not-allowed'\n          )}\n        >\n          <CloudArrowUpIcon className=\"w-16 h-16 text-slate-400 mb-4\" />\n          <span className=\"text-slate-600 font-medium\">{label}</span>\n          <span className=\"text-sm text-slate-400 mt-1\">\n            Click to browse files\n          </span>\n        </div>\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          onChange={handleChange}\n          disabled={disabled}\n          className=\"hidden\"\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('relative inline-block', className)}>\n      <Button\n        onClick={handleClick}\n        disabled={disabled}\n        leftIcon={<PlusIcon className=\"w-5 h-5\" />}\n      >\n        {label}\n      </Button>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        onChange={handleChange}\n        disabled={disabled}\n        className=\"hidden\"\n      />\n    </div>\n  )\n}\n"],"names":["FileUploader","onFilesSelected","accept","multiple","label","variant","disabled","className","inputRef","useRef","handleChange","e","files","handleClick","_a","cn","jsxs","jsx","CloudArrowUpIcon","Button","PlusIcon"],"mappings":";;;;;AAeO,MAAMA,IAAe,CAAC;AAAA,EAC3B,iBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,WAAAC;AACF,MAAyB;AACvB,QAAMC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAqC;AACzD,UAAMC,IAAQD,EAAE,OAAO;AACvB,IAAIC,KAASA,EAAM,SAAS,KAC1BX,EAAgB,MAAM,KAAKW,CAAK,CAAC,GAG/BJ,EAAS,YACXA,EAAS,QAAQ,QAAQ;AAAA,EAE7B,GAEMK,IAAc,MAAM;;AACxB,KAAAC,IAAAN,EAAS,YAAT,QAAAM,EAAkB;AAAA,EACpB;AAEA,SAAIT,MAAY,+BAEX,OAAA,EAAI,WAAWU,EAAG,YAAYR,CAAS,GACtC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASH;AAAA,QACT,WAAWE;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAT,KAAY;AAAA,QAAA;AAAA,QAGd,UAAA;AAAA,UAAA,gBAAAW,EAACC,GAAA,EAAiB,WAAU,gCAAA,CAAgC;AAAA,UAC5D,gBAAAD,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAb,GAAM;AAAA,UACpD,gBAAAa,EAAC,QAAA,EAAK,WAAU,+BAA8B,UAAA,wBAAA,CAE9C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,MAAK;AAAA,QACL,QAAAN;AAAA,QACA,UAAAC;AAAA,QACA,UAAUO;AAAA,QACV,UAAAJ;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF,sBAKD,OAAA,EAAI,WAAWS,EAAG,yBAAyBR,CAAS,GACnD,UAAA;AAAA,IAAA,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAASN;AAAA,QACT,UAAAP;AAAA,QACA,UAAU,gBAAAW,EAACG,GAAA,EAAS,WAAU,UAAA,CAAU;AAAA,QAEvC,UAAAhB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,MAAK;AAAA,QACL,QAAAN;AAAA,QACA,UAAAC;AAAA,QACA,UAAUO;AAAA,QACV,UAAAJ;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}
+{"version":3,"file":"index28.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from 'react'\nimport { Menu, MenuButton, MenuItems, MenuItem, Transition } from '@headlessui/react'\nimport { ChevronDownIcon } from '@heroicons/react/20/solid'\nimport { cn } from '@/lib/utils'\n\nexport interface DropdownItem {\n  key: string\n  label: ReactNode\n  onClick?: () => void\n  icon?: ReactNode\n  disabled?: boolean\n  danger?: boolean\n}\n\nexport interface DropdownProps {\n  trigger: ReactNode\n  items: DropdownItem[]\n  align?: 'left' | 'right'\n  className?: string\n}\n\nexport function Dropdown({\n  trigger,\n  items,\n  align = 'left',\n  className,\n}: DropdownProps) {\n  return (\n    <Menu as=\"div\" className={cn('relative inline-block text-left', className)}>\n      <MenuButton as={Fragment}>{trigger}</MenuButton>\n      <Transition\n        as={Fragment}\n        enter=\"transition ease-out duration-100\"\n        enterFrom=\"transform opacity-0 scale-95\"\n        enterTo=\"transform opacity-100 scale-100\"\n        leave=\"transition ease-in duration-75\"\n        leaveFrom=\"transform opacity-100 scale-100\"\n        leaveTo=\"transform opacity-0 scale-95\"\n      >\n        <MenuItems\n          className={cn(\n            'absolute z-10 mt-2 w-56 origin-top-right',\n            'bg-white rounded-lg border border-slate-200 shadow-lg',\n            'py-1 focus:outline-none',\n            align === 'right' ? 'right-0' : 'left-0'\n          )}\n        >\n          {items.map((item) => (\n            <MenuItem key={item.key} disabled={item.disabled}>\n              {({ active, disabled }) => (\n                <button\n                  type=\"button\"\n                  onClick={item.onClick}\n                  disabled={disabled}\n                  className={cn(\n                    'w-full flex items-center gap-2 px-4 py-2 text-sm text-left',\n                    'transition-colors duration-150',\n                    active && 'bg-slate-50',\n                    disabled && 'opacity-50 cursor-not-allowed',\n                    item.danger\n                      ? 'text-red-600 hover:bg-red-50'\n                      : 'text-slate-700'\n                  )}\n                >\n                  {item.icon && (\n                    <span className=\"flex-shrink-0 w-5 h-5\">{item.icon}</span>\n                  )}\n                  {item.label}\n                </button>\n              )}\n            </MenuItem>\n          ))}\n        </MenuItems>\n      </Transition>\n    </Menu>\n  )\n}\n\n// Convenience component for the default dropdown button trigger\nexport interface DropdownButtonProps {\n  children: ReactNode\n  className?: string\n}\n\nexport function DropdownButton({ children, className }: DropdownButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        'inline-flex items-center gap-2 px-4 py-2',\n        'bg-white border border-slate-300 rounded-lg',\n        'text-sm font-medium text-slate-700',\n        'hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',\n        className\n      )}\n    >\n      {children}\n      <ChevronDownIcon className=\"h-5 w-5 text-slate-400\" />\n    </button>\n  )\n}\n"],"names":["Dropdown","trigger","items","align","className","jsxs","Menu","cn","jsx","MenuButton","Fragment","Transition","MenuItems","item","MenuItem","active","disabled","DropdownButton","children","ChevronDownIcon"],"mappings":";;;;;AAqBO,SAASA,EAAS;AAAA,EACvB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC;AACF,GAAkB;AAChB,SACE,gBAAAC,EAACC,KAAK,IAAG,OAAM,WAAWC,EAAG,mCAAmCH,CAAS,GACvE,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAW,IAAIC,GAAW,UAAAT,GAAQ;AAAA,IACnC,gBAAAO;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,IAAID;AAAA,QACJ,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAQ;AAAA,QAER,UAAA,gBAAAF;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAJ,MAAU,UAAU,YAAY;AAAA,YAAA;AAAA,YAGjC,UAAAD,EAAM,IAAI,CAACW,MACV,gBAAAL,EAACM,GAAA,EAAwB,UAAUD,EAAK,UACrC,UAAA,CAAC,EAAE,QAAAE,GAAQ,UAAAC,QACV,gBAAAX;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAASQ,EAAK;AAAA,gBACd,UAAAG;AAAA,gBACA,WAAWT;AAAA,kBACT;AAAA,kBACA;AAAA,kBACAQ,KAAU;AAAA,kBACVC,KAAY;AAAA,kBACZH,EAAK,SACD,iCACA;AAAA,gBAAA;AAAA,gBAGL,UAAA;AAAA,kBAAAA,EAAK,QACJ,gBAAAL,EAAC,QAAA,EAAK,WAAU,yBAAyB,YAAK,MAAK;AAAA,kBAEpDK,EAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,EACR,GApBWA,EAAK,GAsBpB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAQO,SAASI,EAAe,EAAE,UAAAC,GAAU,WAAAd,KAAkC;AAC3E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAH;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAc;AAAA,QACD,gBAAAV,EAACW,GAAA,EAAgB,WAAU,yBAAA,CAAyB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1D;"}

package/dist/index29.js

@@ -1,36 +1,27 @@
-import { jsx as s } from "react/jsx-runtime";
-import { cn as a } from "./index3.js";
-const i = {
-  sm: "w-8 h-8",
-  md: "w-10 h-10",
-  lg: "w-12 h-12"
-}, l = {
-  default: "bg-transparent text-slate-700 hover:bg-slate-100 hover:text-slate-900",
-  primary: "bg-primary-500 text-white hover:bg-primary-600",
-  ghost: "bg-transparent text-slate-500 hover:text-slate-700"
-}, d = ({
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cn as x } from "./index3.js";
+const n = ({
+  message: s,
+  title: r = "There's Nothing Here!",
   icon: t,
-  size: e = "md",
-  variant: r = "default",
-  className: o,
-  ...n
-}) => /* @__PURE__ */ s(
-  "button",
+  fullBlock: m = !1,
+  className: l
+}) => /* @__PURE__ */ a(
+  "div",
   {
-    className: a(
-      "inline-flex items-center justify-center rounded-full",
-      "border-none cursor-pointer transition-colors duration-200",
-      "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
-      "disabled:opacity-50 disabled:cursor-not-allowed",
-      i[e],
-      l[r],
-      o
+    className: x(
+      "flex flex-col items-center justify-center py-12 px-6",
+      m && "min-h-[400px]",
+      l
     ),
-    ...n,
-    children: t
+    children: [
+      t && /* @__PURE__ */ e("div", { className: "w-16 h-16 text-primary-200 mb-4", children: t }),
+      /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-slate-400 mb-2", children: r }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-slate-400 text-center max-w-[75%]", children: s })
+    ]
   }
 );
 export {
-  d as IconButton
+  n as EmptyData
 };
 //# sourceMappingURL=index29.js.map

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.js","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { type ReactElement, type ButtonHTMLAttributes } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: ReactElement\n  size?: 'sm' | 'md' | 'lg'\n  variant?: 'default' | 'primary' | 'ghost'\n}\n\nconst sizeStyles = {\n  sm: 'w-8 h-8',\n  md: 'w-10 h-10',\n  lg: 'w-12 h-12',\n}\n\nconst variantStyles = {\n  default: 'bg-transparent text-slate-700 hover:bg-slate-100 hover:text-slate-900',\n  primary: 'bg-primary-500 text-white hover:bg-primary-600',\n  ghost: 'bg-transparent text-slate-500 hover:text-slate-700',\n}\n\nexport const IconButton = ({\n  icon,\n  size = 'md',\n  variant = 'default',\n  className,\n  ...props\n}: IconButtonProps) => {\n  return (\n    <button\n      className={cn(\n        'inline-flex items-center justify-center rounded-full',\n        'border-none cursor-pointer transition-colors duration-200',\n        'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',\n        'disabled:opacity-50 disabled:cursor-not-allowed',\n        sizeStyles[size],\n        variantStyles[variant],\n        className\n      )}\n      {...props}\n    >\n      {icon}\n    </button>\n  )\n}\n"],"names":["sizeStyles","variantStyles","IconButton","icon","size","variant","className","props","jsx","cn"],"mappings":";;AASA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAEaC,IAAa,CAAC;AAAA,EACzB,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAT,EAAWI,CAAI;AAAA,MACfH,EAAcI,CAAO;AAAA,MACrBC;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAAJ;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"index29.js","sources":["../src/components/EmptyData/EmptyData.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface EmptyDataProps {\n  message: string\n  title?: string\n  icon?: ReactNode\n  fullBlock?: boolean\n  className?: string\n}\n\nexport const EmptyData = ({\n  message,\n  title = \"There's Nothing Here!\",\n  icon,\n  fullBlock = false,\n  className,\n}: EmptyDataProps) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center py-12 px-6',\n        fullBlock && 'min-h-[400px]',\n        className\n      )}\n    >\n      {icon && (\n        <div className=\"w-16 h-16 text-primary-200 mb-4\">\n          {icon}\n        </div>\n      )}\n\n      <h3 className=\"text-lg font-semibold text-slate-400 mb-2\">\n        {title}\n      </h3>\n\n      <p className=\"text-sm text-slate-400 text-center max-w-[75%]\">\n        {message}\n      </p>\n    </div>\n  )\n}\n"],"names":["EmptyData","message","title","icon","fullBlock","className","jsxs","cn","jsx"],"mappings":";;AAWO,MAAMA,IAAY,CAAC;AAAA,EACxB,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH,KAAa;AAAA,MACbC;AAAA,IAAA;AAAA,IAGD,UAAA;AAAA,MAAAF,KACC,gBAAAK,EAAC,OAAA,EAAI,WAAU,mCACZ,UAAAL,GACH;AAAA,MAGF,gBAAAK,EAAC,MAAA,EAAG,WAAU,6CACX,UAAAN,GACH;AAAA,MAEA,gBAAAM,EAAC,KAAA,EAAE,WAAU,kDACV,UAAAP,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/index3.js

@@ -1,5 +1,5 @@
-import { clsx as o } from "./index75.js";
-import { twMerge as t } from "./index76.js";
+import { clsx as o } from "./index77.js";
+import { twMerge as t } from "./index78.js";
 function n(...r) {
   return t(o(r));
 }

package/dist/index30.js

@@ -1,95 +1,81 @@
-import { jsxs as r, Fragment as b, jsx as e } from "react/jsx-runtime";
-import { useState as c } from "react";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useRef as h } 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
+import { CloudArrowUpIcon as x, PlusIcon as v } from "@heroicons/react/24/outline";
+import { Button as y } from "./index19.js";
+const w = ({
+  onFilesSelected: u,
+  accept: s,
+  multiple: c = !0,
+  label: a = "Add document",
+  variant: p = "button",
+  disabled: t = !1,
+  className: m
 }) => {
-  const [a, v] = c(!1), [g, l] = c(!1), n = a ? f : m, x = () => {
-    v(!0);
-  }, N = () => {
-    t && !a && l(!0);
+  const r = h(null), d = (o) => {
+    const n = o.target.files;
+    n && n.length > 0 && u(Array.from(n)), r.current && (r.current.value = "");
+  }, f = () => {
+    var o;
+    (o = r.current) == null || o.click();
   };
-  return /* @__PURE__ */ r(b, { children: [
-    /* @__PURE__ */ r(
+  return p === "dropzone" ? /* @__PURE__ */ l("div", { className: i("relative", m), children: [
+    /* @__PURE__ */ l(
       "div",
       {
+        onClick: f,
         className: i(
-          "relative overflow-hidden",
-          k[u],
-          t && !a && "cursor-pointer",
-          d
+          "flex flex-col items-center justify-center",
+          "border-2 border-dashed border-slate-300 rounded-lg",
+          "py-12 px-6 cursor-pointer",
+          "hover:border-primary-500 hover:bg-primary-50/50",
+          "transition-colors",
+          t && "opacity-50 cursor-not-allowed"
         ),
-        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__ */ e(x, { className: "w-16 h-16 text-slate-400 mb-4" }),
+          /* @__PURE__ */ e("span", { className: "text-slate-600 font-medium", children: a }),
+          /* @__PURE__ */ e("span", { className: "text-sm text-slate-400 mt-1", children: "Click to browse files" })
         ]
       }
     ),
-    /* @__PURE__ */ r(
-      w,
+    /* @__PURE__ */ e(
+      "input",
       {
-        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",
-              {
-                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(
-              "img",
-              {
-                src: n,
-                alt: o,
-                className: "max-w-full max-h-full object-contain"
-              }
-            )
-          ] }) })
-        ]
+        ref: r,
+        type: "file",
+        accept: s,
+        multiple: c,
+        onChange: d,
+        disabled: t,
+        className: "hidden"
+      }
+    )
+  ] }) : /* @__PURE__ */ l("div", { className: i("relative inline-block", m), children: [
+    /* @__PURE__ */ e(
+      y,
+      {
+        onClick: f,
+        disabled: t,
+        leftIcon: /* @__PURE__ */ e(v, { className: "w-5 h-5" }),
+        children: a
+      }
+    ),
+    /* @__PURE__ */ e(
+      "input",
+      {
+        ref: r,
+        type: "file",
+        accept: s,
+        multiple: c,
+        onChange: d,
+        disabled: t,
+        className: "hidden"
       }
     )
   ] });
 };
 export {
-  O as Image
+  w as FileUploader
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.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;"}
+{"version":3,"file":"index30.js","sources":["../src/components/FileUploader/FileUploader.tsx"],"sourcesContent":["import { useRef, type ChangeEvent } from 'react'\nimport { cn } from '@/lib/utils'\nimport { CloudArrowUpIcon, PlusIcon } from '@heroicons/react/24/outline'\nimport { Button } from '../Button/Button'\n\nexport interface FileUploaderProps {\n  onFilesSelected: (files: File[]) => void\n  accept?: string\n  multiple?: boolean\n  label?: string\n  variant?: 'button' | 'dropzone'\n  disabled?: boolean\n  className?: string\n}\n\nexport const FileUploader = ({\n  onFilesSelected,\n  accept,\n  multiple = true,\n  label = 'Add document',\n  variant = 'button',\n  disabled = false,\n  className,\n}: FileUploaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files\n    if (files && files.length > 0) {\n      onFilesSelected(Array.from(files))\n    }\n    // Reset input so the same file can be selected again\n    if (inputRef.current) {\n      inputRef.current.value = ''\n    }\n  }\n\n  const handleClick = () => {\n    inputRef.current?.click()\n  }\n\n  if (variant === 'dropzone') {\n    return (\n      <div className={cn('relative', className)}>\n        <div\n          onClick={handleClick}\n          className={cn(\n            'flex flex-col items-center justify-center',\n            'border-2 border-dashed border-slate-300 rounded-lg',\n            'py-12 px-6 cursor-pointer',\n            'hover:border-primary-500 hover:bg-primary-50/50',\n            'transition-colors',\n            disabled && 'opacity-50 cursor-not-allowed'\n          )}\n        >\n          <CloudArrowUpIcon className=\"w-16 h-16 text-slate-400 mb-4\" />\n          <span className=\"text-slate-600 font-medium\">{label}</span>\n          <span className=\"text-sm text-slate-400 mt-1\">\n            Click to browse files\n          </span>\n        </div>\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          onChange={handleChange}\n          disabled={disabled}\n          className=\"hidden\"\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('relative inline-block', className)}>\n      <Button\n        onClick={handleClick}\n        disabled={disabled}\n        leftIcon={<PlusIcon className=\"w-5 h-5\" />}\n      >\n        {label}\n      </Button>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        onChange={handleChange}\n        disabled={disabled}\n        className=\"hidden\"\n      />\n    </div>\n  )\n}\n"],"names":["FileUploader","onFilesSelected","accept","multiple","label","variant","disabled","className","inputRef","useRef","handleChange","e","files","handleClick","_a","cn","jsxs","jsx","CloudArrowUpIcon","Button","PlusIcon"],"mappings":";;;;;AAeO,MAAMA,IAAe,CAAC;AAAA,EAC3B,iBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,WAAAC;AACF,MAAyB;AACvB,QAAMC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAqC;AACzD,UAAMC,IAAQD,EAAE,OAAO;AACvB,IAAIC,KAASA,EAAM,SAAS,KAC1BX,EAAgB,MAAM,KAAKW,CAAK,CAAC,GAG/BJ,EAAS,YACXA,EAAS,QAAQ,QAAQ;AAAA,EAE7B,GAEMK,IAAc,MAAM;;AACxB,KAAAC,IAAAN,EAAS,YAAT,QAAAM,EAAkB;AAAA,EACpB;AAEA,SAAIT,MAAY,+BAEX,OAAA,EAAI,WAAWU,EAAG,YAAYR,CAAS,GACtC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASH;AAAA,QACT,WAAWE;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAT,KAAY;AAAA,QAAA;AAAA,QAGd,UAAA;AAAA,UAAA,gBAAAW,EAACC,GAAA,EAAiB,WAAU,gCAAA,CAAgC;AAAA,UAC5D,gBAAAD,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAb,GAAM;AAAA,UACpD,gBAAAa,EAAC,QAAA,EAAK,WAAU,+BAA8B,UAAA,wBAAA,CAE9C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,MAAK;AAAA,QACL,QAAAN;AAAA,QACA,UAAAC;AAAA,QACA,UAAUO;AAAA,QACV,UAAAJ;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF,sBAKD,OAAA,EAAI,WAAWS,EAAG,yBAAyBR,CAAS,GACnD,UAAA;AAAA,IAAA,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAASN;AAAA,QACT,UAAAP;AAAA,QACA,UAAU,gBAAAW,EAACG,GAAA,EAAS,WAAU,UAAA,CAAU;AAAA,QAEvC,UAAAhB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,MAAK;AAAA,QACL,QAAAN;AAAA,QACA,UAAAC;AAAA,QACA,UAAUO;AAAA,QACV,UAAAJ;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}

package/dist/index31.js

@@ -1,63 +1,36 @@
-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"
-      ),
-      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
+import { jsx as s } from "react/jsx-runtime";
+import { cn as a } from "./index3.js";
+const i = {
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-12 h-12"
+}, l = {
+  default: "bg-transparent text-slate-700 hover:bg-slate-100 hover:text-slate-900",
+  primary: "bg-primary-500 text-white hover:bg-primary-600",
+  ghost: "bg-transparent text-slate-500 hover:text-slate-700"
+}, d = ({
+  icon: t,
+  size: e = "md",
+  variant: r = "default",
+  className: o,
+  ...n
 }) => /* @__PURE__ */ s(
-  "ul",
+  "button",
   {
-    className: i(
-      "list-none m-0 p-0 grid",
-      d[n],
-      t
+    className: a(
+      "inline-flex items-center justify-center rounded-full",
+      "border-none cursor-pointer transition-colors duration-200",
+      "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+      "disabled:opacity-50 disabled:cursor-not-allowed",
+      i[e],
+      l[r],
+      o
     ),
-    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
-    ))
+    ...n,
+    children: t
   }
 );
 export {
-  u as ImageGrid
+  d as IconButton
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.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;"}
+{"version":3,"file":"index31.js","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { type ReactElement, type ButtonHTMLAttributes } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: ReactElement\n  size?: 'sm' | 'md' | 'lg'\n  variant?: 'default' | 'primary' | 'ghost'\n}\n\nconst sizeStyles = {\n  sm: 'w-8 h-8',\n  md: 'w-10 h-10',\n  lg: 'w-12 h-12',\n}\n\nconst variantStyles = {\n  default: 'bg-transparent text-slate-700 hover:bg-slate-100 hover:text-slate-900',\n  primary: 'bg-primary-500 text-white hover:bg-primary-600',\n  ghost: 'bg-transparent text-slate-500 hover:text-slate-700',\n}\n\nexport const IconButton = ({\n  icon,\n  size = 'md',\n  variant = 'default',\n  className,\n  ...props\n}: IconButtonProps) => {\n  return (\n    <button\n      className={cn(\n        'inline-flex items-center justify-center rounded-full',\n        'border-none cursor-pointer transition-colors duration-200',\n        'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',\n        'disabled:opacity-50 disabled:cursor-not-allowed',\n        sizeStyles[size],\n        variantStyles[variant],\n        className\n      )}\n      {...props}\n    >\n      {icon}\n    </button>\n  )\n}\n"],"names":["sizeStyles","variantStyles","IconButton","icon","size","variant","className","props","jsx","cn"],"mappings":";;AASA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAEaC,IAAa,CAAC;AAAA,EACzB,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAT,EAAWI,CAAI;AAAA,MACfH,EAAcI,CAAO;AAAA,MACrBC;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAAJ;AAAA,EAAA;AAAA;"}