add Figure component

src/lib/Figure/Figure.mdx

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

src/lib/Figure/Figure.module.css

@@ -0,0 +1,31 @@
+.vars {
+    --position: center;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: var(--position);
+    margin-bottom: calc(var(--sizeUnit) * 3);
+}
+
+.figure {
+    background: var(--background000);
+    border: 3px solid var(--colorMi);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--sizeUnit) * 2) calc(var(--sizeUnit) * 2) var(--sizeUnit);
+
+    &:hover {
+        border-color: var(--colorRe);
+    }
+
+    & figcaption {
+        color: var(--colorFa);
+        font-size: var(--fontSizeSmall);
+        font-style: italic;
+        margin-top: calc(var(--sizeUnit) * 1);
+        text-align: center;
+    }
+}

src/lib/Figure/Figure.stories.tsx

@@ -0,0 +1,123 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {Picture} from '@/lib/Picture';
+import {Text, Table} from '@/lib/Text';
+
+import {Figure} from './Figure.tsx';
+
+const TableElement = (
+    <Table>
+        <thead>
+            <tr>
+                <th>Header content 1</th>
+                <th>Header content 2</th>
+                <th>Header content 3</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Body content 1</td>
+                <td>Body content 2</td>
+                <td>Body content 3</td>
+            </tr>
+            <tr>
+                <td>Body content 1</td>
+                <td>Body content 2</td>
+                <td>Body content 3</td>
+            </tr>
+            <tr>
+                <td>Body content 1</td>
+                <td>Body content 2</td>
+                <td>Body content 3</td>
+            </tr>
+        </tbody>
+        <tfoot>
+            <tr>
+                <td>Footer content 1</td>
+                <td>Footer content 2</td>
+                <td>Footer content 3</td>
+            </tr>
+        </tfoot>
+    </Table>
+);
+
+const PictureComponent = <Picture width={666} height={332} src="https://picsum.photos/666/333" />;
+
+const meta = {
+    title: 'Components/Figure',
+    component: Figure,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    args: {
+        caption: 'This is caption!',
+        position: 'center',
+        children: PictureComponent,
+    },
+    argTypes: {
+        className: {
+            table: {
+                disable: true,
+            },
+        },
+        id: {
+            table: {
+                disable: true,
+            },
+        },
+        role: {
+            table: {
+                disable: true,
+            },
+        },
+        children: {
+            options: ['picture', 'table'], // An array of serializable values
+            mapping: {
+                picture: PictureComponent,
+                table: TableElement,
+            }, // Maps serializable option values to complex arg values
+            control: {
+                type: 'radio', // Type 'select' is automatically inferred when 'options' is defined
+                labels: {
+                    // 'labels' maps option values to string labels
+                    picture: 'With Picture component',
+                    table: 'With Table component',
+                },
+            },
+        },
+    },
+} as Meta<typeof Figure>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    render: ({children, ...args}) => {
+        return <Figure {...args}>{children}</Figure>;
+    },
+    args: {},
+};
+
+export const WrappedWithText: Story = {
+    render: ({children, ...args}) => {
+        return (
+            <Text>
+                <p>
+                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+                    essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+                    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+                    PageMaker including versions of Lorem Ipsum.
+                </p>
+                <Figure {...args}>{children}</Figure>
+                <p>
+                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+                    essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+                    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+                    PageMaker including versions of Lorem Ipsum.
+                </p>
+            </Text>
+        );
+    },
+    args: {},
+};

src/lib/Figure/Figure.tsx

@@ -0,0 +1,43 @@
+import type {ReactElement} from 'react';
+import {forwardRef, useMemo} from 'react';
+import classNames from 'classnames';
+import {useLocalTheme} from 'css-vars-hook';
+
+import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
+
+import classes from './Figure.module.css';
+
+enum Positions {
+    center = 'center',
+    left = 'left',
+    right = 'right',
+}
+
+export type Props = DataAttributes &
+    LibraryProps & {
+        children: ReactElement;
+        caption?: string;
+        position?: keyof typeof Positions;
+    };
+
+export const Figure = forwardRef<HTMLDivElement, Props>(
+    ({children, className, caption, position = Positions.center, ...nativeProps}, ref) => {
+        const theme = useMemo(
+            () => ({
+                position,
+            }),
+            [position]
+        );
+        const {LocalRoot} = useLocalTheme();
+        return (
+            <LocalRoot theme={theme} className={classes.wrapper}>
+                <figure {...nativeProps} className={classNames(classes.figure, className)} ref={ref}>
+                    {children}
+                    {caption && <figcaption>{caption}</figcaption>}
+                </figure>
+            </LocalRoot>
+        );
+    }
+);
+
+Figure.displayName = 'Figure';

src/lib/Figure/index.ts

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

src/lib/Picture/Picture.module.css

@@ -1,3 +1,5 @@
 .picture {
-    --foo: "bar";
+    & img {
+        display: block;
+    }
 }

src/lib/Picture/Picture.stories.tsx

@@ -38,13 +38,13 @@ export const Primary: Story = {
         return <Picture {...args} />;
     },
     args: {
-        src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg',
-        width: 298,
-        height: 332,
+        src: 'https://picsum.photos/300/333',
+        width: 300,
+        height: 333,
         alt: 'Image description',
         sources: [
             {
-                src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg',
+                src: 'https://picsum.photos/600/666',
                 mediaCondition: '(orientation: portrait)',
             },
         ],

src/lib/Text/Text.module.css

@@ -272,7 +272,7 @@
 
 .table,
 .text table {
-    border: 1px solid gray;
+    border: 2px solid var(--background000);
     border-collapse: collapse;
     color: var(--textColor);
     font-size: var(--fontSizeSmall);
@@ -282,7 +282,7 @@
 
     & > tr:hover td,
     & > *:not(tfoot) tr:hover td {
-        background-color: var(--colorMi);
+        background-color: var(--colorSol);
     }
 
     & th,
@@ -300,6 +300,10 @@
         letter-spacing: 0.3px;
     }
 
+    & td {
+        background: var(--background000);
+    }
+
     & tfoot td {
         background: var(--colorFa);
         color: var(--background000);
@@ -338,19 +342,19 @@
     white-space: pre;
 
     &::before {
+        border-right: 3px solid var(--colorDo);
+        bottom: 0;
         color: var(--colorRe);
         content: "</>";
         font-size: 24px;
         font-style: normal;
         font-weight: var(--fontWeightBold);
         left: 6px;
         line-height: 1;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        padding-right: 6px;
         padding-left: 6px;
+        padding-right: 6px;
         padding-top: 6px;
-        border-right: 3px solid var(--colorDo);
+        position: absolute;
+        top: 0;
     }
 }

templates/Component/TemplateName.stories.tsx

@@ -17,14 +17,24 @@ const meta = {
                 disable: true,
             },
         },
+        id: {
+            table: {
+                disable: true,
+            },
+        },
+        role: {
+            table: {
+                disable: true,
+            },
+        },
     },
 } as Meta<typeof TemplateName>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
-    render: function Render(args) {
+    render: args => {
         return <TemplateName {...args} />;
     },
     args: {},