bmdl-sdk 1.5.8 → 2.0.0

package/src/components/atoms/Toast/Toast.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import clsx from 'clsx'
+import { toast as sonnerToast } from 'sonner'
+
+import { IoClose } from 'react-icons/io5'
+
+import { RootStylesProps, iconStyles, rootStyles } from './Toast.styles'
+
+import { Typography } from '../Typography'
+
+import { getToastColor, getToastIcon } from './Toast.utils'
+
+const { Title, Paragraph } = Typography
+
+type ToastProps = RootStylesProps & {
+	id: string | number
+	title: string
+	description?: string
+	hideClose?: boolean
+}
+
+function toast({
+	title,
+	description,
+	type,
+	hideClose
+}: Omit<ToastProps, 'id'>) {
+	return sonnerToast.custom(id => (
+		<Toast
+			id={id}
+			title={title}
+			description={description}
+			type={type}
+			hideClose={hideClose}
+		/>
+	))
+}
+
+// // //
+
+function Toast({
+	id,
+	title,
+	description,
+	type = 'default',
+	hideClose
+}: ToastProps) {
+	const color = getToastColor(type!)
+	//
+	return (
+		<div className={rootStyles({ type })}>
+			<span className={clsx(iconStyles, color)}>
+				{getToastIcon(type!)}
+			</span>
+			<div>
+				<div className='flex justify-between gap-x-2.5'>
+					<Title
+						level={5}
+						className={clsx('mt-1 leading-none!', color)}
+					>
+						{title}
+					</Title>
+					{!hideClose && (
+						<button
+							className={color}
+							onClick={() => {
+								sonnerToast.dismiss(id)
+							}}
+						>
+							<IoClose size={16} />
+						</button>
+					)}
+				</div>
+				{description && (
+					<Paragraph className={clsx('mt-2.5', color)}>
+						{description}
+					</Paragraph>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export { Toast, toast }

package/src/components/atoms/Toast/Toast.utils.tsx

@@ -0,0 +1,43 @@
+import {
+	TbCircleCheck,
+	TbInfoCircle,
+	TbInfoHexagon,
+	TbInfoTriangle,
+	TbLoader2
+} from 'react-icons/tb'
+
+import { ToastType } from '@/types'
+
+export const getToastColor = (type: ToastType) => {
+	switch (type) {
+		case 'success':
+			return 'text-success!'
+		case 'info':
+			return 'text-info!'
+		case 'warning':
+			return 'text-warning!'
+		case 'error':
+			return 'text-danger!'
+		case 'loading':
+			return 'text-secondary!'
+		default:
+			return ''
+	}
+}
+
+export const getToastIcon = (type: ToastType) => {
+	switch (type) {
+		case 'success':
+			return <TbCircleCheck />
+		case 'info':
+			return <TbInfoCircle />
+		case 'warning':
+			return <TbInfoTriangle />
+		case 'error':
+			return <TbInfoHexagon />
+		case 'loading':
+			return <TbLoader2 className='animate-spin' />
+		default:
+			return ''
+	}
+}

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

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

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

@@ -0,0 +1,33 @@
+import { twJoin } from '@/utils'
+
+export const contentStyles = twJoin({
+	position: 'z-50',
+	display: 'w-fit px-3 py-1.5',
+	text: 'text-base text-balance text-white',
+	animation: 'animate-in fade-in-0 zoom-in-95',
+	visual: 'bg-tooltip rounded-md',
+	attrs: [
+		'data-[side=bottom]:slide-in-from-top-2',
+		'data-[side=left]:slide-in-from-right-2',
+		'data-[side=right]:slide-in-from-left-2',
+		'data-[side=top]:slide-in-from-bottom-2',
+		//
+		'data-[state=closed]:animate-out',
+		'data-[state=closed]:fade-out-0',
+		'data-[state=closed]:zoom-out-95'
+	],
+	vars: 'origin-(--radix-tooltip-content-transform-origin)',
+	//
+	dark: 'dark:bg-dark-tooltip'
+})
+
+// /////////////////////////
+
+export const arrowStyles = twJoin({
+	position: 'z-50',
+	display: 'size-2.5',
+	visual: 'bg-tooltip fill-tooltip rounded-xs',
+	transform: 'translate-y-[calc(-50%_-_2px)] rotate-45',
+	//
+	dark: 'dark:bg-dark-tooltip dark:fill-dark-tooltip'
+})

package/src/components/atoms/Tooltip/Tooltip.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+import { type ComponentProps, type ReactNode } from 'react'
+
+import { Tooltip as RadixTooltip } from 'radix-ui'
+
+import { arrowStyles, contentStyles } from './Tooltip.styles'
+
+type TooltipProps = ComponentProps<typeof RadixTooltip.Root> &
+	ComponentProps<typeof RadixTooltip.Content> & {
+		title?: ReactNode
+	}
+
+function Tooltip({ title, children, className, ...props }: TooltipProps) {
+	return (
+		<RadixTooltip.Provider delayDuration={250}>
+			<RadixTooltip.Root>
+				<RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
+				<RadixTooltip.Portal>
+					<RadixTooltip.Content
+						className={clsx(contentStyles, className)}
+						{...props}
+					>
+						{title}
+						<RadixTooltip.Arrow className={arrowStyles} />
+					</RadixTooltip.Content>
+				</RadixTooltip.Portal>
+			</RadixTooltip.Root>
+		</RadixTooltip.Provider>
+	)
+}
+
+export { Tooltip }

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

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

package/src/components/atoms/Typography/Display/Display.styles.ts

@@ -0,0 +1,26 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		text: 'text-gray-900 font-medium',
+		//
+		dark: 'dark:text-dark-gray-200'
+	}),
+	{
+		variants: {
+			level: {
+				1: 'text-[64px] leading-[131%]!',
+				2: 'text-[56px] leading-[139%]!',
+				3: 'text-[48px] leading-[142%]!',
+				4: 'text-[32px] leading-[144%]!'
+			}
+		},
+		defaultVariants: {
+			level: 1
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Typography/Display/Display.tsx

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react'
+
+import { type RootStylesProps, rootStyles } from './Display.styles'
+
+type DisplayProps = ComponentProps<'strong'> & RootStylesProps
+
+function Display({ level = 1, className, ...props }: DisplayProps) {
+	return <strong className={rootStyles({ level, className })} {...props} />
+}
+
+export { Display }

package/src/components/atoms/Typography/Display/index.ts

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

package/src/components/atoms/Typography/Link/Link.styles.ts

@@ -0,0 +1,32 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		display: 'inline-flex items-center gap-x-1',
+		text: 'text-primary leading-none',
+		animation: 'transition-color',
+		hover: 'hover:text-primary-400'
+	}),
+	{
+		variants: {
+			size: {
+				md: 'text-base',
+				sm: 'text-sm'
+			},
+			disabled: {
+				true: twJoin({
+					mouse: 'select-none pointer-events-none',
+					visual: 'opacity-50'
+				})
+			}
+		},
+		defaultVariants: {
+			size: 'md',
+			disabled: false
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Typography/Link/Link.tsx

@@ -0,0 +1,25 @@
+import NextLink, { type LinkProps as NextLinkProps } from 'next/link'
+import { type ComponentProps } from 'react'
+
+import { Slot } from 'radix-ui'
+
+import { type RootStylesProps, rootStyles } from './Link.styles'
+
+type LinkProps = ComponentProps<'a'> &
+	NextLinkProps &
+	RootStylesProps & {
+		asChild?: boolean
+	}
+
+function Link({ asChild, size, disabled, className, ...props }: LinkProps) {
+	const Comp = asChild ? Slot.Root : NextLink
+
+	return (
+		<Comp
+			className={rootStyles({ size, disabled, className })}
+			{...props}
+		/>
+	)
+}
+
+export { Link }

package/src/components/atoms/Typography/Link/index.ts

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

package/src/components/atoms/Typography/Paragraph/Paragraph.styles.ts

@@ -0,0 +1,32 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		text: 'text-gray-800 whitespace-pre-line',
+		//
+		dark: 'dark:text-dark-gray-300'
+	}),
+	{
+		variants: {
+			weight: {
+				normal: 'font-normal',
+				medium: 'font-medium',
+				semibold: 'font-semibold',
+				bold: 'font-bold'
+			},
+			size: {
+				sm: 'text-sm',
+				md: 'text-base',
+				lg: 'text-lg'
+			}
+		},
+		defaultVariants: {
+			weight: 'normal',
+			size: 'md'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Typography/Paragraph/Paragraph.tsx

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react'
+
+import { type RootStylesProps, rootStyles } from './Paragraph.styles'
+
+type ParagraphProps = ComponentProps<'p'> & RootStylesProps
+
+function Paragraph({ weight, size, className, ...props }: ParagraphProps) {
+	return <p className={rootStyles({ weight, size, className })} {...props} />
+}
+
+export { Paragraph }

package/src/components/atoms/Typography/Paragraph/index.ts

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

package/src/components/atoms/Typography/Text/Text.styles.ts

@@ -0,0 +1,39 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		text: 'text-gray-800',
+		//
+		dark: 'dark:text-dark-gray-300'
+	}),
+	{
+		variants: {
+			size: {
+				'2xs': 'text-2xs',
+				xs: 'text-xs',
+				sm: 'text-sm',
+				md: 'text-base',
+				lg: 'text-lg'
+			},
+			strong: {
+				true: 'font-semibold'
+			},
+			muted: {
+				true: 'text-gray! dark:text-dark-gray-600!'
+			},
+			accent: {
+				true: 'text-gray-900! dark:text-dark-gray-200!'
+			}
+		},
+		defaultVariants: {
+			size: 'md',
+			strong: false,
+			muted: false,
+			accent: false
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Typography/Text/Text.tsx

@@ -0,0 +1,25 @@
+import { type ComponentProps } from 'react'
+
+import { RootStylesProps, rootStyles } from './Text.styles'
+
+type TextProps = ComponentProps<'span'> & RootStylesProps
+
+function Text({
+	strong = false,
+	muted = false,
+	accent = false,
+	size,
+	className,
+	...props
+}: TextProps) {
+	const Comp = strong ? 'strong' : 'span'
+
+	return (
+		<Comp
+			className={rootStyles({ strong, muted, accent, size, className })}
+			{...props}
+		/>
+	)
+}
+
+export { Text }

package/src/components/atoms/Typography/Text/index.ts

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

package/src/components/atoms/Typography/Title/Title.styles.ts

@@ -0,0 +1,28 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		text: 'text-gray-900 font-semibold leading-[137%]!',
+		//
+		dark: 'dark:text-dark-gray-200'
+	}),
+	{
+		variants: {
+			level: {
+				1: 'text-4xl',
+				2: 'text-3xl',
+				3: 'text-[26px]',
+				4: 'text-2xl',
+				5: 'text-lg',
+				6: 'text-base'
+			}
+		},
+		defaultVariants: {
+			level: 1
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Typography/Title/Title.tsx

@@ -0,0 +1,15 @@
+import { type ComponentProps } from 'react'
+
+import { RootStylesProps, rootStyles } from './Title.styles'
+
+type TitleProps = ComponentProps<'h1'> & RootStylesProps
+
+function Title({ level = 1, className, ...props }: TitleProps) {
+	const titleLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const
+
+	const Comp = titleLevels[level! - 1]
+
+	return <Comp className={rootStyles({ level, className })} {...props} />
+}
+
+export { Title }

package/src/components/atoms/Typography/Title/index.ts

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

package/src/components/atoms/Typography/Typography.tsx

@@ -0,0 +1,21 @@
+import { type ComponentProps } from 'react'
+
+import { Display } from './Display'
+import { Link } from './Link'
+import { Paragraph } from './Paragraph'
+import { Text } from './Text'
+import { Title } from './Title'
+
+type TypographyProps = ComponentProps<'article'>
+
+function Typography({ ...props }: TypographyProps) {
+	return <article {...props} />
+}
+
+Typography.Display = Display
+Typography.Link = Link
+Typography.Paragraph = Paragraph
+Typography.Text = Text
+Typography.Title = Title
+
+export { Typography }

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

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

package/src/components/atoms/icons/AvanpostIcon.tsx

@@ -0,0 +1,31 @@
+function AvanpostIcon({ color = 'currentColor', size = 24, ...props }) {
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox='0 0 1000 1000'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...props}
+		>
+			<path
+				d='M120.754 900.708H350.349L381.074 774.68C385.084 758.232 378.855 740.703 363.418 733.39C340.162 722.371 309.099 712.932 264.954 699.517L178.517 673.252L120.754 900.708Z'
+				fill={color}
+			/>
+			<path
+				d='M662.282 50.96L819.709 670.872L730.916 645.032C652.789 622.297 613.725 610.929 587.599 582.957C566.071 559.909 559.395 527.164 553.092 496.243C552.821 494.909 552.55 493.579 552.277 492.253L499.415 234.228L446.553 492.253C446.281 493.579 446.01 494.909 445.738 496.243C439.435 527.164 432.759 559.909 411.232 582.957C385.105 610.929 346.042 622.297 267.915 645.032L179.121 670.872L336.548 50.96H662.282Z'
+				fill={color}
+			/>
+			<path
+				d='M878.077 900.708H648.481L617.757 774.68C613.747 758.232 619.976 740.703 635.412 733.39C658.668 722.371 689.732 712.932 733.877 699.517L820.314 673.252L878.077 900.708Z'
+				fill={color}
+			/>
+			<path
+				d='M499.415 469.298C515.116 545.439 522.966 583.51 546.771 610.908C550.982 615.755 555.523 620.302 560.364 624.518C587.729 648.352 625.754 656.211 701.804 671.93C625.754 687.649 587.729 695.509 560.364 719.343C555.523 723.559 550.982 728.106 546.771 732.952C522.966 760.351 515.116 798.422 499.415 874.562C483.715 798.422 475.865 760.351 452.06 732.952C447.849 728.106 443.307 723.559 438.467 719.343C411.102 695.509 373.077 687.649 297.027 671.93C373.077 656.211 411.102 648.352 438.467 624.517C443.307 620.302 447.849 615.755 452.06 610.908C475.865 583.51 483.715 545.439 499.415 469.298Z'
+				fill={color}
+			/>
+		</svg>
+	)
+}
+
+export { AvanpostIcon }

package/src/components/atoms/icons/CheckIcon.tsx

@@ -0,0 +1,22 @@
+function CheckIcon({ color = 'currentColor', size = 24, ...props }) {
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox='0 0 14 14'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...props}
+		>
+			<path
+				d='M2.91675 7L5.83341 9.91666L11.6667 4.08333'
+				stroke={color}
+				strokeWidth={2}
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+		</svg>
+	)
+}
+
+export { CheckIcon }

package/src/components/atoms/icons/EmptyIcon.tsx

@@ -0,0 +1,56 @@
+function EmptyIcon({ color = 'currentColor', size = 24, ...props }) {
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox='0 0 184 152'
+			xmlns='http://www.w3.org/2000/svg'
+			{...props}
+		>
+			<g fill='none' fillRule='evenodd'>
+				<g transform='translate(24 31.67)'>
+					<ellipse
+						fillOpacity='0.8'
+						fill='#F5F5F7'
+						cx='67.797'
+						cy='106.89'
+						rx='67.797'
+						ry='12.668'
+					></ellipse>
+					<path
+						d='M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z'
+						fill='#AEB8C2'
+					></path>
+					<path
+						d='M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z'
+						fill='url(#linearGradient-1)'
+						transform='translate(13.56)'
+					></path>
+					<path
+						d='M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z'
+						fill='#F5F5F7'
+					></path>
+					<path
+						d='M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z'
+						fill={color}
+					></path>
+				</g>
+				<path
+					d='M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z'
+					fill={color}
+				></path>
+				<g transform='translate(149.65 15.383)' fill='#FFF'>
+					<ellipse
+						cx='20.654'
+						cy='3.167'
+						rx='2.849'
+						ry='2.815'
+					></ellipse>
+					<path d='M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z'></path>
+				</g>
+			</g>
+		</svg>
+	)
+}
+
+export { EmptyIcon }