@cdx-ui/components 0.3.1 → 0.3.3

package/lib/module/components/Insight/index.js

@@ -0,0 +1,433 @@
+"use strict";
+
+import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Platform, Text, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useCSSVariable } from 'uniwind';
+import { InsightRoot, Slot, dataAttributes, mergeDataAttributes, useInsightContext } from '@cdx-ui/primitives';
+import { Close, Sparkle } from '@cdx-ui/icons';
+import { cn, createContext, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Avatar } from '../Avatar';
+import { Chip } from '../Chip';
+import { IconButton } from '../IconButton';
+import { useCombinedAnimationDisabledState } from '../../animation';
+import { insetRadius } from './insetRadius';
+import { FRAME_WIDTH, insightCloseVariants, insightContentVariants, insightDescriptionVariants, insightFooterVariants, insightFrameVariants, insightHeaderVariants, insightIconVariants, insightPressRegionVariants, insightSummaryTextVariants, insightSurfaceVariants, insightTagIconVariants, insightTagVariants, insightTitleVariants } from './styles';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SCOPE = 'INSIGHT';
+const useInsightStyleContext = () => useStyleContext(SCOPE);
+const [InsightTagRegistryProvider, useInsightTagRegistry] = createContext('InsightTagRegistry');
+let hasWarnedMissingTag = false;
+const PRESSED_SCALE = 0.98;
+const PRESS_SCALE_DURATION_MS = 120;
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+/**
+ * `className` and `style` style the outer frame (the border). `asChild` replaces the inner
+ * surface element. `onPress` exists only on `layout="summary"`.
+ *
+ * `ref` targets the element that takes focus: the press region of a summary with `onPress`
+ * (the surface, or the region beside the dismiss button when `onClose` is also set), so
+ * `ref.current?.focus()` moves focus to the card. A static Insight puts `ref` on its surface.
+ */
+
+/**
+ * Press state lives in InsightRoot's context, but the scaled element is the frame around it, so
+ * this child of the root writes the frame's shared value.
+ */
+function InsightPressScale({
+  scale
+}) {
+  const {
+    isPressed,
+    isPressable
+  } = useInsightContext();
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(undefined);
+  useEffect(() => {
+    if (!isPressable || isAllAnimationsDisabled) {
+      scale.set(1);
+      return;
+    }
+    scale.set(withTiming(isPressed ? PRESSED_SCALE : 1, {
+      duration: PRESS_SCALE_DURATION_MS
+    }));
+  }, [scale, isPressed, isPressable, isAllAnimationsDisabled]);
+  return null;
+}
+function SummaryBody({
+  hasClose,
+  scale,
+  children
+}) {
+  const {
+    color
+  } = useInsightStyleContext();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InsightPressScale, {
+      scale: scale
+    }), /*#__PURE__*/_jsx(View, {
+      "aria-hidden": true,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      ...dataAttributes({
+        slot: 'insight-icon'
+      }),
+      children: /*#__PURE__*/_jsx(Avatar, {
+        size: "md",
+        variant: "subtle",
+        color: color,
+        children: /*#__PURE__*/_jsx(Avatar.Icon, {
+          as: Sparkle,
+          className: insightIconVariants({
+            color
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      className: insightSummaryTextVariants({
+        hasClose
+      }),
+      children: children
+    })]
+  });
+}
+const InsightRootStyled = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    color = 'info',
+    aiGenerated = false,
+    onClose,
+    closeAccessibilityLabel = 'Dismiss insight',
+    asChild = false,
+    className,
+    style,
+    children,
+    ...rootProps
+  } = props;
+  const layout = props.layout ?? 'summary';
+  const onPress = props.layout !== 'detail' ? props.onPress : undefined;
+  const isDisabled = props.layout !== 'detail' && !!props.isDisabled;
+  const hasClose = !!onClose;
+  const asChildElement = asChild && /*#__PURE__*/isValidElement(children);
+  const isPressable = layout === 'summary' && !!onPress;
+  // Mirrors InsightRoot: an accessory splits a pressable or `asChild` root into a container
+  // and a press region.
+  const isSplit = hasClose && (isPressable || asChildElement);
+
+  // The frame scales, not the press region, so the border and the close button move with it.
+  const scale = useSharedValue(1);
+  // Explicit deps for Vite/web without the Reanimated Babel plugin.
+  const pressScaleStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: scale.get()
+    }]
+  }), [scale]);
+  const [tag, setTag] = useState(null);
+  const tagOwnerRef = useRef(null);
+  const registerTag = useCallback((owner, next) => {
+    if (next) {
+      tagOwnerRef.current = owner;
+      setTag(next);
+    } else if (tagOwnerRef.current === owner) {
+      tagOwnerRef.current = null;
+      setTag(null);
+    }
+  }, []);
+  const registry = useMemo(() => ({
+    registerTag
+  }), [registerTag]);
+  useEffect(() => {
+    if (__DEV__ && layout === 'detail' && tagOwnerRef.current === null && !hasWarnedMissingTag) {
+      hasWarnedMissingTag = true;
+      console.warn('[Insight] A `layout="detail"` Insight needs an `Insight.Tag` child. The design has no tagless detail layout.');
+    }
+  }, [layout]);
+
+  // A runtime override reaches native as a `px` string, which a `calc()` class turns into NaN.
+  // Web keeps the `calc()` class, which tracks the root font size and scoped overrides.
+  const radiusVariable = useCSSVariable('--border-radius-default');
+  const surfaceRadius = Platform.OS === 'web' ? undefined : insetRadius(radiusVariable, FRAME_WIDTH);
+  const surfaceStyle = useMemo(() => surfaceRadius === undefined ? undefined : {
+    borderRadius: surfaceRadius
+  }, [surfaceRadius]);
+  const parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [SCOPE]: {
+      layout,
+      color,
+      hasClose
+    }
+  }), [parent, layout, color, hasClose]);
+  let content = children;
+  if (layout === 'summary') {
+    content = asChildElement ? (/*#__PURE__*/cloneElement(children, undefined, /*#__PURE__*/_jsx(SummaryBody, {
+      hasClose: hasClose,
+      scale: scale,
+      children: children.props.children
+    }))) : /*#__PURE__*/_jsx(SummaryBody, {
+      hasClose: hasClose,
+      scale: scale,
+      children: children
+    });
+  }
+  const closeButton = onClose ? /*#__PURE__*/_jsx(IconButton, {
+    as: Close,
+    variant: "ghost",
+    size: "small",
+    color: "neutral",
+    onPress: onClose,
+    accessibilityLabel: closeAccessibilityLabel,
+    className: insightCloseVariants(),
+    ...dataAttributes({
+      slot: 'insight-close'
+    })
+  }) : undefined;
+  return /*#__PURE__*/_jsx(ParentContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(InsightTagRegistryProvider, {
+      value: registry,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        className: cn(insightFrameVariants({
+          layout,
+          color,
+          aiGenerated
+        }), className),
+        style: isPressable ? [style, pressScaleStyle] : style,
+        ...dataAttributes({
+          slot: 'insight-frame',
+          ...(isPressable && {
+            disabled: isDisabled
+          })
+        }),
+        children: [layout === 'detail' && tag ? /*#__PURE__*/_jsx(InsightTagChip, {
+          ...tag
+        }) : null, /*#__PURE__*/_jsx(InsightRoot, {
+          ...rootProps,
+          ref: ref,
+          asChild: asChild,
+          style: surfaceStyle,
+          accessory: closeButton,
+          className: insightSurfaceVariants({
+            layout,
+            split: isSplit
+          }),
+          pressableClassName: isSplit && layout === 'summary' ? insightPressRegionVariants() : undefined,
+          ...mergeDataAttributes(rootProps, dataAttributes({
+            slot: 'insight'
+          })),
+          children: content
+        })]
+      })
+    })
+  });
+});
+InsightRootStyled.displayName = 'Insight';
+
+// =============================================================================
+// TAG
+// =============================================================================
+
+function InsightTagChip({
+  asChild,
+  className,
+  style,
+  children,
+  ref,
+  ...props
+}) {
+  const {
+    color
+  } = useInsightStyleContext();
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: cn(insightTagVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'insight-tag'
+    })),
+    children: /*#__PURE__*/_jsxs(Chip, {
+      variant: "subtle",
+      size: "small",
+      color: color,
+      children: [/*#__PURE__*/_jsx(Chip.Icon, {
+        as: Sparkle,
+        position: "leading",
+        className: insightTagIconVariants({
+          color
+        })
+      }), /*#__PURE__*/_jsx(Chip.Label, {
+        asChild: asChild,
+        children: children
+      })]
+    })
+  });
+}
+
+/**
+ * The detail layout's category tag. Insight renders it as a Sparkle chip straddling the top
+ * border, ahead of the header in reading order, wherever it appears among the children.
+ */
+const InsightTag = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    registerTag
+  } = useInsightTagRegistry();
+  const [owner] = useState(() => ({}));
+  useLayoutEffect(() => {
+    registerTag(owner, {
+      ...props,
+      ref
+    });
+  }, [registerTag, owner, props, ref]);
+  useLayoutEffect(() => () => registerTag(owner, null), [registerTag, owner]);
+  return null;
+});
+InsightTag.displayName = 'Insight.Tag';
+
+// =============================================================================
+// HEADER
+// =============================================================================
+
+const InsightHeader = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(insightHeaderVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'insight-header'
+    })),
+    children: children
+  });
+});
+InsightHeader.displayName = 'Insight.Header';
+
+// =============================================================================
+// TITLE
+// =============================================================================
+
+const InsightTitle = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    hasClose
+  } = useInsightStyleContext();
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    role: "heading",
+    className: cn(insightTitleVariants({
+      hasClose
+    }), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'insight-title'
+    })),
+    children: children
+  });
+});
+InsightTitle.displayName = 'Insight.Title';
+
+// =============================================================================
+// DESCRIPTION
+// =============================================================================
+
+const InsightDescription = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(insightDescriptionVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'insight-description'
+    })),
+    children: children
+  });
+});
+InsightDescription.displayName = 'Insight.Description';
+
+// =============================================================================
+// CONTENT
+// =============================================================================
+
+const InsightContent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(insightContentVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'insight-content'
+    })),
+    children: children
+  });
+});
+InsightContent.displayName = 'Insight.Content';
+
+// =============================================================================
+// FOOTER
+// =============================================================================
+
+const InsightFooter = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(insightFooterVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'insight-footer'
+    })),
+    children: children
+  });
+});
+InsightFooter.displayName = 'Insight.Footer';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+export const Insight = Object.assign(InsightRootStyled, {
+  Tag: InsightTag,
+  Header: InsightHeader,
+  Title: InsightTitle,
+  Description: InsightDescription,
+  Content: InsightContent,
+  Footer: InsightFooter
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/Insight/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","forwardRef","isValidElement","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","useCSSVariable","InsightRoot","Slot","dataAttributes","mergeDataAttributes","useInsightContext","Close","Sparkle","cn","createContext","ParentContext","useParentContext","useStyleContext","Avatar","Chip","IconButton","useCombinedAnimationDisabledState","insetRadius","FRAME_WIDTH","insightCloseVariants","insightContentVariants","insightDescriptionVariants","insightFooterVariants","insightFrameVariants","insightHeaderVariants","insightIconVariants","insightPressRegionVariants","insightSummaryTextVariants","insightSurfaceVariants","insightTagIconVariants","insightTagVariants","insightTitleVariants","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SCOPE","useInsightStyleContext","InsightTagRegistryProvider","useInsightTagRegistry","hasWarnedMissingTag","PRESSED_SCALE","PRESS_SCALE_DURATION_MS","InsightPressScale","scale","isPressed","isPressable","isAllAnimationsDisabled","undefined","set","duration","SummaryBody","hasClose","children","color","accessibilityElementsHidden","importantForAccessibility","slot","size","variant","Icon","as","className","InsightRootStyled","props","ref","aiGenerated","onClose","closeAccessibilityLabel","asChild","style","rootProps","layout","onPress","isDisabled","asChildElement","isSplit","pressScaleStyle","transform","get","tag","setTag","tagOwnerRef","registerTag","owner","next","current","registry","__DEV__","console","warn","radiusVariable","surfaceRadius","OS","surfaceStyle","borderRadius","parent","ctx","content","closeButton","accessibilityLabel","Provider","value","disabled","InsightTagChip","accessory","split","pressableClassName","displayName","position","Label","InsightTag","InsightHeader","Comp","InsightTitle","role","InsightDescription","InsightContent","InsightFooter","Insight","Object","assign","Tag","Header","Title","Description","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/Insight/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Insight/insetRadius.js

@@ -0,0 +1,30 @@
+"use strict";
+
+const ROOT_FONT_SIZE_PX = 16;
+const LENGTH_PATTERN = /^(-?\d*\.?\d+)(px|rem)?$/;
+
+/**
+ * Converts a resolved CSS variable (a number, or a `px`/`rem` string) to pixels. Native resolves
+ * built-in tokens to numbers, while runtime theme overrides and the web resolve to strings.
+ */
+export function cssLengthToPx(value) {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : undefined;
+  }
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const match = LENGTH_PATTERN.exec(value.trim());
+  if (!match) {
+    return undefined;
+  }
+  const amount = Number(match[1]);
+  return match[2] === 'rem' ? amount * ROOT_FONT_SIZE_PX : amount;
+}
+
+/** The radius of a surface inset `inset` px inside a frame with radius `outer`, or `undefined` when `outer` is not a length. */
+export function insetRadius(outer, inset) {
+  const px = cssLengthToPx(outer);
+  return px === undefined ? undefined : Math.max(0, px - inset);
+}
+//# sourceMappingURL=insetRadius.js.map

package/lib/module/components/Insight/insetRadius.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ROOT_FONT_SIZE_PX","LENGTH_PATTERN","cssLengthToPx","value","Number","isFinite","undefined","match","exec","trim","amount","insetRadius","outer","inset","px","Math","max"],"sourceRoot":"../../../../src","sources":["components/Insight/insetRadius.ts"],"mappings":";;AAAA,MAAMA,iBAAiB,GAAG,EAAE;AAE5B,MAAMC,cAAc,GAAG,0BAA0B;;AAEjD;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAACC,KAAkC,EAAsB;EACpF,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC7B,OAAOC,MAAM,CAACC,QAAQ,CAACF,KAAK,CAAC,GAAGA,KAAK,GAAGG,SAAS;EACnD;EACA,IAAI,OAAOH,KAAK,KAAK,QAAQ,EAAE;IAC7B,OAAOG,SAAS;EAClB;EAEA,MAAMC,KAAK,GAAGN,cAAc,CAACO,IAAI,CAACL,KAAK,CAACM,IAAI,CAAC,CAAC,CAAC;EAC/C,IAAI,CAACF,KAAK,EAAE;IACV,OAAOD,SAAS;EAClB;EAEA,MAAMI,MAAM,GAAGN,MAAM,CAACG,KAAK,CAAC,CAAC,CAAC,CAAC;EAC/B,OAAOA,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,GAAGG,MAAM,GAAGV,iBAAiB,GAAGU,MAAM;AACjE;;AAEA;AACA,OAAO,SAASC,WAAWA,CAACC,KAAkC,EAAEC,KAAa,EAAsB;EACjG,MAAMC,EAAE,GAAGZ,aAAa,CAACU,KAAK,CAAC;EAC/B,OAAOE,EAAE,KAAKR,SAAS,GAAGA,SAAS,GAAGS,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEF,EAAE,GAAGD,KAAK,CAAC;AAC/D","ignoreList":[]}

package/lib/module/components/Insight/styles.js

@@ -0,0 +1,183 @@
+"use strict";
+
+import { cva } 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']);
+//# sourceMappingURL=styles.js.map