@scaleflex/ui-tw 0.0.1

package/core/input/input.component.js

@@ -0,0 +1,293 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["inputType", "children", "iconStart", "iconEnd", "iconChange", "inputActions", "clearIcon", "iconClickStart", "iconClickEnd", "clearIconClick", "size", "className", "style", "fullWidth", "readOnly", "disabled", "hideCopyIcon", "focusOnMount", "focusOnClick", "isEllipsis", "copyTextMessage", "copySuccessIcon", "error", "renderTags", "showPlaceholder", "InputProps", "ref"];
+import CopyOutline from '@scaleflex/icons-tw/copy-outline';
+import EyeClosed from '@scaleflex/icons-tw/eye-closed';
+import EyeOpen from '@scaleflex/icons-tw/eye-open';
+import Success from '@scaleflex/icons-tw/success';
+import React, { useEffect, useRef, useState } from 'react';
+import { cn } from '../../utils/functions/shadcn-utils';
+import { InputSize } from '../../utils/types';
+import { handleCopyIcon } from './input.utils';
+import { Type } from './types';
+var getIconSize = function getIconSize(sizeName, iconType) {
+  switch (sizeName) {
+    case InputSize.Md:
+      return iconType === 'start' ? 15 : 14;
+    case InputSize.Sm:
+    default:
+      return iconType === 'start' ? 13 : 10;
+  }
+};
+var getPasswordIconSize = function getPasswordIconSize(sizeName) {
+  switch (sizeName) {
+    case InputSize.Md:
+      return 16;
+    case InputSize.Sm:
+    default:
+      return 14;
+  }
+};
+var Input = function Input(_ref) {
+  var _rest$selectedItems;
+  var inputType = _ref.inputType,
+    children = _ref.children,
+    iconStart = _ref.iconStart,
+    iconEnd = _ref.iconEnd,
+    iconChange = _ref.iconChange,
+    inputActions = _ref.inputActions,
+    clearIcon = _ref.clearIcon,
+    iconClickStart = _ref.iconClickStart,
+    iconClickEnd = _ref.iconClickEnd,
+    clearIconClick = _ref.clearIconClick,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? InputSize.Md : _ref$size,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hideCopyIcon = _ref.hideCopyIcon,
+    hideCopyIcon = _ref$hideCopyIcon === void 0 ? false : _ref$hideCopyIcon,
+    _ref$focusOnMount = _ref.focusOnMount,
+    focusOnMount = _ref$focusOnMount === void 0 ? false : _ref$focusOnMount,
+    _ref$focusOnClick = _ref.focusOnClick,
+    focusOnClick = _ref$focusOnClick === void 0 ? true : _ref$focusOnClick,
+    _ref$isEllipsis = _ref.isEllipsis,
+    isEllipsis = _ref$isEllipsis === void 0 ? false : _ref$isEllipsis,
+    _ref$copyTextMessage = _ref.copyTextMessage,
+    copyTextMessage = _ref$copyTextMessage === void 0 ? 'Copied!' : _ref$copyTextMessage,
+    _ref$copySuccessIcon = _ref.copySuccessIcon,
+    copySuccessIcon = _ref$copySuccessIcon === void 0 ? /*#__PURE__*/React.createElement(Success, {
+      size: 16
+    }) : _ref$copySuccessIcon,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    renderTags = _ref.renderTags,
+    showPlaceholder = _ref.showPlaceholder,
+    InputPropsData = _ref.InputProps,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovering = _useState2[0],
+    setIsHovering = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showCopyMessage = _useState4[0],
+    setShowCopyMessage = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isVisible = _useState6[0],
+    setIsVisible = _useState6[1];
+  var inputRef = useRef(null);
+  var isSelectedItems = (_rest$selectedItems = rest.selectedItems) === null || _rest$selectedItems === void 0 ? void 0 : _rest$selectedItems.length;
+  var placeholder = rest.value || isSelectedItems ? '' : rest.placeholder;
+  var showCopyIcon = isHovering && readOnly && rest.value.length > 0 && !hideCopyIcon;
+  var handleFocus = function handleFocus() {
+    var _inputRef$current;
+    if (disabled || readOnly) return;
+    showPlaceholder === null || showPlaceholder === void 0 || showPlaceholder(false);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  };
+  useEffect(function () {
+    if (focusOnMount) {
+      handleFocus();
+    }
+  }, []);
+  useEffect(function () {
+    setTimeout(function () {
+      return setShowCopyMessage(false);
+    }, 2000);
+  }, [showCopyMessage]);
+  var handleEntering = function handleEntering() {
+    setTimeout(function () {
+      setIsHovering(true);
+    }, 150);
+  };
+  var handleLeaving = function handleLeaving() {
+    setTimeout(function () {
+      setIsHovering(false);
+    }, 200);
+  };
+  var handleIconClick = function handleIconClick(event, type) {
+    if (disabled || readOnly) return;
+    if (focusOnClick) {
+      handleFocus();
+    }
+    if (type === 'start') {
+      if (iconClickStart) {
+        iconClickStart(event);
+      }
+    } else if (type === 'end') {
+      if (iconClickEnd) {
+        iconClickEnd(event);
+      }
+    } else if (clearIconClick) {
+      var _inputRef$current2;
+      event.stopPropagation();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+      clearIconClick(event);
+    }
+  };
+  var handleInputChange = function handleInputChange(event) {
+    var _rest$onChange;
+    var value = event.target.value;
+    if (value !== null && value !== void 0 && value.startsWith('-0')) {
+      return;
+    }
+    (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 || _rest$onChange.call(rest, event);
+  };
+  var renderIcon = function renderIcon(_icon, type) {
+    return _icon ? /*#__PURE__*/React.createElement("span", {
+      className: cn('renderIcon', 'text-icons-primary', 'flex', 'shrink-0', "".concat((iconClickStart || iconClickEnd) && !disabled && !readOnly ? 'pointer' : 'default'), "".concat(type === 'end' ? 'text-icons-secondary' : ''), "".concat(disabled && '!text-textplaceholder')),
+      onClick: function onClick(event) {
+        return handleIconClick(event, type);
+      }
+    }, typeof _icon === 'function' ? _icon({
+      size: getIconSize(size, type)
+    }) : _icon) : undefined;
+  };
+  var renderClearIcon = function renderClearIcon() {
+    return disabled || readOnly || !clearIcon ? undefined : /*#__PURE__*/React.createElement("span", {
+      className: "renderClearIcon text-icons-primary flex cursor-pointer",
+      onClick: function onClick(event) {
+        return handleIconClick(event, 'clear');
+      }
+    }, typeof clearIcon === 'function' ? clearIcon({
+      size: getIconSize(size, 'clear')
+    }) : clearIcon);
+  };
+  var copyIconClasses = 'text-icons-secondary flex cursor-pointer';
+  var renderCopyIcon = function renderCopyIcon(icon) {
+    return showCopyIcon ? /*#__PURE__*/React.createElement("span", {
+      className: copyIconClasses,
+      onClick: function onClick() {
+        return handleCopyIcon(rest.value, setShowCopyMessage);
+      }
+    }, icon) : undefined;
+  };
+  var toggleVisibility = function toggleVisibility(event) {
+    event.stopPropagation();
+    setIsVisible(!isVisible);
+  };
+  var renderPasswordIcon = function renderPasswordIcon() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: copyIconClasses,
+      onClick: function onClick(event) {
+        return toggleVisibility(event);
+      }
+    }, isVisible ? /*#__PURE__*/React.createElement(EyeClosed, {
+      size: getPasswordIconSize(size)
+    }) : /*#__PURE__*/React.createElement(EyeOpen, {
+      size: getPasswordIconSize(size)
+    }));
+  };
+  var getInputType = function getInputType() {
+    if (!inputType && rest !== null && rest !== void 0 && rest.type) {
+      return rest === null || rest === void 0 ? void 0 : rest.type;
+    }
+    if (inputType === Type.Password && !isVisible) {
+      return Type.Password;
+    }
+    return Type.Text;
+  };
+  var renderField = function renderField() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('inline-flex h-full max-h-30 w-full flex-wrap gap-2 [&::-webkit-scrollbar]:hidden', "".concat(isSelectedItems ? 'overflow-y-auto' : ''))
+    }, renderTags && renderTags(), /*#__PURE__*/React.createElement("input", _extends({
+      className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-w-0 rounded-md text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', '[&::placeholder]:text-textplaceholder m-0 block w-full min-w-fit border-0 bg-transparent p-0 text-inherit outline-none', "".concat(isEllipsis ? 'text-ellipsis' : ''))
+    }, rest, {
+      "data-slot": "input",
+      placeholder: placeholder,
+      ref: inputRef,
+      readOnly: Boolean(readOnly),
+      type: getInputType(),
+      onChange: handleInputChange
+    })));
+  };
+  var renderCopyText = function renderCopyText() {
+    var bottomValue = size === InputSize.Md ? 'bottom-11' : 'bottom-9';
+    return /*#__PURE__*/React.createElement("div", {
+      className: "shadow-(0px 2px 6px) shadow-large-shadow absolute right-0 flex max-h-8 items-center gap-1.5 rounded-sm bg-white ".concat(bottomValue, " ")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "text-icons-primary flex"
+    }, copySuccessIcon), /*#__PURE__*/React.createElement("span", {
+      className: "text-textprimary flex flex-nowrap"
+    }, copyTextMessage), /*#__PURE__*/React.createElement("span", {
+      className: "text-textprimary flex whitespace-nowrap"
+    }, copyTextMessage));
+  };
+  var renderInputActions = function renderInputActions(inputActions) {
+    if (!inputActions) return;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "box-border w-full pt-4"
+    }, inputActions);
+  };
+
+  // ==========================
+  // ==========================
+
+  var divContainerWrapClassNames = cn(className, 'relative', 'flex', 'box-border', 'gap-2', 'cursor-text', 'transition-all', 'duration-100', 'ease-out', 'border-1', 'border-solid', 'rounded-sm', 'box-content', 'hover:[&_svg]:!text-secondary-hover');
+  if (inputActions) {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'items-stretch', 'column');
+  } else {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'row');
+  }
+  if (fullWidth) {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'w-full');
+  } else {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'w-80'); // w-80 == 320px
+  }
+  if (readOnly || disabled) {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'bg-background-hover');
+    if (disabled) {
+      divContainerWrapClassNames = cn(divContainerWrapClassNames, 'pointer-events-none', 'text-textplaceholder', 'border-borders-secondary');
+    }
+    if (readOnly) {
+      divContainerWrapClassNames = cn(divContainerWrapClassNames, 'border-borders-item');
+    }
+
+    //.
+  } else {
+    // !readonly && !disabled
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'pointer-events-auto', 'bg-background-stateless', 'border-borders-primary-stateless', 'hover:bg-background-stateless', 'hover:border-borders-primary-hover', 'hover:[&_svg]:text-icons-primary',
+    // &:hover svg { color: ... }
+
+    'focus-within:!bg-background-secondary', 'focus-within:border-accent-primary', 'focus-within:hover:border-accent-primary');
+  }
+  if (InputSize.Sm) {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'py-2 px-3 h-8');
+  }
+  if (InputSize.Md) {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'py-3 px-4 h-10');
+  }
+  if (isSelectedItems) {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'h-fit');
+  }
+  if (error) {
+    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'bg-background-secondary', 'border-1', 'border-error');
+  }
+
+  // ==========================
+  // ==========================
+
+  var divContainerClassNames = cn('flex', 'items-center', 'w-full', 'gap-2', 'box-border');
+  divContainerClassNames = cn(divContainerClassNames, '');
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: divContainerWrapClassNames,
+    onMouseEnter: handleEntering,
+    onMouseLeave: handleLeaving,
+    style: style
+  }, InputPropsData || {}), /*#__PURE__*/React.createElement("div", {
+    className: divContainerClassNames
+  }, renderIcon(iconStart, 'start'), renderField(), renderCopyIcon(/*#__PURE__*/React.createElement(CopyOutline, {
+    size: getIconSize(size, 'copy')
+  })), showCopyMessage && renderCopyText(), renderClearIcon(), inputType === Type.Password && renderPasswordIcon(), renderIcon(iconEnd, 'end'), renderIcon(iconChange, ''), children && /*#__PURE__*/React.createElement(React.Fragment, null, children)), renderInputActions(inputActions));
+};
+export default Input;

package/core/input/input.mixin.d.ts

@@ -0,0 +1,18 @@
+import type { WithTheme } from '../../theme/entity';
+export declare const sizeInputMixin: {
+    sm: string;
+    md: string;
+};
+export declare const sizeCrossInputMixin: {
+    sm: string;
+    md: string;
+};
+export declare const fontSizeInputMixin: {
+    sm: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+    md: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+};
+export declare const sizeInputLabelMixin: {
+    sm: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+    md: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+};
+export declare const errorMixin: ({ theme: { palette } }: WithTheme) => import("styled-components").RuleSet<object>;

package/core/input/input.mixin.js

@@ -0,0 +1,25 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from 'styled-components';
+import { InputSize } from '../../utils/types';
+import { Color as PaletteColor } from '../../utils/types/palette';
+import { FontVariant as FV } from '../../utils/types/typography';
+export var sizeInputMixin = _defineProperty(_defineProperty({}, InputSize.Sm, "\n    padding: 8px 12px;\n    height: 32px;\n  "), InputSize.Md, "\n    padding: 11px 16px;\n    height: 40px;\n  ");
+export var sizeCrossInputMixin = _defineProperty(_defineProperty({}, InputSize.Sm, "\n    padding: 4px 6px 4px 12px;\n    max-height: 32px;\n  "), InputSize.Md, "\n    padding: 0px 4px 0px 16px;\n    max-height: 40px;\n  ");
+export var fontSizeInputMixin = _defineProperty(_defineProperty({}, InputSize.Sm, function (_ref) {
+  var font = _ref.theme.typography.font;
+  return css(["", ""], font[FV.InputMd]);
+}), InputSize.Md, function (_ref2) {
+  var font = _ref2.theme.typography.font;
+  return css(["", ""], font[FV.InputLg]);
+});
+export var sizeInputLabelMixin = _defineProperty(_defineProperty({}, InputSize.Sm, function (_ref3) {
+  var font = _ref3.theme.typography.font;
+  return css(font[FV.LabelSmall]);
+}), InputSize.Md, function (_ref4) {
+  var font = _ref4.theme.typography.font;
+  return css(font[FV.LabelMedium]);
+});
+export var errorMixin = function errorMixin(_ref5) {
+  var palette = _ref5.theme.palette;
+  return css(["background:", " !important;border:1px solid ", " !important;"], palette[PaletteColor.BackgroundSecondary], palette[PaletteColor.Error]);
+};

package/core/input/input.props.d.ts

@@ -0,0 +1,40 @@
+import { IconProps } from '@scaleflex/icons-tw/icon.props';
+import React, { Ref } from 'react';
+import type { Values } from '../../utils/types';
+import { InputBackgroundColor, InputSize } from '../../utils/types';
+export type InputSizeType = Values<typeof InputSize>;
+export type InputBackgroundType = Values<typeof InputBackgroundColor>;
+export type IconFuncType = (props: IconProps) => React.ReactNode;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    readOnly?: boolean;
+    disabled?: boolean;
+    isEllipsis?: boolean;
+    isHovering?: boolean;
+    size?: InputSizeType;
+    iconStart?: React.ReactNode | IconFuncType;
+    iconEnd?: React.ReactNode | IconFuncType;
+    inputActions?: React.ReactNode;
+    iconChange?: React.ReactNode | IconFuncType;
+    clearIcon?: React.ReactNode | IconFuncType;
+    inputType?: string;
+    type?: any;
+    error?: boolean;
+    fullWidth?: boolean;
+    isSearchInput?: boolean;
+    hideCopyIcon?: boolean;
+    copyTextMessage?: string;
+    copySuccessIcon?: React.ReactNode;
+    value?: any;
+    selectedItems?: any;
+    isSelectedItems?: boolean;
+    renderTags?: () => React.ReactNode;
+    iconClickStart?: (event: Event) => void;
+    iconClickEnd?: (event: Event) => void;
+    clearIconClick?: (event: Event) => void;
+    focusOnMount?: boolean;
+    focusOnClick?: boolean;
+    showPlaceholder?: (value: boolean) => void;
+    placeholder?: string;
+    InputProps?: React.HtmlHTMLAttributes<HTMLDivElement>;
+    ref?: Ref<HTMLInputElement>;
+}

package/core/input/input.props.js

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

package/core/input/input.styles.d.ts

@@ -0,0 +1,78 @@
+import type { InputProps } from './input.props';
+declare const Styled: {
+    Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, {
+        $isSelectedItems?: boolean;
+        $fullWidth?: boolean;
+        $error?: boolean;
+        $hasInputActions?: boolean;
+    } & InputProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, InputProps>> & string;
+    Base: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+    }>, never>, {
+        $isEllipsis?: boolean;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, {
+        $iconType: string;
+    } & InputProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    CopyIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    PasswordIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, "theme"> & {
+        theme: import("styled-components").DefaultTheme;
+    }, import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, "theme"> & {
+        theme: import("styled-components").DefaultTheme;
+    }>, never>, never>> & string;
+    ClearIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    NotificationBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, {
+        isTextarea?: boolean;
+    } & InputProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    NotificationIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    NotificationText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, {
+        $isSelectedItems: boolean;
+    }>> & string;
+    InputActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, never>> & string;
+    InputContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, never>> & string;
+};
+export default Styled;

package/core/input/input.styles.js

@@ -0,0 +1,148 @@
+import styled, { css } from 'styled-components';
+import { applyDisplayNames, generateClassNames } from '../../utils/functions';
+import { InputSize } from '../../utils/types';
+import { Color as PColor } from '../../utils/types/palette';
+import { BorderRadiusSize as BRSize } from '../../utils/types/shape';
+import { FontVariant as FV } from '../../utils/types/typography';
+import { errorMixin, fontSizeInputMixin, sizeInputMixin } from './input.mixin';
+import { getInputBackgroundColor, getInputBorderColor, getInputTextColor } from './input.utils';
+var baseClassName = 'Input';
+var Icon = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'Icon')
+}).withConfig({
+  componentId: "sc-p6n03x-0"
+})(function (_ref) {
+  var iconClickStart = _ref.iconClickStart,
+    iconClickEnd = _ref.iconClickEnd,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    $iconType = _ref.$iconType,
+    palette = _ref.theme.palette;
+  return css(["display:flex;color:", ";cursor:", ";flex-shrink:0;", ""], palette[PColor.IconsPrimary], (iconClickStart || iconClickEnd) && !disabled && !readOnly ? 'pointer' : 'default', $iconType === 'end' && css(["color:", ";"], palette[PColor.IconsSecondary]));
+});
+var CopyIcon = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'CopyIcon')
+}).withConfig({
+  componentId: "sc-p6n03x-1"
+})(function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return css(["display:flex;color:", ";cursor:pointer;"], palette[PColor.IconsSecondary]);
+});
+var PasswordIcon = /*#__PURE__*/styled(CopyIcon).attrs({
+  className: generateClassNames(baseClassName, 'PasswordIcon')
+}).withConfig({
+  componentId: "sc-p6n03x-2"
+})([""]);
+var Container = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'Container')
+}).withConfig({
+  componentId: "sc-p6n03x-3"
+})(function () {
+  return css(["display:block;color:inherit;font-size:inherit;width:100%;min-width:0;margin:0;padding:0;border:0;background-color:transparent;outline:none;"]);
+});
+var Base = /*#__PURE__*/styled.input.attrs({
+  className: generateClassNames(baseClassName, 'Base')
+}).withConfig({
+  componentId: "sc-p6n03x-4"
+})(function (_ref3) {
+  var palette = _ref3.theme.palette,
+    _ref3$$isEllipsis = _ref3.$isEllipsis,
+    $isEllipsis = _ref3$$isEllipsis === void 0 ? false : _ref3$$isEllipsis;
+  return css(["display:block;color:inherit;width:100%;min-width:fit-content;margin:0;padding:0;border:0;background-color:transparent;outline:none;", " &::placeholder{color:", ";}"], $isEllipsis && css(["text-overflow:ellipsis;"]), palette[PColor.TextPlaceholder]);
+});
+var Input = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-p6n03x-5"
+})(function (_ref4) {
+  var _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? InputSize.Md : _ref4$size,
+    _ref4$$error = _ref4.$error,
+    $error = _ref4$$error === void 0 ? false : _ref4$$error,
+    _ref4$$fullWidth = _ref4.$fullWidth,
+    $fullWidth = _ref4$$fullWidth === void 0 ? false : _ref4$$fullWidth,
+    _ref4$readOnly = _ref4.readOnly,
+    readOnly = _ref4$readOnly === void 0 ? false : _ref4$readOnly,
+    _ref4$disabled = _ref4.disabled,
+    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+    _ref4$isHovering = _ref4.isHovering,
+    isHovering = _ref4$isHovering === void 0 ? false : _ref4$isHovering,
+    _ref4$$isSelectedItem = _ref4.$isSelectedItems,
+    $isSelectedItems = _ref4$$isSelectedItem === void 0 ? false : _ref4$$isSelectedItem,
+    _ref4$$hasInputAction = _ref4.$hasInputActions,
+    $hasInputActions = _ref4$$hasInputAction === void 0 ? false : _ref4$$hasInputAction,
+    theme = _ref4.theme;
+  return css(["position:relative;display:flex;flex-direction:", ";", " box-sizing:border-box;column-gap:8px;cursor:text;transition:all 100ms ease-out;width:", ";pointer-events:", ";background-color:", ";border-radius:", ";border:1px solid ", ";color:", ";", " ", ";", "{", "}", " ", " &:hover{color:", ";}", ""], !$hasInputActions ? 'row' : 'column', $hasInputActions && 'align-items: stretch;', $fullWidth ? '100%' : '300px', disabled ? 'none' : 'auto', getInputBackgroundColor(readOnly, disabled), theme.shape.borderRadius[BRSize.Md], getInputBorderColor(readOnly, disabled), disabled ? theme.palette[PColor.TextPlaceholder] : theme.palette[PColor.TextPrimary], sizeInputMixin[size], $isSelectedItems && "\n      height: fit-content;\n\n      ".concat(Base, " {\n        max-width: fit-content;\n        min-width: 20px;\n        flex-grow: 1;\n        width: 40px;\n      }\n    "), Base, fontSizeInputMixin[size], !readOnly && !disabled && css(["&:focus-within{background-color:", "!important;border:1px solid ", ";&:hover{border:1px solid ", ";", "{color:", ";}}}", " &:hover{background-color:", ";border:1px solid ", ";", "{color:", ";}}"], theme.palette[PColor.BackgroundSecondary], theme.palette[PColor.AccentStateless], theme.palette[PColor.AccentStateless], Icon, theme.palette[PColor.IconsPrimary], isHovering && css(["", "{color:", ";}"], Icon, theme.palette[PColor.IconsPrimaryHover]), theme.palette[PColor.BackgroundStateless], theme.palette[PColor.BordersPrimaryHover], Icon, theme.palette[PColor.IconsPrimaryHover]), disabled && css(["", "{color:", ";}"], Icon, theme.palette[PColor.IconsMuted]), getInputTextColor(readOnly, disabled), $error && errorMixin);
+});
+var ClearIcon = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'ClearIcon')
+}).withConfig({
+  componentId: "sc-p6n03x-6"
+})(function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return css(["display:flex;cursor:pointer;color:", ";"], palette[PColor.IconsPrimary]);
+});
+var NotificationBox = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'NotificationBox')
+}).withConfig({
+  componentId: "sc-p6n03x-7"
+})(function (_ref6) {
+  var _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? InputSize.Md : _ref6$size,
+    _ref6$isTextarea = _ref6.isTextarea,
+    isTextarea = _ref6$isTextarea === void 0 ? false : _ref6$isTextarea,
+    palette = _ref6.theme.palette;
+  return css(["display:flex;position:absolute;align-items:center;max-height:34px;right:0px;padding:8px 12px;gap:6px;bottom:", ";box-shadow:0px 2px 6px ", ";background-color:", ";border-radius:4px;align-items:center;", ""], size === InputSize.Md ? '45px' : '35px', palette[PColor.LargeShadow], palette[PColor.BackgroundStateless], isTextarea && "\n      bottom: ".concat(size === InputSize.Md ? 27 : 22, "px;\n      right: ").concat(size === InputSize.Md ? 16 : 12, "px;\n    "));
+});
+var NotificationIcon = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'NotificationIcon')
+}).withConfig({
+  componentId: "sc-p6n03x-8"
+})(function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return css(["display:flex;color:", ";"], palette[PColor.IconsPrimary]);
+});
+var NotificationText = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'NotificationText')
+}).withConfig({
+  componentId: "sc-p6n03x-9"
+})(function (_ref8) {
+  var _ref8$theme = _ref8.theme,
+    palette = _ref8$theme.palette,
+    font = _ref8$theme.typography.font;
+  return css(["display:flex;white-space:nowrap;", ";color:", ";"], font[FV.TextSmall], palette[PColor.TextPrimary]);
+});
+var FieldWrapper = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'fieldWrapper')
+}).withConfig({
+  componentId: "sc-p6n03x-10"
+})(function (_ref9) {
+  var $isSelectedItems = _ref9.$isSelectedItems;
+  return css(["width:100%;height:100%;display:inline-flex;flex-wrap:wrap;gap:8px;max-height:120px;", ";::-webkit-scrollbar{display:none;}"], $isSelectedItems && "\n      overflow-y: auto;\n    ");
+});
+var InputActions = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'inputActions')
+}).withConfig({
+  componentId: "sc-p6n03x-11"
+})(["padding-top:16px;width:100%;box-sizing:border-box;"]);
+var InputContent = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'inputContent')
+}).withConfig({
+  componentId: "sc-p6n03x-12"
+})(["display:flex;align-items:center;width:100%;column-gap:8px;box-sizing:border-box;"]);
+var Styled = applyDisplayNames({
+  Input: Input,
+  Container: Container,
+  Base: Base,
+  Icon: Icon,
+  CopyIcon: CopyIcon,
+  PasswordIcon: PasswordIcon,
+  ClearIcon: ClearIcon,
+  NotificationBox: NotificationBox,
+  NotificationIcon: NotificationIcon,
+  NotificationText: NotificationText,
+  FieldWrapper: FieldWrapper,
+  InputActions: InputActions,
+  InputContent: InputContent
+});
+export default Styled;

package/core/input/input.utils.d.ts

@@ -0,0 +1,4 @@
+export declare const getInputBackgroundColor: (readOnly?: boolean, disabled?: boolean) => string | undefined;
+export declare const getInputTextColor: (readOnly?: boolean, disabled?: boolean) => string | undefined;
+export declare const getInputBorderColor: (readOnly?: boolean, disabled?: boolean) => string | undefined;
+export declare const handleCopyIcon: (value: string, setShowCopyMessage: any) => void;