jfs-components 0.0.78 → 0.0.79

package/src/components/ListItem/ListItem.tsx

@@ -21,8 +21,16 @@ type ListItemProps = {
   title?: string;
   supportText?: string;
   showSupportText?: boolean;
+  /** Leading slot (Figma "leading"). Defaults to an `IconCapsule` when omitted. */
   leading?: React.ReactNode;
   supportSlot?: React.ReactNode;
+  /** Trailing slot (Figma "trailing"), e.g. `MoneyValue` or `Button`. Horizontal layout only. */
+  trailing?: React.ReactNode;
+  /**
+   * @deprecated Renamed to `trailing` for a symmetric `leading` / `trailing`
+   * slot API. Still honored for backward compatibility; `trailing` wins when
+   * both are provided. Will be removed in a future major version.
+   */
   endSlot?: React.ReactNode;
   /** Whether to show the NavArrow on the far right (Horizontal layout only). Defaults to true. */
   navArrow?: boolean;
@@ -46,9 +54,10 @@ type ListItemProps = {
 const IS_IOS = Platform.OS === 'ios'
 const PRESS_DELAY = IS_IOS ? 130 : 0
 
-// Forced modes for the endSlot — `Context: 'ListItem'` can never be
-// overridden by external modes. Frozen so identity is stable across renders.
-const END_SLOT_FORCED_MODES = Object.freeze({ Context: 'ListItem' })
+// Forced modes for the leading/trailing slots — `Context: 'ListItem'` can
+// never be overridden by external modes. Frozen so identity is stable across
+// renders. Applied to both slots so they cascade modes identically.
+const SLOT_FORCED_MODES = Object.freeze({ Context: 'ListItem' })
 
 // Pressed visual is applied on the host view through Pressable's style
 // callback, so a scroll-cancelled touch never schedules a React render.
@@ -72,7 +81,7 @@ interface ListItemTokens {
 }
 
 function resolveListItemTokens(modes: Record<string, any>): ListItemTokens {
-  // Modes used to cascade into slot children (leading / supportSlot / endSlot).
+  // Modes used to cascade into slot children (leading / supportSlot / trailing).
   // We do NOT inject an `AppearanceBrand` default here: slot content such as
   // Buttons or Badges carry their own intended appearance, so forcing one onto
   // them would be surprising.
@@ -167,9 +176,11 @@ const verticalSupportTextOverride: TextStyle = { textAlign: 'center' }
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
  * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
+ * dedicated React "slot" prop. The leading and trailing edges share a
+ * symmetric `leading` / `trailing` slot API:
+ *  - Slot "leading" → `leading`
  *  - Slot "support text" → `supportSlot`
- *  - Slot "end" → `endSlot`
+ *  - Slot "trailing" → `trailing`
  *
  * @component
  * @param {Object} props
@@ -177,9 +188,9 @@ const verticalSupportTextOverride: TextStyle = { textAlign: 'center' }
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
+ * @param {React.ReactNode} [props.leading] - Optional leading slot. Defaults to `IconCapsule`.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
- * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
+ * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
@@ -208,6 +219,7 @@ function ListItemImpl({
   showSupportText = true,
   leading,
   supportSlot,
+  trailing,
   endSlot,
   navArrow = true,
   modes = EMPTY_MODES,
@@ -252,7 +264,11 @@ function ListItemImpl({
   // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
   const leadingElement = useMemo(() => {
     const processed = leading
-      ? cloneChildrenWithModes(React.Children.toArray(leading), tokens.resolvedModes)
+      ? cloneChildrenWithModes(
+          React.Children.toArray(leading),
+          tokens.resolvedModes,
+          SLOT_FORCED_MODES
+        )
       : []
     if (processed.length === 0) {
       return <IconCapsule modes={tokens.resolvedModes} accessibilityLabel={undefined} />
@@ -269,15 +285,18 @@ function ListItemImpl({
     return processed.length === 1 ? processed[0] : processed
   }, [supportSlot, tokens.resolvedModes])
 
-  const processedEndSlot = useMemo(() => {
-    if (!endSlot) return null
+  // `trailing` wins; `endSlot` is the deprecated alias kept for back-compat.
+  const trailingContent = trailing ?? endSlot
+
+  const processedTrailing = useMemo(() => {
+    if (!trailingContent) return null
     const processed = cloneChildrenWithModes(
-      React.Children.toArray(endSlot),
+      React.Children.toArray(trailingContent),
       tokens.resolvedModes,
-      END_SLOT_FORCED_MODES
+      SLOT_FORCED_MODES
     )
     return processed.length === 1 ? processed[0] : processed
-  }, [endSlot, tokens.resolvedModes])
+  }, [trailingContent, tokens.resolvedModes])
 
   const renderSupportContent = () => {
     if (processedSupportSlot) return processedSupportSlot
@@ -370,8 +389,8 @@ function ListItemImpl({
           </Text>
           {showSupportText && renderSupportContent()}
         </View>
-        {processedEndSlot ? (
-          <View style={tokens.trailingWrapperStyle}>{processedEndSlot}</View>
+        {processedTrailing ? (
+          <View style={tokens.trailingWrapperStyle}>{processedTrailing}</View>
         ) : null}
         {navArrow && <NavArrow direction="Forward" modes={tokens.resolvedModes} />}
       </View>

package/src/components/PlanComparisonCard/PlanComparisonCard.tsx

@@ -0,0 +1,426 @@
+import React, { useState, useCallback } from 'react';
+import {
+    View,
+    Text,
+    Pressable,
+    Platform,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+    type LayoutChangeEvent,
+} from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Icon from '../../icons/Icon';
+
+/**
+ * A single plan column header (the label column has no header of its own).
+ */
+export type PlanComparisonColumn = {
+    /** Header text for the plan column. */
+    label: string;
+    /**
+     * Render the header in the brand accent colour (gold) — use it to
+     * highlight the recommended / upsell plan.
+     * @default false
+     */
+    brand?: boolean;
+};
+
+/**
+ * Value rendered inside a plan cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React node → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+export type PlanComparisonCellValue =
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+    | React.ReactElement;
+
+export type PlanComparisonRow = {
+    /** Feature label shown in the first (left) column. */
+    label: string;
+    /**
+     * Show an info icon after the label. When `onInfoPress` is provided the
+     * icon becomes tappable; otherwise it is purely decorative.
+     */
+    showInfo?: boolean;
+    /** Handler for the info icon. Implies `showInfo`. */
+    onInfoPress?: () => void;
+    /**
+     * One value per plan column, in the same order as `columns`. See
+     * {@link PlanComparisonCellValue} for how each value is rendered.
+     */
+    values: PlanComparisonCellValue[];
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+
+export type PlanComparisonCardProps = {
+    /**
+     * Plan column headers (excludes the leading label column). The order here
+     * maps 1:1 to each row's `values` array.
+     */
+    columns?: PlanComparisonColumn[];
+    /** Feature rows compared across the plan columns. */
+    rows?: PlanComparisonRow[];
+    /**
+     * Minimum flex-grow on the label column when the table is given extra
+     * horizontal space. Plan columns always size to their content and never
+     * shrink below it.
+     * @default 0
+     */
+    labelColumnFlex?: number;
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Record<string, any>;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+
+const DEFAULT_COLUMNS: PlanComparisonColumn[] = [
+    { label: 'Your plan' },
+    { label: 'JioFinance+', brand: true },
+];
+
+const DEFAULT_ROWS: PlanComparisonRow[] = [
+    { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
+    { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
+    { label: 'Bonus JioGold', showInfo: true, values: [false, '1%'] },
+];
+
+/**
+ * PlanComparisonCard renders a compact comparison table that pits the user's
+ * current plan against one or more alternative plans across a set of feature
+ * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
+ *
+ * The leading column holds feature labels (with an optional info icon); every
+ * other column maps to a plan in `columns`. Each cell value can be plain text,
+ * a "not available" cross (`false`), or any custom React node.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PlanComparisonCard
+ *   columns={[{ label: 'Your plan' }, { label: 'JioFinance+', brand: true }]}
+ *   rows={[
+ *     { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
+ *     { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
+ *   ]}
+ * />
+ * ```
+ */
+/** Keeps every text layer on a single line; columns grow to fit content. */
+const NO_WRAP_TEXT: TextStyle = {
+    flexShrink: 0,
+    ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : {}),
+};
+
+function PlanComparisonCard({
+    columns = DEFAULT_COLUMNS,
+    rows = DEFAULT_ROWS,
+    labelColumnFlex = 0,
+    modes = EMPTY_MODES,
+    style,
+}: PlanComparisonCardProps) {
+    /** Natural widths from header labels (plan columns only). */
+    const [headerWidths, setHeaderWidths] = useState<(number | undefined)[]>([]);
+    /** Natural widths from table body columns. */
+    const [bodyWidths, setBodyWidths] = useState<(number | undefined)[]>([]);
+
+    const setMeasuredWidth = useCallback(
+        (
+            setter: React.Dispatch<React.SetStateAction<(number | undefined)[]>>,
+            index: number,
+            width: number,
+        ) => {
+            setter((prev) => {
+                if (prev[index] === width) return prev;
+                const next = [...prev];
+                next[index] = width;
+                return next;
+            });
+        },
+        [],
+    );
+
+    const onHeaderColumnLayout = useCallback(
+        (index: number, event: LayoutChangeEvent) => {
+            setMeasuredWidth(setHeaderWidths, index, event.nativeEvent.layout.width);
+        },
+        [setMeasuredWidth],
+    );
+
+    const onBodyColumnLayout = useCallback(
+        (index: number, event: LayoutChangeEvent) => {
+            setMeasuredWidth(setBodyWidths, index, event.nativeEvent.layout.width);
+        },
+        [setMeasuredWidth],
+    );
+
+    /**
+     * Shared width for header + body cells in a column (max of natural header
+     * label vs body content). No columnGap between columns — gaps would shift
+     * headers relative to the flush table grid below.
+     */
+    const columnWidthStyle = (index: number): ViewStyle => {
+        const width = Math.max(headerWidths[index] ?? 0, bodyWidths[index] ?? 0);
+        if (width > 0) {
+            return { width, minWidth: width, flexShrink: 0, flexGrow: 0 };
+        }
+        return { flexShrink: 0, flexGrow: 0 };
+    };
+
+    // Container
+    const gap = (getVariableByName('planComparisonCard/gap', modes) as number) ?? 16;
+
+    // Header
+    const headerFg = (getVariableByName('planComparisonCard/header/fg', modes) as string) ?? '#ffffff';
+    const headerBrandFg = (getVariableByName('planComparisonCard/header/brand/fg', modes) as string) ?? '#cea15a';
+    const headerFontSize = (getVariableByName('planComparisonCard/header/fontSize', modes) as number) ?? 14;
+    const headerFontFamily = (getVariableByName('planComparisonCard/header/fontFamily', modes) as string) ?? 'JioType Var';
+    const headerLineHeight = (getVariableByName('planComparisonCard/header/lineHeight', modes) as number) ?? 18;
+    const headerFontWeight = (getVariableByName('planComparisonCard/header/fontWeight', modes) as number | string) ?? '500';
+
+    // Table
+    const tableBackground = (getVariableByName('planComparisonCard/tableRow/background', modes) as string) ?? '#141414';
+    const tableRadius = (getVariableByName('planComparisonCard/tableRow/radius', modes) as number) ?? 16;
+    const tableBorderSize = (getVariableByName('planComparisonCard/tableRow/border/size', modes) as number) ?? 1;
+    const tableBorderColor = (getVariableByName('planComparisonCard/tableRow/border/color', modes) as string) ?? '#1e1a14';
+
+    // Cell
+    const cellPadding = (getVariableByName('planComparisonCard/tableCell/padding', modes) as number) ?? 12;
+    const cellGap = (getVariableByName('planComparisonCard/tableCell/gap', modes) as number) ?? 2;
+    const cellMinHeight = (getVariableByName('planComparisonCard/tableCell/height', modes) as number) ?? 46;
+    const cellBorderSize = (getVariableByName('planComparisonCard/tableCell/border/size', modes) as number) ?? 1;
+    const cellBorderColor = (getVariableByName('planComparisonCard/tableCell/border/color', modes) as string) ?? '#1e1a14';
+
+    // Cell label
+    const labelColor = (getVariableByName('planComparisonCard/tableCell/label/color', modes) as string) ?? '#ffffff';
+    const labelDisabledColor = (getVariableByName('planComparisonCard/tableCell/label/disabled/color', modes) as string) ?? '#91949c';
+    const labelFontSize = (getVariableByName('planComparisonCard/tableCell/label/fontSize', modes) as number) ?? 12;
+    const labelFontFamily = (getVariableByName('planComparisonCard/tableCell/label/fontFamily', modes) as string) ?? 'JioType Var';
+    const labelLineHeight = (getVariableByName('planComparisonCard/tableCell/label/lineHeight', modes) as number) ?? 16;
+    const labelFontWeight = (getVariableByName('planComparisonCard/tableCell/label/fontWeight', modes) as number | string) ?? '400';
+
+    // Cell value
+    const valueColor = (getVariableByName('planComparisonCard/tableCell/value/color', modes) as string) ?? '#ffffff';
+    const valueFontSize = (getVariableByName('planComparisonCard/tableCell/value/fontSize', modes) as number) ?? 12;
+    const valueFontFamily = (getVariableByName('planComparisonCard/tableCell/value/fontFamily', modes) as string) ?? 'JioType Var';
+    const valueLineHeight = (getVariableByName('planComparisonCard/tableCell/value/lineHeight', modes) as number) ?? 16;
+    const valueFontWeight = (getVariableByName('planComparisonCard/tableCell/value/fontWeight', modes) as number | string) ?? '500';
+
+    // Icon
+    const iconColor = (getVariableByName('planComparisonCard/icon/color', modes) as string) ?? '#ffffff';
+    const iconSize = (getVariableByName('planComparisonCard/icon/size', modes) as number) ?? 16;
+
+    const toWeight = (w: number | string) => (typeof w === 'number' ? `${w}` : w) as TextStyle['fontWeight'];
+
+    const headerTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        fontFamily: headerFontFamily,
+        fontSize: headerFontSize,
+        lineHeight: headerLineHeight,
+        fontWeight: toWeight(headerFontWeight),
+        textAlign: 'center',
+    };
+
+    const labelTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        color: labelColor,
+        fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
+        lineHeight: labelLineHeight,
+        fontWeight: toWeight(labelFontWeight),
+    };
+
+    const valueTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        color: valueColor,
+        fontFamily: valueFontFamily,
+        fontSize: valueFontSize,
+        lineHeight: valueLineHeight,
+        fontWeight: toWeight(valueFontWeight),
+        textAlign: 'center',
+    };
+
+    const planHeaderColumnStyle: ViewStyle = {
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+
+    const renderValue = (value: PlanComparisonCellValue, cellKey: React.Key) => {
+        // "Not available" → muted cross icon.
+        if (value === false) {
+            return (
+                <Icon
+                    key={cellKey}
+                    name="ic_close"
+                    size={iconSize}
+                    color={labelDisabledColor}
+                />
+            );
+        }
+        // Empty cell.
+        if (value === null || value === undefined || value === true) {
+            return null;
+        }
+        // Text content.
+        if (typeof value === 'string' || typeof value === 'number') {
+            return (
+                <Text key={cellKey} style={valueTextStyle}>
+                    {value}
+                </Text>
+            );
+        }
+        // Custom node — forward modes so themed children stay in sync.
+        return cloneChildrenWithModes(value, modes);
+    };
+
+    const labelCellStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: cellGap,
+        padding: cellPadding,
+        minHeight: cellMinHeight,
+        flexShrink: 0,
+    };
+
+    const valueCellStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: cellPadding,
+        minHeight: cellMinHeight,
+        flexShrink: 0,
+    };
+
+    return (
+        <View style={[{ gap, alignSelf: 'flex-start' }, style]}>
+            {/* Headers above table — same column grid as body (no columnGap) */}
+            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+                <View
+                    style={[
+                        columnWidthStyle(0),
+                        labelColumnFlex > 0 ? { flexGrow: labelColumnFlex } : undefined,
+                    ]}
+                />
+                {columns.map((column, index) => {
+                    const colIndex = index + 1;
+                    return (
+                        <View
+                            key={column.label ?? index}
+                            onLayout={(e) => onHeaderColumnLayout(colIndex, e)}
+                            style={[columnWidthStyle(colIndex), planHeaderColumnStyle]}
+                        >
+                            <Text
+                                style={[
+                                    headerTextStyle,
+                                    {
+                                        color: column.brand ? headerBrandFg : headerFg,
+                                        alignSelf: 'center',
+                                    },
+                                ]}
+                            >
+                                {column.label}
+                            </Text>
+                        </View>
+                    );
+                })}
+            </View>
+
+            {/* Single rounded table — columns size to their widest cell */}
+            <View
+                style={{
+                    flexDirection: 'row',
+                    alignSelf: 'flex-start',
+                    backgroundColor: tableBackground,
+                    borderWidth: tableBorderSize,
+                    borderColor: tableBorderColor,
+                    borderRadius: tableRadius,
+                    overflow: 'hidden',
+                }}
+            >
+                <View
+                    onLayout={(e) => onBodyColumnLayout(0, e)}
+                    style={[
+                        columnWidthStyle(0),
+                        labelColumnFlex > 0 ? { flexGrow: labelColumnFlex } : undefined,
+                    ]}
+                >
+                    {rows.map((row, rowIndex) => {
+                        const isLast = rowIndex === rows.length - 1;
+                        const showInfo = row.showInfo || row.onInfoPress != null;
+                        return (
+                            <View
+                                key={row.key ?? `${row.label}-${rowIndex}`}
+                                style={[
+                                    labelCellStyle,
+                                    {
+                                        borderBottomWidth: isLast ? 0 : cellBorderSize,
+                                        borderBottomColor: cellBorderColor,
+                                    },
+                                ]}
+                            >
+                                <Text style={labelTextStyle}>{row.label}</Text>
+                                {showInfo &&
+                                    (row.onInfoPress ? (
+                                        <Pressable
+                                            onPress={row.onInfoPress}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`More information about ${row.label}`}
+                                            hitSlop={8}
+                                        >
+                                            <Icon name="ic_info" size={iconSize} color={iconColor} />
+                                        </Pressable>
+                                    ) : (
+                                        <Icon name="ic_info" size={iconSize} color={iconColor} />
+                                    ))}
+                            </View>
+                        );
+                    })}
+                </View>
+
+                {columns.map((column, colIndex) => {
+                    const colIndexWidth = colIndex + 1;
+                    return (
+                    <View
+                        key={column.label ?? colIndex}
+                        onLayout={(e) => onBodyColumnLayout(colIndexWidth, e)}
+                        style={[columnWidthStyle(colIndexWidth), planHeaderColumnStyle]}
+                    >
+                        {rows.map((row, rowIndex) => {
+                            const isLast = rowIndex === rows.length - 1;
+                            return (
+                                <View
+                                    key={row.key ?? `${row.label}-${rowIndex}`}
+                                    style={[
+                                        valueCellStyle,
+                                        {
+                                            borderBottomWidth: isLast ? 0 : cellBorderSize,
+                                            borderBottomColor: cellBorderColor,
+                                        },
+                                    ]}
+                                >
+                                    <View style={{ flexShrink: 0 }}>
+                                        {renderValue(
+                                            row.values?.[colIndex],
+                                            `${rowIndex}-${colIndex}`,
+                                        )}
+                                    </View>
+                                </View>
+                            );
+                        })}
+                    </View>
+                    );
+                })}
+            </View>
+        </View>
+    );
+}
+
+export default PlanComparisonCard;

package/src/components/Slot/Slot.tsx

@@ -0,0 +1,91 @@
+import React, { useMemo } from 'react'
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+
+export type SlotLayoutDirection = 'vertical' | 'horizontal'
+
+export type SlotProps = ViewProps & {
+  /**
+   * Content laid out inside the slot. `modes` are cascaded to every child via
+   * {@link cloneChildrenWithModes}.
+   */
+  children?: React.ReactNode
+  /**
+   * Main-axis direction for slot children. Matches the Figma Slot variant:
+   * - `vertical` (default): stacks children in a column
+   * - `horizontal`: arranges children in a row
+   */
+  layoutDirection?: SlotLayoutDirection
+  /**
+   * Alignment along the cross axis.
+   * Defaults to `stretch` for vertical and `flex-start` for horizontal.
+   */
+  alignCrossAxis?: ViewStyle['alignItems']
+  /**
+   * Distribution along the main axis (maps to `justifyContent`).
+   */
+  justifyMainAxis?: ViewStyle['justifyContent']
+  /**
+   * Mode configuration passed to the token resolver and cascaded to children.
+   */
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Slot — a token-driven layout container for grouped slot content.
+ *
+ * Use `Slot` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Slot layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Slot>
+ * </ActionFooter>
+ * ```
+ */
+function Slot({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: SlotProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+  const { containerStyle, processedChildren } = useMemo(() => {
+    const gap = (getVariableByName('slot/gap', modes) ?? 8) as number
+    const isHorizontal = layoutDirection === 'horizontal'
+
+    const container: ViewStyle = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap,
+    }
+
+    const processed = children ? cloneChildrenWithModes(children, modes) : null
+
+    return { containerStyle: container, processedChildren: processed }
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis])
+
+  return (
+    <View style={[containerStyle, style]} {...rest}>
+      {processedChildren}
+    </View>
+  )
+}
+
+export default React.memo(Slot)

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
+export { default as Attached, type AttachedProps, type AttachedPosition } from './Attached/Attached';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -63,6 +64,7 @@ export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Nump
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
+export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
 export { StepLabel, type StepLabelProps } from './Stepper/StepLabel';
@@ -119,6 +121,7 @@ export { default as AmountInput, type AmountInputProps } from './AmountInput/Amo
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-05-29T10:37:24.494Z
+ * Generated: 2026-05-29T17:01:15.629Z
  */
 
 // Icon name to SVG data mapping