@povio/ui 0.0.5 → 0.0.6

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { RadioGroup as RadioGroup$1, Radio } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { FormField } from "../FormField/FormField.js";
+import { radio, radioTypography, radioIndicatorClass } from "./radio.cva.js";
+import { CheckContent } from "../shared/CheckContent.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const RadioGroupBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const uiStyle = UIStyle.useConfig();
+  const radioCva = uiStyle?.radio?.cva ?? radio;
+  const radioTypographyMap = uiStyle?.radio?.typography ?? radioTypography;
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    className,
+    options,
+    variant = ui.radioGroup.variant,
+    hideLabel = ui.radioGroup.hideLabel,
+    ...rest
+  } = props;
+  const formFieldProps = {
+    className,
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1,
+    {
+      ...rest,
+      isDisabled,
+      isInvalid: !!error,
+      children: /* @__PURE__ */ jsx(FormField, { ...formFieldProps, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options.map((option) => /* @__PURE__ */ jsxs(
+        Radio,
+        {
+          value: option.value,
+          className: radioIndicatorClass,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: radioCva({
+                  variant,
+                  ...rest
+                }),
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      "absolute hidden size-1 rounded-full group-selected:block",
+                      "bg-interactive-contained-primary-on-idle group-hover:bg-interactive-contained-primary-on-hover"
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(CheckContent, { typography: radioTypographyMap({ variant, ...rest }), children: option.label })
+          ]
+        },
+        option.value
+      )) }) })
+    }
+  );
+};
+const RadioGroup = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          RadioGroupBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            name: field.name,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(RadioGroupBase, { ...props });
+};
+export {
+  RadioGroup
+};

package/dist/components/inputs/RadioGroup/radio.cva.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+export declare const radio: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface RadioVariantProps extends VariantProps<typeof radio> {
+}
+export declare const radioIndicatorClass = "group flex items-center gap-2";
+export declare const radioTypography: (props: {
+    variant?: "default" | null | undefined;
+}) => TypographyVariantProps | undefined;

package/{src/components/inputs/RadioGroup/radio.cva.ts → dist/components/inputs/RadioGroup/radio.cva.js}

@@ -1,10 +1,7 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-import { uiGroupOutlineClass } from "#ui/components/outline.clsx";
-import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
-import { compoundMapper } from "#ui/utils/compoundMapper";
-
-export const radio = cva(
+import { cva } from "class-variance-authority";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const radio = cva(
   ["flex items-center justify-center border-2", "relative size-3-5 rounded-full p-1-5", uiGroupOutlineClass],
   {
     variants: {
@@ -27,25 +24,24 @@ export const radio = cva(
           "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
           "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
           "group-invalid:border-interactive-contained-error-idle",
-          "group-focus-visible:outline-interactive-contained-primary-focus",
-        ],
-      },
+          "group-focus-visible:outline-interactive-contained-primary-focus"
+        ]
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
-  },
+      variant: "default"
+    }
+  }
 );
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface RadioVariantProps extends VariantProps<typeof radio> {}
-
-export const radioIndicatorClass = "group flex items-center gap-2";
-
-export const radioTypography = compoundMapper<TypographyVariantProps, RadioVariantProps>({
+const radioIndicatorClass = "group flex items-center gap-2";
+const radioTypography = compoundMapper({
   default: {
     size: "label-1",
-    variant: "default",
-  },
+    variant: "default"
+  }
 });
+export {
+  radio,
+  radioIndicatorClass,
+  radioTypography
+};

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,8 @@
+import { Key } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps } from '#ui/components/inputs/Selection/shared/select.types';
+import { OmitDiscriminatedUnion } from '#ui/types/common';
+export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
+export type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
+export declare const Autocomplete: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { SelectBase } from "../shared/SelectBase.js";
+const Autocomplete = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          SelectBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message,
+            isSearchable: true
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SelectBase,
+    {
+      ...props,
+      isSearchable: true
+    }
+  );
+};
+export {
+  Autocomplete
+};

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts

@@ -0,0 +1,19 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { AutocompleteProps } from '#ui/components/inputs/Selection/Autocomplete/Autocomplete';
+import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { OmitDiscriminatedUnion } from '#ui/types/common';
+type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any) => UseQueryResult<Array<TSelectItem>>;
+type TKey<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
+    id: infer InferredKey extends Key;
+} ? InferredKey : never;
+type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>> = OmitDiscriminatedUnion<AutocompleteProps<TKey<TQueryFn>>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey<TQueryFn>> & {
+    query: Parameters<TQueryFn>[0] extends {
+        search?: string;
+    } ? TQueryFn : never;
+    queryParams?: Omit<Parameters<TQueryFn>[0], "search">;
+    queryOptions?: Parameters<TQueryFn>[1];
+};
+export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>>({ query, queryParams, queryOptions, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Autocomplete } from "./Autocomplete.js";
+const QueryAutocomplete = ({
+  query,
+  queryParams,
+  queryOptions,
+  ...props
+}) => {
+  const [search, setSearch] = useState("");
+  const { data: items, isLoading } = query({ search, ...queryParams }, queryOptions);
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      ...props,
+      items: items ?? [],
+      onSearchChange: setSearch,
+      isClientSearchDisabled: true,
+      isLoading
+    }
+  );
+};
+export {
+  QueryAutocomplete
+};

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

@@ -0,0 +1,8 @@
+import { Key } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectAsyncProps } from '#ui/components/inputs/Selection/shared/select.types';
+import { OmitDiscriminatedUnion } from '#ui/types/common';
+export type SelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "initialSelection" | "mapInitialToSelectItem" | keyof SelectAsyncProps>;
+export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey>;
+export declare const Select: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Select/Select.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { SelectBase } from "../shared/SelectBase.js";
+const Select = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          SelectBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(SelectBase, { ...props });
+};
+export {
+  Select
+};

package/dist/components/inputs/Selection/shared/SelectBase.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement, Ref } from 'react';
+import { AriaButtonProps } from 'react-aria';
+import { Key } from 'react-aria-components';
+import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
+import { DefaultInitialSelectItem, GroupedSelectProps, SelectAsyncProps, SelectItem, SelectNewItemProps } from '#ui/components/inputs/Selection/shared/select.types';
+import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = FormFieldProps & GroupedSelectProps<TKey, TInitialSelectItem> & SelectNewItemProps & SelectAsyncProps & InputVariantProps & Pick<AriaButtonProps, "onBlur"> & {
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+    placeholder?: string;
+    hideDropdownIcon?: boolean;
+    isSearchable?: boolean;
+    isClearable?: boolean;
+    isClientSearchDisabled?: boolean;
+    ignoreTriggerWidth?: boolean;
+    items: SelectItem<TKey>[];
+    inputClassName?: string;
+    containerClassName?: string;
+    customTrigger?: ReactElement;
+    onInputChange?: (value: string) => void;
+    onSearchChange?: (value: string) => void;
+    mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+};
+export declare const SelectBase: <TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(dProps: SelectBaseProps<TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/shared/SelectBase.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { SelectDesktop } from "./SelectDesktop.js";
+import { SelectMobile } from "./SelectMobile.js";
+import { SelectContext } from "./select.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
+const SelectBase = (dProps) => {
+  const ui = UIConfig.useConfig();
+  const props = {
+    ...dProps,
+    selectionMode: dProps.selectionMode ?? ui.select.selectionMode,
+    variant: dProps.variant ?? ui.input.variant,
+    as: dProps.as ?? ui.input.as,
+    size: dProps.size ?? ui.input.size,
+    hideLabel: dProps.hideLabel ?? ui.input.hideLabel,
+    isClearable: dProps.isClearable ?? ui.input.isClearable,
+    isSearchable: dProps.isSearchable ?? ui.select.isSearchable
+  };
+  const isDesktop = useBreakpoint("md");
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { ...props, children: isDesktop ? /* @__PURE__ */ jsx(SelectDesktop, { ...props }) : /* @__PURE__ */ jsx(SelectMobile, { ...props }) });
+};
+export {
+  SelectBase
+};

package/dist/components/inputs/Selection/shared/SelectDesktop.d.ts

@@ -0,0 +1,5 @@
+import { Key } from 'react-aria-components';
+import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+type SelectDesktopProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
+export declare const SelectDesktop: <TKey extends Key = Key>({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectDesktopProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -0,0 +1,211 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useRef, useMemo, Fragment } from "react";
+import { useLabel } from "react-aria";
+import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
+import useMeasure from "react-use-measure";
+import { FormField } from "../../FormField/FormField.js";
+import { SelectInput } from "./SelectInput.js";
+import { SelectListBox } from "./SelectListBox.js";
+import { SelectContext } from "./select.context.js";
+import { SelectAllItemId } from "./useSelectItems.js";
+const SelectDesktop = ({
+  ref,
+  error,
+  ignoreTriggerWidth,
+  showSelectionContent,
+  inputClassName,
+  containerClassName,
+  customTrigger,
+  onBlur,
+  ...props
+}) => {
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    headerClassName,
+    errorClassName,
+    placeholder,
+    variant,
+    isDisabled,
+    className,
+    hideLabel,
+    hideDropdownIcon,
+    isSearchable,
+    isClearable,
+    isLoading,
+    as,
+    size
+  } = props;
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  const { labelProps, fieldProps } = useLabel({ label });
+  const triggerRef = useRef(null);
+  const closeComboBoxRef = useRef(null);
+  const [wrapperRef, { width }] = useMeasure();
+  const {
+    fieldState,
+    isOpen,
+    setIsOpen,
+    onInputChange,
+    onChange,
+    onClear,
+    onSelectAll,
+    listItems,
+    selectableListItems,
+    selectedIds,
+    isMultiple
+  } = SelectContext.useSelect();
+  const onSelectionChange = (value) => {
+    if (!value) {
+      return;
+    }
+    if (value === SelectAllItemId) {
+      if (selectedIds.length === selectableListItems.length) {
+        onClear();
+      } else {
+        onSelectAll();
+      }
+      return;
+    }
+    if (!isMultiple) {
+      onChange(value);
+      return;
+    }
+    if (!Array.isArray(fieldState.value)) {
+      onChange([value]);
+      return;
+    }
+    if (fieldState.value.includes(value)) {
+      onChange(fieldState.value.filter((id) => id !== value));
+    } else {
+      onChange(fieldState.value.concat(value));
+    }
+  };
+  const openChangeHandler = (value) => {
+    if (closeComboBoxRef.current && value) {
+      closeComboBoxRef.current.setOpen(false);
+      closeComboBoxRef.current = null;
+    } else {
+      setIsOpen(value);
+    }
+  };
+  const WrapperComponent = isSearchable ? ComboBox : Fragment;
+  const comboBoxProps = {
+    items: listItems,
+    selectedKey: isMultiple ? null : fieldState.value,
+    onSelectionChange,
+    inputValue: fieldState.inputValue,
+    onInputChange,
+    onOpenChange: openChangeHandler,
+    allowsEmptyCollection: true,
+    isDisabled,
+    isInvalid: !!error,
+    menuTrigger: "focus",
+    className: clsx("w-full", containerClassName)
+  };
+  const headerProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps
+  };
+  const dialogTriggerProps = {
+    isOpen,
+    onOpenChange: setIsOpen
+  };
+  const showPopover = useMemo(
+    () => listItems.filter((item) => !item.isSelectAllItem).length > 0 || isLoading,
+    [listItems, isLoading]
+  );
+  return /* @__PURE__ */ jsx(WrapperComponent, { ...isSearchable ? comboBoxProps : {}, children: /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      ...formFieldProps,
+      ...!isSearchable && {
+        labelProps,
+        className: clsx("w-full", containerClassName)
+      },
+      as,
+      ref: wrapperRef,
+      children: [
+        customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, { ...dialogTriggerProps, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...fieldProps,
+            ref: mergeRefs(ref, triggerRef),
+            children: customTrigger
+          }
+        ) }) : /* @__PURE__ */ jsx(
+          SelectInput,
+          {
+            ref: mergeRefs(ref, triggerRef),
+            placeholder,
+            variant,
+            as,
+            size,
+            isDisabled,
+            isInvalid: !!error,
+            className,
+            hideDropdownIcon,
+            isSearchable,
+            isClearable,
+            showSelectionContent,
+            inputClassName,
+            onBlur,
+            onCloseComboBox: (state) => {
+              if (isSearchable) {
+                closeComboBoxRef.current = state;
+              }
+            },
+            fieldProps,
+            headerProps
+          }
+        ),
+        (!isSearchable || showPopover) && /* @__PURE__ */ jsx(
+          Popover,
+          {
+            triggerRef,
+            isOpen,
+            onOpenChange: setIsOpen,
+            className: "my-4 outline-none",
+            style: { width: !ignoreTriggerWidth ? width : void 0 },
+            offset: 0,
+            children: /* @__PURE__ */ jsx(
+              SelectListBox,
+              {
+                ...props,
+                className: "max-h-80 rounded-list-rounding-dropdown border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-5 [scrollbar-width:thin]",
+                autoFocus: !isSearchable
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  SelectDesktop
+};

package/dist/components/inputs/Selection/shared/SelectInput.d.ts

@@ -0,0 +1,15 @@
+import { AriaFieldProps } from 'react-aria';
+import { ComboBoxState } from 'react-stately';
+import { FormFieldHeaderProps } from '#ui/components/inputs/FormField/FormFieldHeader';
+import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName"> {
+    isInvalid?: boolean;
+    className?: string;
+    fieldProps?: AriaFieldProps;
+    headerProps?: FormFieldHeaderProps;
+    onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
+}
+export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, onCloseComboBox, onBlur, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};