bmdl-sdk 1.5.9 → 2.0.1

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

@@ -0,0 +1,141 @@
+function LogoIcon({ size = 24, ...props }) {
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox='0 0 4000 3860'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...props}
+		>
+			<g
+				transform='translate(0,3860) scale(0.1,-0.1)'
+				fill='#7367F0'
+				stroke='none'
+			>
+				<path
+					d='M7485 38594 c-404 -31 -604 -54 -880 -100 -1351 -225 -2635 -808
+-3700 -1681 -396 -324 -794 -722 -1118 -1118 -779 -951 -1330 -2079 -1597
+-3270 -73 -326 -124 -644 -163 -1021 l-22 -219 0 -11885 c0 -11368 1 -11893
+18 -12065 62 -623 152 -1088 312 -1620 297 -985 796 -1918 1452 -2720 172
+-210 319 -371 533 -585 297 -297 515 -487 830 -724 1194 -898 2559 -1427 4040
+-1566 311 -29 1167 -29 1476 0 1497 140 2877 678 4068 1584 87 67 222 169 300
+227 77 59 155 118 172 133 18 14 36 26 41 26 5 0 22 13 38 30 16 16 33 30 38
+30 5 0 24 12 42 28 31 25 58 45 231 170 37 26 84 62 105 81 22 18 39 30 39 26
+0 -8 109 87 196 170 28 28 94 89 145 137 52 47 121 112 154 143 33 32 107 101
+165 153 58 53 1337 1327 2843 2831 1505 1505 2742 2736 2747 2736 5 0 1208
+-1197 2672 -2661 1465 -1463 2710 -2703 2768 -2756 58 -52 132 -121 165 -153
+33 -31 102 -96 154 -143 51 -48 117 -109 145 -137 87 -83 196 -178 196 -170 0
+4 17 -8 39 -26 21 -19 68 -55 105 -81 173 -125 200 -145 231 -171 18 -15 37
+-27 42 -27 5 0 22 -14 38 -30 16 -17 33 -30 38 -30 5 0 23 -12 41 -26 17 -14
+76 -60 132 -103 56 -42 159 -125 230 -185 794 -668 1780 -1201 2774 -1499 538
+-162 1017 -255 1574 -307 309 -29 1165 -29 1476 0 1238 116 2409 510 3455
+1163 734 458 1401 1044 1948 1712 656 802 1155 1735 1452 2720 160 532 250
+997 312 1620 17 172 18 697 18 12065 l0 11885 -22 219 c-87 845 -269 1583
+-571 2306 -502 1208 -1296 2275 -2307 3103 -801 656 -1736 1155 -2720 1452
+-534 161 -1035 257 -1625 312 -276 26 -1101 26 -1365 0 -934 -91 -1703 -288
+-2530 -650 -415 -181 -938 -475 -1298 -728 -98 -69 -117 -79 -117 -58 0 6 -13
+0 -29 -13 -16 -12 -45 -33 -63 -46 -60 -42 -312 -229 -344 -256 -18 -14 -36
+-26 -41 -26 -5 0 -22 -13 -38 -30 -16 -16 -33 -30 -38 -30 -5 0 -24 -12 -42
+-27 -31 -26 -72 -56 -234 -172 -35 -25 -81 -61 -102 -80 -22 -18 -39 -30 -39
+-26 0 8 -109 -87 -196 -170 -28 -27 -94 -89 -145 -137 -52 -47 -121 -112 -154
+-143 -33 -32 -107 -101 -165 -153 -58 -53 -1380 -1370 -2938 -2926 -1558
+-1557 -2834 -2831 -2837 -2831 -3 0 -1212 1206 -2687 2681 -1476 1474 -2730
+2723 -2788 2776 -58 52 -132 121 -165 153 -33 31 -102 96 -154 143 -51 48
+-117 110 -145 137 -87 83 -196 178 -196 170 0 -4 -17 8 -39 26 -21 19 -68 55
+-105 82 -173 124 -200 144 -231 170 -18 15 -37 27 -42 27 -5 0 -22 14 -38 30
+-16 17 -33 30 -38 30 -5 0 -23 12 -41 26 -31 26 -280 211 -344 256 -18 13 -45
+32 -59 43 -15 11 -33 20 -40 21 -7 1 -34 20 -61 41 -26 22 -101 80 -167 129
+-1012 758 -2170 1260 -3390 1469 -514 88 -731 106 -1305 110 -256 1 -487 1
+-515 -1z m985 -5301 c265 -32 552 -107 747 -194 23 -11 45 -19 48 -19 15 0
+274 -135 358 -187 87 -54 290 -202 367 -267 19 -17 98 -93 174 -171 77 -77
+143 -140 147 -140 4 0 509 -501 1123 -1112 613 -612 1121 -1113 1128 -1113 7
+0 855 -842 1883 -1871 l1870 -1870 -2743 -2740 c-2463 -2460 -2749 -2749
+-2792 -2820 -65 -107 -147 -276 -195 -404 -188 -495 -223 -1040 -100 -1552 52
+-217 127 -415 233 -616 71 -135 199 -334 242 -377 3 -3 30 -36 61 -75 67 -84
+221 -241 304 -310 33 -28 65 -54 71 -60 7 -5 24 -19 40 -30 15 -11 39 -29 53
+-41 51 -41 248 -161 346 -211 237 -120 465 -199 666 -228 57 -9 149 -23 204
+-31 55 -8 116 -19 135 -24 22 -6 1481 -10 4015 -10 l3980 0 -5448 -5448
+c-4888 -4887 -5461 -5456 -5569 -5537 -67 -49 -164 -116 -216 -148 -85 -53
+-342 -187 -357 -187 -3 0 -25 -8 -48 -19 -23 -10 -87 -35 -142 -54 -609 -215
+-1282 -215 -1890 0 -55 19 -113 41 -130 48 -16 8 -52 23 -80 35 -188 82 -373
+191 -550 324 -150 113 -165 125 -305 266 -141 140 -153 155 -266 305 -175 233
+-304 472 -402 745 -73 204 -149 520 -159 663 -3 42 -10 77 -14 77 -13 0 -11
+22157 1 22240 5 36 14 175 20 310 20 436 60 675 167 975 19 55 44 119 54 142
+11 23 19 45 19 48 0 15 135 274 187 358 54 88 204 293 267 367 38 43 249 254
+296 295 19 17 89 71 155 121 587 442 1314 636 2045 547z m23735 1 c513 -62
+964 -243 1370 -548 66 -50 136 -104 155 -121 47 -41 258 -252 296 -295 63 -74
+213 -279 267 -367 52 -84 187 -343 187 -358 0 -3 8 -25 19 -48 28 -64 87 -231
+115 -332 32 -112 59 -256 86 -450 11 -82 27 -184 35 -225 12 -65 14 -1601 15
+-11363 0 -9999 -2 -11290 -15 -11303 -8 -9 -15 -31 -15 -50 0 -77 -48 -346
+-86 -479 -99 -352 -253 -665 -468 -950 -113 -150 -125 -165 -266 -305 -140
+-141 -155 -153 -305 -266 -172 -129 -355 -238 -535 -317 -103 -46 -133 -58
+-225 -90 -606 -215 -1281 -215 -1890 0 -55 19 -119 44 -142 54 -23 11 -45 19
+-48 19 -15 0 -274 135 -358 187 -245 151 -120 29 -3497 3408 l-3175 3176 2829
+2826 c2537 2534 2833 2833 2876 2905 65 106 147 275 195 403 188 495 223 1040
+100 1552 -52 217 -127 415 -233 616 -71 135 -199 334 -242 377 -3 3 -30 37
+-61 75 -67 84 -221 241 -304 310 -33 28 -65 55 -71 60 -7 6 -24 19 -40 30 -15
+11 -39 29 -53 41 -51 41 -248 161 -346 211 -250 127 -517 215 -790 258 -55 9
+-101 20 -103 25 -2 7 -1470 10 -4055 10 l-4052 0 5360 5361 c3953 3954 5385
+5380 5455 5433 52 40 137 98 187 129 84 52 343 187 358 187 3 0 25 8 48 19 23
+10 87 35 142 54 411 145 848 193 1280 141z'
+				/>
+			</g>
+			<g
+				transform='translate(0,3860) scale(0.1,-0.1)'
+				fill='#685DD7'
+				stroke='none'
+			>
+				<path
+					d='M16570 33464 c-6 -32 -22 -108 -35 -169 -36 -164 -115 -538 -195
+-915 -38 -184 -75 -355 -80 -379 -6 -24 -31 -139 -55 -255 -25 -116 -72 -339
+-105 -496 -33 -157 -78 -368 -100 -470 -22 -102 -60 -282 -85 -400 -136 -636
+-219 -1031 -290 -1369 -25 -117 -50 -232 -55 -255 -6 -22 -39 -180 -75 -351
+-36 -170 -100 -469 -141 -664 l-76 -354 519 -519 518 -518 1860 1860 1860
+1860 -1726 1726 -1727 1727 -12 -59z'
+				/>
+				<path
+					d='M21815 10430 l-1860 -1860 1725 -1725 c948 -948 1725 -1723 1727
+-1721 2 1 14 56 28 122 13 65 49 236 80 379 31 143 67 312 80 375 13 63 51
+243 85 400 33 157 81 380 105 495 25 116 72 338 105 495 33 157 78 368 100
+470 22 102 60 282 85 400 136 636 219 1031 290 1369 25 117 50 232 55 255 6
+22 39 181 75 351 36 171 100 469 141 664 l76 354 -519 519 -518 518 -1860
+-1860z'
+				/>
+			</g>
+			<g
+				transform='translate(0,3860) scale(0.1,-0.1)'
+				fill='#6D62E3'
+				stroke='none'
+			>
+				<path
+					d='M12650 33533 l0 -3518 1314 -1314 c1159 -1159 1314 -1310 1319 -1290
+7 31 127 594 212 994 36 171 69 329 75 351 5 23 30 138 55 255 71 338 154 733
+290 1369 25 118 63 298 85 400 22 102 67 313 100 470 33 157 80 380 105 495
+24 116 72 338 105 495 34 157 72 337 85 400 13 63 49 232 80 375 31 143 67
+316 81 384 l26 124 -952 951 c-523 523 -988 984 -1033 1024 -45 39 -122 111
+-172 158 -49 47 -132 125 -184 172 -51 48 -117 110 -145 137 -87 83 -196 178
+-196 170 0 -4 -17 8 -39 26 -21 19 -67 55 -102 80 -162 116 -203 146 -234 172
+-18 15 -37 27 -42 27 -5 0 -22 14 -38 30 -16 17 -33 30 -38 30 -5 0 -23 12
+-41 26 -31 26 -280 211 -344 256 -18 13 -45 32 -59 43 -15 11 -33 20 -40 21
+-7 1 -34 20 -61 41 -26 22 -84 67 -129 102 l-83 62 0 -3518z'
+				/>
+				<path
+					d='M24707 11229 c-7 -31 -127 -594 -212 -994 -36 -170 -69 -329 -75
+-351 -5 -23 -30 -138 -55 -255 -71 -338 -154 -733 -290 -1369 -25 -118 -63
+-298 -85 -400 -22 -102 -67 -313 -100 -470 -33 -157 -80 -379 -105 -495 -24
+-115 -72 -338 -105 -495 -34 -157 -72 -337 -85 -400 -13 -63 -49 -232 -80
+-375 -31 -143 -67 -316 -81 -384 l-26 -124 952 -951 c523 -523 988 -984 1033
+-1024 45 -39 123 -111 172 -158 50 -47 132 -125 184 -172 51 -48 117 -109 145
+-137 87 -83 196 -178 196 -170 0 4 17 -8 39 -26 21 -19 70 -56 107 -83 38 -28
+98 -70 133 -95 34 -25 78 -58 96 -74 18 -15 37 -27 42 -27 5 0 22 -14 38 -30
+16 -17 33 -30 38 -30 5 0 23 -12 41 -26 31 -26 280 -211 344 -256 18 -13 45
+-32 59 -43 15 -11 33 -20 40 -21 7 -1 34 -20 61 -41 26 -22 84 -67 130 -102
+l82 -62 0 3518 0 3518 -1314 1314 c-1159 1159 -1314 1310 -1319 1290z'
+				/>
+			</g>
+		</svg>
+	)
+}
+
+export { LogoIcon }

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

@@ -0,0 +1,25 @@
+import { IconBaseProps } from 'react-icons/lib'
+
+function NumberTypeIcon({
+	color = 'currentColor',
+	size = 24,
+	...props
+}: IconBaseProps) {
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox='0 0 16 16'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...props}
+		>
+			<path
+				d='M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z'
+				fill={color}
+			/>
+		</svg>
+	)
+}
+
+export { NumberTypeIcon }

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

@@ -0,0 +1,75 @@
+function SidebarCloseIcon({ color = 'currentColor', size = 24, ...props }) {
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox='0 0 24 24'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...props}
+		>
+			<path
+				d='M20 6H13'
+				stroke={color}
+				strokeWidth='1.75'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M20 6H13'
+				stroke='white'
+				strokeOpacity='0.1'
+				strokeWidth='1.75'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M20 12H11'
+				stroke={color}
+				strokeWidth='1.75'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M20 12H11'
+				stroke='white'
+				strokeOpacity='0.1'
+				strokeWidth='1.75'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M20 18H13'
+				stroke={color}
+				strokeWidth='1.75'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M20 18H13'
+				stroke='white'
+				strokeOpacity='0.1'
+				strokeWidth='1.75'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M8 8L4 12L8 16'
+				stroke={color}
+				strokeWidth='1.75'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M8 8L4 12L8 16'
+				stroke='white'
+				strokeOpacity='0.1'
+				strokeWidth='1.75'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+		</svg>
+	)
+}
+
+export { SidebarCloseIcon }

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

@@ -0,0 +1,6 @@
+export { LogoIcon } from './LogoIcon'
+export { AvanpostIcon } from './AvanpostIcon'
+export { CheckIcon } from './CheckIcon'
+export { EmptyIcon } from './EmptyIcon'
+export { SidebarCloseIcon } from './SidebarCloseIcon'
+export { NumberTypeIcon } from './NumberTypeIcon'

package/src/components/atoms/index.ts

@@ -0,0 +1,31 @@
+export { Actions } from './Actions'
+export { Avatar } from './Avatar'
+export { Badge } from './Badge'
+export { Button } from './Button'
+export { Calendar } from './Calendar'
+export { Checkbox } from './Checkbox'
+export { Date } from './Date'
+export { DatePicker } from './DatePicker'
+export { Dialog } from './Dialog'
+export { Dropdown } from './Dropdown'
+export { Form } from './Form'
+export { Input } from './Input'
+export { Label } from './Label'
+export { Logo } from './Logo'
+export { Pagination } from './Pagination'
+export { Popover } from './Popover'
+export { Radio } from './Radio'
+export { RangeNumber } from './RangeNumber'
+export { Select } from './Select'
+export { Separator } from './Separator'
+export { Sheet } from './Sheet'
+export { Skeleton } from './Skeleton'
+export { Spin } from './Spin'
+export { Switch } from './Switch'
+export { Table } from './Table'
+export { Tabs } from './Tabs'
+export { Textarea } from './Textarea'
+export { Toast, toast } from './Toast'
+export { Tooltip } from './Tooltip'
+export { Typography } from './Typography'
+

package/src/components/molecules/DataTable/CreationModal/CreationModal.tsx

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react'
+
+import { Dialog } from '@/components/atoms'
+
+type CreationModalProps = {
+	children: ReactNode
+	open: boolean
+	onEscapeKeyDown?: () => void
+	onCancel?: () => void
+	className?: string
+}
+
+export function CreationModal({
+	open,
+	onCancel,
+	onEscapeKeyDown,
+	children,
+	className
+}: CreationModalProps) {
+	return (
+		<Dialog
+			open={open}
+			onCancel={onCancel}
+			onEscapeKeyDown={onEscapeKeyDown}
+			className={className}
+			blur
+		>
+			{children}
+		</Dialog>
+	)
+}

package/src/components/molecules/DataTable/CreationModal/index.ts

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

package/src/components/molecules/DataTable/DataTable.styles.ts

@@ -0,0 +1,23 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display:
+		'max-h-[calc(100vh-176px)] max-w-[calc(100vw-122px)] overflow-hidden',
+	visual: 'bg-white rounded-md shadow-extra',
+	//
+	dark: {
+		visual: 'dark:bg-dark-gray-900 dark:shadow-dark-table'
+	}
+})
+
+// /////////////////////////
+
+export const headerStyles = twJoin({
+	display: 'flex p-6 gap-4'
+})
+
+// /////////////////////////
+
+export const dialogStyles = twJoin({
+	// display: 'max-w-210!'
+})

package/src/components/molecules/DataTable/DataTable.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import clsx from 'clsx'
+import { useTranslations } from 'next-intl'
+import { useRouter } from 'next/navigation'
+import {
+	ChangeEvent,
+	type ComponentProps,
+	type ReactNode,
+	useEffect,
+	useRef,
+	useState
+} from 'react'
+
+import { TbPlus } from 'react-icons/tb'
+
+import { Button, Input, Select, Table } from '@/components/atoms'
+
+import { IColumnItem, IFilterQuery, IPaginationOptions } from '@/types'
+
+import { dialogStyles, headerStyles, rootStyles } from './DataTable.styles'
+
+import { CreationModal } from './CreationModal'
+import { useDebounce } from '@/hooks'
+import { _, addParam, getParams, removeParam } from '@/utils'
+
+type DataTableProps = ComponentProps<'div'> & {
+	columns: IColumnItem[]
+	dataSource: any[]
+	pagination: IPaginationOptions
+	getData: (data: Record<string, any>) => void
+	filterQuery: IFilterQuery
+	listName?: string
+	creation: ReactNode
+}
+
+export function DataTable({
+	columns,
+	dataSource,
+	pagination,
+	getData,
+	filterQuery,
+	listName,
+	creation,
+	className
+}: DataTableProps) {
+	const tl = useTranslations(listName)
+	const t = useTranslations()
+	//
+	const router = useRouter()
+	//
+	const [q, setQ] = useState<string>()
+	const [limit, setLimit] = useState('10')
+	const [modalOpen, setModalOpen] = useState(false)
+	const debouncedQ = useDebounce(q, 350)
+	const isInit = useRef(false)
+	//
+	useEffect(() => {
+		const { q, limit } = getParams()
+		if (q) setQ(q)
+		if (limit) setLimit(limit)
+	}, [])
+	//
+	const openHandler = () => {
+		setModalOpen(true)
+	}
+	//
+	const cancelHandler = () => {
+		setModalOpen(false)
+	}
+	//
+	const changeLimitHandler = (value: string) => {
+		if (value === '10') {
+			removeParam(router, 'limit')
+		} else {
+			addParam(router, 'limit', value)
+		}
+		//
+		setTimeout(() => removeParam(router, 'page'), 350)
+		//
+		setLimit(value)
+		//
+		getData({
+			limit: +value,
+			page: 0
+		})
+	}
+	//
+	useEffect(() => {
+		if (debouncedQ) {
+			addParam(router, 'q', debouncedQ)
+		} else {
+			removeParam(router, 'q')
+		}
+
+		if (!isInit.current) {
+			if (!_.isUndefined(debouncedQ)) {
+				setTimeout(() => removeParam(router, 'page'), 350)
+				//
+				getData({
+					q: debouncedQ,
+					page: 0
+				})
+			}
+
+			isInit.current = true
+		}
+	}, [debouncedQ])
+	//
+	return (
+		<div className={clsx(rootStyles, className)}>
+			<div className={headerStyles}>
+				<Select
+					onValueChange={changeLimitHandler}
+					value={limit}
+					className='w-25'
+				>
+					<Select.Item value='1'>1</Select.Item>
+					<Select.Item value='2'>2</Select.Item>
+					<Select.Item value='3'>3</Select.Item>
+					<Select.Item value='10'>10</Select.Item>
+					<Select.Item value='50'>50</Select.Item>
+					<Select.Item value='100'>100</Select.Item>
+				</Select>
+				<Button className='mr-auto' onClick={openHandler}>
+					<TbPlus /> {listName ? tl('add') : t('add')}
+				</Button>
+				<Input.Search
+					value={q || ''}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						setQ(e.target.value)
+					}
+					placeholder={t('search')}
+					className='ml-auto w-65!'
+				/>
+				<Select defaultValue='all' className='w-38'>
+					<Select.Item value='all'>{t('all')}</Select.Item>
+					<Select.Item value='current'>{t('only-mine')}</Select.Item>
+					<Select.Item value='not-current'>
+						{t('besides-mine')}
+					</Select.Item>
+				</Select>
+			</div>
+			<Table
+				dataSource={dataSource}
+				columns={columns}
+				onRowSelection={() => {}}
+				pagination={{
+					...pagination,
+					name: listName,
+					limit: +limit
+				}}
+				getData={getData}
+				filterQuery={filterQuery}
+				actions
+			/>
+			<CreationModal
+				open={modalOpen}
+				onCancel={cancelHandler}
+				onEscapeKeyDown={cancelHandler}
+				className={dialogStyles}
+			>
+				{creation}
+			</CreationModal>
+		</div>
+	)
+}

package/src/components/molecules/DataTable/Name/Name.tsx

@@ -0,0 +1,20 @@
+import { type ComponentProps } from 'react'
+
+import { Typography } from '@/components/atoms'
+
+const { Text, Link } = Typography
+
+type TableStatusProps = ComponentProps<'a'> & {
+	name: string
+	href: string
+}
+
+function Name({ name, href }: TableStatusProps) {
+	return (
+		<Link href={href} className='flex' data-type='name'>
+			<Text>{name}</Text>
+		</Link>
+	)
+}
+
+export { Name }

package/src/components/molecules/DataTable/Name/index.ts

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

package/src/components/molecules/DataTable/Skeleton/Skeleton.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from '@/components/atoms'
+
+function SkeletonIcon() {
+	return <Skeleton className='size-8' />
+}
+
+function SkeletonConnects() {
+	return <Skeleton className='h-5 w-8' />
+}
+
+function SkeletonProfile() {
+	return (
+		<div className='flex items-center gap-1.5'>
+			<Skeleton circle className='size-8' />
+			<div className='flex flex-col gap-0.5'>
+				<Skeleton size={'sm'} className='h-3.5 w-30' />
+				<Skeleton size={'sm'} className='h-3.5 w-20' />
+			</div>
+		</div>
+	)
+}
+
+function SkeletonDate() {
+	return <Skeleton className='h-5 w-32' />
+}
+
+export { SkeletonConnects, SkeletonDate, SkeletonIcon, SkeletonProfile }

package/src/components/molecules/DataTable/Skeleton/index.ts

@@ -0,0 +1,6 @@
+export {
+	SkeletonConnects,
+	SkeletonDate,
+	SkeletonIcon,
+	SkeletonProfile
+} from './Skeleton'

package/src/components/molecules/DataTable/index.ts

@@ -0,0 +1,8 @@
+export { DataTable } from './DataTable'
+export { Name } from './Name'
+export {
+	SkeletonConnects,
+	SkeletonDate,
+	SkeletonIcon,
+	SkeletonProfile
+} from './Skeleton'

package/src/components/molecules/Header/Button/Button.styles.ts

@@ -0,0 +1,24 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'flex size-9.5 items-center justify-center',
+	visual: 'rounded-full outline-none',
+	hover: 'hover:bg-gray-100',
+	attrs: 'data-[state="open"]:bg-gray-100',
+	childs: [
+		'[&_span_span]:hidden',
+		'[&_span:has(img)]:size-6.5 [&_span:has(img)]:overflow-hidden [&_span:has(img)]:rounded-full',
+		'[&_span_img]:size-6.5 [&_span_img]:object-cover [&_span_img]:object-center [&_span_img]:rounded-full',
+	],
+	disabled: [
+		'disabled:cursor-not-allowed!',
+		'disabled:select-none',
+		'disabled:opacity-65',
+		'disabled:shadow-none'
+	],
+	//
+	dark: {
+		hover: 'dark:hover:bg-dark-gray-800/50',
+		attrs: ['dark:data-[state=open]:bg-dark-gray-800/50']
+	}
+})

package/src/components/molecules/Header/Button/Button.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+
+import { Slot } from 'radix-ui'
+
+import { rootStyles } from './Button.styles'
+
+type HeaderButtonProps = ComponentProps<'button'> & { asChild?: boolean }
+
+function HeaderButton({
+	asChild = false,
+	className,
+	...props
+}: HeaderButtonProps) {
+	const Comp = asChild ? Slot.Root : 'button'
+
+	return <Comp className={clsx(rootStyles, className)} {...props} />
+}
+
+export { HeaderButton }

package/src/components/molecules/Header/Button/index.ts

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

package/src/components/molecules/Header/Header.styles.ts

@@ -0,0 +1,16 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	position: 'sticky z-40 top-4',
+	display: 'flex h-15.5 items-center px-6 py-3',
+	text: 'text-gray-800',
+	visual: 'shadow-sm rounded-md bg-white',
+	childs: ['lg:[&_[data-type=sidebar-trigger]]:hidden'],
+	//
+	adaptive: '[&_[data-type=sidebar-trigger]]:flex',
+	//
+	dark: {
+		text: 'dark:text-dark-gray-300',
+		visual: 'dark:bg-dark-gray-900 dark:shadow-dark-sm'
+	}
+})

package/src/components/molecules/Header/Header.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { rootStyles } from './Header.styles'
+import { Navigate } from './Navigate'
+
+import { SelectLang } from './SelectLang'
+import { SelectTheme } from './SelectTheme'
+
+function Header() {
+	return (
+		<header className={rootStyles}>
+			<Navigate className="mr-auto" />
+			<SelectLang />
+			<SelectTheme />
+		</header>
+	)
+}
+
+export { Header }
+