@rango-dev/ui 0.49.1-next.3 → 0.49.1-next.4

package/dist/widget/ui/src/components/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiF1B,QAAA,MAAM,SAAS;qBAzDZ,MAAO,SAAS;aAAa,MAAM,SAAS;aAAY,MAAO,SAAS;;;;;;;;;;0CAyDrB,CAAC;AAIvD,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AA+FtC,QAAA,MAAM,SAAS;qBAzEX,MAAG,SAAS;aACZ,MAAO,SAAS;aACX,MAEP,SAAS;;;;;;;;;;0CAqE2C,CAAC;AAIvD,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/widget/ui/src/components/TextField/TextField.styles.d.ts

@@ -1,6 +1,8 @@
 export declare const InputContainer: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
     fullWidth?: boolean | "true" | "false" | undefined;
     size?: "small" | "large" | undefined;
+    suffix?: boolean | "true" | "false" | undefined;
+    prefix?: boolean | "true" | "false" | undefined;
     variant?: "contained" | "outlined" | "ghost" | undefined;
     disabled?: boolean | "true" | "false" | undefined;
     status?: "default" | "success" | "warning" | "error" | undefined;
@@ -165,7 +167,8 @@ export declare const InputContainer: import("@stitches/react/types/styled-compon
     transitions: {};
 }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
 export declare const Input: import("@stitches/react/types/styled-component.js").StyledComponent<"input", {
-    suffix?: boolean | "true" | undefined;
+    prefix?: boolean | "true" | "false" | undefined;
+    size?: "small" | "large" | undefined;
 }, {
     xs: string;
     sm: string;

package/dist/widget/ui/src/components/TextField/TextField.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextField/TextField.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAgGzB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAsChB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAEhB,CAAC"}
+{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextField/TextField.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAsIzB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAiEhB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAEhB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.49.1-next.3",
+  "version": "0.49.1-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -62,4 +62,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/TextField/TextField.styles.ts

@@ -17,14 +17,24 @@ export const InputContainer = styled('div', {
       },
     },
     size: {
-      small: {
-        padding: '$5 $15',
-      },
+      small: {},
       large: {
-        padding: '$10',
         borderRadius: '$xl',
       },
     },
+    suffix: {
+      true: {},
+      false: {
+        padding: 0,
+      },
+    },
+    prefix: {
+      true: {},
+      false: {
+        padding: 0,
+      },
+    },
+
     variant: {
       contained: {
         $$color: '$colors$neutral100',
@@ -77,6 +87,34 @@ export const InputContainer = styled('div', {
   },
 
   compoundVariants: [
+    {
+      size: 'small',
+      suffix: true,
+      css: {
+        paddingRight: '$15',
+      },
+    },
+    {
+      size: 'small',
+      prefix: true,
+      css: {
+        paddingLeft: '$15',
+      },
+    },
+    {
+      size: 'large',
+      suffix: true,
+      css: {
+        paddingRight: '$10',
+      },
+    },
+    {
+      size: 'large',
+      prefix: true,
+      css: {
+        paddingLeft: '$10',
+      },
+    },
     {
       variant: 'contained',
       disabled: true,
@@ -109,10 +147,37 @@ export const Input = styled('input', {
   fontFamily: 'inherit',
   maxWidth: '100%',
   variants: {
-    suffix: {
-      true: { marginRight: '$10' },
+    prefix: {
+      true: {
+        paddingLeft: '$0',
+      },
+      false: {},
+    },
+    size: {
+      small: {
+        padding: '$6 $15 $6 $0',
+      },
+      large: {
+        padding: '$10 $10 $10 $0',
+      },
     },
   },
+  compoundVariants: [
+    {
+      size: 'small',
+      prefix: false,
+      css: {
+        paddingLeft: '$15',
+      },
+    },
+    {
+      size: 'large',
+      prefix: false,
+      css: {
+        paddingLeft: '$10',
+      },
+    },
+  ],
   backgroundColor: 'transparent',
   '-webkit-appearance': 'none',
   margin: 0,

package/src/components/TextField/TextField.tsx

@@ -1,7 +1,7 @@
 import type { Ref, TextFieldPropTypes } from './TextField.types.js';
 import type { PropsWithChildren } from 'react';
 
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { Divider } from '../Divider/index.js';
 import { Typography } from '../Typography/index.js';
@@ -12,6 +12,8 @@ function TextFieldComponent(
   props: PropsWithChildren<TextFieldPropTypes>,
   ref?: Ref
 ) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const {
     label,
     prefix,
@@ -44,6 +46,14 @@ function TextFieldComponent(
     }
   };
 
+  const handleClick = () => {
+    if (ref && 'current' in ref && ref.current) {
+      ref.current.focus();
+    } else if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
   return (
     <>
       {label && (
@@ -65,18 +75,22 @@ function TextFieldComponent(
         size={size}
         css={style}
         status={status}
+        suffix={!!suffix}
+        prefix={!!prefix}
+        onClick={handleClick}
         className="_text-field">
-        {prefix || null}
+        {prefix}
         <Input
           autoComplete="off"
           {...inputAttributes}
           onKeyDown={handleKeyDown}
           onPaste={handlePaste}
           spellCheck={false}
-          suffix={!!suffix}
-          ref={ref}
+          prefix={!!prefix}
+          size={size}
+          ref={ref || inputRef}
         />
-        {suffix || null}
+        {suffix}
       </InputContainer>
     </>
   );