@axtec/components 0.1.7 → 0.1.10

package/dist/index9.js

@@ -1,97 +1,80 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { Fragment as s } from "react";
-import { Transition as h, Dialog as p, TransitionChild as o, DialogPanel as v, DialogTitle as C } from "@headlessui/react";
-import { InformationCircleIcon as y, ExclamationTriangleIcon as N, XCircleIcon as T, CheckCircleIcon as w } from "@heroicons/react/24/outline";
-import { cn as i } from "./index3.js";
-import { Button as I } from "./index17.js";
-const F = {
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { cn as e } from "./index3.js";
+import { InformationCircleIcon as m, ExclamationTriangleIcon as d, ExclamationCircleIcon as x, CheckCircleIcon as b, XMarkIcon as f } from "@heroicons/react/20/solid";
+const g = {
   success: {
-    icon: w,
-    iconClass: "text-green-600",
-    bgClass: "bg-green-100"
+    container: "bg-green-50 border-green-200",
+    icon: "text-green-500",
+    title: "text-green-800",
+    content: "text-green-700"
   },
   error: {
-    icon: T,
-    iconClass: "text-red-600",
-    bgClass: "bg-red-100"
+    container: "bg-red-50 border-red-200",
+    icon: "text-red-500",
+    title: "text-red-800",
+    content: "text-red-700"
   },
   warning: {
-    icon: N,
-    iconClass: "text-amber-600",
-    bgClass: "bg-amber-100"
+    container: "bg-yellow-50 border-yellow-200",
+    icon: "text-yellow-500",
+    title: "text-yellow-800",
+    content: "text-yellow-700"
   },
   info: {
-    icon: y,
-    iconClass: "text-blue-600",
-    bgClass: "bg-blue-100"
+    container: "bg-blue-50 border-blue-200",
+    icon: "text-blue-500",
+    title: "text-blue-800",
+    content: "text-blue-700"
   }
+}, u = {
+  success: b,
+  error: x,
+  warning: d,
+  info: m
 };
-function B({
-  open: m,
-  onClose: l,
-  title: d,
-  message: n,
-  htmlMessage: c,
-  variant: x = "success",
-  confirmText: u = "OK",
-  onConfirm: t,
-  className: b
+function y({
+  variant: c = "info",
+  title: o,
+  children: l,
+  onClose: i,
+  className: s
 }) {
-  const a = F[x], g = a.icon, f = () => {
-    t == null || t(), l();
-  };
-  return /* @__PURE__ */ e(h, { show: m, as: s, children: /* @__PURE__ */ r(p, { onClose: l, className: "relative z-50", children: [
-    /* @__PURE__ */ e(
-      o,
-      {
-        as: s,
-        enter: "ease-out duration-300",
-        enterFrom: "opacity-0",
-        enterTo: "opacity-100",
-        leave: "ease-in duration-200",
-        leaveFrom: "opacity-100",
-        leaveTo: "opacity-0",
-        children: /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50", "aria-hidden": "true" })
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ e(
-      o,
-      {
-        as: s,
-        enter: "ease-out duration-300",
-        enterFrom: "opacity-0 scale-95",
-        enterTo: "opacity-100 scale-100",
-        leave: "ease-in duration-200",
-        leaveFrom: "opacity-100 scale-100",
-        leaveTo: "opacity-0 scale-95",
-        children: /* @__PURE__ */ r(
-          v,
+  const n = g[c], a = u[c];
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: e(
+        "flex gap-3 p-4 rounded-lg border",
+        n.container,
+        s
+      ),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ t(a, { className: e("h-5 w-5 flex-shrink-0 mt-0.5", n.icon) }),
+        /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: [
+          o && /* @__PURE__ */ t("h3", { className: e("text-sm font-semibold", n.title), children: o }),
+          l && /* @__PURE__ */ t("div", { className: e("text-sm", n.content, o && "mt-1"), children: l })
+        ] }),
+        i && /* @__PURE__ */ r(
+          "button",
           {
-            className: i(
-              "w-full max-w-sm bg-white rounded-2xl shadow-xl p-6",
-              "transform transition-all",
-              b
+            type: "button",
+            onClick: i,
+            className: e(
+              "flex-shrink-0 p-1 rounded-lg transition-colors duration-200",
+              "hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500"
             ),
             children: [
-              /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ e("div", { className: i("rounded-full p-3", a.bgClass), children: /* @__PURE__ */ e(g, { className: i("h-8 w-8", a.iconClass) }) }) }),
-              /* @__PURE__ */ e(C, { className: "text-lg font-semibold text-slate-900 text-center mb-2", children: d }),
-              n && /* @__PURE__ */ e("p", { className: "text-sm text-slate-600 text-center mb-6", children: n }),
-              c && /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "text-sm text-slate-600 text-center mb-6",
-                  dangerouslySetInnerHTML: { __html: c }
-                }
-              ),
-              /* @__PURE__ */ e(I, { onClick: f, className: "w-full", children: u })
+              /* @__PURE__ */ t(f, { className: e("h-5 w-5", n.icon) }),
+              /* @__PURE__ */ t("span", { className: "sr-only", children: "Dismiss" })
             ]
           }
         )
-      }
-    ) })
-  ] }) });
+      ]
+    }
+  );
 }
 export {
-  B as AlertModal
+  y as Alert
 };
 //# sourceMappingURL=index9.js.map

package/dist/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","sources":["../src/components/AlertModal/AlertModal.tsx"],"sourcesContent":["import { Fragment } from 'react'\nimport {\n  Dialog,\n  DialogPanel,\n  DialogTitle,\n  Transition,\n  TransitionChild,\n} from '@headlessui/react'\nimport {\n  CheckCircleIcon,\n  ExclamationTriangleIcon,\n  XCircleIcon,\n  InformationCircleIcon,\n} from '@heroicons/react/24/outline'\nimport { cn } from '@/lib/utils'\nimport { Button } from '../Button/Button'\n\nexport type AlertModalVariant = 'success' | 'error' | 'warning' | 'info'\n\nexport interface AlertModalProps {\n  open: boolean\n  onClose: () => void\n  title: string\n  message?: string\n  /** HTML content (use with caution) */\n  htmlMessage?: string\n  variant?: AlertModalVariant\n  confirmText?: string\n  onConfirm?: () => void\n  className?: string\n}\n\nconst variantConfig: Record<\n  AlertModalVariant,\n  { icon: typeof CheckCircleIcon; iconClass: string; bgClass: string }\n> = {\n  success: {\n    icon: CheckCircleIcon,\n    iconClass: 'text-green-600',\n    bgClass: 'bg-green-100',\n  },\n  error: {\n    icon: XCircleIcon,\n    iconClass: 'text-red-600',\n    bgClass: 'bg-red-100',\n  },\n  warning: {\n    icon: ExclamationTriangleIcon,\n    iconClass: 'text-amber-600',\n    bgClass: 'bg-amber-100',\n  },\n  info: {\n    icon: InformationCircleIcon,\n    iconClass: 'text-blue-600',\n    bgClass: 'bg-blue-100',\n  },\n}\n\nexport function AlertModal({\n  open,\n  onClose,\n  title,\n  message,\n  htmlMessage,\n  variant = 'success',\n  confirmText = 'OK',\n  onConfirm,\n  className,\n}: AlertModalProps) {\n  const config = variantConfig[variant]\n  const Icon = config.icon\n\n  const handleConfirm = () => {\n    onConfirm?.()\n    onClose()\n  }\n\n  return (\n    <Transition show={open} as={Fragment}>\n      <Dialog onClose={onClose} className=\"relative z-50\">\n        {/* Backdrop */}\n        <TransitionChild\n          as={Fragment}\n          enter=\"ease-out duration-300\"\n          enterFrom=\"opacity-0\"\n          enterTo=\"opacity-100\"\n          leave=\"ease-in duration-200\"\n          leaveFrom=\"opacity-100\"\n          leaveTo=\"opacity-0\"\n        >\n          <div className=\"fixed inset-0 bg-black/50\" aria-hidden=\"true\" />\n        </TransitionChild>\n\n        {/* Modal */}\n        <div className=\"fixed inset-0 flex items-center justify-center p-4\">\n          <TransitionChild\n            as={Fragment}\n            enter=\"ease-out duration-300\"\n            enterFrom=\"opacity-0 scale-95\"\n            enterTo=\"opacity-100 scale-100\"\n            leave=\"ease-in duration-200\"\n            leaveFrom=\"opacity-100 scale-100\"\n            leaveTo=\"opacity-0 scale-95\"\n          >\n            <DialogPanel\n              className={cn(\n                'w-full max-w-sm bg-white rounded-2xl shadow-xl p-6',\n                'transform transition-all',\n                className\n              )}\n            >\n              {/* Icon */}\n              <div className=\"flex justify-center mb-4\">\n                <div className={cn('rounded-full p-3', config.bgClass)}>\n                  <Icon className={cn('h-8 w-8', config.iconClass)} />\n                </div>\n              </div>\n\n              {/* Title */}\n              <DialogTitle className=\"text-lg font-semibold text-slate-900 text-center mb-2\">\n                {title}\n              </DialogTitle>\n\n              {/* Message */}\n              {message && (\n                <p className=\"text-sm text-slate-600 text-center mb-6\">\n                  {message}\n                </p>\n              )}\n              {htmlMessage && (\n                <div\n                  className=\"text-sm text-slate-600 text-center mb-6\"\n                  dangerouslySetInnerHTML={{ __html: htmlMessage }}\n                />\n              )}\n\n              {/* Button */}\n              <Button onClick={handleConfirm} className=\"w-full\">\n                {confirmText}\n              </Button>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </Dialog>\n    </Transition>\n  )\n}\n"],"names":["variantConfig","CheckCircleIcon","XCircleIcon","ExclamationTriangleIcon","InformationCircleIcon","AlertModal","open","onClose","title","message","htmlMessage","variant","confirmText","onConfirm","className","config","Icon","handleConfirm","jsx","Transition","Fragment","jsxs","Dialog","TransitionChild","DialogPanel","cn","DialogTitle","Button"],"mappings":";;;;;;AAgCA,MAAMA,IAGF;AAAA,EACF,SAAS;AAAA,IACP,MAAMC;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,MAAMC;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,MAAMC;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAMC;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAEb;AAEO,SAASC,EAAW;AAAA,EACzB,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AACF,GAAoB;AAClB,QAAMC,IAASf,EAAcW,CAAO,GAC9BK,IAAOD,EAAO,MAEdE,IAAgB,MAAM;AAC1B,IAAAJ,KAAA,QAAAA,KACAN,EAAA;AAAA,EACF;AAEA,SACE,gBAAAW,EAACC,GAAA,EAAW,MAAMb,GAAM,IAAIc,GAC1B,UAAA,gBAAAC,EAACC,GAAA,EAAO,SAAAf,GAAkB,WAAU,iBAElC,UAAA;AAAA,IAAA,gBAAAW;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,IAAIH;AAAA,QACJ,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAQ;AAAA,QAER,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,6BAA4B,eAAY,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAIhE,gBAAAA,EAAC,OAAA,EAAI,WAAU,sDACb,UAAA,gBAAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,IAAIH;AAAA,QACJ,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAQ;AAAA,QAER,UAAA,gBAAAC;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACAX;AAAA,YAAA;AAAA,YAIF,UAAA;AAAA,cAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA,gBAAAA,EAAC,SAAI,WAAWO,EAAG,oBAAoBV,EAAO,OAAO,GACnD,UAAA,gBAAAG,EAACF,GAAA,EAAK,WAAWS,EAAG,WAAWV,EAAO,SAAS,GAAG,GACpD,EAAA,CACF;AAAA,cAGA,gBAAAG,EAACQ,GAAA,EAAY,WAAU,yDACpB,UAAAlB,GACH;AAAA,cAGCC,KACC,gBAAAS,EAAC,KAAA,EAAE,WAAU,2CACV,UAAAT,GACH;AAAA,cAEDC,KACC,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,yBAAyB,EAAE,QAAQR,EAAA;AAAA,gBAAY;AAAA,cAAA;AAAA,gCAKlDiB,GAAA,EAAO,SAASV,GAAe,WAAU,UACvC,UAAAL,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"index9.js","sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport {\n  CheckCircleIcon,\n  ExclamationCircleIcon,\n  ExclamationTriangleIcon,\n  InformationCircleIcon,\n  XMarkIcon,\n} from '@heroicons/react/20/solid'\nimport type { ReactNode } from 'react'\n\nexport interface AlertProps {\n  variant?: 'success' | 'error' | 'warning' | 'info'\n  title?: string\n  children?: ReactNode\n  onClose?: () => void\n  className?: string\n}\n\nconst variantStyles = {\n  success: {\n    container: 'bg-green-50 border-green-200',\n    icon: 'text-green-500',\n    title: 'text-green-800',\n    content: 'text-green-700',\n  },\n  error: {\n    container: 'bg-red-50 border-red-200',\n    icon: 'text-red-500',\n    title: 'text-red-800',\n    content: 'text-red-700',\n  },\n  warning: {\n    container: 'bg-yellow-50 border-yellow-200',\n    icon: 'text-yellow-500',\n    title: 'text-yellow-800',\n    content: 'text-yellow-700',\n  },\n  info: {\n    container: 'bg-blue-50 border-blue-200',\n    icon: 'text-blue-500',\n    title: 'text-blue-800',\n    content: 'text-blue-700',\n  },\n}\n\nconst icons = {\n  success: CheckCircleIcon,\n  error: ExclamationCircleIcon,\n  warning: ExclamationTriangleIcon,\n  info: InformationCircleIcon,\n}\n\nexport function Alert({\n  variant = 'info',\n  title,\n  children,\n  onClose,\n  className,\n}: AlertProps) {\n  const styles = variantStyles[variant]\n  const Icon = icons[variant]\n\n  return (\n    <div\n      className={cn(\n        'flex gap-3 p-4 rounded-lg border',\n        styles.container,\n        className\n      )}\n      role=\"alert\"\n    >\n      <Icon className={cn('h-5 w-5 flex-shrink-0 mt-0.5', styles.icon)} />\n      <div className=\"flex-1 min-w-0\">\n        {title && (\n          <h3 className={cn('text-sm font-semibold', styles.title)}>{title}</h3>\n        )}\n        {children && (\n          <div className={cn('text-sm', styles.content, title && 'mt-1')}>\n            {children}\n          </div>\n        )}\n      </div>\n      {onClose && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className={cn(\n            'flex-shrink-0 p-1 rounded-lg transition-colors duration-200',\n            'hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500'\n          )}\n        >\n          <XMarkIcon className={cn('h-5 w-5', styles.icon)} />\n          <span className=\"sr-only\">Dismiss</span>\n        </button>\n      )}\n    </div>\n  )\n}\n"],"names":["variantStyles","icons","CheckCircleIcon","ExclamationCircleIcon","ExclamationTriangleIcon","InformationCircleIcon","Alert","variant","title","children","onClose","className","styles","Icon","jsxs","cn","jsx","XMarkIcon"],"mappings":";;;AAkBA,MAAMA,IAAgB;AAAA,EACpB,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb,GAEMC,IAAQ;AAAA,EACZ,SAASC;AAAA,EACT,OAAOC;AAAA,EACP,SAASC;AAAA,EACT,MAAMC;AACR;AAEO,SAASC,EAAM;AAAA,EACpB,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAe;AACb,QAAMC,IAASZ,EAAcO,CAAO,GAC9BM,IAAOZ,EAAMM,CAAO;AAE1B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH,EAAO;AAAA,QACPD;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAK,EAACH,KAAK,WAAWE,EAAG,gCAAgCH,EAAO,IAAI,GAAG;AAAA,QAClE,gBAAAE,EAAC,OAAA,EAAI,WAAU,kBACZ,UAAA;AAAA,UAAAN,KACC,gBAAAQ,EAAC,QAAG,WAAWD,EAAG,yBAAyBH,EAAO,KAAK,GAAI,UAAAJ,EAAA,CAAM;AAAA,UAElEC,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAG,WAAWH,EAAO,SAASJ,KAAS,MAAM,GAC1D,UAAAC,EAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACCC,KACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASJ;AAAA,YACT,WAAWK;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAA,gBAAAC,EAACC,KAAU,WAAWF,EAAG,WAAWH,EAAO,IAAI,GAAG;AAAA,cAClD,gBAAAI,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,UAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axtec/components",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",