@andreagiugni/tailwind-dashboard-ui 0.1.0 → 0.3.0

package/README.md

@@ -152,11 +152,12 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `Dropdown` | `isOpen`, `onClose`, `children`, (+native div) |
 | `DropdownItem` | `variant` (default/primary/outline, like Button), `bgColor`/`textColor`/`borderColor` overrides, `tag` (a/button), `href`, `onClick`, `onItemClick`, `baseClassName` (full override) |
 | `Modal` | `isOpen`, `onClose`, `showCloseButton`, `isFullscreen`, `closeOnBackdrop?`, `closeOnEsc?`; **alert preset** → `variant` (`success`/`info`/`warning`/`danger`) + `title`, `description`, `actionText?`, `onAction?`; (+native div) |
-| `Table` / `TableHeader` / `TableBody` / `TableRow` / `TableCell` | `children`, `isHeader` (cell), (+native table elements; `onClick` / `onDoubleClick` on rows & cells) |
+| `Table` (composable) | `TableHeader` / `TableBody` / `TableRow` / `TableCell` with `children`, `isHeader` (cell), (+native table elements; `onClick` / `onDoubleClick` on rows & cells) |
+| `Table` (data-driven) | pass `data` + `columns` (`key`, `header`, `sortable?`, `align?`, `render?`, `className?`) to get search + per-column sort + pagination: `rowsPerPage?` (max rows/page, default 10), `rowsPerPageOptions?`, `searchKeys?` (**search box shown only when provided**), `searchPlaceholder?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` |
 | `Pagination` | `currentPage`, `totalPages`, `onPageChange` |
-| `DataTable` | `data`, `columns` (`key`, `header`, `sortable?`, `align?`, `render?`), `rowsPerPage?`, `rowsPerPageOptions?`, `searchable?`, `searchKeys?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` — generic, search + per-column sort + pagination built in |
 | `Breadcrumb` | `pageTitle`, `items?`, (+native) |
 | `ThemeToggleButton` | `theme?` (controlled), `onToggle?`, (+native button) |
+| `Card` | `title?`, `description?`, `icon?`, `image?`, `imageAlt?`, `horizontal?`, `footer?`, `children?`, (+native div) (+override) |
 | `Accordion` / `AccordionItem` | `selectionMode` (single/multiple), `expandedKeys` / `defaultExpandedKeys`, `onExpandedChange`; item: `itemKey`, `title`, `startContent?`, `disabled` |
 | `Tabs` / `Tab` | `variant` (underline/solid/pill), `selectedKey` / `defaultSelectedKey`, `onSelectionChange`, `color?`; tab: `tabKey`, `title`, `disabled` |
 | `Chip` | `color`, `variant` (light/solid), `size`, `startIcon`, `endIcon`, `avatar?`, `onClose?`, (+native span) (+override) |
@@ -165,6 +166,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `Progress` | `value`, `maxValue?`, `color`, `size` (sm/md/lg), `label?`, `showValueLabel?`, `isIndeterminate?` |
 | `Spinner` | `size` (sm/md/lg), `color`, `label?` |
 | `Skeleton` | `isLoaded`, `width?`, `height?`, `className`, `children?` |
+| `Toast` | `variant` (success/danger/warning/info), `title`, `message?`, `icon?`, `hideIcon?`, `showCloseButton?`, `onClose?`, `hideAccentBar?`, (+native div) (+override) |
 
 ### Overlays
 
@@ -230,14 +232,18 @@ const Editor = dynamic(
 />
 ```
 
-## Data table
+## Table
 
-`DataTable` is a generic, batteries-included table: pass your `data` array and a `columns`
-definition and you get live search, per-column click-to-sort, a "Show N entries" selector and
-pagination out of the box. Light/dark styling follows the standard `.dark` variant.
+`Table` has **two modes**, both under the same component:
+
+1. **Composable** — use `Table` / `TableHeader` / `TableBody` / `TableRow` / `TableCell` as thin,
+   styled wrappers around the native table elements when you want full control over the markup.
+2. **Data-driven** — pass a `data` array and a `columns` definition and you get live search,
+   per-column click-to-sort, a "Show N entries" selector and pagination out of the box. The mode
+   switches on automatically as soon as `columns` is provided.
 
 ```tsx
-import { DataTable, type DataTableColumn } from '@andreagiugni/tailwind-dashboard-ui';
+import { Table, type TableColumn } from '@andreagiugni/tailwind-dashboard-ui';
 
 type Person = { name: string; office: string; salary: number };
 
@@ -247,7 +253,7 @@ const people: Person[] = [
   // …
 ];
 
-const columns: DataTableColumn<Person>[] = [
+const columns: TableColumn<Person>[] = [
   { key: 'name', header: 'User', sortable: true },
   { key: 'office', header: 'Office', sortable: true },
   {
@@ -259,23 +265,25 @@ const columns: DataTableColumn<Person>[] = [
   },
 ];
 
-<DataTable
+<Table
   data={people}
   columns={columns}
-  rowsPerPage={5}
+  rowsPerPage={5}              // max rows per page (default 10)
   rowsPerPageOptions={[5, 10, 25]}
   defaultSortKey="name"
-  searchKeys={['name', 'office']}
+  searchKeys={['name', 'office']} // omit to hide the search box
   onRowClick={(row) => console.log(row)}
 />
 ```
 
-Key props: `data`, `columns` (each: `key`, `header`, `sortable?`, `align?`, `render?`,
+Key data-driven props: `data`, `columns` (each: `key`, `header`, `sortable?`, `align?`, `render?`,
 `className?`), `rowsPerPage` (default 10), `rowsPerPageOptions` (default `[5,10,25,50]`),
-`searchable` / `searchPlaceholder` / `searchKeys`, `defaultSortKey` / `defaultSortDirection`,
-`pagination`, `showSizeSelector`, `onRowClick`, `getRowId`, `emptyContent`. It is built on the
-exported `Table`, `Input` and `Pagination` primitives — drop down to those directly if you need
-full control over the markup.
+`searchKeys` / `searchPlaceholder`, `defaultSortKey` / `defaultSortDirection`, `pagination`,
+`showSizeSelector`, `onRowClick`, `getRowId`, `emptyContent`.
+
+> **Search visibility:** the search input renders **only** when you pass a non-empty `searchKeys`
+> array — those are also the exact fields the query matches. Omit `searchKeys` (or pass `[]`) to
+> hide search entirely.
 
 ## License
 

package/dist/index.cjs

@@ -552,19 +552,6 @@ var Dropzone = ({
     }
   );
 };
-var Table = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("table", { className: chunkYERNSNT4_cjs.cn("min-w-full", className), ...rest, children });
-var TableHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className, ...rest, children });
-var TableBody = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { className, ...rest, children });
-var TableRow = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className, ...rest, children });
-var TableCell = ({
-  children,
-  isHeader = false,
-  className,
-  ...rest
-}) => {
-  const Tag = isHeader ? "th" : "td";
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, ...rest, children });
-};
 var Pagination = ({
   currentPage,
   totalPages,
@@ -654,6 +641,18 @@ var Input = ({
     hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: chunkYERNSNT4_cjs.cn("mt-1.5 text-xs", error ? "text-error-500" : success ? "text-success-500" : "text-gray-500"), children: hint })
   ] });
 };
+var TableHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className, ...rest, children });
+var TableBody = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { className, ...rest, children });
+var TableRow = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className, ...rest, children });
+var TableCell = ({
+  children,
+  isHeader = false,
+  className,
+  ...rest
+}) => {
+  const Tag = isHeader ? "th" : "td";
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, ...rest, children });
+};
 var alignClass = {
   left: "text-left",
   center: "text-center",
@@ -670,16 +669,15 @@ function SortIcon({
     /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "currentColor", "aria-hidden": "true", className: active && direction === "desc" ? on : off, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6 1 1h8z" }) })
   ] });
 }
-function DataTable({
+function DataDrivenTable({
   data,
   columns,
   rowsPerPage = 10,
   rowsPerPageOptions = [5, 10, 25, 50],
   pagination = true,
   showSizeSelector = true,
-  searchable = true,
-  searchPlaceholder = "Search...",
   searchKeys,
+  searchPlaceholder = "Search...",
   defaultSortKey,
   defaultSortDirection = "asc",
   getRowId,
@@ -692,13 +690,13 @@ function DataTable({
   const [sortKey, setSortKey] = React5.useState(defaultSortKey);
   const [sortDir, setSortDir] = React5.useState(defaultSortDirection);
   const [page, setPage] = React5.useState(1);
+  const showSearch = !!(searchKeys && searchKeys.length > 0);
   const filtered = React5.useMemo(() => {
-    const keys = searchKeys ?? columns.map((c) => c.key);
     const q = search.trim().toLowerCase();
     let rows = data;
-    if (searchable && q) {
+    if (showSearch && q) {
       rows = rows.filter(
-        (row) => keys.some((k) => String(row[k] ?? "").toLowerCase().includes(q))
+        (row) => searchKeys.some((k) => String(row[k] ?? "").toLowerCase().includes(q))
       );
     }
     if (sortKey) {
@@ -710,7 +708,7 @@ function DataTable({
       });
     }
     return rows;
-  }, [data, columns, search, searchable, searchKeys, sortKey, sortDir]);
+  }, [data, search, showSearch, searchKeys, sortKey, sortDir]);
   const total = filtered.length;
   const totalPages = pagination ? Math.max(1, Math.ceil(total / pageSize)) : 1;
   const current = Math.min(page, totalPages);
@@ -727,7 +725,7 @@ function DataTable({
   };
   const sizeOptions = rowsPerPageOptions.length ? rowsPerPageOptions : [];
   const showSelector = pagination && showSizeSelector && sizeOptions.length > 1;
-  const showControls = searchable || showSelector;
+  const showControls = showSearch || showSelector;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -754,7 +752,7 @@ function DataTable({
             ),
             "entries"
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-          searchable && /* @__PURE__ */ jsxRuntime.jsx(
+          showSearch && /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
               type: "search",
@@ -769,7 +767,7 @@ function DataTable({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto border-y border-gray-100 dark:border-white/[0.05]", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto border-y border-gray-100 dark:border-white/[0.05]", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: "border-b border-gray-100 bg-gray-50 dark:border-white/[0.05] dark:bg-white/[0.06]", children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((col) => {
             const isActive = sortKey === col.key;
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -834,6 +832,47 @@ function DataTable({
     }
   );
 }
+function Table({
+  children,
+  data,
+  columns,
+  rowsPerPage,
+  rowsPerPageOptions,
+  pagination,
+  showSizeSelector,
+  searchKeys,
+  searchPlaceholder,
+  defaultSortKey,
+  defaultSortDirection,
+  getRowId,
+  onRowClick,
+  emptyContent,
+  className,
+  ...rest
+}) {
+  if (columns && data) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DataDrivenTable,
+      {
+        data,
+        columns,
+        rowsPerPage,
+        rowsPerPageOptions,
+        pagination,
+        showSizeSelector,
+        searchKeys,
+        searchPlaceholder,
+        defaultSortKey,
+        defaultSortDirection,
+        getRowId,
+        onRowClick,
+        emptyContent,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("table", { className: chunkYERNSNT4_cjs.cn("min-w-full", className), ...rest, children });
+}
 var ChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -966,6 +1005,230 @@ var ThemeToggleButton = ({
     }
   );
 };
+var Card = ({
+  title,
+  description,
+  icon,
+  image,
+  imageAlt = "",
+  horizontal = false,
+  footer,
+  children,
+  className,
+  bgColor,
+  textColor,
+  borderColor,
+  style,
+  ...rest
+}) => {
+  const cover = image ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: image,
+      alt: imageAlt,
+      className: chunkYERNSNT4_cjs.cn(
+        "object-cover",
+        horizontal ? "h-full w-full sm:w-2/5 sm:max-w-[16rem]" : "h-48 w-full"
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkYERNSNT4_cjs.cn(
+        "overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]",
+        horizontal && image && "flex flex-col sm:flex-row",
+        className
+      ),
+      style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
+      ...rest,
+      children: [
+        cover,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-5 sm:p-6", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-500 dark:bg-brand-500/15 dark:text-brand-400", children: icon }),
+          title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-800 dark:text-white/90", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description }),
+          children,
+          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: footer })
+        ] })
+      ]
+    }
+  );
+};
+var toastIcons = {
+  success: /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: "fill-current",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
+        }
+      )
+    }
+  ),
+  danger: /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: "fill-current",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M20.3499 12.0004C20.3499 16.612 16.6115 20.3504 11.9999 20.3504C7.38832 20.3504 3.6499 16.612 3.6499 12.0004C3.6499 7.38881 7.38833 3.65039 11.9999 3.65039C16.6115 3.65039 20.3499 7.38881 20.3499 12.0004ZM11.9999 22.1504C17.6056 22.1504 22.1499 17.6061 22.1499 12.0004C22.1499 6.3947 17.6056 1.85039 11.9999 1.85039C6.39421 1.85039 1.8499 6.3947 1.8499 12.0004C1.8499 17.6061 6.39421 22.1504 11.9999 22.1504ZM13.0008 16.4753C13.0008 15.923 12.5531 15.4753 12.0008 15.4753L11.9998 15.4753C11.4475 15.4753 10.9998 15.923 10.9998 16.4753C10.9998 17.0276 11.4475 17.4753 11.9998 17.4753L12.0008 17.4753C12.5531 17.4753 13.0008 17.0276 13.0008 16.4753ZM11.9998 6.62898C12.414 6.62898 12.7498 6.96476 12.7498 7.37898L12.7498 13.0555C12.7498 13.4697 12.414 13.8055 11.9998 13.8055C11.5856 13.8055 11.2498 13.4697 11.2498 13.0555L11.2498 7.37898C11.2498 6.96476 11.5856 6.62898 11.9998 6.62898Z"
+        }
+      )
+    }
+  ),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: "fill-current",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
+        }
+      )
+    }
+  ),
+  info: /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: "fill-current",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
+        }
+      )
+    }
+  )
+};
+var ToastCloseIcon = /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M6.04 16.54a.9.9 0 0 0 1.27 1.27L12 13.14l4.69 4.67a.9.9 0 1 0 1.27-1.27L13.27 11.87l4.69-4.68a.9.9 0 1 0-1.27-1.27L12 10.6 7.31 5.92a.9.9 0 0 0-1.27 1.27l4.69 4.68-4.69 4.67Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var variantStyles = {
+  success: {
+    iconWrap: "bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500",
+    bar: "bg-success-500"
+  },
+  danger: {
+    iconWrap: "bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500",
+    bar: "bg-error-500"
+  },
+  warning: {
+    iconWrap: "bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-orange-400",
+    bar: "bg-warning-500"
+  },
+  info: {
+    iconWrap: "bg-blue-light-50 text-blue-light-500 dark:bg-blue-light-500/15 dark:text-blue-light-500",
+    bar: "bg-blue-light-500"
+  }
+};
+var Toast = ({
+  variant = "success",
+  title,
+  message,
+  icon,
+  hideIcon = false,
+  showCloseButton = true,
+  onClose,
+  hideAccentBar = false,
+  className,
+  bgColor,
+  textColor,
+  borderColor,
+  style,
+  ...rest
+}) => {
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "alert",
+      className: chunkYERNSNT4_cjs.cn(
+        "relative flex items-center gap-3 overflow-hidden rounded-xl border border-gray-200 bg-white px-4 py-3.5 pr-10 shadow-theme-sm dark:border-gray-800 dark:bg-white/[0.03]",
+        className
+      ),
+      style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
+      ...rest,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: chunkYERNSNT4_cjs.cn(
+              "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg",
+              styles.iconWrap
+            ),
+            children: icon ?? toastIcons[variant]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-800 dark:text-white/90", children: title }),
+          message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-sm text-gray-500 dark:text-gray-400", children: message })
+        ] }),
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close",
+            onClick: onClose,
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 transition hover:text-gray-700 dark:hover:text-gray-200",
+            children: ToastCloseIcon
+          }
+        ),
+        !hideAccentBar && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: chunkYERNSNT4_cjs.cn("absolute inset-x-0 bottom-0 h-1", styles.bar),
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
 var AccordionContext = React5__default.default.createContext(null);
 var ChevronIcon2 = ({ open }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
@@ -2853,10 +3116,10 @@ exports.AvatarText = AvatarText;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.Code = Code;
-exports.DataTable = DataTable;
 exports.DatePicker = DatePicker;
 exports.DateTimePicker = DateTimePicker;
 exports.Drawer = Drawer;
@@ -2890,6 +3153,7 @@ exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.TextArea = TextArea;
 exports.ThemeToggleButton = ThemeToggleButton;
+exports.Toast = Toast;
 exports.Tooltip = Tooltip;
 exports.styleOverride = styleOverride;
 //# sourceMappingURL=index.cjs.map