fix(components): export compound component props (DS-5287) (#424)

Author: KamilEmeleev

packages/components/src/components/Accordion/index.ts

@@ -2,3 +2,5 @@ export * from './Accordion';
 export * from './components/AccordionGroup';
 export * from './AccordionStateContext';
 export * from './types';
+export type { AccordionSummaryProps } from './components/AccordionSummary';
+export type { AccordionDetailsProps } from './components/AccordionDetails';

packages/components/src/components/Autocomplete/types.ts

@@ -9,6 +9,7 @@ import type {
 import type { DataAttributeProps } from '@koobiq/react-core';
 import type { AriaComboBoxProps } from '@koobiq/react-primitives';
 
+import type { ItemProps, SectionProps } from '../Collections';
 import type { DropdownFooterProps } from '../DropdownFooter';
 import {
   formFieldControlGroupPropVariant,
@@ -27,7 +28,8 @@ import type {
   FormFieldProps,
 } from '../FormField';
 import type { IconButtonProps } from '../IconButton';
-import type { ListInnerProps } from '../List';
+import type { ListInnerProps, ListItemTextProps } from '../List';
+import type { ListItemAddonProps } from '../List/components';
 import type { PopoverProps } from '../Popover';
 
 export const autocompletePropLabelPlacement = formFieldPropLabelPlacement;
@@ -39,6 +41,12 @@ export type AutocompletePropLabelAlign = FormFieldPropLabelAlign;
 export const autocompletePropVariant = formFieldControlGroupPropVariant;
 export type AutocompleteInputPropVariant = FormFieldControlGroupPropVariant;
 
+export type AutocompleteItemProps<T extends object = object> = ItemProps<T>;
+export type AutocompleteSectionProps<T extends object = object> =
+  SectionProps<T>;
+export type AutocompleteItemTextProps = ListItemTextProps;
+export type AutocompleteItemAddonProps = ListItemAddonProps;
+
 export type AutocompleteProps<T extends object = object> = {
   /** Additional CSS-classes. */
   className?: string;

packages/components/src/components/ContentPanel/types.ts

@@ -8,7 +8,16 @@ import type {
 import type { DataAttributeProps } from '@koobiq/react-core';
 import type { TransitionProps } from 'react-transition-group/Transition';
 
-import type { DialogProps } from '../Dialog';
+import type {
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogProps,
+} from '../Dialog';
+
+export type ContentPanelHeaderProps = DialogHeaderProps;
+export type ContentPanelBodyProps = DialogBodyProps;
+export type ContentPanelFooterProps = DialogFooterProps;
 
 export type ContentPanelSize = number | `${number}` | `${number}%`;
 

packages/components/src/components/Form/components/FormCaption/FormCaption.tsx

@@ -31,5 +31,5 @@ export const FormCaption = polymorphicForwardRef<'div', FormCaptionBaseProps>(
   )
 );
 
-export type FormCationProps<As extends ElementType = 'div'> =
+export type FormCaptionProps<As extends ElementType = 'div'> =
   ComponentPropsWithRef<typeof FormCaption<As>>;

packages/components/src/components/Form/index.ts

@@ -1,3 +1,8 @@
 export * from './Form';
 export * from './FormContext';
 export * from './types';
+export type {
+  FormGroupProps,
+  FormCaptionProps,
+  FormActionsProps,
+} from './components';

packages/components/src/components/List/types.ts

@@ -10,8 +10,16 @@ import type {
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaListBoxProps } from '@koobiq/react-primitives';
 
+import type { DividerProps, ItemProps, SectionProps } from '../Collections';
 import type { TypographyProps } from '../Typography';
 
+import type { ListItemAddonProps as ListItemAddonBaseProps } from './components';
+
+export type ListItemProps<T> = ItemProps<T>;
+export type ListSectionProps<T> = SectionProps<T>;
+export type ListDividerProps = DividerProps;
+export type ListItemAddonProps = ListItemAddonBaseProps;
+
 export type ListProps<T> = ExtendableProps<
   {
     /** Additional CSS-classes. */

packages/components/src/components/Menu/types.ts

@@ -1,4 +1,5 @@
 import type {
+  ComponentProps,
   ComponentPropsWithRef,
   ComponentRef,
   ElementType,
@@ -9,12 +10,28 @@ import type {
   ReactNode,
 } from 'react';
 
-import type { ExtendableProps } from '@koobiq/react-core';
+import type { ExtendableProps, Pressable } from '@koobiq/react-core';
 import type { ButtonOptions, AriaMenuProps } from '@koobiq/react-primitives';
 
+import type {
+  DividerProps,
+  HeaderProps,
+  ItemProps,
+  SectionProps,
+} from '../Collections';
 import type { DropdownFooterProps } from '../DropdownFooter';
+import type { ListItemTextProps } from '../List';
+import type { ListItemAddonProps } from '../List/components';
 import type { PopoverProps, PopoverPropPlacement } from '../Popover';
 
+export type MenuItemProps<T> = ItemProps<T>;
+export type MenuSectionProps<T> = SectionProps<T>;
+export type MenuHeaderProps = HeaderProps;
+export type MenuDividerProps = DividerProps;
+export type MenuItemTextProps = ListItemTextProps;
+export type MenuItemAddonProps = ListItemAddonProps;
+export type MenuControlProps = ComponentProps<typeof Pressable>;
+
 export type MenuPropControl = (
   props: Omit<ButtonOptions, 'elementType'> & {
     ref?: Ref<HTMLButtonElement>;

packages/components/src/components/Modal/types.ts

@@ -9,7 +9,16 @@ import type {
 import type { ButtonOptions } from '@koobiq/react-primitives';
 
 import type { BackdropProps } from '../Backdrop';
-import type { DialogProps } from '../Dialog';
+import type {
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogProps,
+} from '../Dialog';
+
+export type ModalHeaderProps = DialogHeaderProps;
+export type ModalBodyProps = DialogBodyProps;
+export type ModalFooterProps = DialogFooterProps;
 
 export const modalPropSize = ['small', 'medium', 'large'] as const;
 

packages/components/src/components/Navbar/index.ts

@@ -1,2 +1,9 @@
 export * from './Navbar';
 export * from './types';
+export type {
+  NavbarHeaderProps,
+  NavbarBodyProps,
+  NavbarFooterProps,
+  NavbarItemProps,
+  NavbarAppItemProps,
+} from './components';

packages/components/src/components/Popover/types.ts

@@ -14,7 +14,16 @@ import type {
 } from '@koobiq/react-primitives';
 import type { TransitionProps } from 'react-transition-group/Transition';
 
-import type { DialogProps } from '../Dialog';
+import type {
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogProps,
+} from '../Dialog';
+
+export type PopoverHeaderProps = DialogHeaderProps;
+export type PopoverBodyProps = DialogBodyProps;
+export type PopoverFooterProps = DialogFooterProps;
 
 export type PopoverPropContent =
   | ReactNode