@newtonedev/components 0.1.13 → 0.1.15

package/src/composites/actions/Button/Button.styles.ts

@@ -1,8 +1,18 @@
 import type { UseTokensResult } from 'newtone-api';
-import type { PaletteTokens } from 'newtone-api';
-import type { ButtonVariant, ButtonSemantic, ButtonSize } from './Button.types';
+import type { ThemeName } from 'newtone-api';
+import type { ButtonVariant, ButtonSize } from './Button.types';
 import type { TextSize } from '../../../primitives/Text/Text.types';
 
+/**
+ * Fixed heights per size (px)
+ */
+export const BUTTON_HEIGHTS: Record<ButtonSize, number> = {
+  sm: 40,
+  md: 48,
+  lg: 56,
+  xl: 64,
+};
+
 /**
  * Configuration returned by getButtonConfig
  */
@@ -17,6 +27,7 @@ export interface ButtonConfig {
     borderColor?: string;
   };
   sizeTokens: {
+    height: number;
     padding: number;
     gap: number;
     borderRadius: number;
@@ -31,8 +42,6 @@ export interface ButtonConfig {
 export interface ButtonPadding {
   paddingLeft: number;
   paddingRight: number;
-  paddingTop: number;
-  paddingBottom: number;
 }
 
 /**
@@ -40,12 +49,6 @@ export interface ButtonPadding {
  *
  * Text appears visually closer to borders than icons, so we add 8px extra
  * horizontal padding on the text side for optical balance.
- *
- * @param size - Button size (determines base padding)
- * @param hasIcon - Whether button has an icon
- * @param hasText - Whether button has text
- * @param iconPosition - Icon position relative to text
- * @returns Padding object with all four sides
  */
 export function computeButtonPadding(
   size: ButtonSize,
@@ -53,111 +56,59 @@ export function computeButtonPadding(
   hasText: boolean,
   iconPosition: 'left' | 'right'
 ): ButtonPadding {
-  // Size-specific base padding
   const basePadding: Record<ButtonSize, number> = {
-    sm: 8,
-    md: 12,
-    lg: 16,
+    sm: 12,
+    md: 16,
+    lg: 20,
+    xl: 24,
   };
 
   const base = basePadding[size];
-  const textExtra = 8; // Optical correction for text vs icon
+  const textExtra = 8;
 
-  // Icon-only: square button
+  // Icon-only: symmetric
   if (!hasText && hasIcon) {
-    return {
-      paddingLeft: base,
-      paddingRight: base,
-      paddingTop: base,
-      paddingBottom: base,
-    };
+    return { paddingLeft: base, paddingRight: base };
   }
 
   // Text-only: extra padding on both sides
   if (hasText && !hasIcon) {
-    return {
-      paddingLeft: base + textExtra,
-      paddingRight: base + textExtra,
-      paddingTop: base,
-      paddingBottom: base,
-    };
+    return { paddingLeft: base + textExtra, paddingRight: base + textExtra };
   }
 
   // Icon + text: extra padding on text side only
   if (hasText && hasIcon) {
     if (iconPosition === 'left') {
-      return {
-        paddingLeft: base,
-        paddingRight: base + textExtra,
-        paddingTop: base,
-        paddingBottom: base,
-      };
+      return { paddingLeft: base, paddingRight: base + textExtra };
     } else {
-      return {
-        paddingLeft: base + textExtra,
-        paddingRight: base,
-        paddingTop: base,
-        paddingBottom: base,
-      };
+      return { paddingLeft: base + textExtra, paddingRight: base };
     }
   }
 
-  // Fallback: symmetric base padding
-  return {
-    paddingLeft: base,
-    paddingRight: base,
-    paddingTop: base,
-    paddingBottom: base,
-  };
-}
-
-/**
- * Resolve the PaletteTokens for a given semantic.
- * Returns undefined for 'neutral' (handled separately).
- */
-function getPaletteTokens(semantic: ButtonSemantic, tokens: UseTokensResult): PaletteTokens | undefined {
-  switch (semantic) {
-    case 'accent': return tokens.accent;
-    case 'success': return tokens.success;
-    case 'error': return tokens.error;
-    case 'warning': return tokens.warning;
-    default: return undefined;
-  }
+  return { paddingLeft: base, paddingRight: base };
 }
 
 /**
- * Compute button configuration based on variant, semantic, size, and state.
- *
- * This function ONLY computes variant colors + size tokens.
- * Layout concerns (flexbox, spacing, alignment) are handled by Wrapper primitive.
- * Typography concerns (font, size, weight) are handled by Text primitive.
- *
- * Elevation-aware: neutral primary uses backgroundInteractive for consistent contrast.
- * Semantic variants use proper PaletteTokens — no opacity hacks.
+ * Compute button configuration based on variant, size, and state.
  *
- * @param variant - Button type (primary, secondary, tertiary)
- * @param semantic - Button semantic meaning (neutral, accent, success, error, warning)
- * @param size - Button size (sm, md, lg)
- * @param disabled - Whether button is disabled
- * @param tokens - Resolved tokens for current elevation
- * @returns ButtonConfig with variantColors and sizeTokens
+ * Colors are derived from the inherited theme (via FrameContext) rather than
+ * hardcoded to the primary palette. The `theme` parameter comes from the
+ * nearest Frame's `theme` prop, defaulting to 'primary'.
  */
 export function getButtonConfig(
   variant: ButtonVariant,
-  semantic: ButtonSemantic,
   size: ButtonSize,
   disabled: boolean,
-  tokens: UseTokensResult
+  tokens: UseTokensResult,
+  theme: ThemeName,
 ): ButtonConfig {
-  // Get size configuration
   const sizeConfig = getSizeConfig(size, tokens);
-
-  // Get variant-specific colors
-  const variantColors = getVariantColors(variant, semantic, disabled, tokens);
+  const variantColors = getVariantColors(variant, disabled, tokens, theme);
 
   return {
     variantColors,
     sizeTokens: {
+      height: sizeConfig.height,
       padding: sizeConfig.padding,
       gap: sizeConfig.gap,
       borderRadius: sizeConfig.borderRadius,
@@ -168,11 +119,12 @@ export function getButtonConfig(
 }
 
 /**
- * Get size configuration with unified icon/text sizes across all sizes.
+ * Get size configuration. Heights are fixed per size.
  * Only padding and radius scale with size.
  */
 function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
   const configs: Record<ButtonSize, {
+    height: number;
     padding: number;
     gap: number;
     borderRadius: number;
@@ -180,24 +132,35 @@ function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
     iconSize: number;
   }> = {
     sm: {
-      padding: 8,
+      height: BUTTON_HEIGHTS.sm,
+      padding: 12,
       gap: tokens.spacing['08'],
       borderRadius: 8,
-      textSize: 'md', // 16px
-      iconSize: 24,
+      textSize: 'md',
+      iconSize: 20,
     },
     md: {
-      padding: 12,
+      height: BUTTON_HEIGHTS.md,
+      padding: 16,
       gap: tokens.spacing['08'],
       borderRadius: 12,
-      textSize: 'md', // 16px
+      textSize: 'md',
       iconSize: 24,
     },
     lg: {
-      padding: 16,
+      height: BUTTON_HEIGHTS.lg,
+      padding: 20,
+      gap: tokens.spacing['08'],
+      borderRadius: 14,
+      textSize: 'md',
+      iconSize: 24,
+    },
+    xl: {
+      height: BUTTON_HEIGHTS.xl,
+      padding: 24,
       gap: tokens.spacing['08'],
       borderRadius: 16,
-      textSize: 'md', // 16px
+      textSize: 'lg',
       iconSize: 24,
     },
   };
@@ -206,134 +169,79 @@ function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
 }
 
 /**
- * Get variant-specific colors from theme tokens.
+ * Get variant-specific colors from the inherited theme's tokens.
  * Handles disabled state override for all variants.
  */
 function getVariantColors(
   variant: ButtonVariant,
-  semantic: ButtonSemantic,
   disabled: boolean,
-  tokens: UseTokensResult
+  tokens: UseTokensResult,
+  theme: ThemeName,
 ) {
-  // Disabled state overrides for all variants
+  const t = tokens.colors[theme];
+
   if (disabled) {
-    const baseColors = getVariantColorsForState(variant, semantic, tokens);
-    const { gamut } = tokens;
-    const disabledBg = tokens.backgroundSunken[gamut];
+    const baseColors = getVariantColorsForState(variant, tokens, theme);
     return {
       ...baseColors,
-      bg: disabledBg,
-      hoveredBg: disabledBg,
-      pressedBg: disabledBg,
-      textColor: tokens.textSecondary[gamut],
-      iconColor: tokens.textSecondary[gamut],
+      bg: 'transparent',
+      hoveredBg: 'transparent',
+      pressedBg: 'transparent',
+      textColor: t.main.fontDisabled,
+      iconColor: t.main.fontDisabled,
+      borderWidth: 1,
+      borderColor: t.main.divider,
     };
   }
 
-  return getVariantColorsForState(variant, semantic, tokens);
+  return getVariantColorsForState(variant, tokens, theme);
 }
 
 /**
  * Get variant colors for non-disabled state.
- * Implements 3 types × 5 semantics = 15 combinations.
- * Uses proper PaletteTokens for all semantic variants — no opacity hacks.
+ * Uses the inherited theme's tokens — no semantic prop needed.
  */
 function getVariantColorsForState(
   variant: ButtonVariant,
-  semantic: ButtonSemantic,
-  tokens: UseTokensResult
+  tokens: UseTokensResult,
+  theme: ThemeName,
 ) {
-  const { gamut } = tokens;
-  const paletteTokens = getPaletteTokens(semantic, tokens);
+  const t = tokens.colors[theme];
 
-  // PRIMARY VARIANT: Filled background
+  // PRIMARY: Filled background using emphasis appearance
   if (variant === 'primary') {
-    if (semantic === 'neutral') {
-      // Neutral primary - uses backgroundInteractive tokens for consistent contrast across elevations
-      return {
-        bg: tokens.backgroundInteractive[gamut],
-        hoveredBg: tokens.backgroundInteractiveHover[gamut],
-        pressedBg: tokens.backgroundInteractiveActive[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
-        borderWidth: 1,
-        borderColor: 'transparent',
-      };
-    }
-
-    // Semantic primary (accent, success, error, warning) — uses palette fill tokens
     return {
-      bg: paletteTokens!.fill[gamut],
-      hoveredBg: paletteTokens!.fillHover[gamut],
-      pressedBg: paletteTokens!.fillActive[gamut],
-      textColor: paletteTokens!.onFill[gamut],
-      iconColor: paletteTokens!.onFill[gamut],
-      borderWidth: 1,
+      bg: t.emphasis.actionEnabled,
+      hoveredBg: t.emphasis.actionHovered,
+      pressedBg: t.emphasis.actionPressed,
+      textColor: t.emphasis.accentSmall,
+      iconColor: t.emphasis.accentSmall,
+      borderWidth: 0,
       borderColor: 'transparent',
     };
   }
 
-  // SECONDARY VARIANT: Outlined (border + subtle background for non-neutral)
+  // SECONDARY: Outlined with subtle hover
   if (variant === 'secondary') {
-    if (semantic === 'neutral') {
-      // Shifted action scale: transparent → 01 (hover) → 02 (pressed)
-      return {
-        bg: 'transparent',
-        hoveredBg: tokens.backgroundInteractive[gamut],
-        pressedBg: tokens.backgroundInteractiveHover[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
-        borderWidth: 1,
-        borderColor: tokens.border[gamut],
-      };
-    }
-
-    // Semantic secondary — uses palette surface tokens for subtle bg
     return {
-      bg: paletteTokens!.background[gamut],
-      hoveredBg: paletteTokens!.backgroundInteractive[gamut],
-      pressedBg: paletteTokens!.backgroundInteractiveHover[gamut],
-      textColor: paletteTokens!.fill[gamut],
-      iconColor: paletteTokens!.fill[gamut],
-      borderWidth: 1,
-      borderColor: 'transparent',
-    };
-  }
-
-  // TERTIARY VARIANT: Ghost (text-only, no visible border)
-  if (variant === 'tertiary') {
-    if (semantic === 'neutral') {
-      // Shifted action scale: transparent → 01 (hover) → 02 (pressed)
-      return {
-        bg: 'transparent',
-        hoveredBg: tokens.backgroundInteractive[gamut],
-        pressedBg: tokens.backgroundInteractiveHover[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
-        borderWidth: 1,
-        borderColor: 'transparent',
-      };
-    }
-
-    // Semantic tertiary — uses palette surface tokens for hover/pressed
-    return {
-      bg: 'transparent',
-      hoveredBg: paletteTokens!.background[gamut],
-      pressedBg: paletteTokens!.backgroundInteractive[gamut],
-      textColor: paletteTokens!.fill[gamut],
-      iconColor: paletteTokens!.fill[gamut],
-      borderWidth: 1,
+      bg: t.main.actionEnabled,
+      hoveredBg: t.main.actionHovered,
+      pressedBg: t.main.actionPressed,
+      textColor: t.main.fontPrimary,
+      iconColor: t.main.fontPrimary,
+      borderWidth: 0,
       borderColor: 'transparent',
     };
   }
 
-  // Fallback (should never reach here with proper types)
+  // GHOST: No border, transparent background, subtle hover
   return {
     bg: 'transparent',
-    hoveredBg: 'transparent',
-    pressedBg: 'transparent',
-    textColor: tokens.textPrimary[gamut],
-    iconColor: tokens.textPrimary[gamut],
+    hoveredBg: t.main.actionEnabled,
+    pressedBg: t.main.actionHovered,
+    textColor: t.main.fontSecondary,
+    iconColor: t.main.fontSecondary,
     borderWidth: 0,
+    borderColor: 'transparent',
   };
 }

package/src/composites/actions/Button/Button.tsx

@@ -3,41 +3,39 @@ import { Pressable } from 'react-native';
 import type { ButtonProps } from './Button.types';
 import { getButtonConfig, computeButtonPadding } from './Button.styles';
 import { useTokens } from 'newtone-api';
+import { useFrameContext } from 'newtone-api';
 import { Icon } from '../../../primitives/Icon/Icon';
 import { Text } from '../../../primitives/Text';
 import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
 
 /**
- * Button — A composite component demonstrating the primitive composition pattern.
+ * Button — A composite component that inherits its color theme from the
+ * nearest parent Frame's `theme` prop (defaults to 'primary').
  *
- * **Composition Architecture:**
- * - Pressable (RN primitive) — handles interaction
- * - Wrapper (primitive) — handles layout (direction, gap, padding, alignment)
- * - Icon (primitive) — handles icon rendering with theme tokens
- * - Text (primitive) — handles typography with theme tokens
+ * **Variants:**
+ * - `primary` — Filled background (highest visual weight)
+ * - `secondary` — Outlined with subtle hover
+ * - `ghost` — No border, transparent, subtle hover
  *
- * This component does NOT manually compute flexbox, spacing, or typography styles.
- * Instead, it delegates to primitives which already handle these concerns.
- *
- * Automatically adapts to the current theme and mode from NewtoneProvider.
+ * **Sizes (fixed heights):**
+ * - `sm` — 40px
+ * - `md` — 48px
+ * - `lg` — 56px
+ * - `xl` — 64px
  *
  * @example
  * ```tsx
- * <Button variant="primary" semantic="accent" size="md" onPress={() => console.log('Pressed')}>
+ * <Button variant="primary" size="md" onPress={() => console.log('Pressed')}>
  *   Click me
  * </Button>
  * ```
  *
  * @example
  * ```tsx
- * <Button icon="add" variant="primary" semantic="accent" onPress={handleAdd}>
- *   New Item
- * </Button>
- * ```
- *
- * @example
- * ```tsx
- * <Button icon="delete" variant="tertiary" semantic="neutral" size="sm" onPress={handleDelete} />
+ * // Inherits theme from parent Frame
+ * <Frame theme="error">
+ *   <Button variant="primary">Delete</Button>
+ * </Frame>
  * ```
  */
 export function Button({
@@ -45,33 +43,37 @@ export function Button({
   icon,
   iconPosition = 'left',
   variant = 'primary',
-  semantic = 'neutral',
   size = 'md',
   disabled = false,
+  loading = false,
+  fullWidth = false,
   style,
   textStyle,
   ...pressableProps
 }: ButtonProps) {
-  // Read tokens from current elevation context
-  // backgroundInteractive provides consistent contrast across all elevations
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
+
+  // Inherit theme from nearest Frame, default to 'primary'
+  const theme = frameCtx?.theme ?? 'primary';
+
+  const isDisabled = disabled || loading;
 
-  // Get color tokens + size config (now using backgroundInteractive for consistent contrast)
   const { variantColors, sizeTokens } = React.useMemo(
-    () => getButtonConfig(variant, semantic, size, disabled, tokens),
-    [variant, semantic, size, disabled, tokens]
+    () => getButtonConfig(variant, size, isDisabled, tokens, theme),
+    [variant, size, isDisabled, tokens, theme]
   );
 
   // Compute asymmetric padding (+8px on text side for optical balance)
+  // Ghost variant with no icon uses standard padding
   const padding = React.useMemo(
     () => computeButtonPadding(size, !!icon, !!children, iconPosition),
     [size, icon, children, iconPosition]
   );
 
   return (
-    <Pressable disabled={disabled} {...pressableProps}>
+    <Pressable disabled={isDisabled} {...pressableProps}>
       {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => (
-        // Wrapper handles layout: direction, gap, alignment (padding via style)
         <Wrapper
           direction="horizontal"
           align="center"
@@ -79,16 +81,19 @@ export function Button({
           gap={sizeTokens.gap}
           style={[
             {
-              ...padding, // Asymmetric horizontal padding for text optical balance
-              backgroundColor: pressed && !disabled
+              height: sizeTokens.height,
+              paddingLeft: padding.paddingLeft,
+              paddingRight: padding.paddingRight,
+              backgroundColor: pressed && !isDisabled
                 ? variantColors.pressedBg
-                : hovered && !disabled
+                : hovered && !isDisabled
                   ? variantColors.hoveredBg
                   : variantColors.bg,
               borderRadius: sizeTokens.borderRadius,
-              borderWidth: variantColors.borderWidth, // Always 1 for consistent sizing
+              borderWidth: variantColors.borderWidth,
               borderColor: variantColors.borderColor || 'transparent',
-              opacity: disabled ? 0.4 : 1,
+              opacity: isDisabled ? (loading ? 0.6 : 0.4) : 1,
+              ...(fullWidth && { width: '100%' as any, alignSelf: 'stretch' as any }),
             },
             ...(Array.isArray(style) ? style : style ? [style] : []),
           ]}
@@ -97,7 +102,6 @@ export function Button({
             <Icon name={icon} size={sizeTokens.iconSize} color={variantColors.iconColor} />
           )}
           {children && (
-            // Text primitive with semantic props + color style override
             <Text
               role="label"
               size={sizeTokens.textSize}

package/src/composites/actions/Button/Button.types.ts

@@ -1,19 +1,14 @@
 import type { PressableProps, ViewStyle, TextStyle } from 'react-native';
 
 /**
- * Visual type for the Button component (describes visual weight)
+ * Visual variant for the Button component (describes visual weight)
  */
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-
-/**
- * Semantic meaning for the Button component (describes color purpose)
- */
-export type ButtonSemantic = 'neutral' | 'accent' | 'success' | 'error' | 'warning';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
 
 /**
  * Size presets for the Button component
  */
-export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 
 /**
  * Icon position relative to button text
@@ -43,17 +38,11 @@ export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'>
   readonly iconPosition?: ButtonIconPosition;
 
   /**
-   * Visual type (describes visual weight: filled, outlined, ghost)
+   * Visual variant (describes visual weight: filled, outlined, ghost)
    * @default 'primary'
    */
   readonly variant?: ButtonVariant;
 
-  /**
-   * Semantic meaning (describes color purpose: neutral, accent, success, error, warning)
-   * @default 'neutral'
-   */
-  readonly semantic?: ButtonSemantic;
-
   /**
    * Size preset
    * @default 'md'
@@ -66,6 +55,18 @@ export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'>
    */
   readonly disabled?: boolean;
 
+  /**
+   * Loading state — disables interaction and dims content.
+   * @default false
+   */
+  readonly loading?: boolean;
+
+  /**
+   * Full-width mode — stretches button to fill container width.
+   * @default false
+   */
+  readonly fullWidth?: boolean;
+
   /**
    * Custom style overrides for container
    */

package/src/composites/actions/Button/index.ts

@@ -1,2 +1,2 @@
 export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonIconPosition } from './Button.types';

package/src/composites/branding/LogoMonogram/LogoMonogram.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { LogoMonogramProps } from './LogoMonogram.types';
+
+/**
+ * Newtone monogram — the "N" symbol mark rendered as an SVG.
+ *
+ * The fill color is derived from `colorValue` (0 = black, 255 = white),
+ * allowing smooth animated transitions between light and dark contexts.
+ */
+export function LogoMonogram({ colorValue = 0, size = 32 }: LogoMonogramProps) {
+  // Convert the 0–255 grayscale value to an rgb() string.
+  const fg = `rgb(${colorValue}, ${colorValue}, ${colorValue})`;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 168 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M39.3574 70H12L20 84H36L30.2681 94.0309C28.8627 96.4903 28.8627 99.5096 30.2681 101.969L36 112L49.7319 87.9691C51.1373 85.5097 51.1373 82.4903 49.7319 80.0309L46.3034 74.0309C44.879 71.5383 42.2283 70 39.3574 70Z" fill={fg} />
+      <path d="M84 112H36L41.6966 121.969C43.121 124.462 45.7717 126 48.6426 126H79.3574C82.2283 126 84.879 124.462 86.3034 121.969L93.7319 108.969C95.1373 106.51 95.1373 103.49 93.7319 101.031L84 84L76 98L84 112Z" fill={fg} />
+      <path d="M76 70L84 84H64.6426C61.7717 84 59.121 82.4617 57.6966 79.9691L50.268 66.9691C48.8626 64.5097 48.8626 61.4903 50.268 59.0309L65.6966 32.0309C67.121 29.5383 69.7717 28 72.6426 28H84L60 70H76Z" fill={fg} />
+      <path d="M95.3574 28H84L132 112L137.732 101.969C139.137 99.5097 139.137 96.4903 137.732 94.0309L102.303 32.0309C100.879 29.5383 98.2283 28 95.3574 28Z" fill={fg} />
+      <path d="M104.643 112H132L126.303 121.969C124.879 124.462 122.228 126 119.357 126H108L116 140L108 154L94.268 129.969C92.8626 127.51 92.8626 124.49 94.268 122.031L97.6966 116.031C99.121 113.538 101.772 112 104.643 112Z" fill={fg} />
+    </svg>
+  );
+}

package/src/composites/branding/LogoMonogram/LogoMonogram.types.ts

@@ -0,0 +1,35 @@
+/**
+ * Props for LogoMonogram — the Newtone "N" symbol mark.
+ *
+ * Renders a single-color SVG monogram that scales to the given size.
+ * The `colorValue` prop controls the grayscale fill, enabling smooth
+ * transitions between light and dark backgrounds.
+ *
+ * @example
+ * ```tsx
+ * <LogoMonogram colorValue={0} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <LogoMonogram colorValue={255} size={48} />
+ * ```
+ */
+export interface LogoMonogramProps {
+  /**
+   * Grayscale fill value (0–255).
+   *
+   * - `0` produces black (for light backgrounds)
+   * - `255` produces white (for dark backgrounds)
+   *
+   * @default 0
+   */
+  readonly colorValue?: number;
+
+  /**
+   * Width and height of the SVG in pixels.
+   *
+   * @default 32
+   */
+  readonly size?: number;
+}

package/src/composites/branding/LogoMonogram/index.ts

@@ -0,0 +1,2 @@
+export { LogoMonogram } from './LogoMonogram';
+export type { LogoMonogramProps } from './LogoMonogram.types';