aural-ui 2.1.21 → 2.1.22

package/dist/components/drawer/index.tsx

@@ -126,7 +126,7 @@ const DrawerContent = React.forwardRef<
             "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
             "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
             "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-lg data-[vaul-drawer-direction=right]:sm:max-w-sm",
-            "overflow-auto [scrollbar-width:none] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-lg data-[vaul-drawer-direction=left]:sm:max-w-sm",
+            "overflow-hidden data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-lg data-[vaul-drawer-direction=left]:sm:max-w-sm",
             className,
             classes?.content
           )}
@@ -135,7 +135,9 @@ const DrawerContent = React.forwardRef<
           {showSwipeButton && (
             <div className="bg-fm-surface-primary mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
           )}
-          {children}
+          <div className="scrollbar-hide flex min-h-0 flex-1 flex-col overflow-auto">
+            {children}
+          </div>
         </DrawerPrimitive.Content>
       </DrawerPortal>
     )

package/dist/components/textarea/index.tsx

@@ -5,6 +5,7 @@ import React, {
   RefAttributes,
   useCallback,
   useEffect,
+  useId,
   useRef,
   useState,
 } from "react"
@@ -30,7 +31,7 @@ interface TextAreaBaseProps {
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
   onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
   onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
-  onInput?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
+  onInput?: (e: React.InputEvent<HTMLTextAreaElement>) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
   id?: string
   name?: string
@@ -361,8 +362,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     const [textareaValue, setTextareaValue] = useState(value || "")
 
     // Generate unique IDs for accessibility
-    const textareaId =
-      id || `textarea-${Math.random().toString(36).substr(2, 9)}`
+    const reactId = useId()
+    const textareaId = id || `textarea-${reactId}`
     const helperTextId = helperText ? `${textareaId}-helper` : undefined
     const charCountId = showCharCount ? `${textareaId}-char-count` : undefined
 
@@ -410,7 +411,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
               currentLength={currentLength}
               maxLength={maxLength}
               id={charCountId}
-              className={cn("ml-auto", classes?.charCount)}
+              className="ml-auto"
             />
           )}
         </div>

package/dist/icons/circular-play-icon/CircularPlayIcon.stories.tsx

@@ -0,0 +1,525 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { CircularPlayIcon } from "."
+
+const meta: Meta<typeof CircularPlayIcon> = {
+  title: "Icons/CircularPlayIcon",
+  component: CircularPlayIcon,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "darker", value: "#000000" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+    docs: {
+      page: () => (
+        <>
+          <style>
+            {`
+              .sbdocs-wrapper { padding: 0 !important; max-width: none !important; background: transparent !important; }
+              .sbdocs-content { max-width: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
+              .docs-story, .sbdocs { background: transparent !important; }
+              body, #storybook-docs { background: #0a0a0a !important; }
+              .sbdocs-preview { background: transparent !important; border: none !important; }
+              .sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 { color: white !important; }
+              .sbdocs-p, .sbdocs-li { color: rgba(255, 255, 255, 0.7) !important; }
+              .sbdocs-code { background: rgba(255, 255, 255, 0.1) !important; color: rgba(168, 85, 247, 1) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
+              .sbdocs-pre { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
+              .sbdocs-table { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
+              .sbdocs-table th { background: rgba(255, 255, 255, 0.05) !important; color: white !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
+              .sbdocs-table td { color: rgba(255, 255, 255, 0.7) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; }
+            `}
+          </style>
+
+          <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900">
+            <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-pink-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-pink-500/20">
+                    <CircularPlayIcon className="h-12 w-12 text-white" />
+                  </div>
+                  <h1 className="!text-fm-primary text-5xl font-bold">
+                    CircularPlayIcon
+                  </h1>
+                  <p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
+                    A circular play icon with a filled play triangle inside a
+                    ring. Ideal for media players, audio controls, and video
+                    play overlays. Built with accessibility in mind using Radix
+                    UI's AccessibleIcon wrapper.
+                  </p>
+                  <div className="flex items-center justify-center gap-8 pt-8">
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-purple-300">
+                        Play
+                      </div>
+                      <div className="text-sm text-white/60">Media & audio</div>
+                    </div>
+                    <div className="h-8 w-px bg-white/20" />
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-pink-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-indigo-300">
+                        Flexible
+                      </div>
+                      <div className="text-sm text-white/60">
+                        Customizable sizing
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
+              <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 { CircularPlayIcon } from "@icons/circular-play-icon"
+
+function MediaPlayer() {
+  return (
+    <button className="flex items-center justify-center rounded-full bg-purple-500/20 p-4">
+      <CircularPlayIcon className="h-10 w-10 text-white" />
+    </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="flex h-14 w-14 items-center justify-center rounded-full border border-purple-500/30 bg-purple-500/20 transition-colors hover:bg-purple-500/30">
+                        <CircularPlayIcon className="h-8 w-8 text-white" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <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">48</td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          Width of the icon
+                        </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">
+                          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">48</td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          Height of the icon
+                        </td>
+                      </tr>
+                      <tr className="border-b border-white/5">
+                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
+                          fill
+                        </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">
+                          white (in SVG)
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/70">
+                          Fill color; override with className (e.g. text-white)
+                        </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
+                        </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 className="!space-y-8">
+                <h2 className="text-center text-3xl font-bold !text-white">
+                  Size Variations
+                </h2>
+                <div className="rounded-lg border border-white/10 bg-white/5 p-8">
+                  <div className="flex items-end justify-center gap-6 rounded-lg bg-black/20 p-6">
+                    <div className="text-center">
+                      <CircularPlayIcon className="!mx-auto mb-2 h-6 w-6 text-white" />
+                      <span className="text-xs text-white/60">24px</span>
+                    </div>
+                    <div className="text-center">
+                      <CircularPlayIcon className="!mx-auto mb-2 h-8 w-8 text-white" />
+                      <span className="text-xs text-white/60">32px</span>
+                    </div>
+                    <div className="text-center">
+                      <CircularPlayIcon className="!mx-auto mb-2 h-10 w-10 text-white" />
+                      <span className="text-xs text-white/60">40px</span>
+                    </div>
+                    <div className="text-center">
+                      <CircularPlayIcon className="!mx-auto mb-2 h-12 w-12 text-white" />
+                      <span className="text-xs text-white/60">48px</span>
+                    </div>
+                    <div className="text-center">
+                      <CircularPlayIcon className="!mx-auto mb-2 h-16 w-16 text-white" />
+                      <span className="text-xs text-white/60">64px</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="!space-y-8">
+                <h2 className="text-center text-3xl font-bold !text-white">
+                  Usage Examples
+                </h2>
+                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+                  <div className="!space-y-4">
+                    <h3 className="text-lg font-semibold !text-purple-300">
+                      Media player play button
+                    </h3>
+                    <div className="flex items-center gap-4 rounded-lg border border-white/10 bg-white/5 p-4">
+                      <button className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-purple-500/20 transition-colors hover:bg-purple-500/30">
+                        <CircularPlayIcon className="h-7 w-7 text-white" />
+                      </button>
+                      <div className="min-w-0 flex-1">
+                        <div className="text-sm font-medium text-white">
+                          Episode title
+                        </div>
+                        <div className="text-xs text-white/60">
+                          0:00 / 24:30
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="!space-y-4">
+                    <h3 className="text-lg font-semibold !text-purple-300">
+                      Video play overlay
+                    </h3>
+                    <div className="relative flex h-32 items-center justify-center overflow-hidden rounded-lg border border-white/10 bg-black/40">
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+                      <button className="relative flex h-16 w-16 items-center justify-center rounded-full border border-white/30 bg-white/10 backdrop-blur-sm transition-colors hover:bg-white/20">
+                        <CircularPlayIcon className="h-10 w-10 text-white" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="!space-y-8">
+                <h2 className="text-center text-3xl font-bold !text-white">
+                  Accessibility
+                </h2>
+                <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+                  <ul className="!space-y-2 text-sm !text-white/70">
+                    <li>
+                      Uses Radix UI AccessibleIcon with label &quot;Circular
+                      play icon&quot;
+                    </li>
+                    <li>
+                      When used in a button, add aria-label e.g.
+                      &quot;Play&quot; or &quot;Play episode&quot;
+                    </li>
+                    <li>
+                      Ensure sufficient touch target size (e.g. min 44px) for
+                      the control
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
+              <div className="!mx-auto max-w-7xl px-6 py-8">
+                <div className="!space-y-4 text-center">
+                  <p className="!text-white/60">
+                    CircularPlayIcon is part of the Aural UI icon library for
+                    media and playback UIs.
+                  </p>
+                  <p className="text-sm !text-white/40">
+                    Uses Radix UI AccessibleIcon for screen reader
+                    compatibility.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ),
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    width: {
+      control: { type: "range", min: 8, max: 96, step: 2 },
+      description: "Width of the icon in pixels",
+    },
+    height: {
+      control: { type: "range", min: 8, max: 96, step: 2 },
+      description: "Height of the icon in pixels",
+    },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
+    fill: {
+      control: "color",
+      description: "Fill color of the icon",
+    },
+    className: {
+      control: "text",
+      description: "CSS classes for styling",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof CircularPlayIcon>
+
+const storyParameters = {
+  backgrounds: {
+    default: "dark",
+    values: [
+      { name: "dark", value: "#0a0a0a" },
+      { name: "darker", value: "#000000" },
+    ],
+  },
+}
+
+export const Default: Story = {
+  args: {
+    width: 48,
+    height: 48,
+    className: "text-white",
+    withAccessibility: true,
+  },
+  parameters: storyParameters,
+  render: (args) => (
+    <div className="flex h-32 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
+      <CircularPlayIcon {...args} />
+    </div>
+  ),
+}
+
+export const SizeVariations: Story = {
+  parameters: {
+    ...storyParameters,
+    docs: {
+      description: {
+        story:
+          "CircularPlayIcon in different sizes for media controls and overlays.",
+      },
+    },
+  },
+  render: () => (
+    <div className="flex h-64 min-h-dvh items-center justify-center gap-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
+      <div className="text-center">
+        <CircularPlayIcon className="!mx-auto mb-2 h-6 w-6 text-white" />
+        <span className="text-xs text-white/60">24px</span>
+      </div>
+      <div className="text-center">
+        <CircularPlayIcon className="!mx-auto mb-2 h-8 w-8 text-white" />
+        <span className="text-xs text-white/60">32px</span>
+      </div>
+      <div className="text-center">
+        <CircularPlayIcon className="!mx-auto mb-2 h-10 w-10 text-white" />
+        <span className="text-xs text-white/60">40px</span>
+      </div>
+      <div className="text-center">
+        <CircularPlayIcon className="!mx-auto mb-2 h-12 w-12 text-white" />
+        <span className="text-xs text-white/60">48px</span>
+      </div>
+      <div className="text-center">
+        <CircularPlayIcon className="!mx-auto mb-2 h-16 w-16 text-white" />
+        <span className="text-xs text-white/60">64px</span>
+      </div>
+    </div>
+  ),
+}
+
+export const ColorVariations: Story = {
+  parameters: {
+    ...storyParameters,
+    docs: {
+      description: {
+        story:
+          "CircularPlayIcon with different colors for branding and states.",
+      },
+    },
+  },
+  render: () => (
+    <div className="grid min-h-dvh grid-cols-2 items-center justify-center gap-6 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:grid-cols-4">
+      <div className="text-center">
+        <div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-purple-500/30 bg-purple-500/20">
+          <CircularPlayIcon className="h-8 w-8 text-white" />
+        </div>
+        <div className="text-sm font-medium text-white">Primary</div>
+      </div>
+      <div className="text-center">
+        <div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-pink-500/30 bg-pink-500/20">
+          <CircularPlayIcon className="h-8 w-8 text-white" />
+        </div>
+        <div className="text-sm font-medium text-white">Accent</div>
+      </div>
+      <div className="text-center">
+        <div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-gray-500/30 bg-gray-500/20">
+          <CircularPlayIcon className="h-8 w-8 text-gray-200" />
+        </div>
+        <div className="text-sm font-medium text-white">Neutral</div>
+      </div>
+      <div className="text-center">
+        <div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-white/20 bg-white/10">
+          <CircularPlayIcon className="h-8 w-8 text-white/90" />
+        </div>
+        <div className="text-sm font-medium text-white">Overlay</div>
+      </div>
+    </div>
+  ),
+}
+
+export const UsageExamples: Story = {
+  parameters: {
+    ...storyParameters,
+    docs: {
+      description: {
+        story: "Real-world usage: media player and video play overlay.",
+      },
+    },
+  },
+  render: () => (
+    <div className="min-h-dvh !space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
+      <div className="!space-y-2">
+        <h3 className="text-sm font-medium text-white">Media player</h3>
+        <div className="flex items-center gap-4 rounded-lg border border-white/10 bg-white/5 p-4">
+          <button className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-purple-500/20 transition-colors hover:bg-purple-500/30">
+            <CircularPlayIcon className="h-7 w-7 text-white" />
+          </button>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium text-white">Episode title</div>
+            <div className="text-xs text-white/60">0:00 / 24:30</div>
+          </div>
+        </div>
+      </div>
+      <div className="!space-y-2">
+        <h3 className="text-sm font-medium text-white">Video play overlay</h3>
+        <div className="relative flex h-32 items-center justify-center overflow-hidden rounded-lg border border-white/10 bg-black/40">
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+          <button className="relative flex h-16 w-16 items-center justify-center rounded-full border border-white/30 bg-white/10 backdrop-blur-sm transition-colors hover:bg-white/20">
+            <CircularPlayIcon className="h-10 w-10 text-white" />
+          </button>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const Playground: Story = {
+  parameters: {
+    ...storyParameters,
+    docs: {
+      description: {
+        story: "Interactive playground for CircularPlayIcon.",
+      },
+    },
+  },
+  args: {
+    width: 48,
+    height: 48,
+    className: "text-white",
+  },
+  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">
+        <CircularPlayIcon {...args} />
+      </div>
+    </div>
+  ),
+}

package/dist/icons/circular-play-icon/index.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+
+export const CircularPlayIcon = (
+  props: React.SVGProps<SVGSVGElement> & { withAccessibility?: boolean }
+) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      {...svgProps}
+    >
+      <path d="M20 31.5V16.5L31 24L20 31.5Z" fill="currentColor" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Circular play icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/circular-play-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/index.ts

@@ -20,6 +20,7 @@ export * from "./chevron-double-left-icon"
 export * from "./chevron-double-right-icon"
 export * from "./chevron-down-icon"
 export * from "./chevron-left-icon"
+export * from "./circular-play-icon"
 export * from "./chevron-right-icon"
 export * from "./chevron-up-icon"
 export * from "./circle-tick-icon"
@@ -79,6 +80,7 @@ export * from "./pencil-icon"
 export * from "./plus-icon"
 export * from "./pocket-studio-icon"
 export * from "./phone-icon"
+export * from "./scroll-down-icon"
 export * from "./search-icon"
 export * from "./setting-icon"
 export * from "./share-icon"