@alexandregme/zljs 0.3.11 → 0.5.0

package/dist/index.d.ts

@@ -6,13 +6,6 @@ import * as zustand from 'zustand';
 import { Store, Reducer, Middleware, Dispatch } from '@reduxjs/toolkit';
 import 'react-hook-form';
 
-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", "Map", "CloudDownload", "Wrench", "GitMerge", "SiWhatsapp", "SiFacebook", "SiInstagram", "SiShopify"];
-
-type IconName = (typeof iconNames)[number];
-interface IconProps {
-    name: IconName;
-}
-
 /**
  * Semantic colors for action-oriented components (Button, Heading, etc.)
  */
@@ -22,12 +15,26 @@ type SemanticColor = "primary" | "success" | "danger" | "warning" | "info" | "no
  */
 type DataColor = "blue" | "red" | "yellow" | "green" | "gray" | "orange";
 
+/**
+ * Sizes shared by every sized component (Icon, Button, Input, etc.)
+ */
+type Size = "sm" | "md";
+
+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"];
+
+type IconName = (typeof iconNames)[number];
+interface IconProps {
+    name: IconName;
+    size?: Size;
+}
+
 type ButtonVariant = "default" | "icon" | "ghost" | "link";
 interface ButtonProps {
     children?: ReactNode;
     type?: "button" | "submit" | "reset";
     variant?: ButtonVariant;
     color?: SemanticColor;
+    size?: Size;
     icon?: IconName;
     iconPosition?: "left" | "right";
     disabled?: boolean;
@@ -35,7 +42,7 @@ interface ButtonProps {
     onClick?: () => void;
 }
 
-declare const Button: ({ children, type, variant: variantProp, color, icon, iconPosition, disabled, "aria-label": ariaLabel, onClick, }: ButtonProps) => react.JSX.Element;
+declare const Button: ({ children, type, variant: variantProp, color, size, icon, iconPosition, disabled, "aria-label": ariaLabel, onClick, }: ButtonProps) => react.JSX.Element;
 
 interface DataGridCellParams<T extends Record<string, unknown> = Record<string, unknown>> {
     value?: any;
@@ -138,7 +145,7 @@ interface TextAreaProps {
 
 declare const TextArea: ({ label: labelText, placeholder, value, rows, error, disabled, onChange, }: TextAreaProps) => react.JSX.Element;
 
-declare const Icon: ({ name }: IconProps) => react.JSX.Element;
+declare const Icon: ({ name, size }: IconProps) => react.JSX.Element;
 
 interface StatsCardProps {
     label: string;
@@ -177,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;
@@ -204,11 +220,11 @@ declare const Sidebar: ({ sections, user, activeHref, defaultCollapsed, collapse
 
 interface TagProps {
     children: ReactNode;
-    color?: "blue" | "green" | "red" | "yellow" | "gray";
+    color?: DataColor;
     onRemove?: () => void;
-    className?: string;
 }
-declare const Tag: ({ children, color, onRemove, className, }: TagProps) => react.JSX.Element;
+
+declare const Tag: ({ children, color, onRemove }: TagProps) => react.JSX.Element;
 
 declare const Toaster: () => react.JSX.Element;
 
@@ -436,5 +452,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, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };

package/dist/index.js

@@ -8,19 +8,27 @@ import {
 
 // core/icon/icon.tsx
 import * as LucideIcons from "lucide-react";
+
+// core/icon/icon.const.ts
 import { SiWhatsapp, SiFacebook, SiInstagram, SiShopify } from "react-icons/si";
-import { Fragment, jsx } from "react/jsx-runtime";
-var brandIcons = {
+var iconBrands = {
   SiWhatsapp,
   SiFacebook,
   SiInstagram,
   SiShopify
 };
-var Icon = ({ name }) => {
+var iconSizes = {
+  sm: 12,
+  md: 16
+};
+
+// core/icon/icon.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var Icon = ({ name, size = "md" }) => {
   const isBrand = name.startsWith("Si");
-  const IconComponent = isBrand ? brandIcons[name] : LucideIcons[name];
+  const IconComponent = isBrand ? iconBrands[name] : LucideIcons[name];
   if (!IconComponent) return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsx("span", { "data-testid": name, children: /* @__PURE__ */ jsx(IconComponent, { size: 16 }) });
+  return /* @__PURE__ */ jsx("span", { "data-testid": name, children: /* @__PURE__ */ jsx(IconComponent, { size: iconSizes[size] }) });
 };
 
 // core/button/button.styles.ts
@@ -41,9 +49,23 @@ var button = tv({
       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",
       none: ""
+    },
+    size: {
+      sm: "",
+      md: ""
     }
   },
   compoundVariants: [
+    {
+      variant: "default",
+      size: "sm",
+      class: "px-2 py-1 text-xs gap-1"
+    },
+    {
+      variant: "icon",
+      size: "sm",
+      class: "p-0.5"
+    },
     {
       variant: "link",
       color: "primary",
@@ -62,7 +84,8 @@ var button = tv({
   ],
   defaultVariants: {
     variant: "default",
-    color: "primary"
+    color: "primary",
+    size: "md"
   }
 });
 
@@ -73,6 +96,7 @@ var Button = ({
   type = "button",
   variant: variantProp,
   color = "primary",
+  size = "md",
   icon,
   iconPosition = "left",
   disabled = false,
@@ -85,7 +109,7 @@ var Button = ({
     if (!icon) {
       return children;
     }
-    const iconElement = /* @__PURE__ */ jsx2(Icon, { name: icon });
+    const iconElement = /* @__PURE__ */ jsx2(Icon, { name: icon, size });
     if (isIconOnly) {
       return iconElement;
     }
@@ -106,7 +130,8 @@ var Button = ({
       "aria-label": ariaLabel,
       className: button({
         variant,
-        color: variant === "icon" || variant === "ghost" ? "none" : color
+        color: variant === "icon" || variant === "ghost" ? "none" : color,
+        size
       }),
       children: renderContent()
     }
@@ -373,7 +398,8 @@ var tag = tv7({
       green: "bg-green-100 text-green-700",
       red: "bg-red-100 text-red-700",
       yellow: "bg-yellow-100 text-yellow-700",
-      gray: "bg-slate-100 text-slate-700"
+      gray: "bg-slate-100 text-slate-700",
+      orange: "bg-orange-100 text-orange-700"
     }
   },
   defaultVariants: {
@@ -383,24 +409,10 @@ var tag = tv7({
 
 // core/tag/tag.tsx
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var Tag = ({
-  children,
-  color = "blue",
-  onRemove,
-  className
-}) => {
-  return /* @__PURE__ */ jsxs7("span", { className: tag({ color, className }), children: [
+var Tag = ({ children, color = "blue", onRemove }) => {
+  return /* @__PURE__ */ jsxs7("span", { "data-testid": "tag", className: tag({ color }), children: [
     children,
-    onRemove && /* @__PURE__ */ jsx9(
-      "button",
-      {
-        type: "button",
-        onClick: onRemove,
-        className: "ml-1 hover:opacity-70 focus:outline-none",
-        "aria-label": "Remover",
-        children: "\xD7"
-      }
-    )
+    onRemove && /* @__PURE__ */ jsx9(Button, { size: "sm", icon: "X", "aria-label": "Remover", onClick: onRemove })
   ] });
 };
 
@@ -757,13 +769,38 @@ var Heading = ({ children, level = 1, color }) => {
   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 });
+};
+
 // core/sidebar/sidebar.tsx
 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 tv11 } from "tailwind-variants";
+var sidebar = tv11({
   base: "h-screen bg-neutral-800 text-neutral-300 flex flex-col overflow-hidden transition-all duration-200",
   variants: {
     collapsed: {
@@ -775,16 +812,16 @@ var sidebar = tv10({
     collapsed: false
   }
 });
-var nav = tv10({
+var nav = tv11({
   base: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
 });
-var header2 = tv10({
+var header2 = tv11({
   base: "shrink-0 border-b border-neutral-600/50 grid p-2"
 });
-var section = tv10({
+var section = tv11({
   base: "border-b border-neutral-600/50 last:border-b-0 grid gap-1 p-2"
 });
-var item = tv10({
+var item = tv11({
   base: "flex w-full items-center rounded-md text-sm whitespace-nowrap transition-colors cursor-pointer p-1",
   variants: {
     active: {
@@ -796,10 +833,10 @@ var item = tv10({
     active: false
   }
 });
-var itemIcon = tv10({
+var itemIcon = tv11({
   base: "p-2"
 });
-var itemLabel = tv10({
+var itemLabel = tv11({
   base: "truncate transition-all duration-200",
   variants: {
     collapsed: {
@@ -811,27 +848,27 @@ var itemLabel = tv10({
     collapsed: false
   }
 });
-var footer = tv10({
+var footer = tv11({
   base: "shrink-0 border-t border-neutral-600/50 p-3 flex items-center gap-3 whitespace-nowrap"
 });
-var avatar = tv10({
+var avatar = tv11({
   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 = tv11({
   base: "flex flex-col min-w-0"
 });
-var userName = tv10({
+var userName = tv11({
   base: "text-sm text-white truncate"
 });
-var userEmail = tv10({
+var userEmail = tv11({
   base: "text-xs text-neutral-400"
 });
-var toggleButton = tv10({
+var toggleButton = tv11({
   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) {
@@ -852,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,
@@ -873,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",
@@ -896,7 +933,7 @@ var Sidebar = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: toggleButton(), children: /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17("div", { className: toggleButton(), children: /* @__PURE__ */ jsx17(
       Button,
       {
         variant: "ghost",
@@ -945,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);
@@ -958,7 +995,7 @@ var Toaster = () => {
       removeToast(t.id);
     });
   }, [toasts, removeToast]);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     SonnerToaster,
     {
       position: "bottom-right",
@@ -1037,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 = {};
@@ -1076,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
@@ -1135,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,
@@ -1159,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,
@@ -1173,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,
@@ -1190,34 +1227,34 @@ var ConnectedModal = ({
 import { LoaderCircle } from "lucide-react";
 
 // core/spinner/spinner.styles.ts
-import { tv as tv11 } from "tailwind-variants";
-var spinner = tv11({
+import { tv as tv12 } from "tailwind-variants";
+var spinner = tv12({
   base: "animate-spin w-20 h-20 text-white stroke-[0.3]"
 });
 
 // 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 = ({ className }) => /* @__PURE__ */ jsx22(LoaderCircle, { className: spinner({ className }), strokeWidth: 1 });
 
 // core/loader/loader.styles.ts
-import { tv as tv12 } from "tailwind-variants";
-var overlay2 = tv12({
+import { tv as tv13 } from "tailwind-variants";
+var overlay2 = tv13({
   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, {}) });
 };
 
 // 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,
@@ -1231,15 +1268,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
       ]
     }
@@ -1247,13 +1284,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
@@ -1352,6 +1389,7 @@ export {
   Spinner,
   StatsCard,
   Tag,
+  Text,
   TextArea,
   Toaster,
   WhatsAppButton,

package/package.json

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