bmdl-sdk 1.5.9 → 2.0.0

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

@@ -0,0 +1,71 @@
+import { cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const overlayStyles = cva(
+	twJoin({
+		position: 'fixed z-50 inset-0',
+		visual: 'bg-black/15',
+		attrs: [
+			'data-[state=open]:animate-in',
+			'data-[state=open]:fade-in-0',
+			'data-[state=closed]:animate-out',
+			'data-[state=closed]:fade-out-0'
+		]
+	}),
+	{
+		variants: {
+			blur: {
+				true: 'backdrop-blur-xs'
+			}
+		},
+		defaultVariants: {
+			blur: false
+		}
+	}
+)
+
+// /////////////////////////
+
+export const contentStyles = twJoin({
+	position: 'fixed z-50 top-1/2 left-1/2',
+	display: 'flex flex-col p-6',
+	visual: 'bg-white rounded-md shadow-lg',
+	transform: '-translate-x-1/2 -translate-y-1/2',
+	animation: 'duration-200',
+	attrs: [
+		'data-[state=open]:animate-in',
+		'data-[state=open]:fade-in-0',
+		'data-[state=open]:zoom-in-95',
+		//
+		'data-[state=closed]:animate-out',
+		'data-[state=closed]:fade-out-0',
+		'data-[state=closed]:zoom-out-95'
+	],
+	//
+	dark: {
+		visual: 'dark:bg-dark-gray-900 dark:shadow-dark-lg'
+	}
+})
+
+// /////////////////////////
+
+export const closeStyles = twJoin({
+	position: 'absolute top-0 right-0',
+	display: 'size-8 p-1.5 -mt-3 -mr-3',
+	visual: 'bg-white rounded-md shadow-sm outline-none',
+	animation: 'transition-[all_.23s_ease_.1s]',
+	childs: {
+		mouse: '[&_svg]:pointer-events-none',
+		display: '[&_svg]:size-5',
+		text: '[&_svg]:text-gray'
+	},
+	hover: 'hover:translate-y-1.5 hover:-translate-x-1.5',
+	//
+	dark: {
+		visual: 'dark:bg-dark-gray-900 dark:shadow-dark-sm',
+		childs: {
+			text: 'dark:[&_svg]:text-dark-gray-600'
+		}
+	}
+})

package/src/components/atoms/Dialog/Dialog.tsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx'
+import { useTranslations } from 'next-intl'
+import { type ComponentProps, type ReactNode } from 'react'
+
+import { Dialog as RadixDialog } from 'radix-ui'
+
+import { IoClose } from 'react-icons/io5'
+
+import { closeStyles, contentStyles, overlayStyles } from './Dialog.styles'
+
+type DialogProps = ComponentProps<typeof RadixDialog.Root> &
+	ComponentProps<typeof RadixDialog.Content> & {
+		title?: ReactNode
+		blur?: boolean
+		onCancel?: () => void
+	}
+
+function Dialog({
+	title,
+	children,
+	onCancel,
+	onEscapeKeyDown,
+	blur,
+	className,
+	...props
+}: DialogProps) {
+	const t = useTranslations('')
+
+	return (
+		<RadixDialog.Root {...props}>
+			<RadixDialog.Portal>
+				<RadixDialog.Overlay className={overlayStyles({ blur })} />
+				<RadixDialog.Content
+					onEscapeKeyDown={onEscapeKeyDown}
+					onPointerDownOutside={onCancel}
+					className={clsx(contentStyles, className)}
+				>
+					<RadixDialog.Title asChild>
+						<div className='w-full'>{title}</div>
+					</RadixDialog.Title>
+					{children}
+					<RadixDialog.Close
+						onClick={onCancel}
+						aria-label={t('close')}
+						className={closeStyles}
+					>
+						<IoClose />
+					</RadixDialog.Close>
+				</RadixDialog.Content>
+			</RadixDialog.Portal>
+		</RadixDialog.Root>
+	)
+}
+
+export { Dialog }

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

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

package/src/components/atoms/Dropdown/Divider/Divider.styles.ts

@@ -0,0 +1,8 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: '-mx-2 my-2 h-px',
+	visual: 'bg-divider',
+	//
+	dark: 'dark:bg-dark-divider'
+})

package/src/components/atoms/Dropdown/Divider/Divider.tsx

@@ -0,0 +1,14 @@
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+
+import { DropdownMenu } from 'radix-ui'
+
+import { rootStyles } from './Divider.styles'
+
+type DividerProps = ComponentProps<typeof DropdownMenu.Separator>
+
+function Divider({ className }: DividerProps) {
+	return <DropdownMenu.Separator className={clsx(rootStyles, className)} />
+}
+
+export { Divider }

package/src/components/atoms/Dropdown/Divider/index.ts

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

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

@@ -0,0 +1,31 @@
+import { twJoin } from '@/utils'
+
+export const contentStyles = twJoin({
+	position: 'relative z-50',
+	display: 'min-w-15 overflow-x-hidden overflow-y-auto p-2',
+	text: 'text-gray-900',
+	visual: 'bg-white rounded-md shadow-lg',
+	attrs: [
+		'data-[state=open]:animate-in',
+		'data-[state=open]:fade-in-0',
+		'data-[state=open]:zoom-in-95',
+		//
+		'data-[state=closed]:animate-out',
+		'data-[state=closed]:fade-out-0',
+		'data-[state=closed]:zoom-out-95',
+		//
+		'data-[side=top]:slide-in-from-bottom-2',
+		'data-[side=right]:slide-in-from-left-2',
+		'data-[side=bottom]:slide-in-from-top-2',
+		'data-[side=left]:slide-in-from-right-2'
+	],
+	vars: [
+		'max-h-(--radix-dropdown-menu-content-available-height)',
+		'origin-(--radix-dropdown-menu-content-transform-origin)'
+	],
+	//
+	dark: {
+		text: 'dark:text-dark-gray-300',
+		visual: 'dark:bg-dark-gray-900 dark:shadow-dark-lg'
+	}
+})

package/src/components/atoms/Dropdown/Dropdown.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx'
+import { type ComponentProps, type ReactNode } from 'react'
+
+import { DropdownMenu } from 'radix-ui'
+
+import { contentStyles } from './Dropdown.styles'
+
+import { Divider } from './Divider'
+import { Item } from './Item'
+
+type DropdownProps = ComponentProps<typeof DropdownMenu.Root> &
+	ComponentProps<typeof DropdownMenu.Content> & {
+		trigger: ReactNode
+		arrow?: boolean
+	}
+
+function Dropdown({
+	trigger,
+	arrow = true,
+	sideOffset,
+	alignOffset,
+	align,
+	children,
+	className,
+	...props
+}: DropdownProps) {
+	return (
+		<DropdownMenu.Root {...props}>
+			<DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>
+			<DropdownMenu.Portal>
+				<DropdownMenu.Content
+					align={align}
+					sideOffset={sideOffset}
+					alignOffset={alignOffset}
+					className={clsx(contentStyles, className)}
+				>
+					{children}
+					{arrow && <DropdownMenu.Arrow />}
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	)
+}
+
+Dropdown.Item = Item
+Dropdown.Divider = Divider
+
+export { Dropdown }

package/src/components/atoms/Dropdown/Item/Item.styles.ts

@@ -0,0 +1,12 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'flex items-center w-full px-4 py-2 mt-1 first:mt-0',
+	text: 'text-base',
+	visual: 'rounded-md outline-none',
+	animation: 'transition-(color,bg) duration-300',
+	hover: 'hover:bg-gray-100',
+	childs: '[&_svg]:size-6 [&_svg]:mr-2.5',
+	//
+	dark: 'dark:hover:bg-dark-gray-800/50'
+})

package/src/components/atoms/Dropdown/Item/Item.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+
+import { DropdownMenu } from 'radix-ui'
+
+import { rootStyles } from './Item.styles'
+
+type ItemProps = ComponentProps<typeof DropdownMenu.Item>
+
+function Item({ children, className, ...props }: ItemProps) {
+	return (
+		<DropdownMenu.Item className={clsx(rootStyles, className)} {...props}>
+			{children}
+		</DropdownMenu.Item>
+	)
+}
+
+export { Item }

package/src/components/atoms/Dropdown/Item/index.ts

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

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

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

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

@@ -0,0 +1,23 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		tw: 'group/form-item',
+		display: 'flex gap-4'
+	}),
+	{
+		variants: {
+			layout: {
+				horizontal: '',
+				vertical: 'form-vertical flex-col'
+			}
+		},
+		defaultVariants: {
+			layout: 'horizontal'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Form/Form.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { type ComponentProps } from 'react'
+
+import { type RootStylesProps, rootStyles } from './Form.styles'
+
+import { FormItem } from './Item'
+import { FormLabel } from './Label'
+import { FormMessage } from './Message'
+
+type FormProps = ComponentProps<'form'> & RootStylesProps
+
+function Form({ layout, className, ...props }: FormProps) {
+	return <form className={rootStyles({ layout, className })} {...props} />
+}
+
+Form.Item = FormItem
+Form.Label = FormLabel
+Form.Message = FormMessage
+
+export { Form }

package/src/components/atoms/Form/Item/Item.styles.ts

@@ -0,0 +1,23 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		tw: [
+			'group-[.form-horizontal]/form-item:flex-row',
+			'group-[.form-vertical]/form-item:flex-col'
+		],
+		display: 'flex gap-1'
+	}),
+	{
+		variants: {
+			layout: {
+				horizontal: 'flex-row!',
+				vertical: 'flex-col!'
+			}
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Form/Item/Item.tsx

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react'
+
+import { type RootStylesProps, rootStyles } from './Item.styles'
+
+type ItemProps = ComponentProps<'div'> & RootStylesProps
+
+function FormItem({ layout, className, ...props }: ItemProps) {
+	return <div className={rootStyles({ layout, className })} {...props} />
+}
+
+export { FormItem }

package/src/components/atoms/Form/Item/index.ts

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

package/src/components/atoms/Form/Label/Label.tsx

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react'
+
+import { Label } from '../../Label'
+
+type FormLabelProps = ComponentProps<typeof Label>
+
+function FormLabel({ className, ...props }: FormLabelProps) {
+	return <Label {...props} />
+}
+
+export { FormLabel }

package/src/components/atoms/Form/Label/index.ts

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

package/src/components/atoms/Form/Message/Message.tsx

@@ -0,0 +1,29 @@
+import { useTranslations } from 'next-intl'
+import { type ComponentProps } from 'react'
+import { type FieldError } from 'react-hook-form'
+
+import { Typography } from '../../Typography'
+
+const { Text } = Typography
+
+type FormMessageProps = ComponentProps<'p'> & {
+	error?: FieldError
+}
+
+function FormMessage({ error, ...props }: FormMessageProps) {
+	const te = useTranslations('errors')
+	//
+	const body = error ? te(String(error?.message ?? '')) : props.children
+
+	if (!body) {
+		return null
+	}
+
+	return (
+		<Text size={'sm'} className='text-danger!'>
+			{body}
+		</Text>
+	)
+}
+
+export { FormMessage }

package/src/components/atoms/Form/Message/index.ts

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

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

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

package/src/components/atoms/Input/Email/Email.tsx

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react'
+
+import { Input } from '../Input'
+
+type EmailProps = ComponentProps<'input'>
+
+function Email({ ...props }: EmailProps) {
+	return <Input type='email' {...props} />
+}
+
+export { Email }

package/src/components/atoms/Input/Email/index.ts

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

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

@@ -0,0 +1,77 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		tw: [
+			'group-has-[[data-state="open"]]/input:border-primary',
+			'group-has-[[data-state="open"]]/input:shadow-primary-sm',
+			'hover:group-has-[[data-state="open"]]/input:border-primary'
+		],
+		display: 'flex w-full min-w-0 ',
+		text: 'text-base text-gray-800',
+		visual: 'border-divider border bg-white outline-none',
+		animation: 'transition duration-300',
+		placeholder: 'placeholder:text-gray-400',
+		hover: 'hover:border-gray hover:focus-visible:border-primary',
+		focus: 'focus-visible:border-primary focus-visible:shadow-primary-sm',
+		disabled: {
+			mouse: 'disabled:cursor-not-allowed',
+			text: 'disabled:text-secondary',
+			visual: 'disabled:bg-gray-100'
+		},
+		attrs: {
+			visual: 'aria-[invalid=true]:border-danger',
+			hover: 'aria-[invalid=true]:hover:border-danger',
+			focus: 'aria-[invalid=true]:focus-visible:border-danger aria-[invalid=true]:focus-visible:shadow-none'
+		},
+		//
+		dark: {
+			text: 'dark:text-dark-gray-300',
+			visual: 'dark:border-dark-divider dark:bg-dark-gray-900',
+			disabled: {
+				text: 'dark:disabled:text-secondary',
+				visual: 'dark:disabled:bg-secondary/16'
+			},
+			placeholder: 'dark:placeholder:text-dark-gray-700',
+			hover: 'dark:hover:border-dark-gray',
+			focus: 'dark:focus-visible:shadow-dark-sm'
+		}
+	}),
+	{
+		variants: {
+			sizes: {
+				sm: twJoin({
+					display: 'h-7 py-2 px-2.5',
+					text: 'text-sm',
+					visual: 'rounded-sm',
+					focus: {
+						display: 'focus-visible:pl-3.5'
+					}
+				}),
+				md: twJoin({
+					display: 'h-9.5 py-2 px-3.5',
+					text: 'text-base',
+					visual: 'rounded-md',
+					focus: {
+						display: 'focus-visible:pl-4.5'
+					}
+				}),
+				lg: twJoin({
+					display: 'h-12 py-3 px-4',
+					text: 'text-lg',
+					visual: 'rounded-lg',
+					focus: {
+						display: 'focus-visible:pl-5.5'
+					}
+				})
+			}
+		},
+		defaultVariants: {
+			sizes: 'md'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Input/Input.tsx

@@ -0,0 +1,29 @@
+import { type ComponentProps } from 'react'
+
+import { type RootStylesProps, rootStyles } from './Input.styles'
+
+import { Email } from './Email'
+import { Number } from './Number'
+import { OTP } from './OTP'
+import { Password } from './Password'
+import { Search } from './Search'
+
+type InputProps = ComponentProps<'input'> & RootStylesProps
+
+function Input({ type = 'text', sizes, className, ...props }: InputProps) {
+	return (
+		<input
+			type={type}
+			className={rootStyles({ sizes, className })}
+			{...props}
+		/>
+	)
+}
+
+Input.Email = Email
+Input.Password = Password
+Input.Search = Search
+Input.OTP = OTP
+Input.Number = Number
+
+export { Input }

package/src/components/atoms/Input/Number/Number.tsx

@@ -0,0 +1,12 @@
+import { type ComponentProps } from 'react'
+
+import { Input } from '../Input'
+import { RootStylesProps } from '../Input/Input.styles'
+
+type NumberProps = ComponentProps<'input'> & RootStylesProps
+
+function Number({ ...props }: NumberProps) {
+	return <Input type='number' {...props} />
+}
+
+export { Number }

package/src/components/atoms/Input/Number/index.ts

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

package/src/components/atoms/Input/OTP/OTP.styles.ts

@@ -0,0 +1,30 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'select-none flex w-full items-center justify-between'
+})
+
+// /////////////////////////
+
+export const inputStyles = twJoin({
+	mouse: '[&::selection]:bg-transparent',
+	position: 'relative',
+	display: 'flex h-12 w-14 items-center justify-center',
+	text: 'text-base text-gray-800 text-center',
+	visual: 'border-divider rounded-lg border bg-white outline-none',
+	animation: 'transition-all',
+	hover: 'hover:border-gray hover:focus-visible:border-primary',
+	focus: 'focus-visible:border-primary focus-visible:shadow-primary-sm',
+	//
+	dark: {
+		text: 'dark:text-dark-gray-300',
+		visual: 'dark:border-dark-divider dark:bg-dark-gray-900',
+		hover: 'dark:hover:border-dark-gray',
+		focus: 'dark:focus-visible:shadow-dark-sm',
+		attrs: [
+			'data-[active=true]:z-10',
+			'data-[active=true]:border-primary',
+			'data-[active=true]:shadow-primary-sm'
+		]
+	}
+})

package/src/components/atoms/Input/OTP/OTP.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+
+import { unstable_OneTimePasswordField as RadixOTP } from 'radix-ui'
+
+import { inputStyles, rootStyles } from './OTP.styles'
+
+type OTPProps = ComponentProps<typeof RadixOTP.Root> & {
+	length?: number
+}
+
+function OTP({ length = 6, className, value, ...props }: OTPProps) {
+	return (
+		<RadixOTP.Root className={clsx(rootStyles, className)} {...props}>
+			{Array.from({ length }).map((_, index) => {
+				return <RadixOTP.Input key={index} className={inputStyles} />
+			})}
+			<RadixOTP.HiddenInput />
+		</RadixOTP.Root>
+	)
+}
+
+export { OTP }

package/src/components/atoms/Input/OTP/index.ts

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

package/src/components/atoms/Input/Password/Password.tsx

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react'
+
+import { Input } from '../Input'
+
+type PasswordProps = ComponentProps<'input'>
+
+function Password({ ...props }: PasswordProps) {
+	return <Input type='password' {...props} />
+}
+
+export { Password }

package/src/components/atoms/Input/Password/index.ts

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

package/src/components/atoms/Input/Search/Search.tsx

@@ -0,0 +1,12 @@
+import { type ComponentProps } from 'react'
+
+import { Input } from '../Input'
+import { RootStylesProps } from '../Input/Input.styles'
+
+type SearchProps = ComponentProps<'input'> & RootStylesProps
+
+function Search({ ...props }: SearchProps) {
+	return <Input type='search' {...props} />
+}
+
+export { Search }

package/src/components/atoms/Input/Search/index.ts

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

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

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