framepexls-ui-lib 0.1.23 → 0.1.24

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,7 +34,7 @@ __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 }),
@@ -45,7 +45,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
         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,7 +1,7 @@
 "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 }),
@@ -12,7 +12,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
         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/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/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/Sidebar.js

@@ -164,8 +164,8 @@ function Sidebar({
   userMenuSlot,
   onBrandClick,
   collapsedKey = "ga:sidebar-collapsed",
-  brandInitials = "BM",
-  brandTitle = "Bellamia",
+  brandInitials = "L",
+  brandTitle = "Lorem",
   brandSubtitle = "Tablero",
   color = "blue"
 }) {

package/dist/Sidebar.mjs

@@ -131,8 +131,8 @@ function Sidebar({
   userMenuSlot,
   onBrandClick,
   collapsedKey = "ga:sidebar-collapsed",
-  brandInitials = "BM",
-  brandTitle = "Bellamia",
+  brandInitials = "L",
+  brandTitle = "Lorem",
   brandSubtitle = "Tablero",
   color = "blue"
 }) {

package/dist/index.d.mts

@@ -2,6 +2,7 @@ export { default as Button } from './Button.mjs';
 export { default as ActionIconButton } from './ActionIconButton.mjs';
 export { default as Input, InputProps } from './Input.mjs';
 export { default as Textarea, TextareaProps } from './Textarea.mjs';
+export { default as Checkbox, CheckboxProps } from './Checkbox.mjs';
 export { default as CheckboxPillsGroup, CheckboxPillsGroupProps, PillsOption } from './CheckboxPillsGroup.mjs';
 export { FilterGroup, default as FiltersMultiSelect, FiltersMultiSelectProps } from './FiltersMultiSelect.mjs';
 export { default as Select } from './Select.mjs';
@@ -14,6 +15,7 @@ export { SortTh, Td, Th } from './Table.mjs';
 export { default as Pagination, PaginationProps } from './Pagination.mjs';
 export { default as InfoGrid, InfoItem } from './InfoGrid.mjs';
 export { default as ChartCard } from './ChartCard.mjs';
+export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.mjs';
 export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.mjs';
 export { default as MediaCard, MediaCardProps } from './MediaCard.mjs';
 export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.mjs';

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as Button } from './Button.js';
 export { default as ActionIconButton } from './ActionIconButton.js';
 export { default as Input, InputProps } from './Input.js';
 export { default as Textarea, TextareaProps } from './Textarea.js';
+export { default as Checkbox, CheckboxProps } from './Checkbox.js';
 export { default as CheckboxPillsGroup, CheckboxPillsGroupProps, PillsOption } from './CheckboxPillsGroup.js';
 export { FilterGroup, default as FiltersMultiSelect, FiltersMultiSelectProps } from './FiltersMultiSelect.js';
 export { default as Select } from './Select.js';
@@ -14,6 +15,7 @@ export { SortTh, Td, Th } from './Table.js';
 export { default as Pagination, PaginationProps } from './Pagination.js';
 export { default as InfoGrid, InfoItem } from './InfoGrid.js';
 export { default as ChartCard } from './ChartCard.js';
+export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.js';
 export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.js';
 export { default as MediaCard, MediaCardProps } from './MediaCard.js';
 export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.js';

package/dist/index.js

@@ -40,10 +40,13 @@ __export(index_exports, {
   CalendarPanel: () => import_CalendarPanel.default,
   Card: () => import_Card.default,
   ChartCard: () => import_ChartCard.default,
+  Checkbox: () => import_Checkbox.default,
   CheckboxPillsGroup: () => import_CheckboxPillsGroup.default,
   ColumnSelector: () => import_ColumnSelector.default,
   ComboSelect: () => import_ComboSelect.default,
+  CtrHorizontalBar: () => import_AnalyticsCharts.CtrHorizontalBar,
   DateTimeField: () => import_DateTimeField.default,
+  DestinoDonut: () => import_AnalyticsCharts.DestinoDonut,
   Dialog: () => import_Dialog.default,
   Drawer: () => import_Drawer.default,
   Dropdown: () => import_Dropdown.default,
@@ -79,6 +82,7 @@ __export(index_exports, {
   TimeRangeField: () => import_TimeRangeField.default,
   ToastProvider: () => import_Toast.ToastProvider,
   Tooltip: () => import_Tooltip.default,
+  TopImpresionesBar: () => import_AnalyticsCharts.TopImpresionesBar,
   UploadCard: () => import_UploadCard.default,
   WeekPopover: () => import_TimePopover2.WeekPopover,
   useToast: () => import_Toast.useToast
@@ -88,6 +92,7 @@ var import_Button = __toESM(require("./Button"));
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
 var import_Input = __toESM(require("./Input"));
 var import_Textarea = __toESM(require("./Textarea"));
+var import_Checkbox = __toESM(require("./Checkbox"));
 var import_CheckboxPillsGroup = __toESM(require("./CheckboxPillsGroup"));
 var import_FiltersMultiSelect = __toESM(require("./FiltersMultiSelect"));
 var import_Select = __toESM(require("./Select"));
@@ -102,6 +107,7 @@ var import_Table = require("./Table");
 var import_Pagination = __toESM(require("./Pagination"));
 var import_InfoGrid = __toESM(require("./InfoGrid"));
 var import_ChartCard = __toESM(require("./ChartCard"));
+var import_AnalyticsCharts = require("./AnalyticsCharts");
 var import_UploadCard = __toESM(require("./UploadCard"));
 var import_MediaCard = __toESM(require("./MediaCard"));
 var import_MediaSelector = __toESM(require("./MediaSelector"));
@@ -149,10 +155,13 @@ __reExport(index_exports, require("./iconos"), module.exports);
   CalendarPanel,
   Card,
   ChartCard,
+  Checkbox,
   CheckboxPillsGroup,
   ColumnSelector,
   ComboSelect,
+  CtrHorizontalBar,
   DateTimeField,
+  DestinoDonut,
   Dialog,
   Drawer,
   Dropdown,
@@ -188,6 +197,7 @@ __reExport(index_exports, require("./iconos"), module.exports);
   TimeRangeField,
   ToastProvider,
   Tooltip,
+  TopImpresionesBar,
   UploadCard,
   WeekPopover,
   useToast,