bmdl-sdk 1.5.9 → 2.0.0

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

@@ -0,0 +1,149 @@
+import { cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const triggerStyles = cva(
+	twJoin({
+		display: 'flex justify-between items-center overflow-hidden',
+		text: 'text-gray whitespace-nowrap',
+		visual: 'border border-divider bg-white',
+		animation: 'transition duration-300',
+		hover: {
+			visual: 'hover:border-gray',
+			focus: {
+				visual: 'hover:focus-visible:border-primary'
+			}
+		},
+		focus: 'focus-visible:outline-none focus-visible:border-primary focus-visible:shadow-sm',
+		disabled: {
+			mouse: 'disabled:cursor-not-allowed!',
+			text: 'disabled:text-secondary',
+			visual: 'disabled:bg-gray-100',
+			attrs: 'disabled:[&_svg]:text-secondary'
+		},
+		attrs: 'data-[state=open]:border-primary data-[state=open]:shadow-sm',
+		childs: [
+			'[&_span]:first:mr-2',
+			'[&_span]:first:flex',
+			'[&_span]:first:items-center',
+			'[&_span]:first:gap-x-2',
+			'[&_span]:first:[&_svg]:size-5',
+			'[&_svg]:text-gray-800'
+		],
+		//
+		dark: {
+			text: 'dark:text-dark-gray-600',
+			visual: 'dark:border-dark-divider dark:bg-dark-gray-900',
+			disabled: {
+				text: 'dark:disabled:text-secondary',
+				visual: 'dark:disabled:bg-secondary/16'
+			},
+			hover: {
+				visual: 'dark:hover:border-dark-gray',
+				focus: {
+					visual: 'dark:focus-visible:shadow-dark-sm'
+				},
+				childs: ['dark:[&_svg]:text-dark-gray-300']
+			}
+		}
+	}),
+	{
+		variants: {
+			size: {
+				sm: twJoin({
+					display: 'h-7 py-2 px-2.5',
+					text: 'text-sm',
+					visual: 'rounded-sm',
+					childs: '[&_svg]:size-4'
+				}),
+				md: twJoin({
+					display: 'h-9.5 py-2 px-3.5',
+					text: 'text-base',
+					visual: 'rounded-md',
+					childs: '[&_svg]:size-5'
+				}),
+				lg: twJoin({
+					display: 'h-12 py-3 px-4',
+					text: 'text-lg',
+					visual: 'rounded-lg',
+					childs: '[&_svg]:size-6'
+				})
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	}
+)
+
+// /////////////////////////
+
+export const viewportStyles = cva('p-1', {
+	variants: {
+		position: {
+			popper: twJoin({
+				display: 'w-full scroll-my-1',
+				vars: [
+					'h-[var(--radix-select-trigger-height)]',
+					'min-w-[var(--radix-select-trigger-width)]'
+				]
+			}),
+			'item-aligned': ''
+		}
+	},
+	defaultVariants: {
+		position: 'popper'
+	}
+})
+
+// /////////////////////////
+
+export const contentStyles = cva(
+	twJoin({
+		position: 'relative z-50',
+		display: 'min-w-[8rem] overflow-x-hidden overflow-y-auto',
+		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-select-content-available-height)',
+			'origin-(--radix-select-content-transform-origin)'
+		],
+		//
+		dark: {
+			text: 'dark:text-dark-gray-300',
+			visual: 'dark:bg-tooltip dark:shadow-dark-lg'
+		}
+	}),
+	{
+		variants: {
+			position: {
+				popper: twJoin({
+					attrs: [
+						'data-[side=top]:-translate-y-1',
+						'data-[side=right]:translate-x-1',
+						'data-[side=bottom]:translate-y-1',
+						'data-[side=left]:-translate-x-1'
+					]
+				}),
+				'item-aligned': ''
+			}
+		},
+		defaultVariants: {
+			position: 'popper'
+		}
+	}
+)

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

@@ -0,0 +1,68 @@
+import { type ComponentProps, type ReactNode } from 'react'
+
+import { Select as RadixSelect } from 'radix-ui'
+
+import { TbChevronDown } from 'react-icons/tb'
+
+import { contentStyles, triggerStyles, viewportStyles } from './Select.styles'
+
+import { Item } from './Item'
+
+type SelectProps = ComponentProps<typeof RadixSelect.Root> &
+	ComponentProps<typeof RadixSelect.Value> &
+	ComponentProps<typeof RadixSelect.Content> & {
+		trigger?: ReactNode
+	}
+
+function Select({
+	trigger,
+	placeholder,
+	children,
+	align,
+	position = 'popper',
+	sideOffset,
+	className,
+	...props
+}: SelectProps) {
+	return (
+		<RadixSelect.Root {...props}>
+			<RadixSelect.Trigger
+				asChild={!!trigger}
+				className={!trigger ? triggerStyles({ className }) : ''}
+			>
+				{trigger ? (
+					trigger
+				) : (
+					<>
+						<RadixSelect.Value placeholder={placeholder} />
+						<RadixSelect.Icon>
+							<TbChevronDown />
+						</RadixSelect.Icon>
+					</>
+				)}
+			</RadixSelect.Trigger>
+			<RadixSelect.Portal>
+				<RadixSelect.Content
+					align={align}
+					position={position}
+					sideOffset={sideOffset}
+					className={contentStyles({ position, className })}
+				>
+					<RadixSelect.ScrollUpButton />
+					<RadixSelect.Viewport
+						className={viewportStyles({ position })}
+					>
+						{children}
+					</RadixSelect.Viewport>
+					<RadixSelect.ScrollDownButton />
+					<RadixSelect.Arrow />
+				</RadixSelect.Content>
+			</RadixSelect.Portal>
+		</RadixSelect.Root>
+	)
+}
+
+Select.Item = Item
+Select.Value = RadixSelect.Value
+
+export { Select }

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

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

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

@@ -0,0 +1,13 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	visual: 'bg-divider',
+	attrs: [
+		'data-[orientation="horizontal"]:h-px',
+		'data-[orientation="vertical"]:w-px data-[orientation="vertical"]:h-full'
+	],
+	//
+	dark: {
+		visual: 'dark:bg-dark-divider'
+	}
+})

package/src/components/atoms/Separator/Separator.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+
+import { Separator as SeparatorRadix } from 'radix-ui'
+
+import { rootStyles } from './Separator.styles'
+
+type AvatarProps = ComponentProps<typeof SeparatorRadix.Root>
+
+function Separator({ orientation, decorative, className }: AvatarProps) {
+	return (
+		<SeparatorRadix.Root
+			orientation={orientation}
+			decorative={decorative}
+			className={clsx(rootStyles, className)}
+		/>
+	)
+}
+
+export { Separator }

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

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

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

@@ -0,0 +1,100 @@
+import { VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const overlayStyles = twJoin({
+	position: 'fixed inset-0 z-50',
+	visual: 'bg-black/50',
+	attrs: [
+		'data-[state=open]:animate-in',
+		'data-[state=open]:fade-in-0',
+		//
+		'data-[state=closed]:animate-out',
+		'data-[state=closed]:fade-out-0'
+	]
+})
+
+// /////////////////////////
+
+export const contentStyles = cva(
+	twJoin({
+		position: 'fixed z-50',
+		display: 'flex flex-col gap-4',
+		visual: 'bg-white shadow-lg border-divider',
+		animation: 'transition ease-in-out',
+		attrs: [
+			'data-[state=open]:animate-in',
+			'data-[state=open]:duration-500',
+			//
+			'data-[state=closed]:animate-out',
+			'data-[state=closed]:duration-300'
+		],
+		//
+		dark: 'dark:bg-dark-gray-900 dark:shadow-dark-lg  dark:border-dark-divider'
+	}),
+	{
+		variants: {
+			side: {
+				right: twJoin({
+					position: 'inset-y-0 right-0',
+					display: 'w-3/4 h-full sm:max-w-sm',
+					visual: 'border-l',
+					attrs: [
+						'data-[state=open]:slide-in-from-right',
+						'data-[state=closed]:slide-out-to-right'
+					]
+				}),
+				left: twJoin({
+					position: 'inset-y-0 left-0',
+					display: 'w-3/4 h-full sm:max-w-sm',
+					visual: 'border-r',
+					attrs: [
+						'data-[state=open]:slide-in-from-left',
+						'data-[state=closed]:slide-out-to-left'
+					]
+				}),
+				top: twJoin({
+					position: 'inset-x-0 top-0',
+					display: 'h-auto',
+					visual: 'border-b',
+					attrs: [
+						'data-[state=open]:slide-in-from-top',
+						'data-[state=closed]:slide-out-to-top'
+					]
+				}),
+				bottom: twJoin({
+					position: 'inset-x-0 bottom-0',
+					display: 'h-auto',
+					visual: 'border-t',
+					attrs: [
+						'data-[state=open]:slide-in-from-bottom',
+						'data-[state=closed]:slide-out-to-bottom'
+					]
+				})
+			}
+		},
+		defaultVariants: {
+			side: 'left'
+		}
+	}
+)
+
+export type ContentStylesProps = VariantProps<typeof contentStyles>
+
+// /////////////////////////
+
+export const headerStyles = twJoin({
+	display: 'hidden'
+})
+
+// /////////////////////////
+
+export const closeStyles = twJoin({
+	position: 'absolute top-4 right-4',
+	display: 'opacity-70',
+	visual: 'rounded-xs',
+	animation: 'transition-opacity',
+	hover: 'hover:opacity-100',
+	disabled: 'disabled:pointer-events-none',
+	attrs: 'data-[state=open]:bg-secondary'
+})

package/src/components/atoms/Sheet/Sheet.tsx

@@ -0,0 +1,53 @@
+import * as SheetRadix from '@radix-ui/react-dialog'
+import { type ComponentProps } from 'react'
+
+import { IoClose } from 'react-icons/io5'
+
+import {
+	type ContentStylesProps,
+	closeStyles,
+	contentStyles,
+	headerStyles,
+	overlayStyles
+} from './Sheet.styles'
+
+type SheetProps = ComponentProps<typeof SheetRadix.Root> &
+	ContentStylesProps & {
+		title?: string
+		description?: string
+		closeButton?: boolean
+		className?: string
+	}
+
+function Sheet({
+	title,
+	description,
+	closeButton,
+	children,
+	side,
+	className,
+	...props
+}: SheetProps) {
+	return (
+		<SheetRadix.Root {...props}>
+			<SheetRadix.Portal>
+				<SheetRadix.Overlay className={overlayStyles} />
+				<SheetRadix.Content
+					className={contentStyles({ side, className })}
+				>
+					<div className={headerStyles}>
+						<SheetRadix.Title>{title}</SheetRadix.Title>
+					</div>
+					{children}
+					{closeButton && (
+						<SheetRadix.Close className={closeStyles}>
+							<IoClose />
+						</SheetRadix.Close>
+					)}
+				</SheetRadix.Content>
+			</SheetRadix.Portal>
+		</SheetRadix.Root>
+	)
+}
+
+export { Sheet }

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

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

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

@@ -0,0 +1,30 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		display: 'inline-block',
+		visual: 'bg-gray-200',
+		animation: 'animate-pulse',
+		//
+		dark: 'dark:bg-dark-gray-800'
+	}),
+	{
+		variants: {
+			circle: {
+				true: 'rounded-full!'
+			},
+			size: {
+				sm: 'rounded-sm',
+				md: 'rounded-md'
+			}
+		},
+		defaultVariants: {
+			circle: false,
+			size: 'md'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react'
+
+import { rootStyles, type RootStylesProps } from './Skeleton.styles'
+
+type SkeletonProps = ComponentProps<'div'> & RootStylesProps
+
+function Skeleton({ circle, size, className }: SkeletonProps) {
+	return <span className={rootStyles({ circle, size, className })} />
+}
+
+export { Skeleton }

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

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

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

@@ -0,0 +1,17 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'size-full inline-flex items-center justify-center p-2',
+	text: 'text-gray',
+	//
+	dark: {
+		text: 'dark:text-dark-gray-800'
+	}
+})
+
+// /////////////////////////
+
+export const iconStyles = twJoin({
+	text: 'leading-none',
+	animation: 'animate-spin'
+})

package/src/components/atoms/Spin/Spin.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx'
+
+import { TbLoader2 } from 'react-icons/tb'
+
+import { iconStyles, rootStyles } from './Spin.styles'
+
+type SpinProps = {
+	className?: string
+}
+
+function Spin({ className }: SpinProps) {
+	return (
+		<span className={clsx(rootStyles, className)}>
+			<TbLoader2 className={iconStyles} />
+		</span>
+	)
+}
+
+export { Spin }

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

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

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

@@ -0,0 +1,34 @@
+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>
+
+// /////////////////////////
+
+export const thumbStyles = twJoin({
+	display: 'block size-3',
+	visual: 'bg-divider rounded-full',
+	animation: 'transition-all',
+	attrs: 'data-[state="checked"]:translate-x-full data-[state="checked"]:bg-white'
+})

package/src/components/atoms/Switch/Switch.tsx

@@ -0,0 +1,20 @@
+import { type ComponentProps } from 'react'
+
+import { Switch as RadixSwitch } from 'radix-ui'
+
+import { type RootStylesProps, rootStyles, thumbStyles } from './Switch.styles'
+
+type SwitchProps = ComponentProps<typeof RadixSwitch.Root> & RootStylesProps
+
+function Switch({ color, className, ...props }: SwitchProps) {
+	return (
+		<RadixSwitch.Root
+			className={rootStyles({ color, className })}
+			{...props}
+		>
+			<RadixSwitch.Thumb className={thumbStyles} />
+		</RadixSwitch.Root>
+	)
+}
+
+export { Switch }

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

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

package/src/components/atoms/Table/FilterContent/FilterContent.styles.ts

@@ -0,0 +1,33 @@
+import { twJoin } from '@/utils'
+
+export const filterContentStyles = twJoin({
+	display: 'min-w-48 -mx-2 mb-2 pb-2',
+	visual: 'border-b border-divider',
+	childs: '[&_svg]:size-4.5',
+	//
+	dark: {
+		visual: 'dark:border-dark-divider'
+	}
+})
+
+// /////////////////////////
+
+export const filterButtonStyles = twJoin({
+	display: 'flex w-full items-center px-2 py-1 mt-0.5 first:mt-0',
+	visual: 'rounded-sm',
+	hover: 'hover:bg-gray-100',
+	attrs: [
+		'data-[state=checked]:bg-primary/16',
+		'data-[state=checked]:[&_span]:text-primary'
+	],
+	//
+	dark: {
+		hover: 'dark:[&[data-state="unchecked"]]:hover:bg-dark-gray-800/50'
+	}
+})
+
+// /////////////////////////
+
+export const filterButtonTextStyles = twJoin({
+	display: 'inline-flex items-center gap-1.5'
+})