bmdl-sdk 2.0.5 → 2.0.7

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

@@ -1,29 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,77 +0,0 @@
-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

@@ -1,131 +0,0 @@
-'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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,46 +0,0 @@
-'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

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

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

@@ -1,35 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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

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

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

@@ -1,22 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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