@brcarddev/frontend-commons 1.0.2

package/src/components/icons/user-circle.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+
+export function UserCircle(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.3163 19.4384C5.92462 18.0052 7.34492 17 9 17H15C16.6551 17 18.0754 18.0052 18.6837 19.4384M16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/user-edit.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function UserEdit(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M9 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5ZM11 21L14.1014 20.1139C14.2499 20.0715 14.3241 20.0502 14.3934 20.0184C14.4549 19.9902 14.5134 19.9558 14.5679 19.9158C14.6293 19.8707 14.6839 19.8161 14.7932 19.7068L21.25 13.25C21.9404 12.5597 21.9404 11.4403 21.25 10.75C20.5597 10.0596 19.4404 10.0596 18.75 10.75L12.2932 17.2068C12.1839 17.3161 12.1293 17.3707 12.0842 17.4321C12.0442 17.4866 12.0098 17.5451 11.9816 17.6066C11.9497 17.6759 11.9285 17.7501 11.8861 17.8987L11 21Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/user-minus-02.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export function UserMinus02(props: ComponentProps<'svg'>) {
+  return (
+    <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M16 7H22M16 21V19.8C16 18.1198 16 17.2798 15.673 16.638C15.3854 16.0735 14.9265 15.6146 14.362 15.327C13.7202 15 12.8802 15 11.2 15H6.8C5.11984 15 4.27976 15 3.63803 15.327C3.07354 15.6146 2.6146 16.0735 2.32698 16.638C2 17.2798 2 18.1198 2 19.8V21M12.5 7.5C12.5 9.433 10.933 11 9 11C7.067 11 5.5 9.433 5.5 7.5C5.5 5.567 7.067 4 9 4C10.933 4 12.5 5.567 12.5 7.5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/user-plus-01.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export function UserPlus01(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M19 21V15M16 18H22M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/user-plus-02.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export function UserPlus02(props: ComponentProps<'svg'>) {
+  return (
+    <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M19 10V4M16 7H22M16 21V19.8C16 18.1198 16 17.2798 15.673 16.638C15.3854 16.0735 14.9265 15.6146 14.362 15.327C13.7202 15 12.8802 15 11.2 15H6.8C5.11984 15 4.27976 15 3.63803 15.327C3.07354 15.6146 2.6146 16.0735 2.32698 16.638C2 17.2798 2 18.1198 2 19.8V21M12.5 7.5C12.5 9.433 10.933 11 9 11C7.067 11 5.5 9.433 5.5 7.5C5.5 5.567 7.067 4 9 4C10.933 4 12.5 5.567 12.5 7.5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/user-square.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function UserSquare(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M4.00002 21.8174C4.6026 22 5.41649 22 6.8 22H17.2C18.5835 22 19.3974 22 20 21.8174M4.00002 21.8174C3.87082 21.7783 3.75133 21.7308 3.63803 21.673C3.07354 21.3854 2.6146 20.9265 2.32698 20.362C2 19.7202 2 18.8802 2 17.2V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H17.2C18.8802 2 19.7202 2 20.362 2.32698C20.9265 2.6146 21.3854 3.07354 21.673 3.63803C22 4.27976 22 5.11984 22 6.8V17.2C22 18.8802 22 19.7202 21.673 20.362C21.3854 20.9265 20.9265 21.3854 20.362 21.673C20.2487 21.7308 20.1292 21.7783 20 21.8174M4.00002 21.8174C4.00035 21.0081 4.00521 20.5799 4.07686 20.2196C4.39249 18.6329 5.63288 17.3925 7.21964 17.0769C7.60603 17 8.07069 17 9 17H15C15.9293 17 16.394 17 16.7804 17.0769C18.3671 17.3925 19.6075 18.6329 19.9231 20.2196C19.9948 20.5799 19.9996 21.0081 20 21.8174M16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/users-01.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+
+export function Users01(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/users-plus-01.tsx

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+
+export function UsersPlus01(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      width='100%'
+      height='100%'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M12 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M19 21V15M16 18H22M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5Z'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+}

package/src/components/icons/users-plus.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function UsersPlus(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M19 21V15M16 18H22M12 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/vertical-drag.tsx

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+
+export function VerticalDrag(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 12 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M10 3C10.5523 3 11 2.55228 11 2C11 1.44772 10.5523 1 10 1C9.44772 1 9 1.44772 9 2C9 2.55228 9.44772 3 10 3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M10 10C10.5523 10 11 9.55228 11 9C11 8.44772 10.5523 8 10 8C9.44772 8 9 8.44772 9 9C9 9.55228 9.44772 10 10 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15C9.44772 15 9 15.4477 9 16C9 16.5523 9.44772 17 10 17Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44772 15 1 15.4477 1 16C1 16.5523 1.44772 17 2 17Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/x-circle.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export function XCircle(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/x-close.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+export function XClose(props: ComponentProps<'svg'>) {
+  return (
+    <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/zap-fast.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function ZapFast(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M9 17.5H3.5M6.5 12H2M9 6.5H4M17 3L10.4036 12.235C10.1116 12.6438 9.96562 12.8481 9.97194 13.0185C9.97744 13.1669 10.0486 13.3051 10.1661 13.3958C10.3011 13.5 10.5522 13.5 11.0546 13.5H16L15 21L21.5964 11.765C21.8884 11.3562 22.0344 11.1519 22.0281 10.9815C22.0226 10.8331 21.9514 10.6949 21.8339 10.6042C21.6989 10.5 21.4478 10.5 20.9454 10.5H16L17 3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/zap.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+export function Zap(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10.8333 1.66669L3.41118 10.5732C3.12051 10.922 2.97517 11.0964 2.97295 11.2437C2.97102 11.3718 3.02808 11.4936 3.12768 11.5741C3.24226 11.6667 3.46928 11.6667 3.92333 11.6667H9.99997L9.16663 18.3334L16.5888 9.42681C16.8794 9.078 17.0248 8.9036 17.027 8.7563C17.0289 8.62826 16.9719 8.50643 16.8723 8.42594C16.7577 8.33335 16.5307 8.33335 16.0766 8.33335H9.99997L10.8333 1.66669Z" stroke="currentColor" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from '@/components/atoms';
+export * from '@/components/icons';
+export * from '@/components/molecules';
+export * from '@/components/organisms';

package/src/components/molecules/Accordion/accordion.stories.tsx

@@ -0,0 +1,81 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './accordion';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Data Display/Accordion',
+  component: Accordion,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Accessible and styled accordion component to show/hide content. Can contain one or more expandable items.',
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: false,
+      table: {
+        category: 'Style',
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const MultipleItems: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-full max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>First question</AccordionTrigger>
+        <AccordionContent>
+          Detailed answer to the first question.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Second question</AccordionTrigger>
+        <AccordionContent>
+          Additional explanatory content for the second question.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Accordion with multiple items that can be opened simultaneously.',
+      },
+    },
+  },
+};
+
+export const SingleItem: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-full max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>What is the Accordion?</AccordionTrigger>
+        <AccordionContent>
+          The Accordion allows hiding and revealing additional content with a
+          simple user interaction.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Accordion with a single expandable item.',
+      },
+    },
+  },
+};

package/src/components/molecules/Accordion/accordion.test.tsx

@@ -0,0 +1,91 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './accordion';
+
+describe('<Accordion />', () => {
+  const renderAccordion = () =>
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1" data-testid="accordion-item-1">
+          <AccordionTrigger data-testid="accordion-trigger-1">
+            Trigger 1
+          </AccordionTrigger>
+          <AccordionContent data-testid="accordion-content-1">
+            Content 1
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2" data-testid="accordion-item-2">
+          <AccordionTrigger data-testid="accordion-trigger-2">
+            Trigger 2
+          </AccordionTrigger>
+          <AccordionContent data-testid="accordion-content-2">
+            Content 2
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+
+  it('renders all accordion triggers', () => {
+    renderAccordion();
+    expect(screen.getByText('Trigger 1')).toBeInTheDocument();
+    expect(screen.getByText('Trigger 2')).toBeInTheDocument();
+  });
+
+  it('does not show content initially', () => {
+    renderAccordion();
+    expect(screen.queryByText('Content 1')).toBeNull();
+    expect(screen.queryByText('Content 2')).toBeNull();
+  });
+
+  it('shows content when trigger is clicked', () => {
+    renderAccordion();
+    const trigger1 = screen.getByText('Trigger 1');
+    fireEvent.click(trigger1);
+
+    expect(screen.getByText('Content 1')).toBeVisible();
+  });
+
+  it('hides content when clicked again (collapsible)', () => {
+    renderAccordion();
+    const trigger1 = screen.getByText('Trigger 1');
+    fireEvent.click(trigger1);
+    expect(screen.getByText('Content 1')).toBeVisible();
+
+    fireEvent.click(trigger1);
+    expect(screen.queryByText('Content 1')).toBeNull();
+  });
+
+  it('only allows one item open at a time', () => {
+    renderAccordion();
+
+    const trigger1 = screen.getByText('Trigger 1');
+    const trigger2 = screen.getByText('Trigger 2');
+
+    fireEvent.click(trigger1);
+    expect(screen.getByText('Content 1')).toBeVisible();
+    expect(screen.queryByText('Content 2')).toBeNull();
+
+    fireEvent.click(trigger2);
+    expect(screen.getByText('Content 2')).toBeVisible();
+    expect(screen.queryByText('Content 1')).toBeNull();
+  });
+
+  it('applies the correct data-slot attributes', () => {
+    renderAccordion();
+
+    expect(screen.getAllByTestId(/accordion-item/i).length).toBe(2);
+    expect(screen.getAllByTestId(/accordion-trigger/i).length).toBe(2);
+    expect(screen.getAllByTestId(/accordion-content/i).length).toBe(2);
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderAccordion();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Accordion/accordion.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '@/utils/index';
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/molecules/Accordion/index.ts

@@ -0,0 +1 @@
+export * from './accordion';

package/src/components/molecules/Alert/alert.stories.tsx

@@ -0,0 +1,75 @@
+import { Alert, AlertDescription, AlertTitle } from './alert';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Feedback/Alert',
+  component: Alert,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Accessible alert component with support for variants (default and destructive). Ideal for feedback messages with title and description.',
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: false,
+      table: {
+        category: 'Style',
+        type: { summary: 'string' },
+      },
+    },
+    variant: {
+      control: 'select',
+      options: [ 'default', 'destructive' ],
+      table: {
+        category: 'Visual',
+        type: { summary: '"default" | "destructive"' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+  render: (args) => (
+    <Alert variant={args.variant} role="alert" aria-labelledby="alert-title">
+      <AlertTitle id="alert-title">Success!</AlertTitle>
+      <AlertDescription>Everything went as expected.</AlertDescription>
+    </Alert>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default alert used for informative messages.',
+      },
+    },
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+  },
+  render: (args) => (
+    <Alert variant={args.variant} role="alert" aria-labelledby="alert-title">
+      <AlertTitle id="alert-title">Error!</AlertTitle>
+      <AlertDescription>A critical system failure occurred.</AlertDescription>
+    </Alert>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Destructive alert used for critical errors and messages.',
+      },
+    },
+  },
+};

package/src/components/molecules/Alert/alert.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Alert, AlertDescription, AlertTitle } from './alert';
+
+describe('<Alert />', () => {
+  const renderDefaultAlert = () =>
+    render(
+      <Alert data-testid="alert">
+        <AlertTitle data-testid="alert-title" >Success!</AlertTitle>
+        <AlertDescription data-testid="alert-description">
+          Your operation was completed successfully.
+        </AlertDescription>
+      </Alert>
+    );
+
+  it('renders correctly with default variant', () => {
+    renderDefaultAlert();
+
+    const alert = screen.getByTestId('alert');
+    const title = screen.getByTestId('alert-title');
+    const description = screen.getByTestId('alert-description');
+
+    expect(alert).toBeInTheDocument();
+    expect(title).toHaveTextContent('Success!');
+    expect(description).toHaveTextContent(
+      'Your operation was completed successfully.'
+    );
+  });
+
+  it('has role="alert" for accessibility', () => {
+    renderDefaultAlert();
+    const alert = screen.getByRole('alert');
+    expect(alert).toBeInTheDocument();
+  });
+
+  it('contains data-slot attributes for semantics', () => {
+    renderDefaultAlert();
+    expect(screen.getByTestId('alert')).toHaveAttribute('data-slot', 'alert');
+    expect(screen.getByTestId('alert-title')).toHaveAttribute('data-slot', 'alert-title');
+    expect(screen.getByTestId('alert-description')).toHaveAttribute('data-slot', 'alert-description');
+  });
+
+  it('supports className prop for custom styling', () => {
+    render(
+      <Alert data-testid="alert" className="custom-class">
+        <AlertTitle>Notice</AlertTitle>
+      </Alert>
+    );
+
+    expect(screen.getByTestId('alert')).toHaveClass('custom-class');
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderDefaultAlert();
+    expect(container).toMatchSnapshot();
+  });
+});