@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/molecules/TabBar/TabBar.mjs

@@ -0,0 +1,213 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { forcedColors } from '../../../lib/styleUtils.mjs';
+
+var semantic = tokens.semantic;
+var StyledTabList = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TabBar__StyledTabList",
+  componentId: "sc-1g9ib0y-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border.emphasis, tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
+var StyledTab = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "TabBar__StyledTab",
+  componentId: "sc-1g9ib0y-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"])), semantic.space[200], semantic.space[300], semantic.space[400], tokens.component.button.sizes.medium.font, function (props) {
+  return props.$disabled ? 'not-allowed' : 'pointer';
+}, semantic.motion.transition.feedback, semantic.radius.sm, semantic.radius.sm, function (props) {
+  return props.$isActive ? semantic.color.fill['accent-muted'] : 'transparent';
+}, function (props) {
+  return props.$isActive ? semantic.color.text.accent : semantic.color.text.muted;
+}, semantic.border.width.thick, function (props) {
+  return props.$isActive ? semantic.color.fill.accent : 'transparent';
+}, semantic.motion.transition.feedback, forcedColors, function (props) {
+  return props.$isActive ? 'Highlight' : 'transparent';
+}, function (props) {
+  return props.$isActive ? semantic.color.fill['accent-muted-hover'] : 'transparent';
+}, function (props) {
+  return props.$isActive ? semantic.color.text['accent-hover'] : semantic.color.text["default"];
+}, function (props) {
+  return props.$isActive ? semantic.color.fill['accent-muted-pressed'] : 'transparent';
+}, function (props) {
+  return props.$isActive ? semantic.color.text['accent-pressed'] : semantic.color.text["default"];
+}, function (props) {
+  return props.$disabled ? '0.5' : '1';
+}, semantic.border.focus, semantic.border.focusOffset);
+var StyledBadge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TabBar__StyledBadge",
+  componentId: "sc-1g9ib0y-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"
+/**
+ * TabBar component for tabbed navigation
+ *
+ * Provides accessible tab navigation with an underline style, keyboard support,
+ * and optional badge counts. Follows ARIA tablist pattern.
+ *
+ * @example
+ * ```tsx
+ * const [activeTab, setActiveTab] = useState('all')
+ *
+ * <TabBar
+ *   tabs={[
+ *     { id: 'all', label: 'All', badge: 42 },
+ *     { id: 'pending', label: 'Pending', badge: 5 },
+ *     { id: 'completed', label: 'Completed' }
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */])), tokens.component.tabBar.badge.size, tokens.component.tabBar.badge.size, semantic.space[100], tokens.component.tabBar.badge.typography, tokens.component.tabBar.badge.fontWeight, semantic.radius.full, semantic.color.fill.accent, semantic.color.text.inverse);
+/**
+ * TabBar component for tabbed navigation
+ *
+ * Provides accessible tab navigation with an underline style, keyboard support,
+ * and optional badge counts. Follows ARIA tablist pattern.
+ *
+ * @example
+ * ```tsx
+ * const [activeTab, setActiveTab] = useState('all')
+ *
+ * <TabBar
+ *   tabs={[
+ *     { id: 'all', label: 'All', badge: 42 },
+ *     { id: 'pending', label: 'Pending', badge: 5 },
+ *     { id: 'completed', label: 'Completed' }
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+var TabBar = function TabBar(_a) {
+  var tabs = _a.tabs,
+    activeTab = _a.activeTab,
+    onTabChange = _a.onTabChange;
+    // Deprecated: every variant renders as underline (decision 0020)
+    _a.variant;
+    var _b = _a["aria-label"],
+    ariaLabel = _b === void 0 ? 'Tab navigation' : _b,
+    dataTestId = _a["data-testid"];
+  var tabRefs = useRef([]);
+  var _c = useState(function () {
+      return tabs.findIndex(function (tab) {
+        return tab.id === activeTab;
+      });
+    }),
+    focusedIndex = _c[0],
+    setFocusedIndex = _c[1];
+  // Update focused index when active tab changes externally
+  useEffect(function () {
+    var newIndex = tabs.findIndex(function (tab) {
+      return tab.id === activeTab;
+    });
+    if (newIndex !== -1) {
+      setFocusedIndex(newIndex);
+    }
+  }, [activeTab, tabs]);
+  var handleTabClick = function handleTabClick(tab, index) {
+    if (!tab.disabled) {
+      onTabChange(tab.id);
+      setFocusedIndex(index);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event, index) {
+    var _a;
+    var newIndex = index;
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        // Find previous non-disabled tab
+        newIndex = index - 1;
+        while (newIndex >= 0 && tabs[newIndex].disabled) {
+          newIndex--;
+        }
+        if (newIndex < 0) {
+          // Wrap to last non-disabled tab
+          newIndex = tabs.length - 1;
+          while (newIndex > index && tabs[newIndex].disabled) {
+            newIndex--;
+          }
+        }
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        // Find next non-disabled tab
+        newIndex = index + 1;
+        while (newIndex < tabs.length && tabs[newIndex].disabled) {
+          newIndex++;
+        }
+        if (newIndex >= tabs.length) {
+          // Wrap to first non-disabled tab
+          newIndex = 0;
+          while (newIndex < index && tabs[newIndex].disabled) {
+            newIndex++;
+          }
+        }
+        break;
+      case 'Home':
+        event.preventDefault();
+        // Focus first non-disabled tab
+        newIndex = 0;
+        while (newIndex < tabs.length && tabs[newIndex].disabled) {
+          newIndex++;
+        }
+        break;
+      case 'End':
+        event.preventDefault();
+        // Focus last non-disabled tab
+        newIndex = tabs.length - 1;
+        while (newIndex >= 0 && tabs[newIndex].disabled) {
+          newIndex--;
+        }
+        break;
+      default:
+        return;
+    }
+    if (newIndex !== index && newIndex >= 0 && newIndex < tabs.length) {
+      setFocusedIndex(newIndex);
+      (_a = tabRefs.current[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  };
+  return jsx(StyledTabList, {
+    role: "tablist",
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    children: tabs.map(function (tab, index) {
+      return jsxs(StyledTab, {
+        ref: function ref(el) {
+          tabRefs.current[index] = el;
+        },
+        "$isActive": tab.id === activeTab,
+        "$disabled": tab.disabled || false,
+        role: "tab",
+        "aria-selected": tab.id === activeTab,
+        "aria-disabled": tab.disabled || false,
+        tabIndex: index === focusedIndex ? 0 : -1,
+        disabled: tab.disabled,
+        onClick: function onClick() {
+          return handleTabClick(tab, index);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return handleKeyDown(e, index);
+        },
+        "data-testid": "".concat(dataTestId, "-tab-").concat(tab.id),
+        children: [tab.label, typeof tab.badge === 'number' && tab.badge > 0 && jsx(StyledBadge, {
+          "aria-label": "".concat(tab.badge, " items"),
+          children: tab.badge > 99 ? '99+' : tab.badge
+        })]
+      }, tab.id);
+    })
+  });
+};
+TabBar.displayName = 'TabBar';
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { TabBar };
+//# sourceMappingURL=TabBar.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { TabBar } from './TabBar.mjs';
+export type { TabBarProps, Tab, TabVariant } from './TabBar.mjs';

package/dist/components/molecules/TextField/InputBase.d.mts

@@ -0,0 +1,22 @@
+/**
+ * Shared input states for text-based form controls
+ */
+export type InputState = 'default' | 'focus' | 'error' | 'disabled';
+/**
+ * Base styled input component with all common styling
+ * Reusable across TextField, TextArea, PasswordInput, NumberInput
+ */
+interface StyledInputBaseProps {
+    $hasError?: boolean;
+    $disabled?: boolean;
+}
+export declare const StyledInputBase: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}, StyledInputBaseProps>> & string;
+/**
+ * Base styled textarea with shared styling
+ */
+export declare const StyledTextAreaBase: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Merged<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}, StyledInputBaseProps>> & string;
+export {};

package/dist/components/molecules/TextField/InputBase.mjs

@@ -0,0 +1,56 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+var input = tokens.component.input,
+  semantic = tokens.semantic;
+/**
+ * Styles shared by the single-line input and the textarea. Each element sets its
+ * own min-height and padding. Interpolating a styled component into another's CSS
+ * inserts its class selector, not its styles, so the sharing goes through `css`.
+ */
+var inputBaseStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  width: 100%;\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  width: 100%;\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"])), input["default"].font, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? input.disabled.textColor : input["default"].textColor;
+}, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? input.disabled.backgroundColor : input["default"].backgroundColor;
+}, input["default"].borderWidth, function (_a) {
+  var $hasError = _a.$hasError,
+    $disabled = _a.$disabled;
+  if ($disabled) return input.disabled.borderColor;
+  if ($hasError) return input.error.borderColor;
+  return input["default"].borderColor;
+}, input["default"].borderRadius, tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.standard, tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.standard, input.placeholder.textColor, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
+}, input.focus.outline, semantic.border.focusOffset, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
+});
+var StyledInputBase = /*#__PURE__*/styled.input.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "InputBase__StyledInputBase",
+  componentId: "sc-1bpf4e8-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  min-height: ", ";\n  padding: 0 ", ";\n"], ["\n  ", "\n  min-height: ", ";\n  padding: 0 ", ";\n"
+/**
+ * Base styled textarea with shared styling
+ */])), inputBaseStyles, semantic.size.control.lg, semantic.space.inset.lg);
+/**
+ * Base styled textarea with shared styling
+ */
+var StyledTextAreaBase = /*#__PURE__*/styled.textarea.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "InputBase__StyledTextAreaBase",
+  componentId: "sc-1bpf4e8-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  \n  /* TextArea specific: a taller minimum for multi-line entry (decision 0034) */\n  min-height: ", ";\n  padding: ", " ", ";\n  resize: vertical;\n"], ["\n  ", "\n  \n  /* TextArea specific: a taller minimum for multi-line entry (decision 0034) */\n  min-height: ", ";\n  padding: ", " ", ";\n  resize: vertical;\n"])), inputBaseStyles, input.textarea.minHeight, semantic.space.inset.md, semantic.space.inset.lg);
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { StyledInputBase, StyledTextAreaBase };
+//# sourceMappingURL=InputBase.mjs.map

package/dist/components/molecules/TextField/InputBase.mjs.map

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

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

@@ -0,0 +1,56 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ * Props for the TextField component
+ */
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Whether the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Input type
+     * @default 'text'
+     */
+    type?: 'text' | 'email' | 'tel' | 'url' | 'search';
+    /**
+     * Unique identifier for the input
+     * Generated automatically if not provided
+     */
+    id?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * TextField component for text input with label, helper text, and error states
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Email"
+ *   type="email"
+ *   helperText="We'll never share your email"
+ *   required
+ * />
+ * ```
+ */
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/molecules/TextField/TextField.mjs

@@ -0,0 +1,115 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { StyledInputBase } from './InputBase.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var field = tokens.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var space = tokens.semantic.space;
+var StyledFieldContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TextField__StyledFieldContainer",
+  componentId: "sc-1ys3b0-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), space[200]);
+var StyledLabel = /*#__PURE__*/styled.label.withConfig({
+  displayName: "TextField__StyledLabel",
+  componentId: "sc-1ys3b0-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space[100], field.label.typography, field.label.color, field.label.colorDisabled);
+var StyledRequiredIndicator = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TextField__StyledRequiredIndicator",
+  componentId: "sc-1ys3b0-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), field.requiredIndicator.color, field.requiredIndicator.fontWeight);
+var StyledHelperText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TextField__StyledHelperText",
+  componentId: "sc-1ys3b0-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+/**
+ * TextField component for text input with label, helper text, and error states
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Email"
+ *   type="email"
+ *   helperText="We'll never share your email"
+ *   required
+ * />
+ * ```
+ */])), field.helperText.typography, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? field.helperText.colorError : field.helperText.color;
+});
+/**
+ * TextField component for text input with label, helper text, and error states
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Email"
+ *   type="email"
+ *   helperText="We'll never share your email"
+ *   required
+ * />
+ * ```
+ */
+var TextField = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+    helperText = _a.helperText,
+    error = _a.error,
+    _b = _a.required,
+    required = _b === void 0 ? false : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    _d = _a.type,
+    type = _d === void 0 ? 'text' : _d,
+    providedId = _a.id,
+    dataTestId = _a["data-testid"],
+    inputProps = __rest(_a, ["label", "helperText", "error", "required", "disabled", "type", "id", 'data-testid']);
+  // Generate unique ID if not provided
+  var generatedId = useId();
+  var id = providedId || generatedId;
+  // IDs for ARIA relationships
+  var errorId = error ? "".concat(id, "-error") : undefined;
+  var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
+  var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
+  var hasError = Boolean(error);
+  return jsxs(StyledFieldContainer, {
+    "data-testid": dataTestId,
+    children: [label && jsxs(StyledLabel, {
+      htmlFor: id,
+      "data-disabled": disabled,
+      children: [label, required && jsx(StyledRequiredIndicator, {
+        "aria-label": "required",
+        children: "*"
+      })]
+    }), jsx(StyledInputBase, __assign({
+      ref: ref,
+      id: id,
+      type: type,
+      disabled: disabled,
+      required: required,
+      "aria-required": required,
+      "aria-invalid": hasError,
+      "aria-describedby": describedBy,
+      "$hasError": hasError,
+      "$disabled": disabled
+    }, inputProps)), error && jsx(StyledHelperText, {
+      id: errorId,
+      role: "alert",
+      "aria-live": "polite",
+      "$hasError": true,
+      children: error
+    }), helperText && !error && jsx(StyledHelperText, {
+      id: helperId,
+      children: helperText
+    })]
+  });
+});
+TextField.displayName = 'TextField';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { TextField };
+//# sourceMappingURL=TextField.mjs.map

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

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

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

@@ -0,0 +1,4 @@
+export { TextField } from './TextField.mjs';
+export type { TextFieldProps } from './TextField.mjs';
+export { StyledInputBase, StyledTextAreaBase } from './InputBase.mjs';
+export type { InputState } from './InputBase.mjs';

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

@@ -0,0 +1,39 @@
+import React from 'react';
+export type TransactionStatus = 'completed' | 'pending' | 'failed';
+export type TransactionCategory = 'shopping' | 'dining' | 'transport' | 'entertainment' | 'bills' | 'other';
+export interface TransactionListItemProps {
+    /** Merchant or transaction name */
+    merchant: string;
+    /** Transaction amount (positive for income, negative for expense) */
+    amount: number;
+    /** Transaction date */
+    date: Date | string;
+    /** Transaction status */
+    status?: TransactionStatus;
+    /** Transaction category */
+    category?: TransactionCategory;
+    /** Optional merchant logo URL */
+    merchantLogo?: string;
+    /** Optional description or note */
+    description?: string;
+    /** Whether this transaction has a receipt attached */
+    hasReceipt?: boolean;
+    /** Whether this transaction has notes attached */
+    hasNote?: boolean;
+    /** Currency code */
+    currency?: string;
+    /** Click handler for the transaction */
+    onClick?: () => void;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * 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
+ */
+export declare const TransactionListItem: React.FC<TransactionListItemProps>;