@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/input/masked-input.js

@@ -0,0 +1,45 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import InputMask from 'react-input-mask';
+import Input from './input';
+import { StyledInput } from './styled-components';
+var MaskOverride = React.forwardRef(function (_a, ref) {
+    var startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, value = _a.value, disabled = _a.disabled, readOnly = _a.readOnly, restProps = __rest(_a, ["startEnhancer", "endEnhancer", "onChange", "onFocus", "onBlur", "value", "disabled", "readOnly"]);
+    return (_jsx(InputMask, __assign({ onChange: onChange, onFocus: onFocus, onBlur: onBlur, value: value, disabled: disabled, readOnly: readOnly }, restProps, { children: function (props) { return (_jsx(StyledInput, __assign({ ref: ref, onChange: onChange, onFocus: onFocus, onBlur: onBlur, value: value, disabled: disabled, readOnly: readOnly }, props))); } })));
+});
+MaskOverride.displayName = 'MaskOverride';
+export default function MaskedInput(_a) {
+    var mask = _a.mask, maskChar = _a.maskChar, _b = _a.overrides, _c = _b === void 0 ? {} : _b, _d = _c.Input, inputOverride = _d === void 0 ? {} : _d, restOverrides = __rest(_c, ["Input"]), restProps = __rest(_a, ["mask", "maskChar", "overrides"]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var componentOverride = MaskOverride;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var propsOverride = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var styleOverride = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var classNameOverride = '';
+    if (typeof inputOverride === 'function') {
+        componentOverride = inputOverride;
+    }
+    else if (typeof inputOverride === 'object') {
+        componentOverride = inputOverride.component || componentOverride;
+        propsOverride = inputOverride.props || {};
+        styleOverride = inputOverride.style || {};
+        classNameOverride = inputOverride.className || '';
+    }
+    if (typeof propsOverride === 'object') {
+        propsOverride = __assign(__assign({}, propsOverride), { mask: propsOverride.mask || mask, maskChar: propsOverride.maskChar || maskChar });
+    }
+    var nextOverrides = __assign({ Input: {
+            component: componentOverride,
+            props: propsOverride,
+            style: styleOverride,
+            className: classNameOverride,
+        } }, restOverrides);
+    return _jsx(Input, __assign({}, restProps, { overrides: nextOverrides }));
+}
+MaskedInput.defaultProps = {
+    maskChar: ' ',
+};
+MaskedInput.displayName = 'MaskedInput';

package/esm/input/neutral400Hex.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+/**
+ * neutral-400 as hex for light (#B8B9BB) and dark (#94969A) themes.
+ * Used for disabled and unchecked form-control borders and tracks (checkbox, radio, switch)
+ * where the design calls for this palette step and a concrete color is applied on nested
+ * styled nodes (alongside theme.spr tokens elsewhere).
+ *
+ * To be addressed via theme variables in the future.
+ */
+export declare const getNeutral400Hex: (theme: Theme) => string;

package/esm/input/neutral400Hex.js

@@ -0,0 +1,10 @@
+import { isDarkTheme } from '../helpers/themeHelpers';
+/**
+ * neutral-400 as hex for light (#B8B9BB) and dark (#94969A) themes.
+ * Used for disabled and unchecked form-control borders and tracks (checkbox, radio, switch)
+ * where the design calls for this palette step and a concrete color is applied on nested
+ * styled nodes (alongside theme.spr tokens elsewhere).
+ *
+ * To be addressed via theme variables in the future.
+ */
+export var getNeutral400Hex = function (theme) { return (isDarkTheme(theme) ? '#94969A' : '#B8B9BB'); };

package/esm/input/number/NumberInput.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import type { InputProps } from '../types';
+export type NumberInputProps = Omit<InputProps, 'maxCharLimit'> & {
+    showArrows?: boolean;
+    maxDecimalDigits?: number;
+};
+export declare const NumberInput: {
+    ({ inputRef: _inputRef, ...props }: NumberInputProps): ReactElement;
+    __standard: string;
+};

package/esm/input/number/NumberInput.js

@@ -0,0 +1,61 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import _omit from 'lodash/omit';
+import Input from '../input';
+import { BaseNumberInput } from './base-input';
+import { NumberScroll } from './NumberScroll';
+import { useCombineRefObjects } from '../../hooks/useCombinedRef';
+import { mergeOverrides, useOverrides } from '../../overrides';
+import { handleStep } from './utils';
+function getNumberInputIntent(value, intent, _a) {
+    var max = _a.max, min = _a.min;
+    if (value !== '' && typeof value !== 'undefined') {
+        var val = Number(value);
+        if ((typeof max === 'number' && val > max) || (typeof min === 'number' && val < min))
+            return 'error';
+    }
+    return intent !== null && intent !== void 0 ? intent : 'default';
+}
+var NullComponent = function () { return null; };
+var CustomAfter = function (_a) {
+    var afterOverride = _a.afterOverride, numberScrollProps = _a.numberScrollProps, baseAfterProps = __rest(_a, ["afterOverride", "numberScrollProps"]);
+    var _b = __read(useOverrides(afterOverride, NullComponent), 2), After = _b[0], afterProps = _b[1];
+    return (_jsxs(_Fragment, { children: [_jsx(NumberScroll, __assign({}, numberScrollProps)), _jsx(After, __assign({}, baseAfterProps, afterProps))] }));
+};
+export var NumberInput = function (_a) {
+    var _inputRef = _a.inputRef, props = __rest(_a, ["inputRef"]);
+    var inputRef = useCombineRefObjects(_inputRef);
+    var _b = props.showArrows, showArrows = _b === void 0 ? true : _b, maxDecimalDigits = props.maxDecimalDigits, disabled = props.disabled, max = props.max, min = props.min, step = props.step, intent = props.intent, overrides = props.overrides;
+    var mergedOverrides = useMemo(function () {
+        return mergeOverrides(__assign({ Input: {
+                component: BaseNumberInput,
+                props: { maxDecimalDigits: maxDecimalDigits },
+            } }, (showArrows
+            ? {
+                After: {
+                    // @ts-ignore -- Passed afterOverride and numberScrollProps in props
+                    component: CustomAfter,
+                    props: {
+                        afterOverride: overrides === null || overrides === void 0 ? void 0 : overrides.After,
+                        numberScrollProps: {
+                            disabled: disabled,
+                            onTrigger: function (direction) {
+                                var input = inputRef.current;
+                                handleStep(input, {
+                                    step: step,
+                                    up: direction === 'increment',
+                                    max: max,
+                                    min: min,
+                                    precision: maxDecimalDigits,
+                                });
+                            },
+                        },
+                    },
+                },
+            }
+            : {})), _omit(overrides, 'After'));
+    }, [showArrows, maxDecimalDigits, overrides, disabled, step, max, min, inputRef]);
+    return (_jsx(Input, __assign({ type: "text", inputMode: "decimal", inputRef: inputRef }, props, { intent: getNumberInputIntent(props.value, intent, { min: min, max: max }), overrides: mergedOverrides })));
+};
+NumberInput.__standard = 'Component';

package/esm/input/number/NumberScroll.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export type NumberTriggerType = 'increment' | 'decrement';
+export type NumberScrollProps = {
+    disabled?: boolean;
+    onTrigger: (type: NumberTriggerType) => void;
+};
+/**
+ * The NumberScroll component is used to increment and decrement the value of a NumberInput.
+ * Contrary to the name, this does NOT intercept or handle scroll events. While some browsers
+ * will use scroll events to control the input, this behaviour is inconsistent between browsers
+ * and is not part of the spec.
+ * @see https://html.spec.whatwg.org/multipage/input.html#number-state
+ *
+ * These arrows should not be focusable. Arrow keys can be used to replicate their functionality.
+ */
+export declare const NumberScroll: import("react").MemoExoticComponent<({ disabled, onTrigger }: NumberScrollProps) => JSX.Element>;

package/esm/input/number/NumberScroll.js

@@ -0,0 +1,22 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import cx from '../../classNames';
+import { Box } from '../../box';
+import { IconButton } from '../../button';
+import ChevronDownSolid from '../../icon/components/chevron-down-solid';
+import { useStyle } from '../../style';
+/**
+ * The NumberScroll component is used to increment and decrement the value of a NumberInput.
+ * Contrary to the name, this does NOT intercept or handle scroll events. While some browsers
+ * will use scroll events to control the input, this behaviour is inconsistent between browsers
+ * and is not part of the spec.
+ * @see https://html.spec.whatwg.org/multipage/input.html#number-state
+ *
+ * These arrows should not be focusable. Arrow keys can be used to replicate their functionality.
+ */
+export var NumberScroll = memo(function (_a) {
+    var disabled = _a.disabled, onTrigger = _a.onTrigger;
+    var theme = useStyle().theme;
+    return (_jsxs(Box, __assign({ "data-scope": "number-input", "data-part": "control", role: "group", className: "flex flex-col h-full justify-center mr-2", "aria-disabled": disabled }, { children: [_jsx(IconButton, __assign({ "aria-label": "Increment value", onClick: function () { return onTrigger('increment'); }, disabled: disabled, size: "small", tabIndex: -1, shape: "square", className: cx('rotate-180 h-3 w-3', { '-mb-0.5': theme.density === 'COMPACT' }) }, { children: _jsx(ChevronDownSolid, {}) })), _jsx(IconButton, __assign({ size: "small", "aria-label": "Decrement value", onClick: function () { return onTrigger('decrement'); }, disabled: disabled, tabIndex: -1, shape: "square", className: "h-3 w-3" }, { children: _jsx(ChevronDownSolid, {}) }))] })));
+});

package/esm/input/number/StatefulNumberInput.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from 'react';
+import { NumberInputProps } from './NumberInput';
+import type { StatefulContainerProps } from '../types';
+import type { SpacewebComponentProps } from '../../types';
+export type StatefulNumberInputProps = SpacewebComponentProps<Omit<NumberInputProps, 'onChange'>> & StatefulContainerProps<HTMLInputElement>;
+export declare function StatefulNumberInput(props: StatefulNumberInputProps): ReactElement;

package/esm/input/number/StatefulNumberInput.js

@@ -0,0 +1,9 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NumberInput } from './NumberInput';
+import useStatefulInput from '../useStatefulInput';
+export function StatefulNumberInput(props) {
+    var initialState = props.initialState, stateReducer = props.stateReducer, onChange = props.onChange, restProps = __rest(props, ["initialState", "stateReducer", "onChange"]);
+    var adaptedProps = useStatefulInput({ initialState: initialState, onChange: onChange, stateReducer: stateReducer });
+    return _jsx(NumberInput, __assign({}, restProps, adaptedProps));
+}

package/esm/input/number/base-input.d.ts

@@ -0,0 +1,55 @@
+import { ChangeEvent, KeyboardEvent } from 'react';
+import type { NumberInputProps } from './NumberInput';
+export declare const BaseNumberInput: import("react").ForwardRefExoticComponent<Omit<{
+    'aria-activedescendant'?: string | undefined;
+    'aria-autocomplete'?: string | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-haspopup'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    adjoined?: "none" | "left" | "right" | "both" | undefined;
+    autoComplete?: string | undefined;
+    disabled?: boolean | undefined;
+    pattern?: string | undefined;
+    id?: string | undefined;
+    variant?: import("../types").InputVariant | undefined;
+    intent?: import("../..").Intent | undefined;
+    inputMode?: string | undefined;
+    inputRef?: import("react").RefObject<HTMLInputElement> | undefined;
+    name?: string | undefined;
+    onBlur?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
+    onChange?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onKeyDown?: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onKeyPress?: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onKeyUp?: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onFocus?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
+    clearable?: boolean | undefined;
+    clearOnEscape?: boolean | undefined;
+    maxLength?: number | undefined;
+    onClear?: ((e: import("react").SyntheticEvent<HTMLInputElement, Event>) => void) | undefined;
+    overrides?: import("../types").InputOverrides | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    resize?: import("csstype").Property.Resize | undefined;
+    role?: string | undefined;
+    size?: import("../types").InputSize | undefined;
+    type?: string | undefined;
+    value?: string | number | undefined;
+    rows?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    readOnly?: boolean | undefined;
+    debouncedOnChange?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    debounceInterval?: number | undefined;
+    maxCharLimit?: number | undefined;
+    draggable?: boolean | undefined;
+    endEnhancer?: import("react").ReactNode | ((props: import("../types").SharedProps) => import("react").ReactNode);
+    animate?: boolean | undefined;
+}, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("../..").ClassName;
+    style?: import("../..").Styles;
+} & Pick<NumberInputProps, "maxDecimalDigits"> & import("react").RefAttributes<HTMLInputElement>>;

package/esm/input/number/base-input.js

@@ -0,0 +1,26 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { StyledInput } from '../styled-components';
+import { handleStep, replaceNonNumberChars, handlePrecision } from './utils';
+import { INPUT_PATTERN } from './constants';
+export var BaseNumberInput = forwardRef(function (props, ref) {
+    var _a, _b;
+    var onChange = props.onChange, onKeyDown = props.onKeyDown, readOnly = props.readOnly, step = props.step, max = props.max, min = props.min, maxDecimalDigits = props.maxDecimalDigits;
+    var handleChange = useCallback(function (event) {
+        var receivedValue = event.target.value;
+        event.target.value = handlePrecision(replaceNonNumberChars(receivedValue), maxDecimalDigits);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [maxDecimalDigits, onChange]);
+    var handleKeyDown = useCallback(function (e) {
+        if (!readOnly && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+            var input = e.target;
+            handleStep(input, { step: step, up: e.key === 'ArrowUp', max: max, min: min, precision: maxDecimalDigits });
+            // prevent event from doing something unexpected
+            e.stopPropagation();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    }, [onKeyDown, readOnly, step, max, min, maxDecimalDigits]);
+    return (_jsx(StyledInput, __assign({ ref: ref }, props, { role: (_a = props.role) !== null && _a !== void 0 ? _a : 'spinbutton', pattern: (_b = props.pattern) !== null && _b !== void 0 ? _b : INPUT_PATTERN, onChange: handleChange, onKeyDown: handleKeyDown })));
+});
+BaseNumberInput.displayName = 'BaseNumberInput';

package/esm/input/number/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const INPUT_PATTERN = "[0-9]*(.[0-9]+)?";
+export declare const DEFAULT_DECIMAL_PRECISION = 12;
+export declare const DECIMAL_SEPARATOR: string;
+export declare const TRAILING_DECIMAL_ZEROES: RegExp;
+export declare const TRAILING_DECIMAL_ZEROES_REPLACER = "$1";

package/esm/input/number/constants.js

@@ -0,0 +1,18 @@
+var getDecimalSeparator = function () {
+    var numToFormat = 1.1;
+    try {
+        return Intl.NumberFormat()
+            .formatToParts(numToFormat)
+            .find(function (part) { return part.type === 'decimal'; }).value;
+    }
+    catch (_a) {
+        // If Intl isn't supported
+        return '.';
+    }
+};
+export var INPUT_PATTERN = '[0-9]*(.[0-9]+)?';
+export var DEFAULT_DECIMAL_PRECISION = 12; // 12 digits of precision for decimals
+// Only allow the current locale's decimal separator
+export var DECIMAL_SEPARATOR = getDecimalSeparator();
+export var TRAILING_DECIMAL_ZEROES = new RegExp("[".concat(DECIMAL_SEPARATOR, "]0*$|([").concat(DECIMAL_SEPARATOR, "].*?)0+$"));
+export var TRAILING_DECIMAL_ZEROES_REPLACER = '$1';

package/esm/input/number/utils.d.ts

@@ -0,0 +1,18 @@
+type StepContext = {
+    up: boolean;
+    step?: `${number}` | number | undefined;
+    min?: number;
+    max?: number;
+    precision?: number;
+};
+export declare function runStep(baseValue: number, context: StepContext): string | null;
+export declare function handleStep(input: HTMLInputElement | null, context: StepContext): void;
+/**
+ * Safari trails about 5 years on RegExp lookarounds.
+ * Until Safari 16 is our supported version, we'll need to use a full function instead of a simple expression.
+ * Revert to 056bf7fe159e0619e89be8c197d46ce0bde4e200 once support for Safari<16 is dropped.
+ * @see https://bugs.webkit.org/show_bug.cgi?id=174931
+ */
+export declare function replaceNonNumberChars(input: string): string;
+export declare function handlePrecision(input: string, precision?: number): string;
+export {};

package/esm/input/number/utils.js

@@ -0,0 +1,67 @@
+import { __read } from "tslib";
+import createEvent from '../../baseui/utils/create-event';
+import { DEFAULT_DECIMAL_PRECISION, DECIMAL_SEPARATOR, TRAILING_DECIMAL_ZEROES, TRAILING_DECIMAL_ZEROES_REPLACER, } from './constants';
+var isNumber = function (n) { return typeof n !== 'undefined'; };
+export function runStep(baseValue, context) {
+    var _a;
+    var stepSize = !context.step || Number.isNaN(+context.step) ? 1 : +context.step;
+    var newNum = context.up ? baseValue + stepSize : baseValue - stepSize;
+    if (isNumber(context.max) && newNum > +context.max) {
+        if (context.up && baseValue >= +context.max)
+            return null;
+        newNum = +context.max;
+    }
+    else if (isNumber(context.min) && newNum < +context.min) {
+        if (!context.up && baseValue <= +context.min)
+            return null;
+        newNum = +context.min;
+    }
+    // Rounding required to prevent floating point issues
+    // See: https://0.30000000000000004.com
+    return newNum
+        .toFixed((_a = context.precision) !== null && _a !== void 0 ? _a : DEFAULT_DECIMAL_PRECISION)
+        .replace(TRAILING_DECIMAL_ZEROES, TRAILING_DECIMAL_ZEROES_REPLACER);
+}
+export function handleStep(input, context) {
+    var _a;
+    if (!input)
+        return;
+    var originalValue = input.value;
+    if (originalValue.length !== 0 && Number.isNaN(+originalValue))
+        return;
+    var nativeInputValueSetter = (_a = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')) === null || _a === void 0 ? void 0 : _a.set;
+    if (!nativeInputValueSetter)
+        return;
+    var baseValue = originalValue.length === 0 ? 0 : parseFloat(originalValue);
+    var newNum = runStep(baseValue, context);
+    if (newNum === null)
+        return;
+    nativeInputValueSetter.call(input, newNum);
+    input.dispatchEvent(createEvent('input'));
+}
+/**
+ * Safari trails about 5 years on RegExp lookarounds.
+ * Until Safari 16 is our supported version, we'll need to use a full function instead of a simple expression.
+ * Revert to 056bf7fe159e0619e89be8c197d46ce0bde4e200 once support for Safari<16 is dropped.
+ * @see https://bugs.webkit.org/show_bug.cgi?id=174931
+ */
+export function replaceNonNumberChars(input) {
+    var base = input.replace(new RegExp("[^0-9".concat(DECIMAL_SEPARATOR, "-]"), 'g'), '');
+    var withoutExtraMinuses = base.replace(/.-/g, function (match) { return match[0]; });
+    var _a = __read(withoutExtraMinuses.split(DECIMAL_SEPARATOR)), whole = _a[0], decimal = _a.slice(1);
+    var withoutExtraDecimals = decimal.length > 0 ? [whole, decimal.join('')].join(DECIMAL_SEPARATOR) : whole;
+    var withoutLeadingZeroes = withoutExtraDecimals === '0' || withoutExtraDecimals.startsWith("0".concat(DECIMAL_SEPARATOR))
+        ? withoutExtraDecimals
+        : withoutExtraDecimals.replace(new RegExp("^(-?)0+(?!$|\\".concat(DECIMAL_SEPARATOR, ")")), '$1');
+    return withoutLeadingZeroes;
+}
+export function handlePrecision(input, precision) {
+    if (precision === void 0) { precision = DEFAULT_DECIMAL_PRECISION; }
+    var allowDecimals = precision !== 0;
+    var _a = __read(input.split(DECIMAL_SEPARATOR), 2), integral = _a[0], decimal = _a[1];
+    if (!allowDecimals)
+        return integral;
+    if (!decimal || decimal.length <= precision)
+        return input;
+    return "".concat(integral).concat(DECIMAL_SEPARATOR).concat(decimal.slice(0, precision));
+}

package/esm/input/stateful-input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { StatefulInputProps } from './types';
+declare function StatefulInput(props: StatefulInputProps): React.ReactElement;
+declare namespace StatefulInput {
+    var displayName: string;
+}
+export default StatefulInput;

package/esm/input/stateful-input.js

@@ -0,0 +1,14 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Input from './input';
+import useStatefulInput from './useStatefulInput';
+export default function StatefulInput(props) {
+    var initialState = props.initialState, stateReducer = props.stateReducer, onChange = props.onChange, restProps = __rest(props, ["initialState", "stateReducer", "onChange"]);
+    var adaptedProps = useStatefulInput({
+        initialState: initialState,
+        onChange: onChange,
+        stateReducer: stateReducer,
+    });
+    return _jsx(Input, __assign({}, restProps, adaptedProps));
+}
+StatefulInput.displayName = 'StatefulInput';

package/esm/input/styled-components.d.ts

@@ -1,6 +1,29 @@
-import { StyleFn, Styles } from '../types';
-import { SharedProps } from './types';
-export declare const getInputContainerStyles: Styles;
-export declare const getEnhancerStyles: Styles;
-export declare const getPlaceholderTypography: Styles;
+import type { ClassName, CSSVariablesStyleFn, StyleFn } from '../types';
+import type { SharedProps } from './types';
+export declare const getInputContainerStyles: ClassName;
+export declare const StyledMaskToggleButton: import("../style").StyledComponent;
+export declare const StyledClearIconContainer: import("../style").StyledComponent;
+export declare const StyledClearIcon: import("../style").StyledComponent;
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledInputEnhancer: import("../style").StyledComponent;
+export declare const inputContainerStyleVariables: ({ theme }: {
+    theme: any;
+}, { $size, $intent, $variant, $animate, $disabled }: {
+    $size: any;
+    $intent: any;
+    $variant: any;
+    $animate: any;
+    $disabled: any;
+}) => {
+    '--sw-ai-animated-background-size'?: string | undefined;
+    '--sw-before-border-radius': string;
+    '--sw-after-border-radius': string;
+    '--sw-animation-play-state': string;
+    '--sw-before-left': string;
+};
+export declare const StyledInputContainer: import("../style").StyledComponent;
+export declare const inputStyleVariables: CSSVariablesStyleFn<Partial<SharedProps>>;
+export declare const StyledInput: import("../style").StyledComponent;
+export declare const inputCharLimitPositionClasses = "h-full static shrink-0 bg-transparent pr-2";
+export declare const textareaCharLimitPositionClasses = "absolute bottom-0 left-0 spr-ui-01 p-1";
 export declare const getInputStyles: StyleFn<Partial<Pick<SharedProps, '$size' | '$disabled' | '$variant'>>>;