@janbox/storefront-ui 1.0.13 → 1.0.15

package/dist/lib/input/input.jsx

@@ -0,0 +1,128 @@
+import { forwardRef, useRef, useState } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { isString } from 'lodash-es';
+import { getInputProps } from './helpers';
+import classes from './input.module.scss';
+import { FormHelperText } from '../form-helper-text';
+import { Icon } from '../icon';
+import { cn } from '../../utils';
+import EyeHidden from '../../assets/svg/eye-hidden.svg?raw';
+import EyeVisible from '../../assets/svg/eye-show-visible.svg?raw';
+import { mediaQuery } from '../../theme';
+import { getSizeVariantState } from '../../utils';
+export const Input = forwardRef((_props, ref) => {
+    const { type, xs, sm, md, lg, prefix, suffix, containerProps, mainProps, className, helperText, error, startIcon, endIcon, onChange: onChangeProp, transform, debounce = 0, mode = 'onChange', value, ...rest } = getInputProps(_props);
+    const inputRef = useRef(null);
+    const [showPassword, setShowPassword] = useState(false);
+    const [typingValue, setTypingValue] = useState();
+    const timeoutFn = useRef(null);
+    const beforeChangeValue = useRef('');
+    const mergedRefs = useMergeRefs([ref, inputRef]);
+    const onChange = (e, force = false) => {
+        e.target.value = transform ? transform(e.target.value) : e.target.value;
+        if (timeoutFn.current) {
+            clearTimeout(timeoutFn.current);
+        }
+        const isFocused = document.activeElement === e.target;
+        /**
+         * nếu force hoặc input đang không được focus
+         */
+        if (force || !isFocused) {
+            onChangeProp?.(e);
+            return;
+        }
+        if (mode === 'onBlur') {
+            // undefined value means the input is not controlled
+            if (isString(value)) {
+                setTypingValue(e.target.value);
+            }
+            return;
+        }
+        if (debounce > 0) {
+            // undefined value means the input is not controlled
+            if (isString(value)) {
+                setTypingValue(e.target.value);
+            }
+            timeoutFn.current = setTimeout(() => {
+                onChangeProp?.(e);
+            }, debounce);
+            return;
+        }
+        onChangeProp?.(e);
+    };
+    const onFocus = (e) => {
+        beforeChangeValue.current = e.target.value;
+        rest.onFocus?.(e);
+    };
+    const onBlur = (e) => {
+        if (beforeChangeValue.current !== e.target.value) {
+            if (mode === 'onBlur' || debounce > 0) {
+                onChange(e, true);
+            }
+        }
+        rest.onBlur?.(e);
+        setTimeout(() => {
+            setTypingValue(undefined);
+        }, debounce);
+    };
+    const css = [
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+            [mediaQuery('lg')]: createStyle(lg),
+        },
+    ];
+    const toggleShowPassword = (e) => {
+        e.stopPropagation();
+        setShowPassword((prev) => !prev);
+    };
+    return (<div {...containerProps} className={cn(classes.input__container, containerProps?.className)}>
+      <div css={css} {...mainProps} className={cn(classes.input__main, {
+            [classes.input__main_error]: error,
+        }, mainProps?.className)}>
+        {prefix}
+        {!!startIcon && (<Icon {...startIcon} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+                ...startIcon.xs,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+                ...startIcon.sm,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+                ...startIcon.md,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+                ...startIcon.lg,
+            }}/>)}
+        <input data-error={error} type={type === 'password' && showPassword ? 'text' : type} className={cn(classes.input__control, className)} {...rest} value={typingValue ?? value} ref={mergedRefs} onChange={onChange} onBlur={onBlur} onFocus={onFocus}/>
+        {!!endIcon && (<Icon {...endIcon} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+                ...endIcon.xs,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+                ...endIcon.sm,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+                ...endIcon.md,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+                ...endIcon.lg,
+            }}/>)}
+        {suffix}
+        {type === 'password' && (<Icon onClick={toggleShowPassword} css={{ cursor: 'pointer' }} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+            }} source={showPassword ? EyeVisible : EyeHidden}/>)}
+      </div>
+      <FormHelperText error={error}>{helperText}</FormHelperText>
+    </div>);
+});
+const createStyle = ({ css } = {}) => {
+    return [css];
+};

package/dist/lib/input/input.module.scss

@@ -0,0 +1,60 @@
+.input__container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.input__main {
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--color-surface-default);
+
+  &:hover {
+    border-color: var(--color-primary-300);
+  }
+
+  &:has(input:focus:not(:read-only)) {
+    border-color: var(--color-primary-600);
+    box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
+  }
+
+  &:has(input:read-only) {
+    pointer-events: none;
+  }
+
+  &:has(input:disabled) {
+    background-color: var(--color-neutral-300);
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-300);
+    pointer-events: none;
+  }
+}
+
+.input__main_error {
+  border-color: var(--color-red-600);
+}
+
+.input__control {
+  flex: 1 1 0%;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: transparent;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: var(--color-neutral-400);
+  }
+}

package/dist/lib/input/types.d.ts

@@ -25,4 +25,3 @@ interface InputExtendedProps extends ResponsiveDesign<InputResponsiveProps> {
 }
 export type InputProps = ShallowMerge<JSX.IntrinsicElements['input'], InputExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/input-mask/helpers.d.ts

@@ -1,3 +1,2 @@
 import { InputMaskProps } from './types';
 export declare const getInputMaskProps: (extended: InputMaskProps) => InputMaskProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/input-mask/helpers.js

@@ -1,12 +1,9 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+    xs: {
+        size: 'md',
+    },
 };
-const getInputMaskProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getInputMaskProps
+export const getInputMaskProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/input-mask/index.d.ts

@@ -1,2 +1 @@
 export * from './input-mask';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/input-mask/index.js

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

package/dist/lib/input-mask/input-mask.d.ts

@@ -3,4 +3,3 @@ import { InputMaskProps } from './types';
 declare const InputMask: <P extends HTMLProps<HTMLElement> = HTMLProps<HTMLElement>, E extends HTMLElement = HTMLElement>(_props: InputMaskProps<P, E>, ref?: React.ForwardedRef<E>) => import("@emotion/react/jsx-runtime").JSX.Element;
 declare const ForwardRefInputMask: typeof InputMask;
 export { ForwardRefInputMask as InputMask };
-//# sourceMappingURL=input-mask.d.ts.map

package/dist/lib/input-mask/input-mask.jsx

@@ -0,0 +1,88 @@
+import { forwardRef, Fragment } from 'react';
+import { getInputMaskProps } from './helpers';
+import { Icon } from '../icon';
+import { getColorVar, mediaQuery } from '../../theme';
+import { getSizeVariantState } from '../../utils';
+import { Primitive } from '../primitive';
+const InputMask = (_props, ref) => {
+    const { prefix, suffix, children, xs, sm, md, startIcon, endIcon, lg, error, ...props } = getInputMaskProps(_props);
+    const css = [
+        {
+            display: 'flex',
+            paddingTop: 2,
+            paddingBottom: 2,
+            alignItems: 'center',
+            gap: 8,
+            overflow: 'hidden',
+            width: '100%',
+            position: 'relative',
+            borderRadius: 8,
+            ':after': {
+                content: '""',
+                position: 'absolute',
+                inset: 0,
+                pointerEvents: 'none',
+                borderRadius: 8,
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: error ? getColorVar('red.600') : undefined,
+            },
+        },
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+            [mediaQuery('lg')]: createStyle(lg),
+        },
+    ];
+    return (<Primitive css={css} {...props} ref={ref}>
+      {prefix}
+      {!!startIcon && (<Icon {...startIcon} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+                ...startIcon.xs,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+                ...startIcon.sm,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+                ...startIcon.md,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+                ...startIcon.lg,
+            }}/>)}
+      <Fragment>{children}</Fragment>
+      {!!endIcon && (<Icon {...endIcon} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+                ...endIcon.xs,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+                ...endIcon.sm,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+                ...endIcon.md,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+                ...endIcon.lg,
+            }}/>)}
+      {suffix}
+    </Primitive>);
+};
+const ForwardRefInputMask = forwardRef(InputMask);
+export { ForwardRefInputMask as InputMask };
+const createStyle = ({ size, css, outline } = {}) => {
+    const { inputSize, inputPaddingX } = getSizeVariantState(size);
+    return [
+        {
+            minHeight: inputSize,
+            paddingLeft: inputPaddingX,
+            paddingRight: inputPaddingX,
+            ':after': {
+                borderTopWidth: outline?.top,
+                borderRightWidth: outline?.right,
+                borderBottomWidth: outline?.bottom,
+                borderLeftWidth: outline?.left,
+            },
+        },
+        css,
+    ];
+};

package/dist/lib/input-mask/types.d.ts

@@ -18,4 +18,3 @@ export type InputMaskProps<P = HTMLProps<HTMLElement>, E = HTMLElement> = Shallo
     endIcon?: IconProps;
     error?: boolean;
 }> & ResponsiveDesign<InputMaskResponsiveProps>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/input-mask/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/input-number/index.d.ts

@@ -1,2 +1 @@
 export * from './input-number';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/input-number/index.js

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

package/dist/lib/input-number/input-number.d.ts

@@ -1,3 +1,2 @@
 import { InputNumberProps } from './types';
 export declare const InputNumber: ({ value, defaultValue, className, step, suffix, prefix, fractionDigits, max, min, ref, ...props }: InputNumberProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=input-number.d.ts.map

package/dist/lib/input-number/input-number.jsx

@@ -0,0 +1,88 @@
+import { useRef } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { isNil } from 'lodash-es';
+import classes from './input-number.module.scss';
+import { IconButton } from '../icon-button';
+import { Input } from '../input/input';
+import { useControllableState } from '../../hooks';
+import { cn } from '../../utils';
+import MinusIcon from '../../assets/svg/minus.svg?raw';
+import PlusIcon from '../../assets/svg/plus.svg?raw';
+const MAX_FRACTION_DIGITS = 10;
+export const InputNumber = ({ value, defaultValue, className, step = 0, suffix, prefix, fractionDigits = 0, max = Infinity, min = 0, ref, ...props }) => {
+    const inputRef = useRef(null);
+    const [valueAsString, setValueAsString] = useControllableState({
+        value: value?.toString(),
+        defaultValue: defaultValue?.toString() ?? '',
+    });
+    const valueAsNumber = parseFloat(valueAsString);
+    const mergedRefs = useMergeRefs([ref, inputRef]);
+    const fractionDigitsInNumber = typeof fractionDigits === 'number' ? fractionDigits : MAX_FRACTION_DIGITS;
+    const transformFn = (value) => {
+        value = value.replace(/e|E/g, '');
+        if (min >= 0) {
+            value = value.replace(/^-/, '');
+        }
+        if (fractionDigits === 0) {
+            value = value.replace(/\.\d+$/, '');
+        }
+        else {
+            const parts = value.split('.');
+            if (parts.length > 1) {
+                const decimalPart = parts.at(1)?.slice(0, Math.min(fractionDigitsInNumber, MAX_FRACTION_DIGITS));
+                value = `${parts.at(0)}.${decimalPart}`;
+            }
+        }
+        return props.transform?.(value) ?? value;
+    };
+    const onChange = (e) => {
+        if (props.mode === 'onBlur' && e.target.valueAsNumber < min) {
+            e.target.value = min.toString();
+        }
+        setValueAsString(e.target.value);
+        props.onChange?.(e);
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'e' || e.key === 'E') {
+            e.preventDefault();
+        }
+        props.onKeyDown?.(e);
+    };
+    const dispatchChange = (nextValue) => {
+        if (!inputRef.current)
+            return;
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+        nativeInputValueSetter?.call(inputRef.current, nextValue);
+        const event = new Event('input', { bubbles: true });
+        inputRef.current.dispatchEvent(event);
+    };
+    const onPlus = (_e) => {
+        const inputEl = inputRef.current;
+        if (isNil(inputEl))
+            return;
+        const currentValueAsNumber = inputEl.valueAsNumber;
+        const nextValueAsNumber = Math.min(isNaN(currentValueAsNumber) ? step : currentValueAsNumber + step, max);
+        if (currentValueAsNumber === nextValueAsNumber)
+            return;
+        dispatchChange(nextValueAsNumber.toString());
+    };
+    const onMinus = (_e) => {
+        const inputEl = inputRef.current;
+        if (isNil(inputEl))
+            return;
+        const currentValueAsNumber = inputEl.valueAsNumber;
+        const nextValueAsNumber = Math.max(isNaN(currentValueAsNumber) ? step : currentValueAsNumber - step, min);
+        if (currentValueAsNumber === nextValueAsNumber)
+            return;
+        dispatchChange(nextValueAsNumber.toString());
+    };
+    return (<Input {...props} value={valueAsString} onChange={onChange} transform={transformFn} className={cn(classes.input_number__input, className)} onKeyDown={onKeyDown} suffix={suffix ?? (<>
+            {step > 0 && (<IconButton color="neutral" xs={{
+                    size: 'xs',
+                }} icon={{ source: PlusIcon }} onClick={onPlus} aria-disabled={isNaN(valueAsNumber) ? false : valueAsNumber >= max}/>)}
+          </>)} prefix={prefix ?? (<>
+            {step > 0 && (<IconButton color="neutral" xs={{
+                    size: 'xs',
+                }} icon={{ source: MinusIcon }} onClick={onMinus} aria-disabled={isNaN(valueAsNumber) ? false : valueAsNumber <= min}/>)}
+          </>)} type="number" ref={mergedRefs}/>);
+};

package/dist/lib/input-number/input-number.module.scss

@@ -0,0 +1,7 @@
+.input_number__input {
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}

package/dist/lib/input-number/types.d.ts

@@ -8,4 +8,3 @@ export type InputNumberProps = ShallowMerge<InputProps, {
     defaultValue?: number;
     step?: number;
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/input-number/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/input-range/helpers.d.ts

@@ -1,3 +1,2 @@
 import { InputRangeProps } from './types';
 export declare const getInputRangeProps: (extended: InputRangeProps) => InputRangeProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/input-range/helpers.js

@@ -1,12 +1,9 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+    xs: {
+        size: 'md',
+    },
 };
-const getInputRangeProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getInputRangeProps
+export const getInputRangeProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/input-range/index.d.ts

@@ -1,3 +1,2 @@
 export * from './input-range';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/input-range/index.js

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

package/dist/lib/input-range/input-range.d.ts

@@ -1,3 +1,2 @@
 import { InputRangeProps } from './types';
 export declare const InputRange: (_props: InputRangeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=input-range.d.ts.map

package/dist/lib/input-range/input-range.jsx

@@ -0,0 +1,116 @@
+import { Fragment, useRef } from 'react';
+import { getInputRangeProps } from './helpers';
+import classes from './input-range.module.scss';
+import { getSizeVariantState, cn } from '../../utils';
+import { FormHelperText } from '../form-helper-text';
+import { Icon } from '../icon';
+import { InputNumber } from '../input-number';
+import LongArrowRightIcon from '@/assets/svg/long-arrow-right.svg?raw';
+import { mediaQuery } from '../../theme';
+export const InputRange = (_props) => {
+    const { error, helperText, inputs, xs, md, sm, lg, className, onChange, prefix, suffix, startIcon, endIcon, ...props } = getInputRangeProps(_props);
+    const containerRef = useRef(null);
+    const inputRefs = useRef([]);
+    const iconProps = {
+        xs: {
+            size: getSizeVariantState(xs?.size).iconSize,
+        },
+        sm: {
+            size: getSizeVariantState(sm?.size).iconSize,
+        },
+        md: {
+            size: getSizeVariantState(md?.size).iconSize,
+        },
+        lg: {
+            size: getSizeVariantState(lg?.size).iconSize,
+        },
+    };
+    const onInputFocus = (e) => {
+        e.target.select();
+        inputs?.at(Number(e.currentTarget.dataset.index))?.onFocus?.(e);
+    };
+    const onInputChange = (e) => {
+        const edge = e.currentTarget.dataset.edge;
+        onChange?.(e, edge);
+        inputs?.at(Number(e.currentTarget.dataset.index))?.onChange?.(e);
+    };
+    const css = [
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+            [mediaQuery('lg')]: createStyle(lg),
+        },
+    ];
+    return (<div css={{ width: '100%' }}>
+      <div css={css} className={cn(classes.input_range, className)} {...props} ref={containerRef}>
+        {prefix}
+        {!!startIcon && (<Icon {...startIcon} css={{ flexShrink: 0 }} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+                ...startIcon.xs,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+                ...startIcon.sm,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+                ...startIcon.md,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+                ...startIcon.lg,
+            }}/>)}
+
+        {['from', 'to'].map((edge, index, array) => {
+            const inputProps = inputs?.at(index) ?? {};
+            return (<Fragment key={index}>
+              <InputNumber key={index} ref={(el) => {
+                    inputRefs.current[index] = el;
+                }} data-edge={edge} data-index={index} css={{ textAlign: 'center' }} mainProps={{
+                    style: {
+                        borderWidth: 0,
+                        boxShadow: 'none',
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                    },
+                }} mode="onBlur" {...inputProps} onChange={onInputChange} onFocus={onInputFocus} xs={{
+                    size: xs?.size,
+                    ...inputProps.xs,
+                }} sm={{
+                    size: sm?.size,
+                    ...inputProps.sm,
+                }} md={{
+                    size: md?.size,
+                    ...inputProps.md,
+                }} lg={{
+                    size: lg?.size,
+                    ...inputProps.lg,
+                }}/>
+              {index < array.length - 1 && <Icon {...iconProps} css={{ flexShrink: 0 }} source={LongArrowRightIcon}/>}
+            </Fragment>);
+        })}
+        {!!endIcon && (<Icon {...endIcon} css={{ flexShrink: 0 }} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+                ...endIcon.xs,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+                ...endIcon.sm,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+                ...endIcon.md,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+                ...endIcon.lg,
+            }}/>)}
+        {suffix}
+      </div>
+      <FormHelperText error={error}>{helperText}</FormHelperText>
+    </div>);
+};
+const createStyle = ({ size } = {}) => {
+    const { inputPaddingX } = getSizeVariantState(size);
+    return [
+        {
+            paddingLeft: inputPaddingX,
+            paddingRight: inputPaddingX,
+        },
+    ];
+};

package/dist/lib/input-range/input-range.module.scss

@@ -0,0 +1,17 @@
+.input_range {
+  display: flex;
+  align-items: center;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.5rem;
+  gap: 0.5rem;
+
+  &:has(input:focus) {
+    border-color: var(--color-primary-600);
+    box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
+  }
+
+  &:hover {
+    border-color: var(--color-primary-300);
+  }
+}

package/dist/lib/input-range/types.d.ts

@@ -1,7 +1,7 @@
-import { JSX } from 'react';
-import { IconProps } from '../icon';
-import { InputNumberProps } from '../input-number/types';
-import { SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
+import { JSX } from "react";
+import { IconProps } from "../icon";
+import { InputNumberProps } from "../input-number/types";
+import { SizeVariant, ResponsiveDesign, ShallowMerge } from "../../types";
 export interface InputRangeResponsiveProps {
     size?: SizeVariant;
 }
@@ -18,4 +18,3 @@ interface InputRangeExtendedProps extends ResponsiveDesign<InputRangeResponsiveP
 }
 export type InputRangeProps = ShallowMerge<JSX.IntrinsicElements["div"], InputRangeExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/input-range/types.js

@@ -0,0 +1 @@
+export {};