@cdx-ui/components 0.3.2 → 0.3.3

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["cva","DISABLED_CURSOR","FRAME_WIDTH","SURFACE_RADIUS","SUMMARY_BODY","PRESS_REGION_STATE","join","insightFrameVariants","variants","layout","summary","detail","color","info","warning","danger","aiGenerated","true","false","compoundVariants","className","defaultVariants","insightSurfaceVariants","split","insightPressRegionVariants","insightIconVariants","insightSummaryTextVariants","hasClose","insightTagVariants","insightTagIconVariants","insightCloseVariants","insightHeaderVariants","insightTitleVariants","insightDescriptionVariants","insightContentVariants","insightFooterVariants"],"sourceRoot":"../../../../src","sources":["components/Insight/styles.ts"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,89 @@
+"use strict";
+
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { View } from 'react-native';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { insightStackFrontVariants, insightStackLayerVariants, insightStackRootVariants } from './styles';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const layerCountFor = count => count >= 3 ? 2 : count >= 2 ? 1 : 0;
+function InsightStackLayer({
+  depth,
+  layers
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    "aria-hidden": true,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    className: insightStackLayerVariants({
+      depth,
+      layers
+    }),
+    ...dataAttributes({
+      slot: 'insight-stack-layer'
+    })
+  });
+}
+function InsightStackBody({
+  layers,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [layers === 2 ? /*#__PURE__*/_jsx(InsightStackLayer, {
+      depth: 2,
+      layers: 2
+    }) : null, layers === 0 ? null : /*#__PURE__*/_jsx(InsightStackLayer, {
+      depth: 1,
+      layers: layers
+    }), /*#__PURE__*/_jsx(View, {
+      className: insightStackFrontVariants(),
+      children: children
+    })]
+  });
+}
+
+/**
+ * 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 = /*#__PURE__*/forwardRef(({
+  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 && /*#__PURE__*/isValidElement(children)) {
+    const child = children;
+    return /*#__PURE__*/_jsx(Slot, {
+      ref: ref,
+      ...rootProps,
+      children: /*#__PURE__*/cloneElement(child, undefined, /*#__PURE__*/_jsx(InsightStackBody, {
+        layers: layers,
+        children: child.props.children
+      }))
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    ...rootProps,
+    children: /*#__PURE__*/_jsx(InsightStackBody, {
+      layers: layers,
+      children: children
+    })
+  });
+});
+InsightStack.displayName = 'InsightStack';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","forwardRef","isValidElement","View","Slot","dataAttributes","mergeDataAttributes","cn","insightStackFrontVariants","insightStackLayerVariants","insightStackRootVariants","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","layerCountFor","count","InsightStackLayer","depth","layers","accessibilityElementsHidden","importantForAccessibility","className","slot","InsightStackBody","children","InsightStack","asChild","style","props","ref","rootProps","child","undefined","displayName"],"sourceRoot":"../../../../src","sources":["components/InsightStack/index.tsx"],"mappings":"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","ignoreList":[]}

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

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

package/lib/module/components/InsightStack/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","insightStackRootVariants","variants","layers","defaultVariants","insightStackFrontVariants","insightStackLayerVariants","depth","compoundVariants","className"],"sourceRoot":"../../../../src","sources":["components/InsightStack/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,eAAe;;AAEtD;;AAEA;AACA,OAAO,MAAMC,wBAAwB,GAAGD,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE;EACxDE,QAAQ,EAAE;IACRC,MAAM,EAAE;MACN,CAAC,EAAE,EAAE;MACL,CAAC,EAAE,QAAQ;MACX,CAAC,EAAE;IACL;EACF,CAAC;EACDC,eAAe,EAAE;IACfD,MAAM,EAAE;EACV;AACF,CAAC,CAAC;;AAEF;;AAEA;AACA,OAAO,MAAME,yBAAyB,GAAGL,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC;;AAE/D;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,yBAAyB,GAAGN,GAAG,CAC1C,CACE,UAAU,EACV,oBAAoB,EACpB,kCAAkC,EAClC,wCAAwC,EACxC,sDAAsD,CACvD,EACD;EACEE,QAAQ,EAAE;IACRK,KAAK,EAAE;MACL,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE;IACL,CAAC;IACDJ,MAAM,EAAE;MACN,CAAC,EAAE,EAAE;MACL,CAAC,EAAE;IACL;EACF,CAAC;EACDK,gBAAgB,EAAE,CAChB;IAAED,KAAK,EAAE,CAAC;IAAEJ,MAAM,EAAE,CAAC;IAAEM,SAAS,EAAE;EAAW,CAAC,EAC9C;IAAEF,KAAK,EAAE,CAAC;IAAEJ,MAAM,EAAE,CAAC;IAAEM,SAAS,EAAE;EAAa,CAAC,CACjD;EACDL,eAAe,EAAE;IACfG,KAAK,EAAE,CAAC;IACRJ,MAAM,EAAE;EACV;AACF,CACF,CAAC","ignoreList":[]}

package/lib/module/components/index.js

@@ -36,6 +36,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';

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

@@ -1 +1 @@
-{"version":3,"names":["ColorSwatch","HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,SAASA,WAAW,QAA6D,eAAe;AAChG,cAAc,qBAAqB;AACnC,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,gBAAgB;AAC9B,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,oBAAoB;AAClC,cAAc,SAAS;AACvB,cAAc,uBAAuB;AACrC,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,QAAQ;AACtB,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,YAAY;AAC1B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,mBAAmB;AAMjC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,SAASC,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,qBAAqB","ignoreList":[]}
+{"version":3,"names":["ColorSwatch","HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,SAASA,WAAW,QAA6D,eAAe;AAChG,cAAc,qBAAqB;AACnC,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,gBAAgB;AAC9B,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,oBAAoB;AAClC,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,uBAAuB;AACrC,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,QAAQ;AACtB,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,YAAY;AAC1B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,mBAAmB;AAMjC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,SAASC,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,qBAAqB","ignoreList":[]}

package/lib/module/figma/Insight.figma.js

@@ -0,0 +1,67 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=13158-18419
+// source=packages/components/src/components/Insight/index.tsx
+// component=Insight
+import figma from 'figma';
+const instance = figma.selectedInstance;
+
+// Figma `severity` is `color` in code: Insight drives no ARIA semantics or status icon (DEVEX-6446).
+const color = instance.getEnum('severity', {
+  info: undefined,
+  warning: 'warning',
+  danger: 'danger'
+});
+const colorProp = figma.helpers.react.renderProp('color', color);
+
+// Figma `size` switches slot structure, not size; code names it `layout`.
+const layout = instance.getEnum('size', {
+  default: undefined,
+  expanded: 'detail'
+});
+const isDetail = layout === 'detail';
+
+// Figma `intelligence` is `aiGenerated` in code. VARIANT with "true"/"false" strings.
+const aiGenerated = instance.getEnum('intelligence', {
+  true: true,
+  false: undefined
+});
+const aiGeneratedProp = figma.helpers.react.renderProp('aiGenerated', aiGenerated);
+const showCloseButton = instance.getBoolean('showCloseButton');
+const onCloseProp = showCloseButton ? figma.helpers.react.renderProp('onClose', figma.helpers.react.function('() => {}')) : '';
+const showContent = isDetail && instance.getBoolean('showContent');
+const showActions = isDetail && instance.getBoolean('showActions');
+
+// Text layers are read by position inside the named slot frames, not by layer name.
+const textsIn = slot => instance.findLayers(node => node.type === 'TEXT', {
+  path: [slot],
+  traverseInstances: true
+}).flatMap(node => node.type === 'TEXT' ? [node.textContent] : []);
+const tagText = isDetail ? textsIn('Insight.Indicator')[0] ?? 'Category' : '';
+const headerTexts = isDetail ? textsIn('Insight.Header') : [];
+const title = headerTexts[0] ?? 'Title';
+const detailDescription = headerTexts[1] ?? 'Description';
+const summaryDescription = isDetail ? '' : textsIn('Insight.Summary')[0] ?? 'Description';
+const actionSnippets = showActions ? instance.findConnectedInstances(node => node.codeConnectId() === 'button', {
+  path: ['Insight.Footer']
+}).flatMap(button => button.type === 'INSTANCE' ? button.executeTemplate().example : []) : [];
+export default {
+  id: 'insight',
+  imports: ["import { Insight } from '@cdx-ui/components'"],
+  example: isDetail ? figma.code`
+<Insight layout="detail"${colorProp}${aiGeneratedProp}${onCloseProp}>
+  <Insight.Tag>${tagText}</Insight.Tag>
+  <Insight.Header>
+    <Insight.Title>${title}</Insight.Title>
+    <Insight.Description>${detailDescription}</Insight.Description>
+  </Insight.Header>
+  ${showContent ? figma.code`<Insight.Content>{/* content */}</Insight.Content>` : null}
+  ${showActions ? figma.code`<Insight.Footer>
+    ${actionSnippets}
+  </Insight.Footer>` : null}
+</Insight>` : figma.code`
+<Insight${colorProp}${aiGeneratedProp}${onCloseProp}>
+  <Insight.Description>${summaryDescription}</Insight.Description>
+</Insight>`
+};
+//# sourceMappingURL=Insight.figma.js.map

package/lib/module/figma/Insight.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","color","getEnum","info","undefined","warning","danger","colorProp","helpers","react","renderProp","layout","default","expanded","isDetail","aiGenerated","true","false","aiGeneratedProp","showCloseButton","getBoolean","onCloseProp","function","showContent","showActions","textsIn","slot","findLayers","node","type","path","traverseInstances","flatMap","textContent","tagText","headerTexts","title","detailDescription","summaryDescription","actionSnippets","findConnectedInstances","codeConnectId","button","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Insight.figma.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/figma/InsightStack.figma.js

@@ -0,0 +1,33 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=13652-32306
+// source=packages/components/src/components/InsightStack/index.tsx
+// component=InsightStack
+import figma from 'figma';
+const instance = figma.selectedInstance;
+
+// Figma's `3+` bucket becomes the smallest count that draws both layers; code takes a number.
+const count = instance.getEnum('count', {
+  '1': 1,
+  '2': 2,
+  '3+': 3
+});
+const countProp = figma.helpers.react.renderProp('count', count);
+
+// Found by Code Connect id, so the front card's layer name does not matter.
+const frontInsight = instance.findConnectedInstance('insight', {
+  traverseInstances: true
+});
+const frontSnippet = frontInsight?.type === 'INSTANCE' ? frontInsight.executeTemplate().example : figma.code`<Insight layout="summary">
+    <Insight.Description>Description</Insight.Description>
+  </Insight>`;
+export default {
+  id: 'insight-stack',
+  // Separate strings so the nested Insight template's identical import is deduped.
+  imports: ["import { InsightStack } from '@cdx-ui/components'", "import { Insight } from '@cdx-ui/components'"],
+  example: figma.code`
+<InsightStack${countProp}>
+  ${frontSnippet}
+</InsightStack>`
+};
+//# sourceMappingURL=InsightStack.figma.js.map

package/lib/module/figma/InsightStack.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","count","getEnum","countProp","helpers","react","renderProp","frontInsight","findConnectedInstance","traverseInstances","frontSnippet","type","executeTemplate","example","code","id","imports"],"sourceRoot":"../../../src","sources":["figma/InsightStack.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,KAAK,GAAGF,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtC,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,IAAI,EAAE;AACR,CAAC,CAAC;AACF,MAAMC,SAAS,GAAGL,KAAK,CAACM,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,OAAO,EAAEL,KAAK,CAAC;;AAEhE;AACA,MAAMM,YAAY,GAAGR,QAAQ,CAACS,qBAAqB,CAAC,SAAS,EAAE;EAAEC,iBAAiB,EAAE;AAAK,CAAC,CAAC;AAC3F,MAAMC,YAAY,GAChBH,YAAY,EAAEI,IAAI,KAAK,UAAU,GAC7BJ,YAAY,CAACK,eAAe,CAAC,CAAC,CAACC,OAAO,GACtCf,KAAK,CAACgB,IAAI;AAChB;AACA,aAAa;AAEb,eAAe;EACbC,EAAE,EAAE,eAAe;EACnB;EACAC,OAAO,EAAE,CACP,mDAAmD,EACnD,8CAA8C,CAC/C;EACDH,OAAO,EAAEf,KAAK,CAACgB,IAAI;AACrB,eAAeX,SAAS;AACxB,IAAIO,YAAY;AAChB;AACA,CAAC","ignoreList":[]}

package/lib/typescript/components/Insight/index.d.ts

@@ -0,0 +1,87 @@
+import { type ReactNode } from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { type IInsightDetailProps, type IInsightSummaryProps } from '@cdx-ui/primitives';
+interface InsightStyleProps {
+    /**
+     * Tints the border, the summary medallion, and the detail tag. Visual only: any meaning it
+     * carries must also be in the text.
+     * @default 'info'
+     */
+    color?: 'info' | 'warning' | 'danger';
+    /**
+     * Swaps the `color` border for the AI gradient border.
+     * @default false
+     */
+    aiGenerated?: boolean;
+    /** Renders a dismiss button at the top-end corner. In `summary`, it sits beside the press region, not inside it. */
+    onClose?: () => void;
+    /**
+     * Accessible name for the dismiss button.
+     * @default 'Dismiss insight'
+     */
+    closeAccessibilityLabel?: string;
+}
+/**
+ * `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.
+ */
+export type InsightProps = (Omit<IInsightSummaryProps, 'accessory' | 'pressableClassName'> & InsightStyleProps) | (Omit<IInsightDetailProps, 'accessory' | 'pressableClassName'> & InsightStyleProps);
+declare const InsightRootStyled: import("react").ForwardRefExoticComponent<InsightProps & import("react").RefAttributes<View>>;
+export interface InsightTagProps extends ViewProps {
+    /** Merges the label props onto a single text child instead of rendering `Text`. */
+    asChild?: boolean;
+    /** Classes for the positioned tag wrapper. */
+    className?: string;
+    /** The insight's category, read before the title. */
+    children?: ReactNode;
+}
+/**
+ * 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.
+ */
+declare const InsightTag: import("react").ForwardRefExoticComponent<InsightTagProps & import("react").RefAttributes<View>>;
+export interface InsightHeaderProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const InsightHeader: import("react").ForwardRefExoticComponent<InsightHeaderProps & import("react").RefAttributes<View>>;
+export interface InsightTitleProps extends TextProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const InsightTitle: import("react").ForwardRefExoticComponent<InsightTitleProps & import("react").RefAttributes<Text>>;
+export interface InsightDescriptionProps extends TextProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const InsightDescription: import("react").ForwardRefExoticComponent<InsightDescriptionProps & import("react").RefAttributes<Text>>;
+export interface InsightContentProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const InsightContent: import("react").ForwardRefExoticComponent<InsightContentProps & import("react").RefAttributes<View>>;
+export interface InsightFooterProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const InsightFooter: import("react").ForwardRefExoticComponent<InsightFooterProps & import("react").RefAttributes<View>>;
+type InsightCompoundComponent = typeof InsightRootStyled & {
+    Tag: typeof InsightTag;
+    Header: typeof InsightHeader;
+    Title: typeof InsightTitle;
+    Description: typeof InsightDescription;
+    Content: typeof InsightContent;
+    Footer: typeof InsightFooter;
+};
+export declare const Insight: InsightCompoundComponent;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Insight/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Insight/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EAAY,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpF,OAAO,EAML,KAAK,mBAAmB,EAExB,KAAK,oBAAoB,EAC1B,MAAM,oBAAoB,CAAC;AAwD5B,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oHAAoH;IACpH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GACpB,CAAC,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,oBAAoB,CAAC,GAAG,iBAAiB,CAAC,GACpF,CAAC,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,oBAAoB,CAAC,GAAG,iBAAiB,CAAC,CAAC;AAkDxF,QAAA,MAAM,iBAAiB,+FAgIrB,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4BD;;;GAGG;AACH,QAAA,MAAM,UAAU,kGAWd,CAAC;AAQH,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAgBlB,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,oGAkBjB,CAAC;AAQF,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,0GAgBvB,CAAC;AAQF,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,sGAgBnB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAgBlB,CAAC;AAQF,KAAK,wBAAwB,GAAG,OAAO,iBAAiB,GAAG;IACzD,GAAG,EAAE,OAAO,UAAU,CAAC;IACvB,MAAM,EAAE,OAAO,aAAa,CAAC;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,WAAW,EAAE,OAAO,kBAAkB,CAAC;IACvC,OAAO,EAAE,OAAO,cAAc,CAAC;IAC/B,MAAM,EAAE,OAAO,aAAa,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,OAAO,EAOd,wBAAwB,CAAC"}

package/lib/typescript/components/Insight/insetRadius.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare function cssLengthToPx(value: string | number | undefined): number | undefined;
+/** The radius of a surface inset `inset` px inside a frame with radius `outer`, or `undefined` when `outer` is not a length. */
+export declare function insetRadius(outer: string | number | undefined, inset: number): number | undefined;
+//# sourceMappingURL=insetRadius.d.ts.map

package/lib/typescript/components/Insight/insetRadius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insetRadius.d.ts","sourceRoot":"","sources":["../../../../src/components/Insight/insetRadius.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAepF;AAED,gIAAgI;AAChI,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAGjG"}

package/lib/typescript/components/Insight/styles.d.ts

@@ -0,0 +1,33 @@
+import { type VariantProps } from '@cdx-ui/utils';
+/** Ring width in px; must match the frame's `p-0.5`. */
+export declare const FRAME_WIDTH = 2;
+export declare const insightFrameVariants: (props?: ({
+    layout?: "summary" | "detail" | null | undefined;
+    color?: "danger" | "warning" | "info" | null | undefined;
+    aiGenerated?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const insightSurfaceVariants: (props?: ({
+    layout?: "summary" | "detail" | null | undefined;
+    split?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const insightPressRegionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const insightIconVariants: (props?: ({
+    color?: "danger" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const insightSummaryTextVariants: (props?: ({
+    hasClose?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const insightTagVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const insightTagIconVariants: (props?: ({
+    color?: "danger" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const insightCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const insightHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const insightTitleVariants: (props?: ({
+    hasClose?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const insightDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const insightContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const insightFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type InsightFrameVariantProps = VariantProps<typeof insightFrameVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Insight/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Insight/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,wDAAwD;AACxD,eAAO,MAAM,WAAW,IAAI,CAAC;AAwB7B,eAAO,MAAM,oBAAoB;;;;8EAmDhC,CAAC;AAIF,eAAO,MAAM,sBAAsB;;;8EAoBjC,CAAC;AAIH,eAAO,MAAM,0BAA0B,oFAIrC,CAAC;AAKH,eAAO,MAAM,mBAAmB;;8EAW9B,CAAC;AAMH,eAAO,MAAM,0BAA0B;;8EAUrC,CAAC;AAMH,eAAO,MAAM,kBAAkB,oFAA6C,CAAC;AAE7E,eAAO,MAAM,sBAAsB;;8EAWjC,CAAC;AAKH,eAAO,MAAM,oBAAoB,oFAAgC,CAAC;AAIlE,eAAO,MAAM,qBAAqB,oFAA0C,CAAC;AAE7E,eAAO,MAAM,oBAAoB;;8EAU/B,CAAC;AAEH,eAAO,MAAM,0BAA0B,oFAAwC,CAAC;AAEhF,eAAO,MAAM,sBAAsB,oFAAU,CAAC;AAG9C,eAAO,MAAM,qBAAqB,oFAA6D,CAAC;AAEhG,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}