tembro 2.0.4 → 2.0.6

package/dist/components/display/index.js

@@ -2,27 +2,24 @@ import { DescriptionList as e } from "./description-list.js";
 import { DataList as t, DataListRow as n } from "./data-list.js";
 import { ActivityFeed as r } from "./activity-feed.js";
 import { Avatar as i, AvatarGroup as a } from "./avatar.js";
-import { EntityHeader as o } from "./entity-header.js";
-import { Descriptions as s } from "./descriptions.js";
-import { KanbanBoard as c } from "./kanban.js";
-import { CodeBlock as l } from "./code-block.js";
-import { DataState as u } from "./data-state.js";
-import { EntityCard as d } from "./entity-card.js";
-import { FileCard as f } from "./file-card.js";
-import { List as p, ListRow as m } from "./list.js";
-import { MetricGrid as h } from "./metric-grid.js";
-import { Progress as g, ProgressCard as _, getProgressPercent as v } from "./progress.js";
-import { ProgressCircle as y } from "./progress-circle.js";
-import { PropertyGrid as b } from "./property-grid.js";
-import { Result as x, ResultAction as S } from "./result.js";
-import { Statistic as C, StatisticCard as w, StatisticGrid as T } from "./statistic.js";
-import { StatusDot as E } from "./status-dot.js";
-import { StatusLegend as D } from "./status-legend.js";
-import { Timeline as O } from "./timeline.js";
-import { TreeView as k } from "./tree-view.js";
-import { UserCard as A } from "./user-card.js";
-import { DeltaBadge as j } from "./delta-badge.js";
-import { TrendCard as M } from "./trend-card.js";
-import { ComparisonCard as N } from "./comparison-card.js";
-import { SmartCard as P } from "./smart-card.js";
-export { r as ActivityFeed, i as Avatar, a as AvatarGroup, l as CodeBlock, N as ComparisonCard, t as DataList, n as DataListRow, u as DataState, j as DeltaBadge, e as DescriptionList, s as Descriptions, d as EntityCard, o as EntityHeader, f as FileCard, P as InfoCard, c as KanbanBoard, p as List, m as ListRow, h as MetricGrid, g as Progress, _ as ProgressCard, y as ProgressCircle, b as PropertyGrid, x as Result, S as ResultAction, P as SmartCard, C as Statistic, w as StatisticCard, T as StatisticGrid, E as StatusDot, D as StatusLegend, O as Timeline, k as TreeView, M as TrendCard, A as UserCard, v as getProgressPercent };
+import { Descriptions as o } from "./descriptions.js";
+import { KanbanBoard as s } from "./kanban.js";
+import { CodeBlock as c } from "./code-block.js";
+import { DataState as l } from "./data-state.js";
+import { List as u, ListRow as d } from "./list.js";
+import { MetricGrid as f } from "./metric-grid.js";
+import { Progress as p, ProgressCard as m, getProgressPercent as h } from "./progress.js";
+import { ProgressCircle as g } from "./progress-circle.js";
+import { PropertyGrid as _ } from "./property-grid.js";
+import { Result as v, ResultAction as y } from "./result.js";
+import { Statistic as b, StatisticCard as x, StatisticGrid as S } from "./statistic.js";
+import { StatusDot as C } from "./status-dot.js";
+import { StatusLegend as w } from "./status-legend.js";
+import { Timeline as T } from "./timeline.js";
+import { TreeView as E } from "./tree-view.js";
+import { UserCard as D } from "./user-card.js";
+import { DeltaBadge as O } from "./delta-badge.js";
+import { TrendCard as k } from "./trend-card.js";
+import { ComparisonCard as A } from "./comparison-card.js";
+import { SmartCard as j } from "./smart-card.js";
+export { r as ActivityFeed, i as Avatar, a as AvatarGroup, c as CodeBlock, A as ComparisonCard, t as DataList, n as DataListRow, l as DataState, O as DeltaBadge, e as DescriptionList, o as Descriptions, j as InfoCard, s as KanbanBoard, u as List, d as ListRow, f as MetricGrid, p as Progress, m as ProgressCard, g as ProgressCircle, _ as PropertyGrid, v as Result, y as ResultAction, j as SmartCard, b as Statistic, x as StatisticCard, S as StatisticGrid, C as StatusDot, w as StatusLegend, T as Timeline, E as TreeView, k as TrendCard, D as UserCard, h as getProgressPercent };

package/dist/components/display/smart-card.d.ts

@@ -31,7 +31,7 @@ export type InfoCardRenderContext = {
     content?: React.ReactNode;
     footer?: React.ReactNode;
 };
-export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size"> & InfoCardRenderContext & {
+export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size" | "orientation"> & InfoCardRenderContext & {
     orientation?: InfoCardOrientation;
     variant?: InfoCardVariant;
     size?: InfoCardSize;

package/dist/components/display/status-legend.d.ts

@@ -12,7 +12,7 @@ export type StatusLegendItem = {
     hidden?: boolean;
     className?: string;
 };
-export type StatusLegendProps = React.ComponentProps<typeof Card> & {
+export type StatusLegendProps = Omit<React.ComponentProps<typeof Card>, "orientation"> & {
     title?: React.ReactNode;
     description?: React.ReactNode;
     actions?: React.ReactNode;

package/dist/components/feedback/alert.cjs

@@ -1 +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;
+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:{soft:`border-primary/25 bg-primary/5 text-foreground`,outline:`border-primary/35 bg-background text-foreground`,solid:`border-primary bg-primary text-primary-foreground`},success:{soft:`border-emerald-500/25 bg-emerald-500/10 text-foreground`,outline:`border-emerald-500/35 bg-background text-foreground`,solid:`border-emerald-600 bg-emerald-600 text-white`},warning:{soft:`border-amber-500/30 bg-amber-500/10 text-foreground`,outline:`border-amber-500/35 bg-background text-foreground`,solid:`border-amber-500 bg-amber-500 text-amber-950`},destructive:{soft:`border-destructive/30 bg-destructive/10 text-foreground`,outline:`border-destructive/35 bg-background text-foreground`,solid:`border-destructive bg-destructive text-destructive-foreground`},muted:{soft:`border-border bg-muted/50 text-foreground`,outline:`border-border bg-background text-foreground`,solid:`border-border bg-foreground text-background`}},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`,variant:n=`soft`,size:r=`md`,title:c,description:l,icon:u,action:d,dismissible:f=!1,dismissLabel:p=`Dismiss alert`,onDismiss:m,className:h,children:g,..._}){return(0,i.jsxs)(`div`,{"data-slot":`alert`,"data-size":r,role:e===`destructive`||e===`warning`?`alert`:`status`,className:t.cn(`flex gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border p-4 text-sm shadow-[var(--aui-card-shadow,var(--aui-control-shadow,0_1px_0_rgba(255,255,255,0.05)))] data-[size=sm]:p-3`,a[e][n],h),..._,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`,n===`solid`&&`bg-white/12 text-current`,o[e]),children:u??s(e)}),(0,i.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[c&&(0,i.jsx)(`div`,{"data-slot":`alert-title`,className:`font-medium leading-none`,children:c}),(l||g)&&(0,i.jsx)(`div`,{"data-slot":`alert-description`,className:t.cn(`text-muted-foreground`,n===`solid`&&`text-current/88`),children:l??g})]}),d||f?(0,i.jsxs)(`div`,{"data-slot":`alert-action`,className:`flex shrink-0 items-start gap-2`,children:[d,f?(0,i.jsx)(`button`,{type:`button`,"aria-label":p,className:t.cn(`inline-flex size-8 items-center justify-center rounded-full border border-current/10 bg-background/45 text-current transition-opacity hover:opacity-90`,n===`solid`&&`bg-white/12`),onClick:m,children:(0,i.jsx)(`span`,{"aria-hidden":`true`,children:`×`})}):null]}):null]})}exports.Alert=c;

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

@@ -2,10 +2,15 @@ import * as React from "react";
 export type AlertTone = "info" | "success" | "warning" | "destructive" | "muted";
 export type AlertProps = React.ComponentProps<"div"> & {
     tone?: AlertTone;
+    variant?: "soft" | "outline" | "solid";
+    size?: "sm" | "md";
     title?: React.ReactNode;
     description?: React.ReactNode;
     icon?: React.ReactNode;
     action?: React.ReactNode;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    onDismiss?: () => void;
 };
-declare function Alert({ tone, title, description, icon, action, className, children, ...props }: AlertProps): React.JSX.Element;
+declare function Alert({ tone, variant, size, title, description, icon, action, dismissible, dismissLabel, onDismiss, className, children, ...props }: AlertProps): React.JSX.Element;
 export { Alert };

package/dist/components/feedback/alert.js

@@ -4,11 +4,31 @@ import { AlertCircleIcon as t, CheckCircle2Icon as n, InfoIcon as r, TriangleAle
 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"
+	info: {
+		soft: "border-primary/25 bg-primary/5 text-foreground",
+		outline: "border-primary/35 bg-background text-foreground",
+		solid: "border-primary bg-primary text-primary-foreground"
+	},
+	success: {
+		soft: "border-emerald-500/25 bg-emerald-500/10 text-foreground",
+		outline: "border-emerald-500/35 bg-background text-foreground",
+		solid: "border-emerald-600 bg-emerald-600 text-white"
+	},
+	warning: {
+		soft: "border-amber-500/30 bg-amber-500/10 text-foreground",
+		outline: "border-amber-500/35 bg-background text-foreground",
+		solid: "border-amber-500 bg-amber-500 text-amber-950"
+	},
+	destructive: {
+		soft: "border-destructive/30 bg-destructive/10 text-foreground",
+		outline: "border-destructive/35 bg-background text-foreground",
+		solid: "border-destructive bg-destructive text-destructive-foreground"
+	},
+	muted: {
+		soft: "border-border bg-muted/50 text-foreground",
+		outline: "border-border bg-background text-foreground",
+		solid: "border-border bg-foreground text-background"
+	}
 }, c = {
 	info: "text-primary",
 	success: "text-emerald-600 dark:text-emerald-400",
@@ -24,35 +44,45 @@ function l(e) {
 		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 }) {
+function u({ tone: t = "info", variant: n = "soft", size: r = "md", title: i, description: u, icon: d, action: f, dismissible: p = !1, dismissLabel: m = "Dismiss alert", onDismiss: h, className: g, children: _, ...v }) {
 	return /* @__PURE__ */ o("div", {
 		"data-slot": "alert",
+		"data-size": r,
 		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,
+		className: e("flex gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border p-4 text-sm shadow-[var(--aui-card-shadow,var(--aui-control-shadow,0_1px_0_rgba(255,255,255,0.05)))] data-[size=sm]:p-3", s[t][n], g),
+		...v,
 		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)
+				className: e("mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-current/10 bg-background/55", n === "solid" && "bg-white/12 text-current", c[t]),
+				children: d ?? l(t)
 			}),
 			/* @__PURE__ */ o("div", {
 				className: "min-w-0 flex-1 space-y-1",
-				children: [n && /* @__PURE__ */ a("div", {
+				children: [i && /* @__PURE__ */ a("div", {
 					"data-slot": "alert-title",
 					className: "font-medium leading-none",
-					children: n
-				}), (r || f) && /* @__PURE__ */ a("div", {
+					children: i
+				}), (u || _) && /* @__PURE__ */ a("div", {
 					"data-slot": "alert-description",
-					className: "text-muted-foreground",
-					children: r ?? f
+					className: e("text-muted-foreground", n === "solid" && "text-current/88"),
+					children: u ?? _
 				})]
 			}),
-			u && /* @__PURE__ */ a("div", {
+			f || p ? /* @__PURE__ */ o("div", {
 				"data-slot": "alert-action",
-				className: "shrink-0",
-				children: u
-			})
+				className: "flex shrink-0 items-start gap-2",
+				children: [f, p ? /* @__PURE__ */ a("button", {
+					type: "button",
+					"aria-label": m,
+					className: e("inline-flex size-8 items-center justify-center rounded-full border border-current/10 bg-background/45 text-current transition-opacity hover:opacity-90", n === "solid" && "bg-white/12"),
+					onClick: h,
+					children: /* @__PURE__ */ a("span", {
+						"aria-hidden": "true",
+						children: "×"
+					})
+				}) : null]
+			}) : null
 		]
 	});
 }

package/dist/components/feedback/index.cjs

@@ -1 +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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./alert.cjs"),t=require("./loading-state.cjs"),n=require("./page-state.cjs");exports.Alert=e.Alert,exports.InlineState=n.InlineState,exports.LoadingState=t.LoadingState,exports.PageState=n.PageState;

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

@@ -1,5 +1,3 @@
 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

@@ -1,6 +1,4 @@
 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 };
+import { LoadingState as t } from "./loading-state.js";
+import { InlineState as n, PageState as r } from "./page-state.js";
+export { e as Alert, n as InlineState, t as LoadingState, r as PageState };

package/dist/components/filters/demo.cjs

@@ -1 +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;
+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(`data-table-saved-filters`,`SavedFilterSelect`,`actions`,`Saved filter chips and quick view controls.`)]);exports.filtersShowcaseDemoRegistry=t;

package/dist/components/filters/demo.js

@@ -1,9 +1,5 @@
 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.")
-]);
+var n = t([e("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."), 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

@@ -1 +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;
+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({className:e,search:c,filters:l,actions:u,chips:d,activeCount:f,activeLabel:p=e=>`${e} active`,resetLabel:m=`Reset`,clearChipLabel:h,onReset:g,onRemoveChip:_,collapsible:v=!1,defaultExpanded:y=!1,emptyChips:b,chipLimit:x,chipOverflowLabel:S=e=>`+${e} more`,children:C,...w}){let[T,E]=i.useState(y),D=d?.filter(e=>!e.hidden)??[],O=x&&x>0?D.slice(0,x):D,k=Math.max(D.length-O.length,0),A=f??D.length,j=!!(l||C),M=!!d,N=!v||T,P=D.length>0||M&&b;return(0,o.jsxs)(`div`,{"data-slot":`filter-bar`,className:t.cn(`flex flex-col gap-3 rounded-lg border bg-card p-3`,e),...w,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between`,children:[(0,o.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center`,children:[c&&(0,o.jsx)(`div`,{className:`min-w-0 flex-1`,children:c}),v&&j&&(0,o.jsxs)(n.Button,{type:`button`,variant:T?`secondary`:`outline`,size:`sm`,onClick:()=>E(e=>!e),children:[(0,o.jsx)(a.SlidersHorizontalIcon,{"data-icon":`inline-start`}),`Filters`,A>0&&(0,o.jsx)(`span`,{className:`ml-1 rounded-full bg-background px-1.5 text-xs`,children:A})]})]}),(0,o.jsxs)(`div`,{className:`flex shrink-0 flex-wrap items-center gap-2`,children:[A>0&&(0,o.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:p(A)}),A>0&&g&&(0,o.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:g,children:[(0,o.jsx)(a.XIcon,{"data-icon":`inline-start`}),m]}),u]})]}),j&&N&&(0,o.jsxs)(`div`,{className:`flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center`,children:[l,C]}),P&&(0,o.jsx)(`div`,{"data-slot":`filter-bar-chips`,className:`flex flex-wrap items-center gap-2`,children:D.length>0?(0,o.jsxs)(o.Fragment,{children:[O.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}),_&&!e.disabled&&(0,o.jsx)(`button`,{type:`button`,"aria-label":typeof h==`string`?h:`Remove filter`,className:`rounded-full p-0.5 hover:bg-muted`,onClick:n=>{t.stopInteractivePropagation(n),_(e.key)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,o.jsx)(a.XIcon,{className:`size-3`})})]},e.key)),k>0?(0,o.jsx)(r.Badge,{variant:`outline`,children:S(k)}):null]}):(0,o.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:b})})]})}exports.FilterBar=c;

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

@@ -1,14 +1,28 @@
 import * as React from "react";
+export type FilterBarChip = {
+    key: string;
+    label: React.ReactNode;
+    value?: React.ReactNode;
+    tone?: "default" | "success" | "warning" | "danger" | "info" | "muted";
+    disabled?: boolean;
+    hidden?: boolean;
+};
 export type FilterBarProps = React.ComponentProps<"div"> & {
     search?: React.ReactNode;
     filters?: React.ReactNode;
     actions?: React.ReactNode;
+    chips?: FilterBarChip[];
     activeCount?: number;
     activeLabel?: (count: number) => React.ReactNode;
     resetLabel?: React.ReactNode;
+    clearChipLabel?: React.ReactNode;
     onReset?: () => void;
+    onRemoveChip?: (key: string) => void;
     collapsible?: boolean;
     defaultExpanded?: boolean;
+    emptyChips?: React.ReactNode;
+    chipLimit?: number;
+    chipOverflowLabel?: (hiddenCount: number) => React.ReactNode;
 };
-declare function FilterBar({ className, search, filters, actions, activeCount, activeLabel, resetLabel, onReset, collapsible, defaultExpanded, children, ...props }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ className, search, filters, actions, chips, activeCount, activeLabel, resetLabel, clearChipLabel, onReset, onRemoveChip, collapsible, defaultExpanded, emptyChips, chipLimit, chipOverflowLabel, children, ...props }: FilterBarProps): React.JSX.Element;
 export { FilterBar };

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

@@ -1,58 +1,102 @@
-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";
+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 * as i from "react";
+import { SlidersHorizontalIcon as a, XIcon as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } 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", {
+var u = {
+	default: "secondary",
+	success: "secondary",
+	warning: "outline",
+	danger: "destructive",
+	info: "outline",
+	muted: "outline"
+};
+function d({ className: d, search: f, filters: p, actions: m, chips: h, activeCount: g, activeLabel: _ = (e) => `${e} active`, resetLabel: v = "Reset", clearChipLabel: y, onReset: b, onRemoveChip: x, collapsible: S = !1, defaultExpanded: C = !1, emptyChips: w, chipLimit: T, chipOverflowLabel: E = (e) => `+${e} more`, children: D, ...O }) {
+	let [k, A] = i.useState(C), j = h?.filter((e) => !e.hidden) ?? [], M = T && T > 0 ? j.slice(0, T) : j, N = Math.max(j.length - M.length, 0), P = g ?? j.length, F = !!(p || D), I = !!h, L = !S || k, R = j.length > 0 || I && w;
+	return /* @__PURE__ */ l("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),
+		className: e("flex flex-col gap-3 rounded-lg border bg-card p-3", d),
+		...O,
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center",
+					children: [f && /* @__PURE__ */ c("div", {
+						className: "min-w-0 flex-1",
+						children: f
+					}), S && F && /* @__PURE__ */ l(n, {
+						type: "button",
+						variant: k ? "secondary" : "outline",
+						size: "sm",
+						onClick: () => A((e) => !e),
+						children: [
+							/* @__PURE__ */ c(a, { "data-icon": "inline-start" }),
+							"Filters",
+							P > 0 && /* @__PURE__ */ c("span", {
+								className: "ml-1 rounded-full bg-background px-1.5 text-xs",
+								children: P
+							})
+						]
+					})]
+				}), /* @__PURE__ */ l("div", {
+					className: "flex shrink-0 flex-wrap items-center gap-2",
 					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
-						})
+						P > 0 && /* @__PURE__ */ c("span", {
+							className: "text-sm text-muted-foreground",
+							children: _(P)
+						}),
+						P > 0 && b && /* @__PURE__ */ l(n, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							onClick: b,
+							children: [/* @__PURE__ */ c(o, { "data-icon": "inline-start" }), v]
+						}),
+						m
 					]
 				})]
-			}), /* @__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, _]
-		})]
+			}),
+			F && L && /* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center",
+				children: [p, D]
+			}),
+			R && /* @__PURE__ */ c("div", {
+				"data-slot": "filter-bar-chips",
+				className: "flex flex-wrap items-center gap-2",
+				children: j.length > 0 ? /* @__PURE__ */ l(s, { children: [M.map((n) => /* @__PURE__ */ l(r, {
+					variant: u[n.tone ?? "default"],
+					className: e("gap-1.5", n.disabled && "opacity-60"),
+					children: [
+						/* @__PURE__ */ c("span", { children: n.label }),
+						n.value !== void 0 && /* @__PURE__ */ c("span", {
+							className: "text-muted-foreground",
+							children: n.value
+						}),
+						x && !n.disabled && /* @__PURE__ */ c("button", {
+							type: "button",
+							"aria-label": typeof y == "string" ? y : "Remove filter",
+							className: "rounded-full p-0.5 hover:bg-muted",
+							onClick: (e) => {
+								t(e), x(n.key);
+							},
+							onMouseDown: t,
+							onDoubleClick: t,
+							children: /* @__PURE__ */ c(o, { className: "size-3" })
+						})
+					]
+				}, n.key)), N > 0 ? /* @__PURE__ */ c(r, {
+					variant: "outline",
+					children: E(N)
+				}) : null] }) : /* @__PURE__ */ c("span", {
+					className: "text-sm text-muted-foreground",
+					children: w
+				})
+			})
+		]
 	});
 }
 //#endregion
-export { s as FilterBar };
+export { d as FilterBar };

package/dist/components/filters/index.cjs

@@ -1 +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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./filter-bar.cjs"),t=require("./saved-filter-select.cjs");exports.FilterBar=e.FilterBar,exports.SavedFilterSelect=t.SavedFilterSelect;

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

@@ -1,3 +1,2 @@
-export * from "./filter-chips";
 export * from "./filter-bar";
 export * from "./saved-filter-select";

package/dist/components/filters/index.js

@@ -1,4 +1,3 @@
-import { FilterChips as e } from "./filter-chips.js";
-import { FilterBar as t } from "./filter-bar.js";
-import { SavedFilterSelect as n } from "./saved-filter-select.js";
-export { t as FilterBar, e as FilterChips, n as SavedFilterSelect };
+import { FilterBar as e } from "./filter-bar.js";
+import { SavedFilterSelect as t } from "./saved-filter-select.js";
+export { e as FilterBar, t as SavedFilterSelect };

package/dist/components/form/form-field-shell.cjs

@@ -1 +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={vertical:`grid gap-2`,horizontal:`grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5`,inline:`flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4`};function o({className:e,label:n,description:o,error:s,required:c=!1,htmlFor:l,layout:u=`vertical`,descriptionPosition:d=`top`,labelAction:f,requiredIndicator:p=(0,i.jsx)(`span`,{className:`ml-1 text-destructive`,children:`*`}),errorIcon:m,showErrorIcon:h=!0,disabled:g=!1,readOnly:_=!1,labelClassName:v,labelRowClassName:y,descriptionClassName:b,errorClassName:x,contentClassName:S,children:C,...w}){let T=!!(n||f),E=o&&d===`top`,D=o&&d===`bottom`,O=m??(0,i.jsx)(r.AlertCircleIcon,{className:`size-3.5`}),k=T?(0,i.jsxs)(`div`,{"data-slot":`form-field-label-row`,className:t.cn(`flex min-w-0 items-center justify-between gap-3`,u===`inline`&&`sm:w-auto`,y),children:[n?(0,i.jsxs)(`label`,{"data-slot":`form-field-label`,htmlFor:l,className:t.cn(`min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground`,g&&`cursor-not-allowed opacity-60`,_&&`opacity-80`,v),children:[n,c&&p]}):(0,i.jsx)(`span`,{}),f&&(0,i.jsx)(`div`,{"data-slot":`form-field-label-action`,className:`shrink-0 text-sm`,children:f})]}):null,A=o?(0,i.jsx)(`p`,{"data-slot":`form-field-description`,className:t.cn(`text-sm leading-6 text-muted-foreground`,g&&`opacity-60`,b),children:o}):null,j=(0,i.jsx)(`div`,{"data-slot":`form-field-content`,className:t.cn(`min-w-0 space-y-2`,S),children:C}),M=s?(0,i.jsxs)(`p`,{"data-slot":`form-field-error`,className:t.cn(`flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive`,x),children:[h&&(0,i.jsx)(`span`,{className:`mt-1 shrink-0`,children:O}),(0,i.jsx)(`span`,{className:`min-w-0`,children:s})]}):null;return(0,i.jsx)(`div`,{"data-slot":`form-field-shell`,"data-layout":u,"data-invalid":!!s||void 0,"data-disabled":g||void 0,"data-readonly":_||void 0,"aria-disabled":g||void 0,className:t.cn(a[u],`rounded-[var(--radius-2xl)]`,e),...w,children:u===`horizontal`?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`div`,{className:`grid gap-2 sm:pt-2.5`,children:[k,E&&A]}),(0,i.jsxs)(`div`,{className:`grid min-w-0 gap-2`,children:[j,D&&A,M]})]}):u===`inline`?(0,i.jsxs)(i.Fragment,{children:[k,(0,i.jsxs)(`div`,{className:`grid min-w-0 flex-1 gap-2`,children:[E&&A,j,D&&A,M]})]}):(0,i.jsxs)(i.Fragment,{children:[k,E&&A,j,D&&A,M]})})}exports.FormFieldShell=o;
+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(e,t={}){let n=`${e}-label`,r=`${e}-description`,i=`${e}-error`;return{labelId:n,descriptionId:r,errorId:i,describedBy:[t.description?r:null,t.error?i:null].filter(Boolean).join(` `)||void 0}}var o={vertical:`grid gap-2`,horizontal:`grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5`,inline:`flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4`};function s({className:e,label:n,description:a,error:s,required:c=!1,htmlFor:l,labelId:u,descriptionId:d,errorId:f,layout:p=`vertical`,descriptionPosition:m=`top`,labelAction:h,requiredIndicator:g=(0,i.jsx)(`span`,{className:`ml-1 text-destructive`,children:`*`}),errorIcon:_,showErrorIcon:v=!0,disabled:y=!1,readOnly:b=!1,labelClassName:x,labelRowClassName:S,descriptionClassName:C,errorClassName:w,contentClassName:T,children:E,...D}){let O=!!(n||h),k=a&&m===`top`,A=a&&m===`bottom`,j=_??(0,i.jsx)(r.AlertCircleIcon,{className:`size-3.5`}),M=O?(0,i.jsxs)(`div`,{"data-slot":`form-field-label-row`,className:t.cn(`flex min-w-0 items-center justify-between gap-3`,p===`inline`&&`sm:w-auto`,S),children:[n?(0,i.jsxs)(`label`,{"data-slot":`form-field-label`,htmlFor:l,id:u,className:t.cn(`min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground`,y&&`cursor-not-allowed opacity-60`,b&&`opacity-80`,x),children:[n,c&&g]}):(0,i.jsx)(`span`,{}),h&&(0,i.jsx)(`div`,{"data-slot":`form-field-label-action`,className:`shrink-0 text-sm`,children:h})]}):null,N=a?(0,i.jsx)(`p`,{"data-slot":`form-field-description`,id:d,className:t.cn(`text-sm leading-6 text-muted-foreground`,y&&`opacity-60`,C),children:a}):null,P=(0,i.jsx)(`div`,{"data-slot":`form-field-content`,className:t.cn(`min-w-0 space-y-2`,T),children:E}),F=s?(0,i.jsxs)(`p`,{"data-slot":`form-field-error`,id:f,role:`alert`,"aria-live":`polite`,className:t.cn(`flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive`,w),children:[v&&(0,i.jsx)(`span`,{className:`mt-1 shrink-0`,children:j}),(0,i.jsx)(`span`,{className:`min-w-0`,children:s})]}):null;return(0,i.jsx)(`div`,{"data-slot":`form-field-shell`,"data-layout":p,"data-invalid":!!s||void 0,"data-disabled":y||void 0,"data-readonly":b||void 0,"aria-disabled":y||void 0,className:t.cn(o[p],`rounded-[var(--radius-2xl)]`,e),...D,children:p===`horizontal`?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`div`,{className:`grid gap-2 sm:pt-2.5`,children:[M,k&&N]}),(0,i.jsxs)(`div`,{className:`grid min-w-0 gap-2`,children:[P,A&&N,F]})]}):p===`inline`?(0,i.jsxs)(i.Fragment,{children:[M,(0,i.jsxs)(`div`,{className:`grid min-w-0 flex-1 gap-2`,children:[k&&N,P,A&&N,F]})]}):(0,i.jsxs)(i.Fragment,{children:[M,k&&N,P,A&&N,F]})})}exports.FormFieldShell=s,exports.resolveFormFieldIds=a;

package/dist/components/form/form-field-shell.d.ts

@@ -7,6 +7,9 @@ export type FormFieldShellProps = React.ComponentProps<"div"> & {
     error?: React.ReactNode;
     required?: boolean;
     htmlFor?: string;
+    labelId?: string;
+    descriptionId?: string;
+    errorId?: string;
     layout?: FormFieldLayout;
     descriptionPosition?: FormFieldDescriptionPosition;
     labelAction?: React.ReactNode;
@@ -21,6 +24,17 @@ export type FormFieldShellProps = React.ComponentProps<"div"> & {
     errorClassName?: string;
     contentClassName?: string;
 };
-export type FormFieldShellControlProps = Pick<FormFieldShellProps, "label" | "description" | "required" | "className" | "layout" | "descriptionPosition" | "labelAction" | "requiredIndicator" | "errorIcon" | "showErrorIcon" | "disabled" | "readOnly" | "labelClassName" | "labelRowClassName" | "descriptionClassName" | "errorClassName" | "contentClassName">;
-declare function FormFieldShell({ className, label, description, error, required, htmlFor, layout, descriptionPosition, labelAction, requiredIndicator, errorIcon, showErrorIcon, disabled, readOnly, labelClassName, labelRowClassName, descriptionClassName, errorClassName, contentClassName, children, ...props }: FormFieldShellProps): React.JSX.Element;
-export { FormFieldShell };
+export type FormFieldShellControlProps = Pick<FormFieldShellProps, "label" | "description" | "required" | "className" | "htmlFor" | "labelId" | "descriptionId" | "errorId" | "layout" | "descriptionPosition" | "labelAction" | "requiredIndicator" | "errorIcon" | "showErrorIcon" | "disabled" | "readOnly" | "labelClassName" | "labelRowClassName" | "descriptionClassName" | "errorClassName" | "contentClassName">;
+export type FormFieldMessageState = {
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+};
+export type FormFieldResolvedIds = {
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+    describedBy?: string;
+};
+declare function resolveFormFieldIds(id: string, state?: FormFieldMessageState): FormFieldResolvedIds;
+declare function FormFieldShell({ className, label, description, error, required, htmlFor, labelId, descriptionId, errorId, layout, descriptionPosition, labelAction, requiredIndicator, errorIcon, showErrorIcon, disabled, readOnly, labelClassName, labelRowClassName, descriptionClassName, errorClassName, contentClassName, children, ...props }: FormFieldShellProps): React.JSX.Element;
+export { FormFieldShell, resolveFormFieldIds };