@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.js

@@ -5,36 +5,38 @@ import { useInputContext, Group } from "@koobiq/react-primitives";
 import s from "./FieldInputGroup.module.css.js";
 import { FieldInputGroupContext } from "./FieldInputGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
-const FieldInputGroup = forwardRef(({ children, className, startAddon, endAddon, error, ...other }, ref) => {
-  const { value } = useInputContext();
-  const hasStartAddon = !!startAddon;
-  const hasEndAddon = !!endAddon;
-  const hasValue = isNotNil(value);
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      className: clsx(
-        s.base,
-        hasStartAddon && s.hasStartAddon,
-        hasEndAddon && s.hasEndAddon,
-        className
-      ),
-      ...other,
-      ref,
-      children: ({ hovered, focusWithin, disabled }) => /* @__PURE__ */ jsxs(
-        FieldInputGroupContext.Provider,
-        {
-          value: { disabled, hovered, hasValue, focusWithin },
-          children: [
-            /* @__PURE__ */ jsx(FieldAddon, { placement: "start", error, children: startAddon }),
-            children,
-            /* @__PURE__ */ jsx(FieldAddon, { placement: "end", error, children: endAddon })
-          ]
-        }
-      )
-    }
-  );
-});
+const FieldInputGroup = forwardRef(
+  ({ children, className, startAddon, endAddon, error, slotProps, ...other }, ref) => {
+    const { value } = useInputContext();
+    const hasStartAddon = !!startAddon;
+    const hasEndAddon = !!endAddon;
+    const hasValue = isNotNil(value);
+    return /* @__PURE__ */ jsx(
+      Group,
+      {
+        className: clsx(
+          s.base,
+          hasStartAddon && s.hasStartAddon,
+          hasEndAddon && s.hasEndAddon,
+          className
+        ),
+        ...other,
+        ref,
+        children: ({ hovered, focusWithin, disabled }) => /* @__PURE__ */ jsxs(
+          FieldInputGroupContext.Provider,
+          {
+            value: { disabled, hovered, hasValue, focusWithin },
+            children: [
+              /* @__PURE__ */ jsx(FieldAddon, { placement: "start", error, ...slotProps?.start, children: startAddon }),
+              children,
+              /* @__PURE__ */ jsx(FieldAddon, { placement: "end", error, ...slotProps?.end, children: endAddon })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 FieldInputGroup.displayName = "FieldInputGroup";
 export {
   FieldInputGroup

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/FieldComponents/FieldSelect/FieldSelect.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import type { InputPropVariant } from '../../Input';
+export type FieldSelectProps = {
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+    variant?: InputPropVariant;
+    placeholder?: string | number;
+};
+export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx, isNotNil } from "@koobiq/react-core";
+import { Button } from "@koobiq/react-primitives";
+import s from "./FieldSelect.module.css.js";
+const FieldSelect = forwardRef(
+  ({
+    error = false,
+    disabled = false,
+    variant = "filled",
+    placeholder,
+    children,
+    className,
+    ...other
+  }, ref) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...other,
+      disabled,
+      "data-slot": "select-value",
+      className: clsx(
+        s.base,
+        s[variant],
+        error && s.error,
+        disabled && s.disabled,
+        !isNotNil(children) && s.hasPlaceholder,
+        className
+      ),
+      ref,
+      children: /* @__PURE__ */ jsx("span", { className: s.content, children: children ?? placeholder })
+    }
+  )
+);
+FieldSelect.displayName = "FieldSelect";
+export {
+  FieldSelect
+};

package/dist/components/FieldComponents/FieldSelect/FieldSelect.module.css.js

@@ -0,0 +1,20 @@
+const base = "kbq-fieldselect-0f0f5e";
+const content = "kbq-fieldselect-content-c36142";
+const error = "kbq-fieldselect-error-0cac4a";
+const disabled = "kbq-fieldselect-disabled-f0efd4";
+const hasPlaceholder = "kbq-fieldselect-hasPlaceholder-7b7518";
+const s = {
+  base,
+  content,
+  error,
+  disabled,
+  hasPlaceholder
+};
+export {
+  base,
+  content,
+  s as default,
+  disabled,
+  error,
+  hasPlaceholder
+};

package/dist/components/FieldComponents/FieldSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './FieldSelect';

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

@@ -1,6 +1,7 @@
 export * from './FieldControl';
 export * from './FieldNumberControl';
 export * from './FieldInput';
+export * from './FieldSelect';
 export * from './FieldLabel';
 export * from './FieldAddon';
 export * from './FieldCaption';

package/dist/components/FlexBox/FlexBox.d.ts

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

package/dist/components/FlexBox/FlexBox.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
+import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
+import { flex } from "../layout/flex/flex.js";
+const FlexBox = polymorphicForwardRef(
+  ({
+    as: Tag = "div",
+    gap: gapProp,
+    wrap: wrapProp,
+    flex: flexProp,
+    colGap: colGapProp,
+    rowGap: rowGapProp,
+    direction: directionProp,
+    alignItems: alignItemsProp,
+    justifyContent: justifyContentProp,
+    children,
+    className,
+    ...other
+  }, ref) => {
+    const breakpoints = useMatchedBreakpoints();
+    const flex$1 = getResponsiveValue(flexProp, breakpoints);
+    const gap = getResponsiveValue(gapProp, breakpoints);
+    const colGap = getResponsiveValue(colGapProp, breakpoints);
+    const rowGap = getResponsiveValue(rowGapProp, breakpoints);
+    const wrap = getResponsiveValue(wrapProp, breakpoints);
+    const alignItems = getResponsiveValue(alignItemsProp, breakpoints);
+    const direction = getResponsiveValue(directionProp, breakpoints);
+    const justifyContent = getResponsiveValue(justifyContentProp, breakpoints);
+    const flexCn = flex({
+      gap,
+      flex: flex$1,
+      wrap,
+      colGap,
+      rowGap,
+      direction,
+      alignItems,
+      justifyContent
+    });
+    return /* @__PURE__ */ jsx(Tag, { className: clsx(flexCn, className), ...other, ref, children });
+  }
+);
+FlexBox.displayName = "FlexBox";
+export {
+  FlexBox
+};

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

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

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

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ResponsiveValue } from '../../utils';
+import type { FlexPropGap, FlexPropWrap, FlexPropFlex, FlexPropDirection, FlexPropAlignItems, FlexPropJustifyContent } from '../layout';
+export type FlexBoxBaseProps = {
+    /** Defines the `display` property with `flex` or `inline-flex` value. */
+    flex?: FlexPropFlex | ResponsiveValue<FlexPropFlex>;
+    /** Defines the `flex-wrap` property. */
+    wrap?: FlexPropWrap | ResponsiveValue<FlexPropWrap>;
+    /** Defines the `flex-direction` property. */
+    direction?: FlexPropDirection | ResponsiveValue<FlexPropDirection>;
+    /** Defines the `gap` property. */
+    gap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `column-gap` property. */
+    colGap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `row-gap` property. */
+    rowGap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `justify-content` property. */
+    justifyContent?: FlexPropJustifyContent | ResponsiveValue<FlexPropJustifyContent>;
+    /** Defines the `align-items` property. */
+    alignItems?: FlexPropAlignItems | ResponsiveValue<FlexPropAlignItems>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

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/Input/Input.d.ts

@@ -17,6 +17,7 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
         label?: import("../FieldComponents").FieldLabelProps;
         input?: import("../FieldComponents").FieldInputProps;
         caption?: import("../FieldComponents").FieldCaptionProps;
+        group?: import("../FieldComponents").FieldInputGroupProps;
         errorMessage?: import("../FieldComponents").FieldErrorProps;
     };
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -21,7 +21,7 @@ const Input = forwardRef((props, ref) => {
     caption,
     ...other
   } = props;
-  const domRef = useDOMRef(ref);
+  const inputRef = useDOMRef(ref);
   const rootProps = mergeProps(
     {
       label,
@@ -42,23 +42,23 @@ const Input = forwardRef((props, ref) => {
         error,
         variant,
         disabled,
-        ref: domRef
+        ref: inputRef
       },
       slotProps?.input
     );
+    const groupProps = mergeProps(
+      {
+        error,
+        endAddon,
+        startAddon
+      },
+      slotProps?.group
+    );
     const captionProps = slotProps?.caption;
     const errorProps = mergeProps({ error }, slotProps?.errorMessage);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps?.children || label }),
-      /* @__PURE__ */ jsx(
-        FieldInputGroup,
-        {
-          error,
-          endAddon,
-          startAddon,
-          children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps })
-        }
-      ),
+      /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
       /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
       /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
     ] });

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

@@ -1,7 +1,7 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { UseTextFieldProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
+import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps, FieldInputGroupProps } from '../FieldComponents';
 export declare const inputPropVariant: readonly ["filled", "transparent"];
 export type InputPropVariant = (typeof inputPropVariant)[number];
 export type InputProps = ExtendableProps<{
@@ -56,6 +56,7 @@ export type InputProps = ExtendableProps<{
         label?: FieldLabelProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
     };
 }, Omit<UseTextFieldProps, 'inputElementType'>>;

package/dist/components/Link/Link.js

@@ -1,33 +1,31 @@
 "use client";
 import { jsxs } from "react/jsx-runtime";
-import { polymorphicForwardRef, useDOMRef, clsx } from "@koobiq/react-core";
-import { useLink } from "@koobiq/react-primitives";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { Link as Link$1 } from "@koobiq/react-primitives";
 import s from "./Link.module.css.js";
 const Link = polymorphicForwardRef((props, ref) => {
   const {
     variant = "text-normal",
     visitable = false,
     pseudo = false,
+    disabled,
     as = "a",
     startIcon,
     endIcon,
     children,
     className,
-    style
+    ...other
   } = props;
-  const Tag = as;
-  const domRef = useDOMRef(ref);
-  const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
-  const { linkProps, hovered, pressed, focusVisible } = useLink(
-    { ...props, elementType },
-    domRef
-  );
   const hasIcon = Boolean(startIcon || endIcon);
+  const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
   return /* @__PURE__ */ jsxs(
-    Tag,
+    Link$1,
     {
-      ...linkProps,
-      className: clsx(
+      as,
+      disabled,
+      elementType,
+      ...disabled && { tabIndex: -1 },
+      className: ({ hovered, pressed, focusVisible }) => clsx(
         s.base,
         s[variant],
         pseudo && s.pseudo,
@@ -38,8 +36,8 @@ const Link = polymorphicForwardRef((props, ref) => {
         focusVisible && s.focusVisible,
         className
       ),
-      style,
-      ref: domRef,
+      ...other,
+      ref,
       children: [
         startIcon,
         children,

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,4 +1,18 @@
 import type { Ref } from 'react';
-import type { ListComponent, ListProps, ListRef } from './types';
-export declare function ListRender<T extends object>(props: ListProps<T>, ref: Ref<ListRef>): import("react/jsx-runtime").JSX.Element;
-export declare const List: ListComponent;
+import { type ListState } from '@koobiq/react-primitives';
+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;
+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

@@ -2,40 +2,54 @@
 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";
-function ListRender(props, ref) {
-  const { className, label } = props;
-  const domRef = useDOMRef(ref);
-  const state = useListState(props);
+const { list } = utilClasses;
+function ListInner(props) {
+  const { label, className, style, slotProps, state, listRef } = props;
+  const domRef = useDOMRef(listRef);
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
+  const titleProps = mergeProps(
+    {
+      className: s.label,
+      variant: "text-normal-strong"
+    },
+    slotProps?.label,
+    labelProps
+  );
   const listProps = mergeProps(
     {
-      className: clsx(s.base, className),
-      ref: domRef
+      style,
+      ref: domRef,
+      className: clsx(list, className)
     },
+    slotProps?.list,
     listBoxProps
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isNotNil(label) && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "text-normal-strong",
-        className: s.label,
-        ...labelProps,
-        children: label
-      }
-    ),
+    isNotNil(label) && /* @__PURE__ */ jsx(Typography, { ...titleProps, children: label }),
     /* @__PURE__ */ jsx("ul", { ...listProps, children: [...state.collection].map(
       (item) => item.type === "section" ? /* @__PURE__ */ jsx(ListSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx(ListOption, { item, state }, item.key)
     ) })
   ] });
 }
-const List = forwardRef(ListRender);
+function ListRender(props, ref) {
+  const state = useListState(props);
+  return /* @__PURE__ */ jsx(ListInner, { listRef: ref, ...props, state });
+}
+const ListComponent = forwardRef(ListRender);
+const List = ListComponent;
+List.Item = Item;
+List.Section = Section;
+List.ItemText = ListItemText;
 export {
   List,
-  ListRender
+  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
 };

package/dist/components/List/components/ListItemText/ListItemText.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isNotNil, clsx } from "@koobiq/react-core";
+import s from "./ListItemText.module.css.js";
+import { Typography } from "../../../Typography/Typography.js";
+const ListItemText = forwardRef(
+  ({ className, children, caption, slotProps, ...other }, ref) => /* @__PURE__ */ jsxs("div", { className: clsx(s.base, className), ...other, ref, children: [
+    /* @__PURE__ */ jsx(Typography, { as: "span", ...slotProps?.text, children }),
+    isNotNil(caption) && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "span",
+        color: "contrast-secondary",
+        className: s.caption,
+        variant: "text-compact",
+        ...slotProps?.caption,
+        children: caption
+      }
+    )
+  ] })
+);
+ListItemText.displayName = "ListItemText";
+export {
+  ListItemText
+};

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

@@ -0,0 +1,11 @@
+const base = "kbq-listitemtext-27bac6";
+const caption = "kbq-listitemtext-caption-ae96af";
+const s = {
+  base,
+  caption
+};
+export {
+  base,
+  caption,
+  s as default
+};

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

@@ -1,5 +1,6 @@
 import type { ListState, Node } from '@koobiq/react-primitives';
-export declare function ListOption<T>({ item, state, }: {
+export type ListOptionProps<T> = {
     item: Node<T>;
     state: ListState<T>;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function ListOption<T>({ item, state }: ListOptionProps<T>): import("react/jsx-runtime").JSX.Element;