@optigrit/optigrit-ui 0.0.7 → 0.0.9

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

@@ -77,6 +77,15 @@ 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>>;
+
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
     stickyHeader?: boolean;
     size?: "small" | "medium";
@@ -129,6 +138,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 +224,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, 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
@@ -32,28 +32,28 @@ var getVariantClasses = (variant, color) => {
       info: "bg-info text-white shadow-sm hover:shadow"
     },
     outlined: {
-      primary: "border border-[color-mix(in_srgb,var(--primary-main)_50%,transparent)] text-primary hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary-main)_4%,transparent)]",
-      secondary: "border border-[color-mix(in_srgb,var(--secondary-main)_50%,transparent)] text-secondary hover:border-secondary hover:bg-[color-mix(in_srgb,var(--secondary-main)_4%,transparent)]",
-      error: "border border-[color-mix(in_srgb,var(--error-main)_50%,transparent)] text-error hover:border-error hover:bg-[color-mix(in_srgb,var(--error-main)_4%,transparent)]",
-      success: "border border-[color-mix(in_srgb,var(--success-main)_50%,transparent)] text-success hover:border-success hover:bg-[color-mix(in_srgb,var(--success-main)_4%,transparent)]",
-      warning: "border border-[color-mix(in_srgb,var(--warning-main)_50%,transparent)] text-warning hover:border-warning hover:bg-[color-mix(in_srgb,var(--warning-main)_4%,transparent)]",
-      info: "border border-[color-mix(in_srgb,var(--info-main)_50%,transparent)] text-info hover:border-info hover:bg-[color-mix(in_srgb,var(--info-main)_4%,transparent)]"
+      primary: "border border-primary-500 text-primary hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)]",
+      secondary: "border border-primary-secondary-500 text-secondary hover:border-primary-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_4%,transparent)]",
+      error: "border border-error-500 text-error hover:border-error hover:bg-[color-mix(in_srgb,var(--error)_4%,transparent)]",
+      success: "border border-success-500 text-success hover:border-success hover:bg-[color-mix(in_srgb,var(--success)_4%,transparent)]",
+      warning: "border border-warning-500 text-warning hover:border-warning hover:bg-[color-mix(in_srgb,var(--warning)_4%,transparent)]",
+      info: "border border-info-500 text-info hover:border-info hover:bg-[color-mix(in_srgb,var(--info)_4%,transparent)]"
     },
     soft: {
-      primary: "bg-[color-mix(in_srgb,var(--primary)_10%,transparent)] text-primary hover:bg-[color-mix(in_srgb,var(--primary)_15%,transparent)]",
-      secondary: "bg-[color-mix(in_srgb,var(--primary-secondary)_10%,transparent)] text-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_15%,transparent)]",
-      error: "bg-[color-mix(in_srgb,var(--error)_10%,transparent)] text-error hover:bg-[color-mix(in_srgb,var(--error)_15%,transparent)]",
-      success: "bg-[color-mix(in_srgb,var(--success)_10%,transparent)] text-success hover:bg-[color-mix(in_srgb,var(--success)_15%,transparent)]",
-      warning: "bg-[color-mix(in_srgb,var(--warning)_10%,transparent)] text-warning hover:bg-[color-mix(in_srgb,var(--warning)_15%,transparent)]",
-      info: "bg-[color-mix(in_srgb,var(--info)_10%,transparent)] text-info hover:bg-[color-mix(in_srgb,var(--info)_15%,transparent)]"
+      primary: "bg-primary-100 text-primary hover:bg-primary-200",
+      secondary: "bg-primary-secondary-100 text-secondary hover:bg-primary-secondary-200",
+      error: "bg-error-100 text-error hover:bg-error-200",
+      success: "bg-success-100 text-success hover:bg-success-200",
+      warning: "bg-warning-100 text-warning hover:bg-warning-200",
+      info: "bg-info-100 text-info hover:bg-info-200"
     },
     text: {
       primary: "text-primary hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)]",
-      secondary: "text-secondary hover:bg-[color-mix(in_srgb,var(--secondary)_4%,transparent)]",
-      error: "text-error hover:bg-[color-mix(in_srgb,var(--error-main)_4%,transparent)]",
-      success: "text-success hover:bg-[color-mix(in_srgb,var(--success-main)_4%,transparent)]",
-      warning: "text-warning hover:bg-[color-mix(in_srgb,var(--warning-main)_4%,transparent)]",
-      info: "text-info hover:bg-[color-mix(in_srgb,var(--info-main)_4%,transparent)]"
+      secondary: "text-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_4%,transparent)]",
+      error: "text-error hover:bg-[color-mix(in_srgb,var(--error)_4%,transparent)]",
+      success: "text-success hover:bg-[color-mix(in_srgb,var(--success)_4%,transparent)]",
+      warning: "text-warning hover:bg-[color-mix(in_srgb,var(--warning)_4%,transparent)]",
+      info: "text-info hover:bg-[color-mix(in_srgb,var(--info)_4%,transparent)]"
     }
   };
   return styles[variant][color];
@@ -62,7 +62,7 @@ var getRippleColor = (variant, color) => {
   if (variant === "contained") {
     return "rgba(255, 255, 255, 0.3)";
   }
-  return `color-mix(in srgb, var(--${color}-main) 30%, transparent)`;
+  return `color-mix(in srgb, var(--${color == "secondary" ? "primary-secondary" : color}) 30%, transparent)`;
 };
 
 // src/components/Buttons/Button/index.tsx
@@ -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,161 @@ 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/DataDisplay/Table/Table.tsx
 import { forwardRef as forwardRef3, useMemo } from "react";
 
@@ -636,11 +789,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 jsx10 } 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__ */ jsx10(TableContext.Provider, { value, children: /* @__PURE__ */ jsx10(
       "table",
       {
         ref,
@@ -656,10 +809,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 jsx11 } from "react/jsx-runtime";
 var TableBody = forwardRef4(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx11(
       "tbody",
       {
         ref,
@@ -675,7 +828,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 jsx12 } from "react/jsx-runtime";
 var TableCell = forwardRef5(
   ({ className = "", align = "left", padding, variant, component, children, ...props }, ref) => {
     const { size, stickyHeader } = useTableContext();
@@ -694,7 +847,7 @@ var TableCell = forwardRef5(
       checkbox: "p-0 w-[48px] text-center"
     };
     const effectivePadding = padding || "normal";
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx12(
       Component,
       {
         ref,
@@ -710,10 +863,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 jsx13 } from "react/jsx-runtime";
 var TableContainer = forwardRef6(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref,
@@ -729,10 +882,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 jsx14 } from "react/jsx-runtime";
 var TableFooter = forwardRef7(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx14(
       "tfoot",
       {
         ref,
@@ -748,10 +901,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 jsx15 } from "react/jsx-runtime";
 var TableHead = forwardRef8(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx15(
       "thead",
       {
         ref,
@@ -767,10 +920,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 jsx16 } from "react/jsx-runtime";
 var TableRow = forwardRef9(
   ({ className = "", children, hover = false, selected = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx16(
       "tr",
       {
         ref,
@@ -785,8 +938,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 useEffect2, useCallback as useCallback3, forwardRef as forwardRef10 } from "react";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var Carousel = forwardRef10(
   ({
     items,
@@ -798,8 +951,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 +962,7 @@ var Carousel = forwardRef10(
     const goToIndex = (index) => {
       setCurrentIndex(index);
     };
-    useEffect(() => {
+    useEffect2(() => {
       if (!autoPlay || isHovered) return;
       const timer = setInterval(goToNext, interval);
       return () => clearInterval(timer);
@@ -817,7 +970,7 @@ var Carousel = forwardRef10(
     if (!items || items.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         ref,
@@ -827,13 +980,13 @@ var Carousel = forwardRef10(
         onMouseLeave: () => setIsHovered(false),
         ...props,
         children: [
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx17(
             "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__ */ jsxs9("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
+                /* @__PURE__ */ jsx17(
                   "img",
                   {
                     src: item.imageUrl,
@@ -841,15 +994,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__ */ 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.id))
             }
           ),
-          showArrows && items.length > 1 && /* @__PURE__ */ jsxs7(Fragment4, { children: [
-            /* @__PURE__ */ jsx14(
+          showArrows && items.length > 1 && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            /* @__PURE__ */ jsx17(
               IconButton_default,
               {
                 onClick: goToPrevious,
@@ -857,7 +1010,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__ */ jsx17(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -866,12 +1019,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__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx17(
               IconButton_default,
               {
                 onClick: goToNext,
@@ -879,7 +1032,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__ */ jsx17(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -888,13 +1041,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__ */ jsx17("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__ */ 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(
             "button",
             {
               onClick: () => goToIndex(index),
@@ -913,9 +1066,32 @@ var Carousel = forwardRef10(
 );
 Carousel.displayName = "Carousel";
 
+// src/components/DataDisplay/Separator/Separator.tsx
+import React3 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Separator = React3.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsx18(
+      "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 jsx19 } from "react/jsx-runtime";
 function Dialog(props) {
   const {
     open,
@@ -947,7 +1123,7 @@ function Dialog(props) {
   ]);
   if (typeof window === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx19(
       ShowWithAnimation,
       {
         when: open,
@@ -975,7 +1151,7 @@ function Dialog(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsx19(
           ShowWithAnimation,
           {
             when: open,
@@ -1000,19 +1176,19 @@ function Dialog(props) {
 }
 
 // src/components/Overlay/Dialog/DialogHeader.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } 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__ */ 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 }) }),
     children
   ] });
 }
 
 // src/components/Overlay/Dialog/DialogFooter.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function DialogFooter(props) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ...props,
@@ -1022,9 +1198,9 @@ function DialogFooter(props) {
 }
 
 // src/components/Overlay/Dialog/DialogContent.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function DialogContent(props) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       ...props,
@@ -1035,7 +1211,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 jsx23 } from "react/jsx-runtime";
 function Drawer(props) {
   const {
     open,
@@ -1070,7 +1246,7 @@ function Drawer(props) {
     }[_size] + (isHorizontal ? "vw" : "vh");
   })();
   return createPortal2(
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx23(
       ShowWithAnimation,
       {
         when: open,
@@ -1100,7 +1276,7 @@ function Drawer(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx23(
           ShowWithAnimation,
           {
             when: open,
@@ -1147,9 +1323,9 @@ function Drawer(props) {
 }
 
 // src/components/Overlay/Drawer/DrawerContent.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function DrawerContent({ children, className, style }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
@@ -1160,9 +1336,9 @@ function DrawerContent({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerHeader.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function DrawerHeader({ children, className, style }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx25(
     "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 +1349,9 @@ function DrawerHeader({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerFooter.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function DrawerFooter({ children, className, style }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx26(
     "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 +1362,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 jsx27 } from "react/jsx-runtime";
+var Card = React4.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx27(
       "div",
       {
         ref,
@@ -1198,7 +1374,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 +1383,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 jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+var CardHeader = React5.forwardRef(
   ({ className, avatar, action, title, subheader, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs11(
       "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__ */ 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 })
           ] }),
-          action && /* @__PURE__ */ jsx24("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
+          action && /* @__PURE__ */ jsx28("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
         ]
       }
     );
@@ -1231,11 +1408,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 jsx29 } from "react/jsx-runtime";
+var CardContent = React6.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx29(
       "div",
       {
         ref,
@@ -1246,10 +1423,34 @@ var CardContent = React4.forwardRef(
   }
 );
 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";
+var CardFooter = React7.forwardRef(
+  ({ className, text, action, children }, ref) => {
+    return /* @__PURE__ */ jsx30(
+      "div",
+      {
+        ref,
+        className: cn(
+          "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 })
+        ] })
+      }
+    );
+  }
+);
+CardFooter.displayName = "CardFooter";
 export {
   Button_default as Button,
   Card,
   CardContent,
+  CardFooter,
   CardHeader,
   Carousel,
   Dialog,
@@ -1263,7 +1464,9 @@ export {
   IconButton_default as IconButton,
   InputField,
   MultiSelect,
+  SearchBar,
   Select,
+  Separator,
   Table_default as Table,
   TableBody_default as TableBody,
   TableCell_default as TableCell,

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/package.json

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