@optigrit/optigrit-ui 0.0.11 → 0.0.13

package/dist/{chunk-CGY2R33R.js → chunk-OPUJUU32.js}

@@ -228,7 +228,7 @@ var Input = forwardRef((props, ref) => {
       style: {
         "--bg-color": bgColor,
         "--text-color": textColor,
-        "--placeholder-color": colorMix(textColor, 80),
+        "--placeholder-color": colorMix("var(--text-secondary, gray)", 80),
         "--border-color": colorMix(borderColor, 10),
         "--border-color-hover": colorMix(primaryColor, 40),
         "--light-primary-color": colorMix(primaryColor, 50),

package/dist/components/index.d.ts

@@ -112,17 +112,36 @@ declare function TabPanel(props: TabPanelProps): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
     stickyHeader?: boolean;
-    size?: "small" | "medium";
+    loading?: boolean;
 }
 declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
 
+interface Column<T> {
+    key: string;
+    title: ReactNode;
+    render?: (item: T) => ReactNode;
+}
+interface TablePaginationConfig {
+    page: number;
+    totalPages: number;
+    onChange: (page: number) => void;
+}
+interface DataTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    loading?: boolean;
+    pagination?: TablePaginationConfig;
+}
+declare function DataTable<T extends {
+    id: string | number;
+}>({ data, columns, loading, pagination, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
 interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
 }
 declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
 
 interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
     align?: "left" | "center" | "right" | "justify" | "inherit";
-    padding?: "normal" | "none" | "checkbox";
     variant?: "head" | "body" | "footer";
     component?: "td" | "th";
 }
@@ -232,6 +251,14 @@ type DrawerFooterProps = {
 };
 declare function DrawerFooter({ children, className, style }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
 
+type AlertType = 'success' | 'error' | 'warning' | 'info';
+type AlertOptions = {
+    content?: React__default.ReactNode;
+    duration?: number;
+};
+
+declare const handleAlert: (title: React__default.ReactNode, type?: AlertType, options?: AlertOptions) => void;
+
 interface CardProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }
 declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -254,4 +281,4 @@ interface CardFooterProps extends React__default.HTMLAttributes<HTMLDivElement>
 }
 declare const CardFooter: React__default.ForwardRefExoticComponent<CardFooterProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { Button, type ButtonColor, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Carousel, type CarouselItem, type CarouselProps, Dialog, DialogContent, DialogFooter, DialogHeader, type DialogProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, IconButton, type IconButtonProps, InputField, type InputFieldProps, MultiSelect, type MultiSelectProps, SearchBar, type SearchBarProps, Select, type SelectProps, Separator, type SeparatorProps, TabList, type TabListProps, TabPanel, type TabPanelProps, 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, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Carousel, type CarouselItem, type CarouselProps, type Column, DataTable, type DataTableProps, Dialog, DialogContent, DialogFooter, DialogHeader, type DialogProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, IconButton, type IconButtonProps, InputField, type InputFieldProps, MultiSelect, type MultiSelectProps, SearchBar, type SearchBarProps, Select, type SelectProps, Separator, type SeparatorProps, TabList, type TabListProps, TabPanel, type TabPanelProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TablePaginationConfig, type TableProps, TableRow, type TableRowProps, Tooltip, type TooltipProps, handleAlert };

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-CGY2R33R.js";
+} from "../chunk-OPUJUU32.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -125,7 +125,7 @@ var Button = forwardRef(
         "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",
+          "relative overflow-hidden inline-flex items-center justify-center font-medium transition-all duration-150 active:scale-[0.98] 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),
           sizeClasses[size],
@@ -336,7 +336,16 @@ function InputField(props) {
   }, [props.value]);
   return /* @__PURE__ */ jsxs4("div", { ...containerProps, children: [
     /* @__PURE__ */ jsxs4("label", { children: [
-      /* @__PURE__ */ jsx4(Show, { when: labelBehavior === "fixed", children: /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-text-secondary/60 uppercase font-medium", children: props.label }) }),
+      /* @__PURE__ */ jsx4(Show, { when: labelBehavior === "fixed", children: /* @__PURE__ */ jsx4(
+        "span",
+        {
+          className: cn(
+            "text-[10px] uppercase font-medium",
+            error ? "text-error" : "text-text-secondary/60"
+          ),
+          children: props.label
+        }
+      ) }),
       /* @__PURE__ */ jsx4(
         Input,
         {
@@ -345,6 +354,11 @@ function InputField(props) {
           textColor: error ? errorColor : inputProps.textColor,
           borderColor: error ? errorColor : inputProps.borderColor,
           primaryColor: error ? errorColor : inputProps.primaryColor,
+          inputContainerProps: {
+            style: error ? {
+              "--border-color": "var(--error)"
+            } : void 0
+          },
           onChange: handleOnChange,
           onFocus: handleOnFocus,
           onBlur: handleOnBlur
@@ -461,7 +475,7 @@ function Select(props) {
           "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-bg-secondary shadow-md border-2 border-border text-text 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/10 text-text p-1 rounded-xl flex flex-col gap-1",
             onMouseDown: (event) => {
               event.preventDefault();
             },
@@ -471,7 +485,7 @@ function Select(props) {
                 id: option.value,
                 onClick: () => handleOnChange(option),
                 className: cn(
-                  "p-2 hover:bg-bg rounded cursor-pointer w-full",
+                  "p-2 hover:bg-bg rounded-lg cursor-pointer w-full",
                   activeOption === option.value ? "border-2 border-primary" : "",
                   option.value === props.value ? "bg-bg" : ""
                 ),
@@ -602,7 +616,7 @@ function MultiSelect(props) {
           "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-bg-secondary p-1 rounded-md flex flex-col gap-1 border-border border-2",
+            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 p-1 rounded-xl flex flex-col gap-1 border-border/10 border-2",
             onMouseDown: (event) => {
               event.preventDefault();
             },
@@ -612,7 +626,7 @@ function MultiSelect(props) {
                 id: option.value,
                 onClick: () => handleOnChange(option),
                 className: cn(
-                  "p-2 hover:bg-bg rounded cursor-pointer w-full",
+                  "p-2 hover:bg-bg rounded-lg cursor-pointer w-full",
                   activeOption === option.value ? "border-2 border-primary" : "",
                   props.value?.includes(option.value) ? "bg-bg" : ""
                 ),
@@ -674,8 +688,50 @@ var CrossIcon = (props) => /* @__PURE__ */ jsxs8(
   }
 );
 
+// src/shared/Icons/SuccessIcon.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var SuccessIcon = (props) => /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx9("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+  /* @__PURE__ */ jsx9("polyline", { points: "22 4 12 14.01 9 11.01" })
+] });
+
+// src/shared/Icons/ErrorIcon.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var ErrorIcon = (props) => /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx10("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+  /* @__PURE__ */ jsx10("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+] });
+
+// src/shared/Icons/WarningIcon.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var WarningIcon = (props) => /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx11("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+  /* @__PURE__ */ jsx11("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+  /* @__PURE__ */ jsx11("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+] });
+
+// src/shared/Icons/InfoIcon.tsx
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var InfoIcon = (props) => /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx12("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+  /* @__PURE__ */ jsx12("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+] });
+
+// src/shared/Icons/CloseIcon.tsx
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var CloseIcon = (props) => /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx13("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx13("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+
+// src/shared/Icons/ChevronDownIcon.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ChevronDownIcon = (props) => /* @__PURE__ */ jsx14("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx14("path", { d: "M19 9l-7 7-7-7" }) });
+
 // src/components/Forms/SearchBar/SearchBar.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var SearchBar = React.forwardRef(
   ({
     value,
@@ -747,26 +803,26 @@ var SearchBar = React.forwardRef(
         handleClear();
       }
     };
-    const defaultSearchIcon = /* @__PURE__ */ jsx9(SearchIcon, { className: "text-gray-400 ml-2" });
+    const defaultSearchIcon = /* @__PURE__ */ jsx15(SearchIcon, { className: "text-gray-400 ml-2" });
     const renderEndIcon = () => {
       if (loading) {
-        return /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center pr-3", children: /* @__PURE__ */ jsx9(Spinner, { size: 16, color: "primary" }) });
+        return /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center pr-3", children: /* @__PURE__ */ jsx15(Spinner, { size: 16, color: "primary" }) });
       }
       if (currentValue) {
-        return /* @__PURE__ */ jsx9(
+        return /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
             onClick: handleClear,
             className: "flex items-center justify-center p-1 mr-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer focus:outline-none focus:ring-1 focus:ring-gray-300",
             "aria-label": "Clear search",
-            children: /* @__PURE__ */ jsx9(CrossIcon, {})
+            children: /* @__PURE__ */ jsx15(CrossIcon, {})
           }
         );
       }
       return endIcon;
     };
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx15(
       Input,
       {
         ref,
@@ -784,7 +840,7 @@ SearchBar.displayName = "SearchBar";
 
 // src/components/Navigation/Tab/TabList/index.tsx
 import { useEffect as useEffect2, useRef as useRef8 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function TabList(props) {
   const {
     tabs,
@@ -813,14 +869,14 @@ function TabList(props) {
       tabsContainer.current?.removeEventListener("scroll", handleValueChange);
     };
   }, [activeTabValue]);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ...rest,
       className: cn("bg-bg-secondary w-full p-1 rounded-xl relative", rest.className),
       children: [
-        /* @__PURE__ */ jsx10("div", { ref: activeIndicator, className: "absolute rounded-lg bg-primary transition-all duration-200" }),
-        /* @__PURE__ */ jsx10("div", { ref: tabsContainer, className: "flex items-center gap-1 w-full overflow-x-auto", children: tabs.map((tab) => /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx16("div", { ref: activeIndicator, className: "absolute rounded-lg bg-primary transition-all duration-200" }),
+        /* @__PURE__ */ jsx16("div", { ref: tabsContainer, className: "flex items-center gap-1 w-full overflow-x-auto", children: tabs.map((tab) => /* @__PURE__ */ jsx16(
           "div",
           {
             id: tab.value,
@@ -840,7 +896,7 @@ function TabList(props) {
 
 // src/components/Navigation/Tab/TabPanel/RenderPanel.tsx
 import { memo } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var RenderPanel = memo((props) => {
   const {
     activePanelValue,
@@ -849,14 +905,14 @@ var RenderPanel = memo((props) => {
     panelRemoveOnHide
   } = props;
   if (panels.length === 0) return null;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx17(
     ShowWithAnimation,
     {
       when: panels[0].value === activePanelValue,
       containerProps: { className: "w-full h-full" },
       className: "w-full h-full",
       removeOnHide: panelRemoveOnHide,
-      otherwise: /* @__PURE__ */ jsx11(RenderPanel, { ...props, panels: panels.slice(1) }),
+      otherwise: /* @__PURE__ */ jsx17(RenderPanel, { ...props, panels: panels.slice(1) }),
       animationStyle: animationStyle ?? {
         children: {
           from: { scale: 0.9, opacity: 0 },
@@ -870,7 +926,7 @@ var RenderPanel = memo((props) => {
 });
 
 // src/components/Navigation/Tab/TabPanel/index.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function TabPanel(props) {
   const {
     activePanelValue,
@@ -879,7 +935,7 @@ function TabPanel(props) {
     panelRemoveOnHide,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx12("div", { ...rest, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx18("div", { ...rest, children: /* @__PURE__ */ jsx18(
     RenderPanel,
     {
       activePanelValue,
@@ -896,23 +952,22 @@ 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 jsx13 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Table = forwardRef3(
-  ({ className = "", children, stickyHeader = false, size = "medium", ...props }, ref) => {
-    const value = useMemo(() => ({ size, stickyHeader }), [size, stickyHeader]);
-    return /* @__PURE__ */ jsx13(TableContext.Provider, { value, children: /* @__PURE__ */ jsx13(
+  ({ className = "", children, stickyHeader = false, loading = false, ...props }, ref) => {
+    const value = useMemo(() => ({ stickyHeader }), [stickyHeader]);
+    return /* @__PURE__ */ jsx19(TableContext.Provider, { value, children: /* @__PURE__ */ jsx19(
       "table",
       {
         ref,
-        className: `w-full caption-bottom text-sm border-collapse text-text ${stickyHeader ? "relative" : ""} ${className}`,
+        className: `w-full caption-bottom text-sm border-collapse ${stickyHeader ? "relative" : ""} ${className}`,
         ...props,
-        children
+        children: loading ? /* @__PURE__ */ jsx19("tbody", { className: "h-48", children: /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: 100, className: "text-center align-middle h-full", children: /* @__PURE__ */ jsx19("div", { className: "flex justify-center items-center h-full", children: /* @__PURE__ */ jsx19(Spinner, { size: 32 }) }) }) }) }) : children
       }
     ) });
   }
@@ -920,139 +975,196 @@ var Table = forwardRef3(
 Table.displayName = "Table";
 var Table_default = Table;
 
-// src/components/DataDisplay/Table/TableBody.tsx
+// src/components/DataDisplay/Table/TableContainer.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var TableBody = forwardRef4(
+import { jsx as jsx20 } from "react/jsx-runtime";
+var TableContainer = forwardRef4(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx14(
-      "tbody",
+    return /* @__PURE__ */ jsx20(
+      "div",
       {
         ref,
-        className: `[&_tr:last-child]:border-0 [&_tr]:border-border ${className}`,
+        className: `w-full overflow-auto rounded-lg border bg-white shadow-sm ${className}`,
         ...props,
         children
       }
     );
   }
 );
-TableBody.displayName = "TableBody";
-var TableBody_default = TableBody;
+TableContainer.displayName = "TableContainer";
+var TableContainer_default = TableContainer;
 
-// src/components/DataDisplay/Table/TableCell.tsx
+// src/components/DataDisplay/Table/TableHead.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx15 } 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__ */ jsx15(
-      Component,
+import { jsx as jsx21 } from "react/jsx-runtime";
+var TableHead = forwardRef5(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx21(
+      "thead",
       {
         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}`,
+        className: `[&_tr]:border-b bg-bg ${className}`,
         ...props,
         children
       }
     );
   }
 );
-TableCell.displayName = "TableCell";
-var TableCell_default = TableCell;
+TableHead.displayName = "TableHead";
+var TableHead_default = TableHead;
 
-// src/components/DataDisplay/Table/TableContainer.tsx
+// src/components/DataDisplay/Table/TableBody.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var TableContainer = forwardRef6(
+import { jsx as jsx22 } from "react/jsx-runtime";
+var TableBody = forwardRef6(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx16(
-      "div",
+    return /* @__PURE__ */ jsx22(
+      "tbody",
       {
         ref,
-        className: `w-full overflow-auto rounded-lg border border-border bg-bg-secondary shadow-sm ${className}`,
+        className: `[&_tr:last-child]:border-0  ${className}`,
         ...props,
         children
       }
     );
   }
 );
-TableContainer.displayName = "TableContainer";
-var TableContainer_default = TableContainer;
+TableBody.displayName = "TableBody";
+var TableBody_default = TableBody;
 
-// src/components/DataDisplay/Table/TableFooter.tsx
+// src/components/DataDisplay/Table/TableRow.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var TableFooter = forwardRef7(
-  ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx17(
-      "tfoot",
+import { jsx as jsx23 } from "react/jsx-runtime";
+var TableRow = forwardRef7(
+  ({ className = "", children, hover = false, selected = false, ...props }, ref) => {
+    return /* @__PURE__ */ jsx23(
+      "tr",
       {
         ref,
-        className: `border-t border-border bg-bg-secondary/50 font-medium [&>tr]:last:border-b-0 ${className}`,
+        className: `border-b transition-colors ${hover ? "hover:bg-bg/50" : ""} ${selected ? "bg-bg/80" : ""} ${className}`,
         ...props,
         children
       }
     );
   }
 );
-TableFooter.displayName = "TableFooter";
-var TableFooter_default = TableFooter;
+TableRow.displayName = "TableRow";
+var TableRow_default = TableRow;
 
-// src/components/DataDisplay/Table/TableHead.tsx
+// src/components/DataDisplay/Table/TableCell.tsx
 import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var TableHead = forwardRef8(
-  ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx18(
-      "thead",
+import { jsx as jsx24 } from "react/jsx-runtime";
+var TableCell = forwardRef8(
+  ({ className = "", align = "left", variant, component, children, ...props }, ref) => {
+    const { 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"
+    };
+    return /* @__PURE__ */ jsx24(
+      Component,
       {
         ref,
-        className: `[&_tr]:border-b [&_tr]:border-border bg-bg-secondary/50 ${className}`,
+        className: `align-middle transition-colors px-3 py-2 ${isHead ? "text-xs font-bold uppercase tracking-wider text-gray-500 bg-transparent" : "text-text-secondary font-medium"} ${stickyHeader && isHead ? "sticky top-0 z-10 shadow-[inset_0_-1px_0_var(--bg)]" : ""} ${alignClasses[align]} ${className}`,
         ...props,
         children
       }
     );
   }
 );
-TableHead.displayName = "TableHead";
-var TableHead_default = TableHead;
+TableCell.displayName = "TableCell";
+var TableCell_default = TableCell;
 
-// src/components/DataDisplay/Table/TableRow.tsx
+// src/components/DataDisplay/Table/DataTable.tsx
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+function DataTable({
+  data,
+  columns,
+  loading,
+  pagination
+}) {
+  return /* @__PURE__ */ jsxs15(TableContainer_default, { children: [
+    /* @__PURE__ */ jsxs15(Table_default, { loading, children: [
+      /* @__PURE__ */ jsx25(TableHead_default, { children: /* @__PURE__ */ jsx25(TableRow_default, { children: columns.map((col) => /* @__PURE__ */ jsx25(TableCell_default, { variant: "head", children: col.title }, col.key)) }) }),
+      /* @__PURE__ */ jsx25(TableBody_default, { children: data.map((row) => /* @__PURE__ */ jsx25(TableRow_default, { children: columns.map((col) => /* @__PURE__ */ jsx25(TableCell_default, { children: col.render ? col.render(row) : row[col.key] }, col.key)) }, row.id)) })
+    ] }),
+    pagination && (() => {
+      const getVisiblePages = (current, total) => {
+        if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+        if (current <= 4) return [1, 2, 3, 4, 5, "...", total];
+        if (current >= total - 3) return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
+        return [1, "...", current - 1, current, current + 1, "...", total];
+      };
+      const visiblePages = getVisiblePages(pagination.page, pagination.totalPages);
+      return /* @__PURE__ */ jsx25("div", { className: "flex justify-end items-center px-3 py-2 border-t bg-transparent text-sm text-text-secondary", children: /* @__PURE__ */ jsxs15("div", { className: "flex justify-end gap-2 items-center", children: [
+        /* @__PURE__ */ jsx25(
+          Button_default,
+          {
+            variant: "outlined",
+            color: "secondary",
+            size: "sm",
+            onClick: () => pagination.onChange(pagination.page - 1),
+            disabled: pagination.page <= 1 || loading,
+            children: "Previous"
+          }
+        ),
+        visiblePages.map((p, index) => p === "..." ? /* @__PURE__ */ jsx25("span", { className: "px-2", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx25(
+          Button_default,
+          {
+            variant: p === pagination.page ? "soft" : "outlined",
+            color: p == pagination.page ? "primary" : "secondary",
+            size: "sm",
+            className: "min-w-[32px] px-2",
+            onClick: () => pagination.onChange(p),
+            disabled: loading,
+            children: p
+          },
+          p
+        )),
+        /* @__PURE__ */ jsx25(
+          Button_default,
+          {
+            variant: "outlined",
+            color: "secondary",
+            size: "sm",
+            onClick: () => pagination.onChange(pagination.page + 1),
+            disabled: pagination.page >= pagination.totalPages || loading,
+            children: "Next"
+          }
+        )
+      ] }) });
+    })()
+  ] });
+}
+var DataTable_default = DataTable;
+
+// src/components/DataDisplay/Table/TableFooter.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var TableRow = forwardRef9(
-  ({ className = "", children, hover = false, selected = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsx19(
-      "tr",
+import { jsx as jsx26 } from "react/jsx-runtime";
+var TableFooter = forwardRef9(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx26(
+      "tfoot",
       {
         ref,
-        className: `border-b border-border transition-colors ${hover ? "hover:bg-bg/50" : ""} ${selected ? "bg-bg/80" : ""} ${className}`,
+        className: `border-t border-border bg-bg-secondary/50 font-medium [&>tr]:last:border-b-0 ${className}`,
         ...props,
         children
       }
     );
   }
 );
-TableRow.displayName = "TableRow";
-var TableRow_default = TableRow;
+TableFooter.displayName = "TableFooter";
+var TableFooter_default = TableFooter;
 
 // src/components/DataDisplay/Carousel/Carousel.tsx
 import { useState as useState6, useEffect as useEffect3, useCallback as useCallback3, forwardRef as forwardRef10 } from "react";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var Carousel = forwardRef10(
   ({
     items,
@@ -1083,7 +1195,7 @@ var Carousel = forwardRef10(
     if (!items || items.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs16(
       "div",
       {
         ref,
@@ -1093,13 +1205,13 @@ var Carousel = forwardRef10(
         onMouseLeave: () => setIsHovered(false),
         ...props,
         children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx27(
             "div",
             {
               className: "flex transition-transform duration-500 ease-in-out h-full w-full flex-1",
               style: { transform: `translateX(-${currentIndex * 100}%)` },
-              children: items.map((item) => /* @__PURE__ */ jsxs10("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
-                /* @__PURE__ */ jsx20(
+              children: items.map((item) => /* @__PURE__ */ jsxs16("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
+                /* @__PURE__ */ jsx27(
                   "img",
                   {
                     src: item.imageUrl,
@@ -1107,15 +1219,15 @@ var Carousel = forwardRef10(
                     className: "w-full h-full object-cover"
                   }
                 ),
-                (item.title || item.description) && /* @__PURE__ */ jsxs10("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent flex flex-col justify-end p-6 md:p-8", children: [
-                  item.title && /* @__PURE__ */ jsx20("h3", { className: "text-white text-xl md:text-3xl font-semibold mb-2 transform transition-all duration-500 translate-y-0 opacity-100", children: item.title }),
-                  item.description && /* @__PURE__ */ jsx20("p", { className: "text-white/80 text-sm md:text-base max-w-2xl transform transition-all duration-500 delay-100 translate-y-0 opacity-100", children: item.description })
+                (item.title || item.description) && /* @__PURE__ */ jsxs16("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent flex flex-col justify-end p-6 md:p-8", children: [
+                  item.title && /* @__PURE__ */ jsx27("h3", { className: "text-white text-xl md:text-3xl font-semibold mb-2 transform transition-all duration-500 translate-y-0 opacity-100", children: item.title }),
+                  item.description && /* @__PURE__ */ jsx27("p", { className: "text-white/80 text-sm md:text-base max-w-2xl transform transition-all duration-500 delay-100 translate-y-0 opacity-100", children: item.description })
                 ] })
               ] }, item.id))
             }
           ),
-          showArrows && items.length > 1 && /* @__PURE__ */ jsxs10(Fragment4, { children: [
-            /* @__PURE__ */ jsx20(
+          showArrows && items.length > 1 && /* @__PURE__ */ jsxs16(Fragment4, { children: [
+            /* @__PURE__ */ jsx27(
               IconButton_default,
               {
                 onClick: goToPrevious,
@@ -1123,7 +1235,7 @@ var Carousel = forwardRef10(
                 color: "secondary",
                 className: "absolute left-4 top-1/2 -translate-y-1/2 !bg-black/30 hover:!bg-black/50 text-white backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100 disabled:opacity-0 z-10",
                 "aria-label": "Previous slide",
-                children: /* @__PURE__ */ jsx20(
+                children: /* @__PURE__ */ jsx27(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -1132,12 +1244,12 @@ var Carousel = forwardRef10(
                     strokeWidth: 2,
                     stroke: "currentColor",
                     className: "w-5 h-5",
-                    children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })
+                    children: /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx27(
               IconButton_default,
               {
                 onClick: goToNext,
@@ -1145,7 +1257,7 @@ var Carousel = forwardRef10(
                 color: "secondary",
                 className: "absolute right-4 top-1/2 -translate-y-1/2 !bg-black/30 hover:!bg-black/50 text-white backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100 disabled:opacity-0 z-10",
                 "aria-label": "Next slide",
-                children: /* @__PURE__ */ jsx20(
+                children: /* @__PURE__ */ jsx27(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -1154,13 +1266,13 @@ var Carousel = forwardRef10(
                     strokeWidth: 2,
                     stroke: "currentColor",
                     className: "w-5 h-5",
-                    children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })
+                    children: /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })
                   }
                 )
               }
             )
           ] }),
-          showIndicators && items.length > 1 && /* @__PURE__ */ jsx20("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-20", children: items.map((_, index) => /* @__PURE__ */ jsx20(
+          showIndicators && items.length > 1 && /* @__PURE__ */ jsx27("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-20", children: items.map((_, index) => /* @__PURE__ */ jsx27(
             "button",
             {
               onClick: () => goToIndex(index),
@@ -1181,10 +1293,10 @@ Carousel.displayName = "Carousel";
 
 // src/components/DataDisplay/Separator/Separator.tsx
 import React3 from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Separator = React3.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx28(
       "div",
       {
         ref,
@@ -1204,7 +1316,7 @@ Separator.displayName = "Separator";
 
 // src/components/Overlay/Dialog/Dialog.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Dialog(props) {
   const {
     open,
@@ -1236,7 +1348,7 @@ function Dialog(props) {
   ]);
   if (typeof window === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx29(
       ShowWithAnimation,
       {
         when: open,
@@ -1264,7 +1376,7 @@ function Dialog(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx29(
           ShowWithAnimation,
           {
             when: open,
@@ -1289,19 +1401,19 @@ function Dialog(props) {
 }
 
 // src/components/Overlay/Dialog/DialogHeader.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function DialogHeader(props) {
   const { title, children, ...rest } = props;
-  return /* @__PURE__ */ jsxs11("div", { ...rest, className: cn("p-4 sticky top-0 z-[20] backdrop-blur-sm", props.className), children: [
-    /* @__PURE__ */ jsx23(Show, { when: !!title, children: /* @__PURE__ */ jsx23("h1", { className: "text-lg font-bold", children: title }) }),
+  return /* @__PURE__ */ jsxs17("div", { ...rest, className: cn("p-4 sticky top-0 z-[20] backdrop-blur-sm", props.className), children: [
+    /* @__PURE__ */ jsx30(Show, { when: !!title, children: /* @__PURE__ */ jsx30("h1", { className: "text-lg font-bold", children: title }) }),
     children
   ] });
 }
 
 // src/components/Overlay/Dialog/DialogFooter.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function DialogFooter(props) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       ...props,
@@ -1311,9 +1423,9 @@ function DialogFooter(props) {
 }
 
 // src/components/Overlay/Dialog/DialogContent.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function DialogContent(props) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       ...props,
@@ -1324,7 +1436,7 @@ function DialogContent(props) {
 
 // src/components/Overlay/Drawer/Drawer.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Drawer(props) {
   const {
     open,
@@ -1359,7 +1471,7 @@ function Drawer(props) {
     }[_size] + (isHorizontal ? "vw" : "vh");
   })();
   return createPortal2(
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx33(
       ShowWithAnimation,
       {
         when: open,
@@ -1389,7 +1501,7 @@ function Drawer(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx33(
           ShowWithAnimation,
           {
             when: open,
@@ -1436,9 +1548,9 @@ function Drawer(props) {
 }
 
 // src/components/Overlay/Drawer/DrawerContent.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function DrawerContent({ children, className, style }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
@@ -1449,9 +1561,9 @@ function DrawerContent({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerHeader.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function DrawerHeader({ children, className, style }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b border-border", className),
@@ -1462,9 +1574,9 @@ function DrawerHeader({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerFooter.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function DrawerFooter({ children, className, style }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t border-border", className),
@@ -1474,12 +1586,267 @@ function DrawerFooter({ children, className, style }) {
   );
 }
 
+// src/components/Overlay/Alert/renderAlert.tsx
+import { createRoot } from "react-dom/client";
+import { createPortal as createPortal3 } from "react-dom";
+
+// src/components/Overlay/Alert/Alert.tsx
+import { useEffect as useEffect4, useState as useState7, useRef as useRef9, useCallback as useCallback4 } from "react";
+import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+var icons = {
+  success: /* @__PURE__ */ jsx37(SuccessIcon, {}),
+  error: /* @__PURE__ */ jsx37(ErrorIcon, {}),
+  warning: /* @__PURE__ */ jsx37(WarningIcon, {}),
+  info: /* @__PURE__ */ jsx37(InfoIcon, {})
+};
+function AlertComponent({ open, title, type, options, onClose }) {
+  if (typeof window === "undefined") return null;
+  const [progress, setProgress] = useState7(100);
+  const [showContent, setShowContent] = useState7(false);
+  const timerRef = useRef9(null);
+  const animFrameRef = useRef9(null);
+  const startTimeRef = useRef9(0);
+  const remainingRef = useRef9(0);
+  const onCloseRef = useRef9(onClose);
+  useEffect4(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  const clearTimers = useCallback4(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (animFrameRef.current) {
+      cancelAnimationFrame(animFrameRef.current);
+      animFrameRef.current = null;
+    }
+  }, []);
+  const startProgressAnimation = useCallback4((duration) => {
+    startTimeRef.current = performance.now();
+    remainingRef.current = duration;
+    const animate = () => {
+      const elapsed = performance.now() - startTimeRef.current;
+      const remaining = Math.max(0, duration - elapsed);
+      const percent = remaining / (options?.duration || duration) * 100;
+      setProgress(percent);
+      if (remaining > 0) {
+        animFrameRef.current = requestAnimationFrame(animate);
+      }
+    };
+    animFrameRef.current = requestAnimationFrame(animate);
+    timerRef.current = setTimeout(() => onCloseRef.current(), duration);
+  }, [options?.duration]);
+  useEffect4(() => {
+    if (open && options?.duration) {
+      setProgress(100);
+      const paintTimer = setTimeout(() => {
+        startProgressAnimation(options.duration);
+      }, 50);
+      return () => {
+        clearTimeout(paintTimer);
+        clearTimers();
+      };
+    } else if (!open) {
+      clearTimers();
+      setProgress(100);
+    }
+  }, [open, options?.duration]);
+  const handleMouseEnter = useCallback4(() => {
+    if (!options?.duration) return;
+    const elapsed = performance.now() - startTimeRef.current;
+    remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+    clearTimers();
+  }, [options?.duration, clearTimers]);
+  const handleMouseLeave = useCallback4(() => {
+    if (!options?.duration || remainingRef.current <= 0) return;
+    startProgressAnimation(remainingRef.current);
+  }, [options?.duration, startProgressAnimation]);
+  const alertStyles = {
+    success: "bg-green-50 border-green-200 text-green-800 dark:bg-green-950 dark:border-green-800 dark:text-green-300",
+    error: "bg-red-50 border-red-200 text-red-800 dark:bg-red-950 dark:border-red-800 dark:text-red-300",
+    warning: "bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-300",
+    info: "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-300"
+  };
+  const iconStyles = {
+    success: "text-green-600 dark:text-green-400",
+    error: "text-red-600 dark:text-red-400",
+    warning: "text-yellow-600 dark:text-yellow-400",
+    info: "text-blue-600 dark:text-blue-400"
+  };
+  const progressColors = {
+    success: "bg-green-500",
+    error: "bg-red-500",
+    warning: "bg-yellow-500",
+    info: "bg-blue-500"
+  };
+  return /* @__PURE__ */ jsx37(
+    ShowWithAnimation,
+    {
+      when: open,
+      removeOnHide: true,
+      animationDuration: 300,
+      animationStyle: {
+        children: {
+          from: {
+            opacity: 0,
+            transform: "translateY(-20px) scale(0.95)"
+          },
+          active: {
+            opacity: 1,
+            transform: "translateY(0) scale(1)"
+          }
+        }
+      },
+      className: "pointer-events-auto flex justify-center",
+      children: /* @__PURE__ */ jsxs18(
+        "div",
+        {
+          className: cn(
+            "flex flex-col border rounded-xl shadow-xl overflow-hidden max-w-sm w-full relative",
+            alertStyles[type]
+          ),
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          children: [
+            /* @__PURE__ */ jsxs18("div", { className: cn("flex gap-3 items-center px-4 pt-4", options?.content ? "pb-2" : "pb-4"), children: [
+              /* @__PURE__ */ jsx37("div", { className: cn("flex-shrink-0", iconStyles[type]), children: icons[type] }),
+              /* @__PURE__ */ jsx37("h3", { className: "flex-1 text-sm font-semibold", children: title }),
+              /* @__PURE__ */ jsx37(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "flex-shrink-0 opacity-50 hover:opacity-100 transition-opacity rounded-md",
+                  "aria-label": "Close Alert",
+                  children: /* @__PURE__ */ jsx37(CloseIcon, {})
+                }
+              )
+            ] }),
+            options?.content && /* @__PURE__ */ jsxs18("div", { className: "px-4 pb-4", children: [
+              /* @__PURE__ */ jsxs18(
+                "button",
+                {
+                  onClick: () => setShowContent(!showContent),
+                  className: "text-xs font-medium underline opacity-80 hover:opacity-100 transition-opacity flex items-center gap-1",
+                  children: [
+                    showContent ? "Less Info" : "More Info",
+                    /* @__PURE__ */ jsx37(ChevronDownIcon, { className: cn("w-3 h-3 transition-transform duration-200", showContent ? "rotate-180" : "rotate-0") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx37("div", { className: cn(
+                "grid transition-all duration-300 ease-in-out",
+                showContent ? "grid-rows-[1fr] opacity-100 mt-2" : "grid-rows-[0fr] opacity-0 mt-0"
+              ), children: /* @__PURE__ */ jsx37("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx37("div", { className: "text-sm opacity-90 leading-relaxed pb-1", children: options.content }) }) })
+            ] }),
+            options?.duration && /* @__PURE__ */ jsx37("div", { className: "w-full h-1 bg-black/5 dark:bg-white/5 absolute bottom-0 left-0", children: /* @__PURE__ */ jsx37(
+              "div",
+              {
+                className: cn("h-full transition-none", progressColors[type]),
+                style: {
+                  width: `${progress}%`
+                }
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/Overlay/Alert/renderAlert.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var alertRoot = null;
+var alertContainer = null;
+var alertStack = [];
+var nextId = 0;
+function AlertStackContainer({ alerts, onClose }) {
+  return createPortal3(
+    /* @__PURE__ */ jsx38(
+      "div",
+      {
+        style: { position: "fixed", top: 0, left: 0, right: 0, zIndex: 9999, pointerEvents: "none" },
+        className: "flex flex-col items-center gap-2 p-4 sm:p-6",
+        children: alerts.map((alert) => /* @__PURE__ */ jsx38(
+          AlertComponent,
+          {
+            open: alert.open,
+            title: alert.title,
+            type: alert.type,
+            options: alert.options,
+            onClose: () => onClose(alert.id)
+          },
+          alert.id
+        ))
+      }
+    ),
+    document.body
+  );
+}
+var renderStack = () => {
+  if (!alertRoot) return;
+  const handleClose = (id) => {
+    alertStack = alertStack.map(
+      (a) => a.id === id ? { ...a, open: false } : a
+    );
+    renderStack();
+    setTimeout(() => {
+      alertStack = alertStack.filter((a) => a.id !== id);
+      renderStack();
+      if (alertStack.length === 0) {
+        if (alertRoot) {
+          alertRoot.unmount();
+          alertRoot = null;
+        }
+        alertContainer = null;
+      }
+    }, 300);
+  };
+  alertRoot.render(
+    /* @__PURE__ */ jsx38(AlertStackContainer, { alerts: [...alertStack], onClose: handleClose })
+  );
+};
+var renderAlert = (props) => {
+  if (typeof window === "undefined") return;
+  if (!alertContainer) {
+    alertContainer = document.createElement("div");
+  }
+  if (!alertRoot) {
+    alertRoot = createRoot(alertContainer);
+  }
+  if (props.open) {
+    const isDuplicate = alertStack.some(
+      (a) => a.open && a.title === props.title && a.type === props.type && a.options?.content === props.options?.content
+    );
+    if (isDuplicate) return;
+    const entry = {
+      id: nextId++,
+      open: true,
+      title: props.title,
+      type: props.type,
+      options: props.options
+    };
+    alertStack.push(entry);
+  }
+  renderStack();
+};
+
+// src/components/Overlay/Alert/handleAlert.ts
+var handleAlert = (title, type = "info", options) => {
+  renderAlert({
+    open: true,
+    title,
+    type,
+    options: { duration: 5e3, ...options }
+  });
+};
+
 // src/components/Surfaces/Card/Card.tsx
-import React4 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var Card = React4.forwardRef(
+import React5 from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var Card = React5.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx39(
       "div",
       {
         ref,
@@ -1496,23 +1863,23 @@ var Card = React4.forwardRef(
 Card.displayName = "Card";
 
 // src/components/Surfaces/Card/CardHeader.tsx
-import React5 from "react";
-import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
-var CardHeader = React5.forwardRef(
+import React6 from "react";
+import { jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
+var CardHeader = React6.forwardRef(
   ({ className, avatar, action, title, subheader, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
         className: cn("flex items-center p-6", className),
         ...props,
         children: [
-          avatar && /* @__PURE__ */ jsx31("div", { className: "mr-4 flex-shrink-0", children: avatar }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col gap-1", children: [
-            title && /* @__PURE__ */ jsx31("div", { className: "font-semibold leading-none tracking-tight", children: title }),
-            subheader && /* @__PURE__ */ jsx31("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: subheader })
+          avatar && /* @__PURE__ */ jsx40("div", { className: "mr-4 flex-shrink-0", children: avatar }),
+          /* @__PURE__ */ jsxs19("div", { className: "flex-1 flex flex-col gap-1", children: [
+            title && /* @__PURE__ */ jsx40("div", { className: "font-semibold leading-none tracking-tight", children: title }),
+            subheader && /* @__PURE__ */ jsx40("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: subheader })
           ] }),
-          action && /* @__PURE__ */ jsx31("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
+          action && /* @__PURE__ */ jsx40("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
         ]
       }
     );
@@ -1521,11 +1888,11 @@ var CardHeader = React5.forwardRef(
 CardHeader.displayName = "CardHeader";
 
 // src/components/Surfaces/Card/CardContent.tsx
-import React6 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var CardContent = React6.forwardRef(
+import React7 from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var CardContent = React7.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx41(
       "div",
       {
         ref,
@@ -1538,11 +1905,11 @@ var CardContent = React6.forwardRef(
 CardContent.displayName = "CardContent";
 
 // src/components/Surfaces/Card/CardFooter.tsx
-import React7 from "react";
-import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
-var CardFooter = React7.forwardRef(
+import React8 from "react";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
+var CardFooter = React8.forwardRef(
   ({ className, text, action, children }, ref) => {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx42(
       "div",
       {
         ref,
@@ -1550,9 +1917,9 @@ var CardFooter = React7.forwardRef(
           "flex items-center justify-between p-6 bg-white dark:bg-gray-900 rounded-b-xl",
           className
         ),
-        children: children || /* @__PURE__ */ jsxs13(Fragment5, { children: [
-          text && /* @__PURE__ */ jsx33("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: text }),
-          action && /* @__PURE__ */ jsx33("div", { className: "ml-auto flex items-center gap-2", children: action })
+        children: children || /* @__PURE__ */ jsxs20(Fragment5, { children: [
+          text && /* @__PURE__ */ jsx42("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: text }),
+          action && /* @__PURE__ */ jsx42("div", { className: "ml-auto flex items-center gap-2", children: action })
         ] })
       }
     );
@@ -1566,6 +1933,7 @@ export {
   CardFooter,
   CardHeader,
   Carousel,
+  DataTable_default as DataTable,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -1589,5 +1957,6 @@ export {
   TableFooter_default as TableFooter,
   TableHead_default as TableHead,
   TableRow_default as TableRow,
-  Tooltip
+  Tooltip,
+  handleAlert
 };

package/dist/core/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "UI components library for optigrit apps",
   "license": "ISC",
   "author": "",