@humain/ui 2.1.62 → 2.1.65

package/dist/index193.js

@@ -1,546 +1,95 @@
 import { cn } from "./index2.js";
 import { Button } from "./index5.js";
-import { FeaturedIcon } from "./index104.js";
-import { FileTypeIcon } from "./index115.js";
-import { cva } from "class-variance-authority";
-import { Heart, Search } from "lucide-react";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/organisms/content/EmptyState/EmptyState.tsx
-var patternSizeClass = {
-	sm: "size-[336px]",
-	md: "size-[480px]",
-	lg: "size-[768px]"
-};
-var patternGridSize = {
-	sm: "24px 24px",
-	md: "32px 32px",
-	lg: "48px 48px"
-};
-var illustrationSizeClass = {
-	sm: {
-		cloud: "h-[118px] w-[152px]",
-		box: "h-[124px] w-[152px]",
-		documents: "h-[118px] w-[152px]",
-		"credit-card": "h-[118px] w-[152px]"
-	},
-	md: {
-		cloud: "h-32 w-[172px]",
-		box: "h-[136px] w-[172px]",
-		documents: "h-32 w-[172px]",
-		"credit-card": "h-[134px] w-[172px]"
-	},
-	lg: {
-		cloud: "h-40 w-[220px]",
-		box: "h-[168px] w-[220px]",
-		documents: "h-40 w-[220px]",
-		"credit-card": "h-40 w-[220px]"
-	}
-};
-var illustrationIconSizeClass = {
-	sm: "p-2",
-	md: "p-2.5",
-	lg: "p-2.5"
-};
-var iconGlyphSizeClass = {
-	sm: "size-4",
-	md: "size-4",
-	lg: "size-5"
-};
-var illustrationIconCenterClass = {
-	cloud: "top-[58%]",
-	box: "top-[58%]",
-	documents: "top-[60%]",
-	"credit-card": "top-[60%]"
-};
-var illustrationCircleSizeClass = {
-	sm: "size-[104px]",
-	md: "size-32",
-	lg: "size-40"
-};
-var fileIconWrapSizeClass = {
-	sm: "size-20",
-	md: "size-24",
-	lg: "size-28"
-};
-var textGapClass = {
-	sm: "gap-1",
-	md: "gap-2",
-	lg: "gap-2"
-};
-var mediaGapClass = {
-	sm: "gap-4",
-	md: "gap-5",
-	lg: "gap-5"
-};
-var contentGapClass = {
-	sm: "gap-6",
-	md: "gap-8",
-	lg: "gap-8"
-};
-var featuredIconSize = {
-	sm: "sm",
-	md: "md",
-	lg: "lg"
-};
-var fileIconSize = {
-	sm: "md",
-	md: "md",
-	lg: "md"
-};
-var headingTag = {
-	2: "h2",
-	3: "h3",
-	4: "h4"
-};
-function EmptyStateIconGlyph({ icon, size }) {
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "empty-state-icon-glyph",
-		"data-testid": "empty-state-icon-glyph",
-		"data-centered": "true",
-		"aria-hidden": "true",
-		className: cn("inline-flex shrink-0 items-center justify-center leading-none [line-height:0] [&>svg]:block [&>svg]:size-full [&>svg]:shrink-0", iconGlyphSizeClass[size]),
-		children: icon
-	});
-}
-var gridPatternStyle = (size, dot = false) => ({
-	backgroundImage: dot ? "radial-gradient(circle, color-mix(in oklch, var(--border) 70%, transparent) 1px, transparent 1px)" : ["linear-gradient(to right, color-mix(in oklch, var(--border) 54%, transparent) 1px, transparent 1px)", "linear-gradient(to bottom, color-mix(in oklch, var(--border) 54%, transparent) 1px, transparent 1px)"].join(", "),
-	backgroundSize: patternGridSize[size]
-});
-var squaresBySize = {
-	sm: [
-		96,
-		144,
-		192,
-		240,
-		288,
-		336
-	],
-	md: [
-		96,
-		160,
-		224,
-		288,
-		352,
-		416,
-		480
-	],
-	lg: [
-		96,
-		192,
-		288,
-		384,
-		480,
-		576,
-		672,
-		768
-	]
-};
-var EmptyStateBackgroundPattern = React.forwardRef(({ className, size = "sm", variant = "circles", style, ...props }, ref) => {
-	if (variant === "none") return null;
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		"data-slot": "empty-state-background-pattern",
-		"data-testid": "empty-state-pattern",
-		"data-size": size,
-		"data-variant": variant,
-		"aria-hidden": "true",
-		className: cn("pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden opacity-75", patternSizeClass[size], className),
-		style,
+import { Input } from "./index33.js";
+import { dataTableTouchTargetClassName } from "./index189.js";
+import { DropdownMenu } from "./index192.js";
+import { MoreVertical, Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/content/DataTable/DataTableToolbar.tsx
+function DataTableToolbarRoot({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-toolbar",
+		className: cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 gap-y-1 border-b border-border px-6 py-4", className),
 		...props,
-		children: [
-			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,var(--background)_0%,transparent_68%)]" }),
-			variant === "circles" && /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0",
-				children: Array.from({ length: 7 }, (_, index) => /* @__PURE__ */ jsx("span", {
-					className: "absolute left-1/2 top-1/2 rounded-full border border-border/60",
-					style: {
-						width: `${(index + 1) * 14}%`,
-						height: `${(index + 1) * 14}%`,
-						transform: "translate(-50%, -50%)"
-					}
-				}, index))
-			}),
-			(variant === "grid" || variant === "grid-dot") && /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0 opacity-70 [mask-image:radial-gradient(circle_at_center,black_0%,black_48%,transparent_76%)]",
-				style: gridPatternStyle(size, variant === "grid-dot")
-			}),
-			variant === "squares" && /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0",
-				children: squaresBySize[size].map((squareSize) => /* @__PURE__ */ jsx("span", {
-					className: "absolute left-1/2 top-1/2 rounded-xl border border-border/55",
-					style: {
-						width: squareSize,
-						height: squareSize,
-						transform: "translate(-50%, -50%) rotate(-12.5deg)"
-					}
-				}, squareSize))
-			})
-		]
+		children
 	});
-});
-EmptyStateBackgroundPattern.displayName = "EmptyStateBackgroundPattern";
-function DecorativeDots({ tone }) {
-	const dotClassName = tone === "primary" ? "bg-primary/70" : "bg-muted-foreground/10";
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("span", { className: cn("absolute left-[7%] top-[8%] size-2 rounded-full", dotClassName) }),
-		/* @__PURE__ */ jsx("span", { className: cn("absolute right-[6%] top-[18%] size-3 rounded-full", dotClassName) }),
-		/* @__PURE__ */ jsx("span", { className: cn("absolute bottom-[10%] left-[8%] size-3 rounded-full", dotClassName) }),
-		/* @__PURE__ */ jsx("span", { className: cn("absolute bottom-[18%] right-[13%] size-2 rounded-full", dotClassName) })
-	] });
 }
-function CloudShape({ accentId, shadeId, tone }) {
-	return /* @__PURE__ */ jsxs("g", {
-		className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
-		children: [/* @__PURE__ */ jsx("path", {
-			d: "M54 110c-21 0-38-14-38-32 0-16 14-30 33-32 8-19 27-31 49-31 27 0 50 19 55 43 17 3 30 16 30 32 0 19-18 34-40 34H55c-1 0-1-14-1-14Z",
-			fill: `url(#${shadeId})`
-		}), /* @__PURE__ */ jsx("path", {
-			d: "M68 106c-18 0-32-12-32-27 0-13 11-24 27-26 7-16 23-26 42-26 23 0 42 16 46 36 15 3 26 14 26 28 0 16-15 29-34 29H68v-14Z",
-			fill: `url(#${accentId})`,
-			opacity: tone === "primary" ? .78 : .36
-		})]
+DataTableToolbarRoot.displayName = "DataTableToolbar";
+function Title({ className, icon, children, ...props }) {
+	return /* @__PURE__ */ jsxs("h3", {
+		"data-slot": "data-table-toolbar",
+		className: cn("col-start-1 row-start-1 flex min-w-0 items-center gap-2 text-lg font-semibold text-foreground", className),
+		...props,
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary [&>svg]:size-5",
+			children: icon
+		}), children]
 	});
 }
-function BoxShape({ accentId, shadeId }) {
-	return /* @__PURE__ */ jsxs("g", {
-		className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				d: "M72 42 132 20l55 31-62 24-53-33Z",
-				fill: `url(#${accentId})`
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M72 42v72l53 34V75L72 42Z",
-				fill: `url(#${shadeId})`
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M125 75v73l62-35V51l-62 24Z",
-				fill: "var(--card)"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M132 20v33l24 14V34l-24-14Z",
-				fill: "currentColor",
-				opacity: "0.34"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M72 42 132 20l55 31-62 24-53-33Z",
-				fill: "none",
-				stroke: "var(--border)"
-			})
-		]
+Title.displayName = "DataTableToolbar.Title";
+function Description({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "data-table-toolbar",
+		className: cn("col-start-1 row-start-2 min-w-0 text-sm text-muted-foreground", className),
+		...props,
+		children
 	});
 }
-function DocumentsShape({ accentId, shadeId }) {
-	return /* @__PURE__ */ jsxs("g", {
-		className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
-		children: [
-			/* @__PURE__ */ jsxs("g", {
-				transform: "translate(44 48) rotate(-18)",
-				children: [/* @__PURE__ */ jsx("rect", {
-					width: "58",
-					height: "78",
-					rx: "7",
-					fill: `url(#${shadeId})`,
-					stroke: "var(--border)"
-				}), /* @__PURE__ */ jsx("path", {
-					d: "M15 21h28M15 35h21M15 49h28",
-					stroke: "currentColor",
-					strokeOpacity: "0.28"
-				})]
-			}),
-			/* @__PURE__ */ jsxs("g", {
-				transform: "translate(83 32)",
-				children: [/* @__PURE__ */ jsx("rect", {
-					width: "58",
-					height: "88",
-					rx: "7",
-					fill: "var(--card)",
-					stroke: "var(--border)"
-				}), /* @__PURE__ */ jsx("path", {
-					d: "M16 26h28M16 41h22M16 56h28",
-					stroke: "currentColor",
-					strokeOpacity: "0.32"
-				})]
-			}),
-			/* @__PURE__ */ jsxs("g", {
-				transform: "translate(121 47) rotate(18)",
-				children: [/* @__PURE__ */ jsx("rect", {
-					width: "58",
-					height: "78",
-					rx: "7",
-					fill: `url(#${accentId})`,
-					stroke: "var(--border)"
-				}), /* @__PURE__ */ jsx("path", {
-					d: "M15 21h28M15 35h21M15 49h28",
-					stroke: "currentColor",
-					strokeOpacity: "0.32"
-				})]
-			})
-		]
+Description.displayName = "DataTableToolbar.Description";
+function Actions({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-toolbar",
+		className: cn("col-start-2 row-span-2 row-start-1 ms-auto flex flex-wrap items-center justify-end gap-2", className),
+		...props,
+		children
 	});
 }
-function CreditCardShape({ accentId, shadeId }) {
-	return /* @__PURE__ */ jsxs("g", {
-		className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
-		children: [
-			/* @__PURE__ */ jsx("rect", {
-				x: "42",
-				y: "48",
-				width: "136",
-				height: "82",
-				rx: "12",
-				fill: `url(#${shadeId})`,
-				stroke: "var(--border)"
-			}),
-			/* @__PURE__ */ jsx("rect", {
-				x: "42",
-				y: "70",
-				width: "136",
-				height: "16",
-				fill: `url(#${accentId})`,
-				opacity: "0.72"
-			}),
-			/* @__PURE__ */ jsx("rect", {
-				x: "58",
-				y: "104",
-				width: "28",
-				height: "8",
-				rx: "2",
-				fill: "currentColor",
-				opacity: "0.28"
-			}),
-			/* @__PURE__ */ jsx("rect", {
-				x: "58",
-				y: "116",
-				width: "58",
-				height: "5",
-				rx: "2.5",
-				fill: "currentColor",
-				opacity: "0.18"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "146",
-				cy: "112",
-				r: "10",
-				fill: "currentColor",
-				opacity: "0.24"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "158",
-				cy: "112",
-				r: "10",
-				fill: "currentColor",
-				opacity: "0.38"
-			})
-		]
+Actions.displayName = "DataTableToolbar.Actions";
+function Kebab({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-toolbar",
+		className,
+		...props,
+		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+			appearance: "ghost",
+			size: "icon-sm",
+			"aria-label": "More options",
+			className: dataTableTouchTargetClassName,
+			children: /* @__PURE__ */ jsx(MoreVertical, {})
+		}) }), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Popup, { children }) })] })
 	});
 }
-var EmptyStateIllustration = React.forwardRef(({ className, size = "sm", variant = "cloud", tone = "primary", icon = /* @__PURE__ */ jsx(Heart, { "aria-hidden": "true" }), ...props }, ref) => {
-	const accentId = React.useId();
-	const shadeId = React.useId();
-	const isPrimary = tone === "primary";
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		"data-slot": "empty-state-illustration",
-		"data-testid": "empty-state-illustration",
-		"data-size": size,
-		"data-variant": variant,
-		"data-tone": tone,
-		"aria-hidden": "true",
-		className: cn("relative shrink-0 text-primary", !isPrimary && "text-muted-foreground", illustrationSizeClass[size][variant], className),
+Kebab.displayName = "DataTableToolbar.Kebab";
+function Filters({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-toolbar",
+		className: cn("col-span-full mt-3 flex w-full flex-wrap items-center gap-3", className),
 		...props,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				"data-slot": "empty-state-illustration-background",
-				"data-testid": "empty-state-illustration-background",
-				"data-centered": "true",
-				className: cn("absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full", isPrimary ? "bg-primary/20" : "bg-muted/80", illustrationCircleSizeClass[size], illustrationIconCenterClass[variant])
-			}),
-			/* @__PURE__ */ jsx(DecorativeDots, { tone }),
-			/* @__PURE__ */ jsxs("svg", {
-				viewBox: "0 0 220 168",
-				className: "absolute inset-0 size-full overflow-visible",
-				fill: "none",
-				"aria-hidden": "true",
-				children: [
-					/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
-						id: accentId,
-						x1: "25",
-						y1: "12",
-						x2: "190",
-						y2: "148",
-						children: [/* @__PURE__ */ jsx("stop", {
-							stopColor: isPrimary ? "var(--primary)" : "var(--muted)",
-							stopOpacity: isPrimary ? .34 : .74
-						}), /* @__PURE__ */ jsx("stop", {
-							stopColor: "var(--card)",
-							stopOpacity: .95
-						})]
-					}), /* @__PURE__ */ jsxs("linearGradient", {
-						id: shadeId,
-						x1: "54",
-						y1: "18",
-						x2: "165",
-						y2: "140",
-						children: [/* @__PURE__ */ jsx("stop", { stopColor: "var(--card)" }), /* @__PURE__ */ jsx("stop", {
-							stopColor: isPrimary ? "var(--primary)" : "var(--muted-foreground)",
-							stopOpacity: isPrimary ? .18 : .14
-						})]
-					})] }),
-					variant === "cloud" && /* @__PURE__ */ jsx(CloudShape, {
-						accentId,
-						shadeId,
-						tone
-					}),
-					variant === "box" && /* @__PURE__ */ jsx(BoxShape, {
-						accentId,
-						shadeId
-					}),
-					variant === "documents" && /* @__PURE__ */ jsx(DocumentsShape, {
-						accentId,
-						shadeId
-					}),
-					variant === "credit-card" && /* @__PURE__ */ jsx(CreditCardShape, {
-						accentId,
-						shadeId
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				"data-slot": "empty-state-illustration-icon",
-				"data-testid": "empty-state-illustration-icon",
-				"data-centered": "true",
-				className: cn("absolute left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-xs backdrop-blur-md supports-backdrop-filter:backdrop-blur-md [&>svg]:shrink-0", !isPrimary && "bg-muted text-muted-foreground", illustrationIconSizeClass[size], illustrationIconCenterClass[variant]),
-				children: /* @__PURE__ */ jsx(EmptyStateIconGlyph, {
-					icon,
-					size
-				})
-			})
-		]
+		children
 	});
-});
-EmptyStateIllustration.displayName = "EmptyStateIllustration";
-var emptyStateVariants = cva("relative isolate mx-auto flex w-full max-w-[512px] items-center justify-center overflow-visible py-8 text-center", {
-	variants: { size: {
-		sm: "min-h-[212px]",
-		md: "min-h-[280px]",
-		lg: "min-h-[360px]"
-	} },
-	defaultVariants: { size: "sm" }
-});
-function resolvePattern(pattern, media) {
-	if (!pattern || pattern === "auto") {
-		if (media === "illustration") return "grid";
-		if (media === "none") return "none";
-		return "circles";
-	}
-	return pattern;
 }
-function renderEmptyStateAction(action, intent) {
-	const { label, onClick, startIcon, disabled, loading, "aria-label": ariaLabel } = action;
-	return /* @__PURE__ */ jsx(Button, {
-		appearance: intent === "primary" ? "solid" : "outline",
-		variant: intent === "primary" ? "primary" : "secondary",
+Filters.displayName = "DataTableToolbar.Filters";
+function SearchInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "data-table-toolbar",
 		size: "sm",
-		shape: "rounded",
-		onClick,
-		disabled,
-		loading,
-		startIcon,
-		"aria-label": ariaLabel,
-		type: "button",
-		children: label
+		startIcon: /* @__PURE__ */ jsx(Search, {}),
+		className: cn("w-56", className),
+		placeholder: "Search...",
+		"aria-label": "Search",
+		...props
 	});
 }
-var EmptyState = React.forwardRef(({ className, title, description, size = "sm", media = "featured-icon", pattern = "auto", icon, iconLabel, illustrationVariant = "cloud", illustrationTone = "gray", fileExtension, fileType = "document", primaryAction, secondaryAction, actions, headingLevel = 3, ...props }, ref) => {
-	const Heading = headingTag[headingLevel];
-	const resolvedPattern = resolvePattern(pattern, media);
-	const defaultIcon = icon ?? /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" });
-	const hasActions = actions || primaryAction || secondaryAction;
-	return /* @__PURE__ */ jsx("section", {
-		ref,
-		"data-slot": "empty-state",
-		"aria-label": typeof title === "string" ? title : "Empty state",
-		className: cn(emptyStateVariants({ size }), className),
-		...props,
-		children: /* @__PURE__ */ jsxs("div", {
-			"data-slot": "empty-state-content",
-			className: cn("relative z-10 flex min-w-0 flex-1 flex-col items-center", contentGapClass[size]),
-			children: [/* @__PURE__ */ jsxs("div", {
-				"data-slot": "empty-state-body",
-				className: cn("flex w-full flex-col items-center", mediaGapClass[size]),
-				children: [media !== "none" && /* @__PURE__ */ jsxs("div", {
-					"data-slot": "empty-state-media",
-					"data-testid": "empty-state-media",
-					"data-media": media,
-					"data-centered": "true",
-					className: "relative flex w-full min-w-0 justify-center",
-					children: [
-						/* @__PURE__ */ jsx(EmptyStateBackgroundPattern, {
-							size,
-							variant: resolvedPattern,
-							"data-centered": "true",
-							className: "z-0"
-						}),
-						media === "featured-icon" && /* @__PURE__ */ jsx(FeaturedIcon, {
-							"data-slot": "empty-state-featured-icon",
-							size: featuredIconSize[size],
-							shape: "rounded",
-							intent: "default",
-							icon: /* @__PURE__ */ jsx(EmptyStateIconGlyph, {
-								icon: defaultIcon,
-								size
-							}),
-							"aria-label": iconLabel,
-							className: "relative z-10 delight-stagger motion-reduce:animate-none"
-						}),
-						media === "illustration" && /* @__PURE__ */ jsx(EmptyStateIllustration, {
-							size,
-							variant: illustrationVariant,
-							tone: illustrationTone,
-							icon: defaultIcon,
-							className: "relative z-10 delight-stagger motion-reduce:animate-none"
-						}),
-						media === "file-type-icon" && /* @__PURE__ */ jsx("div", {
-							"data-slot": "empty-state-file-icon-wrap",
-							"data-testid": "empty-state-file-icon-wrap",
-							"data-centered": "true",
-							className: cn("relative z-10 flex items-center justify-center rounded-full bg-linear-[104deg,color-mix(in_oklch,var(--card)_60%,transparent),color-mix(in_oklch,var(--muted)_55%,transparent)] delight-stagger motion-reduce:animate-none", fileIconWrapSizeClass[size]),
-							children: /* @__PURE__ */ jsx("div", {
-								"data-slot": "empty-state-file-icon-optical-center",
-								"data-testid": "empty-state-file-icon-optical-center",
-								"data-centered": "true",
-								children: /* @__PURE__ */ jsx(FileTypeIcon, {
-									extension: fileExtension,
-									fileType: fileExtension ? void 0 : fileType,
-									size: fileIconSize[size],
-									className: "drop-shadow-[0_1px_2px_var(--shadow-xs-1-color)]"
-								})
-							})
-						})
-					]
-				}), /* @__PURE__ */ jsxs("div", {
-					"data-slot": "empty-state-text",
-					className: cn("flex w-full max-w-[352px] flex-col items-center text-center", textGapClass[size]),
-					children: [/* @__PURE__ */ jsx(Heading, {
-						className: "w-full text-base font-semibold leading-6 text-foreground",
-						children: title
-					}), description && /* @__PURE__ */ jsx("p", {
-						className: "w-full text-sm leading-5 text-secondary-foreground",
-						children: description
-					})]
-				})]
-			}), hasActions && /* @__PURE__ */ jsx("div", {
-				"data-slot": "empty-state-actions",
-				className: "flex flex-wrap items-center justify-center gap-3",
-				children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [secondaryAction && renderEmptyStateAction(secondaryAction, "secondary"), primaryAction && renderEmptyStateAction(primaryAction, "primary")] })
-			})]
-		})
-	});
+SearchInput.displayName = "DataTableToolbar.Search";
+var DataTableToolbar = Object.assign(DataTableToolbarRoot, {
+	Title,
+	Description,
+	Actions,
+	Kebab,
+	Filters,
+	Search: SearchInput
 });
-EmptyState.displayName = "EmptyState";
 //#endregion
-export { EmptyState, EmptyStateBackgroundPattern, EmptyStateIllustration };
+export { DataTableToolbar };
 
 //# sourceMappingURL=index193.js.map