@alexandregme/zljs 0.3.1

package/dist/index.js

@@ -0,0 +1,1354 @@
+"use client";
+import {
+  Error,
+  FormInput,
+  FormProvider,
+  Input
+} from "./chunk-WAQLH7A5.js";
+
+// core/icon/icon.tsx
+import * as LucideIcons from "lucide-react";
+import { SiWhatsapp, SiFacebook, SiInstagram, SiShopify } from "react-icons/si";
+import { Fragment, jsx } from "react/jsx-runtime";
+var brandIcons = {
+  SiWhatsapp,
+  SiFacebook,
+  SiInstagram,
+  SiShopify
+};
+var Icon = ({ name }) => {
+  const isBrand = name.startsWith("Si");
+  const IconComponent = isBrand ? brandIcons[name] : LucideIcons[name];
+  if (!IconComponent) return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx("span", { "data-testid": name, children: /* @__PURE__ */ jsx(IconComponent, { size: 16 }) });
+};
+
+// core/button/button.styles.ts
+import { tv } from "tailwind-variants";
+var button = tv({
+  base: "cursor-pointer font-medium focus:outline-none 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 focus:ring-2 focus:ring-offset-2",
+      icon: "p-1 bg-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:ring-gray-500 rounded-md focus:ring-2 focus:ring-offset-2",
+      ghost: "px-3 py-2 gap-3 text-sm bg-transparent text-neutral-400 hover:text-white hover:bg-neutral-800 rounded-md focus-visible:ring-2 focus-visible:ring-neutral-600",
+      link: "text-xs underline bg-transparent hover:no-underline"
+    },
+    color: {
+      primary: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500",
+      success: "bg-green-600 hover:bg-green-700 focus:ring-green-500",
+      danger: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
+      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: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "link",
+      color: "primary",
+      class: "bg-transparent text-blue-600 hover:text-blue-800"
+    },
+    {
+      variant: "link",
+      color: "danger",
+      class: "bg-transparent text-red-600 hover:text-red-800"
+    },
+    {
+      variant: "link",
+      color: "none",
+      class: "text-slate-500 hover:text-slate-700"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    color: "primary"
+  }
+});
+
+// core/button/button.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Button = ({
+  children,
+  type = "button",
+  variant: variantProp,
+  color = "primary",
+  icon,
+  iconPosition = "left",
+  disabled = false,
+  "aria-label": ariaLabel,
+  onClick
+}) => {
+  const isIconOnly = icon && !children;
+  const variant = variantProp ?? (isIconOnly ? "icon" : "default");
+  const renderContent = () => {
+    if (!icon) {
+      return children;
+    }
+    const iconElement = /* @__PURE__ */ jsx2(Icon, { name: icon });
+    if (isIconOnly) {
+      return iconElement;
+    }
+    return iconPosition === "left" ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+      iconElement,
+      children
+    ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+      children,
+      iconElement
+    ] });
+  };
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type,
+      disabled,
+      onClick,
+      "aria-label": ariaLabel,
+      className: button({
+        variant,
+        color: variant === "icon" || variant === "ghost" ? "none" : color
+      }),
+      children: renderContent()
+    }
+  );
+};
+
+// core/data-grid/data-grid.tsx
+import {
+  AllCommunityModule,
+  ModuleRegistry,
+  themeAlpine
+} from "ag-grid-community";
+import { AgGridReact } from "ag-grid-react";
+import { useState as useState2, useCallback } from "react";
+
+// core/data-grid/data-grid-toolbar.tsx
+import { useState } from "react";
+
+// core/forms/checkbox/checkbox.tsx
+import { useId } from "react";
+
+// core/forms/checkbox/checkbox.styles.ts
+import { tv as tv2 } from "tailwind-variants";
+var wrapper = tv2({
+  base: "flex flex-col gap-1"
+});
+var innerWrapper = tv2({
+  base: "flex items-center gap-2"
+});
+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"
+});
+var label = tv2({
+  base: "text-sm text-gray-700 select-none cursor-pointer"
+});
+
+// core/forms/checkbox/checkbox.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Checkbox = ({
+  label: labelText,
+  checked,
+  disabled,
+  error,
+  onChange
+}) => {
+  const id = useId();
+  return /* @__PURE__ */ jsxs2("div", { className: wrapper(), children: [
+    /* @__PURE__ */ jsxs2("div", { className: innerWrapper(), children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          checked,
+          disabled,
+          onChange,
+          className: checkbox()
+        }
+      ),
+      /* @__PURE__ */ jsx3("label", { htmlFor: id, className: label(), children: labelText })
+    ] }),
+    error && /* @__PURE__ */ jsx3(Error, { message: error })
+  ] });
+};
+
+// core/forms/form/form.styles.ts
+import { tv as tv3 } from "tailwind-variants";
+var fieldset = tv3({
+  base: "border-none p-0"
+});
+
+// core/forms/form/form.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Form = ({ children, onSubmit, disabled }) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.(event);
+  };
+  return /* @__PURE__ */ jsx4("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsx4("fieldset", { disabled, className: fieldset(), children }) });
+};
+
+// core/forms/radio/radio.tsx
+import { useId as useId2 } from "react";
+
+// core/forms/radio/radio.styles.ts
+import { tv as tv4 } from "tailwind-variants";
+var wrapper2 = tv4({
+  base: "flex items-center gap-2"
+});
+var radio = tv4({
+  base: "w-4 h-4 text-blue-600 border-gray-300 focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed"
+});
+var label2 = tv4({
+  base: "text-sm text-gray-700 select-none cursor-pointer"
+});
+
+// core/forms/radio/radio.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Radio = ({
+  label: labelText,
+  name,
+  value,
+  checked,
+  disabled,
+  onChange
+}) => {
+  const id = useId2();
+  return /* @__PURE__ */ jsxs3("div", { className: wrapper2(), children: [
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        id,
+        type: "radio",
+        name,
+        value,
+        checked,
+        disabled,
+        onChange,
+        className: radio()
+      }
+    ),
+    /* @__PURE__ */ jsx5("label", { htmlFor: id, className: label2(), children: labelText })
+  ] });
+};
+
+// core/forms/select/select.tsx
+import { useId as useId3 } from "react";
+
+// core/forms/select/select.styles.ts
+import { tv as tv5 } from "tailwind-variants";
+var wrapper3 = tv5({
+  base: "flex flex-col gap-1"
+});
+var label3 = tv5({
+  base: "text-sm font-medium text-gray-700"
+});
+var select = tv5({
+  base: "px-3 py-2 border border-gray-300 rounded-md text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+});
+
+// core/forms/select/select.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var Select = ({
+  label: labelText,
+  options,
+  value,
+  placeholder,
+  disabled,
+  error,
+  onChange
+}) => {
+  const id = useId3();
+  return /* @__PURE__ */ jsxs4("div", { className: wrapper3(), children: [
+    /* @__PURE__ */ jsx6("label", { htmlFor: id, className: label3(), children: labelText }),
+    /* @__PURE__ */ jsxs4(
+      "select",
+      {
+        id,
+        value,
+        disabled,
+        onChange,
+        className: select(),
+        children: [
+          placeholder && /* @__PURE__ */ jsx6("option", { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx6("option", { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx6(Error, { message: error })
+  ] });
+};
+
+// core/forms/text-area/text-area.tsx
+import { useId as useId4 } from "react";
+
+// core/forms/text-area/text-area.styles.ts
+import { tv as tv6 } from "tailwind-variants";
+var wrapper4 = tv6({
+  base: "flex flex-col gap-1"
+});
+var label4 = tv6({
+  base: "text-sm font-medium text-gray-700"
+});
+var textarea = tv6({
+  base: "px-3 py-2 border border-gray-300 rounded-md text-sm resize-vertical focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+});
+
+// core/forms/text-area/text-area.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var TextArea = ({
+  label: labelText,
+  placeholder,
+  value,
+  rows = 3,
+  error,
+  disabled,
+  onChange
+}) => {
+  const id = useId4();
+  return /* @__PURE__ */ jsxs5("div", { className: wrapper4(), children: [
+    /* @__PURE__ */ jsx7("label", { htmlFor: id, className: label4(), children: labelText }),
+    /* @__PURE__ */ jsx7(
+      "textarea",
+      {
+        id,
+        placeholder,
+        value,
+        rows,
+        disabled,
+        onChange,
+        className: textarea()
+      }
+    ),
+    error && /* @__PURE__ */ jsx7(Error, { message: error })
+  ] });
+};
+
+// core/data-grid/data-grid-toolbar.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var DataGridToolbar = ({ gridApi }) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const handleSearch = () => {
+    gridApi?.setGridOption("quickFilterText", searchTerm);
+  };
+  const handleClear = () => {
+    setSearchTerm("");
+    gridApi?.setGridOption("quickFilterText", "");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "flex items-center gap-2 mb-3",
+      "data-testid": "data-grid-toolbar",
+      children: [
+        /* @__PURE__ */ jsx8(
+          Input,
+          {
+            "aria-label": "Buscar na tabela",
+            placeholder: "Buscar...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx8(Button, { icon: "Search", color: "primary", onClick: handleSearch, children: "Buscar" }),
+        /* @__PURE__ */ jsx8(Button, { icon: "X", color: "danger", onClick: handleClear, children: "Limpar" })
+      ]
+    }
+  );
+};
+
+// core/tag/tag.styles.ts
+import { tv as tv7 } from "tailwind-variants";
+var tag = tv7({
+  base: "inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium",
+  variants: {
+    color: {
+      blue: "bg-blue-100 text-blue-700",
+      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"
+    }
+  },
+  defaultVariants: {
+    color: "blue"
+  }
+});
+
+// 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: [
+    children,
+    onRemove && /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        className: "ml-1 hover:opacity-70 focus:outline-none",
+        "aria-label": "Remover",
+        children: "\xD7"
+      }
+    )
+  ] });
+};
+
+// core/data-grid/data-grid-status-bar.tsx
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var DataGridStatusBar = ({
+  totalRows,
+  displayedRows,
+  activeFilters,
+  gridApi
+}) => {
+  const isFiltered = displayedRows !== totalRows || activeFilters.length > 0;
+  const handleClearFilter = (column) => {
+    if (!gridApi) return;
+    const filterInstance = gridApi.getColumnFilterInstance(column);
+    if (filterInstance) {
+      filterInstance.then((filter) => {
+        filter?.setModel(null);
+        gridApi.onFilterChanged();
+      });
+    }
+  };
+  const handleClearAllFilters = () => {
+    if (!gridApi) return;
+    gridApi.setFilterModel(null);
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 px-2 py-1.5 bg-slate-100 border border-slate-200 rounded text-sm text-slate-600 mb-2", children: [
+    /* @__PURE__ */ jsx10("span", { className: "font-medium", children: isFiltered ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("span", { className: "text-blue-600", children: displayedRows }),
+      /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: " / " }),
+      /* @__PURE__ */ jsx10("span", { children: totalRows }),
+      /* @__PURE__ */ jsx10("span", { className: "text-slate-500 ml-1", children: "registros" })
+    ] }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("span", { children: totalRows }),
+      /* @__PURE__ */ jsx10("span", { className: "text-slate-500 ml-1", children: "registros" })
+    ] }) }),
+    activeFilters.length > 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("span", { className: "text-slate-300", children: "|" }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 flex-wrap", children: [
+        /* @__PURE__ */ jsx10("span", { className: "text-slate-500", children: "Filtros:" }),
+        activeFilters.map((filter) => /* @__PURE__ */ jsxs8(
+          Tag,
+          {
+            color: "blue",
+            onRemove: () => handleClearFilter(filter.column),
+            children: [
+              /* @__PURE__ */ jsxs8("span", { className: "font-medium", children: [
+                filter.headerName,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx10("span", { children: filter.value })
+            ]
+          },
+          filter.column
+        )),
+        /* @__PURE__ */ jsx10(Button, { variant: "link", color: "none", onClick: handleClearAllFilters, children: "Limpar todos" })
+      ] })
+    ] })
+  ] });
+};
+
+// core/data-grid/data-grid.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+ModuleRegistry.registerModules([AllCommunityModule]);
+var tailwind = {
+  slate: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b"
+  },
+  sky: {
+    50: "#f0f9ff",
+    100: "#e0f2fe"
+  },
+  blue: {
+    100: "#dbeafe"
+  }
+};
+var customTheme = themeAlpine.withParams({
+  headerBackgroundColor: tailwind.slate[700],
+  headerTextColor: tailwind.slate[50],
+  oddRowBackgroundColor: tailwind.slate[50],
+  rowHoverColor: tailwind.sky[100],
+  selectedRowBackgroundColor: tailwind.blue[100],
+  borderColor: tailwind.slate[200],
+  headerColumnBorder: tailwind.slate[600],
+  fontSize: 13,
+  headerHeight: 36,
+  rowHeight: 32,
+  cellHorizontalPadding: 8
+});
+var DataGrid = ({
+  columns,
+  data,
+  showSearch = true
+}) => {
+  const [gridApi, setGridApi] = useState2(null);
+  const [displayedRows, setDisplayedRows] = useState2(0);
+  const [activeFilters, setActiveFilters] = useState2([]);
+  const updateFilterState = useCallback(
+    (api) => {
+      setDisplayedRows(api.getDisplayedRowCount());
+      const filterModel = api.getFilterModel();
+      const filters = [];
+      if (filterModel) {
+        Object.entries(filterModel).forEach(([colId, model]) => {
+          const colDef = columns.find((c) => c.field === colId);
+          const headerName = colDef?.headerName || colId;
+          const filterValue = model?.filter || model?.values?.join(", ") || JSON.stringify(model);
+          filters.push({
+            column: colId,
+            headerName,
+            value: filterValue
+          });
+        });
+      }
+      setActiveFilters(filters);
+    },
+    [columns]
+  );
+  const handleGridReady = (params) => {
+    setGridApi(params.api);
+    setDisplayedRows(params.api.getDisplayedRowCount());
+  };
+  const handleFilterChanged = useCallback(() => {
+    if (gridApi) {
+      updateFilterState(gridApi);
+    }
+  }, [gridApi, updateFilterState]);
+  const handleModelUpdated = useCallback(() => {
+    if (gridApi) {
+      setDisplayedRows(gridApi.getDisplayedRowCount());
+    }
+  }, [gridApi]);
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      "data-testid": "data-grid",
+      className: "grid grid-rows-[auto_auto_1fr] grid-cols-1 h-full w-full",
+      children: [
+        showSearch && /* @__PURE__ */ jsx11(DataGridToolbar, { gridApi }),
+        /* @__PURE__ */ jsx11(
+          DataGridStatusBar,
+          {
+            totalRows: data.length,
+            displayedRows,
+            activeFilters,
+            gridApi
+          }
+        ),
+        /* @__PURE__ */ jsx11("div", { className: "ag-grid h-full w-full z-0", children: /* @__PURE__ */ jsx11(
+          AgGridReact,
+          {
+            theme: customTheme,
+            columnDefs: columns,
+            rowData: data,
+            domLayout: "normal",
+            autoSizeStrategy: { type: "fitCellContents" },
+            onGridReady: handleGridReady,
+            onFilterChanged: handleFilterChanged,
+            onModelUpdated: handleModelUpdated,
+            defaultColDef: {
+              filterParams: {
+                buttons: ["reset", "apply"]
+              }
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// core/stats-card/stats-card.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var colorClasses = {
+  blue: {
+    card: "bg-blue-100",
+    label: "text-blue-800",
+    value: "text-blue-900"
+  },
+  red: {
+    card: "bg-red-100",
+    label: "text-red-800",
+    value: "text-red-900"
+  },
+  yellow: {
+    card: "bg-yellow-100",
+    label: "text-yellow-800",
+    value: "text-yellow-900"
+  },
+  green: {
+    card: "bg-green-100",
+    label: "text-green-800",
+    value: "text-green-900"
+  },
+  gray: {
+    card: "bg-gray-100",
+    label: "text-gray-800",
+    value: "text-gray-900"
+  },
+  orange: {
+    card: "bg-orange-100",
+    label: "text-orange-800",
+    value: "text-orange-900"
+  }
+};
+var StatsCard = ({ label: label5, value, color }) => {
+  const styles = colorClasses[color];
+  return /* @__PURE__ */ jsxs10("div", { "data-testid": "stats-card", className: `${styles.card} p-4 rounded-lg`, children: [
+    /* @__PURE__ */ jsx12("p", { className: `text-sm ${styles.label}`, children: label5 }),
+    /* @__PURE__ */ jsx12("p", { className: `text-3xl font-bold ${styles.value}`, children: value })
+  ] });
+};
+
+// core/modal/modal.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+
+// core/modal/modal.styles.ts
+import { tv as tv8 } from "tailwind-variants";
+var overlay = tv8({
+  base: "fixed inset-0 bg-black/50"
+});
+var content = tv8({
+  base: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-lg p-6 w-full focus:outline-none max-h-[90vh] overflow-y-auto",
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-2xl",
+      xl: "max-w-4xl",
+      full: "max-w-6xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var header = tv8({
+  base: "flex items-start justify-between"
+});
+var title = tv8({
+  base: "text-lg font-semibold text-gray-900 m-0"
+});
+var description = tv8({
+  base: "text-sm text-gray-600 mt-2"
+});
+var body = tv8({
+  base: "mt-4"
+});
+
+// core/modal/modal.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var Modal = ({
+  open,
+  onClose,
+  title: title2,
+  description: description2,
+  children,
+  size = "md"
+}) => {
+  return /* @__PURE__ */ jsx13(Dialog.Root, { open, onOpenChange: (isOpen) => !isOpen && onClose(), children: /* @__PURE__ */ jsxs11(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx13(Dialog.Overlay, { className: overlay() }),
+    /* @__PURE__ */ jsxs11(
+      Dialog.Content,
+      {
+        className: content({ size }),
+        ...!description2 && { "aria-describedby": void 0 },
+        children: [
+          /* @__PURE__ */ jsxs11("div", { className: header(), children: [
+            /* @__PURE__ */ jsx13(Dialog.Title, { className: title(), children: title2 }),
+            /* @__PURE__ */ jsx13(Button, { icon: "X", "aria-label": "Close", onClick: onClose })
+          ] }),
+          description2 && /* @__PURE__ */ jsx13(Dialog.Description, { className: description(), children: description2 }),
+          children && /* @__PURE__ */ jsx13("div", { className: body(), children })
+        ]
+      }
+    )
+  ] }) });
+};
+
+// core/whatsapp-button/whatsapp-button.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var WhatsAppButton = ({
+  phone,
+  message,
+  children = "WhatsApp",
+  onClick
+}) => {
+  const handleClick = () => {
+    const userAgent = navigator?.userAgent ?? "";
+    const isMobile = /Android|iPhone|iPad|iPod/i.test(userAgent);
+    const hasMessage = Boolean(message);
+    const encodedMessage = hasMessage ? encodeURIComponent(message) : "";
+    const whatsappUrl = hasMessage ? `https://wa.me/${phone}?text=${encodedMessage}` : `https://wa.me/${phone}`;
+    const whatsappBusinessUrl = hasMessage ? `whatsapp-business://send?phone=${phone}&text=${encodedMessage}` : `whatsapp-business://send?phone=${phone}`;
+    if (isMobile) {
+      if (window.location?.assign) {
+        window.location.assign(whatsappBusinessUrl);
+      } else {
+        window.location.href = whatsappBusinessUrl;
+      }
+    } else {
+      window.open(whatsappUrl, "_blank");
+    }
+    onClick?.();
+  };
+  return /* @__PURE__ */ jsx14(Button, { color: "success", icon: "SiWhatsapp", onClick: handleClick, children });
+};
+
+// core/heading/heading.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var levelStyles = {
+  1: "text-3xl font-bold",
+  2: "text-2xl font-bold",
+  3: "text-xl font-semibold",
+  4: "text-lg font-semibold",
+  5: "text-base font-medium",
+  6: "text-sm font-medium"
+};
+var colorStyles = {
+  primary: "text-blue-600",
+  success: "text-green-600",
+  danger: "text-red-600",
+  warning: "text-yellow-600",
+  info: "text-sky-600",
+  none: ""
+};
+var tags = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+var Heading = ({ children, level = 1, color }) => {
+  const Tag2 = tags[level];
+  const className = [levelStyles[level], color && colorStyles[color]].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx15(Tag2, { className, children });
+};
+
+// core/sidebar/sidebar.tsx
+import { useState as useState3 } from "react";
+import Link from "next/link";
+
+// core/sidebar/sidebar.styles.ts
+import { tv as tv9 } from "tailwind-variants";
+var sidebar = tv9({
+  base: "h-screen bg-neutral-800 text-neutral-300 flex flex-col overflow-hidden transition-all duration-200",
+  variants: {
+    collapsed: {
+      true: "w-14",
+      false: "w-64"
+    }
+  },
+  defaultVariants: {
+    collapsed: false
+  }
+});
+var nav = tv9({
+  base: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
+});
+var header2 = tv9({
+  base: "shrink-0 border-b border-neutral-600/50 grid p-2"
+});
+var section = tv9({
+  base: "border-b border-neutral-600/50 last:border-b-0 grid gap-1 p-2"
+});
+var item = tv9({
+  base: "flex w-full items-center rounded-md text-sm whitespace-nowrap transition-colors cursor-pointer p-1",
+  variants: {
+    active: {
+      true: "bg-neutral-700 text-white",
+      false: "text-neutral-400 hover:bg-neutral-700/50 hover:text-white"
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+});
+var itemIcon = tv9({
+  base: "p-2"
+});
+var itemLabel = tv9({
+  base: "truncate transition-all duration-200",
+  variants: {
+    collapsed: {
+      true: "opacity-0 w-0",
+      false: "opacity-100"
+    }
+  },
+  defaultVariants: {
+    collapsed: false
+  }
+});
+var footer = tv9({
+  base: "shrink-0 border-t border-neutral-600/50 p-3 flex items-center gap-3 whitespace-nowrap"
+});
+var avatar = tv9({
+  base: "shrink-0 w-8 h-8 rounded-full bg-neutral-600 text-white text-xs font-medium flex items-center justify-center"
+});
+var userInfo = tv9({
+  base: "flex flex-col min-w-0"
+});
+var userName = tv9({
+  base: "text-sm text-white truncate"
+});
+var userEmail = tv9({
+  base: "text-xs text-neutral-400"
+});
+var toggleButton = tv9({
+  base: "shrink-0 border-t border-neutral-600/50 grid p-2 [&>button]:justify-start [&>button]:overflow-hidden [&>button]:whitespace-nowrap"
+});
+
+// core/sidebar/sidebar.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var getInitials = (name) => {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  return (parts[0]?.[0] ?? "").toUpperCase();
+};
+var Sidebar = ({
+  sections,
+  user,
+  activeHref,
+  defaultCollapsed = false,
+  collapseLabel,
+  homeHref = "/",
+  homeLabel,
+  onLogout
+}) => {
+  const [collapsed, setCollapsed] = useState3(defaultCollapsed);
+  const initials = getInitials(user.name);
+  return /* @__PURE__ */ jsxs12("aside", { className: sidebar({ collapsed }), children: [
+    homeHref && /* @__PURE__ */ jsx16(
+      Link,
+      {
+        href: homeHref,
+        className: header2(),
+        "aria-label": homeLabel || "Home",
+        children: /* @__PURE__ */ jsxs12("span", { className: item({ active: homeHref === activeHref }), children: [
+          /* @__PURE__ */ jsx16("span", { className: itemIcon(), children: /* @__PURE__ */ jsx16(Icon, { name: "Home" }) }),
+          /* @__PURE__ */ jsx16("span", { className: itemLabel({ collapsed }), children: homeLabel })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx16("nav", { "aria-label": "Main navigation", className: nav(), children: sections.map((sectionData, i) => /* @__PURE__ */ jsx16("div", { className: section(), children: sectionData.items.map((sidebarItem) => {
+      const isActive = sidebarItem.href === activeHref;
+      return /* @__PURE__ */ jsxs12(
+        Link,
+        {
+          href: sidebarItem.href,
+          className: item({ active: isActive }),
+          ...isActive && { "aria-current": "page" },
+          children: [
+            /* @__PURE__ */ jsx16("span", { className: itemIcon(), children: /* @__PURE__ */ jsx16(Icon, { name: sidebarItem.icon }) }),
+            /* @__PURE__ */ jsx16("span", { className: itemLabel({ collapsed }), children: sidebarItem.label })
+          ]
+        },
+        sidebarItem.href
+      );
+    }) }, i)) }),
+    /* @__PURE__ */ jsxs12("div", { className: footer(), children: [
+      /* @__PURE__ */ jsx16("div", { className: avatar(), children: initials }),
+      /* @__PURE__ */ jsxs12("div", { className: userInfo(), children: [
+        /* @__PURE__ */ jsx16("span", { className: userName(), children: user.name }),
+        /* @__PURE__ */ jsx16("span", { className: userEmail(), children: user.email })
+      ] }),
+      /* @__PURE__ */ jsx16(
+        Button,
+        {
+          variant: "ghost",
+          icon: "LogOut",
+          "aria-label": "Logout",
+          onClick: onLogout
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx16("div", { className: toggleButton(), children: /* @__PURE__ */ jsx16(
+      Button,
+      {
+        variant: "ghost",
+        icon: collapsed ? "ChevronRight" : "ChevronLeft",
+        "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+        onClick: () => setCollapsed(!collapsed),
+        children: collapseLabel
+      }
+    ) })
+  ] });
+};
+
+// core/toaster/toaster.tsx
+import { useEffect } from "react";
+import { Toaster as SonnerToaster, toast } from "sonner";
+
+// core/state/toast/toast.store.ts
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+var toastId = 0;
+var useToastStore = create()(
+  devtools(
+    (set, get) => ({
+      toasts: [],
+      addToast: (message, type = "error") => {
+        const id = ++toastId;
+        set(
+          (s) => ({ toasts: [...s.toasts, { id, message, type }] }),
+          false,
+          "addToast"
+        );
+        return id;
+      },
+      removeToast: (id) => set(
+        (s) => ({ toasts: s.toasts.filter((t) => t.id !== id) }),
+        false,
+        "removeToast"
+      ),
+      success: (message) => get().addToast(message, "success"),
+      error: (message) => get().addToast(message, "error"),
+      info: (message) => get().addToast(message, "info"),
+      warning: (message) => get().addToast(message, "warning")
+    }),
+    { name: "zljs", store: "toast" }
+  )
+);
+
+// core/toaster/toaster.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Toaster = () => {
+  const toasts = useToastStore((s) => s.toasts);
+  const removeToast = useToastStore((s) => s.removeToast);
+  useEffect(() => {
+    toasts.forEach((t) => {
+      toast[t.type](t.message, {
+        id: t.id,
+        onDismiss: () => removeToast(t.id)
+      });
+      removeToast(t.id);
+    });
+  }, [toasts, removeToast]);
+  return /* @__PURE__ */ jsx17(
+    SonnerToaster,
+    {
+      position: "bottom-right",
+      richColors: true,
+      closeButton: true,
+      duration: 4e3,
+      expand: true,
+      visibleToasts: 5
+    }
+  );
+};
+
+// core/toaster/index.ts
+import { toast as toast2 } from "sonner";
+
+// core/index.ts
+import { toast as toast3 } from "sonner";
+
+// core/state/app/app.store.ts
+import { create as create2 } from "zustand";
+import { devtools as devtools2 } from "zustand/middleware";
+var useAppStore = create2()(
+  devtools2(
+    (set) => ({
+      fetchingCalls: 0,
+      fetching: false,
+      startFetching: () => set(
+        (s) => {
+          const fetchingCalls = s.fetchingCalls + 1;
+          return { fetchingCalls, fetching: true };
+        },
+        false,
+        "startFetching"
+      ),
+      finishFetching: () => set(
+        (s) => {
+          const fetchingCalls = Math.max(0, s.fetchingCalls - 1);
+          return { fetchingCalls, fetching: fetchingCalls > 0 };
+        },
+        false,
+        "finishFetching"
+      )
+    }),
+    { name: "zljs", store: "app" }
+  )
+);
+
+// core/state/modal/modal.store.ts
+import { create as create3 } from "zustand";
+import { devtools as devtools3 } from "zustand/middleware";
+var useModalStore = create3()(
+  devtools3(
+    (set, get) => ({
+      modals: [],
+      openModal: (name) => set((s) => ({ modals: [...s.modals, { name }] }), false, "openModal"),
+      openModalWithPayload: (name, payload) => set(
+        (s) => ({ modals: [...s.modals, { name, payload }] }),
+        false,
+        "openModalWithPayload"
+      ),
+      closeModal: (name) => set(
+        (s) => ({ modals: s.modals.filter((m) => m.name !== name) }),
+        false,
+        "closeModal"
+      ),
+      isOpen: (name) => get().modals.some((m) => m.name === name),
+      getPayload: (name) => get().modals.find((m) => m.name === name)?.payload
+    }),
+    { name: "zljs", store: "modal" }
+  )
+);
+
+// core/state/global-state/global-state.tsx
+import { Provider } from "react-redux";
+import {
+  combineReducers,
+  configureStore
+} from "@reduxjs/toolkit";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var store;
+var persistentReducers = {};
+var dynamicReducers = {};
+var createReducer = (coreReducers) => combineReducers({
+  ...dynamicReducers,
+  ...persistentReducers,
+  ...coreReducers
+});
+var createStore = (reducers, middlewares, preloadedState, coreReducers) => {
+  persistentReducers = reducers;
+  if (!store) {
+    store = configureStore({
+      reducer: createReducer(coreReducers),
+      middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middlewares),
+      preloadedState
+    });
+    store.setDynamicReducers = (newDynamicReducers = {}) => {
+      dynamicReducers = newDynamicReducers;
+      store.replaceReducer(createReducer(coreReducers));
+    };
+  } else {
+    store.replaceReducer(createReducer(coreReducers));
+  }
+  return store;
+};
+var GlobalState = ({
+  children,
+  reducers = {},
+  middlewares = [],
+  preloadedState = {},
+  coreReducers = {}
+}) => {
+  const reduxStore = createStore(
+    reducers,
+    middlewares,
+    preloadedState,
+    coreReducers
+  );
+  return /* @__PURE__ */ jsx18(Provider, { store: reduxStore, children });
+};
+
+// core/state/router/router.store.ts
+import { create as create4 } from "zustand";
+import { devtools as devtools4 } from "zustand/middleware";
+
+// core/state/router/router.utils.ts
+var splitURLasPath = (urlAsPath) => {
+  let queryWithoutPath = "";
+  if (urlAsPath?.indexOf("?") >= 0) {
+    const [, query] = urlAsPath.split("?");
+    queryWithoutPath = query ?? "";
+  }
+  if (urlAsPath?.indexOf("#") >= 0) {
+    const [, query] = urlAsPath.split("#");
+    queryWithoutPath = query ?? "";
+  }
+  const parametersAsObject = {};
+  if (queryWithoutPath.length > 0) {
+    queryWithoutPath.split("&").forEach((p) => {
+      const [parameter, value] = p.split("=");
+      if (parameter) {
+        parametersAsObject[parameter] = value ?? "";
+      }
+    });
+  }
+  return parametersAsObject;
+};
+
+// core/state/router/router.store.ts
+var useRouterStore = create4()(
+  devtools4(
+    (set) => ({
+      urlAsPath: "/",
+      query: {},
+      setRoute: (urlAsPath) => set({ urlAsPath, query: splitURLasPath(urlAsPath) }, false, "setRoute")
+    }),
+    { name: "zljs", store: "router" }
+  )
+);
+
+// core/state/page/page.store.ts
+import { create as create5 } from "zustand";
+import { devtools as devtools5 } from "zustand/middleware";
+var usePageStore = create5()(
+  devtools5(
+    (set) => ({
+      title: "",
+      setTitle: (title2) => set({ title: title2 }, false, "setTitle")
+    }),
+    { name: "zljs", store: "page" }
+  )
+);
+
+// core/page-wrapper/page-wrapper.tsx
+import { useEffect as useEffect2 } from "react";
+import { useDispatch, useStore } from "react-redux";
+import { useRouter } from "next/compat/router";
+import { Fragment as Fragment4, jsx as jsx19 } from "react/jsx-runtime";
+var PageWrapper = ({
+  reducers,
+  title: title2,
+  initPage,
+  children
+}) => {
+  const store2 = useStore();
+  const dispatch = useDispatch();
+  const router = useRouter();
+  const setTitle = usePageStore((s) => s.setTitle);
+  useEffect2(() => {
+    if (reducers) {
+      store2.setDynamicReducers?.(reducers);
+    }
+  }, [reducers]);
+  useEffect2(() => {
+    setTitle(title2);
+  }, [router?.asPath, title2, setTitle]);
+  useEffect2(() => {
+    if (initPage) {
+      initPage(dispatch);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx19(Fragment4, { children });
+};
+
+// core/connected-modal/connected-modal.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ConnectedModal = ({
+  modalId,
+  title: title2,
+  description: description2,
+  size,
+  children
+}) => {
+  const isOpen = useModalStore((s) => s.isOpen(modalId));
+  const closeModal = useModalStore((s) => s.closeModal);
+  return /* @__PURE__ */ jsx20(
+    Modal,
+    {
+      open: isOpen,
+      onClose: () => closeModal(modalId),
+      title: title2,
+      description: description2,
+      size,
+      children
+    }
+  );
+};
+
+// core/spinner/spinner.tsx
+import { LoaderCircle } from "lucide-react";
+
+// core/spinner/spinner.styles.ts
+import { tv as tv10 } from "tailwind-variants";
+var spinner = tv10({
+  base: "animate-spin w-20 h-20 text-white stroke-[0.3]"
+});
+
+// core/spinner/spinner.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Spinner = ({ className }) => /* @__PURE__ */ jsx21(LoaderCircle, { className: spinner({ className }), strokeWidth: 1 });
+
+// core/loader/loader.styles.ts
+import { tv as tv11 } from "tailwind-variants";
+var overlay2 = tv11({
+  base: "flex fixed justify-center items-center w-full h-full bg-black/20 z-50"
+});
+
+// core/loader/loader.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Loader = ({ label: label5 = "Loading" }) => {
+  const fetching = useAppStore((s) => s.fetching);
+  if (!fetching) return null;
+  return /* @__PURE__ */ jsx22("div", { role: "status", "aria-label": label5, className: overlay2(), children: /* @__PURE__ */ jsx22(Spinner, {}) });
+};
+
+// core/app-wrapper/app-wrapper.tsx
+import { useEffect as useEffect3 } from "react";
+import { useRouter as useRouter2 } from "next/compat/router";
+import { SessionProvider } from "next-auth/react";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+var AppWrapper = ({
+  children,
+  reducers,
+  middlewares,
+  coreReducers
+}) => {
+  const router = useRouter2();
+  const setRoute = useRouterStore((s) => s.setRoute);
+  useEffect3(() => {
+    if (router?.isReady && router.asPath) {
+      setRoute(router.asPath);
+    }
+  }, [router?.isReady, router?.asPath, setRoute]);
+  return /* @__PURE__ */ jsx23(SessionProvider, { children: /* @__PURE__ */ jsxs13(
+    GlobalState,
+    {
+      reducers,
+      middlewares,
+      coreReducers,
+      children: [
+        /* @__PURE__ */ jsx23(Loader, {}),
+        /* @__PURE__ */ jsx23(Toaster, {}),
+        children
+      ]
+    }
+  ) });
+};
+
+// core/document-wrapper/document-wrapper.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var DocumentWrapper = ({
+  children,
+  lang = "pt-BR",
+  className
+}) => {
+  return /* @__PURE__ */ jsx24("html", { lang, children: /* @__PURE__ */ jsx24("body", { className, children }) });
+};
+
+// core/http/http.client.ts
+import axios from "axios";
+var HTTPClient = class {
+  constructor(config) {
+    this.baseUrl = config?.baseUrl ?? "/api";
+    this.headers = config?.headers ?? {};
+  }
+  async request(method, url, config) {
+    const silent = config?.silent ?? false;
+    const headers = { ...this.headers, ...config?.headers };
+    if (!silent) useAppStore.getState().startFetching();
+    try {
+      let response;
+      switch (method) {
+        case "get":
+          response = await axios.get(`${this.baseUrl}${url}`, {
+            headers,
+            params: config?.params
+          });
+          break;
+        case "post":
+          response = await axios.post(
+            `${this.baseUrl}${url}`,
+            config?.payload,
+            { headers }
+          );
+          break;
+        case "put":
+          response = await axios.put(`${this.baseUrl}${url}`, config?.payload, {
+            headers
+          });
+          break;
+        case "delete":
+          response = await axios.delete(`${this.baseUrl}${url}`, {
+            headers,
+            data: config?.payload
+          });
+          break;
+        case "patch":
+          response = await axios.patch(
+            `${this.baseUrl}${url}`,
+            config?.payload,
+            { headers }
+          );
+          break;
+      }
+      return response.data;
+    } catch (e) {
+      const error = e;
+      useToastStore.getState().error(`Something went wrong with the server - ${error.message}`);
+      return void 0;
+    } finally {
+      if (!silent) useAppStore.getState().finishFetching();
+    }
+  }
+  async get(url, config) {
+    return this.request("get", url, config);
+  }
+  async post(url, config) {
+    return this.request("post", url, config);
+  }
+  async put(url, config) {
+    return this.request("put", url, config);
+  }
+  async delete(url, config) {
+    return this.request("delete", url, config);
+  }
+  async patch(url, config) {
+    return this.request("patch", url, config);
+  }
+};
+export {
+  AppWrapper,
+  Button,
+  Checkbox,
+  ConnectedModal,
+  DataGrid,
+  DocumentWrapper,
+  Error,
+  Form,
+  FormInput,
+  FormProvider,
+  GlobalState,
+  HTTPClient,
+  Heading,
+  Icon,
+  Input,
+  Loader,
+  Modal,
+  PageWrapper,
+  Radio,
+  Select,
+  Sidebar,
+  Spinner,
+  StatsCard,
+  Tag,
+  TextArea,
+  Toaster,
+  WhatsAppButton,
+  splitURLasPath,
+  toast3 as toast,
+  useAppStore,
+  useModalStore,
+  usePageStore,
+  useRouterStore,
+  useToastStore
+};