aural-ui 2.1.13 → 2.1.14

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SearchIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Search icon">
+export interface SearchIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SearchIcon = (props: SearchIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="14"
       height="14"
       viewBox="0 0 14 14"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M12.333 12.333 9.751 9.751m0 0a4.833 4.833 0 1 0-6.835-6.835A4.833 4.833 0 0 0 9.75 9.75Z"
@@ -20,5 +24,11 @@ export const SearchIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Search icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/setting-icon/SettingIcon.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">12</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">
@@ -798,6 +801,10 @@ function CustomSettingIcon({ label = "Settings", ...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",
@@ -836,6 +843,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,30 +1,38 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SettingIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => {
-  return (
-    <AccessibleIcon label="Setting Icon">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 12 12"
-        fill="none"
-        {...props}
-      >
-        <path
-          d="M4.6125 2.7625L3.10938 2.41562L2.41562 3.10938L2.7625 4.6125L1.375 5.5375V6.4625L2.7625 7.3875L2.41562 8.89062L3.10938 9.58437L4.6125 9.2375L5.5375 10.625H6.4625L7.3875 9.2375L8.89062 9.58437L9.58437 8.89062L9.2375 7.3875L10.625 6.4625V5.5375L9.2375 4.6125L9.58437 3.10938L8.89062 2.41562L7.3875 2.7625L6.4625 1.375H5.5375L4.6125 2.7625Z"
-          stroke="currentColor"
-          strokeWidth="0.75"
-        />
-        <path
-          d="M7.375 6C7.375 6.75939 6.75939 7.375 6 7.375C5.24061 7.375 4.625 6.75939 4.625 6C4.625 5.24061 5.24061 4.625 6 4.625C6.75939 4.625 7.375 5.24061 7.375 6Z"
-          stroke="currentColor"
-          strokeWidth="0.75"
-        />
-      </svg>
-    </AccessibleIcon>
+export interface SettingIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SettingIcon = (props: SettingIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      {...svgProps}
+    >
+      <path
+        d="M4.6125 2.7625L3.10938 2.41562L2.41562 3.10938L2.7625 4.6125L1.375 5.5375V6.4625L2.7625 7.3875L2.41562 8.89062L3.10938 9.58437L4.6125 9.2375L5.5375 10.625H6.4625L7.3875 9.2375L8.89062 9.58437L9.58437 8.89062L9.2375 7.3875L10.625 6.4625V5.5375L9.2375 4.6125L9.58437 3.10938L8.89062 2.41562L7.3875 2.7625L6.4625 1.375H5.5375L4.6125 2.7625Z"
+        stroke="currentColor"
+        strokeWidth="0.75"
+      />
+      <path
+        d="M7.375 6C7.375 6.75939 6.75939 7.375 6 7.375C5.24061 7.375 4.625 6.75939 4.625 6C4.625 5.24061 5.24061 4.625 6 4.625C6.75939 4.625 7.375 5.24061 7.375 6Z"
+        stroke="currentColor"
+        strokeWidth="0.75"
+      />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Setting Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }

package/dist/icons/share-icon/ShareIcon.stories.tsx

@@ -196,16 +196,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">
@@ -851,6 +854,10 @@ function CustomShareIcon({ label = "Share", ...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",
@@ -885,6 +892,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const ShareIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Share icon">
+export interface ShareIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ShareIcon = (props: ShareIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -14,9 +18,15 @@ export const ShareIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="square"
-      {...props}
+      {...svgProps}
     >
       <path d="M2.75 7.75V19.25H19.25M16.75 4.25L20.25 7.75L16.75 11.25M7.75 13.75V12.75C7.75 9.98858 9.98858 7.75 12.75 7.75H19.5" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Share icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/shield-icon/ShieldIcon.stories.tsx

@@ -199,16 +199,19 @@ function SecurityBadge() {
                       </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">15</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">
@@ -779,6 +782,10 @@ function SecurityBadge() {
       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",
@@ -815,6 +822,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,21 +1,29 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const ShieldIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => {
-  return (
-    <AccessibleIcon label="Shield icon">
-      <svg
-        width="15"
-        height="16"
-        viewBox="0 0 15 16"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-        {...props}
-      >
-        <path d="M6.48281 0.0990777C6.79111 -0.0162721 7.12796 -0.0313102 7.44531 0.0561089L7.57969 0.0990777L13.0484 2.14986C13.3257 2.25384 13.5678 2.43447 13.7463 2.67072C13.9249 2.90697 14.0326 3.1891 14.057 3.48423L14.0625 3.61314V7.80298C14.0625 9.06894 13.7207 10.3114 13.0731 11.3992C12.4256 12.4871 11.4964 13.3799 10.3836 13.9835L10.1758 14.092L7.55547 15.4022C7.41119 15.4742 7.2536 15.5157 7.09255 15.5241C6.93151 15.5324 6.77047 15.5074 6.61953 15.4506L6.50703 15.4022L3.88672 14.092C2.75438 13.5259 1.79592 12.6645 1.1125 11.5988C0.429088 10.5331 0.0460784 9.30265 0.00390619 8.03736L0 7.80298V3.61314C4.54301e-06 3.31715 0.0840832 3.02724 0.242448 2.77718C0.400813 2.52712 0.626949 2.32718 0.894531 2.20064L1.01406 2.14986L6.48281 0.0990777ZM7.03125 1.56236L1.5625 3.61314V7.80298C1.56252 8.78346 1.82614 9.7459 2.32575 10.5895C2.82536 11.4332 3.54259 12.127 4.40234 12.5983L4.58594 12.6944L7.03125 13.917L9.47656 12.6944C10.3537 12.2559 11.0968 11.5896 11.628 10.7654C12.1593 9.94111 12.4591 8.98916 12.4961 8.00923L12.5 7.80298V3.61314L7.03125 1.56236ZM9.71328 5.12564C9.85387 4.98552 10.0425 4.90418 10.2409 4.89812C10.4393 4.89206 10.6326 4.96175 10.7815 5.09302C10.9303 5.2243 11.0237 5.40732 11.0425 5.60492C11.0613 5.80251 11.0042 5.99987 10.8828 6.15689L10.818 6.23033L6.72891 10.3202C6.57996 10.4691 6.3815 10.5581 6.17123 10.5704C5.96095 10.5826 5.75351 10.5172 5.58828 10.3866L5.51328 10.3202L3.63516 8.44205C3.49355 8.30178 3.41091 8.11269 3.40415 7.91349C3.3974 7.71429 3.46703 7.52004 3.5988 7.3705C3.73057 7.22096 3.91452 7.12744 4.11299 7.10907C4.31146 7.09071 4.50944 7.1489 4.66641 7.27173L4.73984 7.33658L6.12109 8.71783L9.71328 5.12564Z" />
-      </svg>
-    </AccessibleIcon>
+export interface ShieldIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ShieldIcon = (props: ShieldIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      width="15"
+      height="16"
+      viewBox="0 0 15 16"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...svgProps}
+    >
+      <path d="M6.48281 0.0990777C6.79111 -0.0162721 7.12796 -0.0313102 7.44531 0.0561089L7.57969 0.0990777L13.0484 2.14986C13.3257 2.25384 13.5678 2.43447 13.7463 2.67072C13.9249 2.90697 14.0326 3.1891 14.057 3.48423L14.0625 3.61314V7.80298C14.0625 9.06894 13.7207 10.3114 13.0731 11.3992C12.4256 12.4871 11.4964 13.3799 10.3836 13.9835L10.1758 14.092L7.55547 15.4022C7.41119 15.4742 7.2536 15.5157 7.09255 15.5241C6.93151 15.5324 6.77047 15.5074 6.61953 15.4506L6.50703 15.4022L3.88672 14.092C2.75438 13.5259 1.79592 12.6645 1.1125 11.5988C0.429088 10.5331 0.0460784 9.30265 0.00390619 8.03736L0 7.80298V3.61314C4.54301e-06 3.31715 0.0840832 3.02724 0.242448 2.77718C0.400813 2.52712 0.626949 2.32718 0.894531 2.20064L1.01406 2.14986L6.48281 0.0990777ZM7.03125 1.56236L1.5625 3.61314V7.80298C1.56252 8.78346 1.82614 9.7459 2.32575 10.5895C2.82536 11.4332 3.54259 12.127 4.40234 12.5983L4.58594 12.6944L7.03125 13.917L9.47656 12.6944C10.3537 12.2559 11.0968 11.5896 11.628 10.7654C12.1593 9.94111 12.4591 8.98916 12.4961 8.00923L12.5 7.80298V3.61314L7.03125 1.56236ZM9.71328 5.12564C9.85387 4.98552 10.0425 4.90418 10.2409 4.89812C10.4393 4.89206 10.6326 4.96175 10.7815 5.09302C10.9303 5.2243 11.0237 5.40732 11.0425 5.60492C11.0613 5.80251 11.0042 5.99987 10.8828 6.15689L10.818 6.23033L6.72891 10.3202C6.57996 10.4691 6.3815 10.5581 6.17123 10.5704C5.96095 10.5826 5.75351 10.5172 5.58828 10.3866L5.51328 10.3202L3.63516 8.44205C3.49355 8.30178 3.41091 8.11269 3.40415 7.91349C3.3974 7.71429 3.46703 7.52004 3.5988 7.3705C3.73057 7.22096 3.91452 7.12744 4.11299 7.10907C4.31146 7.09071 4.50944 7.1489 4.66641 7.27173L4.73984 7.33658L6.12109 8.71783L9.71328 5.12564Z" />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Shield icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }

package/dist/icons/site-logo-icon/SiteLogoIcon.stories.tsx

@@ -219,16 +219,19 @@ function Header() {
                       </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">28</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the logo in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -937,6 +940,10 @@ import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
       control: { type: "range", min: 16, max: 128, step: 4 },
       description: "Width of the logo 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 logo in pixels",
@@ -965,6 +972,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,15 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SiteLogoIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <AccessibleIcon label="Site Logo icon">
+export interface SiteLogoIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SiteLogoIcon = (props: SiteLogoIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="28"
       height="22"
       viewBox="0 0 128 128"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <g clipPath="url(#clip0_1398_2427)">
         <path
@@ -75,5 +81,11 @@ export const SiteLogoIcon = (props: React.SVGProps<SVGSVGElement>) => (
         </clipPath>
       </defs>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Site Logo icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/skip-backward-icon/SkipBackwardIcon.stories.tsx

@@ -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-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">37</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">
@@ -823,6 +826,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",
@@ -863,6 +870,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-orange-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

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

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