@yomologic/react-ui 0.5.6 → 0.5.7

package/dist/index.mjs

@@ -995,9 +995,9 @@ var Input = React2.forwardRef(
                 className: cn(
                   "w-full px-3 py-2 border rounded-md transition-colors",
                   "text-(--color-muted-foreground) placeholder-gray-400",
-                  "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                  "focus:outline-none",
                   "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
-                  inputError ? "border-error focus:ring-error" : "border-(--color-border)",
+                  inputError ? "border-error focus:ring-2 focus:ring-error focus:border-error active:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
                   leftIcon && "pl-10",
                   rightIcon && "pr-10",
                   className
@@ -1238,9 +1238,9 @@ var Textarea = React3.forwardRef(
               className: cn(
                 "w-full px-3 py-2 border rounded-md transition-colors",
                 "text-(--color-muted-foreground) placeholder-gray-400",
-                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                "focus:outline-none",
                 "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
-                textareaError ? "border-error focus:ring-error" : "border-(--color-border)",
+                textareaError ? "border-error focus:ring-2 focus:ring-error focus:border-error active:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
                 resizeClasses[resize],
                 autoResize && "overflow-hidden",
                 !autoResize && "overflow-auto",
@@ -2083,6 +2083,7 @@ function Select({
   const form = useForm();
   const [isOpen, setIsOpen] = useState7(false);
   const dropdownRef = useRef5(null);
+  const triggerRef = useRef5(null);
   const [validationError, _setValidationError] = useState7();
   const [focusedIndex, setFocusedIndex] = useState7(-1);
   const [searchString, setSearchString] = useState7("");
@@ -2155,6 +2156,7 @@ function Select({
       onChange?.(optionValue);
     }
     setIsOpen(false);
+    setTimeout(() => triggerRef.current?.focus(), 0);
   };
   const handleClear = async (e) => {
     e.stopPropagation();
@@ -2265,6 +2267,7 @@ function Select({
           /* @__PURE__ */ jsxs9(
             "button",
             {
+              ref: triggerRef,
               type: "button",
               onClick: () => !disabled && setIsOpen(!isOpen),
               onKeyDown: handleKeyDown,
@@ -2273,8 +2276,9 @@ function Select({
             w-full ${sizeStyles[size]} text-left bg-(--color-background) border rounded-(--dropdown-radius)
             flex items-center justify-between
             transition-all duration-200
-            ${displayError ? "border-error focus:ring-2 focus:ring-error focus:border-error" : "border-(--color-border) focus:ring-2 focus:ring-[color-mix(in_srgb,var(--color-primary)_30%,transparent)] focus:border-(--color-primary)"}
-            ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-border)"}
+            outline-none
+            ${displayError ? "border-error focus:ring-2 focus:ring-error focus:border-error focus-visible:ring-2 focus-visible:ring-error focus-visible:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) focus-visible:ring-2 focus-visible:ring-(--color-primary)/30 focus-visible:border-(--color-primary)"}
+            ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-primary)"}
             ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
           `,
               children: [
@@ -2325,6 +2329,8 @@ function Select({
                       className: `
                         w-full ${optionSizeStyles[size]} text-left
                         transition-colors duration-150
+                        outline-none
+                        focus-visible:bg-(--color-muted) focus-visible:text-(--color-foreground)
                         ${!value || value === "" ? "bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] text-(--color-primary) font-medium" : "text-(--color-muted-foreground) hover:bg-(--color-muted)"}
                       `,
                       role: "option",
@@ -2342,6 +2348,8 @@ function Select({
                       className: `
                         w-full ${optionSizeStyles[size]} text-left
                         transition-colors duration-150
+                        outline-none
+                        focus-visible:bg-(--color-muted) focus-visible:text-(--color-foreground)
                         ${option.value === value ? "bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] text-(--color-primary) font-medium" : index === focusedIndex ? "bg-(--color-muted) text-(--color-foreground)" : "text-(--color-foreground) hover:bg-(--color-muted)"}
                         ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
                       `,
@@ -2456,7 +2464,8 @@ function NativeSelect({
                     transition-all duration-200
                     appearance-none
                     cursor-pointer
-                    ${displayError ? "border-error focus:ring-2 focus:ring-error focus:border-error" : "border-(--color-border) focus:ring-2 focus:ring-[color-mix(in_srgb,var(--color-primary)_30%,transparent)] focus:border-(--color-primary)"}
+                    outline-none
+                    ${displayError ? "border-error focus:border-error active:border-error" : "border-(--color-border) focus:border-(--color-primary) active:border-(--color-primary)"}
                     ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-primary)"}
                     ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
                     pr-10