@alexandregme/zljs 0.5.0 → 1.0.0

package/dist/index.d.ts

@@ -18,9 +18,9 @@ type DataColor = "blue" | "red" | "yellow" | "green" | "gray" | "orange";
 /**
  * Sizes shared by every sized component (Icon, Button, Input, etc.)
  */
-type Size = "sm" | "md";
+type Size = "sm" | "md" | "lg";
 
-declare const iconNames: readonly ["Check", "X", "Plus", "Minus", "Search", "Menu", "ChevronDown", "ChevronUp", "ChevronLeft", "ChevronRight", "Pencil", "Trash2", "Save", "RefreshCw", "Home", "MessageSquare", "Users", "Store", "ShoppingCart", "BarChart3", "Brain", "Send", "LogOut", "User", "Key", "Contact", "Package", "Warehouse", "HandCoins", "Stethoscope", "LogIn", "Megaphone", "LayoutDashboard", "Smile", "Frown", "Cat", "ArrowRight", "Loader", "CheckCircle", "XCircle", "AlertTriangle", "Info", "SiWhatsapp", "SiFacebook", "SiInstagram", "SiShopify"];
+declare const iconNames: readonly ["Check", "X", "Plus", "Minus", "Search", "Menu", "ChevronDown", "ChevronUp", "ChevronLeft", "ChevronRight", "Pencil", "Trash2", "Save", "RefreshCw", "Home", "MessageSquare", "Users", "Store", "ShoppingCart", "BarChart3", "Brain", "Send", "LogOut", "User", "Key", "Contact", "Package", "Warehouse", "HandCoins", "Stethoscope", "LogIn", "Megaphone", "LayoutDashboard", "Smile", "Frown", "Cat", "ArrowRight", "Loader", "LoaderCircle", "CheckCircle", "XCircle", "AlertTriangle", "Info", "SiWhatsapp", "SiFacebook", "SiInstagram", "SiShopify"];
 
 type IconName = (typeof iconNames)[number];
 interface IconProps {
@@ -28,12 +28,13 @@ interface IconProps {
     size?: Size;
 }
 
-type ButtonVariant = "default" | "icon" | "ghost" | "link";
+type ButtonVariant = "default" | "icon" | "link";
+type ButtonColor = SemanticColor | "ghost";
 interface ButtonProps {
     children?: ReactNode;
     type?: "button" | "submit" | "reset";
     variant?: ButtonVariant;
-    color?: SemanticColor;
+    color?: ButtonColor;
     size?: Size;
     icon?: IconName;
     iconPosition?: "left" | "right";
@@ -400,11 +401,13 @@ interface ConnectedModalProps {
 
 declare const ConnectedModal: ({ modalId, title, description, size, children, }: ConnectedModalProps) => react.JSX.Element;
 
+type SpinnerVariant = "circle" | "dots" | "refresh";
 interface SpinnerProps {
-    className?: string;
+    variant?: SpinnerVariant;
+    size?: Size;
 }
 
-declare const Spinner: ({ className }: SpinnerProps) => react.JSX.Element;
+declare const Spinner: ({ variant, size }: SpinnerProps) => react.JSX.Element;
 
 interface LoaderProps {
     label?: string;
@@ -453,4 +456,4 @@ declare class HTTPClient {
 }
 
 export { AppWrapper, Button, Checkbox, ConnectedModal, DataGrid, DocumentWrapper, Error, Form, GlobalState, HTTPClient, Heading, Icon, Input, Loader, Modal, PageWrapper, Radio, Select, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
-export type { AppState, AppWrapperProps, ButtonProps, ButtonVariant, CheckboxProps, ConnectedModalProps, DataGridColumn, DataGridProps, DocumentWrapperProps, ErrorProps, ExtendedStore, FormProps, GlobalStateProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, InitPageFunction, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, PageWrapperProps, RadioProps, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, SpinnerProps, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };
+export type { AppState, AppWrapperProps, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, ConnectedModalProps, DataGridColumn, DataGridProps, DocumentWrapperProps, ErrorProps, ExtendedStore, FormProps, GlobalStateProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, InitPageFunction, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, PageWrapperProps, RadioProps, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };

package/dist/index.js

@@ -19,7 +19,8 @@ var iconBrands = {
 };
 var iconSizes = {
   sm: 12,
-  md: 16
+  md: 16,
+  lg: 24
 };
 
 // core/icon/icon.tsx
@@ -39,8 +40,7 @@ var button = tv({
     variant: {
       default: "px-4 py-2 text-white text-sm gap-2 rounded-md focus:ring-2 focus:ring-offset-2",
       icon: "p-1 bg-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:ring-gray-500 rounded-md focus:ring-2 focus:ring-offset-2",
-      ghost: "px-3 py-2 gap-3 text-sm bg-transparent text-neutral-400 hover:text-white hover:bg-neutral-800 rounded-md focus-visible:ring-2 focus-visible:ring-neutral-600",
-      link: "text-xs underline bg-transparent hover:no-underline"
+      link: "text-xs hover:underline"
     },
     color: {
       primary: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500",
@@ -48,14 +48,21 @@ var button = tv({
       danger: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
       warning: "bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500 text-gray-900",
       info: "bg-cyan-500 hover:bg-cyan-600 focus:ring-cyan-500",
+      ghost: "bg-transparent text-neutral-400 hover:text-white hover:bg-neutral-800 focus:ring-neutral-600",
       none: ""
     },
     size: {
       sm: "",
-      md: ""
+      md: "",
+      lg: ""
     }
   },
   compoundVariants: [
+    {
+      variant: "default",
+      color: "none",
+      class: "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500"
+    },
     {
       variant: "default",
       size: "sm",
@@ -66,20 +73,54 @@ var button = tv({
       size: "sm",
       class: "p-0.5"
     },
+    {
+      variant: "default",
+      size: "lg",
+      class: "px-6 py-3 text-base gap-2"
+    },
+    {
+      variant: "icon",
+      size: "lg",
+      class: "p-2"
+    },
     {
       variant: "link",
       color: "primary",
-      class: "bg-transparent text-blue-600 hover:text-blue-800"
+      class: "text-blue-600 hover:text-blue-800"
+    },
+    {
+      variant: "link",
+      color: "success",
+      class: "text-green-600 hover:text-green-800"
     },
     {
       variant: "link",
       color: "danger",
-      class: "bg-transparent text-red-600 hover:text-red-800"
+      class: "text-red-600 hover:text-red-800"
+    },
+    {
+      variant: "link",
+      color: "warning",
+      class: "text-yellow-600 hover:text-yellow-800"
+    },
+    {
+      variant: "link",
+      color: "info",
+      class: "text-cyan-600 hover:text-cyan-800"
+    },
+    {
+      variant: "link",
+      color: "ghost",
+      class: "text-neutral-400 hover:text-neutral-600"
     },
     {
       variant: "link",
       color: "none",
       class: "text-slate-500 hover:text-slate-700"
+    },
+    {
+      variant: "link",
+      class: "bg-transparent hover:bg-transparent"
     }
   ],
   defaultVariants: {
@@ -130,7 +171,7 @@ var Button = ({
       "aria-label": ariaLabel,
       className: button({
         variant,
-        color: variant === "icon" || variant === "ghost" ? "none" : color,
+        color: variant === "icon" && color !== "ghost" ? "none" : color,
         size
       }),
       children: renderContent()
@@ -589,45 +630,53 @@ var DataGrid = ({
   );
 };
 
-// core/stats-card/stats-card.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-var colorClasses = {
-  blue: {
-    card: "bg-blue-100",
-    label: "text-blue-800",
-    value: "text-blue-900"
-  },
-  red: {
-    card: "bg-red-100",
-    label: "text-red-800",
-    value: "text-red-900"
-  },
-  yellow: {
-    card: "bg-yellow-100",
-    label: "text-yellow-800",
-    value: "text-yellow-900"
-  },
-  green: {
-    card: "bg-green-100",
-    label: "text-green-800",
-    value: "text-green-900"
-  },
-  gray: {
-    card: "bg-gray-100",
-    label: "text-gray-800",
-    value: "text-gray-900"
+// core/text/text.styles.ts
+import { tv as tv8 } from "tailwind-variants";
+var text = tv8({
+  variants: {
+    variant: {
+      body: "text-base",
+      caption: "text-sm",
+      display: "text-3xl font-bold"
+    }
   },
-  orange: {
-    card: "bg-orange-100",
-    label: "text-orange-800",
-    value: "text-orange-900"
+  defaultVariants: {
+    variant: "body"
   }
+});
+
+// core/text/text.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Text = ({
+  children,
+  as: Tag2 = "p",
+  variant = "body"
+}) => {
+  return /* @__PURE__ */ jsx12(Tag2, { "data-testid": "text", className: text({ variant }), children });
 };
+
+// core/stats-card/stats-card.styles.ts
+import { tv as tv9 } from "tailwind-variants";
+var statsCard = tv9({
+  base: "p-4 rounded-lg",
+  variants: {
+    color: {
+      blue: "bg-blue-100 text-blue-900",
+      red: "bg-red-100 text-red-900",
+      yellow: "bg-yellow-100 text-yellow-900",
+      green: "bg-green-100 text-green-900",
+      gray: "bg-gray-100 text-gray-900",
+      orange: "bg-orange-100 text-orange-900"
+    }
+  }
+});
+
+// core/stats-card/stats-card.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var StatsCard = ({ label: label5, value, color }) => {
-  const styles = colorClasses[color];
-  return /* @__PURE__ */ jsxs10("div", { "data-testid": "stats-card", className: `${styles.card} p-4 rounded-lg`, children: [
-    /* @__PURE__ */ jsx12("p", { className: `text-sm ${styles.label}`, children: label5 }),
-    /* @__PURE__ */ jsx12("p", { className: `text-3xl font-bold ${styles.value}`, children: value })
+  return /* @__PURE__ */ jsxs10("div", { "data-testid": "stats-card", className: statsCard({ color }), children: [
+    /* @__PURE__ */ jsx13(Text, { variant: "caption", children: label5 }),
+    /* @__PURE__ */ jsx13(Text, { variant: "display", children: value })
   ] });
 };
 
@@ -635,11 +684,11 @@ var StatsCard = ({ label: label5, value, color }) => {
 import * as Dialog from "@radix-ui/react-dialog";
 
 // core/modal/modal.styles.ts
-import { tv as tv8 } from "tailwind-variants";
-var overlay = tv8({
+import { tv as tv10 } from "tailwind-variants";
+var overlay = tv10({
   base: "fixed inset-0 bg-black/50"
 });
-var content = tv8({
+var content = tv10({
   base: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-lg p-6 w-full focus:outline-none max-h-[90vh] overflow-y-auto",
   variants: {
     size: {
@@ -654,21 +703,21 @@ var content = tv8({
     size: "md"
   }
 });
-var header = tv8({
+var header = tv10({
   base: "flex items-start justify-between"
 });
-var title = tv8({
+var title = tv10({
   base: "text-lg font-semibold text-gray-900 m-0"
 });
-var description = tv8({
+var description = tv10({
   base: "text-sm text-gray-600 mt-2"
 });
-var body = tv8({
+var body = tv10({
   base: "mt-4"
 });
 
 // core/modal/modal.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var Modal = ({
   open,
   onClose,
@@ -677,8 +726,8 @@ var Modal = ({
   children,
   size = "md"
 }) => {
-  return /* @__PURE__ */ jsx13(Dialog.Root, { open, onOpenChange: (isOpen) => !isOpen && onClose(), children: /* @__PURE__ */ jsxs11(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx13(Dialog.Overlay, { className: overlay() }),
+  return /* @__PURE__ */ jsx14(Dialog.Root, { open, onOpenChange: (isOpen) => !isOpen && onClose(), children: /* @__PURE__ */ jsxs11(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx14(Dialog.Overlay, { className: overlay() }),
     /* @__PURE__ */ jsxs11(
       Dialog.Content,
       {
@@ -686,19 +735,24 @@ var Modal = ({
         ...!description2 && { "aria-describedby": void 0 },
         children: [
           /* @__PURE__ */ jsxs11("div", { className: header(), children: [
-            /* @__PURE__ */ jsx13(Dialog.Title, { className: title(), children: title2 }),
-            /* @__PURE__ */ jsx13(Button, { icon: "X", "aria-label": "Close", onClick: onClose })
+            /* @__PURE__ */ jsx14(Dialog.Title, { className: title(), children: title2 }),
+            /* @__PURE__ */ jsx14(Button, { icon: "X", "aria-label": "Close", onClick: onClose })
           ] }),
-          description2 && /* @__PURE__ */ jsx13(Dialog.Description, { className: description(), children: description2 }),
-          children && /* @__PURE__ */ jsx13("div", { className: body(), children })
+          description2 && /* @__PURE__ */ jsx14(Dialog.Description, { className: description(), children: description2 }),
+          children && /* @__PURE__ */ jsx14("div", { className: body(), children })
         ]
       }
     )
   ] }) });
 };
 
+// core/whatsapp-button/whatsapp-button.const.ts
+var whatsappWebUrl = "https://wa.me";
+var whatsappBusinessUrl = "whatsapp-business://send";
+var whatsappMobileUserAgent = /Android|iPhone|iPad|iPod/i;
+
 // core/whatsapp-button/whatsapp-button.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var WhatsAppButton = ({
   phone,
   message,
@@ -707,23 +761,23 @@ var WhatsAppButton = ({
 }) => {
   const handleClick = () => {
     const userAgent = navigator?.userAgent ?? "";
-    const isMobile = /Android|iPhone|iPad|iPod/i.test(userAgent);
+    const isMobile = whatsappMobileUserAgent.test(userAgent);
     const hasMessage = Boolean(message);
     const encodedMessage = hasMessage ? encodeURIComponent(message) : "";
-    const whatsappUrl = hasMessage ? `https://wa.me/${phone}?text=${encodedMessage}` : `https://wa.me/${phone}`;
-    const whatsappBusinessUrl = hasMessage ? `whatsapp-business://send?phone=${phone}&text=${encodedMessage}` : `whatsapp-business://send?phone=${phone}`;
+    const webUrl = hasMessage ? `${whatsappWebUrl}/${phone}?text=${encodedMessage}` : `${whatsappWebUrl}/${phone}`;
+    const businessUrl = hasMessage ? `${whatsappBusinessUrl}?phone=${phone}&text=${encodedMessage}` : `${whatsappBusinessUrl}?phone=${phone}`;
     if (isMobile) {
       if (window.location?.assign) {
-        window.location.assign(whatsappBusinessUrl);
+        window.location.assign(businessUrl);
       } else {
-        window.location.href = whatsappBusinessUrl;
+        window.location.href = businessUrl;
       }
     } else {
-      window.open(whatsappUrl, "_blank");
+      window.open(webUrl, "_blank");
     }
     onClick?.();
   };
-  return /* @__PURE__ */ jsx14(Button, { color: "success", icon: "SiWhatsapp", onClick: handleClick, children });
+  return /* @__PURE__ */ jsx15(Button, { color: "success", icon: "SiWhatsapp", onClick: handleClick, children });
 };
 
 // core/heading/heading.const.ts
@@ -737,8 +791,8 @@ var headingTags = {
 };
 
 // core/heading/heading.styles.ts
-import { tv as tv9 } from "tailwind-variants";
-var heading = tv9({
+import { tv as tv11 } from "tailwind-variants";
+var heading = tv11({
   variants: {
     level: {
       1: "text-3xl font-bold",
@@ -763,35 +817,10 @@ var heading = tv9({
 });
 
 // core/heading/heading.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Heading = ({ children, level = 1, color }) => {
   const Tag2 = headingTags[level];
-  return /* @__PURE__ */ jsx15(Tag2, { className: heading({ level, color }), children });
-};
-
-// core/text/text.styles.ts
-import { tv as tv10 } from "tailwind-variants";
-var text = tv10({
-  variants: {
-    variant: {
-      body: "text-base",
-      caption: "text-sm",
-      display: "text-3xl font-bold"
-    }
-  },
-  defaultVariants: {
-    variant: "body"
-  }
-});
-
-// core/text/text.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Text = ({
-  children,
-  as: Tag2 = "p",
-  variant = "body"
-}) => {
-  return /* @__PURE__ */ jsx16(Tag2, { "data-testid": "text", className: text({ variant }), children });
+  return /* @__PURE__ */ jsx16(Tag2, { className: heading({ level, color }), children });
 };
 
 // core/sidebar/sidebar.tsx
@@ -799,8 +828,8 @@ import { useState as useState3 } from "react";
 import Link from "next/link";
 
 // core/sidebar/sidebar.styles.ts
-import { tv as tv11 } from "tailwind-variants";
-var sidebar = tv11({
+import { tv as tv12 } from "tailwind-variants";
+var sidebar = tv12({
   base: "h-screen bg-neutral-800 text-neutral-300 flex flex-col overflow-hidden transition-all duration-200",
   variants: {
     collapsed: {
@@ -812,16 +841,16 @@ var sidebar = tv11({
     collapsed: false
   }
 });
-var nav = tv11({
+var nav = tv12({
   base: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
 });
-var header2 = tv11({
+var header2 = tv12({
   base: "shrink-0 border-b border-neutral-600/50 grid p-2"
 });
-var section = tv11({
+var section = tv12({
   base: "border-b border-neutral-600/50 last:border-b-0 grid gap-1 p-2"
 });
-var item = tv11({
+var item = tv12({
   base: "flex w-full items-center rounded-md text-sm whitespace-nowrap transition-colors cursor-pointer p-1",
   variants: {
     active: {
@@ -833,10 +862,10 @@ var item = tv11({
     active: false
   }
 });
-var itemIcon = tv11({
+var itemIcon = tv12({
   base: "p-2"
 });
-var itemLabel = tv11({
+var itemLabel = tv12({
   base: "truncate transition-all duration-200",
   variants: {
     collapsed: {
@@ -848,22 +877,22 @@ var itemLabel = tv11({
     collapsed: false
   }
 });
-var footer = tv11({
+var footer = tv12({
   base: "shrink-0 border-t border-neutral-600/50 p-3 flex items-center gap-3 whitespace-nowrap"
 });
-var avatar = tv11({
+var avatar = tv12({
   base: "shrink-0 w-8 h-8 rounded-full bg-neutral-600 text-white text-xs font-medium flex items-center justify-center"
 });
-var userInfo = tv11({
+var userInfo = tv12({
   base: "flex flex-col min-w-0"
 });
-var userName = tv11({
+var userName = tv12({
   base: "text-sm text-white truncate"
 });
-var userEmail = tv11({
+var userEmail = tv12({
   base: "text-xs text-neutral-400"
 });
-var toggleButton = tv11({
+var toggleButton = tv12({
   base: "shrink-0 border-t border-neutral-600/50 grid p-2 [&>button]:justify-start [&>button]:overflow-hidden [&>button]:whitespace-nowrap"
 });
 
@@ -926,7 +955,7 @@ var Sidebar = ({
       /* @__PURE__ */ jsx17(
         Button,
         {
-          variant: "ghost",
+          color: "ghost",
           icon: "LogOut",
           "aria-label": "Logout",
           onClick: onLogout
@@ -936,7 +965,7 @@ var Sidebar = ({
     /* @__PURE__ */ jsx17("div", { className: toggleButton(), children: /* @__PURE__ */ jsx17(
       Button,
       {
-        variant: "ghost",
+        color: "ghost",
         icon: collapsed ? "ChevronRight" : "ChevronLeft",
         "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
         onClick: () => setCollapsed(!collapsed),
@@ -1223,22 +1252,26 @@ var ConnectedModal = ({
   );
 };
 
-// core/spinner/spinner.tsx
-import { LoaderCircle } from "lucide-react";
+// core/spinner/spinner.const.ts
+var spinnerIcons = {
+  circle: "LoaderCircle",
+  dots: "Loader",
+  refresh: "RefreshCw"
+};
 
 // core/spinner/spinner.styles.ts
-import { tv as tv12 } from "tailwind-variants";
-var spinner = tv12({
-  base: "animate-spin w-20 h-20 text-white stroke-[0.3]"
+import { tv as tv13 } from "tailwind-variants";
+var spinner = tv13({
+  base: "inline-flex animate-spin text-white"
 });
 
 // core/spinner/spinner.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
-var Spinner = ({ className }) => /* @__PURE__ */ jsx22(LoaderCircle, { className: spinner({ className }), strokeWidth: 1 });
+var Spinner = ({ variant = "circle", size = "md" }) => /* @__PURE__ */ jsx22("span", { "data-testid": "spinner", className: spinner(), children: /* @__PURE__ */ jsx22(Icon, { name: spinnerIcons[variant], size }) });
 
 // core/loader/loader.styles.ts
-import { tv as tv13 } from "tailwind-variants";
-var overlay2 = tv13({
+import { tv as tv14 } from "tailwind-variants";
+var overlay2 = tv14({
   base: "flex fixed justify-center items-center w-full h-full bg-black/20 z-50"
 });
 
@@ -1247,7 +1280,7 @@ import { jsx as jsx23 } from "react/jsx-runtime";
 var Loader = ({ label: label5 = "Loading" }) => {
   const fetching = useAppStore((s) => s.fetching);
   if (!fetching) return null;
-  return /* @__PURE__ */ jsx23("div", { role: "status", "aria-label": label5, className: overlay2(), children: /* @__PURE__ */ jsx23(Spinner, {}) });
+  return /* @__PURE__ */ jsx23("div", { role: "status", "aria-label": label5, className: overlay2(), children: /* @__PURE__ */ jsx23(Spinner, { size: "lg" }) });
 };
 
 // core/app-wrapper/app-wrapper.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexandregme/zljs",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",