feat: add new styles to the accordion (#268)

packages/components/react/accordion/accordion-item.tsx

@@ -1,15 +1,39 @@
+import type { VariantProps } from '@openui-org/theme'
 import * as React from 'react'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { accordionItem, cn } from '@openui-org/theme'
+import { Ripple, accordionItem, cn } from '@openui-org/theme'
 
 export interface Comp extends React.ElementRef<typeof AccordionPrimitive.Item> {}
-export interface Props extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}
+export type Props = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & VariantProps<typeof accordionItem> & {
+  ripple?: boolean
+  rippleColor?: 'dark' | 'light'
+}
 
-const AccordionItem = React.forwardRef<Comp, Props>(({ className, ...props }, ref) => {
+const AccordionItem = React.forwardRef<Comp, Props>(({
+  className,
+  ripple = false,
+  rippleColor = 'dark',
+  color,
+  shadow,
+  radius,
+  separator,
+  ...props
+}, ref) => {
+  const rippleEffect = ripple !== undefined && new Ripple()
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onMouseDown = props?.onMouseDown
+
+    if (ripple && rippleEffect)
+      rippleEffect.create(e, rippleColor)
+
+    return typeof onMouseDown === 'function' && onMouseDown(e)
+  }
   return (
     <AccordionPrimitive.Item
       ref={ref}
-      className={cn(accordionItem(), className)}
+      className={cn(accordionItem({ color, shadow, radius, separator }), className)}
+      onMouseDown={handleMouseDown}
       {...props}
     />
   )

packages/components/react/accordion/accordion-trigger.tsx

@@ -1,16 +1,17 @@
+import type { VariantProps } from '@openui-org/theme'
 import * as React from 'react'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 import { accordionTrigger, cn } from '@openui-org/theme'
 
 export interface Comp extends React.ElementRef<typeof AccordionPrimitive.Trigger> {}
-export interface Props extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {}
+export type Props = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & VariantProps<typeof accordionTrigger>
 
-const AccordionTrigger = React.forwardRef<Comp, Props>(({ className, children, ...props }, ref) => {
+const AccordionTrigger = React.forwardRef<Comp, Props>(({ className, text, children, ...props }, ref) => {
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         ref={ref}
-        className={cn(accordionTrigger(), className)}
+        className={cn(accordionTrigger({ text }), className)}
         {...props}
       >
         {children}

packages/components/react/accordion/accordion.tsx

@@ -1,5 +1,19 @@
+import type { VariantProps } from '@openui-org/theme'
+import React from 'react'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { accordion, cn } from '@openui-org/theme'
 
-const Accordion = AccordionPrimitive.Root
+export interface Comp extends React.ElementRef<typeof AccordionPrimitive.Root> {}
+export type Props = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & VariantProps<typeof accordion>
+
+const Accordion = React.forwardRef<Comp, Props>(({ className, shadow, radius, bordered, ...props }, ref) => (
+  <AccordionPrimitive.Root
+    ref={ref}
+    className={cn(accordion({ shadow, radius, bordered }), className)}
+    {...props}
+  />
+))
+
+Accordion.displayName = 'Accordion'
 
 export default Accordion

packages/theme/src/components/accordion.ts

@@ -10,7 +10,33 @@ import { cva } from 'class-variance-authority'
  *   // accordion elements
  * </Accordion>
  */
-export const accordion = cva('')
+export const accordion = cva('mt-2 p-3', {
+  variants: {
+    shadow: {
+      sm: 'shadow-small',
+      md: 'shadow-medium',
+      lg: 'shadow-large',
+      none: 'shadow-none',
+    },
+    radius: {
+      sm: 'rounded-small',
+      md: 'rounded-medium',
+      lg: 'rounded-large',
+      none: 'rounded-none',
+    },
+    bordered: {
+      sm: 'border-small',
+      md: 'border-medium',
+      lg: 'border-large',
+      none: 'border-none',
+    },
+  },
+  defaultVariants: {
+    shadow: 'none',
+    radius: 'sm',
+    bordered: 'none',
+  },
+})
 
 /**
  * Accordion wrapper **Class Variants** component
@@ -34,7 +60,41 @@ export const accordionContent = cva('overflow-hidden text-small transition-all d
  *   // accordion elements
  * </AccordionItem>
  */
-export const accordionItem = cva('border-b px-4')
+export const accordionItem = cva('px-4 py-2 my-3', {
+  variants: {
+    color: {
+      primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      warn: 'bg-warn text-warn-foreground hover:bg-warn/90',
+      success: 'bg-success text-success-foreground hover:bg-success/90',
+      error: 'bg-error text-error-foreground hover:bg-error/90',
+      none: 'bg-transparent',
+    },
+    shadow: {
+      sm: 'shadow-small',
+      md: 'shadow-medium',
+      lg: 'shadow-large',
+      none: 'shadow-none',
+    },
+    radius: {
+      sm: 'rounded-small',
+      md: 'rounded-medium',
+      lg: 'rounded-large',
+      none: 'rounded-none',
+    },
+    separator: {
+      sm: 'border-b-small',
+      md: 'border-b-medium',
+      lg: 'border-b-large',
+      none: 'border-b-none',
+    },
+  },
+  defaultVariants: {
+    shadow: 'none',
+    radius: 'none',
+    color: 'none',
+    separator: 'none',
+  },
+})
 
 /**
  * Accordion wrapper **Class Variants** component
@@ -46,4 +106,15 @@ export const accordionItem = cva('border-b px-4')
  *   // accordion elements
  * </AccordionTrigger>
  */
-export const accordionTrigger = cva('flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180')
+export const accordionTrigger = cva('flex flex-1 items-center justify-between py-2 font-medium transition-all hover:opacity-80 [&[data-state=open]>svg]:rotate-180', {
+  variants: {
+    text: {
+      sm: 'text-small',
+      md: 'text-medium',
+      lg: 'text-large',
+    },
+  },
+  defaultVariants: {
+    text: 'md',
+  },
+})