@koobiq/react-components 0.0.1-beta.12 → 0.0.1-beta.14

package/dist/components/Alert/Alert.js

@@ -42,7 +42,7 @@ const Alert = polymorphicForwardRef(
       {
         "aria-label": stringFormatter.format("close"),
         variant: "fade-contrast",
-        onClick: onClose,
+        onPress: onClose,
         className: s.closeIcon
       },
       slotProps?.closeIcon

package/dist/components/Alert/types.d.ts

@@ -34,7 +34,7 @@ export type AlertBaseProps = {
     /** Override default icon. */
     icon?: ReactNode;
     /** A callback function called when the user clicks the alert's close button. */
-    onClose?: IconButtonProps['onClick'];
+    onClose?: IconButtonProps['onPress'];
     slotProps?: {
         content?: ComponentPropsWithRef<'div'>;
         statusIcon?: ComponentPropsWithRef<'div'>;

package/dist/components/Button/types.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
-import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { HoverEvent, UseButtonProps } from '@koobiq/react-primitives';
 export declare const buttonPropVariant: readonly ["contrast-filled", "contrast-transparent", "fade-contrast-filled", "fade-contrast-outline", "fade-theme-outline", "theme-transparent"];
 export type ButtonPropVariant = (typeof buttonPropVariant)[number];
-export type ButtonPropOnClick = ButtonOptions['onPress'];
-export type ButtonBaseProps = {
+export type ButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /**
@@ -43,5 +43,4 @@ export type ButtonBaseProps = {
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
     onHoverEnd?: (e: HoverEvent) => void;
-    onClick?: ButtonPropOnClick;
-};
+}, UseButtonProps>;

package/dist/components/Collections/Item.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import type { ItemProps as AriaItemProps } from '@koobiq/react-primitives';
+export type ItemProps<T> = AriaItemProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+};
+export declare function Item<T>(props: ItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Item {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Item.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Item as Item$1 } from "@koobiq/react-primitives";
+const ItemInner = Item$1;
+function Item(props) {
+  return /* @__PURE__ */ jsx(Item$1, { ...props });
+}
+Item.getCollectionNode = ItemInner.getCollectionNode;
+export {
+  Item
+};

package/dist/components/{List/ListSection.d.ts → Collections/Section.d.ts}

@@ -1,16 +1,16 @@
 import type { ReactNode } from 'react';
-import type { SectionProps } from '@koobiq/react-primitives';
-export type ListSectionProps<T> = {
+import type { SectionProps as AriaSectionProps } from '@koobiq/react-primitives';
+export type SectionProps<T> = {
     /** Rendered contents of the section, e.g. a header. */
     title?: ReactNode;
     /** An accessibility label for the section. */
     'aria-label'?: string;
     /** Static child items or a function to render children. */
-    children: SectionProps<T>['children'];
+    children: AriaSectionProps<T>['children'];
     /** Item objects in the section. */
-    items?: SectionProps<T>['items'];
+    items?: AriaSectionProps<T>['items'];
 };
-export declare function ListSection<T>(props: ListSectionProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace ListSection {
+export declare function Section<T>(props: SectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Section {
     var getCollectionNode: unknown;
 }

package/dist/components/Collections/Section.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Section as Section$1 } from "@koobiq/react-primitives";
+const SectionInner = Section$1;
+function Section(props) {
+  return /* @__PURE__ */ jsx(Section$1, { ...props });
+}
+Section.getCollectionNode = SectionInner.getCollectionNode;
+export {
+  Section
+};

package/dist/components/Collections/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Section';
+export * from './Item';

package/dist/components/Dialog/Dialog.d.ts

@@ -1,2 +1,10 @@
+import { DialogBody, DialogFooter, DialogHeader } from './components';
 import type { DialogProps } from './types';
-export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const DialogComponent: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type CompoundedComponent = typeof DialogComponent & {
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+};
+export declare const Dialog: CompoundedComponent;
+export {};

package/dist/components/Dialog/Dialog.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from "react";
-import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListener, useMultiRef } from "@koobiq/react-core";
-import { useDialog } from "@koobiq/react-primitives";
+import { forwardRef, useEffect } from "react";
+import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListener } from "@koobiq/react-core";
+import { useDialog, Provider, ButtonContext } from "@koobiq/react-primitives";
 import { utilClasses } from "../../styles/utility.js";
 import s from "./Dialog.module.css.js";
-import { DialogContext } from "./DialogContext.js";
+import { DialogBodyContext, DialogBody } from "./components/DialogBody.js";
 import { DialogCloseButton } from "./components/DialogCloseButton.js";
-const Dialog = forwardRef(
+import { DialogHeader } from "./components/DialoglHeader.js";
+import { DialogFooter } from "./components/DialogFooter.js";
+const DialogComponent = forwardRef(
   ({ onClose, children, slotProps, hideCloseButton, ...other }, ref) => {
     const [topOverflow, { set: setTopOverflow }] = useBoolean();
     const [bottomOverflow, { set: setBottomOverflow }] = useBoolean();
-    const contentRef = useRef(null);
     const domRef = useDOMRef(ref);
     const { dialogProps } = useDialog(other, domRef);
     const showCloseButton = !hideCloseButton;
@@ -35,24 +36,33 @@ const Dialog = forwardRef(
         element.scrollTop + element.clientHeight < element.scrollHeight
       );
     };
-    const { ref: innerRef, height } = useElementSize();
+    const { ref: bodyRef, height } = useElementSize();
     useEffect(() => {
-      if (contentRef.current) updateOverflow(contentRef.current);
-    }, [contentRef.current, height]);
+      if (bodyRef.current) updateOverflow(bodyRef.current);
+    }, [bodyRef.current, height]);
     useEventListener({
-      element: contentRef,
+      element: bodyRef,
       eventName: "scroll",
       handler: () => {
-        updateOverflow(contentRef.current);
+        updateOverflow(bodyRef.current);
       }
     });
     return /* @__PURE__ */ jsx(
-      DialogContext.Provider,
+      Provider,
       {
-        value: {
-          close: onClose,
-          slots: { content: { ref: useMultiRef([contentRef, innerRef]) } }
-        },
+        values: [
+          [DialogBodyContext, { ref: bodyRef }],
+          [
+            ButtonContext,
+            {
+              slots: {
+                close: {
+                  onPress: onClose
+                }
+              }
+            }
+          ]
+        ],
         children: /* @__PURE__ */ jsxs("section", { ...rootProps, ref: domRef, children: [
           showCloseButton && /* @__PURE__ */ jsx(DialogCloseButton, { ...slotProps?.["close-button"] }),
           /* @__PURE__ */ jsx("div", { ...containerProps, children })
@@ -61,7 +71,11 @@ const Dialog = forwardRef(
     );
   }
 );
-Dialog.displayName = "Dialog";
+DialogComponent.displayName = "Dialog";
+const Dialog = DialogComponent;
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
 export {
   Dialog
 };

package/dist/components/Dialog/components/DialogBody.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode, ComponentRef } from 'react';
+import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type DialogBodyRef = ComponentRef<'div'>;
+export type DialogBodyProps = ExtendableComponentPropsWithRef<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string;
+}, 'div'>;
+export declare const DialogBodyContext: import("react").Context<DialogBodyProps>;
+export declare const DialogBody: import("react").ForwardRefExoticComponent<Omit<DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/components/{DialogContent.js → DialogBody.js}

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx, useMultiRef } from "@koobiq/react-core";
+import { createContext, forwardRef, useContext } from "react";
+import { mergeProps, clsx, useMultiRef } from "@koobiq/react-core";
 import { utilClasses } from "../../../styles/utility.js";
 import s from "../Dialog.module.css.js";
-import { useDialogProvider } from "../DialogContext.js";
-const DialogContent = forwardRef(
+const DialogBodyContext = createContext({});
+const DialogBody = forwardRef(
   ({ children, className, ...other }, ref) => {
-    const { slots } = useDialogProvider();
-    const { content: { ref: contextRef } = {} } = slots || {};
+    const defaultProps = useContext(DialogBodyContext);
+    const { ref: contextRef } = mergeProps(defaultProps, other);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -24,7 +24,8 @@ const DialogContent = forwardRef(
     );
   }
 );
-DialogContent.displayName = "DialogContent";
+DialogBody.displayName = "DialogBody";
 export {
-  DialogContent
+  DialogBody,
+  DialogBodyContext
 };

package/dist/components/Dialog/components/DialogCloseButton.d.ts

@@ -4,6 +4,19 @@ export type DialogCloseButtonRef = ComponentRef<'button'>;
 export type DialogCloseButtonProps = ButtonProps;
 export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "as" | keyof import("../..").ButtonBaseProps> & import("../..").ButtonBaseProps & {
+}, "children" | "progress" | "as" | "className" | "autoFocus" | "id" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "target" | "type" | "href" | "disabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "elementType" | "preventFocusOnPress" | "excludeFromTabOrder" | "variant" | "onHoverStart" | "onHoverEnd" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid"> & Omit<import("@koobiq/react-primitives").ButtonOptions, "children" | "progress" | "className" | "disabled" | "variant" | "onHoverStart" | "onHoverEnd" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid"> & {
+    children?: import("react").ReactNode;
+    variant?: import("../..").ButtonPropVariant;
+    progress?: boolean;
+    disabled?: boolean;
+    onlyIcon?: boolean;
+    className?: string;
+    fullWidth?: boolean;
+    startIcon?: import("react").ReactNode;
+    endIcon?: import("react").ReactNode;
+    'data-testid'?: string | number;
+    onHoverStart?: (e: import("@react-types/shared").HoverEvent) => void;
+    onHoverEnd?: (e: import("@react-types/shared").HoverEvent) => void;
+} & {
     as?: "button" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Dialog/components/DialogCloseButton.js

@@ -1,25 +1,22 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { mergeProps } from "@koobiq/react-core";
 import { IconXmark16 } from "@koobiq/react-icons";
 import { useLocalizedStringFormatter } from "@koobiq/react-primitives";
 import s from "../Dialog.module.css.js";
 import intlMessages from "../intl.json.js";
-import { useDialogProvider } from "../DialogContext.js";
 import { Button } from "../../Button/Button.js";
-const DialogCloseButton = forwardRef(({ onClick, ...other }, ref) => {
-  const { close } = useDialogProvider();
+const DialogCloseButton = forwardRef((props, ref) => {
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   return /* @__PURE__ */ jsx("div", { className: s.closeButton, children: /* @__PURE__ */ jsx(
     Button,
     {
-      ...mergeProps({ onClick: close }, { onClick }),
       "aria-label": stringFormatter.format("close"),
       startIcon: /* @__PURE__ */ jsx(IconXmark16, {}),
       variant: "contrast-transparent",
+      slot: "close",
       onlyIcon: true,
-      ...other,
+      ...props,
       ref
     }
   ) });

package/dist/components/Dialog/components/index.d.ts

@@ -1,4 +1,4 @@
 export * from './DialoglHeader';
-export * from './DialogContent';
+export * from './DialogBody';
 export * from './DialogFooter';
 export * from './DialogCloseButton';

package/dist/components/Dialog/index.d.ts

@@ -1,4 +1,3 @@
 export * from './types';
 export * from './Dialog';
 export * from './components';
-export * from './DialogContext';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { DividerBaseProps } from './index';
+export declare const Divider: import("@koobiq/react-core").PolyForwardComponent<"div", DividerBaseProps, ElementType>;
+export type DividerProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Divider<As>>;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { useSeparator } from "@koobiq/react-primitives";
+import s from "./Divider.module.css.js";
+const Divider = polymorphicForwardRef(
+  (props, ref) => {
+    const {
+      as: Tag = "div",
+      orientation = "horizontal",
+      disablePaddings = false,
+      flexItem = false,
+      display,
+      className,
+      ...other
+    } = props;
+    const { separatorProps } = useSeparator({
+      ...other,
+      orientation,
+      elementType: Tag
+    });
+    const hasPaddings = !disablePaddings;
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...separatorProps,
+        className: clsx(
+          s.base,
+          s[orientation],
+          display && s[display],
+          hasPaddings && s.hasPaddings,
+          flexItem && s.flexItem,
+          className
+        ),
+        ref,
+        ...other
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+export {
+  Divider
+};

package/dist/components/Divider/Divider.module.css.js

@@ -0,0 +1,29 @@
+const base = "kbq-divider-16da20";
+const block = "kbq-divider-block-72e3e3";
+const inlineBlock = "kbq-divider-inlineBlock-0f06d1";
+const inline = "kbq-divider-inline-2d4752";
+const vertical = "kbq-divider-vertical-a4e613";
+const horizontal = "kbq-divider-horizontal-22c78d";
+const hasPaddings = "kbq-divider-hasPaddings-d8f601";
+const flexItem = "kbq-divider-flexItem-af9975";
+const s = {
+  base,
+  block,
+  inlineBlock,
+  inline,
+  vertical,
+  horizontal,
+  hasPaddings,
+  flexItem
+};
+export {
+  base,
+  block,
+  s as default,
+  flexItem,
+  hasPaddings,
+  horizontal,
+  inline,
+  inlineBlock,
+  vertical
+};

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Divider';
+export * from './types';

package/dist/components/Divider/types.d.ts

@@ -0,0 +1,26 @@
+export declare const dividerPropDisplay: readonly ["block", "inline", "inlineBlock"];
+export declare const dividerPropOrientation: readonly ["horizontal", "vertical"];
+export type DividerPropOrientation = (typeof dividerPropOrientation)[number];
+export type DividerPropDisplay = (typeof dividerPropDisplay)[number];
+export type DividerBaseProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * The orientation of the separator.
+     * @default 'horizontal'
+     */
+    orientation?: DividerPropOrientation;
+    /** Set the display for the component. */
+    display?: DividerPropDisplay;
+    /**
+     * Indicates if the divider is a child of a flex container.
+     * Mainly used for vertical layout.
+     * Used when the block does not have a fixed height.
+     * @default false
+     */
+    flexItem?: boolean;
+    /** If `true`, it disables the default paddings.
+     * @default false
+     */
+    disablePaddings?: boolean;
+};

package/dist/components/Divider/types.js

@@ -0,0 +1,6 @@
+const dividerPropDisplay = ["block", "inline", "inlineBlock"];
+const dividerPropOrientation = ["horizontal", "vertical"];
+export {
+  dividerPropDisplay,
+  dividerPropOrientation
+};

package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts

@@ -4,7 +4,7 @@ export type FieldControlProps = TextFieldProps & {
     className?: string;
 };
 export type FieldControlRef = TextFieldRef;
-export declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseTextFieldProps, keyof import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps>> & import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps> & {
+export declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseTextFieldProps, keyof import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps>> & import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps> & {
     fullWidth?: boolean;
     className?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FieldComponents/FieldNumberControl/FieldNumberControl.d.ts

@@ -4,7 +4,7 @@ export type FieldNumberControlProps = NumberFieldProps & {
     className?: string;
 };
 export type FieldNumberControlRef = NumberFieldRef;
-export declare const FieldNumberControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseNumberFieldProps, keyof import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps>> & import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps> & {
+export declare const FieldNumberControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseNumberFieldProps, keyof import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps>> & import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps> & {
     fullWidth?: boolean;
     className?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Grid/Grid.d.ts

@@ -1,4 +1,10 @@
 import type { ComponentPropsWithRef, ElementType } from 'react';
+import { GridItem } from './components';
 import type { GridBaseProps } from './types';
-export declare const Grid: import("@koobiq/react-core").PolyForwardComponent<"div", GridBaseProps, ElementType>;
-export type GridProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Grid<As>>;
+declare const GridComponent: import("@koobiq/react-core").PolyForwardComponent<"div", GridBaseProps, ElementType>;
+export type GridProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof GridComponent<As>>;
+type CompoundedComponent = typeof GridComponent & {
+    Item: typeof GridItem;
+};
+export declare const Grid: CompoundedComponent;
+export {};

package/dist/components/Grid/Grid.js

@@ -3,9 +3,10 @@ import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./Grid.module.css.js";
 import { normalizeGap } from "./utils.js";
+import { GridItem } from "./components/GridItem/GridItem.js";
 import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
 import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
-const Grid = polymorphicForwardRef(
+const GridComponent = polymorphicForwardRef(
   ({
     as: Tag = "div",
     gap: gapProp,
@@ -46,7 +47,9 @@ const Grid = polymorphicForwardRef(
     );
   }
 );
-Grid.displayName = "Grid";
+GridComponent.displayName = "Grid";
+const Grid = GridComponent;
+Grid.Item = GridItem;
 export {
   Grid
 };

package/dist/components/IconButton/types.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
-import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { HoverEvent, UseButtonProps } from '@koobiq/react-primitives';
 export declare const iconButtonPropVariant: readonly ["theme", "theme-contrast", "fade-contrast", "error", "success", "warning"];
 export type IconButtonPropVariant = (typeof iconButtonPropVariant)[number];
 export declare const iconButtonPropSize: readonly ["l", "xl"];
 export type IconButtonPropSize = (typeof iconButtonPropSize)[number];
-export type IconButtonBaseProps = {
+export type IconButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /**
@@ -32,5 +33,5 @@ export type IconButtonBaseProps = {
     /** Handler that is called when a hover interaction starts. */
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
-    onClick?: ButtonOptions['onPress'];
-};
+    onHoverEnd?: (e: HoverEvent) => void;
+}, UseButtonProps>;

package/dist/components/Link/types.d.ts

@@ -1,8 +1,9 @@
 import type { CSSProperties, ReactNode } from 'react';
-import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { UseLinkProps } from '@koobiq/react-primitives';
 import type { TypographyPropVariant } from '../Typography';
 export type LinkPropVariant = Extract<TypographyPropVariant, 'text-compact' | 'text-normal' | 'text-big' | 'inherit'>;
-export type LinkBaseProps = {
+export type LinkBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /** The variant of the component. */
@@ -21,5 +22,4 @@ export type LinkBaseProps = {
     className?: string;
     /** Inline styles */
     style?: CSSProperties;
-    onClick?: ButtonOptions['onPress'];
-};
+}, UseLinkProps>;

package/dist/components/List/List.d.ts

@@ -1,9 +1,18 @@
 import type { Ref } from 'react';
 import { type ListState } from '@koobiq/react-primitives';
-import type { ListComponent, ListBaseProps } from './types';
+import { Item, Section } from '../Collections';
+import { ListItemText } from './components';
+import type { ListComponentProps, ListBaseProps } from './types';
 export type ListInnerProps<T extends object> = {
     state: ListState<T>;
     listRef?: Ref<HTMLUListElement>;
 } & Omit<ListBaseProps<T>, 'ref'>;
 export declare function ListInner<T extends object>(props: ListInnerProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare const List: ListComponent;
+declare const ListComponent: ListComponentProps;
+type CompoundedComponent = typeof ListComponent & {
+    Item: typeof Item;
+    Section: typeof Section;
+    ItemText: typeof ListItemText;
+};
+export declare const List: CompoundedComponent;
+export {};

package/dist/components/List/List.js

@@ -1,12 +1,17 @@
 "use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
-import { useListState, useListBox } from "@koobiq/react-primitives";
+import { useListBox, useListState } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
 import s from "./List.module.css.js";
 import { ListSection } from "./components/ListSection/ListSection.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "./components/ListItemText/ListItemText.js";
 import { Typography } from "../Typography/Typography.js";
 import { ListOption } from "./components/ListOption/ListOption.js";
+const { list } = utilClasses;
 function ListInner(props) {
   const { label, className, style, slotProps, state, listRef } = props;
   const domRef = useDOMRef(listRef);
@@ -23,7 +28,7 @@ function ListInner(props) {
     {
       style,
       ref: domRef,
-      className: clsx(s.base, className)
+      className: clsx(list, className)
     },
     slotProps?.list,
     listBoxProps
@@ -39,7 +44,11 @@ function ListRender(props, ref) {
   const state = useListState(props);
   return /* @__PURE__ */ jsx(ListInner, { listRef: ref, ...props, state });
 }
-const List = forwardRef(ListRender);
+const ListComponent = forwardRef(ListRender);
+const List = ListComponent;
+List.Item = Item;
+List.Section = Section;
+List.ItemText = ListItemText;
 export {
   List,
   ListInner

package/dist/components/List/List.module.css.js

@@ -1,11 +1,8 @@
-const base = "kbq-list-928929";
 const label = "kbq-list-label-e4431c";
 const s = {
-  base,
   label
 };
 export {
-  base,
   s as default,
   label
 };