@common-origin/design-system 2.18.0 → 2.20.0

package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs

@@ -0,0 +1,224 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Avatar } from '../../atoms/Avatar/Avatar.mjs';
+import { Badge } from '../../atoms/Badge/Badge.mjs';
+import { CategoryLabel } from '../../atoms/CategoryLabel/CategoryLabel.mjs';
+import { MoneyDisplay } from '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { DateFormatter } from '../../atoms/DateFormatter/DateFormatter.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { interactiveRow } from '../../../lib/styleUtils.mjs';
+
+var StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledContainer",
+  componentId: "sc-7yunm0-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"])), tokens.component.transactionListItem.minHeight, tokens.semantic.space[300], tokens.semantic.space[300], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], tokens.semantic.space[300], tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.decelerate, function (_a) {
+  var $clickable = _a.$clickable;
+  return $clickable && "\n    cursor: pointer;\n    ".concat(interactiveRow(), "\n    \n    &:focus-visible {\n      outline: ").concat(tokens.semantic.border.focus, ";\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.focusOffset, ");\n    }\n  ");
+});
+var StyledAvatarSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledAvatarSection",
+  componentId: "sc-7yunm0-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
+var StyledMainContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledMainContent",
+  componentId: "sc-7yunm0-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: none;\n"], ["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: none;\n"])));
+var StyledTopRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledTopRow",
+  componentId: "sc-7yunm0-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
+var StyledMerchantSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledMerchantSection",
+  componentId: "sc-7yunm0-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"])), tokens.semantic.space[200]);
+var StyledBottomRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledBottomRow",
+  componentId: "sc-7yunm0-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
+var StyledMetadata = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledMetadata",
+  componentId: "sc-7yunm0-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
+var StyledIconIndicator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledIconIndicator",
+  componentId: "sc-7yunm0-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"])), tokens.semantic.space[100], tokens.semantic.color.icon.muted);
+var StyledTruncatedText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TransactionListItem__StyledTruncatedText",
+  componentId: "sc-7yunm0-8"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"
+// Map categories to CategoryLabel configurations
+])));
+// Map categories to CategoryLabel configurations
+var categoryConfig = {
+  shopping: {
+    color: 'purple',
+    icon: 'paper',
+    label: 'Shopping'
+  },
+  dining: {
+    color: 'orange',
+    icon: 'paper',
+    label: 'Dining'
+  },
+  transport: {
+    color: 'blue',
+    icon: 'paper',
+    label: 'Transport'
+  },
+  entertainment: {
+    color: 'pink',
+    icon: 'star',
+    label: 'Entertainment'
+  },
+  bills: {
+    color: 'red',
+    icon: 'paper',
+    label: 'Bills'
+  },
+  other: {
+    color: 'gray',
+    icon: 'paper',
+    label: 'Other'
+  }
+};
+// Map status to badge variant
+var statusToBadgeVariant = {
+  completed: 'success',
+  pending: 'warning',
+  failed: 'error'
+};
+/**
+ * TransactionListItem component
+ *
+ * Displays a single transaction in a list with merchant info, amount, date,
+ * status, and optional metadata (category, receipt, notes). Minimum height 72px
+ * with interactive states for clickable items.
+ *
+ * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ */
+var TransactionListItem = function TransactionListItem(_a) {
+  var merchant = _a.merchant,
+    amount = _a.amount,
+    date = _a.date,
+    _b = _a.status,
+    status = _b === void 0 ? 'completed' : _b,
+    category = _a.category,
+    merchantLogo = _a.merchantLogo,
+    description = _a.description,
+    _c = _a.hasReceipt,
+    hasReceipt = _c === void 0 ? false : _c,
+    _d = _a.hasNote,
+    hasNote = _d === void 0 ? false : _d,
+    _e = _a.currency,
+    currency = _e === void 0 ? 'AUD' : _e,
+    onClick = _a.onClick,
+    dataTestId = _a["data-testid"];
+  var isClickable = !!onClick;
+  // Determine amount variant
+  var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
+  // Get category configuration
+  var categoryData = category ? categoryConfig[category] : undefined;
+  // Get badge variant from status
+  var badgeVariant = statusToBadgeVariant[status];
+  var handleClick = function handleClick() {
+    if (isClickable && onClick) {
+      onClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  };
+  return jsxs(StyledContainer, {
+    "$clickable": isClickable,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: isClickable ? 0 : undefined,
+    role: isClickable ? 'button' : undefined,
+    "aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
+    "data-testid": dataTestId,
+    children: [jsx(StyledAvatarSection, {
+      children: status === 'pending' ? jsx(Badge, {
+        variant: badgeVariant,
+        dot: true,
+        "aria-label": "Pending transaction",
+        children: jsx(Avatar, {
+          name: merchant,
+          picture: merchantLogo,
+          size: "md"
+        })
+      }) : jsx(Avatar, {
+        name: merchant,
+        picture: merchantLogo,
+        size: "md"
+      })
+    }), jsxs(StyledMainContent, {
+      children: [jsxs(StyledTopRow, {
+        children: [jsxs(StyledMerchantSection, {
+          children: [jsx(StyledTruncatedText, {
+            children: jsx(Typography, {
+              variant: "body",
+              children: merchant
+            })
+          }), categoryData && jsx(CategoryLabel, {
+            color: categoryData.color,
+            icon: categoryData.icon,
+            size: "medium",
+            variant: "minimal",
+            "aria-label": "Category: ".concat(categoryData.label),
+            children: categoryData.label
+          }), status === 'failed' && jsx(Badge, {
+            variant: "error",
+            dot: true,
+            "aria-label": "Failed transaction",
+            children: jsx("span", {})
+          })]
+        }), jsx(MoneyDisplay, {
+          amount: amount,
+          currency: currency,
+          variant: amountVariant,
+          size: "medium",
+          weight: "medium",
+          showSign: true,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-amount") : undefined
+        })]
+      }), jsxs(StyledBottomRow, {
+        children: [jsxs(StyledMetadata, {
+          children: [jsx(DateFormatter, {
+            dateString: typeof date === 'string' ? date : date.toISOString(),
+            mode: "smart",
+            "data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
+          }), description && jsx(StyledTruncatedText, {
+            children: jsxs(Typography, {
+              variant: "small",
+              color: "subdued",
+              children: ["\u2022 ", description]
+            })
+          })]
+        }), (hasReceipt || hasNote) && jsxs(StyledIconIndicator, {
+          children: [hasReceipt && jsx(Icon, {
+            name: "fileDocSearch",
+            size: "xs",
+            "aria-label": "Has receipt"
+          }), hasNote && jsx(Icon, {
+            name: "paper",
+            size: "xs",
+            "aria-label": "Has note"
+          })]
+        })]
+      })]
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+export { TransactionListItem };
+//# sourceMappingURL=TransactionListItem.mjs.map

package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionListItem.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/TransactionListItem/index.d.mts

@@ -0,0 +1,2 @@
+export { TransactionListItem } from './TransactionListItem.mjs';
+export type { TransactionListItemProps, TransactionStatus, TransactionCategory } from './TransactionListItem.mjs';

package/dist/components/molecules/index.d.mts

@@ -0,0 +1,26 @@
+export * from './AccountCard/index.mjs';
+export * from './ActionSheet/index.mjs';
+export * from './AgentInput/index.mjs';
+export * from './Alert/index.mjs';
+export * from './InlineAlert/index.mjs';
+export * from './Breadcrumbs/index.mjs';
+export * from './CardSmall/index.mjs';
+export * from './CardLarge/index.mjs';
+export * from './Checkbox/index.mjs';
+export * from './ChipGroup/index.mjs';
+export * from './CodeBlock/index.mjs';
+export * from './DateGroup/index.mjs';
+export * from './EmptyState/index.mjs';
+export * from './FeatureBlock/index.mjs';
+export * from './Dropdown/index.mjs';
+export * from './List/index.mjs';
+export * from './Modal/index.mjs';
+export * from './NumberInput/index.mjs';
+export * from './PageTitle/index.mjs';
+export * from './PasswordField/index.mjs';
+export * from './SearchField/index.mjs';
+export * from './Sheet/index.mjs';
+export * from './Slider/index.mjs';
+export * from './TabBar/index.mjs';
+export * from './TextField/index.mjs';
+export * from './TransactionListItem/index.mjs';

package/dist/data.js

@@ -65,6 +65,42 @@ var base = {
 		"95": "0.95",
 		"100": "1"
 	},
+	dimension: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"11": "2.75rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"15": "3.75rem",
+		"16": "4rem",
+		"18": "4.5rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"30": "7.5rem",
+		"32": "8rem",
+		"40": "10rem",
+		"45": "11.25rem",
+		"48": "12rem",
+		"50": "12.5rem",
+		"56": "14rem",
+		"64": "16rem",
+		"75": "18.75rem",
+		"90": "22.5rem",
+		"100": "25rem",
+		"140": "35rem",
+		"180": "45rem",
+		"192": "48rem"
+	},
 	size: {
 		"0": "0",
 		"1": "0.25rem",
@@ -109,6 +145,34 @@ var base = {
 	},
 	color: {
 		transparent: "transparent",
+		gray: {
+			"100": "#fcfcfc",
+			"200": "#f9f9f9",
+			"300": "#f2f2f2",
+			"400": "#ebebeb",
+			"500": "#e4e4e4",
+			"600": "#dcdcdc",
+			"700": "#d1d1d1",
+			"800": "#909090",
+			"900": "#848484",
+			"1000": "#797979",
+			"1100": "#636363",
+			"1200": "#222222"
+		},
+		"gray-alpha": {
+			"100": "rgba(34, 34, 34, 0.014)",
+			"200": "rgba(34, 34, 34, 0.027)",
+			"300": "rgba(34, 34, 34, 0.059)",
+			"400": "rgba(34, 34, 34, 0.09)",
+			"500": "rgba(34, 34, 34, 0.122)",
+			"600": "rgba(34, 34, 34, 0.158)",
+			"700": "rgba(34, 34, 34, 0.208)",
+			"800": "rgba(34, 34, 34, 0.502)",
+			"900": "rgba(34, 34, 34, 0.557)",
+			"1000": "rgba(34, 34, 34, 0.606)",
+			"1100": "rgba(34, 34, 34, 0.706)",
+			"1200": "rgba(34, 34, 34, 1)"
+		},
 		neutral: {
 			"100": "#f8f9fa",
 			"200": "#e9ecef",
@@ -813,7 +877,8 @@ var component = {
 				"default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
 				hover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
 				active: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
-			}
+			},
+			background: "#ffffff"
 		}
 	},
 	accountCard: {
@@ -825,7 +890,8 @@ var component = {
 	breadcrumbs: {
 		item: {
 			maxWidth: "11.25rem"
-		}
+		},
+		font: "400 0.75rem/1.125rem 'Inter', sans-serif"
 	},
 	cardLarge: {
 		maxWidth: "48rem"
@@ -860,6 +926,46 @@ var component = {
 	},
 	transactionListItem: {
 		minHeight: "4.5rem"
+	},
+	status: {
+		pending: {
+			text: "#825800",
+			background: "#FFF3D6"
+		},
+		completed: {
+			text: "#007A4D",
+			background: "#CEF8E0"
+		},
+		failed: {
+			text: "#D31510",
+			background: "#FFEBE7"
+		},
+		cancelled: {
+			text: "#495057",
+			background: "#e9ecef"
+		},
+		processing: {
+			text: "#0265DC",
+			background: "#E0F2FF"
+		},
+		scheduled: {
+			text: "#7E2EBD",
+			background: "#F9F0FF"
+		}
+	},
+	transaction: {
+		credit: "#15A46E",
+		"credit-hover": "#008F5D",
+		debit: "#D31510",
+		"debit-hover": "#B40000",
+		pending: "#F68511",
+		neutral: "#6c757d"
+	},
+	track: {
+		background: "#dee2e6"
+	},
+	tooltip: {
+		border: "0.125rem dotted #dee2e6"
 	}
 };
 var semantic = {
@@ -881,7 +987,9 @@ var semantic = {
 	},
 	opacity: {
 		disabled: "0.5",
-		full: "1"
+		full: "1",
+		hover: "0.8",
+		pressed: "0.7"
 	},
 	fontFamily: {
 		body: "'Inter', sans-serif",
@@ -938,10 +1046,35 @@ var semantic = {
 			"2xl": "1.5rem",
 			"3xl": "2rem",
 			circle: "10rem"
-		}
+		},
+		emphasis: "0.0625rem solid #dee2e6",
+		"input-hover": "0.0625rem solid #343a40"
 	},
 	size: {
+		"100": "0.25rem",
+		"200": "0.5rem",
+		"400": "1rem",
+		"500": "1.25rem",
+		"600": "1.5rem",
+		"800": "2rem",
+		"1200": "3rem",
+		"1500": "3.75rem",
+		"1800": "4.5rem",
+		"2000": "5rem",
+		"3000": "7.5rem",
+		"4500": "11.25rem",
+		"5000": "12.5rem",
+		"7500": "18.75rem",
+		"9000": "22.5rem",
+		"10000": "25rem",
+		"19200": "48rem",
+		pointerTarget: "1.5rem",
 		touchTarget: "2.75rem",
+		control: {
+			sm: "2rem",
+			md: "2.5rem",
+			lg: "3rem"
+		},
 		overlay: {
 			sm: "25rem",
 			md: "35rem",
@@ -1037,7 +1170,12 @@ var semantic = {
 			"interactive-active": "#004491",
 			error: "#D31510",
 			success: "#007A4D",
-			warning: "#B14C00"
+			warning: "#B14C00",
+			muted: "#495057",
+			accent: "#0265DC",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510"
 		},
 		background: {
 			"default": "#f8f9fa",
@@ -1082,7 +1220,13 @@ var semantic = {
 			error: "#D31510",
 			success: "#007A4D",
 			warning: "#B14C00",
-			none: "transparent"
+			none: "transparent",
+			emphasis: "#dee2e6",
+			input: "#6c757d",
+			"input-hover": "#343a40",
+			focus: "#343a40",
+			accent: "#0265DC",
+			danger: "#D31510"
 		},
 		icon: {
 			"default": "#212529",
@@ -1095,7 +1239,12 @@ var semantic = {
 			"interactive-active": "#004491",
 			error: "#D31510",
 			success: "#007A4D",
-			warning: "#B14C00"
+			warning: "#B14C00",
+			muted: "#6c757d",
+			accent: "#0265DC",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510"
 		},
 		financial: {
 			credit: "#15A46E",
@@ -1145,7 +1294,15 @@ var semantic = {
 			"green-text": "#007A4D",
 			"red-text": "#D31510",
 			"orange-text": "#B14C00",
-			"gray-text": "#212529"
+			"gray-text": "#212529",
+			"blue-muted": "#E0F2FF",
+			"purple-muted": "#F9F0FF",
+			"pink-muted": "#FFEFF9",
+			"yellow-muted": "#FFF3D6",
+			"green-muted": "#CEF8E0",
+			"red-muted": "#FFEBE7",
+			"orange-muted": "#FFECCC",
+			"gray-muted": "#e9ecef"
 		},
 		status: {
 			pending: "#825800",
@@ -1160,6 +1317,35 @@ var semantic = {
 			"processing-bg": "#E0F2FF",
 			scheduled: "#7E2EBD",
 			"scheduled-bg": "#F9F0FF"
+		},
+		fill: {
+			emphasis: "#212529",
+			"emphasis-hover": "#343a40",
+			"emphasis-pressed": "#16191C",
+			muted: "#e9ecef",
+			inverse: "#343a40",
+			accent: "#0265DC",
+			"accent-muted": "#E0F2FF",
+			"accent-muted-hover": "#CAE8FF",
+			"accent-muted-pressed": "#B5DEFF",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510",
+			"danger-hover": "#B40000",
+			"danger-pressed": "#930000",
+			"danger-muted": "#FFEBE7",
+			success: "#007A4D",
+			"success-muted": "#CEF8E0",
+			warning: "#B14C00",
+			"warning-muted": "#FFECCC",
+			disabled: "#dee2e6",
+			"default": "#dee2e6",
+			"default-hover": "#ced4da",
+			"default-pressed": "#adb5bd",
+			none: "transparent",
+			"none-hover": "rgba(33, 37, 41, 0.1)",
+			"none-pressed": "rgba(33, 37, 41, 0.15)",
+			"inverse-none-hover": "rgba(255, 255, 255, 0.2)"
 		}
 	},
 	typography: {
@@ -1185,20 +1371,79 @@ var semantic = {
 		duration: {
 			normal: "200ms",
 			fast: "150ms",
-			slow: "300ms"
+			slow: "300ms",
+			instant: "0ms",
+			moderate: "200ms"
 		},
 		easing: {
 			easeInOut: "ease-in-out",
-			easeOut: "ease-out"
+			easeOut: "ease-out",
+			standard: "ease-in-out",
+			decelerate: "ease-out",
+			accelerate: "ease-in"
 		},
 		transition: {
 			fast: "all 150ms ease-out",
 			normal: "all 200ms ease-in-out",
-			slow: "all 300ms ease-in-out"
+			slow: "all 300ms ease-in-out",
+			feedback: "background-color 150ms ease-out, color 150ms ease-out",
+			focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
+			press: "transform 150ms ease-out, opacity 150ms ease-out"
 		},
 		hover: "background-color 150ms ease-out, color 150ms ease-out",
 		focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
-		interactive: "transform 150ms ease-out, opacity 150ms ease-out"
+		interactive: "transform 150ms ease-out, opacity 150ms ease-out",
+		distance: {
+			sm: "0.5rem"
+		}
+	},
+	layer: {
+		sticky: "10",
+		dropdown: "1000",
+		overlay: "1010",
+		modal: "1020"
+	},
+	radius: {
+		none: "0",
+		xs: "0.125rem",
+		sm: "0.25rem",
+		md: "0.5rem",
+		lg: "0.75rem",
+		xl: "1rem",
+		"2xl": "1.5rem",
+		"3xl": "2rem",
+		full: "10rem"
+	},
+	space: {
+		"0": "0",
+		"100": "0.25rem",
+		"200": "0.5rem",
+		"300": "0.75rem",
+		"400": "1rem",
+		"500": "1.25rem",
+		"600": "1.5rem",
+		"700": "1.75rem",
+		"800": "2rem",
+		"900": "2.25rem",
+		"1000": "2.5rem",
+		"1200": "3rem",
+		"1400": "3.5rem",
+		"1600": "4rem",
+		"2000": "5rem",
+		"2400": "6rem",
+		inset: {
+			xs: "0.25rem",
+			sm: "0.5rem",
+			md: "0.75rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			"2xl": "1.5rem"
+		}
+	},
+	surface: {
+		base: "#f8f9fa",
+		raised: "#ffffff",
+		scrim: "rgba(33, 37, 41, 0.5)"
 	}
 };
 var tokensJson = {
@@ -1999,8 +2244,10 @@ var iconsJson = {
 	move: move
 };
 
-// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,
-// which consumers can only resolve with `resolveJsonModule`.
+// The published types come from the generated `src/styles/tokens.ts`, which carries each token's
+// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the
+// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can
+// only resolve with `resolveJsonModule`.
 var tokens = tokensJson;
 
 // Icon type definitions for external consumption

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAMA,MAAM,GAAGC;;ACJtB;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}
+{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAWC;;ACP9B;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+export * from './components/index.mjs';
+export { tokens, type Tokens, type TokensBase, type TokensSemantic, type TokensComponent, } from './types/tokens.mjs';
+export { iconsData, type IconName, type IconCategory, type IconMetadata, type IconRegistry, } from './types/icons.mjs';