@alexandregme/zljs 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -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;
@@ -443,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

@@ -769,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: {
@@ -787,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: {
@@ -808,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: {
@@ -823,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) {
@@ -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,
@@ -1202,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,
@@ -1243,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
       ]
     }
@@ -1259,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
@@ -1364,6 +1389,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.5.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",