aural-ui 2.1.12 → 2.1.14

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>

package/dist/icons/ai-avatar-icon/AiAvatarIcon.stories.tsx

@@ -203,16 +203,19 @@ function MyComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">40</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -858,6 +861,10 @@ function CustomAiAvatarIcon({ label = "AI Assistant", ...props }) {
       control: { type: "range", min: 16, max: 120, step: 4 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 16, max: 120, step: 4 },
       description: "Height of the icon in pixels",
@@ -888,6 +895,7 @@ export const Default: Story = {
     width: 40,
     height: 40,
     className: "",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/ai-avatar-icon/index.tsx

@@ -7,17 +7,22 @@ type AiAvatarIconProps = React.JSX.IntrinsicAttributes &
       circle?: string
       path?: string
     }
+    withAccessibility?: boolean
   }
 
-export const AiAvatarIcon = ({ classes = {}, ...props }: AiAvatarIconProps) => (
-  <AccessibleIcon label="Ai Avatar icon">
+export const AiAvatarIcon = ({
+  classes = {},
+  withAccessibility = true,
+  ...svgProps
+}: AiAvatarIconProps) => {
+  const svg = (
     <svg
       width="40"
       height="40"
       viewBox="0 0 40 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <circle
         cx="20"
@@ -32,5 +37,11 @@ export const AiAvatarIcon = ({ classes = {}, ...props }: AiAvatarIconProps) => (
         className={classes?.path}
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Ai Avatar icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/alert-icon/AlertIcon.stories.tsx

@@ -201,16 +201,19 @@ function MyComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-orange-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">16</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -259,7 +262,7 @@ function MyComponent() {
                           boolean
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/50">
-                          false
+                          true
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
                           Whether to use filled variant
@@ -766,6 +769,10 @@ function CustomAlertIcon({ label = "Alert", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -804,6 +811,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-orange-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/alert-icon/index.tsx

@@ -4,18 +4,23 @@ import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 type AlertIconProps = React.JSX.IntrinsicAttributes &
   React.SVGProps<SVGSVGElement> & {
     filled?: boolean
+    withAccessibility?: boolean
   }
 
-export const AlertIcon = ({ filled = false, ...props }: AlertIconProps) => {
+export const AlertIcon = ({
+  filled = false,
+  withAccessibility = true,
+  ...svgProps
+}: AlertIconProps) => {
   if (filled) {
-    return (
+    const filledSvg = (
       <svg
         width="16"
         height="16"
         viewBox="0 0 16 16"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
+        {...svgProps}
       >
         <path
           d="M24.5 19.5v8m0 4.98v.02m0-26-19 32h38z"
@@ -25,24 +30,34 @@ export const AlertIcon = ({ filled = false, ...props }: AlertIconProps) => {
         />
       </svg>
     )
+
+    if (withAccessibility) {
+      return <AccessibleIcon label="Alert icon">{filledSvg}</AccessibleIcon>
+    }
+
+    return filledSvg
   }
 
-  return (
-    <AccessibleIcon label="Alert icon">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="currentColor"
-        {...props}
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M0.789062 13.3335L8.00074 1.1875L15.2125 13.3335H0.789062ZM8.5 6.00016V9.6668H7.5V6.00016H8.5ZM7.5 10.3335H8.5V11.3335H7.5V10.3335Z"
-        />
-      </svg>
-    </AccessibleIcon>
+  const svg = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...svgProps}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.789062 13.3335L8.00074 1.1875L15.2125 13.3335H0.789062ZM8.5 6.00016V9.6668H7.5V6.00016H8.5ZM7.5 10.3335H8.5V11.3335H7.5V10.3335Z"
+      />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Alert icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }

package/dist/icons/angle-down-icon/AngleDownIcon.stories.tsx

@@ -201,16 +201,19 @@ function DropdownButton() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
+                      {" "}
+                      <tr className="!bg-black/10">
                         <td className="px-6 py-4 font-mono text-sm !text-blue-300">
-                          width
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">16</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -781,6 +784,10 @@ function AccessibleDropdown() {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -819,6 +826,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/angle-down-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const AngleDownIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Arrow Down icon">
+export interface AngleDownIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const AngleDownIcon = (props: AngleDownIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
       height="24"
       fill="none"
       viewBox="0 0 24 24"
-      {...props}
+      {...svgProps}
     >
       <path
         stroke="currentColor"
@@ -21,5 +25,11 @@ export const AngleDownIcon = (
         d="m19 9-7 7-7-7"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Arrow Down icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/apple-logo-icon/AppleLogoIcon.stories.tsx

@@ -202,16 +202,19 @@ function LoginPage() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
+                      {" "}
+                      <tr className="!bg-black/10">
                         <td className="px-6 py-4 font-mono text-sm !text-blue-300">
-                          width
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">20</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -738,6 +741,10 @@ function CustomAppleIcon({ label = "Apple", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -772,6 +779,7 @@ export const Default: Story = {
     width: 20,
     height: 20,
     className: "text-white",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/apple-logo-icon/index.tsx

@@ -1,15 +1,19 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const AppleLogoIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Apple logo">
+export interface AppleLogoIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const AppleLogoIcon = (props: AppleLogoIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M16.978 7.053c-2.84 1.756-2.541 5.845.522 7.294-.248.563-.447 1.151-.77 1.673-.48.778-1.01 1.548-1.598 2.251-.728.861-1.672 1.118-2.757.688-.14-.058-.29-.1-.422-.166-1.068-.48-2.128-.447-3.212-.008-1.615.662-2.327.488-3.452-.828-1.723-2.004-2.675-4.347-2.782-6.98-.075-1.895.455-3.617 2.053-4.826 1.15-.87 2.434-1.118 3.825-.62 2.053.736 1.416.695 3.46-.01 1.814-.628 3.42-.272 4.794 1.077.058.058.116.124.166.19.05.083.107.158.173.265z"
@@ -22,5 +26,11 @@ export const AppleLogoIcon = (
         fillOpacity=".99"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Apple logo">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/arrow-box-left-icon/ArrowBoxLeftIcon.stories.tsx

@@ -201,16 +201,19 @@ function BackButton() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-emerald-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">16</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -820,6 +823,10 @@ function AccessibleBackButton({ onBack, children }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -862,6 +869,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-emerald-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/arrow-box-left-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const ArrowBoxLeftIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Arrow Box Left icon">
+export interface ArrowBoxLeftIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ArrowBoxLeftIcon = (props: ArrowBoxLeftIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M11.25 20.25H3.75L3.75 3.75L11.25 3.75M9 12L19.5 12M15.75 16.5L20.25 12L15.75 7.5"
@@ -20,5 +24,11 @@ export const ArrowBoxLeftIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Arrow Box Left icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/arrow-corner-up-left-icon/ArrowCornerUpLeftIcon.stories.tsx

@@ -203,16 +203,19 @@ function MyComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
+                      {" "}
+                      <tr className="!bg-black/10">
                         <td className="px-6 py-4 font-mono text-sm !text-blue-300">
-                          width
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">18</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -764,6 +767,10 @@ function CustomArrowIcon({ label = "Navigate back", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -802,6 +809,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/arrow-corner-up-left-icon/index.tsx

@@ -1,17 +1,22 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const ArrowCornerUpLeftIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Arrow Corner Up Left icon">
+export interface ArrowCornerUpLeftIconProps
+  extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ArrowCornerUpLeftIcon = (props: ArrowCornerUpLeftIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="18"
       height="18"
       viewBox="0 0 18 18"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M15.1875 14.25V6.375H3.5625M5.8125 9.375L2.8125 6.375L5.8125 3.375"
@@ -20,5 +25,13 @@ export const ArrowCornerUpLeftIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return (
+      <AccessibleIcon label="Arrow Corner Up Left icon">{svg}</AccessibleIcon>
+    )
+  }
+
+  return svg
+}