@yomologic/react-ui 0.5.5 → 0.5.7

package/dist/index.js

@@ -1064,9 +1064,9 @@ var Input = import_react5.default.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
@@ -1307,9 +1307,9 @@ var Textarea = import_react6.default.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",
@@ -2152,6 +2152,7 @@ function Select({
   const form = useForm();
   const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
   const dropdownRef = (0, import_react11.useRef)(null);
+  const triggerRef = (0, import_react11.useRef)(null);
   const [validationError, _setValidationError] = (0, import_react11.useState)();
   const [focusedIndex, setFocusedIndex] = (0, import_react11.useState)(-1);
   const [searchString, setSearchString] = (0, import_react11.useState)("");
@@ -2224,6 +2225,7 @@ function Select({
       onChange?.(optionValue);
     }
     setIsOpen(false);
+    setTimeout(() => triggerRef.current?.focus(), 0);
   };
   const handleClear = async (e) => {
     e.stopPropagation();
@@ -2334,6 +2336,7 @@ function Select({
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "button",
             {
+              ref: triggerRef,
               type: "button",
               onClick: () => !disabled && setIsOpen(!isOpen),
               onKeyDown: handleKeyDown,
@@ -2342,8 +2345,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: [
@@ -2394,6 +2398,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",
@@ -2411,6 +2417,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" : ""}
                       `,
@@ -2525,7 +2533,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