@alexandregme/zljs 1.5.0 → 1.7.0

package/dist/{chunk-WAQLH7A5.js → chunk-GDE6UMXP.js}

@@ -33,11 +33,11 @@ var error = tv({
 
 // core/forms/error/error.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Error = ({ message }) => {
+var Error = ({ id, message }) => {
   if (!message) {
     return null;
   }
-  return /* @__PURE__ */ jsx2("span", { role: "alert", className: error(), children: message });
+  return /* @__PURE__ */ jsx2("span", { id, role: "alert", className: error(), children: message });
 };
 
 // core/forms/input/input.styles.ts

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import 'react-hook-form';
 /**
  * Semantic colors for action-oriented components (Button, Heading, etc.)
  */
-type SemanticColor = "primary" | "success" | "danger" | "warning" | "info" | "none";
+type SemanticColor = "primary" | "success" | "danger" | "warning" | "info" | "muted" | "none";
 /**
  * Literal colors for data visualization components (StatsCard, etc.)
  */
@@ -69,21 +69,26 @@ interface DataGridProps<T extends Record<string, unknown> = Record<string, unkno
 
 declare const DataGrid: <T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, showSearch, }: DataGridProps<T>) => react.JSX.Element;
 
+type CheckboxVariant = "default" | "card";
 interface CheckboxProps {
-    label: string;
+    label: ReactNode;
+    "aria-label"?: string;
+    variant?: CheckboxVariant;
+    size?: Size;
     checked?: boolean;
     disabled?: boolean;
     error?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-declare const Checkbox: ({ label: labelText, checked, disabled, error, onChange, }: CheckboxProps) => react.JSX.Element;
+declare const Checkbox: ({ label: labelText, "aria-label": ariaLabel, variant, size, checked, disabled, error, onChange, }: CheckboxProps) => react.JSX.Element;
 
 interface ErrorProps {
+    id?: string;
     message: string;
 }
 
-declare const Error: ({ message }: ErrorProps) => react.JSX.Element | null;
+declare const Error: ({ id, message }: ErrorProps) => react.JSX.Element | null;
 
 interface FormProps {
     children: ReactNode;
@@ -459,4 +464,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, 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 };
+export type { AppState, AppWrapperProps, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, 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

@@ -4,7 +4,7 @@ import {
   FormInput,
   FormProvider,
   Input
-} from "./chunk-WAQLH7A5.js";
+} from "./chunk-GDE6UMXP.js";
 
 // core/icon/icon.tsx
 import * as LucideIcons from "lucide-react";
@@ -62,6 +62,7 @@ var button = tv({
       danger: "bg-red-600 hover:bg-red-700 focus-visible:outline-red-600",
       warning: "bg-yellow-500 hover:bg-yellow-600 focus-visible:outline-yellow-700 text-gray-900",
       info: "bg-cyan-700 hover:bg-cyan-800 focus-visible:outline-cyan-700",
+      muted: "bg-gray-500 hover:bg-gray-600 focus-visible:outline-gray-500",
       ghost: "bg-transparent text-current hover:text-current hover:bg-neutral-500/20",
       none: ""
     },
@@ -125,6 +126,11 @@ var button = tv({
       color: "info",
       class: "text-cyan-700 hover:text-cyan-900"
     },
+    {
+      variant: "link",
+      color: "muted",
+      class: "text-gray-500 hover:text-gray-700"
+    },
     {
       variant: "link",
       color: "none",
@@ -214,27 +220,50 @@ var wrapper = tv2({
   base: "flex flex-col gap-1"
 });
 var innerWrapper = tv2({
-  base: "flex items-center gap-2"
+  base: "flex cursor-pointer has-disabled:cursor-not-allowed",
+  variants: {
+    variant: {
+      default: "w-fit items-center gap-2",
+      card: "items-start gap-3 rounded-lg border border-gray-500 p-3 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 has-disabled:bg-gray-100"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
 });
 var checkbox = tv2({
-  base: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed"
+  base: "shrink-0 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed",
+  variants: {
+    size: {
+      sm: "w-3.5 h-3.5",
+      md: "w-4 h-4",
+      lg: "w-5 h-5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
 });
 var label = tv2({
-  base: "text-sm text-gray-700 select-none cursor-pointer"
+  base: "min-w-0 flex-1 text-sm text-gray-700 select-none"
 });
 
 // core/forms/checkbox/checkbox.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Checkbox = ({
   label: labelText,
+  "aria-label": ariaLabel,
+  variant,
+  size,
   checked,
   disabled,
   error,
   onChange
 }) => {
   const id = useId();
+  const errorId = `${id}-error`;
   return /* @__PURE__ */ jsxs2("div", { className: wrapper(), children: [
-    /* @__PURE__ */ jsxs2("div", { className: innerWrapper(), children: [
+    /* @__PURE__ */ jsxs2("label", { htmlFor: id, className: innerWrapper({ variant }), children: [
       /* @__PURE__ */ jsx3(
         "input",
         {
@@ -243,12 +272,15 @@ var Checkbox = ({
           checked,
           disabled,
           onChange,
-          className: checkbox()
+          "aria-label": ariaLabel,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? errorId : void 0,
+          className: checkbox({ size })
         }
       ),
-      /* @__PURE__ */ jsx3("label", { htmlFor: id, className: label(), children: labelText })
+      /* @__PURE__ */ jsx3("span", { className: label(), children: labelText })
     ] }),
-    error && /* @__PURE__ */ jsx3(Error, { message: error })
+    error && /* @__PURE__ */ jsx3(Error, { id: errorId, message: error })
   ] });
 };
 
@@ -659,6 +691,7 @@ var text = tv8({
       danger: "text-red-600",
       warning: "text-yellow-700",
       info: "text-sky-700",
+      muted: "text-gray-500",
       none: ""
     }
   },
@@ -831,6 +864,7 @@ var heading = tv11({
       danger: "text-red-600",
       warning: "text-yellow-700",
       info: "text-sky-700",
+      muted: "text-gray-500",
       none: ""
     }
   },

package/dist/rhf/index.js

@@ -2,7 +2,7 @@
 import {
   FormInput,
   FormProvider
-} from "../chunk-WAQLH7A5.js";
+} from "../chunk-GDE6UMXP.js";
 export {
   FormInput,
   FormProvider

package/package.json

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