framepexls-ui-lib 0.1.4

package/dist/CalendarPanel.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const fmtISODate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+const dow = ["D", "L", "M", "M", "J", "V", "S"];
+function buildMonthGrid(year, monthIdx0) {
+  const firstOfMonth = new Date(year, monthIdx0, 1);
+  const start = new Date(firstOfMonth);
+  start.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+  return Array.from({ length: 42 }, (_, i) => {
+    const d = new Date(start);
+    d.setDate(start.getDate() + i);
+    return d;
+  });
+}
+function CalendarPanel({
+  cursor,
+  value,
+  min,
+  max,
+  onCursorChange,
+  onPick
+}) {
+  const year = cursor.getFullYear();
+  const month = cursor.getMonth();
+  const today = /* @__PURE__ */ new Date();
+  const grid = buildMonthGrid(year, month);
+  const withinBounds = (d) => {
+    if (!min && !max) return true;
+    const t = d.getTime();
+    if (min) {
+      const m = new Date(min);
+      if (!isNaN(m) && t < m.getTime()) return false;
+    }
+    if (max) {
+      const M = new Date(max);
+      if (!isNaN(M) && t > M.getTime()) return false;
+    }
+    return true;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+            onClick: () => onCursorChange(new Date(year, month - 1, 1)),
+            children: "\u25C0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+            onClick: () => onCursorChange(new Date(year, month + 1, 1)),
+            children: "\u25B6"
+          }
+        )
+      ] })
+    ] }),
+    /* @__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", children: grid.map((d) => {
+      const inMonth = d.getMonth() === month;
+      const selected = value && fmtISODate(d) === fmtISODate(value);
+      const isToday = fmtISODate(d) === fmtISODate(today);
+      const disabled = !withinBounds(d);
+      const key = d.toISOString().slice(0, 10);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          disabled,
+          onClick: () => !disabled && onPick(d),
+          className: [
+            "h-9 rounded-xl text-sm flex items-center justify-center leading-none",
+            selected ? "bg-slate-900 text-white dark:bg-white dark:text-slate-900" : isToday ? "border border-slate-300/70 dark:border-white/10" : "hover:bg-slate-100 dark:hover:bg-white/10",
+            !inMonth && "text-slate-400",
+            disabled && "opacity-40 cursor-not-allowed"
+          ].filter(Boolean).join(" "),
+          children: d.getDate()
+        },
+        key
+      );
+    }) })
+  ] });
+}
+export {
+  CalendarPanel as default
+};

package/dist/ChartCard.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Props = {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    right?: React__default.ReactNode;
+    children: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    compact?: boolean;
+    className?: string;
+};
+declare function ChartCard({ title, subtitle, right, children, footer, compact, className }: Props): react_jsx_runtime.JSX.Element;
+
+export { ChartCard as default };

package/dist/ChartCard.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Props = {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    right?: React__default.ReactNode;
+    children: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    compact?: boolean;
+    className?: string;
+};
+declare function ChartCard({ title, subtitle, right, children, footer, compact, className }: Props): react_jsx_runtime.JSX.Element;
+
+export { ChartCard as default };

package/dist/ChartCard.js

@@ -0,0 +1,44 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ChartCard_exports = {};
+__export(ChartCard_exports, {
+  default: () => ChartCard
+});
+module.exports = __toCommonJS(ChartCard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function ChartCard({ title, subtitle, right, children, footer, compact, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: ["relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-white/5", className != null ? className : ""].join(" "),
+      children: [
+        (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 })
+          ] }),
+          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 })
+      ]
+    }
+  );
+}

package/dist/ChartCard.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartCard({ title, subtitle, right, children, footer, compact, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-white/5", className != null ? className : ""].join(" "),
+      children: [
+        (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 })
+          ] }),
+          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 })
+      ]
+    }
+  );
+}
+export {
+  ChartCard as default
+};

package/dist/CheckboxPillsGroup.d.mts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type PillsOption = string | {
+    value: string;
+    label?: React__default.ReactNode;
+    disabled?: boolean;
+    title?: string;
+};
+type CheckboxPillsGroupProps = {
+    options: PillsOption[];
+    value: string[];
+    onChange: (next: string[]) => void;
+    multiple?: boolean;
+    name?: string;
+    label?: React__default.ReactNode;
+    emptyText?: React__default.ReactNode;
+    size?: "sm" | "md";
+    accent?: "rose" | "sky" | "violet" | "emerald" | "indigo" | "amber" | "slate";
+    variant?: "soft" | "outline" | "glass";
+    rounded?: "md" | "xl" | "2xl" | "full";
+    withIcon?: boolean;
+    maxSelected?: number;
+    className?: string;
+};
+declare function CheckboxPillsGroup({ options, value, onChange, multiple, name, label, emptyText, size, accent, variant, rounded, withIcon, maxSelected, className, }: CheckboxPillsGroupProps): react_jsx_runtime.JSX.Element;
+
+export { type CheckboxPillsGroupProps, type PillsOption, CheckboxPillsGroup as default };

package/dist/CheckboxPillsGroup.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type PillsOption = string | {
+    value: string;
+    label?: React__default.ReactNode;
+    disabled?: boolean;
+    title?: string;
+};
+type CheckboxPillsGroupProps = {
+    options: PillsOption[];
+    value: string[];
+    onChange: (next: string[]) => void;
+    multiple?: boolean;
+    name?: string;
+    label?: React__default.ReactNode;
+    emptyText?: React__default.ReactNode;
+    size?: "sm" | "md";
+    accent?: "rose" | "sky" | "violet" | "emerald" | "indigo" | "amber" | "slate";
+    variant?: "soft" | "outline" | "glass";
+    rounded?: "md" | "xl" | "2xl" | "full";
+    withIcon?: boolean;
+    maxSelected?: number;
+    className?: string;
+};
+declare function CheckboxPillsGroup({ options, value, onChange, multiple, name, label, emptyText, size, accent, variant, rounded, withIcon, maxSelected, className, }: CheckboxPillsGroupProps): react_jsx_runtime.JSX.Element;
+
+export { type CheckboxPillsGroupProps, type PillsOption, CheckboxPillsGroup as default };

package/dist/CheckboxPillsGroup.js

@@ -0,0 +1,186 @@
+"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 CheckboxPillsGroup_exports = {};
+__export(CheckboxPillsGroup_exports, {
+  default: () => CheckboxPillsGroup
+});
+module.exports = __toCommonJS(CheckboxPillsGroup_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+const cx = (...a) => a.filter(Boolean).join(" ");
+function toObj(opt) {
+  var _a, _b;
+  if (typeof opt === "string") return { value: opt, label: opt, disabled: false, title: opt };
+  return {
+    value: opt.value,
+    label: (_a = opt.label) != null ? _a : opt.value,
+    disabled: !!opt.disabled,
+    title: (_b = opt.title) != null ? _b : typeof opt.label === "string" ? opt.label : opt.value
+  };
+}
+const SIZE = {
+  sm: { text: "text-[13px]", padX: "px-3", padY: "py-1.5", height: "h-8", icon: "h-3.5 w-3.5" },
+  md: { text: "text-sm", padX: "px-3.5", padY: "py-2", height: "h-9", icon: "h-4 w-4" }
+};
+const ACTIVE_SOFT = {
+  rose: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  sky: "border-sky-300 bg-sky-50/80 text-sky-700 dark:border-sky-400/40 dark:bg-sky-500/10 dark:text-sky-200",
+  violet: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  emerald: "border-emerald-300 bg-emerald-50/80 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-500/10 dark:text-emerald-200",
+  indigo: "border-indigo-300 bg-indigo-50/80 text-indigo-700 dark:border-indigo-400/40 dark:bg-indigo-500/10 dark:text-indigo-200",
+  amber: "border-amber-300 bg-amber-50/80 text-amber-700 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-200",
+  slate: "border-slate-300 bg-slate-50/80 text-slate-700 dark:border-slate-400/40 dark:bg-slate-500/10 dark:text-slate-200"
+};
+const ACTIVE_OUTLINE = {
+  rose: "border-blue-400 text-blue-700 dark:text-blue-200",
+  sky: "border-sky-400 text-sky-700 dark:text-sky-200",
+  violet: "border-blue-400 text-blue-700 dark:text-blue-200",
+  emerald: "border-emerald-400 text-emerald-700 dark:text-emerald-200",
+  indigo: "border-indigo-400 text-indigo-700 dark:text-indigo-200",
+  amber: "border-amber-400 text-amber-700 dark:text-amber-200",
+  slate: "border-slate-400 text-slate-700 dark:text-slate-200"
+};
+const ACTIVE_GLASS = {
+  rose: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  sky: "border-sky-300 bg-gradient-to-br from-sky-50 to-sky-50/0 text-sky-700 dark:from-sky-400/10 dark:text-sky-200",
+  violet: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  emerald: "border-emerald-300 bg-gradient-to-br from-emerald-50 to-emerald-50/0 text-emerald-700 dark:from-emerald-400/10 dark:text-emerald-200",
+  indigo: "border-indigo-300 bg-gradient-to-br from-indigo-50 to-indigo-50/0 text-indigo-700 dark:from-indigo-400/10 dark:text-indigo-200",
+  amber: "border-amber-300 bg-gradient-to-br from-amber-50 to-amber-50/0 text-amber-700 dark:from-amber-400/10 dark:text-amber-200",
+  slate: "border-slate-300 bg-gradient-to-br from-slate-50 to-slate-50/0 text-slate-700 dark:from-slate-400/10 dark:text-slate-200"
+};
+function activeClasses(accent, variant) {
+  if (variant === "soft") return ACTIVE_SOFT[accent];
+  if (variant === "outline") return ACTIVE_OUTLINE[accent] + " bg-white/70 dark:bg-white/5";
+  return ACTIVE_GLASS[accent] + " backdrop-blur-[2px]";
+}
+const NEUTRAL = "border-slate-200 bg-white/70 text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
+function CheckboxPillsGroup({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  name,
+  label,
+  emptyText = "No hay elementos.",
+  size = "md",
+  accent = "rose",
+  variant = "glass",
+  rounded = "full",
+  withIcon = true,
+  maxSelected,
+  className
+}) {
+  const opts = import_react.default.useMemo(() => options.map(toObj), [options]);
+  const sz = SIZE[size];
+  const radius = rounded === "full" ? "rounded-full" : rounded === "2xl" ? "rounded-2xl" : rounded === "md" ? "rounded-md" : "rounded-xl";
+  const baseChip = cx(
+    "relative inline-flex items-center whitespace-nowrap select-none",
+    "border transition-[background-color,border-color,color,opacity] duration-150 ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-300 dark:focus-visible:ring-white/20",
+    sz.height,
+    sz.padX,
+    sz.padY,
+    sz.text,
+    "shadow-[0_1px_0_rgba(2,6,23,0.05)] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)]",
+    radius
+  );
+  const isActive = (v) => multiple ? value.includes(v) : value[0] === v;
+  const toggle = (v, disabled) => {
+    if (disabled) return;
+    if (multiple) {
+      const exists = value.includes(v);
+      if (!exists) {
+        if (typeof maxSelected === "number" && value.length >= maxSelected) return;
+        onChange([...value, v]);
+      } else {
+        onChange(value.filter((x) => x !== v));
+      }
+    } else {
+      const isOn = value[0] === v;
+      onChange(isOn ? [] : [v]);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("mt-2 space-y-2", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("font-medium text-slate-700 dark:text-slate-200", sz.text), children: label }),
+    opts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500", children: emptyText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: multiple ? "group" : "radiogroup", className: "flex flex-wrap gap-2", children: opts.map((o) => {
+      const active = isActive(o.value);
+      const disabled = !!o.disabled;
+      const canSelectMore = multiple && typeof maxSelected === "number" ? active || value.length < maxSelected : true;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "label",
+        {
+          title: o.title,
+          className: cx(
+            baseChip,
+            active ? activeClasses(accent, variant) : NEUTRAL,
+            (disabled || !canSelectMore) && !active && "cursor-not-allowed opacity-60"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                type: multiple ? "checkbox" : "radio",
+                name: !multiple ? name != null ? name : "pills-group" : void 0,
+                className: "sr-only",
+                checked: active,
+                disabled: disabled || !canSelectMore && !active,
+                onChange: () => toggle(o.value, disabled || !canSelectMore && !active)
+              }
+            ),
+            withIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative mr-2 inline-block h-[22px] w-[22px] flex-none", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-0" : "opacity-100"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "grid place-items-center rounded-full border border-slate-300/80 bg-white/70 text-slate-500 dark:border-white/15 dark:bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "7" }) }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-100" : "opacity-0"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: cx(
+                    "grid place-items-center rounded-full",
+                    {
+                      rose: "bg-blue-500/10 text-blue-600",
+                      sky: "bg-sky-500/10 text-sky-600",
+                      violet: "bg-blue-500/10 text-blue-600",
+                      emerald: "bg-emerald-500/10 text-emerald-600",
+                      indigo: "bg-indigo-500/10 text-indigo-600",
+                      amber: "bg-amber-500/10 text-amber-600",
+                      slate: "bg-slate-500/10 text-slate-600"
+                    }[accent]
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4 10-10" }) })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: o.label })
+          ]
+        },
+        o.value
+      );
+    }) })
+  ] });
+}

package/dist/CheckboxPillsGroup.mjs

@@ -0,0 +1,156 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+const cx = (...a) => a.filter(Boolean).join(" ");
+function toObj(opt) {
+  var _a, _b;
+  if (typeof opt === "string") return { value: opt, label: opt, disabled: false, title: opt };
+  return {
+    value: opt.value,
+    label: (_a = opt.label) != null ? _a : opt.value,
+    disabled: !!opt.disabled,
+    title: (_b = opt.title) != null ? _b : typeof opt.label === "string" ? opt.label : opt.value
+  };
+}
+const SIZE = {
+  sm: { text: "text-[13px]", padX: "px-3", padY: "py-1.5", height: "h-8", icon: "h-3.5 w-3.5" },
+  md: { text: "text-sm", padX: "px-3.5", padY: "py-2", height: "h-9", icon: "h-4 w-4" }
+};
+const ACTIVE_SOFT = {
+  rose: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  sky: "border-sky-300 bg-sky-50/80 text-sky-700 dark:border-sky-400/40 dark:bg-sky-500/10 dark:text-sky-200",
+  violet: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  emerald: "border-emerald-300 bg-emerald-50/80 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-500/10 dark:text-emerald-200",
+  indigo: "border-indigo-300 bg-indigo-50/80 text-indigo-700 dark:border-indigo-400/40 dark:bg-indigo-500/10 dark:text-indigo-200",
+  amber: "border-amber-300 bg-amber-50/80 text-amber-700 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-200",
+  slate: "border-slate-300 bg-slate-50/80 text-slate-700 dark:border-slate-400/40 dark:bg-slate-500/10 dark:text-slate-200"
+};
+const ACTIVE_OUTLINE = {
+  rose: "border-blue-400 text-blue-700 dark:text-blue-200",
+  sky: "border-sky-400 text-sky-700 dark:text-sky-200",
+  violet: "border-blue-400 text-blue-700 dark:text-blue-200",
+  emerald: "border-emerald-400 text-emerald-700 dark:text-emerald-200",
+  indigo: "border-indigo-400 text-indigo-700 dark:text-indigo-200",
+  amber: "border-amber-400 text-amber-700 dark:text-amber-200",
+  slate: "border-slate-400 text-slate-700 dark:text-slate-200"
+};
+const ACTIVE_GLASS = {
+  rose: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  sky: "border-sky-300 bg-gradient-to-br from-sky-50 to-sky-50/0 text-sky-700 dark:from-sky-400/10 dark:text-sky-200",
+  violet: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  emerald: "border-emerald-300 bg-gradient-to-br from-emerald-50 to-emerald-50/0 text-emerald-700 dark:from-emerald-400/10 dark:text-emerald-200",
+  indigo: "border-indigo-300 bg-gradient-to-br from-indigo-50 to-indigo-50/0 text-indigo-700 dark:from-indigo-400/10 dark:text-indigo-200",
+  amber: "border-amber-300 bg-gradient-to-br from-amber-50 to-amber-50/0 text-amber-700 dark:from-amber-400/10 dark:text-amber-200",
+  slate: "border-slate-300 bg-gradient-to-br from-slate-50 to-slate-50/0 text-slate-700 dark:from-slate-400/10 dark:text-slate-200"
+};
+function activeClasses(accent, variant) {
+  if (variant === "soft") return ACTIVE_SOFT[accent];
+  if (variant === "outline") return ACTIVE_OUTLINE[accent] + " bg-white/70 dark:bg-white/5";
+  return ACTIVE_GLASS[accent] + " backdrop-blur-[2px]";
+}
+const NEUTRAL = "border-slate-200 bg-white/70 text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
+function CheckboxPillsGroup({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  name,
+  label,
+  emptyText = "No hay elementos.",
+  size = "md",
+  accent = "rose",
+  variant = "glass",
+  rounded = "full",
+  withIcon = true,
+  maxSelected,
+  className
+}) {
+  const opts = React.useMemo(() => options.map(toObj), [options]);
+  const sz = SIZE[size];
+  const radius = rounded === "full" ? "rounded-full" : rounded === "2xl" ? "rounded-2xl" : rounded === "md" ? "rounded-md" : "rounded-xl";
+  const baseChip = cx(
+    "relative inline-flex items-center whitespace-nowrap select-none",
+    "border transition-[background-color,border-color,color,opacity] duration-150 ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-300 dark:focus-visible:ring-white/20",
+    sz.height,
+    sz.padX,
+    sz.padY,
+    sz.text,
+    "shadow-[0_1px_0_rgba(2,6,23,0.05)] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)]",
+    radius
+  );
+  const isActive = (v) => multiple ? value.includes(v) : value[0] === v;
+  const toggle = (v, disabled) => {
+    if (disabled) return;
+    if (multiple) {
+      const exists = value.includes(v);
+      if (!exists) {
+        if (typeof maxSelected === "number" && value.length >= maxSelected) return;
+        onChange([...value, v]);
+      } else {
+        onChange(value.filter((x) => x !== v));
+      }
+    } else {
+      const isOn = value[0] === v;
+      onChange(isOn ? [] : [v]);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("mt-2 space-y-2", className), children: [
+    label && /* @__PURE__ */ jsx("div", { className: cx("font-medium text-slate-700 dark:text-slate-200", sz.text), children: label }),
+    opts.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: multiple ? "group" : "radiogroup", className: "flex flex-wrap gap-2", children: opts.map((o) => {
+      const active = isActive(o.value);
+      const disabled = !!o.disabled;
+      const canSelectMore = multiple && typeof maxSelected === "number" ? active || value.length < maxSelected : true;
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          title: o.title,
+          className: cx(
+            baseChip,
+            active ? activeClasses(accent, variant) : NEUTRAL,
+            (disabled || !canSelectMore) && !active && "cursor-not-allowed opacity-60"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: multiple ? "checkbox" : "radio",
+                name: !multiple ? name != null ? name : "pills-group" : void 0,
+                className: "sr-only",
+                checked: active,
+                disabled: disabled || !canSelectMore && !active,
+                onChange: () => toggle(o.value, disabled || !canSelectMore && !active)
+              }
+            ),
+            withIcon && /* @__PURE__ */ jsxs("span", { className: "relative mr-2 inline-block h-[22px] w-[22px] flex-none", children: [
+              /* @__PURE__ */ jsx("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-0" : "opacity-100"), children: /* @__PURE__ */ jsx("span", { className: "grid place-items-center rounded-full border border-slate-300/80 bg-white/70 text-slate-500 dark:border-white/15 dark:bg-white/5", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7" }) }) }) }),
+              /* @__PURE__ */ jsx("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-100" : "opacity-0"), children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cx(
+                    "grid place-items-center rounded-full",
+                    {
+                      rose: "bg-blue-500/10 text-blue-600",
+                      sky: "bg-sky-500/10 text-sky-600",
+                      violet: "bg-blue-500/10 text-blue-600",
+                      emerald: "bg-emerald-500/10 text-emerald-600",
+                      indigo: "bg-indigo-500/10 text-indigo-600",
+                      amber: "bg-amber-500/10 text-amber-600",
+                      slate: "bg-slate-500/10 text-slate-600"
+                    }[accent]
+                  ),
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4 10-10" }) })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: o.label })
+          ]
+        },
+        o.value
+      );
+    }) })
+  ] });
+}
+export {
+  CheckboxPillsGroup as default
+};

package/dist/ColumnSelector.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type ColumnItem<K extends string> = {
+    key: K;
+    label: string;
+};
+type ColumnSelectorProps<K extends string> = {
+    open: boolean;
+    onToggleOpen: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    items: ColumnItem<K>[];
+    visible: Record<K, boolean>;
+    setVisible: (key: K, val: boolean) => void;
+};
+declare function ColumnSelector<K extends string>({ open, onToggleOpen, items, visible, setVisible, }: ColumnSelectorProps<K>): react_jsx_runtime.JSX.Element;
+
+export { type ColumnItem, ColumnSelector as default };

package/dist/ColumnSelector.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type ColumnItem<K extends string> = {
+    key: K;
+    label: string;
+};
+type ColumnSelectorProps<K extends string> = {
+    open: boolean;
+    onToggleOpen: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    items: ColumnItem<K>[];
+    visible: Record<K, boolean>;
+    setVisible: (key: K, val: boolean) => void;
+};
+declare function ColumnSelector<K extends string>({ open, onToggleOpen, items, visible, setVisible, }: ColumnSelectorProps<K>): react_jsx_runtime.JSX.Element;
+
+export { type ColumnItem, ColumnSelector as default };