feat(component): add Audio component

fix #486

Author: morewings

src/lib/Audio/Audio.mdx

@@ -0,0 +1,24 @@
+import { Meta, ArgTypes, Story, Canvas, Source, Markdown, Primary } from "@storybook/blocks";
+import {Audio} from './Audio.tsx';
+import * as AudioStories from "./Audio.stories.tsx";
+
+<Meta title="Components/Audio" of={AudioStories} />
+
+# Audio
+
+## Description
+
+Audio is a React component.
+
+## Imports
+
+<Markdown>{`
+\`\`\`ts
+import {Audio} from 'koval-ui';
+\`\`\`
+`}</Markdown>
+
+<Primary />
+
+<ArgTypes of={Audio}/>
+

src/lib/Audio/Audio.module.css

@@ -0,0 +1,3 @@
+.audio {
+    --foo: "bar";
+}

src/lib/Audio/Audio.stories.tsx

@@ -0,0 +1,63 @@
+import type {Meta, StoryObj} from '@storybook/react';
+// import {fn} from '@storybook/test';
+
+import {Audio} from './Audio.tsx';
+
+const meta = {
+    title: 'Components/Audio',
+    component: Audio,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    args: {},
+    argTypes: {
+        className: {
+            table: {
+                disable: true,
+            },
+        },
+        id: {
+            table: {
+                disable: true,
+            },
+        },
+        role: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+} as Meta<typeof Audio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    render: args => {
+        return <Audio {...args} />;
+    },
+    args: {},
+};
+
+export const WithCode: Story = {
+    render: args => {
+        // here comes the code
+        return <Audio {...args} />;
+    },
+};
+
+WithCode.args = {
+    id: 'foo',
+};
+
+WithCode.argTypes = {};
+
+WithCode.parameters = {
+    docs: {
+        source: {
+            language: 'tsx',
+            type: 'code',
+        },
+    },
+};

src/lib/Audio/Audio.tsx

@@ -0,0 +1,25 @@
+import type {ReactNode} from 'react';
+import {forwardRef} from 'react';
+import classNames from 'classnames';
+
+import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
+
+import classes from './Audio.module.css';
+
+export type Props = DataAttributes &
+    LibraryProps & {
+        children?: ReactNode;
+    };
+
+export const Audio = forwardRef<HTMLDivElement, Props>(
+    ({children, className, ...nativeProps}, ref) => {
+        return (
+            <div {...nativeProps} className={classNames(classes.audio, className)} ref={ref}>
+                <audio src=""></audio>
+                {children}
+            </div>
+        );
+    }
+);
+
+Audio.displayName = 'Audio';

src/lib/Audio/index.ts

@@ -0,0 +1 @@
+export {Audio} from './Audio.tsx';