@rovula/ui 0.0.7 → 0.0.9

package/src/components/TextInput/TextInput.styles.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 export const inputVariant = cva(
   [
     "border-0 outline-none",
-    "p-1 flex",
+    "p-1 flex w-auto box-border",
     "peer text-black placeholder:text-transparent",
   ],
   {
@@ -21,7 +21,7 @@ export const inputVariant = cva(
       variant: {
         flat: "",
         outline:
-          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-2 focus:ring-inset focus:ring-input-active",
+          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-1 focus:ring-inset focus:ring-input-stroke-active",
         underline:
           "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
       },
@@ -32,7 +32,7 @@ export const inputVariant = cva(
         true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
       },
       error: {
-        true: "ring-error",
+        true: "ring-error focus:ring-error",
       },
       hasClearIcon: {
         true: "",
@@ -73,22 +73,25 @@ export const inputVariant = cva(
 
 export const labelVariant = cva(
   [
-    "absolute block transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+    "absolute block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
   ],
   {
     variants: {
       size: {
         sm: [
-          "left-3 top-2 typography-small1 peer-focus:-top-1.5 peer-focus:typography-label2",
-          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label2",
+          "left-3 -top-1.5 typography-label2 bg-input-label-background",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label2",
         ],
         md: [
-          "left-3 top-2 typography-subtitile4 peer-focus:-top-1.5 peer-focus:typography-label1",
-          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+          "left-3 -top-1.5 typography-label1 bg-input-label-background",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
         lg: [
-          "left-4 top-4 typography-subtitile1 peer-focus:-top-1.5 peer-focus:typography-label1",
-          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+          "left-4 -top-1.5 typography-label1 bg-input-label-background",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
       disabled: {
@@ -97,22 +100,11 @@ export const labelVariant = cva(
       error: {
         true: "ring-error",
       },
-      isFloating: {
-        true: "-top-1.5 typography-label1 bg-input-label-background",
-      },
     },
-    compoundVariants: [
-      {
-        size: "sm",
-        isFloating: true,
-        class: "-top-1.5 typography-label2 bg-input-label-background",
-      },
-    ],
     defaultVariants: {
       size: "md",
       disabled: false,
       error: false,
-      isFloating: false,
     },
   }
 );

package/src/components/TextInput/TextInput.tsx

@@ -1,4 +1,10 @@
-import React, { FC, forwardRef, useImperativeHandle, useRef } from "react";
+import React, {
+  FC,
+  ReactNode,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from "react";
 import {
   helperTextVariant,
   iconVariant,
@@ -9,7 +15,7 @@ import {
 import { twMerge } from "tailwind-merge";
 import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
 
-type InputProps = {
+export type InputProps = {
   id?: string;
   label?: string;
   size?: "sm" | "md" | "lg";
@@ -23,6 +29,7 @@ type InputProps = {
   error?: boolean;
   required?: boolean;
   hasClearIcon?: boolean;
+  endIcon?: ReactNode;
   className?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
@@ -37,11 +44,12 @@ const TextInput: FC<InputProps> = forwardRef(
       type = "text",
       helperText,
       errorMessage,
-      fullwidth = false,
+      fullwidth = true,
       disabled = false,
       error = false,
       required = true,
       hasClearIcon = true,
+      endIcon,
       ...props
     },
     ref
@@ -61,7 +69,6 @@ const TextInput: FC<InputProps> = forwardRef(
       size,
       disabled,
       error,
-      isFloating: !!props.value ?? false,
     });
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
@@ -78,10 +85,11 @@ const TextInput: FC<InputProps> = forwardRef(
     };
 
     return (
-      <div className={`flex flex-col ${fullwidth ? "w-full" : ""}`}>
+      <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
         <div className="relative">
           <input
             {...props}
+            placeholder=" "
             ref={inputRef}
             type={type}
             id={_id}
@@ -97,6 +105,7 @@ const TextInput: FC<InputProps> = forwardRef(
               />
             </div>
           )}
+          {endIcon}
           <label htmlFor={_id} className={labelClassname}>
             {label} {required && <span className="text-error">*</span>}
           </label>

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as Table } from "./components/Table/Table";
 export { default as TextInput } from "./components/TextInput/TextInput";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
+export { default as Dropdown } from "./components/Dropdown/Dropdown";
 
 // UTILS
 export {