@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/actions/action-button.js

@@ -0,0 +1,150 @@
+import { useActionRunner, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass, ghostButtonColorClasses, outlineButtonColorClasses, solidButtonColorClasses, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { useStoreSelector } from "../../hooks/use-store.js";
+import { extraProps } from "../../lib/attributes.js";
+import { Spinner } from "../ui/spinner.js";
+import { bindsKeyBindings, formatKeyBinding, iconButtonSize, registerKeyBindings, resolveActionSize } from "@alfakit/core";
+import { Link } from "@inertiajs/react";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actions/action-button.tsx
+/** `labeledFrom()`: the label shows from the breakpoint up. */
+const LABEL_FROM = {
+	sm: "hidden sm:inline",
+	md: "hidden md:inline",
+	lg: "hidden lg:inline",
+	xl: "hidden xl:inline",
+	"2xl": "hidden 2xl:inline"
+};
+/** `labeledFrom()`: square (icon-only) padding below the breakpoint. */
+const ICON_ONLY_BELOW = {
+	sm: "max-sm:aspect-square max-sm:px-0",
+	md: "max-md:aspect-square max-md:px-0",
+	lg: "max-lg:aspect-square max-lg:px-0",
+	xl: "max-xl:aspect-square max-xl:px-0",
+	"2xl": "max-2xl:aspect-square max-2xl:px-0"
+};
+/** The badge trigger style (`badge()` without an argument). */
+const BADGE_TRIGGER_CLASSES = "h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5";
+function buttonClasses(action, variant) {
+	const color = action.color ?? "primary";
+	switch (variant) {
+		case "outline": return cn("bg-background border", colorClass(outlineButtonColorClasses, color, "gray"));
+		case "ghost": return colorClass(ghostButtonColorClasses, color, "gray");
+		case "link": return cn("h-auto p-0 underline-offset-4 hover:underline", colorClass(textColorClasses, color, "primary"));
+		case "icon-button": return colorClass(ghostButtonColorClasses, color, "gray");
+		case "badge": return cn(BADGE_TRIGGER_CLASSES, colorClass(badgeColorClasses, color, "primary"));
+		default: return colorClass(solidButtonColorClasses, color, "primary");
+	}
+}
+function ActionButton({ action, context, size = "default", className, variant: variantProp, withKeyBindings = true, onTrigger }) {
+	const runner = useActionRunner();
+	const t = useT();
+	const loading = useStoreSelector(runner.store, (state) => state.loading === action.name);
+	const processing = useStoreSelector(runner.store, (state) => state.modals.some((modal) => modal.action.name === action.name && modal.processing));
+	const variant = variantProp ?? (action.outlined ? "outline" : action.variant ?? (action.hasAction || action.hasModal || action.url ? "link" : "button"));
+	const isIconOnly = variant === "icon-button" || !action.label;
+	const labeledFrom = !isIconOnly && action.icon && action.labeledFrom ? action.labeledFrom : null;
+	const busy = loading || processing;
+	const bindsKeys = withKeyBindings && bindsKeyBindings(action, context);
+	useEffect(() => {
+		if (!bindsKeys || !action.keyBindings) return;
+		return registerKeyBindings([{
+			keys: action.keyBindings,
+			handler: () => void (onTrigger ? onTrigger(action, context) : runner.trigger(action, context))
+		}]);
+	}, [
+		action,
+		context,
+		runner,
+		bindsKeys,
+		onTrigger
+	]);
+	const isPlainLink = Boolean(action.url && !action.hasAction && !action.hasModal && !action.disabled);
+	const onClick = (event) => {
+		if (isPlainLink) return;
+		event.preventDefault();
+		onTrigger ? onTrigger(action, context) : runner.trigger(action, context);
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		busy ? /* @__PURE__ */ jsx(Spinner, {}) : action.icon && action.iconPosition !== "after" ? /* @__PURE__ */ jsx(Icon, { name: action.icon }) : null,
+		!isIconOnly && /* @__PURE__ */ jsx("span", {
+			className: labeledFrom ? LABEL_FROM[labeledFrom] : void 0,
+			children: action.label
+		}),
+		action.icon && action.iconPosition === "after" && !busy && /* @__PURE__ */ jsx(Icon, { name: action.icon }),
+		action.badge !== void 0 && action.badge !== null && /* @__PURE__ */ jsx(Badge, {
+			variant: "outline",
+			className: cn("ms-1 px-1.5 py-0", colorClass(badgeColorClasses, action.badgeColor, "gray")),
+			children: action.badge
+		})
+	] });
+	const accessibleName = action.label ?? action.tooltip ?? action.name;
+	const newTabHint = t("opens_in_new_tab", {}, "(opens in a new tab)");
+	const buttonSize = variant === "badge" ? "xs" : resolveActionSize(action.size, size);
+	const sizeProp = isIconOnly ? iconButtonSize(buttonSize) : buttonSize;
+	const classes = cn(buttonClasses(action, variant), labeledFrom && ICON_ONLY_BELOW[labeledFrom], className);
+	const ariaLabel = isIconOnly || labeledFrom ? accessibleName : void 0;
+	const button = isPlainLink ? action.openUrlInNewTab ? /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		variant: "plain",
+		size: sizeProp,
+		disabled: action.disabled,
+		"aria-label": ariaLabel ? `${ariaLabel} ${newTabHint}` : void 0,
+		...extraProps(action.extraAttributes, classes),
+		children: /* @__PURE__ */ jsxs("a", {
+			href: action.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: [content, !isIconOnly && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [" ", newTabHint]
+			})]
+		})
+	}) : /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		variant: "plain",
+		size: sizeProp,
+		disabled: action.disabled,
+		"aria-label": ariaLabel,
+		...extraProps(action.extraAttributes, classes),
+		children: /* @__PURE__ */ jsx(Link, {
+			href: action.url ?? "#",
+			children: content
+		})
+	}) : /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "plain",
+		size: sizeProp,
+		disabled: action.disabled || busy,
+		onClick,
+		"aria-label": ariaLabel,
+		...extraProps(action.extraAttributes, classes),
+		children: content
+	});
+	const tooltip = action.tooltip ?? (isIconOnly ? action.label : void 0);
+	const shortcut = bindsKeys ? action.keyBindings?.[0] : void 0;
+	if (!tooltip && !shortcut) return button;
+	const trigger = action.disabled && tooltip ? /* @__PURE__ */ jsx("span", {
+		tabIndex: 0,
+		className: "inline-flex",
+		"data-slot": "action-disabled-tooltip",
+		children: button
+	}) : button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: trigger
+	}), /* @__PURE__ */ jsxs(TooltipContent, { children: [tooltip, shortcut && /* @__PURE__ */ jsx("kbd", {
+		className: "ms-2 rounded border border-white/20 px-1 font-mono text-[10px]",
+		children: formatKeyBinding(shortcut)
+	})] })] });
+}
+//#endregion
+export { ActionButton };
+
+//# sourceMappingURL=action-button.js.map

package/dist/components/actions/action-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.js","names":[],"sources":["../../../src/components/actions/action-button.tsx"],"sourcesContent":["import type { ActionContext, ActionSchema } from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  formatKeyBinding,\n  iconButtonSize,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { useEffect, type MouseEvent } from 'react'\nimport { useActionRunner, useT } from '../../context'\nimport { useStoreSelector } from '../../hooks/use-store'\nimport { extraProps } from '../../lib/attributes'\nimport {\n  badgeColorClasses,\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Spinner } from '../ui/spinner'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'\n\n/** `labeledFrom()`: the label shows from the breakpoint up. */\nconst LABEL_FROM: Record<string, string> = {\n  sm: 'hidden sm:inline',\n  md: 'hidden md:inline',\n  lg: 'hidden lg:inline',\n  xl: 'hidden xl:inline',\n  '2xl': 'hidden 2xl:inline',\n}\n\n/** `labeledFrom()`: square (icon-only) padding below the breakpoint. */\nconst ICON_ONLY_BELOW: Record<string, string> = {\n  sm: 'max-sm:aspect-square max-sm:px-0',\n  md: 'max-md:aspect-square max-md:px-0',\n  lg: 'max-lg:aspect-square max-lg:px-0',\n  xl: 'max-xl:aspect-square max-xl:px-0',\n  '2xl': 'max-2xl:aspect-square max-2xl:px-0',\n}\n\nexport interface ActionButtonProps {\n  action: ActionSchema\n  context: ActionContext\n  size?: 'xs' | 'sm' | 'default' | 'lg'\n  className?: string\n  /** Force a variant (e.g. menu items render as plain rows). */\n  variant?: ActionSchema['variant']\n  /** Bind the action's key bindings globally while mounted. */\n  withKeyBindings?: boolean\n  /** Override how the action runs (e.g. a form submits its values). */\n  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n}\n\n/** The badge trigger style (`badge()` without an argument). */\nconst BADGE_TRIGGER_CLASSES =\n  \"h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5\"\n\nfunction buttonClasses(action: ActionSchema, variant: ActionSchema['variant']): string {\n  const color = action.color ?? 'primary'\n\n  switch (variant) {\n    case 'outline':\n      return cn('bg-background border', colorClass(outlineButtonColorClasses, color, 'gray'))\n    case 'ghost':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'link':\n      return cn(\n        'h-auto p-0 underline-offset-4 hover:underline',\n        colorClass(textColorClasses, color, 'primary'),\n      )\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'badge':\n      // `badge()`: a tinted pill in the action's colour.\n      return cn(BADGE_TRIGGER_CLASSES, colorClass(badgeColorClasses, color, 'primary'))\n    default:\n      return colorClass(solidButtonColorClasses, color, 'primary')\n  }\n}\n\nexport function ActionButton({\n  action,\n  context,\n  size = 'default',\n  className,\n  variant: variantProp,\n  withKeyBindings = true,\n  onTrigger,\n}: ActionButtonProps) {\n  const runner = useActionRunner()\n  const t = useT()\n  const loading = useStoreSelector(runner.store, (state) => state.loading === action.name)\n  const processing = useStoreSelector(runner.store, (state) =>\n    state.modals.some((modal) => modal.action.name === action.name && modal.processing),\n  )\n\n  const variant =\n    variantProp ??\n    (action.outlined\n      ? 'outline'\n      : (action.variant ?? (action.hasAction || action.hasModal || action.url ? 'link' : 'button')))\n  const isIconOnly = variant === 'icon-button' || !action.label\n  // `labeledFrom()`: icon only on small screens, so the label must be the accessible name.\n  const labeledFrom = !isIconOnly && action.icon && action.labeledFrom ? action.labeledFrom : null\n  const busy = loading || processing\n  // Record actions repeat per row: a global shortcut would run them for every record.\n  const bindsKeys = withKeyBindings && bindsKeyBindings(action, context)\n\n  useEffect(() => {\n    if (!bindsKeys || !action.keyBindings) {\n      return\n    }\n\n    return registerKeyBindings([\n      {\n        keys: action.keyBindings,\n        handler: () =>\n          void (onTrigger ? onTrigger(action, context) : runner.trigger(action, context)),\n      },\n    ])\n  }, [action, context, runner, bindsKeys, onTrigger])\n\n  // A disabled link renders as a disabled button so it cannot navigate.\n  const isPlainLink = Boolean(\n    action.url && !action.hasAction && !action.hasModal && !action.disabled,\n  )\n\n  const onClick = (event: MouseEvent) => {\n    if (isPlainLink) {\n      return // Plain link: let Inertia Link / anchor handle it.\n    }\n\n    event.preventDefault()\n    void (onTrigger ? onTrigger(action, context) : runner.trigger(action, context))\n  }\n\n  const content = (\n    <>\n      {busy ? (\n        <Spinner />\n      ) : action.icon && action.iconPosition !== 'after' ? (\n        <Icon name={action.icon} />\n      ) : null}\n      {!isIconOnly && (\n        <span className={labeledFrom ? LABEL_FROM[labeledFrom] : undefined}>{action.label}</span>\n      )}\n      {action.icon && action.iconPosition === 'after' && !busy && <Icon name={action.icon} />}\n      {action.badge !== undefined && action.badge !== null && (\n        <Badge\n          variant=\"outline\"\n          className={cn(\n            'ms-1 px-1.5 py-0',\n            colorClass(badgeColorClasses, action.badgeColor, 'gray'),\n          )}\n        >\n          {action.badge}\n        </Badge>\n      )}\n    </>\n  )\n\n  const accessibleName = action.label ?? action.tooltip ?? action.name\n  const newTabHint = t('opens_in_new_tab', {}, '(opens in a new tab)')\n  const buttonSize = variant === 'badge' ? 'xs' : resolveActionSize(action.size, size)\n  const sizeProp = isIconOnly ? iconButtonSize(buttonSize) : buttonSize\n  const classes = cn(\n    buttonClasses(action, variant),\n    labeledFrom && ICON_ONLY_BELOW[labeledFrom],\n    className,\n  )\n  const ariaLabel = isIconOnly || labeledFrom ? accessibleName : undefined\n\n  const button = isPlainLink ? (\n    action.openUrlInNewTab ? (\n      <Button\n        asChild\n        variant=\"plain\"\n        size={sizeProp}\n\n        disabled={action.disabled}\n        aria-label={ariaLabel ? `${ariaLabel} ${newTabHint}` : undefined}\n        {...extraProps(action.extraAttributes, classes)}\n      >\n        <a href={action.url} target=\"_blank\" rel=\"noopener noreferrer\">\n          {content}\n          {!isIconOnly && <span className=\"sr-only\"> {newTabHint}</span>}\n        </a>\n      </Button>\n    ) : (\n      <Button\n        asChild\n        variant=\"plain\"\n        size={sizeProp}\n\n        disabled={action.disabled}\n        aria-label={ariaLabel}\n        {...extraProps(action.extraAttributes, classes)}\n      >\n        <Link href={action.url ?? '#'}>{content}</Link>\n      </Button>\n    )\n  ) : (\n    <Button\n      type=\"button\"\n      variant=\"plain\"\n      size={sizeProp}\n\n      disabled={action.disabled || busy}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      {...extraProps(action.extraAttributes, classes)}\n    >\n      {content}\n    </Button>\n  )\n\n  const tooltip = action.tooltip ?? (isIconOnly ? action.label : undefined)\n  const shortcut = bindsKeys ? action.keyBindings?.[0] : undefined\n\n  if (!tooltip && !shortcut) {\n    return button\n  }\n\n  // A disabled button gets no pointer or focus events, so a focusable wrapper carries the\n  // tooltip (e.g. the reason from `authorizationTooltip()`).\n  const trigger =\n    action.disabled && tooltip ? (\n      <span tabIndex={0} className=\"inline-flex\" data-slot=\"action-disabled-tooltip\">\n        {button}\n      </span>\n    ) : (\n      button\n    )\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{trigger}</TooltipTrigger>\n      <TooltipContent>\n        {tooltip}\n        {shortcut && (\n          <kbd className=\"ms-2 rounded border border-white/20 px-1 font-mono text-[10px]\">\n            {formatKeyBinding(shortcut)}\n          </kbd>\n        )}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n"],"mappings":"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"}

package/dist/components/actions/action-context.d.ts

@@ -0,0 +1,11 @@
+import { ActionContext } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/actions/action-context.d.ts
+/** Provides the page-level action context (token + `page` component) to nested components. */
+export declare function PageActionProvider({ value, children }: {
+  value: ActionContext;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function usePageActionContext(): ActionContext;
+//#endregion
+//# sourceMappingURL=action-context.d.ts.map

package/dist/components/actions/action-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-context.d.ts","names":[],"sources":["../../../src/components/actions/action-context.tsx"],"mappings":";;;;wBAOgB,qBACd,OACA;EAEA,OAAO;EACP,UAAU;oBACX,IAAA;wBAIe,wBAAwB"}

package/dist/components/actions/action-context.js

@@ -0,0 +1,24 @@
+import { usePageSchema } from "../../context.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actions/action-context.tsx
+const PageActionContext = createContext(null);
+/** Provides the page-level action context (token + `page` component) to nested components. */
+function PageActionProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(PageActionContext.Provider, {
+		value,
+		children
+	});
+}
+function usePageActionContext() {
+	const context = useContext(PageActionContext);
+	const page = usePageSchema();
+	return context ?? {
+		token: page?.token ?? "",
+		component: "page"
+	};
+}
+//#endregion
+export { PageActionProvider, usePageActionContext };
+
+//# sourceMappingURL=action-context.js.map

package/dist/components/actions/action-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-context.js","names":[],"sources":["../../../src/components/actions/action-context.tsx"],"sourcesContent":["import type { ActionContext } from '@alfakit/core'\nimport { createContext, useContext, type ReactNode } from 'react'\nimport { usePageSchema } from '../../context'\n\nconst PageActionContext = createContext<ActionContext | null>(null)\n\n/** Provides the page-level action context (token + `page` component) to nested components. */\nexport function PageActionProvider({\n  value,\n  children,\n}: {\n  value: ActionContext\n  children: ReactNode\n}) {\n  return <PageActionContext.Provider value={value}>{children}</PageActionContext.Provider>\n}\n\nexport function usePageActionContext(): ActionContext {\n  const context = useContext(PageActionContext)\n  const page = usePageSchema()\n\n  return context ?? { token: page?.token ?? '', component: 'page' }\n}\n"],"mappings":";;;;AAIA,MAAM,oBAAoB,cAAoC,IAAI;;AAGlE,SAAgB,mBAAmB,EACjC,OACA,YAIC;CACD,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,uBAAsC;CACpD,MAAM,UAAU,WAAW,iBAAiB;CAC5C,MAAM,OAAO,cAAc;CAE3B,OAAO,WAAW;EAAE,OAAO,MAAM,SAAS;EAAI,WAAW;CAAO;AAClE"}

package/dist/components/actions/action-list.d.ts

@@ -0,0 +1,20 @@
+import { ActionButtonSize, ActionContext, ActionGroupSchema, ActionSchema, AnyActionSchema } from "@alfakit/core";
+//#region src/components/actions/action-list.d.ts
+export interface ActionListProps {
+  actions: AnyActionSchema[];
+  context: ActionContext;
+  size?: 'xs' | 'sm' | 'default' | 'lg';
+  className?: string;
+  align?: 'start' | 'end';
+  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>;
+}
+/** A horizontal row of action buttons and dropdown groups. */
+export declare function ActionList({ actions, context, size, className, align, onTrigger }: ActionListProps): import("react").JSX.Element | null;
+export declare function ActionGroupMenu({ group, context, size, onTrigger }: {
+  group: ActionGroupSchema;
+  context: ActionContext;
+  size?: ActionButtonSize;
+  onTrigger?: ActionListProps['onTrigger'];
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=action-list.d.ts.map

package/dist/components/actions/action-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-list.d.ts","names":[],"sources":["../../../src/components/actions/action-list.tsx"],"mappings":";;iBA6CiB;EACf,SAAS;EACT,SAAS;EACT;EACA;EACA;EACA,aAAa,QAAQ,cAAc,SAAS,yBAAyB;;;wBAIvD,aACd,SACA,SACA,MACA,WACA,OACA,aACC,kCAAe,IAAA;wBA2HF,kBACd,OACA,SACA,MACA;EAEA,OAAO;EACP,SAAS;EACT,OAAO;EACP,YAAY;oBACb,IAAA"}

package/dist/components/actions/action-list.js

@@ -0,0 +1,181 @@
+import { useActionRunner, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass, ghostButtonColorClasses, outlineButtonColorClasses, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { ActionButton } from "./action-button.js";
+import { bindsKeyBindings, flattenActionGroup, formatKeyBinding, iconButtonSize, isActionGroup, parseDropdownPlacement, registerKeyBindings, resolveActionSize } from "@alfakit/core";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actions/action-list.tsx
+/** A horizontal row of action buttons and dropdown groups. */
+function ActionList({ actions, context, size = "default", className, align = "start", onTrigger }) {
+	if (actions.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap items-center gap-2", align === "end" && "justify-end", className),
+		"data-slot": "actions",
+		children: actions.map((action, index) => isActionGroup(action) ? /* @__PURE__ */ jsx(ActionGroupMenu, {
+			group: action,
+			context,
+			size,
+			onTrigger
+		}, `group-${index}`) : /* @__PURE__ */ jsx(ActionButton, {
+			action,
+			context,
+			size,
+			onTrigger
+		}, action.name))
+	});
+}
+/** `dropdownWidth()`: widths of the dropdown, spelled out for Tailwind. */
+const DROPDOWN_WIDTHS = {
+	"3xs": "w-3xs",
+	"2xs": "w-2xs",
+	xs: "w-xs",
+	sm: "w-sm",
+	md: "w-md",
+	lg: "w-lg",
+	xl: "w-xl",
+	"2xl": "w-2xl",
+	"3xl": "w-3xl",
+	"4xl": "w-4xl",
+	"5xl": "w-5xl",
+	"6xl": "w-6xl",
+	"7xl": "w-7xl",
+	none: "w-auto",
+	min: "w-min",
+	max: "w-max",
+	fit: "w-fit",
+	prose: "w-[65ch]",
+	container: "container",
+	"screen-sm": "w-(--breakpoint-sm)",
+	"screen-md": "w-(--breakpoint-md)",
+	"screen-lg": "w-(--breakpoint-lg)",
+	"screen-xl": "w-(--breakpoint-xl)",
+	"screen-2xl": "w-(--breakpoint-2xl)",
+	full: "w-[calc(100vw-2rem)]",
+	screen: "w-screen"
+};
+/**
+* `buttonGroup()`: the group's actions as joined outline buttons; `dropdown(false)`: as
+* separate buttons in the row.
+*/
+function InlineActionGroup({ group, context, size, onTrigger }) {
+	const actions = flattenActionGroup(group.actions);
+	if (!group.buttonGroup) return /* @__PURE__ */ jsx(Fragment$1, { children: actions.map((action) => /* @__PURE__ */ jsx(ActionButton, {
+		action,
+		context,
+		size,
+		onTrigger
+	}, action.name)) });
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": group.label ?? group.tooltip,
+		"data-slot": "button-group",
+		className: "inline-flex items-stretch rounded-md shadow-xs [&>*]:rounded-none [&>*]:shadow-none focus-within:[&>*]:relative [&>*:first-child]:rounded-s-md [&>*:focus-visible]:z-10 [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px",
+		children: actions.map((action) => /* @__PURE__ */ jsx(ActionButton, {
+			action: {
+				...action,
+				variant: action.variant === "icon-button" ? action.variant : "outline"
+			},
+			context,
+			size,
+			onTrigger
+		}, action.name))
+	});
+}
+function ActionGroupMenu({ group, context, size = "default", onTrigger }) {
+	if (group.buttonGroup || group.dropdown === false) return /* @__PURE__ */ jsx(InlineActionGroup, {
+		group,
+		context,
+		size: resolveActionSize(group.size, size),
+		onTrigger
+	});
+	return /* @__PURE__ */ jsx(ActionGroupDropdown, {
+		group,
+		context,
+		size
+	});
+}
+function ActionGroupDropdown({ group, context, size = "default" }) {
+	const t = useT();
+	const runner = useActionRunner();
+	const isIconOnly = !group.label || group.variant === "icon-button";
+	const buttonSize = resolveActionSize(group.size, size);
+	const placement = parseDropdownPlacement(group.dropdownPlacement);
+	useEffect(() => {
+		const bindings = flattenActionGroup(group.actions).filter((action) => bindsKeyBindings(action, context)).map((action) => ({
+			keys: action.keyBindings ?? [],
+			handler: () => void runner.trigger(action, context)
+		}));
+		return bindings.length ? registerKeyBindings(bindings) : void 0;
+	}, [
+		group,
+		context,
+		runner
+	]);
+	const renderItems = (actions) => actions.map((action, index) => {
+		if (isActionGroup(action) && action.dropdown === false) return /* @__PURE__ */ jsxs(DropdownMenuGroup, {
+			"data-slot": "dropdown-section",
+			children: [
+				index > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				renderItems(action.actions),
+				index < actions.length - 1 && !isDividedGroup(actions[index + 1]) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+			]
+		}, `section-${index}`);
+		if (isActionGroup(action)) return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon }), action.label] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: renderItems(action.actions) })] }, `sub-${index}`);
+		const shortcut = bindsKeyBindings(action, context) ? action.keyBindings?.[0] : void 0;
+		return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: action.disabled,
+			title: action.tooltip,
+			variant: action.color === "danger" ? "destructive" : "default",
+			className: cn(action.color && action.color !== "danger" && action.color !== "gray" ? colorClass(textColorClasses, action.color) : void 0),
+			onSelect: () => void runner.trigger(action, context),
+			children: [
+				action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon }),
+				action.label,
+				action.badge !== void 0 && action.badge !== null && /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					className: cn("px-1.5 py-0", colorClass(badgeColorClasses, action.badgeColor, "gray")),
+					children: action.badge
+				}),
+				shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: formatKeyBinding(shortcut) })
+			]
+		}, action.name);
+	});
+	const trigger = /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: group.variant === "button" ? "outline" : "ghost",
+			size: isIconOnly ? iconButtonSize(buttonSize) : buttonSize,
+			"aria-label": isIconOnly ? group.label ?? group.tooltip ?? t("actions", {}, "Actions") : void 0,
+			className: cn(group.color && colorClass(group.variant === "button" ? outlineButtonColorClasses : ghostButtonColorClasses, group.color)),
+			children: [/* @__PURE__ */ jsx(Icon, { name: group.icon ?? "ellipsis-vertical" }), !isIconOnly && /* @__PURE__ */ jsx("span", { children: group.label })]
+		})
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [group.tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: trigger
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: group.tooltip })] }) : trigger, /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		side: placement.side,
+		align: placement.align,
+		sideOffset: group.dropdownOffset ?? void 0,
+		className: cn(group.dropdownWidth && DROPDOWN_WIDTHS[group.dropdownWidth], group.maxHeight && "overflow-y-auto"),
+		style: group.maxHeight ? { maxHeight: group.maxHeight } : void 0,
+		children: [renderItems(group.actions), group.actions.length === 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+			disabled: true,
+			children: "—"
+		})] })]
+	})] });
+}
+function isDividedGroup(action) {
+	return action !== void 0 && isActionGroup(action) && action.dropdown === false;
+}
+//#endregion
+export { ActionGroupMenu, ActionList };
+
+//# sourceMappingURL=action-list.js.map

package/dist/components/actions/action-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-list.js","names":[],"sources":["../../../src/components/actions/action-list.tsx"],"sourcesContent":["import type {\n  ActionButtonSize,\n  ActionContext,\n  ActionGroupSchema,\n  ActionSchema,\n  AnyActionSchema,\n} from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  flattenActionGroup,\n  formatKeyBinding,\n  iconButtonSize,\n  isActionGroup,\n  parseDropdownPlacement,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { useEffect, type ReactNode } from 'react'\nimport { useActionRunner, useT } from '../../context'\nimport {\n  badgeColorClasses,\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'\nimport { ActionButton } from './action-button'\n\nexport interface ActionListProps {\n  actions: AnyActionSchema[]\n  context: ActionContext\n  size?: 'xs' | 'sm' | 'default' | 'lg'\n  className?: string\n  align?: 'start' | 'end'\n  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n}\n\n/** A horizontal row of action buttons and dropdown groups. */\nexport function ActionList({\n  actions,\n  context,\n  size = 'default',\n  className,\n  align = 'start',\n  onTrigger,\n}: ActionListProps) {\n  if (actions.length === 0) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-wrap items-center gap-2',\n        align === 'end' && 'justify-end',\n        className,\n      )}\n      data-slot=\"actions\"\n    >\n      {actions.map((action, index) =>\n        isActionGroup(action) ? (\n          <ActionGroupMenu\n            key={`group-${index}`}\n            group={action}\n            context={context}\n            size={size}\n            onTrigger={onTrigger}\n          />\n        ) : (\n          <ActionButton\n            key={action.name}\n            action={action}\n            context={context}\n            size={size}\n            onTrigger={onTrigger}\n          />\n        ),\n      )}\n    </div>\n  )\n}\n\n/** `dropdownWidth()`: widths of the dropdown, spelled out for Tailwind. */\nconst DROPDOWN_WIDTHS: Record<string, string> = {\n  '3xs': 'w-3xs',\n  '2xs': 'w-2xs',\n  xs: 'w-xs',\n  sm: 'w-sm',\n  md: 'w-md',\n  lg: 'w-lg',\n  xl: 'w-xl',\n  '2xl': 'w-2xl',\n  '3xl': 'w-3xl',\n  '4xl': 'w-4xl',\n  '5xl': 'w-5xl',\n  '6xl': 'w-6xl',\n  '7xl': 'w-7xl',\n  none: 'w-auto',\n  min: 'w-min',\n  max: 'w-max',\n  fit: 'w-fit',\n  prose: 'w-[65ch]',\n  container: 'container',\n  'screen-sm': 'w-(--breakpoint-sm)',\n  'screen-md': 'w-(--breakpoint-md)',\n  'screen-lg': 'w-(--breakpoint-lg)',\n  'screen-xl': 'w-(--breakpoint-xl)',\n  'screen-2xl': 'w-(--breakpoint-2xl)',\n  full: 'w-[calc(100vw-2rem)]',\n  screen: 'w-screen',\n}\n\n/**\n * `buttonGroup()`: the group's actions as joined outline buttons; `dropdown(false)`: as\n * separate buttons in the row.\n */\nfunction InlineActionGroup({\n  group,\n  context,\n  size,\n  onTrigger,\n}: {\n  group: ActionGroupSchema\n  context: ActionContext\n  size: ActionButtonSize\n  onTrigger?: ActionListProps['onTrigger']\n}) {\n  const actions = flattenActionGroup(group.actions)\n\n  if (!group.buttonGroup) {\n    return (\n      <>\n        {actions.map((action) => (\n          <ActionButton\n            key={action.name}\n            action={action}\n            context={context}\n            size={size}\n            onTrigger={onTrigger}\n          />\n        ))}\n      </>\n    )\n  }\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={group.label ?? group.tooltip}\n      data-slot=\"button-group\"\n      className=\"inline-flex items-stretch rounded-md shadow-xs [&>*]:rounded-none [&>*]:shadow-none focus-within:[&>*]:relative [&>*:first-child]:rounded-s-md [&>*:focus-visible]:z-10 [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px\"\n    >\n      {actions.map((action) => (\n        <ActionButton\n          key={action.name}\n          action={{\n            ...action,\n            variant: action.variant === 'icon-button' ? action.variant : 'outline',\n          }}\n          context={context}\n          size={size}\n          onTrigger={onTrigger}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport function ActionGroupMenu({\n  group,\n  context,\n  size = 'default',\n  onTrigger,\n}: {\n  group: ActionGroupSchema\n  context: ActionContext\n  size?: ActionButtonSize\n  onTrigger?: ActionListProps['onTrigger']\n}) {\n  if (group.buttonGroup || group.dropdown === false) {\n    return (\n      <InlineActionGroup\n        group={group}\n        context={context}\n        size={resolveActionSize(group.size, size)}\n        onTrigger={onTrigger}\n      />\n    )\n  }\n\n  return <ActionGroupDropdown group={group} context={context} size={size} />\n}\n\nfunction ActionGroupDropdown({\n  group,\n  context,\n  size = 'default',\n}: {\n  group: ActionGroupSchema\n  context: ActionContext\n  size?: ActionButtonSize\n}) {\n  const t = useT()\n  const runner = useActionRunner()\n  const isIconOnly = !group.label || group.variant === 'icon-button'\n  const buttonSize = resolveActionSize(group.size, size)\n  const placement = parseDropdownPlacement(group.dropdownPlacement)\n\n  // Shortcuts of the actions inside the group work like those of standalone buttons (and,\n  // like them, never for record rows).\n  useEffect(() => {\n    const bindings = flattenActionGroup(group.actions)\n      .filter((action) => bindsKeyBindings(action, context))\n      .map((action) => ({\n        keys: action.keyBindings ?? [],\n        handler: () => void runner.trigger(action, context),\n      }))\n\n    return bindings.length ? registerKeyBindings(bindings) : undefined\n  }, [group, context, runner])\n\n  const renderItems = (actions: AnyActionSchema[]): ReactNode[] =>\n    actions.map((action, index) => {\n      // `dropdown(false)`: a section of this dropdown, divided from its neighbours.\n      if (isActionGroup(action) && action.dropdown === false) {\n        return (\n          <DropdownMenuGroup key={`section-${index}`} data-slot=\"dropdown-section\">\n            {index > 0 && <DropdownMenuSeparator />}\n            {renderItems(action.actions)}\n            {index < actions.length - 1 && !isDividedGroup(actions[index + 1]) && (\n              <DropdownMenuSeparator />\n            )}\n          </DropdownMenuGroup>\n        )\n      }\n\n      if (isActionGroup(action)) {\n        return (\n          <DropdownMenuSub key={`sub-${index}`}>\n            <DropdownMenuSubTrigger>\n              {action.icon && <Icon name={action.icon} />}\n              {action.label}\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>{renderItems(action.actions)}</DropdownMenuSubContent>\n          </DropdownMenuSub>\n        )\n      }\n\n      const shortcut = bindsKeyBindings(action, context) ? action.keyBindings?.[0] : undefined\n\n      return (\n        <DropdownMenuItem\n          key={action.name}\n          disabled={action.disabled}\n          title={action.tooltip}\n          variant={action.color === 'danger' ? 'destructive' : 'default'}\n          className={cn(\n            action.color && action.color !== 'danger' && action.color !== 'gray'\n              ? colorClass(textColorClasses, action.color)\n              : undefined,\n          )}\n          onSelect={() => void runner.trigger(action, context)}\n        >\n          {action.icon && <Icon name={action.icon} />}\n          {action.label}\n          {action.badge !== undefined && action.badge !== null && (\n            <Badge\n              variant=\"outline\"\n              className={cn(\n                'px-1.5 py-0',\n                colorClass(badgeColorClasses, action.badgeColor, 'gray'),\n              )}\n            >\n              {action.badge}\n            </Badge>\n          )}\n          {shortcut && <DropdownMenuShortcut>{formatKeyBinding(shortcut)}</DropdownMenuShortcut>}\n        </DropdownMenuItem>\n      )\n    })\n\n  const trigger = (\n    <DropdownMenuTrigger asChild>\n      <Button\n        type=\"button\"\n        variant={group.variant === 'button' ? 'outline' : 'ghost'}\n        size={isIconOnly ? iconButtonSize(buttonSize) : buttonSize}\n        aria-label={\n          isIconOnly ? (group.label ?? group.tooltip ?? t('actions', {}, 'Actions')) : undefined\n        }\n        className={cn(\n          group.color &&\n            colorClass(\n              group.variant === 'button' ? outlineButtonColorClasses : ghostButtonColorClasses,\n              group.color,\n            ),\n        )}\n      >\n        <Icon name={group.icon ?? 'ellipsis-vertical'} />\n        {!isIconOnly && <span>{group.label}</span>}\n      </Button>\n    </DropdownMenuTrigger>\n  )\n\n  return (\n    <DropdownMenu>\n      {group.tooltip ? (\n        <Tooltip>\n          <TooltipTrigger asChild>{trigger}</TooltipTrigger>\n          <TooltipContent>{group.tooltip}</TooltipContent>\n        </Tooltip>\n      ) : (\n        trigger\n      )}\n      <DropdownMenuContent\n        side={placement.side}\n        align={placement.align}\n        sideOffset={group.dropdownOffset ?? undefined}\n        className={cn(\n          group.dropdownWidth && DROPDOWN_WIDTHS[group.dropdownWidth],\n          group.maxHeight && 'overflow-y-auto',\n        )}\n        style={group.maxHeight ? { maxHeight: group.maxHeight } : undefined}\n      >\n        {renderItems(group.actions)}\n        {group.actions.length === 0 && (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem disabled>—</DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\nfunction isDividedGroup(action: AnyActionSchema | undefined): boolean {\n  return action !== undefined && isActionGroup(action) && action.dropdown === false\n}\n"],"mappings":"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"}

package/dist/components/actions/action-modals.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/actions/action-modals.d.ts
+/** Renders every open action modal from the runner store. Mount once per app. */
+export declare function ActionModals(): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=action-modals.d.ts.map

package/dist/components/actions/action-modals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-modals.d.ts","names":[],"sources":["../../../src/components/actions/action-modals.tsx"],"mappings":";;wBA0FgB,gCAAY,IAAA"}