aural-ui 2.1.13 → 2.1.16

package/dist/icons/skip-backward-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SkipBackwardIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Skip backward icon">
+export interface SkipBackwardIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SkipBackwardIcon = (props: SkipBackwardIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="37"
@@ -14,7 +18,7 @@ export const SkipBackwardIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M30.8003 5.86964V30.1299L11.4307 17.9997L30.8003 5.86964Z"
@@ -25,5 +29,11 @@ export const SkipBackwardIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Skip backward icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/skip-forward-icon/SkipForwardIcon.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 { SkipForwardIcon } from "."
 
@@ -201,16 +201,19 @@ function MediaPlayer() {
                       </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">36</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">
@@ -825,6 +828,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",
@@ -865,6 +872,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/skip-forward-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SkipForwardIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Skip forward icon">
+export interface SkipForwardIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SkipForwardIcon = (props: SkipForwardIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="36"
@@ -14,7 +18,7 @@ export const SkipForwardIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M6 5.86964V30.1299L25.3696 17.9997L6 5.86964Z"
@@ -25,5 +29,11 @@ export const SkipForwardIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Skip forward icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/sparkles-soft-icon/SparklesSoftIcon.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 { SparklesSoftIcon } from "."
 
@@ -200,16 +200,19 @@ function MyComponent() {
                       </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">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">
@@ -793,6 +796,10 @@ function CustomSparklesIcon({ label = "Sparkles", ...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",
@@ -835,6 +842,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-yellow-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/sparkles-soft-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SparklesSoftIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Sparkles Soft Icon">
+export interface SparklesSoftIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SparklesSoftIcon = (props: SparklesSoftIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="20"
       height="20"
       viewBox="0 0 20 20"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <path
         fillRule="evenodd"
@@ -25,5 +29,11 @@ export const SparklesSoftIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Sparkles Soft Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/spinner-gradient-icon/SpinnerGradientIcon.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 { SpinnerGradientIcon } from "."
 

package/dist/icons/spinner-gradient-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SpinnerGradientIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Spinner Gradient Icon">
+export interface SpinnerGradientIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SpinnerGradientIcon = (props: SpinnerGradientIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="54"
       height="54"
       viewBox="0 0 54 54"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <g
         clipPath="url(#paint0_angular_2078_22297_clip_path)"
@@ -49,5 +53,11 @@ export const SpinnerGradientIcon = (
         </clipPath>
       </defs>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Spinner Gradient Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/spinner-solid-icon/SpinnerSolidIcon.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 { SpinnerSolidIcon } from "."
 import { SpinnerGradientIcon } from "../spinner-gradient-icon"

package/dist/icons/spinner-solid-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SpinnerSolidIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Spinner Solid Icon">
+export interface SpinnerSolidIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SpinnerSolidIcon = (props: SpinnerSolidIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="54"
       height="54"
       viewBox="0 0 54 54"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <g
         clipPath="url(#paint0_angular_2078_22300_clip_path)"
@@ -55,5 +59,11 @@ export const SpinnerSolidIcon = (
         </clipPath>
       </defs>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Spinner Solid Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/spinner-solid-neutral-icon/SpinnerSolidINeutralcon.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 { SpinnerSolidNeutralIcon } from "."
 import { SpinnerSolidIcon } from "../spinner-solid-icon"
@@ -233,16 +233,19 @@ const meta: Meta<typeof SpinnerSolidNeutralIcon> = {
                       </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">64</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">
@@ -471,6 +474,7 @@ export const Default: Story = {
     width: 32,
     height: 32,
     className: "",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (
@@ -709,6 +713,10 @@ export const Playground: Story = {
       control: { type: "range", min: 16, max: 128, 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: 128, step: 4 },
       description: "Height of the icon in pixels",

package/dist/icons/spinner-solid-neutral-icon/index.tsx

@@ -1,17 +1,23 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
+export interface SpinnerSolidNeutralIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
 export const SpinnerSolidNeutralIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Spinner Solid Neutral Icon">
+  props: SpinnerSolidNeutralIconProps
+) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="64"
       height="64"
       viewBox="0 0 64 64"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <g
         clip-path="url(#paint0_angular_3367_6316_clip_path)"
@@ -49,5 +55,13 @@ export const SpinnerSolidNeutralIcon = (
         </clipPath>
       </defs>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return (
+      <AccessibleIcon label="Spinner Solid Neutral Icon">{svg}</AccessibleIcon>
+    )
+  }
+
+  return svg
+}

package/dist/icons/star-icon/StarIcon.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 { StarIcon } from "."
 
@@ -199,16 +199,19 @@ function RatingStar() {
                       </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">
@@ -748,6 +751,10 @@ function RatingStar() {
       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",
@@ -788,6 +795,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-yellow-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const StarIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Star icon">
+export interface StarIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const StarIcon = (props: StarIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -14,9 +18,15 @@ export const StarIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"
-      {...props}
+      {...svgProps}
     >
       <path d="M12.0008 2L14.9397 7.95492L21.5114 8.90983L16.7561 13.5451L17.8787 20.0902L12.0008 17L6.12295 20.0902L7.24552 13.5451L2.49023 8.90983L9.06187 7.95492L12.0008 2Z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Star icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/store-coin-icon/StoreCoinIcon.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 { StoreCoinIcon } from "."
 
@@ -202,16 +202,19 @@ function PurchaseButton() {
                       </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">28</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">
@@ -782,6 +785,10 @@ function CustomStoreCoinIcon({ label = "Store coin", ...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",
@@ -812,6 +819,7 @@ export const Default: Story = {
     width: 28,
     height: 28,
     className: "",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/store-coin-icon/index.tsx

@@ -1,11 +1,15 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const StoreCoinIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Store coin icon">
-    <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" {...props}>
+export interface StoreCoinIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const StoreCoinIcon = (props: StoreCoinIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" {...svgProps}>
       <circle cx="14" cy="14" r="14" fill="#FFB340" />
 
       <path
@@ -29,7 +33,11 @@ export const StoreCoinIcon = (
         fill="#FFFAE8"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Store coin icon">{svg}</AccessibleIcon>
+  }
 
-export default StoreCoinIcon
+  return svg
+}

package/dist/icons/suggestion-icon/SuggestionIcon.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 { SuggestionIcon } from "."
 
@@ -201,16 +201,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">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">
@@ -681,6 +684,10 @@ import { SuggestionIcon } from "@icons/suggestion-icon"
       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",
@@ -723,6 +730,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (