@idealyst/components 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.1",
+    "@idealyst/theme": "^1.2.3",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,7 +106,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.1",
+    "@idealyst/theme": "^1.2.3",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Accordion/Accordion.web.tsx

@@ -107,6 +107,10 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   );
 };
 
+/**
+ * Expandable sections for organizing content into collapsible panels.
+ * Supports single or multiple expanded sections with keyboard navigation.
+ */
 const Accordion: React.FC<AccordionProps> = ({
   items,
   allowMultiple = false,

package/src/Accordion/types.ts

@@ -14,7 +14,14 @@ export interface AccordionItem {
   disabled?: boolean;
 }
 
+/**
+ * Expandable content panels for organizing information in collapsible sections.
+ * Supports single or multiple expanded items simultaneously.
+ */
 export interface AccordionProps extends ContainerStyleProps, AccessibilityProps {
+  /**
+   * Array of accordion items to display
+   */
   items: AccordionItem[];
   allowMultiple?: boolean;
   defaultExpanded?: string[];

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -5,6 +5,10 @@ import { activityIndicatorStyles } from './ActivityIndicator.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebLiveRegionAriaProps } from '../utils/accessibility';
 
+/**
+ * Spinning loading indicator for async operations and content loading.
+ * Supports intent-based coloring and automatic hiding when stopped.
+ */
 const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   animating = true,
   size = 'md',

package/src/Alert/Alert.web.tsx

@@ -16,6 +16,10 @@ const defaultIcons = {
   neutral: 'record-circle',
 };
 
+/**
+ * Notification banner for displaying important messages, warnings, or status updates.
+ * Supports multiple intents, dismissibility, and custom actions.
+ */
 const Alert = forwardRef<HTMLDivElement, AlertProps>(({
   title,
   message,

package/src/Alert/types.ts

@@ -6,7 +6,14 @@ import { BaseProps } from '../utils/viewStyleProps';
 export type AlertIntentVariant = Intent;
 export type AlertType= 'filled' | 'outlined' | 'soft';
 
+/**
+ * Feedback message component for displaying important information to users.
+ * Supports multiple intent colors, dismissible behavior, and custom actions.
+ */
 export interface AlertProps extends BaseProps {
+  /**
+   * The title of the alert
+   */
   title?: string;
   message?: string;
   children?: React.ReactNode;

package/src/Avatar/Avatar.web.tsx

@@ -5,6 +5,10 @@ import { avatarStyles } from './Avatar.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebAriaProps } from '../utils/accessibility';
 
+/**
+ * User or entity representation with image support and fallback initials.
+ * Available in circle or square shapes with multiple sizes.
+ */
 const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
   src,
   alt,

package/src/Avatar/types.ts

@@ -8,6 +8,10 @@ export type AvatarColorVariant = Color;
 export type AvatarSizeVariant = 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShapeVariant = 'circle' | 'square';
 
+/**
+ * User or entity representation with image, initials fallback, or icon.
+ * Supports circular and square shapes with multiple size options.
+ */
 export interface AvatarProps extends BaseProps, AccessibilityProps {
   /**
    * Image source (URL or require())

package/src/Badge/Badge.web.tsx

@@ -5,6 +5,10 @@ import { badgeStyles } from './Badge.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 
+/**
+ * Small status indicator for counts, labels, or notifications.
+ * Available in filled, outlined, and dot variants with customizable colors.
+ */
 const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
   const {
     children,

package/src/Badge/types.ts

@@ -9,6 +9,10 @@ export type BadgeColorVariant = Color;
 export type BadgeSizeVariant = Size;
 export type BadgeType = 'filled' | 'outlined' | 'dot';
 
+/**
+ * Small status indicator component for counts, labels, or status dots.
+ * Supports filled, outlined, and dot variants with customizable colors.
+ */
 export interface BadgeProps extends BaseProps {
   /**
    * The content to display inside the badge

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -148,6 +148,10 @@ const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent })
   );
 };
 
+/**
+ * Navigation trail showing the current page location within a hierarchy.
+ * Supports custom separators, responsive collapsing, and icon prefixes.
+ */
 const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items,
   separator = '/',

package/src/Button/Button.web.tsx

@@ -6,6 +6,10 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
+/**
+ * Interactive button component with multiple visual variants, sizes, and icon support.
+ * Supports contained, outlined, and text styles with customizable intent colors.
+ */
 const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     title,

package/src/Button/types.ts

@@ -18,6 +18,10 @@ export type ButtonSizeVariant = Size;
  */
 export type ButtonGradient = 'darken' | 'lighten';
 
+/**
+ * Interactive button component with multiple visual variants, sizes, and icon support.
+ * Supports contained, outlined, and text styles with customizable intent colors.
+ */
 export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
   /**
    * The text or content to display inside the button

package/src/Card/Card.web.tsx

@@ -5,6 +5,10 @@ import { cardStyles } from './Card.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps } from '../utils/accessibility';
 
+/**
+ * Container component for grouping related content with elevation and styling options.
+ * Supports elevated, outlined, and filled variants with optional click interaction.
+ */
 const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   children,
   type = 'elevated',

package/src/Card/types.ts

@@ -9,6 +9,10 @@ export type CardIntentVariant = Intent;
 export type CardType = 'default' | 'outlined' | 'elevated' | 'filled';
 export type CardRadiusVariant = 'none' | Size;
 
+/**
+ * Container component for grouping related content with visual separation.
+ * Supports multiple visual styles including outlined, elevated, and filled variants.
+ */
 export interface CardProps extends ContainerStyleProps, InteractiveAccessibilityProps {
   /**
    * The content to display inside the card

package/src/Checkbox/Checkbox.web.tsx

@@ -6,6 +6,10 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebSelectionAriaProps, generateAccessibilityId, combineIds } from '../utils/accessibility';
 
+/**
+ * Checkbox input for boolean selection with support for indeterminate state.
+ * Includes label, helper text, and error display options.
+ */
 const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
   checked = false,
   indeterminate = false,

package/src/Checkbox/types.ts

@@ -9,6 +9,10 @@ export type CheckboxIntentVariant = Intent;
 export type CheckboxSizeVariant = Size;
 export type CheckboxVariant = 'default' | 'outlined';
 
+/**
+ * Checkbox component for multiple selection inputs.
+ * Supports checked, unchecked, and indeterminate states with optional labels.
+ */
 export interface CheckboxProps extends FormInputStyleProps, SelectionAccessibilityProps {
   /**
    * Whether the checkbox is checked

package/src/Chip/Chip.web.tsx

@@ -6,6 +6,10 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 
+/**
+ * Compact interactive element for tags, filters, or selections.
+ * Supports icons, selection state, and delete functionality.
+ */
 const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   label,
   type = 'filled',

package/src/Chip/types.ts

@@ -8,6 +8,10 @@ export type ChipSize = Size;
 export type ChipType = 'filled' | 'outlined' | 'soft';
 export type ChipIntent = Intent;
 
+/**
+ * Compact element for tags, filters, or selections.
+ * Supports deletable and selectable modes with icon customization.
+ */
 export interface ChipProps extends BaseProps, SelectionAccessibilityProps {
   /** The text content of the chip */
   label: string;

package/src/Dialog/Dialog.web.tsx

@@ -7,6 +7,10 @@ import Icon from '../Icon';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
+/**
+ * Modal overlay dialog for focused user interactions and confirmations.
+ * Handles focus trapping, escape key, and backdrop click dismissal.
+ */
 const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   open,
   onOpenChange,

package/src/Dialog/types.ts

@@ -8,6 +8,10 @@ export type DialogSizeVariant = 'sm' | 'md' | 'lg' | 'fullscreen';
 export type DialogType = 'default' | 'alert' | 'confirmation';
 export type DialogAnimationType = 'slide' | 'fade' | 'none';
 
+/**
+ * Modal dialog component for focused interactions requiring user attention.
+ * Supports multiple sizes, animation types, and configurable close behaviors.
+ */
 export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
   /**
    * Whether the dialog is open/visible

package/src/Divider/Divider.web.tsx

@@ -4,6 +4,10 @@ import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 
+/**
+ * Visual separator for dividing content sections horizontally or vertically.
+ * Supports solid, dashed, and dotted styles with optional text content.
+ */
 const Divider = forwardRef<HTMLDivElement, DividerProps>(({
   orientation = 'horizontal',
   type = 'solid',

package/src/Divider/types.ts

@@ -11,6 +11,10 @@ export type DividerThicknessVariant = 'thin' | 'md' | 'thick';
 export type DividerLengthVariant = 'full' | 'auto' | number;
 export type DividerSpacingVariant = 'none' | Size;
 
+/**
+ * Visual separator for grouping or dividing content sections.
+ * Supports horizontal and vertical orientations with optional centered content.
+ */
 export interface DividerProps extends BaseProps {
   /**
    * The orientation of the divider

package/src/Icon/Icon.web.tsx

@@ -8,6 +8,10 @@ import useMergeRefs from '../hooks/useMergeRefs';
 import { getColorFromString, Intent, Color } from '@idealyst/theme';
 import { IconRegistry } from './IconRegistry';
 
+/**
+ * Vector icon display from the Material Design Icons library.
+ * Supports intent-based coloring and theme-aware sizing.
+ */
 const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   const {
     name,

package/src/Input/Input.web.tsx

@@ -7,6 +7,10 @@ import { inputStyles } from './Input.styles';
 import { InputProps } from './types';
 import { getWebFormAriaProps, generateAccessibilityId, combineIds } from '../utils/accessibility';
 
+/**
+ * Text input field with support for icons, password visibility toggle, and validation states.
+ * Available in outlined and filled variants with multiple sizes.
+ */
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   value,
   onChangeText,

package/src/Input/types.ts

@@ -10,6 +10,10 @@ export type InputSize = Size;
 export type InputType = 'outlined' | 'filled' | 'bare';
 export type InputInputType = 'text' | 'email' | 'password' | 'number';
 
+/**
+ * Text input field with support for icons, validation states, and multiple visual styles.
+ * Includes built-in password visibility toggle and platform-specific keyboard handling.
+ */
 export interface InputProps extends FormInputStyleProps, FormAccessibilityProps {
   /**
    * The current value of the input

package/src/Link/Link.web.tsx

@@ -3,6 +3,10 @@ import { useNavigator } from '@idealyst/navigation';
 import { Pressable } from '../Pressable';
 import type { LinkProps } from './types';
 
+/**
+ * Navigation component for routing to other screens within the application.
+ * Integrates with the navigation system for seamless page transitions.
+ */
 const Link: React.FC<LinkProps> = ({
   to,
   vars,

package/src/List/List.web.tsx

@@ -4,6 +4,10 @@ import { listStyles } from './List.styles';
 import type { ListProps } from './types';
 import { ListProvider } from './ListContext';
 
+/**
+ * Container for displaying a collection of related items in a vertical layout.
+ * Provides consistent spacing and optional scrolling with ListItem children.
+ */
 const List: React.FC<ListProps> = ({
   children,
   type = 'default',

package/src/List/types.ts

@@ -27,7 +27,14 @@ export interface ListItemProps extends SelectableAccessibilityProps {
   testID?: string;
 }
 
+/**
+ * Container for organizing related items in a vertical list format.
+ * Supports bordered, divided, and default visual styles with optional scrolling.
+ */
 export interface ListProps extends ContainerStyleProps, AccessibilityProps {
+  /**
+   * List items to display
+   */
   children: ReactNode;
   type?: ListType;
   size?: ListSizeVariant;

package/src/Menu/Menu.web.tsx

@@ -7,6 +7,10 @@ import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
 import { getWebInteractiveAriaProps, generateAccessibilityId, MENU_KEYS } from '../utils/accessibility';
 
+/**
+ * Dropdown menu for actions and navigation triggered by a button or element.
+ * Includes keyboard navigation, icons, and separator support.
+ */
 const Menu = forwardRef<HTMLDivElement, MenuProps>(({
   children,
   items,

package/src/Popover/Popover.web.tsx

@@ -6,6 +6,10 @@ import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
+/**
+ * Floating content panel anchored to an element for contextual information or actions.
+ * Supports multiple placements and automatic dismissal behaviors.
+ */
 const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
   open,
   onOpenChange,

package/src/Progress/Progress.web.tsx

@@ -3,6 +3,10 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { progressStyles } from './Progress.styles';
 import type { ProgressProps } from './types';
 
+/**
+ * Visual indicator for task completion or loading status.
+ * Supports linear and circular variants with determinate or indeterminate states.
+ */
 const Progress: React.FC<ProgressProps> = ({
   value = 0,
   max = 100,

package/src/Progress/types.ts

@@ -7,7 +7,14 @@ export type ProgressIntentVariant = Intent;
 export type ProgressSizeVariant = Size;
 export type ProgressVariant = 'linear' | 'circular';
 
+/**
+ * Visual indicator for task completion or loading status.
+ * Supports linear and circular variants with determinate and indeterminate modes.
+ */
 export interface ProgressProps extends BaseProps {
+  /**
+   * Current progress value (0-100 by default, or 0-max if max is specified)
+   */
   value?: number;
   max?: number;
   variant?: ProgressVariant;

package/src/RadioButton/RadioButton.web.tsx

@@ -5,6 +5,10 @@ import type { RadioButtonProps } from './types';
 import { useRadioGroup } from './RadioGroup.web';
 import { getWebSelectionAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
+/**
+ * Single-select option within a radio button group.
+ * Works with RadioGroup for managing exclusive selection state.
+ */
 const RadioButton: React.FC<RadioButtonProps> = ({
   value,
   checked: checkedProp,

package/src/Screen/Screen.web.tsx

@@ -4,6 +4,10 @@ import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 
+/**
+ * Full-screen container for page layouts with background color and safe area support.
+ * Provides the outermost wrapper for screen-level content.
+ */
 const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
   children,
   background = 'screen',

package/src/Screen/types.ts

@@ -3,6 +3,10 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { Surface } from '@idealyst/theme';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 
+/**
+ * Full-screen container component with safe area support.
+ * Provides consistent page-level layout with optional scrolling and safe area insets.
+ */
 export interface ScreenProps extends ContainerStyleProps {
   /**
    * The content to display inside the screen

package/src/Select/Select.styles.tsx

@@ -32,6 +32,10 @@ export type SelectDynamicProps = {
 export const selectStyles = defineStyle('Select', (theme: Theme) => ({
     container: (_props: SelectDynamicProps) => ({
         position: 'relative' as const,
+        _web: {
+            display: 'inline-flex',
+            flexDirection: 'column',
+        },
         variants: {
             margin: {
                 margin: theme.sizes.$view.padding,

package/src/Select/Select.web.tsx

@@ -7,6 +7,10 @@ import { PositionedPortal } from '../internal/PositionedPortal';
 import { selectStyles } from './Select.styles';
 import { SelectOption, SelectProps } from './types';
 
+/**
+ * Dropdown selection component with search, keyboard navigation, and custom option rendering.
+ * Supports single selection with filterable options list.
+ */
 const Select = forwardRef<HTMLDivElement, SelectProps>(({
   options,
   value,

package/src/Select/types.ts

@@ -31,6 +31,10 @@ export interface SelectOption {
   icon?: ReactNode;
 }
 
+/**
+ * Dropdown selection component for choosing from a list of options.
+ * Supports searchable filtering on web and native presentation modes on iOS.
+ */
 export interface SelectProps extends FormInputStyleProps, FormAccessibilityProps {
   /**
    * Array of options to display in the select

package/src/Skeleton/Skeleton.web.tsx

@@ -4,6 +4,10 @@ import { skeletonStyles } from './Skeleton.styles';
 import type { SkeletonProps, SkeletonGroupProps } from './types';
 import { getWebLiveRegionAriaProps } from '../utils/accessibility';
 
+/**
+ * Placeholder animation for loading content with customizable shapes and animations.
+ * Available in pulse and wave animation styles.
+ */
 const Skeleton: React.FC<SkeletonProps> = ({
   width = '100%',
   height = 20,

package/src/Slider/Slider.web.tsx

@@ -7,6 +7,10 @@ import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebRangeAriaProps, generateAccessibilityId, SLIDER_KEYS } from '../utils/accessibility';
 
+/**
+ * Range slider for selecting numeric values within a min/max range.
+ * Supports marks, value labels, keyboard navigation, and custom step increments.
+ */
 const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   value: controlledValue,
   defaultValue = 0,

package/src/Slider/types.ts

@@ -8,7 +8,14 @@ import { RangeAccessibilityProps } from '../utils/accessibility';
 export type SliderIntentVariant = Intent;
 export type SliderSizeVariant = Size;
 
+/**
+ * Range input component for selecting numeric values within a defined range.
+ * Supports step intervals, marks, and real-time value display.
+ */
 export interface SliderProps extends FormInputStyleProps, RangeAccessibilityProps {
+  /**
+   * Current slider value
+   */
   value?: number;
   defaultValue?: number;
   min?: number;

package/src/Switch/Switch.web.tsx

@@ -7,6 +7,10 @@ import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebSelectionAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
+/**
+ * Toggle switch for binary on/off states with optional label and icons.
+ * Supports custom enabled/disabled icons and multiple sizes.
+ */
 const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   checked = false,
   onCheckedChange,

package/src/Switch/types.ts

@@ -8,7 +8,14 @@ import { SelectionAccessibilityProps } from '../utils/accessibility';
 export type SwitchIntentVariant = Intent;
 export type SwitchSizeVariant = Size;
 
+/**
+ * Toggle switch component for binary on/off states.
+ * Supports custom icons for enabled/disabled states and optional label positioning.
+ */
 export interface SwitchProps extends FormInputStyleProps, SelectionAccessibilityProps {
+  /**
+   * Whether the switch is on
+   */
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;

package/src/TabBar/TabBar.web.tsx

@@ -111,6 +111,10 @@ const Tab: React.FC<TabProps> = ({
   );
 };
 
+/**
+ * Horizontal tab navigation for switching between views or content sections.
+ * Supports standard underline and pill styles with animated indicator.
+ */
 const TabBar: React.FC<TabBarProps> = ({
   items,
   value: controlledValue,

package/src/Table/Table.web.tsx

@@ -130,6 +130,10 @@ function TD({
 // Main Table Component
 // ============================================================================
 
+/**
+ * Data display component for structured tabular content with columns and rows.
+ * Supports custom cell rendering, sticky headers, and row click handling.
+ */
 function Table<T = any>({
   columns,
   data,

package/src/Table/types.ts

@@ -18,7 +18,14 @@ export interface TableColumn<T = any> extends SortableAccessibilityProps {
   align?: TableAlignVariant;
 }
 
+/**
+ * Data display component for rendering tabular information with columns and rows.
+ * Supports sticky headers, row selection, and custom cell rendering.
+ */
 export interface TableProps<T = any> extends ContainerStyleProps, AccessibilityProps {
+  /**
+   * Column definitions for the table
+   */
   columns: TableColumn<T>[];
   data: T[];
   type?: TableType;

package/src/Text/Text.web.tsx

@@ -4,6 +4,10 @@ import { TextProps } from './types';
 import { textStyles } from './Text.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 
+/**
+ * Typography component for displaying text with predefined styles and semantic variants.
+ * Supports multiple typography scales, colors, weights, and alignments.
+ */
 const Text = forwardRef<HTMLSpanElement, TextProps>(({
   children,
   typography = 'body1',

package/src/Text/types.ts

@@ -9,6 +9,10 @@ export type TextWeightVariant = 'light' | 'normal' | 'medium' | 'semibold' | 'bo
 export type TextAlignVariant = 'left' | 'center' | 'right';
 export type TextTypographyVariant = Typography;
 
+/**
+ * Typography component for rendering text with consistent styling.
+ * Supports semantic typography variants, custom weights, and theme-aware colors.
+ */
 export interface TextProps extends TextSpacingStyleProps {
   /**
    * The text content to display

package/src/TextArea/TextArea.web.tsx

@@ -5,6 +5,10 @@ import type { TextAreaProps } from './types';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebFormAriaProps, combineIds, generateAccessibilityId } from '../utils/accessibility';
 
+/**
+ * Multi-line text input with auto-grow, character counting, and validation support.
+ * Includes label, helper text, and error message display.
+ */
 const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   value: controlledValue,
   defaultValue = '',

package/src/Tooltip/Tooltip.web.tsx

@@ -5,6 +5,10 @@ import type { TooltipProps } from './types';
 import { PositionedPortal } from '../internal/PositionedPortal';
 import { getWebAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
+/**
+ * Contextual popup for displaying additional information on hover or focus.
+ * Supports multiple placements, delays, and keyboard accessibility.
+ */
 const Tooltip: React.FC<TooltipProps> = ({
   content,
   children,

package/src/Tooltip/types.ts

@@ -8,7 +8,14 @@ export type TooltipIntentVariant = Intent;
 export type TooltipSizeVariant = Size;
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
+/**
+ * Contextual popup that displays helpful information on hover or focus.
+ * Supports configurable placement and delay timing.
+ */
 export interface TooltipProps extends BaseProps, AccessibilityProps {
+  /**
+   * Content to display in the tooltip
+   */
   content: string | React.ReactNode;
   children: React.ReactNode;
   placement?: TooltipPlacement;

package/src/View/View.web.tsx

@@ -5,6 +5,10 @@ import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 
+/**
+ * Fundamental layout container with background, border, and spacing options.
+ * The base building block for composing UI layouts.
+ */
 const View = forwardRef<HTMLDivElement, ViewProps>(({
   children,
   background = 'transparent',

package/src/View/types.ts

@@ -28,6 +28,10 @@ export type ViewBackgroundVariant = Surface | 'transparent';
 export type ViewRadiusVariant = Size | 'none';
 export type ViewBorderVariant = 'none' | 'thin' | 'thick';
 
+/**
+ * Fundamental layout building block with responsive styling support.
+ * Supports theme-aware backgrounds, borders, and breakpoint-based style values.
+ */
 export interface ViewProps extends ContainerStyleProps {
   /**
    * The content to display inside the view