@spaced-out/ui-design-system 0.5.37 → 0.5.39

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.39](https://github.com/spaced-out/ui-design-system/compare/v0.5.38...v0.5.39) (2026-01-16)
+
+
+### Features
+
+* past chat card component ([#438](https://github.com/spaced-out/ui-design-system/issues/438)) ([6a82638](https://github.com/spaced-out/ui-design-system/commit/6a82638a863dbc9f2950a30414bdf9f784f8a515)), closes [#419](https://github.com/spaced-out/ui-design-system/issues/419) [#440](https://github.com/spaced-out/ui-design-system/issues/440) [#441](https://github.com/spaced-out/ui-design-system/issues/441)
+* preview card component ([#436](https://github.com/spaced-out/ui-design-system/issues/436)) ([447fecd](https://github.com/spaced-out/ui-design-system/commit/447fecd433b200e04c23325f901956aaf037976d))
+
+
+### Bug Fixes
+
+* box shadow and background color for msg ([#454](https://github.com/spaced-out/ui-design-system/issues/454)) ([0acff77](https://github.com/spaced-out/ui-design-system/commit/0acff7762220f9dad7aa7bcc1e145bf12d51a212))
+
+### [0.5.38](https://github.com/spaced-out/ui-design-system/compare/v0.5.37...v0.5.38) (2025-12-19)
+
+
+### Features
+
+* **ScrollingLoader:** Add animated loading component with skeleton rows and cycling text ([#453](https://github.com/spaced-out/ui-design-system/issues/453)) ([6b489cc](https://github.com/spaced-out/ui-design-system/commit/6b489ccc9195c36908779be8e2d64589cbe2aae0))
+
 ### [0.5.37](https://github.com/spaced-out/ui-design-system/compare/v0.5.36...v0.5.37) (2025-12-18)
 
 

package/design-tokens/size/base-size.json

@@ -18,6 +18,9 @@
     "12":{
       "value": "12px"
     },
+    "16":{
+      "value": "16px"
+    },
     "18": {
       "value": "18px"
     },
@@ -96,6 +99,9 @@
     "140": {
       "value": "140px"
     },
+    "150": {
+      "value": "150px"
+    },
     "160": {
       "value": "160px"
     },
@@ -120,6 +126,9 @@
     "276": {
       "value": "276px"
     },
+    "284": {
+      "value": "284px"
+    },
     "300": {
       "value": "300px"
     },
@@ -132,6 +141,9 @@
     "400": {
       "value": "400px"
     },
+    "426": {
+      "value": "426px"
+    },
     "480": {
       "value": "480px"
     },

package/lib/components/PastChatCard/PastChatCard.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import { type AlertSemanticType } from '../../types/common';
+import type { IconSize, IconType } from '../../components/Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export interface PastChatCardProps {
+    title: string;
+    subTitle: string;
+    iconName?: string;
+    iconType?: IconType;
+    iconSize?: IconSize;
+    semantic?: AlertSemanticType;
+    disabled?: boolean;
+    classNames?: ClassNames;
+    onClick?: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+    testId?: string;
+}
+export declare const PastChatCard: Flow.AbstractComponent<PastChatCardProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=PastChatCard.d.ts.map

package/lib/components/PastChatCard/PastChatCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PastChatCard.d.ts","sourceRoot":"","sources":["../../../src/components/PastChatCard/PastChatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAiB,KAAK,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAKxE,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAO5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,iBAAiB,EACjB,cAAc,CAyEf,CAAC"}

package/lib/components/PastChatCard/PastChatCard.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PastChatCard = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _common = require("../../types/common");
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _PastChatCardModule = _interopRequireDefault(require("./PastChatCard.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PastChatCard = exports.PastChatCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    title,
+    subTitle,
+    iconName,
+    iconType = _Icon.ICON_TYPE.solid,
+    iconSize = _Icon.ICON_SIZE.small,
+    semantic = _common.ALERT_SEMANTIC.neutral,
+    disabled = false,
+    classNames,
+    onClick,
+    testId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
+    className: (0, _classify.default)(_PastChatCardModule.default.card, {
+      [_PastChatCardModule.default.disabled]: disabled
+    }, classNames?.wrapper),
+    onClick: onClick,
+    tabIndex: disabled ? -1 : 0,
+    onKeyDown: e => e.key === 'Enter' && onClick?.(e),
+    "aria-disabled": disabled,
+    children: [iconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.SemanticIcon, {
+      name: iconName,
+      type: iconType,
+      size: iconSize,
+      semantic: disabled ? _common.ALERT_SEMANTIC.neutral : semantic,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon-element'
+      }),
+      classNames: {
+        wrapper: _PastChatCardModule.default.semanticIcon
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _PastChatCardModule.default.textContent,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMediumBold, {
+        className: _PastChatCardModule.default.title,
+        color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.primary,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'title'
+        }),
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+        className: _PastChatCardModule.default.subTitle,
+        color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.secondary,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'subtitle'
+        }),
+        children: subTitle
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: "chevron-right",
+      size: _Icon.ICON_SIZE.small,
+      color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.tertiary,
+      className: _PastChatCardModule.default.chevronIcon,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'chevron-icon'
+      })
+    })]
+  });
+});
+PastChatCard.displayName = 'PastChatCard';

package/lib/components/PastChatCard/PastChatCard.module.css

@@ -0,0 +1,83 @@
+@value (
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+
+@value (
+  colorBorderPrimary,
+  colorBorderTertiary,
+  colorBackgroundTertiary,
+  colorBackgroundPrimary,
+  colorFocusPrimary,
+  colorTextClickable
+) from '../../styles/variables/_color.css';
+
+@value (
+  borderWidthPrimary,
+  borderWidthTertiary,
+  borderWidthNone,
+  borderRadiusSmall
+) from '../../styles/variables/_border.css';
+
+@value (
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+.card {
+  display: flex;
+  align-items: center;
+  gap: spaceXSmall;
+  padding: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  composes: borderPrimary from '../../styles/border.module.css';
+  border-radius: borderRadiusSmall;
+  cursor: pointer;
+  width: sizeFluid;
+  min-width: fit-content;
+
+  &:focus {
+    border-color: colorTextClickable;
+    box-shadow: borderWidthNone borderWidthNone borderWidthNone
+      borderWidthTertiary colorFocusPrimary;
+    outline: none;
+  }
+
+  &:hover {
+    background-color: colorBackgroundPrimary;
+
+    &:not(:focus) {
+      border-color: colorBorderTertiary;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXXSmall;
+  flex: 1;
+}
+
+.title,
+.subTitle {
+  width: sizeFluid;
+}
+
+.chevronIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.semanticIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: borderRadiusSmall;
+}

package/lib/components/PastChatCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/PastChatCard/PastChatCard';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PastChatCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PastChatCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}

package/lib/components/PastChatCard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PastChatCard = require("./PastChatCard");
+Object.keys(_PastChatCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PastChatCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PastChatCard[key];
+    }
+  });
+});

package/lib/components/PreviewCard/PreviewCard.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type { ColorTypes } from '../../types/typography';
+import type { IconSize, IconType } from '../../components/Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    card?: string;
+    titleText?: string;
+    previewText?: string;
+    cardIconSection?: string;
+    helperText?: string;
+}>;
+export interface PreviewCardProps {
+    title: string;
+    previewText: string;
+    cardImgIconName?: string;
+    isSelected: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.SyntheticEvent<HTMLElement>) => unknown;
+    helperTextIconName?: string;
+    helperTextIconColor?: ColorTypes;
+    helperTextIconType?: IconType;
+    helperTextIconSize?: IconSize;
+    helperText?: string;
+    classNames?: ClassNames;
+    testId?: string;
+}
+export declare const PreviewCard: Flow.AbstractComponent<PreviewCardProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=PreviewCard.d.ts.map

package/lib/components/PreviewCard/PreviewCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCard.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewCard/PreviewCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAQ5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,cAAc,CAiJf,CAAC"}

package/lib/components/PreviewCard/PreviewCard.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCard = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _TruncatedTextWithTooltip = require("../TruncatedTextWithTooltip");
+var _PreviewCardModule = _interopRequireDefault(require("./PreviewCard.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PreviewCard = exports.PreviewCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    title,
+    previewText,
+    cardImgIconName = 'sparkles',
+    isSelected,
+    disabled = false,
+    onClick,
+    helperTextIconName = '',
+    helperTextIconColor = _typography.TEXT_COLORS.primary,
+    helperTextIconType = _Icon.ICON_TYPE.regular,
+    helperTextIconSize = _Icon.ICON_SIZE.small,
+    helperText,
+    classNames,
+    testId
+  } = _ref;
+  const handleClick = e => {
+    onClick?.(e);
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick?.(e);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
+    className: (0, _classify.classify)(_PreviewCardModule.default.wrapper, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.classify)(_PreviewCardModule.default.card, {
+        [_PreviewCardModule.default.selected]: isSelected,
+        [_PreviewCardModule.default.disabled]: disabled
+      }, classNames?.card),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: disabled ? -1 : 0,
+      role: "button",
+      "aria-pressed": isSelected,
+      "aria-disabled": disabled,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'card'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _PreviewCardModule.default.cardContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _PreviewCardModule.default.mainContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+            color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.primary,
+            className: (0, _classify.classify)(_PreviewCardModule.default.titleText, classNames?.titleText),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'title-link'
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
+              line: 1,
+              tooltip: {
+                delayMotionDuration: 'normal'
+              },
+              classNames: {
+                wrapper: _PreviewCardModule.default.titleTruncateWrapper
+              },
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'title-tooltip'
+              }),
+              children: title
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _PreviewCardModule.default.previewTextContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.ButtonTextExtraSmall, {
+              color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.tertiary,
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'preview-link-text'
+              }),
+              className: (0, _classify.classify)(_PreviewCardModule.default.previewText, classNames?.previewText),
+              children: previewText
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              name: "chevron-right",
+              size: _Icon.ICON_SIZE.small,
+              color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.tertiary,
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'preview-chevron'
+              })
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classify.classify)(_PreviewCardModule.default.cardIconSection, classNames?.cardIconSection),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'card-icon'
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            name: cardImgIconName,
+            type: _Icon.ICON_TYPE.solid,
+            size: _Icon.ICON_SIZE.small,
+            color: disabled ? _typography.TEXT_COLORS.disabled : isSelected ? _typography.TEXT_COLORS.clickable : _typography.TEXT_COLORS.inverseSecondary,
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'card-icon-image'
+            })
+          })
+        })]
+      })
+    }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.classify)(_PreviewCardModule.default.helperText, classNames?.helperText),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'helper-text'
+      }),
+      children: [helperTextIconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: helperTextIconName,
+        type: helperTextIconType,
+        size: helperTextIconSize,
+        color: helperTextIconColor,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'helper-text-icon'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.ButtonTextExtraSmall, {
+        color: _typography.TEXT_COLORS.tertiary,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'helper-text-label'
+        }),
+        children: helperText
+      })]
+    })]
+  });
+});
+PreviewCard.displayName = 'PreviewCard';