@jbpark/ui-kit 2.1.0 → 2.2.0

package/dist/{src-Da3Y-f7V.mjs → src-BUNbQOql.mjs}

@@ -1,8 +1,7 @@
 import { n as renderConditional, t as cn } from "./utils-CssUrKWE.mjs";
-import { t as Typography_default } from "./Typography-DJSakhLz.mjs";
-import { ArrowUp, Check, ChevronDown, CircleQuestionMark, CircleX, Info, Loader2, LoaderCircle, OctagonAlert, OctagonX, Search, Square, SquareCheck, X, XIcon } from "lucide-react";
-import * as React$1 from "react";
-import React, { Children, createElement, forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { t as Typography_default } from "./Typography-GMk9208W.mjs";
+import { ArrowUp, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronUpIcon, CircleIcon, CircleQuestionMark, CircleX, Info, Loader2, LoaderCircle, OctagonAlert, OctagonX, Search, Square, SquareCheck, X, XIcon } from "lucide-react";
+import React, { Children, createElement, useEffect, useId, useMemo, useRef, useState } from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
@@ -13,7 +12,9 @@ import { Drawer } from "vaul";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { RadioGroup, Select } from "radix-ui";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { HexColorPicker } from "react-colorful";
 import { useIntersectionObserver, useThrottle, useWindowScroll } from "@uidotdev/usehooks";
 import { AnimatePresence, motion } from "motion/react";
 import { useResponsiveSize } from "@jbpark/use-hooks";
@@ -53,53 +54,67 @@ var accordion_exports = /* @__PURE__ */ __exportAll({
 	AccordionItem: () => AccordionItem$1,
 	AccordionTrigger: () => AccordionTrigger$1
 });
-const Accordion$1 = AccordionPrimitive.Root;
-const AccordionItem$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
-	ref,
-	className: cn("border-b", className),
-	...props
-}));
-AccordionItem$1.displayName = "AccordionItem";
-const AccordionTrigger$1 = React$1.forwardRef(({ expandIcon, className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
-	className: "flex",
-	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
-		ref,
-		className: cn(`flex flex-1 items-center justify-between py-4 text-left text-sm
-        font-medium transition-all hover:underline
-        [&[data-state=open]>svg]:rotate-180`, className),
+function Accordion$1({ ...props }) {
+	return /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
+		"data-slot": "accordion",
+		...props
+	});
+}
+function AccordionItem$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+		"data-slot": "accordion-item",
+		className: cn("border-b last:border-b-0", className),
+		...props
+	});
+}
+function AccordionTrigger$1({ className, children, expandIcon, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn(`focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1
+          items-start justify-between gap-4 rounded-md py-4 text-left text-sm
+          font-medium transition-all outline-none hover:underline
+          focus-visible:ring-[3px] disabled:pointer-events-none
+          disabled:opacity-50 [&[data-state=open]>svg]:rotate-180`, className),
+			...props,
+			children: [children, expandIcon || /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0\n              translate-y-0.5 transition-transform duration-200" })]
+		})
+	});
+}
+function AccordionContent$1({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+		"data-slot": "accordion-content",
+		className: "data-[state=closed]:animate-accordion-up\n        data-[state=open]:animate-accordion-down overflow-hidden text-sm",
 		...props,
-		children: [children, expandIcon || /* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground h-4 w-4 shrink-0 transition-transform\n            duration-200" })]
-	})
-}));
-AccordionTrigger$1.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent$1 = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
-	ref,
-	className: "data-[state=closed]:animate-accordion-up\n      data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-	...props,
-	children: /* @__PURE__ */ jsx("div", {
-		className: cn("pt-0 pb-4", className),
-		children
-	})
-}));
-AccordionContent$1.displayName = AccordionPrimitive.Content.displayName;
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pt-0 pb-4", className),
+			children
+		})
+	});
+}
 
 //#endregion
 //#region src/core/button.tsx
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-			destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
 			outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-			secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
 			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
 			default: "h-9 px-4 py-2 has-[>svg]:px-3",
+			xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
 			sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
 			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-			icon: "size-9"
+			icon: "size-9",
+			"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-8",
+			"icon-lg": "size-10"
 		}
 	},
 	defaultVariants: {
@@ -107,9 +122,11 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 		size: "default"
 	}
 });
-function Button$2({ className, variant, size, asChild = false, ...props }) {
+function Button$2({ className, variant = "default", size = "default", asChild = false, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
 		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
 		className: cn(buttonVariants({
 			variant,
 			size,
@@ -122,21 +139,25 @@ function Button$2({ className, variant, size, asChild = false, ...props }) {
 //#endregion
 //#region src/core/checkbox.tsx
 var checkbox_exports = /* @__PURE__ */ __exportAll({ Checkbox: () => Checkbox$1 });
-const Checkbox$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
-	ref,
-	className: cn(`peer border-primary focus-visible:ring-ring
-      data-[state=checked]:bg-primary
-      data-[state=checked]:text-primary-foreground grid h-4 w-4 shrink-0
-      place-content-center rounded-sm border shadow focus-visible:ring-1
-      focus-visible:outline-none disabled:cursor-not-allowed
-      disabled:opacity-50`, className),
-	...props,
-	children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
-		className: cn("grid place-content-center text-current"),
-		children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
-	})
-}));
-Checkbox$1.displayName = CheckboxPrimitive.Root.displayName;
+function Checkbox$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+		"data-slot": "checkbox",
+		className: cn(`peer border-input dark:bg-input/30 data-[state=checked]:bg-primary
+        data-[state=checked]:text-primary-foreground
+        dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary
+        focus-visible:border-ring focus-visible:ring-ring/50
+        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive size-4 shrink-0 rounded-sm border
+        shadow-xs transition-shadow outline-none focus-visible:ring-[3px]
+        disabled:cursor-not-allowed disabled:opacity-50`, className),
+		...props,
+		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none",
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+		})
+	});
+}
 
 //#endregion
 //#region src/core/dialog.tsx
@@ -185,7 +206,17 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DialogContent$1({ className, children, showCloseButton = true, classNames, closeIcon, closable, container, onCancel, ...props }) {
+function DialogContent$1({ className, children, classNames, closeIcon: _closeIcon, closable, container, onCancel, ...props }) {
+	const closeIcon = /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+		"data-slot": "dialog-close",
+		className: "ring-offset-background focus:ring-ring\n        data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\n        absolute top-4 right-4 rounded-xs opacity-70 transition-opacity\n        hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n        disabled:pointer-events-none [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		disabled: typeof closable === "object" && closable.disabled,
+		onClick: onCancel,
+		children: [_closeIcon || /* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Close"
+		})]
+	});
 	return /* @__PURE__ */ jsxs(DialogPortal, {
 		"data-slot": "dialog-portal",
 		container,
@@ -196,18 +227,10 @@ function DialogContent$1({ className, children, showCloseButton = true, classNam
           data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
           data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid
           w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]
-          gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg`, className),
+          gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none
+          sm:max-w-lg`, className),
 			...props,
-			children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
-				"data-slot": "dialog-close",
-				className: "ring-offset-background focus:ring-ring\n              data-[state=open]:bg-accent\n              data-[state=open]:text-muted-foreground absolute top-4 right-4\n              rounded-xs opacity-70 transition-opacity hover:opacity-100\n              focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n              disabled:pointer-events-none [&_svg]:pointer-events-none\n              [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				disabled: typeof closable === "object" && closable.disabled,
-				onClick: onCancel,
-				children: [closeIcon || /* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
-			})]
+			children: [children, closable && closeIcon]
 		})]
 	});
 }
@@ -218,11 +241,18 @@ function DialogHeader$1({ className, ...props }) {
 		...props
 	});
 }
-function DialogFooter$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function DialogFooter$1({ className, showCloseButton = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "dialog-footer",
 		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
-		...props
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button_default$1, {
+				variant: "outlined",
+				children: "Close"
+			})
+		})]
 	});
 }
 function DialogTitle$1({ className, ...props }) {
@@ -254,9 +284,10 @@ var drawer_exports = /* @__PURE__ */ __exportAll({
 	DrawerTitle: () => DrawerTitle$1,
 	DrawerTrigger: () => DrawerTrigger
 });
-function Drawer$2({ ...props }) {
+function Drawer$2({ draggable, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer.Root, {
 		"data-slot": "drawer",
+		handleOnly: !draggable,
 		...props
 	});
 }
@@ -287,10 +318,10 @@ function DrawerOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DrawerContent$1({ className, classNames = {}, handlebar, mask, children, ...props }) {
+function DrawerContent$1({ className, children, classNames = {}, handlebar, mask, ...props }) {
 	return /* @__PURE__ */ jsxs(DrawerPortal, {
 		"data-slot": "drawer-portal",
-		children: [/* @__PURE__ */ jsx(DrawerOverlay, { className: cn(classNames?.mask, !mask && "hidden") }), /* @__PURE__ */ jsxs(Drawer.Content, {
+		children: [/* @__PURE__ */ jsx(DrawerOverlay, { className: cn(classNames?.mask || "", !mask && "hidden") }), /* @__PURE__ */ jsxs(Drawer.Content, {
 			"data-slot": "drawer-content",
 			className: cn("group/drawer-content bg-background fixed z-50 flex h-auto flex-col", `data-[vaul-drawer-direction=top]:inset-x-0
           data-[vaul-drawer-direction=top]:top-0
@@ -312,8 +343,8 @@ function DrawerContent$1({ className, classNames = {}, handlebar, mask, children
           data-[vaul-drawer-direction=left]:border-r
           data-[vaul-drawer-direction=left]:sm:max-w-sm`, className),
 			...props,
-			children: [/* @__PURE__ */ jsx("div", { className: cn(`bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full
-            group-data-[vaul-drawer-direction=bottom]/drawer-content:block`, classNames?.handlebar, !handlebar && "hidden") }), children]
+			children: [handlebar && /* @__PURE__ */ jsx("div", { className: cn(`bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full
+              group-data-[vaul-drawer-direction=bottom]/drawer-content:block`, classNames?.handlebar) }), children]
 		})]
 	});
 }
@@ -352,31 +383,36 @@ function DrawerDescription$1({ className, ...props }) {
 //#endregion
 //#region src/core/input.tsx
 var input_exports = /* @__PURE__ */ __exportAll({ Input: () => Input$1 });
-const Input$1 = React$1.forwardRef(({ className, type, ...props }, ref) => {
+function Input$1({ className, type, ...props }) {
 	return /* @__PURE__ */ jsx("input", {
 		type,
-		className: cn(`border-input file:text-foreground placeholder:text-muted-foreground
-          focus-visible:ring-ring flex h-9 w-full rounded-md border
-          bg-transparent px-3 py-1 text-base shadow-sm transition-colors
-          file:border-0 file:bg-transparent file:text-sm file:font-medium
-          focus-visible:ring-1 focus-visible:outline-none
-          disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`, className),
-		ref,
+		"data-slot": "input",
+		className: cn(`file:text-foreground placeholder:text-muted-foreground
+        selection:bg-primary selection:text-primary-foreground dark:bg-input/30
+        border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3
+        py-1 text-base shadow-xs transition-[color,box-shadow] outline-none
+        file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm
+        file:font-medium disabled:pointer-events-none
+        disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`, `focus-visible:border-ring focus-visible:ring-ring/50
+        focus-visible:ring-[3px]`, `aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive`, className),
 		...props
 	});
-});
-Input$1.displayName = "Input";
+}
 
 //#endregion
 //#region src/core/label.tsx
-var label_exports = /* @__PURE__ */ __exportAll({ Label: () => Label$1 });
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
-	ref,
-	className: cn(labelVariants(), className),
-	...props
-}));
-Label$1.displayName = LabelPrimitive.Root.displayName;
+var label_exports = /* @__PURE__ */ __exportAll({ Label: () => Label$2 });
+function Label$2({ className, ...props }) {
+	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+		"data-slot": "label",
+		className: cn(`flex items-center gap-2 text-sm leading-none font-medium select-none
+        group-data-[disabled=true]:pointer-events-none
+        group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed
+        peer-disabled:opacity-50`, className),
+		...props
+	});
+}
 
 //#endregion
 //#region src/core/popover.tsx
@@ -384,44 +420,251 @@ var popover_exports = /* @__PURE__ */ __exportAll({
 	Popover: () => Popover$1,
 	PopoverAnchor: () => PopoverAnchor,
 	PopoverContent: () => PopoverContent$1,
+	PopoverDescription: () => PopoverDescription,
+	PopoverHeader: () => PopoverHeader,
+	PopoverTitle: () => PopoverTitle,
 	PopoverTrigger: () => PopoverTrigger$1
 });
-const Popover$1 = PopoverPrimitive.Root;
-const PopoverTrigger$1 = PopoverPrimitive.Trigger;
-const PopoverAnchor = PopoverPrimitive.Anchor;
-const PopoverContent$1 = React$1.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
-	ref,
-	align,
-	sideOffset,
-	className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
-        data-[state=closed]:animate-out data-[state=closed]:fade-out-0
-        data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
-        data-[state=open]:zoom-in-95 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 z-50 w-72
-        origin-[--radix-popover-content-transform-origin] rounded-md border p-4
-        shadow-md outline-none`, className),
-	...props
-}) }));
-PopoverContent$1.displayName = PopoverPrimitive.Content.displayName;
+function Popover$1({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger$1({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent$1({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
+          data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+          data-[state=open]:zoom-in-95 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 z-50 w-72
+          origin-(--radix-popover-content-transform-origin) rounded-md border
+          p-4 shadow-md outline-hidden`, className),
+		...props
+	}) });
+}
+function PopoverAnchor({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
+		"data-slot": "popover-anchor",
+		...props
+	});
+}
+function PopoverHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-1 text-sm", className),
+		...props
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-title",
+		className: cn("font-medium", className),
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "popover-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+}
 
 //#endregion
 //#region src/core/progress.tsx
 var progress_exports = /* @__PURE__ */ __exportAll({ Progress: () => Progress$1 });
-const Progress$1 = React$1.forwardRef(({ className, barClassName, barStyle, value, ...props }, ref) => /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
-	ref,
-	className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
-	...props,
-	children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
-		className: cn("bg-primary h-full w-full flex-1 transition-all", barClassName),
-		style: {
-			transform: `translateX(-${100 - (value || 0)}%)`,
-			...barStyle
-		}
-	})
-}));
-Progress$1.displayName = ProgressPrimitive.Root.displayName;
+function Progress$1({ className, value, barClassName, barStyle, ...props }) {
+	return /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+		"data-slot": "progress",
+		className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
+			"data-slot": "progress-indicator",
+			className: cn("bg-primary h-full w-full flex-1 transition-all", barClassName),
+			style: {
+				transform: `translateX(-${100 - (value || 0)}%)`,
+				...barStyle
+			}
+		})
+	});
+}
+
+//#endregion
+//#region src/core/radio-group.tsx
+var radio_group_exports = /* @__PURE__ */ __exportAll({
+	RadioGroup: () => RadioGroup$1,
+	RadioGroupItem: () => RadioGroupItem
+});
+function RadioGroup$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup.Root, {
+		"data-slot": "radio-group",
+		className: cn("grid gap-3", className),
+		...props
+	});
+}
+function RadioGroupItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup.Item, {
+		"data-slot": "radio-group-item",
+		className: cn(`border-input text-primary focus-visible:border-ring
+        focus-visible:ring-ring/50 aria-invalid:ring-destructive/20
+        dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+        dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border
+        shadow-xs transition-[color,box-shadow] outline-none
+        focus-visible:ring-[3px] disabled:cursor-not-allowed
+        disabled:opacity-50`, className),
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "relative flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2\n            -translate-x-1/2 -translate-y-1/2" })
+		})
+	});
+}
+
+//#endregion
+//#region src/core/select.tsx
+var select_exports = /* @__PURE__ */ __exportAll({
+	Select: () => Select$2,
+	SelectContent: () => SelectContent$1,
+	SelectGroup: () => SelectGroup$1,
+	SelectItem: () => SelectItem$1,
+	SelectLabel: () => SelectLabel$1,
+	SelectScrollDownButton: () => SelectScrollDownButton,
+	SelectScrollUpButton: () => SelectScrollUpButton,
+	SelectSeparator: () => SelectSeparator,
+	SelectTrigger: () => SelectTrigger$1,
+	SelectValue: () => SelectValue$1
+});
+function Select$2({ ...props }) {
+	return /* @__PURE__ */ jsx(Select.Root, {
+		"data-slot": "select",
+		...props
+	});
+}
+function SelectGroup$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Select.Group, {
+		"data-slot": "select-group",
+		...props
+	});
+}
+function SelectValue$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		...props
+	});
+}
+function SelectTrigger$1({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn(`border-input data-[placeholder]:text-muted-foreground
+        [&_svg:not([class*='text-'])]:text-muted-foreground
+        focus-visible:border-ring focus-visible:ring-ring/50
+        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50
+        flex w-fit items-center justify-between gap-2 rounded-md border
+        bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs
+        transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
+        disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9
+        data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1
+        *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center
+        *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none
+        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
+		})]
+	});
+}
+function SelectContent$1({ className, children, position = "item-aligned", align = "center", ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, {
+		"data-slot": "select-content",
+		className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
+          data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+          data-[state=open]:zoom-in-95 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 relative z-50
+          max-h-(--radix-select-content-available-height) min-w-[8rem]
+          origin-(--radix-select-content-transform-origin) overflow-x-hidden
+          overflow-y-auto rounded-md border shadow-md`, position === "popper" && `data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1
+            data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1`, className),
+		position,
+		align,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+			/* @__PURE__ */ jsx(Select.Viewport, {
+				className: cn("p-1", position === "popper" && `h-[var(--radix-select-trigger-height)] w-full
+              min-w-[var(--radix-select-trigger-width)] scroll-my-1`),
+				children
+			}),
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+		]
+	}) });
+}
+function SelectLabel$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Label, {
+		"data-slot": "select-label",
+		className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+		...props
+	});
+}
+function SelectItem$1({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn(`focus:bg-accent focus:text-accent-foreground
+        [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full
+        cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm
+        outline-hidden select-none data-[disabled]:pointer-events-none
+        data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0
+        [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex
+        *:[span]:last:items-center *:[span]:last:gap-2`, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "select-item-indicator",
+			className: "absolute right-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), /* @__PURE__ */ jsx(Select.ItemText, { children })]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		"data-slot": "select-separator",
+		className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+		...props
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollUpButton, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollDownButton, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+	});
+}
 
 //#endregion
 //#region src/core/skeleton.tsx
@@ -437,21 +680,26 @@ function Skeleton$1({ className, ...props }) {
 //#endregion
 //#region src/core/switch.tsx
 var switch_exports = /* @__PURE__ */ __exportAll({ Switch: () => Switch$1 });
-function Switch$1({ className, handleClassName, ...props }) {
+function Switch$1({ className, size = "default", handleClassName, ...props }) {
 	return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
 		"data-slot": "switch",
+		"data-size": size,
 		className: cn(`peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input
         focus-visible:border-ring focus-visible:ring-ring/50
-        dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8
+        dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex
         shrink-0 items-center rounded-full border border-transparent shadow-xs
         transition-all outline-none focus-visible:ring-[3px]
-        disabled:cursor-not-allowed disabled:opacity-50`, className),
+        disabled:cursor-not-allowed disabled:opacity-50
+        data-[size=default]:h-[1.15rem] data-[size=default]:w-8
+        data-[size=sm]:h-3.5 data-[size=sm]:w-6`, className),
 		...props,
 		children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
 			"data-slot": "switch-thumb",
 			className: cn(`bg-background dark:data-[state=unchecked]:bg-foreground
           dark:data-[state=checked]:bg-primary-foreground pointer-events-none
-          block size-4 rounded-full ring-0 transition-transform
+          block rounded-full ring-0 transition-transform
+          group-data-[size=default]/switch:size-4
+          group-data-[size=sm]/switch:size-3
           data-[state=checked]:translate-x-[calc(100%-2px)]
           data-[state=unchecked]:translate-x-0`, handleClassName)
 		})
@@ -461,21 +709,24 @@ function Switch$1({ className, handleClassName, ...props }) {
 //#endregion
 //#region src/core/textarea.tsx
 var textarea_exports = /* @__PURE__ */ __exportAll({ Textarea: () => Textarea });
-const Textarea = React$1.forwardRef(({ className, ...props }, ref) => {
+function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx("textarea", {
-		className: cn(`border-input placeholder:text-muted-foreground focus-visible:ring-ring
-        flex min-h-15 w-full rounded-md border bg-transparent px-3 py-2
-        text-base shadow-sm focus-visible:ring-1 focus-visible:outline-none
-        disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`, className),
-		ref,
+		"data-slot": "textarea",
+		className: cn(`border-input placeholder:text-muted-foreground
+        focus-visible:border-ring focus-visible:ring-ring/50
+        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive dark:bg-input/30 flex
+        field-sizing-content min-h-16 w-full rounded-md border bg-transparent
+        px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none
+        focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50
+        md:text-sm`, className),
 		...props
 	});
-});
-Textarea.displayName = "Textarea";
+}
 
 //#endregion
 //#region src/components/atoms/Button/index.tsx
-const Core$6 = Button$2;
+const Core$8 = Button$2;
 const variantClasses = {
 	solid: "",
 	outlined: cn("border border-[rgb(var(--btn-border)/0.5)]", "bg-background text-foreground", "hover:bg-accent"),
@@ -499,7 +750,7 @@ const Button$1 = ({ icon, className, variant = "solid", size = "medium", color =
 	const computedColor = danger ? "danger" : color;
 	const colored = computedColor && computedColor !== "default";
 	const displayIcon = loading ? typeof loading === "object" ? loading.icon : /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : icon;
-	return /* @__PURE__ */ jsxs(Core$6, {
+	return /* @__PURE__ */ jsxs(Core$8, {
 		disabled,
 		variant: "default",
 		"data-color": computedColor,
@@ -522,35 +773,35 @@ var Button_default$1 = Button$1;
 
 //#endregion
 //#region src/components/atoms/Checkbox/Group/index.tsx
-const Group = ({ direction = "vertical", placement = "left", className, classNames = {}, options: _options, onChange = () => {} }) => {
-	const [options, setOptions] = useState([]);
-	const updateOptions = (checked, value) => {
-		const nextOptions = options.map((item) => ({
-			...item,
-			checked: item.value === value ? checked : item.checked
-		}));
-		setOptions(nextOptions);
-		onChange(nextOptions.filter((item) => item.checked).map((item) => item.value));
+const Group = ({ direction = "vertical", placement = "left", className, classNames = {}, options: _options = [], defaultValue, value: _value, onChange: _onChange = () => {} }) => {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || []);
+	const controlled = _value !== void 0;
+	const value = controlled ? _value : uncontrolledValue;
+	const options = _options.map((item) => typeof item === "object" ? item : {
+		label: `${item}`,
+		value: item
+	});
+	const onChange = (checked, optionValue) => {
+		const nextValue = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
+		if (!controlled) setUncontrolledValue(nextValue);
+		_onChange(nextValue);
 	};
-	useEffect(() => {
-		setOptions(_options?.map((item) => typeof item === "object" ? item : {
-			label: `${item}`,
-			value: item,
-			checked: false
-		}) || []);
-	}, [_options]);
 	return /* @__PURE__ */ jsx("ul", {
 		className: cn(direction === "vertical" ? "space-y-2" : "flex gap-2", className),
-		children: options.map((item, i) => /* @__PURE__ */ jsx("li", {
-			className: cn("flex", classNames?.wrapper),
-			children: /* @__PURE__ */ jsx(Checkbox_default, {
-				placement,
-				className: cn(classNames?.item),
-				value: item.value,
-				onChange: (checked) => updateOptions(checked, item.value),
-				children: item.label
-			})
-		}, i))
+		children: options.map((item, i) => {
+			const checked = value.includes(item.value);
+			return /* @__PURE__ */ jsx("li", {
+				className: cn("flex", classNames?.wrapper),
+				children: /* @__PURE__ */ jsx(Checkbox_default, {
+					placement,
+					className: cn(classNames?.item),
+					value: item.value,
+					checked,
+					onChange: (checked$1) => onChange(checked$1, item.value),
+					children: item.label
+				})
+			}, i);
+		})
 	});
 };
 var Group_default = Group;
@@ -559,12 +810,14 @@ var Group_default = Group;
 //#region src/components/atoms/Checkbox/index.tsx
 const { Checkbox: CoreCheckbox } = checkbox_exports;
 const { Label: CoreLabel } = label_exports;
-const Checkbox = ({ placement = "left", value = "", children, className, icons, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
-	const [checked, setChecked] = useState(false);
+const Checkbox = ({ placement = "left", value = "", children, className, icons, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
+	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
 	const reactId = useId();
 	const id = typeof value === "boolean" || !value ? reactId : String(value);
+	const controlled = _checked !== void 0;
+	const checked = controlled ? _checked : uncontrolledChecked;
 	const onChange = (next) => {
-		setChecked(next);
+		if (!controlled) setUncontrolledChecked(next);
 		_onChange(next);
 	};
 	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -599,9 +852,6 @@ const Checkbox = ({ placement = "left", value = "", children, className, icons,
 		className: "cursor-pointer text-left",
 		children
 	})] });
-	useEffect(() => {
-		setChecked(!!_checked);
-	}, [_checked]);
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex items-center gap-x-2", placement === "right" && "flex-row-reverse", className),
 		...props,
@@ -611,92 +861,6 @@ const Checkbox = ({ placement = "left", value = "", children, className, icons,
 Checkbox.Group = Group_default;
 var Checkbox_default = Checkbox;
 
-//#endregion
-//#region src/components/atoms/FloatButton/BackTop/index.tsx
-const BackTop = ({ visibilityHeight = 450, className, onClick, ...props }) => {
-	const [{ y }, scrollTo] = useWindowScroll();
-	return /* @__PURE__ */ jsx(FloatButton_default, {
-		icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-		className: cn(className, (!y || visibilityHeight > y) && "hidden"),
-		onClick: (e) => {
-			scrollTo({
-				left: 0,
-				top: 0,
-				behavior: "smooth"
-			});
-			onClick?.(e);
-		},
-		...props
-	});
-};
-var BackTop_default = BackTop;
-
-//#endregion
-//#region src/components/atoms/FloatButton/index.tsx
-const FloatButton = ({ className, children, ...props }) => {
-	return /* @__PURE__ */ jsx(Button_default$1, {
-		className: cn("fixed right-5 bottom-5 rounded-full", "bg-white hover:bg-white", "z-50 h-12 w-12", "shadow-md", className),
-		variant: "outlined",
-		...props,
-		children
-	});
-};
-FloatButton.BackTop = BackTop_default;
-var FloatButton_default = FloatButton;
-
-//#endregion
-//#region src/components/atoms/Input/Search/index.tsx
-const { Input: Core$5 } = input_exports;
-const Search$1 = forwardRef(({ className, value, allowClear = true, onChange = () => {}, onPressEnter, ...props }, ref) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex items-center gap-x-2", "rounded-md", "p-3", className),
-		children: [
-			/* @__PURE__ */ jsx(Search, { className: "absolute size-5" }),
-			/* @__PURE__ */ jsx(Core$5, {
-				ref,
-				inputMode: "search",
-				type: "search",
-				enterKeyHint: "search",
-				className: cn("w-full"),
-				value,
-				onChange,
-				onKeyDown: (e) => {
-					if (e.key === "Enter") onPressEnter();
-				},
-				...props
-			}),
-			/* @__PURE__ */ jsx(CircleX, {
-				className: cn("absolute size-4 shrink-0 cursor-pointer", (!allowClear || !value) && "hidden"),
-				onClick: () => onChange({ target: { value: "" } })
-			})
-		]
-	});
-});
-Search$1.displayName = "Search";
-var Search_default = Search$1;
-
-//#endregion
-//#region src/components/atoms/Input/TextArea/index.tsx
-const { Textarea: Core$4 } = textarea_exports;
-const TextArea = ({ className, ref, ...props }) => {
-	return /* @__PURE__ */ jsx(Core$4, {
-		ref,
-		className: cn(className),
-		...props
-	});
-};
-var TextArea_default = TextArea;
-
-//#endregion
-//#region src/components/atoms/Input/index.tsx
-const { Input: Core$3 } = input_exports;
-const Input = ({ ...props }) => {
-	return /* @__PURE__ */ jsx(Core$3, { ...props });
-};
-Input.Search = Search_default;
-Input.TextArea = TextArea_default;
-var Input_default = Input;
-
 //#endregion
 //#region src/components/atoms/Popover/index.tsx
 const { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover_exports;
@@ -750,38 +914,153 @@ const placementMap = {
 		align: "end"
 	}
 };
-const arrowBase = "absolute h-0 w-0 drop-shadow-md";
-const arrowShape = {
-	vertical: "border-l-8 border-r-8 border-l-transparent border-r-transparent",
-	horizontal: "border-t-8 border-b-8 border-t-transparent border-b-transparent"
-};
-const arrowAlign = {
-	center: {
-		x: "left-1/2 -translate-x-1/2",
-		y: "top-1/2 -translate-y-1/2"
-	},
-	start: {
-		x: "left-4",
-		y: "top-4"
-	},
-	end: {
-		x: "right-4",
-		y: "bottom-4"
-	}
-};
+const beforeBase = "before:content-[\"\"] before:absolute before:h-0 before:w-0";
+const afterBase = "after:content-[\"\"] after:absolute after:h-0 after:w-0";
+const vBorderShape = "before:border-l-[9px] before:border-r-[9px] before:border-l-transparent before:border-r-transparent";
+const hBorderShape = "before:border-t-[9px] before:border-b-[9px] before:border-t-transparent before:border-b-transparent";
+const vFillShape = "after:border-l-8 after:border-r-8 after:border-l-transparent after:border-r-transparent";
+const hFillShape = "after:border-t-8 after:border-b-8 after:border-t-transparent after:border-b-transparent";
+const topBorder = "before:border-t-[9px] before:border-t-border";
+const bottomBorder = "before:border-b-[9px] before:border-b-border";
+const leftBorder = "before:border-l-[9px] before:border-l-border";
+const rightBorder = "before:border-r-[9px] before:border-r-border";
+const topFill = "after:border-t-8 after:border-t-popover";
+const bottomFill = "after:border-b-8 after:border-b-popover";
+const leftFill = "after:border-l-8 after:border-l-popover";
+const rightFill = "after:border-r-8 after:border-r-popover";
 const arrowStyles = {
-	top: cn(arrowShape.vertical, arrowAlign.center.x, "top-full border-t-8 border-t-white"),
-	topLeft: cn(arrowShape.vertical, arrowAlign.start.x, "top-full border-t-8 border-t-white"),
-	topRight: cn(arrowShape.vertical, arrowAlign.end.x, "top-full border-t-8 border-t-white"),
-	bottom: cn(arrowShape.vertical, arrowAlign.center.x, "bottom-full border-b-8 border-b-white"),
-	bottomLeft: cn(arrowShape.vertical, arrowAlign.start.x, "bottom-full border-b-8 border-b-white"),
-	bottomRight: cn(arrowShape.vertical, arrowAlign.end.x, "bottom-full border-b-8 border-b-white"),
-	left: cn(arrowShape.horizontal, arrowAlign.center.y, "left-full border-l-8 border-l-white"),
-	leftTop: cn(arrowShape.horizontal, arrowAlign.start.y, "left-full border-l-8 border-l-white"),
-	leftBottom: cn(arrowShape.horizontal, arrowAlign.end.y, "left-full border-l-8 border-l-white"),
-	right: cn(arrowShape.horizontal, arrowAlign.center.y, "right-full border-r-8 border-r-white"),
-	rightTop: cn(arrowShape.horizontal, arrowAlign.start.y, "right-full border-r-8 border-r-white"),
-	rightBottom: cn(arrowShape.horizontal, arrowAlign.end.y, "right-full border-r-8 border-r-white")
+	top: [
+		"absolute left-1/2 -translate-x-1/2 top-full",
+		beforeBase,
+		"before:top-0 before:left-1/2 before:-translate-x-1/2",
+		vBorderShape,
+		topBorder,
+		afterBase,
+		"after:-top-px after:left-1/2 after:-translate-x-1/2",
+		vFillShape,
+		topFill
+	].join(" "),
+	topLeft: [
+		"absolute left-4 top-full",
+		beforeBase,
+		"before:top-0 before:left-0",
+		vBorderShape,
+		topBorder,
+		afterBase,
+		"after:-top-px after:left-px",
+		vFillShape,
+		topFill
+	].join(" "),
+	topRight: [
+		"absolute right-4 top-full",
+		beforeBase,
+		"before:top-0 before:right-0",
+		vBorderShape,
+		topBorder,
+		afterBase,
+		"after:-top-px after:right-px",
+		vFillShape,
+		topFill
+	].join(" "),
+	bottom: [
+		"absolute left-1/2 -translate-x-1/2 bottom-full",
+		beforeBase,
+		"before:bottom-0 before:left-1/2 before:-translate-x-1/2",
+		vBorderShape,
+		bottomBorder,
+		afterBase,
+		"after:-bottom-px after:left-1/2 after:-translate-x-1/2",
+		vFillShape,
+		bottomFill
+	].join(" "),
+	bottomLeft: [
+		"absolute left-4 bottom-full",
+		beforeBase,
+		"before:bottom-0 before:left-0",
+		vBorderShape,
+		bottomBorder,
+		afterBase,
+		"after:-bottom-px after:left-px",
+		vFillShape,
+		bottomFill
+	].join(" "),
+	bottomRight: [
+		"absolute right-4 bottom-full",
+		beforeBase,
+		"before:bottom-0 before:right-0",
+		vBorderShape,
+		bottomBorder,
+		afterBase,
+		"after:-bottom-px after:right-px",
+		vFillShape,
+		bottomFill
+	].join(" "),
+	left: [
+		"absolute top-1/2 -translate-y-1/2 left-full",
+		beforeBase,
+		"before:left-0 before:top-1/2 before:-translate-y-1/2",
+		hBorderShape,
+		leftBorder,
+		afterBase,
+		"after:-left-px after:top-1/2 after:-translate-y-1/2",
+		hFillShape,
+		leftFill
+	].join(" "),
+	leftTop: [
+		"absolute top-4 left-full",
+		beforeBase,
+		"before:left-0 before:top-0",
+		hBorderShape,
+		leftBorder,
+		afterBase,
+		"after:-left-px after:top-px",
+		hFillShape,
+		leftFill
+	].join(" "),
+	leftBottom: [
+		"absolute bottom-4 left-full",
+		beforeBase,
+		"before:left-0 before:bottom-0",
+		hBorderShape,
+		leftBorder,
+		afterBase,
+		"after:-left-px after:bottom-px",
+		hFillShape,
+		leftFill
+	].join(" "),
+	right: [
+		"absolute top-1/2 -translate-y-1/2 right-full",
+		beforeBase,
+		"before:right-0 before:top-1/2 before:-translate-y-1/2",
+		hBorderShape,
+		rightBorder,
+		afterBase,
+		"after:-right-px after:top-1/2 after:-translate-y-1/2",
+		hFillShape,
+		rightFill
+	].join(" "),
+	rightTop: [
+		"absolute top-4 right-full",
+		beforeBase,
+		"before:right-0 before:top-0",
+		hBorderShape,
+		rightBorder,
+		afterBase,
+		"after:-right-px after:top-px",
+		hFillShape,
+		rightFill
+	].join(" "),
+	rightBottom: [
+		"absolute bottom-4 right-full",
+		beforeBase,
+		"before:right-0 before:bottom-0",
+		hBorderShape,
+		rightBorder,
+		afterBase,
+		"after:-right-px after:bottom-px",
+		hFillShape,
+		rightFill
+	].join(" ")
 };
 const Popover = ({ title, placement = "top", className, content, children }) => {
 	return /* @__PURE__ */ jsxs(CorePopover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
@@ -798,20 +1077,151 @@ const Popover = ({ title, placement = "top", className, content, children }) =>
 				children: v
 			})),
 			content,
-			/* @__PURE__ */ jsx("div", { className: cn(arrowBase, arrowStyles[placement]) })
+			/* @__PURE__ */ jsx("div", { className: cn(arrowStyles[placement]) })
 		]
 	})] });
 };
 var Popover_default = Popover;
 
+//#endregion
+//#region src/components/atoms/ColorPicker/index.tsx
+const ColorPicker = ({ defaultValue, value: _value, showText, onChange: _onChange = () => {} }) => {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || "#fff");
+	const controlled = _value !== void 0;
+	const value = controlled ? _value : uncontrolledValue;
+	const onChange = (color) => {
+		if (!controlled) setUncontrolledValue(color);
+		_onChange(color);
+	};
+	return /* @__PURE__ */ jsx(Popover_default, {
+		placement: "bottomLeft",
+		content: /* @__PURE__ */ jsx(HexColorPicker, {
+			color: value,
+			onChange
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("inline-flex items-center", "rounded border p-0.5"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("size-6 cursor-pointer rounded border", "shadow-sm"),
+				style: { backgroundColor: value }
+			}), showText && /* @__PURE__ */ jsx("span", {
+				className: "px-1 font-mono text-sm font-medium",
+				children: value.toUpperCase()
+			})]
+		})
+	});
+};
+var ColorPicker_default = ColorPicker;
+
+//#endregion
+//#region src/components/atoms/FloatButton/BackTop/index.tsx
+const BackTop = ({ visibilityHeight = 450, className, onClick, ...props }) => {
+	const [{ y }, scrollTo] = useWindowScroll();
+	return /* @__PURE__ */ jsx(FloatButton_default, {
+		icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+		className: cn(className, (!y || visibilityHeight > y) && "hidden"),
+		onClick: (e) => {
+			scrollTo({
+				left: 0,
+				top: 0,
+				behavior: "smooth"
+			});
+			onClick?.(e);
+		},
+		...props
+	});
+};
+var BackTop_default = BackTop;
+
+//#endregion
+//#region src/components/atoms/FloatButton/index.tsx
+const FloatButton = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Button_default$1, {
+		className: cn("fixed right-5 bottom-5 rounded-full", "bg-white hover:bg-white", "z-50 h-12 w-12", "shadow-md", className),
+		variant: "outlined",
+		...props,
+		children
+	});
+};
+FloatButton.BackTop = BackTop_default;
+var FloatButton_default = FloatButton;
+
+//#endregion
+//#region src/components/atoms/Input/Search/index.tsx
+const { Input: Core$7 } = input_exports;
+const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onChange, onSearch: _onSearch, ...props }) => {
+	const internalRef = useRef(null);
+	const inputRef = ref || internalRef;
+	const onClear = () => {
+		if (inputRef.current) {
+			inputRef.current.value = "";
+			onChange?.({ target: { value: "" } });
+		}
+	};
+	const onSearch = () => {
+		if (inputRef.current) _onSearch?.(inputRef.current.value);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center", "rounded-md", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative grow", "inline-flex items-center"),
+			children: [/* @__PURE__ */ jsx(Core$7, {
+				ref: inputRef,
+				inputMode: "search",
+				type: "search",
+				enterKeyHint: "search",
+				className: cn("rounded-r-none", "[&::-webkit-search-cancel-button]:hidden", "[&::-webkit-search-decoration]:hidden"),
+				value,
+				defaultValue,
+				onChange,
+				onKeyDown: (e) => {
+					if (e.key === "Enter") onSearch();
+				},
+				...props
+			}), /* @__PURE__ */ jsx(CircleX, {
+				className: cn("absolute right-2 size-4", "shrink-0 cursor-pointer", (!allowClear || value !== void 0 && !value) && "hidden"),
+				onClick: onClear
+			})]
+		}), /* @__PURE__ */ jsx(Button_default$1, {
+			icon: /* @__PURE__ */ jsx(Search, {}),
+			className: cn("rounded-l-none", "size-9"),
+			onClick: onSearch
+		})]
+	});
+};
+Search$1.displayName = "Search";
+var Search_default = Search$1;
+
+//#endregion
+//#region src/components/atoms/Input/TextArea/index.tsx
+const { Textarea: Core$6 } = textarea_exports;
+const TextArea = ({ className, ref, ...props }) => {
+	return /* @__PURE__ */ jsx(Core$6, {
+		ref,
+		className: cn(className),
+		...props
+	});
+};
+var TextArea_default = TextArea;
+
+//#endregion
+//#region src/components/atoms/Input/index.tsx
+const { Input: Core$5 } = input_exports;
+const Input = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Core$5, { ...props });
+};
+Input.Search = Search_default;
+Input.TextArea = TextArea_default;
+var Input_default = Input;
+
 //#endregion
 //#region src/components/atoms/Progress/index.tsx
-const { Progress: Core$2 } = progress_exports;
+const { Progress: Core$4 } = progress_exports;
 const Progress = ({ value, className, direction = "horizontal", classNames }) => {
 	const isHorizontal = direction === "horizontal";
 	const dimension = isHorizontal ? "width" : "height";
 	const percent = isNaN(value) ? 0 : value;
-	return /* @__PURE__ */ jsx(Core$2, {
+	return /* @__PURE__ */ jsx(Core$4, {
 		value,
 		className: cn(isHorizontal ? "h-4 w-full" : "flex h-full w-4 flex-col justify-end", className, classNames?.background),
 		barClassName: cn("flex-none", classNames?.bar),
@@ -823,6 +1233,49 @@ const Progress = ({ value, className, direction = "horizontal", classNames }) =>
 };
 var Progress_default = Progress;
 
+//#endregion
+//#region src/components/atoms/Radio/index.tsx
+const { RadioGroup: Core$3, RadioGroupItem: Item$3 } = radio_group_exports;
+const { Label: Label$1 } = label_exports;
+const Radio = ({ children }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsx(Core$3, { children: /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ jsx(Item$3, {
+			value: "default",
+			id
+		}), /* @__PURE__ */ jsxs(Label$1, {
+			htmlFor: id,
+			children: [" ", children]
+		})]
+	}) });
+};
+var Radio_default = Radio;
+
+//#endregion
+//#region src/components/atoms/Select/index.tsx
+const { Select: Core$2, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } = select_exports;
+const isGroup = (option) => {
+	return "options" in option && Array.isArray(option.options);
+};
+const Select$1 = ({ className, placeholder, options, onChange, ...props }) => {
+	return /* @__PURE__ */ jsxs(Core$2, {
+		onValueChange: onChange,
+		...props,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: cn("w-full max-w-48", className),
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: options?.map((option, index) => isGroup(option) ? /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: option.label }), option.options.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+			value: item.value,
+			children: item.label
+		}, item.value))] }, index) : /* @__PURE__ */ jsx(SelectItem, {
+			value: option.value,
+			children: option.label
+		}, option.value)) })]
+	});
+};
+var Select_default = Select$1;
+
 //#endregion
 //#region src/components/atoms/Skeleton/Button/index.tsx
 const Button = ({ className, ...props }) => {
@@ -897,12 +1350,20 @@ var Spin_default = Spin;
 //#endregion
 //#region src/components/atoms/Switch/index.tsx
 const { Switch: Core } = switch_exports;
-const Switch = ({ onChange, className, classNames, ...props }) => {
+const Switch = ({ className, classNames, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
+	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
+	const controlled = _checked !== void 0;
+	const checked = controlled ? _checked : uncontrolledChecked;
+	const onChange = (next) => {
+		if (!controlled) setUncontrolledChecked(next);
+		_onChange(next);
+	};
 	return /* @__PURE__ */ jsx(Core, {
-		className: cn(className, classNames?.track),
-		handleClassName: cn(classNames?.handle),
-		onCheckedChange: (checked) => {
-			onChange?.(checked);
+		checked,
+		className: cn("h-8.5 w-13", className, classNames?.track),
+		handleClassName: cn("h-7 w-7", "data-[state=checked]:translate-x-5", "data-[state=unchecked]:translate-x-[2px]", classNames?.handle),
+		onCheckedChange: (checked$1) => {
+			onChange(checked$1);
 		},
 		...props
 	});
@@ -929,16 +1390,25 @@ var Card_default = Card;
 //#endregion
 //#region src/components/molecules/Collapse/index.tsx
 const { Accordion, AccordionItem, AccordionTrigger, AccordionContent } = accordion_exports;
-const Collapse = ({ expandIcon, accordion = false, items: _items = [], className, classNames, defaultActiveKey }) => {
-	const [items, setItems] = useState([]);
-	useEffect(() => {
-		setItems(_items);
-	}, [_items]);
+const Collapse = ({ expandIcon, accordion = false, items = [], className, classNames, defaultActiveKey, activeKey: _activeKey, onChange: _onChange }) => {
+	const controlled = _activeKey !== void 0;
 	return /* @__PURE__ */ jsx(Accordion, {
 		className,
-		...accordion ? {
+		...accordion ? controlled ? {
 			type: "single",
-			defaultValue: `${defaultActiveKey?.[0]}`
+			value: `${_activeKey?.[0] ?? ""}`,
+			onValueChange: (value) => {
+				_onChange?.(value ? [value] : []);
+			}
+		} : {
+			type: "single",
+			defaultValue: `${defaultActiveKey?.[0] ?? ""}`
+		} : controlled ? {
+			type: "multiple",
+			value: _activeKey?.map((key) => `${key}`),
+			onValueChange: (values) => {
+				_onChange?.(values);
+			}
 		} : {
 			type: "multiple",
 			defaultValue: defaultActiveKey?.map((key) => `${key}`)
@@ -963,9 +1433,8 @@ var Collapse_default = Collapse;
 
 //#endregion
 //#region src/components/molecules/Menu/Item/Label/index.tsx
-const Label = ({ children, level = 4, className, ...props }) => {
+const Label = ({ children, className, ...props }) => {
 	if (typeof children === "string") return /* @__PURE__ */ jsx(Typography_default.Text, {
-		level,
 		className: cn(className),
 		...props,
 		children
@@ -1115,13 +1584,13 @@ function findKey(menu, targetKeys) {
 	return false;
 }
 const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys: _selectedKeys, className, classNames, styles, offset, inlineOffset, onClick, onSelect: _onSelect, ...props }) => {
-	const isControlled = _selectedKeys !== void 0;
+	const controlled = _selectedKeys !== void 0;
 	const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(defaultSelectedKeys ?? []);
-	const selectedKeys = isControlled ? _selectedKeys : uncontrolledSelectedKeys;
+	const selectedKeys = controlled ? _selectedKeys : uncontrolledSelectedKeys;
 	const selectedKeysSet = useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
 	const selectionMap = useMemo(() => buildSelectionMap(items ?? [], selectedKeysSet), [items, selectedKeysSet]);
 	const onSelect = (params) => {
-		if (!isControlled) setUncontrolledSelectedKeys([params.key]);
+		if (!controlled) setUncontrolledSelectedKeys([params.key]);
 		_onSelect?.(params);
 	};
 	return /* @__PURE__ */ jsx("ul", {
@@ -1150,31 +1619,32 @@ var Menu_default = Menu;
 
 //#endregion
 //#region src/components/molecules/Dropdown/index.tsx
-const Dropdown = ({ children, menu, trigger = "hover", open: _open = false, onOpenChange = () => {}, ...props }) => {
-	const [open, setOpen] = useState(false);
+const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange: _onOpenChange = () => {}, ...props }) => {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const controlled = _open !== void 0;
+	const open = controlled ? _open : uncontrolledOpen;
 	const isClickTrigger = trigger === "click";
-	useEffect(() => {
-		setOpen(_open);
-	}, [_open]);
+	const onOpenChange = (nextOpen) => {
+		if (!controlled) setUncontrolledOpen(nextOpen);
+		_onOpenChange(nextOpen);
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		className: cn("relative z-0", "inline-block cursor-pointer"),
 		onMouseEnter: () => {
 			if (isClickTrigger) return;
-			setOpen(true);
+			onOpenChange(true);
 		},
 		onMouseLeave: () => {
 			if (isClickTrigger) return;
-			setOpen(false);
+			onOpenChange(false);
 		},
 		children: [/* @__PURE__ */ jsx("div", {
 			onClick: () => {
 				if (!isClickTrigger) return;
-				setOpen(!open);
 				onOpenChange(!open);
 			},
 			onBlur: () => {
-				setOpen(false);
 				onOpenChange(false);
 			},
 			children
@@ -5408,7 +5878,7 @@ var Swiper_default = Swiper$1;
 //#region src/components/templates/Layout/Content/index.tsx
 const Content = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("shrink flex-grow basis-0", className),
+		className: cn("shrink grow basis-0", className),
 		...props,
 		children
 	});
@@ -5441,7 +5911,7 @@ var Header_default = Header;
 //#region src/components/templates/Layout/Sider/index.tsx
 const Sider = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("z-[100]", "w-[200px]", className),
+		className: cn("z-100", "w-50", className),
 		...props,
 		children
 	});
@@ -5464,4 +5934,4 @@ Layout.Sider = Sider_default;
 var Layout_default = Layout;
 
 //#endregion
-export { Button_default$1 as C, Checkbox_default as S, Skeleton_default as _, Drawer_default as a, Input_default as b, Dropdown_default as c, buildSelectionMap as d, findKey as f, Spin_default as g, Switch_default as h, List_default as i, MENU_CLASSNAMES as l, Card_default as m, Swiper_default as n, Space_default as o, Collapse_default as p, Modal_default as r, Marquees_default as s, Layout_default as t, Menu_default as u, Progress_default as v, FloatButton_default as x, Popover_default as y };
+export { ColorPicker_default as C, Button_default$1 as E, FloatButton_default as S, Checkbox_default as T, Skeleton_default as _, Drawer_default as a, Progress_default as b, Dropdown_default as c, buildSelectionMap as d, findKey as f, Spin_default as g, Switch_default as h, List_default as i, MENU_CLASSNAMES as l, Card_default as m, Swiper_default as n, Space_default as o, Collapse_default as p, Modal_default as r, Marquees_default as s, Layout_default as t, Menu_default as u, Select_default as v, Popover_default as w, Input_default as x, Radio_default as y };