@optigrit/optigrit-ui 0.0.2 → 0.0.4

package/dist/{Input-CL3wQvR_.d.ts → Input-CWxBHfX8.d.ts}

@@ -8,6 +8,7 @@ type PopoverProps = HTMLAttributes<HTMLDivElement> & {
     open?: boolean;
     onClose?: () => void;
     onOpen?: (node: HTMLDivElement) => void;
+    closeOnClickOutside?: boolean;
 };
 
 type InputProps = {

package/dist/{chunk-EUAKUHDG.js → chunk-F6GWYCMR.js}

@@ -40,6 +40,7 @@ function calculatePopoverStyle(container, defaultPosition) {
 }
 
 // src/core/Popover/Popover.tsx
+import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Popover(props) {
   const {
@@ -49,6 +50,7 @@ function Popover(props) {
     onClose,
     position: _position = "bottom-center",
     onOpen,
+    closeOnClickOutside = true,
     ...popoverProps
   } = props;
   const popoverRef = useRef(null);
@@ -120,37 +122,43 @@ function Popover(props) {
     if (open) showPopover();
     else hidePopover();
   }, [open]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed w-[100dvw] h-[100dvh] left-0 top-0",
-        style: { display: open ? "block" : "none" },
-        onClick: handleClickOutside
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...popoverProps,
-        ref: popoverRef,
-        style: {
-          display: "flex",
-          position: "fixed",
-          transition: "all 200ms",
-          opacity: 0,
-          scale: 0.8,
-          ...popoverProps.style
-        },
-        children
-      }
-    )
-  ] });
+  if (!targetRef.current) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Show, { when: !!closeOnClickOutside, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed w-[100dvw] h-[100dvh] left-0 top-0 z-[1] bg-red-600/10",
+          style: { display: open ? "block" : "none" },
+          onClick: handleClickOutside
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...popoverProps,
+          ref: popoverRef,
+          style: {
+            display: "flex",
+            position: "fixed",
+            transition: "all 200ms",
+            opacity: 0,
+            scale: 0.8,
+            zIndex: 2,
+            ...popoverProps.style
+          },
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
 }
 
 // src/shared/utils/helper.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ");
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(inputs.filter(Boolean).join(" "));
 }
 
 // src/core/Input/Input.tsx
@@ -164,10 +172,10 @@ var Input = forwardRef((props, ref) => {
     required,
     fullWidth = false,
     labelShrink = false,
-    bgColor = "white",
-    textColor = "black",
-    borderColor = "black",
-    primaryColor = "royalblue",
+    bgColor = "var(--bg, white)",
+    textColor = "var(--text, black)",
+    borderColor = "var(--border, black)",
+    primaryColor = "var(--primary, royalblue)",
     inputContainerProps = {},
     ...inputProps
   } = props;

package/dist/components/index.d.ts

@@ -1,24 +1,35 @@
 import * as react from 'react';
 import react__default, { ButtonHTMLAttributes, ReactNode, HTMLAttributes, RefObject, TableHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PopoverProps, a as InputProps } from '../Input-CL3wQvR_.js';
+import { P as PopoverProps, a as InputProps } from '../Input-CWxBHfX8.js';
 
-type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
+type ButtonVariant = "contained" | "outlined" | "soft" | "text";
+type ButtonColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 type ButtonRoundness = "none" | "sm" | "md" | "lg" | "full";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
+    color?: ButtonColor;
     size?: ButtonSize;
     roundness?: ButtonRoundness;
     fullWidth?: boolean;
     loading?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
-    iconOnly?: boolean;
     disableRipple?: boolean;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    roundness?: ButtonRoundness;
+    loading?: boolean;
+    disableRipple?: boolean;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 type SIZE = "xs" | "sm" | "md" | "lg" | "xl";
 
 type TooltipProps = HTMLAttributes<HTMLDivElement> & {
@@ -158,4 +169,4 @@ type DrawerFooterProps = {
 };
 declare function DrawerFooter({ children, className, style }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, Dialog, DialogContent, DialogFooter, DialogHeader, type DialogProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, InputField, type InputFieldProps, MultiSelect, type MultiSelectProps, Select, type SelectProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tooltip, type TooltipProps };
+export { Button, type ButtonColor, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, Dialog, DialogContent, DialogFooter, DialogHeader, type DialogProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, IconButton, type IconButtonProps, InputField, type InputFieldProps, MultiSelect, type MultiSelectProps, Select, type SelectProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tooltip, type TooltipProps };

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-EUAKUHDG.js";
+} from "../chunk-F6GWYCMR.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -19,15 +19,54 @@ import {
   useCallback,
   useRef
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var variantClasses = {
-  primary: "bg-primary text-white shadow-xl",
-  secondary: "bg-secondary text-white shadow-xl",
-  outline: "border border-primary/70 text-primary hover:border-primary hover:bg-primary/[0.04]",
-  ghost: "text-primary hover:bg-primary/[0.04]",
-  destructive: "bg-error text-white shadow-lg",
-  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 getRippleColor = (variant, color) => {
+  if (variant === "contained") {
+    return "rgba(255, 255, 255, 0.3)";
+  }
+  return `color-mix(in srgb, var(--${color}-main) 30%, transparent)`;
 };
+
+// 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]",
@@ -35,13 +74,6 @@ var sizeClasses = {
   lg: "h-11 px-[22px] text-[16px] gap-[8px]",
   xl: "h-14 px-[22px] text-[16px] gap-[8px]"
 };
-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 roundnessClasses = {
   none: "rounded-none",
   sm: "rounded-[2px]",
@@ -49,27 +81,16 @@ var roundnessClasses = {
   lg: "rounded-[16px]",
   full: "rounded-full"
 };
-function cn2(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-var rippleColor = {
-  primary: "rgba(255, 255, 255, 0.3)",
-  secondary: "rgba(255, 255, 255, 0.3)",
-  outline: "rgba(25, 118, 210, 0.1)",
-  ghost: "rgba(25, 118, 210, 0.1)",
-  destructive: "rgba(255, 255, 255, 0.3)",
-  link: "rgba(25, 118, 210, 0.1)"
-};
 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,
@@ -104,18 +125,18 @@ 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: [
-          /* @__PURE__ */ jsx(Ripple, { ref: rippleRef, color: rippleColor[variant] }),
+          /* @__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 }),
@@ -128,9 +149,91 @@ var Button = forwardRef(
 Button.displayName = "Button";
 var Button_default = Button;
 
-// src/components/Feedback/Tooltip/Tooltip.tsx
-import { useRef as useRef2, 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,
@@ -142,56 +245,57 @@ function Tooltip(props) {
     popoverProps = {},
     ...containerProps
   } = props;
-  const container = useRef2(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 useRef3, 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,
@@ -200,7 +304,7 @@ function InputField(props) {
     errorColor = "rgb(240, 70, 70)",
     ...inputProps
   } = props;
-  const initRef = useRef3({ isUserTyped: false });
+  const initRef = useRef4({ isUserTyped: false });
   const [error, setError] = useState2("");
   function handleError(value) {
     if (!initRef.current.isUserTyped) return;
@@ -231,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,
@@ -244,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 useRef4, 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: "" }],
@@ -258,8 +362,8 @@ function Select(props) {
     optionsPosition = "bottom-start",
     ...inputProps
   } = props;
-  const container = useRef4(null);
-  const optionsContainer = useRef4(null);
+  const container = useRef5(null);
+  const optionsContainer = useRef5(null);
   const [isOpen, setIsOpen] = useState3(false);
   const [activeOption, setActiveOption] = useState3("");
   useKeyboardShortcuts([
@@ -315,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,
@@ -331,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,
@@ -350,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
               },
@@ -380,8 +484,8 @@ function Select(props) {
 }
 
 // src/components/Forms/MultiSelect/index.tsx
-import { Fragment as Fragment2, useRef as useRef5, 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,
@@ -392,8 +496,8 @@ function MultiSelect(props) {
     ...inputProps
   } = props;
   const labelMap = new Map(options.map((option) => [option.value, option.label]));
-  const container = useRef5(null);
-  const optionsContainer = useRef5(null);
+  const container = useRef6(null);
+  const optionsContainer = useRef6(null);
   const [isOpen, setIsOpen] = useState4(false);
   const [activeOption, setActiveOption] = useState4("");
   useKeyboardShortcuts([
@@ -456,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,
@@ -472,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,
@@ -491,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
               },
@@ -521,7 +625,7 @@ function MultiSelect(props) {
 }
 
 // src/components/DataDisplay/Table/Table.tsx
-import { forwardRef as forwardRef2, useMemo } from "react";
+import { forwardRef as forwardRef3, useMemo } from "react";
 
 // src/components/DataDisplay/Table/TableContext.tsx
 import { createContext, useContext } from "react";
@@ -532,15 +636,15 @@ var TableContext = createContext({
 var useTableContext = () => useContext(TableContext);
 
 // src/components/DataDisplay/Table/Table.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Table = forwardRef2(
+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__ */ jsx6(TableContext.Provider, { value, children: /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(TableContext.Provider, { value, children: /* @__PURE__ */ jsx7(
       "table",
       {
         ref,
-        className: `w-full caption-bottom text-sm border-collapse ${stickyHeader ? "relative" : ""} ${className}`,
+        className: `w-full caption-bottom text-sm border-collapse text-text ${stickyHeader ? "relative" : ""} ${className}`,
         ...props,
         children
       }
@@ -551,15 +655,15 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/DataDisplay/Table/TableBody.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var TableBody = forwardRef3(
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TableBody = forwardRef4(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "tbody",
       {
         ref,
-        className: `[&_tr:last-child]:border-0 ${className}`,
+        className: `[&_tr:last-child]:border-0 [&_tr]:border-border ${className}`,
         ...props,
         children
       }
@@ -570,9 +674,9 @@ TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/DataDisplay/Table/TableCell.tsx
-import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var TableCell = forwardRef4(
+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";
@@ -590,11 +694,11 @@ var TableCell = forwardRef4(
       checkbox: "p-0 w-[48px] text-center"
     };
     const effectivePadding = padding || "normal";
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       Component,
       {
         ref,
-        className: `align-middle transition-colors [&:has([role=checkbox])]:pr-0 ${isHead ? "font-semibold text-slate-700 bg-slate-50" : "text-slate-600"} ${stickyHeader && isHead ? "sticky top-0 z-10 shadow-[inset_0_-1px_0_rgba(226,232,240,1)]" : ""} ${alignClasses[align]} ${paddingClasses[effectivePadding]} ${className}`,
+        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
       }
@@ -605,15 +709,15 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/DataDisplay/Table/TableContainer.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var TableContainer = forwardRef5(
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TableContainer = forwardRef6(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       "div",
       {
         ref,
-        className: `w-full overflow-auto rounded-lg border border-slate-200 bg-white shadow-sm ${className}`,
+        className: `w-full overflow-auto rounded-lg border border-border bg-bg-secondary shadow-sm ${className}`,
         ...props,
         children
       }
@@ -624,15 +728,15 @@ TableContainer.displayName = "TableContainer";
 var TableContainer_default = TableContainer;
 
 // src/components/DataDisplay/Table/TableFooter.tsx
-import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var TableFooter = forwardRef6(
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var TableFooter = forwardRef7(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "tfoot",
       {
         ref,
-        className: `border-t bg-slate-50/50 font-medium [&>tr]:last:border-b-0 ${className}`,
+        className: `border-t border-border bg-bg-secondary/50 font-medium [&>tr]:last:border-b-0 ${className}`,
         ...props,
         children
       }
@@ -643,15 +747,15 @@ TableFooter.displayName = "TableFooter";
 var TableFooter_default = TableFooter;
 
 // src/components/DataDisplay/Table/TableHead.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var TableHead = forwardRef7(
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var TableHead = forwardRef8(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "thead",
       {
         ref,
-        className: `[&_tr]:border-b bg-slate-50/50 ${className}`,
+        className: `[&_tr]:border-b [&_tr]:border-border bg-bg-secondary/50 ${className}`,
         ...props,
         children
       }
@@ -662,15 +766,15 @@ TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/DataDisplay/Table/TableRow.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var TableRow = forwardRef8(
+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__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "tr",
       {
         ref,
-        className: `border-b transition-colors ${hover ? "hover:bg-slate-100/50" : ""} ${selected ? "bg-slate-100/80" : ""} ${className}`,
+        className: `border-b border-border transition-colors ${hover ? "hover:bg-bg/50" : ""} ${selected ? "bg-bg/80" : ""} ${className}`,
         ...props,
         children
       }
@@ -682,7 +786,7 @@ var TableRow_default = TableRow;
 
 // src/components/Overlay/Dialog/Dialog.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Dialog(props) {
   const {
     open,
@@ -714,14 +818,14 @@ function Dialog(props) {
   ]);
   if (typeof window === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       ShowWithAnimation,
       {
         when: open,
         removeOnHide: true,
         containerProps: {
           style: { position: "fixed" },
-          className: "fixed inset-0 w-screen h-screen flex items-center justify-center"
+          className: "fixed inset-0 w-screen h-screen flex items-center justify-center z-[9999]"
         },
         animationDuration: 1.5 * animationDuration,
         animationStyle: {
@@ -742,7 +846,7 @@ function Dialog(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx14(
           ShowWithAnimation,
           {
             when: open,
@@ -750,10 +854,13 @@ function Dialog(props) {
             role: "dialog",
             "aria-modal": "true",
             className: cn(
-              "relative z-10 w-full mx-4 bg-white rounded-lg shadow-lg overflow-hidden",
+              "relative z-10 w-full mx-4 bg-bg rounded-lg shadow-lg overflow-hidden",
               sizeClasses2[size],
               className
             ),
+            containerProps: {
+              className: "w-full"
+            },
             children
           }
         )
@@ -764,31 +871,31 @@ function Dialog(props) {
 }
 
 // src/components/Overlay/Dialog/DialogHeader.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function DialogHeader(props) {
   const { title, children, ...rest } = props;
-  return /* @__PURE__ */ jsxs6("div", { ...rest, className: "px-6 py-4 border-b", children: [
-    /* @__PURE__ */ jsx14(Show, { when: !!title, children: /* @__PURE__ */ jsx14("h1", { className: "text-lg font-medium", children: title }) }),
+  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 jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function DialogFooter(props) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ...props,
-      className: cn("px-6 py-4 border-t flex items-center justify-end", props.className)
+      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 jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function DialogContent(props) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       ...props,
@@ -799,7 +906,7 @@ function DialogContent(props) {
 
 // src/components/Overlay/Drawer/Drawer.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Drawer(props) {
   const {
     open,
@@ -834,7 +941,7 @@ function Drawer(props) {
     }[_size] + (isHorizontal ? "vw" : "vh");
   })();
   return createPortal2(
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       ShowWithAnimation,
       {
         when: open,
@@ -864,7 +971,7 @@ function Drawer(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           ShowWithAnimation,
           {
             when: open,
@@ -877,7 +984,7 @@ function Drawer(props) {
                 maxHeight: !isHorizontal ? size : "100%"
               }
             },
-            className: "w-full h-full bg-white flex flex-col overflow-hidden",
+            className: "w-full h-full bg-bg flex flex-col overflow-hidden",
             style: {
               borderRadius: {
                 left: `0 ${rounded}px ${rounded}px 0`,
@@ -911,9 +1018,9 @@ function Drawer(props) {
 }
 
 // src/components/Overlay/Drawer/DrawerContent.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function DrawerContent({ children, className, style }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
@@ -924,12 +1031,12 @@ function DrawerContent({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerHeader.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function DrawerHeader({ children, className, style }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
-      className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b", className),
+      className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b border-border", className),
       style,
       children
     }
@@ -937,12 +1044,12 @@ function DrawerHeader({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerFooter.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function DrawerFooter({ children, className, style }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
-      className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t", className),
+      className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t border-border", className),
       style,
       children
     }
@@ -958,6 +1065,7 @@ export {
   DrawerContent,
   DrawerFooter,
   DrawerHeader,
+  IconButton_default as IconButton,
   InputField,
   MultiSelect,
   Select,

package/dist/core/index.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PopoverProps } from '../Input-CL3wQvR_.js';
-export { I as Input, a as InputProps } from '../Input-CL3wQvR_.js';
 import * as react from 'react';
 import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
+import { P as PopoverProps } from '../Input-CWxBHfX8.js';
+export { I as Input, a as InputProps } from '../Input-CWxBHfX8.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function Popover(props: PopoverProps): react_jsx_runtime.JSX.Element;
+declare function Popover(props: PopoverProps): react.ReactPortal | null;
 
 interface RippleRef {
     /**

package/dist/core/index.js

@@ -5,7 +5,7 @@ import {
   Show,
   ShowWithAnimation,
   Spinner
-} from "../chunk-EUAKUHDG.js";
+} from "../chunk-F6GWYCMR.js";
 import "../chunk-MCQS3QNN.js";
 import "../chunk-U65NGM6F.js";
 export {

package/index.css

@@ -15,129 +15,39 @@
 
 @layer base {
     :root {
-        --primary-main: #2563eb;
-        --primary-light: #60a5fa;
-        --primary-dark: #1d4ed8;
-        --primary-contrast: #ffffff;
+        --bg: #f1f5ff;
+        --bg-secondary: #ffffff;
 
-        --secondary-main: #64748b;
-        --secondary-light: #94a3b8;
-        --secondary-dark: #475569;
-        --secondary-contrast: #ffffff;
-
-        --grey-50: #f9fafb;
-        --grey-100: #f3f4f6;
-        --grey-200: #e5e7eb;
-        --grey-300: #d1d5db;
-        --grey-400: #9ca3af;
-        --grey-500: #6b7280;
-        --grey-600: #4b5563;
-        --grey-700: #374151;
-        --grey-800: #1f2937;
-        --grey-900: #111827;
-        --grey-A100: #f5f5f5;
-        --grey-A200: #eeeeee;
-        --grey-A400: #bdbdbd;
-        --grey-A700: #616161;
-
-        --error-main: #ef4444;
-        --error-light: #fef2f2;
-        --error-dark: #dc2626;
-        --error-contrast: #ffffff;
-
-        --warning-main: #f59e0b;
-        --warning-light: #fbbf24;
-        --warning-dark: #d97706;
-        --warning-contrast: #ffffff;
-
-        --info-main: #3b82f6;
-        --info-light: #60a5fa;
-        --info-dark: #2563eb;
-        --info-contrast: #ffffff;
-
-        --success-main: #10b981;
-        --success-light: #34d399;
-        --success-dark: #059669;
-        --success-contrast: #ffffff;
-
-        --background-default: #f5f5f5;
-        --background-paper: #ffffff;
-
-        --text-primary: #0f172a;
+        --text: #0f172a;
         --text-secondary: #475569;
-        --text-disabled: #94a3b8;
 
-        --divider: #e5e7eb;
+        --primary: #2563eb;
+        --primary-secondary: #64748b;
 
-        --action-active: rgba(0, 0, 0, 0.54);
-        --action-hover: rgba(0, 0, 0, 0.04);
-        --action-selected: rgba(0, 0, 0, 0.08);
-        --action-disabled: rgba(0, 0, 0, 0.26);
-        --action-disabled-bg: rgba(0, 0, 0, 0.12);
-        --action-focus: #93c5fd;
+        --success: #10b981;
+        --error: #ef4444;
+        --warning: #f59e0b;
+        --info: #3b82f6;
+
+        --border: #e5e7eb;
     }
 
     .dark {
-        --primary-main: #60a5fa;
-        --primary-light: #93c5fd;
-        --primary-dark: #3b82f6;
-        --primary-contrast: #0f172a;
-
-        --secondary-main: #94a3b8;
-        --secondary-light: #cbd5e1;
-        --secondary-dark: #64748b;
-        --secondary-contrast: #0f172a;
-
-        --grey-50: #1f2937;
-        --grey-100: #374151;
-        --grey-200: #4b5563;
-        --grey-300: #6b7280;
-        --grey-400: #9ca3af;
-        --grey-500: #d1d5db;
-        --grey-600: #e5e7eb;
-        --grey-700: #f3f4f6;
-        --grey-800: #f9fafb;
-        --grey-900: #ffffff;
-        --grey-A100: #374151;
-        --grey-A200: #4b5563;
-        --grey-A400: #9ca3af;
-        --grey-A700: #d1d5db;
-
-        --error-main: #f87171;
-        --error-light: #fef2f2;
-        --error-dark: #ef4444;
-        --error-contrast: #0f172a;
-
-        --warning-main: #fbbf24;
-        --warning-light: #fcd34d;
-        --warning-dark: #f59e0b;
-        --warning-contrast: #0f172a;
-
-        --info-main: #60a5fa;
-        --info-light: #93c5fd;
-        --info-dark: #3b82f6;
-        --info-contrast: #0f172a;
-
-        --success-main: #34d399;
-        --success-light: #6ee7b7;
-        --success-dark: #10b981;
-        --success-contrast: #0f172a;
+        --bg: #1f2937;
+        --bg-secondary: #111827;
 
-        --background-default: #0f172a;
-        --background-paper: #1e293b;
+        --text: #f9fafb;
+        --text-secondary: #d1d5db;
 
-        --text-primary: #f8fafc;
-        --text-secondary: #94a3b8;
-        --text-disabled: #64748b;
+        --primary: #60a5fa;
+        --primary-secondary: #94a3b8;
 
-        --divider: #334155;
+        --success: #34d399;
+        --error: #fef2f2;
+        --warning: #fbbf24;
+        --info: #60a5fa;
 
-        --action-active: rgba(255, 255, 255, 0.56);
-        --action-hover: rgba(255, 255, 255, 0.08);
-        --action-selected: rgba(255, 255, 255, 0.16);
-        --action-disabled: rgba(255, 255, 255, 0.3);
-        --action-disabled-bg: rgba(255, 255, 255, 0.12);
-        --action-focus: #60a5fa;
+        --border: #374151;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "UI components library for optigrit apps",
   "license": "ISC",
   "author": "",
@@ -80,12 +80,13 @@
     "yalc": "^1.0.0-pre.53"
   },
   "peerDependencies": {
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0",
     "tailwindcss": "^3.4.19"
   },
   "dependencies": {
     "magicast": "^0.5.2",
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "tailwind-merge": "^3.6.0"
   }
 }

package/tailwind.preset.js

@@ -4,84 +4,52 @@ export default {
     extend: {
       colors: {
         primary: {
-          DEFAULT: "var(--primary-main)",
-          main: "var(--primary-main)",
-          light: "var(--primary-light)",
-          dark: "var(--primary-dark)",
-          contrastText: "var(--primary-contrast)",
+          ...generateShades('var(--primary)'),
+          secondary: generateShades('var(--primary-secondary)'),
         },
-        secondary: {
-          DEFAULT: "var(--secondary-main)",
-          main: "var(--secondary-main)",
-          light: "var(--secondary-light)",
-          dark: "var(--secondary-dark)",
-          contrastText: "var(--secondary-contrast)",
-        },
-        error: {
-          DEFAULT: "var(--error-main)",
-          main: "var(--error-main)",
-          light: "var(--error-light)",
-          dark: "var(--error-dark)",
-          contrastText: "var(--error-contrast)",
-        },
-        warning: {
-          DEFAULT: "var(--warning-main)",
-          main: "var(--warning-main)",
-          light: "var(--warning-light)",
-          dark: "var(--warning-dark)",
-          contrastText: "var(--warning-contrast)",
-        },
-        info: {
-          DEFAULT: "var(--info-main)",
-          main: "var(--info-main)",
-          light: "var(--info-light)",
-          dark: "var(--info-dark)",
-          contrastText: "var(--info-contrast)",
-        },
-        success: {
-          DEFAULT: "var(--success-main)",
-          main: "var(--success-main)",
-          light: "var(--success-light)",
-          dark: "var(--success-dark)",
-          contrastText: "var(--success-contrast)",
-        },
-        grey: {
-          50: "var(--grey-50)",
-          100: "var(--grey-100)",
-          200: "var(--grey-200)",
-          300: "var(--grey-300)",
-          400: "var(--grey-400)",
-          500: "var(--grey-500)",
-          600: "var(--grey-600)",
-          700: "var(--grey-700)",
-          800: "var(--grey-800)",
-          900: "var(--grey-900)",
-          A100: "var(--grey-A100)",
-          A200: "var(--grey-A200)",
-          A400: "var(--grey-A400)",
-          A700: "var(--grey-A700)",
-        },
-        background: {
-          DEFAULT: "var(--background-default)",
-          default: "var(--background-default)",
-          paper: "var(--background-paper)",
+        bg: {
+          ...generateShades('var(--bg)'),
+          secondary: generateShades('var(--bg-secondary)'),
         },
         text: {
-          DEFAULT: "var(--text-primary)",
-          primary: "var(--text-primary)",
-          secondary: "var(--text-secondary)",
-          disabled: "var(--text-disabled)",
-        },
-        divider: "var(--divider)",
-        action: {
-          active: "var(--action-active)",
-          hover: "var(--action-hover)",
-          selected: "var(--action-selected)",
-          disabled: "var(--action-disabled)",
-          disabledBackground: "var(--action-disabled-bg)",
-          focus: "var(--action-focus)",
-        },
+          ...generateShades('var(--text)'),
+          secondary: generateShades('var(--text-secondary)'),
+        },
+        border: generateShades('var(--border)'),
+        error: generateShades('var(--error)'),
+        success: generateShades('var(--success)'),
+        info: generateShades('var(--info)'),
+        warning: generateShades('var(--warning)'),
       }
     }
   }
+}
+
+
+function generateShades(color) {
+  const shades = {
+    DEFAULT: '', 
+    100: '', 
+    200: '', 
+    300: '', 
+    400: '', 
+    500: '', 
+    600: '', 
+    700: '', 
+    800: '', 
+    900: ''
+  };
+
+  for(let shadeKey in shades) {
+    const ratio = shadeKey === 'DEFAULT' ? 100 : parseInt(shadeKey) / 10;
+    shades[shadeKey] = `
+      rgb(
+        from color-mix(
+          in srgb, ${color} ${ratio}%, var(--bg, white) ${100 - ratio}%
+        ) r g b / <alpha-value>
+      )
+    `;
+  }
+
+  return shades;
 }