aural-ui 2.1.13 → 2.1.14

package/dist/icons/minimize-icon/MinimizeIcon.stories.tsx

@@ -205,16 +205,19 @@ function VideoPlayer() {
                       </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">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">
@@ -995,6 +998,10 @@ function VideoPlayer() {
       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",
@@ -1040,6 +1047,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/minimize-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const MinimizeIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Minimize icon">
+export interface MinimizeIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const MinimizeIcon = (props: MinimizeIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -14,9 +18,15 @@ export const MinimizeIcon = (
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="square"
-      {...props}
+      {...svgProps}
     >
       <path d="M13.75 3.75V10.25H20.25M20.25 3.75L14.5 9.5M10.25 20.25V13.75H3.75M3.75 20.25L9.5 14.5" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Minimize icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/moon-icon/MoonIcon.stories.tsx

@@ -144,16 +144,19 @@ const meta: Meta<typeof MoonIcon> = {
                       </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>
@@ -419,6 +422,10 @@ function ChatButton() {
       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",
@@ -448,6 +455,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,21 +1,29 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const MoonIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => {
-  return (
-    <AccessibleIcon label="Moon icon">
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-        {...props}
-      >
-        <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79Z" />
-      </svg>
-    </AccessibleIcon>
+export interface MoonIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const MoonIcon = (props: MoonIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...svgProps}
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79Z" />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Moon icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }

package/dist/icons/move-horizontal-icon/MoveHorizontalIcon.stories.tsx

@@ -228,16 +228,19 @@ function ResizeHandle() {
                       </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">
@@ -959,6 +962,10 @@ function ResizeHandle() {
       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",
@@ -995,6 +1002,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-indigo-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/move-horizontal-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const MoveHorizontalIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Move Horizontal icon">
+export interface MoveHorizontalIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const MoveHorizontalIcon = (props: MoveHorizontalIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -15,9 +19,15 @@ export const MoveHorizontalIcon = (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      {...props}
+      {...svgProps}
     >
       <path d="m18 8 4 4-4 4M2 12h20M6 8l-4 4 4 4" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Move Horizontal icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/move-vertical-icon/MoveVerticalIcon.stories.tsx

@@ -227,16 +227,19 @@ function SortableItem({ children }) {
                       </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">
@@ -911,6 +914,10 @@ function SortableItem({ children }) {
       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",
@@ -947,6 +954,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/move-vertical-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const MoveVerticalIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Move Vertical icon">
+export interface MoveVerticalIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const MoveVerticalIcon = (props: MoveVerticalIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -15,9 +19,15 @@ export const MoveVerticalIcon = (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      {...props}
+      {...svgProps}
     >
       <path d="M12 2v20m-4-4 4 4 4-4M8 6l4-4 4 4" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Move Vertical icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/musical-note-icon/MusicalNoteIcon.stories.tsx

@@ -202,16 +202,19 @@ function MyComponent() {
                       </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">13</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">
@@ -792,6 +795,10 @@ function CustomMusicalNoteIcon({ label = "Musical Note", ...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",
@@ -830,6 +837,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-purple-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/musical-note-icon/index.tsx

@@ -1,25 +1,33 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const MusicalNoteIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => {
-  return (
-    <AccessibleIcon label="Musical Note Icon">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="13"
-        height="12"
-        viewBox="0 0 13 12"
-        fill="none"
-        {...props}
-      >
-        <path
-          d="M5.375 9.375C5.375 10.0654 4.70343 10.625 3.875 10.625C3.04657 10.625 2.375 10.0654 2.375 9.375C2.375 8.68464 3.04657 8.125 3.875 8.125C4.70343 8.125 5.375 8.68464 5.375 9.375ZM5.375 9.375V2.875L10.6261 1.375V7.875M10.6261 7.875C10.6261 8.56536 9.95453 9.125 9.1261 9.125C8.29767 9.125 7.6261 8.56536 7.6261 7.875C7.6261 7.18464 8.29767 6.625 9.1261 6.625C9.95453 6.625 10.6261 7.18464 10.6261 7.875Z"
-          stroke="currentColor"
-          strokeWidth="1.125"
-        />
-      </svg>
-    </AccessibleIcon>
+export interface MusicalNoteIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const MusicalNoteIcon = (props: MusicalNoteIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="13"
+      height="12"
+      viewBox="0 0 13 12"
+      fill="none"
+      {...svgProps}
+    >
+      <path
+        d="M5.375 9.375C5.375 10.0654 4.70343 10.625 3.875 10.625C3.04657 10.625 2.375 10.0654 2.375 9.375C2.375 8.68464 3.04657 8.125 3.875 8.125C4.70343 8.125 5.375 8.68464 5.375 9.375ZM5.375 9.375V2.875L10.6261 1.375V7.875M10.6261 7.875C10.6261 8.56536 9.95453 9.125 9.1261 9.125C8.29767 9.125 7.6261 8.56536 7.6261 7.875C7.6261 7.18464 8.29767 6.625 9.1261 6.625C9.95453 6.625 10.6261 7.18464 10.6261 7.875Z"
+        stroke="currentColor"
+        strokeWidth="1.125"
+      />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Musical Note Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }

package/dist/icons/notepad-icon/NotepadIcon.stories.tsx

@@ -221,16 +221,19 @@ function NoteInput() {
                       </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">
@@ -892,6 +895,10 @@ function NoteInput() {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -931,6 +938,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-indigo-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,21 +1,31 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const NotepadIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Notepad icon">
+export interface NotepadIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const NotepadIcon = (props: NotepadIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       stroke="currentColor"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M8.75 9.75H15.25M8.75 13.75H13.25M12 4.25V2.25M16.25 4.25V2.25M7.75 4.25V2.25M4.25 3.27778H19.75V20.75H4.25V3.27778Z"
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Notepad icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/notes-icon/NotesIcon.stories.tsx

@@ -221,16 +221,19 @@ function NoteInput() {
                       </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">
@@ -892,6 +895,10 @@ function NoteInput() {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -931,6 +938,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-indigo-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const NotesIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Notes Icon">
+export interface NotesIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const NotesIcon = (props: NotesIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       stroke="currentColor"
       strokeLinecap="square"
-      {...props}
+      {...svgProps}
     >
       <path d="M3.25 12H5.25" />
       <path d="M9.75 12H12.25" />
@@ -20,5 +24,11 @@ export const NotesIcon = (
       <path d="M3.25 15.75H5.25" />
       <path d="M4.25 3.25H19.75V20.75H4.25V3.25Z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Notes Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}