aural-ui 2.1.13 → 2.1.16

package/dist/icons/volume-half-icon/VolumeHalfIcon.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 { VolumeHalfIcon } from "."
 
@@ -205,16 +205,19 @@ function VolumeControl() {
                       </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">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">
@@ -944,6 +947,10 @@ function VolumeControl() {
       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",
@@ -984,6 +991,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-emerald-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/volume-half-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const VolumeHalfIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Volume half icon">
+export interface VolumeHalfIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const VolumeHalfIcon = (props: VolumeHalfIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -13,7 +17,7 @@ export const VolumeHalfIcon = (
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M15.8891 8.11091C16.8844 9.10622 17.5 10.4812 17.5 12C17.5 13.5188 16.8844 14.8938 15.8891 15.8891M1.75 7.75H6L12.25 4.25V19.75L6 16.25H1.75V7.75Z"
@@ -21,5 +25,11 @@ export const VolumeHalfIcon = (
         strokeWidth="1.5"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Volume half icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/volume-off-icon/VolumeOffIcon.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 { VolumeOffIcon } from "."
 
@@ -203,16 +203,19 @@ function AudioControls() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-slate-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">
@@ -933,6 +936,10 @@ function AudioControls() {
       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",
@@ -973,6 +980,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-slate-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/volume-off-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const VolumeOffIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Volume off icon">
+export interface VolumeOffIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const VolumeOffIcon = (props: VolumeOffIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -13,7 +17,7 @@ export const VolumeOffIcon = (
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M21.5 10L19.3787 12.1213M19.3787 12.1213L17.2574 14.2426M19.3787 12.1213L17.2574 10M19.3787 12.1213L21.5 14.2426M1.75 7.75H6L12.25 4.25V19.75L6 16.25H1.75V7.75Z"
@@ -22,5 +26,11 @@ export const VolumeOffIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Volume off icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/warning-icon/WarningIcon.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 { WarningIcon } from "."
 
@@ -203,16 +203,19 @@ function ErrorAlert() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-yellow-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">
@@ -887,6 +890,10 @@ function ErrorAlert() {
       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",
@@ -931,6 +938,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-yellow-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const WarningIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Warning icon">
+export interface WarningIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const WarningIcon = (props: WarningIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -14,7 +18,7 @@ export const WarningIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="square"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M12 9.75V13.75M12 16.24V16.25M12 3.25L2.5 19.25H21.5L12 3.25Z"
@@ -23,5 +27,11 @@ export const WarningIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Warning icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/youtube-icon/YoutubeIcon.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 { YoutubeIcon } from "."
 
@@ -202,16 +202,19 @@ function VideoCard() {
                       </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">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">
@@ -771,6 +774,10 @@ function CustomYoutubeIcon({ label = "YouTube", ...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",
@@ -805,6 +812,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-red-500",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const YoutubeIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Youtube icon">
+export interface YoutubeIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const YoutubeIcon = (props: YoutubeIconProps) => {
+  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
         fillRule="evenodd"
@@ -20,5 +24,11 @@ export const YoutubeIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Youtube icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}