@optigrit/optigrit-ui 0.0.1 → 0.0.3

package/dist/components/index.js

@@ -1,8 +1,12 @@
 import {
   Input,
   Popover,
+  Ripple,
+  Show,
+  ShowWithAnimation,
+  Spinner,
   cn
-} from "../chunk-2LJSVQ6B.js";
+} from "../chunk-F6GWYCMR.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -12,92 +16,81 @@ import "../chunk-U65NGM6F.js";
 // src/components/Buttons/Button/index.tsx
 import {
   forwardRef,
-  useCallback
+  useCallback,
+  useRef
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var variantClasses = {
-  primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-  secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-  outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-  ghost: "hover:bg-accent hover:text-accent-foreground",
-  destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-  link: "text-primary underline-offset-4 hover:underline"
+
+// src/components/Buttons/utils.ts
+var getVariantClasses = (variant, color) => {
+  const styles = {
+    contained: {
+      primary: "bg-primary text-primary-contrastText shadow-sm hover:shadow",
+      secondary: "bg-secondary text-secondary-contrastText shadow-sm hover:shadow",
+      error: "bg-error text-error-contrastText shadow-sm hover:shadow",
+      success: "bg-success text-success-contrastText shadow-sm hover:shadow",
+      warning: "bg-warning text-warning-contrastText shadow-sm hover:shadow",
+      info: "bg-info text-info-contrastText shadow-sm hover:shadow"
+    },
+    outlined: {
+      primary: "border border-[color-mix(in_srgb,var(--primary-main)_50%,transparent)] text-primary hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary-main)_4%,transparent)]",
+      secondary: "border border-[color-mix(in_srgb,var(--secondary-main)_50%,transparent)] text-secondary hover:border-secondary hover:bg-[color-mix(in_srgb,var(--secondary-main)_4%,transparent)]",
+      error: "border border-[color-mix(in_srgb,var(--error-main)_50%,transparent)] text-error hover:border-error hover:bg-[color-mix(in_srgb,var(--error-main)_4%,transparent)]",
+      success: "border border-[color-mix(in_srgb,var(--success-main)_50%,transparent)] text-success hover:border-success hover:bg-[color-mix(in_srgb,var(--success-main)_4%,transparent)]",
+      warning: "border border-[color-mix(in_srgb,var(--warning-main)_50%,transparent)] text-warning hover:border-warning hover:bg-[color-mix(in_srgb,var(--warning-main)_4%,transparent)]",
+      info: "border border-[color-mix(in_srgb,var(--info-main)_50%,transparent)] text-info hover:border-info hover:bg-[color-mix(in_srgb,var(--info-main)_4%,transparent)]"
+    },
+    soft: {
+      primary: "bg-[color-mix(in_srgb,var(--primary-main)_10%,transparent)] text-primary hover:bg-[color-mix(in_srgb,var(--primary-main)_15%,transparent)]",
+      secondary: "bg-[color-mix(in_srgb,var(--secondary-main)_10%,transparent)] text-secondary hover:bg-[color-mix(in_srgb,var(--secondary-main)_15%,transparent)]",
+      error: "bg-[color-mix(in_srgb,var(--error-main)_10%,transparent)] text-error hover:bg-[color-mix(in_srgb,var(--error-main)_15%,transparent)]",
+      success: "bg-[color-mix(in_srgb,var(--success-main)_10%,transparent)] text-success hover:bg-[color-mix(in_srgb,var(--success-main)_15%,transparent)]",
+      warning: "bg-[color-mix(in_srgb,var(--warning-main)_10%,transparent)] text-warning hover:bg-[color-mix(in_srgb,var(--warning-main)_15%,transparent)]",
+      info: "bg-[color-mix(in_srgb,var(--info-main)_10%,transparent)] text-info hover:bg-[color-mix(in_srgb,var(--info-main)_15%,transparent)]"
+    },
+    text: {
+      primary: "text-primary hover:bg-[color-mix(in_srgb,var(--primary-main)_4%,transparent)]",
+      secondary: "text-secondary hover:bg-[color-mix(in_srgb,var(--secondary-main)_4%,transparent)]",
+      error: "text-error hover:bg-[color-mix(in_srgb,var(--error-main)_4%,transparent)]",
+      success: "text-success hover:bg-[color-mix(in_srgb,var(--success-main)_4%,transparent)]",
+      warning: "text-warning hover:bg-[color-mix(in_srgb,var(--warning-main)_4%,transparent)]",
+      info: "text-info hover:bg-[color-mix(in_srgb,var(--info-main)_4%,transparent)]"
+    }
+  };
+  return styles[variant][color];
 };
-var sizeClasses = {
-  xs: "text-xs px-2 py-1 gap-1",
-  sm: "text-sm px-3 py-1.5 gap-1.5",
-  md: "text-sm px-4 py-2 gap-2",
-  lg: "text-base px-5 py-2.5 gap-2.5",
-  xl: "text-lg px-6 py-3 gap-3"
+var getRippleColor = (variant, color) => {
+  if (variant === "contained") {
+    return "rgba(255, 255, 255, 0.3)";
+  }
+  return `color-mix(in srgb, var(--${color}-main) 30%, transparent)`;
 };
-var iconOnlySizeClasses = {
-  xs: "text-xs p-1",
-  sm: "text-sm p-1.5",
-  md: "text-sm p-2",
-  lg: "text-base p-2.5",
-  xl: "text-lg p-3"
+
+// src/components/Buttons/Button/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeClasses = {
+  xs: "h-7 px-[10px] text-[13px] gap-[8px]",
+  sm: "h-[30px] px-[10px] text-[13px] gap-[8px]",
+  md: "h-9 px-6 py-3 text-[14px] gap-[8px]",
+  lg: "h-11 px-[22px] text-[16px] gap-[8px]",
+  xl: "h-14 px-[22px] text-[16px] gap-[8px]"
 };
 var roundnessClasses = {
   none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
+  sm: "rounded-[2px]",
+  md: "rounded-[12px]",
+  lg: "rounded-[16px]",
   full: "rounded-full"
 };
-function Spinner({ className = "" }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: `animate-spin ${className}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            className: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          }
-        )
-      ]
-    }
-  );
-}
-function cn2(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-var rippleColor = {
-  primary: "rgba(255, 255, 255, 0.45)",
-  secondary: "rgba(0, 0, 0, 0.12)",
-  outline: "rgba(0, 0, 0, 0.10)",
-  ghost: "rgba(0, 0, 0, 0.10)",
-  destructive: "rgba(255, 255, 255, 0.45)",
-  link: "rgba(0, 0, 0, 0.10)"
-};
 var Button = forwardRef(
   ({
-    variant = "primary",
+    variant = "contained",
+    color = "primary",
     size = "md",
     roundness = "md",
     fullWidth = false,
     loading = false,
     leftIcon,
     rightIcon,
-    iconOnly = false,
     disableRipple = false,
     disabled,
     className,
@@ -106,43 +99,23 @@ var Button = forwardRef(
     onClick,
     ...rest
   }, ref) => {
+    const rippleRef = useRef(null);
     const isDisabled = disabled || loading;
     const spinnerSize = {
-      xs: "h-3 w-3",
-      sm: "h-3.5 w-3.5",
-      md: "h-4 w-4",
-      lg: "h-5 w-5",
-      xl: "h-5 w-5"
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 20,
+      xl: 24
     };
     const handleClick = useCallback(
       (e) => {
-        if (!disableRipple) {
-          const button = e.currentTarget;
-          const rect = button.getBoundingClientRect();
-          const diameter = Math.max(button.clientWidth, button.clientHeight);
-          const radius = diameter / 2;
-          const circle = document.createElement("span");
-          circle.style.position = "absolute";
-          circle.style.width = `${diameter}px`;
-          circle.style.height = `${diameter}px`;
-          circle.style.left = `${e.clientX - rect.left - radius}px`;
-          circle.style.top = `${e.clientY - rect.top - radius}px`;
-          circle.style.borderRadius = "9999px";
-          circle.style.pointerEvents = "none";
-          circle.style.backgroundColor = rippleColor[variant];
-          button.appendChild(circle);
-          const anim = circle.animate(
-            [
-              { transform: "scale(0)", opacity: "1" },
-              { transform: "scale(4)", opacity: "0" }
-            ],
-            { duration: 600, easing: "linear" }
-          );
-          anim.onfinish = () => circle.remove();
+        if (!disableRipple && !isDisabled) {
+          rippleRef.current?.addRipple(e);
         }
         onClick?.(e);
       },
-      [disableRipple, variant, onClick]
+      [disableRipple, isDisabled, onClick]
     );
     return /* @__PURE__ */ jsxs(
       "button",
@@ -152,21 +125,22 @@ var Button = forwardRef(
         disabled: isDisabled,
         "aria-busy": loading || void 0,
         onClick: handleClick,
-        className: cn2(
+        className: cn(
           "relative overflow-hidden inline-flex items-center justify-center font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           isDisabled && "pointer-events-none opacity-50",
-          variantClasses[variant],
-          iconOnly ? iconOnlySizeClasses[size] : sizeClasses[size],
+          getVariantClasses(variant, color),
+          sizeClasses[size],
           roundnessClasses[roundness],
           fullWidth && "w-full",
           className
         ),
         ...rest,
         children: [
-          loading && /* @__PURE__ */ jsx(Spinner, { className: spinnerSize[size] }),
-          !loading && leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: leftIcon }),
-          children,
-          !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: rightIcon })
+          /* @__PURE__ */ jsx(Ripple, { ref: rippleRef, color: getRippleColor(variant, color) }),
+          loading && /* @__PURE__ */ jsx(Spinner, { size: spinnerSize[size], color: "inherit" }),
+          !loading && leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 z-10", children: leftIcon }),
+          /* @__PURE__ */ jsx("span", { className: "z-10", children }),
+          !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 z-10", children: rightIcon })
         ]
       }
     );
@@ -175,9 +149,91 @@ var Button = forwardRef(
 Button.displayName = "Button";
 var Button_default = Button;
 
-// src/components/Feedback/Tooltip/Tooltip.tsx
-import { useRef, useState } from "react";
+// src/components/Buttons/IconButton/index.tsx
+import {
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useRef as useRef2
+} from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var iconOnlySizeClasses = {
+  xs: "text-xs h-7 w-7",
+  sm: "text-sm h-9 w-9",
+  md: "text-base h-11 w-11",
+  lg: "text-base h-13 w-13",
+  xl: "text-lg h-15 w-15"
+};
+var roundnessClasses2 = {
+  none: "rounded-none",
+  sm: "rounded-[2px]",
+  md: "rounded-[12px]",
+  lg: "rounded-[16px]",
+  full: "rounded-full"
+};
+var IconButton = forwardRef2(
+  ({
+    variant = "contained",
+    color = "primary",
+    size = "md",
+    roundness = "full",
+    loading = false,
+    disableRipple = false,
+    disabled,
+    className,
+    children,
+    type = "button",
+    onClick,
+    ...rest
+  }, ref) => {
+    const rippleRef = useRef2(null);
+    const isDisabled = disabled || loading;
+    const spinnerSize = {
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 20,
+      xl: 24
+    };
+    const handleClick = useCallback2(
+      (e) => {
+        if (!disableRipple && !isDisabled) {
+          rippleRef.current?.addRipple(e);
+        }
+        onClick?.(e);
+      },
+      [disableRipple, isDisabled, onClick]
+    );
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref,
+        type,
+        disabled: isDisabled,
+        "aria-busy": loading || void 0,
+        onClick: handleClick,
+        className: cn(
+          "relative overflow-hidden inline-flex items-center justify-center font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          isDisabled && "pointer-events-none opacity-50",
+          getVariantClasses(variant, color),
+          iconOnlySizeClasses[size],
+          roundnessClasses2[roundness],
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx2(Ripple, { ref: rippleRef, color: getRippleColor(variant, color) }),
+          loading ? /* @__PURE__ */ jsx2(Spinner, { size: spinnerSize[size], color: "inherit" }) : /* @__PURE__ */ jsx2("span", { className: "z-10 inline-flex items-center justify-center shrink-0", children })
+        ]
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
+
+// src/components/Feedback/Tooltip/Tooltip.tsx
+import { Fragment, useRef as useRef3, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Tooltip(props) {
   const {
     label,
@@ -189,56 +245,57 @@ function Tooltip(props) {
     popoverProps = {},
     ...containerProps
   } = props;
-  const container = useRef(null);
+  const container = useRef3(null);
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      ...containerProps,
-      ref: container,
-      className: cn("cursor-pointer", className),
-      onMouseEnter: () => setOpen(true),
-      onMouseLeave: () => setOpen(false),
-      children: [
-        children,
-        /* @__PURE__ */ jsx2(
-          Popover,
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ...containerProps,
+        ref: container,
+        className: cn("cursor-pointer", className),
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Popover,
+      {
+        ...popoverProps,
+        open,
+        targetRef: container,
+        position: labelPosition,
+        closeOnClickOutside: false,
+        className: cn("p-1", popoverProps.className),
+        children: /* @__PURE__ */ jsx3(
+          "div",
           {
-            ...popoverProps,
-            open,
-            targetRef: container,
-            position: labelPosition,
-            className: cn("p-1", popoverProps.className),
-            children: /* @__PURE__ */ jsx2(
-              "div",
+            ...labelContainerProps,
+            className: cn(
+              "bg-bg-secondary text-text",
+              size !== "none" ? `text-${size} rounded-${size}` : "",
               {
-                ...labelContainerProps,
-                className: cn(
-                  "bg-black text-white",
-                  size !== "none" ? `text-${size} rounded-${size}` : "",
-                  {
-                    xs: "py-1 px-2",
-                    sm: "py-2 px-4",
-                    md: "py-3 px-6",
-                    lg: "py-4 px-8",
-                    xl: "py-5 px-10",
-                    none: "py-0 px-0"
-                  }[size],
-                  labelContainerProps.className
-                ),
-                children: label
-              }
-            )
+                xs: "py-1 px-2",
+                sm: "py-2 px-4",
+                md: "py-3 px-6",
+                lg: "py-4 px-8",
+                xl: "py-5 px-10",
+                none: "py-0 px-0"
+              }[size],
+              labelContainerProps.className
+            ),
+            children: label
           }
         )
-      ]
-    }
-  );
+      }
+    )
+  ] });
 }
 
 // src/components/Forms/InputField/InputField.tsx
-import { useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useLayoutEffect, useRef as useRef4, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function InputField(props) {
   const {
     validateValue,
@@ -247,7 +304,7 @@ function InputField(props) {
     errorColor = "rgb(240, 70, 70)",
     ...inputProps
   } = props;
-  const initRef = useRef2({ isUserTyped: false });
+  const initRef = useRef4({ isUserTyped: false });
   const [error, setError] = useState2("");
   function handleError(value) {
     if (!initRef.current.isUserTyped) return;
@@ -278,8 +335,8 @@ function InputField(props) {
       handleError(props.value);
     }
   }, [props.value]);
-  return /* @__PURE__ */ jsxs3("div", { ...containerProps, children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("div", { ...containerProps, children: [
+    /* @__PURE__ */ jsx4(
       Input,
       {
         ...inputProps,
@@ -291,13 +348,13 @@ function InputField(props) {
         onBlur: handleOnBlur
       }
     ),
-    /* @__PURE__ */ jsx3("p", { className: "pl-1 text-xs", style: { color: errorColor, display: error ? "block" : "none" }, children: error })
+    /* @__PURE__ */ jsx4("p", { className: "pl-1 text-xs", style: { color: errorColor, display: error ? "block" : "none" }, children: error })
   ] });
 }
 
 // src/components/Forms/Select/index.tsx
-import { Fragment, useRef as useRef3, useState as useState3 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, useRef as useRef5, useState as useState3 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select(props) {
   const {
     options = [{ label: "None", value: "" }],
@@ -305,8 +362,8 @@ function Select(props) {
     optionsPosition = "bottom-start",
     ...inputProps
   } = props;
-  const container = useRef3(null);
-  const optionsContainer = useRef3(null);
+  const container = useRef5(null);
+  const optionsContainer = useRef5(null);
   const [isOpen, setIsOpen] = useState3(false);
   const [activeOption, setActiveOption] = useState3("");
   useKeyboardShortcuts([
@@ -362,8 +419,8 @@ function Select(props) {
     const input = container.current?.querySelector("input");
     if (input) input.value = options2.label;
   }
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(
       InputField,
       {
         ...inputProps,
@@ -378,13 +435,13 @@ function Select(props) {
           setIsOpen(false);
           inputProps.onBlur?.(event);
         },
-        endIcon: props.endIcon ? props.endIcon : /* @__PURE__ */ jsx4("div", { className: "relative h-full aspect-square pr-1 flex items-center justify-center", children: /* @__PURE__ */ jsx4("div", { className: cn(
+        endIcon: props.endIcon ? props.endIcon : /* @__PURE__ */ jsx5("div", { className: "relative h-full aspect-square pr-1 flex items-center justify-center", children: /* @__PURE__ */ jsx5("div", { className: cn(
           "w-0 h-0 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-600",
           isOpen ? "rotate-180" : ""
         ) }) })
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Popover,
       {
         open: isOpen,
@@ -397,23 +454,23 @@ function Select(props) {
         onOpen: (node) => {
           node.style.minWidth = `${container.current?.offsetWidth ?? 0}px`;
         },
-        children: /* @__PURE__ */ jsx4(
+        children: /* @__PURE__ */ jsx5(
           "div",
           {
             ref: optionsContainer,
-            className: "w-full max-h-[200px] overflow-y-scroll scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden bg-zinc-200 p-1 rounded-md flex flex-col gap-1",
+            className: "w-full max-h-[200px] overflow-y-scroll scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden bg-bg-secondary shadow-md border-2 border-border text-text p-1 rounded-md flex flex-col gap-1",
             onMouseDown: (event) => {
               event.preventDefault();
             },
-            children: options.map((option) => renderOption ? renderOption(option, activeOption === option.value) : /* @__PURE__ */ jsx4(
+            children: options.map((option) => renderOption ? renderOption(option, activeOption === option.value) : /* @__PURE__ */ jsx5(
               "div",
               {
                 id: option.value,
                 onClick: () => handleOnChange(option),
                 className: cn(
-                  "p-2 hover:bg-gray-100 rounded cursor-pointer w-full",
-                  activeOption === option.value ? "border-2 border-blue-500" : "",
-                  option.value === props.value ? "bg-white" : ""
+                  "p-2 hover:bg-bg rounded cursor-pointer w-full",
+                  activeOption === option.value ? "border-2 border-primary" : "",
+                  option.value === props.value ? "bg-bg" : ""
                 ),
                 children: option.label
               },
@@ -427,8 +484,8 @@ function Select(props) {
 }
 
 // src/components/Forms/MultiSelect/index.tsx
-import { Fragment as Fragment2, useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, useRef as useRef6, useState as useState4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function MultiSelect(props) {
   const {
     renderOption,
@@ -439,8 +496,8 @@ function MultiSelect(props) {
     ...inputProps
   } = props;
   const labelMap = new Map(options.map((option) => [option.value, option.label]));
-  const container = useRef4(null);
-  const optionsContainer = useRef4(null);
+  const container = useRef6(null);
+  const optionsContainer = useRef6(null);
   const [isOpen, setIsOpen] = useState4(false);
   const [activeOption, setActiveOption] = useState4("");
   useKeyboardShortcuts([
@@ -503,8 +560,8 @@ function MultiSelect(props) {
     const input = container.current?.querySelector("input");
     if (input) input.value = newValue.map((value2) => labelMap.get(value2)).join(", ") || "";
   }
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(
       InputField,
       {
         ...inputProps,
@@ -519,13 +576,13 @@ function MultiSelect(props) {
           setIsOpen(false);
           inputProps.onBlur?.(event);
         },
-        endIcon: props.endIcon ? props.endIcon : /* @__PURE__ */ jsx5("div", { className: "relative h-full aspect-square pr-1 flex items-center justify-center", children: /* @__PURE__ */ jsx5("div", { className: cn(
+        endIcon: props.endIcon ? props.endIcon : /* @__PURE__ */ jsx6("div", { className: "relative h-full aspect-square pr-1 flex items-center justify-center", children: /* @__PURE__ */ jsx6("div", { className: cn(
           "w-0 h-0 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-600",
           isOpen ? "rotate-180" : ""
         ) }) })
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       Popover,
       {
         open: isOpen,
@@ -538,23 +595,23 @@ function MultiSelect(props) {
         onOpen: (node) => {
           node.style.minWidth = `${container.current?.offsetWidth ?? 0}px`;
         },
-        children: /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx6(
           "div",
           {
             ref: optionsContainer,
-            className: "w-full max-h-[200px] overflow-y-scroll scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden bg-zinc-200 p-1 rounded-md flex flex-col gap-1",
+            className: "w-full max-h-[200px] overflow-y-scroll scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden bg-bg-secondary p-1 rounded-md flex flex-col gap-1 border-border border-2",
             onMouseDown: (event) => {
               event.preventDefault();
             },
-            children: options.map((option) => renderOption ? renderOption(option, activeOption === option.value) : /* @__PURE__ */ jsx5(
+            children: options.map((option) => renderOption ? renderOption(option, activeOption === option.value) : /* @__PURE__ */ jsx6(
               "div",
               {
                 id: option.value,
                 onClick: () => handleOnChange(option),
                 className: cn(
-                  "p-2 hover:bg-gray-100 rounded cursor-pointer w-full",
-                  activeOption === option.value ? "border-2 border-blue-500" : "",
-                  props.value?.includes(option.value) ? "bg-white" : ""
+                  "p-2 hover:bg-bg rounded cursor-pointer w-full",
+                  activeOption === option.value ? "border-2 border-primary" : "",
+                  props.value?.includes(option.value) ? "bg-bg" : ""
                 ),
                 children: option.label
               },
@@ -566,10 +623,455 @@ function MultiSelect(props) {
     )
   ] });
 }
+
+// src/components/DataDisplay/Table/Table.tsx
+import { forwardRef as forwardRef3, useMemo } from "react";
+
+// src/components/DataDisplay/Table/TableContext.tsx
+import { createContext, useContext } from "react";
+var TableContext = createContext({
+  size: "medium",
+  stickyHeader: false
+});
+var useTableContext = () => useContext(TableContext);
+
+// src/components/DataDisplay/Table/Table.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Table = forwardRef3(
+  ({ className = "", children, stickyHeader = false, size = "medium", ...props }, ref) => {
+    const value = useMemo(() => ({ size, stickyHeader }), [size, stickyHeader]);
+    return /* @__PURE__ */ jsx7(TableContext.Provider, { value, children: /* @__PURE__ */ jsx7(
+      "table",
+      {
+        ref,
+        className: `w-full caption-bottom text-sm border-collapse text-text ${stickyHeader ? "relative" : ""} ${className}`,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Table.displayName = "Table";
+var Table_default = Table;
+
+// src/components/DataDisplay/Table/TableBody.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TableBody = forwardRef4(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx8(
+      "tbody",
+      {
+        ref,
+        className: `[&_tr:last-child]:border-0 [&_tr]:border-border ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableBody.displayName = "TableBody";
+var TableBody_default = TableBody;
+
+// src/components/DataDisplay/Table/TableCell.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TableCell = forwardRef5(
+  ({ className = "", align = "left", padding, variant, component, children, ...props }, ref) => {
+    const { size, stickyHeader } = useTableContext();
+    const isHead = variant === "head";
+    const Component = component || (isHead ? "th" : "td");
+    const alignClasses = {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify",
+      inherit: "text-inherit"
+    };
+    const paddingClasses = {
+      normal: size === "small" ? "p-2" : "p-4",
+      none: "p-0",
+      checkbox: "p-0 w-[48px] text-center"
+    };
+    const effectivePadding = padding || "normal";
+    return /* @__PURE__ */ jsx9(
+      Component,
+      {
+        ref,
+        className: `align-middle transition-colors [&:has([role=checkbox])]:pr-0 ${isHead ? "font-semibold text-text bg-bg-secondary" : "text-text-secondary"} ${stickyHeader && isHead ? "sticky top-0 z-10 shadow-[inset_0_-1px_0_var(--border)]" : ""} ${alignClasses[align]} ${paddingClasses[effectivePadding]} ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+var TableCell_default = TableCell;
+
+// src/components/DataDisplay/Table/TableContainer.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TableContainer = forwardRef6(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref,
+        className: `w-full overflow-auto rounded-lg border border-border bg-bg-secondary shadow-sm ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableContainer.displayName = "TableContainer";
+var TableContainer_default = TableContainer;
+
+// src/components/DataDisplay/Table/TableFooter.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var TableFooter = forwardRef7(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx11(
+      "tfoot",
+      {
+        ref,
+        className: `border-t border-border bg-bg-secondary/50 font-medium [&>tr]:last:border-b-0 ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableFooter.displayName = "TableFooter";
+var TableFooter_default = TableFooter;
+
+// src/components/DataDisplay/Table/TableHead.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var TableHead = forwardRef8(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(
+      "thead",
+      {
+        ref,
+        className: `[&_tr]:border-b [&_tr]:border-border bg-bg-secondary/50 ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+var TableHead_default = TableHead;
+
+// src/components/DataDisplay/Table/TableRow.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var TableRow = forwardRef9(
+  ({ className = "", children, hover = false, selected = false, ...props }, ref) => {
+    return /* @__PURE__ */ jsx13(
+      "tr",
+      {
+        ref,
+        className: `border-b border-border transition-colors ${hover ? "hover:bg-bg/50" : ""} ${selected ? "bg-bg/80" : ""} ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableRow_default = TableRow;
+
+// src/components/Overlay/Dialog/Dialog.tsx
+import { createPortal } from "react-dom";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Dialog(props) {
+  const {
+    open,
+    onClose,
+    children,
+    className,
+    size = "auto",
+    closeOnEsc = true,
+    backdropClose = true,
+    animationDuration = 220
+  } = props;
+  const sizeClasses2 = {
+    xs: "max-w-xs",
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    full: "max-w-full",
+    auto: "max-w-lg"
+  };
+  useKeyboardShortcuts([
+    {
+      key: "escape",
+      options: { preventDefault: true },
+      callback: () => {
+        if (closeOnEsc && open && onClose) onClose();
+      }
+    }
+  ]);
+  if (typeof window === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx14(
+      ShowWithAnimation,
+      {
+        when: open,
+        removeOnHide: true,
+        containerProps: {
+          style: { position: "fixed" },
+          className: "fixed inset-0 w-screen h-screen flex items-center justify-center z-[9999]"
+        },
+        animationDuration: 1.5 * animationDuration,
+        animationStyle: {
+          children: {
+            from: {
+              opacity: 0,
+              backdropFilter: "blur(0)"
+            },
+            active: {
+              opacity: 1,
+              backdropFilter: "blur(10px)"
+            }
+          }
+        },
+        className: "w-full h-full bg-[#0004] flex items-center justify-center",
+        onClick: (event) => {
+          if (backdropClose && event.target === event.currentTarget) {
+            onClose?.();
+          }
+        },
+        children: /* @__PURE__ */ jsx14(
+          ShowWithAnimation,
+          {
+            when: open,
+            animationDuration,
+            role: "dialog",
+            "aria-modal": "true",
+            className: cn(
+              "relative z-10 w-full mx-4 bg-bg rounded-lg shadow-lg overflow-hidden",
+              sizeClasses2[size],
+              className
+            ),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/Overlay/Dialog/DialogHeader.tsx
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+function DialogHeader(props) {
+  const { title, children, ...rest } = props;
+  return /* @__PURE__ */ jsxs7("div", { ...rest, className: "px-6 py-4 border-b border-border", children: [
+    /* @__PURE__ */ jsx15(Show, { when: !!title, children: /* @__PURE__ */ jsx15("h1", { className: "text-lg font-medium", children: title }) }),
+    children
+  ] });
+}
+
+// src/components/Overlay/Dialog/DialogFooter.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function DialogFooter(props) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ...props,
+      className: cn("px-6 py-4 border-t flex items-center justify-end border-border", props.className)
+    }
+  );
+}
+
+// src/components/Overlay/Dialog/DialogContent.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function DialogContent(props) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      ...props,
+      className: cn("p-6", props.className)
+    }
+  );
+}
+
+// src/components/Overlay/Drawer/Drawer.tsx
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Drawer(props) {
+  const {
+    open,
+    onClose,
+    children,
+    rounded = 0,
+    side = "right",
+    closeOnEsc = true,
+    size: _size = "md",
+    backdropClose = true,
+    animationDuration = 220
+  } = props;
+  useKeyboardShortcuts([
+    {
+      key: "escape",
+      options: { preventDefault: true },
+      callback: () => {
+        if (closeOnEsc && open && onClose) onClose?.();
+      }
+    }
+  ]);
+  if (typeof window === "undefined") return null;
+  const isHorizontal = side === "left" || side === "right";
+  const size = (() => {
+    if (typeof _size === "number") return _size + "px";
+    return {
+      "xs": "20",
+      "sm": "35",
+      "md": "50",
+      "lg": "75",
+      "xl": "90"
+    }[_size] + (isHorizontal ? "vw" : "vh");
+  })();
+  return createPortal2(
+    /* @__PURE__ */ jsx18(
+      ShowWithAnimation,
+      {
+        when: open,
+        removeOnHide: true,
+        containerProps: {
+          style: { position: "fixed" },
+          className: `fixed inset-0 w-screen h-screen flex`
+        },
+        animationDuration: 1.5 * animationDuration,
+        animationStyle: {
+          children: {
+            from: { opacity: 0, backdropFilter: "blur(0)" },
+            active: { opacity: 1, backdropFilter: "blur(8px)" }
+          }
+        },
+        className: cn(
+          "w-full h-full bg-[#0004] flex",
+          {
+            "left": "justify-start items-center",
+            "right": "justify-end items-center ",
+            "top": "justify-center items-start",
+            "bottom": "justify-center items-end"
+          }[side]
+        ),
+        onClick: (event) => {
+          if (backdropClose && event.target === event.currentTarget) {
+            onClose?.();
+          }
+        },
+        children: /* @__PURE__ */ jsx18(
+          ShowWithAnimation,
+          {
+            when: open,
+            role: "dialog",
+            "aria-modal": "true",
+            containerProps: {
+              className: "w-full h-full",
+              style: {
+                maxWidth: isHorizontal ? size : "100%",
+                maxHeight: !isHorizontal ? size : "100%"
+              }
+            },
+            className: "w-full h-full bg-bg flex flex-col overflow-hidden",
+            style: {
+              borderRadius: {
+                left: `0 ${rounded}px ${rounded}px 0`,
+                right: `${rounded}px 0 0 ${rounded}px`,
+                top: `0 0 ${rounded}px ${rounded}px`,
+                bottom: `${rounded}px ${rounded}px 0 0`
+              }[side]
+            },
+            animationDuration,
+            animationStyle: {
+              children: {
+                active: { transform: "translateX(0) translateY(0)", opacity: 1 },
+                from: {
+                  opacity: 0,
+                  transform: {
+                    left: "translateX(-100%)",
+                    right: "translateX(100%)",
+                    top: "translateY(-100%)",
+                    bottom: "translateY(100%)"
+                  }[side]
+                }
+              }
+            },
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/Overlay/Drawer/DrawerContent.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function DrawerContent({ children, className, style }) {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
+      style,
+      children
+    }
+  );
+}
+
+// src/components/Overlay/Drawer/DrawerHeader.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function DrawerHeader({ children, className, style }) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b border-border", className),
+      style,
+      children
+    }
+  );
+}
+
+// src/components/Overlay/Drawer/DrawerFooter.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function DrawerFooter({ children, className, style }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t border-border", className),
+      style,
+      children
+    }
+  );
+}
 export {
   Button_default as Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  Drawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  IconButton_default as IconButton,
   InputField,
   MultiSelect,
   Select,
+  Table_default as Table,
+  TableBody_default as TableBody,
+  TableCell_default as TableCell,
+  TableContainer_default as TableContainer,
+  TableFooter_default as TableFooter,
+  TableHead_default as TableHead,
+  TableRow_default as TableRow,
   Tooltip
 };