@alexandregme/zljs 1.6.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

@@ -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";
@@ -220,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",
         {
@@ -249,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 })
   ] });
 };
 

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.6.0",
+  "version": "1.7.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",