@alexandregme/zljs 0.4.0 → 0.6.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 {
@@ -184,6 +184,15 @@ interface HeadingProps {
 
 declare const Heading: ({ children, level, color }: HeadingProps) => react.JSX.Element;
 
+type TextVariant = "body" | "caption" | "display";
+interface TextProps {
+    children: string | number;
+    as?: "p" | "span";
+    variant?: TextVariant;
+}
+
+declare const Text: ({ children, as: Tag, variant, }: TextProps) => react.JSX.Element;
+
 interface SidebarItem {
     icon: IconName;
     label: string;
@@ -391,11 +400,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;
@@ -443,5 +454,5 @@ declare class HTTPClient {
     patch<T = unknown>(url: string, config?: HttpRequestConfig): Promise<T | undefined>;
 }
 
-export { AppWrapper, Button, Checkbox, ConnectedModal, DataGrid, DocumentWrapper, Error, Form, GlobalState, HTTPClient, Heading, Icon, Input, Loader, Modal, PageWrapper, Radio, Select, Sidebar, Spinner, StatsCard, Tag, 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, Toast, ToastState, ToastType, WhatsAppButtonProps };
+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, 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
@@ -52,7 +53,8 @@ var button = tv({
     },
     size: {
       sm: "",
-      md: ""
+      md: "",
+      lg: ""
     }
   },
   compoundVariants: [
@@ -66,6 +68,16 @@ 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",
@@ -589,45 +601,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 +655,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 +674,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 +697,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 +706,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 +732,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 +762,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,10 +788,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 });
+  return /* @__PURE__ */ jsx16(Tag2, { className: heading({ level, color }), children });
 };
 
 // core/sidebar/sidebar.tsx
@@ -774,8 +799,8 @@ import { useState as useState3 } from "react";
 import Link from "next/link";
 
 // core/sidebar/sidebar.styles.ts
-import { tv as tv10 } from "tailwind-variants";
-var sidebar = tv10({
+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: {
@@ -787,16 +812,16 @@ var sidebar = tv10({
     collapsed: false
   }
 });
-var nav = tv10({
+var nav = tv12({
   base: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
 });
-var header2 = tv10({
+var header2 = tv12({
   base: "shrink-0 border-b border-neutral-600/50 grid p-2"
 });
-var section = tv10({
+var section = tv12({
   base: "border-b border-neutral-600/50 last:border-b-0 grid gap-1 p-2"
 });
-var item = tv10({
+var item = tv12({
   base: "flex w-full items-center rounded-md text-sm whitespace-nowrap transition-colors cursor-pointer p-1",
   variants: {
     active: {
@@ -808,10 +833,10 @@ var item = tv10({
     active: false
   }
 });
-var itemIcon = tv10({
+var itemIcon = tv12({
   base: "p-2"
 });
-var itemLabel = tv10({
+var itemLabel = tv12({
   base: "truncate transition-all duration-200",
   variants: {
     collapsed: {
@@ -823,27 +848,27 @@ var itemLabel = tv10({
     collapsed: false
   }
 });
-var footer = tv10({
+var footer = tv12({
   base: "shrink-0 border-t border-neutral-600/50 p-3 flex items-center gap-3 whitespace-nowrap"
 });
-var avatar = tv10({
+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 = tv10({
+var userInfo = tv12({
   base: "flex flex-col min-w-0"
 });
-var userName = tv10({
+var userName = tv12({
   base: "text-sm text-white truncate"
 });
-var userEmail = tv10({
+var userEmail = tv12({
   base: "text-xs text-neutral-400"
 });
-var toggleButton = tv10({
+var toggleButton = tv12({
   base: "shrink-0 border-t border-neutral-600/50 grid p-2 [&>button]:justify-start [&>button]:overflow-hidden [&>button]:whitespace-nowrap"
 });
 
 // core/sidebar/sidebar.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var getInitials = (name) => {
   const parts = name.trim().split(/\s+/);
   if (parts.length >= 2) {
@@ -864,19 +889,19 @@ var Sidebar = ({
   const [collapsed, setCollapsed] = useState3(defaultCollapsed);
   const initials = getInitials(user.name);
   return /* @__PURE__ */ jsxs12("aside", { className: sidebar({ collapsed }), children: [
-    homeHref && /* @__PURE__ */ jsx16(
+    homeHref && /* @__PURE__ */ jsx17(
       Link,
       {
         href: homeHref,
         className: header2(),
         "aria-label": homeLabel || "Home",
         children: /* @__PURE__ */ jsxs12("span", { className: item({ active: homeHref === activeHref }), children: [
-          /* @__PURE__ */ jsx16("span", { className: itemIcon(), children: /* @__PURE__ */ jsx16(Icon, { name: "Home" }) }),
-          /* @__PURE__ */ jsx16("span", { className: itemLabel({ collapsed }), children: homeLabel })
+          /* @__PURE__ */ jsx17("span", { className: itemIcon(), children: /* @__PURE__ */ jsx17(Icon, { name: "Home" }) }),
+          /* @__PURE__ */ jsx17("span", { className: itemLabel({ collapsed }), children: homeLabel })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx16("nav", { "aria-label": "Main navigation", className: nav(), children: sections.map((sectionData, i) => /* @__PURE__ */ jsx16("div", { className: section(), children: sectionData.items.map((sidebarItem) => {
+    /* @__PURE__ */ jsx17("nav", { "aria-label": "Main navigation", className: nav(), children: sections.map((sectionData, i) => /* @__PURE__ */ jsx17("div", { className: section(), children: sectionData.items.map((sidebarItem) => {
       const isActive = sidebarItem.href === activeHref;
       return /* @__PURE__ */ jsxs12(
         Link,
@@ -885,20 +910,20 @@ var Sidebar = ({
           className: item({ active: isActive }),
           ...isActive && { "aria-current": "page" },
           children: [
-            /* @__PURE__ */ jsx16("span", { className: itemIcon(), children: /* @__PURE__ */ jsx16(Icon, { name: sidebarItem.icon }) }),
-            /* @__PURE__ */ jsx16("span", { className: itemLabel({ collapsed }), children: sidebarItem.label })
+            /* @__PURE__ */ jsx17("span", { className: itemIcon(), children: /* @__PURE__ */ jsx17(Icon, { name: sidebarItem.icon }) }),
+            /* @__PURE__ */ jsx17("span", { className: itemLabel({ collapsed }), children: sidebarItem.label })
           ]
         },
         sidebarItem.href
       );
     }) }, i)) }),
     /* @__PURE__ */ jsxs12("div", { className: footer(), children: [
-      /* @__PURE__ */ jsx16("div", { className: avatar(), children: initials }),
+      /* @__PURE__ */ jsx17("div", { className: avatar(), children: initials }),
       /* @__PURE__ */ jsxs12("div", { className: userInfo(), children: [
-        /* @__PURE__ */ jsx16("span", { className: userName(), children: user.name }),
-        /* @__PURE__ */ jsx16("span", { className: userEmail(), children: user.email })
+        /* @__PURE__ */ jsx17("span", { className: userName(), children: user.name }),
+        /* @__PURE__ */ jsx17("span", { className: userEmail(), children: user.email })
       ] }),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         Button,
         {
           variant: "ghost",
@@ -908,7 +933,7 @@ var Sidebar = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: toggleButton(), children: /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17("div", { className: toggleButton(), children: /* @__PURE__ */ jsx17(
       Button,
       {
         variant: "ghost",
@@ -957,7 +982,7 @@ var useToastStore = create()(
 );
 
 // core/toaster/toaster.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Toaster = () => {
   const toasts = useToastStore((s) => s.toasts);
   const removeToast = useToastStore((s) => s.removeToast);
@@ -970,7 +995,7 @@ var Toaster = () => {
       removeToast(t.id);
     });
   }, [toasts, removeToast]);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     SonnerToaster,
     {
       position: "bottom-right",
@@ -1049,7 +1074,7 @@ import {
   combineReducers,
   configureStore
 } from "@reduxjs/toolkit";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var store;
 var persistentReducers = {};
 var dynamicReducers = {};
@@ -1088,7 +1113,7 @@ var GlobalState = ({
     preloadedState,
     coreReducers
   );
-  return /* @__PURE__ */ jsx18(Provider, { store: reduxStore, children });
+  return /* @__PURE__ */ jsx19(Provider, { store: reduxStore, children });
 };
 
 // core/state/router/router.store.ts
@@ -1147,7 +1172,7 @@ var usePageStore = create5()(
 import { useEffect as useEffect2 } from "react";
 import { useDispatch, useStore } from "react-redux";
 import { useRouter } from "next/compat/router";
-import { Fragment as Fragment4, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20 } from "react/jsx-runtime";
 var PageWrapper = ({
   reducers,
   title: title2,
@@ -1171,11 +1196,11 @@ var PageWrapper = ({
       initPage(dispatch);
     }
   }, []);
-  return /* @__PURE__ */ jsx19(Fragment4, { children });
+  return /* @__PURE__ */ jsx20(Fragment4, { children });
 };
 
 // core/connected-modal/connected-modal.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ConnectedModal = ({
   modalId,
   title: title2,
@@ -1185,7 +1210,7 @@ var ConnectedModal = ({
 }) => {
   const isOpen = useModalStore((s) => s.isOpen(modalId));
   const closeModal = useModalStore((s) => s.closeModal);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Modal,
     {
       open: isOpen,
@@ -1198,38 +1223,42 @@ 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 tv11 } from "tailwind-variants";
-var spinner = tv11({
-  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 jsx21 } from "react/jsx-runtime";
-var Spinner = ({ className }) => /* @__PURE__ */ jsx21(LoaderCircle, { className: spinner({ className }), strokeWidth: 1 });
+import { jsx as jsx22 } from "react/jsx-runtime";
+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 tv12 } from "tailwind-variants";
-var overlay2 = tv12({
+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"
 });
 
 // core/loader/loader.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+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__ */ jsx22("div", { role: "status", "aria-label": label5, className: overlay2(), children: /* @__PURE__ */ jsx22(Spinner, {}) });
+  return /* @__PURE__ */ jsx23("div", { role: "status", "aria-label": label5, className: overlay2(), children: /* @__PURE__ */ jsx23(Spinner, { size: "lg" }) });
 };
 
 // core/app-wrapper/app-wrapper.tsx
 import { useEffect as useEffect3 } from "react";
 import { useRouter as useRouter2 } from "next/compat/router";
 import { SessionProvider } from "next-auth/react";
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var AppWrapper = ({
   children,
   reducers,
@@ -1243,15 +1272,15 @@ var AppWrapper = ({
       setRoute(router.asPath);
     }
   }, [router?.isReady, router?.asPath, setRoute]);
-  return /* @__PURE__ */ jsx23(SessionProvider, { children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx24(SessionProvider, { children: /* @__PURE__ */ jsxs13(
     GlobalState,
     {
       reducers,
       middlewares,
       coreReducers,
       children: [
-        /* @__PURE__ */ jsx23(Loader, {}),
-        /* @__PURE__ */ jsx23(Toaster, {}),
+        /* @__PURE__ */ jsx24(Loader, {}),
+        /* @__PURE__ */ jsx24(Toaster, {}),
         children
       ]
     }
@@ -1259,13 +1288,13 @@ var AppWrapper = ({
 };
 
 // core/document-wrapper/document-wrapper.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var DocumentWrapper = ({
   children,
   lang = "pt-BR",
   className
 }) => {
-  return /* @__PURE__ */ jsx24("html", { lang, children: /* @__PURE__ */ jsx24("body", { className, children }) });
+  return /* @__PURE__ */ jsx25("html", { lang, children: /* @__PURE__ */ jsx25("body", { className, children }) });
 };
 
 // core/http/http.client.ts
@@ -1364,6 +1393,7 @@ export {
   Spinner,
   StatsCard,
   Tag,
+  Text,
   TextArea,
   Toaster,
   WhatsAppButton,

package/package.json

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