@alexandregme/zljs 0.3.11 → 0.4.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;
@@ -204,11 +211,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;
 

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 })
   ] });
 };
 

package/package.json

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