@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-6ZCY4O5M.mjs

@@ -0,0 +1,63 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var cardVariantClasses = {
+  default: "bg-surface text-text border border-border shadow-sm",
+  outlined: "bg-surface text-text border border-border",
+  elevated: "bg-surface text-text border-transparent shadow-md",
+  filled: "bg-surface-secondary border-transparent text-text-secondary"
+};
+var cardPaddingClasses = {
+  none: "p-0",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8"
+};
+var Card = forwardRef(function Card2({ className, variant = "default", padding = "none", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg flex flex-col transition-all duration-normal",
+        cardVariantClasses[variant],
+        cardPaddingClasses[padding],
+        className
+      ),
+      ...props
+    }
+  );
+});
+Card.displayName = "Card";
+var CardHeader = forwardRef(function CardHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1 p-4", className), ...props });
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef(function CardTitle2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("font-bold leading-none tracking-tight text-lg text-text", className),
+      ...props,
+      children
+    }
+  );
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef(function CardDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-text-secondary", className), ...props });
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = forwardRef(function CardContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props });
+});
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef(function CardFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-4 pt-0", className), ...props });
+});
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/chunk-7364SUK6.mjs

@@ -0,0 +1,359 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { useState, useCallback, useMemo } from 'react';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/20/solid';
+import { ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_PAGE_SIZES = [10, 20, 50];
+function Pagination({
+  total,
+  page,
+  pageSize,
+  totalPages: propTotalPages,
+  hasNextPage: propHasNextPage,
+  hasPrevPage: propHasPrevPage,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZES,
+  showSizeChanger,
+  className
+}) {
+  const totalPages = propTotalPages ?? Math.max(1, Math.ceil(total / pageSize));
+  const canPrev = propHasPrevPage ?? page > 1;
+  const canNext = propHasNextPage ?? page < totalPages;
+  const pageNumbers = buildPageNumbers(page, totalPages);
+  const from = Math.min((page - 1) * pageSize + 1, total);
+  const to = Math.min(page * pageSize, total);
+  const showPicker = showSizeChanger ?? onPageSizeChange != null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col sm:flex-row items-center justify-between gap-3 py-3 px-4 border-t border-border bg-surface-secondary/50 rounded-b-xl text-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-text-secondary shrink-0", children: total === 0 ? "No items" : `${String(from)}\u2013${String(to)} of ${String(total)} items` }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap justify-center", children: [
+          showPicker && onPageSizeChange != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: "Rows:" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: pageSize,
+                "aria-label": "Rows per page",
+                onChange: (e) => {
+                  onPageSizeChange(Number(e.target.value));
+                },
+                className: "border border-border rounded-sm py-1 pl-2 pr-6 text-sm text-text bg-surface focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary cursor-pointer transition-all duration-normal",
+                children: pageSizeOptions.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s }, s))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              PageButton,
+              {
+                onClick: () => {
+                  onPageChange(1);
+                },
+                disabled: !canPrev,
+                "aria-label": "First page",
+                children: /* @__PURE__ */ jsx(ChevronDoubleLeftIcon, { className: "w-3.5 h-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              PageButton,
+              {
+                onClick: () => {
+                  onPageChange(page - 1);
+                },
+                disabled: !canPrev,
+                "aria-label": "Previous page",
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-3.5 h-3.5" })
+              }
+            ),
+            pageNumbers.map(
+              (num, idx) => num === "\u2026" ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "w-8 text-center text-text-muted/60 select-none",
+                  "aria-hidden": "true",
+                  children: "\u2026"
+                },
+                `ellipsis-${String(idx)}`
+              ) : /* @__PURE__ */ jsx(
+                PageButton,
+                {
+                  onClick: () => {
+                    onPageChange(num);
+                  },
+                  active: num === page,
+                  "aria-label": `Page ${String(num)}`,
+                  "aria-current": num === page ? "page" : void 0,
+                  children: num
+                },
+                num
+              )
+            ),
+            /* @__PURE__ */ jsx(
+              PageButton,
+              {
+                onClick: () => {
+                  onPageChange(page + 1);
+                },
+                disabled: !canNext,
+                "aria-label": "Next page",
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              PageButton,
+              {
+                onClick: () => {
+                  onPageChange(totalPages);
+                },
+                disabled: !canNext,
+                "aria-label": "Last page",
+                children: /* @__PURE__ */ jsx(ChevronDoubleRightIcon, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function PageButton({
+  children,
+  active = false,
+  disabled = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "min-w-[32px] h-8 px-2 rounded-sm font-medium transition-all duration-normal text-sm flex items-center justify-center",
+        active ? "bg-primary text-text-inverse shadow-sm" : "text-text-secondary hover:bg-hover active:bg-active",
+        disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function buildPageNumbers(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = [1];
+  if (current > 3) pages.push("\u2026");
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (current < total - 2) pages.push("\u2026");
+  pages.push(total);
+  return pages;
+}
+var cellPadding = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-3 text-sm",
+  lg: "px-5 py-4 text-base"
+};
+var headerPadding = {
+  sm: "px-3 py-2 text-xs",
+  md: "px-4 py-3 text-sm",
+  lg: "px-5 py-4 text-base"
+};
+function SortIcon({ direction }) {
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "inline-flex flex-col ml-1 -space-y-1.5", children: [
+    /* @__PURE__ */ jsx(
+      ChevronUpIcon,
+      {
+        className: cn(
+          "w-3.5 h-3.5 transition-all duration-normal",
+          direction === "asc" ? "text-primary" : "text-text-muted/30"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChevronDownIcon,
+      {
+        className: cn(
+          "w-3.5 h-3.5 transition-all duration-normal",
+          direction === "desc" ? "text-primary" : "text-text-muted/30"
+        )
+      }
+    )
+  ] });
+}
+function SkeletonRows({ cols, size }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 5 }).map((_, ri) => /* @__PURE__ */ jsx("tr", { children: Array.from({ length: cols }).map((__, ci) => /* @__PURE__ */ jsx("td", { className: cellPadding[size], children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-4 bg-surface-secondary rounded-sm animate-pulse",
+      style: { width: `${String(Math.floor(60 + Math.random() * 30))}%` }
+    }
+  ) }, ci)) }, ri)) });
+}
+function Table({
+  data,
+  columns,
+  rowKey,
+  loading = false,
+  emptyMessage = "No data",
+  striped = false,
+  bordered = false,
+  hoverable = true,
+  stickyHeader = false,
+  size = "md",
+  sortState: externalSort,
+  onSortChange,
+  className,
+  tableClassName,
+  pagination,
+  headerVariant = "light"
+}) {
+  const [internalSort, setInternalSort] = useState(null);
+  const activeSort = externalSort ?? internalSort;
+  const handleHeaderClick = useCallback(
+    (col) => {
+      if (!col.sortable) return;
+      const next = {
+        key: col.key,
+        direction: activeSort?.key === col.key && activeSort.direction === "asc" ? "desc" : "asc"
+      };
+      if (onSortChange) {
+        onSortChange(next);
+      } else {
+        setInternalSort(next);
+      }
+    },
+    [activeSort, onSortChange]
+  );
+  const sortedData = useMemo(() => {
+    if (!activeSort || onSortChange) return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[activeSort.key];
+      const bVal = b[activeSort.key];
+      const cmp = typeof aVal === "string" && typeof bVal === "string" ? aVal.localeCompare(bVal) : String(aVal).localeCompare(String(bVal));
+      return activeSort.direction === "asc" ? cmp : -cmp;
+    });
+  }, [data, activeSort, onSortChange]);
+  const isEmpty = !loading && sortedData.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full overflow-hidden rounded-xl border border-border bg-surface shadow-sm transition-colors duration-normal",
+        bordered && "border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: cn("w-full border-collapse", tableClassName), children: [
+          /* @__PURE__ */ jsx("thead", { className: cn(stickyHeader && "sticky top-0 z-dropdown"), children: /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: cn(
+                "border-b border-border transition-colors duration-normal",
+                headerVariant === "light" ? "bg-surface-secondary" : "bg-black"
+              ),
+              children: columns.map((col) => {
+                const isSorted = activeSort?.key === col.key;
+                const dir = isSorted ? activeSort.direction : null;
+                return /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    scope: "col",
+                    style: { width: col.width },
+                    "aria-sort": isSorted ? dir === "asc" ? "ascending" : "descending" : col.sortable ? "none" : void 0,
+                    className: cn(
+                      headerPadding[size],
+                      "font-black tracking-widest uppercase whitespace-nowrap select-none transition-all duration-normal",
+                      headerVariant === "light" ? "text-text-secondary" : "text-white",
+                      col.align === "center" && "text-center",
+                      col.align === "right" && "text-right",
+                      col.sortable && "cursor-pointer hover:bg-hover",
+                      headerVariant === "dark" && col.sortable && "hover:bg-white/10",
+                      bordered && "border border-border",
+                      col.headerClassName
+                    ),
+                    onClick: col.sortable ? () => {
+                      handleHeaderClick(col);
+                    } : void 0,
+                    onKeyDown: col.sortable ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleHeaderClick(col);
+                      }
+                    } : void 0,
+                    tabIndex: col.sortable ? 0 : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "flex items-center gap-1",
+                          col.align === "center" && "justify-center",
+                          col.align === "right" && "justify-end"
+                        ),
+                        children: [
+                          col.header,
+                          col.sortable && /* @__PURE__ */ jsx(SortIcon, { direction: dir })
+                        ]
+                      }
+                    )
+                  },
+                  col.key
+                );
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(SkeletonRows, { cols: columns.length, size }) : isEmpty ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: columns.length,
+              className: "py-16 text-center text-text-muted text-sm font-medium",
+              children: emptyMessage
+            }
+          ) }) : sortedData.map((row, ri) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: cn(
+                "border-b border-border-light last:border-0 transition-colors duration-fast",
+                striped && ri % 2 !== 0 && "bg-surface-secondary/40",
+                hoverable && "hover:bg-hover/60"
+              ),
+              children: columns.map((col) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: cn(
+                    cellPadding[size],
+                    "text-text font-medium",
+                    col.align === "center" && "text-center",
+                    col.align === "right" && "text-right",
+                    bordered && "border border-border",
+                    col.cellClassName
+                  ),
+                  children: col.render ? col.render(row, ri) : (() => {
+                    const v = row[col.key];
+                    if (v === null || v === void 0) return "";
+                    if (typeof v === "object") return JSON.stringify(v);
+                    return String(v);
+                  })()
+                },
+                col.key
+              ))
+            },
+            rowKey(row)
+          )) })
+        ] }) }),
+        pagination && /* @__PURE__ */ jsx(Pagination, { ...pagination })
+      ]
+    }
+  );
+}
+
+export { Pagination, Table };

package/dist/chunk-7DDDQ3RH.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+var chunkXFNRKHHF_cjs = require('./chunk-XFNRKHHF.cjs');
+var react = require('react');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SearchInput = react.forwardRef(
+  ({
+    debounce = 300,
+    onDebouncedChange,
+    onChange,
+    value: valueProp,
+    defaultValue,
+    clearable = true,
+    leftElement,
+    ...rest
+  }, ref) => {
+    const [innerValue, setInnerValue] = react.useState(
+      valueProp ?? defaultValue ?? ""
+    );
+    const [prevValueProp, setPrevValueProp] = react.useState(valueProp);
+    const [lastEmittedValue, setLastEmittedValue] = react.useState(
+      String(valueProp ?? defaultValue ?? "")
+    );
+    if (valueProp !== prevValueProp) {
+      setInnerValue(valueProp ?? "");
+      setPrevValueProp(valueProp);
+      setLastEmittedValue(String(valueProp ?? ""));
+    }
+    react.useEffect(() => {
+      if (String(innerValue) === lastEmittedValue) return;
+      const timer = setTimeout(() => {
+        if (onDebouncedChange) {
+          onDebouncedChange(String(innerValue));
+          setLastEmittedValue(String(innerValue));
+        }
+      }, debounce);
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [innerValue, debounce, onDebouncedChange, lastEmittedValue]);
+    const handleChange = (e) => {
+      setInnerValue(e.target.value);
+      if (onChange) {
+        onChange(e);
+      }
+    };
+    const defaultSearchIcon = /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { className: "w-[18px] h-[18px] text-text-muted" });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkXFNRKHHF_cjs.TextInput,
+      {
+        ...rest,
+        ref,
+        value: innerValue,
+        onChange: handleChange,
+        clearable,
+        leftElement: leftElement ?? defaultSearchIcon,
+        type: "text"
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+
+exports.SearchInput = SearchInput;

package/dist/chunk-7PDGAIC3.cjs

@@ -0,0 +1,189 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var solid = require('@heroicons/react/16/solid');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "w-3.5 h-3.5",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-7 h-7"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var descriptionSizeClasses = {
+  xs: "text-[10px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+var stateClasses = {
+  default: "border-border text-accent focus:ring-accent/40",
+  error: "border-error text-error focus:ring-error/20",
+  success: "border-success text-success focus:ring-success/20",
+  warning: "border-warning text-warning focus:ring-warning/20"
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+var disabledClasses = "disabled:opacity-50 disabled:bg-surface-secondary disabled:cursor-not-allowed disabled:border-border";
+function getStateMessage(state, errorMessage, successMessage, warningMessage) {
+  if (state === "error" && errorMessage) return errorMessage;
+  if (state === "success" && successMessage) return successMessage;
+  if (state === "warning" && warningMessage) return warningMessage;
+  return void 0;
+}
+var Checkbox = react.forwardRef(function Checkbox2({
+  id: idProp,
+  label,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  size = "md",
+  state = "default",
+  indeterminate = false,
+  className,
+  containerClassName,
+  wrapperClassName,
+  inputClassName,
+  labelClassName,
+  messageClassName,
+  disabled = false,
+  required = false,
+  ...rest
+}, forwardedRef) {
+  const autoId = react.useId();
+  const inputId = idProp ?? `checkbox-${autoId.replace(/:/g, "")}`;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const internalRef = react.useRef(null);
+  const handleRef = (node) => {
+    internalRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+  react.useEffect(() => {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const hasDescription = helperText ?? stateMessage;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn("relative flex items-start", containerClassName, wrapperClassName, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-6 w-auto items-center justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...rest,
+              ref: handleRef,
+              id: inputId,
+              type: "checkbox",
+              disabled,
+              required,
+              "aria-invalid": state === "error" ? true : void 0,
+              "aria-describedby": describedBy,
+              className: chunkL5VQZZVR_cjs.cn(
+                "peer appearance-none rounded-sm border bg-surface transition-all duration-normal",
+                "checked:bg-current checked:border-transparent",
+                "indeterminate:bg-current indeterminate:border-transparent",
+                "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface",
+                sizeClasses[size],
+                stateClasses[state],
+                disabledClasses,
+                inputClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            solid.CheckIcon,
+            {
+              className: chunkL5VQZZVR_cjs.cn(
+                "pointer-events-none absolute inset-0 m-auto text-text-inverse opacity-0 transition-opacity peer-checked:opacity-100",
+                size === "xs" ? "w-2.5 h-2.5" : size === "sm" ? "w-3 h-3" : size === "md" ? "w-3.5 h-3.5" : size === "lg" ? "w-4 h-4" : "w-5 h-5"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            solid.MinusIcon,
+            {
+              className: chunkL5VQZZVR_cjs.cn(
+                "pointer-events-none absolute inset-0 m-auto text-text-inverse opacity-0 transition-opacity peer-indeterminate:opacity-100",
+                size === "xs" ? "w-2.5 h-2.5" : size === "sm" ? "w-3 h-3" : size === "md" ? "w-3.5 h-3.5" : size === "lg" ? "w-4 h-4" : "w-5 h-5"
+              )
+            }
+          )
+        ] }),
+        (!!label || !!hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-3 flex flex-col pt-0.5", children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              htmlFor: inputId,
+              className: chunkL5VQZZVR_cjs.cn(
+                "font-bold leading-none text-text uppercase tracking-widest select-none",
+                disabled && "opacity-50 cursor-not-allowed",
+                labelSizeClasses[size],
+                labelClassName
+              ),
+              children: [
+                label,
+                required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+              ]
+            }
+          ),
+          helperText && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              id: helperId,
+              className: chunkL5VQZZVR_cjs.cn(
+                "text-text-muted mt-1 font-medium",
+                disabled && "opacity-50",
+                descriptionSizeClasses[size],
+                messageClassName
+              ),
+              children: helperText
+            }
+          ),
+          stateMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              id: stateMessageId,
+              role: state === "error" ? "alert" : void 0,
+              className: chunkL5VQZZVR_cjs.cn(
+                "mt-1",
+                disabled && "opacity-50",
+                stateMessageClasses[state],
+                descriptionSizeClasses[size],
+                messageClassName
+              ),
+              children: stateMessage
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+Checkbox.displayName = "Checkbox";
+
+exports.Checkbox = Checkbox;