/** * @file Icon.tsx * @input Uses ReactSVGProps, icon components or semantic icon names * @output Exports Icon component, IconProps, IconColor, IconSize, IconType types * @position Core implementation; consumed by index.ts, tested by Icon.test.tsx * * Supports two modes: * - Component mode: Pass an SVG icon component (e.g. from @heroicons/react) — rendered * directly with and spread SVG props. * - String mode: Pass a semantic name (e.g. 'close', 'chevronDown') — resolved from the * theme's icon registry (or built-in fallback SVGs) and wrapped in a styled span. * * SYNC: When modified, update these files to stay in sync: * - /packages/core/src/Icon/Icon.doc.mjs (props table, features, implementation notes) * - /packages/core/src/Icon/Icon.test.tsx (tests for new/changed behavior) * - /packages/core/src/Icon/index.ts (exports if types change) * - /apps/storybook/stories/Icon.stories.tsx (storybook stories) * - /packages/cli/assets/templates/blocks/components/Icon/ (showcase blocks) */ import React, { type ComponentType, type SVGProps } from 'react'; import * as stylex from '@stylexjs/stylex'; import type { StyleXStyles } from '@stylexjs/stylex'; import type { IconName } from './globalIconRegistry'; declare const colorStyles: Readonly<{ readonly primary: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">; }>; readonly secondary: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">; }>; readonly tertiary: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">; }>; readonly disabled: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#A4B0BC, #6F747C)">; }>; readonly accent: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0064E0, #2694FE)">; }>; readonly success: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0D8626, #0D8626)">; }>; readonly error: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#E3193B, #F5394F)">; }>; readonly warning: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#E9AF08, #F2C00B)">; }>; readonly inherit: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "inherit">; }>; readonly blue: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0064E0, #2694FE)">; }>; readonly red: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#D31130, #E3193B)">; }>; readonly green: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0D8626, #26A756)">; }>; readonly gray: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">; }>; readonly cyan: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#00ACC1, #26C6DA)">; }>; readonly teal: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#009688, #26A69A)">; }>; readonly yellow: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#FBC02D, #FFEE58)">; }>; readonly orange: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#E9690B, #FB8C00)">; }>; readonly pink: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#C2185B, #EC407A)">; }>; readonly purple: Readonly<{ readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#5B08D8, #7952FF)">; }>; }>; /** * Size styles for direct SVG icon components. * Uses width/height only — SVG components handle their own viewBox scaling. * * Sizes are expressed in `rem` (relative to the root font-size) so icons scale * in step with text when the document font-size changes, matching the rest of * the design system's rem-based type scale. Values are the px-equivalents at a * 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem. */ declare const sizeStyles: Readonly<{ readonly xsm: Readonly<{ readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">; readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">; }>; readonly sm: Readonly<{ readonly width: stylex.StyleXClassNameFor<"width", "1rem">; readonly height: stylex.StyleXClassNameFor<"height", "1rem">; }>; readonly md: Readonly<{ readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">; readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">; }>; readonly lg: Readonly<{ readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">; readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">; }>; }>; export type IconColor = keyof typeof colorStyles; export type IconSize = keyof typeof sizeStyles; /** * Type for icon components that can be passed to Icon. * Use this type when accepting an icon prop in other components. */ export type IconType = ComponentType>; /** * Props for Icon component. * Extends SVGProps to allow passing additional SVG attributes (used when icon is a component). */ export interface IconProps extends Omit, 'ref' | 'color'> { /** Ref forwarded to the root element */ ref?: React.Ref; /** * Icon to render. Can be: * - A semantic name string (e.g. 'close', 'chevronDown') — resolved from theme or built-in fallback * - An SVG icon component (e.g. from @heroicons/react) — rendered directly */ icon: IconType | IconName; /** * The color variant of the icon. * @default 'inherit' */ color?: IconColor; /** * The size of the icon. * - 'xsm': 0.75rem (12px at a 16px root) * - 'sm': 1rem (16px at a 16px root) * - 'md': 1.25rem (20px at a 16px root) * - 'lg': 1.5rem (24px at a 16px root) * @default 'md' */ size?: IconSize; /** * Accessible name for the icon. Set this only when the icon is MEANINGFUL on * its own — a standalone status glyph or an icon-only indicator with no * adjacent text conveying the same information. Providing it exposes the icon * to assistive tech as `role="img"` with this string as the accessible name * (via `aria-label`) and drops the default `aria-hidden="true"`. * * Omit it (the default) for decorative icons — the common case, e.g. an icon * beside a text label — and the icon stays hidden from assistive tech * (`aria-hidden="true"`). An empty string (`''`) is treated the same as * omitting it (decorative), since an empty accessible name is meaningless. * * Don't set `label` when an interactive parent (Button, IconButton, link) * already names the control — that produces a duplicate announcement. * * Meaningful, standalone icon: give it a label. * * @example * ``` * * ``` * * Decorative icon (the default): omit label. * * @example * ``` * * ``` */ label?: string; /** * StyleX styles created via `stylex.create()`. Folded into the icon's own * `stylex.props()` call (as the last argument) so it merges with the base * color/size styles for optimal deduplication, matching how other Astryx * components accept `xstyle`. * * @example * ``` * const overrides = stylex.create({ root: { opacity: 0.5 } }); * * ``` */ xstyle?: StyleXStyles; } /** * Renders an icon from the icon registry or a custom SVG component. * * @example * ``` * * ``` */ export declare function Icon({ icon, color, size, label, ref, className, style, xstyle, ...props }: IconProps): React.JSX.Element; export declare namespace Icon { var displayName: string; } /** * Renders an icon slot value. Handles semantic names, ReactNode values, and * component types: * - If the value is a semantic icon name string, wraps it in Icon. * - If the value is a component (function or forwardRef object), wraps it in Icon. * - Otherwise, renders the ReactNode directly. */ export declare function renderIconSlot(icon: React.ReactNode | IconType, props?: { size?: IconSize; color?: IconColor; }): React.ReactNode; export {}; //# sourceMappingURL=Icon.d.ts.map