@grupor5/raya 0.2.1 → 0.2.3

package/dist/molecules/data-table/index.js

@@ -0,0 +1,1456 @@
+'use strict';
+
+var React2 = require('react');
+var reactTable = require('@tanstack/react-table');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var reactSlot = require('@radix-ui/react-slot');
+var SelectPrimitive = require('@radix-ui/react-select');
+var reactIcons = require('@radix-ui/react-icons');
+var classVarianceAuthority = require('class-variance-authority');
+var rayaIcons = require('@grupor5/raya-icons');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
+var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var ScrollArea = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScrollAreaPrimitive__namespace.Root,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("relative overflow-hidden", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      ]
+    })
+  );
+});
+ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
+var ScrollBar = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+    __spreadProps(__spreadValues({
+      ref,
+      orientation,
+      className: cn(
+        "group flex touch-none select-none transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" && "h-2.5 rounded-full border-t border-t-transparent p-[1px] bg-scrollbar-track",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ScrollAreaPrimitive__namespace.Thumb,
+        {
+          className: cn(
+            "relative rounded-full bg-scrollbar-thumb transition-all duration-200",
+            // Altura por defecto y en hover
+            "h-1 group-hover:h-2",
+            // "Handles" en los extremos que aparecen en hover
+            "group-hover:before:absolute group-hover:before:left-1 group-hover:before:top-1/2 group-hover:before:h-1 group-hover:before:w-1 group-hover:before:-translate-y-1/2 group-hover:before:rounded-full group-hover:before:bg-white group-hover:before:content-['']",
+            "group-hover:after:absolute group-hover:after:right-1 group-hover:after:top-1/2 group-hover:after:h-1 group-hover:after:w-1 group-hover:after:-translate-y-1/2 group-hover:after:rounded-full group-hover:after:bg-white group-hover:after:content-['']"
+          )
+        }
+      )
+    })
+  );
+});
+ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
+var Table = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "table",
+      __spreadValues({
+        ref,
+        className: cn("w-full caption-bottom text-sm", className)
+      }, props)
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal" })
+  ] });
+});
+Table.displayName = "Table";
+var TableHeader = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b", className) }, props));
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tbody",
+    __spreadValues({
+      ref,
+      className: cn("[&_tr:last-child]:border-0", className)
+    }, props)
+  );
+});
+TableBody.displayName = "TableBody";
+var TableFooter = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tfoot",
+    __spreadValues({
+      ref,
+      className: cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )
+    }, props)
+  );
+});
+TableFooter.displayName = "TableFooter";
+var TableRow = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    __spreadValues({
+      ref,
+      className: cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )
+    }, props)
+  );
+});
+TableRow.displayName = "TableRow";
+var TableHead = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    __spreadValues({
+      ref,
+      className: cn(
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )
+    }, props)
+  );
+});
+TableHead.displayName = "TableHead";
+var TableCell = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    __spreadValues({
+      ref,
+      className: cn(
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )
+    }, props)
+  );
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "caption",
+    __spreadValues({
+      ref,
+      className: cn("mt-4 text-sm text-muted-foreground", className)
+    }, props)
+  );
+});
+TableCaption.displayName = "TableCaption";
+var DOTS = "...";
+var range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, idx) => idx + start);
+};
+var usePagination = ({
+  totalCount,
+  pageSize,
+  siblingCount = 1,
+  currentPage
+}) => {
+  const paginationRange = React2.useMemo(() => {
+    const totalPageCount = Math.ceil(totalCount / pageSize);
+    if (totalPageCount <= 10) {
+      return range(1, totalPageCount);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(
+      currentPage + siblingCount,
+      totalPageCount
+    );
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPageCount;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = range(1, leftItemCount);
+      return [...leftRange, DOTS, totalPageCount];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = range(
+        totalPageCount - rightItemCount + 1,
+        totalPageCount
+      );
+      return [firstPageIndex, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+    return range(1, totalPageCount);
+  }, [totalCount, pageSize, siblingCount, currentPage]);
+  return paginationRange;
+};
+
+// src/tokens/buttons.ts
+var buttonSizeClasses = {
+  sm: {
+    base: "h-8 px-2 py-1 text-sm rounded-[10px]",
+    icon: "h-8 w-8 rounded-[10px]",
+    iconSize: "w-4 h-4"
+  },
+  md: {
+    base: "h-10 px-4 py-2 text-base rounded-xl",
+    icon: "h-10 w-10 rounded-xl",
+    iconSize: "w-5 h-5"
+  },
+  lg: {
+    base: "h-12 px-6 py-3 text-lg rounded-2xl",
+    icon: "h-12 w-12 rounded-2xl",
+    iconSize: "w-[22px] h-[22px]"
+  }
+};
+var buttonVariantClasses = {
+  // Primary variants
+  primary: {
+    primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-[hsl(var(--primary-pressed))] disabled:bg-neutral-300 disabled:text-neutral-500",
+    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500",
+    success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500",
+    warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500",
+    destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500",
+    neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500"
+  },
+  // Secondary variants (outlined)
+  secondary: {
+    primary: "border border-primary text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    secondary: "border border-secondary text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    success: "border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    warning: "border border-amber-600 text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    destructive: "border border-destructive text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    neutral: "border border-neutral-700 text-neutral-700 bg-transparent hover:bg-neutral-50 active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent"
+  },
+  // Ghost variants (text only)
+  ghost: {
+    primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent",
+    secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent",
+    success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent",
+    warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent",
+    destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent",
+    neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent"
+  }
+};
+var buttonBaseClasses = "inline-flex items-center justify-center gap-2 whitespace-nowrap font-regular transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:border-2 focus-visible:border-[--stroke-color-focus-border]";
+var buttonLoadingClasses = {
+  spinner: "animate-spin",
+  container: "flex items-center justify-center gap-2",
+  text: "opacity-70"
+};
+var getButtonSizeClasses = (size, isIcon) => {
+  return isIcon ? buttonSizeClasses[size].icon : buttonSizeClasses[size].base;
+};
+var getButtonVariantClasses = (variant, color) => {
+  var _a;
+  if (variant === "icon") {
+    return buttonVariantClasses.ghost[color];
+  }
+  return ((_a = buttonVariantClasses[variant]) == null ? void 0 : _a[color]) || "";
+};
+var getButtonIconSize = (size) => {
+  return buttonSizeClasses[size].iconSize;
+};
+var defaultButtonConfig = {
+  variant: "primary",
+  size: "md",
+  color: "primary",
+  type: "button"
+};
+var LoadingSpinner = ({
+  size,
+  className
+}) => {
+  const sizeClasses = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(buttonLoadingClasses.spinner, sizeClasses[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { fill: "none", viewBox: "0 0 24 24", className: "w-full h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        className: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      }
+    )
+  ] }) });
+};
+var Button = React2.forwardRef((_a, ref) => {
+  var _b = _a, {
+    variant = defaultButtonConfig.variant,
+    size = defaultButtonConfig.size,
+    color = defaultButtonConfig.color,
+    disabled = false,
+    loading = false,
+    loadingText,
+    icon,
+    iconLeft,
+    iconRight,
+    className,
+    children,
+    type = defaultButtonConfig.type,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    asChild = false,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "color",
+    "disabled",
+    "loading",
+    "loadingText",
+    "icon",
+    "iconLeft",
+    "iconRight",
+    "className",
+    "children",
+    "type",
+    "aria-label",
+    "aria-describedby",
+    "asChild",
+    "onClick"
+  ]);
+  const isIconOnly = variant === "icon" || !!(!children && (icon || iconLeft || iconRight));
+  const buttonClasses = React2.useMemo(() => {
+    const sizeClasses = getButtonSizeClasses(size, isIconOnly);
+    const variantClasses = getButtonVariantClasses(variant, color);
+    return cn(
+      buttonBaseClasses,
+      sizeClasses,
+      variantClasses,
+      className
+    );
+  }, [variant, size, color, isIconOnly, className]);
+  const buttonContent = React2.useMemo(() => {
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: buttonLoadingClasses.container, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { size }),
+        loadingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: buttonLoadingClasses.text, children: loadingText })
+      ] });
+    }
+    const iconSizeClass = getButtonIconSize(size);
+    const renderIcon = (iconNode) => {
+      if (React2__namespace.default.isValidElement(iconNode)) {
+        return React2__namespace.default.cloneElement(iconNode, {
+          className: cn(iconSizeClass, iconNode.props.className),
+          "aria-hidden": true
+        });
+      }
+      return iconNode;
+    };
+    if (isIconOnly) {
+      return renderIcon(icon || iconLeft || iconRight);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center justify-center gap-2", children: [
+      iconLeft && renderIcon(iconLeft),
+      children && /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+      iconRight && renderIcon(iconRight)
+    ] });
+  }, [loading, loadingText, isIconOnly, icon, iconLeft, iconRight, children, size]);
+  const accessibilityProps = React2.useMemo(() => {
+    const props2 = {};
+    if (isIconOnly && !ariaLabel) {
+      console.warn("Icon-only buttons should have an aria-label for accessibility");
+    }
+    if (ariaLabel) {
+      props2["aria-label"] = ariaLabel;
+    }
+    if (ariaDescribedBy) {
+      props2["aria-describedby"] = ariaDescribedBy;
+    }
+    if (loading) {
+      props2["aria-busy"] = true;
+      props2["aria-disabled"] = true;
+    }
+    if (disabled || loading) {
+      props2["aria-disabled"] = true;
+    }
+    return props2;
+  }, [isIconOnly, ariaLabel, ariaDescribedBy, loading, disabled]);
+  const handleClick = (event) => {
+    if (disabled || loading) {
+      event.preventDefault();
+      return;
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      __spreadProps(__spreadValues(__spreadValues({
+        ref,
+        className: buttonClasses
+      }, accessibilityProps), props), {
+        children
+      })
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref,
+      type,
+      className: buttonClasses,
+      disabled: disabled || loading,
+      onClick: handleClick
+    }, accessibilityProps), props), {
+      children: [
+        loading && /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        loading && loadingText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: buttonLoadingClasses.text, children: loadingText }) : buttonContent
+      ]
+    })
+  );
+});
+Button.displayName = "Button";
+var Select = SelectPrimitive__namespace.Root;
+var SelectValue = SelectPrimitive__namespace.Value;
+var SelectTrigger = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.Trigger,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+      ]
+    })
+  );
+});
+SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
+var SelectScrollUpButton = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectPrimitive__namespace.ScrollUpButton,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronUpIcon, { className: "h-4 w-4" })
+    })
+  );
+});
+SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
+var SelectScrollDownButton = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectPrimitive__namespace.ScrollDownButton,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: "h-4 w-4" })
+    })
+  );
+});
+SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
+var SelectContent = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.Content,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-select-content-transform-origin]",
+        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
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectPrimitive__namespace.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+      ]
+    })
+  ) });
+});
+SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+var SelectLabel = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectPrimitive__namespace.Label,
+    __spreadValues({
+      ref,
+      className: cn("px-2 py-1.5 text-sm font-semibold", className)
+    }, props)
+  );
+});
+SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
+var SelectItem = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.Item,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+      ]
+    })
+  );
+});
+SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+var SelectSeparator = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectPrimitive__namespace.Separator,
+    __spreadValues({
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-muted", className)
+    }, props)
+  );
+});
+SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
+function Pagination(_a) {
+  var _b = _a, {
+    totalCount,
+    pageSize,
+    currentPage,
+    onPageChange,
+    onPageSizeChange,
+    siblingCount = 1,
+    pageSizes = [10, 20, 30, 40, 50],
+    className
+  } = _b, props = __objRest(_b, [
+    "totalCount",
+    "pageSize",
+    "currentPage",
+    "onPageChange",
+    "onPageSizeChange",
+    "siblingCount",
+    "pageSizes",
+    "className"
+  ]);
+  const paginationRange = usePagination({
+    currentPage,
+    totalCount,
+    pageSize,
+    siblingCount
+  });
+  if (currentPage === 0 || paginationRange && paginationRange.length < 2) {
+    return null;
+  }
+  const onNext = () => {
+    onPageChange(currentPage + 1);
+  };
+  const onPrevious = () => {
+    onPageChange(currentPage - 1);
+  };
+  const lastPage = paginationRange ? paginationRange[paginationRange.length - 1] : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn("flex items-center justify-end space-x-6 px-2", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "h-9 w-9 p-0",
+              onClick: onPrevious,
+              disabled: currentPage === 1,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to previous page" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-5 w-5" })
+              ]
+            }
+          ),
+          paginationRange == null ? void 0 : paginationRange.map((pageNumber, index) => {
+            if (pageNumber === DOTS) {
+              return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 text-muted-foreground", children: "\u2026" }, index);
+            }
+            const isCurrent = currentPage === pageNumber;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                className: cn(
+                  "h-9 w-9 rounded-md p-0 text-sm font-medium",
+                  isCurrent && "bg-pagination-current text-white hover:bg-pagination-current/90",
+                  !isCurrent && "text-primary hover:bg-pagination-hover"
+                ),
+                onClick: () => onPageChange(Number(pageNumber)),
+                children: pageNumber
+              },
+              index
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "h-9 w-9 p-0",
+              onClick: onNext,
+              disabled: currentPage === lastPage,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to next page" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-5 w-5" })
+              ]
+            }
+          )
+        ] }),
+        onPageSizeChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Select,
+          {
+            value: `${pageSize}`,
+            onValueChange: (value) => {
+              onPageSizeChange(Number(value));
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-9 w-auto min-w-[180px]", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Resultados por p\xE1gina" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { side: "top", children: pageSizes.map((size) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: `${size}`, children: size }, size)) })
+            ]
+          }
+        ) })
+      ]
+    })
+  );
+}
+function DataTablePagination({
+  table
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pagination,
+    {
+      currentPage: table.getState().pagination.pageIndex + 1,
+      totalCount: table.getFilteredRowModel().rows.length,
+      pageSize: table.getState().pagination.pageSize,
+      onPageChange: (page) => table.setPageIndex(page - 1),
+      onPageSizeChange: (size) => table.setPageSize(size)
+    }
+  );
+}
+var typographyVariants = classVarianceAuthority.cva("font-primary", {
+  variants: {
+    variant: {
+      "display-l": "text-display-l",
+      "heading-xl": "text-heading-xl",
+      "heading-lg": "text-heading-lg",
+      "heading-md": "text-heading-md",
+      "heading-sm": "text-heading-sm",
+      "subheading-lg": "text-subheading-lg",
+      "subheading-md": "text-subheading-md",
+      "subheading-sm": "text-subheading-sm",
+      "body-bold-lg": "text-body-bold-lg",
+      "body-bold-md": "text-body-bold-md",
+      "body-bold-sm": "text-body-bold-sm",
+      "body-bold-xs": "text-body-bold-xs",
+      "body-lg": "text-body-lg",
+      "body-md": "text-body-md",
+      "body-sm": "text-body-sm",
+      "body-xs": "text-body-xs",
+      "caption-c1": "text-caption-c1"
+    }
+  },
+  defaultVariants: {
+    variant: "body-md"
+  }
+});
+var Typography = React2__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, as: Component = "p" } = _b, props = __objRest(_b, ["className", "variant", "as"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      __spreadValues({
+        className: cn(typographyVariants({ variant, className })),
+        ref
+      }, props)
+    );
+  }
+);
+Typography.displayName = "Typography";
+var levelMapping = {
+  1: { as: "h1", variant: "display-l" },
+  2: { as: "h2", variant: "heading-xl" },
+  3: { as: "h3", variant: "heading-lg" },
+  4: { as: "h4", variant: "heading-md" },
+  5: { as: "h5", variant: "heading-sm" },
+  6: { as: "h6", variant: "subheading-lg" }
+};
+var Title = React2__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { level, variant } = _b, props = __objRest(_b, ["level", "variant"]);
+    const { as, variant: defaultVariant } = levelMapping[level];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Typography,
+      __spreadValues({
+        ref,
+        as,
+        variant: variant || defaultVariant
+      }, props)
+    );
+  }
+);
+Title.displayName = "Title";
+var Paragraph = React2__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { variant = "body-md" } = _b, props = __objRest(_b, ["variant"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Typography,
+      __spreadValues({
+        ref,
+        as: "p",
+        variant
+      }, props)
+    );
+  }
+);
+Paragraph.displayName = "Paragraph";
+var Input = React2__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, type, error, helperText, label, required, id, icon } = _b, props = __objRest(_b, ["className", "type", "error", "helperText", "label", "required", "id", "icon"]);
+    const inputId = id || `input-${React2__namespace.useId()}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "text-body-xs font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            required && "after:content-['*'] after:text-destructive after:ml-1"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          __spreadValues({
+            id: inputId,
+            type,
+            className: cn(
+              "flex h-10 w-full rounded-lg border border-primary-300 bg-background py-2 pr-3",
+              "text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium",
+              "placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+              "focus-visible:shadow-focus active:shadow-pressed",
+              error && "border-destructive focus-visible:shadow-destructive",
+              icon ? "pl-10" : "pl-3",
+              className
+            ),
+            ref,
+            "aria-invalid": error ? "true" : "false",
+            "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0
+          }, props)
+        )
+      ] }),
+      helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${inputId}-helper`, className: "text-body-xs text-muted-foreground", children: helperText }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${inputId}-error`, className: "text-body-xs text-destructive", children: typeof error === "string" ? error : "Este campo tiene errores" })
+    ] });
+  }
+);
+Input.displayName = "Input";
+function DataTableToolbar({
+  category,
+  title,
+  description,
+  showSearch = true,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search...",
+  actions
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between border-b border-primary-300 pb-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+      category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-normal uppercase tracking-wider text-primary-700", children: category }),
+      title && /* @__PURE__ */ jsxRuntime.jsx(Title, { level: 4, children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { className: "text-primary-700", children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+      showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-64", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          placeholder: searchPlaceholder,
+          value: searchValue,
+          onChange: (e) => onSearchChange == null ? void 0 : onSearchChange(e.target.value),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(rayaIcons.SearchNormalIcon, { className: "h-4 w-4 text-primary-600" })
+        }
+      ) }),
+      actions
+    ] })
+  ] });
+}
+function DataTable(_a) {
+  var _b = _a, {
+    columns: columns2,
+    data,
+    isLoading = false,
+    searchKey = "email"
+  } = _b, toolbarProps = __objRest(_b, [
+    "columns",
+    "data",
+    "isLoading",
+    "searchKey"
+  ]);
+  var _a2, _b2, _c;
+  const [sorting, setSorting] = React2__namespace.useState([]);
+  const [columnFilters, setColumnFilters] = React2__namespace.useState(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] = React2__namespace.useState({});
+  const [rowSelection, setRowSelection] = React2__namespace.useState({});
+  const table = reactTable.useReactTable({
+    data,
+    columns: columns2,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getFilteredRowModel: reactTable.getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection
+    }
+  });
+  const { showSearch = true, actions } = toolbarProps;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DataTableToolbar,
+      __spreadProps(__spreadValues({}, toolbarProps), {
+        showSearch,
+        searchValue: (_b2 = (_a2 = table.getColumn(searchKey)) == null ? void 0 : _a2.getFilterValue()) != null ? _b2 : "",
+        onSearchChange: (value) => {
+          var _a3;
+          return (_a3 = table.getColumn(searchKey)) == null ? void 0 : _a3.setFilterValue(value);
+        },
+        actions
+      })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border mt-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: "bg-header", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header, index) => {
+        const isFirst = index === 0;
+        const isLast = index === headerGroup.headers.length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TableHead,
+          {
+            className: cn("text-primary-1200", {
+              "text-left": isFirst,
+              "text-right": isLast,
+              "rounded-tl-md": isFirst,
+              "rounded-tr-md": isLast
+            }),
+            children: header.isPlaceholder ? null : reactTable.flexRender(
+              header.column.columnDef.header,
+              header.getContext()
+            )
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: isLoading ? Array.from({
+        length: table.getState().pagination.pageSize
+      }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: table.getVisibleLeafColumns().map((column, index) => {
+        var _a3;
+        const isLast = index === table.getVisibleLeafColumns().length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TableCell,
+          {
+            className: cn({ "text-right": isLast }),
+            children: ((_a3 = column.columnDef.meta) == null ? void 0 : _a3.skeleton) ? React2__namespace.createElement(
+              column.columnDef.meta.skeleton
+            ) : null
+          },
+          `skeleton-cell-${column.id}`
+        );
+      }) }, `skeleton-row-${i}`)) : ((_c = table.getRowModel().rows) == null ? void 0 : _c.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          children: row.getVisibleCells().map((cell, index) => {
+            const isLast = index === row.getVisibleCells().length - 1;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TableCell,
+              {
+                className: cn({ "text-right": isLast }),
+                children: reactTable.flexRender(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                )
+              },
+              cell.id
+            );
+          })
+        },
+        row.id
+      )) : /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell,
+        {
+          colSpan: columns2.length,
+          className: "h-24 text-center",
+          children: "No results."
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx(DataTablePagination, { table }) })
+  ] });
+}
+var Checkbox = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CheckboxPrimitive__namespace.Root,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "peer h-5 w-5 shrink-0 rounded border-2 mx-s",
+        "focus-visible:outline-none focus-visible:shadow-focus",
+        // Unchecked
+        "border-primary-1200",
+        // Checked & Indeterminate
+        "data-[state=checked]:bg-primary-1200 data-[state=checked]:text-neutral-10 data-[state=checked]:border-primary-1200",
+        "data-[state=indeterminate]:bg-primary-1200 data-[state=indeterminate]:text-neutral-10 data-[state=indeterminate]:border-primary-1200",
+        // Pressed states
+        "data-[state=checked]:active:bg-primary-900 data-[state=indeterminate]:active:bg-primary-900",
+        // Disabled states
+        "disabled:cursor-not-allowed disabled:opacity-40",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        CheckboxPrimitive__namespace.Indicator,
+        {
+          className: cn("flex items-center justify-center text-current"),
+          children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
+        }
+      )
+    })
+  );
+});
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-badge border px-badge-x py-badge-y text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        success: "border-transparent",
+        danger: "border-transparent",
+        pending: "border-transparent",
+        "in-progress": "border-transparent"
+      },
+      shape: {
+        rounded: "",
+        circular: "rounded-full !px-0"
+      },
+      size: {
+        sm: "text-badge-sm",
+        md: "text-badge-md",
+        lg: "text-badge-lg"
+      },
+      visual: {
+        solid: "",
+        dot: "bg-transparent"
+      }
+    },
+    compoundVariants: [
+      // Default
+      {
+        variant: "default",
+        visual: "solid",
+        className: "bg-badge-default-background text-badge-default-text-on-solid"
+      },
+      {
+        variant: "default",
+        visual: "dot",
+        className: "text-badge-default-text"
+      },
+      // In Progress
+      {
+        variant: "in-progress",
+        visual: "solid",
+        className: "bg-badge-in-progress-background text-badge-in-progress-text"
+      },
+      {
+        variant: "in-progress",
+        visual: "dot",
+        className: "text-badge-in-progress-text"
+      },
+      // Success
+      {
+        variant: "success",
+        visual: "solid",
+        className: "bg-badge-success-background text-badge-success-text"
+      },
+      {
+        variant: "success",
+        visual: "dot",
+        className: "text-badge-success-text"
+      },
+      // Pending
+      {
+        variant: "pending",
+        visual: "solid",
+        className: "bg-badge-pending-background text-badge-pending-text"
+      },
+      {
+        variant: "pending",
+        visual: "dot",
+        className: "text-badge-pending-text"
+      },
+      // Danger
+      {
+        variant: "danger",
+        visual: "solid",
+        className: "bg-badge-danger-background text-badge-danger-text"
+      },
+      {
+        variant: "danger",
+        visual: "dot",
+        className: "text-badge-danger-text"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      visual: "solid",
+      shape: "rounded"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, { className, variant, size, visual, shape } = _b, props = __objRest(_b, ["className", "variant", "size", "visual", "shape"]);
+  const iconSize = size === "sm" ? 8 : size === "lg" ? 12 : 10;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({ className: cn(badgeVariants({ variant, size, visual, shape }), className) }, props), { children: [
+    visual === "dot" && /* @__PURE__ */ jsxRuntime.jsx(
+      rayaIcons.DotIcon,
+      {
+        size: iconSize,
+        className: cn("flex-shrink-0", { "mr-1.5": !!props.children })
+      }
+    ),
+    props.children
+  ] }));
+}
+var statusVariantMap = {
+  success: "success",
+  processing: "in-progress",
+  pending: "pending",
+  failed: "danger"
+};
+var statusTextMap = {
+  success: "Success",
+  processing: "In Progress",
+  pending: "Pending",
+  failed: "Failed"
+};
+function BadgeCell({ status }) {
+  const variant = statusVariantMap[status] || "default";
+  const text = statusTextMap[status] || "Unknown";
+  return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, children: text });
+}
+function BadgeCellSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-24 animate-pulse rounded-md bg-neutral-200" }) });
+}
+function TextCell({ primary, secondary }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-primary", children: primary }),
+    secondary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: secondary })
+  ] });
+}
+function TextCellSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-40 animate-pulse rounded-md bg-neutral-200" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-24 animate-pulse rounded-md bg-neutral-200" })
+  ] });
+}
+function getInitials(name) {
+  const [firstName, lastName] = name.split(" ");
+  if (firstName && lastName) {
+    return `${firstName[0]}${lastName[0]}`.toUpperCase();
+  }
+  return firstName ? `${firstName.substring(0, 2)}`.toUpperCase() : "N/A";
+}
+var Avatar = React2__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { src, name, className } = _b, props = __objRest(_b, ["src", "name", "className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-semibold text-primary",
+          className
+        )
+      }, props), {
+        children: src ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt: name,
+            className: "h-full w-full rounded-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: getInitials(name) })
+      })
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+function AvatarSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 shrink-0 animate-pulse rounded-full bg-neutral-200" });
+}
+function UserCell({ avatarUrl, name, email }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarUrl, name }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextCell, { primary: name, secondary: email })
+  ] });
+}
+function UserCellSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarSkeleton, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(TextCellSkeleton, {})
+  ] });
+}
+function ActionsCell() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end space-x-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Open menu" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Delete" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+    ] })
+  ] });
+}
+function ActionsCellSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-pulse rounded-md bg-neutral-200" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-pulse rounded-md bg-neutral-200" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-pulse rounded-md bg-neutral-200" })
+  ] });
+}
+var SortableHeader = ({
+  column,
+  children,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: cn("flex w-full items-center cursor-pointer", className),
+    onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+);
+var columns = [
+  {
+    id: "select",
+    header: ({ table }) => /* @__PURE__ */ jsxRuntime.jsx(
+      Checkbox,
+      {
+        checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+        onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+        "aria-label": "Select all"
+      }
+    ),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(
+      Checkbox,
+      {
+        checked: row.getIsSelected(),
+        onCheckedChange: (value) => row.toggleSelected(!!value),
+        "aria-label": "Select row"
+      }
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      skeleton: ActionsCellSkeleton
+      // Un checkbox skeleton sería ideal, pero usamos este por ahora
+    }
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "User" }),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(
+      UserCell,
+      {
+        name: `${row.original.firstName} ${row.original.lastName}`,
+        email: row.getValue("email")
+      }
+    ),
+    meta: {
+      skeleton: UserCellSkeleton
+    }
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Status" }),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(BadgeCell, { status: row.getValue("status") }),
+    meta: {
+      skeleton: BadgeCellSkeleton
+    }
+  },
+  {
+    accessorKey: "amount",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, className: "justify-end", children: "Amount" }),
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"));
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD"
+      }).format(amount);
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right font-medium", children: formatted });
+    },
+    meta: {
+      skeleton: TextCellSkeleton
+    }
+  },
+  {
+    accessorKey: "jobTitle",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Job Title" }),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(
+      TextCell,
+      {
+        primary: row.getValue("jobTitle"),
+        secondary: row.original.company
+      }
+    ),
+    meta: {
+      skeleton: TextCellSkeleton
+    }
+  },
+  {
+    accessorKey: "company",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Company" }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "city",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "City" }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "country",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Country" }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "phone",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Phone" }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "website",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Website" }),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: row.getValue("website"),
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-blue-600 hover:underline",
+        children: "View"
+      }
+    ),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "bio",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Bio" }),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-48 truncate", children: row.getValue("bio") }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "streetAddress",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Street Address" }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "zipCode",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Zip Code" }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "state",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "State" }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "username",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Username" }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    accessorKey: "favoriteColor",
+    header: ({ column }) => /* @__PURE__ */ jsxRuntime.jsx(SortableHeader, { column, children: "Favorite Color" }),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-4 w-4 rounded-full border",
+          style: { backgroundColor: row.getValue("favoriteColor") }
+        }
+      ),
+      row.getValue("favoriteColor")
+    ] }),
+    meta: { skeleton: TextCellSkeleton }
+  },
+  {
+    id: "actions",
+    cell: () => /* @__PURE__ */ jsxRuntime.jsx(ActionsCell, {}),
+    meta: {
+      skeleton: ActionsCellSkeleton
+    }
+  }
+];
+
+exports.DataTable = DataTable;
+exports.DataTablePagination = DataTablePagination;
+exports.columns = columns;