@alexandregme/zljs 1.1.1 → 1.3.0

package/dist/index.d.ts

@@ -20,12 +20,13 @@ type DataColor = "blue" | "red" | "yellow" | "green" | "gray" | "orange";
  */
 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", "LoaderCircle", "CheckCircle", "XCircle", "AlertTriangle", "Info", "SiWhatsapp", "SiFacebook", "SiInstagram", "SiShopify"];
+declare const iconNames: readonly ["Check", "X", "Plus", "Minus", "Search", "Menu", "ChevronDown", "ChevronUp", "ChevronLeft", "ChevronRight", "ChevronsUp", "ArrowUp", "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", "Route", "Navigation", "ListChecks", "Map", "MapPinOff", "SiWhatsapp", "SiFacebook", "SiInstagram", "SiShopify"];
 
 type IconName = (typeof iconNames)[number];
 interface IconProps {
     name: IconName;
     size?: Size;
+    "aria-label"?: string;
 }
 
 type ButtonVariant = "default" | "icon" | "link";
@@ -146,7 +147,7 @@ interface TextAreaProps {
 
 declare const TextArea: ({ label: labelText, placeholder, value, rows, error, disabled, onChange, }: TextAreaProps) => react.JSX.Element;
 
-declare const Icon: ({ name, size }: IconProps) => react.JSX.Element;
+declare const Icon: ({ name, size, "aria-label": ariaLabel, }: IconProps) => react.JSX.Element;
 
 interface StatsCardProps {
     label: string;
@@ -456,4 +457,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, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, ConnectedModalProps, DataColor, DataGridColumn, DataGridProps, DocumentWrapperProps, ErrorProps, ExtendedStore, FormProps, GlobalStateProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, InitPageFunction, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, PageWrapperProps, RadioProps, RouterState, SelectOption, SelectProps, SemanticColor, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };
+export type { AppState, AppWrapperProps, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, ConnectedModalProps, DataColor, DataGridColumn, DataGridProps, DocumentWrapperProps, ErrorProps, ExtendedStore, FormProps, GlobalStateProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InitPageFunction, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, PageWrapperProps, RadioProps, RouterState, SelectOption, SelectProps, SemanticColor, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };

package/dist/index.js

@@ -25,11 +25,23 @@ var iconSizes = {
 
 // core/icon/icon.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
-var Icon = ({ name, size = "md" }) => {
+var Icon = ({
+  name,
+  size = "md",
+  "aria-label": ariaLabel
+}) => {
   const isBrand = name.startsWith("Si");
   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: iconSizes[size] }) });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-testid": name,
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(IconComponent, { size: iconSizes[size], "aria-hidden": "true" })
+    }
+  );
 };
 
 // core/button/button.styles.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexandregme/zljs",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",
@@ -59,6 +59,7 @@
     "test:watch": "vitest --project unit --coverage",
     "test:coverage": "vitest run --project unit --coverage",
     "test:storybook": "vitest run --project storybook",
+    "test:visual": "chromatic",
     "eslint": "eslint ./ --color --fix",
     "prettier": "prettier --write .",
     "stylelint": "stylelint '**/*.{css,scss}' --allow-empty-input",
@@ -84,9 +85,12 @@
     "zustand": "^5.0.11"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.6.0",
     "@commitlint/cli": "^20.2.0",
     "@commitlint/config-conventional": "^20.2.0",
     "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.6.3",
+    "@storybook/addon-docs": "^10.6.3",
     "@storybook/addon-vitest": "^10.6.3",
     "@storybook/react-vite": "^10.6.3",
     "@tailwindcss/vite": "^4.1.18",
@@ -97,6 +101,7 @@
     "@vitest/browser-playwright": "^4.1.12",
     "@vitest/coverage-v8": "^4.1.12",
     "autoprefixer": "^10.4.23",
+    "chromatic": "^18.13.4",
     "eslint": "^9.39.1",
     "eslint-plugin-storybook": "10.6.3",
     "globals": "^16.5.0",