@almanaclabs/blaze-ui 0.10.0 → 0.11.0

package/dist/components/app-shell/app-shell.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+type AppShellProps = React.ComponentProps<'div'> & {
+    /** The left column, usually an `AppSidebar`. It spans both rows. */
+    sidebar?: React.ReactNode;
+    /** The top row right of the sidebar, usually an `AppTopBar`. */
+    topBar?: React.ReactNode;
+    /** Classes for the white main panel. */
+    mainClassName?: string;
+};
+/**
+ * The application frame: a 188px sidebar column, a 56px top bar row, and the page in a white panel on the canvas.
+ * The panel is positioned, so a `ChatBar` or other floating element can sit inside it.
+ */
+declare function AppShell({ sidebar, topBar, mainClassName, className, children, ...props }: AppShellProps): React.JSX.Element;
+type AppTopBarProps = React.ComponentProps<'header'> & {
+    /** Content at the end of the bar, such as the account avatar. */
+    end?: React.ReactNode;
+};
+/** The header row right of the sidebar. `children` fill the start; `end` sits at the right. */
+declare function AppTopBar({ end, className, children, ...props }: AppTopBarProps): React.JSX.Element;
+type AppSidebarIcon = React.ComponentType<{
+    'aria-hidden'?: boolean | 'true' | 'false';
+    className?: string;
+}>;
+type AppSidebarItem = {
+    /** Unique within the sidebar; compared with `activeId`. */
+    id: string;
+    label: React.ReactNode;
+    icon?: AppSidebarIcon;
+    /** Something waiting for the owner. Shown as a count pill when above zero. */
+    count?: number;
+    /** Render the row as a link. */
+    href?: string;
+    onSelect?: () => void;
+};
+type AppSidebarSection = {
+    id: string;
+    /** The group label. Leave it out for an unlabelled group. */
+    label?: React.ReactNode;
+    items: readonly AppSidebarItem[];
+};
+type AppSidebarProps = Omit<React.ComponentProps<'aside'>, 'onSelect'> & {
+    /** The workspace switcher at the top, usually an `AppSidebarWorkspace`. */
+    workspace?: React.ReactNode;
+    /**
+     * The plain "New" row. It leads the first section when that section has no label, and otherwise sits in its own
+     * group. Its icon defaults to a plus.
+     */
+    newItem?: Omit<AppSidebarItem, 'icon' | 'count'> & {
+        icon?: AppSidebarIcon;
+    };
+    sections: readonly AppSidebarSection[];
+    /** The group pinned to the bottom, such as settings. */
+    bottomItems?: readonly AppSidebarItem[];
+    /** The id of the current page. */
+    activeId?: string;
+    /** Called with the item whenever a row is picked, after the item's own `onSelect`. */
+    onNavigate?: (item: AppSidebarItem) => void;
+    /** The navigation landmark's name. */
+    navLabel?: string;
+};
+/**
+ * The application's left navigation: a workspace switcher, a plain "New" row, labelled sections of destinations with
+ * optional counts, and a group pinned to the bottom. The current destination is the raised white row.
+ */
+declare function AppSidebar({ workspace, newItem, sections, bottomItems, activeId, onNavigate, navLabel, className, ...props }: AppSidebarProps): React.JSX.Element;
+type AppSidebarWorkspaceProps = {
+    /** The workspace or business name. */
+    name: string;
+    /** The workspace's logo, usually an `<img alt="">`. Shown at 32px. */
+    logo?: React.ReactNode;
+    /** The menu's items, such as `DropdownMenuItem`s for each workspace and "New workspace". */
+    children?: React.ReactNode;
+    /** The trigger's accessible name. Defaults to "Open workspace menu for <name>". */
+    triggerLabel?: string;
+    className?: string;
+};
+/** The workspace switcher at the top of `AppSidebar`: the logo and name, opening a menu. */
+declare function AppSidebarWorkspace({ name, logo, children, triggerLabel, className, }: AppSidebarWorkspaceProps): React.JSX.Element;
+export { AppShell, AppSidebar, AppSidebarWorkspace, AppTopBar, type AppShellProps, type AppSidebarIcon, type AppSidebarItem, type AppSidebarProps, type AppSidebarSection, type AppSidebarWorkspaceProps, type AppTopBarProps, };
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/components/app-shell/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"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"}

package/dist/components/app-shell/app-shell.js

@@ -0,0 +1,144 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuTrigger as i } from "../dropdown-menu/dropdown-menu.js";
+import { SidebarGroup as a, SidebarGroupContent as o, SidebarGroupLabel as s, SidebarMenu as c, SidebarMenuBadge as l, SidebarMenuButton as u, SidebarMenuItem as d, SidebarProvider as f } from "../sidebar/sidebar.js";
+import "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { IconChevronDown as h, IconPlus as g } from "@tabler/icons-react";
+//#region src/components/app-shell/app-shell.tsx
+function _({ sidebar: t, topBar: n, mainClassName: r, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ m("div", {
+		"data-slot": "app-shell",
+		className: e("grid min-h-screen grid-cols-[188px_minmax(0,1fr)] grid-rows-[56px_1fr] gap-x-2.5 bg-background px-4 pb-2.5 text-foreground", i),
+		...o,
+		children: [
+			t,
+			n ?? /* @__PURE__ */ p("div", { "data-slot": "app-shell-top-bar-placeholder" }),
+			/* @__PURE__ */ p("main", {
+				"data-slot": "app-shell-main",
+				className: e("relative min-w-0 rounded-2xl bg-card shadow-[0_1px_2px_rgb(0_0_0/0.04),0_6px_20px_rgb(0_0_0/0.07)]", r),
+				children: a
+			})
+		]
+	});
+}
+function v({ end: t, className: n, children: r, ...i }) {
+	return /* @__PURE__ */ m("header", {
+		"data-slot": "app-top-bar",
+		className: e("flex min-w-0 items-center gap-3", n),
+		...i,
+		children: [/* @__PURE__ */ p("div", {
+			"data-slot": "app-top-bar-start",
+			className: "flex min-w-0 flex-1",
+			children: r
+		}), t ? /* @__PURE__ */ p("div", {
+			"data-slot": "app-top-bar-end",
+			className: "flex flex-none items-center gap-2",
+			children: t
+		}) : null]
+	});
+}
+function y({ item: e, active: t, onNavigate: n }) {
+	let r = e.icon;
+	return /* @__PURE__ */ m(d, {
+		"data-slot": "app-sidebar-item",
+		children: [/* @__PURE__ */ m(u, {
+			variant: "raised",
+			isActive: t,
+			"aria-current": t ? "page" : void 0,
+			render: e.href ? /* @__PURE__ */ p("a", { href: e.href }) : void 0,
+			onClick: () => {
+				e.onSelect?.(), n?.(e);
+			},
+			children: [r ? /* @__PURE__ */ p(r, { "aria-hidden": "true" }) : null, /* @__PURE__ */ p("span", { children: e.label })]
+		}), e.count ? /* @__PURE__ */ p(l, {
+			className: "top-1.5 rounded-full bg-primary/10 font-semibold text-primary",
+			children: e.count
+		}) : null]
+	});
+}
+function b({ label: e, children: t }) {
+	return /* @__PURE__ */ m(a, {
+		className: "p-0",
+		children: [e ? /* @__PURE__ */ p(s, {
+			className: "px-2.5",
+			children: e
+		}) : null, /* @__PURE__ */ p(o, { children: /* @__PURE__ */ p(c, {
+			className: "gap-px",
+			children: t
+		}) })]
+	});
+}
+function x({ workspace: t, newItem: n, sections: r, bottomItems: i, activeId: a, onNavigate: o, navLabel: s = "Workspace", className: c, ...l }) {
+	let u = (e) => /* @__PURE__ */ p(y, {
+		item: e,
+		active: e.id === a,
+		onNavigate: o
+	}, e.id), d = n ? u({
+		...n,
+		icon: n.icon ?? g
+	}) : null, [h, ..._] = r, v = !!(d && h && !h.label);
+	return /* @__PURE__ */ p("aside", {
+		"data-slot": "app-sidebar",
+		className: e("sticky top-0 row-span-2 flex h-screen flex-col self-start overflow-y-auto pt-2.5 pb-3", c),
+		...l,
+		children: /* @__PURE__ */ m(f, {
+			className: "contents",
+			children: [
+				t,
+				/* @__PURE__ */ m("nav", {
+					"aria-label": s,
+					className: "flex flex-col gap-4",
+					children: [
+						d && !v ? /* @__PURE__ */ p(b, { children: d }) : null,
+						h ? /* @__PURE__ */ m(b, {
+							label: h.label,
+							children: [v ? d : null, h.items.map(u)]
+						}, h.id) : null,
+						_.map((e) => /* @__PURE__ */ p(b, {
+							label: e.label,
+							children: e.items.map(u)
+						}, e.id))
+					]
+				}),
+				i?.length ? /* @__PURE__ */ p("div", {
+					"data-slot": "app-sidebar-bottom",
+					className: "mt-auto pt-4",
+					children: /* @__PURE__ */ p(b, { children: i.map(u) })
+				}) : null
+			]
+		})
+	});
+}
+function S({ name: a, logo: o, children: s, triggerLabel: c, className: l }) {
+	return /* @__PURE__ */ m(n, { children: [/* @__PURE__ */ m(i, {
+		render: /* @__PURE__ */ p(t, {
+			type: "button",
+			variant: "tertiary",
+			size: "lg",
+			"data-slot": "app-sidebar-workspace",
+			"aria-label": c ?? `Open workspace menu for ${a}`,
+			className: e("mb-4 w-full justify-start gap-2.5 px-1.5", l)
+		}),
+		children: [
+			o ? /* @__PURE__ */ p("span", {
+				className: "flex size-8 flex-none items-center justify-center overflow-hidden rounded-md [&>img]:size-full [&>img]:object-cover",
+				children: o
+			}) : null,
+			/* @__PURE__ */ p("span", {
+				className: "type-label flex-1 truncate text-left font-medium",
+				children: a
+			}),
+			/* @__PURE__ */ p(h, {
+				"aria-hidden": "true",
+				className: "icon-optical-16 text-muted-foreground"
+			})
+		]
+	}), s ? /* @__PURE__ */ p(r, {
+		align: "start",
+		className: "min-w-56",
+		children: s
+	}) : null] });
+}
+//#endregion
+export { _ as AppShell, x as AppSidebar, S as AppSidebarWorkspace, v as AppTopBar };

package/dist/components/app-shell/index.d.ts

@@ -0,0 +1,2 @@
+export * from './app-shell';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/app-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app-shell/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/components/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "destructive" | "link" | "default" | "success" | "warning" | "info" | "outline" | "ghost" | "area-website" | "area-social" | "area-search" | "area-ads" | "area-calls" | "area-reviews" | null | undefined;
+    variant?: "secondary" | "destructive" | "link" | "default" | "outline" | "success" | "warning" | "info" | "ghost" | "area-website" | "area-social" | "area-search" | "area-ads" | "area-calls" | "area-reviews" | null | undefined;
     size?: "md" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/chat-bar/chat-bar.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const chatBarFormVariants: (props?: ({
+    size?: "default" | "compact" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ChatBarProps = Omit<React.ComponentProps<'div'>, 'onSubmit' | 'defaultValue'> & VariantProps<typeof chatBarFormVariants> & {
+    /** Called with the trimmed message when the owner sends it. Empty messages are not sent. */
+    onSend?: (text: string) => void;
+    placeholder?: string;
+    /** The input's accessible name. */
+    inputLabel?: string;
+    /** The send button's accessible name. */
+    sendLabel?: string;
+    defaultValue?: string;
+    /**
+     * Float the bar at the foot of the scrolling panel, over a fade to the card surface. Turn it off to place the bar
+     * yourself.
+     */
+    floating?: boolean;
+    /** Content under the bar, such as suggestion chips. */
+    children?: React.ReactNode;
+};
+/** The chat bar: a floating rounded input with a round send button. Enter sends. */
+declare function ChatBar({ onSend, placeholder, inputLabel, sendLabel, defaultValue, floating, size, className, children, ...props }: ChatBarProps): React.JSX.Element;
+export { ChatBar, chatBarFormVariants, type ChatBarProps };
+//# sourceMappingURL=chat-bar.d.ts.map

package/dist/components/chat-bar/chat-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-bar.d.ts","sourceRoot":"","sources":["../../../src/components/chat-bar/chat-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,mBAAmB;;8EAYxB,CAAA;AAcD,KAAK,YAAY,GAAG,IAAI,CACtB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,GAAG,cAAc,CAC5B,GACC,YAAY,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACzC,4FAA4F;IAC5F,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAEH,oFAAoF;AACpF,iBAAS,OAAO,CAAC,EACf,MAAM,EACN,WAAsD,EACtD,UAAsB,EACtB,SAAkB,EAClB,YAAiB,EACjB,QAAe,EACf,IAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,qBAqDd;AAED,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,KAAK,YAAY,EAAE,CAAA"}

package/dist/components/chat-bar/chat-bar.js

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import * as n from "react";
+import { cva as r } from "class-variance-authority";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { IconArrowUp as o } from "@tabler/icons-react";
+//#region src/components/chat-bar/chat-bar.tsx
+var s = r("pointer-events-auto mx-auto flex w-full items-center rounded-full border border-border bg-card", {
+	variants: { size: {
+		default: "min-h-[60px] max-w-[680px] gap-2.5 py-2 pr-2.5 pl-6 shadow-[0_10px_34px_-12px_rgb(0_0_0/.22),0_1px_3px_rgb(0_0_0/.06)]",
+		compact: "max-w-[560px] gap-2 py-1.5 pr-1.5 pl-5 shadow-sm"
+	} },
+	defaultVariants: { size: "default" }
+}), c = r("flex-none rounded-full", {
+	variants: { size: {
+		default: "size-10 [--icon-stroke-width:var(--icon-stroke-20)] [&_svg:not([class*=size-])]:size-5",
+		compact: "size-8 [--icon-stroke-width:var(--icon-stroke-16)] [&_svg:not([class*=size-])]:size-4"
+	} },
+	defaultVariants: { size: "default" }
+});
+function l({ onSend: r, placeholder: l = "Ask me anything, or tell me what to do", inputLabel: u = "Message", sendLabel: d = "Send", defaultValue: f = "", floating: p = !0, size: m = "default", className: h, children: g, ..._ }) {
+	let [v, y] = n.useState(f), b = m === "compact" ? "max-w-[560px]" : "max-w-[680px]";
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "chat-bar",
+		"data-size": m,
+		className: e(p && "pointer-events-none sticky bottom-0 z-10 rounded-b-2xl bg-linear-to-t from-card from-75% to-transparent px-6 pt-6 pb-6", h),
+		..._,
+		children: [/* @__PURE__ */ a("form", {
+			"data-slot": "chat-bar-form",
+			className: s({ size: m }),
+			onSubmit: (e) => {
+				e.preventDefault();
+				let t = v.trim();
+				t && (r?.(t), y(""));
+			},
+			children: [/* @__PURE__ */ i("input", {
+				"data-slot": "chat-bar-input",
+				"aria-label": u,
+				value: v,
+				onChange: (e) => y(e.target.value),
+				placeholder: l,
+				className: "type-body min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-foreground-tertiary"
+			}), /* @__PURE__ */ i(t, {
+				type: "submit",
+				"aria-label": d,
+				size: m === "compact" ? "icon-md" : "icon-lg",
+				className: c({ size: m }),
+				children: /* @__PURE__ */ i(o, { "aria-hidden": "true" })
+			})]
+		}), g ? /* @__PURE__ */ i("div", {
+			"data-slot": "chat-bar-footer",
+			className: e("pointer-events-auto mx-auto mt-3", b),
+			children: g
+		}) : null]
+	});
+}
+//#endregion
+export { l as ChatBar, s as chatBarFormVariants };

package/dist/components/chat-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './chat-bar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chat-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/components/dense-table/dense-table.d.ts

@@ -0,0 +1,36 @@
+import { TableRow } from '../table';
+import * as React from 'react';
+export interface DenseTableColumn {
+    /** The header text. An empty header still needs `srLabel` for screen readers. */
+    label: React.ReactNode;
+    /** Right-aligns the header to sit over numbers. */
+    numeric?: boolean;
+    /** Names a column whose header is visually empty. */
+    srLabel?: string;
+    className?: string;
+}
+export interface DenseTableProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    columns: readonly DenseTableColumn[];
+    /** The rows: `DenseTableRow`s of `DenseTableCell`s. */
+    children: React.ReactNode;
+    /** Names the table for assistive technology. */
+    'aria-label'?: string;
+}
+/**
+ * A data-heavy table on a white card: compact rows, small muted headers and
+ * right-aligned numbers, for scanning many figures at once.
+ */
+declare function DenseTable({ columns, children, className, 'aria-label': ariaLabel, ...props }: DenseTableProps): React.JSX.Element;
+declare const DenseTableRow: typeof TableRow;
+export interface DenseTableCellProps extends React.ComponentProps<'td'> {
+    /** Right-aligned tabular figures in medium weight. */
+    numeric?: boolean;
+    /** A muted line under a number, such as "vs 120 the week before". */
+    sub?: React.ReactNode;
+    /** Text that wraps instead of staying on one line. Defaults to true for text cells. */
+    wrap?: boolean;
+}
+/** A dense cell: wrapping text, or a right-aligned number with an optional muted line. */
+declare function DenseTableCell({ numeric, sub, wrap, className, children, ...props }: DenseTableCellProps): React.JSX.Element;
+export { DenseTable, DenseTableCell, DenseTableRow };
+//# sourceMappingURL=dense-table.d.ts.map

package/dist/components/dense-table/dense-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dense-table.d.ts","sourceRoot":"","sources":["../../../src/components/dense-table/dense-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAML,QAAQ,EACT,MAAM,oBAAoB,CAAA;AAG3B,MAAM,WAAW,gBAAgB;IAC/B,iFAAiF;IACjF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,CACX;IACC,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC,uDAAuD;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAClB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,eAAe,qBAmCjB;AAED,QAAA,MAAM,aAAa,iBAAW,CAAA;AAE9B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;IACrE,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qEAAqE;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,0FAA0F;AAC1F,iBAAS,cAAc,CAAC,EACtB,OAAe,EACf,GAAG,EACH,IAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAkBrB;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/dense-table/dense-table.js

@@ -0,0 +1,41 @@
+import { cn as e } from "../../lib/utils.js";
+import { Table as t, TableBody as n, TableCell as r, TableHead as i, TableHeader as a, TableRow as o } from "../table/table.js";
+import "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/dense-table/dense-table.tsx
+function l({ columns: r, children: l, className: u, "aria-label": d, ...f }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "dense-table",
+		className: e("overflow-x-auto rounded-xl border border-border bg-card px-2", u),
+		...f,
+		children: /* @__PURE__ */ c(t, {
+			density: "compact",
+			"aria-label": d,
+			children: [/* @__PURE__ */ s(a, { children: /* @__PURE__ */ s(o, { children: r.map((t, n) => /* @__PURE__ */ c(i, {
+				"data-numeric": t.numeric ? "" : void 0,
+				className: e("type-meta font-medium text-muted-foreground", t.numeric && "text-right", t.className),
+				children: [t.label, t.srLabel ? /* @__PURE__ */ s("span", {
+					className: "sr-only",
+					children: t.srLabel
+				}) : null]
+			}, n)) }) }), /* @__PURE__ */ s(n, { children: l })]
+		})
+	});
+}
+var u = o;
+function d({ numeric: t = !1, sub: n, wrap: i = !t, className: a, children: o, ...l }) {
+	return /* @__PURE__ */ c(r, {
+		"data-numeric": t ? "" : void 0,
+		className: e("type-body align-top", t && "text-right tabular-nums", i && "whitespace-normal", a),
+		...l,
+		children: [t ? /* @__PURE__ */ s("span", {
+			className: "font-medium",
+			children: o
+		}) : o, n ? /* @__PURE__ */ s("span", {
+			className: "type-meta block text-muted-foreground",
+			children: n
+		}) : null]
+	});
+}
+//#endregion
+export { l as DenseTable, d as DenseTableCell, u as DenseTableRow };

package/dist/components/dense-table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dense-table';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dense-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dense-table/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/components/editable-text/editable-text.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+type EditableTextProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
+    /** The saved text. */
+    value: string;
+    /** Called with the new text when the owner saves a change. */
+    onSave?: (text: string) => void;
+    /** A short confirmation shown under the text after a save. Pass an empty string to show nothing. */
+    note?: React.ReactNode;
+    /** Start in the text box, e.g. when a "Change" button mounts it. */
+    defaultEditing?: boolean;
+    /** Always show the pencil and underline the text, for a page's edit mode. */
+    pencil?: boolean;
+    /** The type role for the text and the text box. */
+    textClassName?: string;
+    /** The text box's accessible name. */
+    inputLabel?: string;
+    saveLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+};
+/**
+ * Text the owner can change in place. A click turns it into a text box with Save and Cancel; Enter saves (Shift+Enter
+ * adds a line) and Escape cancels.
+ */
+declare function EditableText({ value, onSave, note, defaultEditing, pencil, textClassName, inputLabel, saveLabel, cancelLabel, className, ...props }: EditableTextProps): React.JSX.Element;
+export { EditableText, type EditableTextProps };
+//# sourceMappingURL=editable-text.d.ts.map

package/dist/components/editable-text/editable-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../../../src/components/editable-text/editable-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,oGAAoG;IACpG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B,CAAA;AAED;;;GAGG;AACH,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,MAAM,EACN,IAAe,EACf,cAAsB,EACtB,MAAc,EACd,aAA2B,EAC3B,UAAwB,EACxB,SAAkB,EAClB,WAAsB,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAkJnB;AAED,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAA"}

package/dist/components/editable-text/editable-text.js

@@ -0,0 +1,82 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { IconPencil as o } from "@tabler/icons-react";
+//#region src/components/editable-text/editable-text.tsx
+function s({ value: s, onSave: c, note: l = "Saved.", defaultEditing: u = !1, pencil: d = !1, textClassName: f = "type-body", inputLabel: p = "Edit text", saveLabel: m = "Save", cancelLabel: h = "Cancel", className: g, ..._ }) {
+	let [v, y] = n.useState(s), [b, x] = n.useState(s), [S, C] = n.useState(u), [w, T] = n.useState(!1), [E, D] = n.useState(s), O = n.useRef(null), k = n.useRef(null), A = n.useRef(!1);
+	s !== E && (D(s), y(s), S || x(s)), n.useEffect(() => {
+		let e = O.current;
+		!S || !e || (e.focus(), e.setSelectionRange(e.value.length, e.value.length));
+	}, [S]), n.useEffect(() => {
+		let e = O.current;
+		e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
+	}, [b, S]), n.useEffect(() => {
+		!S && A.current && (A.current = !1, k.current?.focus());
+	}, [S]);
+	let j = () => {
+		A.current = !0, C(!1);
+	}, M = () => {
+		let e = b.trim();
+		e && e !== v && (y(e), T(!0), c?.(e)), j();
+	}, N = () => {
+		x(v), j();
+	};
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "editable-text",
+		"data-state": S ? "editing" : "idle",
+		className: g,
+		..._,
+		children: S ? /* @__PURE__ */ a("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ i("textarea", {
+				ref: O,
+				"data-slot": "editable-text-input",
+				"aria-label": p,
+				value: b,
+				rows: 1,
+				onChange: (e) => x(e.target.value),
+				onKeyDown: (e) => {
+					e.key === "Enter" && !e.shiftKey && (e.preventDefault(), M()), e.key === "Escape" && (e.preventDefault(), N());
+				},
+				className: e(f, "w-full resize-none overflow-hidden rounded-sm border border-border bg-card px-2.5 py-1.5 text-foreground outline-none focus:border-ring")
+			}), /* @__PURE__ */ a("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ i(t, {
+					size: "sm",
+					variant: "primary",
+					onClick: M,
+					children: m
+				}), /* @__PURE__ */ i(t, {
+					size: "sm",
+					variant: "tertiary",
+					onClick: N,
+					children: h
+				})]
+			})]
+		}) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("button", {
+			ref: k,
+			type: "button",
+			"data-slot": "editable-text-trigger",
+			onClick: () => {
+				x(v), C(!0), T(!1);
+			},
+			className: e(f, "group/editable -mx-1.5 flex w-[calc(100%+12px)] items-start gap-2 rounded-sm px-1.5 text-left text-foreground outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-border-subtle"),
+			children: [/* @__PURE__ */ i("span", {
+				className: e("flex-1 whitespace-pre-line", d && "underline decoration-foreground-tertiary/50 decoration-dotted underline-offset-4"),
+				children: v
+			}), /* @__PURE__ */ i(o, {
+				"aria-hidden": "true",
+				className: e("icon-optical-14 mt-1 shrink-0 text-muted-foreground", d ? "opacity-100" : "opacity-0 group-hover/editable:opacity-100 group-focus-visible/editable:opacity-100")
+			})]
+		}), w && l ? /* @__PURE__ */ i("p", {
+			"data-slot": "editable-text-note",
+			role: "status",
+			className: "type-meta mt-0.5 text-success",
+			children: l
+		}) : null] })
+	});
+}
+//#endregion
+export { s as EditableText };

package/dist/components/editable-text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './editable-text';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/editable-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/editable-text/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/components/face-stack-button/face-stack-button.d.ts

@@ -0,0 +1,31 @@
+import { ButtonProps } from '../button';
+import * as React from 'react';
+type FaceStackFace = {
+    /** Profile photo; without one the first letter of `name` shows. */
+    src?: string | null;
+    name: string;
+};
+type FaceStackButtonProps = Omit<ButtonProps, 'children' | 'size' | 'className'> & {
+    className?: string;
+    /** The people or accounts behind the destination. Only the first `max` are drawn. */
+    faces: readonly FaceStackFace[];
+    /** How many faces overlap at the start of the button. */
+    max?: number;
+    /** `md` for a row or section header (20px faces), `lg` beside a page title (26px faces). */
+    size?: 'md' | 'lg';
+    /** The destination's name, in the button's own weight. */
+    label?: React.ReactNode;
+    /** A count, in the quiet tone after the label. */
+    count?: React.ReactNode;
+    /** Words after the count, in the same quiet tone ("from accounts you watch"). */
+    detail?: React.ReactNode;
+    /** The trailing chevron that says the button opens somewhere. */
+    showChevron?: boolean;
+};
+/**
+ * A secondary button led by a stack of overlapping faces, then a label and a count.
+ * It opens the place those people live (a watch list, followers, a team) on click.
+ */
+declare function FaceStackButton({ faces, max, size, label, count, detail, showChevron, variant, className, ...props }: FaceStackButtonProps): React.JSX.Element;
+export { FaceStackButton, type FaceStackButtonProps, type FaceStackFace };
+//# sourceMappingURL=face-stack-button.d.ts.map

package/dist/components/face-stack-button/face-stack-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"face-stack-button.d.ts","sourceRoot":"","sources":["../../../src/components/face-stack-button/face-stack-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAGpD,KAAK,aAAa,GAAG;IACnB,mEAAmE;IACnE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,oBAAoB,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,MAAM,GAAG,WAAW,CAClC,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qFAAqF;IACrF,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;IAC/B,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,4FAA4F;IAC5F,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,iFAAiF;IACjF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,GAAO,EACP,IAAW,EACX,KAAK,EACL,KAAK,EACL,MAAM,EACN,WAAkB,EAClB,OAAqB,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAoDtB;AAED,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,aAAa,EAAE,CAAA"}

package/dist/components/face-stack-button/face-stack-button.js

@@ -0,0 +1,47 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { AvatarGroup as n } from "../avatar/avatar.js";
+import { PlatformAvatar as r } from "../platform-avatar/platform-avatar.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { IconChevronRight as s } from "@tabler/icons-react";
+//#region src/components/face-stack-button/face-stack-button.tsx
+function c({ faces: c, max: l = 4, size: u = "md", label: d, count: f, detail: p, showChevron: m = !0, variant: h = "secondary", className: g, ..._ }) {
+	let v = u === "lg" ? 26 : 20, y = [f, p].filter((e) => e != null && e !== "");
+	return /* @__PURE__ */ o(t, {
+		"data-face-stack": "",
+		size: u,
+		variant: h,
+		className: e("gap-2.5 pl-1.5", g),
+		..._,
+		children: [
+			/* @__PURE__ */ a(n, {
+				"aria-hidden": "true",
+				className: "-space-x-2 *:data-[slot=avatar]:ring-card",
+				children: c.slice(0, l).map((e, t) => /* @__PURE__ */ a(r, {
+					src: e.src,
+					name: e.name,
+					size: v
+				}, `${e.name}-${t}`))
+			}),
+			/* @__PURE__ */ o("span", {
+				"data-slot": "face-stack-button-text",
+				children: [
+					d,
+					d !== void 0 && y.length > 0 ? " " : null,
+					y.length > 0 ? /* @__PURE__ */ a("span", {
+						"data-slot": "face-stack-button-count",
+						className: "font-normal text-muted-foreground",
+						children: y.map((e, t) => /* @__PURE__ */ o(i.Fragment, { children: [t > 0 ? " " : null, e] }, t))
+					}) : null
+				]
+			}),
+			m ? /* @__PURE__ */ a(s, {
+				"aria-hidden": "true",
+				className: "size-4 text-muted-foreground"
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as FaceStackButton };