aural-ui 2.1.13 → 2.1.16

package/dist/icons/audio-bar-icon/index.tsx

@@ -1,19 +1,29 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const AudioBarIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Audio Bar icon">
+export interface AudioBarIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const AudioBarIcon = (props: AudioBarIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="52"
       height="12"
       viewBox="0 0 52 12"
       xmlns="http://www.w3.org/2000/svg"
       fill="currentColor"
-      {...props}
+      {...svgProps}
     >
       <path d="M19.068 0h1.5v12h-1.5zm4 2h1.5v8h-1.5zm4 2h1.5v3.81h-1.5zm-10-2h-1.5v8h1.5zm-4 2h-1.5v3.81h1.5zm-4 .5h-1.5v2h1.5zm-4 0h-1.5v2h1.5zM1.5 4.5H0v2h1.5zM36.068 0h-1.5v12h1.5zm4 2h-1.5v8h1.5zm-8 2h-1.5v3.81h1.5zm14-2h1.5v8h-1.5zm-4 2h1.5v3.81h-1.5zm8 1h1.5v2h-1.5z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Audio Bar icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/backward-ten-seconds-icon/BackwardTenSecondsIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { BackwardTenSecondsIcon } from "."
 
@@ -203,16 +203,19 @@ function MediaPlayer() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-violet-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">44</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">
@@ -833,6 +836,10 @@ function MediaPlayer() {
       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",
@@ -873,6 +880,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-violet-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/backward-ten-seconds-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const BackwardTenSecondsIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Backward ten seconds icon">
+export interface BackwardTenSecondsIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const BackwardTenSecondsIcon = (props: BackwardTenSecondsIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="44"
@@ -14,7 +18,7 @@ export const BackwardTenSecondsIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M23.8 6.80476V10.3L16.6 5.35L23.8 0.399998V4.08888C32.8959 4.99198 40 12.6664 40 22C40 31.941 31.941 40 22 40C12.0589 40 4 31.941 4 22C4 17.0298 6.0162 12.5279 9.27207 9.27207L11.1813 11.1813C8.41103 13.9515 6.7 17.7746 6.7 22C6.7 30.4499 13.55 37.3 22 37.3C30.4499 37.3 37.3 30.4499 37.3 22C37.3 14.159 31.4018 7.69563 23.8 6.80476Z"
@@ -31,5 +35,13 @@ export const BackwardTenSecondsIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return (
+      <AccessibleIcon label="Backward ten seconds icon">{svg}</AccessibleIcon>
+    )
+  }
+
+  return svg
+}

package/dist/icons/bubble-check-icon/BubbleCheckIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { BubbleCheckIcon } from "."
 
@@ -204,16 +204,19 @@ function SuccessMessage() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-green-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">24</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">
@@ -956,6 +959,10 @@ function SuccessMessageIcon({ label = "Success message", ...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",
@@ -999,6 +1006,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-green-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/bubble-check-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const BubbleCheckIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Bubble Check icon">
+export interface BubbleCheckIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const BubbleCheckIcon = (props: BubbleCheckIconProps) => {
+  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="M9.34998 11.35L11 13L14.85 9.15003M3.75 3.75H20.25V18.25H15.0155L11.9979 20.75L9.0155 18.25H3.75V3.75Z"
@@ -20,5 +24,11 @@ export const BubbleCheckIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Bubble Check icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/bubble-crossed-icon/BubbleCrossedIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { BubbleCrossedIcon } from "."
 
@@ -202,16 +202,19 @@ function BlockedMessage() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-red-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">25</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">
@@ -944,6 +947,10 @@ function BlockedMessageIcon({ label = "Blocked message", ...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",
@@ -987,6 +994,7 @@ export const Default: Story = {
     width: 25,
     height: 24,
     className: "text-red-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/bubble-crossed-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const BubbleCrossedIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Bubble Crossed icon">
+export interface BubbleCrossedIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const BubbleCrossedIcon = (props: BubbleCrossedIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="25"
       height="24"
       viewBox="0 0 25 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M14.6213 8.85314L12.5 10.9745M12.5 10.9745L10.3787 13.0958M12.5 10.9745L10.3787 8.85314M12.5 10.9745L14.6213 13.0958M4.25 3.75H20.75V18.25H15.5155L12.4979 20.75L9.5155 18.25H4.25V3.75Z"
@@ -20,5 +24,11 @@ export const BubbleCrossedIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Bubble Crossed icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/bubble-sparkle-icon/BubbleSparkleIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { BubbleSparkleIcon } from "."
 
@@ -202,16 +202,19 @@ function ChatMessage() {
                       </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">24</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">
@@ -687,6 +690,10 @@ function ChatMessage() {
       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",
@@ -721,6 +728,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-purple-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/bubble-sparkle-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const BubbleSparkleIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Bubble Sparkle icon">
+export interface BubbleSparkleIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const BubbleSparkleIcon = (props: BubbleSparkleIconProps) => {
+  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="M3.75 3.75H20.25V18.25H15.0155L11.9979 20.75L9.0155 18.25H3.75V3.75Z"
@@ -22,5 +26,11 @@ export const BubbleSparkleIcon = (
         className="fill-current"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Bubble Sparkle icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/camera-icon/CameraIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { CameraIcon } from "."
 
@@ -203,16 +203,19 @@ function VideoCall() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-indigo-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">24</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">
@@ -1047,6 +1050,10 @@ function VideoCall() {
       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",
@@ -1092,6 +1099,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-indigo-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const CameraIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Camera icon">
+export interface CameraIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const CameraIcon = (props: CameraIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -14,9 +18,15 @@ export const CameraIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"
-      {...props}
+      {...svgProps}
     >
       <path d="M15.5 9.875L21.25 7V17L15.5 14.125M2.75 4.75H15.25V19.25H2.75V4.75Z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Camera icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/capital-a-letter-icon/CapitalALetterIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { CapitalALetterIcon } from "."
 
@@ -199,16 +199,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">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">
@@ -762,6 +765,10 @@ function CustomCapitalAIcon({ label = "Font size", ...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",
@@ -800,6 +807,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/capital-a-letter-icon/index.tsx

@@ -1,32 +1,40 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const CapitalALetterIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => {
-  return (
-    <AccessibleIcon label="Capital A Letter Icon">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        {...props}
-      >
-        <path
-          d="M3.33301 13L8.16634 2.66663L12.9997 13"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="square"
-        />
-        <path
-          d="M5.5 9.33337H10.8333"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="square"
-        />
-      </svg>
-    </AccessibleIcon>
+export interface CapitalALetterIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const CapitalALetterIcon = (props: CapitalALetterIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...svgProps}
+    >
+      <path
+        d="M3.33301 13L8.16634 2.66663L12.9997 13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="square"
+      />
+      <path
+        d="M5.5 9.33337H10.8333"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="square"
+      />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Capital A Letter Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }