@optigrit/optigrit-ui 0.0.9 → 0.0.11

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

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { ButtonHTMLAttributes, ReactNode, HTMLAttributes, RefObject, TableHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PopoverProps, a as InputProps } from '../Input-CBAdjRy6.js';
+import { P as PopoverProps, a as InputProps, S as ShowWithAnimationProps } from '../types-BSufqQYT.js';
 
 type ButtonVariant = "contained" | "outlined" | "soft" | "text";
 type ButtonColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
@@ -44,11 +44,12 @@ 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;
     containerProps?: HTMLAttributes<HTMLDivElement> & {
-        ref: RefObject<HTMLDivElement | null>;
+        ref?: RefObject<HTMLDivElement | null>;
     };
 } & Omit<InputProps, 'value'>;
 declare function InputField(props: InputFieldProps): react_jsx_runtime.JSX.Element;
@@ -86,6 +87,29 @@ interface SearchBarProps extends Omit<InputProps, 'value' | 'defaultValue'> {
 }
 declare const SearchBar: React__default.ForwardRefExoticComponent<SearchBarProps & React__default.RefAttributes<HTMLInputElement>>;
 
+type TabListProps = {
+    activeTabValue: string;
+    onChangeActiveTabValue: (value: string) => void;
+    tabs: Array<{
+        value: string;
+        label: string;
+    }>;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+declare function TabList(props: TabListProps): react_jsx_runtime.JSX.Element;
+
+type RenderPanelProps = {
+    activePanelValue: string;
+    panels: Array<{
+        value: string;
+        content: ReactNode;
+    }>;
+    animationStyle?: ShowWithAnimationProps['animationStyle'];
+    panelRemoveOnHide?: boolean;
+};
+
+type TabPanelProps = RenderPanelProps & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+declare function TabPanel(props: TabPanelProps): react_jsx_runtime.JSX.Element;
+
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
     stickyHeader?: boolean;
     size?: "small" | "medium";
@@ -230,4 +254,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, 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, 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 };

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
@@ -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 })
   ] });
 }
@@ -777,6 +782,114 @@ var SearchBar = React.forwardRef(
 );
 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";
+function TabList(props) {
+  const {
+    tabs,
+    activeTabValue,
+    onChangeActiveTabValue,
+    ...rest
+  } = props;
+  const tabsContainer = useRef8(null);
+  const activeIndicator = useRef8(null);
+  function handleValueChange() {
+    if (!tabsContainer.current || !activeIndicator.current) return;
+    const tab = tabsContainer.current.querySelector(`#${activeTabValue}`);
+    const tabLayoutInfo = tab?.getBoundingClientRect();
+    const containerLayoutInfo = tabsContainer.current.getBoundingClientRect();
+    if (!tabLayoutInfo) return;
+    activeIndicator.current.style.width = `${tabLayoutInfo.width}px`;
+    activeIndicator.current.style.height = `${tabLayoutInfo.height}px`;
+    activeIndicator.current.style.transform = `translateX(${tabLayoutInfo.left - containerLayoutInfo.left}px)`;
+  }
+  useEffect2(() => {
+    handleValueChange();
+    window.addEventListener("resize", handleValueChange);
+    tabsContainer.current?.addEventListener("scroll", handleValueChange);
+    return () => {
+      window.removeEventListener("resize", handleValueChange);
+      tabsContainer.current?.removeEventListener("scroll", handleValueChange);
+    };
+  }, [activeTabValue]);
+  return /* @__PURE__ */ jsxs9(
+    "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(
+          "div",
+          {
+            id: tab.value,
+            onClick: () => onChangeActiveTabValue(tab.value),
+            className: cn(
+              `px-3 py-1 rounded-lg cursor-pointer z-10 transition-all duration-200 whitespace-nowrap hover:bg-primary/20`,
+              activeTabValue === tab.value ? "text-white" : "text-text-secondary"
+            ),
+            children: tab.label
+          },
+          tab.value
+        )) })
+      ]
+    }
+  );
+}
+
+// src/components/Navigation/Tab/TabPanel/RenderPanel.tsx
+import { memo } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var RenderPanel = memo((props) => {
+  const {
+    activePanelValue,
+    panels,
+    animationStyle,
+    panelRemoveOnHide
+  } = props;
+  if (panels.length === 0) return null;
+  return /* @__PURE__ */ jsx11(
+    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) }),
+      animationStyle: animationStyle ?? {
+        children: {
+          from: { scale: 0.9, opacity: 0 },
+          active: { scale: 1, opacity: 1 },
+          to: { scale: 1.1, opacity: 0 }
+        }
+      },
+      children: panels[0].content
+    }
+  );
+});
+
+// src/components/Navigation/Tab/TabPanel/index.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function TabPanel(props) {
+  const {
+    activePanelValue,
+    panels,
+    animationStyle,
+    panelRemoveOnHide,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx12("div", { ...rest, children: /* @__PURE__ */ jsx12(
+    RenderPanel,
+    {
+      activePanelValue,
+      panels,
+      animationStyle,
+      panelRemoveOnHide
+    }
+  ) });
+}
+
 // src/components/DataDisplay/Table/Table.tsx
 import { forwardRef as forwardRef3, useMemo } from "react";
 
@@ -789,11 +902,11 @@ var TableContext = createContext({
 var useTableContext = () => useContext(TableContext);
 
 // src/components/DataDisplay/Table/Table.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+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]);
-    return /* @__PURE__ */ jsx10(TableContext.Provider, { value, children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx13(TableContext.Provider, { value, children: /* @__PURE__ */ jsx13(
       "table",
       {
         ref,
@@ -809,10 +922,10 @@ var Table_default = Table;
 
 // src/components/DataDisplay/Table/TableBody.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var TableBody = forwardRef4(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx14(
       "tbody",
       {
         ref,
@@ -828,7 +941,7 @@ var TableBody_default = TableBody;
 
 // src/components/DataDisplay/Table/TableCell.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var TableCell = forwardRef5(
   ({ className = "", align = "left", padding, variant, component, children, ...props }, ref) => {
     const { size, stickyHeader } = useTableContext();
@@ -847,7 +960,7 @@ var TableCell = forwardRef5(
       checkbox: "p-0 w-[48px] text-center"
     };
     const effectivePadding = padding || "normal";
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx15(
       Component,
       {
         ref,
@@ -863,10 +976,10 @@ var TableCell_default = TableCell;
 
 // src/components/DataDisplay/Table/TableContainer.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var TableContainer = forwardRef6(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         ref,
@@ -882,10 +995,10 @@ var TableContainer_default = TableContainer;
 
 // src/components/DataDisplay/Table/TableFooter.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var TableFooter = forwardRef7(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx17(
       "tfoot",
       {
         ref,
@@ -901,10 +1014,10 @@ var TableFooter_default = TableFooter;
 
 // src/components/DataDisplay/Table/TableHead.tsx
 import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var TableHead = forwardRef8(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx18(
       "thead",
       {
         ref,
@@ -920,10 +1033,10 @@ var TableHead_default = TableHead;
 
 // src/components/DataDisplay/Table/TableRow.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var TableRow = forwardRef9(
   ({ className = "", children, hover = false, selected = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx19(
       "tr",
       {
         ref,
@@ -938,8 +1051,8 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/DataDisplay/Carousel/Carousel.tsx
-import { useState as useState6, useEffect as useEffect2, useCallback as useCallback3, forwardRef as forwardRef10 } from "react";
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+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";
 var Carousel = forwardRef10(
   ({
     items,
@@ -962,7 +1075,7 @@ var Carousel = forwardRef10(
     const goToIndex = (index) => {
       setCurrentIndex(index);
     };
-    useEffect2(() => {
+    useEffect3(() => {
       if (!autoPlay || isHovered) return;
       const timer = setInterval(goToNext, interval);
       return () => clearInterval(timer);
@@ -970,7 +1083,7 @@ var Carousel = forwardRef10(
     if (!items || items.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         ref,
@@ -980,13 +1093,13 @@ var Carousel = forwardRef10(
         onMouseLeave: () => setIsHovered(false),
         ...props,
         children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx20(
             "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__ */ jsxs9("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
-                /* @__PURE__ */ jsx17(
+              children: items.map((item) => /* @__PURE__ */ jsxs10("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
+                /* @__PURE__ */ jsx20(
                   "img",
                   {
                     src: item.imageUrl,
@@ -994,15 +1107,15 @@ var Carousel = forwardRef10(
                     className: "w-full h-full object-cover"
                   }
                 ),
-                (item.title || item.description) && /* @__PURE__ */ jsxs9("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__ */ jsx17("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__ */ jsx17("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__ */ 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.id))
             }
           ),
-          showArrows && items.length > 1 && /* @__PURE__ */ jsxs9(Fragment4, { children: [
-            /* @__PURE__ */ jsx17(
+          showArrows && items.length > 1 && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsx20(
               IconButton_default,
               {
                 onClick: goToPrevious,
@@ -1010,7 +1123,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__ */ jsx17(
+                children: /* @__PURE__ */ jsx20(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -1019,12 +1132,12 @@ var Carousel = forwardRef10(
                     strokeWidth: 2,
                     stroke: "currentColor",
                     className: "w-5 h-5",
-                    children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })
+                    children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx20(
               IconButton_default,
               {
                 onClick: goToNext,
@@ -1032,7 +1145,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__ */ jsx17(
+                children: /* @__PURE__ */ jsx20(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -1041,13 +1154,13 @@ var Carousel = forwardRef10(
                     strokeWidth: 2,
                     stroke: "currentColor",
                     className: "w-5 h-5",
-                    children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })
+                    children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })
                   }
                 )
               }
             )
           ] }),
-          showIndicators && items.length > 1 && /* @__PURE__ */ jsx17("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-20", children: items.map((_, index) => /* @__PURE__ */ jsx17(
+          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(
             "button",
             {
               onClick: () => goToIndex(index),
@@ -1068,10 +1181,10 @@ Carousel.displayName = "Carousel";
 
 // src/components/DataDisplay/Separator/Separator.tsx
 import React3 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Separator = React3.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx21(
       "div",
       {
         ref,
@@ -1091,7 +1204,7 @@ Separator.displayName = "Separator";
 
 // src/components/Overlay/Dialog/Dialog.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Dialog(props) {
   const {
     open,
@@ -1123,7 +1236,7 @@ function Dialog(props) {
   ]);
   if (typeof window === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx22(
       ShowWithAnimation,
       {
         when: open,
@@ -1151,7 +1264,7 @@ function Dialog(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx22(
           ShowWithAnimation,
           {
             when: open,
@@ -1159,7 +1272,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
             ),
@@ -1176,42 +1289,42 @@ function Dialog(props) {
 }
 
 // src/components/Overlay/Dialog/DialogHeader.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 function DialogHeader(props) {
   const { title, children, ...rest } = props;
-  return /* @__PURE__ */ jsxs10("div", { ...rest, className: "px-6 py-4 border-b border-border", children: [
-    /* @__PURE__ */ jsx20(Show, { when: !!title, children: /* @__PURE__ */ jsx20("h1", { className: "text-lg font-medium", children: title }) }),
+  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 }) }),
     children
   ] });
 }
 
 // src/components/Overlay/Dialog/DialogFooter.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function DialogFooter(props) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     "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 jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function DialogContent(props) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     "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 jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function Drawer(props) {
   const {
     open,
@@ -1246,7 +1359,7 @@ function Drawer(props) {
     }[_size] + (isHorizontal ? "vw" : "vh");
   })();
   return createPortal2(
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx26(
       ShowWithAnimation,
       {
         when: open,
@@ -1276,7 +1389,7 @@ function Drawer(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx26(
           ShowWithAnimation,
           {
             when: open,
@@ -1323,9 +1436,9 @@ function Drawer(props) {
 }
 
 // src/components/Overlay/Drawer/DrawerContent.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function DrawerContent({ children, className, style }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
@@ -1336,9 +1449,9 @@ function DrawerContent({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerHeader.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function DrawerHeader({ children, className, style }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b border-border", className),
@@ -1349,9 +1462,9 @@ function DrawerHeader({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerFooter.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function DrawerFooter({ children, className, style }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t border-border", className),
@@ -1363,10 +1476,10 @@ function DrawerFooter({ children, className, style }) {
 
 // src/components/Surfaces/Card/Card.tsx
 import React4 from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Card = React4.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx30(
       "div",
       {
         ref,
@@ -1384,22 +1497,22 @@ Card.displayName = "Card";
 
 // src/components/Surfaces/Card/CardHeader.tsx
 import React5 from "react";
-import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
 var CardHeader = React5.forwardRef(
   ({ className, avatar, action, title, subheader, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         ref,
         className: cn("flex items-center p-6", className),
         ...props,
         children: [
-          avatar && /* @__PURE__ */ jsx28("div", { className: "mr-4 flex-shrink-0", children: avatar }),
-          /* @__PURE__ */ jsxs11("div", { className: "flex-1 flex flex-col gap-1", children: [
-            title && /* @__PURE__ */ jsx28("div", { className: "font-semibold leading-none tracking-tight", children: title }),
-            subheader && /* @__PURE__ */ jsx28("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: subheader })
+          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 })
           ] }),
-          action && /* @__PURE__ */ jsx28("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
+          action && /* @__PURE__ */ jsx31("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
         ]
       }
     );
@@ -1409,10 +1522,10 @@ CardHeader.displayName = "CardHeader";
 
 // src/components/Surfaces/Card/CardContent.tsx
 import React6 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var CardContent = React6.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx32(
       "div",
       {
         ref,
@@ -1426,10 +1539,10 @@ CardContent.displayName = "CardContent";
 
 // src/components/Surfaces/Card/CardFooter.tsx
 import React7 from "react";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 var CardFooter = React7.forwardRef(
   ({ className, text, action, children }, ref) => {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx33(
       "div",
       {
         ref,
@@ -1437,9 +1550,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__ */ jsxs12(Fragment5, { children: [
-          text && /* @__PURE__ */ jsx30("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: text }),
-          action && /* @__PURE__ */ jsx30("div", { className: "ml-auto flex items-center gap-2", children: action })
+        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 })
         ] })
       }
     );
@@ -1467,6 +1580,8 @@ export {
   SearchBar,
   Select,
   Separator,
+  TabList,
+  TabPanel,
   Table_default as Table,
   TableBody_default as TableBody,
   TableCell_default as TableCell,

package/dist/core/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
-import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
-import { P as PopoverProps } from '../Input-CBAdjRy6.js';
-export { I as Input, a as InputProps } from '../Input-CBAdjRy6.js';
+import { ReactNode } from 'react';
+import { P as PopoverProps, S as ShowWithAnimationProps } from '../types-BSufqQYT.js';
+export { I as Input, a as InputProps } from '../types-BSufqQYT.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function Popover(props: PopoverProps): React$1.ReactPortal | null;
@@ -59,31 +59,7 @@ interface SpinnerProps {
  */
 declare function Spinner({ size, thickness, color, className, }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
-type AnimationStyles = {
-    children: {
-        from: CSSProperties;
-        active: CSSProperties;
-        to?: CSSProperties;
-    };
-    otherwise?: {
-        from: CSSProperties;
-        active: CSSProperties;
-        to?: CSSProperties;
-    };
-};
-type AnimationsType = 'fade' | 'slide';
-type ShowWhenProps = {
-    when: boolean;
-    children: ReactNode;
-    otherwise?: ReactNode;
-    removeOnHide?: boolean;
-    animationDuration?: number;
-    animationType?: AnimationsType;
-    animationStyle?: AnimationStyles;
-    containerProps?: HTMLAttributes<HTMLDivElement>;
-} & HTMLAttributes<HTMLDivElement>;
-
-declare function ShowWithAnimation(props: ShowWhenProps): react_jsx_runtime.JSX.Element | null;
+declare function ShowWithAnimation(props: ShowWithAnimationProps): react_jsx_runtime.JSX.Element | null;
 
 type ShowProps = {
     when: boolean;
@@ -92,4 +68,4 @@ type ShowProps = {
 };
 declare function Show({ when, children, otherwise }: ShowProps): ReactNode;
 
-export { Popover, PopoverProps, Ripple, type RippleProps, type RippleRef, Show, type ShowProps, type ShowWhenProps, ShowWithAnimation, Spinner, type SpinnerColor, type SpinnerProps };
+export { Popover, PopoverProps, Ripple, type RippleProps, type RippleRef, Show, type ShowProps, ShowWithAnimation, ShowWithAnimationProps, Spinner, type SpinnerColor, type SpinnerProps };

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/dist/{Input-CBAdjRy6.d.ts → types-BSufqQYT.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributes, RefObject, ReactNode, InputHTMLAttributes } from 'react';
+import { HTMLAttributes, RefObject, ReactNode, InputHTMLAttributes, CSSProperties } from 'react';
 
 type PopoverPosition = `${'top' | 'bottom' | 'left' | 'right'}-${'start' | 'center' | 'end'}`;
 type PopoverProps = HTMLAttributes<HTMLDivElement> & {
@@ -38,4 +38,28 @@ declare const Input: React.ForwardRefExoticComponent<{
     inputContainerProps?: HTMLAttributes<HTMLDivElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "required"> & React.RefAttributes<HTMLInputElement>>;
 
-export { Input as I, type PopoverProps as P, type InputProps as a };
+type AnimationStyles = {
+    children: {
+        from: CSSProperties;
+        active: CSSProperties;
+        to?: CSSProperties;
+    };
+    otherwise?: {
+        from: CSSProperties;
+        active: CSSProperties;
+        to?: CSSProperties;
+    };
+};
+type AnimationsType = 'fade' | 'slide';
+type ShowWithAnimationProps = {
+    when: boolean;
+    children: ReactNode;
+    otherwise?: ReactNode;
+    removeOnHide?: boolean;
+    animationDuration?: number;
+    animationType?: AnimationsType;
+    animationStyle?: AnimationStyles;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
+
+export { Input as I, type PopoverProps as P, type ShowWithAnimationProps as S, type InputProps as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "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",