'use client';

// src/components/DataTable/DataTableColumnHeader.tsx
import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon, EyeNoneIcon } from "@paalan/react-icons";
import { cn as cn15 } from "@paalan/react-shared/lib";

// src/components/Button/Button.tsx
import { ArrowPathIcon } from "@paalan/react-icons";
import { cn as cn13 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef15 } from "@paalan/react-shared/utils";
import { Slot } from "@radix-ui/react-slot";
import { cva as cva2 } from "class-variance-authority";

// src/base/Box/Box.tsx
import { StyledComponent, WithStyledComponent } from "@paalan/react-shared/system";
import { forwardRef } from "@paalan/react-shared/utils";
import { jsx } from "react/jsx-runtime";
var Box = forwardRef((props, ref) => {
  return /* @__PURE__ */ jsx(StyledComponent, { ...props, ref });
});
Box.withComponent = WithStyledComponent;

// src/base/Center/Center.tsx
import { cn } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef2 } from "@paalan/react-shared/utils";
import { jsx as jsx2 } from "react/jsx-runtime";
var Center = forwardRef2((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx2(Box, { className: cn("flex items-center justify-center", className), ...restProps, ref, children });
});

// src/base/Container/Container.tsx
import { cn as cn2 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef3 } from "@paalan/react-shared/utils";
import { jsx as jsx3 } from "react/jsx-runtime";
var Container = forwardRef3((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx3(Box, { className: cn2("container", className), ...restProps, ref, children });
});

// src/base/Flex/Flex.tsx
import { cn as cn3 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef4 } from "@paalan/react-shared/utils";
import { jsx as jsx4 } from "react/jsx-runtime";
var Flex = forwardRef4((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx4(Box, { className: cn3("flex", className), ...restProps, ref, children });
});

// src/base/Grid/Grid.tsx
import { cn as cn4 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef5 } from "@paalan/react-shared/utils";
import { jsx as jsx5 } from "react/jsx-runtime";
var Grid = forwardRef5((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx5(Box, { className: cn4("grid", className), ...restProps, ref, children });
});
var GridItem = forwardRef5((props, ref) => {
  const { children, ...restProps } = props;
  return /* @__PURE__ */ jsx5(Box, { ...restProps, ref, children });
});

// src/base/HStack/HStack.tsx
import { cn as cn5 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef6 } from "@paalan/react-shared/utils";
import { jsx as jsx6 } from "react/jsx-runtime";
var HStack = forwardRef6((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx6(Box, { className: cn5("flex flex-row items-center gap-2", className), ...restProps, ref, children });
});

// src/base/Heading/Heading.tsx
import { cn as cn6 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef7 } from "@paalan/react-shared/utils";
import { jsx as jsx7 } from "react/jsx-runtime";
var headingSizes = {
  h1: "text-3xl font-bold",
  h2: "text-2xl font-bold",
  h3: "text-xl font-semibold",
  h4: "text-lg font-semibold",
  h5: "text-base font-semibold",
  h6: "text-sm font-semibold"
};
var Heading = forwardRef7((props, ref) => {
  const { children, as: headTag = "h1", className, ...restProps } = props;
  const size = headingSizes[headTag];
  return /* @__PURE__ */ jsx7(Box, { as: headTag, ...restProps, ref, className: cn6(size, className), children });
});

// src/base/Paper/Paper.tsx
import { cn as cn7 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef8 } from "@paalan/react-shared/utils";
import { cva } from "class-variance-authority";
import { jsx as jsx8 } from "react/jsx-runtime";
var paperVariants = cva("bg-background text-foreground", {
  variants: {
    shadow: {
      default: "shadow",
      sm: "shadow-sm",
      md: "shadow-md",
      lg: "shadow-lg",
      xl: "shadow-xl",
      "2xl": "shadow-2xl",
      inner: "shadow-inner",
      none: "shadow-none"
    }
  },
  defaultVariants: {
    shadow: "default"
  }
});
var Paper = forwardRef8(
  ({ withBorder, shadow, className, ...props }, ref) => {
    return /* @__PURE__ */ jsx8(
      Box,
      {
        ref,
        className: cn7(paperVariants({ shadow }), withBorder ? "border border-border" : "", className),
        ...props
      }
    );
  }
);

// src/base/Portal/Portal.tsx
import { forwardRef as forwardRef9, useRef, useState } from "react";
import { useIsomorphicEffect } from "@paalan/react-hooks";
import { assignRef } from "@paalan/react-shared/utils";
import { createPortal } from "react-dom";
import { Fragment, jsx as jsx9 } from "react/jsx-runtime";
var createPortalNode = (props) => {
  const node = document.createElement("div");
  node.setAttribute("data-portal", "true");
  if (typeof props.className === "string") {
    node.classList.add(...props.className.split(" "));
  }
  if (typeof props.style === "object") {
    Object.assign(node.style, props.style);
  }
  if (typeof props.id === "string") {
    node.setAttribute("id", props.id);
  }
  return node;
};
var defaultProps = {};
var Portal = forwardRef9((props, ref) => {
  const { children, target, ...others } = { ...defaultProps, ...props };
  const [mounted, setMounted] = useState(false);
  const nodeRef = useRef(null);
  useIsomorphicEffect(() => {
    setMounted(true);
    nodeRef.current = !target ? createPortalNode(others) : typeof target === "string" ? document.querySelector(target) : target;
    if (!nodeRef.current) return;
    assignRef(ref, nodeRef.current);
    if (!target && nodeRef.current) {
      document.body.appendChild(nodeRef.current);
    }
    return () => {
      if (!target && nodeRef.current) {
        document.body.removeChild(nodeRef.current);
      }
    };
  }, [target]);
  if (!mounted || !nodeRef.current) {
    return null;
  }
  return createPortal(/* @__PURE__ */ jsx9(Fragment, { children }), nodeRef.current);
});
Portal.displayName = "Portal";

// src/base/Stack/Stack.tsx
import { cn as cn8 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef10 } from "@paalan/react-shared/utils";
import { jsx as jsx10 } from "react/jsx-runtime";
var Stack = forwardRef10((props, ref) => {
  const { children, className, direction, ...restProps } = props;
  return /* @__PURE__ */ jsx10(Box, { className: cn8("flex flex-col gap-2", className), flexDirection: direction, ...restProps, ref, children });
});

// src/base/Text/Text.tsx
import { cn as cn9 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef11 } from "@paalan/react-shared/utils";
import { jsx as jsx11 } from "react/jsx-runtime";
var Text = forwardRef11((props, ref) => {
  const { children, className, as = "p", ...restProps } = props;
  return /* @__PURE__ */ jsx11(Box, { as, ref, className: cn9("", className), ...restProps, children });
});

// src/base/Typography/Typography.tsx
import { cn as cn10 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef12 } from "@paalan/react-shared/utils";
import { jsx as jsx12 } from "react/jsx-runtime";
var H1 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "h1",
    ref,
    className: cn10("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className),
    ...props
  }
));
H1.displayName = "H1";
var H2 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "h2",
    ref,
    className: cn10(
      "mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0",
      className
    ),
    ...props
  }
));
H2.displayName = "H2";
var H3 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "h3",
    ref,
    className: cn10("mt-8 scroll-m-20 text-2xl font-semibold tracking-tight", className),
    ...props
  }
));
H3.displayName = "H3";
var H4 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "h4", ref, className: cn10("scroll-m-20 text-xl font-semibold tracking-tight", className), ...props }));
H4.displayName = "H4";
var H5 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "h5", ref, className: cn10("scroll-m-20 text-lg font-semibold tracking-tight", className), ...props }));
H5.displayName = "H5";
var H6 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "h6", ref, className: cn10("scroll-m-20 text-base font-semibold tracking-tight", className), ...props }));
H6.displayName = "H6";
var P = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "p", ref, className: cn10("leading-7 [&:not(:first-child)]:mt-4", className), ...props }));
P.displayName = "P";
var BlockQuote = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
    Box,
    {
      as: "blockquote",
      ref,
      className: cn10(
        "mt-6 border-l-2 border-slate-300 pl-6 italic text-slate-800 dark:border-slate-600 dark:text-slate-200",
        className
      ),
      ...props
    }
  )
);
BlockQuote.displayName = "BlockQuote";
var TableLayout = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "table", ref, className: cn10("w-full", className), ...props })
);
TableLayout.displayName = "Table";
var THead = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "thead", ref, className: cn10("", className), ...props })
);
THead.displayName = "THead";
var TBody = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "tbody", ref, className: cn10("", className), ...props })
);
TBody.displayName = "TBody";
var TR = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "tr",
    ref,
    className: cn10(
      "m-0 border-t border-slate-300 p-0 even:bg-slate-100 dark:border-slate-700 dark:even:bg-slate-800",
      className
    ),
    ...props
  }
));
TR.displayName = "TR";
var TD = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "td",
    ref,
    className: cn10(
      "border border-slate-200 px-4 py-2 text-left dark:border-slate-700 [&[align=center]]:text-center [&[align=right]]:text-right",
      className
    ),
    ...props
  }
));
TD.displayName = "TD";
var TH = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "th",
    ref,
    className: cn10(
      "border border-slate-200 px-4 py-2 text-left font-bold dark:border-slate-700 [&[align=center]]:text-center [&[align=right]]:text-right",
      className
    ),
    ...props
  }
));
TH.displayName = "TH";
var UL = forwardRef12(({ className, unstyled = false, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "ul",
    ref,
    className: cn10(
      {
        "m-4 list-disc [&>li]:mt-2": !unstyled
      },
      className
    ),
    ...props
  }
));
UL.displayName = "UL";
var OL = forwardRef12(({ className, unstyled = false, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "ol",
    ref,
    className: cn10(
      {
        "m-4 list-decimal [&>li]:mt-2": !unstyled
      },
      className
    ),
    ...props
  }
));
OL.displayName = "OL";
var LI = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "li", ref, className: cn10("", className), ...props }));
LI.displayName = "LI";
var Code = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "code",
    ref,
    className: cn10("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-normal", className),
    ...props
  }
));
Code.displayName = "Code";
var Lead = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "p", ref, className: cn10("text-xl text-muted-foreground", className), ...props }));
Lead.displayName = "Lead";
var Large = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "div", ref, className: cn10("text-lg font-semibold", className), ...props }));
Large.displayName = "Large";
var Small = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "small", ref, className: cn10("text-sm font-medium leading-none", className), ...props })
);
Small.displayName = "Small";
var Subtle = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "p", ref, className: cn10("text-sm text-muted-foreground", className), ...props }));
Subtle.displayName = "Subtle";
var Strong = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "strong", ref, className: cn10("font-semibold", className), ...props })
);
Strong.displayName = "Strong";

// src/base/VStack/VStack.tsx
import { cn as cn11 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef13 } from "@paalan/react-shared/utils";
import { jsx as jsx13 } from "react/jsx-runtime";
var VStack = forwardRef13((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx13(Box, { className: cn11("flex flex-col items-stretch gap-2", className), ...restProps, ref, children });
});

// src/base/Wrap/Wrap.tsx
import { cn as cn12 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef14 } from "@paalan/react-shared/utils";
import { jsx as jsx14 } from "react/jsx-runtime";
var Wrap = forwardRef14((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx14(Box, { className: cn12("flex flex-wrap gap-2", className), ...restProps, ref, children });
});
var WrapItem = forwardRef14((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx14(Box, { className: cn12("flex flex-none items-start", className), ...restProps, ref, children });
});

// src/components/Button/constants.ts
var LOADING_ICON_SIZE = {
  xs: "w-3 h-3",
  sm: "w-4 h-4",
  md: "w-5 h-5",
  lg: "w-6 h-6",
  xl: "w-7 h-7"
};
var BUTTON_SIZE = {
  xs: "px-2 py-1 text-xs",
  sm: "px-3 py-1 text-sm",
  md: "px-4 py-2 text-sm",
  lg: "px-6 py-2 text-base",
  xl: "px-8 py-2.5 text-base"
};
var BUTTON_ROUNDED = {
  none: "rounded-none",
  sm: "rounded-sm",
  md: "rounded-md",
  lg: "rounded-lg",
  xl: "rounded-xl",
  "2xl": "rounded-2xl",
  "3xl": "rounded-3xl",
  full: "rounded-full"
};
var BUTTON_COLOR_VARIANT_MAPPING = {
  solid: {
    gray: "bg-gray-600 hover:bg-gray-700 focus-visible:ring-gray-500 text-gray-50",
    red: "bg-red-600 hover:bg-red-700 focus-visible:ring-red-500 text-red-50",
    orange: "bg-orange-600 hover:bg-orange-700 focus-visible:ring-orange-500 text-orange-50",
    amber: "bg-amber-600 hover:bg-amber-700 focus-visible:ring-amber-500 text-amber-50",
    yellow: "bg-yellow-600 hover:bg-yellow-700 focus-visible:ring-yellow-500 text-yellow-50",
    lime: "bg-lime-600 hover:bg-lime-700 focus-visible:ring-lime-500 text-lime-50",
    green: "bg-green-600 hover:bg-green-700 focus-visible:ring-green-500 text-green-50",
    emerald: "bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-emerald-500 text-emerald-50",
    teal: "bg-teal-600 hover:bg-teal-700 focus-visible:ring-teal-500 text-teal-50",
    cyan: "bg-cyan-600 hover:bg-cyan-700 focus-visible:ring-cyan-500 text-cyan-50",
    sky: "bg-sky-600 hover:bg-sky-700 focus-visible:ring-sky-500 text-sky-50",
    blue: "bg-blue-600 hover:bg-blue-700 focus-visible:ring-blue-500 text-blue-50",
    indigo: "bg-indigo-600 hover:bg-indigo-700 focus-visible:ring-indigo-500 text-indigo-50",
    violet: "bg-violet-600 hover:bg-violet-700 focus-visible:ring-violet-500 text-violet-50",
    purple: "bg-purple-600 hover:bg-purple-700 focus-visible:ring-purple-500 text-purple-50",
    fuchsia: "bg-fuchsia-600 hover:bg-fuchsia-700 focus-visible:ring-fuchsia-500 text-fuchsia-50",
    pink: "bg-pink-600 hover:bg-pink-700 focus-visible:ring-pink-500 text-pink-50",
    rose: "bg-rose-600 hover:bg-rose-700 focus-visible:ring-rose-500 text-rose-50",
    primary: "bg-primary hover:bg-primary/90 focus-visible:ring-primary text-primary-foreground",
    secondary: "bg-secondary hover:bg-secondary/90 focus-visible:ring-secondary text-secondary-foreground",
    tertiary: "bg-tertiary hover:bg-tertiary/90 focus-visible:ring-tertiary text-tertiary-foreground",
    info: "bg-info hover:bg-info/90 focus-visible:ring-info text-info-foreground",
    danger: "bg-danger hover:bg-danger/90 focus-visible:ring-danger text-danger-foreground",
    success: "bg-success hover:bg-success/90 focus-visible:ring-success text-success-foreground",
    warning: "bg-warning hover:bg-warning/90 focus-visible:ring-warning text-warning-foreground"
  },
  surface: {
    gray: "bg-transparent text-gray-600 hover:bg-gray-50 focus:ring-gray-200 focus-visible:ring-gray-500 border border-current",
    red: "bg-transparent text-red-600 hover:bg-red-50 focus:ring-red-200 focus-visible:ring-red-500 border border-current",
    orange: "bg-transparent text-orange-600 hover:bg-orange-50 focus:ring-orange-200 focus-visible:ring-orange-500 border border-current",
    amber: "bg-transparent text-amber-600 hover:bg-amber-50 focus:ring-amber-200 focus-visible:ring-amber-500 border border-current",
    yellow: "bg-transparent text-yellow-600 hover:bg-yellow-50 focus:ring-yellow-200 focus-visible:ring-yellow-500 border border-current",
    lime: "bg-transparent text-lime-600 hover:bg-lime-50 focus:ring-lime-200 focus-visible:ring-lime-500 border border-current",
    green: "bg-transparent text-green-600 hover:bg-green-50 focus:ring-green-200 focus-visible:ring-green-500 border border-current",
    emerald: "bg-transparent text-emerald-600 hover:bg-emerald-50 focus:ring-emerald-200 focus-visible:ring-emerald-500 border border-current",
    teal: "bg-transparent text-teal-600 hover:bg-teal-50 focus:ring-teal-200 focus-visible:ring-teal-500 border border-current",
    cyan: "bg-transparent text-cyan-600 hover:bg-cyan-50 focus:ring-cyan-200 focus-visible:ring-cyan-500 border border-current",
    sky: "bg-transparent text-sky-600 hover:bg-sky-50 focus:ring-sky-200 focus-visible:ring-sky-500 border border-current",
    blue: "bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-blue-200 focus-visible:ring-blue-500 border border-current",
    indigo: "bg-transparent text-indigo-600 hover:bg-indigo-50 focus:ring-indigo-200 focus-visible:ring-indigo-500 border border-current",
    violet: "bg-transparent text-violet-600 hover:bg-violet-50 focus:ring-violet-200 focus-visible:ring-violet-500 border border-current",
    purple: "bg-transparent text-purple-600 hover:bg-purple-50 focus:ring-purple-200 focus-visible:ring-purple-500 border border-current",
    fuchsia: "bg-transparent text-fuchsia-600 hover:bg-fuchsia-50 focus:ring-fuchsia-200 focus-visible:ring-fuchsia-500 border border-current",
    pink: "bg-transparent text-pink-600 hover:bg-pink-50 focus:ring-pink-200 focus-visible:ring-pink-500 border border-current",
    rose: "bg-transparent text-rose-600 hover:bg-rose-50 focus:ring-rose-200 focus-visible:ring-rose-500 border border-current",
    primary: "bg-transparent text-primary hover:bg-primary/10 focus:ring-primary focus-visible:ring-primary border border-current",
    secondary: "bg-transparent text-secondary-foreground/90 hover:bg-secondary-foreground/10 focus:ring-secondary-foreground focus-visible:ring-secondary-foreground border border-current",
    tertiary: "bg-transparent text-tertiary hover:bg-tertiary/10 focus:ring-tertiary focus-visible:ring-tertiary border border-current",
    info: "bg-transparent text-info hover:bg-info/10 focus:ring-info focus-visible:ring-info border border-current",
    danger: "bg-transparent text-danger hover:bg-danger/10 focus:ring-danger focus-visible:ring-danger border border-current",
    success: "bg-transparent text-success hover:bg-success/10 focus:ring-success focus-visible:ring-success border border-current",
    warning: "bg-transparent text-warning hover:bg-warning/10 focus:ring-warning focus-visible:ring-warning border border-current"
  },
  outline: {
    gray: "bg-transparent text-gray-600 hover:bg-gray-600 hover:text-gray-50 focus-visible:ring-gray-500 border border-current hover:border-gray-600",
    red: "bg-transparent text-red-600 hover:bg-red-600 hover:text-red-50 focus-visible:ring-red-500 border border-current hover:border-red-600",
    orange: "bg-transparent text-orange-600 hover:bg-orange-600 hover:text-orange-50 focus-visible:ring-orange-500 border border-current hover:border-orange-600",
    amber: "bg-transparent text-amber-600 hover:bg-amber-600 hover:text-amber-50 focus-visible:ring-amber-500 border border-current hover:border-amber-600",
    yellow: "bg-transparent text-yellow-600 hover:bg-yellow-600 hover:text-yellow-50 focus-visible:ring-yellow-500 border border-current hover:border-yellow-600",
    lime: "bg-transparent text-lime-600 hover:bg-lime-600 hover:text-lime-50 focus-visible:ring-lime-500 border border-current hover:border-lime-600",
    green: "bg-transparent text-green-600 hover:bg-green-600 hover:text-green-50 focus-visible:ring-green-500 border border-current hover:border-green-600",
    emerald: "bg-transparent text-emerald-600 hover:bg-emerald-600 hover:text-emerald-50 focus-visible:ring-emerald-500 border border-current hover:border-emerald-600",
    teal: "bg-transparent text-teal-600 hover:bg-teal-600 hover:text-teal-50 focus-visible:ring-teal-500 border border-current hover:border-teal-600",
    cyan: "bg-transparent text-cyan-600 hover:bg-cyan-600 hover:text-cyan-50 focus-visible:ring-cyan-500 border border-current hover:border-cyan-600",
    sky: "bg-transparent text-sky-600 hover:bg-sky-600 hover:text-sky-50 focus-visible:ring-sky-500 border border-current hover:border-sky-600",
    blue: "bg-transparent text-blue-600 hover:bg-blue-600 hover:text-blue-50 focus-visible:ring-blue-500 border border-current hover:border-blue-600",
    indigo: "bg-transparent text-indigo-600 hover:bg-indigo-600 hover:text-indigo-50 focus-visible:ring-indigo-500 border border-current hover:border-indigo-600",
    violet: "bg-transparent text-violet-600 hover:bg-violet-600 hover:text-violet-50 focus-visible:ring-violet-500 border border-current hover:border-violet-600",
    purple: "bg-transparent text-purple-600 hover:bg-purple-600 hover:text-purple-50 focus-visible:ring-purple-500 border border-current hover:border-purple-600",
    fuchsia: "bg-transparent text-fuchsia-600 hover:bg-fuchsia-600 hover:text-fuchsia-50 focus-visible:ring-fuchsia-500 border border-current hover:border-fuchsia-600",
    pink: "bg-transparent text-pink-600 hover:bg-pink-600 hover:text-pink-50 focus-visible:ring-pink-500 border border-current hover:border-pink-600",
    rose: "bg-transparent text-rose-600 hover:bg-rose-600 hover:text-rose-50 focus-visible:ring-rose-500 border border-current hover:border-rose-600",
    primary: "bg-transparent text-primary hover:bg-primary hover:text-primary-foreground focus-visible:ring-primary border border-current hover:border-primary",
    secondary: "bg-transparent text-secondary-foreground hover:bg-secondary-foreground/80 hover:text-secondary focus-visible:ring-secondary-foreground border border-current hover:border-secondary",
    tertiary: "bg-transparent text-tertiary hover:bg-tertiary hover:text-tertiary-foreground focus-visible:ring-tertiary border border-current hover:border-tertiary",
    info: "bg-transparent text-info hover:bg-info hover:text-info-foreground focus-visible:ring-info border border-current hover:border-info",
    danger: "bg-transparent text-danger hover:bg-danger hover:text-danger-foreground focus-visible:ring-danger border border-current hover:border-danger",
    success: "bg-transparent text-success hover:bg-success hover:text-success-foreground focus-visible:ring-success border border-current hover:border-success",
    warning: "bg-transparent text-warning hover:bg-warning hover:text-warning-foreground focus-visible:ring-warning border border-current hover:border-warning"
  },
  soft: {
    gray: "bg-gray-100 hover:bg-gray-200 text-gray-800 focus-visible:ring-gray-600",
    red: "bg-red-100 hover:bg-red-200 text-red-800 focus-visible:ring-red-600",
    orange: "bg-orange-100 hover:bg-orange-200 text-orange-800 focus-visible:ring-orange-600",
    amber: "bg-amber-100 hover:bg-amber-200 text-amber-800 focus-visible:ring-amber-600",
    yellow: "bg-yellow-100 hover:bg-yellow-200 text-yellow-800 focus-visible:ring-yellow-600",
    lime: "bg-lime-100 hover:bg-lime-200 text-lime-800 focus-visible:ring-lime-600",
    green: "bg-green-100 hover:bg-green-200 text-green-800 focus-visible:ring-green-600",
    emerald: "bg-emerald-100 hover:bg-emerald-200 text-emerald-800 focus-visible:ring-emerald-600",
    teal: "bg-teal-100 hover:bg-teal-200 text-teal-800 focus-visible:ring-teal-600",
    cyan: "bg-cyan-100 hover:bg-cyan-200 text-cyan-800 focus-visible:ring-cyan-600",
    sky: "bg-sky-100 hover:bg-sky-200 text-sky-800 focus-visible:ring-sky-600",
    blue: "bg-blue-100 hover:bg-blue-200 text-blue-800 focus-visible:ring-blue-600",
    indigo: "bg-indigo-100 hover:bg-indigo-200 text-indigo-800 focus-visible:ring-indigo-600",
    violet: "bg-violet-100 hover:bg-violet-200 text-violet-800 focus-visible:ring-violet-600",
    purple: "bg-purple-100 hover:bg-purple-200 text-purple-800 focus-visible:ring-purple-600",
    fuchsia: "bg-fuchsia-100 hover:bg-fuchsia-200 text-fuchsia-800 focus-visible:ring-fuchsia-600",
    pink: "bg-pink-100 hover:bg-pink-200 text-pink-800 focus-visible:ring-pink-600",
    rose: "bg-rose-100 hover:bg-rose-200 text-rose-800 focus-visible:ring-rose-600",
    primary: "bg-primary-soft hover:bg-primary-soft/90 text-primary/90 focus-visible:ring-primary",
    secondary: "bg-secondary-soft hover:bg-secondary-soft/90 text-secondary-foreground/70 focus-visible:ring-secondary-foreground",
    tertiary: "bg-tertiary-soft hover:bg-tertiary-soft/90 text-tertiary/90 focus-visible:ring-tertiary",
    info: "bg-info-soft hover:bg-info-soft/90 text-info/90 focus-visible:ring-info",
    danger: "bg-danger-soft hover:bg-danger-soft/90 text-danger/90 focus-visible:ring-danger",
    success: "bg-success-soft hover:bg-success-soft/90 text-success/90 focus-visible:ring-success",
    warning: "bg-warning-soft hover:bg-warning-soft/90 text-warning focus-visible:ring-warning"
  },
  ghost: {
    gray: "bg-transparent text-gray-600 hover:bg-gray-50 shadow-none focus-visible:ring-gray-500",
    red: "bg-transparent text-red-600 hover:bg-red-50 shadow-none focus-visible:ring-red-500",
    orange: "bg-transparent text-orange-600 hover:bg-orange-50 shadow-none focus-visible:ring-orange-500",
    amber: "bg-transparent text-amber-600 hover:bg-amber-50 shadow-none focus-visible:ring-amber-500",
    yellow: "bg-transparent text-yellow-600 hover:bg-yellow-50 shadow-none focus-visible:ring-yellow-500",
    lime: "bg-transparent text-lime-600 hover:bg-lime-50 shadow-none focus-visible:ring-lime-500",
    green: "bg-transparent text-green-600 hover:bg-green-50 shadow-none focus-visible:ring-green-500",
    emerald: "bg-transparent text-emerald-600 hover:bg-emerald-50 shadow-none focus-visible:ring-emerald-500",
    teal: "bg-transparent text-teal-600 hover:bg-teal-50 shadow-none focus-visible:ring-teal-500",
    cyan: "bg-transparent text-cyan-600 hover:bg-cyan-50 shadow-none focus-visible:ring-cyan-500",
    sky: "bg-transparent text-sky-600 hover:bg-sky-50 shadow-none focus-visible:ring-sky-500",
    blue: "bg-transparent text-blue-600 hover:bg-blue-50 shadow-none focus-visible:ring-blue-500",
    indigo: "bg-transparent text-indigo-600 hover:bg-indigo-50 shadow-none focus-visible:ring-indigo-500",
    violet: "bg-transparent text-violet-600 hover:bg-violet-50 shadow-none focus-visible:ring-violet-500",
    purple: "bg-transparent text-purple-600 hover:bg-purple-50 shadow-none focus-visible:ring-purple-500",
    fuchsia: "bg-transparent text-fuchsia-600 hover:bg-fuchsia-50 shadow-none focus-visible:ring-fuchsia-500",
    pink: "bg-transparent text-pink-600 hover:bg-pink-50 shadow-none focus-visible:ring-pink-500",
    rose: "bg-transparent text-rose-600 hover:bg-rose-50 shadow-none focus-visible:ring-rose-500",
    primary: "bg-transparent text-primary hover:bg-primary/10 shadow-none focus-visible:ring-primary",
    secondary: "bg-transparent text-secondary-foreground/90 hover:bg-secondary-foreground/10 shadow-none focus-visible:ring-secondary-foreground",
    tertiary: "bg-transparent text-tertiary hover:bg-tertiary/10 shadow-none focus-visible:ring-tertiary",
    info: "bg-transparent text-info hover:bg-info/10 shadow-none focus-visible:ring-info",
    danger: "bg-transparent text-danger hover:bg-danger/10 shadow-none focus-visible:ring-danger",
    success: "bg-transparent text-success hover:bg-success/10 shadow-none focus-visible:ring-success",
    warning: "bg-transparent text-warning hover:bg-warning/10 shadow-none focus-visible:ring-warning"
  },
  link: {
    gray: "bg-transparent text-gray-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    red: "bg-transparent text-red-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    orange: "bg-transparent text-orange-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    amber: "bg-transparent text-amber-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    yellow: "bg-transparent text-yellow-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    lime: "bg-transparent text-lime-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    green: "bg-transparent text-green-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    emerald: "bg-transparent text-emerald-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    teal: "bg-transparent text-teal-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    cyan: "bg-transparent text-cyan-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    sky: "bg-transparent text-sky-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    blue: "bg-transparent text-blue-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    indigo: "bg-transparent text-indigo-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    violet: "bg-transparent text-violet-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    purple: "bg-transparent text-purple-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    fuchsia: "bg-transparent text-fuchsia-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    pink: "bg-transparent text-pink-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    rose: "bg-transparent text-rose-600 p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    primary: "bg-transparent text-primary p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    secondary: "bg-transparent text-secondary-foreground p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    tertiary: "bg-transparent text-tertiary p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    info: "bg-transparent text-info p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    danger: "bg-transparent text-danger p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    success: "bg-transparent text-success p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent",
    warning: "bg-transparent text-warning p-0 hover:bg-transparent underline-offset-4 hover:underline shadow-none focus-visible:ring-transparent"
  }
};

// src/components/Button/Button.tsx
import { jsx as jsx15, jsxs } from "react/jsx-runtime";
var buttonVariants = cva2(
  "inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: BUTTON_COLOR_VARIANT_MAPPING["solid"]["primary"],
        primary: BUTTON_COLOR_VARIANT_MAPPING["solid"]["primary"],
        secondary: BUTTON_COLOR_VARIANT_MAPPING["solid"]["secondary"],
        info: BUTTON_COLOR_VARIANT_MAPPING["solid"]["info"],
        success: BUTTON_COLOR_VARIANT_MAPPING["solid"]["success"],
        warning: BUTTON_COLOR_VARIANT_MAPPING["solid"]["warning"],
        danger: BUTTON_COLOR_VARIANT_MAPPING["solid"]["danger"],
        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        ghost: "hover:bg-accent hover:text-accent-foreground"
      },
      rounded: BUTTON_ROUNDED,
      size: BUTTON_SIZE
    },
    defaultVariants: {
      rounded: "md",
      size: "md"
    }
  }
);
var Button = forwardRef15(
  ({
    as: Component = "button",
    className,
    variant = "solid",
    color,
    size,
    label,
    rounded,
    children,
    leftIcon,
    rightIcon,
    asChild = false,
    isLoading,
    loadingText,
    wrapperClassName,
    unstyled,
    disabled,
    ...props
  }, ref) => {
    const Comp = asChild ? Slot : Component;
    let buttonClassName = "";
    if (["outline", "ghost"].includes(variant) && !color) {
      buttonClassName = buttonVariants({
        variant,
        size,
        rounded
      });
    } else {
      buttonClassName = BUTTON_COLOR_VARIANT_MAPPING[variant][color || "primary"];
    }
    return /* @__PURE__ */ jsx15(
      Box,
      {
        ...props,
        as: Comp,
        className: unstyled ? className : cn13(buttonClassName, buttonVariants({ size, rounded }), className),
        ref,
        disabled: isLoading || disabled,
        children: asChild ? children : /* @__PURE__ */ jsxs(Box, { className: cn13("inline-flex flex-1 items-center justify-center gap-1.5", wrapperClassName), children: [
          !isLoading && leftIcon,
          isLoading && /* @__PURE__ */ jsx15(ArrowPathIcon, { className: cn13("size-4 animate-spin", size && LOADING_ICON_SIZE[size]) }),
          isLoading && loadingText ? loadingText : label || children,
          !isLoading && rightIcon
        ] })
      }
    );
  }
);
Button.displayName = "Button";

// src/components/DropdownMenu/DropdownMenu.tsx
import * as React from "react";
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@paalan/react-icons";
import { cn as cn14 } from "@paalan/react-shared/lib";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
var DropdownMenuRoot = DropdownMenuPrimitive.Root;
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
var DropdownMenuGroup = DropdownMenuPrimitive.Group;
var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
var DropdownMenuSub = DropdownMenuPrimitive.Sub;
var DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
  DropdownMenuPrimitive.SubTrigger,
  {
    ref,
    className: cn14(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
      inset && "pl-8",
      className
    ),
    ...props,
    children: [
      children,
      /* @__PURE__ */ jsx16(ChevronRightIcon, { className: "ml-auto size-4" })
    ]
  }
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
var DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
  DropdownMenuPrimitive.SubContent,
  {
    ref,
    className: cn14(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
      className
    ),
    ...props
  }
));
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx16(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
  DropdownMenuPrimitive.Content,
  {
    ref,
    sideOffset,
    className: cn14(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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",
      className
    ),
    ...props
  }
) }));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
var DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx16(
  DropdownMenuPrimitive.Item,
  {
    ref,
    className: cn14(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    ),
    ...props
  }
));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
var DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs2(
  DropdownMenuPrimitive.CheckboxItem,
  {
    ref,
    className: cn14(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    ),
    checked,
    ...props,
    children: [
      /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(CheckIcon, { className: "size-4" }) }) }),
      children
    ]
  }
));
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
var DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
  DropdownMenuPrimitive.RadioItem,
  {
    ref,
    className: cn14(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(DotFilledIcon, { className: "size-4 fill-current" }) }) }),
      children
    ]
  }
));
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
var DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx16(
  DropdownMenuPrimitive.Label,
  {
    ref,
    className: cn14("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
    ...props
  }
));
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(DropdownMenuPrimitive.Separator, { ref, className: cn14("-mx-1 my-1 h-px bg-muted", className), ...props }));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
var DropdownMenuShortcut = ({ className, ...props }) => {
  return /* @__PURE__ */ jsx16("span", { className: cn14("ml-auto text-xs tracking-widest opacity-60", className), ...props });
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
var LocalDropdownMenuItem = ({
  separator,
  label,
  shortcut,
  ...props
}) => {
  if (separator) {
    return /* @__PURE__ */ jsx16(DropdownMenuSeparator, {});
  }
  return /* @__PURE__ */ jsxs2(DropdownMenuItem, { ...props, children: [
    label,
    shortcut && /* @__PURE__ */ jsx16(DropdownMenuShortcut, { children: shortcut })
  ] });
};
var isSubItem = (item) => {
  const subItem = item;
  return Boolean(subItem.subItems) && !!subItem.subItems?.length;
};
var DropdownMenu = ({
  trigger,
  title,
  contentProps,
  triggerClassName,
  items,
  ...props
}) => {
  return /* @__PURE__ */ jsxs2(DropdownMenuRoot, { ...props, children: [
    /* @__PURE__ */ jsx16(DropdownMenuTrigger, { className: triggerClassName, asChild: true, children: trigger }),
    /* @__PURE__ */ jsxs2(DropdownMenuContent, { ...contentProps, className: cn14("min-w-32", contentProps?.className), children: [
      title && /* @__PURE__ */ jsxs2(Fragment2, { children: [
        /* @__PURE__ */ jsx16(DropdownMenuLabel, { children: title }),
        /* @__PURE__ */ jsx16(DropdownMenuSeparator, {})
      ] }),
      /* @__PURE__ */ jsx16(DropdownMenuGroup, { children: items.map((item, index) => {
        if (!isSubItem(item)) {
          return /* @__PURE__ */ jsx16(LocalDropdownMenuItem, { ...item }, index);
        }
        return /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
          /* @__PURE__ */ jsx16(DropdownMenuSubTrigger, { disabled: item.disabled, children: item.label }),
          /* @__PURE__ */ jsx16(DropdownMenuPortal, { children: /* @__PURE__ */ jsx16(DropdownMenuSubContent, { children: item.subItems.map((subItem, subIndex) => /* @__PURE__ */ jsx16(LocalDropdownMenuItem, { ...subItem }, subIndex)) }) })
        ] }, index);
      }) })
    ] })
  ] });
};
DropdownMenu.displayName = "DropdownMenu";

// src/components/DataTable/DataTableColumnHeader.tsx
import { jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
var DataTableColumnHeader = ({
  column,
  title,
  className,
  isSimpleSort = true
}) => {
  if (!column.getCanSort()) {
    return /* @__PURE__ */ jsx17("div", { className: cn15(className), children: title });
  }
  if (isSimpleSort) {
    return /* @__PURE__ */ jsxs3(
      Button,
      {
        variant: "ghost",
        size: "sm",
        color: "secondary",
        className: cn15(className),
        onClick: () => column.toggleSorting(),
        children: [
          /* @__PURE__ */ jsx17("span", { children: title }),
          column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx17(ArrowDownIcon, { className: "size-3.5" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx17(ArrowUpIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx17(CaretSortIcon, { className: "size-4" })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx17("div", { className: cn15("flex items-center space-x-2", className), children: /* @__PURE__ */ jsxs3(DropdownMenuRoot, { children: [
    /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
      Button,
      {
        variant: "ghost",
        size: "sm",
        color: "secondary",
        className: "-ml-3 h-8 text-muted-foreground hover:text-secondary-foreground focus-visible:ring-0 data-[state=open]:bg-accent",
        children: [
          /* @__PURE__ */ jsx17("span", { children: title }),
          column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx17(ArrowDownIcon, { className: "size-3.5" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx17(ArrowUpIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx17(CaretSortIcon, { className: "size-4" })
        ]
      }
    ) }),
    /* @__PURE__ */ jsxs3(DropdownMenuContent, { align: "start", children: [
      /* @__PURE__ */ jsxs3(DropdownMenuItem, { onClick: () => column.toggleSorting(false), children: [
        /* @__PURE__ */ jsx17(ArrowUpIcon, { className: "mr-2 size-3.5 text-muted-foreground/70" }),
        "Asc"
      ] }),
      /* @__PURE__ */ jsxs3(DropdownMenuItem, { onClick: () => column.toggleSorting(true), children: [
        /* @__PURE__ */ jsx17(ArrowDownIcon, { className: "mr-2 size-3.5 text-muted-foreground/70" }),
        "Desc"
      ] }),
      column.getCanHide() && /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
      column.getCanHide() && /* @__PURE__ */ jsxs3(DropdownMenuItem, { onClick: () => column.toggleVisibility(false), children: [
        /* @__PURE__ */ jsx17(EyeNoneIcon, { className: "mr-2 size-3.5 text-muted-foreground/70" }),
        "Hide"
      ] })
    ] })
  ] }) });
};
export {
  DataTableColumnHeader
};
