@rcarls/rc-webcomponents 0.3.2 → 0.4.1

package/src/react.d.ts

@@ -69,9 +69,7 @@ export type RCListboxActionChangeDetail<Action extends string = string> = RCSele
   action: Action;
 };
 
-export type RCListboxChangeDetail =
-  | RCListboxSelectChangeDetail
-  | RCListboxActionChangeDetail;
+export type RCListboxChangeDetail = RCListboxSelectChangeDetail | RCListboxActionChangeDetail;
 
 export type RCComboboxCreateDetail = {
   text: string;
@@ -86,6 +84,18 @@ 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 RCMenuActivateDetail = {
   item: HTMLElement;
   value: string;
@@ -193,8 +203,108 @@ export type RCTextareaSelectDetail = {
   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 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 RCCardRef = 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;
+};
+
+/** 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;
@@ -249,6 +359,17 @@ export type RCComboboxRef = RCSelectRef & {
 };
 
 /** 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;
@@ -257,6 +378,8 @@ export type RCDialogRef = HTMLElement & {
   moveBounds: 'viewport' | 'parent';
   moveStep: number;
   resize: 'none' | 'both' | 'horizontal' | 'vertical';
+  resizeOrigin: RCDialogResizeOrigin;
+  resizeHandle: string;
   resizeThreshold: number;
   resizeStep: number;
   closedBy: 'any' | 'closerequest' | 'none' | '';
@@ -268,6 +391,14 @@ export type RCDialogRef = HTMLElement & {
   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;
@@ -295,6 +426,34 @@ export type RCMenuButtonRef = HTMLElement & {
   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;
@@ -311,11 +470,17 @@ export type RCToolbarRef = HTMLElement & {
 export type RCSplitterRef = HTMLElement & {
   label: string;
   orientation: 'horizontal' | 'vertical';
-  mode: 'length' | 'percent';
+  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>`. */
@@ -420,11 +585,17 @@ export type RCAppBarRef = HTMLElement & {
 
 /** 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;
 };
 
 // ── React JSX declarations ───────────────────────────────────────────────────
@@ -432,16 +603,76 @@ export type RCSearchBarRef = HTMLElement & {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'rc-disclosure': React.DetailedHTMLProps<React.HTMLAttributes<RCDisclosureRef>, RCDisclosureRef> & {
+      'rc-disclosure': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCDisclosureRef>,
+        RCDisclosureRef
+      > & {
         open?: boolean;
         fragment?: boolean;
       };
 
-      'rc-accordion': React.DetailedHTMLProps<React.HTMLAttributes<RCAccordionRef>, RCAccordionRef> & {
+      '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> & {
+        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-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;
@@ -483,23 +714,70 @@ declare module 'react' {
         '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;
+      };
+
       'rc-menu': React.DetailedHTMLProps<React.HTMLAttributes<RCMenuRef>, RCMenuRef> & {
         label?: string;
       };
 
-      'rc-menu-button': React.DetailedHTMLProps<React.HTMLAttributes<RCMenuButtonRef>, RCMenuButtonRef> & {
+      'rc-menu-button': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCMenuButtonRef>,
+        RCMenuButtonRef
+      > & {
         open?: boolean;
         'default-open'?: boolean;
         orientation?: 'horizontal' | 'vertical';
         placement?: RCMenuButtonPlacement;
       };
 
+      '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';
@@ -523,7 +801,10 @@ declare module 'react' {
         orientation?: 'horizontal' | 'vertical';
       };
 
-      'rc-range-slider': React.DetailedHTMLProps<React.HTMLAttributes<RCRangeSliderRef>, RCRangeSliderRef> & {
+      'rc-range-slider': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCRangeSliderRef>,
+        RCRangeSliderRef
+      > & {
         min?: number | string;
         max?: number | string;
         step?: number | string;
@@ -538,7 +819,10 @@ declare module 'react' {
         orientation?: 'horizontal' | 'vertical';
       };
 
-      'rc-transfer-list': React.DetailedHTMLProps<React.HTMLAttributes<RCTransferListRef>, RCTransferListRef> & {
+      'rc-transfer-list': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCTransferListRef>,
+        RCTransferListRef
+      > & {
         multiple?: boolean;
         compact?: boolean;
         'available-label'?: string;
@@ -551,18 +835,29 @@ declare module 'react' {
       'rc-splitter': React.DetailedHTMLProps<React.HTMLAttributes<RCSplitterRef>, RCSplitterRef> & {
         label?: string;
         orientation?: 'horizontal' | 'vertical';
-        mode?: 'length' | 'percent';
+        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> & {
+      'rc-editor-toolbar': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & {
         label?: string;
       };
 
-      'rc-markdown-editor': React.DetailedHTMLProps<React.HTMLAttributes<RCMarkdownEditorRef>, RCMarkdownEditorRef> & {
+      'rc-markdown-editor': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCMarkdownEditorRef>,
+        RCMarkdownEditorRef
+      > & {
         value?: string;
         'default-value'?: string;
         toolbar?: boolean;
@@ -584,7 +879,13 @@ declare module 'react' {
         scrollTarget?: Element | Document | Window | string | null;
       };
 
-      'rc-search-bar': React.DetailedHTMLProps<React.HTMLAttributes<RCSearchBarRef>, RCSearchBarRef> & {
+      '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;
@@ -592,7 +893,10 @@ declare module 'react' {
         value?: string;
       };
 
-      'rc-virtual-canvas': React.DetailedHTMLProps<React.HTMLAttributes<RCVirtualCanvasRef>, RCVirtualCanvasRef> & {
+      'rc-virtual-canvas': React.DetailedHTMLProps<
+        React.HTMLAttributes<RCVirtualCanvasRef>,
+        RCVirtualCanvasRef
+      > & {
         'content-width'?: number | string;
         'content-height'?: number | string;
         'auto-resize-canvas'?: boolean;