@koobiq/react-components 0.4.0 → 0.5.1

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

@@ -7,4 +7,4 @@ export type FieldContentGroupContextProps = {
     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/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/components/TagGroup/TagGroupMultiline.js

@@ -3,14 +3,14 @@ import { useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
 import intlMessages from "../../intl.js";
 import s from "./TagGroup.module.css.js";
 import { Tag } from "../Tag/Tag.js";
-import { useFieldInputGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+import { useFieldContentGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
 const TagGroupMultiline = ({
   state,
   states
 }) => {
   const { isDisabled, isInvalid } = states;
   const t = useLocalizedStringFormatter(intlMessages);
-  const { hasStartAddon } = useFieldInputGroup();
+  const { hasStartAddon } = useFieldContentGroup();
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/components/Select/components/TagGroup/TagGroupResponsive.js

@@ -3,7 +3,7 @@ import { useHideOverflowItems, useLocalizedStringFormatter, clsx } from "@koobiq
 import intlMessages from "../../intl.js";
 import s from "./TagGroup.module.css.js";
 import { getHiddenCount } from "./utils.js";
-import { useFieldInputGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+import { useFieldContentGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
 import { Tag } from "../Tag/Tag.js";
 const TagGroupResponsive = ({
   state,
@@ -17,7 +17,7 @@ const TagGroupResponsive = ({
   });
   const hiddenCount = getHiddenCount(visibleMap);
   const t = useLocalizedStringFormatter(intlMessages);
-  const { hasStartAddon } = useFieldInputGroup();
+  const { hasStartAddon } = useFieldContentGroup();
   return /* @__PURE__ */ jsxs(
     "div",
     {

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

@@ -1,7 +1,7 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaSelectProps, MultiSelectState, useMultiSelectState } from '@koobiq/react-primitives';
-import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldInputGroupProps } from '../FieldComponents';
+import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldContentGroupProps } from '../FieldComponents';
 import type { IconButtonProps } from '../IconButton';
 import type { ListProps } from '../List';
 import type { PopoverProps } from '../Popover';
@@ -68,9 +68,9 @@ export type SelectProps<T> = ExtendableProps<{
         popover?: PopoverProps;
         label?: FieldLabelProps;
         list?: ListProps<T>;
-        control?: FieldSelectProps<'div'>;
+        control?: FieldSelectProps;
         caption?: FieldCaptionProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         errorMessage?: FieldErrorProps;
         clearButton?: IconButtonProps;
     };

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

@@ -1,9 +1,9 @@
 import type { ComponentRef, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { TextFieldProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldContentGroupPropVariant, type FieldErrorProps, type FieldInputProps, type FieldLabelProps } from '../FieldComponents';
 export declare const textareaPropVariant: readonly ["filled", "transparent"];
-export type TextareaPropVariant = (typeof textareaPropVariant)[number];
+export type TextareaPropVariant = FieldContentGroupPropVariant;
 export declare const textareaPropExpand: readonly ["auto-size", "vertical-resize"];
 export type TextareaPropExpand = (typeof textareaPropExpand)[number];
 type TextareaDeprecatedProps = {

package/dist/components/Textarea/types.js

@@ -1,4 +1,5 @@
-const textareaPropVariant = ["filled", "transparent"];
+import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
+const textareaPropVariant = fieldContentGroupPropVariant;
 const textareaPropExpand = ["auto-size", "vertical-resize"];
 export {
   textareaPropExpand,

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

@@ -1,7 +1,7 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaTimeFieldProps, TimeValue } from '@koobiq/react-primitives';
 import type { DateInputPropVariant } from '../DateInput';
-import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldInputGroupProps, FieldLabelProps } from '../FieldComponents';
+import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldContentGroupProps, FieldLabelProps } from '../FieldComponents';
 export type TimePickerProps<T extends TimeValue> = {
     /** Inline styles. */
     style?: CSSProperties;
@@ -25,7 +25,7 @@ export type TimePickerProps<T extends TimeValue> = {
     slotProps?: {
         root?: FieldControlProps;
         label?: FieldLabelProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         caption?: FieldCaptionProps;
         inputDate?: FieldInputDateProps;
         errorMessage?: FieldErrorProps;

package/dist/components/index.d.ts

@@ -34,6 +34,7 @@ export * from './Calendar';
 export * from './DateInput';
 export * from './DatePicker';
 export * from './TimePicker';
+export * from './SearchInput';
 export * from './layout';
 export { useListData, type ListData, type ListOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, type Locale, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -77,6 +77,8 @@ import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js"
 import { dateInputPropVariant } from "./components/DateInput/types.js";
 import { DatePicker, DatePickerRender } from "./components/DatePicker/DatePicker.js";
 import { TimePicker, TimePickerRender } from "./components/TimePicker/TimePicker.js";
+import { SearchInput } from "./components/SearchInput/SearchInput.js";
+import { searchInputPropVariant } from "./components/SearchInput/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -127,6 +129,7 @@ export {
   RadioGroupDescription,
   RadioGroupLabel,
   RouterProvider,
+  SearchInput,
   Select,
   SidePanel,
   SidePanelContent,
@@ -178,6 +181,7 @@ export {
   radioGroupPropSize,
   radioPropLabelPlacement,
   radioPropSize,
+  searchInputPropVariant,
   selectPropSelectedTagsOverflow,
   sidePanelPropPlacement,
   sidePanelPropPosition,

package/dist/style.css

@@ -1944,7 +1944,7 @@
   letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
   color: var(--kbq-foreground-contrast-secondary);
-  margin-block-end: var(--kbq-size-s);
+  margin-block-end: var(--kbq-size-xs);
 }
 
 .kbq-fieldlabel-hidden-9f53e4 {
@@ -2014,6 +2014,16 @@
   inset: 0;
 }
 
+.kbq-fieldcontentgroup-d85be3 + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
+}
+
+.kbq-fieldcontentgroup-d85be3 + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
+}
+
 .kbq-fieldcontentgroup-hasStartAddon-62fb80 {
   --field-control-start-addon-inline-size: 36px;
 }
@@ -2168,9 +2178,7 @@
   letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
   color: var(--kbq-foreground-contrast-secondary);
-  margin: 0;
   transition: color var(--kbq-transition-default);
-  margin-block-start: var(--kbq-size-xxs);
 }
 .kbq-fielderror-a0b0a4 {
   inline-size: 100%;
@@ -2184,9 +2192,7 @@
   letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
   color: var(--kbq-foreground-error);
-  margin: 0;
   transition: color var(--kbq-transition-default);
-  margin-block-start: var(--kbq-size-xxs);
 }
 .kbq-textarea-auto-size-566580 {
   resize: none;
@@ -4028,6 +4034,33 @@
 .kbq-timepicker-startAddon-46c835 > :not(.kbq-timepicker-clock-920ed0) {
   pointer-events: all;
 }
+.kbq-searchinput-input-f896b1::-webkit-search-decoration {
+  appearance: none;
+}
+
+.kbq-searchinput-input-f896b1::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+.kbq-searchinput-input-f896b1::-webkit-search-results-button {
+  appearance: none;
+}
+
+.kbq-searchinput-input-f896b1::-webkit-search-results-decoration {
+  appearance: none;
+}
+
+.kbq-searchinput-startAddon-08187f {
+  pointer-events: none;
+}
+
+.kbq-searchinput-startAddon-08187f > :not(.kbq-searchinput-searchIcon-8bce0f) {
+  pointer-events: all;
+}
+
+.kbq-searchinput-clearButton-71f872 {
+  margin-inline-end: calc(-1 * var(--kbq-size-xxs));
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.4.0",
-    "@koobiq/react-core": "0.4.0",
-    "@koobiq/react-icons": "0.4.0",
-    "@koobiq/react-primitives": "0.4.0"
+    "@koobiq/react-core": "0.5.1",
+    "@koobiq/logger": "0.5.1",
+    "@koobiq/react-icons": "0.5.1",
+    "@koobiq/react-primitives": "0.5.1"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",