@jbpark/ui-kit 2.12.0 → 3.1.0

package/dist/Button.mjs

@@ -55,7 +55,6 @@ const Button = ({ icon, className, type = "default", variant, size = "middle", c
 			"border-(--btn-border)"
 		] : ["text-(--btn-bg)", "border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]"]), className),
 		onMouseDown: (e) => {
-			e.preventDefault();
 			onMouseDown?.(e);
 		},
 		...props,

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  shape?: 'default' | 'circle' | 'round';\n  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type = 'default',\n  variant,\n  size = 'middle',\n  color = 'default',\n  shape = 'default',\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      disabled={disabled}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[size],\n        iconOnly && ['p-0', iconClasses[size]],\n        shapesClasses[shape || 'default'],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      onMouseDown={e => {\n        e.preventDefault();\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;AAOA,MAAM,OAAOA;AA+Bb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,OAAO,UACP,QAAQ,WACR,QAAQ,WACR,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAE1D,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACW;EACV,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,OACb,YAAY,CAAC,OAAO,YAAY,MAAM,EACtC,cAAc,SAAS,YACvB,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,KAAE,gBAAgB;AAClB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}
+{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  shape?: 'default' | 'circle' | 'round';\n  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type = 'default',\n  variant,\n  size = 'middle',\n  color = 'default',\n  shape = 'default',\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      disabled={disabled}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[size],\n        iconOnly && ['p-0', iconClasses[size]],\n        shapesClasses[shape || 'default'],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;AAOA,MAAM,OAAOA;AA+Bb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,OAAO,UACP,QAAQ,WACR,QAAQ,WACR,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAE1D,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACW;EACV,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,OACb,YAAY,CAAC,OAAO,YAAY,MAAM,EACtC,cAAc,SAAS,YACvB,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}

package/dist/components/atoms/date-picker.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/atoms/date-picker.d.ts
+interface Props {
+  defaultValue?: Date;
+  value?: Date;
+  placeholder?: string;
+  className?: string;
+  onChange?: (date: Date | undefined) => void;
+}
+declare const DatePicker: ({
+  defaultValue,
+  value: _value,
+  placeholder,
+  className,
+  onChange: _onChange
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DatePicker };
+//# sourceMappingURL=date-picker.d.mts.map

package/dist/components/atoms/date-picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.mts","names":[],"sources":["../../../src/components/atoms/date-picker.tsx"],"mappings":";;;UAeU,KAAA;EACR,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,WAAA;EACA,SAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;AAAA;AAAA,cAGd,UAAA;EAAc,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,WAAA;EAAA,SAAA;EAAA,QAAA,EAAA;AAAA,GAMjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/date-picker.mjs

@@ -0,0 +1,41 @@
+'use client';
+
+import { cn } from "../../utils.mjs";
+import { button_exports } from "../../core/button.mjs";
+import { calendar_exports } from "../../core/calendar.mjs";
+import Popover from "./popover.mjs";
+import { CalendarIcon } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+
+//#region src/components/atoms/date-picker.tsx
+const { Calendar } = calendar_exports;
+const { buttonVariants } = button_exports;
+const DatePicker = ({ defaultValue, value: _value, placeholder = "Pick a date", className, onChange: _onChange = () => {} }) => {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const controlled = _value !== void 0;
+	const value = controlled ? _value : uncontrolledValue;
+	const onChange = (date) => {
+		if (!controlled) setUncontrolledValue(date);
+		_onChange(date);
+	};
+	return /* @__PURE__ */ jsx(Popover, {
+		placement: "bottomLeft",
+		content: /* @__PURE__ */ jsx(Calendar, {
+			mode: "single",
+			selected: value,
+			onSelect: onChange
+		}),
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-empty": !value,
+			className: cn(buttonVariants({ variant: "outline" }), "w-full justify-start text-left font-normal", "data-[empty=true]:text-muted-foreground", className),
+			children: [/* @__PURE__ */ jsx(CalendarIcon, {}), value ? format(value, "PPP") : placeholder]
+		})
+	});
+};
+
+//#endregion
+export { DatePicker as default };
+//# sourceMappingURL=date-picker.mjs.map

package/dist/components/atoms/date-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.mjs","names":["calendar","button"],"sources":["../../../src/components/atoms/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\n\nimport { button, calendar } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Popover from './popover';\n\nconst { Calendar } = calendar;\nconst { buttonVariants } = button;\n\ninterface Props {\n  defaultValue?: Date;\n  value?: Date;\n  placeholder?: string;\n  className?: string;\n  onChange?: (date: Date | undefined) => void;\n}\n\nconst DatePicker = ({\n  defaultValue,\n  value: _value,\n  placeholder = 'Pick a date',\n  className,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<Date | undefined>(\n    defaultValue,\n  );\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const onChange = (date: Date | undefined) => {\n    if (!controlled) {\n      setUncontrolledValue(date);\n    }\n    _onChange(date);\n  };\n\n  return (\n    <Popover\n      placement=\"bottomLeft\"\n      content={<Calendar mode=\"single\" selected={value} onSelect={onChange} />}\n    >\n      <button\n        type=\"button\"\n        data-empty={!value}\n        className={cn(\n          buttonVariants({ variant: 'outline' }),\n          'w-full justify-start text-left font-normal',\n          'data-[empty=true]:text-muted-foreground',\n          className,\n          //\n        )}\n      >\n        <CalendarIcon />\n        {value ? format(value, 'PPP') : placeholder}\n      </button>\n    </Popover>\n  );\n};\n\nexport default DatePicker;\nexport type { Props };\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,EAAE,aAAaA;AACrB,MAAM,EAAE,mBAAmBC;AAU3B,MAAM,cAAc,EAClB,cACA,OAAO,QACP,cAAc,eACd,WACA,UAAU,kBAAkB,SACjB;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,aACD;CAED,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,SAA2B;AAC3C,MAAI,CAAC,WACH,sBAAqB,KAAK;AAE5B,YAAU,KAAK;;AAGjB,QACE,oBAAC;EACC,WAAU;EACV,SAAS,oBAAC;GAAS,MAAK;GAAS,UAAU;GAAO,UAAU;IAAY;YAExE,qBAAC;GACC,MAAK;GACL,cAAY,CAAC;GACb,WAAW,GACT,eAAe,EAAE,SAAS,WAAW,CAAC,EACtC,8CACA,2CACA,UAED;cAED,oBAAC,iBAAe,EACf,QAAQ,OAAO,OAAO,MAAM,GAAG;IACzB;GACD"}

package/dist/components/atoms/float-button/back-top.mjs

@@ -4,17 +4,17 @@ import { cn } from "../../../utils.mjs";
 import FloatButton from "./float-button.mjs";
 import { ArrowUp } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
-import { useWindowScroll } from "@uidotdev/usehooks";
+import { useWindowScroll } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/float-button/back-top.tsx
 const BackTop = ({ visibilityHeight = 450, className, onClick, ...props }) => {
-	const [{ y }, scrollTo] = useWindowScroll();
+	const { y } = useWindowScroll();
 	return /* @__PURE__ */ jsx(FloatButton, {
 		"aria-label": "맨 위로",
 		icon: /* @__PURE__ */ jsx(ArrowUp, {}),
 		className: cn(className, (!y || visibilityHeight > y) && "hidden"),
 		onClick: (e) => {
-			scrollTo({
+			window.scrollTo({
 				left: 0,
 				top: 0,
 				behavior: "smooth"

package/dist/components/atoms/float-button/back-top.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"back-top.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"sourcesContent":["'use client';\n\nimport { MouseEvent } from 'react';\n\nimport { useWindowScroll } from '@uidotdev/usehooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Props as ButtonProps } from '../button';\nimport FloatButton from './float-button';\n\nexport interface Props extends ButtonProps {\n  visibilityHeight?: number;\n  onClick?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nconst BackTop = ({\n  visibilityHeight = 450,\n  className,\n  onClick,\n  ...props\n}: Props) => {\n  const [{ y }, scrollTo] = useWindowScroll();\n\n  return (\n    <FloatButton\n      aria-label=\"맨 위로\"\n      icon={<ArrowUp />}\n      className={cn(\n        className,\n        (!y || visibilityHeight > y) && 'hidden',\n        //\n      )}\n      onClick={e => {\n        scrollTo({ left: 0, top: 0, behavior: 'smooth' });\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,EACf,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,CAAC,EAAE,KAAK,YAAY,iBAAiB;AAE3C,QACE,oBAAC;EACC,cAAW;EACX,MAAM,oBAAC,YAAU;EACjB,WAAW,GACT,YACC,CAAC,KAAK,mBAAmB,MAAM,SAEjC;EACD,UAAS,MAAK;AACZ,YAAS;IAAE,MAAM;IAAG,KAAK;IAAG,UAAU;IAAU,CAAC;AACjD,aAAU,EAAE;;EAEd,GAAI;GACJ"}
+{"version":3,"file":"back-top.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"sourcesContent":["'use client';\n\nimport { MouseEvent } from 'react';\n\nimport { useWindowScroll } from '@jbpark/use-hooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Props as ButtonProps } from '../button';\nimport FloatButton from './float-button';\n\nexport interface Props extends ButtonProps {\n  visibilityHeight?: number;\n  onClick?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nconst BackTop = ({\n  visibilityHeight = 450,\n  className,\n  onClick,\n  ...props\n}: Props) => {\n  const { y } = useWindowScroll();\n\n  return (\n    <FloatButton\n      aria-label=\"맨 위로\"\n      icon={<ArrowUp />}\n      className={cn(\n        className,\n        (!y || visibilityHeight > y) && 'hidden',\n        //\n      )}\n      onClick={e => {\n        window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,EACf,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,EAAE,MAAM,iBAAiB;AAE/B,QACE,oBAAC;EACC,cAAW;EACX,MAAM,oBAAC,YAAU;EACjB,WAAW,GACT,YACC,CAAC,KAAK,mBAAmB,MAAM,SAEjC;EACD,UAAS,MAAK;AACZ,UAAO,SAAS;IAAE,MAAM;IAAG,KAAK;IAAG,UAAU;IAAU,CAAC;AACxD,aAAU,EAAE;;EAEd,GAAI;GACJ"}

package/dist/components/atoms/index.d.mts

@@ -3,6 +3,7 @@ import Tag from "../../Tag.mjs";
 import Typography from "../../Typography.mjs";
 import { Checkbox } from "./checkbox/index.mjs";
 import { ColorPicker } from "./color-picker.mjs";
+import { DatePicker } from "./date-picker.mjs";
 import { FloatButton } from "./float-button/index.mjs";
 import { Input } from "./input/index.mjs";
 import { Popover } from "./popover.mjs";

package/dist/components/atoms/radio/context.mjs

@@ -0,0 +1,21 @@
+'use client';
+
+import { createContext } from "react";
+
+//#region src/components/atoms/radio/context.tsx
+/**
+* Internal only — not exported from the package entry points.
+*
+* `true` when a `Radio` is rendered inside a `RadioGroup` that already owns a
+* single shared `RadioGroupPrimitive.Root`. In that case each `Radio` renders
+* only its `RadioGroupItem` so that Radix can manage roving focus (arrow-key
+* navigation) across every option of the group.
+*
+* `false` (default) means the `Radio` is standalone and has to wrap itself in
+* its own `Root` to stay functional.
+*/
+const RadioGroupContext = createContext(false);
+
+//#endregion
+export { RadioGroupContext };
+//# sourceMappingURL=context.mjs.map

package/dist/components/atoms/radio/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../src/components/atoms/radio/context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext } from 'react';\n\n/**\n * Internal only — not exported from the package entry points.\n *\n * `true` when a `Radio` is rendered inside a `RadioGroup` that already owns a\n * single shared `RadioGroupPrimitive.Root`. In that case each `Radio` renders\n * only its `RadioGroupItem` so that Radix can manage roving focus (arrow-key\n * navigation) across every option of the group.\n *\n * `false` (default) means the `Radio` is standalone and has to wrap itself in\n * its own `Root` to stay functional.\n */\nexport const RadioGroupContext = createContext(false);\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAa,oBAAoB,cAAc,MAAM"}

package/dist/components/atoms/radio/group.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"mappings":";;;KASY,WAAA;AAAA,KAEP,MAAA;EACH,KAAA;EACA,KAAA,EAAO,WAAA;EACP,QAAA;AAAA;AAAA,KAGG,OAAA,qCAA4C,MAAA;AAAA,UAEhC,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,OAAA,GAAU,OAAA;EACV,WAAA;EACA,SAAA;EACA,UAAA,GAAa,MAAA;EACb,YAAA,GAAe,WAAA;EACf,KAAA,GAAQ,WAAA;EACR,UAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,QAAA,IAAY,KAAA,EAAO,WAAA;AAAA;AAAA,cAGf,UAAA;EAAc,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA,EAAA,QAAA;EAAA,UAAA;EAAA,WAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAcjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"mappings":";;;KAaY,WAAA;AAAA,KAEP,MAAA;EACH,KAAA;EACA,KAAA,EAAO,WAAA;EACP,QAAA;AAAA;AAAA,KAGG,OAAA,qCAA4C,MAAA;AAAA,UAEhC,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,OAAA,GAAU,OAAA;EACV,WAAA;EACA,SAAA;EACA,UAAA,GAAa,MAAA;EACb,YAAA,GAAe,WAAA;EACf,KAAA,GAAQ,WAAA;EACR,UAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,QAAA,IAAY,KAAA,EAAO,WAAA;AAAA;AAAA,cAGf,UAAA;EAAc,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA,EAAA,QAAA;EAAA,UAAA;EAAA,WAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAcjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/radio/group.mjs

@@ -1,12 +1,15 @@
 'use client';
 
 import { cn } from "../../../utils.mjs";
+import { radio_group_exports } from "../../../core/radio-group.mjs";
 import Button from "../../../Button.mjs";
+import { RadioGroupContext } from "./context.mjs";
 import Radio from "./radio.mjs";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/radio/group.tsx
+const { RadioGroup: Core } = radio_group_exports;
 const RadioGroup = ({ orientation = "horizontal", placement = "left", className, classNames = {}, options: _options = [], optionType = "default", buttonStyle = "solid", size, disabled, defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const controlled = _value !== void 0;
@@ -21,7 +24,16 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 		if (!controlled) setUncontrolledValue(optionValue);
 		_onChange(optionValue);
 	};
-	return /* @__PURE__ */ jsx("ul", {
+	const baseId = useId();
+	const getOptionId = (index) => `${baseId}-${index}`;
+	const checkedIndex = options.findIndex((item) => item.value === value);
+	const checkedId = checkedIndex === -1 ? "" : getOptionId(checkedIndex);
+	const onValueChange = (optionId) => {
+		const item = options.find((_, index) => getOptionId(index) === optionId);
+		if (!item) return;
+		onChange(true, item.value);
+	};
+	const list = /* @__PURE__ */ jsx("ul", {
 		...props,
 		className: cn("flex gap-4", className, orientation === "vertical" && "flex-col", isButton && "gap-0"),
 		children: options.map((item, index) => {
@@ -36,6 +48,7 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 					onClick: () => onChange(true, item.value),
 					children: item.label
 				}) : /* @__PURE__ */ jsx(Radio, {
+					id: getOptionId(index),
 					placement,
 					className: cn(classNames?.item),
 					value: item.value,
@@ -47,6 +60,16 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 			}, String(item.value));
 		})
 	});
+	if (isButton) return list;
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx(Core, {
+			className: "block",
+			value: checkedId,
+			onValueChange,
+			children: list
+		})
+	});
 };
 
 //#endregion

package/dist/components/atoms/radio/group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport Radio from './radio';\n\nexport type OptionValue = string | number | boolean;\n\ntype Option = {\n  label: string;\n  value: OptionValue;\n  disabled?: boolean;\n};\n\ntype Options = string[] | number[] | boolean[] | Option[];\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: Record<string, string>;\n  defaultValue?: OptionValue;\n  value?: OptionValue;\n  optionType?: 'default' | 'button';\n  buttonStyle?: 'solid' | 'outlined';\n  size?: 'small' | 'middle' | 'large';\n  disabled?: boolean;\n  onChange?: (value: OptionValue) => void;\n}\n\nconst RadioGroup = ({\n  orientation = 'horizontal',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  optionType = 'default',\n  buttonStyle = 'solid',\n  size,\n  disabled,\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<\n    OptionValue | undefined\n  >(defaultValue);\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const options: Option[] = _options.map(item =>\n    typeof item === 'object'\n      ? item\n      : {\n          label: `${item}`,\n          value: item,\n        },\n  );\n\n  const isButton = optionType === 'button';\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    if (!checked) {\n      return;\n    }\n    if (!controlled) {\n      setUncontrolledValue(optionValue);\n    }\n    _onChange(optionValue);\n  };\n\n  return (\n    <ul\n      {...props}\n      className={cn(\n        'flex gap-4',\n        className,\n        orientation === 'vertical' && 'flex-col',\n        isButton && 'gap-0',\n      )}\n    >\n      {options.map((item: Option, index) => {\n        const checked = value === item.value;\n\n        return (\n          <li\n            key={String(item.value)}\n            className={cn('flex', classNames?.wrapper)}\n          >\n            {isButton ? (\n              <Button\n                variant={checked ? buttonStyle : 'outlined'}\n                size={size}\n                className={cn(\n                  'rounded-none',\n                  index === 0 && 'rounded-l-lg',\n                  index === options.length - 1 && 'rounded-r-lg',\n                  checked && buttonStyle === 'outlined' && 'border-primary',\n                )}\n                disabled={disabled || item.disabled}\n                onClick={() => onChange(true, item.value)}\n              >\n                {item.label}\n              </Button>\n            ) : (\n              <Radio\n                placement={placement}\n                className={cn(classNames?.item)}\n                value={item.value}\n                checked={checked}\n                disabled={disabled || item.disabled}\n                onChange={checked => onChange(checked, item.value)}\n              >\n                {item.label}\n              </Radio>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;AAoCA,MAAM,cAAc,EAClB,cAAc,cACd,YAAY,QACZ,WACA,aAAa,EAAE,EACf,SAAS,WAAW,EAAE,EACtB,aAAa,WACb,cAAc,SACd,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAEhD,aAAa;CAEf,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,UAAoB,SAAS,KAAI,SACrC,OAAO,SAAS,WACZ,OACA;EACE,OAAO,GAAG;EACV,OAAO;EACR,CACN;CAED,MAAM,WAAW,eAAe;CAEhC,MAAM,YAAY,SAAkB,gBAA6B;AAC/D,MAAI,CAAC,QACH;AAEF,MAAI,CAAC,WACH,sBAAqB,YAAY;AAEnC,YAAU,YAAY;;AAGxB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,cACA,WACA,gBAAgB,cAAc,YAC9B,YAAY,QACb;YAEA,QAAQ,KAAK,MAAc,UAAU;GACpC,MAAM,UAAU,UAAU,KAAK;AAE/B,UACE,oBAAC;IAEC,WAAW,GAAG,QAAQ,YAAY,QAAQ;cAEzC,WACC,oBAAC;KACC,SAAS,UAAU,cAAc;KAC3B;KACN,WAAW,GACT,gBACA,UAAU,KAAK,gBACf,UAAU,QAAQ,SAAS,KAAK,gBAChC,WAAW,gBAAgB,cAAc,iBAC1C;KACD,UAAU,YAAY,KAAK;KAC3B,eAAe,SAAS,MAAM,KAAK,MAAM;eAExC,KAAK;MACC,GAET,oBAAC;KACY;KACX,WAAW,GAAG,YAAY,KAAK;KAC/B,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,MAAM;eAEjD,KAAK;MACA;MA5BL,OAAO,KAAK,MAAM,CA8BpB;IAEP;GACC"}
+{"version":3,"file":"group.mjs","names":["radio"],"sources":["../../../../src/components/atoms/radio/group.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport { RadioGroupContext } from './context';\nimport Radio from './radio';\n\nconst { RadioGroup: Core } = radio;\n\nexport type OptionValue = string | number | boolean;\n\ntype Option = {\n  label: string;\n  value: OptionValue;\n  disabled?: boolean;\n};\n\ntype Options = string[] | number[] | boolean[] | Option[];\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: Record<string, string>;\n  defaultValue?: OptionValue;\n  value?: OptionValue;\n  optionType?: 'default' | 'button';\n  buttonStyle?: 'solid' | 'outlined';\n  size?: 'small' | 'middle' | 'large';\n  disabled?: boolean;\n  onChange?: (value: OptionValue) => void;\n}\n\nconst RadioGroup = ({\n  orientation = 'horizontal',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  optionType = 'default',\n  buttonStyle = 'solid',\n  size,\n  disabled,\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<\n    OptionValue | undefined\n  >(defaultValue);\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const options: Option[] = _options.map(item =>\n    typeof item === 'object'\n      ? item\n      : {\n          label: `${item}`,\n          value: item,\n        },\n  );\n\n  const isButton = optionType === 'button';\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    if (!checked) {\n      return;\n    }\n    if (!controlled) {\n      setUncontrolledValue(optionValue);\n    }\n    _onChange(optionValue);\n  };\n\n  // A single Radix radiogroup root owns every option so that arrow keys move\n  // focus across the whole group. Radix addresses items by string value, so\n  // each option gets a deterministic id derived from a stable base id.\n  const baseId = useId();\n  const getOptionId = (index: number) => `${baseId}-${index}`;\n  const checkedIndex = options.findIndex(item => item.value === value);\n  const checkedId = checkedIndex === -1 ? '' : getOptionId(checkedIndex);\n\n  const onValueChange = (optionId: string) => {\n    const item = options.find((_, index) => getOptionId(index) === optionId);\n\n    if (!item) {\n      return;\n    }\n\n    onChange(true, item.value);\n  };\n\n  const list = (\n    <ul\n      {...props}\n      className={cn(\n        'flex gap-4',\n        className,\n        orientation === 'vertical' && 'flex-col',\n        isButton && 'gap-0',\n      )}\n    >\n      {options.map((item: Option, index) => {\n        const checked = value === item.value;\n\n        return (\n          <li\n            key={String(item.value)}\n            className={cn('flex', classNames?.wrapper)}\n          >\n            {isButton ? (\n              <Button\n                variant={checked ? buttonStyle : 'outlined'}\n                size={size}\n                className={cn(\n                  'rounded-none',\n                  index === 0 && 'rounded-l-lg',\n                  index === options.length - 1 && 'rounded-r-lg',\n                  checked && buttonStyle === 'outlined' && 'border-primary',\n                )}\n                disabled={disabled || item.disabled}\n                onClick={() => onChange(true, item.value)}\n              >\n                {item.label}\n              </Button>\n            ) : (\n              <Radio\n                id={getOptionId(index)}\n                placement={placement}\n                className={cn(classNames?.item)}\n                value={item.value}\n                checked={checked}\n                disabled={disabled || item.disabled}\n                onChange={checked => onChange(checked, item.value)}\n              >\n                {item.label}\n              </Radio>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  // `optionType='button'` renders `Button`s instead of radios, so it keeps the\n  // plain list and stays out of the Radix radiogroup entirely.\n  if (isButton) {\n    return list;\n  }\n\n  return (\n    <RadioGroupContext.Provider value={true}>\n      <Core className=\"block\" value={checkedId} onValueChange={onValueChange}>\n        {list}\n      </Core>\n    </RadioGroupContext.Provider>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,EAAE,YAAY,SAASA;AA6B7B,MAAM,cAAc,EAClB,cAAc,cACd,YAAY,QACZ,WACA,aAAa,EAAE,EACf,SAAS,WAAW,EAAE,EACtB,aAAa,WACb,cAAc,SACd,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAEhD,aAAa;CAEf,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,UAAoB,SAAS,KAAI,SACrC,OAAO,SAAS,WACZ,OACA;EACE,OAAO,GAAG;EACV,OAAO;EACR,CACN;CAED,MAAM,WAAW,eAAe;CAEhC,MAAM,YAAY,SAAkB,gBAA6B;AAC/D,MAAI,CAAC,QACH;AAEF,MAAI,CAAC,WACH,sBAAqB,YAAY;AAEnC,YAAU,YAAY;;CAMxB,MAAM,SAAS,OAAO;CACtB,MAAM,eAAe,UAAkB,GAAG,OAAO,GAAG;CACpD,MAAM,eAAe,QAAQ,WAAU,SAAQ,KAAK,UAAU,MAAM;CACpE,MAAM,YAAY,iBAAiB,KAAK,KAAK,YAAY,aAAa;CAEtE,MAAM,iBAAiB,aAAqB;EAC1C,MAAM,OAAO,QAAQ,MAAM,GAAG,UAAU,YAAY,MAAM,KAAK,SAAS;AAExE,MAAI,CAAC,KACH;AAGF,WAAS,MAAM,KAAK,MAAM;;CAG5B,MAAM,OACJ,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,cACA,WACA,gBAAgB,cAAc,YAC9B,YAAY,QACb;YAEA,QAAQ,KAAK,MAAc,UAAU;GACpC,MAAM,UAAU,UAAU,KAAK;AAE/B,UACE,oBAAC;IAEC,WAAW,GAAG,QAAQ,YAAY,QAAQ;cAEzC,WACC,oBAAC;KACC,SAAS,UAAU,cAAc;KAC3B;KACN,WAAW,GACT,gBACA,UAAU,KAAK,gBACf,UAAU,QAAQ,SAAS,KAAK,gBAChC,WAAW,gBAAgB,cAAc,iBAC1C;KACD,UAAU,YAAY,KAAK;KAC3B,eAAe,SAAS,MAAM,KAAK,MAAM;eAExC,KAAK;MACC,GAET,oBAAC;KACC,IAAI,YAAY,MAAM;KACX;KACX,WAAW,GAAG,YAAY,KAAK;KAC/B,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,MAAM;eAEjD,KAAK;MACA;MA7BL,OAAO,KAAK,MAAM,CA+BpB;IAEP;GACC;AAKP,KAAI,SACF,QAAO;AAGT,QACE,oBAAC,kBAAkB;EAAS,OAAO;YACjC,oBAAC;GAAK,WAAU;GAAQ,OAAO;GAA0B;aACtD;IACI;GACoB"}

package/dist/components/atoms/radio/radio.d.mts

@@ -11,6 +11,12 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<typeof Core>, 'onCha
   checked?: boolean;
   value?: OptionValue;
   disabled?: boolean;
+  /**
+   * Id shared by the underlying control and its label. Generated internally
+   * when omitted. `RadioGroup` passes a deterministic id so that the group's
+   * single Radix root can address each option.
+   */
+  id?: string;
   icons?: {
     checked: React.ReactNode;
     unchecked: React.ReactNode;
@@ -26,6 +32,7 @@ declare const Radio: ({
   disabled,
   defaultChecked,
   checked: _checked,
+  id: _id,
   onChange: _onChange,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;

package/dist/components/atoms/radio/radio.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"mappings":";;;;;;cAWoB,IAAA,SAAI,UAAA;AAAA,UAGP,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA,QAAgC,IAAA;EAGtC,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,QAAA;EACA,KAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EACrD,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,KAAA;EAAS,SAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,cAAA;EAAA,OAAA,EAAA,QAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAWZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"radio.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"mappings":";;;;;;cAYoB,IAAA,SAAI,UAAA;AAAA,UAGP,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA,QAAgC,IAAA;EAGtC,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,QAAA;EAXsB;;AAGxB;;;EAcE,EAAA;EACA,KAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EACrD,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,KAAA;EAAS,SAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,cAAA;EAAA,OAAA,EAAA,QAAA;EAAA,EAAA,EAAA,GAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAYZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/radio/radio.mjs

@@ -3,16 +3,19 @@
 import { cn } from "../../../utils.mjs";
 import { field_exports } from "../../../core/field.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
+import { RadioGroupContext } from "./context.mjs";
 import { Circle, CircleCheck } from "lucide-react";
-import { useId, useState } from "react";
+import { useContext, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/radio/radio.tsx
 const { RadioGroup: Core, RadioGroupItem: Item } = radio_group_exports;
 const { Field, FieldLabel } = field_exports;
-const Radio = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
+const Radio = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, id: _id, onChange: _onChange = () => {}, ...props }) => {
 	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
-	const id = useId();
+	const generatedId = useId();
+	const id = _id ?? generatedId;
+	const grouped = useContext(RadioGroupContext);
 	const controlled = _checked !== void 0;
 	const checked = controlled ? _checked : uncontrolledChecked;
 	const cursorClassName = disabled ? "cursor-not-allowed" : "cursor-pointer";
@@ -21,6 +24,21 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 		if (!controlled) setUncontrolledChecked(next);
 		_onChange(next);
 	};
+	const renderField = /* @__PURE__ */ jsxs(Field, {
+		orientation: "horizontal",
+		className: cn("flex gap-2", placement === "right" && "flex-row-reverse"),
+		"data-disabled": disabled,
+		children: [/* @__PURE__ */ jsx(Item, {
+			value: id,
+			id,
+			checked,
+			disabled
+		}), /* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: id,
+			className: cursorClassName,
+			children
+		})]
+	});
 	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("input", {
 			id,
@@ -53,24 +71,10 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 			htmlFor: id,
 			children
 		})
-	] }) : /* @__PURE__ */ jsx(Core, {
+	] }) : grouped ? renderField : /* @__PURE__ */ jsx(Core, {
 		value: checked ? id : "",
 		onValueChange: () => onChange(true),
-		children: /* @__PURE__ */ jsxs(Field, {
-			orientation: "horizontal",
-			className: cn("flex gap-2", placement === "right" && "flex-row-reverse"),
-			"data-disabled": disabled,
-			children: [/* @__PURE__ */ jsx(Item, {
-				value: id,
-				id,
-				checked,
-				disabled
-			}), /* @__PURE__ */ jsx(FieldLabel, {
-				htmlFor: id,
-				className: cursorClassName,
-				children
-			})]
-		})
+		children: renderField
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex items-center", icons && placement === "right" && "flex-row-reverse", cursorClassName, className),

package/dist/components/atoms/radio/radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.mjs","names":["radio","field"],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Circle, CircleCheck } from 'lucide-react';\n\nimport { field, radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<typeof Core>,\n  'onChange' | 'value'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  disabled?: boolean;\n  icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n  onChange?: (checked: boolean) => void;\n}\n\nconst Radio = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const id = useId();\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"radio\"\n        checked={checked}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        role=\"radio\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          document.getElementById(id)?.click();\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            document.getElementById(id)?.click();\n          }\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <CircleCheck />)\n          : (icons.unchecked ?? <Circle />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <Core value={checked ? id : ''} onValueChange={() => onChange(true)}>\n      <Field\n        orientation=\"horizontal\"\n        className={cn(\n          'flex gap-2',\n          placement === 'right' && 'flex-row-reverse',\n        )}\n        data-disabled={disabled}\n      >\n        <Item value={id} id={id} checked={checked} disabled={disabled} />\n        <FieldLabel htmlFor={id} className={cursorClassName}>\n          {children}\n        </FieldLabel>\n      </Field>\n    </Core>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        icons && placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAe9B,MAAM,SAAS,EACb,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,KAAK,OAAO;CAClB,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;GAEtC,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,cAAS,eAAe,GAAG,EAAE,OAAO;;;aAIvC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,oBAAC;EAAK,OAAO,UAAU,KAAK;EAAI,qBAAqB,SAAS,KAAK;YACjE,qBAAC;GACC,aAAY;GACZ,WAAW,GACT,cACA,cAAc,WAAW,mBAC1B;GACD,iBAAe;cAEf,oBAAC;IAAK,OAAO;IAAQ;IAAa;IAAmB;KAAY,EACjE,oBAAC;IAAW,SAAS;IAAI,WAAW;IACjC;KACU;IACP;GACH;AAGT,QACE,oBAAC;EACC,WAAW,GACT,qBACA,SAAS,cAAc,WAAW,oBAClC,iBACA,UAED;EACD,GAAI;YAEH;GACG"}
+{"version":3,"file":"radio.mjs","names":["radio","field"],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useId, useState } from 'react';\n\nimport { Circle, CircleCheck } from 'lucide-react';\n\nimport { field, radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { RadioGroupContext } from './context';\nimport { type OptionValue } from './group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<typeof Core>,\n  'onChange' | 'value'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  disabled?: boolean;\n  /**\n   * Id shared by the underlying control and its label. Generated internally\n   * when omitted. `RadioGroup` passes a deterministic id so that the group's\n   * single Radix root can address each option.\n   */\n  id?: string;\n  icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n  onChange?: (checked: boolean) => void;\n}\n\nconst Radio = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  id: _id,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const generatedId = useId();\n  const id = _id ?? generatedId;\n  const grouped = useContext(RadioGroupContext);\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  // When rendered inside a `RadioGroup`, the group owns the single shared\n  // `Core` (Radix radiogroup root) so that arrow keys move focus across every\n  // option. A standalone `Radio` still has to provide its own root.\n  const renderField = (\n    <Field\n      orientation=\"horizontal\"\n      className={cn('flex gap-2', placement === 'right' && 'flex-row-reverse')}\n      data-disabled={disabled}\n    >\n      <Item value={id} id={id} checked={checked} disabled={disabled} />\n      <FieldLabel htmlFor={id} className={cursorClassName}>\n        {children}\n      </FieldLabel>\n    </Field>\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"radio\"\n        checked={checked}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        role=\"radio\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          document.getElementById(id)?.click();\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            document.getElementById(id)?.click();\n          }\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <CircleCheck />)\n          : (icons.unchecked ?? <Circle />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : grouped ? (\n    renderField\n  ) : (\n    <Core value={checked ? id : ''} onValueChange={() => onChange(true)}>\n      {renderField}\n    </Core>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        icons && placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAqB9B,MAAM,SAAS,EACb,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,IAAI,KACJ,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,cAAc,OAAO;CAC3B,MAAM,KAAK,OAAO;CAClB,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAMjB,MAAM,cACJ,qBAAC;EACC,aAAY;EACZ,WAAW,GAAG,cAAc,cAAc,WAAW,mBAAmB;EACxE,iBAAe;aAEf,oBAAC;GAAK,OAAO;GAAQ;GAAa;GAAmB;IAAY,EACjE,oBAAC;GAAW,SAAS;GAAI,WAAW;GACjC;IACU;GACP;CAGV,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;GAEtC,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,cAAS,eAAe,GAAG,EAAE,OAAO;;;aAIvC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GACD,UACF,cAEA,oBAAC;EAAK,OAAO,UAAU,KAAK;EAAI,qBAAqB,SAAS,KAAK;YAChE;GACI;AAGT,QACE,oBAAC;EACC,WAAW,GACT,qBACA,SAAS,cAAc,WAAW,oBAClC,iBACA,UAED;EACD,GAAI;YAEH;GACG"}

package/dist/components/molecules/index.d.mts

@@ -6,4 +6,5 @@ import Space from "../../Space.mjs";
 import { Collapse } from "./collapse.mjs";
 import { Dropdown } from "./dropdown.mjs";
 import { Marquees } from "./marquees/index.mjs";
-import { Splitter } from "./splitter/index.mjs";
+import { Splitter } from "./splitter/index.mjs";
+import { Upload, UploadFile } from "./upload.mjs";

package/dist/components/molecules/upload.d.mts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/molecules/upload.d.ts
+interface UploadFile {
+  uid: string;
+  name: string;
+  url: string;
+}
+interface Props {
+  defaultValue?: UploadFile[];
+  value?: UploadFile[];
+  multiple?: boolean;
+  accept?: string;
+  maxCount?: number;
+  disabled?: boolean;
+  className?: string;
+  classNames?: {
+    dropzone?: string;
+    list?: string;
+    item?: string;
+  };
+  onChange?: (files: UploadFile[]) => void;
+}
+declare const Upload: ({
+  defaultValue,
+  value: _value,
+  multiple,
+  accept,
+  maxCount,
+  disabled,
+  className,
+  classNames,
+  onChange: _onChange
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Upload, UploadFile };
+//# sourceMappingURL=upload.d.mts.map

package/dist/components/molecules/upload.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.d.mts","names":[],"sources":["../../../src/components/molecules/upload.tsx"],"mappings":";;;UASiB,UAAA;EACf,GAAA;EACA,IAAA;EACA,GAAA;AAAA;AAAA,UAGe,KAAA;EACf,YAAA,GAAe,UAAA;EACf,KAAA,GAAQ,UAAA;EACR,QAAA;EACA,MAAA;EACA,QAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,IAAA;EAAA;EAEF,QAAA,IAAY,KAAA,EAAO,UAAA;AAAA;AAAA,cAOf,MAAA;EAAU,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,QAAA,EAAA;AAAA,GAUb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/upload.mjs

@@ -0,0 +1,101 @@
+'use client';
+
+import { cn } from "../../utils.mjs";
+import { Upload, X } from "lucide-react";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFileToDataUrl } from "@jbpark/use-hooks";
+
+//#region src/components/molecules/upload.tsx
+const isImage = (file) => /^data:image\//.test(file.url) || /\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);
+const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept = "image/*", maxCount, disabled, className, classNames, onChange: _onChange = () => {} }) => {
+	const inputId = useId();
+	const readAsDataUrl = useFileToDataUrl();
+	const [isDragOver, setIsDragOver] = useState(false);
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const controlled = _value !== void 0;
+	const files = controlled ? _value : uncontrolledValue;
+	const onChange = (next) => {
+		if (!controlled) setUncontrolledValue(next);
+		_onChange(next);
+	};
+	const addFiles = async (fileList) => {
+		const incoming = Array.from(fileList);
+		const remaining = typeof maxCount === "number" ? Math.max(0, maxCount - files.length) : incoming.length;
+		const accepted = incoming.slice(0, remaining);
+		const uploaded = await Promise.all(accepted.map(async (file) => ({
+			uid: `${file.name}-${file.lastModified}-${file.size}`,
+			name: file.name,
+			url: await readAsDataUrl(file)
+		})));
+		onChange([...files, ...uploaded]);
+	};
+	const removeFile = (uid) => {
+		onChange(files.filter((file) => file.uid !== uid));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-3", className),
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: inputId,
+			onDragOver: (e) => {
+				e.preventDefault();
+				if (!disabled) setIsDragOver(true);
+			},
+			onDragLeave: () => setIsDragOver(false),
+			onDrop: (e) => {
+				e.preventDefault();
+				setIsDragOver(false);
+				if (disabled) return;
+				if (e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
+			},
+			className: cn("flex cursor-pointer flex-col items-center justify-center gap-2", "rounded-md border border-dashed p-6 text-center", "text-muted-foreground text-sm", "transition-colors", isDragOver && "border-primary bg-accent", disabled && "pointer-events-none cursor-not-allowed opacity-50", classNames?.dropzone),
+			children: [
+				/* @__PURE__ */ jsx(Upload, { className: "size-6" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"Click or drag file",
+					multiple ? "s" : "",
+					" to upload"
+				] }),
+				/* @__PURE__ */ jsx("input", {
+					id: inputId,
+					type: "file",
+					accept,
+					multiple,
+					disabled,
+					className: "hidden",
+					onChange: (e) => {
+						if (e.target.files?.length) addFiles(e.target.files);
+						e.target.value = "";
+					}
+				})
+			]
+		}), files.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: cn("flex flex-col gap-2", classNames?.list),
+			children: files.map((file) => /* @__PURE__ */ jsxs("li", {
+				className: cn("flex items-center gap-2 rounded-md border p-2", classNames?.item),
+				children: [
+					isImage(file) && /* @__PURE__ */ jsx("img", {
+						src: file.url,
+						alt: "",
+						className: "size-10 shrink-0 rounded object-cover"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate text-sm",
+						children: file.name
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => removeFile(file.uid),
+						className: "text-muted-foreground hover:text-foreground shrink-0",
+						"aria-label": `Remove ${file.name}`,
+						children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+					})
+				]
+			}, file.uid))
+		})]
+	});
+};
+
+//#endregion
+export { Upload$1 as default };
+//# sourceMappingURL=upload.mjs.map

package/dist/components/molecules/upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.mjs","names":["Upload","UploadIcon"],"sources":["../../../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useFileToDataUrl } from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [isDragOver, setIsDragOver] = useState(false);\n  const [uncontrolledValue, setUncontrolledValue] =\n    useState<UploadFile[]>(defaultValue);\n\n  const controlled = _value !== undefined;\n  const files = controlled ? _value : uncontrolledValue;\n\n  const onChange = (next: UploadFile[]) => {\n    if (!controlled) {\n      setUncontrolledValue(next);\n    }\n    _onChange(next);\n  };\n\n  const addFiles = async (fileList: FileList) => {\n    const incoming = Array.from(fileList);\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n\n    const uploaded = await Promise.all(\n      accepted.map(async file => ({\n        uid: `${file.name}-${file.lastModified}-${file.size}`,\n        name: file.name,\n        url: await readAsDataUrl(file),\n      })),\n    );\n\n    onChange([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    onChange(files.filter(file => file.uid !== uid));\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        htmlFor={inputId}\n        onDragOver={e => {\n          e.preventDefault();\n          if (!disabled) {\n            setIsDragOver(true);\n          }\n        }}\n        onDragLeave={() => setIsDragOver(false)}\n        onDrop={e => {\n          e.preventDefault();\n          setIsDragOver(false);\n\n          if (disabled) {\n            return;\n          }\n\n          if (e.dataTransfer.files.length) {\n            addFiles(e.dataTransfer.files);\n          }\n        }}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragOver && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(e.target.files);\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'flex flex-col gap-2',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                'flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <button\n                type=\"button\"\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              >\n                <X className=\"size-4\" />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":";;;;;;;;;AA+BA,MAAM,WAAW,SACf,gBAAgB,KAAK,KAAK,IAAI,IAC9B,+BAA+B,KAAK,KAAK,KAAK;AAEhD,MAAMA,YAAU,EACd,eAAe,EAAE,EACjB,OAAO,QACP,WAAW,MACX,SAAS,WACT,UACA,UACA,WACA,YACA,UAAU,kBAAkB,SACjB;CACX,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,mBAAmB,wBACxB,SAAuB,aAAa;CAEtC,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,SAAuB;AACvC,MAAI,CAAC,WACH,sBAAqB,KAAK;AAE5B,YAAU,KAAK;;CAGjB,MAAM,WAAW,OAAO,aAAuB;EAC7C,MAAM,WAAW,MAAM,KAAK,SAAS;EACrC,MAAM,YACJ,OAAO,aAAa,WAChB,KAAK,IAAI,GAAG,WAAW,MAAM,OAAO,GACpC,SAAS;EAEf,MAAM,WAAW,SAAS,MAAM,GAAG,UAAU;EAE7C,MAAM,WAAW,MAAM,QAAQ,IAC7B,SAAS,IAAI,OAAM,UAAS;GAC1B,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,aAAa,GAAG,KAAK;GAC/C,MAAM,KAAK;GACX,KAAK,MAAM,cAAc,KAAK;GAC/B,EAAE,CACJ;AAED,WAAS,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;;CAGnC,MAAM,cAAc,QAAgB;AAClC,WAAS,MAAM,QAAO,SAAQ,KAAK,QAAQ,IAAI,CAAC;;AAGlD,QACE,qBAAC;EACC,WAAW,GACT,uBACA,UAED;aAED,qBAAC;GACC,SAAS;GACT,aAAY,MAAK;AACf,MAAE,gBAAgB;AAClB,QAAI,CAAC,SACH,eAAc,KAAK;;GAGvB,mBAAmB,cAAc,MAAM;GACvC,SAAQ,MAAK;AACX,MAAE,gBAAgB;AAClB,kBAAc,MAAM;AAEpB,QAAI,SACF;AAGF,QAAI,EAAE,aAAa,MAAM,OACvB,UAAS,EAAE,aAAa,MAAM;;GAGlC,WAAW,GACT,kEACA,mDACA,iCACA,qBACA,cAAc,4BACd,YAAY,qDACZ,YAAY,SAEb;;IAED,oBAACC,UAAW,WAAU,WAAW;IACjC,qBAAC;KAAK;KAAmB,WAAW,MAAM;KAAG;QAAiB;IAC9D,oBAAC;KACC,IAAI;KACJ,MAAK;KACG;KACE;KACA;KACV,WAAU;KACV,WAAU,MAAK;AACb,UAAI,EAAE,OAAO,OAAO,OAClB,UAAS,EAAE,OAAO,MAAM;AAE1B,QAAE,OAAO,QAAQ;;MAEnB;;IACI,EAEP,MAAM,SAAS,KACd,oBAAC;GACC,WAAW,GACT,uBACA,YAAY,KAEb;aAEA,MAAM,KAAI,SACT,qBAAC;IAEC,WAAW,GACT,iDACA,YAAY,KAEb;;KAEA,QAAQ,KAAK,IACZ,oBAAC;MACC,KAAK,KAAK;MACV,KAAI;MACJ,WAAU;OACV;KAEJ,oBAAC;MAAK,WAAU;gBAA2B,KAAK;OAAY;KAC5D,oBAAC;MACC,MAAK;MACL,eAAe,WAAW,KAAK,IAAI;MACnC,WAAU;MACV,cAAY,UAAU,KAAK;gBAE3B,oBAAC,KAAE,WAAU,WAAW;OACjB;;MAtBJ,KAAK,IAuBP,CACL;IACC;GAEH"}

package/dist/components/organisms/drawer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.mts","names":[],"sources":["../../../src/components/organisms/drawer.tsx"],"mappings":";;;UAoBiB,KAAA;EACf,IAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,QAAA;EACA,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,SAAA;EACA,IAAA;EACA,YAAA;EACA,SAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,UAAA;IACE,IAAA;IACA,OAAA;IACA,SAAA;IACA,MAAA;IACA,KAAA;IACA,KAAA;IACA,KAAA;IACA,IAAA;IACA,MAAA;EAAA;EAEF,SAAA,GAAY,WAAA;EACZ,OAAA;AAAA;AAAA,cAqBI,MAAA;EAAU,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,YAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAqBb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"drawer.d.mts","names":[],"sources":["../../../src/components/organisms/drawer.tsx"],"mappings":";;;UA4BiB,KAAA;EACf,IAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,QAAA;EACA,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,SAAA;EACA,IAAA;EACA,YAAA;EACA,SAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,UAAA;IACE,IAAA;IACA,OAAA;IACA,SAAA;IACA,MAAA;IACA,KAAA;IACA,KAAA;IACA,KAAA;IACA,IAAA;IACA,MAAA;EAAA;EAEF,SAAA,GAAY,WAAA;EACZ,OAAA;AAAA;AAAA,cAqBI,MAAA;EAAU,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,YAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAqBb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/organisms/drawer.mjs

@@ -9,6 +9,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/organisms/drawer.tsx
 const { DrawerContent, Drawer: DrawerCore, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } = drawer_exports;
+let maskLessOverlayCount = 0;
+let originalBodyPointerEvents = null;
 const SIZES = {
 	small: "30%",
 	medium: "50%",
@@ -22,13 +24,18 @@ const getSizeStyles = (direction, size) => {
 const Drawer = ({ open, title, extra, footer, closable = true, closeIcon, direction = "bottom", size = "medium", maskClosable = true, handlebar = true, draggable = false, rounded = false, mask = true, className, classNames, style, children, container, onClose, ...props }) => {
 	useEffect(() => {
 		if (!open || mask) return;
-		const originalPointerEvents = document.body.style.pointerEvents;
+		if (maskLessOverlayCount === 0) originalBodyPointerEvents = document.body.style.pointerEvents;
+		maskLessOverlayCount += 1;
 		const raf = window.requestAnimationFrame(() => {
 			document.body.style.pointerEvents = "auto";
 		});
 		return () => {
 			window.cancelAnimationFrame(raf);
-			document.body.style.pointerEvents = originalPointerEvents;
+			maskLessOverlayCount -= 1;
+			if (maskLessOverlayCount === 0) {
+				document.body.style.pointerEvents = originalBodyPointerEvents ?? "";
+				originalBodyPointerEvents = null;
+			}
 		};
 	}, [open, mask]);
 	return /* @__PURE__ */ jsx(DrawerCore, {