aural-ui 2.1.13 → 2.1.14

package/dist/icons/feature-shine-icon/index.tsx

@@ -1,15 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const FeatureShineIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <AccessibleIcon label="Shine icon">
+export interface FeatureShineIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const FeatureShineIcon = (props: FeatureShineIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="20"
       height="20"
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <g clipPath="url(#clip0_304_1142)">
         <path
@@ -25,5 +31,11 @@ export const FeatureShineIcon = (props: React.SVGProps<SVGSVGElement>) => (
         </clipPath>
       </defs>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Shine icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/file-chart-icon/FileChartIcon.stories.tsx

@@ -215,16 +215,19 @@ function ReportsSection() {
                       </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">
@@ -874,6 +877,10 @@ function ReportsSection() {
       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",
@@ -910,6 +917,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-blue-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/file-chart-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const FileChartIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="File Chart icon">
+export interface FileChartIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const FileChartIcon = (props: FileChartIconProps) => {
+  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="M8.5 17.25V15.75M12 17.25V12.75M15.5 17.25V14.75M12.75 3.25068V9.25H18.7475M4.75 2.75H12.75L19.25 9.25V21.25H4.75V2.75Z"
@@ -20,5 +24,11 @@ export const FileChartIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="File Chart icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/file-text-icon/FileTextIcon.stories.tsx

@@ -199,16 +199,19 @@ const meta: Meta<typeof FileTextIcon> = {
                       </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">
-                          className
+                          withAccessibility
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/80">
-                          string
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          boolean
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/60">-</td>
-                        <td className="px-6 py-4 text-sm !text-white/80">
-                          Additional CSS classes
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                     </tbody>
@@ -493,6 +496,10 @@ function DocumentButton() {
       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",
@@ -523,6 +530,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const FileTextIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="File Text Icon">
+export interface FileTextIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const FileTextIcon = (props: FileTextIconProps) => {
+  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="M6.5625 7.31055H11.4375M6.5625 10.3105H9.9375M9 3.18555V1.68555M12.1875 3.18555V1.68555M5.8125 3.18555V1.68555M3.1875 2.45638H14.8125V15.5605H3.1875V2.45638Z"
@@ -20,5 +24,11 @@ export const FileTextIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="File Text Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/filter-bar-row-icon/FilterBarRowIcon.stories.tsx

@@ -220,16 +220,19 @@ function FilterButton() {
                       </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">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">
@@ -842,6 +845,10 @@ function FilterButton() {
       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",
@@ -881,6 +888,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-indigo-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/filter-bar-row-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const FilterBarRowIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Filter Row Bar Icon">
+export interface FilterBarRowIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const FilterBarRowIcon = (props: FilterBarRowIconProps) => {
+  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"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M1.83301 3.16467H14.1663M5.83301 12.8313H10.1663M3.83301 7.99801H12.1663"
@@ -20,5 +24,11 @@ export const FilterBarRowIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Filter Row Bar Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/forward-ten-seconds-icon/ForwardTenSecondsIcon.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-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">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">
@@ -837,6 +840,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",
@@ -877,6 +884,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/forward-ten-seconds-icon/index.tsx

@@ -1,10 +1,15 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const ForwardTenSecondsIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Forward ten seconds icon">
+export interface ForwardTenSecondsIconProps
+  extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ForwardTenSecondsIcon = (props: ForwardTenSecondsIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="44"
@@ -14,7 +19,7 @@ export const ForwardTenSecondsIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M18.5418 28.75V15.5532H16.0186C14.9938 16.1623 13.8433 16.8777 12.8281 17.5932V19.9811C13.7659 19.3335 15.0518 18.531 15.8639 18.0282H15.9509V28.75H18.5418Z"
@@ -29,5 +34,13 @@ export const ForwardTenSecondsIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return (
+      <AccessibleIcon label="Forward ten seconds icon">{svg}</AccessibleIcon>
+    )
+  }
+
+  return svg
+}

package/dist/icons/git-branch-icon/GitBranchIcon.stories.tsx

@@ -218,16 +218,19 @@ function BranchButton() {
                       </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">
@@ -934,6 +937,10 @@ function BranchButton() {
       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",
@@ -977,6 +984,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-indigo-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/git-branch-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const GitBranchIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Git branch icon">
+export interface GitBranchIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const GitBranchIcon = (props: GitBranchIconProps) => {
+  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="M7.5 12H16.5V8.75M7.5 12V8.5M7.5 12V15.5M16.5 8.25C18.0188 8.25 19.25 7.01878 19.25 5.5C19.25 3.98122 18.0188 2.75 16.5 2.75C14.9812 2.75 13.75 3.98122 13.75 5.5C13.75 7.01878 14.9812 8.25 16.5 8.25ZM7.5 15.75C5.98122 15.75 4.75 16.9812 4.75 18.5C4.75 20.0188 5.98122 21.25 7.5 21.25C9.01878 21.25 10.25 20.0188 10.25 18.5C10.25 16.9812 9.01878 15.75 7.5 15.75ZM7.5 8.25C9.01878 8.25 10.25 7.01878 10.25 5.5C10.25 3.98122 9.01878 2.75 7.5 2.75C5.98122 2.75 4.75 3.98122 4.75 5.5C4.75 7.01878 5.98122 8.25 7.5 8.25Z"
@@ -20,5 +24,11 @@ export const GitBranchIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Git branch icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/git-fork-icon/GitForkIcon.stories.tsx

@@ -223,16 +223,19 @@ function ForkButton() {
                       </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">
@@ -906,6 +909,10 @@ function ForkButton() {
       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",
@@ -940,6 +947,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-indigo-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/git-fork-icon/index.tsx

@@ -1,22 +1,32 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const GitForkIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Git fork icon">
+export interface GitForkIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const GitForkIcon = (props: GitForkIconProps) => {
+  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="M6.5 12H5.75V12.75H6.5V12ZM17.5 12V12.75C17.9142 12.75 18.25 12.4142 18.25 12H17.5ZM11.25 12V16H12.75V12H11.25ZM12 11.25H6.5V12.75H12V11.25ZM7.25 12V8H5.75V12H7.25ZM12 12.75H17.5V11.25H12V12.75ZM18.25 12V8H16.75V12H18.25ZM8.5 5.5C8.5 6.60457 7.60457 7.5 6.5 7.5V9C8.433 9 10 7.433 10 5.5H8.5ZM6.5 7.5C5.39543 7.5 4.5 6.60457 4.5 5.5H3C3 7.433 4.567 9 6.5 9V7.5ZM4.5 5.5C4.5 4.39543 5.39543 3.5 6.5 3.5V2C4.567 2 3 3.567 3 5.5H4.5ZM6.5 3.5C7.60457 3.5 8.5 4.39543 8.5 5.5H10C10 3.567 8.433 2 6.5 2V3.5ZM19.5 5.5C19.5 6.60457 18.6046 7.5 17.5 7.5V9C19.433 9 21 7.433 21 5.5H19.5ZM17.5 7.5C16.3954 7.5 15.5 6.60457 15.5 5.5H14C14 7.433 15.567 9 17.5 9V7.5ZM15.5 5.5C15.5 4.39543 16.3954 3.5 17.5 3.5V2C15.567 2 14 3.567 14 5.5H15.5ZM17.5 3.5C18.6046 3.5 19.5 4.39543 19.5 5.5H21C21 3.567 19.433 2 17.5 2V3.5ZM14 18.5C14 19.6046 13.1046 20.5 12 20.5V22C13.933 22 15.5 20.433 15.5 18.5H14ZM12 20.5C10.8954 20.5 10 19.6046 10 18.5H8.5C8.5 20.433 10.067 22 12 22V20.5ZM10 18.5C10 17.3954 10.8954 16.5 12 16.5V15C10.067 15 8.5 16.567 8.5 18.5H10ZM12 16.5C13.1046 16.5 14 17.3954 14 18.5H15.5C15.5 16.567 13.933 15 12 15V16.5Z"
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Git fork icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}