bmdl-sdk 1.5.8 → 2.0.0

package/src/components/atoms/Actions/Actions.styles.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		display:
+			'flex flex-grow-0 flex-shrink-0 size-9.5 items-center justify-center overflow-hidden',
+		text: 'text-gray',
+		visual: 'rounded-full outline-none',
+		hover: 'hover:bg-gray-200/32',
+		attrs: 'data-[state="open"]:bg-gray-200/32',
+		childs: '[&_svg]:size-5.5',
+		//
+		dark: {
+			text: 'dark:[&_svg]:text-dark-gray-600',
+			hover: 'dark:hover:bg-dark-gray-800/50',
+			attrs: ['dark:data-[state=open]:bg-dark-gray-800/50']
+		}
+	}),
+	{
+		variants: {
+			disabled: {
+				true: 'pointer-events-none'
+			}
+		},
+		defaultVariants: {
+			disabled: false
+		}
+	}
+)

package/src/components/atoms/Actions/Actions.tsx

@@ -0,0 +1,45 @@
+import { useTranslations } from 'next-intl'
+import { type ComponentProps } from 'react'
+
+import { DropdownMenu } from 'radix-ui'
+
+import { TbDotsVertical } from 'react-icons/tb'
+
+import { Dropdown } from '@/components/atoms'
+
+import { rootStyles } from './Actions.styles'
+
+type ActionsProps = ComponentProps<typeof DropdownMenu.Content> & {
+	className?: string
+	disabled?: boolean
+}
+
+function Actions({ sideOffset, disabled, className }: ActionsProps) {
+	const t = useTranslations()
+	//
+	return (
+		<Dropdown
+			trigger={
+				<button className={rootStyles({ disabled, className })}>
+					<TbDotsVertical />
+				</button>
+			}
+			sideOffset={sideOffset}
+			align='end'
+			className='overflow-y-hidden'
+		>
+			<Dropdown.Item asChild>
+				<button>{t('edit')}</button>
+			</Dropdown.Item>
+			<Dropdown.Item asChild>
+				<button>{t('update')}</button>
+			</Dropdown.Item>
+			<Dropdown.Divider />
+			<Dropdown.Item asChild className='text-danger'>
+				<button>{t('delete')}</button>
+			</Dropdown.Item>
+		</Dropdown>
+	)
+}
+
+export { Actions }

package/src/components/atoms/Actions/index.ts

@@ -0,0 +1 @@
+export { Actions } from './Actions'

package/src/components/atoms/Avatar/Avatar.styles.ts

@@ -0,0 +1,95 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		position: 'relative',
+		display: 'flex shrink-0 overflow-hidden',
+		visual: 'rounded-full'
+	}),
+	{
+		variants: {
+			color: {
+				primary: '',
+				secondary: '',
+				custom: ''
+			},
+			variant: {
+				default: 'text-white',
+				label: ''
+			},
+			size: {
+				'2xs': 'size-6',
+				xs: 'size-6.5',
+				sm: 'size-8',
+				md: 'size-9.5',
+				lg: 'size-12',
+				xl: 'size-16',
+				'2xl': 'size-18'
+			}
+		},
+		compoundVariants: [
+			{
+				color: 'primary',
+				variant: 'default',
+				class: 'bg-primary'
+			},
+			{
+				color: 'secondary',
+				variant: 'default',
+				class: 'bg-secondary'
+			},
+			//
+			{
+				color: 'primary',
+				variant: 'label',
+				class: 'text-primary bg-primary/16'
+			},
+			{
+				color: 'secondary',
+				variant: 'label',
+				class: 'text-secondary bg-secondary/16'
+			}
+		],
+		defaultVariants: {
+			variant: 'default',
+			size: 'md',
+			color: 'primary'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>
+
+// /////////////////////////
+
+export const imageStyles = twJoin({
+	display: 'aspect-square size-full'
+})
+
+// /////////////////////////
+
+export const fallbackStyles = cva(
+	twJoin({
+		display: 'flex size-full items-center justify-center',
+		text: 'font-semibold leading-none',
+		visual: 'rounded-full'
+	}),
+	{
+		variants: {
+			size: {
+				'2xs': 'text-xs',
+				xs: 'text-xs',
+				sm: 'text-sm',
+				md: 'text-base',
+				lg: 'text-lg',
+				xl: 'text-3xl',
+				'2xl': 'text-4xl'
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	}
+)

package/src/components/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,46 @@
+import { type ComponentProps } from 'react'
+
+import { Avatar as RadixAvatar } from 'radix-ui'
+
+import {
+	fallbackStyles,
+	imageStyles,
+	rootStyles,
+	type RootStylesProps
+} from './Avatar.styles'
+
+import { getInitials } from '@/utils'
+
+type AvatarProps = ComponentProps<typeof RadixAvatar.Root> &
+	RootStylesProps & {
+		src?: string | null
+		alt: string
+	}
+
+function Avatar({
+	src,
+	alt,
+	color,
+	variant,
+	size,
+	className,
+	...props
+}: AvatarProps) {
+	return (
+		<RadixAvatar.Root
+			className={rootStyles({ color, variant, size, className })}
+			{...props}
+		>
+			<RadixAvatar.Image
+				src={src || undefined}
+				alt={alt}
+				className={imageStyles}
+			/>
+			<RadixAvatar.Fallback className={fallbackStyles({ size })}>
+				{getInitials(alt)}
+			</RadixAvatar.Fallback>
+		</RadixAvatar.Root>
+	)
+}
+
+export { Avatar }

package/src/components/atoms/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar } from './Avatar'

package/src/components/atoms/Badge/Badge.styles.ts

@@ -0,0 +1,93 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		display: 'inline-flex items-center justify-center shrink-0',
+		text: 'font-medium whitespace-nowrap leading-none! tracking-wide'
+	}),
+	{
+		variants: {
+			color: {
+				primary: '',
+				danger: ''
+			},
+			variant: {
+				default: 'text-white',
+				label: ''
+			},
+			size: {
+				xs: 'h-4 px-1.5 py-1 text-xs rounded-sm',
+				sm: 'h-4.5 px-2 py-1.5 text-sm rounded-sm',
+				md: 'h-6 px-2.5 py-1.5 text-sm rounded-md [&_svg]:size-4'
+			},
+			pill: {
+				true: 'rounded-full!'
+			},
+			icon: {
+				true: ''
+			}
+		},
+		compoundVariants: [
+			{
+				size: 'xs',
+				icon: true,
+				class: 'size-4 py-1'
+			},
+			{
+				size: 'sm',
+				icon: true,
+				class: 'size-4.5 py-1.5'
+			},
+			{
+				size: 'md',
+				icon: true,
+				class: 'size-6 py-1.5'
+			},
+			//
+			{
+				color: 'primary',
+				variant: 'default',
+				class: twJoin({
+					visual: 'bg-primary shadow-primary-sm',
+					dark: 'dark:shadow-dark-sm'
+				})
+			},
+			{
+				color: 'primary',
+				variant: 'label',
+				class: twJoin({
+					text: 'text-primary',
+					visual: 'bg-primary/16'
+				})
+			},
+			//
+			{
+				color: 'danger',
+				variant: 'default',
+				class: twJoin({
+					visual: 'bg-danger shadow-danger-sm',
+					dark: 'dark:shadow-dark-sm'
+				})
+			},
+			{
+				color: 'danger',
+				variant: 'label',
+				class: twJoin({
+					text: 'text-danger',
+					visual: 'bg-danger/16'
+				})
+			}
+		],
+		defaultVariants: {
+			variant: 'default',
+			size: 'md',
+			color: 'primary',
+			pill: false,
+			icon: false
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Badge/Badge.tsx

@@ -0,0 +1,31 @@
+import { type ComponentProps } from 'react'
+
+import { rootStyles, type RootStylesProps } from './Badge.styles'
+
+type BadgeProps = ComponentProps<'span'> & RootStylesProps
+
+function Badge({
+	variant,
+	size,
+	pill,
+	icon,
+	color,
+	className,
+	...props
+}: BadgeProps) {
+	return (
+		<span
+			className={rootStyles({
+				variant,
+				size,
+				pill,
+				icon,
+				color,
+				className
+			})}
+			{...props}
+		/>
+	)
+}
+
+export { Badge }

package/src/components/atoms/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './Badge'

package/src/components/atoms/Button/Button.styles.ts

@@ -0,0 +1,189 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		mouse: 'cursor-pointer',
+		display: 'inline-flex items-center justify-center shrink-0',
+		text: 'font-medium whitespace-nowrap leading-none! tracking-wide',
+		animation: 'transition-all',
+		disabled: [
+			'disabled:cursor-not-allowed!',
+			'disabled:select-none',
+			'disabled:opacity-65',
+			'disabled:shadow-none'
+		]
+	}),
+	{
+		variants: {
+			color: {
+				primary: '',
+				secondary: '',
+				success: '',
+				info: '',
+				custom: ''
+			},
+			variant: {
+				default: 'text-white focus-visible:outline-none',
+				outline: 'bg-transparent outline shadow-none',
+				label: 'focus-visible:outline-none'
+			},
+			size: {
+				xs: 'h-6 px-2.5 py-1 text-xs rounded-sm gap-1',
+				sm: 'h-7 px-3.5 py-1.5 text-sm rounded-sm gap-1',
+				md: 'h-9.5 px-5 py-2.5 text-base rounded-md gap-2 [&_svg]:size-4.5',
+				lg: 'h-12 px-6.5 py-[13px] text-lg rounded-lg',
+				icon: 'size-9.5 p-2 text-2xl rounded-md'
+			},
+			block: {
+				true: 'w-full'
+			}
+		},
+		compoundVariants: [
+			{
+				color: 'primary',
+				variant: 'default',
+				class: twJoin({
+					visual: 'bg-primary shadow-primary-sm',
+					hover: 'hover:not-disabled:text-white hover:bg-primary-600',
+					focus: 'focus-visible:not-disabled:bg-primary-600',
+					active: 'active:not-disabled:bg-primary-600',
+					dark: 'dark:shadow-dark-sm'
+				})
+			},
+			{
+				color: 'primary',
+				variant: 'outline',
+				class: twJoin({
+					text: 'text-primary',
+					visual: 'outline-primary',
+					hover: 'hover:not-disabled:bg-primary/8',
+					focus: 'focus-visible:not-disabled:bg-primary/8',
+					active: 'active:not-disabled:bg-primary/16'
+				})
+			},
+			{
+				color: 'primary',
+				variant: 'label',
+				class: twJoin({
+					text: 'text-primary',
+					visual: 'bg-primary/16',
+					hover: 'hover:not-disabled:bg-primary/24',
+					focus: 'focus-visible:not-disabled:bg-primary/24',
+					active: 'active:not-disabled:bg-primary/24'
+				})
+			},
+			//
+			{
+				color: 'secondary',
+				variant: 'default',
+				class: twJoin({
+					visual: 'bg-secondary shadow-sm',
+					hover: 'hover:not-disabled:text-white hover:bg-secondary-600',
+					focus: 'focus-visible:not-disabled:bg-secondary-600',
+					active: 'active:not-disabled:bg-secondary-600',
+					dark: 'dark:shadow-dark-sm'
+				})
+			},
+			{
+				color: 'secondary',
+				variant: 'outline',
+				class: twJoin({
+					text: 'text-secondary',
+					visual: 'outline-secondary',
+					hover: 'hover:not-disabled:bg-secondary/8',
+					focus: 'focus-visible:not-disabled:bg-secondary/8',
+					active: 'active:not-disabled:bg-secondary/16'
+				})
+			},
+			{
+				color: 'secondary',
+				variant: 'label',
+				class: twJoin({
+					text: 'text-secondary',
+					visual: 'bg-secondary/16',
+					hover: 'hover:not-disabled:not-disabled:bg-secondary/24',
+					focus: 'focus-visible:not-disabled:bg-secondary/24',
+					active: 'active:not-disabled:bg-secondary/24'
+				})
+			},
+			//
+			{
+				color: 'success',
+				variant: 'default',
+				class: twJoin({
+					visual: 'bg-success shadow-sm',
+					hover: 'hover:not-disabled:text-white hover:bg-success-600',
+					focus: 'focus-visible:not-disabled:bg-success-600',
+					active: 'active:not-disabled:bg-success-600',
+					dark: 'dark:shadow-dark-sm'
+				})
+			},
+			{
+				color: 'success',
+				variant: 'outline',
+				class: twJoin({
+					text: 'text-success',
+					visual: 'outline-success',
+					hover: 'hover:not-disabled:bg-success/8',
+					focus: 'focus-visible:not-disabled:bg-success/8',
+					active: 'active:not-disabled:bg-success/16'
+				})
+			},
+			{
+				color: 'success',
+				variant: 'label',
+				class: twJoin({
+					text: 'text-success',
+					visual: 'bg-success/16',
+					hover: 'hover:not-disabled:bg-success/24',
+					focus: 'focus-visible:not-disabled:bg-success/24',
+					active: 'active:not-disabled:bg-success/24'
+				})
+			},
+			//
+			{
+				color: 'info',
+				variant: 'default',
+				class: twJoin({
+					visual: 'bg-info shadow-sm',
+					hover: 'hover:not-disabled:text-white hover:bg-info-600',
+					focus: 'focus-visible:not-disabled:bg-info-600',
+					active: 'active:not-disabled:bg-info-600',
+					dark: 'dark:not-disabled:shadow-dark-sm'
+				})
+			},
+			{
+				color: 'info',
+				variant: 'outline',
+				class: twJoin({
+					text: 'text-info',
+					visual: 'outline-info',
+					hover: 'hover:not-disabled:bg-info/8',
+					focus: 'focus-visible:not-disabled:bg-info/8',
+					active: 'active:not-disabled:bg-info/16'
+				})
+			},
+			{
+				color: 'info',
+				variant: 'label',
+				class: twJoin({
+					text: 'text-info',
+					visual: 'bg-info/16',
+					hover: 'hover:not-disabled:bg-info/24',
+					focus: 'focus-visible:not-disabled:bg-info/24',
+					active: 'active:not-disabled:bg-info/24'
+				})
+			}
+		],
+		defaultVariants: {
+			variant: 'default',
+			size: 'md',
+			color: 'primary',
+			block: false
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Button/Button.tsx

@@ -0,0 +1,29 @@
+import { type ComponentProps } from 'react'
+
+import { Slot } from 'radix-ui'
+
+import { type RootStylesProps, rootStyles } from './Button.styles'
+
+type ButtonProps = ComponentProps<'button'> &
+	RootStylesProps & { asChild?: boolean }
+
+function Button({
+	asChild = false,
+	variant,
+	size,
+	color,
+	block,
+	className,
+	...props
+}: ButtonProps) {
+	const Comp = asChild ? Slot.Root : 'button'
+
+	return (
+		<Comp
+			className={rootStyles({ variant, size, color, block, className })}
+			{...props}
+		/>
+	)
+}
+
+export { Button }

package/src/components/atoms/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button'