@alexandregme/zljs 1.6.0 → 1.8.0

package/README.md

@@ -43,6 +43,30 @@ import { FormProvider, FormInput } from "@alexandregme/zljs/rhf";
 <Button onClick={handleClick}>Submit</Button>;
 ```
 
+## Colors
+
+The components work with no setup, using the default colors. To use your own, redefine the values you want after importing the styles:
+
+```css
+@import "tailwindcss";
+@import "@alexandregme/zljs/styles.css";
+
+@theme {
+  --color-zl-primary: #2e7d32;
+}
+```
+
+`primary`, `success`, `danger`, `warning`, `info` and `muted` each take one value (`--color-zl-<color>`), used for text and the focus outline. The others follow it, and you can redefine them too:
+
+| Value                       | Used for               | Default                                    |
+| --------------------------- | ---------------------- | ------------------------------------------ |
+| `--color-zl-<color>-strong` | Link hover             | 30% darker                                 |
+| `--color-zl-<color>-bg`     | Button background      | The color itself (`warning`: `yellow-500`) |
+| `--color-zl-<color>-hover`  | Button hover           | The background, 15% darker                 |
+| `--color-zl-<color>-on`     | Text on the background | White (`warning`: `gray-900`)              |
+
+Only the defaults are checked for contrast. Check your own choice: 4.5:1 for text, on `--color-zl-<color>` against the page and on `-on` against `-bg`, and 3:1 for the focus outline. A value set on a nested element doesn't reach the values derived from it, so set them in `@theme` or `:root`.
+
 ## Getting Started
 
 ```bash

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

@@ -28,16 +28,16 @@ import { forwardRef, useId } from "react";
 // core/forms/error/error.styles.ts
 import { tv } from "tailwind-variants";
 var error = tv({
-  base: "text-sm text-red-600"
+  base: "text-sm text-zl-danger"
 });
 
 // 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-WZNUKE6S.js";
 
 // core/icon/icon.tsx
 import * as LucideIcons from "lucide-react";
@@ -51,18 +51,18 @@ var button = tv({
   base: "cursor-pointer font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center",
   variants: {
     variant: {
-      default: "px-4 py-2 text-white text-sm gap-2 rounded-md",
+      default: "px-4 py-2 text-sm gap-2 rounded-md",
       icon: "p-1 bg-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md",
       // The invisible ::after grows the touch target to 44px without changing the layout.
       link: "relative text-xs hover:underline rounded-sm after:absolute after:top-1/2 after:left-1/2 after:h-11 after:w-full after:min-w-11 after:-translate-x-1/2 after:-translate-y-1/2"
     },
     color: {
-      primary: "bg-blue-600 hover:bg-blue-700 focus-visible:outline-blue-600",
-      success: "bg-green-700 hover:bg-green-800 focus-visible:outline-green-700",
-      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",
+      primary: "bg-zl-primary-bg hover:bg-zl-primary-hover text-zl-primary-on focus-visible:outline-zl-primary",
+      success: "bg-zl-success-bg hover:bg-zl-success-hover text-zl-success-on focus-visible:outline-zl-success",
+      danger: "bg-zl-danger-bg hover:bg-zl-danger-hover text-zl-danger-on focus-visible:outline-zl-danger",
+      warning: "bg-zl-warning-bg hover:bg-zl-warning-hover text-zl-warning-on focus-visible:outline-zl-warning",
+      info: "bg-zl-info-bg hover:bg-zl-info-hover text-zl-info-on focus-visible:outline-zl-info",
+      muted: "bg-zl-muted-bg hover:bg-zl-muted-hover text-zl-muted-on focus-visible:outline-zl-muted",
       ghost: "bg-transparent text-current hover:text-current hover:bg-neutral-500/20",
       none: ""
     },
@@ -104,32 +104,32 @@ var button = tv({
     {
       variant: "link",
       color: "primary",
-      class: "text-blue-600 hover:text-blue-800"
+      class: "text-zl-primary hover:text-zl-primary-strong"
     },
     {
       variant: "link",
       color: "success",
-      class: "text-green-700 hover:text-green-900"
+      class: "text-zl-success hover:text-zl-success-strong"
     },
     {
       variant: "link",
       color: "danger",
-      class: "text-red-600 hover:text-red-800"
+      class: "text-zl-danger hover:text-zl-danger-strong"
     },
     {
       variant: "link",
       color: "warning",
-      class: "text-yellow-700 hover:text-yellow-900"
+      class: "text-zl-warning hover:text-zl-warning-strong"
     },
     {
       variant: "link",
       color: "info",
-      class: "text-cyan-700 hover:text-cyan-900"
+      class: "text-zl-info hover:text-zl-info-strong"
     },
     {
       variant: "link",
       color: "muted",
-      class: "text-gray-500 hover:text-gray-700"
+      class: "text-zl-muted hover:text-zl-muted-strong"
     },
     {
       variant: "link",
@@ -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-zl-primary has-checked:ring-1 has-checked:ring-zl-primary 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 })
   ] });
 };
 
@@ -652,6 +678,19 @@ var DataGrid = ({
 
 // core/text/text.styles.ts
 import { tv as tv8 } from "tailwind-variants";
+
+// core/types/colors.const.ts
+var semanticTextColors = {
+  primary: "text-zl-primary",
+  success: "text-zl-success",
+  danger: "text-zl-danger",
+  warning: "text-zl-warning",
+  info: "text-zl-info",
+  muted: "text-zl-muted",
+  none: ""
+};
+
+// core/text/text.styles.ts
 var text = tv8({
   variants: {
     variant: {
@@ -659,15 +698,7 @@ var text = tv8({
       caption: "text-sm",
       display: "text-3xl font-bold"
     },
-    color: {
-      primary: "text-blue-600",
-      success: "text-green-700",
-      danger: "text-red-600",
-      warning: "text-yellow-700",
-      info: "text-sky-700",
-      muted: "text-gray-500",
-      none: ""
-    }
+    color: semanticTextColors
   },
   defaultVariants: {
     variant: "body"
@@ -832,15 +863,7 @@ var heading = tv11({
       5: "text-base font-medium",
       6: "text-sm font-medium"
     },
-    color: {
-      primary: "text-blue-600",
-      success: "text-green-700",
-      danger: "text-red-600",
-      warning: "text-yellow-700",
-      info: "text-sky-700",
-      muted: "text-gray-500",
-      none: ""
-    }
+    color: semanticTextColors
   },
   defaultVariants: {
     level: 1

package/dist/rhf/index.js

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

package/dist/styles/ag-grid.css

@@ -0,0 +1,32 @@
+/* AG Grid Custom Styles */
+.ag-theme-alpine {
+  --ag-header-background-color: #f8fafc;
+  --ag-header-foreground-color: #334155;
+  --ag-header-cell-hover-background-color: #e2e8f0;
+  --ag-odd-row-background-color: #f8fafc;
+  --ag-row-hover-color: #e0f2fe;
+  --ag-selected-row-background-color: #dbeafe;
+  --ag-border-color: #e2e8f0;
+  --ag-font-family: inherit;
+  --ag-font-size: 14px;
+}
+
+.ag-theme-alpine .ag-header-cell {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  border-right: 1px solid #475569;
+}
+
+.ag-theme-alpine .ag-header-cell:last-child {
+  border-right: none;
+}
+
+.ag-theme-alpine .ag-row {
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.ag-theme-alpine .ag-row:hover {
+  background-color: var(--ag-row-hover-color);
+}

package/dist/styles/colors.css

@@ -0,0 +1,57 @@
+/* The semantic colors of the components. Works with no setup; an app changes a
+   color by redefining its --color-zl-* value in its own @theme, after importing
+   the styles. Only the defaults are checked for contrast.
+
+   Each color has five values, and the others follow the first unless redefined:
+     --color-zl-<color>         text and focus outline
+     --color-zl-<color>-strong  link hover
+     --color-zl-<color>-bg      button background
+     --color-zl-<color>-hover   button hover
+     --color-zl-<color>-on      text on the background
+
+   Prettier is off for this block to keep one value per line. */
+
+/* prettier-ignore */
+@theme {
+  /* Primary */
+  --color-zl-primary:        var(--color-blue-600);
+  --color-zl-primary-strong: color-mix(in oklab, var(--color-zl-primary), black 30%);
+  --color-zl-primary-bg:     var(--color-zl-primary);
+  --color-zl-primary-hover:  color-mix(in oklab, var(--color-zl-primary-bg), black 15%);
+  --color-zl-primary-on:     var(--color-white);
+
+  /* Success */
+  --color-zl-success:        var(--color-green-700);
+  --color-zl-success-strong: color-mix(in oklab, var(--color-zl-success), black 30%);
+  --color-zl-success-bg:     var(--color-zl-success);
+  --color-zl-success-hover:  color-mix(in oklab, var(--color-zl-success-bg), black 15%);
+  --color-zl-success-on:     var(--color-white);
+
+  /* Danger */
+  --color-zl-danger:        var(--color-red-600);
+  --color-zl-danger-strong: color-mix(in oklab, var(--color-zl-danger), black 30%);
+  --color-zl-danger-bg:     var(--color-zl-danger);
+  --color-zl-danger-hover:  color-mix(in oklab, var(--color-zl-danger-bg), black 15%);
+  --color-zl-danger-on:     var(--color-white);
+
+  /* Warning */
+  --color-zl-warning:        var(--color-yellow-700);
+  --color-zl-warning-strong: color-mix(in oklab, var(--color-zl-warning), black 30%);
+  --color-zl-warning-bg:     var(--color-yellow-500);
+  --color-zl-warning-hover:  color-mix(in oklab, var(--color-zl-warning-bg), black 15%);
+  --color-zl-warning-on:     var(--color-gray-900);
+
+  /* Info */
+  --color-zl-info:        var(--color-cyan-700);
+  --color-zl-info-strong: color-mix(in oklab, var(--color-zl-info), black 30%);
+  --color-zl-info-bg:     var(--color-zl-info);
+  --color-zl-info-hover:  color-mix(in oklab, var(--color-zl-info-bg), black 15%);
+  --color-zl-info-on:     var(--color-white);
+
+  /* Muted */
+  --color-zl-muted:        var(--color-gray-500);
+  --color-zl-muted-strong: color-mix(in oklab, var(--color-zl-muted), black 30%);
+  --color-zl-muted-bg:     var(--color-zl-muted);
+  --color-zl-muted-hover:  color-mix(in oklab, var(--color-zl-muted-bg), black 15%);
+  --color-zl-muted-on:     var(--color-white);
+}

package/dist/styles/scrollbar.css

@@ -0,0 +1,17 @@
+/* Global Scrollbar */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(228, 231, 234, 0.5);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.75);
+}

package/dist/styles.css

@@ -1,54 +1,7 @@
+@import "./styles/colors.css";
+@import "./styles/scrollbar.css";
+@import "./styles/ag-grid.css";
+
 /* Makes the consumer's Tailwind scan the component classes. The path is
    relative to this file, so it works from core/ and from the copy in dist/. */
 @source "./";
-
-/* Global Scrollbar */
-::-webkit-scrollbar {
-  width: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(228, 231, 234, 0.5);
-  border-radius: 2px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(156, 163, 175, 0.75);
-}
-
-/* AG Grid Custom Styles */
-.ag-theme-alpine {
-  --ag-header-background-color: #f8fafc;
-  --ag-header-foreground-color: #334155;
-  --ag-header-cell-hover-background-color: #e2e8f0;
-  --ag-odd-row-background-color: #f8fafc;
-  --ag-row-hover-color: #e0f2fe;
-  --ag-selected-row-background-color: #dbeafe;
-  --ag-border-color: #e2e8f0;
-  --ag-font-family: inherit;
-  --ag-font-size: 14px;
-}
-
-.ag-theme-alpine .ag-header-cell {
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 12px;
-  letter-spacing: 0.05em;
-  border-right: 1px solid #475569;
-}
-
-.ag-theme-alpine .ag-header-cell:last-child {
-  border-right: none;
-}
-
-.ag-theme-alpine .ag-row {
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.ag-theme-alpine .ag-row:hover {
-  background-color: var(--ag-row-hover-color);
-}

package/package.json

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