@pushwoosh/dumb-components 1.1.79 → 1.1.80

package/EnhancedInput/EnhancedInput.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const EnhancedInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & import("../native/Input").NativeInputProps & {
     $icon?: React.ReactNode;
     $onClear?: () => void;
+    hint?: string;
 } & React.RefAttributes<HTMLInputElement>>;

package/EnhancedInput/EnhancedInput.js

@@ -1,20 +1,22 @@
 import React, { forwardRef } from 'react';
 import { CloseIcon } from '@pushwoosh/kit-icons';
-import { Wrapper } from './styles';
+import { Wrapper, RightSlot } from './styles';
 import { NativeInput } from '../native';
 export const EnhancedInput = forwardRef(({
   $icon,
   $onClear,
+  hint,
   ...props
 }, ref) => {
   return React.createElement(Wrapper, {
     "$hasIcon": !!$icon,
     "$hasClear": !!$onClear,
-    "$hasError": !!props.$isErrored
+    "$hasError": !!props.$isErrored,
+    "$hasHint": !!hint
   }, $icon, React.createElement(NativeInput, {
     ...props,
     ref: ref
-  }), $onClear && React.createElement(CloseIcon, {
+  }), hint && React.createElement(RightSlot, null, hint), $onClear && React.createElement(CloseIcon, {
     size: "small",
     onClick: $onClear
   }));

package/EnhancedInput/styles.d.ts

@@ -1,5 +1,15 @@
+import { Color } from '@pushwoosh/kit-constants';
+export declare const RightSlot: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $color: Color;
+}, "$color">;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
     $hasIcon?: boolean;
     $hasClear?: boolean;
     $hasError?: boolean;
+    $hasHint?: boolean;
 }, never>;

package/EnhancedInput/styles.js

@@ -1,13 +1,28 @@
 import styled from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
+import { Text } from '@pushwoosh/kit-typography';
 import { NativeInput } from '../native';
+export const RightSlot = styled(Text).attrs({
+  $color: Color.PHANTOM
+}).withConfig({
+  displayName: "RightSlot",
+  componentId: "sc-5f7rba-0"
+})(["pointer-events:none;"]);
 export const Wrapper = styled.div.withConfig({
   displayName: "Wrapper",
-  componentId: "sc-5f7rba-0"
-})(["display:inline-grid;position:relative;& > :not(", "){position:absolute;top:50%;transform:translateY(-50%);}& > :not(", "):first-child{left:6px;color:", ";}&:focus-within > :not(", "):first-child{color:", ";}& > :not(", "):last-child{right:12px;cursor:pointer;color:", ";transition:transform 0.3s ease,color 0.3s ease;&:hover{transform:translateY(-50%) scale(1.2);color:", ";}}& > ", "{width:100%;", " ", "}"], NativeInput, NativeInput, ({
+  componentId: "sc-5f7rba-1"
+})(["display:inline-grid;position:relative;& > :not(", "){position:absolute;top:50%;transform:translateY(-50%);}& > :not(", "):not(", "):first-child{left:6px;color:", ";}&:focus-within > :not(", "):not(", "):first-child{color:", ";}& > :not(", "):not(", "):last-child{right:12px;cursor:pointer;color:", ";transition:transform 0.3s ease,color 0.3s ease;&:hover{transform:translateY(-50%) scale(1.2);color:", ";}}& > ", "{right:", ";}& > ", "{width:100%;", " padding-right:", ";}"], NativeInput, NativeInput, RightSlot, ({
   $hasError
-}) => $hasError ? Color.DANGER : Color.PHANTOM, NativeInput, Color.BRIGHT, NativeInput, Color.PHANTOM, Color.MAIN, NativeInput, ({
+}) => $hasError ? Color.DANGER : Color.PHANTOM, NativeInput, RightSlot, Color.BRIGHT, NativeInput, RightSlot, Color.PHANTOM, Color.MAIN, RightSlot, ({
+  $hasClear
+}) => $hasClear ? '36px' : '12px', NativeInput, ({
   $hasIcon
 }) => $hasIcon && 'padding-left: 36px;', ({
-  $hasClear
-}) => $hasClear && `padding-right: 34px;`);
+  $hasClear,
+  $hasHint: $hasRightSlot
+}) => {
+  if ($hasClear && $hasRightSlot) return '125px';
+  if ($hasClear) return '34px';
+  if ($hasRightSlot) return '100px';
+  return '12px';
+});

package/EnhancedInput/types.d.ts

@@ -3,5 +3,6 @@ import type { NativeInputProps } from '../native/Input';
 export type EnhancedInputProps = InputHTMLAttributes<HTMLInputElement> & NativeInputProps & {
     $icon?: ReactNode;
     $onClear?: () => void;
+    hint?: string;
 };
 export type SearchInputProps = Omit<EnhancedInputProps, '$icon'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.79",
+  "version": "1.1.80",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",