aural-ui 2.1.13 → 2.1.16

package/dist/icons/globe-icon/GlobeIcon.stories.tsx

@@ -0,0 +1,360 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { GlobeIcon } from "."
+
+const meta: Meta<typeof GlobeIcon> = {
+  title: "Icons/GlobeIcon",
+  component: GlobeIcon,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "darker", value: "#000000" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+    docs: {
+      page: () => (
+        <>
+          {/* Override default docs styling */}
+          <style>
+            {`
+              .sbdocs-wrapper {
+                padding: 0 ;
+                max-width: none ;
+                background: transparent ;
+              }
+              .sbdocs-content {
+                max-width: none ;
+                padding: 0 ;
+                margin: 0 ;
+                background: transparent ;
+              }
+              .docs-story {
+                background: transparent ;
+              }
+              .sbdocs {
+                background: transparent ;
+              }
+              body {
+                background: #0a0a0a ;
+              }
+              #storybook-docs {
+                background: #0a0a0a ;
+              }
+              .sbdocs-preview {
+                background: transparent ;
+                border: none ;
+              }
+              .sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 {
+                color: white ;
+              }
+              .sbdocs-p, .sbdocs-li {
+                color: rgba(255, 255, 255, 0.7) ;
+              }
+              .sbdocs-code {
+                background: rgba(255, 255, 255, 0.1) ;
+                color: rgba(168, 85, 247, 1) ;
+                border: 1px solid rgba(255, 255, 255, 0.1) ;
+              }
+              .sbdocs-pre {
+                background: rgba(0, 0, 0, 0.4) ;
+                border: 1px solid rgba(255, 255, 255, 0.1) ;
+              }
+              .sbdocs-table {
+                background: rgba(255, 255, 255, 0.05) ;
+                border: 1px solid rgba(255, 255, 255, 0.1) ;
+              }
+              .sbdocs-table th {
+                background: rgba(255, 255, 255, 0.05) ;
+                color: white ;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1) ;
+              }
+              .sbdocs-table td {
+                color: rgba(255, 255, 255, 0.7) ;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.05) ;
+              }
+            `}
+          </style>
+
+          <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900">
+            {/* Header */}
+            <div className="relative overflow-hidden border-b border-white/10 bg-black/20 backdrop-blur-xl">
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-violet-500/10" />
+              <div className="relative !mx-auto max-w-7xl px-6 py-16">
+                <div className="!space-y-6 text-center">
+                  <div className="!mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border border-purple-500/30 bg-gradient-to-br from-purple-500/20 to-violet-500/20">
+                    <GlobeIcon className="text-fm-secondary-800 h-12 w-12" />
+                  </div>
+                  <h1 className="text-5xl font-bold !text-white">GlobeIcon</h1>
+                  <p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
+                    A universal globe icon representing worldwide connectivity,
+                    international features, language selection, and global
+                    navigation. Perfect for localization interfaces, world maps,
+                    and international settings.
+                  </p>
+
+                  {/* Stats */}
+                  <div className="flex items-center justify-center gap-8 pt-8">
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-purple-300">
+                        Global
+                      </div>
+                      <div className="text-sm text-white/60">
+                        Worldwide access
+                      </div>
+                    </div>
+                    <div className="h-8 w-px bg-white/20" />
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-violet-300">
+                        Accessible
+                      </div>
+                      <div className="text-sm text-white/60">
+                        Screen reader friendly
+                      </div>
+                    </div>
+                    <div className="h-8 w-px bg-white/20" />
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-fuchsia-300">
+                        Universal
+                      </div>
+                      <div className="text-sm text-white/60">
+                        Standard globe icon
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Content */}
+            <div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
+              {/* Quick Usage */}
+              <div className="!space-y-8">
+                <h2 className="text-center text-3xl font-bold !text-white">
+                  Quick Start
+                </h2>
+                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+                  <div className="!space-y-4">
+                    <h3 className="text-xl font-semibold !text-purple-300">
+                      Basic Usage
+                    </h3>
+                    <div className="rounded-lg bg-black/40 p-4">
+                      <pre className="overflow-x-auto text-sm !text-green-300">
+                        {`import { GlobeIcon } from "@icons/globe-icon"
+
+function LanguageSelector() {
+  return (
+    <button 
+      onClick={openLanguageMenu}
+      className="p-2 hover:bg-white/10 rounded-lg"
+    >
+      <GlobeIcon className="h-6 w-6" />
+    </button>
+  )
+}`}
+                      </pre>
+                    </div>
+                  </div>
+
+                  <div className="!space-y-4">
+                    <h3 className="text-xl font-semibold !text-purple-300">
+                      Live Preview
+                    </h3>
+                    <div className="flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+                      <button className="rounded-lg border border-purple-500/20 bg-purple-500/10 p-3 transition-colors hover:bg-purple-500/20">
+                        <GlobeIcon className="h-6 w-6" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Props Documentation */}
+              <div className="!space-y-8">
+                <h2 className="text-center text-3xl font-bold !text-white">
+                  Props & Configuration
+                </h2>
+
+                <div className="overflow-hidden rounded-lg border border-white/10 bg-white/5">
+                  <div className="bg-white/5 p-4">
+                    <h3 className="text-xl font-semibold !text-white">Props</h3>
+                  </div>
+                  <table className="!my-0 w-full">
+                    <thead className="bg-white/5">
+                      <tr className="border-b border-white/10">
+                        <th className="px-6 py-4 text-left text-sm font-semibold !text-white">
+                          Prop
+                        </th>
+                        <th className="px-6 py-4 text-left text-sm font-semibold !text-white">
+                          Type
+                        </th>
+                        <th className="px-6 py-4 text-left text-sm font-semibold !text-white">
+                          Default
+                        </th>
+                        <th className="px-6 py-4 text-left text-sm font-semibold !text-white">
+                          Description
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <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">
+                          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/70">
+                          Whether to wrap the icon with accessibility feature
+                        </td>
+                      </tr>
+                      <tr className="border-b border-white/5 !bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
+                          width
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          number | string
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">17</td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          Width of the icon in pixels
+                        </td>
+                      </tr>
+                      <tr className="border-b border-white/5">
+                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
+                          height
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          number | string
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">17</td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          Height of the icon in pixels
+                        </td>
+                      </tr>
+                      <tr className="border-b border-white/5 !bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
+                          className
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          string
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">-</td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          CSS classes for styling (use for overrides)
+                        </td>
+                      </tr>
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
+                          ...svgProps
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          SVGProps
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">-</td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          All standard SVG element props
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ),
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof GlobeIcon>
+
+const storyParameters = {
+  backgrounds: { default: "dark" },
+}
+
+export const Default: Story = {
+  parameters: storyParameters,
+  render: () => (
+    <div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
+      <div className="rounded-lg border border-white/10 bg-white/5 p-8">
+        <GlobeIcon className="h-12 w-12 text-white" />
+      </div>
+    </div>
+  ),
+}
+
+export const WithAccessibility: Story = {
+  parameters: storyParameters,
+  render: () => (
+    <div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
+      <div className="rounded-lg border border-white/10 bg-white/5 p-8">
+        <GlobeIcon className="h-12 w-12 text-white" withAccessibility />
+      </div>
+    </div>
+  ),
+}
+
+export const SizeVariations: Story = {
+  parameters: storyParameters,
+  render: () => (
+    <div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
+      <div className="flex items-center gap-8 rounded-lg border border-white/10 bg-white/5 p-8">
+        <GlobeIcon className="h-4 w-4 text-white" />
+        <GlobeIcon className="h-6 w-6 text-white" />
+        <GlobeIcon className="h-8 w-8 text-white" />
+        <GlobeIcon className="h-12 w-12 text-white" />
+        <GlobeIcon className="h-16 w-16 text-white" />
+      </div>
+    </div>
+  ),
+}
+
+export const ColorVariations: Story = {
+  parameters: storyParameters,
+  render: () => (
+    <div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
+      <div className="flex items-center gap-8 rounded-lg border border-white/10 bg-white/5 p-8">
+        <GlobeIcon className="h-8 w-8 text-white" />
+        <GlobeIcon className="h-8 w-8 text-purple-400" />
+        <GlobeIcon className="h-8 w-8 text-blue-400" />
+        <GlobeIcon className="h-8 w-8 text-green-400" />
+        <GlobeIcon className="h-8 w-8 text-yellow-400" />
+      </div>
+    </div>
+  ),
+}
+
+export const Playground: Story = {
+  parameters: {
+    ...storyParameters,
+    docs: {
+      description: {
+        story:
+          "Interactive playground to experiment with different GlobeIcon configurations.",
+      },
+    },
+  },
+  args: {
+    width: 17,
+    height: 17,
+    className: "text-purple-400",
+  },
+  render: (args) => (
+    <div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
+      <div className="rounded-lg border border-white/10 bg-white/5 p-8">
+        <GlobeIcon {...args} />
+      </div>
+    </div>
+  ),
+}

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

@@ -0,0 +1,32 @@
+import React from "react"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+
+export interface GlobeIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const GlobeIcon = (props: GlobeIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      width="17"
+      height="17"
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...svgProps}
+    >
+      <path
+        d="M8.125 0C6.51803 0 4.94714 0.476523 3.611 1.36931C2.27485 2.2621 1.23344 3.53105 0.618482 5.0157C0.00352044 6.50035 -0.157382 8.13401 0.156123 9.71011C0.469628 11.2862 1.24346 12.7339 2.37976 13.8702C3.51606 15.0065 4.9638 15.7804 6.53989 16.0939C8.11599 16.4074 9.74966 16.2465 11.2343 15.6315C12.719 15.0166 13.9879 13.9752 14.8807 12.639C15.7735 11.3029 16.25 9.73197 16.25 8.125C16.2475 5.97088 15.3907 3.90569 13.8675 2.3825C12.3443 0.859302 10.2791 0.00248123 8.125 0ZM14.9703 7.5H11.8586C11.7188 4.64766 10.6203 2.63047 9.71954 1.4375C11.1182 1.77337 12.3766 2.53857 13.3184 3.62579C14.2602 4.71302 14.8381 6.06774 14.9711 7.5H14.9703ZM5.64297 8.75H10.607C10.4266 12.0008 8.87032 13.993 8.125 14.7656C7.37891 13.9922 5.82344 12 5.64297 8.75ZM5.64297 7.5C5.82344 4.24922 7.37969 2.25703 8.125 1.48438C8.8711 2.26016 10.4266 4.25234 10.607 7.5H5.64297ZM6.53047 1.4375C5.62969 2.63047 4.53125 4.64766 4.39141 7.5H1.27891C1.41187 6.06774 1.98977 4.71302 2.93157 3.62579C3.87336 2.53857 5.13182 1.77337 6.53047 1.4375ZM1.27891 8.75H4.39141C4.5336 11.6023 5.62969 13.6195 6.53047 14.8125C5.13182 14.4766 3.87336 13.7114 2.93157 12.6242C1.98977 11.537 1.41187 10.1823 1.27891 8.75ZM9.71641 14.8125C10.6172 13.6195 11.7133 11.6023 11.8555 8.75H14.968C14.8352 10.1818 14.2578 11.5363 13.3166 12.6234C12.3754 13.7106 11.1176 14.4761 9.71954 14.8125H9.71641Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Globe icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/globe-icon/meta.ts

@@ -0,0 +1,8 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-accessible-icon": "^1.1.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [],
+}

package/dist/icons/google-logo-icon/GoogleLogoIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { GoogleLogoIcon } from "."
 
@@ -202,16 +202,19 @@ function LoginPage() {
                       </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">21</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">
@@ -768,6 +771,10 @@ function CustomGoogleIcon({ label = "Google", ...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",
@@ -798,6 +805,7 @@ export const Default: Story = {
     width: 21,
     height: 20,
     className: "",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const GoogleLogoIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Google logo">
+export interface GoogleLogoIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const GoogleLogoIcon = (props: GoogleLogoIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="21"
       height="20"
       viewBox="0 0 21 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M11.184 1.668c.065.028.135.019.203.024a8.143 8.143 0 0 1 3.21.927c.627.33 1.201.737 1.723 1.22.036.033.046.05.005.09-.783.78-1.565 1.56-2.345 2.344-.034.033-.052.036-.088.003a4.512 4.512 0 0 0-2.305-1.16c-.955-.171-1.889-.086-2.785.294-1.403.597-2.355 1.63-2.886 3.055l-.035.09c-.188-.147-.375-.295-.564-.44-.753-.585-1.507-1.167-2.26-1.751.003-.009.006-.018.01-.025A8.386 8.386 0 0 1 5.265 3.6a8.452 8.452 0 0 1 4.768-1.91c.063-.005.128.006.188-.023l.963.001z"
@@ -30,5 +34,11 @@ export const GoogleLogoIcon = (
         fill="#FABB04"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Google logo">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/grip-vertical-icon/GripVerticalIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { GripVerticalIcon } from "."
 
@@ -211,16 +211,19 @@ function SortableItem() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-gray-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">
@@ -960,6 +963,10 @@ function SortableItem() {
       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",
@@ -1000,6 +1007,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-gray-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/grip-vertical-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const GripVerticalIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Grip Vertical icon">
+export interface GripVerticalIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const GripVerticalIcon = (props: GripVerticalIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -15,7 +19,7 @@ export const GripVerticalIcon = (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      {...props}
+      {...svgProps}
     >
       <circle cx="9" cy="12" r="1" />
       <circle cx="9" cy="5" r="1" />
@@ -24,5 +28,11 @@ export const GripVerticalIcon = (
       <circle cx="15" cy="5" r="1" />
       <circle cx="15" cy="19" r="1" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Grip Vertical icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/head-icon/HeadIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { HeadIcon } from "."
 
@@ -202,16 +202,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">16</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">
@@ -758,6 +761,10 @@ function CustomHeadIcon({ label = "User profile", ...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",
@@ -796,6 +803,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (