@bleakedev/bleake-components 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -1,19 +1,38 @@
 'use strict';
 
-var lucideReact = require('lucide-react');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
 var bleakeCore = require('@bleakedev/bleake-core');
 var radixUi = require('radix-ui');
 var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var reactRouter = require('react-router');
 var react$1 = require('react');
 var reactDayPicker = require('react-day-picker');
 var react = require('@base-ui/react');
 var cmdk = require('cmdk');
 var inputOtp = require('input-otp');
-var framerMotion = require('framer-motion');
 var sonner = require('sonner');
 
-// src/primitives/actions-menu/index.tsx
+// src/patterns/animations/slide-up/index.tsx
+var variants = {
+  hidden: { opacity: 0, y: 24 },
+  visible: { opacity: 1, y: 0 }
+};
+var transition = { duration: 0.35, ease: "easeOut" };
+var SlideUp = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      variants,
+      initial: "hidden",
+      animate: "visible",
+      transition,
+      className,
+      children
+    }
+  );
+};
 var buttonVariants = classVarianceAuthority.cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-xl border border-transparent bg-clip-padding text-sm/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer gap-2 transition-all duration-300 rounded-lg",
   {
@@ -59,6 +78,659 @@ var Button = ({
     }
   );
 };
+var Empty = ({
+  title = "Sin resultados",
+  description = "No hay informaci\xF3n para mostrar.",
+  icon: Icon,
+  action,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: bleakeCore.merge(
+        "flex h-full w-full flex-col items-center justify-center gap-3 py-16 text-center",
+        className
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full border border-gray-500/15 bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-8 w-8 text-gray-500" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: description })
+        ] }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            size: "sm",
+            onClick: action.onClick,
+            children: [
+              action.icon && /* @__PURE__ */ jsxRuntime.jsx(action.icon, { className: "mr-1 h-4 w-4" }),
+              action.label
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+function ErrorFallback({ error, resetError }) {
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-50 w-full flex-col items-center justify-center gap-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full border border-red-500/15 bg-red-50", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-8 w-8 text-red-500" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Algo sali\xF3 mal" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Ocurri\xF3 un error inesperado. Intent\xE1 de nuevo." }),
+      undefined.DEV && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 max-w-md text-xs text-red-400", children: errorMessage })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "outline",
+        onClick: resetError,
+        children: "Reintentar"
+      }
+    )
+  ] });
+}
+var Label = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Label.Root,
+    {
+      "data-slot": "label",
+      className: bleakeCore.merge(
+        "flex items-center gap-2 text-sm/relaxed leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+};
+var SelectScrollDownButton = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: bleakeCore.merge(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
+    }
+  );
+};
+var SelectScrollUpButton = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: bleakeCore.merge(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {})
+    }
+  );
+};
+var SelectContent = ({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Select.Content,
+    {
+      "data-slot": "select-content",
+      "data-align-trigger": position === "item-aligned",
+      className: bleakeCore.merge(
+        "relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          radixUi.Select.Viewport,
+          {
+            "data-position": position,
+            className: bleakeCore.merge(
+              "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+};
+var SelectGroup = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.Group,
+    {
+      "data-slot": "select-group",
+      className: bleakeCore.merge("scroll-my-1 p-1", className),
+      ...props
+    }
+  );
+};
+var SelectItem = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Select.Item,
+    {
+      "data-slot": "select-item",
+      className: bleakeCore.merge(
+        "relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none border border-transparent focus:bg-orange-50 focus:border focus:border-orange-200/50 focus:text-orange-500! focus:cursor-pointer not-data-[variant=destructive]:focus:**:text-orange-500! data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemText, { children })
+      ]
+    }
+  );
+};
+var SelectLabel = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.Label,
+    {
+      "data-slot": "select-label",
+      className: bleakeCore.merge("px-2 py-1.5 text-xs text-muted-foreground", className),
+      ...props
+    }
+  );
+};
+var SelectSeparator = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.Separator,
+    {
+      "data-slot": "select-separator",
+      className: bleakeCore.merge("pointer-events-none -mx-1 my-1 h-px bg-border/50", className),
+      ...props
+    }
+  );
+};
+var SelectTrigger = ({
+  className,
+  size = "default",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Select.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: bleakeCore.merge(
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-input/20 px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })
+      ]
+    }
+  );
+};
+var SelectValue = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.Value,
+    {
+      "data-slot": "select-value",
+      ...props
+    }
+  );
+};
+var Select = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Select.Root,
+    {
+      "data-slot": "select",
+      ...props
+    }
+  );
+};
+var FilterSelect = ({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder = "Seleccionar...",
+  disabled = false,
+  className,
+  labelClassName,
+  inputClassName
+}) => {
+  const isActive = value && value !== "all" && value !== "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bleakeCore.merge("flex flex-col gap-2", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      Label,
+      {
+        className: labelClassName,
+        htmlFor: label,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        value: value ?? "",
+        onValueChange: onChange,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SelectTrigger,
+            {
+              id: label,
+              className: bleakeCore.merge(
+                "min-w-40 bg-white! text-gray-900! cursor-pointer hover:border-gray-500",
+                isActive && "bg-orange-50! border-orange-200/50 **:text-orange-500! hover:border-orange-500!",
+                disabled && "cursor-not-allowed opacity-50",
+                inputClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { position: "popper", children: /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            SelectItem,
+            {
+              value: option.value,
+              children: option.label
+            },
+            option.value
+          )) }) })
+        ]
+      }
+    )
+  ] });
+};
+var SectionTitle = ({
+  icon: Icon,
+  title,
+  description,
+  action,
+  onEdit,
+  editLabel = "Editar"
+}) => {
+  if (description !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between gap-2 px-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-orange-500 shrink-0 h-8 w-8" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base text-gray-900 font-medium", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 font-medium", children: description })
+        ] })
+      ] }),
+      action
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between mb-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 text-orange-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-gray-900", children: title })
+    ] }),
+    onEdit && /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "size-7 p-0 text-orange-500 hover:text-orange-600 hover:bg-orange-50",
+        onClick: onEdit,
+        title: editLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PenLine, { className: "size-3.5" })
+      }
+    ),
+    action
+  ] });
+};
+var Breadcrumb = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      className: bleakeCore.merge(className),
+      ...props
+    }
+  );
+};
+var BreadcrumbItem = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: bleakeCore.merge("inline-flex items-center gap-1", className),
+      ...props
+    }
+  );
+};
+var BreadcrumbList = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: bleakeCore.merge(
+        "flex flex-wrap items-center gap-1.5 text-xs/relaxed wrap-break-word text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+var BreadcrumbPage = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: bleakeCore.merge("font-normal text-foreground", className),
+      ...props
+    }
+  );
+};
+var BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: bleakeCore.merge("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
+    }
+  );
+};
+var BreadcrumbList2 = ({ items }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(reactRouter.Link, { to: item.href, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) }),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
+    ] }, `${item.label}-${index}`);
+  }) }) });
+};
+var AppBreadcrumbs = ({ backRoute, config }) => {
+  const navigate = reactRouter.useNavigate();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        className: "px-0 w-fit h-fit",
+        onClick: () => navigate(backRoute),
+        "aria-label": "Volver",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftCircle, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList2, { items: config })
+  ] });
+};
+var Tabs = ({
+  className,
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: bleakeCore.merge("group/tabs flex gap-3 data-horizontal:flex-col", className),
+      ...props
+    }
+  );
+};
+var TabsContent = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.Content,
+    {
+      "data-slot": "tabs-content",
+      className: bleakeCore.merge("flex-1 text-xs/relaxed outline-none", className),
+      ...props
+    }
+  );
+};
+var VARIANT_CLASSES = {
+  default: "bg-white border border-gray-200 rounded-xl p-1 gap-0.5 w-fit",
+  line: "gap-1 bg-transparent border-b border-gray-200 w-full rounded-none"
+};
+var TabsList = ({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) => {
+  const variantClass = VARIANT_CLASSES[variant ?? "default"] ?? VARIANT_CLASSES.default;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      "data-size": size,
+      className: bleakeCore.merge(
+        "group/tabs-list flex items-center overflow-x-auto max-w-full",
+        variantClass,
+        className
+      ),
+      ...props
+    }
+  );
+};
+var TabsTrigger = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: bleakeCore.merge(
+        // Base
+        "relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-all cursor-pointer",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        // === SIZE — inherited from parent TabsList data-size ===
+        // default size
+        "group-data-[size=default]/tabs-list:px-4 group-data-[size=default]/tabs-list:py-2 group-data-[size=default]/tabs-list:text-sm",
+        "group-data-[size=default]/tabs-list:[&_svg:not([class*='size-'])]:size-4",
+        // sm size
+        "group-data-[size=sm]/tabs-list:px-3 group-data-[size=sm]/tabs-list:py-1.5 group-data-[size=sm]/tabs-list:text-xs",
+        "group-data-[size=sm]/tabs-list:[&_svg:not([class*='size-'])]:size-3.5",
+        // xs size
+        "group-data-[size=xs]/tabs-list:px-2 group-data-[size=xs]/tabs-list:py-1 group-data-[size=xs]/tabs-list:text-[0.65rem]",
+        "group-data-[size=xs]/tabs-list:[&_svg:not([class*='size-'])]:size-3",
+        // === VARIANT: default (pill) — inherited from parent ===
+        "group-data-[variant=default]/tabs-list:rounded-lg group-data-[variant=default]/tabs-list:text-gray-500",
+        "group-data-[variant=default]/tabs-list:hover:text-gray-700",
+        "group-data-[variant=default]/tabs-list:data-[state=active]:bg-orange-50",
+        "group-data-[variant=default]/tabs-list:data-[state=active]:text-orange-600",
+        "group-data-[variant=default]/tabs-list:data-[state=active]:ring-1",
+        "group-data-[variant=default]/tabs-list:data-[state=active]:ring-orange-200",
+        // === VARIANT: line (underline) — inherited from parent ===
+        "group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:text-gray-400",
+        "group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent",
+        "group-data-[variant=line]/tabs-list:hover:text-orange-500",
+        "group-data-[variant=line]/tabs-list:data-[state=active]:border-orange-500",
+        "group-data-[variant=line]/tabs-list:data-[state=active]:text-orange-600",
+        "group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+};
+var AppTabs = ({
+  config,
+  data,
+  defaultValue,
+  className,
+  tabListClassname,
+  variant = "default",
+  size = "default"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Tabs,
+    {
+      defaultValue: defaultValue ?? config[0]?.value,
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TabsList,
+          {
+            className: bleakeCore.merge("", tabListClassname),
+            variant,
+            size,
+            children: config.map((tab) => {
+              const Icon = tab.icon;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                TabsTrigger,
+                {
+                  value: tab.value,
+                  className: bleakeCore.merge(
+                    "",
+                    variant === "line" && "text-sm text-gray-400 data-[state=active]:text-orange-600 data-[state=active]:shadow-none pb-5 after:bg-orange-600!"
+                  ),
+                  children: [
+                    Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: tab.label })
+                  ]
+                },
+                tab.value
+              );
+            })
+          }
+        ),
+        config.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+          TabsContent,
+          {
+            value: tab.value,
+            children: tab.content(data)
+          },
+          tab.value
+        ))
+      ]
+    }
+  );
+};
+var PAGE_SIZE_OPTIONS = [10, 20, 50];
+var ARROW_CLASSES = "inline-flex items-center justify-center size-8 rounded-md border border-gray-200 bg-white shadow-xs cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-orange-50 hover:border-orange-400 hover:text-orange-600 active:bg-orange-100 transition-colors";
+var TablePagination = ({
+  page,
+  totalPages,
+  onPageChange,
+  pageSize,
+  onPageSizeChange
+}) => {
+  const showPageSizeSelector = pageSize !== void 0 && onPageSizeChange !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-2", children: [
+    showPageSizeSelector ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Mostrar" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          value: String(pageSize),
+          onValueChange: (value) => onPageSizeChange(Number(value)),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 w-17.5 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: PAGE_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsxRuntime.jsx(
+              SelectItem,
+              {
+                value: String(size),
+                children: size
+              },
+              size
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "por p\xE1gina" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(page - 1),
+          disabled: page <= 1,
+          className: ARROW_CLASSES,
+          "aria-label": "P\xE1gina anterior",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground px-1 select-none", children: [
+        "P\xE1gina ",
+        page,
+        " de ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(page + 1),
+          disabled: page >= totalPages,
+          className: ARROW_CLASSES,
+          "aria-label": "P\xE1gina siguiente",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
+        }
+      )
+    ] })
+  ] });
+};
 var DropdownMenu = ({
   ...props
 }) => {
@@ -991,20 +1663,6 @@ var Badge = ({
     }
   );
 };
-var Breadcrumb = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
-    {
-      "aria-label": "breadcrumb",
-      "data-slot": "breadcrumb",
-      className: bleakeCore.merge(className),
-      ...props
-    }
-  );
-};
 var buttonGroupVariants = classVarianceAuthority.cva(
   "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -1536,22 +2194,6 @@ var Item = ({
     }
   );
 };
-var Label = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Label.Root,
-    {
-      "data-slot": "label",
-      className: bleakeCore.merge(
-        "flex items-center gap-2 text-sm/relaxed leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-};
 var Menubar = ({
   className,
   ...props
@@ -1733,178 +2375,6 @@ var SectionCard = ({
     ) })
   ] });
 };
-var SelectScrollDownButton = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Select.ScrollDownButton,
-    {
-      "data-slot": "select-scroll-down-button",
-      className: bleakeCore.merge(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
-    }
-  );
-};
-var SelectScrollUpButton = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Select.ScrollUpButton,
-    {
-      "data-slot": "select-scroll-up-button",
-      className: bleakeCore.merge(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {})
-    }
-  );
-};
-var SelectContent = ({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    radixUi.Select.Content,
-    {
-      "data-slot": "select-content",
-      "data-align-trigger": position === "item-aligned",
-      className: bleakeCore.merge(
-        "relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      ),
-      position,
-      align,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          radixUi.Select.Viewport,
-          {
-            "data-position": position,
-            className: bleakeCore.merge(
-              "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)"
-            ),
-            children
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
-      ]
-    }
-  ) });
-};
-var SelectGroup = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Select.Group,
-    {
-      "data-slot": "select-group",
-      className: bleakeCore.merge("scroll-my-1 p-1", className),
-      ...props
-    }
-  );
-};
-var SelectItem = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    radixUi.Select.Item,
-    {
-      "data-slot": "select-item",
-      className: bleakeCore.merge(
-        "relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none border border-transparent focus:bg-orange-50 focus:border focus:border-orange-200/50 focus:text-orange-500! focus:cursor-pointer not-data-[variant=destructive]:focus:**:text-orange-500! data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemText, { children })
-      ]
-    }
-  );
-};
-var SelectLabel = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Select.Label,
-    {
-      "data-slot": "select-label",
-      className: bleakeCore.merge("px-2 py-1.5 text-xs text-muted-foreground", className),
-      ...props
-    }
-  );
-};
-var SelectSeparator = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Select.Separator,
-    {
-      "data-slot": "select-separator",
-      className: bleakeCore.merge("pointer-events-none -mx-1 my-1 h-px bg-border/50", className),
-      ...props
-    }
-  );
-};
-var SelectTrigger = ({
-  className,
-  size = "default",
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    radixUi.Select.Trigger,
-    {
-      "data-slot": "select-trigger",
-      "data-size": size,
-      className: bleakeCore.merge(
-        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-input/20 px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })
-      ]
-    }
-  );
-};
-var SelectValue = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Select.Value,
-    {
-      "data-slot": "select-value",
-      ...props
-    }
-  );
-};
-var Select = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Select.Root,
-    {
-      "data-slot": "select",
-      ...props
-    }
-  );
-};
 var Sheet = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     radixUi.Dialog.Root,
@@ -2225,21 +2695,6 @@ var Table = ({
     }
   );
 };
-var Tabs = ({
-  className,
-  orientation = "horizontal",
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Tabs.Root,
-    {
-      "data-slot": "tabs",
-      "data-orientation": orientation,
-      className: bleakeCore.merge("group/tabs flex gap-3 data-horizontal:flex-col", className),
-      ...props
-    }
-  );
-};
 var toggleVariants = classVarianceAuthority.cva(
   "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
@@ -2312,6 +2767,8 @@ var ToggleGroup = ({
 exports.Accordion = Accordion;
 exports.ActionsMenu = ActionsMenu;
 exports.AlertDialog = AlertDialog;
+exports.AppBreadcrumbs = AppBreadcrumbs;
+exports.AppTabs = AppTabs;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
@@ -2336,6 +2793,9 @@ exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.DropdownMenu = DropdownMenu;
+exports.Empty = Empty;
+exports.ErrorFallback = ErrorFallback;
+exports.FilterSelect = FilterSelect;
 exports.Glow = Glow;
 exports.HoverCard = HoverCard;
 exports.Image = Image;
@@ -2356,6 +2816,7 @@ exports.Popover = Popover;
 exports.Progress = Progress;
 exports.RadioGroup = RadioGroup;
 exports.SectionCard = SectionCard;
+exports.SectionTitle = SectionTitle;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -2370,10 +2831,12 @@ exports.Separator = Separator;
 exports.Sheet = Sheet;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
+exports.SlideUp = SlideUp;
 exports.Spinner = Spinner;
 exports.Steps = Steps;
 exports.Switch = Switch;
 exports.Table = Table;
+exports.TablePagination = TablePagination;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
 exports.Toaster = Toaster;