framepexls-ui-lib 0.1.23 → 0.1.25

package/dist/AppTopbar.d.ts

@@ -1,16 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import Button from './Button.js';
+import React__default from 'react';
 
 type TopbarAction = {
     label: string;
     onClick?: () => void;
 };
+type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
 type Props = {
     title: string;
     subtitle?: string;
     primary?: TopbarAction;
     secondary?: TopbarAction;
     actions?: TopbarAction[];
+    color?: ButtonColor;
 };
-declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
+declare function AppTopbar({ title, subtitle, secondary, primary, actions, color }: Props): react_jsx_runtime.JSX.Element;
 
 export { AppTopbar as default };

package/dist/AppTopbar.js

@@ -34,18 +34,19 @@ __export(AppTopbar_exports, {
 module.exports = __toCommonJS(AppTopbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Button = __toESM(require("./Button"));
-function AppTopbar({ title, subtitle, secondary, primary, actions }) {
+function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-slate-500", children: subtitle })
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 z-10", children: [
       Array.isArray(actions) && actions.map((a, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.default,
         {
           onClick: a.onClick,
-          variant: "secondary",
+          variant: color ? "outline" : "secondary",
+          color,
           size: "sm",
           className: "shadow-sm",
           children: a.label
@@ -56,7 +57,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
         import_Button.default,
         {
           onClick: secondary.onClick,
-          variant: "secondary",
+          variant: color ? "outline" : "secondary",
+          color,
           size: "sm",
           className: "shadow-sm",
           children: secondary.label
@@ -66,7 +68,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
         import_Button.default,
         {
           onClick: primary.onClick,
-          variant: "danger",
+          variant: color ? "primary" : "danger",
+          color,
           size: "sm",
           className: "shadow-sm",
           children: primary.label

package/dist/AppTopbar.mjs

@@ -1,18 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Button from "./Button";
-function AppTopbar({ title, subtitle, secondary, primary, actions }) {
+function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
   return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: subtitle })
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 z-10", children: [
       Array.isArray(actions) && actions.map((a, idx) => /* @__PURE__ */ jsx(
         Button,
         {
           onClick: a.onClick,
-          variant: "secondary",
+          variant: color ? "outline" : "secondary",
+          color,
           size: "sm",
           className: "shadow-sm",
           children: a.label
@@ -23,7 +24,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
         Button,
         {
           onClick: secondary.onClick,
-          variant: "secondary",
+          variant: color ? "outline" : "secondary",
+          color,
           size: "sm",
           className: "shadow-sm",
           children: secondary.label
@@ -33,7 +35,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
         Button,
         {
           onClick: primary.onClick,
-          variant: "danger",
+          variant: color ? "primary" : "danger",
+          color,
           size: "sm",
           className: "shadow-sm",
           children: primary.label

package/dist/BadgeCluster.js

@@ -89,7 +89,7 @@ function BadgeCluster({
       transition: { duration: 0.16, ease: "easeOut" },
       className: [
         "z-[9999] w-64 max-w-[80vw] rounded-xl border border-slate-200 bg-white p-2 shadow-lg ring-1 ring-black/5",
-        "dark:border-white/10 dark:bg-[#0e0d0e]",
+        "dark:border-white/10 dark:bg-[#0b0a0a]",
         usePortal ? "fixed" : "absolute",
         align === "right" ? "right-0" : "left-0"
       ].join(" "),

package/dist/BadgeCluster.mjs

@@ -56,7 +56,7 @@ function BadgeCluster({
       transition: { duration: 0.16, ease: "easeOut" },
       className: [
         "z-[9999] w-64 max-w-[80vw] rounded-xl border border-slate-200 bg-white p-2 shadow-lg ring-1 ring-black/5",
-        "dark:border-white/10 dark:bg-[#0e0d0e]",
+        "dark:border-white/10 dark:bg-[#0b0a0a]",
         usePortal ? "fixed" : "absolute",
         align === "right" ? "right-0" : "left-0"
       ].join(" "),

package/dist/Breadcrumb.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(Breadcrumb_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 function Breadcrumb({ items }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "mb-4 flex items-center text-sm text-slate-500", "aria-label": "Breadcrumb", children: items.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "mb-4 flex items-center text-sm text-slate-500 dark:text-slate-400", "aria-label": "Breadcrumb", children: items.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 20 20", className: "mx-2 h-4 w-4 opacity-50", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 4l6 6-6 6" }) }),
     it.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "hover:text-slate-700", href: it.href, children: it.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-slate-900 dark:text-slate-100", children: it.label })
   ] }, i)) });

package/dist/Breadcrumb.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 function Breadcrumb({ items }) {
-  return /* @__PURE__ */ jsx("nav", { className: "mb-4 flex items-center text-sm text-slate-500", "aria-label": "Breadcrumb", children: items.map((it, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { className: "mb-4 flex items-center text-sm text-slate-500 dark:text-slate-400", "aria-label": "Breadcrumb", children: items.map((it, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "mx-2 h-4 w-4 opacity-50", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M7 4l6 6-6 6" }) }),
     it.href ? /* @__PURE__ */ jsx("a", { className: "hover:text-slate-700", href: it.href, children: it.label }) : /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-900 dark:text-slate-100", children: it.label })
   ] }, i)) });

package/dist/Button.d.mts

@@ -3,7 +3,7 @@ import React__default from 'react';
 declare const Button: React__default.ForwardRefExoticComponent<{
     variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
     color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     loading?: boolean;
     leftIcon?: React__default.ReactNode;
     rightIcon?: React__default.ReactNode;

package/dist/Button.d.ts

@@ -3,7 +3,7 @@ import React__default from 'react';
 declare const Button: React__default.ForwardRefExoticComponent<{
     variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
     color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     loading?: boolean;
     leftIcon?: React__default.ReactNode;
     rightIcon?: React__default.ReactNode;

package/dist/Button.js

@@ -69,7 +69,7 @@ const Button = import_react.default.forwardRef(({
     );
   }
   const base = "inline-flex items-center justify-center rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
-  const sizes = size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
+  const sizes = size === "xs" ? `h-8 ${noPaddingX ? "" : "px-2.5"} text-xs` : size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
   const SOLID = {
     slate: "bg-slate-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-slate-500",
     gray: "bg-gray-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-gray-500",

package/dist/Button.mjs

@@ -36,7 +36,7 @@ const Button = React.forwardRef(({
     );
   }
   const base = "inline-flex items-center justify-center rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
-  const sizes = size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
+  const sizes = size === "xs" ? `h-8 ${noPaddingX ? "" : "px-2.5"} text-xs` : size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
   const SOLID = {
     slate: "bg-slate-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-slate-500",
     gray: "bg-gray-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-gray-500",

package/dist/CalendarPanel.js

@@ -98,7 +98,7 @@ function CalendarPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2 text-center text-[11px] uppercase tracking-wide text-slate-500", children: dow.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-1", children: d }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2 text-center text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400", children: dow.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-1", children: d }, i)) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2", children: grid.map((d) => {
       const inMonth = d.getMonth() === month;
       const selected = value && fmtISODate(d) === fmtISODate(value);

package/dist/CalendarPanel.mjs

@@ -65,7 +65,7 @@ function CalendarPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2 text-center text-[11px] uppercase tracking-wide text-slate-500", children: dow.map((d, i) => /* @__PURE__ */ jsx("div", { className: "py-1", children: d }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2 text-center text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400", children: dow.map((d, i) => /* @__PURE__ */ jsx("div", { className: "py-1", children: d }, i)) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2", children: grid.map((d) => {
       const inMonth = d.getMonth() === month;
       const selected = value && fmtISODate(d) === fmtISODate(value);

package/dist/Card.js

@@ -34,7 +34,7 @@ __export(Card_exports, {
 module.exports = __toCommonJS(Card_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-[#0f0d0e]";
+const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5";
 const Card = import_react.default.forwardRef(
   ({ className, children, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/Card.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-[#0f0d0e]";
+const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5";
 const Card = React.forwardRef(
   ({ className, children, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(

package/dist/ChartCard.js

@@ -32,12 +32,12 @@ function ChartCard({ title, subtitle, right, children, footer, compact, classNam
         (title || subtitle || right) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["flex items-center justify-between gap-3 border-b border-slate-100 px-4", compact ? "py-2" : "py-3", "dark:border-white/10"].join(" "), children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
             title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-slate-700 dark:text-slate-100", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500", children: subtitle })
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })
           ] }),
           right
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["", compact ? "p-3" : "p-4"].join(" "), children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["border-t border-slate-100 px-4 text-xs text-slate-500", compact ? "py-2" : "py-3", "dark:border-white/10"].join(" "), children: footer })
+        footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["border-t border-slate-100 px-4 text-xs text-slate-500 dark:text-slate-400", compact ? "py-2" : "py-3", "dark:border-white/10"].join(" "), children: footer })
       ]
     }
   );

package/dist/ChartCard.mjs

@@ -9,12 +9,12 @@ function ChartCard({ title, subtitle, right, children, footer, compact, classNam
         (title || subtitle || right) && /* @__PURE__ */ jsxs("div", { className: ["flex items-center justify-between gap-3 border-b border-slate-100 px-4", compact ? "py-2" : "py-3", "dark:border-white/10"].join(" "), children: [
           /* @__PURE__ */ jsxs("div", { children: [
             title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-slate-700 dark:text-slate-100", children: title }),
-            subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: subtitle })
+            subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })
           ] }),
           right
         ] }),
         /* @__PURE__ */ jsx("div", { className: ["", compact ? "p-3" : "p-4"].join(" "), children }),
-        footer && /* @__PURE__ */ jsx("div", { className: ["border-t border-slate-100 px-4 text-xs text-slate-500", compact ? "py-2" : "py-3", "dark:border-white/10"].join(" "), children: footer })
+        footer && /* @__PURE__ */ jsx("div", { className: ["border-t border-slate-100 px-4 text-xs text-slate-500 dark:text-slate-400", compact ? "py-2" : "py-3", "dark:border-white/10"].join(" "), children: footer })
       ]
     }
   );

package/dist/Checkbox.d.mts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    label?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    error?: boolean;
+    indeterminate?: boolean;
+    size?: "sm" | "md" | "lg";
+    tone?: "default" | "danger";
+    unstyled?: boolean;
+    className?: string;
+    inputClassName?: string;
+};
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    label?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    error?: boolean;
+    indeterminate?: boolean;
+    size?: "sm" | "md" | "lg";
+    tone?: "default" | "danger";
+    unstyled?: boolean;
+    className?: string;
+    inputClassName?: string;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+export { type CheckboxProps, Checkbox as default };

package/dist/Checkbox.d.ts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    label?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    error?: boolean;
+    indeterminate?: boolean;
+    size?: "sm" | "md" | "lg";
+    tone?: "default" | "danger";
+    unstyled?: boolean;
+    className?: string;
+    inputClassName?: string;
+};
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    label?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    error?: boolean;
+    indeterminate?: boolean;
+    size?: "sm" | "md" | "lg";
+    tone?: "default" | "danger";
+    unstyled?: boolean;
+    className?: string;
+    inputClassName?: string;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+export { type CheckboxProps, Checkbox as default };

package/dist/Checkbox.js

@@ -0,0 +1,100 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  default: () => Checkbox_default
+});
+module.exports = __toCommonJS(Checkbox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+const baseInput = "rounded border border-slate-300 text-blue-600 shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10";
+const sizeMap = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+const Checkbox = import_react.default.forwardRef(
+  ({
+    label,
+    description,
+    error,
+    indeterminate,
+    size = "md",
+    tone = "default",
+    unstyled,
+    className,
+    inputClassName,
+    id,
+    ...props
+  }, ref) => {
+    const internalId = (0, import_react.useId)();
+    const inputRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(() => {
+      if (!ref) return;
+      if (typeof ref === "function") ref(inputRef.current);
+      else ref.current = inputRef.current;
+    }, [ref]);
+    (0, import_react.useEffect)(() => {
+      if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
+    }, [indeterminate]);
+    if (unstyled) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: inputRef, id, type: "checkbox", ...props });
+    }
+    const descId = description ? `${id != null ? id : internalId}-desc` : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: cx("inline-flex select-none items-start gap-2", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          id: id != null ? id : internalId,
+          type: "checkbox",
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": descId,
+          className: cx(
+            baseInput,
+            sizeMap[size],
+            (error || tone === "danger") && "border-blue-400 focus:ring-blue-500/30",
+            inputClassName
+          ),
+          ...props
+        }
+      ),
+      (label || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "leading-tight", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: descId, className: "text-[12px] text-slate-500 dark:text-slate-400", children: description })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;

package/dist/Checkbox.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useId, useRef } from "react";
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+const baseInput = "rounded border border-slate-300 text-blue-600 shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10";
+const sizeMap = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+const Checkbox = React.forwardRef(
+  ({
+    label,
+    description,
+    error,
+    indeterminate,
+    size = "md",
+    tone = "default",
+    unstyled,
+    className,
+    inputClassName,
+    id,
+    ...props
+  }, ref) => {
+    const internalId = useId();
+    const inputRef = useRef(null);
+    useEffect(() => {
+      if (!ref) return;
+      if (typeof ref === "function") ref(inputRef.current);
+      else ref.current = inputRef.current;
+    }, [ref]);
+    useEffect(() => {
+      if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
+    }, [indeterminate]);
+    if (unstyled) {
+      return /* @__PURE__ */ jsx("input", { ref: inputRef, id, type: "checkbox", ...props });
+    }
+    const descId = description ? `${id != null ? id : internalId}-desc` : void 0;
+    return /* @__PURE__ */ jsxs("label", { className: cx("inline-flex select-none items-start gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id: id != null ? id : internalId,
+          type: "checkbox",
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": descId,
+          className: cx(
+            baseInput,
+            sizeMap[size],
+            (error || tone === "danger") && "border-blue-400 focus:ring-blue-500/30",
+            inputClassName
+          ),
+          ...props
+        }
+      ),
+      (label || description) && /* @__PURE__ */ jsxs("span", { className: "leading-tight", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: label }),
+        description && /* @__PURE__ */ jsx("div", { id: descId, className: "text-[12px] text-slate-500 dark:text-slate-400", children: description })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+export {
+  Checkbox_default as default
+};

package/dist/ColumnSelector.js

@@ -61,7 +61,7 @@ function ColumnSelector({
         initial: { opacity: 0, y: 6 },
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -6 },
-        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
         children: items.map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "label",
           {

package/dist/ColumnSelector.mjs

@@ -28,7 +28,7 @@ function ColumnSelector({
         initial: { opacity: 0, y: 6 },
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -6 },
-        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
         children: items.map(({ key, label }) => /* @__PURE__ */ jsxs(
           "label",
           {

package/dist/ComboSelect.js

@@ -254,7 +254,7 @@ function ComboSelect({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate font-medium", children: opt.label }),
-              opt.sublabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-slate-500", children: opt.sublabel }) : opt.hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-slate-500", children: opt.hint }) : null
+              opt.sublabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: opt.sublabel }) : opt.hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: opt.hint }) : null
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex shrink-0 items-center gap-3", children: [
@@ -301,8 +301,8 @@ function ComboSelect({
         role: "listbox",
         id: listId,
         style: dropStyle,
-        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0f0d0e]",
-        children: filteredRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-2 text-sm text-slate-500", children: noResultsText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
+        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+        children: filteredRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: noResultsText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
           if (row.kind === "section") {
             const Header = renderSectionHeader != null ? renderSectionHeader : DefaultSectionHeader;
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "aria-hidden": true, className: "sticky top-0 z-10", children: Header(row.sec, true) }, `sec-${row.sec.key}`);

package/dist/ComboSelect.mjs

@@ -221,7 +221,7 @@ function ComboSelect({
             ),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: opt.label }),
-              opt.sublabel ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-slate-500", children: opt.sublabel }) : opt.hint ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-slate-500", children: opt.hint }) : null
+              opt.sublabel ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: opt.sublabel }) : opt.hint ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: opt.hint }) : null
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
@@ -268,8 +268,8 @@ function ComboSelect({
         role: "listbox",
         id: listId,
         style: dropStyle,
-        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0f0d0e]",
-        children: filteredRows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-slate-500", children: noResultsText }) : /* @__PURE__ */ jsx("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
+        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+        children: filteredRows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: noResultsText }) : /* @__PURE__ */ jsx("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
           if (row.kind === "section") {
             const Header = renderSectionHeader != null ? renderSectionHeader : DefaultSectionHeader;
             return /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: "sticky top-0 z-10", children: Header(row.sec, true) }, `sec-${row.sec.key}`);

package/dist/DateTimeField.js

@@ -250,7 +250,7 @@ function DateTimeField({
       ref: popRef,
       style: stylePop,
       "data-dtf-pop": true,
-      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
       children: [
         type !== "time" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_CalendarPanel.default,

package/dist/DateTimeField.mjs

@@ -217,7 +217,7 @@ function DateTimeField({
       ref: popRef,
       style: stylePop,
       "data-dtf-pop": true,
-      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
       children: [
         type !== "time" && /* @__PURE__ */ jsx(
           CalendarPanel,

package/dist/Dialog.js

@@ -153,7 +153,7 @@ function DialogBase({
               ref: containerRef,
               className: cx(
                 "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
-                "dark:border-white/10 dark:bg-[#0e0d0e]",
+                "dark:border-white/10 dark:bg-[#0b0a0a]",
                 "flex max-h-[88vh] flex-col",
                 sizeToMaxW[size],
                 className
@@ -232,7 +232,7 @@ function DialogFooter({
         "sticky bottom-0 z-10 flex items-center gap-2 rounded-b-3xl border-t border-slate-200",
         "bg-white px-6 py-4 text-sm",
         "[box-shadow:inset_0_8px_10px_-8px_rgba(2,6,23,0.10)]",
-        "dark:border-white/10 dark:bg-[#0e0d0e] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
+        "dark:border-white/10 dark:bg-[#0b0a0a] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
         map[align]
       ),
       children

package/dist/Dialog.mjs

@@ -113,7 +113,7 @@ function DialogBase({
               ref: containerRef,
               className: cx(
                 "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
-                "dark:border-white/10 dark:bg-[#0e0d0e]",
+                "dark:border-white/10 dark:bg-[#0b0a0a]",
                 "flex max-h-[88vh] flex-col",
                 sizeToMaxW[size],
                 className
@@ -192,7 +192,7 @@ function DialogFooter({
         "sticky bottom-0 z-10 flex items-center gap-2 rounded-b-3xl border-t border-slate-200",
         "bg-white px-6 py-4 text-sm",
         "[box-shadow:inset_0_8px_10px_-8px_rgba(2,6,23,0.10)]",
-        "dark:border-white/10 dark:bg-[#0e0d0e] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
+        "dark:border-white/10 dark:bg-[#0b0a0a] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
         map[align]
       ),
       children