@hanzo/ui 4.5.3 → 4.6.0

package/primitives/input.tsx

@@ -1,30 +1,125 @@
-'use client'
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import * as React from 'react';
+import { useEffect, useImperativeHandle, useRef } from 'react';
 
-import React from "react"
-
-import { cn } from "../util"
+import { RefCallBack } from 'react-hook-form';
+import { cn } from '../src/utils';
+import { Badge } from './badge';
+import { Button } from './button';
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+  hidePasswordToggle?: boolean;
+  ref?: React.RefObject<HTMLInputElement | null> | RefCallBack;
+}
+
+const Input = ({
+  className,
+  type,
+  startAdornment,
+  endAdornment,
+  hidePasswordToggle,
+  ref,
+  ...props
+}: InputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const startAdornmentRef = useRef<HTMLDivElement>(null);
+  const endAdornmentRef = useRef<HTMLDivElement>(null);
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const style: React.CSSProperties = {};
+  if (startAdornment) {
+    style.paddingLeft = `${
+      (startAdornmentRef?.current?.offsetWidth ?? 0) + 20
+    }px`;
+  }
+  if (endAdornment) {
+    style.paddingRight = `${
+      (endAdornmentRef?.current?.offsetWidth ?? 0) + 20
+    }px`;
+  }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
+  useImperativeHandle(ref, () => inputRef.current!, []);
+
+  useEffect(() => {
+    if (props.autoFocus) {
+      setTimeout(() => {
+        // trick to wait the modal to be opened to focus
+        inputRef?.current?.focus();
+      }, 0);
+    }
+  }, [props.autoFocus]);
+
+  const inputType = type === 'password' && showPassword ? 'text' : type;
+
+  return (
+    <>
       <input
-        type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-muted-3 bg-inherit px-3 py-2 text-sm ring-offset-background ' + 
-          'file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-2 ' + 
-          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 ' + 
-          'first-letter:disabled:cursor-not-allowed disabled:opacity-50',
-          className
+          'h-input border-border-input bg-bg-secondary focus:border-border-input-focus disabled:bg-bg-input-disabled peer placeholder-shown:border-border-input text-text-default w-full rounded-lg border px-4 py-3 pt-8 text-sm font-medium placeholder-transparent outline outline-0 transition-all placeholder-shown:border focus:border focus:outline-0 disabled:border-0 disabled:text-gray-400',
+          startAdornment && 'pl-[var(--custom-padding-left-input)]',
+          endAdornment && 'pr-[var(--custom-padding-right-input)]',
+          type === 'password' && 'pr-[60px]',
+          className,
         )}
-        ref={ref}
+        placeholder=" "
+        ref={inputRef}
+        spellCheck={false}
+        style={style}
+        type={inputType}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+      {startAdornment ? (
+        <Badge
+          className="peer/adornment adornment absolute top-[30px] left-4"
+          ref={startAdornmentRef}
+          variant="inputAdornment"
+        >
+          {startAdornment}
+        </Badge>
+      ) : null}
+      {endAdornment && typeof endAdornment === 'string' ? (
+        <Badge
+          className="peer/adornment adornment absolute top-[30px] right-4"
+          ref={endAdornmentRef}
+          variant="inputAdornment"
+        >
+          {endAdornment}
+        </Badge>
+      ) : null}
+      {endAdornment &&
+      typeof endAdornment !== 'string' &&
+      React.isValidElement(endAdornment)
+        ? React.cloneElement(endAdornment, {
+            ref: endAdornmentRef,
+          } as React.ComponentProps<typeof Badge>)
+        : null}
+      {type === 'password' && !hidePasswordToggle && (
+        <Button
+          aria-label={showPassword ? 'Hide password' : 'Show password'}
+          className="absolute top-3 right-3"
+          onClick={togglePasswordVisibility}
+          size={'icon'}
+          type="button"
+          variant="tertiary"
+        >
+          {showPassword ? (
+            <EyeOffIcon aria-hidden="true" className="h-4 w-4" />
+          ) : (
+            <EyeIcon aria-hidden="true" className="h-4 w-4" />
+          )}
+        </Button>
+      )}
+    </>
+  );
+};
+
+Input.displayName = 'Input';
 
-export default Input
+export { Input };

package/primitives/label.tsx

@@ -1,28 +1,20 @@
-// @ts-nocheck
-"use client"
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import React from "react"
-// @ts-ignore
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../util"
+import { cn } from '../src/utils';
 
 const labelVariants = cva(
-  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+const Label = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants>) => (
+  <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
+);
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export default Label
+export { Label };

package/primitives/loading-spinner.tsx

@@ -1,6 +1,6 @@
 import { cn } from '../util'
 
-// cf: https://github.com/shadcn-ui/ui/discussions/1694#discussioncomment-7851248
+// cf: https://github.com/hanzo-ui/ui/discussions/1694#discussioncomment-7851248
 const LoadingSpinner: React.FC<
   {
     size?: number