dst-rg 1.0.0

package/src/assets/style/font-size.css

@@ -0,0 +1,14 @@
+@theme inline {
+    --text-xxs: 10px;
+    --text-xs: 12px;
+    --text-sm: 14px;
+    --text-md: 16px;
+    --text-lg: 18px;
+    --text-xl: 20px;
+    --text-display-xs: 24px;
+    --text-display-sm: 30px;
+    --text-display-md: 36px;
+    --text-display-lg: 48px;
+    --text-display-xl: 60px;
+    --text-display-2xl: 72px;
+}

package/src/assets/style/gradient.css

@@ -0,0 +1,3 @@
+@theme inline {
+    --color-gradient-border: rgba(255, 255, 255, 0.12)
+}

package/src/assets/style/index.css

@@ -0,0 +1,12 @@
+@import "./colors.css";
+@import "./radius.css";
+@import "./box-shadow.css";
+@import "./font-size.css";
+@import "./line-height.css";
+@import "./gradient.css";
+@import './utility-colors.css';
+@import './max-width.css';
+/* must be comment when package publishing */
+@import "./light-theme.css";
+@import "./dark-theme.css";
+@import "./animation.css";

package/src/assets/style/light-theme.css

@@ -0,0 +1,148 @@
+@theme {
+    /* Light theme (default) */
+    --color-rtext-primary-900: var(--color-gray-light-900);
+    --color-rtext-primary-on-brand: var(--color-base-white);
+    --color-rtext-secondary-700: var(--color-gray-light-700);
+    --color-rtext-secondary-hover: var(--color-gray-light-800);
+    --color-rtext-secondary-on-brand: var(--color-brand-200);
+    --color-rtext-tertiary-600: var(--color-gray-light-600);
+    --color-rtext-tertiary-hover: var(--color-gray-light-700);
+    --color-rtext-tertiary-on-brand: var(--color-brand-200);
+    --color-rtext-quaternary-500: var(--color-gray-light-500);
+    --color-rtext-quaternary-on-brand: var(--color-brand-300);
+    --color-rtext-white: var(--color-base-white);
+    --color-rtext-disabled: var(--color-gray-light-500);
+    --color-rtext-placeholder: var(--color-gray-light-500);
+    --color-rtext-placeholder-subtle: var(--color-gray-light-300);
+    --color-rtext-brand-primary-900: var(--color-brand-900);
+    --color-rtext-brand-secondary-700: var(--color-brand-700);
+    --color-rtext-brand-tertiary-600: var(--color-brand-600);
+    --color-rtext-brand-tertiary-alt: var(--color-brand-600);
+    --color-rtext-error-primary-600: var(--color-error-600);
+    --color-rtext-warning-primary-600: var(--color-warning-600);
+    --color-rtext-success-primary-600: var(--color-success-600);
+
+    --color-rborder-primary: var(--color-gray-light-300);
+    --color-rborder-secondary: var(--color-gray-light-200);
+    --color-rborder-tertiary: var(--color-gray-light-100);
+    --color-rborder-disabled: var(--color-gray-light-300);
+    --color-rborder-disabled-subtle: var(--color-gray-light-200);
+    --color-rborder-brand: var(--color-brand-500);
+    --color-rborder-warning: var(--color-warning-500);
+    --color-rborder-brand-alt: var(--color-brand-600);
+    --color-rborder-error: var(--color-error-500);
+    --color-rborder-error-subtle: var(--color-error-300);
+
+    --color-rfg-primary-900: var(--color-gray-light-900);
+    --color-rfg-secondary-700: var(--color-gray-light-700);
+    --color-rfg-secondary-hover: var(--color-gray-light-800);
+    --color-rfg-tertiary-600: var(--color-gray-light-600);
+    --color-rfg-tertiary-hover: var(--color-gray-light-700);
+    --color-rfg-quaternary-500: var(--color-gray-light-500);
+    --color-rfg-quaternary-hover: var(--color-gray-light-600);
+    --color-rfg-quinary-400: var(--color-gray-light-400);
+    --color-rfg-quinary-hover: var(--color-gray-light-500);
+    --color-rfg-senary-300: var(--color-gray-light-300);
+    --color-rfg-white: var(--color-base-white);
+    --color-rfg-disabled: var(--color-gray-light-400);
+    --color-rfg-disabled-subtle: var(--color-gray-light-300);
+    --color-rfg-brand-primary-600: var(--color-brand-600);
+    --color-rfg-brand-primary-alt: var(--color-brand-600);
+    --color-rfg-brand-secondary-500: var(--color-brand-500);
+    --color-rfg-error-primary: var(--color-error-600);
+    --color-rfg-error-secondary: var(--color-error-500);
+    --color-rfg-warning-primary: var(--color-warning-600);
+    --color-rfg-warning-secondary: var(--color-warning-500);
+    --color-rfg-success-primary: var(--color-success-600);
+    --color-rfg-success-secondary: var(--color-success-500);
+
+    --color-rbg-primary: var(--color-base-white);
+    --color-rbg-primary-alt: var(--color-base-white);
+    --color-rbg-primary-hover: var(--color-gray-light-50);
+    --color-rbg-primary-solid: var(--color-gray-light-950);
+    --color-rbg-secondary: var(--color-gray-light-50);
+    --color-rbg-secondary-alt: var(--color-gray-light-50);
+    --color-rbg-secondary-hover: var(--color-gray-light-100);
+    --color-rbg-secondary-subtle: var(--color-gray-light-25);
+    --color-rbg-secondary-solid: var(--color-gray-light-600);
+    --color-rbg-tertiary: var(--color-gray-light-100);
+    --color-rbg-quaternary: var(--color-gray-light-100);
+    --color-rbg-active: var(--color-gray-light-50);
+    --color-rbg-disabled: var(--color-gray-light-100);
+    --color-rbg-disabled-subtle: var(--color-gray-light-50);
+    --color-rbg-overlay: var(--color-gray-light-950);
+    --color-rbg-brand-primary: var(--color-brand-50);
+    --color-rbg-brand-primary-alt: var(--color-brand-50);
+    --color-rbg-brand-secondary: var(--color-brand-100);
+    --color-rbg-brand-solid: var(--color-brand-600);
+    --color-rbg-brand-solid-hover: var(--color-brand-700);
+    --color-rbg-brand-section: var(--color-brand-800);
+    --color-rbg-brand-section-subtle: var(--color-brand-700);
+    --color-rbg-error-primary: var(--color-error-50);
+    --color-rbg-error-secondary: var(--color-error-100);
+    --color-rbg-error-solid: var(--color-error-600);
+    --color-rbg-warning-primary: var(--color-warning-50);
+    --color-rbg-warning-secondary: var(--color-warning-100);
+    --color-rbg-warning-solid: var(--color-warning-600);
+    --color-rbg-success-primary: var(--color-success-50);
+    --color-rbg-success-secondary: var(--color-success-100);
+    --color-rbg-success-solid: var(--color-success-600);
+
+    --color-rbutton-primary-fg: var(--color-base-white);
+    --color-rbutton-primary-fg-hover: var(--color-base-white);
+    --color-rbutton-primary-bg: var(--color-brand-800);
+    --color-rbutton-primary-bg-hover: var(--color-brand-700);
+
+    --color-rbutton-secondary-fg: var(--color-gray-light-700);
+    --color-rbutton-secondary-fg-hover: var(--color-gray-light-800);
+    --color-rbutton-secondary-bg: var(--color-base-white);
+    --color-rbutton-secondary-bg-hover: var(--color-gray-light-50);
+    --color-rbutton-secondary-border: var(--color-gray-light-300);
+    --color-rbutton-secondary-border-hover: var(--color-gray-light-300);
+
+    --color-rbutton-secondary-color-fg: var(--color-brand-700);
+    --color-rbutton-secondary-color-fg-hover: var(--color-brand-800);
+    --color-rbutton-secondary-color-bg: var(--color-base-white);
+    --color-rbutton-secondary-color-bg-hover: var(--color-brand-50);
+    --color-rbutton-secondary-color-border: var(--color-brand-300);
+    --color-rbutton-secondary-color-border-hover: var(--color-brand-300);
+
+    --color-rbutton-tertiary-fg: var(--color-gray-light-600);
+    --color-rbutton-tertiary-fg-hover: var(--color-gray-light-700);
+    --color-rbutton-tertiary-bg-hover: var(--color-gray-light-50);
+
+    --color-rbutton-tertiary-color-fg: var(--color-brand-700);
+    --color-rbutton-tertiary-color-fg-hover: var(--color-brand-800);
+    --color-rbutton-tertiary-color-bg-hover: var(--color-brand-50);
+
+    --color-rbutton-primary-error-fg: var(--color-base-white);
+    --color-rbutton-primary-error-fg-hover: var(--color-base-white);
+    --color-rbutton-primary-error-bg: var(--color-error-600);
+    --color-rbutton-primary-error-bg-hover: var(--color-error-700);
+
+    --color-rbutton-secondary-error-fg: var(--color-error-700);
+    --color-rbutton-secondary-error-fg-hover: var(--color-error-800);
+    --color-rbutton-secondary-error-bg: var(--color-base-white);
+    --color-rbutton-secondary-error-bg-hover: var(--color-error-50);
+    --color-rbutton-secondary-error-border: var(--color-error-300);
+    --color-rbutton-secondary-error-border-hover: var(--color-error-300);
+
+    --color-rbutton-tertiary-error-fg: var(--color-error-700);
+    --color-rbutton-tertiary-error-fg-hover: var(--color-error-800);
+    --color-rbutton-tertiary-error-bg-hover: var(--color-error-50);
+
+    /* Box Shadows */
+    --color-rshadow-xs: rgba(16, 24, 40, 0.05);
+    --color-rshadow-sm-01: rgba(16, 24, 40, 0.1);
+    --color-rshadow-sm-02: rgba(16, 24, 40, 0.06);
+    --color-rshadow-md-01: rgba(16, 24, 40, 0.1);
+    --color-rshadow-md-02: rgba(16, 24, 40, 0.06);
+    --color-rshadow-lg-01: rgba(16, 24, 40, 0.08);
+    --color-rshadow-lg-02: rgba(16, 24, 40, 0.03);
+    --color-rshadow-xl-01: rgba(16, 24, 40, 0.08);
+    --color-rshadow-xl-02: rgba(16, 24, 40, 0.03);
+    --color-rshadow-2xl: rgba(16, 24, 40, 0.18);
+    --color-rshadow-3xl: rgba(16, 24, 40, 0.14);
+    --color-rshadow-skeumorphic-inner: rgba(16, 24, 40, 0.05);
+    --color-rshadow-skeumorphic-inner-border: rgba(16, 24, 40, 0.18);
+}

package/src/assets/style/line-height.css

@@ -0,0 +1,13 @@
+@theme inline {
+    --line-height-text-xs: 18px;
+    --line-height-text-sm: 20px;
+    --line-height-text-md: 24px;
+    --line-height-text-lg: 28px;
+    --line-height-text-xl: 30px;
+    --line-height-display-xs: 32px;
+    --line-height-display-sm: 38px;
+    --line-height-display-md: 44px;
+    --line-height-display-lg: 60px;
+    --line-height-display-xl: 72px;
+    --line-height-display-2xl: 90px;
+}

package/src/assets/style/max-width.css

@@ -0,0 +1,5 @@
+@theme inline {
+    --container-rsm: 450px;
+    --container-rmd: 700px;
+    --container-rlg: 1100px;
+}

package/src/assets/style/radius.css

@@ -0,0 +1,13 @@
+@theme inline {
+    --radius-none: 0rem;
+    --radius-xxs: 0.125rem;
+    --radius-xs: 0.25rem;
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.625rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.25rem;
+    --radius-4xl: 1.5rem;
+    --radius-full: 9999px;
+}

package/src/assets/style/utility-colors.css

@@ -0,0 +1,166 @@
+@theme inline {
+  /* gray  light */
+  --color-utility-gray-50: var(--color-gray-light-50);
+  --color-utility-gray-100: var(--color-gray-light-100);
+  --color-utility-gray-200: var(--color-gray-light-200);
+  --color-utility-gray-300: var(--color-gray-light-300);
+  --color-utility-gray-400: var(--color-gray-light-400);
+  --color-utility-gray-500: var(--color-gray-light-500);
+  --color-utility-gray-600: var(--color-gray-light-600);
+  --color-utility-gray-700: var(--color-gray-light-700);
+  --color-utility-gray-800: var(--color-gray-light-800);
+  --color-utility-gray-900: var(--color-gray-light-900);
+
+  /* brand light*/
+  --color-utility-brand-50: var(--color-brand-50);
+  --color-utility-brand-50-alt: var(--color-brand-50);
+  --color-utility-brand-100: var(--color-brand-100);
+  --color-utility-brand-100-alt: var(--color-brand-100);
+  --color-utility-brand-200: var(--color-brand-200);
+  --color-utility-brand-200-alt: var(--color-brand-200);
+  --color-utility-brand-300: var(--color-brand-300);
+  --color-utility-brand-300-alt: var(--color-brand-300);
+  --color-utility-brand-400: var(--color-brand-400);
+  --color-utility-brand-400-alt: var(--color-brand-400);
+  --color-utility-brand-500: var(--color-brand-500);
+  --color-utility-brand-500-alt: var(--color-brand-500);
+  --color-utility-brand-600: var(--color-brand-600);
+  --color-utility-brand-600-alt: var(--color-brand-600);
+  --color-utility-brand-700: var(--color-brand-700);
+  --color-utility-brand-700-alt: var(--color-brand-700);
+  --color-utility-brand-800: var(--color-brand-800);
+  --color-utility-brand-800-alt: var(--color-brand-800);
+  --color-utility-brand-900: var(--color-brand-900);
+  --color-utility-brand-900-alt: var(--color-brand-900);
+
+  /* errror light */
+  --color-utility-error-50: var(--color-error-50);
+  --color-utility-error-100: var(--color-error-100);
+  --color-utility-error-200: var(--color-error-200);
+  --color-utility-error-300: var(--color-error-300);
+  --color-utility-error-400: var(--color-error-400);
+  --color-utility-error-500: var(--color-error-500);
+  --color-utility-error-600: var(--color-error-600);
+  --color-utility-error-700: var(--color-error-700);
+
+  /* warning */
+  --color-utility-warning-50: var(--color-warning-50);
+  --color-utility-warning-100: var(--color-warning-100);
+  --color-utility-warning-200: var(--color-warning-200);
+  --color-utility-warning-300: var(--color-warning-300);
+  --color-utility-warning-400: var(--color-warning-400);
+  --color-utility-warning-500: var(--color-warning-500);
+  --color-utility-warning-600: var(--color-warning-600);
+  --color-utility-warning-700: var(--color-warning-700);
+
+  /* success */
+  --color-utility-success-50: var(--color-success-50);
+  --color-utility-success-100: var(--color-success-100);
+  --color-utility-success-200: var(--color-success-200);
+  --color-utility-success-300: var(--color-success-300);
+  --color-utility-success-400: var(--color-success-400);
+  --color-utility-success-500: var(--color-success-500);
+  --color-utility-success-600: var(--color-success-600);
+  --color-utility-success-700: var(--color-success-700);
+
+  /* gray-blue light */
+  --color-utility-gray-blue-50: var(--color-gray-blue-50);
+  --color-utility-gray-blue-100: var(--color-gray-blue-100);
+  --color-utility-gray-blue-200: var(--color-gray-blue-200);
+  --color-utility-gray-blue-300: var(--color-gray-blue-300);
+  --color-utility-gray-blue-400: var(--color-gray-blue-400);
+  --color-utility-gray-blue-500: var(--color-gray-blue-500);
+  --color-utility-gray-blue-600: var(--color-gray-blue-600);
+  --color-utility-gray-blue-700: var(--color-gray-blue-700);
+
+  /* blue-light light*/
+  --color-utility-blue-light-50: var(--color-blue-light-50);
+  --color-utility-blue-light-100: var(--color-blue-light-100);
+  --color-utility-blue-light-200: var(--color-blue-light-200);
+  --color-utility-blue-light-300: var(--color-blue-light-300);
+  --color-utility-blue-light-400: var(--color-blue-light-400);
+  --color-utility-blue-light-500: var(--color-blue-light-500);
+  --color-utility-blue-light-600: var(--color-blue-light-600);
+  --color-utility-blue-light-700: var(--color-blue-light-700);
+
+  /* blue light*/
+  --color-utility-blue-50: var(--color-blue-50);
+  --color-utility-blue-100: var(--color-blue-100);
+  --color-utility-blue-200: var(--color-blue-200);
+  --color-utility-blue-300: var(--color-blue-300);
+  --color-utility-blue-400: var(--color-blue-400);
+  --color-utility-blue-500: var(--color-blue-500);
+  --color-utility-blue-600: var(--color-blue-600);
+  --color-utility-blue-700: var(--color-blue-700);
+
+  /* blue-dark light */
+  --color-utility-blue-dark-50: var(--color-blue-dark-50);
+  --color-utility-blue-dark-100: var(--color-blue-dark-100);
+  --color-utility-blue-dark-200: var(--color-blue-dark-200);
+  --color-utility-blue-dark-300: var(--color-blue-dark-300);
+  --color-utility-blue-dark-400: var(--color-blue-dark-400);
+  --color-utility-blue-dark-500: var(--color-blue-dark-500);
+  --color-utility-blue-dark-600: var(--color-blue-dark-600);
+  --color-utility-blue-dark-700: var(--color-blue-dark-700);
+
+  /* indigo light*/
+  --color-utility-indigo-50: var(--color-indigo-50);
+  --color-utility-indigo-100: var(--color-indigo-100);
+  --color-utility-indigo-200: var(--color-indigo-200);
+  --color-utility-indigo-300: var(--color-indigo-300);
+  --color-utility-indigo-400: var(--color-indigo-400);
+  --color-utility-indigo-500: var(--color-indigo-500);
+  --color-utility-indigo-600: var(--color-indigo-600);
+  --color-utility-indigo-700: var(--color-indigo-700);
+
+  /* purple light*/
+  --color-utility-purple-50: var(--color-purple-50);
+  --color-utility-purple-100: var(--color-purple-100);
+  --color-utility-purple-200: var(--color-purple-200);
+  --color-utility-purple-300: var(--color-purple-300);
+  --color-utility-purple-400: var(--color-purple-400);
+  --color-utility-purple-500: var(--color-purple-500);
+  --color-utility-purple-600: var(--color-purple-600);
+  --color-utility-purple-700: var(--color-purple-700);
+
+  /* fuchsia light*/
+  --color-utility-fuchsia-50: var(--color-fuchsia-50);
+  --color-utility-fuchsia-100: var(--color-fuchsia-100);
+  --color-utility-fuchsia-200: var(--color-fuchsia-200);
+  --color-utility-fuchsia-300: var(--color-fuchsia-300);
+  --color-utility-fuchsia-400: var(--color-fuchsia-400);
+  --color-utility-fuchsia-500: var(--color-fuchsia-500);
+  --color-utility-fuchsia-600: var(--color-fuchsia-600);
+  --color-utility-fuchsia-700: var(--color-fuchsia-700);
+
+  /* pink light*/
+  --color-utility-pink-50: var(--color-pink-50);
+  --color-utility-pink-100: var(--color-pink-100);
+  --color-utility-pink-200: var(--color-pink-200);
+  --color-utility-pink-300: var(--color-pink-300);
+  --color-utility-pink-400: var(--color-pink-400);
+  --color-utility-pink-500: var(--color-pink-500);
+  --color-utility-pink-600: var(--color-pink-600);
+  --color-utility-pink-700: var(--color-pink-700);
+
+  /* orange-dark light*/
+  --color-utility-orange-dark-50: var(--color-orange-dark-50);
+  --color-utility-orange-dark-100: var(--color-orange-dark-100);
+  --color-utility-orange-dark-200: var(--color-orange-dark-200);
+  --color-utility-orange-dark-300: var(--color-orange-dark-300);
+  --color-utility-orange-dark-400: var(--color-orange-dark-400);
+  --color-utility-orange-dark-500: var(--color-orange-dark-500);
+  --color-utility-orange-dark-600: var(--color-orange-dark-600);
+  --color-utility-orange-dark-700: var(--color-orange-dark-700);
+
+  /* orange-dark light*/
+  --color-utility-orange-50: var(--color-orange-50);
+  --color-utility-orange-100: var(--color-orange-100);
+  --color-utility-orange-200: var(--color-orange-200);
+  --color-utility-orange-300: var(--color-orange-300);
+  --color-utility-orange-400: var(--color-orange-400);
+  --color-utility-orange-500: var(--color-orange-500);
+  --color-utility-orange-600: var(--color-orange-600);
+  --color-utility-orange-700: var(--color-orange-700);
+}
+

package/src/components/Accordion/_.stories.tsx

@@ -0,0 +1,75 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { AccordionDemoProps } from "./type";
+import { AccordionDemo } from ".";
+
+export default {
+  title: "Components/AccordionDemo",
+  component: AccordionDemo,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "radio" },
+      options: ["single", "multiple"],
+    },
+    collapsible: {
+      control: { type: "boolean" },
+    },
+    accordionClassName: {
+      control: { type: "text" },
+    },
+    itemClassName: {
+      control: { type: "text" },
+    },
+    questionClassName: {
+      control: { type: "text" },
+    },
+    answerClassName: {
+      control: { type: "text" },
+    },
+  },
+  args: {
+    type: "single",
+    collapsible: false,
+    items: [
+      {
+        question: "What is React?",
+        answer: "React is a JavaScript library for building user interfaces.",
+      },
+      {
+        question: "What is Storybook?",
+        answer:
+          "Storybook is an open-source tool for developing UI components in isolation.",
+      },
+    ],
+    accordionClassName: "w-full",
+    itemClassName: "border-b last:border-b-0",
+    questionClassName: "text-lg font-bold text-blue-700",
+    answerClassName: "text-sm text-gray-600",
+  },
+} as Meta<typeof AccordionDemo>;
+
+type Story = StoryObj<AccordionDemoProps>;
+
+export const Default: Story = {};
+
+export const Collapsible: Story = {
+  args: {
+    collapsible: true,
+  },
+};
+
+export const MultipleType: Story = {
+  args: {
+    type: "multiple",
+  },
+};
+
+export const WithCustomClasses: Story = {
+  args: {
+    accordionClassName: "w-full max-w-lg mx-auto",
+    itemClassName: "border-b last:border-b-0 p-4",
+    questionClassName: "text-xl font-bold text-green-700",
+    answerClassName: "text-base text-gray-500",
+  },
+};

package/src/components/Accordion/_.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { AccordionDemo } from ".";
+import CirclePlus from "@/icons/general/circle-plus";
+import CircleMinues from "@/icons/general/circle-minues";
+
+const ClosedIcon = () => <span data-testid="closed-icon"><CirclePlus /></span>;
+const OpenIcon = () => <span data-testid="open-icon"><CircleMinues /></span>;
+
+
+const mockItems = [
+  { question: "What is Astronomy?", answer: "The study of celestial objects." },
+  {
+    question: "What is a black hole?",
+    answer: "A region of space with strong gravity.",
+  },
+];
+
+describe("AccordionDemo Component", () => {
+  it("renders all questions", () => {
+    render(<AccordionDemo items={mockItems} />);
+    mockItems.forEach((item) => {
+      expect(screen.getByText(item.question)).toBeInTheDocument();
+    });
+  });
+
+  it("does not show answers initially", () => {
+    render(<AccordionDemo items={mockItems} />);
+    mockItems.forEach((item) => {
+      expect(screen.queryByText(item.answer)).not.toBeInTheDocument();
+    });
+  });
+
+  it("shows answer when question is clicked", async () => {
+    render(<AccordionDemo items={mockItems} />);
+    const firstQuestion = screen.getByText(mockItems[0].question);
+    await userEvent.click(firstQuestion);
+    expect(screen.getByText(mockItems[0].answer)).toBeInTheDocument();
+  });
+
+  it("applies custom class names", () => {
+    render(
+      <AccordionDemo
+        items={mockItems}
+        accordionClassName="accordion-test"
+        itemClassName="item-test"
+        questionClassName="question-test"
+        answerClassName="answer-test"
+      />
+    );
+    expect(screen.getByText(mockItems[0].question)).toHaveClass(
+      "question-test"
+    );
+    const answerContent = screen.queryByText(mockItems[0].answer);
+    if (answerContent) {
+      expect(answerContent).toHaveClass("answer-test");
+    }
+  });
+
+  it("renders custom icons correctly", async () => {
+    render(
+      <AccordionDemo
+        items={mockItems}
+        iconClosed={ClosedIcon}
+        iconOpen={OpenIcon}
+      />
+    );
+
+    expect(screen.getAllByTestId("closed-icon")[0]).toBeInTheDocument();
+
+    const firstQuestion = screen.getByText(mockItems[0].question);
+    await userEvent.click(firstQuestion);
+
+    expect(screen.getByTestId("open-icon")).toBeInTheDocument();
+  });
+});

package/src/components/Accordion/index.tsx

@@ -0,0 +1,47 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AccordionDemoProps } from "./type";
+
+
+export function AccordionDemo({
+  type = "single",
+  collapsible = false,
+  items,
+  accordionClassName = "w-full bg-white p-4",
+  itemClassName = "border-b last:border-b-0",
+  questionClassName = "text-lg font-medium",
+  answerClassName = "text-sm text-gray-600",
+  iconClosed,
+  iconOpen
+}: Readonly<AccordionDemoProps>) {
+  return (
+    <Accordion
+      type={type}
+      collapsible={collapsible}
+      className={`${accordionClassName}`}
+    >
+      {items.map((item, index) => (
+        <AccordionItem
+          key={index}
+          value={`item-${index}`}
+          className={itemClassName}
+        >
+          <AccordionTrigger
+            className={questionClassName}
+            iconClosed={iconClosed}
+            iconOpen={iconOpen}
+          >
+            {item.question}
+          </AccordionTrigger>
+          <AccordionContent className={answerClassName}>
+            {item.answer}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}

package/src/components/Accordion/type.ts

@@ -0,0 +1,24 @@
+import React from "react";
+
+export type QAItem = {
+  question: React.ReactNode;
+  answer: React.ReactNode;
+};
+
+export interface AccordionDemoProps {
+  type?: "single" | "multiple";
+  collapsible?: boolean;
+  items: QAItem[];
+  accordionClassName?: string;
+  itemClassName?: string;
+  questionClassName?: string;
+  answerClassName?: string;
+  iconOpen?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  iconClosed?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+export type AccordionProps = {
+  type?: "single" | "multiple";
+  collapsible?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+};