aural-ui 2.1.13 → 2.1.14

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/index.tsx

@@ -1,17 +1,22 @@
 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 +54,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/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

@@ -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,24 @@
 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 +56,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

@@ -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

@@ -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

@@ -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) => (

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SuggestionIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Suggestion icon">
+export interface SuggestionIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SuggestionIcon = (props: SuggestionIconProps) => {
+  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}
     >
       <g transform="scale(1.5)">
         <path
@@ -29,5 +33,11 @@ export const SuggestionIcon = (
         />
       </g>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Suggestion icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/sun-icon/SunIcon.stories.tsx

@@ -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 { SunIcon } 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) => (

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

@@ -1,21 +1,24 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SunIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => {
-  return (
-    <AccessibleIcon label="Sun icon">
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 512 512"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-        {...props}
-      >
-        <path
-          d="M256,144c-61.75,0-112,50.25-112,112s50.25,112,112,112s112-50.25,112-112S317.75,144,256,144z M256,336
+export interface SunIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SunIcon = (props: SunIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...svgProps}
+    >
+      <path
+        d="M256,144c-61.75,0-112,50.25-112,112s50.25,112,112,112s112-50.25,112-112S317.75,144,256,144z M256,336
           c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c44.188,0,80,35.812,80,80C336,300.188,300.188,336,256,336z M256,112
           c8.833,0,16-7.167,16-16V64c0-8.833-7.167-16-16-16s-16,7.167-16,16v32C240,104.833,247.167,112,256,112z M256,400
           c-8.833,0-16,7.167-16,16v32c0,8.833,7.167,16,16,16s16-7.167,16-16v-32C272,407.167,264.833,400,256,400z M380.438,154.167
@@ -27,8 +30,13 @@ export const SunIcon = (
           c6.251,6.25,16.376,6.25,22.625,0c6.251-6.25,6.251-16.375,0-22.625l-22.625-22.625c-6.25-6.25-16.374-6.25-22.625,0
           c-6.25,6.25-6.25,16.375,0,22.625L131.541,154.167z M380.459,357.812c-6.271-6.25-16.376-6.25-22.625,0
           c-6.251,6.25-6.271,16.375,0,22.625l22.625,22.625c6.249,6.25,16.374,6.25,22.624,0s6.25-16.375,0-22.625L380.459,357.812z"
-        />
-      </svg>
-    </AccessibleIcon>
+      />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Sun icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }

package/dist/icons/text-color-icon/TextColorIcon.stories.tsx

@@ -202,16 +202,19 @@ function MyEditor() {
                       </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">
@@ -778,6 +781,10 @@ function CustomTextColorIcon({ label = "Text Color", ...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",
@@ -816,6 +823,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/text-color-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const TextColorIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Text Color icon">
+export interface TextColorIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const TextColorIcon = (props: TextColorIconProps) => {
+  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.9375 5.57812C15.9375 6.66544 15.0141 7.6875 13.875 7.6875C12.7359 7.6875 11.8125 6.66544 11.8125 5.57812C11.8125 4.17188 13.875 2.0625 13.875 2.0625C13.875 2.0625 15.9375 4.17188 15.9375 5.57812Z"
@@ -31,5 +35,11 @@ export const TextColorIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Text Color icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}