@bleakedev/bleake-components 0.0.1 → 0.0.2

package/dist/index.js

@@ -1,17 +1,36 @@
-import { EllipsisVertical, Loader2Icon, Ban, Trash2, CameraOff, XIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, ChevronUpIcon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronDown } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { merge, useTheme } from '@bleakedev/bleake-core';
-import { Slot, DropdownMenu as DropdownMenu$1, AlertDialog as AlertDialog$1, Separator as Separator$1, Dialog as Dialog$1, Tooltip as Tooltip$1, Accordion as Accordion$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, ContextMenu as ContextMenu$1, HoverCard as HoverCard$1, Label as Label$1, Menubar as Menubar$1, Popover as Popover$1, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+import { Slot, Label as Label$1, Select as Select$1, Tabs as Tabs$1, DropdownMenu as DropdownMenu$1, AlertDialog as AlertDialog$1, Separator as Separator$1, Dialog as Dialog$1, Tooltip as Tooltip$1, Accordion as Accordion$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, ContextMenu as ContextMenu$1, HoverCard as HoverCard$1, Menubar as Menubar$1, Popover as Popover$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1 } from 'radix-ui';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { AlertTriangle, ChevronDownIcon, ChevronUpIcon, CheckIcon, PenLine, ArrowLeftCircle, ChevronLeft, ChevronRight, EllipsisVertical, Loader2Icon, Ban, Trash2, CameraOff, XIcon, ChevronLeftIcon, ChevronRightIcon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronDown } from 'lucide-react';
+import { useNavigate, Link } from 'react-router';
 import { createContext, useState, Fragment, useRef, useEffect, useContext } from 'react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import { Combobox as Combobox$1 } from '@base-ui/react';
 import { Command as Command$1 } from 'cmdk';
 import { OTPInput } from 'input-otp';
-import { AnimatePresence, motion } from 'framer-motion';
 import { Toaster as Toaster$1 } from '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__ */ jsx(
+    motion.div,
+    {
+      variants,
+      initial: "hidden",
+      animate: "visible",
+      transition,
+      className,
+      children
+    }
+  );
+};
 var buttonVariants = 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",
   {
@@ -57,6 +76,659 @@ var Button = ({
     }
   );
 };
+var Empty = ({
+  title = "Sin resultados",
+  description = "No hay informaci\xF3n para mostrar.",
+  icon: Icon,
+  action,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: merge(
+        "flex h-full w-full flex-col items-center justify-center gap-3 py-16 text-center",
+        className
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full border border-gray-500/15 bg-gray-100", children: /* @__PURE__ */ jsx(Icon, { className: "h-8 w-8 text-gray-500" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: description })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            onClick: action.onClick,
+            children: [
+              action.icon && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex h-full min-h-50 w-full flex-col items-center justify-center gap-4 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full border border-red-500/15 bg-red-50", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-8 w-8 text-red-500" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Algo sali\xF3 mal" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Ocurri\xF3 un error inesperado. Intent\xE1 de nuevo." }),
+      import.meta.env.DEV && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-md text-xs text-red-400", children: errorMessage })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "outline",
+        onClick: resetError,
+        children: "Reintentar"
+      }
+    )
+  ] });
+}
+var Label = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Label$1.Root,
+    {
+      "data-slot": "label",
+      className: 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__ */ jsx(
+    Select$1.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: 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__ */ jsx(ChevronDownIcon, {})
+    }
+  );
+};
+var SelectScrollUpButton = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: 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__ */ jsx(ChevronUpIcon, {})
+    }
+  );
+};
+var SelectContent = ({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Select$1.Content,
+    {
+      "data-slot": "select-content",
+      "data-align-trigger": position === "item-aligned",
+      className: 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__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          Select$1.Viewport,
+          {
+            "data-position": position,
+            className: 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__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+};
+var SelectGroup = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.Group,
+    {
+      "data-slot": "select-group",
+      className: merge("scroll-my-1 p-1", className),
+      ...props
+    }
+  );
+};
+var SelectItem = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: 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__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+      ]
+    }
+  );
+};
+var SelectLabel = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.Label,
+    {
+      "data-slot": "select-label",
+      className: merge("px-2 py-1.5 text-xs text-muted-foreground", className),
+      ...props
+    }
+  );
+};
+var SelectSeparator = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.Separator,
+    {
+      "data-slot": "select-separator",
+      className: merge("pointer-events-none -mx-1 my-1 h-px bg-border/50", className),
+      ...props
+    }
+  );
+};
+var SelectTrigger = ({
+  className,
+  size = "default",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: 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__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })
+      ]
+    }
+  );
+};
+var SelectValue = (props) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.Value,
+    {
+      "data-slot": "select-value",
+      ...props
+    }
+  );
+};
+var Select = (props) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.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__ */ jsxs("div", { className: merge("flex flex-col gap-2", className), children: [
+    label && /* @__PURE__ */ jsx(
+      Label,
+      {
+        className: labelClassName,
+        htmlFor: label,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: value ?? "",
+        onValueChange: onChange,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              id: label,
+              className: 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__ */ jsx(SelectValue, { placeholder })
+            }
+          ),
+          /* @__PURE__ */ jsx(SelectContent, { position: "popper", children: /* @__PURE__ */ jsx(SelectGroup, { children: options.map((option) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-row items-center justify-between gap-2 px-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "text-orange-500 shrink-0 h-8 w-8" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-base text-gray-900 font-medium", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 font-medium", children: description })
+        ] })
+      ] }),
+      action
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between mb-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Icon, { className: "size-4 text-orange-500" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: title })
+    ] }),
+    onEdit && /* @__PURE__ */ 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__ */ jsx(PenLine, { className: "size-3.5" })
+      }
+    ),
+    action
+  ] });
+};
+var Breadcrumb = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      className: merge(className),
+      ...props
+    }
+  );
+};
+var BreadcrumbItem = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: merge("inline-flex items-center gap-1", className),
+      ...props
+    }
+  );
+};
+var BreadcrumbList = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: 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__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: merge("font-normal text-foreground", className),
+      ...props
+    }
+  );
+};
+var BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: merge("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+    }
+  );
+};
+var BreadcrumbList2 = ({ items }) => {
+  return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsx(Link, { to: item.href, children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) }),
+      !isLast && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
+    ] }, `${item.label}-${index}`);
+  }) }) });
+};
+var AppBreadcrumbs = ({ backRoute, config }) => {
+  const navigate = useNavigate();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        className: "px-0 w-fit h-fit",
+        onClick: () => navigate(backRoute),
+        "aria-label": "Volver",
+        children: /* @__PURE__ */ jsx(ArrowLeftCircle, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(BreadcrumbList2, { items: config })
+  ] });
+};
+var Tabs = ({
+  className,
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: merge("group/tabs flex gap-3 data-horizontal:flex-col", className),
+      ...props
+    }
+  );
+};
+var TabsContent = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Content,
+    {
+      "data-slot": "tabs-content",
+      className: 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__ */ jsx(
+    Tabs$1.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      "data-size": size,
+      className: merge(
+        "group/tabs-list flex items-center overflow-x-auto max-w-full",
+        variantClass,
+        className
+      ),
+      ...props
+    }
+  );
+};
+var TabsTrigger = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: 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__ */ jsxs(
+    Tabs,
+    {
+      defaultValue: defaultValue ?? config[0]?.value,
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          TabsList,
+          {
+            className: merge("", tabListClassname),
+            variant,
+            size,
+            children: config.map((tab) => {
+              const Icon = tab.icon;
+              return /* @__PURE__ */ jsxs(
+                TabsTrigger,
+                {
+                  value: tab.value,
+                  className: 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__ */ jsx(Icon, {}),
+                    /* @__PURE__ */ jsx("span", { children: tab.label })
+                  ]
+                },
+                tab.value
+              );
+            })
+          }
+        ),
+        config.map((tab) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between pt-2", children: [
+    showPageSizeSelector ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Mostrar" }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: String(pageSize),
+          onValueChange: (value) => onPageSizeChange(Number(value)),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-17.5 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: PAGE_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: String(size),
+                children: size
+              },
+              size
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "por p\xE1gina" })
+    ] }) : /* @__PURE__ */ jsx("div", {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(page - 1),
+          disabled: page <= 1,
+          className: ARROW_CLASSES,
+          "aria-label": "P\xE1gina anterior",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground px-1 select-none", children: [
+        "P\xE1gina ",
+        page,
+        " de ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(page + 1),
+          disabled: page >= totalPages,
+          className: ARROW_CLASSES,
+          "aria-label": "P\xE1gina siguiente",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+        }
+      )
+    ] })
+  ] });
+};
 var DropdownMenu = ({
   ...props
 }) => {
@@ -989,20 +1661,6 @@ var Badge = ({
     }
   );
 };
-var Breadcrumb = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "aria-label": "breadcrumb",
-      "data-slot": "breadcrumb",
-      className: merge(className),
-      ...props
-    }
-  );
-};
 var buttonGroupVariants = 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",
   {
@@ -1534,22 +2192,6 @@ var Item = ({
     }
   );
 };
-var Label = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Label$1.Root,
-    {
-      "data-slot": "label",
-      className: 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
@@ -1731,178 +2373,6 @@ var SectionCard = ({
     ) })
   ] });
 };
-var SelectScrollDownButton = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Select$1.ScrollDownButton,
-    {
-      "data-slot": "select-scroll-down-button",
-      className: 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__ */ jsx(ChevronDownIcon, {})
-    }
-  );
-};
-var SelectScrollUpButton = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Select$1.ScrollUpButton,
-    {
-      "data-slot": "select-scroll-up-button",
-      className: 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__ */ jsx(ChevronUpIcon, {})
-    }
-  );
-};
-var SelectContent = ({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
-    Select$1.Content,
-    {
-      "data-slot": "select-content",
-      "data-align-trigger": position === "item-aligned",
-      className: 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__ */ jsx(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx(
-          Select$1.Viewport,
-          {
-            "data-position": position,
-            className: 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__ */ jsx(SelectScrollDownButton, {})
-      ]
-    }
-  ) });
-};
-var SelectGroup = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Select$1.Group,
-    {
-      "data-slot": "select-group",
-      className: merge("scroll-my-1 p-1", className),
-      ...props
-    }
-  );
-};
-var SelectItem = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Select$1.Item,
-    {
-      "data-slot": "select-item",
-      className: 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__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ jsx(Select$1.ItemText, { children })
-      ]
-    }
-  );
-};
-var SelectLabel = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Select$1.Label,
-    {
-      "data-slot": "select-label",
-      className: merge("px-2 py-1.5 text-xs text-muted-foreground", className),
-      ...props
-    }
-  );
-};
-var SelectSeparator = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Select$1.Separator,
-    {
-      "data-slot": "select-separator",
-      className: merge("pointer-events-none -mx-1 my-1 h-px bg-border/50", className),
-      ...props
-    }
-  );
-};
-var SelectTrigger = ({
-  className,
-  size = "default",
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Select$1.Trigger,
-    {
-      "data-slot": "select-trigger",
-      "data-size": size,
-      className: 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__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })
-      ]
-    }
-  );
-};
-var SelectValue = (props) => {
-  return /* @__PURE__ */ jsx(
-    Select$1.Value,
-    {
-      "data-slot": "select-value",
-      ...props
-    }
-  );
-};
-var Select = (props) => {
-  return /* @__PURE__ */ jsx(
-    Select$1.Root,
-    {
-      "data-slot": "select",
-      ...props
-    }
-  );
-};
 var Sheet = (props) => {
   return /* @__PURE__ */ jsx(
     Dialog$1.Root,
@@ -2223,21 +2693,6 @@ var Table = ({
     }
   );
 };
-var Tabs = ({
-  className,
-  orientation = "horizontal",
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Root,
-    {
-      "data-slot": "tabs",
-      "data-orientation": orientation,
-      className: merge("group/tabs flex gap-3 data-horizontal:flex-col", className),
-      ...props
-    }
-  );
-};
 var toggleVariants = 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",
   {
@@ -2307,4 +2762,4 @@ var ToggleGroup = ({
   );
 };
 
-export { Accordion, ActionsMenu, AlertDialog, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Checkbox, Collapsible, Combobox, Command, ConfirmDialog, ContextMenu, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, Glow, HoverCard, Image, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, Item, Label, Menubar, Modal, Pagination, Popover, Progress, RadioGroup, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, Sidebar, Skeleton, Spinner, Steps, Switch, Table, Tabs, Textarea, Toaster, Toggle, ToggleGroup, Tooltip, TruncatedText, WaveLayer };
+export { Accordion, ActionsMenu, AlertDialog, AppBreadcrumbs, AppTabs, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Checkbox, Collapsible, Combobox, Command, ConfirmDialog, ContextMenu, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, Empty, ErrorFallback, FilterSelect, Glow, HoverCard, Image, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, Item, Label, Menubar, Modal, Pagination, Popover, Progress, RadioGroup, SectionCard, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, Sidebar, Skeleton, SlideUp, Spinner, Steps, Switch, Table, TablePagination, Tabs, Textarea, Toaster, Toggle, ToggleGroup, Tooltip, TruncatedText, WaveLayer };