@common-origin/design-system 2.19.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/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';

package/dist/index.mjs

@@ -0,0 +1,55 @@
+export { Avatar } from './components/atoms/Avatar/Avatar.mjs';
+export { Badge } from './components/atoms/Badge/Badge.mjs';
+export { Box } from './components/atoms/Box/Box.mjs';
+export { Button } from './components/atoms/Button/Button.mjs';
+export { CategoryBadge } from './components/atoms/CategoryBadge/CategoryBadge.mjs';
+export { CategoryLabel } from './components/atoms/CategoryLabel/CategoryLabel.mjs';
+export { Chip, LegacyChip } from './components/atoms/Chip/Chip.mjs';
+export { InputChip } from './components/atoms/Chip/InputChip.mjs';
+export { FilterChip } from './components/atoms/Chip/FilterChip.mjs';
+export { BooleanChip } from './components/atoms/Chip/BooleanChip.mjs';
+export { Container } from './components/atoms/Container/Container.mjs';
+export { Picture } from './components/atoms/Picture/Picture.mjs';
+export { DateFormatter } from './components/atoms/DateFormatter/DateFormatter.mjs';
+export { Icon } from './components/atoms/Icon/Icon.mjs';
+export { IconButton } from './components/atoms/IconButton/IconButton.mjs';
+export { MoneyDisplay } from './components/atoms/MoneyDisplay/MoneyDisplay.mjs';
+export { ProgressBar } from './components/atoms/ProgressBar/ProgressBar.mjs';
+export { Divider } from './components/atoms/Divider/Divider.mjs';
+export { Stack } from './components/atoms/Stack/Stack.mjs';
+export { StatusBadge } from './components/atoms/StatusBadge/StatusBadge.mjs';
+export { StatusLabel } from './components/atoms/StatusLabel/StatusLabel.mjs';
+export { Tag } from './components/atoms/Tag/Tag.mjs';
+export { Typography } from './components/atoms/Typography/Typography.mjs';
+export { AccountCard } from './components/molecules/AccountCard/AccountCard.mjs';
+export { ActionSheet } from './components/molecules/ActionSheet/ActionSheet.mjs';
+export { AgentInput } from './components/molecules/AgentInput/AgentInput.mjs';
+export { Alert } from './components/molecules/Alert/Alert.mjs';
+export { InlineAlert } from './components/molecules/InlineAlert/InlineAlert.mjs';
+export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs.mjs';
+export { CardSmall } from './components/molecules/CardSmall/CardSmall.mjs';
+export { CardLarge } from './components/molecules/CardLarge/CardLarge.mjs';
+export { Checkbox } from './components/molecules/Checkbox/Checkbox.mjs';
+export { ChipGroup } from './components/molecules/ChipGroup/ChipGroup.mjs';
+export { CodeBlock } from './components/molecules/CodeBlock/CodeBlock.mjs';
+export { DateGroup } from './components/molecules/DateGroup/DateGroup.mjs';
+export { EmptyState } from './components/molecules/EmptyState/EmptyState.mjs';
+export { FeatureBlock } from './components/molecules/FeatureBlock/FeatureBlock.mjs';
+export { Dropdown } from './components/molecules/Dropdown/Dropdown.mjs';
+export { List } from './components/molecules/List/List.mjs';
+export { ListItem } from './components/molecules/List/ListItem.mjs';
+export { Modal } from './components/molecules/Modal/Modal.mjs';
+export { NumberInput } from './components/molecules/NumberInput/NumberInput.mjs';
+export { PageTitle } from './components/molecules/PageTitle/PageTitle.mjs';
+export { PasswordField } from './components/molecules/PasswordField/PasswordField.mjs';
+export { SearchField } from './components/molecules/SearchField/SearchField.mjs';
+export { Sheet } from './components/molecules/Sheet/Sheet.mjs';
+export { Slider } from './components/molecules/Slider/Slider.mjs';
+export { TabBar } from './components/molecules/TabBar/TabBar.mjs';
+export { TextField } from './components/molecules/TextField/TextField.mjs';
+export { StyledInputBase, StyledTextAreaBase } from './components/molecules/TextField/InputBase.mjs';
+export { TransactionListItem } from './components/molecules/TransactionListItem/TransactionListItem.mjs';
+export { Grid, GridCol, ResponsiveGrid } from './components/layout/GridSystem/GridSystem.mjs';
+export { tokens } from './types/tokens.mjs';
+export { iconsData } from './types/icons.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

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

package/dist/lib/cssTokens.d.mts

@@ -0,0 +1,14 @@
+import type { Tokens } from '../styles/tokens.mjs';
+/**
+ * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,
+ * with every value a CSS variable that falls back to the resolved value, so a region can change a
+ * token through tokens.css. Breakpoints stay values.
+ *
+ * Use the resolved values from `tokens.json` instead where a value is read as data rather than
+ * CSS, such as a duration parsed for a timer.
+ *
+ * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;
+ * the browser specs check the variables.
+ */
+declare const tokens: Tokens;
+export default tokens;

package/dist/lib/cssTokens.mjs

@@ -0,0 +1,19 @@
+'use client';
+import tokensJson from '../styles/tokens.json.mjs';
+import { withCssVariables } from './cssVariables.mjs';
+
+/**
+ * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,
+ * with every value a CSS variable that falls back to the resolved value, so a region can change a
+ * token through tokens.css. Breakpoints stay values.
+ *
+ * Use the resolved values from `tokens.json` instead where a value is read as data rather than
+ * CSS, such as a duration parsed for a timer.
+ *
+ * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;
+ * the browser specs check the variables.
+ */
+var tokens = withCssVariables(tokensJson);
+
+export { tokens as default };
+//# sourceMappingURL=cssTokens.mjs.map

package/dist/lib/cssTokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssTokens.mjs","sources":["../../src/lib/cssTokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\nimport { withCssVariables } from './cssVariables'\n\n/**\n * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,\n * with every value a CSS variable that falls back to the resolved value, so a region can change a\n * token through tokens.css. Breakpoints stay values.\n *\n * Use the resolved values from `tokens.json` instead where a value is read as data rather than\n * CSS, such as a duration parsed for a timer.\n *\n * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;\n * the browser specs check the variables.\n */\nconst tokens: Tokens = withCssVariables(tokensJson as Tokens)\n\nexport default tokens\n"],"names":["tokens","withCssVariables","tokensJson"],"mappings":";;;;AAIA;;;;;;;;;;AAUG;AACH,IAAMA,MAAM,GAAWC,gBAAgB,CAACC,UAAoB;;;;"}

package/dist/lib/cssVariables.d.mts

@@ -0,0 +1,15 @@
+/**
+ * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the
+ * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and
+ * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.
+ */
+export declare function cssVariableName(path: string[]): string;
+type Tree = {
+    [key: string]: string | Tree;
+};
+/**
+ * A copy of a token tree with the same shape, where every value reads its CSS variable and falls
+ * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.
+ */
+export declare function withCssVariables<T extends Tree>(tree: T, path?: string[]): T;
+export {};

package/dist/lib/cssVariables.mjs

@@ -0,0 +1,37 @@
+'use client';
+import { __spreadArray } from '../vendor/tslib/tslib.es6.mjs';
+
+// Components read tokens as CSS variables, with the resolved value as the fallback (decision 0041).
+// A product that loads tokens.css can change a token for a region (a density or motion mode, a
+// theme); one that doesn't renders exactly the resolved values.
+/**
+ * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the
+ * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and
+ * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.
+ */
+function cssVariableName(path) {
+  return "--".concat(__spreadArray(['co'], path, true).join('-').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
+}
+/** Breakpoints stay values: a CSS variable can't be used in a media query */
+var keepsValue = function keepsValue(path) {
+  return path[1] === 'breakpoint';
+};
+/**
+ * A copy of a token tree with the same shape, where every value reads its CSS variable and falls
+ * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.
+ */
+function withCssVariables(tree, path) {
+  if (path === void 0) {
+    path = [];
+  }
+  return Object.fromEntries(Object.entries(tree).map(function (_a) {
+    var key = _a[0],
+      value = _a[1];
+    var at = __spreadArray(__spreadArray([], path, true), [key], false);
+    if (typeof value !== 'string') return [key, withCssVariables(value, at)];
+    return [key, keepsValue(at) ? value : "var(".concat(cssVariableName(at), ", ").concat(value, ")")];
+  }));
+}
+
+export { cssVariableName, withCssVariables };
+//# sourceMappingURL=cssVariables.mjs.map

package/dist/lib/cssVariables.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVariables.mjs","sources":["../../src/lib/cssVariables.ts"],"sourcesContent":["// Components read tokens as CSS variables, with the resolved value as the fallback (decision 0041).\n// A product that loads tokens.css can change a token for a region (a density or motion mode, a\n// theme); one that doesn't renders exactly the resolved values.\n\n/**\n * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the\n * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and\n * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.\n */\nexport function cssVariableName(path: string[]): string {\n  return `--${['co', ...path]\n    .join('-')\n    .replace(/([a-z])([A-Z])/g, '$1-$2')\n    .toLowerCase()}`\n}\n\n/** Breakpoints stay values: a CSS variable can't be used in a media query */\nconst keepsValue = (path: string[]) => path[1] === 'breakpoint'\n\ntype Tree = { [key: string]: string | Tree }\n\n/**\n * A copy of a token tree with the same shape, where every value reads its CSS variable and falls\n * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.\n */\nexport function withCssVariables<T extends Tree>(tree: T, path: string[] = []): T {\n  return Object.fromEntries(\n    Object.entries(tree).map(([key, value]) => {\n      const at = [...path, key]\n      if (typeof value !== 'string') return [key, withCssVariables(value, at)]\n      return [key, keepsValue(at) ? value : `var(${cssVariableName(at)}, ${value})`]\n    })\n  ) as T\n}\n"],"names":["cssVariableName","path","concat","__spreadArray","join","replace","toLowerCase","keepsValue","withCssVariables","tree","Object","fromEntries","entries","map","_a","key","value","at"],"mappings":";;;AAAA;AACA;AACA;AAEA;;;;AAIG;AACG,SAAUA,eAAeA,CAACC,IAAc,EAAA;AAC5C,EAAA,OAAO,IAAA,CAAAC,MAAA,CAAKC,eAAC,IAAI,CAAA,EAAKF,IAAI,EACvB,IAAA,CAAA,CAAAG,IAAI,CAAC,GAAG,CAAC,CACTC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CACnCC,WAAW,EAAE,CAAE,CAAA;AACpB,CAAA;AAEA;AACA,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIN,IAAc;AAAK,EAAA,OAAAA,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAA;AAAxB,CAAwB,CAAA;AAI/D;;;AAGG;AACa,SAAAO,gBAAgBA,CAAiBC,IAAO,EAAER,IAAmB,EAAA;AAAnB,EAAA,IAAAA,IAAA,KAAA,KAAA,CAAA,EAAA;AAAAA,IAAAA,IAAmB,GAAA,EAAA,CAAA;AAAA,GAAA;AAC3E,EAAA,OAAOS,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,IAAI,CAAC,CAACI,GAAG,CAAC,UAACC,EAAY,EAAA;QAAXC,GAAG,GAAAD,EAAA,CAAA,CAAA,CAAA;AAAEE,MAAAA,KAAK,GAAAF,EAAA,CAAA,CAAA,CAAA,CAAA;AACnC,IAAA,IAAMG,EAAE,GAAOd,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAAF,IAAI,EAAE,IAAA,CAAA,EAAA,CAAAc,GAAG,SAAC,CAAA;AACzB,IAAA,IAAI,OAAOC,KAAK,KAAK,QAAQ,EAAE,OAAO,CAACD,GAAG,EAAEP,gBAAgB,CAACQ,KAAK,EAAEC,EAAE,CAAC,CAAC,CAAA;AACxE,IAAA,OAAO,CAACF,GAAG,EAAER,UAAU,CAACU,EAAE,CAAC,GAAGD,KAAK,GAAG,MAAO,CAAAd,MAAA,CAAAF,eAAe,CAACiB,EAAE,CAAC,EAAK,IAAA,CAAA,CAAAf,MAAA,CAAAc,KAAK,EAAG,GAAA,CAAA,CAAC,CAAA;AAChF,GAAC,CAAC,CACE,CAAA;AACR;;;;"}

package/dist/lib/styleUtils.d.mts

@@ -0,0 +1,42 @@
+export declare const breakpoints: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+export declare const media: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+export declare const forcedColors = "@media (forced-colors: active)";
+/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The
+ * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */
+export declare const forcedColorsEdge: string;
+export declare const reducedMotion = "@media (prefers-reduced-motion: reduce)";
+export declare const exitAnimation: import("styled-components").RuleSet<object>;
+export declare const visuallyHidden: import("styled-components").RuleSet<object>;
+export interface RowState {
+    background: string;
+    text?: string;
+}
+export declare const rowStates: Record<'unselected' | 'selected', Record<'rest' | 'hover' | 'pressed', RowState>>;
+/**
+ * The background (and, when selected, text) of an interactive row in every state.
+ * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under
+ *   aria-activedescendant. It shows the hover state.
+ * - `disabled`: shows the resting state, with no hover or press.
+ * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example
+ *   text set by Typography. Pass it without `&`.
+ */
+export declare const interactiveRow: ({ selected, focused, disabled, textSelector, }?: {
+    selected?: boolean;
+    focused?: boolean;
+    disabled?: boolean;
+    textSelector?: string;
+}) => string;

package/dist/lib/styleUtils.mjs

@@ -0,0 +1,160 @@
+'use client';
+import { __makeTemplateObject } from '../vendor/tslib/tslib.es6.mjs';
+import { keyframes, css } from 'styled-components';
+import tokens from './cssTokens.mjs';
+
+// Breakpoints from the semantic tokens (decision 0014)
+var breakpoints = {
+  xs: tokens.semantic.breakpoint.xs,
+  sm: tokens.semantic.breakpoint.sm,
+  md: tokens.semantic.breakpoint.md,
+  lg: tokens.semantic.breakpoint.lg,
+  xl: tokens.semantic.breakpoint.xl,
+  '2xl': tokens.semantic.breakpoint['2xl']
+};
+// Media query helpers
+var media = {
+  xs: "@media (min-width: ".concat(breakpoints.xs, ")"),
+  sm: "@media (min-width: ".concat(breakpoints.sm, ")"),
+  md: "@media (min-width: ".concat(breakpoints.md, ")"),
+  lg: "@media (min-width: ".concat(breakpoints.lg, ")"),
+  xl: "@media (min-width: ".concat(breakpoints.xl, ")"),
+  '2xl': "@media (min-width: ".concat(breakpoints['2xl'], ")")
+};
+// Windows Contrast Themes and other forced-colours modes (decision 0038). The browser swaps in
+// the user's system colours, drops background colours and box-shadows, and keeps borders and
+// outlines. Inside this query, give a control that shows its edge with a fill alone a border,
+// and draw selected and checked states with system colours: ButtonText for control edges,
+// Highlight and HighlightText for selected and checked, GrayText for disabled, CanvasText for
+// content. Use forced-color-adjust: none only on a fill that carries state.
+var forcedColors = '@media (forced-colors: active)';
+/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The
+ * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */
+var forcedColorsEdge = "".concat(forcedColors, " {\n  border: ").concat(tokens.semantic.border.width.thin, " solid currentColor;\n}");
+// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes
+// an instant change or a simple fade. Colour and opacity transitions need no fallback.
+var reducedMotion = '@media (prefers-reduced-motion: reduce)';
+// No `from` keyframe: the fade starts from the element's current opacity, including a
+// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.
+var fadeOut = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
+// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
+// the element's `animation` declarations while it exits: the entrance stays in the list,
+// so it isn't restarted, and the fade runs on top of it. A fade is already the
+// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
+// still catches clicks (so they can't reach the page behind it) and the panel is inert.
+// Exits accelerate: things leaving speed up as they go (decision 0037).
+])));
+// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
+// the element's `animation` declarations while it exits: the entrance stays in the list,
+// so it isn't restarted, and the fade runs on top of it. A fade is already the
+// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
+// still catches clicks (so they can't reach the page behind it) and the panel is inert.
+// Exits accelerate: things leaving speed up as they go (decision 0037).
+var exitAnimation = css(templateObject_2 || (templateObject_2 = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
+// Content for screen readers only. The 1px size and -1px margin are part of the standard
+// visually-hidden technique, not design values, so they aren't tokens.
+])), fadeOut, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.accelerate);
+// Content for screen readers only. The 1px size and -1px margin are part of the standard
+// visually-hidden technique, not design values, so they aren't tokens.
+var visuallyHidden = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"
+// One interaction pattern for rows and items: list items, menu and listbox options, sidebars
+// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the
+// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected
+// rows leave their text colour to the component, so a destructive row can stay red.
+])));
+// One interaction pattern for rows and items: list items, menu and listbox options, sidebars
+// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the
+// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected
+// rows leave their text colour to the component, so a destructive row can stay red.
+var _a = tokens.semantic.color,
+  rowFill = _a.fill,
+  rowText = _a.text;
+var rowStates = {
+  unselected: {
+    rest: {
+      background: 'transparent'
+    },
+    hover: {
+      background: rowFill.muted
+    },
+    pressed: {
+      background: rowFill["default"]
+    }
+  },
+  selected: {
+    rest: {
+      background: rowFill['accent-muted'],
+      text: rowText.accent
+    },
+    hover: {
+      background: rowFill['accent-muted-hover'],
+      text: rowText['accent-hover']
+    },
+    pressed: {
+      background: rowFill['accent-muted-pressed'],
+      text: rowText['accent-pressed']
+    }
+  }
+};
+var rowDeclarations = function rowDeclarations(_a, textSelector) {
+  var background = _a.background,
+    text = _a.text;
+  if (!text) return "background-color: ".concat(background, ";");
+  return textSelector ? "background-color: ".concat(background, ";\n  ").concat(textSelector, " { color: ").concat(text, "; }") : "background-color: ".concat(background, ";\n  color: ").concat(text, ";");
+};
+/**
+ * The background (and, when selected, text) of an interactive row in every state.
+ * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under
+ *   aria-activedescendant. It shows the hover state.
+ * - `disabled`: shows the resting state, with no hover or press.
+ * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example
+ *   text set by Typography. Pass it without `&`.
+ */
+var interactiveRow = function interactiveRow(_a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.selected,
+    selected = _c === void 0 ? false : _c,
+    _d = _b.focused,
+    focused = _d === void 0 ? false : _d,
+    _e = _b.disabled,
+    disabled = _e === void 0 ? false : _e,
+    textSelector = _b.textSelector;
+  var states = selected ? rowStates.selected : rowStates.unselected;
+  if (disabled) return "".concat(rowDeclarations(states.rest, textSelector), "\n").concat(rowForcedColors({
+    selected: selected,
+    focused: focused,
+    disabled: disabled,
+    textSelector: textSelector
+  }));
+  return "\n  ".concat(rowDeclarations(focused ? states.hover : states.rest, textSelector), "\n\n  &:hover {\n    ").concat(rowDeclarations(states.hover, textSelector), "\n  }\n\n  &:active {\n    ").concat(rowDeclarations(states.pressed, textSelector), "\n  }\n\n  ").concat(rowForcedColors({
+    selected: selected,
+    focused: focused,
+    disabled: disabled,
+    textSelector: textSelector
+  }), "\n");
+};
+// Rows in forced colours (decision 0038): fills are dropped, so a selected row takes the system
+// selection colours, and a hovered or keyboard-active row is outlined in Highlight.
+var rowForcedColors = function rowForcedColors(_a) {
+  var selected = _a.selected,
+    focused = _a.focused,
+    disabled = _a.disabled,
+    textSelector = _a.textSelector;
+  var text = function text(color) {
+    return textSelector ? "color: ".concat(color, ";\n    ").concat(textSelector, " { color: ").concat(color, "; }") : "color: ".concat(color, ";");
+  };
+  var hover = "outline: ".concat(tokens.semantic.border.width.thin, " solid Highlight;\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.width.thin, ");");
+  // A row that doesn't respond (disabled, or not interactive at all) keeps its selection but has
+  // no hover outline. Disabled text is the component's to colour: callers also pass this for
+  // static rows, which must stay CanvasText.
+  // A selected row keeps forced-color-adjust: auto: the browser keeps system colours an author
+  // sets, so the row stays Highlight with HighlightText. Its descendants' own colours would be
+  // forced to CanvasText, so they inherit HighlightText, and anything drawn with a fill inside
+  // (a chip or tag as the row's badge) drops it and keeps its edge. The doubled class outranks
+  // the descendants' own rules.
+  return "".concat(forcedColors, " {\n    ").concat(selected ? "background-color: Highlight;\n    ".concat(text('HighlightText'), "\n    && * {\n      color: inherit;\n      background-color: transparent;\n    }") : '', "\n    ").concat(!disabled && focused ? hover : '', "\n    ").concat(disabled ? '' : "&:hover {\n      ".concat(hover, "\n    }"), "\n  }");
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { breakpoints, exitAnimation, forcedColors, forcedColorsEdge, interactiveRow, media, reducedMotion, rowStates, visuallyHidden };
+//# sourceMappingURL=styleUtils.mjs.map