@optigrit/optigrit-ui 0.0.8 → 0.0.10

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

@@ -207,7 +207,7 @@ var Input = forwardRef((props, ref) => {
       transform: "translateY(0) scale(1)"
     });
     Object.assign(input.style, {
-      paddingLeft: startIcon ? `${startIconWidth + 8}px` : "8px",
+      paddingLeft: startIcon ? `${startIconWidth}px` : "8px",
       paddingRight: endIcon ? `${endIconWidth + 8}px` : "8px"
     });
   }

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";
@@ -48,7 +48,7 @@ type InputFieldProps = {
     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;
@@ -77,6 +77,38 @@ type MultiSelectProps = {
 } & Omit<InputFieldProps, 'readOnly' | 'value' | 'onChange' | 'onChangeValue'>;
 declare function MultiSelect(props: MultiSelectProps): react_jsx_runtime.JSX.Element;
 
+interface SearchBarProps extends Omit<InputProps, 'value' | 'defaultValue'> {
+    value?: string;
+    defaultValue?: string;
+    onSearch: (value: string) => void;
+    delay?: number;
+    loading?: boolean;
+}
+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";
@@ -129,6 +161,20 @@ interface CarouselProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }
 declare const Carousel: React__default.ForwardRefExoticComponent<CarouselProps & React__default.RefAttributes<HTMLDivElement>>;
 
+interface SeparatorProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The orientation of the separator.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether the element is purely decorative or semantic.
+     * @default true
+     */
+    decorative?: boolean;
+}
+declare const Separator: React__default.ForwardRefExoticComponent<SeparatorProps & React__default.RefAttributes<HTMLDivElement>>;
+
 type DialogProps = {
     open: boolean;
     onClose?: () => void;
@@ -201,4 +247,10 @@ interface CardContentProps extends React__default.HTMLAttributes<HTMLDivElement>
 }
 declare const CardContent: React__default.ForwardRefExoticComponent<CardContentProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { Button, type ButtonColor, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, 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, Select, type SelectProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tooltip, type TooltipProps };
+interface CardFooterProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    text?: React__default.ReactNode;
+    action?: React__default.ReactNode;
+}
+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 };

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-CRWBYFRD.js";
+} from "../chunk-62RFRYVU.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -96,8 +96,7 @@ var Button = forwardRef(
     className,
     children,
     type = "button",
-    onClick,
-    ...rest
+    onClick
   }, ref) => {
     const rippleRef = useRef(null);
     const isDisabled = disabled || loading;
@@ -134,7 +133,6 @@ var Button = forwardRef(
           fullWidth && "w-full",
           className
         ),
-        ...rest,
         children: [
           /* @__PURE__ */ jsx(Ripple, { ref: rippleRef, color: getRippleColor(variant, color) }),
           loading && /* @__PURE__ */ jsx(Spinner, { size: spinnerSize[size], color: "inherit" }),
@@ -624,6 +622,269 @@ function MultiSelect(props) {
   ] });
 }
 
+// src/components/Forms/SearchBar/SearchBar.tsx
+import React, { useState as useState5, useEffect, useRef as useRef7 } from "react";
+
+// src/shared/Icons/SearchIcon.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var SearchIcon = (props) => /* @__PURE__ */ jsxs7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx7("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsx7("path", { d: "m21 21-4.3-4.3" })
+    ]
+  }
+);
+
+// src/shared/Icons/CrossIcon.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var CrossIcon = (props) => /* @__PURE__ */ jsxs8(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx8("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ jsx8("path", { d: "m6 6 12 12" })
+    ]
+  }
+);
+
+// src/components/Forms/SearchBar/SearchBar.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SearchBar = React.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onSearch,
+    delay = 300,
+    loading = false,
+    startIcon,
+    endIcon,
+    placeholder = "Search..."
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState5(defaultValue || "");
+    const currentValue = isControlled ? value : internalValue;
+    const isFirstMount = useRef7(true);
+    const debounceTimer = useRef7(null);
+    useEffect(() => {
+      if (value !== void 0) {
+        setInternalValue(value);
+      }
+    }, [value]);
+    const triggerSearch = (val) => {
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+      onSearch?.(val);
+    };
+    useEffect(() => {
+      if (isFirstMount.current) {
+        isFirstMount.current = false;
+        if (!currentValue) return;
+      }
+      if (delay === 0) {
+        onSearch?.(currentValue);
+        return;
+      }
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+      debounceTimer.current = setTimeout(() => {
+        onSearch?.(currentValue);
+      }, delay);
+      return () => {
+        if (debounceTimer.current) {
+          clearTimeout(debounceTimer.current);
+        }
+      };
+    }, [currentValue, delay]);
+    const handleOnChange = (e) => {
+      const newVal = e.target.value;
+      if (!isControlled) {
+        setInternalValue(newVal);
+      }
+    };
+    const handleClear = () => {
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      triggerSearch("");
+      const syntheticEvent = {
+        target: { value: "" },
+        currentTarget: { value: "" }
+      };
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        triggerSearch(currentValue);
+      } else if (e.key === "Escape") {
+        handleClear();
+      }
+    };
+    const defaultSearchIcon = /* @__PURE__ */ jsx9(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" }) });
+      }
+      if (currentValue) {
+        return /* @__PURE__ */ jsx9(
+          "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, {})
+          }
+        );
+      }
+      return endIcon;
+    };
+    return /* @__PURE__ */ jsx9(
+      Input,
+      {
+        ref,
+        placeholder,
+        value: currentValue,
+        onChange: handleOnChange,
+        onKeyDown: handleKeyDown,
+        startIcon: startIcon || defaultSearchIcon,
+        endIcon: renderEndIcon()
+      }
+    );
+  }
+);
+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";
 
@@ -636,11 +897,11 @@ var TableContext = createContext({
 var useTableContext = () => useContext(TableContext);
 
 // src/components/DataDisplay/Table/Table.tsx
-import { jsx as jsx7 } 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__ */ jsx7(TableContext.Provider, { value, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx13(TableContext.Provider, { value, children: /* @__PURE__ */ jsx13(
       "table",
       {
         ref,
@@ -656,10 +917,10 @@ var Table_default = Table;
 
 // src/components/DataDisplay/Table/TableBody.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var TableBody = forwardRef4(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx14(
       "tbody",
       {
         ref,
@@ -675,7 +936,7 @@ var TableBody_default = TableBody;
 
 // src/components/DataDisplay/Table/TableCell.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx9 } 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();
@@ -694,7 +955,7 @@ var TableCell = forwardRef5(
       checkbox: "p-0 w-[48px] text-center"
     };
     const effectivePadding = padding || "normal";
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx15(
       Component,
       {
         ref,
@@ -710,10 +971,10 @@ var TableCell_default = TableCell;
 
 // src/components/DataDisplay/Table/TableContainer.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var TableContainer = forwardRef6(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         ref,
@@ -729,10 +990,10 @@ var TableContainer_default = TableContainer;
 
 // src/components/DataDisplay/Table/TableFooter.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var TableFooter = forwardRef7(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx17(
       "tfoot",
       {
         ref,
@@ -748,10 +1009,10 @@ var TableFooter_default = TableFooter;
 
 // src/components/DataDisplay/Table/TableHead.tsx
 import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var TableHead = forwardRef8(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx18(
       "thead",
       {
         ref,
@@ -767,10 +1028,10 @@ var TableHead_default = TableHead;
 
 // src/components/DataDisplay/Table/TableRow.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx13 } 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__ */ jsx13(
+    return /* @__PURE__ */ jsx19(
       "tr",
       {
         ref,
@@ -785,8 +1046,8 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/DataDisplay/Carousel/Carousel.tsx
-import { useState as useState5, useEffect, useCallback as useCallback3, forwardRef as forwardRef10 } from "react";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs7 } 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,
@@ -798,8 +1059,8 @@ var Carousel = forwardRef10(
     style,
     ...props
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = useState5(0);
-    const [isHovered, setIsHovered] = useState5(false);
+    const [currentIndex, setCurrentIndex] = useState6(0);
+    const [isHovered, setIsHovered] = useState6(false);
     const goToNext = useCallback3(() => {
       setCurrentIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1);
     }, [items.length]);
@@ -809,7 +1070,7 @@ var Carousel = forwardRef10(
     const goToIndex = (index) => {
       setCurrentIndex(index);
     };
-    useEffect(() => {
+    useEffect3(() => {
       if (!autoPlay || isHovered) return;
       const timer = setInterval(goToNext, interval);
       return () => clearInterval(timer);
@@ -817,7 +1078,7 @@ var Carousel = forwardRef10(
     if (!items || items.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         ref,
@@ -827,13 +1088,13 @@ var Carousel = forwardRef10(
         onMouseLeave: () => setIsHovered(false),
         ...props,
         children: [
-          /* @__PURE__ */ jsx14(
+          /* @__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__ */ jsxs7("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
-                /* @__PURE__ */ jsx14(
+              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,
@@ -841,15 +1102,15 @@ var Carousel = forwardRef10(
                     className: "w-full h-full object-cover"
                   }
                 ),
-                (item.title || item.description) && /* @__PURE__ */ jsxs7("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__ */ jsx14("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__ */ jsx14("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__ */ jsxs7(Fragment4, { children: [
-            /* @__PURE__ */ jsx14(
+          showArrows && items.length > 1 && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsx20(
               IconButton_default,
               {
                 onClick: goToPrevious,
@@ -857,7 +1118,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__ */ jsx14(
+                children: /* @__PURE__ */ jsx20(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -866,12 +1127,12 @@ var Carousel = forwardRef10(
                     strokeWidth: 2,
                     stroke: "currentColor",
                     className: "w-5 h-5",
-                    children: /* @__PURE__ */ jsx14("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__ */ jsx14(
+            /* @__PURE__ */ jsx20(
               IconButton_default,
               {
                 onClick: goToNext,
@@ -879,7 +1140,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__ */ jsx14(
+                children: /* @__PURE__ */ jsx20(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -888,13 +1149,13 @@ var Carousel = forwardRef10(
                     strokeWidth: 2,
                     stroke: "currentColor",
                     className: "w-5 h-5",
-                    children: /* @__PURE__ */ jsx14("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__ */ jsx14("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-20", children: items.map((_, index) => /* @__PURE__ */ jsx14(
+          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),
@@ -913,9 +1174,32 @@ var Carousel = forwardRef10(
 );
 Carousel.displayName = "Carousel";
 
+// src/components/DataDisplay/Separator/Separator.tsx
+import React3 from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Separator = React3.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsx21(
+      "div",
+      {
+        ref,
+        role: decorative ? "none" : "separator",
+        "aria-orientation": decorative ? void 0 : orientation,
+        className: cn(
+          "shrink-0 bg-gray-200 dark:bg-gray-800",
+          orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+
 // src/components/Overlay/Dialog/Dialog.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Dialog(props) {
   const {
     open,
@@ -947,7 +1231,7 @@ function Dialog(props) {
   ]);
   if (typeof window === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx22(
       ShowWithAnimation,
       {
         when: open,
@@ -975,7 +1259,7 @@ function Dialog(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsx22(
           ShowWithAnimation,
           {
             when: open,
@@ -1000,19 +1284,19 @@ function Dialog(props) {
 }
 
 // src/components/Overlay/Dialog/DialogHeader.tsx
-import { jsx as jsx16, jsxs as jsxs8 } 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__ */ jsxs8("div", { ...rest, className: "px-6 py-4 border-b border-border", children: [
-    /* @__PURE__ */ jsx16(Show, { when: !!title, children: /* @__PURE__ */ jsx16("h1", { className: "text-lg font-medium", children: title }) }),
+  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 }) }),
     children
   ] });
 }
 
 // src/components/Overlay/Dialog/DialogFooter.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function DialogFooter(props) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       ...props,
@@ -1022,9 +1306,9 @@ function DialogFooter(props) {
 }
 
 // src/components/Overlay/Dialog/DialogContent.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function DialogContent(props) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ...props,
@@ -1035,7 +1319,7 @@ function DialogContent(props) {
 
 // src/components/Overlay/Drawer/Drawer.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function Drawer(props) {
   const {
     open,
@@ -1070,7 +1354,7 @@ function Drawer(props) {
     }[_size] + (isHorizontal ? "vw" : "vh");
   })();
   return createPortal2(
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx26(
       ShowWithAnimation,
       {
         when: open,
@@ -1100,7 +1384,7 @@ function Drawer(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx26(
           ShowWithAnimation,
           {
             when: open,
@@ -1147,9 +1431,9 @@ function Drawer(props) {
 }
 
 // src/components/Overlay/Drawer/DrawerContent.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function DrawerContent({ children, className, style }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
@@ -1160,9 +1444,9 @@ function DrawerContent({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerHeader.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function DrawerHeader({ children, className, style }) {
-  return /* @__PURE__ */ jsx21(
+  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),
@@ -1173,9 +1457,9 @@ function DrawerHeader({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerFooter.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function DrawerFooter({ children, className, style }) {
-  return /* @__PURE__ */ jsx22(
+  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),
@@ -1186,11 +1470,11 @@ function DrawerFooter({ children, className, style }) {
 }
 
 // src/components/Surfaces/Card/Card.tsx
-import React2 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var Card = React2.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx23(
+import React4 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var Card = React4.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx30(
       "div",
       {
         ref,
@@ -1198,7 +1482,8 @@ var Card = React2.forwardRef(
           "w-full rounded-xl border border-gray-200 bg-white text-gray-950 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-50",
           className
         ),
-        ...props
+        ...props,
+        children
       }
     );
   }
@@ -1206,23 +1491,23 @@ var Card = React2.forwardRef(
 Card.displayName = "Card";
 
 // src/components/Surfaces/Card/CardHeader.tsx
-import React3 from "react";
-import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
-var CardHeader = React3.forwardRef(
+import React5 from "react";
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+var CardHeader = React5.forwardRef(
   ({ className, avatar, action, title, subheader, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         ref,
         className: cn("flex items-center p-6", className),
         ...props,
         children: [
-          avatar && /* @__PURE__ */ jsx24("div", { className: "mr-4 flex-shrink-0", children: avatar }),
-          /* @__PURE__ */ jsxs9("div", { className: "flex-1 flex flex-col gap-1", children: [
-            title && /* @__PURE__ */ jsx24("div", { className: "font-semibold leading-none tracking-tight", children: title }),
-            subheader && /* @__PURE__ */ jsx24("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__ */ jsx24("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 })
         ]
       }
     );
@@ -1231,11 +1516,11 @@ var CardHeader = React3.forwardRef(
 CardHeader.displayName = "CardHeader";
 
 // src/components/Surfaces/Card/CardContent.tsx
-import React4 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var CardContent = React4.forwardRef(
+import React6 from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var CardContent = React6.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx32(
       "div",
       {
         ref,
@@ -1246,10 +1531,34 @@ var CardContent = React4.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(
+  ({ className, text, action, children }, ref) => {
+    return /* @__PURE__ */ jsx33(
+      "div",
+      {
+        ref,
+        className: cn(
+          "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 })
+        ] })
+      }
+    );
+  }
+);
+CardFooter.displayName = "CardFooter";
 export {
   Button_default as Button,
   Card,
   CardContent,
+  CardFooter,
   CardHeader,
   Carousel,
   Dialog,
@@ -1263,7 +1572,11 @@ export {
   IconButton_default as IconButton,
   InputField,
   MultiSelect,
+  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-CRWBYFRD.js";
+} from "../chunk-62RFRYVU.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.8",
+  "version": "0.0.10",
   "description": "UI components library for optigrit apps",
   "license": "ISC",
   "author": "",