themelia-react-ui 2.0.6 → 3.0.0

package/templates/admin-shell-template.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react';
+import { useState, type MouseEvent, type ReactNode } from 'react';
 import {
 	BarChart3,
 	Package,
@@ -9,8 +9,8 @@ import {
 } from 'lucide-react';
 
 import { IconBadge } from 'themelia-react-ui/base/display';
+import { NavigationTabs, type NavigationTabItem } from 'themelia-react-ui/base/navigation';
 import { Stack } from 'themelia-react-ui/base/structure';
-import { useSidebar } from 'themelia-react-ui/base/sidebar';
 import {
 	type BreadcrumbItem,
 	type LayoutLinkRenderProps,
@@ -28,6 +28,7 @@ import {
 	AppSidebar,
 	LayoutSidebarProvider,
 	SidebarNavigationUser,
+	useLayoutSidebar,
 	type AppSidebarProps,
 } from 'themelia-react-ui/layout/sidebar';
 import { Text } from 'themelia-react-ui/typography';
@@ -102,6 +103,20 @@ const TEMPLATE_ROUTES: Record<AdminTemplateId, TemplateRouteMeta> = {
 	},
 };
 
+/** The same destinations as the sidebar, in its order, as route tabs for the stacked shell's header. */
+const STACKED_NAVIGATION: NavigationTabItem[] = (['analytics', 'orders', 'products', 'customers', 'user-permissions'] as const).map((id) => ({
+	id,
+	title: TEMPLATE_ROUTES[id].label,
+	href: TEMPLATE_ROUTES[id].url,
+}));
+
+/** A plain primary click is the app's to route; a modified one opens the real destination in the browser. */
+function isPlainClick(event: MouseEvent<HTMLAnchorElement>) {
+	return !event.defaultPrevented && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+
+const SKIP_TO_CONTENT_LABEL = 'Skip to content';
+
 const SIDEBAR_ICON_MAP: NonNullable<AppSidebarProps['iconMap']> = {
 	analytics: BarChart3,
 	orders: ShoppingBag,
@@ -200,18 +215,19 @@ export interface AdminStarterShellProps {
 	children?: ReactNode;
 }
 
-function TemplateLink({ href, children, active, disabled, external, target, rel, onClick, onNavigate, ...props }: LayoutLinkRenderProps & { onNavigate: (id: AdminTemplateId) => void }) {
-	return <a {...props} href={disabled ? undefined : href} target={target ?? (external ? '_blank' : undefined)} rel={rel ?? (external ? 'noopener noreferrer' : undefined)} aria-current={active ? 'page' : undefined} aria-disabled={disabled || undefined} onClick={(event) => {
+/** The router seam: a real app renders its router's Link here. Navigation owners pass `aria-current` ready to spread. */
+function TemplateLink({ href, children, active: _active, disabled, external, target, rel, onClick, onNavigate, ...props }: LayoutLinkRenderProps & { onNavigate: (id: AdminTemplateId) => void }) {
+	return <a {...props} href={disabled ? undefined : href} target={target ?? (external ? '_blank' : undefined)} rel={rel ?? (external ? 'noopener noreferrer' : undefined)} aria-disabled={disabled || undefined} onClick={(event) => {
 		onClick?.(event);
 		if (disabled) { event.preventDefault(); return; }
-		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || external || (target && target !== '_self')) return;
+		if (!isPlainClick(event) || external || (target && target !== '_self')) return;
 		const route = Object.values(TEMPLATE_ROUTES).find((item) => item.url === href);
 		if (route) { event.preventDefault(); onNavigate(route.id); }
 	}}>{children}</a>;
 }
 
 function TemplateUserMenu({ sidebar = false, onNavigate }: { sidebar?: boolean; onNavigate: (id: AdminTemplateId) => void }) {
-	const { setOpenMobile } = useSidebar();
+	const { setOpenMobile } = useLayoutSidebar();
 	const openSettings = () => { onNavigate('user-permissions'); setOpenMobile(false); };
 	return sidebar ? <SidebarNavigationUser user={CURRENT_USER} onSettings={openSettings} /> : <HeaderUserMenu user={CURRENT_USER} onSettings={openSettings} />;
 }
@@ -282,6 +298,7 @@ export function AdminStarterShell({
 
 	const trailingToolsNode = (
 		<Stack direction="horizontal" align="center" gap="sm" wrap={false}>
+			{/* The unread badge and "Mark all as read" follow each notification's `read` flag. */}
 			<HeaderNotifications
 				notifications={notifications}
 				onMarkAllRead={() =>
@@ -314,6 +331,7 @@ export function AdminStarterShell({
 				<AppLayout
 					variant={defaultShellVariant}
 					className="h-full min-h-0"
+					skipToContentLabel={SKIP_TO_CONTENT_LABEL}
 					sidebar={sidebarNode}
 					slots={{
 						toolbarStart: breadcrumbsNode,
@@ -323,15 +341,37 @@ export function AdminStarterShell({
 					{activePageNode}
 				</AppLayout>
 			) : defaultShellVariant === 'stacked' ? (
-				<AppLayout variant="stacked" className="h-full min-h-0" logo={brandLogo}
-					nav={<Stack direction="horizontal" gap="lg">{Object.values(TEMPLATE_ROUTES).map((route) => <TemplateLink key={route.id} href={route.url} active={route.id === activeTemplate} onNavigate={selectTemplate}>{route.label}</TemplateLink>)}</Stack>}
-					slots={{ headerEnd: trailingToolsNode }}>
+				// The stacked shell's contained measure owns the page gutter, so each
+				// route Page keeps its defaults. Its navigation is route tabs: real
+				// links that bring their own landmark, so the shell's region is a div.
+				<AppLayout
+					variant="stacked"
+					className="h-full min-h-0"
+					skipToContentLabel={SKIP_TO_CONTENT_LABEL}
+					logo={brandLogo}
+					navAs="div"
+					nav={
+						<NavigationTabs
+							items={STACKED_NAVIGATION}
+							currentPath={activeMeta.url}
+							strings={{ tabsAria: 'Primary navigation' }}
+							onSelect={(item, event) => {
+								const route = Object.values(TEMPLATE_ROUTES).find((candidate) => candidate.url === item.href);
+								if (!route || !isPlainClick(event)) return;
+								event.preventDefault();
+								selectTemplate(route.id);
+							}}
+						/>
+					}
+					slots={{ headerEnd: trailingToolsNode }}
+				>
 					{activePageNode}
 				</AppLayout>
 			) : (
 				<AppLayout
 					variant={defaultShellVariant}
 					className="h-full min-h-0"
+					skipToContentLabel={SKIP_TO_CONTENT_LABEL}
 					logo={brandLogo}
 					sidebar={sidebarNode}
 					slots={{

package/templates/analytics-operations-template.tsx

@@ -18,14 +18,8 @@ import {
 	ItemTitle,
 } from 'themelia-react-ui/base/item';
 import { Grid, Stack } from 'themelia-react-ui/base/structure';
-import {
-	ActivityHeatmap,
-	MetricBar,
-	MetricComparison,
-	UsageCard,
-	type ActivityHeatmapDay,
-	type MetricData,
-} from 'themelia-react-ui/blocks/analytics';
+import { ActivityHeatmap, MetricComparison, UsageCard, type ActivityHeatmapDay, type MetricData } from 'themelia-react-ui/blocks/analytics';
+import { MetricBar } from 'themelia-react-ui/blocks/analytics/charts';
 import { MetadataList } from 'themelia-react-ui/base/metadata-list';
 import { ActivityLog, type ActivityLogEntry } from 'themelia-react-ui/features/activities';
 import { TwoColumnLayout } from 'themelia-react-ui/layout/containers';
@@ -199,27 +193,29 @@ export function AnalyticsOperationsTemplate({
 			header={{
 				title: 'Store overview',
 				description: 'Sales KPIs for the selected period, with monthly comparisons and a current operations snapshot.',
-				titleBadges: [{ label: 'Live', tone: 'success' }],
-				// A period choice is a control, not a command, so it stays in `actions`.
-				actions: (
-					<Select
-						aria-label="Reporting period"
-						options={[
-							{ value: '7d', label: 'Last 7 days' },
-							{ value: '30d', label: 'Last 30 days' },
-						]}
-						value={period}
-						onValueChange={(value) => {
-							if (value === '7d' || value === '30d') setPeriod(value);
-						}}
-					/>
-				),
+				slots: { titleSuffix: <Badge tone="success">Live</Badge> },
 			}}
+			// A period choice is a control, not a command, so it sits in the page toolbar.
+			toolbar={
+				<Select
+					className="w-auto"
+					aria-label="Reporting period"
+					options={[
+						{ value: '7d', label: 'Last 7 days' },
+						{ value: '30d', label: 'Last 30 days' },
+					]}
+					value={period}
+					onValueChange={(value) => {
+						if (value === '7d' || value === '30d') setPeriod(value);
+					}}
+				/>
+			}
 		>
 			<Stack gap="2xl">
 				<MetricBar metrics={kpiMetrics} />
 
 				<TwoColumnLayout
+					adaptTo="container"
 					stickyAside
 					main={
 						<Stack gap="2xl">
@@ -364,7 +360,7 @@ export function AnalyticsOperationsTemplate({
 								title="Recent activity"
 								description="Latest carrier pickups, payouts, and catalog updates."
 							>
-								<ActivityLog bare entries={STORE_ACTIVITY} itemSpacing="compact" />
+								<ActivityLog title={false} entries={STORE_ACTIVITY} itemSpacing="compact" />
 							</Card>
 						</Stack>
 					}

package/templates/customers-template.tsx

@@ -16,7 +16,7 @@ import { DecimalInput } from 'themelia-react-ui/base/forms-numeric';
 import { Grid, Stack } from 'themelia-react-ui/base/structure';
 import { Input, Textarea } from 'themelia-react-ui/base/text-inputs';
 import { PhoneInput, TagsInput } from 'themelia-react-ui/base/value-inputs';
-import { MetricBar, type MetricData } from 'themelia-react-ui/blocks/analytics';
+import { MetricBar, type MetricData } from 'themelia-react-ui/blocks/analytics/charts';
 import { AddressCard } from 'themelia-react-ui/blocks/commerce';
 import { MetadataList } from 'themelia-react-ui/base/metadata-list';
 import { ActivityLog, type ActivityLogEntry } from 'themelia-react-ui/features/activities';
@@ -279,6 +279,7 @@ export function CustomersAdminTemplate() {
 				<MetricBar metrics={customerMetrics} />
 
 				<TwoColumnLayout
+					adaptTo="container"
 					stickyAside
 					main={
 						<Stack gap="2xl">
@@ -302,7 +303,7 @@ export function CustomersAdminTemplate() {
 								title="Timeline"
 								description="Order history, address changes, and store credit adjustments."
 							>
-								<ActivityLog bare entries={activityEntries} itemSpacing="compact" />
+								<ActivityLog title={false} entries={activityEntries} itemSpacing="compact" />
 							</Card>
 						</Stack>
 					}
@@ -363,13 +364,15 @@ export function CustomersAdminTemplate() {
 							<AddressCard
 								surface="card"
 								kind="shipping"
-								name={customerName}
-								line1="214 Mercer Street"
-								line2="Apt 4B"
-								city="New York, NY"
-								postalCode="10012"
-								country="United States"
-								phone="+1 (212) 555-0192"
+								address={{
+									name: customerName,
+									line1: '214 Mercer Street',
+									line2: 'Apt 4B',
+									city: 'New York, NY',
+									postalCode: '10012',
+									country: 'United States',
+									phone: '+1 (212) 555-0192',
+								}}
 								default
 							/>
 

package/templates/index.ts

@@ -18,12 +18,6 @@ export { ProductsAdminTemplate } from './products-template';
 
 export { CustomersAdminTemplate } from './customers-template';
 
-export {
-	UserPermissionsTemplate,
-	UserPermissionsTemplate as UserPermissionsAdminTemplate,
-} from './user-permissions-template';
+export { UserPermissionsTemplate } from './user-permissions-template';
 
-export {
-	AnalyticsOperationsTemplate,
-	AnalyticsOperationsTemplate as AnalyticsOperationsAdminTemplate,
-} from './analytics-operations-template';
+export { AnalyticsOperationsTemplate } from './analytics-operations-template';

package/templates/orders-template.tsx

@@ -443,16 +443,15 @@ export function OrdersAdminTemplate() {
 			header={{
 				title: 'Order #1042',
 				description: 'October 14, 2026 at 2:14 pm · Online Store',
-				titleBadges: [
-					{
-						label: totalRefundedAmount > 0 ? 'Partially refunded' : 'Paid',
-						tone: totalRefundedAmount > 0 ? 'warning' : 'success',
-					},
-					{
-						label: unfulfilledUnitCount > 0 ? 'Partially fulfilled' : 'Fulfilled',
-						tone: unfulfilledUnitCount > 0 ? 'info' : 'success',
-					},
-				],
+				slots: {
+					// Payment and fulfilment status sit directly after the title.
+					titleSuffix: (
+						<Stack direction="horizontal" gap="sm" wrap>
+							<Badge tone={totalRefundedAmount > 0 ? 'warning' : 'success'}>{totalRefundedAmount > 0 ? 'Partially refunded' : 'Paid'}</Badge>
+							<Badge tone={unfulfilledUnitCount > 0 ? 'info' : 'success'}>{unfulfilledUnitCount > 0 ? 'Partially fulfilled' : 'Fulfilled'}</Badge>
+						</Stack>
+					),
+				},
 				// Fulfillment is the order's next step, so it is the route's one primary command
 				// while physical items remain unfulfilled.
 				primaryAction: {
@@ -464,6 +463,7 @@ export function OrdersAdminTemplate() {
 			}}
 		>
 			<TwoColumnLayout
+				adaptTo="container"
 				stickyAside
 				main={
 					<Stack gap="2xl">
@@ -838,7 +838,7 @@ export function OrdersAdminTemplate() {
 
 						{/* Order Timeline */}
 						<Card title="Timeline">
-							<ActivityLog bare entries={timeline} itemSpacing="compact" />
+							<ActivityLog title={false} entries={timeline} itemSpacing="compact" />
 						</Card>
 					</Stack>
 				}
@@ -888,25 +888,29 @@ export function OrdersAdminTemplate() {
 							surface="card"
 							kind="shipping"
 							default
-							name="Ava Bennett"
-							line1="214 Mercer Street"
-							line2="Apt 4B"
-							city="New York, NY"
-							postalCode="10012"
-							country="United States"
-							phone="+1 (212) 555-0148"
+							address={{
+								name: 'Ava Bennett',
+								line1: '214 Mercer Street',
+								line2: 'Apt 4B',
+								city: 'New York, NY',
+								postalCode: '10012',
+								country: 'United States',
+								phone: '+1 (212) 555-0148',
+							}}
 						/>
 
 						{/* Billing Address Card */}
 						<AddressCard
 							surface="card"
 							kind="billing"
-							name="Ava Bennett"
-							line1="214 Mercer Street"
-							line2="Apt 4B"
-							city="New York, NY"
-							postalCode="10012"
-							country="United States"
+							address={{
+								name: 'Ava Bennett',
+								line1: '214 Mercer Street',
+								line2: 'Apt 4B',
+								city: 'New York, NY',
+								postalCode: '10012',
+								country: 'United States',
+							}}
 						/>
 
 						{/* Payment Method Card */}

package/templates/products-template.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useId, useMemo, useRef, useState } from 'react';
 
 import { Badge } from 'themelia-react-ui/base/badge';
 import { Card } from 'themelia-react-ui/base/cards';
@@ -315,8 +315,17 @@ export function ProductsAdminTemplate() {
 		variantDrawer.show();
 	};
 
+	// Local ids for unsaved variants. `crypto.randomUUID()` exists only in secure
+	// contexts, so it throws on a LAN dev server; the server assigns the real id on save.
+	const variantIdPrefix = useId();
+	const variantIdCount = useRef(0);
+	const createVariantId = () => {
+		variantIdCount.current += 1;
+		return `${variantIdPrefix}new-variant-${variantIdCount.current}`;
+	};
+
 	const duplicateVariant = (variant: ProductVariantRow) => {
-		const copy = { ...variant, id: crypto.randomUUID(), sku: `${String(variant.sku ?? 'MWC')}-COPY` };
+		const copy = { ...variant, id: createVariantId(), sku: `${String(variant.sku ?? 'MWC')}-COPY` };
 		setVariantState((current) => [...current, copy]);
 		return copy;
 	};
@@ -368,7 +377,7 @@ export function ProductsAdminTemplate() {
 					productDirty ? 'Unsaved product changes' : savedRevision !== null
 						? `Saved revision #${savedRevision} · Updated just now`
 						: `Men’s Knitwear · ${variantState.length} variants (${totalInventory} in stock)`,
-				titleBadges: [{ label: productStatus, tone: statusBadgeTone }],
+				slots: { titleSuffix: <Badge tone={statusBadgeTone}>{productStatus}</Badge> },
 				primaryAction: {
 					label: 'Save product',
 					disabled: !productDirty,
@@ -378,6 +387,7 @@ export function ProductsAdminTemplate() {
 			}}
 		>
 			<TwoColumnLayout
+				adaptTo="container"
 				stickyAside
 				main={
 					<Stack gap="2xl">
@@ -453,7 +463,7 @@ export function ProductsAdminTemplate() {
 								setVariantState((current) => [
 									...current,
 									{
-										id: crypto.randomUUID(),
+										id: createVariantId(),
 										name: 'Heather Gray / Large',
 										sku: `MWC-GRY-L-${nextIndex}`,
 										price: '145.00',

package/templates/user-permissions-template.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { Badge } from 'themelia-react-ui/base/badge';
 import { Button } from 'themelia-react-ui/base/buttons';
 import { Card } from 'themelia-react-ui/base/cards';
 import { Select, ToggleField } from 'themelia-react-ui/base/choice-inputs';
@@ -210,20 +211,15 @@ export function UserPermissionsTemplate() {
 			header={{
 				title: fullName,
 				description: `${workEmail} · Staff member since Jan 2025`,
-				titleBadges: [
-					{
-						label: accountSuspended ? 'Suspended' : 'Active',
-						tone: accountSuspended ? 'destructive' : 'success',
-					},
-					{
-						label:
-							ROLE_PRESET_OPTIONS.find((opt) => opt.value === rolePreset)?.label.split(
-								' (',
-							)[0] ?? 'Custom role',
-						// A role is a kind, not a status.
-						tone: 'neutral',
-					},
-				],
+				slots: {
+					titleSuffix: (
+						<Stack direction="horizontal" gap="sm" wrap>
+							<Badge tone={accountSuspended ? 'destructive' : 'success'}>{accountSuspended ? 'Suspended' : 'Active'}</Badge>
+							{/* A role is a kind, not a status. */}
+							<Badge tone="neutral">{ROLE_PRESET_OPTIONS.find((opt) => opt.value === rolePreset)?.label.split(' (')[0] ?? 'Custom role'}</Badge>
+						</Stack>
+					),
+				},
 				primaryAction: { label: 'Save changes', disabled: !isDirty, onClick: handleSaveProfile },
 				// Destructive commands move into the More actions menu and confirm before they run.
 				secondaryActions: [
@@ -250,6 +246,7 @@ export function UserPermissionsTemplate() {
 				)}
 
 				<TwoColumnLayout
+					adaptTo="container"
 					stickyAside
 					main={
 						<Stack gap="2xl">

package/dist/accordion-0tQUZ20r.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion-0tQUZ20r.js","names":["Accordion","AccordionPrimitive","AccordionItem","AccordionTrigger","AccordionContent","Accordion","React","PrimitiveAccordion","PrimitiveAccordionItem","PrimitiveAccordionTrigger","PrimitiveAccordionContent","Accordion","Text","focusRecipes","motionRecipes","Stack","interactionRecipes","DisclosurePanelElement","IconBadge","React$1","Accordion$2","props","Accordion","cn","className","AccordionItem$1","AccordionTrigger$1","children","ChevronDownIcon","AccordionContent$1","panelProps","Accordion$1","AccordionItem","AccordionTrigger","isSimpleText","AccordionContent","ACCORDION_ROOT_VARIANT_CLASS","ACCORDION_ITEM_VARIANT_CLASS","ACCORDION_TRIGGER_BASE","ACCORDION_CONTENT_PADDING","defaultSmartAccordionStrings","SmartAccordion","forwardRef","stringsProp","strings","useStrings","hasIconColumn","iconStyle","items","item","contentPadding","triggerGridClass","onValueChange","next","variant","itemClassName","triggerClassName","SmartAccordionIcon","isSimpleContent","contentClassName","content","reserveSpace","icon"],"sources":["../src/components/ui/accordion.tsx","../src/components/base/accordion/accordion.tsx","../src/components/base/accordion/accordion-variants.ts","../src/components/base/accordion/accordion.strings.ts","../src/components/base/accordion/smart-accordion.tsx"],"sourcesContent":["import { DisclosurePanelElement } from './disclosure-panel';\nimport { motionRecipes } from '../../lib/motion-recipes';\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"../../lib/utils\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"border-border accordion--component flex w-full flex-col border box-border overflow-hidden\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-border accordion-item--component border-b last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"accordion-header m-0\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\"accordion-trigger--component flex w-full items-center justify-between border-0 bg-transparent outline-none cursor-pointer box-border\", className)}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className={cn(\"accordion-trigger--icon size-icon text-muted-foreground shrink-0 [[aria-expanded=true]_&]:rotate-180\", motionRecipes.chevron)} />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  render,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className={cn(\"accordion-content--component box-border text-inherit h-(--accordion-panel-height)\", motionRecipes.disclosure, className)}\n      {...props}\n      render={(panelProps, state) => <DisclosurePanelElement props={panelProps} state={state} render={render} heightVariable=\"--accordion-panel-height\" />}\n    >\n      {children}\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n\n","/**\n * Accordion — tokenized base wrapper around the shadcn/Base UI primitive.\n *\n * The internal primitive intentionally keeps shadcn's roomy defaults. This\n * public layer calibrates them for admin surfaces: radius tokens, 12px row\n * insets, density-aware vertical rhythm, quiet hover/focus treatments, and\n * matching trigger/content columns. Consumers retain the complete compound\n * API and can override any treatment with `className`.\n */\nimport * as React from 'react';\n\nimport {\n\tAccordion as PrimitiveAccordion,\n\tAccordionContent as PrimitiveAccordionContent,\n\tAccordionItem as PrimitiveAccordionItem,\n\tAccordionTrigger as PrimitiveAccordionTrigger,\n} from '../../ui/accordion';\nimport { Text } from '../../typography';\nimport { cn } from '../../../lib/utils';\nimport { focusRecipes } from '../../../lib/focus-recipes';\nimport { interactionRecipes } from '../../../lib/interaction-recipes';\n\nexport type AccordionProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordion>;\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionItem>;\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionTrigger>;\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionContent>;\n\nconst Accordion = React.forwardRef<React.ElementRef<typeof PrimitiveAccordion>, AccordionProps>(\n\tfunction Accordion({ className, ...props }, ref) {\n\t\treturn (\n\t\t\t<PrimitiveAccordion\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion--component rounded-surface border-border bg-card text-card-foreground',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAccordion.displayName = 'Accordion';\n\nconst AccordionItem = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionItem>, AccordionItemProps>(\n\tfunction AccordionItem({ className, ...props }, ref) {\n\t\treturn (\n\t\t\t<PrimitiveAccordionItem\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-item--component border-border',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionTrigger>, AccordionTriggerProps>(\n\tfunction AccordionTrigger({ className, children, ...props }, ref) {\n\t\tconst isSimpleText = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n\t\treturn (\n\t\t\t<PrimitiveAccordionTrigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-trigger--component min-h-action items-center gap-space-lg px-row-x py-row-y',\n\t\t\t\t\t`text-start text-inherit text-sm font-medium transition-colors ${interactionRecipes.rowHover} hover:no-underline`,\n\t\t\t\t\t// Disabled governs expanding/collapsing. Dim only this trigger;\n\t\t\t\t\t// slotted panel controls and nested accordions own their own state.\n\t\t\t\t\t'disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50',\n\t\t\t\t\t// Inset: the shell clips its rounded corners, so an outer ring was cut off.\n\t\t\t\t\t`focus-visible:z-10 ${focusRecipes.inset}`,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{isSimpleText ? (\n\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className=\"text-inherit\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Text>\n\t\t\t\t) : children}\n\t\t\t</PrimitiveAccordionTrigger>\n\t\t);\n\t},\n);\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nconst AccordionContent = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionContent>, AccordionContentProps>(\n\tfunction AccordionContent({ className, children, ...props }, ref) {\n\t\tconst isSimpleText = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n\t\treturn (\n\t\t\t<PrimitiveAccordionContent\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-content--component px-row-x pb-space-lg text-sm',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{isSimpleText ? (\n\t\t\t\t\t<Text tag=\"div\" size=\"inherit\" lineHeight=\"relaxed\" className=\"text-inherit\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Text>\n\t\t\t\t) : children}\n\t\t\t</PrimitiveAccordionContent>\n\t\t);\n\t},\n);\nAccordionContent.displayName = 'AccordionContent';\n\nexport {\n\tAccordion,\n\tAccordionItem,\n\tAccordionTrigger,\n\tAccordionContent,\n};\n","/**\n * Shared accordion-shell variant classes — used by both `SmartAccordion`\n * and any blocks surface that builds on `base/accordion` directly\n * (e.g. `blocks/onboarding/checklist`).\n *\n * Exported because two consumers already keep it in lockstep; a third\n * one will copy this exact map. Centralising means a future tweak\n * (e.g. tighten `card` items to `border-border/70`) propagates.\n *\n * Padding tokens for trigger / content live alongside so the rhythm\n * is shared too:\n *\n * - Trigger: `gap-space-lg px-row-x py-row-y` — density-driven,\n *   `<UIProvider>`\n *   override flows through.\n * - Content padding accounts for the base panel's `px-row-x`.\n *   Medallion and inline rows use shared media/spacing tokens, and\n *   no-icon rows add no extra left padding so body copy tracks the\n *   trigger text column instead of drifting.\n */\nimport type { DisclosureSurface } from '../../../lib/component-vocabulary';\n\nexport type AccordionShellVariant = DisclosureSurface;\n\n// Flat sits inside a surface that already owns the inset. It outdents by the row\n// inset, so trigger and panel text align with that surface's content edge while\n// the hover fill and focus edge keep their room in the surface gutter.\nexport const ACCORDION_ROOT_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'gap-space-md border-0 rounded-none bg-transparent text-inherit overflow-visible',\n\tbordered: 'rounded-surface border border-border bg-card text-card-foreground overflow-hidden',\n\tflat: '-mx-row-x w-auto border-0 rounded-none bg-transparent text-inherit overflow-visible',\n};\n\n// The chevron and the revealed panel carry the open state; an open item is not\n// tinted into a box. Rounded items clip their trigger so its inset focus ring and\n// hover fill follow the item's corners.\nexport const ACCORDION_ITEM_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'border border-border bg-card text-card-foreground rounded-surface overflow-hidden',\n\tbordered: 'bg-transparent not-last:border-b border-border',\n\tflat: 'border-0 not-last:border-b-0 bg-transparent rounded-surface overflow-hidden',\n};\n\nexport const ACCORDION_TRIGGER_BASE =\n\t'items-center gap-space-lg px-row-x py-row-y text-start hover:no-underline';\n\n/**\n * Content-padding presets keyed off the leading-icon width. Use\n * `withMedallion` when the trigger renders a default `IconBadge`\n * plus the shared row gap so body text aligns under the title at every\n * consumer density.\n */\nexport const ACCORDION_CONTENT_PADDING = {\n\t// Composed from root tokens so a scoped density/space boundary applies (the\n\t// `--spacing-*` aliases resolve once at :root inside arbitrary values).\n\twithMedallion: 'ps-[calc(var(--row-x)*var(--space-scale)+var(--avatar)+0.75rem*var(--space-scale))] pe-row-x pt-0',\n\twithInline: 'ps-[calc(var(--row-x)*var(--space-scale)+var(--icon)*1.25+0.75rem*var(--space-scale))] pe-row-x pt-0',\n\twithoutIcon: 'px-row-x pt-0',\n} as const;\n","/**\n * Strings for `SmartAccordion`. There aren't many — Radix handles the\n * trigger ARIA states automatically, so the only library-owned copy is\n * the optional landmark label on the wrapping nav region. Consumers\n * override per-item `title` / `badge` / `content` directly via\n * `SmartAccordionItem` props (the strings live in the data, not here).\n */\nexport interface SmartAccordionStrings {\n\t/**\n\t * Sets `aria-label` on the wrapping element so screen readers can name\n\t * the accordion region. Optional — when absent, no aria-label is set.\n\t */\n\tregionAriaLabel?: string;\n}\n\nexport const defaultSmartAccordionStrings: SmartAccordionStrings = {\n\tregionAriaLabel: undefined,\n};\n","/**\n * SmartAccordion — the canonical \"icon + title + optional badge + body\"\n * accordion pattern, with three visual variants for the surface chrome\n * (`card` | `bordered` | `flat`) and three icon framings (`medallion` |\n * `inline` | `none`).\n *\n * Composes the wrapped `base/accordion` parts (rule 2 — blocks-style\n * convenience built from re-exports, not the raw shadcn primitive).\n *\n * For richer rows (multi-line metadata, custom layouts), drop down to\n * the compound API:\n *\n *     import { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n *       from '.';\n */\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconBadge } from '../display/icon-badge';\nimport { Stack } from '../structure';\nimport { Text } from '../../typography';\nimport { useStrings } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';\nimport {\n\tACCORDION_CONTENT_PADDING,\n\tACCORDION_ITEM_VARIANT_CLASS,\n\tACCORDION_ROOT_VARIANT_CLASS,\n\tACCORDION_TRIGGER_BASE,\n} from './accordion-variants';\nimport { defaultSmartAccordionStrings } from './accordion.strings';\nimport type {\n\tSmartAccordionIconStyle,\n\tSmartAccordionProps,\n} from './accordion.types';\n\n/**\n * Bounded accordion composition for repeated icon, title, description, badge,\n * and body sections. Use the compound Accordion parts when row structure or\n * per-item presentation differs.\n */\nexport const SmartAccordion = forwardRef<HTMLDivElement, SmartAccordionProps>(function SmartAccordion({\n\titems,\n\tmultiple = false,\n\tdefaultValue,\n\tvalue,\n\tonValueChange,\n\tvariant = 'bordered',\n\ticonStyle = 'inline',\n\tclassName,\n\titemClassName,\n\ttriggerClassName,\n\tcontentClassName,\n\tstrings: stringsProp,\n}, ref) {\n\tconst strings = useStrings(defaultSmartAccordionStrings, stringsProp);\n\tconst hasIconColumn = iconStyle !== 'none' && items.some((item) => item.icon != null);\n\tconst contentPadding =\n\t\t!hasIconColumn\n\t\t\t? ACCORDION_CONTENT_PADDING.withoutIcon\n\t\t\t: iconStyle === 'medallion'\n\t\t\t? ACCORDION_CONTENT_PADDING.withMedallion\n\t\t\t: ACCORDION_CONTENT_PADDING.withInline;\n\tconst triggerGridClass = !hasIconColumn\n\t\t? 'grid-cols-[minmax(0,1fr)]'\n\t\t: 'grid-cols-[auto_minmax(0,1fr)]';\n\treturn (\n\t\t<Accordion\n\t\t\tref={ref}\n\t\t\tmultiple={multiple}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tvalue={value}\n\t\t\tonValueChange={\n\t\t\t\tonValueChange\n\t\t\t\t\t? (next) => onValueChange(next as string[])\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-label={strings.regionAriaLabel}\n\t\t\tdata-variant={variant}\n\t\t\tdata-icon-style={iconStyle}\n\t\t\tclassName={cn('smart-accordion--component', ACCORDION_ROOT_VARIANT_CLASS[variant], className)}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<AccordionItem\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tvalue={item.value}\n\t\t\t\t\tclassName={cn('smart-accordion--item', ACCORDION_ITEM_VARIANT_CLASS[variant], itemClassName)}\n\t\t\t\t>\n\t\t\t\t\t<AccordionTrigger\n\t\t\t\t\t\tclassName={cn('smart-accordion--trigger', ACCORDION_TRIGGER_BASE, triggerClassName)}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={cn('grid min-w-0 flex-1 items-center gap-x-space-lg', triggerGridClass)}>\n\t\t\t\t\t\t\t<SmartAccordionIcon\n\t\t\t\t\t\t\t\ticonStyle={iconStyle}\n\t\t\t\t\t\t\t\ticon={item.icon}\n\t\t\t\t\t\t\t\treserveSpace={hasIconColumn}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Stack render={<span />} gap=\"dense\" className=\"smart-accordion--heading flex-1\">\n\t\t\t\t\t\t\t\t<span className=\"flex min-w-0 flex-wrap items-center gap-x-space-md gap-y-space-xs\">\n\t\t\t\t\t\t\t\t\t{isSimpleContent(item.title) ? (\n\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"inherit\" weight=\"semibold\" className=\"smart-accordion--title min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t) : item.title}\n\t\t\t\t\t\t\t\t\t{item.badge != null && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"smart-accordion--badge inline-flex shrink-0\">{item.badge}</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{!!item.description && (\n\t\t\t\t\t\t\t\t\tisSimpleContent(item.description) ? (\n\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"secondary\" className=\"smart-accordion--description min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t) : item.description\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AccordionTrigger>\n\t\t\t\t\t<AccordionContent\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'smart-accordion--content',\n\t\t\t\t\t\t\tcontentPadding,\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isSimpleContent(item.content) ? (\n\t\t\t\t\t\t\t<Text tag=\"div\" type=\"secondary\" lineHeight=\"relaxed\">\n\t\t\t\t\t\t\t\t{item.content}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : item.content}\n\t\t\t\t\t</AccordionContent>\n\t\t\t\t</AccordionItem>\n\t\t\t))}\n\t\t</Accordion>\n\t);\n});\n\nSmartAccordion.displayName = 'SmartAccordion';\n\nfunction isSimpleContent(content: ReactNode): content is string | number | bigint {\n\treturn typeof content === 'string' || typeof content === 'number' || typeof content === 'bigint';\n}\n\nfunction SmartAccordionIcon({\n\ticonStyle,\n\ticon,\n\treserveSpace,\n}: {\n\ticonStyle: SmartAccordionIconStyle;\n\ticon?: ReactNode;\n\treserveSpace: boolean;\n}) {\n\tif (iconStyle === 'none' || !reserveSpace) return null;\n\tif (!icon) {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'smart-accordion--icon inline-flex shrink-0',\n\t\t\t\t\ticonStyle === 'inline' ? 'size-icon-lg' : 'size-avatar',\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t}\n\tif (iconStyle === 'inline') {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"smart-accordion--icon inline-flex size-icon-lg shrink-0 self-center text-muted-foreground [&>svg]:size-icon\"\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t</span>\n\t\t);\n\t}\n\treturn (\n\t\t<IconBadge size=\"md\" tone=\"neutral\" shape=\"circle\" aria-hidden=\"true\" className=\"smart-accordion--icon self-center\">\n\t\t\t{icon}\n\t\t</IconBadge>\n\t);\n}\n"],"mappings":"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"}