@koobiq/react-components 0.3.1 → 0.5.0

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

@@ -1,8 +1,8 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaDateFieldProps, DateValue } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldInputGroupProps, FieldLabelProps } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldControlProps, type FieldErrorProps, type FieldInputDateProps, type FieldContentGroupProps, type FieldLabelProps, type FieldContentGroupPropVariant } from '../FieldComponents';
 export declare const dateInputPropVariant: readonly ["filled", "transparent"];
-export type DateInputPropVariant = (typeof dateInputPropVariant)[number];
+export type DateInputPropVariant = FieldContentGroupPropVariant;
 export type DateInputProps<T extends DateValue> = {
     /** Inline styles. */
     style?: CSSProperties;
@@ -26,7 +26,7 @@ export type DateInputProps<T extends DateValue> = {
     slotProps?: {
         root?: FieldControlProps;
         label?: FieldLabelProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         caption?: FieldCaptionProps;
         inputDate?: FieldInputDateProps;
         errorMessage?: FieldErrorProps;

package/dist/components/DateInput/types.js

@@ -1,4 +1,5 @@
-const dateInputPropVariant = ["filled", "transparent"];
+import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
+const dateInputPropVariant = fieldContentGroupPropVariant;
 export {
   dateInputPropVariant
 };

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

@@ -1,2 +1,2 @@
-import type { FieldInputGroupProps } from './index';
-export declare const FieldContentGroup: import("react").ForwardRefExoticComponent<Omit<FieldInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import type { FieldContentGroupProps } from './index';
+export declare const FieldContentGroup: import("react").ForwardRefExoticComponent<Omit<FieldContentGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Children, isValidElement, cloneElement } from "react";
 import { isNotNil, useFocusRing, mergeProps, clsx } from "@koobiq/react-core";
-import { useInputContext, Group } from "@koobiq/react-primitives";
+import { Group } from "@koobiq/react-primitives";
 import s from "./FieldContentGroup.module.css.js";
 import { FieldContentGroupContext } from "./FieldContentGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
@@ -16,10 +16,8 @@ const FieldContentGroup = forwardRef(function FieldContentGroup2({
   slotProps,
   ...other
 }, ref) {
-  const { value } = useInputContext();
-  const hasStartAddon = !!startAddon;
-  const hasEndAddon = !!endAddon;
-  const hasValue = isNotNil(value);
+  const hasStartAddon = isNotNil(startAddon);
+  const hasEndAddon = isNotNil(endAddon);
   const { focusProps, isFocused } = useFocusRing({ within: true });
   const focusManagedChildren = Children.map(children, (child) => {
     if (!isValidElement(child)) return child;
@@ -47,7 +45,8 @@ const FieldContentGroup = forwardRef(function FieldContentGroup2({
         FieldContentGroupContext.Provider,
         {
           value: {
-            hasValue,
+            hasStartAddon,
+            hasEndAddon,
             isHovered,
             isInvalid,
             isDisabled,

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroupContext.d.ts

@@ -1,9 +1,10 @@
 export type FieldContentGroupContextProps = {
     isDisabled?: boolean;
-    hasValue?: boolean;
+    hasStartAddon?: boolean;
+    hasEndAddon?: boolean;
     isHovered?: boolean;
     isFocusWithin?: boolean;
     isInvalid?: boolean;
 };
 export declare const FieldContentGroupContext: import("react").Context<FieldContentGroupContextProps>;
-export declare const useFieldInputGroup: () => FieldContentGroupContextProps;
+export declare const useFieldContentGroup: () => FieldContentGroupContextProps;

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroupContext.js

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
 const FieldContentGroupContext = createContext({});
-const useFieldInputGroup = () => useContext(FieldContentGroupContext);
+const useFieldContentGroup = () => useContext(FieldContentGroupContext);
 export {
   FieldContentGroupContext,
-  useFieldInputGroup
+  useFieldContentGroup
 };

package/dist/components/FieldComponents/FieldContentGroup/types.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
 import type { FieldAddonProps } from '../FieldAddon';
-export declare const fieldInputGroupPropVariant: readonly ["filled", "transparent"];
-export type FieldInputGroupPropVariant = (typeof fieldInputGroupPropVariant)[number];
-export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
+export declare const fieldContentGroupPropVariant: readonly ["filled", "transparent"];
+export type FieldContentGroupPropVariant = (typeof fieldContentGroupPropVariant)[number];
+export type FieldContentGroupProps = ExtendableComponentPropsWithRef<{
     /** The content of the component. */
     children?: ReactNode;
     /** Addon placed before the children. */
@@ -14,7 +14,7 @@ export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
      * The variant to use.
      * @default 'filled'
      */
-    variant?: FieldInputGroupPropVariant;
+    variant?: FieldContentGroupPropVariant;
     /** Whether the input is disabled. */
     isDisabled?: boolean;
     /** Additional CSS-classes. */

package/dist/components/FieldComponents/FieldContentGroup/types.js

@@ -0,0 +1,4 @@
+const fieldContentGroupPropVariant = ["filled", "transparent"];
+export {
+  fieldContentGroupPropVariant
+};

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

@@ -1,12 +1,12 @@
 import type { ComponentPropsWithRef } from 'react';
-import type { FieldInputGroupPropVariant } from '../FieldContentGroup';
+import type { FieldContentGroupPropVariant } from '../FieldContentGroup';
 export type FieldInputBaseProps = {
     isInvalid?: boolean;
     isDisabled?: boolean;
     className?: string;
     'data-testid'?: string;
     as?: 'input' | 'textarea';
-    variant?: FieldInputGroupPropVariant;
+    variant?: FieldContentGroupPropVariant;
 };
 export declare const FieldInput: import("@koobiq/react-core").PolyForwardComponent<"input", FieldInputBaseProps, "input" | "textarea">;
 export type FieldInputProps<As extends 'input' | 'textarea' = 'input'> = ComponentPropsWithRef<typeof FieldInput<As>>;

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

@@ -1,5 +1,5 @@
 import { type ReactNode, type Ref } from 'react';
-import type { FieldInputGroupPropVariant } from '../FieldContentGroup';
+import type { FieldContentGroupPropVariant } from '../FieldContentGroup';
 export type FieldInputDateProps = {
     isInvalid?: boolean;
     isDisabled?: boolean;
@@ -7,6 +7,6 @@ export type FieldInputDateProps = {
     children?: ReactNode;
     'data-testid'?: string;
     ref?: Ref<HTMLDivElement>;
-    variant?: FieldInputGroupPropVariant;
+    variant?: FieldContentGroupPropVariant;
 };
 export declare const FieldInputDate: import("react").ForwardRefExoticComponent<Omit<FieldInputDateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { FieldInputGroupPropVariant } from '../FieldContentGroup';
+import type { FieldContentGroupPropVariant } from '../FieldContentGroup';
 export type FieldSelectBaseProps = {
     isInvalid?: boolean;
     isDisabled?: boolean;
@@ -7,5 +7,5 @@ export type FieldSelectBaseProps = {
     children?: ReactNode;
     'data-testid'?: string;
     placeholder?: string | number;
-    variant?: FieldInputGroupPropVariant;
+    variant?: FieldContentGroupPropVariant;
 };

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

@@ -1,5 +1,5 @@
 import { TextField } from '@koobiq/react-primitives';
-import { type FieldLabelProps, type FieldInputGroupProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldControlProps } from '../FieldComponents';
+import { type FieldLabelProps, type FieldContentGroupProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldControlProps } from '../FieldComponents';
 export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
@@ -21,9 +21,9 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
         root?: FieldControlProps<typeof TextField<HTMLInputElement>>;
         label?: FieldLabelProps;
         caption?: FieldCaptionProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         errorMessage?: FieldErrorProps;
-        input?: FieldInputProps<"input">;
+        input?: FieldInputProps;
     };
 } & {
     disabled?: boolean;

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

@@ -1,9 +1,9 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { TextField, TextFieldProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps, FieldInputGroupProps, FieldControlProps } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldLabelProps, type FieldContentGroupProps, type FieldControlProps, type FieldContentGroupPropVariant } from '../FieldComponents';
 export declare const inputPropVariant: readonly ["filled", "transparent"];
-export type InputPropVariant = (typeof inputPropVariant)[number];
+export type InputPropVariant = FieldContentGroupPropVariant;
 type InputDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -76,9 +76,9 @@ export type InputProps = ExtendableProps<{
         root?: FieldControlProps<typeof TextField<HTMLInputElement>>;
         label?: FieldLabelProps;
         caption?: FieldCaptionProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         errorMessage?: FieldErrorProps;
-        input?: FieldInputProps<'input'>;
+        input?: FieldInputProps;
     };
 } & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'inputElementType'>>;
 export type InputRef = ComponentRef<'input'>;

package/dist/components/Input/types.js

@@ -1,4 +1,5 @@
-const inputPropVariant = ["filled", "transparent"];
+import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
+const inputPropVariant = fieldContentGroupPropVariant;
 export {
   inputPropVariant
 };

package/dist/components/InputNumber/InputNumber.d.ts

@@ -1,5 +1,5 @@
 import { NumberField } from '@koobiq/react-primitives';
-import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputGroupProps, type FieldInputProps } from '../FieldComponents';
+import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps } from '../FieldComponents';
 export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
@@ -22,7 +22,7 @@ export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit
         label?: FieldLabelProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         errorMessage?: FieldErrorProps;
     };
 } & {

package/dist/components/InputNumber/components/InputNumberCounterControls.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "@koobiq/react-core";
 import { IconChevronUpS16, IconChevronDownS16 } from "@koobiq/react-icons";
 import s from "./InputNumberCounterControls.module.css.js";
-import { useFieldInputGroup } from "../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+import { useFieldContentGroup } from "../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
 import { IconButton } from "../../IconButton/IconButton.js";
 const InputNumberCounterControls = () => {
-  const { isInvalid } = useFieldInputGroup();
+  const { isInvalid } = useFieldContentGroup();
   const variant = isInvalid ? "error" : "fade-contrast";
   return /* @__PURE__ */ jsxs("div", { className: s.base, children: [
     /* @__PURE__ */ jsx(

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

@@ -1,9 +1,9 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { NumberField, NumberFieldProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputGroupProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldControlProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps, type FieldLabelProps, type FieldContentGroupPropVariant } from '../FieldComponents';
 export declare const inputNumberPropVariant: readonly ["filled", "transparent"];
-export type InputNumberPropVariant = (typeof inputNumberPropVariant)[number];
+export type InputNumberPropVariant = FieldContentGroupPropVariant;
 type InputNumberDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -77,7 +77,7 @@ export type InputNumberProps = ExtendableProps<{
         label?: FieldLabelProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         errorMessage?: FieldErrorProps;
     };
 } & InputNumberDeprecatedProps, Omit<NumberFieldProps, 'description' | 'children' | 'inputElementType' | 'validationState'>>;

package/dist/components/InputNumber/types.js

@@ -1,4 +1,5 @@
-const inputNumberPropVariant = ["filled", "transparent"];
+import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
+const inputNumberPropVariant = fieldContentGroupPropVariant;
 export {
   inputNumberPropVariant
 };

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

@@ -1,6 +1,6 @@
 import type { Ref } from 'react';
 import { type ListState } from '@koobiq/react-primitives';
-import { Item, Section } from '../Collections';
+import { Item, Section, Divider } from '../Collections';
 import { ListItemText } from './components';
 import type { ListComponent, ListProps } from './types';
 export type ListInnerProps<T extends object> = {
@@ -12,6 +12,7 @@ declare const ListComponent: ListComponent;
 type CompoundedComponent = typeof ListComponent & {
     Item: typeof Item;
     Section: typeof Section;
+    Divider: typeof Divider;
     ItemText: typeof ListItemText;
 };
 export declare const List: CompoundedComponent;

package/dist/components/List/List.js

@@ -6,8 +6,10 @@ 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 { Divider } from "../Divider/Divider.js";
 import { Item } from "../Collections/Item.js";
 import { Section } from "../Collections/Section.js";
+import { Divider as Divider$1 } from "../Collections/Divider.js";
 import { ListItemText } from "./components/ListItemText/ListItemText.js";
 import { Typography } from "../Typography/Typography.js";
 import { ListOption } from "./components/ListOption/ListOption.js";
@@ -33,11 +35,21 @@ function ListInner(props) {
     slotProps?.list,
     listBoxProps
   );
+  const renderItems = (listState) => [...listState.collection].map((item) => {
+    switch (item.type) {
+      case "divider":
+        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+      case "item":
+        return /* @__PURE__ */ jsx(ListOption, { item, state }, item.key);
+      case "section":
+        return /* @__PURE__ */ jsx(ListSection, { section: item, state }, item.key);
+      default:
+        return null;
+    }
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     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)
-    ) })
+    /* @__PURE__ */ jsx("ul", { ...listProps, children: renderItems(state) })
   ] });
 }
 function ListRender(props, ref) {
@@ -48,6 +60,7 @@ const ListComponent = forwardRef(ListRender);
 const List = ListComponent;
 List.Item = Item;
 List.Section = Section;
+List.Divider = Divider$1;
 List.ItemText = ListItemText;
 export {
   List,

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

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

package/dist/components/Menu/Menu.js

@@ -8,9 +8,9 @@ import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Menu.module.css.js";
 import { MenuInner } from "./components/MenuInner/MenuInner.js";
 import { Header } from "../Collections/Header.js";
-import { Divider } from "../Collections/Divider.js";
 import { Item } from "../Collections/Item.js";
 import { Section } from "../Collections/Section.js";
+import { Divider } from "../Collections/Divider.js";
 import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
 function MenuRender(props, ref) {
   const {

package/dist/components/Menu/components/MenuInner/MenuInner.js

@@ -6,9 +6,9 @@ import { useTreeState, useMenu } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
 import s from "./MenuInner.module.css.js";
 import { MenuSection } from "../MenuSection/MenuSection.js";
-import { Divider } from "../../../Divider/Divider.js";
 import { MenuHeader } from "../MenuHeader/MenuHeader.js";
 import { MenuItem } from "../MenuItem/MenuItem.js";
+import { Divider } from "../../../Divider/Divider.js";
 const { list } = utilClasses;
 function MenuInnerRender(props, ref) {
   const state = useTreeState(props);

package/dist/components/SearchInput/SearchInput.d.ts

@@ -0,0 +1,21 @@
+import { type FieldCaptionProps, type FieldContentGroupProps, type FieldControlProps, type FieldErrorProps, type FieldInputProps, type FieldLabelProps } from '../FieldComponents';
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description" | "errorMessage">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | `data-${string}` | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden"> & {
+    className?: string;
+    style?: import("react").CSSProperties;
+    isLabelHidden?: boolean;
+    startAddon?: import("react").ReactNode;
+    endAddon?: import("react").ReactNode;
+    slotProps?: {
+        root?: FieldControlProps;
+        label?: FieldLabelProps;
+        group?: FieldContentGroupProps;
+        input?: FieldInputProps;
+        caption?: FieldCaptionProps;
+        errorMessage?: FieldErrorProps;
+        clearButton?: import("..").IconButtonProps;
+    };
+    errorMessage?: import("react").ReactNode;
+    caption?: import("react").ReactNode;
+    variant?: import("./types").SearchInputPropVariant;
+    fullWidth?: boolean;
+} & import("@koobiq/react-core").DataAttributeProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SearchInput/SearchInput.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { IconMagnifyingGlass16, IconXmarkCircle16 } from "@koobiq/react-icons";
+import { useSearchFieldState, removeDataAttributes, useSearchField } from "@koobiq/react-primitives";
+import s from "./SearchInput.module.css.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
+import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
+import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
+import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+const SearchInput = forwardRef(
+  (props, ref) => {
+    const {
+      startAddon = /* @__PURE__ */ jsx(IconMagnifyingGlass16, { className: s.searchIcon }),
+      variant = "filled",
+      fullWidth = false,
+      isLabelHidden = false,
+      "data-testid": testId,
+      style,
+      className,
+      caption,
+      errorMessage,
+      isRequired,
+      isReadOnly,
+      label,
+      endAddon,
+      isInvalid,
+      isDisabled,
+      slotProps
+    } = props;
+    const state = useSearchFieldState(removeDataAttributes(props));
+    const domRef = useDOMRef(ref);
+    const hasClearButton = state.value !== "" && !isDisabled && !isReadOnly;
+    const {
+      labelProps: labelPropsAria,
+      inputProps: inputPropsAria,
+      descriptionProps: descriptionPropsAria,
+      errorMessageProps: errorMessagePropsAria,
+      clearButtonProps: clearButtonPropsAria
+    } = useSearchField(removeDataAttributes(props), state, domRef);
+    const rootProps = mergeProps(
+      {
+        style,
+        fullWidth,
+        "data-testid": testId,
+        "data-variant": variant,
+        "data-invalid": isInvalid,
+        "data-disabled": isDisabled,
+        "data-fullwidth": fullWidth,
+        "data-required": isRequired,
+        "data-readonly": isReadOnly,
+        className: clsx(s.base, className)
+      },
+      slotProps?.root
+    );
+    const labelProps = mergeProps(
+      { isHidden: isLabelHidden, isRequired, children: label },
+      slotProps?.label,
+      labelPropsAria
+    );
+    const inputProps = mergeProps(
+      {
+        variant,
+        isInvalid,
+        isDisabled,
+        ref: domRef,
+        className: s.input
+      },
+      slotProps?.input,
+      inputPropsAria
+    );
+    const groupProps = mergeProps(
+      {
+        slotProps: { startAddon: { className: s.startAddon } },
+        startAddon,
+        endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+          hasClearButton && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              ...clearButtonPropsAria,
+              variant: isInvalid ? "error" : "fade-contrast",
+              ...slotProps?.clearButton,
+              className: clsx(
+                s.clearButton,
+                slotProps?.clearButton?.className
+              ),
+              children: /* @__PURE__ */ jsx(IconXmarkCircle16, {})
+            }
+          ),
+          endAddon
+        ] }),
+        variant,
+        isInvalid,
+        isDisabled
+      },
+      slotProps?.group
+    );
+    const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionPropsAria);
+    const errorProps = mergeProps(
+      { isInvalid, children: errorMessage },
+      slotProps?.errorMessage,
+      errorMessagePropsAria
+    );
+    return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: label }),
+      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+    ] });
+  }
+);
+SearchInput.displayName = "SearchInput";
+export {
+  SearchInput
+};

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

@@ -0,0 +1,17 @@
+const input = "kbq-searchinput-input-f896b1";
+const startAddon = "kbq-searchinput-startAddon-08187f";
+const searchIcon = "kbq-searchinput-searchIcon-8bce0f";
+const clearButton = "kbq-searchinput-clearButton-71f872";
+const s = {
+  input,
+  startAddon,
+  searchIcon,
+  clearButton
+};
+export {
+  clearButton,
+  s as default,
+  input,
+  searchIcon,
+  startAddon
+};

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

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

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

@@ -0,0 +1,47 @@
+import type { ComponentRef, CSSProperties, ReactNode } from 'react';
+import type { DataAttributeProps, ExtendableProps } from '@koobiq/react-core';
+import type { AriaSearchFieldProps } from '@koobiq/react-primitives';
+import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps, FieldContentGroupProps, FieldContentGroupPropVariant, FieldControlProps } from '../FieldComponents';
+import type { IconButtonProps } from '../IconButton';
+export declare const searchInputPropVariant: readonly ["filled", "transparent"];
+export type SearchInputPropVariant = FieldContentGroupPropVariant;
+export type SearchInputProps = ExtendableProps<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: FieldControlProps;
+        label?: FieldLabelProps;
+        group?: FieldContentGroupProps;
+        input?: FieldInputProps;
+        caption?: FieldCaptionProps;
+        errorMessage?: FieldErrorProps;
+        clearButton?: IconButtonProps;
+    };
+    /** An error message for the field. */
+    errorMessage?: ReactNode;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /**
+     * The variant to use.
+     * @default 'filled'
+     */
+    variant?: SearchInputPropVariant;
+    /**
+     * If `true`, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+} & DataAttributeProps, Omit<AriaSearchFieldProps, 'description' | 'errorMessage' | 'validationState'>>;
+export type SearchInputRef = ComponentRef<'input'>;

package/dist/components/SearchInput/types.js

@@ -0,0 +1,5 @@
+import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
+const searchInputPropVariant = fieldContentGroupPropVariant;
+export {
+  searchInputPropVariant
+};

package/dist/components/Select/Select.d.ts

@@ -1,10 +1,11 @@
-import { Item, Section } from '../Collections';
-import { ListItemText } from '../List';
+import { Item, Section, Divider } from '../Collections';
+import type { ListItemText } from '../List';
 import type { SelectComponent } from './index';
 declare const SelectComponent: SelectComponent;
 type CompoundedComponent = typeof SelectComponent & {
     Item: typeof Item;
     Section: typeof Section;
+    Divider: typeof Divider;
     ItemText: typeof ListItemText;
 };
 export declare const Select: CompoundedComponent;