@vkzstudio/muza-ui 1.1.0 → 1.3.0

package/dist/components/SearchFilters/SearchFilters.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchFilters } from './SearchFilters';
+declare const meta: Meta<typeof SearchFilters>;
+export default meta;
+type Story = StoryObj<typeof SearchFilters>;
+export declare const Default: Story;
+export declare const WithBackButton: Story;
+export declare const BackVisibleOnDesktop: Story;
+export declare const Controlled: Story;
+export declare const NoArrows: Story;
+export declare const LoadingSkeleton: Story;
+//# sourceMappingURL=SearchFilters.stories.d.ts.map

package/dist/components/SearchFilters/SearchFilters.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFilters.stories.d.ts","sourceRoot":"","sources":["../../../src/components/SearchFilters/SearchFilters.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,aAAa,EAAyB,MAAM,iBAAiB,CAAA;AAEtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA8BpC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AAE3C,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA+B5B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAiClC,CAAA;AAaD,eAAO,MAAM,UAAU,EAAE,KAuCxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAA"}

package/dist/components/SearchFilters/index.d.ts

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

package/dist/components/SearchFilters/index.d.ts.map

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

package/dist/components/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,WAAW;;;;8EA+BhB,CAAA;AAED,mCAAmC;AACnC,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACjD,IAAI,CAAC,YAAY,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,GAAG;IACzE,wFAAwF;IACxF,OAAO,CAAC,EACJ,QAAQ,GACR,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,QAAQ,CAAA;IACZ,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yGAAyG;IACzG,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAEH,QAAA,MAAM,GAAG,GAAI,0FAWV,QAAQ,4CAgDV,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,WAAW;;;;8EA+BhB,CAAA;AAED,mCAAmC;AACnC,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACjD,IAAI,CAAC,YAAY,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,GAAG;IACzE,wFAAwF;IACxF,OAAO,CAAC,EACJ,QAAQ,GACR,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,QAAQ,CAAA;IACZ,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yGAAyG;IACzG,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAEH,QAAA,MAAM,GAAG,GAAI,0FAWV,QAAQ,4CAiDV,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/TransactionsListView/TransactionsListView.d.ts

@@ -0,0 +1,152 @@
+import { CardProps } from '../Card';
+import { SkeletonProps } from '../Skeleton';
+import * as React from 'react';
+/**
+ * Background color of the leading icon circle.
+ *
+ * Mirrors the four "state" surface tones in the design tokens plus a
+ * `neutral` fallback for transactions without an explicit category.
+ */
+export type TransactionIconBg = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+/**
+ * Color treatment for the transaction amount.
+ *
+ * - `success` — positive amount, green text (e.g. credits, refunds)
+ * - `default` — neutral amount, dark text (typical case)
+ * - `error` — failed/cancelled, red text (pair with `amountCrossedOut`)
+ * - `disabled` — dimmed text (matches the disabled row state)
+ */
+export type TransactionAmountVariant = 'success' | 'default' | 'error' | 'disabled';
+/**
+ * Built-in status-badge presets accepted by `TransactionData.iconBadge` as a
+ * string shorthand. Each preset bundles both the Solar icon and its color
+ * treatment (glyph + disc), so the badge icon and color are set with a single
+ * value:
+ *
+ * - `plus` — positive / credit, success-colored.
+ * - `minus` — negative / debit, neutral glyph on a dark disc.
+ * - `x` — cancelled / failed, warning-colored.
+ */
+export type TransactionIconBadgePreset = 'plus' | 'minus' | 'x';
+/**
+ * One label/value pair rendered inside the expanded details section.
+ *
+ * On mobile the label sits above the value (stacked); on `md+` it floats to
+ * the left in a 180px column and the value fills the remaining space.
+ */
+export interface TransactionDetailRow {
+    /** Label shown on the left (desktop) or above (mobile). */
+    label: React.ReactNode;
+    /** Value content. Long strings wrap. */
+    value: React.ReactNode;
+}
+/**
+ * Single transaction record consumed by `TransactionsListView`.
+ *
+ * Mirrors the data-driven approach used by `ExpandableTable` — the consumer
+ * passes a typed array of records and the component renders the layout,
+ * states, and expansion behavior.
+ */
+export interface TransactionData {
+    /** Stable unique identifier. Used as the React key and Radix Accordion value. */
+    id: string;
+    /** Transaction title (typically the order or event name). */
+    title: React.ReactNode;
+    /** Subtitle (timestamp, category, status…). */
+    date: React.ReactNode;
+    /**
+     * Icon rendered inside the leading colored circle. Pass any 20×20 node —
+     * typically a Solar icon from `@/components/Icons`.
+     */
+    icon?: React.ReactNode;
+    /** Background color of the leading icon circle. @default 'info' */
+    iconBg?: TransactionIconBg;
+    /**
+     * Replaces the entire leading slot. Use to render an Avatar, initials, or a
+     * custom badge. Overrides `icon` and `iconBg`.
+     */
+    iconSlot?: React.ReactNode;
+    /**
+     * Small status badge rendered as an overlay at the bottom-right of the
+     * leading icon circle.
+     *
+     * Pass a string preset (`'plus'` / `'minus'` / `'x'`) to get the built-in
+     * Solar icon together with its matching color treatment in one value — see
+     * {@link TransactionIconBadgePreset}. Or pass any custom 20×20 node, which
+     * is rendered as-is on a light disc.
+     */
+    iconBadge?: React.ReactNode | TransactionIconBadgePreset;
+    /** Primary amount displayed at the trailing end of the row. */
+    amount: React.ReactNode;
+    /** Color treatment for the amount. @default 'default' */
+    amountVariant?: TransactionAmountVariant;
+    /**
+     * Strike-through amount rendered before the primary amount — typically
+     * the pre-discount or pre-cancellation value.
+     */
+    amountCrossedOut?: React.ReactNode;
+    /** Detail rows shown when the row is expanded. */
+    details?: TransactionDetailRow[];
+    /** Alert message rendered below the detail rows in the expanded view. */
+    alert?: React.ReactNode;
+    /** Alert type — controls color treatment. @default 'error' */
+    alertType?: 'info' | 'success' | 'warning' | 'error';
+    /** Prevents interaction and dims the row. @default false */
+    disabled?: boolean;
+}
+/**
+ * Props for the `TransactionsListView` component.
+ *
+ * Extends {@link CardProps} so any layout / styling prop accepted by `Card`
+ * (padding, direction, gap, asChild, …) flows straight through to the
+ * surrounding card surface — the component just adds the transaction list
+ * semantics on top of a Card. The Card's `variant` is re-exposed as
+ * `cardVariant` to keep the naming unambiguous.
+ */
+export interface TransactionsListViewProps extends Omit<CardProps, 'children' | 'variant'> {
+    /** Transaction records to render, in order. */
+    data: TransactionData[];
+    /**
+     * Visual variant of the surrounding Card surface.
+     *
+     * @default 'default'
+     * @see CardProps.variant
+     */
+    cardVariant?: CardProps['variant'];
+    /**
+     * When true, drops the surrounding Card chrome (border, rounded corners,
+     * background, padding) below the `md` breakpoint — the list renders flush
+     * to the viewport on mobile.
+     *
+     * @default false
+     */
+    disableCardOnMobile?: boolean;
+    /**
+     * Controlled value of the expanded row id. Pair with `onValueChange`.
+     */
+    value?: string;
+    /**
+     * Default expanded row id for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /** Fires when the expanded row changes. Receives the new id (or empty string when collapsed). */
+    onValueChange?: (value: string) => void;
+}
+declare const TransactionsListView: React.ForwardRefExoticComponent<TransactionsListViewProps & React.RefAttributes<HTMLElement>>;
+/** Props for the {@link TransactionsListViewSkeleton} component. */
+export type TransactionsListViewSkeletonProps = {
+    /** Number of skeleton transaction rows to render. @default 3 */
+    rows?: number;
+} & SkeletonProps;
+/**
+ * Loading placeholder matching the `TransactionsListView` — a market-style
+ * card surface wrapping a list of transaction rows, each with a leading
+ * circular icon block, a two-line title/date column, and a trailing amount
+ * block. Rows are separated by the same inline divider as the real list.
+ */
+declare const TransactionsListViewSkeleton: {
+    ({ className, color, rows, ...props }: TransactionsListViewSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TransactionsListView, TransactionsListViewSkeleton };
+//# sourceMappingURL=TransactionsListView.d.ts.map

package/dist/components/TransactionsListView/TransactionsListView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionsListView.d.ts","sourceRoot":"","sources":["../../../src/components/TransactionsListView/TransactionsListView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAQ9C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAG1D;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAA;AAEb;;;;;;;GAOG;AACH,MAAM,MAAM,wBAAwB,GAChC,SAAS,GACT,SAAS,GACT,OAAO,GACP,UAAU,CAAA;AAiBd;;;;;;;;;GASG;AACH,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,CAAA;AAoB/D;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,2DAA2D;IAC3D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,wCAAwC;IACxC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,iFAAiF;IACjF,EAAE,EAAE,MAAM,CAAA;IACV,6DAA6D;IAC7D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+CAA+C;IAC/C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,0BAA0B,CAAA;IACxD,+DAA+D;IAC/D,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,yDAAyD;IACzD,aAAa,CAAC,EAAE,wBAAwB,CAAA;IACxC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,kDAAkD;IAClD,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAA;IAChC,yEAAyE;IACzE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACpD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/C,+CAA+C;IAC/C,IAAI,EAAE,eAAe,EAAE,CAAA;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,QAAA,MAAM,oBAAoB,+FA0DzB,CAAA;AAiQD,oEAAoE;AACpE,MAAM,MAAM,iCAAiC,GAAG;IAC9C,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,aAAa,CAAA;AAEjB;;;;;GAKG;AACH,QAAA,MAAM,4BAA4B;2CAK/B,iCAAiC;;CAuCnC,CAAA;AAGD,OAAO,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,CAAA"}

package/dist/components/TransactionsListView/TransactionsListView.js

@@ -0,0 +1,367 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import * as L from "react";
+import { Accordion as S, AccordionItem as Y, AccordionHeader as R, AccordionTitle as D, AccordionChevron as B, AccordionContent as F } from "../Accordion/Accordion.js";
+import { Alert as E } from "../Alert/Alert.js";
+import { Card as H } from "../Card/Card.js";
+import { cn as s } from "../../utils/cn.js";
+import { Flex as n } from "../Flex/Flex.js";
+import { Skeleton as h } from "../Skeleton/Skeleton.js";
+import { CloseCircleBold as M, MinusCircleBold as O, AddCircleBold as _ } from "@solar-icons/react-perf";
+import { Typography as u } from "../Typography/Typography.js";
+const q = {
+  info: "bg-surface-state-bg-info text-text-brand-def",
+  success: "bg-surface-state-bg-success text-text-state-success",
+  warning: "bg-surface-state-bg-warning text-text-state-warning",
+  error: "bg-surface-state-bg-error text-text-state-error-def",
+  neutral: "bg-surface-base-tertiary text-text-dark-secondary-def"
+}, G = {
+  success: "text-text-state-success",
+  default: "text-text-dark-primary-def",
+  error: "text-text-state-error-def",
+  disabled: "text-text-dark-disabled"
+}, T = {
+  plus: {
+    Icon: _,
+    className: "text-text-state-success bg-surface-base-secondary"
+  },
+  minus: {
+    Icon: O,
+    className: "text-icon-dark-primary-def bg-surface-base-secondary"
+  },
+  x: {
+    Icon: M,
+    className: "text-text-state-warning bg-surface-base-secondary"
+  }
+}, J = L.forwardRef(
+  ({
+    data: r,
+    disableCardOnMobile: t = !1,
+    value: o,
+    defaultValue: m,
+    onValueChange: x,
+    className: l,
+    cardVariant: b = "default",
+    ...N
+  }, f) => /* @__PURE__ */ e(
+    H,
+    {
+      ref: f,
+      variant: b,
+      "data-slot": "transactions-list-view",
+      className: s(
+        "overflow-hidden",
+        // When disableCardOnMobile is set, strip the Card chrome below
+        // the `md` breakpoint so the list renders flush to the viewport.
+        t && [
+          "max-md:rounded-none",
+          "max-md:border-0",
+          "max-md:bg-transparent",
+          "max-md:px-0",
+          "max-md:py-0"
+        ],
+        l
+      ),
+      ...N,
+      children: /* @__PURE__ */ e(
+        S,
+        {
+          type: "single",
+          collapsible: !0,
+          variant: "inline",
+          value: o,
+          defaultValue: m,
+          onValueChange: x,
+          className: "gap-0",
+          children: r.map((c, g) => /* @__PURE__ */ e(
+            K,
+            {
+              data: c,
+              isFirst: g === 0,
+              isLast: g === r.length - 1
+            },
+            c.id
+          ))
+        }
+      )
+    }
+  )
+);
+J.displayName = "TransactionsListView";
+const K = ({ data: r, isFirst: t, isLast: o }) => {
+  const {
+    id: m,
+    title: x,
+    date: l,
+    icon: b,
+    iconBg: N = "info",
+    iconSlot: f,
+    iconBadge: c,
+    amount: g,
+    amountVariant: j = "default",
+    amountCrossedOut: y,
+    details: p,
+    alert: w,
+    alertType: I = "error",
+    disabled: i
+  } = r, v = p && p.length > 0 || !!w, d = typeof c == "string" && c in T ? T[c] : void 0, C = d == null ? void 0 : d.Icon, k = C ? /* @__PURE__ */ e(C, { className: "size-icon-small" }) : c, z = /* @__PURE__ */ a("span", { className: "inline-flex shrink-0 flex-col items-end whitespace-nowrap", children: [
+    y != null && /* @__PURE__ */ e(
+      u,
+      {
+        component: "span",
+        variant: "body",
+        weight: "regular",
+        size: "caption",
+        fixY: !0,
+        className: "text-text-dark-secondary-def line-through",
+        children: y
+      }
+    ),
+    /* @__PURE__ */ e(
+      u,
+      {
+        component: "span",
+        variant: "body",
+        weight: "medium",
+        size: "base",
+        fixY: !0,
+        className: s(
+          "text-right",
+          G[i ? "disabled" : j]
+        ),
+        children: g
+      }
+    )
+  ] });
+  return /* @__PURE__ */ a(Y, { value: m, disabled: i, className: "last:border-b-0", children: [
+    /* @__PURE__ */ a(
+      R,
+      {
+        hideDefaultChevron: !0,
+        className: s(
+          // Flex row mirroring the Figma layout. On mobile, the chevron
+          // and amount sit INSIDE the content column so both align with
+          // the trigger's right edge. On desktop, the amount stack and
+          // chevron lift out as siblings of the content column and
+          // sit vertically centered alongside the title + date stack.
+          "flex items-start gap-lg py-comp-card-account-gap-def pr-0 pl-0",
+          // Snap the last row's padding in faster than the content expand
+          // (overrides the trigger's default transition-all duration).
+          "duration-100",
+          // Disabled rows are inert — show the default cursor, not a pointer.
+          "disabled:cursor-default",
+          // The first/last rows sit flush with the card's top/bottom padding.
+          // For the last row, only drop the bottom padding while collapsed —
+          // when expanded it's needed as the gap before the content.
+          t && "pt-0",
+          o && "data-[state=closed]:pb-0"
+        ),
+        children: [
+          /* @__PURE__ */ a(
+            n,
+            {
+              component: "span",
+              align: "center",
+              justify: "center",
+              "aria-hidden": !0,
+              className: s(
+                "relative size-icon-xlarge shrink-0 rounded-full",
+                !f && q[N],
+                // overflow-hidden would clip the corner badge, so only apply
+                // it when there's no badge
+                !k && "overflow-hidden",
+                i && "opacity-50"
+              ),
+              children: [
+                f ?? b,
+                k && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: s(
+                      "absolute -right-0.5 -bottom-0.5 inline-flex size-icon-medium items-center justify-center rounded-full",
+                      (d == null ? void 0 : d.className) ?? "bg-invert-def"
+                    ),
+                    children: k
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(
+            n,
+            {
+              component: "span",
+              direction: "column",
+              justify: "center",
+              gap: "3xs",
+              flex: 1,
+              className: "min-h-icon-xlarge min-w-0",
+              children: [
+                /* @__PURE__ */ a(
+                  n,
+                  {
+                    component: "span",
+                    align: "baseline",
+                    justify: "between",
+                    gap: "md",
+                    className: "min-w-0",
+                    children: [
+                      /* @__PURE__ */ e(
+                        D,
+                        {
+                          className: s(
+                            "line-clamp-2 min-w-0 flex-1 text-left",
+                            "group-data-[state=open]:line-clamp-none",
+                            i && "text-text-dark-disabled"
+                          ),
+                          children: x
+                        }
+                      ),
+                      (v || i) && /* @__PURE__ */ e(B, { className: "self-start md:hidden" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  n,
+                  {
+                    component: "span",
+                    align: "baseline",
+                    justify: "between",
+                    gap: "md",
+                    className: "min-w-0",
+                    children: [
+                      /* @__PURE__ */ e(
+                        u,
+                        {
+                          component: "span",
+                          variant: "body",
+                          weight: "regular",
+                          size: "sm",
+                          fixY: !0,
+                          className: s(
+                            "text-text-dark-secondary-def min-w-0 truncate text-left transition-colors",
+                            // Match the title: the whole row re-colors on hover.
+                            !i && "group-hover:text-text-brand-hover",
+                            i && "text-text-dark-disabled"
+                          ),
+                          children: l
+                        }
+                      ),
+                      /* @__PURE__ */ e("span", { className: "md:hidden", children: z })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "hidden items-center gap-2xl self-center md:inline-flex", children: [
+            z,
+            (v || i) && /* @__PURE__ */ e(B, {})
+          ] })
+        ]
+      }
+    ),
+    v && /* @__PURE__ */ e(F, { className: "pl-0", children: /* @__PURE__ */ a(
+      n,
+      {
+        direction: "column",
+        gap: "lg",
+        className: s(
+          // align the details under the title column on desktop
+          "md:pl-[calc(var(--spacing-icon-xlarge)+var(--spacing-lg))]"
+        ),
+        children: [
+          p == null ? void 0 : p.map((A, V) => /* @__PURE__ */ e(Q, { label: A.label, value: A.value }, V)),
+          w && /* @__PURE__ */ e(E, { type: I, size: "small", className: "self-start", children: w })
+        ]
+      }
+    ) })
+  ] });
+}, Q = ({ label: r, value: t }) => /* @__PURE__ */ a(
+  n,
+  {
+    direction: "column",
+    gap: "xs",
+    className: "md:flex-row md:items-baseline md:gap-3xl",
+    children: [
+      /* @__PURE__ */ e(
+        u,
+        {
+          component: "span",
+          variant: "body",
+          weight: "medium",
+          size: "base",
+          fixY: !0,
+          className: "text-text-dark-primary-def md:w-[180px] md:shrink-0",
+          children: r
+        }
+      ),
+      /* @__PURE__ */ e(
+        u,
+        {
+          component: "span",
+          variant: "body",
+          weight: "regular",
+          size: "base",
+          fixY: !0,
+          className: "break-words text-text-dark-primary-def md:flex-1",
+          children: t
+        }
+      )
+    ]
+  }
+), U = ({
+  className: r,
+  color: t = "default",
+  rows: o = 3,
+  ...m
+}) => /* @__PURE__ */ e(
+  n,
+  {
+    direction: "column",
+    className: s(
+      "w-full overflow-hidden rounded-comp-card-account-radius border border-solid border-comp-card-account-stroke bg-comp-card-account-fill px-comp-card-account-p-hor py-comp-card-account-p-ver-def",
+      r
+    ),
+    ...m,
+    children: Array.from({ length: o }).map((x, l) => /* @__PURE__ */ a(
+      n,
+      {
+        align: "start",
+        gap: "lg",
+        className: s(
+          "py-comp-accordion-inline-p-ver",
+          l < o - 1 && "border-b border-comp-accordion-inline-stroke-def"
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            h,
+            {
+              color: t,
+              className: "size-icon-xlarge shrink-0 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ a(
+            n,
+            {
+              direction: "column",
+              gap: "3xs",
+              flex: 1,
+              className: "min-w-0 py-[2px]",
+              children: [
+                /* @__PURE__ */ e(h, { color: t, className: "h-[16px] w-[70%]" }),
+                /* @__PURE__ */ e(h, { color: t, className: "h-[12px] w-[40%]" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(h, { color: t, className: "h-[16px] w-[64px] shrink-0" })
+        ]
+      },
+      l
+    ))
+  }
+);
+U.displayName = "TransactionsListViewSkeleton";
+export {
+  J as TransactionsListView,
+  U as TransactionsListViewSkeleton
+};

package/dist/components/TransactionsListView/TransactionsListView.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TransactionsListView } from './TransactionsListView';
+declare const meta: Meta<typeof TransactionsListView>;
+export default meta;
+type Story = StoryObj<typeof TransactionsListView>;
+export declare const Default: Story;
+export declare const PreExpanded: Story;
+export declare const LongTitlesExpanded: Story;
+export declare const DisableCardOnMobile: Story;
+export declare const NoExpandableContent: Story;
+export declare const LoadingSkeleton: Story;
+//# sourceMappingURL=TransactionsListView.stories.d.ts.map

package/dist/components/TransactionsListView/TransactionsListView.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionsListView.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TransactionsListView/TransactionsListView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,OAAO,EAEL,oBAAoB,EAErB,MAAM,wBAAwB,CAAA;AA8E/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAgD3C,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAElD,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAmBjC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA"}

package/dist/components/TransactionsListView/index.d.ts

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

package/dist/components/TransactionsListView/index.d.ts.map

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