fix: input size

kamalion-labs · Jan 24, 2025 · d0c4ccc · d0c4ccc
1 parent bd81385
commit d0c4ccc
Show file tree

Hide file tree

Showing 18 changed files with 77 additions and 134 deletions.
diff --git a/apps/docs/src/pages/home/index.tsx b/apps/docs/src/pages/home/index.tsx
@@ -10,6 +10,7 @@ const selectItems = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"];
 
 const formSchema = z.object({
   text: z.string().nonempty("Campo obrigatório"),
+  button: z.string().nonempty("Campo obrigatório"),
   password: z.string().nonempty("Campo obrigatório"),
   textarea: z.string().nonempty("Campo obrigatório"),
   date: z.coerce.date({
@@ -59,6 +60,16 @@ export function HomePage() {
                   <Input.DatePicker {...form.register("date")} />
                 </Input.Root>
 
+                <Input.Root>
+                  <Input.Label htmlFor="date">Button:</Input.Label>
+                  <div className="flex">
+                    <Input.Text {...form.register("button")} />
+                    <Button.Root>
+                      <Button.Content>Button</Button.Content>
+                    </Button.Root>
+                  </div>
+                </Input.Root>
+
                 <Input.Root>
                   <Input.Label htmlFor="select">Select:</Input.Label>
                   <Input.Select {...form.register("select")}>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/kamalion-ui/package.json b/packages/kamalion-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kamalion/ui",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "type": "module",
   "private": false,
   "repository": {

diff --git a/packages/kamalion-ui/src/components/Input/InputDatePicker.tsx b/packages/kamalion-ui/src/components/Input/InputDatePicker.tsx
@@ -31,7 +31,7 @@ const InputDatePicker = React.forwardRef<
         <Popover.Trigger asChild ref={ref}>
           <Button.Root
             size="lg"
-            className={cn("border rounded-sm min-w-[250px] h-9 w-fit border-[--input-border]", triggerClassName)}
+            className={cn("border rounded-sm min-w-[250px] h-8 w-fit border-[--input-border]", triggerClassName)}
           >
             <Button.Content className="flex flex-1 justify-start">
               {value ? format(value, "dd/MM/yyyy") : "Selecione uma data..."}

diff --git a/packages/kamalion-ui/src/components/Input/InputMask.tsx b/packages/kamalion-ui/src/components/Input/InputMask.tsx
@@ -49,33 +49,22 @@ export type InputMaskProps = Omit<PatternFormatProps, "type" | "format"> & {
 };
 
 const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>(
-  (
-    {
-      className,
-      name,
-      type,
-      displayType = "input",
-      noControl,
-      ...rest
-    }: InputMaskProps,
-    ref
-  ) => {
+  ({ className, name, type, displayType = "input", noControl, ...rest }: InputMaskProps, ref) => {
     const formContext = useFormContext();
 
     if (!name) return null;
 
     const { returnFormattedValue, ...maskRest } = maskProps[type];
 
     const classes = cn(
-      "flex h-9 w-full bg-[--input-background] text-[--input-foreground] px-3 py-1 transition-colors",
+      "flex h-8 w-full bg-[--input-background] text-[--input-foreground] px-3 py-1 transition-colors",
       "border rounded-sm border-[--input-border]",
       "placeholder:text-muted-foreground",
       "file:border-0 file:bg-transparent file:text-sm file:font-medium",
       "focus-visible:ring-0 focus-visible:border-[--input-ring] focus-visible:outline-none",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      displayType === "text" &&
-        "border-0 p-0 disabled:cursor-text disabled:opacity-100 h-fit bg-transparent",
-      className
+      displayType === "text" && "border-0 p-0 disabled:cursor-text disabled:opacity-100 h-fit bg-transparent",
+      className,
     );
 
     if (!formContext || !formContext.control || noControl) {
@@ -113,14 +102,12 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>(
               }
             />
 
-            <div className="text-red-400">
-              {props.fieldState.error?.message}
-            </div>
+            <div className="text-red-400">{props.fieldState.error?.message}</div>
           </>
         )}
       />
     );
-  }
+  },
 );
 
 InputMask.displayName = "InputMask";

diff --git a/packages/kamalion-ui/src/components/Input/InputNumber.tsx b/packages/kamalion-ui/src/components/Input/InputNumber.tsx
@@ -34,31 +34,20 @@ export type InputNumberProps = Omit<NumericFormatProps, "type"> & {
 };
 
 const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
-  (
-    {
-      className,
-      name,
-      type = "number",
-      displayType = "input",
-      noControl,
-      ...rest
-    }: InputNumberProps,
-    ref
-  ) => {
+  ({ className, name, type = "number", displayType = "input", noControl, ...rest }: InputNumberProps, ref) => {
     const formContext = useFormContext();
 
     if (!name) return null;
 
     const classes = cn(
-      "flex h-9 w-full bg-[--input-background] text-[--input-foreground] px-3 py-1 transition-colors",
+      "flex h-8 w-full bg-[--input-background] text-[--input-foreground] px-3 py-1 transition-colors",
       "border rounded-sm border-[--input-border]",
       "placeholder:text-muted-foreground",
       "file:border-0 file:bg-transparent file:text-sm file:font-medium",
       "focus-visible:ring-0 focus-visible:border-[--input-ring] focus-visible:outline-none",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      displayType === "text" &&
-        "border-0 p-0 disabled:cursor-text disabled:opacity-100 h-fit bg-transparent",
-      className
+      displayType === "text" && "border-0 p-0 disabled:cursor-text disabled:opacity-100 h-fit bg-transparent",
+      className,
     );
 
     if (!formContext || !formContext.control || noControl) {
@@ -96,14 +85,12 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
               }
             />
 
-            <div className="text-red-400">
-              {props.fieldState.error?.message}
-            </div>
+            <div className="text-red-400">{props.fieldState.error?.message}</div>
           </>
         )}
       />
     );
-  }
+  },
 );
 
 InputNumber.displayName = "InputNumber";

diff --git a/packages/kamalion-ui/src/components/Input/InputSelect.tsx b/packages/kamalion-ui/src/components/Input/InputSelect.tsx
@@ -20,18 +20,8 @@ const InputSelect = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & InputSelectProps
 >(
   (
-    {
-      className,
-      triggerClassName,
-      position = "popper",
-      children,
-      name,
-      onValueChange,
-      noControl,
-      value,
-      ...props
-    },
-    ref
+    { className, triggerClassName, position = "popper", children, name, onValueChange, noControl, value, ...props },
+    ref,
   ) => {
     const formContext = useFormContext();
 
@@ -47,38 +37,33 @@ const InputSelect = React.forwardRef<
           value={value || undefined}
           name={name}
           onValueChange={(val) => {
-            uncontrolled
-              ? onValueChange!(val)
-              : formContext.setValue(name, val);
+            uncontrolled ? onValueChange!(val) : formContext.setValue(name, val);
           }}
         >
           <SelectPrimitive.Trigger
             ref={ref}
             asChild
             className={cn(
-              "flex w-fit min-w-[250px] h-9 transition-colors",
+              "flex w-fit min-w-[250px] h-8 transition-colors",
               "border rounded-sm border-[--input-border]",
               "hover:bg-zinc-100 active:bg-zinc-200",
               "placeholder:text-muted-foreground",
               "file:border-0 file:bg-transparent file:text-sm file:font-medium",
               "focus-visible:ring-0 focus-visible:border-[--input-ring] focus-visible:outline-none",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              triggerClassName
+              triggerClassName,
             )}
             {...props}
           >
             <Button.Root
               size="lg"
               className={cn(
                 "border bg-[--input-background] text-[--input-foreground] rounded-sm border-[--input-border]",
-                triggerClassName
+                triggerClassName,
               )}
             >
               <Button.Content className="flex flex-1 justify-start">
-                <SelectPrimitive.Value
-                  className="flex-1"
-                  placeholder="Selecione um item..."
-                />
+                <SelectPrimitive.Value className="flex-1" placeholder="Selecione um item..." />
               </Button.Content>
 
               <Button.Icon>
@@ -99,7 +84,7 @@ const InputSelect = React.forwardRef<
                 "data-[side=left]:slide-in-from-right-2",
                 "data-[side=right]:slide-in-from-left-2",
                 "data-[side=top]:slide-in-from-bottom-2",
-                className
+                className,
               )}
             >
               <SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-[25px] text-slate-900">
@@ -116,13 +101,13 @@ const InputSelect = React.forwardRef<
         </SelectPrimitive.Root>
 
         {!uncontrolled && name && (
-          <div className="text-red-400">
-            {formContext.formState?.errors?.[name]?.message?.toString()}
-          </div>
+          <div className="text-red-400">{formContext.formState?.errors?.[name]?.message?.toString()}</div>
         )}
       </>
     );
-  }
+  },
 );
 
+InputSelect.displayName = "InputSelect";
+
 export { InputSelect };
diff --git a/packages/kamalion-ui/src/components/Input/InputSelectItem.tsx b/packages/kamalion-ui/src/components/Input/InputSelectItem.tsx
@@ -16,7 +16,7 @@ const InputSelectItem = React.forwardRef<
       "cursor-pointer",
       "text-sm outline-none focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >

diff --git a/packages/kamalion-ui/src/components/Input/InputText.tsx b/packages/kamalion-ui/src/components/Input/InputText.tsx
@@ -11,33 +11,22 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
 };
 
 const InputText = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      name,
-      displayType = "input",
-      type = "text",
-      noControl,
-      ...props
-    },
-    ref
-  ) => {
+  ({ className, name, displayType = "input", type = "text", noControl, ...props }, ref) => {
     const formContext = useFormContext();
     const [ShowPassword, setShowPassword] = useState(false);
 
     if (!name) return null;
 
     const classes = cn(
-      "flex h-9 w-full bg-[--input-background] text-[--input-foreground] px-3 py-1 transition-colors",
+      "flex h-8 w-full bg-[--input-background] text-[--input-foreground] px-3 py-1 transition-colors",
       "border rounded-sm border-[--input-border]",
       "placeholder:text-muted-foreground",
       "file:border-0 file:bg-transparent file:text-sm file:font-medium",
       "focus-visible:ring-0 focus-visible:border-[--input-ring] focus-visible:outline-none",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      displayType === "text" &&
-        "border-0 p-0 disabled:cursor-text disabled:opacity-100 h-fit bg-transparent",
+      displayType === "text" && "border-0 p-0 disabled:cursor-text disabled:opacity-100 h-fit bg-transparent",
       type === "password" && "rounded-r-none border-r-0",
-      className
+      className,
     );
 
     if (!formContext || !formContext.control || noControl) {
@@ -50,21 +39,15 @@ const InputText = React.forwardRef<HTMLInputElement, InputProps>(
               disabled={displayType === "text"}
               {...props}
               ref={ref}
-              type={
-                type === "text" || (type === "password" && ShowPassword)
-                  ? "text"
-                  : "password"
-              }
+              type={type === "text" || (type === "password" && ShowPassword) ? "text" : "password"}
             />
             {type === "password" && (
               <Button.Root
                 size="icon"
                 className={cn("h-auto w-fit rounded-l-none")}
                 onClick={() => setShowPassword((old) => !old)}
               >
-                <Button.Icon>
-                  {ShowPassword ? <FaEyeSlash /> : <FaEye />}
-                </Button.Icon>
+                <Button.Icon>{ShowPassword ? <FaEyeSlash /> : <FaEye />}</Button.Icon>
               </Button.Root>
             )}
           </div>
@@ -82,31 +65,23 @@ const InputText = React.forwardRef<HTMLInputElement, InputProps>(
             {...props}
             {...formContext.register(name)}
             ref={ref}
-            type={
-              type === "text" || (type === "password" && ShowPassword)
-                ? "text"
-                : "password"
-            }
+            type={type === "text" || (type === "password" && ShowPassword) ? "text" : "password"}
           />
           {type === "password" && (
             <Button.Root
               size="icon"
               className={cn("h-auto w-fit rounded-l-none")}
               onClick={() => setShowPassword((old) => !old)}
             >
-              <Button.Icon>
-                {ShowPassword ? <FaEyeSlash /> : <FaEye />}
-              </Button.Icon>
+              <Button.Icon>{ShowPassword ? <FaEyeSlash /> : <FaEye />}</Button.Icon>
             </Button.Root>
           )}
         </div>
 
-        <div className="text-red-400">
-          {formContext.formState?.errors?.[name]?.message?.toString()}
-        </div>
+        <div className="text-red-400">{formContext.formState?.errors?.[name]?.message?.toString()}</div>
       </>
     );
-  }
+  },
 );
 
 InputText.displayName = "Input";