@rcarls/rc-webcomponents 0.0.0-next-20260921045401

package/src/react.d.ts

@@ -0,0 +1,1140 @@
+/**
+ * React JSX type augmentation for rc-webcomponents.
+ *
+ * Add a triple-slash reference once in your React project (e.g. vite-env.d.ts):
+ *
+ *   /// <reference types="@rcarls/rc-webcomponents/react" />
+ *
+ * Ref types use HTMLElement intersections — not LitElement — so TypeScript
+ * resolves correctly without requiring `lit` in your tsconfig paths.
+ *
+ * Import ref and event detail types directly for use with useRef and
+ * addEventListener:
+ *
+ *   import type { RCComboboxRef, RCComboboxCreateDetail } from '@rcarls/rc-webcomponents/react';
+ *
+ *   const ref = useRef<RCComboboxRef>(null);
+ *   el.addEventListener('rc-combobox-create', (e: CustomEvent<RCComboboxCreateDetail>) => { ... });
+ */
+
+import type { RCTextareaPlugin } from '@rcarls/rc-textarea';
+
+// ── Shared value types ───────────────────────────────────────────────────────
+
+export type RCSelectOption = {
+  kind?: 'option';
+  value: string;
+  label: string;
+  disabled?: boolean;
+  data?: unknown;
+};
+
+export type RCListboxActionOption<Action extends string = string> = {
+  kind: 'action';
+  action: Action;
+  value: string;
+  label: string;
+  disabled?: boolean;
+  data?: unknown;
+};
+
+export type RCListboxOption = RCSelectOption | RCListboxActionOption;
+
+export type RCSelectValue = string | string[];
+
+// ── Event detail types ───────────────────────────────────────────────────────
+
+export type RCDisclosureToggleDetail = {
+  open: boolean;
+};
+
+export type RCSelectChangeDetail = {
+  value: RCSelectValue;
+  selectedValues: string[];
+  selectedOptions: RCSelectOption[];
+};
+
+export type RCListboxSelectChangeDetail = RCSelectChangeDetail & {
+  reason: 'select';
+  selected: boolean;
+  optionValue: string;
+  option: RCSelectOption;
+};
+
+export type RCListboxActionChangeDetail<Action extends string = string> = RCSelectChangeDetail & {
+  reason: 'action';
+  selected: false;
+  optionValue: string;
+  option: RCListboxActionOption<Action>;
+  action: Action;
+};
+
+export type RCListboxChangeDetail = RCListboxSelectChangeDetail | RCListboxActionChangeDetail;
+
+export type RCComboboxCreateDetail = {
+  text: string;
+};
+
+export type RCDialogToggleDetail = {
+  open: boolean;
+  returnValue: string;
+};
+
+export type RCDialogCloseDetail = {
+  returnValue: string;
+};
+
+/** Detail shape for `rc-bottom-sheet-snap`. */
+export type RCBottomSheetSnapDetail = {
+  /** Index into the resolved snap-point list selected as the target. */
+  index: number;
+
+  /** Target height, in pixels. */
+  height: number;
+
+  /** Whether the snap came from a drag release or a `snapTo()` call. */
+  trigger: 'drag' | 'api';
+};
+
+export type RCBottomSheetResizeStartDetail = {
+  height: number;
+  inputType: 'pointer' | 'keyboard';
+};
+
+export type RCMenuActivateDetail = {
+  item: HTMLElement;
+  value: string;
+  text: string;
+};
+
+export type RCMenuCloseDetail = {
+  reason: 'escape';
+};
+
+export type RCAdaptiveMenuToggleDetail = {
+  open: boolean;
+};
+
+export type RCMenuButtonToggleDetail = {
+  open: boolean;
+};
+
+export type RCSliderChangeDetail = {
+  value: number;
+};
+
+export type RCRangeSliderChangeDetail = {
+  value: [number, number];
+};
+
+export type RCTransferListOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type RCTransferListChangeDetail = {
+  selected: RCTransferListOption[];
+};
+
+export type RCSplitterChangeDetail = {
+  value: number;
+  valueText: string;
+};
+
+export type RCMarkdownEditorFormats = {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  code?: boolean;
+  link?: boolean;
+  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | null;
+  blockquote?: boolean;
+  bulletList?: boolean;
+  orderedList?: boolean;
+  codeBlock?: boolean;
+  codeLanguage?: string | null;
+};
+
+export type RCMarkdownEditorChangeDetail = {
+  value: string;
+};
+
+export type RCMarkdownEditorModeChangeDetail = {
+  mode: 'rich' | 'source';
+};
+
+export type RCVirtualCanvasViewRect = Readonly<{
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}>;
+
+export type RCVirtualCanvasRenderDetail = {
+  time: DOMHighResTimeStamp;
+  reason: 'animation-frame' | 'viewport-change' | 'manual';
+  viewRect: RCVirtualCanvasViewRect;
+  contentRect: RCVirtualCanvasViewRect;
+};
+
+export type RCVirtualCanvasPointerDetail = {
+  type: string;
+  clientX: number;
+  clientY: number;
+  contentX: number;
+  contentY: number;
+  viewRect: RCVirtualCanvasViewRect;
+  button: number;
+  buttons: number;
+  altKey: boolean;
+  ctrlKey: boolean;
+  shiftKey: boolean;
+  metaKey: boolean;
+  sourceEvent: PointerEvent | MouseEvent;
+};
+
+export type RCAppBarScrollDetail = {
+  scrolled: boolean;
+};
+
+export type RCSearchBarInputDetail = {
+  value: string;
+};
+
+export type RCCarouselChangeTrigger = 'api' | 'button' | 'keyboard' | 'swipe';
+
+/** Detail shape for `rc-carousel-change`. */
+export type RCCarouselChangeDetail = {
+  index: number;
+  trigger: RCCarouselChangeTrigger;
+};
+
+export type RCTextareaChangeDetail = {
+  value: string;
+};
+
+export type RCTextareaSelectDetail = {
+  selectionStart: number;
+  selectionEnd: number;
+};
+
+export type RCSwitchChangeDetail = {
+  checked: boolean;
+};
+
+export type RCSegmentedButtonChangeDetail = {
+  value: string;
+};
+
+export type RCChipVariant = 'assist' | 'filter' | 'input' | 'suggestion';
+
+export type RCChipChangeDetail = {
+  selected: boolean;
+};
+
+export type RCChipRemoveDetail = {
+  chip: HTMLElement;
+};
+
+export type RCChipGroupLayout = 'auto' | 'wrap' | 'scroll';
+export type RCChipGroupKind = 'generic' | 'assist' | 'filter';
+export type RCChipGroupSelection = 'none' | 'single' | 'multiple';
+
+export type RCChipGroupToggleDetail = {
+  expanded: boolean;
+};
+
+export type RCButtonToggleDetail = {
+  selected: boolean;
+};
+
+export type RCSnackbarQueuePolicy = 'queue' | 'replace';
+export type RCSnackbarCloseReason = 'action' | 'api' | 'timeout' | 'replace' | 'clear';
+
+export type RCSnackbarShowOptions = {
+  message: string;
+  actionLabel?: string;
+  duration?: number;
+};
+
+export type RCSnackbarActionDetail = {
+  message: string;
+};
+
+export type RCSnackbarCloseDetail = {
+  reason: RCSnackbarCloseReason;
+  message: string;
+};
+
+// ── Ref types ────────────────────────────────────────────────────────────────
+
+/** Public API surface of `<rc-button>`. */
+export type RCButtonRef = HTMLElement & {
+  disabled: boolean;
+  pending: boolean;
+  progress: boolean;
+  progressValue: number | undefined;
+  toggle: boolean;
+  selected: boolean;
+  defaultSelected: boolean;
+  iconOnly: boolean;
+  fullWidth: boolean;
+};
+
+/** Public API surface of `<rc-card>`. */
+export type RCCardOrientation = 'vertical' | 'horizontal';
+
+export type RCCardRef = HTMLElement & {
+  orientation: RCCardOrientation;
+  selected: boolean;
+  disabled: boolean;
+  interactive: boolean;
+  actionTarget: string;
+};
+
+export type RCScrollerAxis = 'block' | 'inline' | 'both';
+export type RCScrollerLayout = 'none' | 'content';
+
+/** Public API surface of `<rc-scroller>`. */
+export type RCScrollerRef = HTMLElement & {
+  axis: RCScrollerAxis;
+  layout: RCScrollerLayout;
+  readonly atBlockStart: boolean;
+  readonly atBlockEnd: boolean;
+  readonly atInlineStart: boolean;
+  readonly atInlineEnd: boolean;
+};
+
+export type RCListVariant = 'standard' | 'segmented';
+export type RCListSelection = 'none' | 'single' | 'multiple';
+
+/** Public API surface of `<rc-list>`. */
+export type RCListRef = HTMLElement & {
+  variant: RCListVariant;
+  selection: RCListSelection;
+};
+
+/** Public API surface of `<rc-list-item>`. */
+export type RCListItemRef = HTMLElement & {
+  selected: boolean;
+  disabled: boolean;
+  interactive: boolean;
+  actionTarget: string;
+};
+
+/** Public API surface of `<rc-switch>`. */
+export type RCSwitchRef = HTMLElement & {
+  checked: boolean;
+  defaultChecked: boolean;
+  disabled: boolean;
+  icons: boolean;
+  showOnlySelectedIcon: boolean;
+};
+
+/** Public API surface of `<rc-segmented-button>`. */
+export type RCSegmentedButtonRef = HTMLElement & {
+  value: string;
+  defaultValue: string;
+  disabled: boolean;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-chip>`. */
+export type RCChipRef = HTMLElement & {
+  variant: RCChipVariant;
+  selected: boolean;
+  defaultSelected: boolean;
+  disabled: boolean;
+  readonly: boolean;
+  removable: boolean;
+};
+
+export type RCChipGroupRef = HTMLElement & {
+  layout: RCChipGroupLayout;
+  maxRows: number;
+  kind: RCChipGroupKind;
+  selection: RCChipGroupSelection;
+  expanded: boolean;
+  defaultExpanded: boolean;
+  label: string;
+  showAllLabel: string;
+  showLessLabel: string;
+};
+
+/** Public API surface of `<rc-snackbar>`. */
+export type RCSnackbarRef = HTMLElement & {
+  open: boolean;
+  message: string;
+  actionLabel: string;
+  duration: number;
+  queuePolicy: RCSnackbarQueuePolicy;
+  show(message: string | RCSnackbarShowOptions): void;
+  close(reason?: RCSnackbarCloseReason): void;
+  clear(): void;
+};
+
+/** Public API surface of `<rc-disclosure>`. */
+export type RCDisclosureRef = HTMLElement & {
+  open: boolean;
+};
+
+/** Public API surface of `<rc-accordion>`. */
+export type RCAccordionRef = HTMLElement & {
+  multiple: boolean;
+};
+
+/** Public API surface of `<rc-listbox>`. */
+export type RCListboxRef = HTMLElement & {
+  multiple: boolean;
+  checkmark: boolean;
+  filterStrategy: 'prefix' | 'contains' | ((label: string, query: string) => boolean);
+  value: RCSelectValue;
+  defaultValue: RCSelectValue | undefined;
+  options: RCListboxOption[];
+  readonly allOptions: ReadonlyArray<RCListboxOption>;
+  readonly filteredOptions: ReadonlyArray<RCListboxOption>;
+  readonly selectedValues: string[];
+  readonly navigableItems: Element[];
+  toggleOption(value: string): void;
+  clearSelection(): void;
+  filterOptions(text: string): void;
+  clearFilter(): void;
+  setCreateOption(label: string | null): void;
+  setSelectedValues(values: string[]): void;
+  appendOption(opt: RCListboxOption): void;
+};
+
+/** Public API surface of `<rc-select>`. */
+export type RCSelectRef = HTMLElement & {
+  open: boolean;
+  multiple: boolean;
+  disabled: boolean;
+  placeholder: string;
+  display: 'auto' | 'chips' | 'compact';
+  popupMode: 'popover' | 'dialog';
+  dialogConfirmLabel: string;
+  dialogCancelLabel: string;
+  dialogCancelButton: 'visible' | 'hidden';
+  value: RCSelectValue;
+  defaultValue: RCSelectValue | undefined;
+  options: RCSelectOption[] | undefined;
+  readonly selectedValues: string[];
+  openPopup(): void;
+  closePopup(returnFocus?: boolean): void;
+};
+
+/** Public API surface of `<rc-combobox>`. */
+export type RCComboboxRef = RCSelectRef & {
+  allowCreate: boolean;
+  filterStrategy: 'prefix' | 'contains' | ((label: string, query: string) => boolean);
+};
+
+/** Public API surface of `<rc-dialog>`. */
+export type RCDialogResizeOrigin =
+  | ''
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export type RCDialogRef = HTMLElement & {
+  open: boolean | undefined;
+  defaultOpen: boolean;
+  variant: 'standard' | 'fullscreen';
+  movable: boolean;
+  moveHandle: string;
+  moveBounds: 'viewport' | 'parent';
+  moveStep: number;
+  resize: 'none' | 'both' | 'horizontal' | 'vertical';
+  resizeOrigin: RCDialogResizeOrigin;
+  resizeHandle: string;
+  resizeThreshold: number;
+  resizeStep: number;
+  closedBy: 'any' | 'closerequest' | 'none' | '';
+  lightDismiss: boolean;
+  readonly returnValue: string;
+  showModal(): void;
+  show(): void;
+  close(returnValue?: string): void;
+  requestClose(returnValue?: string): void;
+};
+
+/** Public API surface of `<rc-bottom-sheet>`. */
+export type RCBottomSheetRef = RCDialogRef & {
+  snapPoints: string;
+  swipeDismiss: boolean;
+  swipeVelocity: number;
+  snapTo(index: number, behavior?: 'animated' | 'instant'): void;
+};
+
+/** Public API surface of `<rc-menu>`. */
+export type RCMenuRef = HTMLElement & {
+  label: string;
+};
+
+/** Public API surface of `<rc-adaptive-menu>`. */
+export type RCAdaptiveMenuRef = HTMLElement & {
+  label: string;
+  maxShown: number;
+  open: boolean;
+  defaultOpen: boolean;
+  orientation: 'horizontal' | 'vertical';
+  overflowLabel: string;
+  readonly $actions: HTMLElement[];
+  readonly $promotedActions: HTMLElement[];
+  readonly $overflowedActions: HTMLElement[];
+  openMenu(focus?: 'first' | 'last' | 'none'): void;
+  closeMenu(returnFocus?: boolean): void;
+  toggleMenu(focus?: 'first' | 'last' | 'none'): void;
+};
+
+/** Public API surface of `<rc-menu-button>`. */
+export type RCMenuButtonPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end';
+
+export type RCMenuButtonRef = HTMLElement & {
+  open: boolean | undefined;
+  defaultOpen: boolean;
+  orientation: 'horizontal' | 'vertical' | undefined;
+  placement: RCMenuButtonPlacement;
+};
+
+/** Public API surface of `<rc-fab-menu>`. */
+export type RCFabMenuRef = RCMenuButtonRef & {
+  position: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+};
+
+export type RCFabMenuToggleDetail = {
+  open: boolean;
+};
+
+/** Public API surface of `<rc-navigation-bar>`. */
+export type RCNavigationBarRef = HTMLElement & {
+  activeSelector: string;
+  indicatorTarget: string;
+};
+
+/** Public API surface of `<rc-navigation-rail>`. */
+export type RCNavigationRailRef = RCNavigationBarRef & {
+  expanded: boolean;
+  defaultExpanded: boolean;
+  expand(): void;
+  collapse(): void;
+  toggleExpanded(): void;
+};
+
+export type RCNavigationRailToggleDetail = {
+  expanded: boolean;
+};
+
+/** Public API surface of `<rc-menubar>`. */
+export type RCMenubarRef = HTMLElement & {
+  label: string;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-toolbar>`. */
+export type RCToolbarRef = HTMLElement & {
+  label: string;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-splitter>`. */
+export type RCSplitterRef = HTMLElement & {
+  label: string;
+  orientation: 'horizontal' | 'vertical';
+  mode: 'length' | 'percent' | 'fixed';
+  step: number;
+  min: number;
+  max: number | undefined;
+  value: number;
+  defaultValue: number | undefined;
+  fixed: boolean;
+  collapsible: boolean;
+  snapPoints: string;
+  swipeVelocity: number;
+  snapTo(index: number, behavior?: 'animated' | 'instant'): void;
+};
+
+/** Public API surface of `<rc-slider>`. */
+export type RCSliderRef = HTMLElement & {
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+  defaultValue: number | undefined;
+  disabled: boolean;
+  readonly: boolean;
+  display: 'float' | 'inline-start' | 'inline-end' | null;
+  valueText: string;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-progress>`. */
+export type RCProgressRef = HTMLElement & {
+  readonly max: number;
+  value: number;
+  defaultValue: number | undefined;
+  indeterminate: boolean;
+  disabled: boolean;
+  display: 'inline-start' | 'inline-end' | 'overlay' | null;
+  valueText: string;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-range-slider>`. */
+export type RCRangeSliderRef = HTMLElement & {
+  min: number;
+  max: number;
+  step: number;
+  value: [number, number];
+  defaultValue: [number, number] | undefined;
+  disabled: boolean;
+  readonly: boolean;
+  lowLabel: string;
+  highLabel: string;
+  lowValueText: string;
+  highValueText: string;
+  display: 'float' | 'inline-start' | 'inline-end' | null;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-transfer-list>`. */
+export type RCTransferListRef = HTMLElement & {
+  multiple: boolean;
+  compact: boolean;
+  availableLabel: string;
+  selectedLabel: string;
+  available: RCTransferListOption[];
+  selected: RCTransferListOption[];
+  defaultSelected: RCTransferListOption[] | undefined;
+  addSelected(): void;
+  addAll(): void;
+  removeSelected(): void;
+  clearSelected(): void;
+  moveSelected(delta: number): void;
+};
+
+/** Public API surface of `<rc-textarea>`. */
+export type RCTextareaRef = HTMLElement & {
+  value: string;
+  defaultValue: string | undefined;
+  plugin: RCTextareaPlugin | null;
+  lineNumbers: boolean;
+  gutter: boolean;
+  wordWrap: boolean;
+  autoGrow: boolean;
+  readOnly: boolean;
+  usePlugin(plugin: RCTextareaPlugin): void;
+  removePlugin(): void;
+  wrapSelection(prefix: string, suffix: string): void;
+  replaceSelection(text: string): void;
+};
+
+/** Public API surface of `<rc-markdown-editor>`. */
+export type RCMarkdownEditorRef = HTMLElement & {
+  value: string;
+  defaultValue: string;
+  toolbar: boolean;
+  sourceMode: boolean;
+  defaultSourceMode: boolean;
+  readOnly: boolean;
+};
+
+/** Public API surface of `<rc-virtual-canvas>`. */
+export type RCVirtualCanvasRef = HTMLElement & {
+  contentWidth: number;
+  contentHeight: number;
+  autoResizeCanvas: boolean;
+  renderMode: 'continuous' | 'viewport-change' | 'manual';
+  imageRendering: 'auto' | 'crisp-edges' | 'pixelated';
+  readonly canvasScaleX: number;
+  readonly canvasScaleY: number;
+  getViewRect(): RCVirtualCanvasViewRect;
+  scrollToContent(x: number, y: number, options?: ScrollToOptions): void;
+  centerOnContent(x: number, y: number, options?: ScrollToOptions): void;
+  clientToContent(clientX: number, clientY: number): Readonly<{ x: number; y: number }>;
+  contentToClient(x: number, y: number): Readonly<{ x: number; y: number }>;
+  requestRender(reason?: 'animation-frame' | 'viewport-change' | 'manual'): void;
+};
+
+/** Public API surface of `<rc-app-bar>`. */
+export type RCAppBarRef = HTMLElement & {
+  variant: 'compact' | 'expanded';
+  scrollBehavior: 'pinned' | 'collapse' | 'hide';
+  scrolled: boolean | undefined;
+  scrollTarget: Element | Document | Window | string | null;
+  scrollThreshold: number;
+};
+
+/** Public API surface of `<rc-search-bar>`. */
+export type RCSearchBarRef = HTMLElement & {
+  variant: 'bar' | 'view';
+  open: boolean;
+  defaultOpen: boolean;
+  value: string;
+  defaultValue: string | undefined;
+  debounce: number;
+  clearLabel: string;
+  placeholder: string | undefined;
+  showView(): void;
+  closeView(): void;
+  toggleView(): void;
+};
+
+export type RCFieldControl = HTMLInputElement | HTMLTextAreaElement;
+
+/** Public API surface of `<rc-field>`. */
+export type RCFieldRef = HTMLElement & {
+  counter: boolean;
+  invalid: boolean;
+  readonly control: RCFieldControl | null;
+  focus(options?: FocusOptions): void;
+  blur(): void;
+  sync(): void;
+};
+
+/** Public API surface of `<rc-carousel>`. */
+export type RCCarouselRef = HTMLElement & {
+  activeIndex: number | undefined;
+  defaultActiveIndex: number;
+  loop: boolean;
+  navigation: boolean;
+  pagination: boolean;
+  mouseDragging: boolean;
+  next(): void;
+  previous(): void;
+  goToIndex(index: number, instant?: boolean): void;
+};
+
+/** Public API surface of `<rc-carousel-item>`. */
+export type RCCarouselItemRef = HTMLElement;
+
+// ── React JSX declarations ───────────────────────────────────────────────────
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'rc-disclosure': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCDisclosureRef>,
+        RCDisclosureRef
+      > & {
+        open?: boolean;
+      };
+
+      'rc-accordion': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCAccordionRef>,
+        RCAccordionRef
+      > & {
+        name?: string;
+        multiple?: boolean;
+      };
+
+      'rc-button': React.DetailedHTMLProps<React.HTMLAttributes<RCButtonRef>, RCButtonRef> & {
+        disabled?: boolean;
+        pending?: boolean;
+        progress?: boolean;
+        'progress-value'?: number | string;
+        toggle?: boolean;
+        selected?: boolean;
+        'default-selected'?: boolean;
+        'icon-only'?: boolean;
+        'full-width'?: boolean;
+      };
+
+      'rc-card': React.DetailedHTMLProps<React.HTMLAttributes<RCCardRef>, RCCardRef> & {
+        orientation?: RCCardOrientation;
+        selected?: boolean;
+        disabled?: boolean;
+        interactive?: boolean;
+        'action-target'?: string;
+      };
+
+      'rc-scroller': React.DetailedHTMLProps<React.HTMLAttributes<RCScrollerRef>, RCScrollerRef> & {
+        axis?: RCScrollerAxis;
+        layout?: RCScrollerLayout;
+      };
+
+      'rc-carousel': React.DetailedHTMLProps<React.HTMLAttributes<RCCarouselRef>, RCCarouselRef> & {
+        'active-index'?: number | string;
+        'default-active-index'?: number | string;
+        loop?: boolean;
+        navigation?: boolean;
+        pagination?: boolean;
+        'mouse-dragging'?: boolean;
+        'onrc-carousel-change'?: (event: CustomEvent<RCCarouselChangeDetail>) => void;
+      };
+
+      'rc-carousel-item': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCCarouselItemRef>,
+        RCCarouselItemRef
+      >;
+
+      'rc-list': React.DetailedHTMLProps<React.HTMLAttributes<RCListRef>, RCListRef> & {
+        variant?: RCListVariant;
+        selection?: RCListSelection;
+      };
+
+      'rc-list-item': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCListItemRef>,
+        RCListItemRef
+      > & {
+        selected?: boolean;
+        disabled?: boolean;
+        interactive?: boolean;
+        'action-target'?: string;
+      };
+
+      'rc-switch': React.DetailedHTMLProps<React.HTMLAttributes<RCSwitchRef>, RCSwitchRef> & {
+        checked?: boolean;
+        'default-checked'?: boolean;
+        disabled?: boolean;
+        icons?: boolean;
+        'show-only-selected-icon'?: boolean;
+      };
+
+      'rc-segmented-button': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCSegmentedButtonRef>,
+        RCSegmentedButtonRef
+      > & {
+        value?: string;
+        'default-value'?: string;
+        disabled?: boolean;
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-chip': React.DetailedHTMLProps<React.HTMLAttributes<RCChipRef>, RCChipRef> & {
+        variant?: RCChipVariant;
+        selected?: boolean;
+        'default-selected'?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        removable?: boolean;
+      };
+
+      'rc-chip-group': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCChipGroupRef>,
+        RCChipGroupRef
+      > & {
+        layout?: RCChipGroupLayout;
+        'max-rows'?: number | string;
+        kind?: RCChipGroupKind;
+        selection?: RCChipGroupSelection;
+        expanded?: boolean;
+        'default-expanded'?: boolean;
+        label?: string;
+        'show-all-label'?: string;
+        'show-less-label'?: string;
+      };
+
+      'rc-snackbar': React.DetailedHTMLProps<React.HTMLAttributes<RCSnackbarRef>, RCSnackbarRef> & {
+        open?: boolean;
+        message?: string;
+        'action-label'?: string;
+        duration?: number | string;
+        'queue-policy'?: RCSnackbarQueuePolicy;
+      };
+
+      'rc-listbox': React.DetailedHTMLProps<React.HTMLAttributes<RCListboxRef>, RCListboxRef> & {
+        multiple?: boolean;
+        checkmark?: boolean;
+        'filter-strategy'?: 'prefix' | 'contains';
+        value?: RCSelectValue;
+        'default-value'?: RCSelectValue;
+        options?: RCListboxOption[];
+      };
+
+      'rc-select': React.DetailedHTMLProps<React.HTMLAttributes<RCSelectRef>, RCSelectRef> & {
+        open?: boolean;
+        multiple?: boolean;
+        disabled?: boolean;
+        placeholder?: string;
+        display?: 'auto' | 'chips' | 'compact';
+        'popup-mode'?: 'popover' | 'dialog';
+        'dialog-confirm-label'?: string;
+        'dialog-cancel-label'?: string;
+        'dialog-cancel-button'?: 'visible' | 'hidden';
+        value?: RCSelectValue;
+        'default-value'?: RCSelectValue;
+        options?: RCSelectOption[];
+      };
+
+      'rc-combobox': React.DetailedHTMLProps<React.HTMLAttributes<RCComboboxRef>, RCComboboxRef> & {
+        open?: boolean;
+        multiple?: boolean;
+        disabled?: boolean;
+        placeholder?: string;
+        display?: 'auto' | 'chips' | 'compact';
+        'allow-create'?: boolean;
+        'filter-strategy'?: 'prefix' | 'contains';
+        'popup-mode'?: 'popover' | 'dialog';
+        'dialog-confirm-label'?: string;
+        'dialog-cancel-label'?: string;
+        'dialog-cancel-button'?: 'visible' | 'hidden';
+        value?: RCSelectValue;
+        'default-value'?: RCSelectValue;
+        options?: RCSelectOption[];
+      };
+
+      'rc-dialog': React.DetailedHTMLProps<React.HTMLAttributes<RCDialogRef>, RCDialogRef> & {
+        open?: boolean;
+        'default-open'?: boolean;
+        variant?: 'standard' | 'fullscreen';
+        movable?: boolean;
+        'move-handle'?: string;
+        'move-bounds'?: 'viewport' | 'parent';
+        'move-step'?: number | string;
+        resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+        'resize-origin'?: RCDialogResizeOrigin;
+        'resize-handle'?: string;
+        'resize-threshold'?: number | string;
+        'resize-step'?: number | string;
+        'closed-by'?: 'any' | 'closerequest' | 'none';
+        'light-dismiss'?: boolean;
+      };
+
+      'rc-bottom-sheet': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCBottomSheetRef>,
+        RCBottomSheetRef
+      > & {
+        open?: boolean;
+        'default-open'?: boolean;
+        'light-dismiss'?: boolean;
+        resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+        'resize-origin'?: RCDialogResizeOrigin;
+        'resize-handle'?: string;
+        'resize-threshold'?: number | string;
+        'resize-step'?: number | string;
+        'snap-points'?: string;
+        'swipe-dismiss'?: boolean;
+        'swipe-velocity'?: number | string;
+        'onrc-bottom-sheet-resize-start'?: (
+          event: CustomEvent<RCBottomSheetResizeStartDetail>,
+        ) => void;
+      };
+
+      'rc-menu': React.DetailedHTMLProps<React.HTMLAttributes<RCMenuRef>, RCMenuRef> & {
+        label?: string;
+      };
+
+      'rc-adaptive-menu': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCAdaptiveMenuRef>,
+        RCAdaptiveMenuRef
+      > & {
+        label?: string;
+        'max-shown'?: number | string;
+        open?: boolean;
+        'default-open'?: boolean;
+        orientation?: 'horizontal' | 'vertical';
+        'overflow-label'?: string;
+        'onrc-adaptive-menu-toggle'?: (event: CustomEvent<RCAdaptiveMenuToggleDetail>) => void;
+      };
+
+      'rc-menu-button': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCMenuButtonRef>,
+        RCMenuButtonRef
+      > & {
+        open?: boolean;
+        'default-open'?: boolean;
+        orientation?: 'horizontal' | 'vertical';
+        placement?: RCMenuButtonPlacement;
+        'icon-only'?: boolean;
+      };
+
+      'rc-fab-menu': React.DetailedHTMLProps<React.HTMLAttributes<RCFabMenuRef>, RCFabMenuRef> & {
+        open?: boolean;
+        'default-open'?: boolean;
+        placement?: RCMenuButtonPlacement;
+        position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+      };
+
+      'rc-navigation-bar': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCNavigationBarRef>,
+        RCNavigationBarRef
+      > & {
+        'active-selector'?: string;
+        'indicator-target'?: string;
+      };
+
+      'rc-navigation-rail': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCNavigationRailRef>,
+        RCNavigationRailRef
+      > & {
+        expanded?: boolean;
+        'default-expanded'?: boolean;
+        'active-selector'?: string;
+        'indicator-target'?: string;
+      };
+
+      'rc-menubar': React.DetailedHTMLProps<React.HTMLAttributes<RCMenubarRef>, RCMenubarRef> & {
+        label?: string;
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-toolbar': React.DetailedHTMLProps<React.HTMLAttributes<RCToolbarRef>, RCToolbarRef> & {
+        label?: string;
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-slider': React.DetailedHTMLProps<React.HTMLAttributes<RCSliderRef>, RCSliderRef> & {
+        min?: number | string;
+        max?: number | string;
+        step?: number | string;
+        value?: number | string;
+        'default-value'?: number | string;
+        disabled?: boolean;
+        readonly?: boolean;
+        display?: 'float' | 'inline-start' | 'inline-end';
+        'value-text'?: string;
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-progress': React.DetailedHTMLProps<React.HTMLAttributes<RCProgressRef>, RCProgressRef> & {
+        value?: number | string;
+        'default-value'?: number | string;
+        indeterminate?: boolean;
+        disabled?: boolean;
+        display?: 'inline-start' | 'inline-end' | 'overlay';
+        'value-text'?: string;
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-range-slider': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCRangeSliderRef>,
+        RCRangeSliderRef
+      > & {
+        min?: number | string;
+        max?: number | string;
+        step?: number | string;
+        value?: [number, number];
+        'default-value'?: [number, number];
+        disabled?: boolean;
+        readonly?: boolean;
+        'low-label'?: string;
+        'high-label'?: string;
+        'low-value-text'?: string;
+        'high-value-text'?: string;
+        display?: 'float' | 'inline-start' | 'inline-end';
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-transfer-list': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCTransferListRef>,
+        RCTransferListRef
+      > & {
+        multiple?: boolean;
+        compact?: boolean;
+        'available-label'?: string;
+        'selected-label'?: string;
+        available?: RCTransferListOption[];
+        selected?: RCTransferListOption[];
+        'default-selected'?: RCTransferListOption[];
+      };
+
+      'rc-splitter': React.DetailedHTMLProps<React.HTMLAttributes<RCSplitterRef>, RCSplitterRef> & {
+        label?: string;
+        orientation?: 'horizontal' | 'vertical';
+        mode?: 'length' | 'percent' | 'fixed';
+        step?: number | string;
+        min?: number | string;
+        max?: number | string;
+        value?: number | string;
+        'default-value'?: number | string;
+        fixed?: boolean;
+        collapsible?: boolean;
+        'snap-points'?: string;
+        'swipe-velocity'?: number | string;
+      };
+
+      'rc-editor-toolbar': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & {
+        label?: string;
+      };
+
+      'rc-markdown-editor': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCMarkdownEditorRef>,
+        RCMarkdownEditorRef
+      > & {
+        value?: string;
+        'default-value'?: string;
+        toolbar?: boolean;
+        'source-mode'?: boolean;
+        'default-source-mode'?: boolean;
+        'read-only'?: boolean;
+      };
+
+      'rc-fab': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+        position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+        'scroll-reveal'?: boolean;
+      };
+
+      'rc-app-bar': React.DetailedHTMLProps<React.HTMLAttributes<RCAppBarRef>, RCAppBarRef> & {
+        variant?: 'compact' | 'expanded';
+        'scroll-behavior'?: 'pinned' | 'collapse' | 'hide';
+        'scroll-target'?: string;
+        'scroll-threshold'?: number | string;
+        scrollTarget?: Element | Document | Window | string | null;
+      };
+
+      'rc-search-bar': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCSearchBarRef>,
+        RCSearchBarRef
+      > & {
+        variant?: 'bar' | 'view';
+        open?: boolean;
+        'default-open'?: boolean;
+        debounce?: number | string;
+        'clear-label'?: string;
+        placeholder?: string;
+        'default-value'?: string;
+        value?: string;
+      };
+
+      'rc-field': React.DetailedHTMLProps<React.HTMLAttributes<RCFieldRef>, RCFieldRef> & {
+        counter?: boolean;
+        invalid?: boolean;
+      };
+
+      'rc-virtual-canvas': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCVirtualCanvasRef>,
+        RCVirtualCanvasRef
+      > & {
+        'content-width'?: number | string;
+        'content-height'?: number | string;
+        'auto-resize-canvas'?: boolean;
+        'render-mode'?: 'continuous' | 'viewport-change' | 'manual';
+        'image-rendering'?: 'auto' | 'crisp-edges' | 'pixelated';
+      };
+
+      'rc-textarea': React.DetailedHTMLProps<React.HTMLAttributes<RCTextareaRef>, RCTextareaRef> & {
+        value?: string;
+        'default-value'?: string;
+        plugin?: RCTextareaPlugin | null;
+        'line-numbers'?: boolean;
+        gutter?: boolean;
+        'word-wrap'?: boolean;
+        'auto-grow'?: boolean;
+        'read-only'?: boolean;
+      };
+    }
+  }
+}