@optigrit/optigrit-ui 0.0.4 → 0.0.6

package/dist/{Input-CWxBHfX8.d.ts → Input-CBAdjRy6.d.ts}

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import { HTMLAttributes, RefObject, ReactNode, InputHTMLAttributes } from 'react';
 
 type PopoverPosition = `${'top' | 'bottom' | 'left' | 'right'}-${'start' | 'center' | 'end'}`;
@@ -24,7 +24,7 @@ type InputProps = {
     fullWidth?: boolean;
     inputContainerProps?: HTMLAttributes<HTMLDivElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'required'>;
-declare const Input: react.ForwardRefExoticComponent<{
+declare const Input: React.ForwardRefExoticComponent<{
     label?: string;
     labelShrink?: boolean;
     required?: boolean;
@@ -36,6 +36,6 @@ declare const Input: react.ForwardRefExoticComponent<{
     primaryColor?: string;
     fullWidth?: boolean;
     inputContainerProps?: HTMLAttributes<HTMLDivElement>;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "required"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "required"> & React.RefAttributes<HTMLInputElement>>;
 
 export { Input as I, type PopoverProps as P, type InputProps as a };

package/dist/{ThemeProvider-D_1vZWeu.d.ts → ThemeProvider-CvUNY0S2.d.ts}

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import react__default from 'react';
+import React__default from 'react';
 
 type Theme = "dark" | "light" | "system";
 type ThemeProviderProps = {
-    children: react__default.ReactNode;
+    children: React__default.ReactNode;
     defaultTheme?: Theme;
     storageKey?: string;
 };

package/dist/{chunk-F6GWYCMR.js → chunk-CRWBYFRD.js}

@@ -128,7 +128,7 @@ function Popover(props) {
       /* @__PURE__ */ jsx(Show, { when: !!closeOnClickOutside, children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "fixed w-[100dvw] h-[100dvh] left-0 top-0 z-[1] bg-red-600/10",
+          className: "fixed w-[100dvw] h-[100dvh] left-0 top-0 z-[1]",
           style: { display: open ? "block" : "none" },
           onClick: handleClickOutside
         }
@@ -144,7 +144,7 @@ function Popover(props) {
             transition: "all 200ms",
             opacity: 0,
             scale: 0.8,
-            zIndex: 2,
+            zIndex: 9999,
             ...popoverProps.style
           },
           children

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
-import * as react from 'react';
-import react__default, { ButtonHTMLAttributes, ReactNode, HTMLAttributes, RefObject, TableHTMLAttributes } from 'react';
+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-CWxBHfX8.js';
+import { P as PopoverProps, a as InputProps } from '../Input-CBAdjRy6.js';
 
 type ButtonVariant = "contained" | "outlined" | "soft" | "text";
 type ButtonColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
@@ -18,7 +18,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     rightIcon?: ReactNode;
     disableRipple?: boolean;
 }
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
@@ -28,7 +28,7 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     loading?: boolean;
     disableRipple?: boolean;
 }
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 type SIZE = "xs" | "sm" | "md" | "lg" | "xl";
 
@@ -81,11 +81,11 @@ interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
     stickyHeader?: boolean;
     size?: "small" | "medium";
 }
-declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
 
 interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
 }
-declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
 
 interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
     align?: "left" | "center" | "right" | "justify" | "inherit";
@@ -93,37 +93,53 @@ interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
     variant?: "head" | "body" | "footer";
     component?: "td" | "th";
 }
-declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 
 interface TableContainerProps extends HTMLAttributes<HTMLDivElement> {
 }
-declare const TableContainer: react.ForwardRefExoticComponent<TableContainerProps & react.RefAttributes<HTMLDivElement>>;
+declare const TableContainer: React$1.ForwardRefExoticComponent<TableContainerProps & React$1.RefAttributes<HTMLDivElement>>;
 
 interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
 }
-declare const TableFooter: react.ForwardRefExoticComponent<TableFooterProps & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React$1.ForwardRefExoticComponent<TableFooterProps & React$1.RefAttributes<HTMLTableSectionElement>>;
 
 interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
 }
-declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableSectionElement>>;
 
 interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     hover?: boolean;
     selected?: boolean;
 }
-declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
+
+interface CarouselItem {
+    id: string | number;
+    imageUrl: string;
+    altText?: string;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+}
+interface CarouselProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    items: CarouselItem[];
+    autoPlay?: boolean;
+    interval?: number;
+    showArrows?: boolean;
+    showIndicators?: boolean;
+}
+declare const Carousel: React__default.ForwardRefExoticComponent<CarouselProps & React__default.RefAttributes<HTMLDivElement>>;
 
 type DialogProps = {
     open: boolean;
     onClose?: () => void;
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     backdropClose?: boolean;
     className?: string;
     closeOnEsc?: boolean;
     animationDuration?: number;
     size?: SIZE | "full" | "auto";
 };
-declare function Dialog(props: DialogProps): react__default.ReactPortal | null;
+declare function Dialog(props: DialogProps): React__default.ReactPortal | null;
 
 type DialogHeaderProps = HTMLAttributes<HTMLDivElement> & {
     title?: string;
@@ -137,7 +153,7 @@ declare function DialogContent(props: HTMLAttributes<HTMLDivElement>): react_jsx
 type DrawerProps = {
     open: boolean;
     onClose?: () => void;
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     backdropClose?: boolean;
     className?: string;
     closeOnEsc?: boolean;
@@ -146,27 +162,43 @@ type DrawerProps = {
     size?: SIZE | number;
     rounded?: number;
 };
-declare function Drawer(props: DrawerProps): react__default.ReactPortal | null;
+declare function Drawer(props: DrawerProps): React__default.ReactPortal | null;
 
 type DrawerContentProps = {
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     className?: string;
-    style?: react__default.CSSProperties;
+    style?: React__default.CSSProperties;
 };
 declare function DrawerContent({ children, className, style }: DrawerContentProps): react_jsx_runtime.JSX.Element;
 
 type DrawerHeaderProps = {
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     className?: string;
-    style?: react__default.CSSProperties;
+    style?: React__default.CSSProperties;
 };
 declare function DrawerHeader({ children, className, style }: DrawerHeaderProps): react_jsx_runtime.JSX.Element;
 
 type DrawerFooterProps = {
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     className?: string;
-    style?: react__default.CSSProperties;
+    style?: React__default.CSSProperties;
 };
 declare function DrawerFooter({ children, className, style }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonColor, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, 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 CardProps extends React__default.HTMLAttributes<HTMLDivElement> {
+}
+declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface CardHeaderProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    avatar?: React__default.ReactNode;
+    action?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    subheader?: React__default.ReactNode;
+}
+declare const CardHeader: React__default.ForwardRefExoticComponent<CardHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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 };

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-F6GWYCMR.js";
+} from "../chunk-CRWBYFRD.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -784,9 +784,138 @@ var TableRow = forwardRef9(
 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";
+var Carousel = forwardRef10(
+  ({
+    items,
+    autoPlay = false,
+    interval = 5e3,
+    showArrows = true,
+    showIndicators = true,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = useState5(0);
+    const [isHovered, setIsHovered] = useState5(false);
+    const goToNext = useCallback3(() => {
+      setCurrentIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1);
+    }, [items.length]);
+    const goToPrevious = useCallback3(() => {
+      setCurrentIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
+    }, [items.length]);
+    const goToIndex = (index) => {
+      setCurrentIndex(index);
+    };
+    useEffect(() => {
+      if (!autoPlay || isHovered) return;
+      const timer = setInterval(goToNext, interval);
+      return () => clearInterval(timer);
+    }, [autoPlay, interval, goToNext, isHovered]);
+    if (!items || items.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref,
+        className: cn("relative w-full overflow-hidden rounded-xl bg-surface-100 group flex flex-col", !className?.includes("h-") && !className?.includes("aspect") && "aspect-video max-h-[600px]", className),
+        style,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx14(
+            "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(
+                  "img",
+                  {
+                    src: item.imageUrl,
+                    alt: item.altText || "Carousel item",
+                    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.id))
+            }
+          ),
+          showArrows && items.length > 1 && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+            /* @__PURE__ */ jsx14(
+              IconButton_default,
+              {
+                onClick: goToPrevious,
+                variant: "contained",
+                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(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    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" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              IconButton_default,
+              {
+                onClick: goToNext,
+                variant: "contained",
+                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(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    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" })
+                  }
+                )
+              }
+            )
+          ] }),
+          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(
+            "button",
+            {
+              onClick: () => goToIndex(index),
+              "aria-label": `Go to slide ${index + 1}`,
+              className: cn(
+                "w-2.5 h-2.5 rounded-full transition-all duration-300 shadow-sm",
+                currentIndex === index ? "bg-white w-8" : "bg-white/50 hover:bg-white/80"
+              )
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
 // src/components/Overlay/Dialog/Dialog.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Dialog(props) {
   const {
     open,
@@ -818,7 +947,7 @@ function Dialog(props) {
   ]);
   if (typeof window === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       ShowWithAnimation,
       {
         when: open,
@@ -846,7 +975,7 @@ function Dialog(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx15(
           ShowWithAnimation,
           {
             when: open,
@@ -871,19 +1000,19 @@ function Dialog(props) {
 }
 
 // src/components/Overlay/Dialog/DialogHeader.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function DialogHeader(props) {
   const { title, children, ...rest } = props;
-  return /* @__PURE__ */ jsxs7("div", { ...rest, className: "px-6 py-4 border-b border-border", children: [
-    /* @__PURE__ */ jsx15(Show, { when: !!title, children: /* @__PURE__ */ jsx15("h1", { className: "text-lg font-medium", children: title }) }),
+  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 }) }),
     children
   ] });
 }
 
 // src/components/Overlay/Dialog/DialogFooter.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function DialogFooter(props) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       ...props,
@@ -893,9 +1022,9 @@ function DialogFooter(props) {
 }
 
 // src/components/Overlay/Dialog/DialogContent.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function DialogContent(props) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ...props,
@@ -906,7 +1035,7 @@ function DialogContent(props) {
 
 // src/components/Overlay/Drawer/Drawer.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function Drawer(props) {
   const {
     open,
@@ -941,14 +1070,14 @@ function Drawer(props) {
     }[_size] + (isHorizontal ? "vw" : "vh");
   })();
   return createPortal2(
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       ShowWithAnimation,
       {
         when: open,
         removeOnHide: true,
         containerProps: {
           style: { position: "fixed" },
-          className: `fixed inset-0 w-screen h-screen flex`
+          className: "fixed inset-0 w-screen h-screen flex z-[9999]"
         },
         animationDuration: 1.5 * animationDuration,
         animationStyle: {
@@ -971,7 +1100,7 @@ function Drawer(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           ShowWithAnimation,
           {
             when: open,
@@ -1018,9 +1147,9 @@ function Drawer(props) {
 }
 
 // src/components/Overlay/Drawer/DrawerContent.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function DrawerContent({ children, className, style }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
@@ -1031,9 +1160,9 @@ function DrawerContent({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerHeader.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function DrawerHeader({ children, className, style }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b border-border", className),
@@ -1044,9 +1173,9 @@ function DrawerHeader({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerFooter.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function DrawerFooter({ children, className, style }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t border-border", className),
@@ -1055,8 +1184,74 @@ 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(
+      "div",
+      {
+        ref,
+        className: cn(
+          "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
+      }
+    );
+  }
+);
+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(
+  ({ className, avatar, action, title, subheader, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs9(
+      "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 })
+          ] }),
+          action && /* @__PURE__ */ jsx24("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
+        ]
+      }
+    );
+  }
+);
+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(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx25(
+      "div",
+      {
+        ref,
+        className: cn("p-6 pt-0", className),
+        ...props
+      }
+    );
+  }
+);
+CardContent.displayName = "CardContent";
 export {
   Button_default as Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Carousel,
   Dialog,
   DialogContent,
   DialogFooter,

package/dist/core/index.d.ts

@@ -1,10 +1,10 @@
-import * as react from 'react';
+import * as React$1 from 'react';
 import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
-import { P as PopoverProps } from '../Input-CWxBHfX8.js';
-export { I as Input, a as InputProps } from '../Input-CWxBHfX8.js';
+import { P as PopoverProps } from '../Input-CBAdjRy6.js';
+export { I as Input, a as InputProps } from '../Input-CBAdjRy6.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function Popover(props: PopoverProps): react.ReactPortal | null;
+declare function Popover(props: PopoverProps): React$1.ReactPortal | null;
 
 interface RippleRef {
     /**
@@ -29,7 +29,7 @@ interface RippleProps {
  * Ripple component that provides a material-like ripple effect.
  * It should be placed inside a container with `relative` and `overflow-hidden` styles.
  */
-declare const Ripple: react.ForwardRefExoticComponent<RippleProps & react.RefAttributes<RippleRef>>;
+declare const Ripple: React$1.ForwardRefExoticComponent<RippleProps & React$1.RefAttributes<RippleRef>>;
 
 type SpinnerColor = "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inherit";
 interface SpinnerProps {

package/dist/core/index.js

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

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { u as useTheme } from '../ThemeProvider-D_1vZWeu.js';
+export { u as useTheme } from '../ThemeProvider-CvUNY0S2.js';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
-export { T as Theme, a as ThemeProvider, b as ThemeProviderProps, c as ThemeProviderState, u as useTheme } from '../ThemeProvider-D_1vZWeu.js';
+export { T as Theme, a as ThemeProvider, b as ThemeProviderProps, c as ThemeProviderState, u as useTheme } from '../ThemeProvider-CvUNY0S2.js';
 import 'react/jsx-runtime';
 import 'react';
 

package/index.css

@@ -29,7 +29,7 @@
         --warning: #f59e0b;
         --info: #3b82f6;
 
-        --border: #e5e7eb;
+        --border: #6f6f6f;
     }
 
     .dark {
@@ -47,7 +47,7 @@
         --warning: #fbbf24;
         --info: #60a5fa;
 
-        --border: #374151;
+        --border: #9f9f9f;
     }
 }
 

package/package.json

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