-
{children}
- {active &&
}
+
+
+ {children}
+
+ {active && (
+
+ )}
)
}
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index 262d2fab14f..87d67edf655 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -1,8 +1,8 @@
'use client'
+import { cva } from 'class-variance-authority'
import React from 'react'
-import styleHandler from '../../lib/theme/styleHandler'
import { cn } from '../../lib/utils/cn'
import { MenuContextProvider, useMenuContext } from './MenuContext'
@@ -42,45 +42,84 @@ interface ItemProps {
style?: React.CSSProperties
}
+export const menuItemVariants = cva(
+ cn(
+ 'cursor-pointer flex space-x-3 items-center outline-hidden focus-visible:ring-1 ring-foreground-muted focus-visible:z-10 group'
+ ),
+ {
+ variants: {
+ type: {
+ text: 'py-1',
+ border: 'px-4 py-1',
+ pills: 'my-px px-3 py-[3px] rounded-md transition-colors active:bg-sidebar-accent/50',
+ },
+ active: {
+ true: 'font-semibold z-10',
+ false: 'font-normal border-default group-hover:border-foreground-muted',
+ },
+ },
+ compoundVariants: [
+ {
+ type: 'text',
+ active: true,
+ className: 'text-foreground-muted',
+ },
+ {
+ type: 'border',
+ active: true,
+ className: 'text-foreground-muted border-l border-brand group-hover:border-brand',
+ },
+ {
+ type: 'border',
+ active: false,
+ className: 'border-l',
+ },
+ {
+ type: 'pills',
+ active: true,
+ className: 'bg-sidebar-accent text-foreground-lighter',
+ },
+ {
+ type: 'pills',
+ active: false,
+ className: 'hover:bg-sidebar-accent/50',
+ },
+ ],
+ defaultVariants: {
+ active: false,
+ },
+ }
+)
+
export function Item({ children, icon, active, onClick, style }: ItemProps) {
- const __styles = styleHandler('menu')
-
const { type } = useMenuContext()
- let classes = [__styles.item.base]
-
- classes.push(__styles.item.variants[type].base)
-
- if (active) {
- classes.push(__styles.item.variants[type].active)
- } else {
- classes.push(__styles.item.variants[type].normal)
- }
-
- let contentClasses = [__styles.item.content.base]
- if (active) {
- contentClasses.push(__styles.item.content.active)
- } else {
- contentClasses.push(__styles.item.content.normal)
- }
-
- let iconClasses = [__styles.item.icon.base]
- if (active) {
- iconClasses.push(__styles.item.icon.active)
- } else {
- iconClasses.push(__styles.item.icon.normal)
- }
-
return (
- {icon && {icon}
}
- {children}
+ {icon && (
+
+ {icon}
+
+ )}
+
+ {children}
+
)
}
@@ -92,12 +131,15 @@ interface GroupProps {
}
export function Group({ children, icon, title }: GroupProps) {
- const __styles = styleHandler('menu')
const { type } = useMenuContext()
return (
-
- {icon &&
{icon}}
-
{title}
+
+ {icon && {icon}}
+ {title}
{children}
)
diff --git a/packages/ui/src/components/SidePanel/SidePanel.tsx b/packages/ui/src/components/SidePanel/SidePanel.tsx
index 721e1d052c8..9e1921305b0 100644
--- a/packages/ui/src/components/SidePanel/SidePanel.tsx
+++ b/packages/ui/src/components/SidePanel/SidePanel.tsx
@@ -1,11 +1,12 @@
'use client'
+import { cva } from 'class-variance-authority'
import { Dialog } from 'radix-ui'
import React from 'react'
import { Button } from '../../components/Button/Button'
import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/shadcn/ui/tooltip'
-import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils'
export type SidePanelProps = RadixProps & CustomProps
@@ -41,6 +42,34 @@ interface CustomProps {
tooltip?: string
}
+export const sidePanelContentVariants = cva(
+ cn('z-50 bg-dash-sidebar flex flex-col fixed inset-y-0 h-full lg:h-screen border-l shadow-xl'),
+ {
+ variants: {
+ size: {
+ medium: `w-screen max-w-md h-full`,
+ large: `w-screen max-w-2xl h-full`,
+ xlarge: `w-screen max-w-3xl h-full`,
+ xxlarge: `w-screen max-w-4xl h-full`,
+ xxxlarge: `w-screen max-w-5xl h-full`,
+ xxxxlarge: `w-screen max-w-6xl h-full`,
+ },
+ align: {
+ left: `
+ left-0
+ data-open:animate-panel-slide-left-out
+ data-closed:animate-panel-slide-left-in
+ `,
+ right: `
+ right-0
+ data-open:animate-panel-slide-right-out
+ data-closed:animate-panel-slide-right-in
+ `,
+ },
+ },
+ }
+)
+
const SidePanel = ({
id,
disabled,
@@ -63,12 +92,10 @@ const SidePanel = ({
tooltip,
...props
}: SidePanelProps) => {
- const __styles = styleHandler('sidepanel')
-
const footerContent = customFooter ? (
customFooter
) : (
-
+