@alfakit/react 0.0.0-stage → 0.1.1

package/dist/layouts/top-nav-layout.js

@@ -0,0 +1,223 @@
+import { useDirection, usePanel, useRegistry, useT } from "../context.js";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../lib/icons.js";
+import { Button } from "../components/ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu.js";
+import { extraProps } from "../lib/attributes.js";
+import { Slot } from "../components/panel/slot.js";
+import { NavLabel } from "../components/panel/nav-label.js";
+import { NewTabHint } from "../lib/new-tab-hint.js";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../components/ui/sheet.js";
+import { NotificationsMenu } from "../components/notifications/notifications-menu.js";
+import { GlobalSearch } from "../components/panel/global-search.js";
+import { TenantMenu } from "../components/panel/tenant-menu.js";
+import { TopbarLocaleSwitcher } from "../components/panel/locale-switcher.js";
+import { UserMenu } from "../components/panel/user-menu.js";
+import { Brand } from "../components/panel/app-sidebar.js";
+import { BottomNav } from "../components/panel/bottom-nav.js";
+import { DebugPanelSlot } from "../components/panel/debug-panel-slot.js";
+import { ThemeToggle } from "../components/panel/theme-toggle.js";
+import { Breadcrumbs } from "../components/panel/topbar.js";
+import { MAX_WIDTHS } from "./app-layout.js";
+import { PREFETCH_CACHE_FOR, hasMobilePreset } from "@alfakit/core";
+import { Link } from "@inertiajs/react";
+import { createElement, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, MenuIcon } from "lucide-react";
+//#region src/layouts/top-nav-layout.tsx
+const isActive = (item) => Boolean(item.active || item.children?.some(isActive));
+function TopNavLink({ item }) {
+	const className = "text-muted-foreground hover:text-foreground hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground inline-flex h-9 shrink-0 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors [&_svg]:size-4";
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsx(TopNavMenu, {
+		label: /* @__PURE__ */ jsx(NavLabel, { item }),
+		icon: item.icon,
+		items: item.children,
+		active: isActive(item),
+		attributes: item.extraAttributes
+	});
+	return item.openInNewTab ? /* @__PURE__ */ jsxs("a", {
+		...extraProps(item.extraAttributes, className),
+		href: item.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		"data-slot": "topnav-link",
+		children: [
+			item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }),
+			/* @__PURE__ */ jsx(NavLabel, { item }),
+			/* @__PURE__ */ jsx(NewTabHint, {})
+		]
+	}) : /* @__PURE__ */ jsxs(Link, {
+		...extraProps(item.extraAttributes, className),
+		href: item.url ?? "#",
+		prefetch: true,
+		cacheFor: PREFETCH_CACHE_FOR,
+		"data-slot": "topnav-link",
+		"data-active": item.active ? "true" : void 0,
+		children: [item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }), /* @__PURE__ */ jsx(NavLabel, { item })]
+	});
+}
+function TopNavMenu({ label, icon, items, active, attributes }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		...extraProps(attributes, "text-muted-foreground hover:text-foreground hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground data-[state=open]:text-foreground inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors outline-none [&_svg]:size-4"),
+		"data-slot": "topnav-link",
+		"data-active": active ? "true" : void 0,
+		children: [
+			icon && /* @__PURE__ */ jsx(Icon, { name: icon }),
+			label,
+			/* @__PURE__ */ jsx(ChevronDownIcon, { className: "opacity-60" })
+		]
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "start",
+		className: "min-w-48",
+		children: items.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Link, {
+				...extraProps(item.extraAttributes, cn("w-full", item.active && "font-medium")),
+				href: item.url ?? "#",
+				children: [item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }), /* @__PURE__ */ jsx(NavLabel, { item })]
+			})
+		}, item.label))
+	})] });
+}
+function TopNavGroup({ group }) {
+	if (group.extraTopbarAttributes) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "topnav-group",
+		...extraProps(group.extraTopbarAttributes, "flex shrink-0 items-center gap-1"),
+		children: /* @__PURE__ */ jsx(TopNavGroup, { group: {
+			...group,
+			extraTopbarAttributes: void 0
+		} })
+	});
+	if (!group.label) return /* @__PURE__ */ jsx(Fragment$1, { children: group.items.map((item) => /* @__PURE__ */ jsx(TopNavLink, { item }, item.label)) });
+	return /* @__PURE__ */ jsx(TopNavMenu, {
+		label: group.label,
+		icon: group.icon,
+		items: group.items,
+		active: group.items.some(isActive)
+	});
+}
+/** Vertical navigation for the mobile drawer. */
+function MobileNav({ onNavigate }) {
+	const panel = usePanel();
+	return /* @__PURE__ */ jsx("nav", {
+		className: "flex flex-col gap-4 overflow-y-auto p-4 text-sm",
+		children: panel.navigation.map((group, index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [group.label && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground px-2 text-xs font-medium",
+				children: group.label
+			}), group.items.flatMap((item) => [item, ...item.children ?? []]).map((item) => /* @__PURE__ */ jsxs(Link, {
+				href: item.url ?? "#",
+				onClick: onNavigate,
+				"data-active": item.active ? "true" : void 0,
+				className: "hover:bg-accent data-[active=true]:bg-accent flex items-center gap-2 rounded-md px-2 py-2 font-medium [&_svg]:size-4",
+				children: [item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }), /* @__PURE__ */ jsx(NavLabel, { item })]
+			}, item.label))]
+		}, group.label ?? index))
+	});
+}
+/**
+* Navigation across the top instead of a sidebar (`layout: 'topbar'`). Ungrouped items are
+* links; labelled groups and items with children open as dropdowns.
+*/
+function TopNavLayout({ children, breadcrumbs, maxContentWidth }) {
+	const panel = usePanel();
+	const t = useT();
+	const direction = useDirection();
+	const registry = useRegistry();
+	const [open, setOpen] = useState(false);
+	const width = MAX_WIDTHS[maxContentWidth ?? panel.maxContentWidth ?? "7xl"] ?? "max-w-7xl";
+	const Bottom = registry.resolve("panel:bottom-nav") ?? BottomNav;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "topnav-layout",
+		className: "bg-background flex min-h-svh flex-col",
+		children: [
+			/* @__PURE__ */ jsx(Slot, { name: "body.start" }),
+			/* @__PURE__ */ jsx(Slot, { name: "layout.start" }),
+			/* @__PURE__ */ jsx(Slot, { name: "topbar.before" }),
+			/* @__PURE__ */ jsx("header", {
+				"data-slot": "topbar",
+				className: "bg-background/90 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-30 border-b backdrop-blur",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("mx-auto flex h-14 w-full items-center gap-3 px-4 md:px-6", width),
+					children: [
+						/* @__PURE__ */ jsxs(Sheet, {
+							open,
+							onOpenChange: setOpen,
+							children: [/* @__PURE__ */ jsx(SheetTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "icon",
+									className: "md:hidden",
+									"aria-label": t("toggle_sidebar", {}, "Toggle sidebar"),
+									children: /* @__PURE__ */ jsx(Icon, {
+										name: "alfakit::panels.topbar.open-sidebar-button",
+										fallback: MenuIcon
+									})
+								})
+							}), /* @__PURE__ */ jsxs(SheetContent, {
+								side: direction === "rtl" ? "right" : "left",
+								className: "w-72 p-0",
+								children: [/* @__PURE__ */ jsx(SheetHeader, {
+									className: "border-b",
+									children: /* @__PURE__ */ jsx(SheetTitle, {
+										asChild: true,
+										children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Brand, {}) })
+									})
+								}), /* @__PURE__ */ jsx(MobileNav, { onNavigate: () => setOpen(false) })]
+							})]
+						}),
+						/* @__PURE__ */ jsx(Slot, { name: "topbar.logo.before" }),
+						/* @__PURE__ */ jsx(Brand, { className: "me-2 shrink-0" }),
+						/* @__PURE__ */ jsx(Slot, { name: "topbar.logo.after" }),
+						panel.tenancy?.current && /* @__PURE__ */ jsx(Slot, { name: "tenant-menu.before" }),
+						/* @__PURE__ */ jsx(TenantMenu, { variant: "topbar" }),
+						panel.tenancy?.current && /* @__PURE__ */ jsx(Slot, { name: "tenant-menu.after" }),
+						/* @__PURE__ */ jsx("nav", {
+							"data-slot": "topnav",
+							"aria-label": t("navigation", {}, "Navigation"),
+							className: "hidden min-w-0 flex-1 items-center gap-1 self-stretch overflow-x-auto md:flex",
+							children: panel.navigation.map((group, index) => /* @__PURE__ */ jsx(TopNavGroup, { group }, group.label ?? `group-${index}`))
+						}),
+						/* @__PURE__ */ jsx(Slot, { name: "topbar.start" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "ms-auto flex shrink-0 items-center gap-1",
+							children: [
+								/* @__PURE__ */ jsx(Slot, { name: "topbar.end" }),
+								/* @__PURE__ */ jsx(GlobalSearch, {}),
+								/* @__PURE__ */ jsx(NotificationsMenu, {}),
+								/* @__PURE__ */ jsx(TopbarLocaleSwitcher, {}),
+								/* @__PURE__ */ jsx(ThemeToggle, {}),
+								/* @__PURE__ */ jsx(DebugPanelSlot, {}),
+								/* @__PURE__ */ jsx(UserMenu, { variant: "topbar" })
+							]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(Slot, { name: "topbar.after" }),
+			/* @__PURE__ */ jsx(Slot, { name: "content.before" }),
+			/* @__PURE__ */ jsxs("main", {
+				"data-slot": "content",
+				className: cn("mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6", width),
+				children: [
+					panel.breadcrumbs && breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }),
+					/* @__PURE__ */ jsx(Slot, { name: "content.start" }),
+					children,
+					/* @__PURE__ */ jsx(Slot, { name: "content.end" })
+				]
+			}),
+			/* @__PURE__ */ jsx(Slot, { name: "content.after" }),
+			/* @__PURE__ */ jsx(Slot, { name: "footer" }),
+			hasMobilePreset(panel) && createElement(Bottom),
+			/* @__PURE__ */ jsx(Slot, { name: "layout.end" }),
+			/* @__PURE__ */ jsx(Slot, { name: "body.end" })
+		]
+	});
+}
+//#endregion
+export { TopNavLayout };
+
+//# sourceMappingURL=top-nav-layout.js.map

package/dist/layouts/top-nav-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-nav-layout.js","names":[],"sources":["../../src/layouts/top-nav-layout.tsx"],"sourcesContent":["import {\n  PREFETCH_CACHE_FOR,\n  hasMobilePreset,\n  type BreadcrumbSchema,\n  type NavigationGroupSchema,\n  type NavigationItemSchema,\n  type Width,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { ChevronDownIcon, MenuIcon } from 'lucide-react'\nimport { createElement, useState, type ReactNode } from 'react'\nimport { NotificationsMenu } from '../components/notifications/notifications-menu'\nimport { Brand } from '../components/panel/app-sidebar'\nimport { BottomNav } from '../components/panel/bottom-nav'\nimport { DebugPanelSlot } from '../components/panel/debug-panel-slot'\nimport { GlobalSearch } from '../components/panel/global-search'\nimport { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'\nimport { NavLabel } from '../components/panel/nav-label'\nimport { Slot } from '../components/panel/slot'\nimport { TenantMenu } from '../components/panel/tenant-menu'\nimport { ThemeToggle } from '../components/panel/theme-toggle'\nimport { Breadcrumbs } from '../components/panel/topbar'\nimport { UserMenu } from '../components/panel/user-menu'\nimport { Button } from '../components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../components/ui/dropdown-menu'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../components/ui/sheet'\nimport { useDirection, usePanel, useRegistry, useT } from '../context'\nimport { extraProps } from '../lib/attributes'\nimport { Icon } from '../lib/icons'\nimport { NewTabHint } from '../lib/new-tab-hint'\nimport { cn } from '../lib/utils'\nimport { MAX_WIDTHS } from './app-layout'\n\nexport interface TopNavLayoutProps {\n  children: ReactNode\n  breadcrumbs?: BreadcrumbSchema[]\n  maxContentWidth?: Width | string\n}\n\nconst isActive = (item: NavigationItemSchema): boolean =>\n  Boolean(item.active || item.children?.some(isActive))\n\nfunction TopNavLink({ item }: { item: NavigationItemSchema }) {\n  const className =\n    'text-muted-foreground hover:text-foreground hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground inline-flex h-9 shrink-0 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors [&_svg]:size-4'\n\n  if (item.children && item.children.length > 0) {\n    return (\n      <TopNavMenu\n        label={<NavLabel item={item} />}\n        icon={item.icon}\n        items={item.children}\n        active={isActive(item)}\n        attributes={item.extraAttributes}\n      />\n    )\n  }\n\n  return item.openInNewTab ? (\n    <a\n      // `NavigationItem::extraAttributes()`; `class` is merged with the link's own.\n      {...extraProps(item.extraAttributes, className)}\n      href={item.url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      data-slot=\"topnav-link\"\n    >\n      {item.icon && <Icon name={item.icon} />}\n      <NavLabel item={item} />\n      <NewTabHint />\n    </a>\n  ) : (\n    <Link\n      {...extraProps(item.extraAttributes, className)}\n      href={item.url ?? '#'}\n      prefetch\n      cacheFor={PREFETCH_CACHE_FOR}\n      data-slot=\"topnav-link\"\n      data-active={item.active ? 'true' : undefined}\n    >\n      {item.icon && <Icon name={item.icon} />}\n      <NavLabel item={item} />\n    </Link>\n  )\n}\n\nfunction TopNavMenu({\n  label,\n  icon,\n  items,\n  active,\n  attributes,\n}: {\n  label: ReactNode\n  icon?: string\n  items: NavigationItemSchema[]\n  active: boolean\n  attributes?: NavigationItemSchema['extraAttributes']\n}) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        {...extraProps(\n          attributes,\n          'text-muted-foreground hover:text-foreground hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground data-[state=open]:text-foreground inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors outline-none [&_svg]:size-4',\n        )}\n        data-slot=\"topnav-link\"\n        data-active={active ? 'true' : undefined}\n      >\n        {icon && <Icon name={icon} />}\n        {label}\n        <ChevronDownIcon className=\"opacity-60\" />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"min-w-48\">\n        {items.map((item) => (\n          <DropdownMenuItem key={item.label} asChild>\n            <Link\n              {...extraProps(item.extraAttributes, cn('w-full', item.active && 'font-medium'))}\n              href={item.url ?? '#'}\n            >\n              {item.icon && <Icon name={item.icon} />}\n              <NavLabel item={item} />\n            </Link>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\nfunction TopNavGroup({ group }: { group: NavigationGroupSchema }) {\n  // `NavigationGroup::extraTopbarAttributes()` wrap the group; `class` is merged.\n  if (group.extraTopbarAttributes) {\n    return (\n      <div\n        data-slot=\"topnav-group\"\n        {...extraProps(group.extraTopbarAttributes, 'flex shrink-0 items-center gap-1')}\n      >\n        <TopNavGroup group={{ ...group, extraTopbarAttributes: undefined }} />\n      </div>\n    )\n  }\n\n  if (!group.label) {\n    return (\n      <>\n        {group.items.map((item) => (\n          <TopNavLink key={item.label} item={item} />\n        ))}\n      </>\n    )\n  }\n\n  return (\n    <TopNavMenu\n      label={group.label}\n      icon={group.icon}\n      items={group.items}\n      active={group.items.some(isActive)}\n    />\n  )\n}\n\n/** Vertical navigation for the mobile drawer. */\nfunction MobileNav({ onNavigate }: { onNavigate: () => void }) {\n  const panel = usePanel()\n\n  return (\n    <nav className=\"flex flex-col gap-4 overflow-y-auto p-4 text-sm\">\n      {panel.navigation.map((group, index) => (\n        <div key={group.label ?? index} className=\"flex flex-col gap-1\">\n          {group.label && (\n            <p className=\"text-muted-foreground px-2 text-xs font-medium\">{group.label}</p>\n          )}\n          {group.items\n            .flatMap((item) => [item, ...(item.children ?? [])])\n            .map((item) => (\n              <Link\n                key={item.label}\n                href={item.url ?? '#'}\n                onClick={onNavigate}\n                data-active={item.active ? 'true' : undefined}\n                className=\"hover:bg-accent data-[active=true]:bg-accent flex items-center gap-2 rounded-md px-2 py-2 font-medium [&_svg]:size-4\"\n              >\n                {item.icon && <Icon name={item.icon} />}\n                <NavLabel item={item} />\n              </Link>\n            ))}\n        </div>\n      ))}\n    </nav>\n  )\n}\n\n/**\n * Navigation across the top instead of a sidebar (`layout: 'topbar'`). Ungrouped items are\n * links; labelled groups and items with children open as dropdowns.\n */\nexport function TopNavLayout({ children, breadcrumbs, maxContentWidth }: TopNavLayoutProps) {\n  const panel = usePanel()\n  const t = useT()\n  const direction = useDirection()\n  const registry = useRegistry()\n  const [open, setOpen] = useState(false)\n  const width = MAX_WIDTHS[maxContentWidth ?? panel.maxContentWidth ?? '7xl'] ?? 'max-w-7xl'\n  const Bottom = registry.resolve('panel:bottom-nav') ?? BottomNav\n\n  return (\n    <div data-slot=\"topnav-layout\" className=\"bg-background flex min-h-svh flex-col\">\n      <Slot name=\"body.start\" />\n      <Slot name=\"layout.start\" />\n      <Slot name=\"topbar.before\" />\n      <header\n        data-slot=\"topbar\"\n        className=\"bg-background/90 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-30 border-b backdrop-blur\"\n      >\n        <div className={cn('mx-auto flex h-14 w-full items-center gap-3 px-4 md:px-6', width)}>\n          <Sheet open={open} onOpenChange={setOpen}>\n            <SheetTrigger asChild>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"md:hidden\"\n                aria-label={t('toggle_sidebar', {}, 'Toggle sidebar')}\n              >\n                <Icon name=\"alfakit::panels.topbar.open-sidebar-button\" fallback={MenuIcon} />\n              </Button>\n            </SheetTrigger>\n            <SheetContent side={direction === 'rtl' ? 'right' : 'left'} className=\"w-72 p-0\">\n              <SheetHeader className=\"border-b\">\n                <SheetTitle asChild>\n                  <div>\n                    <Brand />\n                  </div>\n                </SheetTitle>\n              </SheetHeader>\n              <MobileNav onNavigate={() => setOpen(false)} />\n            </SheetContent>\n          </Sheet>\n          <Slot name=\"topbar.logo.before\" />\n          <Brand className=\"me-2 shrink-0\" />\n          <Slot name=\"topbar.logo.after\" />\n          {panel.tenancy?.current && <Slot name=\"tenant-menu.before\" />}\n          <TenantMenu variant=\"topbar\" />\n          {panel.tenancy?.current && <Slot name=\"tenant-menu.after\" />}\n          <nav\n            data-slot=\"topnav\"\n            aria-label={t('navigation', {}, 'Navigation')}\n            className=\"hidden min-w-0 flex-1 items-center gap-1 self-stretch overflow-x-auto md:flex\"\n          >\n            {panel.navigation.map((group, index) => (\n              <TopNavGroup key={group.label ?? `group-${index}`} group={group} />\n            ))}\n          </nav>\n          <Slot name=\"topbar.start\" />\n          <div className=\"ms-auto flex shrink-0 items-center gap-1\">\n            <Slot name=\"topbar.end\" />\n            <GlobalSearch />\n            <NotificationsMenu />\n            <TopbarLocaleSwitcher />\n            <ThemeToggle />\n            <DebugPanelSlot />\n            <UserMenu variant=\"topbar\" />\n          </div>\n        </div>\n      </header>\n      <Slot name=\"topbar.after\" />\n      <Slot name=\"content.before\" />\n      <main\n        data-slot=\"content\"\n        className={cn('mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6', width)}\n      >\n        {panel.breadcrumbs && breadcrumbs && breadcrumbs.length > 0 && (\n          <Breadcrumbs items={breadcrumbs} />\n        )}\n        <Slot name=\"content.start\" />\n        {children}\n        <Slot name=\"content.end\" />\n      </main>\n      <Slot name=\"content.after\" />\n      <Slot name=\"footer\" />\n      {hasMobilePreset(panel) && createElement(Bottom)}\n      <Slot name=\"layout.end\" />\n      <Slot name=\"body.end\" />\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/lib/attributes.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+//#region src/lib/attributes.d.ts
+/**
+ * Turn attributes from PHP (`extraAttributes(['class' => '…', 'style' => '…'])`) into React
+ * props: `class` is merged with the component's own classes instead of replacing them,
+ * a `style` string becomes a style object, `for` becomes `htmlFor` and other HTML names
+ * React spells differently (`tabindex`, `readonly`, …) are renamed.
+ */
+export declare function extraProps(attributes: Record<string, unknown> | null | undefined, className?: string): Record<string, unknown>;
+export declare function parseStyle(style: string): CSSProperties;
+//#endregion
+//# sourceMappingURL=attributes.d.ts.map

package/dist/lib/attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.d.ts","names":[],"sources":["../../src/lib/attributes.ts"],"mappings":";;;;;;;;wBA4BgB,WACd,YAAY,4CACZ,qBACC;wBA0Ba,WAAW,gBAAgB"}

package/dist/lib/attributes.js

@@ -0,0 +1,55 @@
+import { cn } from "./utils.js";
+//#region src/lib/attributes.ts
+/** HTML attribute names that React spells differently (e.g. `tabindex` → `tabIndex`). */
+const REACT_PROP_NAMES = {
+	tabindex: "tabIndex",
+	readonly: "readOnly",
+	maxlength: "maxLength",
+	minlength: "minLength",
+	autocomplete: "autoComplete",
+	autofocus: "autoFocus",
+	autocapitalize: "autoCapitalize",
+	autocorrect: "autoCorrect",
+	spellcheck: "spellCheck",
+	inputmode: "inputMode",
+	enterkeyhint: "enterKeyHint",
+	contenteditable: "contentEditable",
+	crossorigin: "crossOrigin",
+	colspan: "colSpan",
+	rowspan: "rowSpan"
+};
+/**
+* Turn attributes from PHP (`extraAttributes(['class' => '…', 'style' => '…'])`) into React
+* props: `class` is merged with the component's own classes instead of replacing them,
+* a `style` string becomes a style object, `for` becomes `htmlFor` and other HTML names
+* React spells differently (`tabindex`, `readonly`, …) are renamed.
+*/
+function extraProps(attributes, className) {
+	const { class: classAttribute, className: classNameAttribute, style, for: htmlFor, ...rest } = attributes ?? {};
+	const renamed = {};
+	for (const [name, value] of Object.entries(rest)) renamed[REACT_PROP_NAMES[name] ?? name] = value;
+	const props = {
+		...renamed,
+		className: cn(className, classAttribute, classNameAttribute) || void 0
+	};
+	if (htmlFor !== void 0) props.htmlFor = htmlFor;
+	if (style !== void 0) props.style = typeof style === "string" ? parseStyle(style) : style;
+	return props;
+}
+function parseStyle(style) {
+	const result = {};
+	for (const declaration of style.split(";")) {
+		const index = declaration.indexOf(":");
+		if (index === -1) continue;
+		const property = declaration.slice(0, index).trim();
+		const value = declaration.slice(index + 1).trim();
+		if (!property || !value) continue;
+		const key = property.startsWith("--") ? property : property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+		result[key] = value;
+	}
+	return result;
+}
+//#endregion
+export { extraProps, parseStyle };
+
+//# sourceMappingURL=attributes.js.map

package/dist/lib/attributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.js","names":[],"sources":["../../src/lib/attributes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { cn } from './utils'\n\n/** HTML attribute names that React spells differently (e.g. `tabindex` → `tabIndex`). */\nconst REACT_PROP_NAMES: Record<string, string> = {\n  tabindex: 'tabIndex',\n  readonly: 'readOnly',\n  maxlength: 'maxLength',\n  minlength: 'minLength',\n  autocomplete: 'autoComplete',\n  autofocus: 'autoFocus',\n  autocapitalize: 'autoCapitalize',\n  autocorrect: 'autoCorrect',\n  spellcheck: 'spellCheck',\n  inputmode: 'inputMode',\n  enterkeyhint: 'enterKeyHint',\n  contenteditable: 'contentEditable',\n  crossorigin: 'crossOrigin',\n  colspan: 'colSpan',\n  rowspan: 'rowSpan',\n}\n\n/**\n * Turn attributes from PHP (`extraAttributes(['class' => '…', 'style' => '…'])`) into React\n * props: `class` is merged with the component's own classes instead of replacing them,\n * a `style` string becomes a style object, `for` becomes `htmlFor` and other HTML names\n * React spells differently (`tabindex`, `readonly`, …) are renamed.\n */\nexport function extraProps(\n  attributes: Record<string, unknown> | null | undefined,\n  className?: string,\n): Record<string, unknown> {\n  const {\n    class: classAttribute,\n    className: classNameAttribute,\n    style,\n    for: htmlFor,\n    ...rest\n  } = attributes ?? {}\n\n  const renamed: Record<string, unknown> = {}\n\n  for (const [name, value] of Object.entries(rest)) {\n    renamed[REACT_PROP_NAMES[name] ?? name] = value\n  }\n\n  const props: Record<string, unknown> = {\n    ...renamed,\n    className: cn(className, classAttribute as string, classNameAttribute as string) || undefined,\n  }\n\n  if (htmlFor !== undefined) props.htmlFor = htmlFor\n  if (style !== undefined) props.style = typeof style === 'string' ? parseStyle(style) : style\n\n  return props\n}\n\nexport function parseStyle(style: string): CSSProperties {\n  const result: Record<string, string> = {}\n\n  for (const declaration of style.split(';')) {\n    const index = declaration.indexOf(':')\n\n    if (index === -1) continue\n\n    const property = declaration.slice(0, index).trim()\n    const value = declaration.slice(index + 1).trim()\n\n    if (!property || !value) continue\n\n    const key = property.startsWith('--')\n      ? property\n      : property.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase())\n\n    result[key] = value\n  }\n\n  return result as CSSProperties\n}\n"],"mappings":";;;AAIA,MAAM,mBAA2C;CAC/C,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;CACX,cAAc;CACd,WAAW;CACX,gBAAgB;CAChB,aAAa;CACb,YAAY;CACZ,WAAW;CACX,cAAc;CACd,iBAAiB;CACjB,aAAa;CACb,SAAS;CACT,SAAS;AACX;;;;;;;AAQA,SAAgB,WACd,YACA,WACyB;CACzB,MAAM,EACJ,OAAO,gBACP,WAAW,oBACX,OACA,KAAK,SACL,GAAG,SACD,cAAc,CAAC;CAEnB,MAAM,UAAmC,CAAC;CAE1C,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,IAAI,GAC7C,QAAQ,iBAAiB,SAAS,QAAQ;CAG5C,MAAM,QAAiC;EACrC,GAAG;EACH,WAAW,GAAG,WAAW,gBAA0B,kBAA4B,KAAK,KAAA;CACtF;CAEA,IAAI,YAAY,KAAA,GAAW,MAAM,UAAU;CAC3C,IAAI,UAAU,KAAA,GAAW,MAAM,QAAQ,OAAO,UAAU,WAAW,WAAW,KAAK,IAAI;CAEvF,OAAO;AACT;AAEA,SAAgB,WAAW,OAA8B;CACvD,MAAM,SAAiC,CAAC;CAExC,KAAK,MAAM,eAAe,MAAM,MAAM,GAAG,GAAG;EAC1C,MAAM,QAAQ,YAAY,QAAQ,GAAG;EAErC,IAAI,UAAU,IAAI;EAElB,MAAM,WAAW,YAAY,MAAM,GAAG,KAAK,CAAC,CAAC,KAAK;EAClD,MAAM,QAAQ,YAAY,MAAM,QAAQ,CAAC,CAAC,CAAC,KAAK;EAEhD,IAAI,CAAC,YAAY,CAAC,OAAO;EAEzB,MAAM,MAAM,SAAS,WAAW,IAAI,IAChC,WACA,SAAS,QAAQ,cAAc,GAAG,WAAmB,OAAO,YAAY,CAAC;EAE7E,OAAO,OAAO;CAChB;CAEA,OAAO;AACT"}

package/dist/lib/colors.d.ts

@@ -0,0 +1,23 @@
+import { Color } from "@alfakit/core";
+//#region src/lib/colors.d.ts
+/**
+ * Semantic colour → Tailwind class maps. Classes are spelled out so Tailwind's scanner
+ * keeps them.
+ */
+export declare const badgeColorClasses: Record<string, string>;
+export declare const textColorClasses: Record<string, string>;
+export declare const solidButtonColorClasses: Record<string, string>;
+export declare const outlineButtonColorClasses: Record<string, string>;
+export declare const ghostButtonColorClasses: Record<string, string>;
+/** Switch track colour when on (`onColor()`), for Toggle fields and ToggleColumn. */
+export declare const switchOnColorClasses: Record<string, string>;
+/** Switch track colour when off (`offColor()`); repeats the dark variant it replaces. */
+export declare const switchOffColorClasses: Record<string, string>;
+/** Square icon sizes (IconColumn / IconEntry `size()`). */
+export declare const iconSizeClasses: Record<string, string>;
+export declare const iconBackgroundColorClasses: Record<string, string>;
+export declare function colorClass(map: Record<string, string>, color: Color | undefined | null, fallback?: string): string;
+/** Resolve a semantic colour to a CSS colour value for inline styles (charts, swatches). */
+export declare function cssColor(color: Color | undefined | null): string;
+//#endregion
+//# sourceMappingURL=colors.d.ts.map

package/dist/lib/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","names":[],"sources":["../../src/lib/colors.ts"],"mappings":";;;;;;qBAOa,mBAAmB;qBAUnB,kBAAkB;qBAUlB,yBAAyB;qBAUzB,2BAA2B;qBAU3B,yBAAyB;;qBAWzB,sBAAsB;;qBAWtB,uBAAuB;;qBAYvB,iBAAiB;qBASjB,4BAA4B;wBAsBzB,WACd,KAAK,wBACL,OAAO,0BACP;;wBAac,SAAS,OAAO"}

package/dist/lib/colors.js

@@ -0,0 +1,126 @@
+import { customColorClasses, isCustomColorName } from "@alfakit/core";
+//#region src/lib/colors.ts
+/**
+* Semantic colour → Tailwind class maps. Classes are spelled out so Tailwind's scanner
+* keeps them.
+*/
+const badgeColorClasses = {
+	primary: "border-transparent bg-primary/10 text-primary dark:bg-primary/20",
+	secondary: "border-transparent bg-secondary text-secondary-foreground",
+	success: "border-transparent bg-success/10 text-success dark:bg-success/20",
+	warning: "border-transparent bg-warning/10 text-warning dark:bg-warning/20",
+	danger: "border-transparent bg-destructive/10 text-destructive dark:bg-destructive/20",
+	info: "border-transparent bg-info/10 text-info dark:bg-info/20",
+	gray: "border-transparent bg-muted text-muted-foreground"
+};
+const textColorClasses = {
+	primary: "text-primary",
+	secondary: "text-secondary-foreground",
+	success: "text-success",
+	warning: "text-warning",
+	danger: "text-destructive",
+	info: "text-info",
+	gray: "text-muted-foreground"
+};
+const solidButtonColorClasses = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+	secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+	success: "bg-success text-success-foreground hover:bg-success/90",
+	warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+	danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+	info: "bg-info text-info-foreground hover:bg-info/90",
+	gray: "bg-muted text-foreground hover:bg-muted/80"
+};
+const outlineButtonColorClasses = {
+	primary: "border-primary/40 text-primary hover:bg-primary/10",
+	secondary: "border-border text-secondary-foreground hover:bg-secondary",
+	success: "border-success/40 text-success hover:bg-success/10",
+	warning: "border-warning/50 text-warning hover:bg-warning/10",
+	danger: "border-destructive/40 text-destructive hover:bg-destructive/10",
+	info: "border-info/40 text-info hover:bg-info/10",
+	gray: "border-border text-foreground hover:bg-accent"
+};
+const ghostButtonColorClasses = {
+	primary: "text-primary hover:bg-primary/10",
+	secondary: "text-secondary-foreground hover:bg-secondary",
+	success: "text-success hover:bg-success/10",
+	warning: "text-warning hover:bg-warning/10",
+	danger: "text-destructive hover:bg-destructive/10",
+	info: "text-info hover:bg-info/10",
+	gray: "text-muted-foreground hover:bg-accent hover:text-foreground"
+};
+/** Switch track colour when on (`onColor()`), for Toggle fields and ToggleColumn. */
+const switchOnColorClasses = {
+	primary: "data-[state=checked]:bg-primary",
+	secondary: "data-[state=checked]:bg-secondary-foreground",
+	success: "data-[state=checked]:bg-success",
+	warning: "data-[state=checked]:bg-warning",
+	danger: "data-[state=checked]:bg-destructive",
+	info: "data-[state=checked]:bg-info",
+	gray: "data-[state=checked]:bg-muted-foreground"
+};
+/** Switch track colour when off (`offColor()`); repeats the dark variant it replaces. */
+const switchOffColorClasses = {
+	primary: "data-[state=unchecked]:bg-primary dark:data-[state=unchecked]:bg-primary",
+	secondary: "data-[state=unchecked]:bg-secondary-foreground dark:data-[state=unchecked]:bg-secondary-foreground",
+	success: "data-[state=unchecked]:bg-success dark:data-[state=unchecked]:bg-success",
+	warning: "data-[state=unchecked]:bg-warning dark:data-[state=unchecked]:bg-warning",
+	danger: "data-[state=unchecked]:bg-destructive dark:data-[state=unchecked]:bg-destructive",
+	info: "data-[state=unchecked]:bg-info dark:data-[state=unchecked]:bg-info",
+	gray: "data-[state=unchecked]:bg-muted-foreground dark:data-[state=unchecked]:bg-muted-foreground"
+};
+/** Square icon sizes (IconColumn / IconEntry `size()`). */
+const iconSizeClasses = {
+	xs: "size-3",
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6",
+	xl: "size-8",
+	"2xl": "size-10"
+};
+const iconBackgroundColorClasses = {
+	primary: "bg-primary/10 text-primary",
+	secondary: "bg-secondary text-secondary-foreground",
+	success: "bg-success/10 text-success",
+	warning: "bg-warning/15 text-warning",
+	danger: "bg-destructive/10 text-destructive",
+	info: "bg-info/10 text-info",
+	gray: "bg-muted text-muted-foreground"
+};
+/** The themes.css utility each map uses for custom colour names (`colors(['brand' => …])`). */
+const customColorUtilities = /* @__PURE__ */ new Map([
+	[badgeColorClasses, "alfakit-soft"],
+	[textColorClasses, "alfakit-text"],
+	[solidButtonColorClasses, "alfakit-solid"],
+	[outlineButtonColorClasses, "alfakit-outline"],
+	[ghostButtonColorClasses, "alfakit-ghost"],
+	[switchOnColorClasses, "alfakit-switch-on"],
+	[switchOffColorClasses, "alfakit-switch-off"],
+	[iconBackgroundColorClasses, "alfakit-soft"]
+]);
+function colorClass(map, color, fallback = "gray") {
+	if (color && !(color in map) && isCustomColorName(color)) {
+		const utility = customColorUtilities.get(map);
+		if (utility) return customColorClasses(color, utility);
+	}
+	return map[color ?? fallback] ?? map[fallback] ?? "";
+}
+/** Resolve a semantic colour to a CSS colour value for inline styles (charts, swatches). */
+function cssColor(color) {
+	switch (color) {
+		case "primary": return "var(--primary)";
+		case "success": return "var(--success)";
+		case "warning": return "var(--warning)";
+		case "danger": return "var(--destructive)";
+		case "info": return "var(--info)";
+		case "secondary": return "var(--secondary-foreground)";
+		case "gray":
+		case void 0:
+		case null: return "var(--muted-foreground)";
+		default: return isCustomColorName(color) ? `var(--alfakit-${color}, ${color})` : color;
+	}
+}
+//#endregion
+export { badgeColorClasses, colorClass, cssColor, ghostButtonColorClasses, iconBackgroundColorClasses, iconSizeClasses, outlineButtonColorClasses, solidButtonColorClasses, switchOffColorClasses, switchOnColorClasses, textColorClasses };
+
+//# sourceMappingURL=colors.js.map

package/dist/lib/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","names":[],"sources":["../../src/lib/colors.ts"],"sourcesContent":["import type { Color } from '@alfakit/core'\nimport { customColorClasses, isCustomColorName } from '@alfakit/core'\n\n/**\n * Semantic colour → Tailwind class maps. Classes are spelled out so Tailwind's scanner\n * keeps them.\n */\nexport const badgeColorClasses: Record<string, string> = {\n  primary: 'border-transparent bg-primary/10 text-primary dark:bg-primary/20',\n  secondary: 'border-transparent bg-secondary text-secondary-foreground',\n  success: 'border-transparent bg-success/10 text-success dark:bg-success/20',\n  warning: 'border-transparent bg-warning/10 text-warning dark:bg-warning/20',\n  danger: 'border-transparent bg-destructive/10 text-destructive dark:bg-destructive/20',\n  info: 'border-transparent bg-info/10 text-info dark:bg-info/20',\n  gray: 'border-transparent bg-muted text-muted-foreground',\n}\n\nexport const textColorClasses: Record<string, string> = {\n  primary: 'text-primary',\n  secondary: 'text-secondary-foreground',\n  success: 'text-success',\n  warning: 'text-warning',\n  danger: 'text-destructive',\n  info: 'text-info',\n  gray: 'text-muted-foreground',\n}\n\nexport const solidButtonColorClasses: Record<string, string> = {\n  primary: 'bg-primary text-primary-foreground hover:bg-primary/90',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n  success: 'bg-success text-success-foreground hover:bg-success/90',\n  warning: 'bg-warning text-warning-foreground hover:bg-warning/90',\n  danger: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n  info: 'bg-info text-info-foreground hover:bg-info/90',\n  gray: 'bg-muted text-foreground hover:bg-muted/80',\n}\n\nexport const outlineButtonColorClasses: Record<string, string> = {\n  primary: 'border-primary/40 text-primary hover:bg-primary/10',\n  secondary: 'border-border text-secondary-foreground hover:bg-secondary',\n  success: 'border-success/40 text-success hover:bg-success/10',\n  warning: 'border-warning/50 text-warning hover:bg-warning/10',\n  danger: 'border-destructive/40 text-destructive hover:bg-destructive/10',\n  info: 'border-info/40 text-info hover:bg-info/10',\n  gray: 'border-border text-foreground hover:bg-accent',\n}\n\nexport const ghostButtonColorClasses: Record<string, string> = {\n  primary: 'text-primary hover:bg-primary/10',\n  secondary: 'text-secondary-foreground hover:bg-secondary',\n  success: 'text-success hover:bg-success/10',\n  warning: 'text-warning hover:bg-warning/10',\n  danger: 'text-destructive hover:bg-destructive/10',\n  info: 'text-info hover:bg-info/10',\n  gray: 'text-muted-foreground hover:bg-accent hover:text-foreground',\n}\n\n/** Switch track colour when on (`onColor()`), for Toggle fields and ToggleColumn. */\nexport const switchOnColorClasses: Record<string, string> = {\n  primary: 'data-[state=checked]:bg-primary',\n  secondary: 'data-[state=checked]:bg-secondary-foreground',\n  success: 'data-[state=checked]:bg-success',\n  warning: 'data-[state=checked]:bg-warning',\n  danger: 'data-[state=checked]:bg-destructive',\n  info: 'data-[state=checked]:bg-info',\n  gray: 'data-[state=checked]:bg-muted-foreground',\n}\n\n/** Switch track colour when off (`offColor()`); repeats the dark variant it replaces. */\nexport const switchOffColorClasses: Record<string, string> = {\n  primary: 'data-[state=unchecked]:bg-primary dark:data-[state=unchecked]:bg-primary',\n  secondary:\n    'data-[state=unchecked]:bg-secondary-foreground dark:data-[state=unchecked]:bg-secondary-foreground',\n  success: 'data-[state=unchecked]:bg-success dark:data-[state=unchecked]:bg-success',\n  warning: 'data-[state=unchecked]:bg-warning dark:data-[state=unchecked]:bg-warning',\n  danger: 'data-[state=unchecked]:bg-destructive dark:data-[state=unchecked]:bg-destructive',\n  info: 'data-[state=unchecked]:bg-info dark:data-[state=unchecked]:bg-info',\n  gray: 'data-[state=unchecked]:bg-muted-foreground dark:data-[state=unchecked]:bg-muted-foreground',\n}\n\n/** Square icon sizes (IconColumn / IconEntry `size()`). */\nexport const iconSizeClasses: Record<string, string> = {\n  xs: 'size-3',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-8',\n  '2xl': 'size-10',\n}\n\nexport const iconBackgroundColorClasses: Record<string, string> = {\n  primary: 'bg-primary/10 text-primary',\n  secondary: 'bg-secondary text-secondary-foreground',\n  success: 'bg-success/10 text-success',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-destructive/10 text-destructive',\n  info: 'bg-info/10 text-info',\n  gray: 'bg-muted text-muted-foreground',\n}\n\n/** The themes.css utility each map uses for custom colour names (`colors(['brand' => …])`). */\nconst customColorUtilities = new Map<Record<string, string>, string>([\n  [badgeColorClasses, 'alfakit-soft'],\n  [textColorClasses, 'alfakit-text'],\n  [solidButtonColorClasses, 'alfakit-solid'],\n  [outlineButtonColorClasses, 'alfakit-outline'],\n  [ghostButtonColorClasses, 'alfakit-ghost'],\n  [switchOnColorClasses, 'alfakit-switch-on'],\n  [switchOffColorClasses, 'alfakit-switch-off'],\n  [iconBackgroundColorClasses, 'alfakit-soft'],\n])\n\nexport function colorClass(\n  map: Record<string, string>,\n  color: Color | undefined | null,\n  fallback = 'gray',\n): string {\n  // A custom panel colour: the generic utility pointed at `--alfakit-{name}`.\n  if (color && !(color in map) && isCustomColorName(color)) {\n    const utility = customColorUtilities.get(map)\n\n    if (utility) return customColorClasses(color, utility)\n  }\n\n  return map[color ?? fallback] ?? map[fallback] ?? ''\n}\n\n/** Resolve a semantic colour to a CSS colour value for inline styles (charts, swatches). */\nexport function cssColor(color: Color | undefined | null): string {\n  switch (color) {\n    case 'primary':\n      return 'var(--primary)'\n    case 'success':\n      return 'var(--success)'\n    case 'warning':\n      return 'var(--warning)'\n    case 'danger':\n      return 'var(--destructive)'\n    case 'info':\n      return 'var(--info)'\n    case 'secondary':\n      return 'var(--secondary-foreground)'\n    case 'gray':\n    case undefined:\n    case null:\n      return 'var(--muted-foreground)'\n    default:\n      // A custom panel colour (`colors(['brand' => …])`), else the CSS value itself.\n      return isCustomColorName(color) ? `var(--alfakit-${color}, ${color})` : color\n  }\n}\n"],"mappings":";;;;;;AAOA,MAAa,oBAA4C;CACvD,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;AAEA,MAAa,mBAA2C;CACtD,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;AAEA,MAAa,0BAAkD;CAC7D,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;AAEA,MAAa,4BAAoD;CAC/D,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;AAEA,MAAa,0BAAkD;CAC7D,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;;AAGA,MAAa,uBAA+C;CAC1D,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;;AAGA,MAAa,wBAAgD;CAC3D,SAAS;CACT,WACE;CACF,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;;AAGA,MAAa,kBAA0C;CACrD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAa,6BAAqD;CAChE,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;;AAGA,MAAM,uCAAuB,IAAI,IAAoC;CACnE,CAAC,mBAAmB,cAAc;CAClC,CAAC,kBAAkB,cAAc;CACjC,CAAC,yBAAyB,eAAe;CACzC,CAAC,2BAA2B,iBAAiB;CAC7C,CAAC,yBAAyB,eAAe;CACzC,CAAC,sBAAsB,mBAAmB;CAC1C,CAAC,uBAAuB,oBAAoB;CAC5C,CAAC,4BAA4B,cAAc;AAC7C,CAAC;AAED,SAAgB,WACd,KACA,OACA,WAAW,QACH;CAER,IAAI,SAAS,EAAE,SAAS,QAAQ,kBAAkB,KAAK,GAAG;EACxD,MAAM,UAAU,qBAAqB,IAAI,GAAG;EAE5C,IAAI,SAAS,OAAO,mBAAmB,OAAO,OAAO;CACvD;CAEA,OAAO,IAAI,SAAS,aAAa,IAAI,aAAa;AACpD;;AAGA,SAAgB,SAAS,OAAyC;CAChE,QAAQ,OAAR;EACE,KAAK,WACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK;EACL,KAAK,KAAA;EACL,KAAK,MACH,OAAO;EACT,SAEE,OAAO,kBAAkB,KAAK,IAAI,iBAAiB,MAAM,IAAI,MAAM,KAAK;CAC5E;AACF"}

package/dist/lib/discovery.d.ts

@@ -0,0 +1,22 @@
+import { AnyComponent } from "../context.js";
+import { ComponentDiscovery, DiscoveredEntry, DiscoveryModules, DiscoveryOptions } from "@alfakit/core";
+//#region src/lib/discovery.d.ts
+/**
+ * A discovered component: rendered straight away once its code has loaded (the pages that
+ * use it preload it, see `ComponentDiscovery.preloadFor()`), else as soon as it arrives
+ * (through state, not `<Suspense>`, whose reveal React throttles by up to 300 ms).
+ * Each mount keeps the path it started with, so loading never remounts a field.
+ */
+export declare function discoveredComponent(entry: DiscoveredEntry<AnyComponent>): AnyComponent;
+export interface DiscoveredComponents {
+  discovery: ComponentDiscovery<AnyComponent>;
+  components: Record<string, AnyComponent>;
+  pages: Record<string, AnyComponent>;
+}
+/**
+ * Registry entries for `createAlfakit({ discover: import.meta.glob(…) })`, also usable on
+ * their own: `registry.registerMany(discoverComponents(modules).components)`.
+ */
+export declare function discoverComponents(modules: DiscoveryModules | undefined, options?: DiscoveryOptions): DiscoveredComponents;
+//#endregion
+//# sourceMappingURL=discovery.d.ts.map

package/dist/lib/discovery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"discovery.d.ts","names":[],"sources":["../../src/lib/discovery.tsx"],"mappings":";;;;;;;;;wBAegB,oBAAoB,OAAO,gBAAgB,gBAAgB;iBAmC1D;EACf,WAAW,mBAAmB;EAC9B,YAAY,eAAe;EAC3B,OAAO,eAAe;;;;;;wBAOR,mBACd,SAAS,8BACT,UAAS,mBACR"}

package/dist/lib/discovery.js

@@ -0,0 +1,45 @@
+import { ComponentDiscovery } from "@alfakit/core";
+import { createElement, useEffect, useState } from "react";
+//#region src/lib/discovery.tsx
+/**
+* A discovered component: rendered straight away once its code has loaded (the pages that
+* use it preload it, see `ComponentDiscovery.preloadFor()`), else as soon as it arrives
+* (through state, not `<Suspense>`, whose reveal React throttles by up to 300 ms).
+* Each mount keeps the path it started with, so loading never remounts a field.
+*/
+function discoveredComponent(entry) {
+	function Discovered(props) {
+		const [state, setState] = useState(() => ({ component: entry.current }));
+		useEffect(() => {
+			if (state.component) return;
+			let active = true;
+			entry.load().then((component) => {
+				if (active) setState({ component });
+			}, (error) => {
+				if (active) setState({ error: error ?? /* @__PURE__ */ new Error(`Failed to load ${entry.key}`) });
+			});
+			return () => {
+				active = false;
+			};
+		}, [state.component]);
+		if (state.error !== void 0) throw state.error;
+		return state.component ? createElement(state.component, props) : null;
+	}
+	Discovered.displayName = `Discovered(${entry.key})`;
+	return Discovered;
+}
+/**
+* Registry entries for `createAlfakit({ discover: import.meta.glob(…) })`, also usable on
+* their own: `registry.registerMany(discoverComponents(modules).components)`.
+*/
+function discoverComponents(modules, options = {}) {
+	const discovery = new ComponentDiscovery(modules ?? {}, options);
+	return {
+		discovery,
+		...discovery.map(discoveredComponent)
+	};
+}
+//#endregion
+export { discoverComponents, discoveredComponent };
+
+//# sourceMappingURL=discovery.js.map

package/dist/lib/discovery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"discovery.js","names":[],"sources":["../../src/lib/discovery.tsx"],"sourcesContent":["import {\n  ComponentDiscovery,\n  type DiscoveredEntry,\n  type DiscoveryModules,\n  type DiscoveryOptions,\n} from '@alfakit/core'\nimport { createElement, useEffect, useState } from 'react'\nimport type { AnyComponent } from '../context'\n\n/**\n * A discovered component: rendered straight away once its code has loaded (the pages that\n * use it preload it, see `ComponentDiscovery.preloadFor()`), else as soon as it arrives\n * (through state, not `<Suspense>`, whose reveal React throttles by up to 300 ms).\n * Each mount keeps the path it started with, so loading never remounts a field.\n */\nexport function discoveredComponent(entry: DiscoveredEntry<AnyComponent>): AnyComponent {\n  function Discovered(props: Record<string, unknown>) {\n    const [state, setState] = useState<{ component?: AnyComponent; error?: unknown }>(() => ({\n      component: entry.current,\n    }))\n\n    useEffect(() => {\n      if (state.component) return\n\n      let active = true\n\n      entry.load().then(\n        (component) => {\n          if (active) setState({ component })\n        },\n        (error: unknown) => {\n          if (active) setState({ error: error ?? new Error(`Failed to load ${entry.key}`) })\n        },\n      )\n\n      return () => {\n        active = false\n      }\n    }, [state.component])\n\n    if (state.error !== undefined) throw state.error\n\n    return state.component ? createElement(state.component, props) : null\n  }\n\n  Discovered.displayName = `Discovered(${entry.key})`\n\n  return Discovered\n}\n\nexport interface DiscoveredComponents {\n  discovery: ComponentDiscovery<AnyComponent>\n  components: Record<string, AnyComponent>\n  pages: Record<string, AnyComponent>\n}\n\n/**\n * Registry entries for `createAlfakit({ discover: import.meta.glob(…) })`, also usable on\n * their own: `registry.registerMany(discoverComponents(modules).components)`.\n */\nexport function discoverComponents(\n  modules: DiscoveryModules | undefined,\n  options: DiscoveryOptions = {},\n): DiscoveredComponents {\n  const discovery = new ComponentDiscovery<AnyComponent>(modules ?? {}, options)\n\n  return { discovery, ...discovery.map(discoveredComponent) }\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,oBAAoB,OAAoD;CACtF,SAAS,WAAW,OAAgC;EAClD,MAAM,CAAC,OAAO,YAAY,gBAA+D,EACvF,WAAW,MAAM,QACnB,EAAE;EAEF,gBAAgB;GACd,IAAI,MAAM,WAAW;GAErB,IAAI,SAAS;GAEb,MAAM,KAAK,CAAC,CAAC,MACV,cAAc;IACb,IAAI,QAAQ,SAAS,EAAE,UAAU,CAAC;GACpC,IACC,UAAmB;IAClB,IAAI,QAAQ,SAAS,EAAE,OAAO,yBAAS,IAAI,MAAM,kBAAkB,MAAM,KAAK,EAAE,CAAC;GACnF,CACF;GAEA,aAAa;IACX,SAAS;GACX;EACF,GAAG,CAAC,MAAM,SAAS,CAAC;EAEpB,IAAI,MAAM,UAAU,KAAA,GAAW,MAAM,MAAM;EAE3C,OAAO,MAAM,YAAY,cAAc,MAAM,WAAW,KAAK,IAAI;CACnE;CAEA,WAAW,cAAc,cAAc,MAAM,IAAI;CAEjD,OAAO;AACT;;;;;AAYA,SAAgB,mBACd,SACA,UAA4B,CAAC,GACP;CACtB,MAAM,YAAY,IAAI,mBAAiC,WAAW,CAAC,GAAG,OAAO;CAE7E,OAAO;EAAE;EAAW,GAAG,UAAU,IAAI,mBAAmB;CAAE;AAC5D"}

package/dist/lib/icons.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps, ComponentType } from "react";
+import { LucideProps } from "lucide-react";
+import { DynamicIcon, IconName } from "lucide-react/dynamic.mjs";
+//#region src/lib/icons.d.ts
+type DynamicIconComponent = typeof DynamicIcon;
+/** A statically imported glyph (`SearchIcon` from `lucide-react`). */
+export type IconGlyph = ComponentType<LucideProps>;
+export type IconProps = Omit<ComponentProps<DynamicIconComponent>, 'name' | 'fallback'> & {
+  name?: string | null;
+  fallback?: IconName | IconGlyph;
+};
+/**
+ * Renders an icon resolved by the server (`Icons::resolve()`): a Lucide name (`users`,
+ * `shopping-cart`), an image URL or sanitised `<svg>` markup. `alfakit::` aliases use the
+ * app's replacement (`Icons::register()`) or `fallback`. Unknown Lucide names fall back to
+ * `fallback`, if any. `fallback` may also be a statically imported glyph
+ * (`fallback={SearchIcon}`): renderer chrome uses it so an unreplaced alias draws at once,
+ * without loading anything. Register a `panel:icon` component
+ * (`createAlfakit({ components: { 'panel:icon': MyIcon } })`) to render every named icon
+ * with another icon set; it receives `name`, `fallback` and `className`.
+ */
+export declare function Icon({ name, fallback: fallbackProp, className, ...props }: IconProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=icons.d.ts.map

package/dist/lib/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","names":["LucideIconName"],"sources":["../../src/lib/icons.tsx"],"mappings":";;;;KAOK,8BAA8B;;YAsDvB,YAAY,cAAc;YAE1B,YAAY,KAAK,eAAe;EAC1C;EACA,WAAWA,WAAiB;;;;;;;;;;;;wBAad,OAAO,MAAM,UAAU,cAAc,cAAc,SAAS,4BAAS,IAAA"}