@dowel-ui/react 0.5.0 → 0.8.0

package/dist/blocks/testimonial-spotlight/meta.js

@@ -0,0 +1,22 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/blocks/testimonial-spotlight/meta.ts
+const meta = defineMeta({
+	name: "testimonial-spotlight",
+	kind: "block",
+	title: "Testimonial Spotlight",
+	description: "A heading beside one testimonial at a time, stepped through with previous and next.",
+	category: "layout",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [
+		"avatar",
+		"reviews-carousel",
+		"text-effect"
+	],
+	files: ["testimonial-spotlight.tsx"],
+	a11y: "A section named by its heading, containing the reviews carousel: a named carousel whose testimonials are labelled slides, only the front one exposed, with named previous/next buttons and arrow keys (mirrored in RTL). The quote's word-by-word blur-in is decorative — an sr-only copy reads it as one sentence — and settles at once under reduced motion. Avatars are hidden, since the name is beside them."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/blocks/testimonial-spotlight/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/blocks/testimonial-spotlight/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"testimonial-spotlight\",\n  kind: \"block\",\n  title: \"Testimonial Spotlight\",\n  description:\n    \"A heading beside one testimonial at a time, stepped through with previous and next.\",\n  category: \"layout\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [\"avatar\", \"reviews-carousel\", \"text-effect\"],\n  files: [\"testimonial-spotlight.tsx\"],\n  a11y:\n    \"A section named by its heading, containing the reviews carousel: a named carousel whose \" +\n    \"testimonials are labelled slides, only the front one exposed, with named previous/next \" +\n    \"buttons and arrow keys (mirrored in RTL). The quote's word-by-word blur-in is decorative — an \" +\n    \"sr-only copy reads it as one sentence — and settles at once under reduced motion. Avatars are \" +\n    \"hidden, since the name is beside them.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB;EAAC;EAAU;EAAoB;CAAa;CAClE,OAAO,CAAC,2BAA2B;CACnC,MACE;AAKJ,CAAC"}

package/dist/blocks/testimonial-star-grid/meta.js

@@ -0,0 +1,18 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/blocks/testimonial-star-grid/meta.ts
+const meta = defineMeta({
+	name: "testimonial-star-grid",
+	kind: "block",
+	title: "Testimonial Star Grid",
+	description: "Reviews in a grid, each with a star rating, the quotation and its author.",
+	category: "layout",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: ["avatar"],
+	files: ["testimonial-star-grid.tsx"],
+	a11y: "A section named by its heading, with the reviews as a list of figures: a blockquote and a figcaption naming its author. A rating is one image named in words (\"Rated 4 out of 5\") rather than five unlabelled stars, and colour is not the only difference between filled and empty stars. Avatars are hidden, since the name is beside them. The cascade collapses to nothing under reduced motion, and the hover lift only happens when motion is allowed."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/blocks/testimonial-star-grid/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/blocks/testimonial-star-grid/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"testimonial-star-grid\",\n  kind: \"block\",\n  title: \"Testimonial Star Grid\",\n  description: \"Reviews in a grid, each with a star rating, the quotation and its author.\",\n  category: \"layout\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [\"avatar\"],\n  files: [\"testimonial-star-grid.tsx\"],\n  a11y:\n    \"A section named by its heading, with the reviews as a list of figures: a blockquote and a \" +\n    'figcaption naming its author. A rating is one image named in words (\"Rated 4 out of 5\") ' +\n    \"rather than five unlabelled stars, and colour is not the only difference between filled and \" +\n    \"empty stars. Avatars are hidden, since the name is beside them. The cascade collapses to \" +\n    \"nothing under reduced motion, and the hover lift only happens when motion is allowed.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,2BAA2B;CACnC,MACE;AAKJ,CAAC"}

package/dist/components/accordion/accordion.js

@@ -23,7 +23,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium", "transition-colors duration-[var(--duration-fast)] hover:text-primary", "disabled:pointer-events-none disabled:opacity-55", "[&[data-state=open]>svg]:rotate-180", focusRing, className),
+			className: cn("flex flex-1 items-start justify-between gap-4 py-4 text-start text-sm font-medium", "transition-colors duration-[var(--duration-fast)] hover:text-primary", "disabled:pointer-events-none disabled:opacity-55", "[&[data-state=open]>svg]:rotate-180", focusRing, className),
 			...props,
 			children: [children, /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 24 24",

package/dist/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["Accordion","AccordionPrimitive"],"sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Vertically stacked sections that expand to reveal their content.\n *\n * Use `type=\"single\"` for a set where one answer at a time is the point (an\n * FAQ), and `type=\"multiple\"` where sections are independent (settings groups).\n */\nexport const Accordion = AccordionPrimitive.Root;\n\nexport type AccordionItemProps = ComponentPropsWithRef<typeof AccordionPrimitive.Item>;\n\nexport function AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b border-border last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type AccordionTriggerProps = ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>;\n\nexport function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n  return (\n    // The primitive requires the trigger to sit inside a Header so the button\n    // carries a heading role — without it the sections are unreachable by\n    // heading navigation, which is how many screen reader users move around.\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium\",\n          \"transition-colors duration-[var(--duration-fast)] hover:text-primary\",\n          \"disabled:pointer-events-none disabled:opacity-55\",\n          \"[&[data-state=open]>svg]:rotate-180\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n        >\n          <path\n            d=\"m6 9 6 6 6-6\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport type AccordionContentProps = ComponentPropsWithRef<typeof AccordionPrimitive.Content>;\n\nexport function AccordionContent({ className, children, ...props }: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className={cn(\n        // The height keyframes read --radix-accordion-content-height, which the\n        // primitive measures; overflow-hidden keeps the content clipped as the\n        // box grows rather than spilling over the section below.\n        \"overflow-hidden text-sm text-muted-foreground\",\n        \"data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open\",\n        className,\n      )}\n      {...props}\n    >\n      <div className={cn(\"pb-4\")}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAaA,cAAYC,UAAmB;AAI5C,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACA,UAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,iBAAiB,EAAE,WAAW,UAAU,GAAG,SAAgC;CACzF,OAIE,oBAACA,UAAmB,QAApB;EAA2B,WAAU;EACnC,UAAA,qBAACA,UAAmB,SAApB;GACE,aAAU;GACV,WAAW,GACT,oFACA,wEACA,oDACA,uCACA,WACA,SACF;GACA,GAAI;GAVN,UAAA,CAYG,UACD,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACqB;;CACH,CAAA;AAE/B;AAIA,SAAgB,iBAAiB,EAAE,WAAW,UAAU,GAAG,SAAgC;CACzF,OACE,oBAACA,UAAmB,SAApB;EACE,aAAU;EACV,WAAW,GAIT,iDACA,wFACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,MAAM;GAAI;EAAc,CAAA;CACjB,CAAA;AAEhC"}
+{"version":3,"file":"accordion.js","names":["Accordion","AccordionPrimitive"],"sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Vertically stacked sections that expand to reveal their content.\n *\n * Use `type=\"single\"` for a set where one answer at a time is the point (an\n * FAQ), and `type=\"multiple\"` where sections are independent (settings groups).\n */\nexport const Accordion = AccordionPrimitive.Root;\n\nexport type AccordionItemProps = ComponentPropsWithRef<typeof AccordionPrimitive.Item>;\n\nexport function AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b border-border last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type AccordionTriggerProps = ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>;\n\nexport function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n  return (\n    // The primitive requires the trigger to sit inside a Header so the button\n    // carries a heading role — without it the sections are unreachable by\n    // heading navigation, which is how many screen reader users move around.\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"flex flex-1 items-start justify-between gap-4 py-4 text-start text-sm font-medium\",\n          \"transition-colors duration-[var(--duration-fast)] hover:text-primary\",\n          \"disabled:pointer-events-none disabled:opacity-55\",\n          \"[&[data-state=open]>svg]:rotate-180\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n        >\n          <path\n            d=\"m6 9 6 6 6-6\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport type AccordionContentProps = ComponentPropsWithRef<typeof AccordionPrimitive.Content>;\n\nexport function AccordionContent({ className, children, ...props }: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className={cn(\n        // The height keyframes read --radix-accordion-content-height, which the\n        // primitive measures; overflow-hidden keeps the content clipped as the\n        // box grows rather than spilling over the section below.\n        \"overflow-hidden text-sm text-muted-foreground\",\n        \"data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open\",\n        className,\n      )}\n      {...props}\n    >\n      <div className={cn(\"pb-4\")}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAaA,cAAYC,UAAmB;AAI5C,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACA,UAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,iBAAiB,EAAE,WAAW,UAAU,GAAG,SAAgC;CACzF,OAIE,oBAACA,UAAmB,QAApB;EAA2B,WAAU;EACnC,UAAA,qBAACA,UAAmB,SAApB;GACE,aAAU;GACV,WAAW,GACT,qFACA,wEACA,oDACA,uCACA,WACA,SACF;GACA,GAAI;GAVN,UAAA,CAYG,UACD,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACqB;;CACH,CAAA;AAE/B;AAIA,SAAgB,iBAAiB,EAAE,WAAW,UAAU,GAAG,SAAgC;CACzF,OACE,oBAACA,UAAmB,SAApB;EACE,aAAU;EACV,WAAW,GAIT,iDACA,wFACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,MAAM;GAAI;EAAc,CAAA;CACjB,CAAA;AAEhC"}

package/dist/components/account-menu/account-menu.d.ts

@@ -0,0 +1,56 @@
+import { PopoverContentProps } from "../popover/popover.js";
+import "../popover/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/account-menu/account-menu.d.ts
+interface AccountMenuUser {
+  name: string;
+  email: string;
+  avatarUrl?: string;
+}
+interface AccountMenuProps extends Omit<PopoverContentProps, "children"> {
+  user: AccountMenuUser;
+  children: ReactNode;
+  /** The trigger's accessible name. Defaults to "Account menu for <name>". */
+  triggerLabel?: string;
+  triggerClassName?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The expanded section's value, or null (controlled). */
+  section?: string | null;
+  defaultSection?: string | null;
+  onSectionChange?: (section: string | null) => void;
+}
+/** An avatar button that opens an account panel of collapsible sections. */
+declare function AccountMenu({ className, user, children, triggerLabel, triggerClassName, open, defaultOpen, onOpenChange, section: sectionProp, defaultSection, onSectionChange, ...props }: AccountMenuProps): import("react").JSX.Element;
+interface AccountMenuSectionProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+  value: string;
+  label: ReactNode;
+  /** A leading icon. Decorative. */
+  icon?: ReactNode;
+}
+/** A collapsible section: a disclosure button and the panel it reveals. */
+declare function AccountMenuSection({ className, value, label, icon, children, ...props }: AccountMenuSectionProps): import("react").JSX.Element;
+interface AccountMenuProfileFormProps extends Omit<ComponentPropsWithRef<"form">, "onSubmit"> {
+  /** Called with the edited user; the section then collapses. */
+  onSave?: (user: AccountMenuUser) => void;
+  saveLabel?: string;
+}
+/** The source's "Edit Profile" form: name and email, prefilled from the user. */
+declare function AccountMenuProfileForm({ className, onSave, saveLabel, ...props }: AccountMenuProfileFormProps): import("react").JSX.Element;
+interface AccountMenuOrder {
+  id: string;
+  date: string;
+  status: "processing" | "shipped" | "delivered";
+  /** 0–100. */
+  progress: number;
+}
+interface AccountMenuOrdersProps extends ComponentPropsWithRef<"ul"> {
+  orders: AccountMenuOrder[];
+  onView?: (orderId: string) => void;
+}
+/** The source's "Last Orders": each order's status, progress and a view button. */
+declare function AccountMenuOrders({ className, orders, onView, ...props }: AccountMenuOrdersProps): import("react").JSX.Element;
+//#endregion
+export { AccountMenu, AccountMenuOrder, AccountMenuOrders, AccountMenuOrdersProps, AccountMenuProfileForm, AccountMenuProfileFormProps, AccountMenuProps, AccountMenuSection, AccountMenuSectionProps, AccountMenuUser };
+//# sourceMappingURL=account-menu.d.ts.map

package/dist/components/account-menu/account-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-menu.d.ts","names":[],"sources":["../../../src/components/account-menu/account-menu.tsx"],"mappings":";;;;UAmCiB;EACf;EACA;EACA;;UAkBe,yBAAyB,KAAK;EAC7C,MAAM;EACN,UAAU;;EAEV;EACA;EACA;EACA;EACA,gBAAgB;;EAEhB;EACA;EACA,mBAAmB;;;iBAIL,cACd,WACA,MACA,UACA,cACA,kBACA,MACA,aACA,cACA,SAAS,aACT,gBACA,oBACG,SACF,mCAAgB,IAAA;UAoDF,gCAAgC,KAAK;EACpD;EACA,OAAO;;EAEP,OAAO;;;iBAIO,qBACd,WACA,OACA,OACA,MACA,aACG,SACF,0CAAuB,IAAA;UAqDT,oCAAoC,KACnD;;EAIA,UAAU,MAAM;EAChB;;;iBAIc,yBACd,WACA,QACA,cACG,SACF,8CAA2B,IAAA;UA2Cb;EACf;EACA;EACA;;EAEA;;UAGe,+BAA+B;EAC9C,QAAQ;EACR,UAAU;;;iBAUI,oBACd,WACA,QACA,WACG,SACF,yCAAsB,IAAA"}

package/dist/components/account-menu/account-menu.js

@@ -0,0 +1,247 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar.js";
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { Label } from "../label/label.js";
+import { Progress } from "../progress/progress.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useState } from "react";
+//#region src/components/account-menu/account-menu.tsx
+const AccountMenuContext = createContext(null);
+const SectionContext = createContext({
+	expanded: false,
+	close: () => {}
+});
+function useAccountMenu() {
+	const context = useContext(AccountMenuContext);
+	if (!context) throw new Error("AccountMenu parts must be used inside <AccountMenu>.");
+	return context;
+}
+/** An avatar button that opens an account panel of collapsible sections. */
+function AccountMenu({ className, user, children, triggerLabel, triggerClassName, open, defaultOpen, onOpenChange, section: sectionProp, defaultSection = null, onSectionChange, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultSection);
+	const section = sectionProp === void 0 ? uncontrolled : sectionProp;
+	const headingId = useId();
+	function setSection(next) {
+		if (sectionProp === void 0) setUncontrolled(next);
+		onSectionChange?.(next);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "account-menu-trigger",
+				"aria-label": triggerLabel ?? `Account menu for ${user.name}`,
+				className: cn("rounded-full border border-border bg-background", focusRing, triggerClassName),
+				children: /* @__PURE__ */ jsxs(Avatar, {
+					size: "lg",
+					children: [user.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, {
+						src: user.avatarUrl,
+						alt: "",
+						draggable: false
+					}) : null, /* @__PURE__ */ jsx(AvatarFallback, { children: user.name.charAt(0).toUpperCase() })]
+				})
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "end",
+			"aria-labelledby": headingId,
+			...props,
+			"data-slot": "account-menu-content",
+			className: cn("w-72 overflow-hidden rounded-xl p-0", className),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "border-b border-border px-4 py-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					id: headingId,
+					className: "truncate text-sm font-semibold",
+					children: user.name
+				}), /* @__PURE__ */ jsx("p", {
+					className: "truncate text-xs text-muted-foreground",
+					children: user.email
+				})]
+			}), /* @__PURE__ */ jsx(AccountMenuContext.Provider, {
+				value: {
+					user,
+					section,
+					setSection
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col divide-y divide-border p-1",
+					children
+				})
+			})]
+		})]
+	});
+}
+/** A collapsible section: a disclosure button and the panel it reveals. */
+function AccountMenuSection({ className, value, label, icon, children, ...props }) {
+	const { section, setSection } = useAccountMenu();
+	const expanded = section === value;
+	const panelId = useId();
+	const state = expanded ? "open" : "closed";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "account-menu-section",
+		"data-state": state,
+		className: cn("py-0.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			"aria-controls": panelId,
+			onClick: () => setSection(expanded ? null : value),
+			className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors duration-[var(--duration-fast)]", "[&_svg]:size-4 [&_svg]:shrink-0", expanded ? "bg-primary text-primary-foreground" : "hover:bg-accent", focusRing),
+			children: [icon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "flex",
+				children: icon
+			}) : null, label]
+		}), /* @__PURE__ */ jsx("div", {
+			id: panelId,
+			role: "region",
+			"aria-label": typeof label === "string" ? label : void 0,
+			inert: !expanded,
+			"data-state": state,
+			className: cn("grid transition-[grid-template-rows,opacity,filter] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "data-[state=closed]:grid-rows-[0fr] data-[state=closed]:opacity-0 data-[state=closed]:blur-[10px] data-[state=open]:grid-rows-[1fr]"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 overflow-hidden",
+				children: /* @__PURE__ */ jsx(SectionContext.Provider, {
+					value: {
+						expanded,
+						close: () => setSection(null)
+					},
+					children
+				})
+			})
+		})]
+	});
+}
+/** The source's "Edit Profile" form: name and email, prefilled from the user. */
+function AccountMenuProfileForm({ className, onSave, saveLabel = "Save changes", ...props }) {
+	const { user } = useAccountMenu();
+	const { close } = useContext(SectionContext);
+	const id = useId();
+	function handleSubmit(event) {
+		event.preventDefault();
+		const data = new FormData(event.currentTarget);
+		const field = (key) => {
+			const value = data.get(key);
+			return typeof value === "string" ? value : "";
+		};
+		onSave?.({
+			...user,
+			name: field("name"),
+			email: field("email")
+		});
+		close();
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		className: cn("flex flex-col gap-3 p-3", className),
+		onSubmit: handleSubmit,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: `${id}-name`,
+					children: "Name"
+				}), /* @__PURE__ */ jsx(Input, {
+					id: `${id}-name`,
+					name: "name",
+					defaultValue: user.name,
+					autoComplete: "name"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: `${id}-email`,
+					children: "Email"
+				}), /* @__PURE__ */ jsx(Input, {
+					id: `${id}-email`,
+					name: "email",
+					type: "email",
+					defaultValue: user.email,
+					autoComplete: "email"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				className: "mt-1",
+				children: saveLabel
+			})
+		]
+	});
+}
+const STATUS_TONE = {
+	processing: "primary",
+	shipped: "warning",
+	delivered: "success"
+};
+/** The source's "Last Orders": each order's status, progress and a view button. */
+function AccountMenuOrders({ className, orders, onView, ...props }) {
+	const { expanded } = useContext(SectionContext);
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("flex flex-col gap-2 p-3", className),
+		...props,
+		children: orders.map((order) => /* @__PURE__ */ jsxs("li", {
+			className: "flex flex-col gap-2 rounded-lg border border-border bg-muted/30 p-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-semibold",
+					children: order.id
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: order.date
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 space-y-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between text-xs",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium capitalize",
+							children: order.status
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [order.progress, "%"]
+						})]
+					}), /* @__PURE__ */ jsx(Progress, {
+						size: "sm",
+						tone: STATUS_TONE[order.status],
+						value: expanded ? order.progress : 0,
+						"aria-label": `Order ${order.id} progress`
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					"aria-label": `View order ${order.id}`,
+					onClick: () => onView?.(order.id),
+					children: /* @__PURE__ */ jsxs("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: 2,
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" }), /* @__PURE__ */ jsx("circle", {
+							cx: "12",
+							cy: "12",
+							r: "3"
+						})]
+					})
+				})]
+			})]
+		}, order.id))
+	});
+}
+//#endregion
+export { AccountMenu, AccountMenuOrders, AccountMenuProfileForm, AccountMenuSection };
+
+//# sourceMappingURL=account-menu.js.map

package/dist/components/account-menu/account-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-menu.js","names":[],"sources":["../../../src/components/account-menu/account-menu.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI User Account Avatar (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  createContext,\n  useContext,\n  useId,\n  useState,\n  type ComponentPropsWithRef,\n  type FormEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { Button } from \"@/components/button\";\nimport { Input } from \"@/components/input\";\nimport { Label } from \"@/components/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  type PopoverContentProps,\n} from \"@/components/popover\";\nimport { Progress } from \"@/components/progress\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * An avatar that opens an account panel of collapsible sections — edit the\n * profile, check recent orders. The sections hold forms, so this is a\n * popover of disclosures, not a menu: role=\"menu\" cannot contain text\n * fields. Sections open with a CSS grid-rows transition (0fr → 1fr) and a\n * blur, replacing the source's motion height springs; one is open at a time.\n */\n\nexport interface AccountMenuUser {\n  name: string;\n  email: string;\n  avatarUrl?: string;\n}\n\ninterface AccountMenuContextValue {\n  user: AccountMenuUser;\n  section: string | null;\n  setSection: (section: string | null) => void;\n}\n\nconst AccountMenuContext = createContext<AccountMenuContextValue | null>(null);\nconst SectionContext = createContext({ expanded: false, close: () => {} });\n\nfunction useAccountMenu() {\n  const context = useContext(AccountMenuContext);\n  if (!context) throw new Error(\"AccountMenu parts must be used inside <AccountMenu>.\");\n  return context;\n}\n\nexport interface AccountMenuProps extends Omit<PopoverContentProps, \"children\"> {\n  user: AccountMenuUser;\n  children: ReactNode;\n  /** The trigger's accessible name. Defaults to \"Account menu for <name>\". */\n  triggerLabel?: string;\n  triggerClassName?: string;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The expanded section's value, or null (controlled). */\n  section?: string | null;\n  defaultSection?: string | null;\n  onSectionChange?: (section: string | null) => void;\n}\n\n/** An avatar button that opens an account panel of collapsible sections. */\nexport function AccountMenu({\n  className,\n  user,\n  children,\n  triggerLabel,\n  triggerClassName,\n  open,\n  defaultOpen,\n  onOpenChange,\n  section: sectionProp,\n  defaultSection = null,\n  onSectionChange,\n  ...props\n}: AccountMenuProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultSection);\n  const section = sectionProp === undefined ? uncontrolled : sectionProp;\n  const headingId = useId();\n\n  function setSection(next: string | null) {\n    if (sectionProp === undefined) setUncontrolled(next);\n    onSectionChange?.(next);\n  }\n\n  return (\n    <Popover open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          data-slot=\"account-menu-trigger\"\n          aria-label={triggerLabel ?? `Account menu for ${user.name}`}\n          className={cn(\n            \"rounded-full border border-border bg-background\",\n            focusRing,\n            triggerClassName,\n          )}\n        >\n          <Avatar size=\"lg\">\n            {user.avatarUrl ? (\n              <AvatarImage src={user.avatarUrl} alt=\"\" draggable={false} />\n            ) : null}\n            <AvatarFallback>{user.name.charAt(0).toUpperCase()}</AvatarFallback>\n          </Avatar>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        aria-labelledby={headingId}\n        {...props}\n        data-slot=\"account-menu-content\"\n        className={cn(\"w-72 overflow-hidden rounded-xl p-0\", className)}\n      >\n        <div className=\"border-b border-border px-4 py-3\">\n          <p id={headingId} className=\"truncate text-sm font-semibold\">\n            {user.name}\n          </p>\n          <p className=\"truncate text-xs text-muted-foreground\">{user.email}</p>\n        </div>\n        <AccountMenuContext.Provider value={{ user, section, setSection }}>\n          <div className=\"flex flex-col divide-y divide-border p-1\">{children}</div>\n        </AccountMenuContext.Provider>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface AccountMenuSectionProps extends Omit<ComponentPropsWithRef<\"div\">, \"title\"> {\n  value: string;\n  label: ReactNode;\n  /** A leading icon. Decorative. */\n  icon?: ReactNode;\n}\n\n/** A collapsible section: a disclosure button and the panel it reveals. */\nexport function AccountMenuSection({\n  className,\n  value,\n  label,\n  icon,\n  children,\n  ...props\n}: AccountMenuSectionProps) {\n  const { section, setSection } = useAccountMenu();\n  const expanded = section === value;\n  const panelId = useId();\n  const state = expanded ? \"open\" : \"closed\";\n\n  return (\n    <div\n      data-slot=\"account-menu-section\"\n      data-state={state}\n      className={cn(\"py-0.5\", className)}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={() => setSection(expanded ? null : value)}\n        className={cn(\n          \"flex w-full items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors duration-[var(--duration-fast)]\",\n          \"[&_svg]:size-4 [&_svg]:shrink-0\",\n          expanded ? \"bg-primary text-primary-foreground\" : \"hover:bg-accent\",\n          focusRing,\n        )}\n      >\n        {icon ? (\n          <span aria-hidden=\"true\" className=\"flex\">\n            {icon}\n          </span>\n        ) : null}\n        {label}\n      </button>\n      <div\n        id={panelId}\n        role=\"region\"\n        aria-label={typeof label === \"string\" ? label : undefined}\n        inert={!expanded}\n        data-state={state}\n        className={cn(\n          \"grid transition-[grid-template-rows,opacity,filter] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n          \"data-[state=closed]:grid-rows-[0fr] data-[state=closed]:opacity-0 data-[state=closed]:blur-[10px] data-[state=open]:grid-rows-[1fr]\",\n        )}\n      >\n        <div className=\"min-h-0 overflow-hidden\">\n          <SectionContext.Provider value={{ expanded, close: () => setSection(null) }}>\n            {children}\n          </SectionContext.Provider>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport interface AccountMenuProfileFormProps extends Omit<\n  ComponentPropsWithRef<\"form\">,\n  \"onSubmit\"\n> {\n  /** Called with the edited user; the section then collapses. */\n  onSave?: (user: AccountMenuUser) => void;\n  saveLabel?: string;\n}\n\n/** The source's \"Edit Profile\" form: name and email, prefilled from the user. */\nexport function AccountMenuProfileForm({\n  className,\n  onSave,\n  saveLabel = \"Save changes\",\n  ...props\n}: AccountMenuProfileFormProps) {\n  const { user } = useAccountMenu();\n  const { close } = useContext(SectionContext);\n  const id = useId();\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    const data = new FormData(event.currentTarget);\n    const field = (key: string) => {\n      const value = data.get(key);\n      return typeof value === \"string\" ? value : \"\";\n    };\n    onSave?.({ ...user, name: field(\"name\"), email: field(\"email\") });\n    close();\n  }\n\n  return (\n    <form\n      className={cn(\"flex flex-col gap-3 p-3\", className)}\n      onSubmit={handleSubmit}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-1.5\">\n        <Label htmlFor={`${id}-name`}>Name</Label>\n        <Input id={`${id}-name`} name=\"name\" defaultValue={user.name} autoComplete=\"name\" />\n      </div>\n      <div className=\"flex flex-col gap-1.5\">\n        <Label htmlFor={`${id}-email`}>Email</Label>\n        <Input\n          id={`${id}-email`}\n          name=\"email\"\n          type=\"email\"\n          defaultValue={user.email}\n          autoComplete=\"email\"\n        />\n      </div>\n      <Button type=\"submit\" className=\"mt-1\">\n        {saveLabel}\n      </Button>\n    </form>\n  );\n}\n\nexport interface AccountMenuOrder {\n  id: string;\n  date: string;\n  status: \"processing\" | \"shipped\" | \"delivered\";\n  /** 0–100. */\n  progress: number;\n}\n\nexport interface AccountMenuOrdersProps extends ComponentPropsWithRef<\"ul\"> {\n  orders: AccountMenuOrder[];\n  onView?: (orderId: string) => void;\n}\n\nconst STATUS_TONE = {\n  processing: \"primary\",\n  shipped: \"warning\",\n  delivered: \"success\",\n} as const;\n\n/** The source's \"Last Orders\": each order's status, progress and a view button. */\nexport function AccountMenuOrders({\n  className,\n  orders,\n  onView,\n  ...props\n}: AccountMenuOrdersProps) {\n  const { expanded } = useContext(SectionContext);\n  return (\n    <ul className={cn(\"flex flex-col gap-2 p-3\", className)} {...props}>\n      {orders.map((order) => (\n        <li\n          key={order.id}\n          className=\"flex flex-col gap-2 rounded-lg border border-border bg-muted/30 p-3\"\n        >\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-sm font-semibold\">{order.id}</span>\n            <span className=\"text-xs text-muted-foreground\">{order.date}</span>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex-1 space-y-2\">\n              <div className=\"flex items-center justify-between text-xs\">\n                <span className=\"font-medium capitalize\">{order.status}</span>\n                <span className=\"text-muted-foreground\">{order.progress}%</span>\n              </div>\n              {/* Fills from empty each time the section opens, as the source did. */}\n              <Progress\n                size=\"sm\"\n                tone={STATUS_TONE[order.status]}\n                value={expanded ? order.progress : 0}\n                aria-label={`Order ${order.id} progress`}\n              />\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon-sm\"\n              aria-label={`View order ${order.id}`}\n              onClick={() => onView?.(order.id)}\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n                aria-hidden=\"true\"\n              >\n                <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z\" />\n                <circle cx=\"12\" cy=\"12\" r=\"3\" />\n              </svg>\n            </Button>\n          </div>\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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"}

package/dist/components/account-menu/index.d.ts

@@ -0,0 +1,2 @@
+import { AccountMenu, AccountMenuOrder, AccountMenuOrders, AccountMenuOrdersProps, AccountMenuProfileForm, AccountMenuProfileFormProps, AccountMenuProps, AccountMenuSection, AccountMenuSectionProps, AccountMenuUser } from "./account-menu.js";
+export { AccountMenu, type AccountMenuOrder, AccountMenuOrders, type AccountMenuOrdersProps, AccountMenuProfileForm, type AccountMenuProfileFormProps, type AccountMenuProps, AccountMenuSection, type AccountMenuSectionProps, type AccountMenuUser };

package/dist/components/account-menu/index.js

@@ -0,0 +1,2 @@
+import { AccountMenu, AccountMenuOrders, AccountMenuProfileForm, AccountMenuSection } from "./account-menu.js";
+export { AccountMenu, AccountMenuOrders, AccountMenuProfileForm, AccountMenuSection };

package/dist/components/account-menu/meta.js

@@ -0,0 +1,24 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/account-menu/meta.ts
+const meta = defineMeta({
+	name: "account-menu",
+	title: "Account Menu",
+	description: "An avatar that opens an account panel of collapsible sections — edit the profile, check recent orders.",
+	category: "overlay",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [
+		"avatar",
+		"button",
+		"input",
+		"label",
+		"popover",
+		"progress"
+	],
+	files: ["account-menu.tsx"],
+	a11y: "The avatar trigger is named \"Account menu for <name>\" and opens Dowel's Popover: a role=\"dialog\" labelled by the user's name, with focus moved inside, Escape and outside-press dismissal and focus returned to the trigger. It is deliberately not role=\"menu\": sections contain form fields. Each section is a disclosure button (aria-expanded, aria-controls) revealing a named region that is inert while collapsed. Form fields are labelled; order progress bars and view buttons name their order. Transitions stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/account-menu/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/account-menu/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"account-menu\",\n  title: \"Account Menu\",\n  description:\n    \"An avatar that opens an account panel of collapsible sections — edit the profile, check recent orders.\",\n  category: \"overlay\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [\"avatar\", \"button\", \"input\", \"label\", \"popover\", \"progress\"],\n  files: [\"account-menu.tsx\"],\n  a11y:\n    'The avatar trigger is named \"Account menu for <name>\" and opens Dowel\\'s Popover: a role=\"dialog\" labelled by ' +\n    \"the user's name, with focus moved inside, Escape and outside-press dismissal and focus returned to the \" +\n    'trigger. It is deliberately not role=\"menu\": sections contain form fields. Each section is a disclosure ' +\n    \"button (aria-expanded, aria-controls) revealing a named region that is inert while collapsed. Form fields \" +\n    \"are labelled; order progress bars and view buttons name their order. Transitions stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB;EAAC;EAAU;EAAU;EAAS;EAAS;EAAW;CAAU;CAClF,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAKJ,CAAC"}

package/dist/components/action-node/action-node-spring.js

@@ -0,0 +1,21 @@
+//#region src/components/action-node/action-node-spring.ts
+function springEasing(bounce, samples = 48) {
+	const zeta = 1 - Math.min(Math.max(bounce, 0), 1) * .7;
+	const omega = Math.log(1e3) / zeta;
+	const points = [];
+	for (let i = 0; i <= samples; i += 1) {
+		const t = i / samples;
+		let x;
+		if (zeta >= .999) x = 1 - Math.exp(-omega * t) * (1 + omega * t);
+		else {
+			const wd = omega * Math.sqrt(1 - zeta * zeta);
+			x = 1 - Math.exp(-zeta * omega * t) * (Math.cos(wd * t) + zeta * omega / wd * Math.sin(wd * t));
+		}
+		points.push(i === samples ? "1" : String(Math.round(x * 1e3) / 1e3));
+	}
+	return `linear(${points.join(", ")})`;
+}
+//#endregion
+export { springEasing };
+
+//# sourceMappingURL=action-node-spring.js.map

package/dist/components/action-node/action-node-spring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-node-spring.js","names":[],"sources":["../../../src/components/action-node/action-node-spring.ts"],"sourcesContent":["// Ported from bencho (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\n/*\n * A damped spring expressed as a CSS `linear()` easing, so a state-driven\n * spring (overshoot, settle) runs as a plain CSS transition: no animation\n * library, and the global reduced-motion rule and --motion-scale still apply.\n *\n * `bounce` 0..1 (0 = critically damped, no overshoot; 1 = very lively).\n * Returns the easing string. Pair it with a duration from the caller.\n * Browsers without linear() drop the declaration, so set it through a CSS\n * variable consumed inside `@supports (transition-timing-function: linear(0, 1))`\n * in the hoisted stylesheet, with a cubic-bezier fallback in the class list.\n */\nexport function springEasing(bounce: number, samples = 48): string {\n  const b = Math.min(Math.max(bounce, 0), 1);\n  const zeta = 1 - b * 0.7; // damping ratio 1 → 0.3\n  // Choose ω so the envelope has decayed to ~0.1% at t = 1.\n  const omega = Math.log(1000) / zeta;\n  const points: string[] = [];\n  for (let i = 0; i <= samples; i += 1) {\n    const t = i / samples;\n    let x: number;\n    if (zeta >= 0.999) {\n      x = 1 - Math.exp(-omega * t) * (1 + omega * t);\n    } else {\n      const wd = omega * Math.sqrt(1 - zeta * zeta);\n      x =\n        1 -\n        Math.exp(-zeta * omega * t) *\n          (Math.cos(wd * t) + ((zeta * omega) / wd) * Math.sin(wd * t));\n    }\n    points.push(i === samples ? \"1\" : String(Math.round(x * 1000) / 1000));\n  }\n  return `linear(${points.join(\", \")})`;\n}\n"],"mappings":";AAYA,SAAgB,aAAa,QAAgB,UAAU,IAAY;CAEjE,MAAM,OAAO,IADH,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,CACvB,IAAI;CAErB,MAAM,QAAQ,KAAK,IAAI,GAAI,IAAI;CAC/B,MAAM,SAAmB,CAAC;CAC1B,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,KAAK,GAAG;EACpC,MAAM,IAAI,IAAI;EACd,IAAI;EACJ,IAAI,QAAQ,MACV,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ;OACvC;GACL,MAAM,KAAK,QAAQ,KAAK,KAAK,IAAI,OAAO,IAAI;GAC5C,IACE,IACA,KAAK,IAAI,CAAC,OAAO,QAAQ,CAAC,KACvB,KAAK,IAAI,KAAK,CAAC,IAAM,OAAO,QAAS,KAAM,KAAK,IAAI,KAAK,CAAC;EACjE;EACA,OAAO,KAAK,MAAM,UAAU,MAAM,OAAO,KAAK,MAAM,IAAI,GAAI,IAAI,GAAI,CAAC;CACvE;CACA,OAAO,UAAU,OAAO,KAAK,IAAI,EAAE;AACrC"}

package/dist/components/action-node/action-node.d.ts

@@ -0,0 +1,67 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/action-node/action-node.d.ts
+declare const actionNodeVariants: (props?: ({
+  tone?: "default" | "inverted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Where each open button sits, relative to the card's top-end corner (x toward
+ * the inline end, y down). The buttons lie on an arc centred just inside the
+ * card, spaced a button plus a gap apart and symmetric about the corner's
+ * diagonal — at reach 30 that is bencho's (−51.7, −31.1) … (31, 51.7).
+ */
+declare function fanPositions(count: number, reach: number): {
+  x: number;
+  y: number;
+}[];
+interface ActionNodeAction {
+  /** The button's accessible name and tooltip. */
+  label: string;
+  /** Decorative icon. */
+  icon: ReactNode;
+  onSelect?: () => void;
+}
+interface ActionNodePerson {
+  /** Alt text and the fallback's accessible name. */
+  name: string;
+  /** Avatar image URL. Without it the initials show. */
+  image?: string;
+}
+interface ActionNodeProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof actionNodeVariants> {
+  /** The node's name, e.g. "Node 07". */
+  heading: ReactNode;
+  description?: ReactNode;
+  /** Decorative icon in the chip beside the heading. */
+  icon?: ReactNode;
+  /** People shown as overlapping avatars. */
+  people?: ActionNodePerson[];
+  /** Shown after the avatars as "+N". */
+  extraCount?: number;
+  /** Names the avatar list. */
+  peopleLabel?: string;
+  /** The fan's buttons; two to four read best. */
+  actions: ActionNodeAction[];
+  /** Whether the fan is open (controlled). */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Spring overshoot, 0–100. */
+  bounce?: number;
+  /** Delay between buttons, 0–100 (about 0.9ms per step). */
+  stagger?: number;
+  /** Arc radius in px, 20–40. */
+  reach?: number;
+  /** Card radius in px; the chip's radius derives from it. */
+  corner?: number;
+  /** Adds a 1px hairline to the card and the buttons. */
+  stroke?: boolean;
+  /** The trigger's accessible name. */
+  triggerLabel?: string;
+  /** The toolbar's accessible name. */
+  toolbarLabel?: string;
+}
+/** A workflow node card whose action buttons fan out around its top-end corner. */
+declare function ActionNode({ className, style, heading, description, icon, people, extraCount, peopleLabel, actions, open: openProp, defaultOpen, onOpenChange, bounce, stagger, reach, corner, stroke, tone, triggerLabel, toolbarLabel, ...props }: ActionNodeProps): import("react").JSX.Element;
+//#endregion
+export { ActionNode, ActionNodeAction, ActionNodePerson, ActionNodeProps, actionNodeVariants, fanPositions };
+//# sourceMappingURL=action-node.d.ts.map

package/dist/components/action-node/action-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-node.d.ts","names":[],"sources":["../../../src/components/action-node/action-node.tsx"],"mappings":";;;cAqDM,qBAAkB;;6CAWtB;;;;;;;iBAYc,aAAa,eAAe;EAAkB;EAAW;;UA0BxD;;EAEf;;EAEA,MAAM;EACN;;UAGe;;EAEf;;EAEA;;UAGe,wBAEb,KAAK,2CACL,oBAAoB;;EAEtB,SAAS;EACT,cAAc;;EAEd,OAAO;;EAEP,SAAS;;EAET;;EAEA;;EAEA,SAAS;;EAET;EACA;EACA,gBAAgB;;EAEhB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;iBAIc,aACd,WACA,OACA,SACA,aACA,MACA,QACA,YACA,aACA,SACA,MAAM,UACN,aACA,cACA,QACA,SACA,OACA,QACA,QACA,MACA,cACA,iBACG,SACF,kCAAe,IAAA"}