tembro 1.0.0

package/dist/components/display/user-card.js

@@ -0,0 +1,42 @@
+import { cn as e } from "../../lib/utils.js";
+import { Card as t } from "../ui/card/index.js";
+import { Avatar as n } from "./avatar.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/display/user-card.tsx
+function a({ name: a, description: o, src: s, alt: c, meta: l, actions: u, className: d, ...f }) {
+	return /* @__PURE__ */ i(t, {
+		className: e("flex items-center gap-4 p-4", d),
+		...f,
+		children: [
+			/* @__PURE__ */ r(n, {
+				src: s,
+				alt: c,
+				name: typeof a == "string" ? a : void 0
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ r("p", {
+						className: "truncate font-medium text-foreground",
+						children: a
+					}),
+					o ? /* @__PURE__ */ r("p", {
+						className: "truncate text-sm text-muted-foreground",
+						children: o
+					}) : null,
+					l ? /* @__PURE__ */ r("div", {
+						className: "mt-2 text-xs text-muted-foreground",
+						children: l
+					}) : null
+				]
+			}),
+			u ? /* @__PURE__ */ r("div", {
+				className: "shrink-0",
+				children: u
+			}) : null
+		]
+	});
+}
+//#endregion
+export { a as UserCard };

package/dist/components/display/watermark.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({text:e=`Azamat UI`,className:n,children:i,...a}){return(0,r.jsxs)(`div`,{"data-slot":`watermark`,className:t.cn(`relative overflow-hidden`,n),...a,children:[(0,r.jsx)(`div`,{className:`pointer-events-none absolute inset-0 z-0 grid place-items-center opacity-10`,children:(0,r.jsx)(`span`,{className:`rotate-[-24deg] select-none text-4xl font-bold tracking-widest text-muted-foreground`,children:e})}),(0,r.jsx)(`div`,{className:`relative z-10`,children:i})]})}exports.Watermark=i;

package/dist/components/display/watermark.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export type WatermarkProps = React.ComponentProps<"div"> & {
+    text?: string;
+};
+declare function Watermark({ text, className, children, ...props }: WatermarkProps): React.JSX.Element;
+export { Watermark };

package/dist/components/display/watermark.js

@@ -0,0 +1,23 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/display/watermark.tsx
+function r({ text: r = "Azamat UI", className: i, children: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "watermark",
+		className: e("relative overflow-hidden", i),
+		...o,
+		children: [/* @__PURE__ */ t("div", {
+			className: "pointer-events-none absolute inset-0 z-0 grid place-items-center opacity-10",
+			children: /* @__PURE__ */ t("span", {
+				className: "rotate-[-24deg] select-none text-4xl font-bold tracking-widest text-muted-foreground",
+				children: r
+			})
+		}), /* @__PURE__ */ t("div", {
+			className: "relative z-10",
+			children: a
+		})]
+	});
+}
+//#endregion
+export { r as Watermark };

package/dist/components/feedback/alert.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={info:`border-primary/25 bg-primary/5 text-foreground`,success:`border-emerald-500/25 bg-emerald-500/10 text-foreground`,warning:`border-amber-500/30 bg-amber-500/10 text-foreground`,destructive:`border-destructive/30 bg-destructive/10 text-foreground`,muted:`border-border bg-muted/50 text-foreground`},o={info:`text-primary`,success:`text-emerald-600 dark:text-emerald-400`,warning:`text-amber-600 dark:text-amber-400`,destructive:`text-destructive`,muted:`text-muted-foreground`};function s(e){switch(e){case`success`:return(0,i.jsx)(r.CheckCircle2Icon,{className:`size-4`});case`warning`:return(0,i.jsx)(r.TriangleAlertIcon,{className:`size-4`});case`destructive`:return(0,i.jsx)(r.AlertCircleIcon,{className:`size-4`});default:return(0,i.jsx)(r.InfoIcon,{className:`size-4`})}}function c({tone:e=`info`,title:n,description:r,icon:c,action:l,className:u,children:d,...f}){return(0,i.jsxs)(`div`,{"data-slot":`alert`,role:e===`destructive`||e===`warning`?`alert`:`status`,className:t.cn(`flex gap-3 rounded-[var(--radius-2xl)] border p-4 text-sm shadow-[0_1px_0_rgba(255,255,255,0.05)]`,a[e],u),...f,children:[(0,i.jsx)(`div`,{"data-slot":`alert-icon`,className:t.cn(`mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-current/10 bg-background/55`,o[e]),children:c??s(e)}),(0,i.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[n&&(0,i.jsx)(`div`,{"data-slot":`alert-title`,className:`font-medium leading-none`,children:n}),(r||d)&&(0,i.jsx)(`div`,{"data-slot":`alert-description`,className:`text-muted-foreground`,children:r??d})]}),l&&(0,i.jsx)(`div`,{"data-slot":`alert-action`,className:`shrink-0`,children:l})]})}exports.Alert=c;

package/dist/components/feedback/alert.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type AlertTone = "info" | "success" | "warning" | "destructive" | "muted";
+export type AlertProps = React.ComponentProps<"div"> & {
+    tone?: AlertTone;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+};
+declare function Alert({ tone, title, description, icon, action, className, children, ...props }: AlertProps): React.JSX.Element;
+export { Alert };

package/dist/components/feedback/alert.js

@@ -0,0 +1,60 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { AlertCircleIcon as t, CheckCircle2Icon as n, InfoIcon as r, TriangleAlertIcon as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/feedback/alert.tsx
+var s = {
+	info: "border-primary/25 bg-primary/5 text-foreground",
+	success: "border-emerald-500/25 bg-emerald-500/10 text-foreground",
+	warning: "border-amber-500/30 bg-amber-500/10 text-foreground",
+	destructive: "border-destructive/30 bg-destructive/10 text-foreground",
+	muted: "border-border bg-muted/50 text-foreground"
+}, c = {
+	info: "text-primary",
+	success: "text-emerald-600 dark:text-emerald-400",
+	warning: "text-amber-600 dark:text-amber-400",
+	destructive: "text-destructive",
+	muted: "text-muted-foreground"
+};
+function l(e) {
+	switch (e) {
+		case "success": return /* @__PURE__ */ a(n, { className: "size-4" });
+		case "warning": return /* @__PURE__ */ a(i, { className: "size-4" });
+		case "destructive": return /* @__PURE__ */ a(t, { className: "size-4" });
+		default: return /* @__PURE__ */ a(r, { className: "size-4" });
+	}
+}
+function u({ tone: t = "info", title: n, description: r, icon: i, action: u, className: d, children: f, ...p }) {
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "alert",
+		role: t === "destructive" || t === "warning" ? "alert" : "status",
+		className: e("flex gap-3 rounded-[var(--radius-2xl)] border p-4 text-sm shadow-[0_1px_0_rgba(255,255,255,0.05)]", s[t], d),
+		...p,
+		children: [
+			/* @__PURE__ */ a("div", {
+				"data-slot": "alert-icon",
+				className: e("mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-current/10 bg-background/55", c[t]),
+				children: i ?? l(t)
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "min-w-0 flex-1 space-y-1",
+				children: [n && /* @__PURE__ */ a("div", {
+					"data-slot": "alert-title",
+					className: "font-medium leading-none",
+					children: n
+				}), (r || f) && /* @__PURE__ */ a("div", {
+					"data-slot": "alert-description",
+					className: "text-muted-foreground",
+					children: r ?? f
+				})]
+			}),
+			u && /* @__PURE__ */ a("div", {
+				"data-slot": "alert-action",
+				className: "shrink-0",
+				children: u
+			})
+		]
+	});
+}
+//#endregion
+export { u as Alert };

package/dist/components/feedback/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`alert`,`Alert`,`feedback`,`Inline feedback banner for success, warning, info, and error states.`),e.component(`page-state`,`PageState`,`feedback`,`Full-page completion or blocked state with next actions.`)]);exports.feedbackShowcaseDemoRegistry=t;

package/dist/components/feedback/demo.d.ts

@@ -0,0 +1,6 @@
+export declare const feedbackShowcaseDemoRegistry: {
+    [k: string]: {
+        mock: import("../../showcase").ShowcaseDemoMock;
+        Showcase: (props: import("../../showcase").ShowcaseDemoProps) => import("react").JSX.Element;
+    };
+};

package/dist/components/feedback/demo.js

@@ -0,0 +1,5 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/feedback/demo.tsx
+var n = t([e("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."), e("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions.")]);
+//#endregion
+export { n as feedbackShowcaseDemoRegistry };

package/dist/components/feedback/empty-search-state.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o({query:e,title:r=`No results found`,description:o,suggestions:s,onClear:c,clearLabel:l=`Clear search`,className:u,...d}){return(0,a.jsxs)(`div`,{"data-slot":`empty-search-state`,className:t.cn(`flex flex-col items-center justify-center p-8 text-center min-h-[300px]`,u),...d,children:[(0,a.jsx)(`div`,{className:`mb-4 flex size-12 items-center justify-center rounded-full bg-muted/50 text-muted-foreground`,children:(0,a.jsx)(i.SearchXIcon,{className:`size-6`})}),(0,a.jsxs)(`h3`,{className:`text-lg font-semibold tracking-tight`,children:[r,` `,e?`for "${e}"`:``]}),o&&(0,a.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground max-w-sm`,children:o}),s&&(0,a.jsx)(`div`,{className:`mt-4 text-sm text-muted-foreground`,children:s}),c&&(0,a.jsx)(`div`,{className:`mt-6`,children:(0,a.jsx)(n.Button,{variant:`outline`,onClick:c,children:l})})]})}exports.EmptySearchState=o;

package/dist/components/feedback/empty-search-state.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type EmptySearchStateProps = React.ComponentProps<"div"> & {
+    query?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    suggestions?: React.ReactNode;
+    onClear?: () => void;
+    clearLabel?: React.ReactNode;
+};
+declare function EmptySearchState({ query, title, description, suggestions, onClear, clearLabel, className, ...props }: EmptySearchStateProps): React.JSX.Element;
+export { EmptySearchState };

package/dist/components/feedback/empty-search-state.js

@@ -0,0 +1,45 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import "react";
+import { SearchXIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/feedback/empty-search-state.tsx
+function a({ query: a, title: o = "No results found", description: s, suggestions: c, onClear: l, clearLabel: u = "Clear search", className: d, ...f }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "empty-search-state",
+		className: e("flex flex-col items-center justify-center p-8 text-center min-h-[300px]", d),
+		...f,
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "mb-4 flex size-12 items-center justify-center rounded-full bg-muted/50 text-muted-foreground",
+				children: /* @__PURE__ */ r(n, { className: "size-6" })
+			}),
+			/* @__PURE__ */ i("h3", {
+				className: "text-lg font-semibold tracking-tight",
+				children: [
+					o,
+					" ",
+					a ? `for "${a}"` : ""
+				]
+			}),
+			s && /* @__PURE__ */ r("p", {
+				className: "mt-2 text-sm text-muted-foreground max-w-sm",
+				children: s
+			}),
+			c && /* @__PURE__ */ r("div", {
+				className: "mt-4 text-sm text-muted-foreground",
+				children: c
+			}),
+			l && /* @__PURE__ */ r("div", {
+				className: "mt-6",
+				children: /* @__PURE__ */ r(t, {
+					variant: "outline",
+					onClick: l,
+					children: u
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { a as EmptySearchState };

package/dist/components/feedback/empty-state.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o({className:e,icon:r,title:o=`No data`,description:s,action:c,actionLabel:l,onAction:u,...d}){return(0,a.jsxs)(`div`,{"data-slot":`empty-state`,className:t.cn(`flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-dashed border-border/80 bg-muted/25 p-10 text-center shadow-sm ring-1 ring-foreground/4`,e),...d,children:[(0,a.jsx)(`div`,{className:`flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)]`,children:r??(0,a.jsx)(i.InboxIcon,{className:`size-5`})}),(0,a.jsxs)(`div`,{className:`grid gap-1.5`,children:[o&&(0,a.jsx)(`h3`,{className:`text-base font-semibold tracking-tight text-foreground`,children:o}),s&&(0,a.jsx)(`p`,{className:`max-w-sm text-sm leading-6 text-muted-foreground`,children:s})]}),c??(l&&u?(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:u,children:l}):null)]})}exports.EmptyState=o;

package/dist/components/feedback/empty-state.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type EmptyStateProps = React.ComponentProps<"div"> & {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    actionLabel?: React.ReactNode;
+    onAction?: () => void;
+};
+declare function EmptyState({ className, icon, title, description, action, actionLabel, onAction, ...props }: EmptyStateProps): React.JSX.Element;
+export { EmptyState };

package/dist/components/feedback/empty-state.js

@@ -0,0 +1,38 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import "react";
+import { InboxIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/feedback/empty-state.tsx
+function a({ className: a, icon: o, title: s = "No data", description: c, action: l, actionLabel: u, onAction: d, ...f }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "empty-state",
+		className: e("flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-dashed border-border/80 bg-muted/25 p-10 text-center shadow-sm ring-1 ring-foreground/4", a),
+		...f,
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)]",
+				children: o ?? /* @__PURE__ */ r(n, { className: "size-5" })
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-1.5",
+				children: [s && /* @__PURE__ */ r("h3", {
+					className: "text-base font-semibold tracking-tight text-foreground",
+					children: s
+				}), c && /* @__PURE__ */ r("p", {
+					className: "max-w-sm text-sm leading-6 text-muted-foreground",
+					children: c
+				})]
+			}),
+			l ?? (u && d ? /* @__PURE__ */ r(t, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				onClick: d,
+				children: u
+			}) : null)
+		]
+	});
+}
+//#endregion
+export { a as EmptyState };

package/dist/components/feedback/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./alert.cjs"),t=require("./empty-state.cjs"),n=require("./loading-state.cjs"),r=require("./page-state.cjs"),i=require("./empty-search-state.cjs");exports.Alert=e.Alert,exports.EmptySearchState=i.EmptySearchState,exports.EmptyState=t.EmptyState,exports.InlineState=r.InlineState,exports.LoadingState=n.LoadingState,exports.PageState=r.PageState;

package/dist/components/feedback/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./alert";
+export * from "./empty-state";
+export * from "./loading-state";
+export * from "./page-state";
+export * from "./empty-search-state";

package/dist/components/feedback/index.js

@@ -0,0 +1,6 @@
+import { Alert as e } from "./alert.js";
+import { EmptyState as t } from "./empty-state.js";
+import { LoadingState as n } from "./loading-state.js";
+import { InlineState as r, PageState as i } from "./page-state.js";
+import { EmptySearchState as a } from "./empty-search-state.js";
+export { e as Alert, a as EmptySearchState, t as EmptyState, r as InlineState, n as LoadingState, i as PageState };

package/dist/components/feedback/loading-state.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a({className:e,label:n=`Loading...`,description:a,icon:o,...s}){return(0,i.jsxs)(`div`,{"data-slot":`loading-state`,className:t.cn(`flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-border/75 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm ring-1 ring-foreground/4`,e),...s,children:[(0,i.jsx)(`div`,{className:`flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]`,children:o??(0,i.jsx)(r.Loader2Icon,{className:`size-5 animate-spin`})}),(0,i.jsxs)(`div`,{className:`grid gap-1.5`,children:[n&&(0,i.jsx)(`div`,{className:`text-base font-semibold tracking-tight text-foreground`,children:n}),a&&(0,i.jsx)(`p`,{className:`max-w-sm text-sm leading-6`,children:a})]})]})}exports.LoadingState=a;

package/dist/components/feedback/loading-state.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export type LoadingStateProps = React.ComponentProps<"div"> & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+};
+declare function LoadingState({ className, label, description, icon, ...props }: LoadingStateProps): React.JSX.Element;
+export { LoadingState };

package/dist/components/feedback/loading-state.js

@@ -0,0 +1,27 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { Loader2Icon as t } from "lucide-react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/feedback/loading-state.tsx
+function i({ className: i, label: a = "Loading...", description: o, icon: s, ...c }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "loading-state",
+		className: e("flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-border/75 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm ring-1 ring-foreground/4", i),
+		...c,
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]",
+			children: s ?? /* @__PURE__ */ n(t, { className: "size-5 animate-spin" })
+		}), /* @__PURE__ */ r("div", {
+			className: "grid gap-1.5",
+			children: [a && /* @__PURE__ */ n("div", {
+				className: "text-base font-semibold tracking-tight text-foreground",
+				children: a
+			}), o && /* @__PURE__ */ n("p", {
+				className: "max-w-sm text-sm leading-6",
+				children: o
+			})]
+		})]
+	});
+}
+//#endregion
+export { i as LoadingState };

package/dist/components/feedback/page-state.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e){switch(e){case`loading`:return(0,a.jsx)(i.Loader2Icon,{className:`size-8 animate-spin`});case`error`:return(0,a.jsx)(i.AlertCircleIcon,{className:`size-8`});case`success`:return(0,a.jsx)(i.CheckCircle2Icon,{className:`size-8`});case`info`:return(0,a.jsx)(i.InfoIcon,{className:`size-8`});default:return(0,a.jsx)(i.SearchXIcon,{className:`size-8`})}}function s({tone:e=`empty`,title:n,description:r,icon:i,action:s,compact:c=!1,className:l,...u}){return(0,a.jsxs)(`div`,{"data-slot":`page-state`,role:e===`error`?`alert`:`status`,className:t.cn(`flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4`,c?`gap-2 p-6`:`min-h-72 gap-4 p-10`,l),...u,children:[(0,a.jsx)(`div`,{className:`flex size-14 items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]`,children:i??o(e)}),(0,a.jsxs)(`div`,{className:`grid gap-1`,children:[n&&(0,a.jsx)(`div`,{className:`text-base font-semibold tracking-tight text-foreground`,children:n}),r&&(0,a.jsx)(`div`,{className:`max-w-md text-sm leading-6 text-muted-foreground`,children:r})]}),s&&(0,a.jsx)(`div`,{children:s})]})}function c({retryLabel:e=`Retry`,onRetry:r,action:i,className:o,...c}){return(0,a.jsx)(s,{compact:!0,className:t.cn(`min-h-0`,o),action:i??(r?(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:r,children:e}):void 0),...c})}exports.InlineState=c,exports.PageState=s;

package/dist/components/feedback/page-state.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type PageStateTone = "empty" | "loading" | "error" | "success" | "info";
+export type PageStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+    tone?: PageStateTone;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    compact?: boolean;
+};
+declare function PageState({ tone, title, description, icon, action, compact, className, ...props }: PageStateProps): React.JSX.Element;
+export type InlineStateProps = Omit<PageStateProps, "compact"> & {
+    retryLabel?: React.ReactNode;
+    onRetry?: () => void;
+};
+declare function InlineState({ retryLabel, onRetry, action, className, ...props }: InlineStateProps): React.JSX.Element;
+export { InlineState, PageState };

package/dist/components/feedback/page-state.js

@@ -0,0 +1,56 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import "react";
+import { AlertCircleIcon as n, CheckCircle2Icon as r, InfoIcon as i, Loader2Icon as a, SearchXIcon as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/feedback/page-state.tsx
+function l(e) {
+	switch (e) {
+		case "loading": return /* @__PURE__ */ s(a, { className: "size-8 animate-spin" });
+		case "error": return /* @__PURE__ */ s(n, { className: "size-8" });
+		case "success": return /* @__PURE__ */ s(r, { className: "size-8" });
+		case "info": return /* @__PURE__ */ s(i, { className: "size-8" });
+		default: return /* @__PURE__ */ s(o, { className: "size-8" });
+	}
+}
+function u({ tone: t = "empty", title: n, description: r, icon: i, action: a, compact: o = !1, className: u, ...d }) {
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "page-state",
+		role: t === "error" ? "alert" : "status",
+		className: e("flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4", o ? "gap-2 p-6" : "min-h-72 gap-4 p-10", u),
+		...d,
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "flex size-14 items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]",
+				children: i ?? l(t)
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "grid gap-1",
+				children: [n && /* @__PURE__ */ s("div", {
+					className: "text-base font-semibold tracking-tight text-foreground",
+					children: n
+				}), r && /* @__PURE__ */ s("div", {
+					className: "max-w-md text-sm leading-6 text-muted-foreground",
+					children: r
+				})]
+			}),
+			a && /* @__PURE__ */ s("div", { children: a })
+		]
+	});
+}
+function d({ retryLabel: n = "Retry", onRetry: r, action: i, className: a, ...o }) {
+	return /* @__PURE__ */ s(u, {
+		compact: !0,
+		className: e("min-h-0", a),
+		action: i ?? (r ? /* @__PURE__ */ s(t, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			onClick: r,
+			children: n
+		}) : void 0),
+		...o
+	});
+}
+//#endregion
+export { d as InlineState, u as PageState };

package/dist/components/filters/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`filter-bar`,`FilterBar`,`actions`,`Search, filters, active-count and reset actions in one toolbar.`),e.component(`filter-chips`,`FilterChips`,`actions`,`Inline active filter summaries with clear and remove actions.`),e.component(`data-table-saved-filters`,`SavedFilterSelect`,`actions`,`Saved filter chips and quick view controls.`)]);exports.filtersShowcaseDemoRegistry=t;

package/dist/components/filters/demo.d.ts

@@ -0,0 +1,6 @@
+export declare const filtersShowcaseDemoRegistry: {
+    [k: string]: {
+        mock: import("../../showcase").ShowcaseDemoMock;
+        Showcase: (props: import("../../showcase").ShowcaseDemoProps) => import("react").JSX.Element;
+    };
+};

package/dist/components/filters/demo.js

@@ -0,0 +1,9 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/filters/demo.tsx
+var n = t([
+	e("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
+	e("filter-chips", "FilterChips", "actions", "Inline active filter summaries with clear and remove actions."),
+	e("data-table-saved-filters", "SavedFilterSelect", "actions", "Saved filter chips and quick view controls.")
+]);
+//#endregion
+export { n as filtersShowcaseDemoRegistry };

package/dist/components/filters/filter-bar.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o({className:e,search:o,filters:s,actions:c,activeCount:l=0,activeLabel:u=e=>`${e} active`,resetLabel:d=`Reset`,onReset:f,collapsible:p=!1,defaultExpanded:m=!1,children:h,...g}){let[_,v]=r.useState(m),y=!!(s||h),b=!p||_;return(0,a.jsxs)(`div`,{"data-slot":`filter-bar`,className:t.cn(`flex flex-col gap-3 rounded-lg border bg-card p-3`,e),...g,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center`,children:[o&&(0,a.jsx)(`div`,{className:`min-w-0 flex-1`,children:o}),p&&y&&(0,a.jsxs)(n.Button,{type:`button`,variant:_?`secondary`:`outline`,size:`sm`,onClick:()=>v(e=>!e),children:[(0,a.jsx)(i.SlidersHorizontalIcon,{"data-icon":`inline-start`}),`Filters`,l>0&&(0,a.jsx)(`span`,{className:`ml-1 rounded-full bg-background px-1.5 text-xs`,children:l})]})]}),(0,a.jsxs)(`div`,{className:`flex shrink-0 flex-wrap items-center gap-2`,children:[l>0&&(0,a.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:u(l)}),l>0&&f&&(0,a.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:f,children:[(0,a.jsx)(i.XIcon,{"data-icon":`inline-start`}),d]}),c]})]}),y&&b&&(0,a.jsxs)(`div`,{className:`flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center`,children:[s,h]})]})}exports.FilterBar=o;

package/dist/components/filters/filter-bar.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type FilterBarProps = React.ComponentProps<"div"> & {
+    search?: React.ReactNode;
+    filters?: React.ReactNode;
+    actions?: React.ReactNode;
+    activeCount?: number;
+    activeLabel?: (count: number) => React.ReactNode;
+    resetLabel?: React.ReactNode;
+    onReset?: () => void;
+    collapsible?: boolean;
+    defaultExpanded?: boolean;
+};
+declare function FilterBar({ className, search, filters, actions, activeCount, activeLabel, resetLabel, onReset, collapsible, defaultExpanded, children, ...props }: FilterBarProps): React.JSX.Element;
+export { FilterBar };

package/dist/components/filters/filter-bar.js

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import * as n from "react";
+import { SlidersHorizontalIcon as r, XIcon as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/filters/filter-bar.tsx
+function s({ className: s, search: c, filters: l, actions: u, activeCount: d = 0, activeLabel: f = (e) => `${e} active`, resetLabel: p = "Reset", onReset: m, collapsible: h = !1, defaultExpanded: g = !1, children: _, ...v }) {
+	let [y, b] = n.useState(g), x = !!(l || _), S = !h || y;
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "filter-bar",
+		className: e("flex flex-col gap-3 rounded-lg border bg-card p-3", s),
+		...v,
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between",
+			children: [/* @__PURE__ */ o("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center",
+				children: [c && /* @__PURE__ */ a("div", {
+					className: "min-w-0 flex-1",
+					children: c
+				}), h && x && /* @__PURE__ */ o(t, {
+					type: "button",
+					variant: y ? "secondary" : "outline",
+					size: "sm",
+					onClick: () => b((e) => !e),
+					children: [
+						/* @__PURE__ */ a(r, { "data-icon": "inline-start" }),
+						"Filters",
+						d > 0 && /* @__PURE__ */ a("span", {
+							className: "ml-1 rounded-full bg-background px-1.5 text-xs",
+							children: d
+						})
+					]
+				})]
+			}), /* @__PURE__ */ o("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-2",
+				children: [
+					d > 0 && /* @__PURE__ */ a("span", {
+						className: "text-sm text-muted-foreground",
+						children: f(d)
+					}),
+					d > 0 && m && /* @__PURE__ */ o(t, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						onClick: m,
+						children: [/* @__PURE__ */ a(i, { "data-icon": "inline-start" }), p]
+					}),
+					u
+				]
+			})]
+		}), x && S && /* @__PURE__ */ o("div", {
+			className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center",
+			children: [l, _]
+		})]
+	});
+}
+//#endregion
+export { s as FilterBar };

package/dist/components/filters/filter-chips.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/badge/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s={default:`secondary`,success:`secondary`,warning:`outline`,danger:`destructive`,info:`outline`,muted:`outline`};function c({chips:e,clearLabel:i=`Clear all`,empty:c=`No active filters`,onRemove:l,onClear:u,className:d,...f}){let p=e.filter(e=>!e.hidden);return p.length?(0,o.jsxs)(`div`,{"data-slot":`filter-chips`,className:t.cn(`flex flex-wrap items-center gap-2`,d),...f,children:[p.map(e=>(0,o.jsxs)(r.Badge,{variant:s[e.tone??`default`],className:t.cn(`gap-1.5`,e.disabled&&`opacity-60`),children:[(0,o.jsx)(`span`,{children:e.label}),e.value!==void 0&&(0,o.jsx)(`span`,{className:`text-muted-foreground`,children:e.value}),l&&!e.disabled&&(0,o.jsx)(`button`,{type:`button`,className:`rounded-full p-0.5 hover:bg-muted`,onClick:n=>{t.stopInteractivePropagation(n),l(e.key)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,o.jsx)(a.XIcon,{className:`size-3`})})]},e.key)),u&&(0,o.jsx)(n.Button,{type:`button`,variant:`ghost`,size:`xs`,onClick:e=>{t.stopInteractivePropagation(e),u()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:i})]}):(0,o.jsx)(`div`,{"data-slot":`filter-chips-empty`,className:t.cn(`text-sm text-muted-foreground`,d),...f,children:c})}exports.FilterChips=c;

package/dist/components/filters/filter-chips.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type FilterChip = {
+    key: string;
+    label: React.ReactNode;
+    value?: React.ReactNode;
+    tone?: "default" | "success" | "warning" | "danger" | "info" | "muted";
+    disabled?: boolean;
+    hidden?: boolean;
+};
+export type FilterChipsProps = React.ComponentProps<"div"> & {
+    chips: FilterChip[];
+    clearLabel?: React.ReactNode;
+    empty?: React.ReactNode;
+    onRemove?: (key: string) => void;
+    onClear?: () => void;
+};
+declare function FilterChips({ chips, clearLabel, empty, onRemove, onClear, className, ...props }: FilterChipsProps): React.JSX.Element;
+export { FilterChips };

package/dist/components/filters/filter-chips.js

@@ -0,0 +1,61 @@
+import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
+import { Button as n } from "../ui/button/index.js";
+import { Badge as r } from "../ui/badge/index.js";
+import "react";
+import { XIcon as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/filters/filter-chips.tsx
+var s = {
+	default: "secondary",
+	success: "secondary",
+	warning: "outline",
+	danger: "destructive",
+	info: "outline",
+	muted: "outline"
+};
+function c({ chips: c, clearLabel: l = "Clear all", empty: u = "No active filters", onRemove: d, onClear: f, className: p, ...m }) {
+	let h = c.filter((e) => !e.hidden);
+	return h.length ? /* @__PURE__ */ o("div", {
+		"data-slot": "filter-chips",
+		className: e("flex flex-wrap items-center gap-2", p),
+		...m,
+		children: [h.map((n) => /* @__PURE__ */ o(r, {
+			variant: s[n.tone ?? "default"],
+			className: e("gap-1.5", n.disabled && "opacity-60"),
+			children: [
+				/* @__PURE__ */ a("span", { children: n.label }),
+				n.value !== void 0 && /* @__PURE__ */ a("span", {
+					className: "text-muted-foreground",
+					children: n.value
+				}),
+				d && !n.disabled && /* @__PURE__ */ a("button", {
+					type: "button",
+					className: "rounded-full p-0.5 hover:bg-muted",
+					onClick: (e) => {
+						t(e), d(n.key);
+					},
+					onMouseDown: t,
+					onDoubleClick: t,
+					children: /* @__PURE__ */ a(i, { className: "size-3" })
+				})
+			]
+		}, n.key)), f && /* @__PURE__ */ a(n, {
+			type: "button",
+			variant: "ghost",
+			size: "xs",
+			onClick: (e) => {
+				t(e), f();
+			},
+			onMouseDown: t,
+			onDoubleClick: t,
+			children: l
+		})]
+	}) : /* @__PURE__ */ a("div", {
+		"data-slot": "filter-chips-empty",
+		className: e("text-sm text-muted-foreground", p),
+		...m,
+		children: u
+	});
+}
+//#endregion
+export { c as FilterChips };

package/dist/components/filters/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./filter-chips.cjs"),t=require("./filter-bar.cjs"),n=require("./saved-filter-select.cjs");exports.FilterBar=t.FilterBar,exports.FilterChips=e.FilterChips,exports.SavedFilterSelect=n.SavedFilterSelect;