aural-ui 2.1.12 → 2.1.13

package/dist/components/drawer/index.tsx

@@ -125,7 +125,7 @@ const DrawerContent = React.forwardRef<
             "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
             "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
             "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-lg data-[vaul-drawer-direction=right]:sm:max-w-sm",
-            "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-lg data-[vaul-drawer-direction=left]:sm:max-w-sm",
+            "overflow-auto [scrollbar-width:none] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-lg data-[vaul-drawer-direction=left]:sm:max-w-sm",
             className,
             classes?.content
           )}

package/dist/components/input/index.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react"
 import CharCount from "@components/char-count"
 import HelperText from "@components/helper-text"
+import { IconButton } from "@components/icon-button"
 import { Else, If, IfElse } from "@components/if-else"
 import { Label } from "@components/label"
 import { EyeCloseIcon } from "@icons/eye-close-icon"
@@ -175,7 +176,7 @@ const EndIcon = forwardRef<
   <div
     ref={ref}
     className={cn(
-      "absolute inset-y-0 right-0 flex items-center pr-3",
+      "absolute inset-y-0 right-0 flex items-center pl-3",
       className
     )}
   >
@@ -192,24 +193,24 @@ const PasswordToggle = forwardRef<
     className?: string
   }
 >(({ isVisible, onToggle, className = "" }, ref) => (
-  <button
+  <IconButton
     ref={ref}
     type="button"
     onClick={onToggle}
+    variant="ghost"
+    icon={
+      isVisible ? (
+        <EyeCloseIcon className="text-fm-primary size-6" />
+      ) : (
+        <EyeOpenIcon className="text-fm-primary size-6" />
+      )
+    }
+    label={isVisible ? "Hide password" : "Show password"}
     className={cn(
-      "text-fm-primary hover:text-fm-primary/90 h-full focus:outline-none",
+      "text-fm-primary hover:text-fm-primary/90 h-full hover:bg-transparent focus:outline-none",
       className
     )}
-  >
-    <IfElse condition={isVisible}>
-      <If>
-        <EyeCloseIcon />
-      </If>
-      <Else>
-        <EyeOpenIcon />
-      </Else>
-    </IfElse>
-  </button>
+  />
 ))
 
 PasswordToggle.displayName = "PasswordToggle"

package/dist/components/select/index.tsx

@@ -413,7 +413,8 @@ const SelectField = React.forwardRef<
     ref
   ) => {
     // Generate unique IDs for accessibility
-    const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`
+    const generatedId = React.useId()
+    const selectId = id || `select-${generatedId}`
     const helperTextId = helperText ? `${selectId}-helper` : undefined
     const labelId = label ? `${selectId}-label` : undefined
 

package/dist/components/textarea/index.tsx

@@ -411,7 +411,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
               currentLength={currentLength}
               maxLength={maxLength}
               id={charCountId}
-              className="ml-auto"
+              className={cn("ml-auto", classes?.charCount)}
             />
           )}
         </div>