@jbpark/ui-kit 2.2.2 → 2.3.0

package/dist/{src-DZ7IYc6G.mjs → src-MBsIpDyP.mjs}

@@ -1,6 +1,6 @@
 import { n as renderConditional, t as cn } from "./utils-CssUrKWE.mjs";
 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 { ArrowUp, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronUpIcon, Circle, CircleCheck, 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";
@@ -9,10 +9,9 @@ import { cva } from "class-variance-authority";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Drawer } from "vaul";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import { Label, RadioGroup, Select, Separator } from "radix-ui";
 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";
@@ -380,6 +379,141 @@ function DrawerDescription$1({ className, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/core/field.tsx
+var field_exports = /* @__PURE__ */ __exportAll({
+	Field: () => Field$1,
+	FieldContent: () => FieldContent,
+	FieldDescription: () => FieldDescription,
+	FieldError: () => FieldError,
+	FieldGroup: () => FieldGroup,
+	FieldLabel: () => FieldLabel$1,
+	FieldLegend: () => FieldLegend,
+	FieldSeparator: () => FieldSeparator,
+	FieldSet: () => FieldSet,
+	FieldTitle: () => FieldTitle
+});
+const { Label: Label$3 } = label_exports;
+const { Separator: Separator$2 } = separator_exports;
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "field-set",
+		className: cn("flex flex-col gap-6", `has-[>[data-slot=checkbox-group]]:gap-3
+        has-[>[data-slot=radio-group]]:gap-3`, className),
+		...props
+	});
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+	return /* @__PURE__ */ jsx("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+		...props
+	});
+}
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cn(`group/field-group @container/field-group flex w-full flex-col gap-7
+        data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4`, className),
+		...props
+	});
+}
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+		horizontal: [
+			"flex-row items-center",
+			"[&>[data-slot=field-label]]:flex-auto",
+			"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		],
+		responsive: [
+			"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+			"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		]
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+function Field$1({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+}
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+		...props
+	});
+}
+function FieldLabel$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label$3, {
+		"data-slot": "field-label",
+		className: cn(`group/field-label peer/field-label flex w-fit gap-2 leading-snug
+        group-data-[disabled=true]/field:opacity-50`, `has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col
+        has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border
+        [&>*]:data-[slot=field]:p-4`, `has-data-[state=checked]:bg-primary/5
+        has-data-[state=checked]:border-primary
+        dark:has-data-[state=checked]:bg-primary/10`, className),
+		...props
+	});
+}
+function FieldTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-label",
+		className: cn(`flex w-fit items-center gap-2 text-sm leading-snug font-medium
+        group-data-[disabled=true]/field:opacity-50`, className),
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn(`text-muted-foreground text-sm leading-normal font-normal
+        group-has-[[data-orientation=horizontal]]/field:text-balance`, "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+		...props
+	});
+}
+function FieldSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": !!children,
+		className: cn(`relative -my-2 h-5 text-sm
+        group-data-[variant=outline]/field-group:-mb-2`, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator$2, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
+			className: "bg-background text-muted-foreground relative mx-auto block\n            w-fit px-2",
+			"data-slot": "field-separator-content",
+			children
+		})]
+	});
+}
+function FieldError({ className, children, errors, ...props }) {
+	const content = useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-destructive text-sm font-normal", className),
+		...props,
+		children: content
+	});
+}
+
 //#endregion
 //#region src/core/input.tsx
 var input_exports = /* @__PURE__ */ __exportAll({ Input: () => Input$1 });
@@ -404,7 +538,7 @@ function Input$1({ className, type, ...props }) {
 //#region src/core/label.tsx
 var label_exports = /* @__PURE__ */ __exportAll({ Label: () => Label$2 });
 function Label$2({ className, ...props }) {
-	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+	return /* @__PURE__ */ jsx(Label.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
@@ -504,10 +638,10 @@ function Progress$1({ className, value, barClassName, barStyle, ...props }) {
 //#endregion
 //#region src/core/radio-group.tsx
 var radio_group_exports = /* @__PURE__ */ __exportAll({
-	RadioGroup: () => RadioGroup$1,
+	RadioGroup: () => RadioGroup$2,
 	RadioGroupItem: () => RadioGroupItem
 });
-function RadioGroup$1({ className, ...props }) {
+function RadioGroup$2({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup.Root, {
 		"data-slot": "radio-group",
 		className: cn("grid gap-3", className),
@@ -666,6 +800,21 @@ function SelectScrollDownButton({ className, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/core/separator.tsx
+var separator_exports = /* @__PURE__ */ __exportAll({ Separator: () => Separator$1 });
+function Separator$1({ className, orientation = "horizontal", decorative = true, ...props }) {
+	return /* @__PURE__ */ jsx(Separator.Root, {
+		"data-slot": "separator",
+		decorative,
+		orientation,
+		className: cn(`bg-border shrink-0 data-[orientation=horizontal]:h-px
+        data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full
+        data-[orientation=vertical]:w-px`, className),
+		...props
+	});
+}
+
 //#endregion
 //#region src/core/skeleton.tsx
 var skeleton_exports = /* @__PURE__ */ __exportAll({ Skeleton: () => Skeleton$1 });
@@ -737,15 +886,15 @@ const variantClasses = {
 };
 const sizesClasses = {
 	small: "h-6 px-3 text-sm",
-	medium: "h-8 px-4 text-base",
+	middle: "h-8 px-4 text-base",
 	large: "h-10 px-5 text-lg"
 };
 const iconSizes = {
 	small: "size-6",
-	medium: "size-8",
+	middle: "size-8",
 	large: "size-10"
 };
-const Button$1 = ({ icon, className, variant = "solid", size = "medium", color = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
+const Button$1 = ({ icon, className, variant = "solid", size = "middle", color = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
 	const iconOnly = icon && !children;
 	const computedColor = danger ? "danger" : color;
 	const colored = computedColor && computedColor !== "default";
@@ -754,7 +903,7 @@ const Button$1 = ({ icon, className, variant = "solid", size = "medium", color =
 		disabled,
 		variant: "default",
 		"data-color": computedColor,
-		className: cn("inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[variant || "solid"], sizesClasses[size || "medium"], iconOnly && iconSizes[size || "medium"], block && "w-full", colored && (variant === "solid" ? [
+		className: cn("inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[variant || "solid"], sizesClasses[size || "middle"], iconOnly && iconSizes[size || "middle"], block && "w-full", colored && (variant === "solid" ? [
 			"bg-(--btn-bg)",
 			"hover:bg-(--btn-bg-hover)",
 			"active:bg-(--btn-bg-active)",
@@ -773,7 +922,7 @@ 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 = [], defaultValue, value: _value, onChange: _onChange = () => {} }) => {
+const Group = ({ orientation = "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;
@@ -787,8 +936,8 @@ const Group = ({ direction = "vertical", placement = "left", className, classNam
 		_onChange(nextValue);
 	};
 	return /* @__PURE__ */ jsx("ul", {
-		className: cn(direction === "vertical" ? "space-y-2" : "flex gap-2", className),
-		children: options.map((item, i) => {
+		className: cn(orientation === "vertical" ? "space-y-2" : "flex gap-2", className),
+		children: options.map((item) => {
 			const checked = value.includes(item.value);
 			return /* @__PURE__ */ jsx("li", {
 				className: cn("flex", classNames?.wrapper),
@@ -800,23 +949,25 @@ const Group = ({ direction = "vertical", placement = "left", className, classNam
 					onChange: (checked$1) => onChange(checked$1, item.value),
 					children: item.label
 				})
-			}, i);
+			}, String(item.value));
 		})
 	});
 };
-var Group_default = Group;
+var Group_default$1 = Group;
 
 //#endregion
 //#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, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
+const Checkbox = ({ placement = "left", value = "", children, className, icons, disabled, 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 cursorClassName = disabled ? "cursor-not-allowed" : "cursor-pointer";
 	const onChange = (next) => {
+		if (disabled) return;
 		if (!controlled) setUncontrolledChecked(next);
 		_onChange(next);
 	};
@@ -831,34 +982,35 @@ const Checkbox = ({ placement = "left", value = "", children, className, icons,
 			}
 		}),
 		/* @__PURE__ */ jsx("span", {
-			className: "cursor-pointer",
+			className: cn(cursorClassName, disabled && "opacity-50"),
 			onClick: () => {
 				document.getElementById(id)?.click();
 			},
 			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(SquareCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Square, {})
 		}),
 		children && /* @__PURE__ */ jsx("label", {
-			className: "cursor-pointer",
+			className: cn(cursorClassName, disabled && "opacity-50"),
 			htmlFor: id,
 			children
 		})
 	] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CoreCheckbox, {
 		id,
 		checked,
-		className: "cursor-pointer",
+		disabled,
+		className: cn(cursorClassName),
 		onCheckedChange: onChange
 	}), children && /* @__PURE__ */ jsx(CoreLabel, {
 		htmlFor: id,
-		className: "cursor-pointer text-left",
+		className: cn(cursorClassName, "text-left"),
 		children
 	})] });
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex items-center gap-x-2", placement === "right" && "flex-row-reverse", className),
+		className: cn("flex items-center gap-x-2", placement === "right" && "flex-row-reverse", cursorClassName, className),
 		...props,
 		children: renderContent
 	});
 };
-Checkbox.Group = Group_default;
+Checkbox.Group = Group_default$1;
 var Checkbox_default = Checkbox;
 
 //#endregion
@@ -1233,23 +1385,104 @@ const Progress = ({ value, className, direction = "horizontal", classNames }) =>
 };
 var Progress_default = Progress;
 
+//#endregion
+//#region src/components/atoms/Radio/Group/index.tsx
+const RadioGroup$1 = ({ orientation = "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) => {
+		if (!checked) return;
+		if (!controlled) setUncontrolledValue(optionValue);
+		_onChange(optionValue);
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn(orientation === "vertical" ? "space-y-2" : "flex gap-2", className),
+		children: options.map((item) => {
+			const checked = value === item.value;
+			return /* @__PURE__ */ jsx("li", {
+				className: cn("flex", classNames?.wrapper),
+				children: /* @__PURE__ */ jsx(Radio_default, {
+					placement,
+					className: cn(classNames?.item),
+					value: item.value,
+					checked,
+					onChange: (checked$1) => onChange(checked$1, item.value),
+					children: item.label
+				})
+			}, String(item.value));
+		})
+	});
+};
+var Group_default = RadioGroup$1;
+
 //#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, {
+const { Field, FieldLabel } = field_exports;
+const Radio = ({ placement = "left", value = "", children, className, icons, disabled, 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 cursorClassName = disabled ? "cursor-not-allowed" : "cursor-pointer";
+	const onChange = (next) => {
+		if (disabled) return;
+		if (!controlled) setUncontrolledChecked(next);
+		_onChange(next);
+	};
+	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("input", {
+			id,
+			hidden: true,
+			type: "radio",
+			checked,
+			onChange: (e) => {
+				onChange(e.target.checked);
+			}
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cn(cursorClassName, disabled && "opacity-50"),
+			onClick: () => {
+				document.getElementById(id)?.click();
+			},
+			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(CircleCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Circle, {})
+		}),
+		children && /* @__PURE__ */ jsx("label", {
+			className: cn(cursorClassName, disabled && "opacity-50"),
 			htmlFor: id,
-			children: [" ", children]
-		})]
-	}) });
+			children
+		})
+	] }) : /* @__PURE__ */ jsx(Core$3, {
+		value: checked ? id : "",
+		onValueChange: () => onChange(true),
+		children: /* @__PURE__ */ jsxs(Field, {
+			orientation: "horizontal",
+			className: cn("flex", placement === "right" && "flex-row-reverse"),
+			"data-disabled": disabled,
+			children: [/* @__PURE__ */ jsx(Item$3, {
+				value: id,
+				id,
+				checked,
+				disabled
+			}), /* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: id,
+				children
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-x-2", icons && placement === "right" && "flex-row-reverse", cursorClassName, className),
+		...props,
+		children: renderContent
+	});
 };
+Radio.Group = Group_default;
 var Radio_default = Radio;
 
 //#endregion
@@ -1433,7 +1666,7 @@ var Collapse_default = Collapse;
 
 //#endregion
 //#region src/components/molecules/Menu/Item/Label/index.tsx
-const Label = ({ children, className, ...props }) => {
+const Label$1 = ({ children, className, ...props }) => {
 	if (typeof children === "string") return /* @__PURE__ */ jsx(Typography_default.Text, {
 		className: cn(className),
 		...props,
@@ -1441,7 +1674,7 @@ const Label = ({ children, className, ...props }) => {
 	});
 	return children;
 };
-var Label_default = Label;
+var Label_default = Label$1;
 
 //#endregion
 //#region src/components/molecules/Menu/Item/index.tsx
@@ -5416,10 +5649,11 @@ var Item_default$1 = Item$1;
 //#region src/components/molecules/Marquees/index.tsx
 const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = true, ...props }) => {
 	const [width, setWidth] = useState("100vw");
+	const [padding, setPadding] = useState(0);
 	const [pause, setPause] = useState(false);
 	const throttledWidth = useThrottle(width, 200);
 	const { size } = useResponsiveSize();
-	const { size: innerSize, ref: innerRef } = useResponsiveSize();
+	const containerRef = useRef(null);
 	const hoverEvents = pauseOnHover ? {
 		onMouseEnter: () => {
 			setPause(true);
@@ -5428,9 +5662,10 @@ const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = tru
 			setPause(false);
 		}
 	} : {};
-	const maxWidth = typeof throttledWidth === "string" ? "100%" : Math.min(throttledWidth, innerSize.width);
 	useEffect(() => {
-		if (!size.width) return;
+		if (!size.width || !containerRef.current) return;
+		const computedStyle = getComputedStyle(containerRef.current);
+		setPadding((parseFloat(computedStyle.paddingLeft) || 0) + (parseFloat(computedStyle.paddingRight) || 0));
 		setWidth(size.width);
 	}, [size]);
 	useEffect(() => {
@@ -5443,13 +5678,13 @@ const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = tru
 		};
 	}, []);
 	return /* @__PURE__ */ jsx("div", {
-		ref: innerRef,
+		ref: containerRef,
 		className: cn(className),
 		...hoverEvents,
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("flex flex-col gap-y-5", "overflow-hidden", "whitespace-nowrap", "bg-inherit"),
-			style: { width: maxWidth },
+			style: { width: typeof throttledWidth === "number" ? throttledWidth - padding : throttledWidth },
 			children: items?.map(({ children, key: itemKey, ...item }, key) => /* @__PURE__ */ jsx(Item_default$1, {
 				width: throttledWidth,
 				pause,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",