@hanzo/ui 4.5.3 → 4.6.0

package/dist/registry/index.d.ts

@@ -1,8 +1,352 @@
 import { z } from "zod";
-export declare const fileSchema: any;
-export declare const registryItemSchema: any;
-export declare const registrySchema: any;
-export declare const registryWithContentSchema: any;
+export declare const fileSchema: z.ZodObject<{
+    path: z.ZodString;
+    content: z.ZodOptional<z.ZodString>;
+    type: z.ZodString;
+    target: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    type: string;
+    path: string;
+    content?: string | undefined;
+    target?: string | undefined;
+}, {
+    type: string;
+    path: string;
+    content?: string | undefined;
+    target?: string | undefined;
+}>;
+export declare const registryItemSchema: z.ZodObject<{
+    name: z.ZodString;
+    type: z.ZodString;
+    description: z.ZodOptional<z.ZodString>;
+    author: z.ZodOptional<z.ZodString>;
+    dependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    devDependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    registryDependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    files: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        path: z.ZodString;
+        content: z.ZodOptional<z.ZodString>;
+        type: z.ZodString;
+        target: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        type: string;
+        path: string;
+        content?: string | undefined;
+        target?: string | undefined;
+    }, {
+        type: string;
+        path: string;
+        content?: string | undefined;
+        target?: string | undefined;
+    }>, "many">>;
+    meta: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    title: z.ZodOptional<z.ZodString>;
+    cssVars: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    tailwind: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    category: z.ZodOptional<z.ZodString>;
+    subcategory: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    name: string;
+    type: string;
+    title?: string | undefined;
+    description?: string | undefined;
+    author?: string | undefined;
+    dependencies?: string[] | undefined;
+    devDependencies?: string[] | undefined;
+    registryDependencies?: string[] | undefined;
+    files?: {
+        type: string;
+        path: string;
+        content?: string | undefined;
+        target?: string | undefined;
+    }[] | undefined;
+    meta?: Record<string, any> | undefined;
+    cssVars?: Record<string, any> | undefined;
+    tailwind?: Record<string, any> | undefined;
+    category?: string | undefined;
+    subcategory?: string | undefined;
+}, {
+    name: string;
+    type: string;
+    title?: string | undefined;
+    description?: string | undefined;
+    author?: string | undefined;
+    dependencies?: string[] | undefined;
+    devDependencies?: string[] | undefined;
+    registryDependencies?: string[] | undefined;
+    files?: {
+        type: string;
+        path: string;
+        content?: string | undefined;
+        target?: string | undefined;
+    }[] | undefined;
+    meta?: Record<string, any> | undefined;
+    cssVars?: Record<string, any> | undefined;
+    tailwind?: Record<string, any> | undefined;
+    category?: string | undefined;
+    subcategory?: string | undefined;
+}>;
+export declare const registrySchema: z.ZodObject<{
+    $schema: z.ZodOptional<z.ZodString>;
+    name: z.ZodString;
+    homepage: z.ZodOptional<z.ZodString>;
+    style: z.ZodOptional<z.ZodString>;
+    items: z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        type: z.ZodString;
+        description: z.ZodOptional<z.ZodString>;
+        author: z.ZodOptional<z.ZodString>;
+        dependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        devDependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        registryDependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        files: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            path: z.ZodString;
+            content: z.ZodOptional<z.ZodString>;
+            type: z.ZodString;
+            target: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            type: string;
+            path: string;
+            content?: string | undefined;
+            target?: string | undefined;
+        }, {
+            type: string;
+            path: string;
+            content?: string | undefined;
+            target?: string | undefined;
+        }>, "many">>;
+        meta: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        title: z.ZodOptional<z.ZodString>;
+        cssVars: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        tailwind: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        category: z.ZodOptional<z.ZodString>;
+        subcategory: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        name: string;
+        type: string;
+        title?: string | undefined;
+        description?: string | undefined;
+        author?: string | undefined;
+        dependencies?: string[] | undefined;
+        devDependencies?: string[] | undefined;
+        registryDependencies?: string[] | undefined;
+        files?: {
+            type: string;
+            path: string;
+            content?: string | undefined;
+            target?: string | undefined;
+        }[] | undefined;
+        meta?: Record<string, any> | undefined;
+        cssVars?: Record<string, any> | undefined;
+        tailwind?: Record<string, any> | undefined;
+        category?: string | undefined;
+        subcategory?: string | undefined;
+    }, {
+        name: string;
+        type: string;
+        title?: string | undefined;
+        description?: string | undefined;
+        author?: string | undefined;
+        dependencies?: string[] | undefined;
+        devDependencies?: string[] | undefined;
+        registryDependencies?: string[] | undefined;
+        files?: {
+            type: string;
+            path: string;
+            content?: string | undefined;
+            target?: string | undefined;
+        }[] | undefined;
+        meta?: Record<string, any> | undefined;
+        cssVars?: Record<string, any> | undefined;
+        tailwind?: Record<string, any> | undefined;
+        category?: string | undefined;
+        subcategory?: string | undefined;
+    }>, "many">;
+}, "strip", z.ZodTypeAny, {
+    name: string;
+    items: {
+        name: string;
+        type: string;
+        title?: string | undefined;
+        description?: string | undefined;
+        author?: string | undefined;
+        dependencies?: string[] | undefined;
+        devDependencies?: string[] | undefined;
+        registryDependencies?: string[] | undefined;
+        files?: {
+            type: string;
+            path: string;
+            content?: string | undefined;
+            target?: string | undefined;
+        }[] | undefined;
+        meta?: Record<string, any> | undefined;
+        cssVars?: Record<string, any> | undefined;
+        tailwind?: Record<string, any> | undefined;
+        category?: string | undefined;
+        subcategory?: string | undefined;
+    }[];
+    style?: string | undefined;
+    $schema?: string | undefined;
+    homepage?: string | undefined;
+}, {
+    name: string;
+    items: {
+        name: string;
+        type: string;
+        title?: string | undefined;
+        description?: string | undefined;
+        author?: string | undefined;
+        dependencies?: string[] | undefined;
+        devDependencies?: string[] | undefined;
+        registryDependencies?: string[] | undefined;
+        files?: {
+            type: string;
+            path: string;
+            content?: string | undefined;
+            target?: string | undefined;
+        }[] | undefined;
+        meta?: Record<string, any> | undefined;
+        cssVars?: Record<string, any> | undefined;
+        tailwind?: Record<string, any> | undefined;
+        category?: string | undefined;
+        subcategory?: string | undefined;
+    }[];
+    style?: string | undefined;
+    $schema?: string | undefined;
+    homepage?: string | undefined;
+}>;
+export declare const registryWithContentSchema: z.ZodObject<{
+    $schema: z.ZodOptional<z.ZodString>;
+    name: z.ZodString;
+    homepage: z.ZodOptional<z.ZodString>;
+    style: z.ZodOptional<z.ZodString>;
+} & {
+    items: z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        type: z.ZodString;
+        description: z.ZodOptional<z.ZodString>;
+        author: z.ZodOptional<z.ZodString>;
+        dependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        devDependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        registryDependencies: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        meta: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        title: z.ZodOptional<z.ZodString>;
+        cssVars: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        tailwind: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        category: z.ZodOptional<z.ZodString>;
+        subcategory: z.ZodOptional<z.ZodString>;
+    } & {
+        files: z.ZodArray<z.ZodObject<{
+            path: z.ZodString;
+            type: z.ZodString;
+            target: z.ZodOptional<z.ZodString>;
+        } & {
+            content: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            type: string;
+            content: string;
+            path: string;
+            target?: string | undefined;
+        }, {
+            type: string;
+            content: string;
+            path: string;
+            target?: string | undefined;
+        }>, "many">;
+    }, "strip", z.ZodTypeAny, {
+        name: string;
+        type: string;
+        files: {
+            type: string;
+            content: string;
+            path: string;
+            target?: string | undefined;
+        }[];
+        title?: string | undefined;
+        description?: string | undefined;
+        author?: string | undefined;
+        dependencies?: string[] | undefined;
+        devDependencies?: string[] | undefined;
+        registryDependencies?: string[] | undefined;
+        meta?: Record<string, any> | undefined;
+        cssVars?: Record<string, any> | undefined;
+        tailwind?: Record<string, any> | undefined;
+        category?: string | undefined;
+        subcategory?: string | undefined;
+    }, {
+        name: string;
+        type: string;
+        files: {
+            type: string;
+            content: string;
+            path: string;
+            target?: string | undefined;
+        }[];
+        title?: string | undefined;
+        description?: string | undefined;
+        author?: string | undefined;
+        dependencies?: string[] | undefined;
+        devDependencies?: string[] | undefined;
+        registryDependencies?: string[] | undefined;
+        meta?: Record<string, any> | undefined;
+        cssVars?: Record<string, any> | undefined;
+        tailwind?: Record<string, any> | undefined;
+        category?: string | undefined;
+        subcategory?: string | undefined;
+    }>, "many">;
+}, "strip", z.ZodTypeAny, {
+    name: string;
+    items: {
+        name: string;
+        type: string;
+        files: {
+            type: string;
+            content: string;
+            path: string;
+            target?: string | undefined;
+        }[];
+        title?: string | undefined;
+        description?: string | undefined;
+        author?: string | undefined;
+        dependencies?: string[] | undefined;
+        devDependencies?: string[] | undefined;
+        registryDependencies?: string[] | undefined;
+        meta?: Record<string, any> | undefined;
+        cssVars?: Record<string, any> | undefined;
+        tailwind?: Record<string, any> | undefined;
+        category?: string | undefined;
+        subcategory?: string | undefined;
+    }[];
+    style?: string | undefined;
+    $schema?: string | undefined;
+    homepage?: string | undefined;
+}, {
+    name: string;
+    items: {
+        name: string;
+        type: string;
+        files: {
+            type: string;
+            content: string;
+            path: string;
+            target?: string | undefined;
+        }[];
+        title?: string | undefined;
+        description?: string | undefined;
+        author?: string | undefined;
+        dependencies?: string[] | undefined;
+        devDependencies?: string[] | undefined;
+        registryDependencies?: string[] | undefined;
+        meta?: Record<string, any> | undefined;
+        cssVars?: Record<string, any> | undefined;
+        tailwind?: Record<string, any> | undefined;
+        category?: string | undefined;
+        subcategory?: string | undefined;
+    }[];
+    style?: string | undefined;
+    $schema?: string | undefined;
+    homepage?: string | undefined;
+}>;
 export type RegistryItem = z.infer<typeof registryItemSchema>;
 export type Registry = z.infer<typeof registrySchema>;
 export type RegistryWithContent = z.infer<typeof registryWithContentSchema>;

package/dist/registry/index.js

@@ -1,12 +1,12 @@
 import { z } from "zod";
-// Define the file schema to match shadcn/ui's format
+// Define the file schema to match hanzo/ui's format
 export const fileSchema = z.object({
     path: z.string(),
     content: z.string().optional(),
     type: z.string(),
     target: z.string().optional(),
 });
-// Registry item schema aligned with shadcn/ui format
+// Registry item schema aligned with hanzo/ui format
 export const registryItemSchema = z.object({
     name: z.string(),
     type: z.string(),
@@ -23,7 +23,7 @@ export const registryItemSchema = z.object({
     category: z.string().optional(),
     subcategory: z.string().optional(),
 });
-// Registry schema aligned with shadcn/ui format
+// Registry schema aligned with hanzo/ui format
 export const registrySchema = z.object({
     $schema: z.string().optional(),
     name: z.string(),

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export * from '../../../app/lib/utils';

package/dist/utils.js

@@ -0,0 +1 @@
+export * from '../../../app/lib/utils';

package/helpers/file.ts

@@ -0,0 +1,33 @@
+export const getFileExt = (fileName: string): string => {
+  if (!fileName) return '';
+  const parts = fileName.split('.');
+  return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+};
+
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+};
+
+export const isImageFile = (fileName: string): boolean => {
+  const ext = getFileExt(fileName);
+  return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(ext);
+};
+
+export const isPdfFile = (fileName: string): boolean => {
+  const ext = getFileExt(fileName);
+  return ext === 'pdf';
+};
+
+export const isVideoFile = (fileName: string): boolean => {
+  const ext = getFileExt(fileName);
+  return ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'].includes(ext);
+};
+
+export const isAudioFile = (fileName: string): boolean => {
+  const ext = getFileExt(fileName);
+  return ['mp3', 'wav', 'ogg', 'aac', 'flac', 'wma'].includes(ext);
+};

package/helpers/memoization.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+
+// Memoization helpers for markdown components
+export const memoCompareNodes = (
+  prevProps: { children?: React.ReactNode },
+  nextProps: { children?: React.ReactNode }
+): boolean => {
+  return prevProps.children === nextProps.children;
+};
+
+export const memoizeMarkdownComponents = <T extends Record<string, React.ComponentType<any>>>(
+  components: T
+): T => {
+  const memoized: any = {};
+
+  for (const key in components) {
+    if (components.hasOwnProperty(key)) {
+      memoized[key] = React.memo(components[key]);
+    }
+  }
+
+  return memoized as T;
+};
+
+// Helper to check if props are equal for memoization
+export const arePropsEqual = <T extends Record<string, any>>(
+  prevProps: T,
+  nextProps: T,
+  keys?: string[]
+): boolean => {
+  const keysToCheck = keys || Object.keys(prevProps);
+
+  for (const key of keysToCheck) {
+    if (prevProps[key] !== nextProps[key]) {
+      return false;
+    }
+  }
+
+  return true;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.5.3",
+  "version": "4.6.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -42,18 +42,27 @@
     "hanzo-ui": "./bin/cli.js"
   },
   "exports": {
+    ".": {
+      "import": "./primitives/index-next.ts",
+      "require": "./primitives/index-common.ts",
+      "default": "./primitives/index-next.ts"
+    },
+    "./assets": "./assets/index.ts",
     "./blocks": "./blocks/index.ts",
+    "./components": "./components/index.ts",
     "./primitives": "./primitives/index-next.ts",
     "./primitives-common": "./primitives/index-common.ts",
     "./registry": {
       "types": "./dist/registry/index.d.ts",
       "default": "./dist/registry/index.js"
     },
-    "./style/": "./style/*",
+    "./style/*": "./style/*",
     "./tailwind": "./tailwind/index.ts",
     "./types": "./types/index.ts",
     "./util": "./util/index.ts",
     "./util-client": "./util/index-client.ts",
+    "./utils": "./src/utils.ts",
+    "./lib/utils": "./src/utils.ts",
     "./mcp": {
       "types": "./dist/mcp/index.d.ts",
       "default": "./dist/mcp/index.js"
@@ -64,11 +73,15 @@
     "@modelcontextprotocol/sdk": "^1.10.2",
     "@next/third-parties": "^15.0.1",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.3",
@@ -86,26 +99,34 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@splinetool/react-spline": "^4.0.0",
     "@splinetool/runtime": "^1.9.35",
     "@tailwindcss/container-queries": "^0.1.1",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cmdk": "^0.2.0",
     "commander": "^12.1.0",
+    "date-fns": "^4.1.0",
     "embla-carousel-react": "8.5.1",
     "input-otp": "^1.0.1",
     "lodash.castarray": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",
-    "markdown-to-jsx": "^7.4.7",
+    "markdown-to-jsx": "^7.7.13",
+    "mermaid": "^11.12.0",
     "postcss-selector-parser": "^6.0.16",
+    "qrcode.react": "^4.2.0",
     "react-day-picker": "^8.10.1",
     "react-intersection-observer": "^9.8.2",
+    "react-resizable-panels": "^3.0.6",
     "sonner": "^1.4.41",
-    "tailwind-merge": "^2.3.0",
+    "sql.js": "^1.13.0",
+    "svg-pan-zoom": "^3.6.2",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-interaction-media": "^0.1.0",
+    "vaul": "^1.1.2",
     "zod": "^3.23.8",
     "zod-to-json-schema": "^3.23.2"
   },

package/primitives/accordion.tsx

@@ -1,66 +1,74 @@
-// @ts-nocheck
-"use client"
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import { cn } from '../src/utils';
 
-import { cn } from "../util"
+const Accordion = AccordionPrimitive.Root;
 
-const Accordion = AccordionPrimitive.Root
+type AccordionItemProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Item
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AccordionPrimitive.Item>>;
+};
 
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
+const AccordionItem = ({ className, ref, ...props }: AccordionItemProps) => (
+  <AccordionPrimitive.Item className={cn('', className)} ref={ref} {...props} />
+);
+AccordionItem.displayName = 'AccordionItem';
 
-type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
-  showChevron?: boolean
-  headerClx?: string
-}
+type AccordionTriggerProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Trigger
+> & {
+  hideArrow?: boolean;
+  ref?: React.RefObject<React.ComponentRef<typeof AccordionPrimitive.Trigger>>;
+};
 
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  AccordionTriggerProps
->(({ showChevron = true, headerClx, className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className={cn('flex', headerClx)}>
+const AccordionTrigger = ({
+  className,
+  children,
+  hideArrow = false,
+  ref,
+  ...props
+}: AccordionTriggerProps) => (
+  <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
-      ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
       )}
+      ref={ref}
       {...props}
     >
       {children}
-      {showChevron && <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />}
+      {hideArrow ? null : (
+        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      )}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+);
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+type AccordionContentProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Content
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AccordionPrimitive.Content>>;
+};
 
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+const AccordionContent = ({
+  className,
+  children,
+  ref,
+  ...props
+}: AccordionContentProps) => (
   <AccordionPrimitive.Content
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down w-full overflow-hidden text-sm transition-all"
     ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
-    )}
     {...props}
   >
-    <div className="pb-4 pt-0">{children}</div>
+    <div className={cn('pt-0 pb-4', className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+);
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };