@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/layout/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","names":[],"sources":["../../../src/components/layout/section.tsx"],"sourcesContent":["import type { SectionSchema } from '@alfakit/core'\nimport {\n  actionsAlignmentClass,\n  headingTag,\n  readPersisted,\n  schemaGapClass,\n  writePersisted,\n} from '@alfakit/core'\nimport { ChevronDownIcon } from 'lucide-react'\nimport { createElement, useState } from 'react'\nimport { useT } from '../../context'\nimport { useHydrated } from '../../hooks/use-hydrated'\nimport { extraProps } from '../../lib/attributes'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { Button } from '../ui/button'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'\nimport { DeferredSchema } from './deferred'\nimport { MixedContent } from './mixed-content'\n\nexport function SectionComponent({ component }: { component: SectionSchema }) {\n  const t = useT()\n  const [choice, setChoice] = useState<boolean | null>(null)\n  // Inside a form the section's actions run as field actions, so `$get` / `$set` work.\n  const form = useOptionalFormStore()\n  const pageContext = usePageActionContext()\n  const fieldContext = useFieldActionContext(component)\n  const context = form ? fieldContext : pageContext\n  const persistKey = component.persistCollapsed\n  const hydrated = useHydrated()\n  // Read only after hydration, so the server render and hydration use the schema's default.\n  const stored = hydrated && persistKey ? readPersisted(persistKey) : null\n  const open = choice ?? (stored !== null ? stored !== 'collapsed' : !component.collapsed)\n  const hasHeader =\n    component.heading ||\n    component.description ||\n    component.icon ||\n    component.headerActions?.length ||\n    component.afterHeader?.length\n\n  const setOpen = (next: boolean) => {\n    setChoice(next)\n\n    if (persistKey) writePersisted(persistKey, next ? 'expanded' : 'collapsed')\n  }\n\n  const content = (\n    <DeferredSchema component={component}>\n      {(loaded) => (\n        <SchemaRenderer\n          components={loaded.schema ?? []}\n          columns={loaded.columns}\n          className={schemaGapClass(loaded)}\n        />\n      )}\n    </DeferredSchema>\n  )\n\n  const header = hasHeader ? (\n    <div\n      className={cn(\n        'flex flex-wrap items-start gap-3',\n        component.aside ? 'lg:col-span-1' : 'border-b px-6 py-4',\n        component.compact && !component.aside && 'px-4 py-3',\n      )}\n    >\n      {component.icon && (\n        <Icon name={component.icon} className=\"text-muted-foreground mt-0.5 size-5\" />\n      )}\n      <div className=\"min-w-0 flex-1 basis-48\">\n        {component.heading &&\n          createElement(\n            headingTag(component.headingLevel),\n            { className: 'text-base leading-6 font-semibold' },\n            component.heading,\n          )}\n        {component.description && (\n          <p className=\"text-muted-foreground mt-1 text-sm\">{component.description}</p>\n        )}\n      </div>\n      {component.headerActions && component.headerActions.length > 0 && (\n        <ActionList actions={component.headerActions} context={context} size=\"sm\" />\n      )}\n      <MixedContent items={component.afterHeader} name=\"section-after-header\" />\n      {component.collapsible && (\n        <CollapsibleTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label={t('toggle_section', {}, 'Toggle section')}\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              fallback={ChevronDownIcon}\n              className={cn('transition-transform', open && 'rotate-180')}\n            />\n          </Button>\n        </CollapsibleTrigger>\n      )}\n    </div>\n  ) : null\n\n  const hasFooterActions = Boolean(component.footerActions?.length)\n  const footer =\n    hasFooterActions || component.footer?.length ? (\n      <div\n        data-slot=\"section-footer\"\n        className={cn(\n          'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n          component.compact && 'px-4 py-3',\n        )}\n      >\n        {hasFooterActions && (\n          <ActionList\n            actions={component.footerActions ?? []}\n            context={context}\n            className={actionsAlignmentClass(component.footerActionsAlignment) || undefined}\n          />\n        )}\n        <MixedContent items={component.footer} name=\"section-footer-content\" />\n      </div>\n    ) : null\n\n  if (component.aside) {\n    return (\n      <Collapsible open={!component.collapsible || open} onOpenChange={setOpen} asChild>\n        <section\n          data-slot=\"section\"\n          {...extraProps(component.extraAttributes, 'grid gap-6 lg:grid-cols-3')}\n        >\n          {header}\n          <CollapsibleContent asChild>\n            <div\n              data-surface=\"section\"\n              className={cn(\n                'bg-card rounded-xl border shadow-xs lg:col-span-2',\n                component.secondary && 'bg-muted/40',\n              )}\n            >\n              <div className={cn('p-6', component.compact && 'p-4')}>{content}</div>\n              {footer}\n            </div>\n          </CollapsibleContent>\n        </section>\n      </Collapsible>\n    )\n  }\n\n  return (\n    <Collapsible open={!component.collapsible || open} onOpenChange={setOpen} asChild>\n      <section\n        data-slot=\"section\"\n        data-surface=\"section\"\n        {...extraProps(\n          component.extraAttributes,\n          cn('bg-card rounded-xl border shadow-xs', component.secondary && 'bg-muted/40'),\n        )}\n      >\n        {header}\n        <CollapsibleContent>\n          <div className={cn('p-6', component.compact && 'p-4')}>{content}</div>\n          {footer}\n        </CollapsibleContent>\n      </section>\n    </Collapsible>\n  )\n}\n"],"mappings":"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"}

package/dist/components/layout/tabs.d.ts

@@ -0,0 +1,7 @@
+import { TabsSchema } from "@alfakit/core";
+//#region src/components/layout/tabs.d.ts
+export declare function TabsComponent({ component }: {
+  component: TabsSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/layout/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../../src/components/layout/tabs.tsx"],"mappings":";;wBAcgB,gBAAgB;EAAe,WAAW;oBAAY,IAAA"}

package/dist/components/layout/tabs.js

@@ -0,0 +1,83 @@
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { extraProps } from "../../lib/attributes.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
+import { DeferredSchema, useDeferredBadge } from "./deferred.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { useHydrated } from "../../hooks/use-hydrated.js";
+import { readPersisted, schemaGapClass, writePersisted } from "@alfakit/core";
+import { usePage } from "@inertiajs/react";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/layout/tabs.tsx
+function TabsComponent({ component }) {
+	const tabs = component.schema ?? [];
+	const url = usePage().url;
+	const fromQuery = component.queryStringKey ? new URL(url, "http://localhost").searchParams.get(component.queryStringKey) : null;
+	const [initial] = useState(() => tabs.find((tab) => tab.key === fromQuery)?.key ?? tabs[Math.max(0, component.activeTab - 1)]?.key ?? tabs[0]?.key ?? "");
+	const persist = component.persistTab;
+	const hydrated = useHydrated();
+	const [chosen, setChosen] = useState(null);
+	const stored = hydrated && persist && !fromQuery ? readPersisted(persist.key, persist.storage) : null;
+	const active = chosen ?? (stored && tabs.some((tab) => tab.key === stored) ? stored : initial);
+	const changeTab = (value) => {
+		setChosen(value);
+		if (persist) writePersisted(persist.key, value, persist.storage);
+	};
+	useEffect(() => {
+		if (!component.queryStringKey || typeof window === "undefined") return;
+		const url = new URL(window.location.href);
+		url.searchParams.set(component.queryStringKey, active);
+		window.history.replaceState(window.history.state, "", url);
+	}, [active, component.queryStringKey]);
+	return /* @__PURE__ */ jsxs(Tabs, {
+		"data-surface": component.contained ? "tabs" : void 0,
+		value: active,
+		onValueChange: changeTab,
+		orientation: component.vertical ? "vertical" : "horizontal",
+		...extraProps(component.extraAttributes, cn(component.contained && "bg-card rounded-xl border shadow-xs", component.vertical && "flex-row")),
+		children: [/* @__PURE__ */ jsx(TabsList, {
+			"data-scrollable": component.scrollable === false ? "false" : void 0,
+			className: cn(component.contained && "m-2", component.vertical ? "self-start" : component.scrollable === false ? "h-auto max-w-full flex-wrap justify-start" : "relative max-w-full overflow-x-auto"),
+			children: tabs.map((tab) => /* @__PURE__ */ jsxs(TabsTrigger, {
+				value: tab.key,
+				children: [
+					tab.icon && tab.iconPosition !== "after" && /* @__PURE__ */ jsx(Icon, { name: tab.icon }),
+					tab.label,
+					tab.icon && tab.iconPosition === "after" && /* @__PURE__ */ jsx(Icon, { name: tab.icon }),
+					/* @__PURE__ */ jsx(TabBadge, { tab })
+				]
+			}, tab.key))
+		}), tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+			value: tab.key,
+			forceMount: true,
+			className: cn("data-[state=inactive]:hidden", component.contained ? "p-6 pt-4" : "pt-4"),
+			children: /* @__PURE__ */ jsx(DeferredSchema, {
+				component: tab,
+				children: (loaded) => /* @__PURE__ */ jsx(SchemaRenderer, {
+					components: loaded.schema ?? [],
+					columns: loaded.columns,
+					attributes: loaded.extraAttributes,
+					className: schemaGapClass(loaded) || void 0
+				})
+			})
+		}, tab.key))]
+	});
+}
+/** A tab's badge; `deferBadge()` badges appear once loaded. */
+function TabBadge({ tab }) {
+	const { badge, badgeColor, badgeTooltip } = useDeferredBadge(tab);
+	if (badge === void 0 || badge === null) return null;
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		title: badgeTooltip ?? void 0,
+		className: cn("ms-1 px-1.5 py-0", colorClass(badgeColorClasses, badgeColor ?? void 0, "gray")),
+		children: badge
+	});
+}
+//#endregion
+export { TabsComponent };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/layout/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/layout/tabs.tsx"],"sourcesContent":["import type { TabSchema, TabsSchema } from '@alfakit/core'\nimport { readPersisted, schemaGapClass, writePersisted } from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { useEffect, useState } from 'react'\nimport { useHydrated } from '../../hooks/use-hydrated'\nimport { extraProps } from '../../lib/attributes'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { Badge } from '../ui/badge'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'\nimport { DeferredSchema, useDeferredBadge } from './deferred'\n\nexport function TabsComponent({ component }: { component: TabsSchema }) {\n  const tabs = component.schema ?? []\n  // The page URL (not `window.location`) so the server renders the same tab as the browser.\n  const url = usePage().url\n  const fromQuery = component.queryStringKey\n    ? new URL(url, 'http://localhost').searchParams.get(component.queryStringKey)\n    : null\n  const [initial] = useState<string>(\n    () =>\n      tabs.find((tab) => tab.key === fromQuery)?.key ??\n      tabs[Math.max(0, component.activeTab - 1)]?.key ??\n      tabs[0]?.key ??\n      '',\n  )\n\n  const persist = component.persistTab\n  const hydrated = useHydrated()\n  const [chosen, setChosen] = useState<string | null>(null)\n  // `persistTab()`: read only after hydration (the server can't see browser storage); a\n  // tab named in the query string wins.\n  const stored =\n    hydrated && persist && !fromQuery ? readPersisted(persist.key, persist.storage) : null\n  const active = chosen ?? (stored && tabs.some((tab) => tab.key === stored) ? stored : initial)\n\n  const changeTab = (value: string) => {\n    setChosen(value)\n\n    if (persist) writePersisted(persist.key, value, persist.storage)\n  }\n\n  useEffect(() => {\n    if (!component.queryStringKey || typeof window === 'undefined') return\n\n    const url = new URL(window.location.href)\n    url.searchParams.set(component.queryStringKey, active)\n    window.history.replaceState(window.history.state, '', url)\n  }, [active, component.queryStringKey])\n\n  return (\n    <Tabs\n      data-surface={component.contained ? 'tabs' : undefined}\n      value={active}\n      onValueChange={changeTab}\n      orientation={component.vertical ? 'vertical' : 'horizontal'}\n\n      {...extraProps(\n        component.extraAttributes,\n        cn(\n          component.contained && 'bg-card rounded-xl border shadow-xs',\n          component.vertical && 'flex-row',\n        ),\n      )}\n    >\n      <TabsList\n        data-scrollable={component.scrollable === false ? 'false' : undefined}\n        className={cn(\n          component.contained && 'm-2',\n          component.vertical\n            ? 'self-start'\n            : component.scrollable === false\n              ? 'h-auto max-w-full flex-wrap justify-start'\n              : 'relative max-w-full overflow-x-auto',\n        )}\n      >\n        {tabs.map((tab) => (\n          <TabsTrigger key={tab.key} value={tab.key}>\n            {tab.icon && tab.iconPosition !== 'after' && <Icon name={tab.icon} />}\n            {tab.label}\n            {tab.icon && tab.iconPosition === 'after' && <Icon name={tab.icon} />}\n            <TabBadge tab={tab} />\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {tabs.map((tab) => (\n        <TabsContent\n          key={tab.key}\n          value={tab.key}\n          forceMount\n          className={cn('data-[state=inactive]:hidden', component.contained ? 'p-6 pt-4' : 'pt-4')}\n        >\n          <DeferredSchema component={tab}>\n            {(loaded) => (\n              <SchemaRenderer\n                components={loaded.schema ?? []}\n                columns={loaded.columns}\n                attributes={loaded.extraAttributes}\n                className={schemaGapClass(loaded) || undefined}\n              />\n            )}\n          </DeferredSchema>\n        </TabsContent>\n      ))}\n    </Tabs>\n  )\n}\n\n/** A tab's badge; `deferBadge()` badges appear once loaded. */\nfunction TabBadge({ tab }: { tab: TabSchema }) {\n  const { badge, badgeColor, badgeTooltip } = useDeferredBadge(tab)\n\n  if (badge === undefined || badge === null) return null\n\n  return (\n    <Badge\n      variant=\"outline\"\n      title={badgeTooltip ?? undefined}\n      className={cn(\n        'ms-1 px-1.5 py-0',\n        colorClass(badgeColorClasses, badgeColor ?? undefined, 'gray'),\n      )}\n    >\n      {badge}\n    </Badge>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgB,cAAc,EAAE,aAAwC;CACtE,MAAM,OAAO,UAAU,UAAU,CAAC;CAElC,MAAM,MAAM,QAAQ,CAAC,CAAC;CACtB,MAAM,YAAY,UAAU,iBACxB,IAAI,IAAI,KAAK,kBAAkB,CAAC,CAAC,aAAa,IAAI,UAAU,cAAc,IAC1E;CACJ,MAAM,CAAC,WAAW,eAEd,KAAK,MAAM,QAAQ,IAAI,QAAQ,SAAS,CAAC,EAAE,OAC3C,KAAK,KAAK,IAAI,GAAG,UAAU,YAAY,CAAC,EAAE,EAAE,OAC5C,KAAK,EAAE,EAAE,OACT,EACJ;CAEA,MAAM,UAAU,UAAU;CAC1B,MAAM,WAAW,YAAY;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CAGxD,MAAM,SACJ,YAAY,WAAW,CAAC,YAAY,cAAc,QAAQ,KAAK,QAAQ,OAAO,IAAI;CACpF,MAAM,SAAS,WAAW,UAAU,KAAK,MAAM,QAAQ,IAAI,QAAQ,MAAM,IAAI,SAAS;CAEtF,MAAM,aAAa,UAAkB;EACnC,UAAU,KAAK;EAEf,IAAI,SAAS,eAAe,QAAQ,KAAK,OAAO,QAAQ,OAAO;CACjE;CAEA,gBAAgB;EACd,IAAI,CAAC,UAAU,kBAAkB,OAAO,WAAW,aAAa;EAEhE,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;EACxC,IAAI,aAAa,IAAI,UAAU,gBAAgB,MAAM;EACrD,OAAO,QAAQ,aAAa,OAAO,QAAQ,OAAO,IAAI,GAAG;CAC3D,GAAG,CAAC,QAAQ,UAAU,cAAc,CAAC;CAErC,OACE,qBAAC,MAAD;EACE,gBAAc,UAAU,YAAY,SAAS,KAAA;EAC7C,OAAO;EACP,eAAe;EACf,aAAa,UAAU,WAAW,aAAa;EAE/C,GAAI,WACF,UAAU,iBACV,GACE,UAAU,aAAa,uCACvB,UAAU,YAAY,UACxB,CACF;EAZF,UAAA,CAcE,oBAAC,UAAD;GACE,mBAAiB,UAAU,eAAe,QAAQ,UAAU,KAAA;GAC5D,WAAW,GACT,UAAU,aAAa,OACvB,UAAU,WACN,eACA,UAAU,eAAe,QACvB,8CACA,qCACR;GAEC,UAAA,KAAK,KAAK,QACT,qBAAC,aAAD;IAA2B,OAAO,IAAI;IAAtC,UAAA;KACG,IAAI,QAAQ,IAAI,iBAAiB,WAAW,oBAAC,MAAD,EAAM,MAAM,IAAI,KAAO,CAAA;KACnE,IAAI;KACJ,IAAI,QAAQ,IAAI,iBAAiB,WAAW,oBAAC,MAAD,EAAM,MAAM,IAAI,KAAO,CAAA;KACpE,oBAAC,UAAD,EAAe,IAAM,CAAA;IACV;GALK,GAAA,IAAI,GAKT,CACd;EACO,CAAA,GACT,KAAK,KAAK,QACT,oBAAC,aAAD;GAEE,OAAO,IAAI;GACX,YAAA;GACA,WAAW,GAAG,gCAAgC,UAAU,YAAY,aAAa,MAAM;GAEvF,UAAA,oBAAC,gBAAD;IAAgB,WAAW;IACvB,WAAA,WACA,oBAAC,gBAAD;KACE,YAAY,OAAO,UAAU,CAAC;KAC9B,SAAS,OAAO;KAChB,YAAY,OAAO;KACnB,WAAW,eAAe,MAAM,KAAK,KAAA;IACtC,CAAA;GAEW,CAAA;EACL,GAfN,IAAI,GAeE,CACd,CACG;;AAEV;;AAGA,SAAS,SAAS,EAAE,OAA2B;CAC7C,MAAM,EAAE,OAAO,YAAY,iBAAiB,iBAAiB,GAAG;CAEhE,IAAI,UAAU,KAAA,KAAa,UAAU,MAAM,OAAO;CAElD,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,OAAO,gBAAgB,KAAA;EACvB,WAAW,GACT,oBACA,WAAW,mBAAmB,cAAc,KAAA,GAAW,MAAM,CAC/D;EAEC,UAAA;CACI,CAAA;AAEX"}

package/dist/components/layout/wizard.d.ts

@@ -0,0 +1,7 @@
+import { WizardSchema } from "@alfakit/core";
+//#region src/components/layout/wizard.d.ts
+export declare function WizardComponent({ component }: {
+  component: WizardSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=wizard.d.ts.map

package/dist/components/layout/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","names":[],"sources":["../../../src/components/layout/wizard.tsx"],"mappings":";;wBAwCgB,kBAAkB;EAAe,WAAW;oBAAc,IAAA"}

package/dist/components/layout/wizard.js

@@ -0,0 +1,172 @@
+import { useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useStoreSelector } from "../../hooks/use-store.js";
+import { extraProps } from "../../lib/attributes.js";
+import { ActionButton } from "../actions/action-button.js";
+import { useOptionalFormStore } from "../form/form-context.js";
+import { DeferredSchema } from "./deferred.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { collectFields, completedStepIcon, initialWizardStep, persistWizardStep, reportWizardProgress, schemaGapClass, wizardRequestedStepIndex, wizardStepFieldPaths, wizardStepQueryKey, wizardStepToReveal } from "@alfakit/core";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+//#region src/components/layout/wizard.tsx
+/**
+* "Next" validates the current step's fields on the server before moving on; the submit
+* validates the whole form, and the wizard jumps to the first step containing an error
+* when new errors arrive (the user can still move between steps afterwards).
+*/
+const NO_ERRORS = {};
+const NO_FORM_STORE = {
+	get: () => ({ errors: NO_ERRORS }),
+	subscribe: () => () => {}
+};
+function WizardComponent({ component }) {
+	const t = useT();
+	const steps = component.schema ?? [];
+	const [current, setCurrent] = useState(() => initialWizardStep(steps.length, component.startStep, component.persistStepInQueryString));
+	const stepQueryKey = wizardStepQueryKey(component.persistStepInQueryString);
+	const actionContext = usePageActionContext();
+	useEffect(() => {
+		if (stepQueryKey) persistWizardStep(current, stepQueryKey);
+	}, [current, stepQueryKey]);
+	const store = useOptionalFormStore();
+	useEffect(() => {
+		reportWizardProgress(store, current, steps.length);
+	}, [
+		store,
+		current,
+		steps.length
+	]);
+	const errors = useStoreSelector(store?.store ?? NO_FORM_STORE, (state) => state.errors);
+	const stepHasError = (index) => {
+		const step = steps[index];
+		return step ? collectFields(step.schema ?? []).some((field) => errors[field.statePath]) : false;
+	};
+	const [seenErrors, setSeenErrors] = useState({});
+	if (seenErrors !== errors) {
+		setSeenErrors(errors);
+		const reveal = wizardStepToReveal(steps, seenErrors, errors);
+		if (reveal !== null) setCurrent(reveal);
+	}
+	const [seenStepRequest, setSeenStepRequest] = useState(component.goToStep?.id);
+	if (seenStepRequest !== component.goToStep?.id) {
+		setSeenStepRequest(component.goToStep?.id);
+		const requested = wizardRequestedStepIndex(steps, component.goToStep, current, component.skippable);
+		if (requested !== null) setCurrent(requested);
+	}
+	const activeIndex = current;
+	const [validating, setValidating] = useState(false);
+	const next = async () => {
+		const step = steps[activeIndex];
+		if (store && step) {
+			setValidating(true);
+			const valid = await store.validateStep(step.key, step.deferred ? step.deferredPaths ?? [] : wizardStepFieldPaths(step));
+			setValidating(false);
+			if (!valid) return;
+		}
+		setCurrent(activeIndex + 1);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-surface": "wizard",
+		...extraProps(component.extraAttributes, "bg-card rounded-xl border shadow-xs"),
+		children: [
+			/* @__PURE__ */ jsx("ol", {
+				className: "flex flex-wrap gap-2 border-b p-4",
+				"aria-label": t("steps", {}, "Steps"),
+				children: steps.map((step, index) => {
+					const done = index < activeIndex;
+					const active = index === activeIndex;
+					const clickable = component.skippable || index <= activeIndex;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							disabled: !clickable,
+							onClick: () => setCurrent(index),
+							className: cn("flex items-center gap-2 rounded-md px-2 py-1 text-sm transition-colors disabled:cursor-default", active ? "text-foreground font-medium" : "text-muted-foreground", clickable && !active && "hover:text-foreground"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: cn("flex size-6 items-center justify-center rounded-full border text-xs", active && "border-primary bg-primary text-primary-foreground", done && "border-success bg-success text-success-foreground", stepHasError(index) && "border-destructive text-destructive"),
+								children: done ? completedStepIcon(step, component) ? /* @__PURE__ */ jsx(Icon, {
+									name: completedStepIcon(step, component),
+									className: "size-3.5"
+								}) : /* @__PURE__ */ jsx(Icon, {
+									name: "alfakit::schemas.wizard.completed-step",
+									fallback: CheckIcon,
+									className: "size-3.5"
+								}) : step.icon ? /* @__PURE__ */ jsx(Icon, {
+									name: step.icon,
+									className: "size-3.5"
+								}) : index + 1
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "flex flex-col items-start leading-tight",
+								children: [step.label, step.description && /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-xs font-normal",
+									children: step.description
+								})]
+							})]
+						}), index < steps.length - 1 && /* @__PURE__ */ jsx("span", { className: "bg-border hidden h-px w-6 sm:block" })]
+					}, step.key);
+				})
+			}),
+			steps.map((step, index) => /* @__PURE__ */ jsx("div", {
+				className: cn("p-6", index !== activeIndex && "hidden"),
+				children: /* @__PURE__ */ jsx(DeferredSchema, {
+					component: step,
+					children: (loaded) => /* @__PURE__ */ jsx(SchemaRenderer, {
+						components: loaded.schema ?? [],
+						columns: loaded.columns,
+						attributes: loaded.extraAttributes,
+						className: schemaGapClass(loaded) || void 0
+					})
+				})
+			}, step.key)),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2 border-t p-4",
+				children: [component.previousAction === false ? /* @__PURE__ */ jsx("span", {}) : component.previousAction ? /* @__PURE__ */ jsx(ActionButton, {
+					action: {
+						...component.previousAction,
+						disabled: activeIndex === 0 || void 0
+					},
+					context: actionContext,
+					onTrigger: () => setCurrent(activeIndex - 1)
+				}) : /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					disabled: activeIndex === 0,
+					onClick: () => setCurrent(activeIndex - 1),
+					children: component.previousActionLabel ?? t("form.previous_step", {}, "Back")
+				}), activeIndex < steps.length - 1 ? component.nextAction === false ? /* @__PURE__ */ jsx("span", {}) : component.nextAction ? /* @__PURE__ */ jsx(ActionButton, {
+					action: {
+						...component.nextAction,
+						disabled: component.nextAction.disabled || validating || void 0
+					},
+					context: actionContext,
+					onTrigger: () => next()
+				}) : /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					disabled: validating,
+					"aria-busy": validating || void 0,
+					onClick: () => void next(),
+					children: component.nextActionLabel ?? t("form.next_step", {}, "Next")
+				}) : component.submitAction ? /* @__PURE__ */ jsx(ActionButton, {
+					action: component.submitAction,
+					context: actionContext
+				}) : component.submitActionHtml ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "wizard-submit",
+					dangerouslySetInnerHTML: { __html: component.submitActionHtml }
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: component.submitActionLabel
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { WizardComponent };
+
+//# sourceMappingURL=wizard.js.map

package/dist/components/layout/wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.js","names":[],"sources":["../../../src/components/layout/wizard.tsx"],"sourcesContent":["import type { WizardSchema } from '@alfakit/core'\nimport {\n  collectFields,\n  completedStepIcon,\n  initialWizardStep,\n  persistWizardStep,\n  reportWizardProgress,\n  schemaGapClass,\n  wizardRequestedStepIndex,\n  wizardStepFieldPaths,\n  wizardStepQueryKey,\n  wizardStepToReveal,\n} from '@alfakit/core'\nimport { CheckIcon } from 'lucide-react'\nimport { useEffect, useState } from 'react'\nimport { useT } from '../../context'\nimport { useStoreSelector } from '../../hooks/use-store'\nimport { extraProps } from '../../lib/attributes'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { ActionButton } from '../actions/action-button'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { Button } from '../ui/button'\nimport { DeferredSchema } from './deferred'\n\n/**\n * \"Next\" validates the current step's fields on the server before moving on; the submit\n * validates the whole form, and the wizard jumps to the first step containing an error\n * when new errors arrive (the user can still move between steps afterwards).\n */\n// Used when a wizard renders outside a form. Module-level so the snapshot stays stable;\n// a new object per read makes useSyncExternalStore re-render forever.\nconst NO_ERRORS: Record<string, string[]> = {}\nconst NO_FORM_STORE = {\n  get: () => ({ errors: NO_ERRORS }),\n  subscribe: () => () => {},\n}\n\nexport function WizardComponent({ component }: { component: WizardSchema }) {\n  const t = useT()\n  const steps = component.schema ?? []\n  const [current, setCurrent] = useState(() =>\n    initialWizardStep(steps.length, component.startStep, component.persistStepInQueryString),\n  )\n\n  const stepQueryKey = wizardStepQueryKey(component.persistStepInQueryString)\n  const actionContext = usePageActionContext()\n\n  useEffect(() => {\n    if (stepQueryKey) persistWizardStep(current, stepQueryKey)\n  }, [current, stepQueryKey])\n  const store = useOptionalFormStore()\n\n  // An action modal around this wizard shows its submit button on the last step only.\n  useEffect(() => {\n    reportWizardProgress(store, current, steps.length)\n  }, [store, current, steps.length])\n  const errors = useStoreSelector(store?.store ?? NO_FORM_STORE, (state) => state.errors)\n\n  const stepHasError = (index: number) => {\n    const step = steps[index]\n\n    return step ? collectFields(step.schema ?? []).some((field) => errors[field.statePath]) : false\n  }\n\n  const [seenErrors, setSeenErrors] = useState<Record<string, string[]>>({})\n\n  if (seenErrors !== errors) {\n    setSeenErrors(errors)\n\n    const reveal = wizardStepToReveal(steps, seenErrors, errors)\n\n    if (reveal !== null) setCurrent(reveal)\n  }\n\n  // `goToStep()` from the server: move once per request (each carries a new id).\n  const [seenStepRequest, setSeenStepRequest] = useState(component.goToStep?.id)\n\n  if (seenStepRequest !== component.goToStep?.id) {\n    setSeenStepRequest(component.goToStep?.id)\n\n    const requested = wizardRequestedStepIndex(\n      steps,\n      component.goToStep,\n      current,\n      component.skippable,\n    )\n\n    if (requested !== null) setCurrent(requested)\n  }\n\n  const activeIndex = current\n  const [validating, setValidating] = useState(false)\n\n  const next = async () => {\n    const step = steps[activeIndex]\n\n    if (store && step) {\n      setValidating(true)\n      const valid = await store.validateStep(\n        step.key,\n        step.deferred ? (step.deferredPaths ?? []) : wizardStepFieldPaths(step),\n      )\n      setValidating(false)\n\n      if (!valid) return\n    }\n\n    setCurrent(activeIndex + 1)\n  }\n\n  return (\n    <div\n      data-surface=\"wizard\"\n\n      {...extraProps(component.extraAttributes, 'bg-card rounded-xl border shadow-xs')}\n    >\n      <ol className=\"flex flex-wrap gap-2 border-b p-4\" aria-label={t('steps', {}, 'Steps')}>\n        {steps.map((step, index) => {\n          const done = index < activeIndex\n          const active = index === activeIndex\n          const clickable = component.skippable || index <= activeIndex\n\n          return (\n            <li key={step.key} className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                disabled={!clickable}\n                onClick={() => setCurrent(index)}\n                className={cn(\n                  'flex items-center gap-2 rounded-md px-2 py-1 text-sm transition-colors disabled:cursor-default',\n                  active ? 'text-foreground font-medium' : 'text-muted-foreground',\n                  clickable && !active && 'hover:text-foreground',\n                )}\n              >\n                <span\n                  className={cn(\n                    'flex size-6 items-center justify-center rounded-full border text-xs',\n                    active && 'border-primary bg-primary text-primary-foreground',\n                    done && 'border-success bg-success text-success-foreground',\n                    stepHasError(index) && 'border-destructive text-destructive',\n                  )}\n                >\n                  {done ? (\n                    completedStepIcon(step, component) ? (\n                      <Icon name={completedStepIcon(step, component)} className=\"size-3.5\" />\n                    ) : (\n                      <Icon\n                        name=\"alfakit::schemas.wizard.completed-step\"\n                        fallback={CheckIcon}\n                        className=\"size-3.5\"\n                      />\n                    )\n                  ) : step.icon ? (\n                    <Icon name={step.icon} className=\"size-3.5\" />\n                  ) : (\n                    index + 1\n                  )}\n                </span>\n                <span className=\"flex flex-col items-start leading-tight\">\n                  {step.label}\n                  {step.description && (\n                    <span className=\"text-muted-foreground text-xs font-normal\">\n                      {step.description}\n                    </span>\n                  )}\n                </span>\n              </button>\n              {index < steps.length - 1 && <span className=\"bg-border hidden h-px w-6 sm:block\" />}\n            </li>\n          )\n        })}\n      </ol>\n      {steps.map((step, index) => (\n        <div key={step.key} className={cn('p-6', index !== activeIndex && 'hidden')}>\n          <DeferredSchema component={step}>\n            {(loaded) => (\n              <SchemaRenderer\n                components={loaded.schema ?? []}\n                columns={loaded.columns}\n                attributes={loaded.extraAttributes}\n                className={schemaGapClass(loaded) || undefined}\n              />\n            )}\n          </DeferredSchema>\n        </div>\n      ))}\n      <div className=\"flex items-center justify-between gap-2 border-t p-4\">\n        {component.previousAction === false ? (\n          <span />\n        ) : component.previousAction ? (\n          <ActionButton\n            action={{ ...component.previousAction, disabled: activeIndex === 0 || undefined }}\n            context={actionContext}\n            onTrigger={() => setCurrent(activeIndex - 1)}\n          />\n        ) : (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            disabled={activeIndex === 0}\n            onClick={() => setCurrent(activeIndex - 1)}\n          >\n            {component.previousActionLabel ?? t('form.previous_step', {}, 'Back')}\n          </Button>\n        )}\n        {activeIndex < steps.length - 1 ? (\n          component.nextAction === false ? (\n            <span />\n          ) : component.nextAction ? (\n            <ActionButton\n              action={{\n                ...component.nextAction,\n                disabled: component.nextAction.disabled || validating || undefined,\n              }}\n              context={actionContext}\n              onTrigger={() => next()}\n            />\n          ) : (\n            <Button\n              type=\"button\"\n              disabled={validating}\n              aria-busy={validating || undefined}\n              onClick={() => void next()}\n            >\n              {component.nextActionLabel ?? t('form.next_step', {}, 'Next')}\n            </Button>\n          )\n        ) : component.submitAction ? (\n          <ActionButton action={component.submitAction} context={actionContext} />\n        ) : component.submitActionHtml ? (\n          <div\n            data-slot=\"wizard-submit\"\n            dangerouslySetInnerHTML={{ __html: component.submitActionHtml }}\n          />\n        ) : (\n          <span className=\"text-muted-foreground text-xs\">{component.submitActionLabel}</span>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/notifications/flash-toasts.d.ts

@@ -0,0 +1,20 @@
+import { NotificationActionSchema, NotificationSchema } from "@alfakit/core";
+//#region src/components/notifications/flash-toasts.d.ts
+/**
+ * Turns flashed Alfakit notifications into sonner toasts. Mount once. Inertia 3 delivers
+ * flash data as `page.flash` (and a `flash` event), not as a page prop, so this shares the
+ * listener the standalone toaster uses.
+ */
+export declare function FlashToasts(): null;
+export declare function showToast(notification: NotificationSchema, Custom?: React.ComponentType<{
+  notification: NotificationSchema;
+}>): void;
+export declare function NotificationActionButton({ action, toastId, onMarkAsRead, onMarkAsUnread }: {
+  action: NotificationActionSchema;
+  toastId?: string;
+  onMarkAsRead?: () => void;
+  /** Database notifications: `markAsUnread()`. */
+  onMarkAsUnread?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=flash-toasts.d.ts.map

package/dist/components/notifications/flash-toasts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flash-toasts.d.ts","names":[],"sources":["../../../src/components/notifications/flash-toasts.tsx"],"mappings":";;;;;;;wBAyBgB;wBA4BA,UACd,cAAc,oBACd,SAAS,MAAM;EAAgB,cAAc;;wBAqE/B,2BACd,QACA,SACA,cACA;EAEA,QAAQ;EACR;EACA;;EAEA;oBACD,IAAA"}

package/dist/components/notifications/flash-toasts.js

@@ -0,0 +1,121 @@
+import { useRegistry } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { colorClass, cssColor, ghostButtonColorClasses, outlineButtonColorClasses, solidButtonColorClasses, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { ensureFlashToasts } from "../../standalone/runtime.js";
+import { UndoButton } from "./undo-button.js";
+import { notificationTintStyles, onCloseNotification, resolveActionSize } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+//#region src/components/notifications/flash-toasts.tsx
+/**
+* Turns flashed Alfakit notifications into sonner toasts. Mount once. Inertia 3 delivers
+* flash data as `page.flash` (and a `flash` event), not as a page prop, so this shares the
+* listener the standalone toaster uses.
+*/
+function FlashToasts() {
+	const registry = useRegistry();
+	useEffect(() => {
+		ensureFlashToasts(registry);
+	}, [registry]);
+	return null;
+}
+let closeListening = false;
+let toasterId;
+/** Send Alfakit's toasts to the `<Toaster id>` with this id (undefined: the id-less one). */
+function setToasterId(id) {
+	toasterId = id;
+}
+/** `closeNotification(id)` (or a `close-notification` event) dismisses that toast. */
+function listenForClosedNotifications() {
+	if (closeListening || typeof window === "undefined") return;
+	closeListening = true;
+	onCloseNotification((id) => toast.dismiss(id));
+}
+function showToast(notification, Custom) {
+	listenForClosedNotifications();
+	const duration = notification.duration === "persistent" ? Infinity : notification.duration ?? 6e3;
+	if (Custom) {
+		toast.custom(() => /* @__PURE__ */ jsx(Custom, { notification }), {
+			id: notification.id,
+			duration,
+			toasterId
+		});
+		return;
+	}
+	const method = notification.status === "success" ? toast.success : notification.status === "danger" ? toast.error : notification.status === "warning" ? toast.warning : notification.status === "info" ? toast.info : toast;
+	const hasActions = (notification.actions?.length ?? 0) > 0 || Boolean(notification.undo);
+	method(notification.title ?? "", {
+		id: notification.id,
+		duration,
+		toasterId,
+		style: notification.color ? notificationTintStyles(cssColor(notification.color)).toast : void 0,
+		description: notification.body || hasActions ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [notification.body && /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: notification.body } }), hasActions && /* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex flex-wrap items-center gap-1",
+				children: [notification.undo && /* @__PURE__ */ jsx(UndoButton, {
+					undo: notification.undo,
+					toastId: notification.id
+				}), (notification.actions ?? []).map((action) => /* @__PURE__ */ jsx(NotificationActionButton, {
+					action,
+					toastId: notification.id
+				}, action.name))]
+			})]
+		}) : void 0,
+		icon: notification.icon ? /* @__PURE__ */ jsx(Icon, {
+			name: notification.icon,
+			className: cn("size-4", notification.iconColor && textColorClasses[notification.iconColor])
+		}) : void 0
+	});
+}
+function NotificationActionButton({ action, toastId, onMarkAsRead, onMarkAsUnread }) {
+	const run = () => {
+		if (action.dispatch) window.dispatchEvent(new CustomEvent(action.dispatch.event, { detail: action.dispatch.data }));
+		if (action.markAsRead) onMarkAsRead?.();
+		if (action.markAsUnread) onMarkAsUnread?.();
+		if (action.close && toastId) toast.dismiss(toastId);
+		if (action.url) {
+			if (action.openUrlInNewTab) window.open(action.url, "_blank", "noopener");
+			else router.visit(action.url);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		size: resolveActionSize(action.size, "xs"),
+		variant: notificationActionVariant(action),
+		className: notificationActionClasses(action),
+		onClick: run,
+		children: [action.icon && /* @__PURE__ */ jsx(Icon, {
+			name: action.icon,
+			className: "size-3.5"
+		}), action.label]
+	});
+}
+function notificationActionVariant(action) {
+	switch (action.variant) {
+		case "button": return "default";
+		case "outline": return "outline";
+		case "ghost":
+		case "icon-button": return "ghost";
+		default: return "link";
+	}
+}
+/** The action's `color()` applied to its variant (links default to the primary colour). */
+function notificationActionClasses(action) {
+	if (!action.color) return void 0;
+	switch (action.variant) {
+		case "button": return colorClass(solidButtonColorClasses, action.color, "primary");
+		case "outline": return colorClass(outlineButtonColorClasses, action.color, "gray");
+		case "ghost":
+		case "icon-button": return colorClass(ghostButtonColorClasses, action.color, "gray");
+		default: return colorClass(textColorClasses, action.color, "primary");
+	}
+}
+//#endregion
+export { FlashToasts, NotificationActionButton, listenForClosedNotifications, setToasterId, showToast };
+
+//# sourceMappingURL=flash-toasts.js.map

package/dist/components/notifications/flash-toasts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flash-toasts.js","names":[],"sources":["../../../src/components/notifications/flash-toasts.tsx"],"sourcesContent":["import type { NotificationActionSchema, NotificationSchema } from '@alfakit/core'\nimport { notificationTintStyles, onCloseNotification, resolveActionSize } from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { useEffect } from 'react'\nimport { toast } from 'sonner'\nimport { useRegistry } from '../../context'\nimport {\n  colorClass,\n  cssColor,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { ensureFlashToasts } from '../../standalone/runtime'\nimport { Button } from '../ui/button'\nimport { UndoButton } from './undo-button'\n\n/**\n * Turns flashed Alfakit notifications into sonner toasts. Mount once. Inertia 3 delivers\n * flash data as `page.flash` (and a `flash` event), not as a page prop, so this shares the\n * listener the standalone toaster uses.\n */\nexport function FlashToasts() {\n  const registry = useRegistry()\n\n  useEffect(() => {\n    ensureFlashToasts(registry)\n  }, [registry])\n\n  return null\n}\n\nlet closeListening = false\n\n// Starter kit mode: toasts go to Alfakit's own toaster (`STARTER_KIT_TOASTER_ID`).\nlet toasterId: string | undefined\n\n/** Send Alfakit's toasts to the `<Toaster id>` with this id (undefined: the id-less one). */\nexport function setToasterId(id: string | undefined): void {\n  toasterId = id\n}\n\n/** `closeNotification(id)` (or a `close-notification` event) dismisses that toast. */\nexport function listenForClosedNotifications(): void {\n  if (closeListening || typeof window === 'undefined') return\n\n  closeListening = true\n  onCloseNotification((id) => toast.dismiss(id))\n}\n\nexport function showToast(\n  notification: NotificationSchema,\n  Custom?: React.ComponentType<{ notification: NotificationSchema }>,\n) {\n  listenForClosedNotifications()\n\n  const duration =\n    notification.duration === 'persistent' ? Infinity : (notification.duration ?? 6000)\n\n  if (Custom) {\n    toast.custom(() => <Custom notification={notification} />, {\n      id: notification.id,\n      duration,\n      toasterId,\n    })\n\n    return\n  }\n\n  const method =\n    notification.status === 'success'\n      ? toast.success\n      : notification.status === 'danger'\n        ? toast.error\n        : notification.status === 'warning'\n          ? toast.warning\n          : notification.status === 'info'\n            ? toast.info\n            : toast\n\n  const hasActions = (notification.actions?.length ?? 0) > 0 || Boolean(notification.undo)\n\n  method(notification.title ?? '', {\n    id: notification.id,\n    duration,\n    toasterId,\n    // `color()`: tints the toast's background.\n    style: notification.color\n      ? (notificationTintStyles(cssColor(notification.color)).toast as React.CSSProperties)\n      : undefined,\n    // Action buttons go below the body (as in the Vue and Svelte toasts): sonner's `action`\n    // slot sits beside the title and squeezes it into a narrow column.\n    description:\n      notification.body || hasActions ? (\n        <div className=\"flex flex-col gap-1\">\n          {notification.body && <span dangerouslySetInnerHTML={{ __html: notification.body }} />}\n          {hasActions && (\n            <div className=\"mt-1 flex flex-wrap items-center gap-1\">\n              {notification.undo && (\n                <UndoButton undo={notification.undo} toastId={notification.id} />\n              )}\n              {(notification.actions ?? []).map((action) => (\n                <NotificationActionButton\n                  key={action.name}\n                  action={action}\n                  toastId={notification.id}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ) : undefined,\n    icon: notification.icon ? (\n      <Icon\n        name={notification.icon}\n        className={cn('size-4', notification.iconColor && textColorClasses[notification.iconColor])}\n      />\n    ) : undefined,\n  })\n}\n\nexport function NotificationActionButton({\n  action,\n  toastId,\n  onMarkAsRead,\n  onMarkAsUnread,\n}: {\n  action: NotificationActionSchema\n  toastId?: string\n  onMarkAsRead?: () => void\n  /** Database notifications: `markAsUnread()`. */\n  onMarkAsUnread?: () => void\n}) {\n  const run = () => {\n    if (action.dispatch) {\n      window.dispatchEvent(new CustomEvent(action.dispatch.event, { detail: action.dispatch.data }))\n    }\n\n    if (action.markAsRead) onMarkAsRead?.()\n    if (action.markAsUnread) onMarkAsUnread?.()\n    if (action.close && toastId) toast.dismiss(toastId)\n\n    if (action.url) {\n      if (action.openUrlInNewTab) {\n        window.open(action.url, '_blank', 'noopener')\n      } else {\n        router.visit(action.url)\n      }\n    }\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      size={resolveActionSize(action.size, 'xs')}\n      variant={notificationActionVariant(action)}\n      className={notificationActionClasses(action)}\n      onClick={run}\n    >\n      {action.icon && <Icon name={action.icon} className=\"size-3.5\" />}\n      {action.label}\n    </Button>\n  )\n}\n\nfunction notificationActionVariant(\n  action: NotificationActionSchema,\n): 'default' | 'outline' | 'ghost' | 'link' {\n  switch (action.variant) {\n    case 'button':\n      return 'default'\n    case 'outline':\n      return 'outline'\n    case 'ghost':\n    case 'icon-button':\n      return 'ghost'\n    default:\n      return 'link'\n  }\n}\n\n/** The action's `color()` applied to its variant (links default to the primary colour). */\nfunction notificationActionClasses(action: NotificationActionSchema): string | undefined {\n  if (!action.color) return undefined\n\n  switch (action.variant) {\n    case 'button':\n      return colorClass(solidButtonColorClasses, action.color, 'primary')\n    case 'outline':\n      return colorClass(outlineButtonColorClasses, action.color, 'gray')\n    case 'ghost':\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, action.color, 'gray')\n    default:\n      return colorClass(textColorClasses, action.color, 'primary')\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,SAAgB,cAAc;CAC5B,MAAM,WAAW,YAAY;CAE7B,gBAAgB;EACd,kBAAkB,QAAQ;CAC5B,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO;AACT;AAEA,IAAI,iBAAiB;AAGrB,IAAI;;AAGJ,SAAgB,aAAa,IAA8B;CACzD,YAAY;AACd;;AAGA,SAAgB,+BAAqC;CACnD,IAAI,kBAAkB,OAAO,WAAW,aAAa;CAErD,iBAAiB;CACjB,qBAAqB,OAAO,MAAM,QAAQ,EAAE,CAAC;AAC/C;AAEA,SAAgB,UACd,cACA,QACA;CACA,6BAA6B;CAE7B,MAAM,WACJ,aAAa,aAAa,eAAe,WAAY,aAAa,YAAY;CAEhF,IAAI,QAAQ;EACV,MAAM,aAAa,oBAAC,QAAD,EAAsB,aAAe,CAAA,GAAG;GACzD,IAAI,aAAa;GACjB;GACA;EACF,CAAC;EAED;CACF;CAEA,MAAM,SACJ,aAAa,WAAW,YACpB,MAAM,UACN,aAAa,WAAW,WACtB,MAAM,QACN,aAAa,WAAW,YACtB,MAAM,UACN,aAAa,WAAW,SACtB,MAAM,OACN;CAEZ,MAAM,cAAc,aAAa,SAAS,UAAU,KAAK,KAAK,QAAQ,aAAa,IAAI;CAEvF,OAAO,aAAa,SAAS,IAAI;EAC/B,IAAI,aAAa;EACjB;EACA;EAEA,OAAO,aAAa,QACf,uBAAuB,SAAS,aAAa,KAAK,CAAC,CAAC,CAAC,QACtD,KAAA;EAGJ,aACE,aAAa,QAAQ,aACnB,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,aAAa,QAAQ,oBAAC,QAAD,EAAM,yBAAyB,EAAE,QAAQ,aAAa,KAAK,EAAI,CAAA,GACpF,cACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,aAAa,QACZ,oBAAC,YAAD;KAAY,MAAM,aAAa;KAAM,SAAS,aAAa;IAAK,CAAA,IAEhE,aAAa,WAAW,CAAC,EAAA,CAAG,KAAK,WACjC,oBAAC,0BAAD;KAEU;KACR,SAAS,aAAa;IACvB,GAHM,OAAO,IAGb,CACF,CACE;GAEJ,CAAA,CAAA;EACH,CAAA,IAAA,KAAA;EACN,MAAM,aAAa,OACjB,oBAAC,MAAD;GACE,MAAM,aAAa;GACnB,WAAW,GAAG,UAAU,aAAa,aAAa,iBAAiB,aAAa,UAAU;EAC3F,CAAA,IACC,KAAA;CACN,CAAC;AACH;AAEA,SAAgB,yBAAyB,EACvC,QACA,SACA,cACA,kBAOC;CACD,MAAM,YAAY;EAChB,IAAI,OAAO,UACT,OAAO,cAAc,IAAI,YAAY,OAAO,SAAS,OAAO,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAC,CAAC;EAG/F,IAAI,OAAO,YAAY,eAAe;EACtC,IAAI,OAAO,cAAc,iBAAiB;EAC1C,IAAI,OAAO,SAAS,SAAS,MAAM,QAAQ,OAAO;EAElD,IAAI,OAAO,KAAK;GACd,IAAI,OAAO,iBACT,OAAO,KAAK,OAAO,KAAK,UAAU,UAAU;QAE5C,OAAO,MAAM,OAAO,GAAG;EAE3B;CACF;CAEA,OACE,qBAAC,QAAD;EACE,MAAK;EACL,MAAM,kBAAkB,OAAO,MAAM,IAAI;EACzC,SAAS,0BAA0B,MAAM;EACzC,WAAW,0BAA0B,MAAM;EAC3C,SAAS;EALX,UAAA,CAOG,OAAO,QAAQ,oBAAC,MAAD;GAAM,MAAM,OAAO;GAAM,WAAU;EAAY,CAAA,GAC9D,OAAO,KACF;;AAEZ;AAEA,SAAS,0BACP,QAC0C;CAC1C,QAAQ,OAAO,SAAf;EACE,KAAK,UACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK;EACL,KAAK,eACH,OAAO;EACT,SACE,OAAO;CACX;AACF;;AAGA,SAAS,0BAA0B,QAAsD;CACvF,IAAI,CAAC,OAAO,OAAO,OAAO,KAAA;CAE1B,QAAQ,OAAO,SAAf;EACE,KAAK,UACH,OAAO,WAAW,yBAAyB,OAAO,OAAO,SAAS;EACpE,KAAK,WACH,OAAO,WAAW,2BAA2B,OAAO,OAAO,MAAM;EACnE,KAAK;EACL,KAAK,eACH,OAAO,WAAW,yBAAyB,OAAO,OAAO,MAAM;EACjE,SACE,OAAO,WAAW,kBAAkB,OAAO,OAAO,SAAS;CAC/D;AACF"}

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

@@ -0,0 +1,5 @@
+import { FlashToasts, NotificationActionButton, showToast } from "./flash-toasts.js";
+import { NotificationsMenu } from "./notifications-menu.js";
+import { RealtimeNotifications } from "./realtime-notifications.js";
+import { UndoButton } from "./undo-button.js";
+export { FlashToasts, NotificationActionButton, NotificationsMenu, RealtimeNotifications, UndoButton, showToast };

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

@@ -0,0 +1,15 @@
+//#region src/components/notifications/notifications-menu.d.ts
+export interface NotificationsMenuProps {
+  /**
+   * Where the trigger sits: `topbar` (an icon button, default) or `sidebar` (a full-width
+   * row with a label, for layouts that move the bell into the sidebar).
+   */
+  variant?: 'topbar' | 'sidebar';
+}
+/**
+ * Bell menu for database notifications. It also opens when something calls
+ * `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).
+ */
+export declare function NotificationsMenu({ variant }?: NotificationsMenuProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=notifications-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-menu.d.ts","names":[],"sources":["../../../src/components/notifications/notifications-menu.tsx"],"mappings":";iBAmBiB;;;;;EAKf;;;;;;wBAOc,oBAAoB,YAAsB,yCAA2B,IAAA"}