@cdx-ui/components 0.3.1 → 0.3.3

package/src/components/Insight/styles.ts

@@ -0,0 +1,193 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR } from '../../styles/constants';
+
+/** Ring width in px; must match the frame's `p-0.5`. */
+export const FRAME_WIDTH = 2;
+
+// Fallback for when `--border-radius-default` can't be read; the surface style overrides it.
+const SURFACE_RADIUS = 'rounded-[calc(var(--border-radius-default)-2px)]';
+
+// Figma measures padding from inside the 2px stroke, and the frame's `p-0.5` is that stroke, so
+// these are the Figma values as-is. `min-h-14` is the natural one-line height: 12 + 32 + 12.
+const SUMMARY_BODY = 'flex-row items-start gap-2.5 min-h-14 pt-2.5 pb-3 ps-2.5 pe-3';
+
+// The standard web focus ring (2px `stroke-focus`, 2px clear of the card's edge) and disabled
+// cursor, on whichever element takes focus. That element sits inside the 2px frame, and a
+// `ring-offset` would paint its offset colour over the frame, so the ring is an outline: its
+// offset stays transparent and it follows the surface radius. Figma has no hover or press tint
+// for the card; the press scale is its only press feedback.
+const PRESS_REGION_STATE = [
+  'web:outline-none',
+  DISABLED_CURSOR,
+  'web:data-[focus-visible=true]:outline-2 web:data-[focus-visible=true]:outline-solid web:data-[focus-visible=true]:outline-stroke-focus web:data-[focus-visible=true]:outline-offset-4',
+].join(' ');
+
+// ── Frame ───────────────────────────────────────────────────
+
+// The frame dims as a whole when disabled: dimming only the surface would let the frame's fill
+// show through it.
+export const insightFrameVariants = cva(
+  [
+    'relative p-0.5',
+    'rounded-[var(--border-radius-default)]',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  ],
+  {
+    variants: {
+      layout: {
+        summary: '',
+        // Reserves the tag overhang (11px above the outer edge) so a scroll container's top
+        // edge does not clip it.
+        detail: 'mt-[11px]',
+      },
+      color: {
+        info: '',
+        warning: '',
+        danger: '',
+      },
+      aiGenerated: {
+        true: 'bg-gradient-to-r from-stroke-ai-start to-stroke-ai-end',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      { aiGenerated: false, color: 'info', className: 'bg-stroke-info-subtle' },
+      { aiGenerated: false, color: 'warning', className: 'bg-stroke-warning-subtle' },
+      { aiGenerated: false, color: 'danger', className: 'bg-stroke-danger-subtle' },
+      // The AI glow takes the insight's colour; the gradient ring does not.
+      {
+        aiGenerated: true,
+        color: 'info',
+        className: 'shadow-[0_0_3px_var(--color-surface-info-subtle)]',
+      },
+      {
+        aiGenerated: true,
+        color: 'warning',
+        className: 'shadow-[0_0_3px_var(--color-surface-warning-subtle)]',
+      },
+      {
+        aiGenerated: true,
+        color: 'danger',
+        className: 'shadow-[0_0_3px_var(--color-surface-danger-subtle)]',
+      },
+    ],
+    defaultVariants: {
+      layout: 'summary',
+      color: 'info',
+      aiGenerated: false,
+    },
+  },
+);
+
+// ── Surface ─────────────────────────────────────────────────
+
+export const insightSurfaceVariants = cva(['bg-surface-primary', SURFACE_RADIUS], {
+  variants: {
+    layout: {
+      summary: '',
+      detail: 'pt-5 px-3 pb-3 gap-4',
+    },
+    // A split summary moves the body layout onto the press region.
+    split: {
+      true: '',
+      false: '',
+    },
+  },
+  // A split summary's surface only mirrors the press region's state, so the region styles it.
+  compoundVariants: [
+    { layout: 'summary', split: false, className: [SUMMARY_BODY, PRESS_REGION_STATE] },
+  ],
+  defaultVariants: {
+    layout: 'summary',
+    split: false,
+  },
+});
+
+// Web-only radius: the region has no fill, so the radius only shapes the web focus outline, and
+// on native a runtime `px` override turns the `calc()` into NaN.
+export const insightPressRegionVariants = cva([
+  SUMMARY_BODY,
+  'web:rounded-[calc(var(--border-radius-default)-2px)]',
+  PRESS_REGION_STATE,
+]);
+
+// ── Summary medallion icon ──────────────────────────────────
+
+// `size-5` overrides Avatar md's `size-4`: the Figma medallion glyph is 20px.
+export const insightIconVariants = cva(['size-5'], {
+  variants: {
+    color: {
+      info: 'text-content-info-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      danger: 'text-content-danger-on-subtle',
+    },
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+// ── Summary text column ─────────────────────────────────────
+
+// Figma's text row is a 32px-min band, centred, starting 2px below the medallion's top. One line
+// sits centred against the medallion; longer copy grows downward while the medallion stays put.
+export const insightSummaryTextVariants = cva(['flex-1 min-w-0 mt-0.5 min-h-8 justify-center'], {
+  variants: {
+    hasClose: {
+      true: 'pe-7',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    hasClose: false,
+  },
+});
+
+// ── Tag ─────────────────────────────────────────────────────
+
+// Positioned against the frame's outer edge: the 24px chip centres on the 2px stroke (-11px) and
+// starts 12px from the outer start edge.
+export const insightTagVariants = cva(['absolute z-10 -top-[11px] start-3']);
+
+export const insightTagIconVariants = cva([], {
+  variants: {
+    color: {
+      info: 'text-content-info-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      danger: 'text-content-danger-on-subtle',
+    },
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+// ── Close ───────────────────────────────────────────────────
+
+// Positioned against the surface (inside the ring): 4px from its top and end, as in Figma.
+export const insightCloseVariants = cva(['absolute top-1 end-1']);
+
+// ── Header / Title / Description / Content / Footer ─────────
+
+export const insightHeaderVariants = cva(['gap-0.5 min-h-8 justify-center']);
+
+export const insightTitleVariants = cva(['heading-sm text-content-primary'], {
+  variants: {
+    hasClose: {
+      true: 'pe-7',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    hasClose: false,
+  },
+});
+
+export const insightDescriptionVariants = cva(['body-md text-content-primary']);
+
+export const insightContentVariants = cva([]);
+
+// Wraps so actions keep their natural widths at narrow widths instead of overflowing the start edge.
+export const insightFooterVariants = cva(['flex-row flex-wrap items-center justify-end gap-2']);
+
+export type InsightFrameVariantProps = VariantProps<typeof insightFrameVariants>;

package/src/components/InsightStack/index.tsx

@@ -0,0 +1,86 @@
+import { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  insightStackFrontVariants,
+  insightStackLayerVariants,
+  insightStackRootVariants,
+} from './styles';
+
+type LayerCount = 0 | 1 | 2;
+
+const layerCountFor = (count: number): LayerCount => (count >= 3 ? 2 : count >= 2 ? 1 : 0);
+
+export interface InsightStackProps extends ViewProps {
+  /**
+   * How many insights the stack stands for. `1` or less draws no layers, `2` draws one, and `3`
+   * or more draws two. The layers are decorative, so put the count in the front Insight's
+   * accessible label or hint.
+   */
+  count: number;
+  /** Merges the root props onto a single child element instead of rendering a `View`. */
+  asChild?: boolean;
+  className?: string;
+  /** The front card, usually a summary `Insight`. */
+  children?: ReactNode;
+}
+
+function InsightStackLayer({ depth, layers }: { depth: 1 | 2; layers: 1 | 2 }) {
+  return (
+    <View
+      aria-hidden
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      className={insightStackLayerVariants({ depth, layers })}
+      {...dataAttributes({ slot: 'insight-stack-layer' })}
+    />
+  );
+}
+
+function InsightStackBody({ layers, children }: { layers: LayerCount; children?: ReactNode }) {
+  return (
+    <>
+      {layers === 2 ? <InsightStackLayer depth={2} layers={2} /> : null}
+      {layers === 0 ? null : <InsightStackLayer depth={1} layers={layers} />}
+      <View className={insightStackFrontVariants()}>{children}</View>
+    </>
+  );
+}
+
+/**
+ * Draws up to two decorative cards behind a summary Insight to show that more insights exist.
+ * The root adds no role, so the front Insight stays the only interactive element.
+ */
+export const InsightStack = forwardRef<View, InsightStackProps>(
+  ({ count, asChild = false, className, style, children, ...props }, ref) => {
+    const layers = layerCountFor(count);
+    const rootProps = {
+      className: cn(insightStackRootVariants({ layers }), className),
+      style,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({ slot: 'insight-stack' })),
+    };
+
+    if (asChild && isValidElement(children)) {
+      const child = children as ReactElement<{ children?: ReactNode }>;
+      return (
+        <Slot ref={ref} {...rootProps}>
+          {cloneElement(
+            child,
+            undefined,
+            <InsightStackBody layers={layers}>{child.props.children}</InsightStackBody>,
+          )}
+        </Slot>
+      );
+    }
+
+    return (
+      <View ref={ref} {...rootProps}>
+        <InsightStackBody layers={layers}>{children}</InsightStackBody>
+      </View>
+    );
+  },
+);
+
+InsightStack.displayName = 'InsightStack';

package/src/components/InsightStack/styles.ts

@@ -0,0 +1,61 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+// ── Root ────────────────────────────────────────────────────
+
+// The bottom padding is the room the layers peek into: 6px per layer, matching Figma.
+export const insightStackRootVariants = cva(['relative'], {
+  variants: {
+    layers: {
+      0: '',
+      1: 'pb-1.5',
+      2: 'pb-3',
+    },
+  },
+  defaultVariants: {
+    layers: 0,
+  },
+});
+
+// ── Front ───────────────────────────────────────────────────
+
+// Keeps the front Insight painted above the layers on Android.
+export const insightStackFrontVariants = cva(['relative z-10']);
+
+// ── Layer ───────────────────────────────────────────────────
+
+// Each layer is anchored to the root's bottom, so it peeks 6px per depth below the front card
+// whatever that card's height. Both start at `top-5`, below where any front card begins: a detail
+// Insight's frame sits 11px down (its tag reserve), and the layer's 6px glow needs room above
+// that, so the layer tops stay hidden behind the opaque front card (at least 60px tall). The insets
+// are symmetric, so RTL needs no mirroring.
+export const insightStackLayerVariants = cva(
+  [
+    'absolute',
+    'bg-surface-primary',
+    'border-2 border-stroke-secondary',
+    'rounded-[var(--border-radius-default)]',
+    'shadow-[0_0_6px_var(--color-surface-neutral-subtle)]',
+  ],
+  {
+    variants: {
+      depth: {
+        1: 'inset-x-1 top-5',
+        2: 'inset-x-2 top-5 bottom-0',
+      },
+      layers: {
+        1: '',
+        2: '',
+      },
+    },
+    compoundVariants: [
+      { depth: 1, layers: 1, className: 'bottom-0' },
+      { depth: 1, layers: 2, className: 'bottom-1.5' },
+    ],
+    defaultVariants: {
+      depth: 1,
+      layers: 1,
+    },
+  },
+);
+
+export type InsightStackLayerVariantProps = VariantProps<typeof insightStackLayerVariants>;

package/src/components/index.ts

@@ -34,6 +34,8 @@ export * from './Field';
 export * from './Form';
 export * from './FullScreenDialog';
 export * from './Image';
+export * from './Insight';
+export * from './InsightStack';
 export * from './InsuranceDisclosure';
 export * from './Input';
 export * from './OtpInput';