@koobiq/react-components 0.0.1-beta.1

package/dist/components/Grid/Grid.js

@@ -0,0 +1,52 @@
+"use client";
+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 { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
+import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
+const Grid = polymorphicForwardRef(
+  ({
+    as: Tag = "div",
+    gap: gapProp,
+    cols: colsProp,
+    style: styleProp,
+    colGap: colGapProp,
+    rowGap: rowGapProp,
+    alignItems: alignItemsProp,
+    justifyItems: justifyItemsProp,
+    children,
+    className,
+    ...other
+  }, ref) => {
+    const breakpoints = useMatchedBreakpoints();
+    const cols = getResponsiveValue(colsProp, breakpoints);
+    const gap = getResponsiveValue(gapProp, breakpoints);
+    const colGap = getResponsiveValue(colGapProp, breakpoints);
+    const rowGap = getResponsiveValue(rowGapProp, breakpoints);
+    const alignItems = getResponsiveValue(alignItemsProp, breakpoints);
+    const justifyItems = getResponsiveValue(justifyItemsProp, breakpoints);
+    const style = {
+      ...styleProp,
+      "--grid-cols": cols,
+      "--grid-col-gap": normalizeGap(colGap ?? gap),
+      "--grid-row-gap": normalizeGap(rowGap ?? gap),
+      "--grid-align-items": alignItems,
+      "--grid-justify-items": justifyItems
+    };
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        className: clsx(s.base, className),
+        style,
+        ...other,
+        ref,
+        children
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+export {
+  Grid
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-grid-05a90c";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

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

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

package/dist/components/Grid/components/GridItem/GridItem.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import s from "./GridItem.module.css.js";
+import { useMatchedBreakpoints } from "../../../Provider/BreakpointsContext.js";
+import { getResponsiveValue } from "../../../../utils/getResponsiveValue/getResponsiveValue.js";
+const GridItem = polymorphicForwardRef(
+  ({
+    as: Tag = "div",
+    children,
+    className,
+    style: styleProp,
+    col: colProp,
+    row: rowProp,
+    colStart: colStartProp,
+    rowStart: rowStartProp,
+    alignSelf: alignSelfProp,
+    justifySelf: justifySelfProp,
+    ...other
+  }, ref) => {
+    const breakpoints = useMatchedBreakpoints();
+    const col = getResponsiveValue(colProp, breakpoints);
+    const colStart = getResponsiveValue(colStartProp, breakpoints);
+    const row = getResponsiveValue(rowProp, breakpoints);
+    const rowStart = getResponsiveValue(rowStartProp, breakpoints);
+    const alignSelf = getResponsiveValue(alignSelfProp, breakpoints);
+    const justifySelf = getResponsiveValue(justifySelfProp, breakpoints);
+    const style = {
+      ...styleProp,
+      "--grid-item-col-end": col,
+      "--grid-item-col-start": colStart ? `${colStart} / span` : void 0,
+      "--grid-item-row-end": row,
+      "--grid-item-row-start": rowStart ? `${rowStart} / span` : void 0,
+      "--grid-align-self": alignSelf,
+      "--grid-justify-self": justifySelf
+    };
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        style,
+        className: clsx(s.base, className),
+        ...other,
+        ref,
+        children
+      }
+    );
+  }
+);
+GridItem.displayName = "GridItem";
+export {
+  GridItem
+};

package/dist/components/Grid/components/GridItem/GridItem.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-griditem-46457b";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

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

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

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

@@ -0,0 +1,22 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ResponsiveValue } from '../../../../utils';
+export type GridItemBaseProps = {
+    /** The number of columns an item spans. */
+    col?: number | ResponsiveValue<number>;
+    /** Move an item to a specific column. */
+    colStart?: number | ResponsiveValue<number>;
+    /** The number of rows an item spans. */
+    row?: number | ResponsiveValue<number>;
+    /** Move an item to a specific row. */
+    rowStart?: number | ResponsiveValue<number>;
+    /** The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. */
+    justifySelf?: CSSProperties['justifySelf'] | ResponsiveValue<CSSProperties['justifySelf']>;
+    /** The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. */
+    alignSelf?: CSSProperties['alignSelf'] | ResponsiveValue<CSSProperties['alignSelf']>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

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

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

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

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './Grid';
+export * from './components';

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

@@ -0,0 +1,30 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ResponsiveValue } from '../../utils';
+export declare const gridPropGap: readonly [0, "3xs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "3xl", "4xl", "5xl", "6xl", "7xl"];
+export type GridPropGap = (typeof gridPropGap)[number];
+export type GridBaseProps = {
+    /** Number of columns. */
+    cols?: number | ResponsiveValue<number>;
+    /** Size of gaps between columns and rows. */
+    gap?: GridPropGap | ResponsiveValue<GridPropGap>;
+    /** Size of gaps between columns. */
+    colGap?: GridPropGap | ResponsiveValue<GridPropGap>;
+    /** Size of gaps between rows. */
+    rowGap?: GridPropGap | ResponsiveValue<GridPropGap>;
+    /**
+     * Control item alignment on the horizontal axis.
+     * Defines the default `justifySelf` for all items in the grid.
+     * */
+    justifyItems?: CSSProperties['justifyItems'] | ResponsiveValue<CSSProperties['justifyItems']>;
+    /**
+     * Control item alignment on the vertical axis.
+     * Defines the default `alignSelf` for all items in the grid.
+     * */
+    alignItems?: CSSProperties['alignItems'] | ResponsiveValue<CSSProperties['alignItems']>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

package/dist/components/Grid/types.js

@@ -0,0 +1,19 @@
+const gridPropGap = [
+  0,
+  "3xs",
+  "xxs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl",
+  "xxl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl"
+];
+export {
+  gridPropGap
+};

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

@@ -0,0 +1,2 @@
+import type { GridPropGap } from './types';
+export declare const normalizeGap: (gap: GridPropGap | undefined) => string | 0 | undefined;

package/dist/components/Grid/utils.js

@@ -0,0 +1,8 @@
+import { isString } from "@koobiq/react-core";
+const normalizeGap = (gap) => {
+  if (isString(gap)) return `var(--kbq-size-${gap})`;
+  return gap;
+};
+export {
+  normalizeGap
+};

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

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { IconButtonBaseProps } from './types.js';
+export declare const IconButton: import("@koobiq/react-core").PolyForwardComponent<"button", IconButtonBaseProps, ElementType>;
+export type IconButtonProps<As extends ElementType = 'button'> = ComponentPropsWithRef<typeof IconButton<As>>;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { Button } from "@koobiq/react-primitives";
+import s from "./IconButton.module.css.js";
+const IconButton = polymorphicForwardRef(
+  ({
+    as: Tag = "button",
+    variant = "theme",
+    size = "xl",
+    compact = false,
+    disabled = false,
+    children,
+    className,
+    ...other
+  }, ref) => {
+    const classNameFn = ({
+      hovered,
+      disabled: disabled2,
+      loading,
+      focusVisible,
+      pressed
+    }) => clsx(
+      s.base,
+      size && s[size],
+      variant && s[variant],
+      hovered && s.hovered,
+      pressed && s.pressed,
+      disabled2 && s.disabled,
+      loading && s.progress,
+      compact && s.compact,
+      focusVisible && s.focusVisible,
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        as: Tag,
+        disabled,
+        className: classNameFn,
+        ...other,
+        ref,
+        children
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+export {
+  IconButton
+};

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

@@ -0,0 +1,43 @@
+const base = "kbq-iconbutton-0ff1bd";
+const l = "kbq-iconbutton-l-2f8f66";
+const xl = "kbq-iconbutton-xl-7ea358";
+const compact = "kbq-iconbutton-compact-1a8941";
+const hovered = "kbq-iconbutton-hovered-daeb15";
+const pressed = "kbq-iconbutton-pressed-cd5790";
+const focusVisible = "kbq-iconbutton-focusVisible-fe4d04";
+const disabled = "kbq-iconbutton-disabled-d2beb1";
+const theme = "kbq-iconbutton-theme-932771";
+const error = "kbq-iconbutton-error-8e5261";
+const success = "kbq-iconbutton-success-4c701d";
+const warning = "kbq-iconbutton-warning-a2092b";
+const s = {
+  base,
+  l,
+  xl,
+  compact,
+  hovered,
+  pressed,
+  focusVisible,
+  disabled,
+  theme,
+  "theme-contrast": "kbq-iconbutton-theme-contrast-6258bb",
+  "fade-contrast": "kbq-iconbutton-fade-contrast-4e4d6d",
+  error,
+  success,
+  warning
+};
+export {
+  base,
+  compact,
+  s as default,
+  disabled,
+  error,
+  focusVisible,
+  hovered,
+  l,
+  pressed,
+  success,
+  theme,
+  warning,
+  xl
+};

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

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

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

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { ButtonOptions, HoverEvent } 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 = {
+    /** The content of the component. */
+    children?: ReactNode;
+    /**
+     * The variant to use.
+     * @default theme
+     * */
+    variant?: IconButtonPropVariant;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+    /**
+     * Size of the component
+     * @default xl
+     * */
+    size?: IconButtonPropSize;
+    /**
+     * If `true`, reduce the size of the component canvas.
+     * @default false
+     * */
+    compact?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** 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'];
+};

package/dist/components/IconButton/types.js

@@ -0,0 +1,13 @@
+const iconButtonPropVariant = [
+  "theme",
+  "theme-contrast",
+  "fade-contrast",
+  "error",
+  "success",
+  "warning"
+];
+const iconButtonPropSize = ["l", "xl"];
+export {
+  iconButtonPropSize,
+  iconButtonPropVariant
+};

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

@@ -0,0 +1,22 @@
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseTextFieldProps, "inputElementType">, "caption" | "label" | "style" | "className" | "disabled" | "required" | "error" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "hiddenLabel"> & {
+    label?: import("react").ReactNode;
+    className?: string;
+    startAddon?: import("react").ReactNode;
+    endAddon?: import("react").ReactNode;
+    variant?: import("./types").InputPropVariant;
+    error?: boolean;
+    errorMessage?: string | number;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    hiddenLabel?: boolean;
+    caption?: string | number;
+    required?: boolean;
+    style?: import("react").CSSProperties;
+    'data-testid'?: string | number;
+    slotProps?: {
+        label?: import("../FieldComponents").FieldLabelProps;
+        input?: import("../FieldComponents").FieldInputProps;
+        caption?: import("../FieldComponents").FieldCaptionProps;
+        errorMessage?: import("../FieldComponents").FieldErrorProps;
+    };
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps } from "@koobiq/react-core";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
+import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
+import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+const Input = forwardRef((props, ref) => {
+  const {
+    variant = "filled",
+    fullWidth = false,
+    hiddenLabel = false,
+    label,
+    startAddon,
+    endAddon,
+    errorMessage,
+    slotProps,
+    caption,
+    ...other
+  } = props;
+  const domRef = useDOMRef(ref);
+  const rootProps = mergeProps(
+    {
+      label,
+      fullWidth,
+      errorMessage,
+      "data-variant": variant,
+      "data-fullwidth": fullWidth
+    },
+    other
+  );
+  return /* @__PURE__ */ jsx(FieldControl, { ...rootProps, children: ({ error, required, disabled }) => {
+    const labelProps = mergeProps(
+      { hidden: hiddenLabel, required },
+      slotProps?.label
+    );
+    const inputProps = mergeProps(
+      {
+        error,
+        variant,
+        disabled,
+        ref: domRef
+      },
+      slotProps?.input
+    );
+    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(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+    ] });
+  } });
+});
+Input.displayName = "Input";
+export {
+  Input
+};

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export declare const fieldAddonPropPlacement: readonly ["start", "end"];
+export type FieldAddonPlacement = (typeof fieldAddonPropPlacement)[number];
+export type FieldAddonProps = ExtendableComponentPropsWithRef<{
+    children?: ReactNode;
+    placement?: FieldAddonPlacement;
+    error?: boolean;
+}, 'div'>;
+export declare const FieldAddon: import("react").ForwardRefExoticComponent<Omit<FieldAddonProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type FieldCaptionProps = ExtendableComponentPropsWithRef<{
+    children?: ReactNode;
+}, 'div'>;
+export declare const FieldCaption: import("react").ForwardRefExoticComponent<Omit<FieldCaptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type FieldControlProps = ExtendableComponentPropsWithRef<{
+    children?: ReactNode;
+    fullWidth?: boolean;
+    error?: boolean;
+    className?: string;
+}, 'div'>;
+export declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<FieldControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type FieldErrorProps = ExtendableComponentPropsWithRef<{
+    children?: ReactNode;
+    error?: boolean;
+}, 'div'>;
+export declare const FieldError: import("react").ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,9 @@
+import type { useTextField } from '@koobiq/react-primitives';
+import type { InputPropVariant } from '../../types';
+export type FieldInputProps = {
+    error?: boolean;
+    variant?: InputPropVariant;
+    disabled?: boolean;
+    className?: string;
+} & ReturnType<typeof useTextField>['inputProps'];
+export declare const FieldInput: import("@koobiq/react-core").PolyForwardComponent<"input", FieldInputProps, import("react").ElementType>;

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

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

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
+    children?: ReactNode;
+    className?: string;
+}, 'div'>;
+export declare const FieldInputGroup: import("react").ForwardRefExoticComponent<Omit<FieldInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type FieldLabelProps = ExtendableComponentPropsWithRef<{
+    children?: ReactNode;
+    className?: string;
+    hiddenLabel?: boolean;
+    required?: boolean;
+}, 'label'>;
+export declare const FieldLabel: import("react").ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

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

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

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

@@ -0,0 +1,7 @@
+export * from './FieldControl';
+export * from './FieldInput';
+export * from './FieldLabel';
+export * from './FieldAddon';
+export * from './FieldCaption';
+export * from './FieldError';
+export * from './FieldInputGroup';

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

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

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

@@ -0,0 +1,62 @@
+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';
+export declare const inputPropVariant: readonly ["filled", "transparent"];
+export type InputPropVariant = (typeof inputPropVariant)[number];
+export type InputProps = ExtendableProps<{
+    /** The content to display as the label. */
+    label?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /**
+     * The variant to use.
+     * @default filled
+     * */
+    variant?: InputPropVariant;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     * */
+    error?: boolean;
+    /** Message for the error state */
+    errorMessage?: string | number;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     * */
+    fullWidth?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     * */
+    hiddenLabel?: boolean;
+    /** The helper text content. */
+    caption?: string | number;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     * */
+    required?: boolean;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        label?: FieldLabelProps;
+        input?: FieldInputProps;
+        caption?: FieldCaptionProps;
+        errorMessage?: FieldErrorProps;
+    };
+}, Omit<UseTextFieldProps, 'inputElementType'>>;
+export type InputRef = ComponentRef<'input'>;

package/dist/components/Input/types.js

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