bmdl-sdk 1.5.9 → 2.0.1

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

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		tw: [
+			'group/label',
+			'has-[[role="checkbox"]]:hover:cursor-pointer',
+			'has-[[role="switch"]]:hover:cursor-pointer',
+			'has-[[role="radio"]]:hover:cursor-pointer'
+		],
+		display: 'flex items-center gap-1.5',
+		text: 'leading-none text-nowrap'
+	}),
+	{
+		variants: {
+			size: {
+				md: 'text-sm text-gray-900 dark:text-dark-gray-200',
+				lg: 'mb-0.5 text-base font-semibold text-gray-800 dark:text-dark-gray-300'
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

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

@@ -0,0 +1,18 @@
+import { type ComponentProps } from 'react'
+
+import { Label as RadixLabel } from 'radix-ui'
+
+import { type RootStylesProps, rootStyles } from './Label.styles'
+
+type LabelProps = ComponentProps<typeof RadixLabel.Root> & RootStylesProps
+
+function Label({ size, className, ...props }: LabelProps) {
+	return (
+		<RadixLabel.Root
+			className={rootStyles({ size, className })}
+			{...props}
+		/>
+	)
+}
+
+export { Label }

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

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

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

@@ -0,0 +1,16 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'flex items-center',
+	text: 'text-2xl font-bold text-gray-900 text-nowrap',
+	animation: 'transition-opacity',
+	hover: 'hover:opacity-90',
+	childs: {
+		display: '[&_svg]:mr-2.5',
+		text: '[&_span]:leading-none'
+	},
+	//
+	dark: {
+		text: 'dark:text-dark-gray-300'
+	}
+})

package/src/components/atoms/Logo/Logo.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link'
+
+import { LogoIcon } from '@/components/atoms/icons'
+
+import { rootStyles } from './Logo.styles'
+
+import { twMerge } from '@/utils'
+
+type LogoProps = {
+	className?: string
+}
+
+export function Logo({ className }: LogoProps) {
+	return (
+		<Link href='/' className={twMerge(rootStyles, className)}>
+			<LogoIcon size={34} />
+			<span>SDK</span>
+		</Link>
+	)
+}

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

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

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

@@ -0,0 +1,77 @@
+import { cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'flex gap-1'
+})
+
+// /////////////////////////
+
+export const itemStyles = cva(
+	twJoin({
+		mouse: 'cursor-pointer',
+		display: 'flex items-center justify-center',
+		text: 'text-gray-800',
+		visual: 'bg-secondary/16',
+		hover: 'hover:bg-secondary/32',
+		focus: 'focus-visible:bg-secondary/32 outline-none',
+		active: 'active:bg-secondary/32',
+		disabled: [
+			'disabled:cursor-not-allowed!',
+			'disabled:select-none',
+			'disabled:opacity-65',
+			'disabled:shadow-none'
+		],
+		//
+		dark: {
+			text: 'dark:text-dark-gray-300',
+			visual: 'dark:bg-dark-gray-700/16',
+			hover: 'dark:hover:bg-dark-gray-700/32',
+			focus: 'dark:focus-visible:bg-dark-gray-700/32',
+			active: 'dark:active:bg-dark-gray-700/32'
+		}
+	}),
+	{
+		variants: {
+			size: {
+				sm: 'size-7 py-1 px-2 text-sm rounded-sm',
+				md: 'size-8.5 py-1.5 px-2.5 text-base rounded-md',
+				lg: 'size-11 py-2 px-4 text-lg rounded-lg'
+			},
+			type: {
+				text: '[&_svg]:hidden',
+				icon: '[&_span]:hidden'
+			},
+			isPrevOrNext: {
+				true: ''
+			},
+			isActive: {
+				true: twJoin({
+					mouse: 'cursor-not-allowed!',
+					text: '!text-white',
+					visual: '!bg-primary shadow-sm',
+					transform: 'scale-98'
+				})
+			}
+		},
+		compoundVariants: [
+			{
+				isPrevOrNext: true,
+				type: 'text',
+				class: 'w-auto'
+			},
+			{
+				isPrevOrNext: true,
+				type: 'icon',
+				class: '!p-2 [&_svg]:size-5'
+			}
+		],
+		defaultVariants: {
+			size: 'md',
+			type: 'text',
+			isPrevOrNext: false,
+			isActive: false
+		}
+	}
+)

package/src/components/atoms/Pagination/Pagination.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import clsx from 'clsx'
+import { useTranslations } from 'next-intl'
+import { useRouter } from 'next/navigation'
+import { type ComponentProps } from 'react'
+
+import { TbChevronLeft, TbChevronRight } from 'react-icons/tb'
+
+import { IPaginationOptions } from '@/types'
+
+import { itemStyles, rootStyles } from './Pagination.styles'
+
+import { addParam, getPaginationData, removeParam } from '@/utils'
+
+type PaginationProps = {
+	pagination: IPaginationOptions
+	getData?: (data: Record<string, any>) => void
+} & ComponentProps<'ul'>
+
+function Pagination({
+	pagination,
+	getData,
+	className,
+	...props
+}: PaginationProps) {
+	const t = useTranslations('pagination')
+	//
+	const router = useRouter()
+	//
+	const data = getPaginationData(pagination)
+	//
+	const onPrevPage = () => {
+		const page = data.page - 1
+		//
+		if (page !== 0) {
+			addParam(router, 'page', page)
+		} else {
+			removeParam(router, 'page')
+		}
+		//
+		getData?.({
+			page
+		})
+	}
+	//
+	const onPage = (page: number) => {
+		const newPage = page - 1
+		//
+		if (newPage !== 0) {
+			addParam(router, 'page', newPage)
+		} else {
+			removeParam(router, 'page')
+		}
+		//
+		getData?.({
+			page: newPage
+		})
+	}
+	//
+	const onNextPage = () => {
+		const page = data.page + 1
+		//
+		addParam(router, 'page', page)
+		//
+		getData?.({
+			page
+		})
+	}
+	//
+	return (
+		<ul
+			role='navigation'
+			aria-label='pagination'
+			className={clsx(rootStyles, className)}
+			{...props}
+		>
+			<li>
+				<button
+					onClick={onPrevPage}
+					className={itemStyles({
+						isPrevOrNext: true,
+						type: 'icon'
+					})}
+					disabled={!data.hasPrevPage}
+				>
+					<TbChevronLeft />
+					<span>{t('prev')}</span>
+				</button>
+			</li>
+			{data.pageNumbers.map(page => {
+				return (
+					<li key={page}>
+						<button
+							onClick={() => {
+								if (
+									page !== data.page + 1 &&
+									page !== 'ellipsis'
+								) {
+									onPage(page)
+								}
+							}}
+							className={itemStyles({
+								isActive: page === data.page + 1,
+								isPrevOrNext: page === 'ellipsis'
+							})}
+							disabled={page === 'ellipsis'}
+						>
+							{page === 'ellipsis' ? '…' : page}
+						</button>
+					</li>
+				)
+			})}
+			<li>
+				<button
+					onClick={onNextPage}
+					className={itemStyles({
+						isPrevOrNext: true,
+						type: 'icon'
+					})}
+					disabled={!data.hasNextPage}
+				>
+					<span>{t('next')}</span>
+					<TbChevronRight />
+				</button>
+			</li>
+		</ul>
+	)
+}
+
+export { Pagination }

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

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

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

@@ -0,0 +1,28 @@
+import { twJoin } from '@/utils'
+
+export const contentStyles = twJoin({
+	position: 'z-50',
+	display: 'w-auto overflow-hidden',
+	text: 'text-gray-800',
+	visual: ['bg-white', 'rounded-md', 'shadow-lg', 'outline-hidden'],
+	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: 'origin-(--radix-popover-content-transform-origin)',
+	//
+	dark: {
+		text: 'dark:text-dark-gray-300',
+		visual: 'dark:bg-tooltip dark:shadow-dark-lg'
+	}
+})

package/src/components/atoms/Popover/Popover.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import clsx from 'clsx'
+import { type ComponentProps, type ReactNode } from 'react'
+
+import { Popover as RadixPopover } from 'radix-ui'
+
+import { contentStyles } from './Popover.styles'
+
+type PopoverProps = ComponentProps<typeof RadixPopover.Root> &
+	ComponentProps<typeof RadixPopover.Content> & {
+		trigger: ReactNode
+		arrow?: boolean
+	}
+
+function Popover({
+	trigger,
+	arrow = true,
+	sideOffset,
+	align,
+	alignOffset,
+	children,
+	className,
+	...props
+}: PopoverProps) {
+	return (
+		<RadixPopover.Root {...props}>
+			<RadixPopover.Trigger asChild>{trigger}</RadixPopover.Trigger>
+			<RadixPopover.Portal>
+				<RadixPopover.Content
+					align={align}
+					sideOffset={sideOffset}
+					alignOffset={alignOffset}
+					onOpenAutoFocus={e => e.preventDefault()}
+					onCloseAutoFocus={e => e.preventDefault()}
+					className={clsx(contentStyles, className)}
+				>
+					{children}
+					{arrow && <RadixPopover.Arrow />}
+				</RadixPopover.Content>
+			</RadixPopover.Portal>
+		</RadixPopover.Root>
+	)
+}
+
+export { Popover }

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

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

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

@@ -0,0 +1,35 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	tw: 'peer group-has-[input]/label:mr-0.5',
+	display: 'flex justify-center items-center size-4.5 shrink-0',
+	visual: 'border-divider rounded-full border outline-none',
+	animation: 'transition-all',
+	hover: [
+		'hover:cursor-pointer',
+		'group-hover/label:border-gray',
+		'group-hover/label:data-[state=checked]:border-transparent'
+	],
+	attrs: [
+		'data-[state=checked]:text-white',
+		'data-[state=checked]:bg-primary',
+		'data-[state=checked]:border-primary',
+		'data-[state=checked]:shadow-primary-sm',
+		'data-[state=checked]:hover:shadow-primary'
+	],
+	//
+	dark: [
+		'dark:border-dark-gray-200',
+		'dark:data-[state=checked]:shadow-dark-sm',
+		'dark:data-[state=checked]:hover:shadow-dark-md',
+		'dark:group-hover/label:border-dark-gray-400'
+	]
+})
+
+// /////////////////////////
+
+export const indicatorStyles = twJoin({
+	display: 'flex size-2',
+	visual: 'bg-white rounded-full',
+	animation: 'transition-none'
+})

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		tw: 'peer',
+		display: 'w-7.5 h-4.5 p-0.5 mr-0.5',
+		visual: 'border border-divider rounded-full',
+		attrs: 'data-[state="checked"]:shadow-sm'
+	}),
+	{
+		variants: {
+			color: {
+				primary:
+					'data-[state="checked"]:bg-primary data-[state="checked"]:border-primary'
+			}
+		},
+		defaultVariants: {
+			color: 'primary'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Radio/Radio.tsx

@@ -0,0 +1,21 @@
+import { type ComponentProps } from 'react'
+
+import { RadioGroup as RadixRadio } from 'radix-ui'
+
+import { type RootStylesProps } from './Radio.styles'
+
+import { Item } from './Item'
+
+type RadioProps = ComponentProps<typeof RadixRadio.Root> & RootStylesProps
+
+function Radio({ children, className, ...props }: RadioProps) {
+	return (
+		<RadixRadio.Root className={className} {...props}>
+			{children}
+		</RadixRadio.Root>
+	)
+}
+
+Radio.Item = Item
+
+export { Radio }

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

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

package/src/components/atoms/RangeNumber/RangeNumber.tsx

@@ -0,0 +1,33 @@
+import { useTranslations } from 'next-intl'
+
+import { Input } from '@/components/atoms'
+
+import { Typography } from '../Typography'
+
+const { Text } = Typography
+
+type RangeNumberProps = {
+	size?: 'sm' | 'md' | 'lg' | null
+}
+
+export function RangeNumber({ size = 'md' }: RangeNumberProps) {
+	const t = useTranslations('range')
+
+	return (
+		<div className='flex items-center gap-x-2'>
+			<Input.Number
+				sizes={size}
+				placeholder={t('from')}
+				className='!w-30'
+			/>
+			<Text muted size={'sm'}>
+				—
+			</Text>
+			<Input.Number
+				sizes={size}
+				placeholder={t('to')}
+				className='!w-30'
+			/>
+		</div>
+	)
+}

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

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

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

@@ -0,0 +1,22 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'flex items-center px-4 py-2 mt-0.5 first:mt-0',
+	text: 'text-base',
+	visual: 'rounded-md outline-none',
+	animation: 'transition-(color,bg) duration-300',
+	hover: [
+		'hover:cursor-pointer',
+		'data-[state="unchecked"]:hover:bg-gray-100'
+	],
+	attrs: [
+		'data-[state="checked"]:text-primary',
+		'data-[state="checked"]:bg-primary/16'
+	],
+	childs: [
+		'[&_span]:flex [&_span]:items-center',
+		'[&_span_svg]:size-4.5 [&_span_svg]:mr-3'
+	],
+	//
+	dark: 'dark:[&[data-state="unchecked"]]:hover:bg-dark-gray-800/50'
+})

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

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

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

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