@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/input/base-input.js

@@ -0,0 +1,155 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, useCallback, useState } from 'react';
+import { ADJOINED, CUSTOM_INPUT_TYPE, ENHANCER_POSITION } from './constants';
+import { StyledInputContainer, StyledInput, StyledClearIconContainer, StyledMaskToggleButton, inputCharLimitPositionClasses, textareaCharLimitPositionClasses, StyledInputEnhancer, } from './styled-components';
+import OverviewIcon from '../icon/components/overview';
+import NoPreviewIcon from '../icon/components/noPreview';
+import createEvent from '../baseui/utils/create-event';
+import { isFocusVisible, forkFocus, forkBlur } from '../baseui/utils/focusVisible';
+import { useOverrides } from '../overrides';
+import _noop from 'lodash/noop';
+import ClearIconButton from '../helpers/ClearIconButton';
+import { useDebouncedEventHandler } from '../hooks/useDebouncedEventHandler';
+import { Box } from '../box';
+import cx from '../classNames';
+import { Typography } from '../typography';
+import { CircularProgress } from '../progress';
+var NullComponent = function () { return null; };
+var BaseInput = function (_a) {
+    var value = _a.value, _b = _a.adjoined, adjoined = _b === void 0 ? ADJOINED.none : _b, _c = _a.autoComplete, autoComplete = _c === void 0 ? 'on' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.name, name = _e === void 0 ? '' : _e, _f = _a.onBlur, onBlur = _f === void 0 ? _noop : _f, _g = _a.onChange, onChange = _g === void 0 ? _noop : _g, _h = _a.onKeyDown, onKeyDown = _h === void 0 ? _noop : _h, _j = _a.onKeyPress, onKeyPress = _j === void 0 ? _noop : _j, _k = _a.onKeyUp, onKeyUp = _k === void 0 ? _noop : _k, _l = _a.onFocus, onFocus = _l === void 0 ? _noop : _l, _m = _a.onClear, onClear = _m === void 0 ? _noop : _m, _o = _a.clearable, clearable = _o === void 0 ? false : _o, _p = _a.clearOnEscape, clearOnEscape = _p === void 0 ? true : _p, _q = _a.overrides, overrides = _q === void 0 ? {} : _q, pattern = _a.pattern, _r = _a.placeholder, placeholder = _r === void 0 ? '' : _r, _s = _a.required, required = _s === void 0 ? false : _s, _t = _a.size, size = _t === void 0 ? 'md' : _t, _u = _a.type, type = _u === void 0 ? 'text' : _u, _v = _a.inputMode, inputMode = _v === void 0 ? 'text' : _v, _w = _a.readOnly, readOnly = _w === void 0 ? false : _w, maxLength = _a.maxLength, id = _a.id, min = _a.min, max = _a.max, step = _a.step, role = _a.role, rows = _a.rows, _x = _a.inputRef, inputRef = _x === void 0 ? createRef() : _x, resize = _a.resize, _y = _a.intent, intent = _y === void 0 ? 'default' : _y, _z = _a.variant, variant = _z === void 0 ? 'default' : _z, _0 = _a.debouncedOnChange, debouncedOnChange = _0 === void 0 ? _noop : _0, _1 = _a.debounceInterval, debounceInterval = _1 === void 0 ? 200 : _1, style = _a.style, maxCharLimit = _a.maxCharLimit, _2 = _a.draggable, draggable = _2 === void 0 ? false : _2, endEnhancer = _a.endEnhancer, animate = _a.animate, props = __rest(_a, ["value", "adjoined", "autoComplete", "disabled", "name", "onBlur", "onChange", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "onClear", "clearable", "clearOnEscape", "overrides", "pattern", "placeholder", "required", "size", "type", "inputMode", "readOnly", "maxLength", "id", "min", "max", "step", "role", "rows", "inputRef", "resize", "intent", "variant", "debouncedOnChange", "debounceInterval", "style", "maxCharLimit", "draggable", "endEnhancer", "animate"]);
+    var handleChange = useDebouncedEventHandler(debouncedOnChange, onChange, debounceInterval);
+    var handleOnDragStart = useCallback(function (e) { return e.preventDefault(); }, []);
+    var isEnhancer = function (enhancer) { return Boolean(enhancer || enhancer === 0); };
+    var showClearIcon = !(disabled ||
+        readOnly ||
+        !clearable ||
+        value == null ||
+        (typeof value === 'string' && value.length === 0));
+    var showMaskToggle = type === 'password';
+    var _3 = __read(useState({
+        isFocused: false,
+        isMasked: type === 'password',
+        initialType: type,
+        isFocusVisibleForClear: false,
+        isFocusVisibleForMaskToggle: false,
+        showBoxShadow: true,
+    }), 2), state = _3[0], setState = _3[1];
+    var handleFocusForClear = useCallback(function (event) {
+        if (isFocusVisible(event)) {
+            setState(function (prev) { return (__assign(__assign({}, prev), { isFocusVisibleForClear: false })); });
+        }
+    }, []);
+    var handleBlurForClear = useCallback(function () {
+        if (state.isFocusVisibleForClear) {
+            setState(function (prev) { return (__assign(__assign({}, prev), { isFocusVisibleForClear: false })); });
+        }
+    }, [state.isFocusVisibleForClear]);
+    var handleFocusForMaskToggle = useCallback(function (event) {
+        if (isFocusVisible(event)) {
+            setState(function (prev) { return (__assign(__assign({}, prev), { isFocusVisibleForMaskToggle: false })); });
+        }
+    }, []);
+    var handleBlurForMaskToggle = useCallback(function (event) {
+        if (state.isFocusVisibleForMaskToggle) {
+            setState(function (prev) { return (__assign(__assign({}, prev), { isFocusVisibleForMaskToggle: false })); });
+        }
+    }, [state.isFocusVisibleForMaskToggle]);
+    var clearValue = useCallback(function () {
+        // trigger a fake input change event (as if all text was deleted)
+        var input = inputRef.current;
+        if (input) {
+            var nativeInputValue = Object.getOwnPropertyDescriptor(type === CUSTOM_INPUT_TYPE.textarea
+                ? // todo(flow->ts): globals, not props of window object
+                    HTMLTextAreaElement.prototype
+                : HTMLInputElement.prototype, 'value');
+            if (nativeInputValue) {
+                var nativeInputValueSetter = nativeInputValue.set;
+                if (nativeInputValueSetter) {
+                    nativeInputValueSetter.call(input, '');
+                    var event_1 = createEvent('input');
+                    input.dispatchEvent(event_1);
+                }
+            }
+        }
+    }, [inputRef, type]);
+    var handleKeyDown = useCallback(function (e) {
+        if (clearable && clearOnEscape && e.key === 'Escape' && inputRef.current && !readOnly) {
+            clearValue();
+            // prevent event from closing modal or doing something unexpected
+            e.stopPropagation();
+        }
+        onKeyDown(e);
+    }, [clearable, clearOnEscape, inputRef, readOnly, onKeyDown, clearValue]);
+    var onClearIconClick = useCallback(function () {
+        if (inputRef.current)
+            clearValue();
+        // return focus to the input after click
+        if (inputRef.current)
+            inputRef.current.focus();
+    }, [inputRef, clearValue]);
+    var handleOnFocus = useCallback(function (e) {
+        setState(function (prev) { return (__assign(__assign({}, prev), { isFocused: true })); });
+        onFocus && onFocus(e);
+    }, [onFocus]);
+    var handleOnBlur = useCallback(function (e) {
+        setState(function (prev) { return (__assign(__assign({}, prev), { isFocused: false })); });
+        onBlur && onBlur(e);
+    }, [onBlur]);
+    var handleBoxShadow = useCallback(function () {
+        var hasScroll = inputRef.current && inputRef.current.scrollHeight > inputRef.current.clientHeight;
+        var scrolledToBottom = hasScroll && inputRef.current.scrollHeight - inputRef.current.scrollTop <= inputRef.current.clientHeight;
+        setState(function (prev) { return (__assign(__assign({}, prev), { showBoxShadow: !scrolledToBottom })); });
+    }, [inputRef]);
+    var getInputType = useCallback(function () {
+        // If the type prop is equal to "password" we allow the user to toggle between
+        // masked and non-masked text. Internally, we toggle between type "password"
+        // and "text".
+        if (type === 'password') {
+            return state.isMasked ? 'password' : 'text';
+        }
+        return type;
+    }, [type, state.isMasked]);
+    // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
+    var _autoComplete = state.initialType === 'password' && autoComplete === 'on' ? 'new-password' : autoComplete;
+    var sharedProps = {
+        $type: type,
+        $isFocused: state.isFocused,
+        $disabled: disabled,
+        $adjoined: adjoined,
+        $size: size,
+        $required: required,
+        $resize: resize,
+        $isReadOnly: readOnly,
+        $intent: intent,
+        $variant: variant,
+        $maxCharLimit: maxCharLimit,
+        $isMaxCharFooterPreset: !!maxCharLimit,
+        $animate: animate,
+    };
+    var _4 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.InputContainer, StyledInputContainer), 2), InputContainer = _4[0], inputContainerProps = _4[1];
+    var _5 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Input, StyledInput), 2), Input = _5[0], inputProps = _5[1];
+    var _6 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Before, NullComponent), 2), Before = _6[0], beforeProps = _6[1];
+    var _7 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.After, NullComponent), 2), After = _7[0], afterProps = _7[1];
+    var _8 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ClearIconContainer, StyledClearIconContainer), 2), ClearIconContainer = _8[0], clearIconContainerProps = _8[1];
+    var _9 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ClearIcon, ClearIconButton), 2), ClearIcon = _9[0], clearIconProps = _9[1];
+    var _10 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MaskToggleButton, StyledMaskToggleButton), 2), MaskToggleButton = _10[0], maskToggleButtonProps = _10[1];
+    var _11 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MaskToggleShowIcon, OverviewIcon), 2), MaskToggleShowIcon = _11[0], maskToggleIconShowProps = _11[1];
+    var _12 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MaskToggleHideIcon, NoPreviewIcon), 2), MaskToggleHideIcon = _12[0], maskToggleIconHideProps = _12[1];
+    var _13 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.EndEnhancer, StyledInputEnhancer), 2), EndEnhancer = _13[0], endEnhancerProps = _13[1];
+    var label = state.isMasked ? 'Show password text' : 'Hide password text';
+    var hasScroll = inputRef.current && inputRef.current.scrollHeight > inputRef.current.clientHeight;
+    var charCount = typeof value === 'string' ? value.length : 0;
+    var ariaLabel = 'Clear value';
+    return (_jsxs(InputContainer, __assign({ "data-spaceweb": "base-input" }, sharedProps, inputContainerProps, { children: [_jsx(Before, __assign({}, sharedProps, beforeProps)), _jsx(Input, __assign({ ref: inputRef, "aria-activedescendant": props['aria-activedescendant'], "aria-autocomplete": props['aria-autocomplete'], "aria-controls": props['aria-controls'], "aria-errormessage": props['aria-errormessage'], "aria-haspopup": props['aria-haspopup'], "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props['aria-required'], "aria-invalid": props['aria-invalid'], autoComplete: _autoComplete, disabled: disabled, readOnly: readOnly, id: id, inputMode: inputMode, maxLength: maxLength, name: name, onBlur: handleOnBlur, onChange: handleChange, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onScroll: handleBoxShadow, onKeyPress: onKeyPress, onKeyUp: onKeyUp, pattern: pattern, placeholder: placeholder, type: getInputType(), required: required, role: role, value: value, min: min, max: max, step: step, draggable: draggable, onDragStart: draggable ? handleOnDragStart : undefined, rows: type === CUSTOM_INPUT_TYPE.textarea ? rows : null }, sharedProps, inputProps)), showClearIcon ? (_jsx(ClearIconContainer, __assign({ "$alignTop": type === CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: _jsx(ClearIcon, __assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: onClearIconClick, onKeyDown: function (event) {
+                        if (event.key && (event.key === 'Enter' || event.key === ' ')) {
+                            event.preventDefault();
+                            onClearIconClick();
+                        }
+                    }, role: "button", "$isFocusVisible": state.isFocusVisibleForClear, size: size }, sharedProps, clearIconProps, { onFocus: forkFocus(clearIconProps, handleFocusForClear), onBlur: forkBlur(clearIconProps, handleBlurForClear) })) }))) : null, showMaskToggle ? (_jsx(MaskToggleButton, __assign({ "$size": size, "$isFocusVisible": state.isFocusVisibleForMaskToggle, "aria-label": label, onClick: function () { return setState(function (prevState) { return (__assign(__assign({}, prevState), { isMasked: !prevState.isMasked })); }); }, title: label, type: "button" }, maskToggleButtonProps, { onFocus: forkFocus(maskToggleButtonProps, handleFocusForMaskToggle), onBlur: forkBlur(maskToggleButtonProps, handleBlurForMaskToggle) }, { children: state.isMasked ? (_jsx(MaskToggleShowIcon, __assign({ size: 20, title: label }, maskToggleIconShowProps))) : (_jsx(MaskToggleHideIcon, __assign({ size: 20, title: label }, maskToggleIconHideProps))) }))) : null, _jsx(After, __assign({}, sharedProps, afterProps)), isEnhancer(endEnhancer) && (_jsx(EndEnhancer, __assign({ "$isStart": false }, sharedProps, endEnhancerProps, { "$position": ENHANCER_POSITION.end }, { children: typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer }))), maxCharLimit ? (_jsxs(Box, __assign({ className: [
+                    cx({ 'spr-shadow-06': hasScroll && state.showBoxShadow }),
+                    'gap-2 flex justify-end items-center end-3 rounded-bl-inherit',
+                    type === 'textarea' ? textareaCharLimitPositionClasses : inputCharLimitPositionClasses,
+                ] }, { children: [_jsx(Typography, { children: "".concat(charCount <= maxCharLimit ? charCount : "- ".concat(charCount - maxCharLimit), "\n              / ").concat(maxCharLimit) }), _jsx(CircularProgress, { size: 16, intent: charCount > maxCharLimit ? 'error' : 'default', value: (Math.min(charCount, maxCharLimit) / maxCharLimit) * 100 })] }))) : null] })));
+};
+export default BaseInput;

package/esm/input/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const STATE_CHANGE_TYPE: {
+    readonly change: "change";
+};
+export declare const CUSTOM_INPUT_TYPE: {
+    readonly textarea: "textarea";
+};
+export declare const ADJOINED: {
+    readonly none: "none";
+    readonly left: "left";
+    readonly right: "right";
+    readonly both: "both";
+};
+export declare const ENHANCER_POSITION: {
+    readonly start: "start";
+    readonly end: "end";
+};

package/esm/input/constants.js

@@ -0,0 +1,16 @@
+export var STATE_CHANGE_TYPE = {
+    change: 'change',
+};
+export var CUSTOM_INPUT_TYPE = {
+    textarea: 'textarea',
+};
+export var ADJOINED = {
+    none: 'none',
+    left: 'left',
+    right: 'right',
+    both: 'both',
+};
+export var ENHANCER_POSITION = {
+    start: 'start',
+    end: 'end',
+};

package/esm/input/cvaConfigs.d.ts

@@ -0,0 +1,12 @@
+export declare const input$Size: {
+    xxxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    small: string;
+    medium: string;
+};
+export declare const inputCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const inputContainerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const inputEnhancerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;

package/esm/input/cvaConfigs.js

@@ -0,0 +1,135 @@
+import { cvaWrapper } from '../style/cvaWrapper';
+export var input$Size = {
+    xxxs: 'px-1.75 py-0.75 text-13 leading-4',
+    xs: 'px-2.75 py-1.5 text-14 leading-4.5',
+    sm: 'px-2.75 py-2 text-14 leading-4.5',
+    md: 'px-2.75 py-2.5 text-14 leading-4.5',
+    lg: 'px-2.75 py-2.5 text-14 leading-4.5',
+    small: 'pl-2.75 pr-1.75 pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] text-14 leading-150 font-regular',
+    medium: 'pl-2.75 pr-1.75 pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] text-14 leading-150 font-regular',
+};
+export var inputCVA = cvaWrapper('input', 'input', [
+    'box-border border-0 bg-transparent w-full p-0 m-0 min-w-full min-w-0 outline-none rounded-inherit spr-text-primary font-medium placeholder:font-regular placeholder:spr-text-placeholder',
+    {
+        variants: {
+            $disabled: {
+                true: 'hover:cursor-not-allowed spr-text-secondary webkit-text-[--spr-text-secondary]',
+            },
+            $size: input$Size,
+            $variant: {
+                line: 'px-0',
+                default: '',
+            },
+            $type: {
+                number: 'sw-input-number',
+            },
+        },
+        compoundVariants: [
+            {
+                $disabled: true,
+                $size: ['small', 'medium'],
+                className: 'spr-text-tertiary webkit-text-[--spr-text-tertiary]',
+            },
+        ],
+        defaultVariants: {
+            $disabled: false,
+            $size: 'medium',
+            $variant: 'default',
+        },
+    },
+]);
+export var inputContainerCVA = cvaWrapper('input', 'container', [
+    'border-solid outline-none box-border border-color relative spr-bg-primary',
+    {
+        variants: {
+            $isFocused: {
+                true: 'forced-colors:border-highlight',
+                false: 'spr-border-primary',
+            },
+            $disabled: {
+                true: 'spr-bg-secondary forced-colors:border-disabled',
+            },
+            $size: {
+                xxxs: 'rounded-5',
+                xs: 'rounded-7',
+                sm: 'rounded-8',
+                md: 'rounded-8',
+                lg: 'rounded-8',
+                small: 'rounded-8',
+                medium: 'rounded-8',
+            },
+            $variant: {
+                default: 'border',
+                line: 'border-0 border-b rounded-0',
+            },
+            $adjoined: {
+                left: 'rounded-tl-0 rounded-bl-0',
+                right: 'rounded-tr-0 rounded-br-0',
+                both: 'rounded-0',
+                none: '',
+            },
+            $intent: {
+                default: '',
+                success: 'spr-support-success-border',
+                error: 'spr-support-error-border',
+                warning: 'spr-support-warning-border',
+                ai: '',
+            },
+        },
+        defaultVariants: {
+            $disabled: false,
+            $size: 'medium',
+            $variant: 'default',
+            $adjoined: 'none',
+            $isFocused: false,
+            $intent: 'default',
+            $deprecatedAIThemeEnabled: false,
+        },
+        compoundVariants: [
+            { $intent: 'default', $isFocused: true, className: 'spr-border-quinary' },
+            { $intent: 'default', $disabled: true, className: '' },
+            { $intent: 'default', $isFocused: false, $disabled: false, className: 'hover:spr-border-quaternary' },
+        ],
+    },
+]);
+export var inputEnhancerCVA = cvaWrapper('input', 'enhancer', [
+    'flex items-center justify-center transition-colors duration-200 ease-out text-16 border-solid border-color-[--sw-border-color] spr-bg-secondary spr-text-01 pl-4 pr-4 outline-none',
+    {
+        variants: {
+            $intent: {
+                default: 'spr-border-primary',
+                success: 'spr-border-primary',
+                error: 'spr-border-primary',
+                warning: 'spr-border-primary',
+                ai: '',
+            },
+            $size: {
+                xxxs: 'rounded-5',
+                xs: 'rounded-7',
+                sm: 'rounded-8',
+                md: 'rounded-8',
+                lg: 'rounded-8',
+                small: 'rounded-8 px-2.75',
+                medium: 'rounded-8 px-2.75',
+            },
+            $isStart: {
+                true: 'border border-r-0 rounded-tr-0 rounded-br-0',
+                false: 'border border-l-0 rounded-tl-0 rounded-bl-0',
+            },
+            $variant: {
+                default: '',
+                line: 'border-0 border-b rounded-0',
+            },
+            $disabled: {
+                true: 'spr-bg-primary',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            $disabled: false,
+            $size: 'medium',
+            $variant: 'default',
+            $deprecatedAIThemeEnabled: false,
+        },
+    },
+]);

package/esm/input/enhancer-button.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement } from 'react';
+import type { ButtonProps } from '../button';
+import type { Intent } from '../types';
+import type { InputEnhancerButtonConfig, InputProps } from './types';
+export type FieldEnhancerSize = 'small' | 'medium' | 'xxxs' | 'xs' | 'sm' | 'md' | 'lg';
+export type FieldEnhancerSharedProps = {
+    $size?: FieldEnhancerSize;
+    $disabled?: boolean;
+    $intent?: Intent;
+    $isFocused?: boolean;
+    $isPseudoFocused?: boolean;
+};
+export type FieldEnhancerButtonProps = Omit<ButtonProps, 'size' | 'disabled' | 'intent'>;
+export type FieldEnhancerButtonConfig = FieldEnhancerButtonProps | ((sharedProps: FieldEnhancerSharedProps) => FieldEnhancerButtonProps);
+type EnhancerPosition = 'start' | 'end';
+type InputEnhancerResolveProps = Pick<InputProps, 'startEnhancer' | 'endEnhancer' | 'startEnhancerButtonProps' | 'endEnhancerButtonProps' | 'size'>;
+export declare const EnhancerButtonSlot: import("../style").StyledComponent;
+export declare const InputEnhancerButtonSlot: import("../style").StyledComponent;
+export declare const assertNotBothEnhancerProps: (componentLabel: string, side: 'start' | 'end', nodeEnhancer: any, buttonProps: any) => void;
+export declare const hasStartEnhancerButton: (startEnhancer: any, startEnhancerButtonProps: any) => boolean;
+export declare const hasEndEnhancerButton: (endEnhancer: any, endEnhancerButtonProps: any) => boolean;
+export declare const renderFieldEnhancerButton: (position: EnhancerPosition, sharedProps: FieldEnhancerSharedProps, config: FieldEnhancerButtonConfig) => ReactElement;
+export declare const resolveEnhancer: (side: 'start' | 'end', nodeEnhancer: InputEnhancerResolveProps['startEnhancer'], buttonProps: InputEnhancerResolveProps['startEnhancerButtonProps']) => InputEnhancerResolveProps['startEnhancer'];
+export type { InputEnhancerButtonConfig };

package/esm/input/enhancer-button.js

@@ -0,0 +1,58 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import invariant from 'invariant';
+import { Button } from '../button';
+import { mergeOverrides } from '../overrides';
+import { styled } from '../style';
+var FIELD_TO_BUTTON_SIZE = {
+    small: 'small',
+    medium: 'medium',
+    xxxs: 'xs',
+    xs: 'xs',
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+};
+export var EnhancerButtonSlot = styled('div', 'p-0', function (_, $hasEnhancerButton) { return ($hasEnhancerButton ? 'z-1' : ''); });
+EnhancerButtonSlot.displayName = 'EnhancerButtonSlot';
+export var InputEnhancerButtonSlot = EnhancerButtonSlot;
+InputEnhancerButtonSlot.displayName = 'InputEnhancerButtonSlot';
+export var assertNotBothEnhancerProps = function (componentLabel, side, nodeEnhancer, buttonProps) {
+    invariant(!(nodeEnhancer && buttonProps), "[".concat(componentLabel, "] Both ").concat(side, "Enhancer and ").concat(side, "EnhancerButtonProps were provided. Use only one."));
+};
+export var hasStartEnhancerButton = function (startEnhancer, startEnhancerButtonProps) {
+    return !startEnhancer && Boolean(startEnhancerButtonProps);
+};
+export var hasEndEnhancerButton = function (endEnhancer, endEnhancerButtonProps) {
+    return !endEnhancer && Boolean(endEnhancerButtonProps);
+};
+export var renderFieldEnhancerButton = function (position, sharedProps, config) {
+    var userProps = typeof config === 'function' ? config(sharedProps) : config;
+    var userOverrides = userProps.overrides, onClick = userProps.onClick, className = userProps.className, rest = __rest(userProps, ["overrides", "onClick", "className"]);
+    var isStart = position === 'start';
+    var defaultOverrides = {
+        BaseButton: {
+            className: [
+                'h-full min-h-0 spr-bg-secondary hover:spr-bg-secondary focus:spr-bg-secondary',
+                isStart ? 'rounded-r-0 border-r-[--sw-border-right-color]' : 'rounded-l-0 border-l-[--sw-border-left-color]',
+            ],
+            // @ts-ignore -- Variable needed for styling
+            style: isStart ? { '--sw-border-right-color': 'transparent' } : { '--sw-border-left-color': 'transparent' },
+        },
+    };
+    var handleClick = function (event) {
+        event.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    return (_jsx(Button, __assign({ variant: "secondary", size: (sharedProps.$size && FIELD_TO_BUTTON_SIZE[sharedProps.$size]) || 'medium', disabled: sharedProps.$disabled, className: ['h-full shrink-0', className], overrides: mergeOverrides(defaultOverrides, userOverrides !== null && userOverrides !== void 0 ? userOverrides : {}), onClick: handleClick }, rest)));
+};
+export var resolveEnhancer = function (side, nodeEnhancer, buttonProps) {
+    assertNotBothEnhancerProps('Input', side, nodeEnhancer, buttonProps);
+    if (nodeEnhancer) {
+        return nodeEnhancer;
+    }
+    if (buttonProps) {
+        return function (sharedProps) { return renderFieldEnhancerButton(side, sharedProps, buttonProps); };
+    }
+    return undefined;
+};

package/esm/input/index.d.ts

@@ -1,6 +1,12 @@
-export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from '../baseui/input';
-export type { BaseInput, BaseInputOverrides, BaseInputProps, State, InternalState, StatefulContainerProps, } from '../baseui/input';
-export { ENHANCER_POSITION } from '../baseui/input/constants';
-export { Input, StatefulInput, MaskedInput } from './input';
+export { StyledRoot, StyledInputEnhancer, StyledInputEnhancer as StyledStartEnhancer, StyledInputEnhancer as StyledEndEnhancer, StyledInputContainer, StyledInput, } from './styled-components';
+export { ENHANCER_POSITION, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE } from './constants';
+export { default as MaskedInput } from './masked-input';
+export { default as Input } from './input';
+export { default as BaseInput } from './base-input';
+export { default as StatefulInput } from './stateful-input';
+export { NumberInput } from './number/NumberInput';
+export { StatefulNumberInput } from './number/StatefulNumberInput';
+export type { NumberInputProps } from './number/NumberInput';
+export type { StatefulNumberInputProps } from './number/StatefulNumberInput';
 export * from './types';
 export { InputContainer } from './InputContainer';

package/esm/input/index.js

@@ -1,5 +1,10 @@
-export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from '../baseui/input';
-export { ENHANCER_POSITION } from '../baseui/input/constants';
-export { Input, StatefulInput, MaskedInput } from './input';
+export { StyledRoot, StyledInputEnhancer, StyledInputEnhancer as StyledStartEnhancer, StyledInputEnhancer as StyledEndEnhancer, StyledInputContainer, StyledInput, } from './styled-components';
+export { ENHANCER_POSITION, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE } from './constants';
+export { default as MaskedInput } from './masked-input';
+export { default as Input } from './input';
+export { default as BaseInput } from './base-input';
+export { default as StatefulInput } from './stateful-input';
+export { NumberInput } from './number/NumberInput';
+export { StatefulNumberInput } from './number/StatefulNumberInput';
 export * from './types';
 export { InputContainer } from './InputContainer';

package/esm/input/input.d.ts

@@ -1,14 +1,7 @@
-import { ReactElement } from 'react';
-import { InputProps, StatefulInputProps, MaskedInputProps } from './types';
-export declare const Input: {
-    (props: InputProps): ReactElement;
-    displayName: string;
-};
-export declare const StatefulInput: {
-    (props: StatefulInputProps): ReactElement;
-    displayName: string;
-};
-export declare const MaskedInput: {
-    (props: MaskedInputProps): ReactElement;
+import type { InputProps } from './types';
+declare const Input: {
+    ({ onFocus, onBlur, autoFocus, startEnhancer: startEnhancerProp, endEnhancer: endEnhancerProp, startEnhancerButtonProps, endEnhancerButtonProps, overrides, clearable, type, disabled, adjoined, required, resize, readOnly, className, style, intent: _intent, size: _size, variant, inputRef: _inputRef, ...restProps }: InputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
+    __standard: string;
 };
+export default Input;

package/esm/input/input.js

@@ -1,28 +1,109 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Input as BaseInput, StatefulInput as BaseStatefulInput, MaskedInput as BaseMaskedInput, } from '../baseui/input';
-import useInputBasewebAdapter from './basewebAdapters';
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import BaseInput from './base-input';
+import { StyledRoot, StyledInputEnhancer } from './styled-components';
+import { ADJOINED, ENHANCER_POSITION } from './constants';
 import useAutoFocus from '../hooks/useAutoFocus';
-// @ts-ignore
-BaseInput.displayName = 'BaseUIInput';
-export var Input = function (props) {
-    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
-    var adaptedProps = useInputBasewebAdapter(restProps);
-    var inputRef = useAutoFocus({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
-    return _jsx(BaseInput, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+import _noop from 'lodash/noop';
+import { mergeOverrides, useOverrides } from '../overrides';
+import { add$props } from '../helpers';
+import { InputEnhancerButtonSlot, resolveEnhancer, hasStartEnhancerButton, hasEndEnhancerButton, } from './enhancer-button';
+import { useContextualFormProps } from '../form-control/context';
+import { getDefaultSize } from '../helpers/themeHelpers';
+import { useStyle } from '../style';
+var getInputIntent = function (intent, value, maxCharLimit, type, min, max) {
+    if (typeof value === 'string' && value.length > (maxCharLimit !== null && maxCharLimit !== void 0 ? maxCharLimit : Infinity)) {
+        return 'error';
+    }
+    if (value !== '' && type === 'number' && (Number(value) > (max !== null && max !== void 0 ? max : Infinity) || Number(value) < (min !== null && min !== void 0 ? min : -Infinity))) {
+        return 'error';
+    }
+    return intent !== null && intent !== void 0 ? intent : 'default';
 };
-Input.displayName = 'Input';
-export var StatefulInput = function (props) {
-    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
-    var adaptedProps = useInputBasewebAdapter(restProps);
-    var inputRef = useAutoFocus({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
-    return _jsx(BaseStatefulInput, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
-};
-StatefulInput.displayName = 'StatefulInput';
-export var MaskedInput = function (props) {
-    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
-    var adaptedProps = useInputBasewebAdapter(restProps);
-    var inputRef = useAutoFocus({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
-    return _jsx(BaseMaskedInput, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+var Input = function (_a) {
+    var _b = _a.onFocus, onFocus = _b === void 0 ? _noop : _b, _c = _a.onBlur, onBlur = _c === void 0 ? _noop : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? false : _d, startEnhancerProp = _a.startEnhancer, endEnhancerProp = _a.endEnhancer, startEnhancerButtonProps = _a.startEnhancerButtonProps, endEnhancerButtonProps = _a.endEnhancerButtonProps, _e = _a.overrides, overrides = _e === void 0 ? {} : _e, clearable = _a.clearable, _f = _a.type, type = _f === void 0 ? 'text' : _f, disabled = _a.disabled, adjoined = _a.adjoined, required = _a.required, resize = _a.resize, readOnly = _a.readOnly, className = _a.className, style = _a.style, _intent = _a.intent, _size = _a.size, _g = _a.variant, variant = _g === void 0 ? 'default' : _g, _inputRef = _a.inputRef, restProps = __rest(_a, ["onFocus", "onBlur", "autoFocus", "startEnhancer", "endEnhancer", "startEnhancerButtonProps", "endEnhancerButtonProps", "overrides", "clearable", "type", "disabled", "adjoined", "required", "resize", "readOnly", "className", "style", "intent", "size", "variant", "inputRef"]);
+    var _h = __read(useState(!!autoFocus), 2), isFocused = _h[0], setFocused = _h[1];
+    var inputRef = useAutoFocus({ autoFocus: autoFocus, inputRef: _inputRef });
+    var formControlIntent = useContextualFormProps({ intent: _intent }).intent;
+    var intent = getInputIntent(formControlIntent, restProps.value, restProps === null || restProps === void 0 ? void 0 : restProps.maxCharLimit, type, restProps === null || restProps === void 0 ? void 0 : restProps.min, restProps === null || restProps === void 0 ? void 0 : restProps.max);
+    var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
+    var startEnhancer = resolveEnhancer('start', startEnhancerProp, startEnhancerButtonProps);
+    var endEnhancer = resolveEnhancer('end', endEnhancerProp, endEnhancerButtonProps);
+    var handleFocus = function (e) {
+        setFocused(true);
+        onFocus(e);
+    };
+    var handleBlur = function (e) {
+        setFocused(false);
+        onBlur(e);
+    };
+    var enhancerOverrides = useMemo(function () {
+        return mergeOverrides({
+            StartEnhancer: hasStartEnhancerButton(startEnhancerProp, startEnhancerButtonProps)
+                ? {
+                    component: InputEnhancerButtonSlot,
+                    props: add$props({ intent: intent, size: size, disabled: disabled, $hasEnhancerButton: true }),
+                }
+                : {
+                    props: add$props({ intent: intent, size: size, disabled: disabled }),
+                },
+            EndEnhancer: hasEndEnhancerButton(endEnhancerProp, endEnhancerButtonProps)
+                ? {
+                    component: InputEnhancerButtonSlot,
+                    props: add$props({ intent: intent, size: size, disabled: disabled, $hasEnhancerButton: true }),
+                }
+                : {
+                    props: add$props({ intent: intent, size: size, disabled: disabled }),
+                },
+        }, {
+            StartEnhancer: overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer,
+            EndEnhancer: overrides === null || overrides === void 0 ? void 0 : overrides.EndEnhancer,
+        });
+    }, [
+        startEnhancerProp,
+        startEnhancerButtonProps,
+        endEnhancerProp,
+        endEnhancerButtonProps,
+        intent,
+        size,
+        disabled,
+        overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer,
+        overrides === null || overrides === void 0 ? void 0 : overrides.EndEnhancer,
+    ]);
+    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _j[0], rootProps = _j[1];
+    var _k = __read(useOverrides(enhancerOverrides.StartEnhancer, StyledInputEnhancer), 2), StartEnhancer = _k[0], startEnhancerProps = _k[1];
+    var _l = __read(useOverrides(enhancerOverrides.EndEnhancer, StyledInputEnhancer), 2), EndEnhancer = _l[0], endEnhancerProps = _l[1];
+    var hasEnhancerButton = hasStartEnhancerButton(startEnhancerProp, startEnhancerButtonProps) ||
+        hasEndEnhancerButton(endEnhancerProp, endEnhancerButtonProps);
+    var sharedProps = {
+        $isFocused: isFocused,
+        $disabled: disabled,
+        $size: size,
+        $adjoined: adjoined,
+        $required: required,
+        $resize: resize,
+        $isReadOnly: readOnly,
+        $variant: variant,
+        $intent: intent,
+        $hasEnhancerButton: hasEnhancerButton,
+    };
+    var isEnhancer = function (enhancer) { return Boolean(enhancer || enhancer === 0); };
+    var getAdjoinedProp = useCallback(function (_startEnhancer, _endEnhancer) {
+        if (isEnhancer(_startEnhancer) && isEnhancer(_endEnhancer)) {
+            return ADJOINED.both;
+        }
+        if (isEnhancer(_startEnhancer)) {
+            return ADJOINED.left;
+        }
+        if (isEnhancer(_endEnhancer)) {
+            return ADJOINED.right;
+        }
+        return ADJOINED.none;
+    }, []);
+    return (_jsxs(Root, __assign({ "data-spaceweb": "input" }, sharedProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style, hasEnhancerButton ? { isolation: 'isolate' } : undefined], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], "$adjoined": getAdjoinedProp(startEnhancer, endEnhancer), "$hasIconTrailing": clearable || type === 'password' }, { children: [isEnhancer(startEnhancer) && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { "$position": ENHANCER_POSITION.start, "$isStart": true }, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }))), _jsx(BaseInput, __assign({ intent: intent, size: size, variant: variant, type: type, disabled: disabled, required: required, overrides: overrides, clearable: clearable, readOnly: readOnly, adjoined: getAdjoinedProp(startEnhancer, endEnhancer), onFocus: handleFocus, onBlur: handleBlur, inputRef: inputRef }, sharedProps, restProps)), isEnhancer(endEnhancer) && (_jsx(EndEnhancer, __assign({ "$isStart": false }, sharedProps, endEnhancerProps, { "$position": ENHANCER_POSITION.end }, { children: typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer })))] })));
 };
-MaskedInput.displayName = 'MaskedInput';
+export default Input;
+Input.displayName = 'Input';
+Input.__standard = 'Component';

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

@@ -0,0 +1,9 @@
+import type { MaskedInputProps } from './types';
+declare function MaskedInput({ mask, maskChar, overrides: { Input: inputOverride, ...restOverrides }, ...restProps }: MaskedInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MaskedInput {
+    var defaultProps: {
+        maskChar: string;
+    };
+    var displayName: string;
+}
+export default MaskedInput;