themelia-react-ui 2.0.3 → 2.0.5

package/templates/user-permissions-template.tsx

@@ -0,0 +1,450 @@
+import { useState } from 'react';
+
+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';
+import { DirtyStateBanner, FormField } from 'themelia-react-ui/base/forms';
+import { Grid, Stack } from 'themelia-react-ui/base/structure';
+import { Input, Textarea } from 'themelia-react-ui/base/text-inputs';
+import { MetadataList } from 'themelia-react-ui/base/metadata-list';
+import { ConfirmDialog, useOverlayVisibility } from 'themelia-react-ui/features/overlays';
+import { TwoColumnLayout } from 'themelia-react-ui/layout/containers';
+import { Page } from 'themelia-react-ui/layout/page';
+import { Text } from 'themelia-react-ui/typography';
+
+interface PermissionGroup {
+	id: string;
+	title: string;
+	permissions: {
+		id: string;
+		label: string;
+		description: string;
+		enabled: boolean;
+	}[];
+}
+
+const INITIAL_PERMISSION_GROUPS: PermissionGroup[] = [
+	{
+		id: 'orders',
+		title: 'Orders & fulfillment',
+		permissions: [
+			{
+				id: 'orders-view',
+				label: 'View and manage orders',
+				description: 'View order details, edit shipping addresses, and add staff notes.',
+				enabled: true,
+			},
+			{
+				id: 'orders-fulfill',
+				label: 'Fulfill and ship items',
+				description: 'Print packing slips, purchase carrier labels, and mark orders fulfilled.',
+				enabled: true,
+			},
+			{
+				id: 'orders-refund',
+				label: 'Refund and cancel orders',
+				description: 'Issue full or partial refunds and return items to warehouse stock.',
+				enabled: true,
+			},
+		],
+	},
+	{
+		id: 'catalog',
+		title: 'Products & inventory',
+		permissions: [
+			{
+				id: 'products-edit',
+				label: 'Create and edit products',
+				description: 'Modify product descriptions, media, variants, and collections.',
+				enabled: true,
+			},
+			{
+				id: 'inventory-adjust',
+				label: 'Manage inventory quantities',
+				description: 'Adjust stock counts across Brooklyn Warehouse and SoHo POS.',
+				enabled: true,
+			},
+			{
+				id: 'pricing-edit',
+				label: 'Change retail and compare-at prices',
+				description: 'Update variant pricing, unit costs, and discount eligibility.',
+				enabled: true,
+			},
+		],
+	},
+	{
+		id: 'customers',
+		title: 'Customers & store credit',
+		permissions: [
+			{
+				id: 'customers-edit',
+				label: 'View and edit customers',
+				description: 'Manage customer contact details, addresses, and tax exemption status.',
+				enabled: true,
+			},
+			{
+				id: 'customers-credit',
+				label: 'Issue store credit and gift cards',
+				description: 'Create and adjust store credit balances on customer accounts.',
+				enabled: true,
+			},
+		],
+	},
+	{
+		id: 'administration',
+		title: 'Store administration',
+		permissions: [
+			{
+				id: 'reports-view',
+				label: 'View financial reports and payouts',
+				description: 'Access net sales summaries, tax breakdowns, and settlement reports.',
+				enabled: true,
+			},
+			{
+				id: 'staff-manage',
+				label: 'Manage staff accounts and permissions',
+				description: 'Invite staff members, assign role presets, and suspend accounts.',
+				enabled: true,
+			},
+		],
+	},
+];
+
+const ROLE_PRESET_OPTIONS = [
+	{ value: 'admin', label: 'Store Administrator (Full access)' },
+	{ value: 'fulfillment', label: 'Fulfillment & Inventory Specialist' },
+	{ value: 'support', label: 'Customer Support Associate' },
+	{ value: 'custom', label: 'Custom permissions' },
+];
+
+export function UserPermissionsTemplate() {
+	const [firstName, setFirstName] = useState('Marcus');
+	const [lastName, setLastName] = useState('Vance');
+	const [workEmail, setWorkEmail] = useState('marcus.vance@oakandloom.com');
+	const [phone, setPhone] = useState('+1 (917) 555-0164');
+	const [jobTitle, setJobTitle] = useState('Store Operations Lead');
+	const [timezone, setTimezone] = useState('America/New_York');
+	const [roleNote, setRoleNote] = useState(
+		'Primary operations lead for Brooklyn Warehouse fulfillment and high-value order approvals.',
+	);
+
+	const [rolePreset, setRolePreset] = useState('admin');
+	const [permissionGroups, setPermissionGroups] = useState<PermissionGroup[]>(
+		INITIAL_PERMISSION_GROUPS,
+	);
+	const [savedProfile, setSavedProfile] = useState({ firstName, lastName, workEmail, phone, jobTitle, timezone, roleNote, rolePreset, permissionGroups });
+	const [accountSuspended, setAccountSuspended] = useState(false);
+
+	const suspendAccountDialog = useOverlayVisibility();
+
+	const fullName = `${firstName} ${lastName}`.trim() || 'Staff Member';
+
+	const profile = { firstName, lastName, workEmail, phone, jobTitle, timezone, roleNote, rolePreset, permissionGroups };
+	const isDirty = JSON.stringify(profile) !== JSON.stringify(savedProfile);
+
+	// This example saves in memory. Replace this commit with your app's persistence callback.
+	const handleSaveProfile = () => setSavedProfile(profile);
+
+	const handleResetProfile = () => {
+		setFirstName(savedProfile.firstName);
+		setLastName(savedProfile.lastName);
+		setWorkEmail(savedProfile.workEmail);
+		setPhone(savedProfile.phone);
+		setJobTitle(savedProfile.jobTitle);
+		setTimezone(savedProfile.timezone);
+		setRoleNote(savedProfile.roleNote);
+		setRolePreset(savedProfile.rolePreset);
+		setPermissionGroups(savedProfile.permissionGroups);
+	};
+
+	const handlePresetChange = (preset: string) => {
+		setRolePreset(preset);
+		setPermissionGroups((current) =>
+			current.map((group) => ({
+				...group,
+				permissions: group.permissions.map((perm) => {
+					if (preset === 'admin') return { ...perm, enabled: true };
+					if (preset === 'fulfillment') {
+						return {
+							...perm,
+							enabled:
+								perm.id === 'orders-view' ||
+								perm.id === 'orders-fulfill' ||
+								perm.id === 'inventory-adjust',
+						};
+					}
+					if (preset === 'support') {
+						return {
+							...perm,
+							enabled:
+								perm.id === 'orders-view' ||
+								perm.id === 'orders-refund' ||
+								perm.id === 'customers-edit' ||
+								perm.id === 'customers-credit',
+						};
+					}
+					return perm;
+				}),
+			})),
+		);
+	};
+
+	const handleTogglePermission = (groupId: string, permId: string, checked: boolean) => {
+		setRolePreset('custom');
+		setPermissionGroups((current) =>
+			current.map((group) =>
+				group.id === groupId
+					? {
+							...group,
+							permissions: group.permissions.map((perm) =>
+								perm.id === permId ? { ...perm, enabled: checked } : perm,
+							),
+						}
+					: group,
+			),
+		);
+	};
+
+	return (
+		<Page
+			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',
+					},
+				],
+				primaryAction: { label: 'Save changes', disabled: !isDirty, onClick: handleSaveProfile },
+				// Destructive commands move into the More actions menu and confirm before they run.
+				secondaryActions: [
+					{
+						label: 'Suspend staff account',
+						destructive: true,
+						visible: !accountSuspended,
+						onClick: suspendAccountDialog.show,
+					},
+				],
+			}}
+		>
+			<Stack gap="2xl">
+				{isDirty && (
+					<DirtyStateBanner
+						title="Unsaved profile or permission changes"
+						description="Save changes to update this staff member's access level."
+						actions={
+							<Button size="sm" onClick={handleResetProfile}>
+								Discard
+							</Button>
+						}
+					/>
+				)}
+
+				<TwoColumnLayout
+					stickyAside
+					main={
+						<Stack gap="2xl">
+							{/* 1. Profile Details Card */}
+							<Card
+								title="Staff profile"
+								description="Identity and contact information displayed on order audits and internal notes."
+							>
+								<Stack gap="lg">
+									<Grid columns={{ base: 1, sm: 2 }} gap="lg">
+										<FormField label="First name" required>
+											<Input
+												aria-label="First name"
+												value={firstName}
+												onChange={(event) => setFirstName(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Last name" required>
+											<Input
+												aria-label="Last name"
+												value={lastName}
+												onChange={(event) => setLastName(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Work email" required>
+											<Input
+												aria-label="Work email"
+												type="email"
+												value={workEmail}
+												onChange={(event) => setWorkEmail(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Phone number">
+											<Input
+												aria-label="Phone number"
+												value={phone}
+												onChange={(event) => setPhone(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Job title">
+											<Input
+												aria-label="Job title"
+												value={jobTitle}
+												onChange={(event) => setJobTitle(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Timezone">
+											<Select
+												aria-label="Timezone"
+												options={[
+													{
+														value: 'America/New_York',
+														label: 'Eastern Time (US & Canada)',
+													},
+													{
+														value: 'America/Los_Angeles',
+														label: 'Pacific Time (US & Canada)',
+													},
+													{ value: 'Europe/London', label: 'London (GMT)' },
+												]}
+												value={timezone}
+												onValueChange={(value) => setTimezone(String(value))}
+											/>
+										</FormField>
+									</Grid>
+
+									<FormField label="Internal role note">
+										<Textarea
+											aria-label="Internal role note"
+											rows={2}
+											value={roleNote}
+											onChange={(event) => setRoleNote(event.target.value)}
+										/>
+									</FormField>
+								</Stack>
+							</Card>
+
+							{/* 2. Permissions Card */}
+							<Card
+								title="Permissions"
+								description="Assign a role preset or customize granular capabilities for this staff member."
+							>
+								<Stack gap="2xl">
+									<FormField label="Role preset">
+										<Select
+											aria-label="Role preset"
+											options={ROLE_PRESET_OPTIONS}
+											value={rolePreset}
+											onValueChange={(value) => handlePresetChange(String(value))}
+										/>
+									</FormField>
+
+									<Stack gap="2xl">
+										{permissionGroups.map((group) => (
+											<Stack key={group.id} gap="md">
+												<Text weight="semibold">{group.title}</Text>
+												<Stack gap="sm">
+													{group.permissions.map((perm) => (
+														<ToggleField
+															key={perm.id}
+															kind="checkbox"
+															value={perm.enabled}
+															onValueChange={(checked) =>
+																handleTogglePermission(
+																	group.id,
+																	perm.id,
+																	Boolean(checked),
+																)
+															}
+															label={perm.label}
+															description={perm.description}
+														/>
+													))}
+												</Stack>
+											</Stack>
+										))}
+									</Stack>
+								</Stack>
+							</Card>
+						</Stack>
+					}
+					aside={
+						<Stack gap="2xl">
+							<Card title="Access summary">
+								<MetadataList
+									columns={1}
+									items={[
+										{
+											id: 'email',
+											label: 'Work email',
+											value: { kind: 'email', value: workEmail },
+										},
+										{
+											id: 'phone',
+											label: 'Phone',
+											value: { kind: 'phone', value: phone },
+										},
+										{
+											id: 'locations',
+											label: 'Locations',
+											value: 'Brooklyn Warehouse & SoHo POS',
+										},
+										{
+											id: 'pos-pin',
+											label: 'POS PIN',
+											value: 'Configured',
+										},
+										{
+											id: 'last-login',
+											label: 'Last sign-in',
+											value: { kind: 'datetime', value: '2026-10-15T08:42:00-04:00' },
+										},
+									]}
+								/>
+							</Card>
+
+							<Card title="Security & authentication">
+								<MetadataList
+									columns={1}
+									items={[
+										{
+											id: '2fa',
+											label: 'Two-factor auth',
+											value: {
+												kind: 'badge',
+												value: 'Passkey active',
+												badgeTone: 'success',
+											},
+										},
+										{
+											id: 'password',
+											label: 'Password updated',
+											value: { kind: 'date', value: '2026-09-02' },
+										},
+									]}
+								/>
+							</Card>
+
+						</Stack>
+					}
+				/>
+			</Stack>
+
+			<ConfirmDialog
+				{...suspendAccountDialog.overlayProps}
+				title="Suspend staff account?"
+				description={`This immediately blocks admin sign-in for ${fullName}. Order and fulfillment audit history is kept.`}
+				tone="destructive"
+				strings={{ confirm: 'Suspend account', cancel: 'Keep access' }}
+				onConfirm={() => {
+					setAccountSuspended(true);
+					suspendAccountDialog.hide();
+				}}
+			/>
+		</Page>
+	);
+}
+export default UserPermissionsTemplate;

package/dist/accordion-Cjb6sx0G.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion-Cjb6sx0G.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-radius 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// 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\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-radius border border-border bg-card text-card-foreground overflow-hidden',\n\tflat: '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-radius overflow-hidden',\n\tbordered: 'bg-transparent not-last:border-b border-border',\n\tflat: 'border-0 not-last:border-b-0 bg-transparent rounded-radius 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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"}