@mzc-fe/design-system 0.0.1 → 0.0.2

package/dist/foundations/ThemeProvider.d.ts

@@ -0,0 +1,13 @@
+export type Theme = string;
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeProviderState;
+export {};

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+export { ThemeProvider } from './foundations/ThemeProvider';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from './components/accordion';
+export { Alert, AlertTitle, AlertDescription } from './components/alert';
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './components/alert-dialog';
+export { AspectRatio } from './components/aspect-ratio';
+export { Avatar, AvatarImage, AvatarFallback } from './components/avatar';
+export { Badge, badgeVariants } from './components/badge';
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from './components/breadcrumb';
+export { Button, buttonVariants } from './components/button';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } from './components/button-group';
+export { Calendar, CalendarDayButton } from './components/calendar';
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } from './components/carousel';
+export { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, } from './components/chart';
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './components/card';
+export { Checkbox } from './components/checkbox';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from './components/collapsible';
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, } from './components/command';
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, } from './components/context-menu';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './components/dialog';
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, } from './components/drawer';
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from './components/dropdown-menu';
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, } from './components/empty';
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, } from './components/field';
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, } from './components/form';
+export { HoverCard, HoverCardTrigger, HoverCardContent, } from './components/hover-card';
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, } from './components/input-group';
+export { Input } from './components/input';
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, } from './components/input-otp';
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, } from './components/item';
+export { Kbd, KbdGroup } from './components/kbd';
+export { Label } from './components/label';
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from './components/menubar';
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, } from './components/navigation-menu';
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from './components/pagination';
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from './components/popover';
+export { Progress } from './components/progress';
+export { RadioGroup, RadioGroupItem } from './components/radio-group';
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle, } from './components/resizable';
+export { ScrollArea, ScrollBar } from './components/scroll-area';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './components/select';
+export { Separator } from './components/separator';
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from './components/sheet';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, } from './components/sidebar';
+export { Skeleton } from './components/skeleton';
+export { Slider } from './components/slider';
+export { Toaster } from './components/sonner';
+export { Spinner } from './components/spinner';
+export { Switch } from './components/switch';
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from './components/table';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/tabs';
+export { Textarea } from './components/textarea';
+export { Toggle, toggleVariants } from './components/toggle';
+export { ToggleGroup, ToggleGroupItem } from './components/toggle-group';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from './components/tooltip';

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -1,10 +1,22 @@
 {
   "name": "@mzc-fe/design-system",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "./dist/design-system.umd.js",
   "module": "./dist/design-system.es.js",
+  "files": [
+    "dist/"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/design-system.es.js",
+      "require": "./dist/design-system.umd.js"
+    },
+    "./dist/design-system.css": "./dist/design-system.css"
+  },
   "scripts": {
     "build": "tsc -b && vite build",
     "lint": "eslint .",
@@ -94,6 +106,7 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
     "vite": "^7.1.2",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.15"
   }
 }

package/.husky/pre-push

@@ -1,21 +0,0 @@
-#!/bin/sh
-
-echo "Running pre-push checks..."
-
-# Run TypeScript compilation
-echo "Running TypeScript compilation..."
-yarn tsc
-if [ $? -ne 0 ]; then
-    echo "TypeScript compilation failed. Push aborted."
-    exit 1
-fi
-
-# Run unit tests
-echo "Running unit tests..."
-yarn test
-if [ $? -ne 0 ]; then
-    echo "Unit tests failed. Push aborted."
-    exit 1
-fi
-
-exit 0

package/.storybook/main.ts

@@ -1,11 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-};
-export default config;

package/.storybook/preview.tsx

@@ -1,30 +0,0 @@
-import type { Preview } from "@storybook/react-vite";
-import { ThemeProvider } from "../src/foundations/ThemeProvider";
-import "../src/index.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    options: {
-      storySort: {
-        order: ["Foundations", "Components"],
-      },
-    },
-  },
-  decorators: [
-    (Story) => {
-      return (
-        <ThemeProvider>
-          <Story />
-        </ThemeProvider>
-      );
-    },
-  ],
-};
-
-export default preview;

package/.vscode/settings.json

@@ -1,12 +0,0 @@
-{
-  "css.customData": [".vscode/tailwind.json"],
-
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.tabSize": 2,
-
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
-  "typescript.tsdk": "node_modules/typescript/lib"
-}

package/.vscode/tailwind.json

@@ -1,105 +0,0 @@
-{
-  "version": 4.0,
-  "atDirectives": [
-    {
-      "name": "@import",
-      "description": "Use the `@import` directive to inline import CSS files, including Tailwind itself.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#import-directive"
-        }
-      ]
-    },
-    {
-      "name": "@theme",
-      "description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
-        }
-      ]
-    },
-    {
-      "name": "@source",
-      "description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
-        }
-      ]
-    },
-    {
-      "name": "@utility",
-      "description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
-        }
-      ]
-    },
-    {
-      "name": "@variant",
-      "description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS. If you need to apply multiple variants at the same time, use nesting.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
-        }
-      ]
-    },
-    {
-      "name": "@custom-variant",
-      "description": "Use the `@custom-variant` directive to add a custom variant in your project. This lets you write utilities like `pointer-coarse:size-48` and `theme-midnight:bg-slate-900`.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
-        }
-      ]
-    },
-    {
-      "name": "@apply",
-      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
-        }
-      ]
-    },
-    {
-      "name": "@reference",
-      "description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context. To do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
-        }
-      ]
-    },
-    {
-      "name": "@config",
-      "description": "Use the `@config` directive to load a legacy JavaScript-based configuration file.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
-        }
-      ]
-    },
-    {
-      "name": "@plugin",
-      "description": "Use the `@plugin` directive to load a Javascript-based plugin. The `@plugin` directive accepts either a package name or a local path.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
-        }
-      ]
-    }
-  ]
-}

package/bitbucket-pipelines.yml

@@ -1,50 +0,0 @@
-#  Template npm-publish
-
-#  This template allows you to publish your npm package, as defined in package.json, to npmjs.com or any other npm-like registry.
-#  The workflow allows running tests, code linting and security scans on feature branches (as well as master).
-#  The npm package will be validated and published after the code is merged to master.
-
-# Prerequisites: $NPM_TOKEN setup in the Deployment variables.
-# For advanced cases, please, follow examples from the pipe's README https://bitbucket.org/atlassian/npm-publish/src/master/README.md
-
-image: node:20
-
-pipelines:
-  custom:
-    npm_publish:
-      - variables:
-          - name: Version
-            default: patch
-            description: Select type of publish
-            allowed-values:
-              - patch
-              - minor
-              - major
-              - rc
-      - step:
-          name: Install
-          caches:
-            - node
-          script:
-            - yarn install --frozen-lockfile
-            - yarn build
-          artifacts:
-            - dist/**
-      - step:
-          name: Deploy to npm
-          deployment: Production
-          script:
-            # Script 내에서 Version 체크 및 설정
-            - |
-              if [ "$Version" = "rc" ]; then
-                npm version prerelease --preid=rc -m "publish v%s [skip ci]"
-                export NPM_TAG="rc"
-              else
-                npm version $Version -m "publish v%s [skip ci]"
-                export NPM_TAG="latest"
-              fi
-            - pipe: atlassian/npm-publish:0.3.2
-              variables:
-                ACCESS: "public"
-                NPM_TOKEN: $NPM_TOKEN
-                TAG: $NPM_TAG

package/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/index.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
-}

package/eslint.config.js

@@ -1,38 +0,0 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from "eslint-plugin-storybook";
-
-import js from "@eslint/js";
-import globals from "globals";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import tseslint from "typescript-eslint";
-import { defineConfig, globalIgnores } from "eslint/config";
-
-export default defineConfig(
-  [
-    globalIgnores(["dist"]),
-    {
-      files: ["**/*.{ts,tsx}"],
-      extends: [
-        js.configs.recommended,
-        tseslint.configs.recommended,
-        reactHooks.configs["recommended-latest"],
-        reactRefresh.configs.vite,
-      ],
-      languageOptions: {
-        ecmaVersion: 2020,
-        globals: globals.browser,
-      },
-      rules: {
-        "react-refresh/only-export-components": "warn",
-        "react-hooks/exhaustive-deps": [
-          "warn",
-          {
-            enableDangerousAutofixThisMayCauseInfiniteLoops: true,
-          },
-        ],
-      },
-    },
-  ],
-  storybook.configs["flat/recommended"]
-);

package/src/components/accordion.stories.tsx

@@ -1,258 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "./accordion";
-
-const meta = {
-  title: "Components/Accordion",
-  component: Accordion,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["single", "multiple"],
-      description:
-        "The type of accordion. 'single' allows only one item open at a time, 'multiple' allows multiple items open.",
-      table: {
-        type: { summary: '"single" | "multiple"' },
-        defaultValue: { summary: '"single"' },
-      },
-    },
-    collapsible: {
-      control: "boolean",
-      description:
-        "When type is 'single', allows closing the opened item by clicking it again.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    defaultValue: {
-      control: "text",
-      description:
-        "The default value(s) of the accordion item(s) that should be open.",
-      table: {
-        type: { summary: "string | string[]" },
-      },
-    },
-    value: {
-      control: "text",
-      description:
-        "The controlled value(s) of the accordion item(s) that should be open.",
-      table: {
-        type: { summary: "string | string[]" },
-      },
-    },
-    disabled: {
-      control: "boolean",
-      description: "Disables all accordion items.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    className: {
-      control: "text",
-      description: "Additional CSS classes to apply to the accordion.",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-  },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    type: "single",
-    collapsible: true,
-    className: "w-full",
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It adheres to the WAI-ARIA design pattern and is fully
-          accessible.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It comes with default styles that match the other components'
-          aesthetic.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It's animated by default, but you can disable it if you prefer.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export const Multiple: Story = {
-  args: {
-    type: "multiple",
-    className: "w-full",
-  },
-  argTypes: {
-    type: {
-      table: {
-        disable: true,
-      },
-    },
-    collapsible: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
-        <AccordionContent>
-          Yes! With the "multiple" type, you can have multiple items open at the
-          same time.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>How does it work?</AccordionTrigger>
-        <AccordionContent>
-          Each accordion item can be independently opened or closed, allowing
-          users to view multiple sections simultaneously.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>What are the use cases?</AccordionTrigger>
-        <AccordionContent>
-          This is useful for FAQ sections, settings panels, or any content where
-          users might want to compare information across different sections.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export const SingleItem: Story = {
-  args: {
-    type: "single",
-    collapsible: true,
-    className: "w-full",
-  },
-  argTypes: {
-    type: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>What is this component?</AccordionTrigger>
-        <AccordionContent>
-          This is an accordion component built with Radix UI. It provides a
-          collapsible content area that can be toggled open and closed.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export const LongContent: Story = {
-  args: {
-    type: "single",
-    collapsible: true,
-    className: "w-full",
-  },
-  argTypes: {
-    type: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Item with long content</AccordionTrigger>
-        <AccordionContent>
-          <div className="space-y-2">
-            <p>
-              This accordion item contains longer content to demonstrate how the
-              component handles text that spans multiple lines or paragraphs.
-            </p>
-            <p>
-              The content area will expand to accommodate the full text, and the
-              animation will smoothly transition between the collapsed and
-              expanded states.
-            </p>
-            <p>
-              This is useful for displaying detailed information, descriptions,
-              or any content that requires more space than a simple one-liner.
-            </p>
-            <ul className="list-disc list-inside space-y-1 ml-4">
-              <li>First bullet point</li>
-              <li>Second bullet point</li>
-              <li>Third bullet point</li>
-            </ul>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Another item</AccordionTrigger>
-        <AccordionContent>
-          This is a shorter content example to show the contrast between items
-          with different content lengths.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export const WithCustomStyling: Story = {
-  args: {
-    type: "single",
-    collapsible: true,
-    className: "w-full max-w-2xl",
-  },
-  argTypes: {
-    type: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <AccordionItem value="item-1" className="border-2 border-primary/20">
-        <AccordionTrigger className="text-lg font-semibold">
-          Custom styled item
-        </AccordionTrigger>
-        <AccordionContent className="text-base">
-          This accordion item has custom styling applied to demonstrate how you
-          can customize the appearance of individual items.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Default styled item</AccordionTrigger>
-        <AccordionContent>
-          This item uses the default styling for comparison.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};