@optigrit/optigrit-ui 0.0.10 → 0.0.12

package/dist/{chunk-62RFRYVU.js → chunk-CGY2R33R.js}

@@ -229,15 +229,15 @@ var Input = forwardRef((props, ref) => {
         "--bg-color": bgColor,
         "--text-color": textColor,
         "--placeholder-color": colorMix(textColor, 80),
-        "--border-color": colorMix(borderColor, 50),
-        "--border-color-hover": colorMix(borderColor, 100),
+        "--border-color": colorMix(borderColor, 10),
+        "--border-color-hover": colorMix(primaryColor, 40),
         "--light-primary-color": colorMix(primaryColor, 50),
         "--primary-color": colorMix(primaryColor, 100),
         width: fullWidth === void 0 || fullWidth ? "100%" : "auto",
         ...inputContainerProps?.style
       },
       className: cn(
-        "flex items-center gap-1 border rounded-md h-[44px] p-1 transition-all duration-200 relative bg-[var(--bg-color)]",
+        "flex items-center gap-1 border rounded-xl h-[44px] p-1 transition-all duration-200 relative bg-[var(--bg-color)]",
         isFocus ? "ring-2 ring-[var(--light-primary-color)] border-[var(--primary-color)]" : "border-[var(--border-color)] hover:border-[var(--border-color-hover)]",
         inputContainerProps?.className
       ),
@@ -246,8 +246,11 @@ var Input = forwardRef((props, ref) => {
           "div",
           {
             id: "label",
-            className: "absolute bg-[var(--bg-color)] text-[var(--text-color)] px-1 rounded-sm transition-all duration-200 select-none cursor-text",
             onClick: () => container.current?.querySelector("input")?.focus(),
+            className: cn(
+              "absolute bg-[var(--bg-color)] px-1 rounded-sm transition-all duration-200 select-none cursor-text",
+              isFocus || !label || labelShrink === void 0 || labelShrink ? "text-[var(--text-color)]" : "text-[var(--placeholder-color)]"
+            ),
             children: label
           }
         ),
@@ -260,7 +263,7 @@ var Input = forwardRef((props, ref) => {
             ref,
             required: required === void 0 || required,
             className: cn(
-              "w-full h-full border-none outline-none rounded-sm transition-all duration-200 placeholder-[var(--placeholder-color)] text-[var(--text-color)] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--text-color)] bg-[var(--bg-color)]",
+              "text-sm w-full h-full border-none outline-none rounded-sm transition-all duration-200 placeholder-[var(--placeholder-color)] text-[var(--text-color)] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--text-color)] bg-[var(--bg-color)]",
               isFocus || !label || labelShrink === void 0 || labelShrink ? "" : "placeholder:opacity-0",
               inputProps.className
             ),

package/dist/components/index.d.ts

@@ -44,6 +44,7 @@ declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
 
 type InputFieldProps = {
     value?: string;
+    labelBehavior?: 'fixed' | 'float';
     errorColor?: string;
     validateValue?: (value: string) => string | null;
     onChangeValue?: (value: string) => void;
@@ -111,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";
 }
@@ -253,4 +273,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 };

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-62RFRYVU.js";
+} from "../chunk-CGY2R33R.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],
@@ -300,6 +300,7 @@ function InputField(props) {
     onChangeValue,
     containerProps = {},
     errorColor = "rgb(240, 70, 70)",
+    labelBehavior = "fixed",
     ...inputProps
   } = props;
   const initRef = useRef4({ isUserTyped: false });
@@ -334,18 +335,22 @@ function InputField(props) {
     }
   }, [props.value]);
   return /* @__PURE__ */ jsxs4("div", { ...containerProps, children: [
-    /* @__PURE__ */ jsx4(
-      Input,
-      {
-        ...inputProps,
-        textColor: error ? errorColor : inputProps.textColor,
-        borderColor: error ? errorColor : inputProps.borderColor,
-        primaryColor: error ? errorColor : inputProps.primaryColor,
-        onChange: handleOnChange,
-        onFocus: handleOnFocus,
-        onBlur: handleOnBlur
-      }
-    ),
+    /* @__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(
+        Input,
+        {
+          ...inputProps,
+          label: labelBehavior === "float" ? inputProps.label : void 0,
+          textColor: error ? errorColor : inputProps.textColor,
+          borderColor: error ? errorColor : inputProps.borderColor,
+          primaryColor: error ? errorColor : inputProps.primaryColor,
+          onChange: handleOnChange,
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx4("p", { className: "pl-1 text-xs", style: { color: errorColor, display: error ? "block" : "none" }, children: error })
   ] });
 }
@@ -891,7 +896,6 @@ 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);
@@ -899,15 +903,15 @@ var useTableContext = () => useContext(TableContext);
 // src/components/DataDisplay/Table/Table.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
 var Table = forwardRef3(
-  ({ className = "", children, stickyHeader = false, size = "medium", ...props }, ref) => {
-    const value = useMemo(() => ({ size, stickyHeader }), [size, stickyHeader]);
+  ({ className = "", children, stickyHeader = false, loading = false, ...props }, ref) => {
+    const value = useMemo(() => ({ stickyHeader }), [stickyHeader]);
     return /* @__PURE__ */ jsx13(TableContext.Provider, { value, children: /* @__PURE__ */ jsx13(
       "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__ */ jsx13("tbody", { className: "h-48", children: /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: 100, className: "text-center align-middle h-full", children: /* @__PURE__ */ jsx13("div", { className: "flex justify-center items-center h-full", children: /* @__PURE__ */ jsx13(Spinner, { size: 32 }) }) }) }) }) : children
       }
     ) });
   }
@@ -915,139 +919,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(
+var TableContainer = forwardRef4(
   ({ className = "", children, ...props }, ref) => {
     return /* @__PURE__ */ jsx14(
-      "tbody",
+      "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";
+var TableHead = forwardRef5(
+  ({ className = "", children, ...props }, ref) => {
     return /* @__PURE__ */ jsx15(
-      Component,
+      "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(
+var TableBody = forwardRef6(
   ({ className = "", children, ...props }, ref) => {
     return /* @__PURE__ */ jsx16(
-      "div",
+      "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) => {
+var TableRow = forwardRef7(
+  ({ className = "", children, hover = false, selected = false, ...props }, ref) => {
     return /* @__PURE__ */ jsx17(
-      "tfoot",
+      "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) => {
+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__ */ jsx18(
-      "thead",
+      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 jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+function DataTable({
+  data,
+  columns,
+  loading,
+  pagination
+}) {
+  return /* @__PURE__ */ jsxs10(TableContainer_default, { children: [
+    /* @__PURE__ */ jsxs10(Table_default, { loading, children: [
+      /* @__PURE__ */ jsx19(TableHead_default, { children: /* @__PURE__ */ jsx19(TableRow_default, { children: columns.map((col) => /* @__PURE__ */ jsx19(TableCell_default, { variant: "head", children: col.title }, col.key)) }) }),
+      /* @__PURE__ */ jsx19(TableBody_default, { children: data.map((row) => /* @__PURE__ */ jsx19(TableRow_default, { children: columns.map((col) => /* @__PURE__ */ jsx19(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__ */ jsx19("div", { className: "flex justify-end items-center px-3 py-2 border-t bg-transparent text-sm text-text-secondary", children: /* @__PURE__ */ jsxs10("div", { className: "flex justify-end gap-2 items-center", children: [
+        /* @__PURE__ */ jsx19(
+          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__ */ jsx19("span", { className: "px-2", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx19(
+          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__ */ jsx19(
+          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 jsx20 } from "react/jsx-runtime";
+var TableFooter = forwardRef9(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx20(
+      "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 jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var Carousel = forwardRef10(
   ({
     items,
@@ -1078,7 +1139,7 @@ var Carousel = forwardRef10(
     if (!items || items.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         ref,
@@ -1088,13 +1149,13 @@ var Carousel = forwardRef10(
         onMouseLeave: () => setIsHovered(false),
         ...props,
         children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "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__ */ jsxs11("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
+                /* @__PURE__ */ jsx21(
                   "img",
                   {
                     src: item.imageUrl,
@@ -1102,15 +1163,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__ */ jsxs11("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__ */ jsx21("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__ */ jsx21("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__ */ jsxs11(Fragment4, { children: [
+            /* @__PURE__ */ jsx21(
               IconButton_default,
               {
                 onClick: goToPrevious,
@@ -1118,7 +1179,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__ */ jsx21(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -1127,12 +1188,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__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               IconButton_default,
               {
                 onClick: goToNext,
@@ -1140,7 +1201,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__ */ jsx21(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -1149,13 +1210,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__ */ jsx21("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__ */ jsx21("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-20", children: items.map((_, index) => /* @__PURE__ */ jsx21(
             "button",
             {
               onClick: () => goToIndex(index),
@@ -1176,10 +1237,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 jsx22 } from "react/jsx-runtime";
 var Separator = React3.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       "div",
       {
         ref,
@@ -1199,7 +1260,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 jsx23 } from "react/jsx-runtime";
 function Dialog(props) {
   const {
     open,
@@ -1231,7 +1292,7 @@ function Dialog(props) {
   ]);
   if (typeof window === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       ShowWithAnimation,
       {
         when: open,
@@ -1259,7 +1320,7 @@ function Dialog(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx23(
           ShowWithAnimation,
           {
             when: open,
@@ -1267,7 +1328,7 @@ function Dialog(props) {
             role: "dialog",
             "aria-modal": "true",
             className: cn(
-              "relative z-10 w-full mx-4 bg-bg rounded-lg shadow-lg overflow-hidden",
+              "relative z-10 w-full mx-4 bg-bg-secondary rounded-2xl shadow-lg overflow-hidden max-h-[100vh] overflow-y-auto",
               sizeClasses2[size],
               className
             ),
@@ -1284,42 +1345,42 @@ function Dialog(props) {
 }
 
 // src/components/Overlay/Dialog/DialogHeader.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 function DialogHeader(props) {
   const { title, children, ...rest } = props;
-  return /* @__PURE__ */ jsxs11("div", { ...rest, className: "px-6 py-4 border-b border-border", children: [
-    /* @__PURE__ */ jsx23(Show, { when: !!title, children: /* @__PURE__ */ jsx23("h1", { className: "text-lg font-medium", children: title }) }),
+  return /* @__PURE__ */ jsxs12("div", { ...rest, className: cn("p-4 sticky top-0 z-[20] backdrop-blur-sm", props.className), children: [
+    /* @__PURE__ */ jsx24(Show, { when: !!title, children: /* @__PURE__ */ jsx24("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 jsx25 } from "react/jsx-runtime";
 function DialogFooter(props) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ...props,
-      className: cn("px-6 py-4 border-t flex items-center justify-end border-border", props.className)
+      className: cn("p-4 flex items-center justify-end sticky bottom-0 z-[20] backdrop-blur-sm", props.className)
     }
   );
 }
 
 // src/components/Overlay/Dialog/DialogContent.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function DialogContent(props) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       ...props,
-      className: cn("p-6", props.className)
+      className: cn("px-4 z-[10]", props.className)
     }
   );
 }
 
 // src/components/Overlay/Drawer/Drawer.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Drawer(props) {
   const {
     open,
@@ -1354,7 +1415,7 @@ function Drawer(props) {
     }[_size] + (isHorizontal ? "vw" : "vh");
   })();
   return createPortal2(
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       ShowWithAnimation,
       {
         when: open,
@@ -1384,7 +1445,7 @@ function Drawer(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx27(
           ShowWithAnimation,
           {
             when: open,
@@ -1431,9 +1492,9 @@ function Drawer(props) {
 }
 
 // src/components/Overlay/Drawer/DrawerContent.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function DrawerContent({ children, className, style }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
@@ -1444,9 +1505,9 @@ function DrawerContent({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerHeader.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function DrawerHeader({ children, className, style }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b border-border", className),
@@ -1457,9 +1518,9 @@ function DrawerHeader({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerFooter.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function DrawerFooter({ children, className, style }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t border-border", className),
@@ -1471,10 +1532,10 @@ function DrawerFooter({ children, className, style }) {
 
 // src/components/Surfaces/Card/Card.tsx
 import React4 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Card = React4.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       "div",
       {
         ref,
@@ -1492,22 +1553,22 @@ Card.displayName = "Card";
 
 // src/components/Surfaces/Card/CardHeader.tsx
 import React5 from "react";
-import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
 var CardHeader = React5.forwardRef(
   ({ className, avatar, action, title, subheader, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "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__ */ jsx32("div", { className: "mr-4 flex-shrink-0", children: avatar }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex-1 flex flex-col gap-1", children: [
+            title && /* @__PURE__ */ jsx32("div", { className: "font-semibold leading-none tracking-tight", children: title }),
+            subheader && /* @__PURE__ */ jsx32("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__ */ jsx32("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
         ]
       }
     );
@@ -1517,10 +1578,10 @@ CardHeader.displayName = "CardHeader";
 
 // src/components/Surfaces/Card/CardContent.tsx
 import React6 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var CardContent = React6.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33(
       "div",
       {
         ref,
@@ -1534,10 +1595,10 @@ 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";
+import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
 var CardFooter = React7.forwardRef(
   ({ className, text, action, children }, ref) => {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       "div",
       {
         ref,
@@ -1545,9 +1606,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__ */ jsxs14(Fragment5, { children: [
+          text && /* @__PURE__ */ jsx34("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: text }),
+          action && /* @__PURE__ */ jsx34("div", { className: "ml-auto flex items-center gap-2", children: action })
         ] })
       }
     );
@@ -1561,6 +1622,7 @@ export {
   CardFooter,
   CardHeader,
   Carousel,
+  DataTable_default as DataTable,
   Dialog,
   DialogContent,
   DialogFooter,

package/dist/core/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "UI components library for optigrit apps",
   "license": "ISC",
   "author": "",
@@ -54,7 +54,7 @@
     "lint": "tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "dev:yalc": "chokidar \"src/**/*\" -c \"npm run build && yalc push\" --polling"
+    "dev:yalc": "chokidar \"src/**/*\" --debounce 2000 -c \"npm run build && yalc push\" --polling"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",