@jbpark/ui-kit 3.2.1 → 3.4.0

package/dist/components/organisms/toast.mjs

@@ -0,0 +1,197 @@
+'use client';
+
+import { cn } from "../../utils.mjs";
+import Button from "../../Button.mjs";
+import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { v4 } from "uuid";
+
+//#region src/components/organisms/toast.tsx
+const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+const containerStates = /* @__PURE__ */ new Map();
+const getContainerState = (container) => {
+	let state = containerStates.get(container);
+	if (!state) {
+		state = {
+			stack: [],
+			update: null
+		};
+		containerStates.set(container, state);
+	}
+	return state;
+};
+const createToastRoot = (container) => {
+	if (!isBrowser) return null;
+	const targetContainer = container || document.body;
+	let rootEl = targetContainer.querySelector("#toast-root");
+	if (!rootEl) {
+		rootEl = document.createElement("div");
+		rootEl.setAttribute("id", "toast-root");
+		rootEl.setAttribute("role", "region");
+		rootEl.setAttribute("aria-label", "Notifications");
+		rootEl.style.zIndex = "10000";
+		rootEl.style.position = "fixed";
+		rootEl.style.right = "0";
+		rootEl.style.bottom = "0";
+		rootEl.style.display = "flex";
+		rootEl.style.flexDirection = "column-reverse";
+		rootEl.style.gap = "8px";
+		rootEl.style.padding = "16px";
+		rootEl.style.pointerEvents = "none";
+		targetContainer.appendChild(rootEl);
+	}
+	return rootEl;
+};
+const TYPE_ICONS = {
+	info: /* @__PURE__ */ jsx(Info, { className: "text-blue-400" }),
+	success: /* @__PURE__ */ jsx(Check, { className: "text-green-400" }),
+	error: /* @__PURE__ */ jsx(OctagonX, { className: "text-red-400" }),
+	warning: /* @__PURE__ */ jsx(OctagonAlert, { className: "text-yellow-400" })
+};
+const Toast = ({ type, title, description, icon, closable = true, action, className, onClose }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: cn("pointer-events-auto flex w-80 items-start gap-3 rounded-lg", "bg-background text-foreground border p-4 shadow-lg", className),
+		children: [
+			(icon || type) && /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5 shrink-0 [&_svg]:size-5",
+				children: icon || type && TYPE_ICONS[type]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 space-y-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium",
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: description
+					}),
+					action && /* @__PURE__ */ jsx("div", {
+						className: "pt-1",
+						children: action
+					})
+				]
+			}),
+			closable && /* @__PURE__ */ jsx(Button, {
+				type: "text",
+				shape: "circle",
+				size: "small",
+				"aria-label": "Close",
+				icon: /* @__PURE__ */ jsx(X, {}),
+				onClick: onClose
+			})
+		]
+	});
+};
+const DEFAULT_DURATION = 4e3;
+const StaticToast = ({ id, duration = DEFAULT_DURATION, container, onClose, ...props }) => {
+	const [visible, setVisible] = useState(true);
+	const close = () => {
+		onClose?.();
+		setVisible(false);
+		setTimeout(() => {
+			Toast.destroy(id);
+		}, 200);
+	};
+	useEffect(() => {
+		if (!duration) return;
+		const timer = setTimeout(close, duration);
+		return () => clearTimeout(timer);
+	}, [duration]);
+	if (!isBrowser) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: cn("transition-all duration-200", visible ? "opacity-100" : "translate-x-2 opacity-0"),
+		children: /* @__PURE__ */ jsx(Toast, {
+			...props,
+			onClose: close
+		})
+	}), createToastRoot(container));
+};
+const ToastStackRenderer = ({ container }) => {
+	const [, forceUpdate] = useState({});
+	useEffect(() => {
+		const state = getContainerState(container);
+		state.update = () => forceUpdate({});
+		return () => {
+			state.update = null;
+		};
+	}, [container]);
+	const { stack } = getContainerState(container);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: stack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StaticToast, {
+		id,
+		...props
+	}, id)) });
+};
+const toastRoots = /* @__PURE__ */ new Map();
+const renderToast = (props) => {
+	if (!isBrowser) return;
+	const targetContainer = props.container || document.body;
+	const rootElement = createToastRoot(targetContainer);
+	if (!toastRoots.has(targetContainer)) {
+		const root = createRoot(rootElement);
+		toastRoots.set(targetContainer, root);
+		root.render(/* @__PURE__ */ jsx(ToastStackRenderer, { container: targetContainer }));
+	}
+	const state = getContainerState(targetContainer);
+	const id = props.id || v4();
+	state.stack.push({
+		...props,
+		id
+	});
+	state.update?.();
+	return id;
+};
+Toast.destroy = (id) => {
+	if (!id) {
+		containerStates.forEach((state) => {
+			state.stack = [];
+			state.update?.();
+		});
+		toastRoots.forEach((root) => root.unmount());
+		toastRoots.clear();
+		containerStates.clear();
+		return;
+	}
+	containerStates.forEach((state, container) => {
+		if (!state.stack.some((toast) => toast.id === id)) return;
+		state.stack = state.stack.filter((toast) => toast.id !== id);
+		state.update?.();
+		if (!state.stack.length) {
+			toastRoots.get(container)?.unmount();
+			toastRoots.delete(container);
+			containerStates.delete(container);
+		}
+	});
+};
+Toast.destroyAll = () => {
+	Toast.destroy();
+};
+Toast.info = (title, props) => renderToast({
+	type: "info",
+	title,
+	...props
+});
+Toast.success = (title, props) => renderToast({
+	type: "success",
+	title,
+	...props
+});
+Toast.error = (title, props) => renderToast({
+	type: "error",
+	title,
+	...props
+});
+Toast.warning = (title, props) => renderToast({
+	type: "warning",
+	title,
+	...props
+});
+
+//#endregion
+export { Toast as default };
+//# sourceMappingURL=toast.mjs.map

package/dist/components/organisms/toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.mjs","names":["uuid"],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\ntype ToastType = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  type?: ToastType;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\ntype ContainerState = {\n  stack: StaticProps[];\n  update: (() => void) | null;\n};\n\nconst containerStates = new Map<HTMLElement, ContainerState>();\n\nconst getContainerState = (container: HTMLElement): ContainerState => {\n  let state = containerStates.get(container);\n\n  if (!state) {\n    state = { stack: [], update: null };\n    containerStates.set(container, state);\n  }\n\n  return state;\n};\n\nconst createToastRoot = (container?: HTMLElement) => {\n  if (!isBrowser) {\n    return null;\n  }\n\n  const targetContainer = container || document.body;\n  let rootEl = targetContainer.querySelector(\n    '#toast-root',\n  ) as HTMLElement | null;\n\n  if (!rootEl) {\n    rootEl = document.createElement('div');\n    rootEl.setAttribute('id', 'toast-root');\n    rootEl.setAttribute('role', 'region');\n    rootEl.setAttribute('aria-label', 'Notifications');\n    rootEl.style.zIndex = '10000';\n    rootEl.style.position = 'fixed';\n    rootEl.style.right = '0';\n    rootEl.style.bottom = '0';\n    rootEl.style.display = 'flex';\n    rootEl.style.flexDirection = 'column-reverse';\n    rootEl.style.gap = '8px';\n    rootEl.style.padding = '16px';\n    rootEl.style.pointerEvents = 'none';\n    targetContainer.appendChild(rootEl);\n  }\n\n  return rootEl;\n};\n\nconst TYPE_ICONS: Record<ToastType, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  type,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || type) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (type && TYPE_ICONS[type])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          type=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label=\"Close\"\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps) => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      Toast.destroy(id);\n    }, 200);\n  };\n\n  useEffect(() => {\n    if (!duration) {\n      return;\n    }\n\n    const timer = setTimeout(close, duration);\n    return () => clearTimeout(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [duration]);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    createToastRoot(container)!,\n  );\n};\n\nconst ToastStackRenderer = ({ container }: { container: HTMLElement }) => {\n  const [, forceUpdate] = useState({});\n\n  useEffect(() => {\n    const state = getContainerState(container);\n    state.update = () => forceUpdate({});\n    return () => {\n      state.update = null;\n    };\n  }, [container]);\n\n  const { stack } = getContainerState(container);\n\n  return (\n    <>\n      {stack.map(({ id, ...props }) => (\n        <StaticToast key={id} id={id} {...props} />\n      ))}\n    </>\n  );\n};\n\nconst toastRoots = new Map<HTMLElement, Root>();\n\nconst renderToast = (props: StaticProps) => {\n  if (!isBrowser) {\n    return;\n  }\n\n  const targetContainer = props.container || document.body;\n  const rootElement = createToastRoot(targetContainer)!;\n\n  if (!toastRoots.has(targetContainer)) {\n    const root = createRoot(rootElement);\n    toastRoots.set(targetContainer, root);\n    root.render(<ToastStackRenderer container={targetContainer} />);\n  }\n\n  const state = getContainerState(targetContainer);\n  const id = props.id || uuid();\n  state.stack.push({ ...props, id });\n  state.update?.();\n\n  return id;\n};\n\nToast.destroy = (id?: string) => {\n  if (!id) {\n    containerStates.forEach(state => {\n      state.stack = [];\n      state.update?.();\n    });\n    toastRoots.forEach(root => root.unmount());\n    toastRoots.clear();\n    containerStates.clear();\n    return;\n  }\n\n  containerStates.forEach((state, container) => {\n    if (!state.stack.some(toast => toast.id === id)) {\n      return;\n    }\n\n    state.stack = state.stack.filter(toast => toast.id !== id);\n    state.update?.();\n\n    if (!state.stack.length) {\n      toastRoots.get(container)?.unmount();\n      toastRoots.delete(container);\n      containerStates.delete(container);\n    }\n  });\n};\n\nToast.destroyAll = () => {\n  Toast.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'type' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":"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"}

package/dist/core/badge.d.mts

@@ -8,7 +8,7 @@ declare namespace badge_d_exports {
   export { Badge, Props, badgeVariants };
 }
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;

package/dist/core/button.d.mts

@@ -8,8 +8,8 @@ declare namespace button_d_exports {
   export { Button, Props, buttonVariants };
 }
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-  size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;

package/dist/core/radio-group.d.mts

@@ -12,8 +12,12 @@ declare function RadioGroup$1({
 }: React$1.ComponentProps<typeof RadioGroup.Root>): react_jsx_runtime0.JSX.Element;
 declare function RadioGroupItem({
   className,
+  asChild,
+  children,
   ...props
-}: React$1.ComponentProps<typeof RadioGroup.Item>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof RadioGroup.Item> & {
+  asChild?: boolean;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RadioGroup$1 as RadioGroup, radio_group_d_exports };
 //# sourceMappingURL=radio-group.d.mts.map

package/dist/core/radio-group.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.mts","names":[],"sources":["../../src/core/radio-group.tsx"],"mappings":";;;;;;;;iBASS,YAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAoB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/C,cAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAoB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"radio-group.d.mts","names":[],"sources":["../../src/core/radio-group.tsx"],"mappings":";;;;;;;;iBASS,YAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAoB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/C,cAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAoB,IAAA;EACjD,OAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/radio-group.mjs

@@ -19,7 +19,13 @@ function RadioGroup$1({ className, ...props }) {
 		...props
 	});
 }
-function RadioGroupItem({ className, ...props }) {
+function RadioGroupItem({ className, asChild, children, ...props }) {
+	if (asChild) return /* @__PURE__ */ jsx(RadioGroup.Item, {
+		asChild: true,
+		"data-slot": "radio-group-item",
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(RadioGroup.Item, {
 		"data-slot": "radio-group-item",
 		className: cn(`border-input text-primary focus-visible:border-ring

package/dist/core/radio-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.mjs","names":["RadioGroup","RadioGroupPrimitive"],"sources":["../../src/core/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CircleIcon } from 'lucide-react';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn('grid gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        `border-input text-primary focus-visible:border-ring\n        focus-visible:ring-ring/50 aria-invalid:ring-destructive/20\n        dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\n        dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border\n        shadow-xs transition-[color,box-shadow] outline-none\n        focus-visible:ring-[3px] disabled:cursor-not-allowed\n        disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon\n          className=\"fill-primary absolute top-1/2 left-1/2 size-2\n            -translate-x-1/2 -translate-y-1/2\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;;;;;;;AASA,SAASA,aAAW,EAClB,WACA,GAAG,SACqD;AACxD,QACE,oBAACC,WAAoB;EACnB,aAAU;EACV,WAAW,GAAG,cAAc,UAAU;EACtC,GAAI;GACJ;;AAIN,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;AACxD,QACE,oBAACA,WAAoB;EACnB,aAAU;EACV,WAAW,GACT;;;;;;8BAOA,UACD;EACD,GAAI;YAEJ,oBAACA,WAAoB;GACnB,aAAU;GACV,WAAU;aAEV,oBAAC,cACC,WAAU,iGAEV;IAC4B;GACP"}
+{"version":3,"file":"radio-group.mjs","names":["RadioGroup","RadioGroupPrimitive"],"sources":["../../src/core/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CircleIcon } from 'lucide-react';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn('grid gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  asChild,\n  children,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {\n  asChild?: boolean;\n}) {\n  // `asChild` hands the rendered element to `children` entirely (e.g. a\n  // `Button`), so the default dot indicator doesn't apply — Radix clones\n  // its own role/aria-checked/keyboard handling onto that single child\n  // instead of onto its own `<button>`.\n  if (asChild) {\n    return (\n      <RadioGroupPrimitive.Item asChild data-slot=\"radio-group-item\" {...props}>\n        {children}\n      </RadioGroupPrimitive.Item>\n    );\n  }\n\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        `border-input text-primary focus-visible:border-ring\n        focus-visible:ring-ring/50 aria-invalid:ring-destructive/20\n        dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\n        dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border\n        shadow-xs transition-[color,box-shadow] outline-none\n        focus-visible:ring-[3px] disabled:cursor-not-allowed\n        disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon\n          className=\"fill-primary absolute top-1/2 left-1/2 size-2\n            -translate-x-1/2 -translate-y-1/2\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;;;;;;;AASA,SAASA,aAAW,EAClB,WACA,GAAG,SACqD;AACxD,QACE,oBAACC,WAAoB;EACnB,aAAU;EACV,WAAW,GAAG,cAAc,UAAU;EACtC,GAAI;GACJ;;AAIN,SAAS,eAAe,EACtB,WACA,SACA,UACA,GAAG,SAGF;AAKD,KAAI,QACF,QACE,oBAACA,WAAoB;EAAK;EAAQ,aAAU;EAAmB,GAAI;EAChE;GACwB;AAI/B,QACE,oBAACA,WAAoB;EACnB,aAAU;EACV,WAAW,GACT;;;;;;8BAOA,UACD;EACD,GAAI;YAEJ,oBAACA,WAAoB;GACnB,aAAU;GACV,WAAU;aAEV,oBAAC,cACC,WAAU,iGAEV;IAC4B;GACP"}

package/dist/index.d.mts

@@ -29,10 +29,11 @@ import { Drawer, Props as Props$1 } from "./components/organisms/drawer.mjs";
 import { List } from "./components/organisms/list/index.mjs";
 import { Modal } from "./components/organisms/modal.mjs";
 import { Swiper } from "./components/organisms/swiper/index.mjs";
+import { StaticProps, Toast } from "./components/organisms/toast.mjs";
 import "./components/organisms/index.mjs";
 import "./components/templates/index.mjs";
 import { ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
 import { useConfig } from "./providers/Config/context.mjs";
 import { Config, Props } from "./providers/Config/index.mjs";
 import "./providers/index.mjs";
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, DatePicker, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, ThemeConfig, ThemeToken, Typography, Upload, UploadFile, useConfig };
+export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, DatePicker, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, ThemeConfig, ThemeToken, Toast, StaticProps as ToastOptions, Typography, Upload, UploadFile, useConfig };

package/dist/index.mjs

@@ -27,8 +27,9 @@ import Drawer from "./components/organisms/drawer.mjs";
 import List from "./components/organisms/list/index.mjs";
 import Modal from "./components/organisms/modal.mjs";
 import Swiper from "./components/organisms/swiper/index.mjs";
+import Toast from "./components/organisms/toast.mjs";
 import Layout from "./Layout.mjs";
 import { useConfig } from "./providers/Config/context.mjs";
 import Config from "./providers/Config/index.mjs";
 
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, DatePicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Typography, Upload, useConfig };
+export { Button, Card, Checkbox, Collapse, ColorPicker, Config, DatePicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Toast, Typography, Upload, useConfig };

package/dist/style.css

@@ -204,12 +204,18 @@
     container-type: inline-size;
     container-name: field-group;
   }
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
   .invisible {
     visibility: hidden;
   }
+  .visible {
+    visibility: visible;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -269,27 +275,15 @@
   .right-5 {
     right: calc(var(--spacing) * 5);
   }
-  .right-full {
-    right: 100%;
-  }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }
-  .bottom-full {
-    bottom: 100%;
-  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -353,6 +347,9 @@
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -577,6 +574,9 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-100 {
     width: calc(var(--spacing) * 100);
   }
@@ -660,6 +660,10 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-2 {
+    --tw-translate-x: calc(var(--spacing) * 2);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[-50\%\] {
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -800,6 +804,13 @@
   .gap-7 {
     gap: calc(var(--spacing) * 7);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -870,6 +881,10 @@
     border-top-left-radius: 30px !important;
     border-top-right-radius: 30px !important;
   }
+  .rounded-t-lg {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+  }
   .rounded-l-lg {
     border-top-left-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
@@ -894,6 +909,10 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+  .rounded-b-lg {
+    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1119,6 +1138,9 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1595,42 +1617,6 @@
       position: absolute;
     }
   }
-  .before\:top-0 {
-    &::before {
-      content: var(--tw-content);
-      top: calc(var(--spacing) * 0);
-    }
-  }
-  .before\:top-1\/2 {
-    &::before {
-      content: var(--tw-content);
-      top: calc(1/2 * 100%);
-    }
-  }
-  .before\:right-0 {
-    &::before {
-      content: var(--tw-content);
-      right: calc(var(--spacing) * 0);
-    }
-  }
-  .before\:bottom-0 {
-    &::before {
-      content: var(--tw-content);
-      bottom: calc(var(--spacing) * 0);
-    }
-  }
-  .before\:left-0 {
-    &::before {
-      content: var(--tw-content);
-      left: calc(var(--spacing) * 0);
-    }
-  }
-  .before\:left-1\/2 {
-    &::before {
-      content: var(--tw-content);
-      left: calc(1/2 * 100%);
-    }
-  }
   .before\:h-0 {
     &::before {
       content: var(--tw-content);
@@ -1643,20 +1629,6 @@
       width: calc(var(--spacing) * 0);
     }
   }
-  .before\:-translate-x-1\/2 {
-    &::before {
-      content: var(--tw-content);
-      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
-  .before\:-translate-y-1\/2 {
-    &::before {
-      content: var(--tw-content);
-      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .before\:border-t-\[9px\] {
     &::before {
       content: var(--tw-content);
@@ -1751,66 +1723,12 @@
       inset-block: calc(var(--spacing) * 0);
     }
   }
-  .after\:-top-px {
-    &::after {
-      content: var(--tw-content);
-      top: -1px;
-    }
-  }
-  .after\:top-1\/2 {
-    &::after {
-      content: var(--tw-content);
-      top: calc(1/2 * 100%);
-    }
-  }
-  .after\:top-px {
-    &::after {
-      content: var(--tw-content);
-      top: 1px;
-    }
-  }
-  .after\:-right-px {
-    &::after {
-      content: var(--tw-content);
-      right: -1px;
-    }
-  }
-  .after\:right-px {
-    &::after {
-      content: var(--tw-content);
-      right: 1px;
-    }
-  }
-  .after\:-bottom-px {
-    &::after {
-      content: var(--tw-content);
-      bottom: -1px;
-    }
-  }
-  .after\:bottom-px {
-    &::after {
-      content: var(--tw-content);
-      bottom: 1px;
-    }
-  }
-  .after\:-left-px {
-    &::after {
-      content: var(--tw-content);
-      left: -1px;
-    }
-  }
   .after\:left-1\/2 {
     &::after {
       content: var(--tw-content);
       left: calc(1/2 * 100%);
     }
   }
-  .after\:left-px {
-    &::after {
-      content: var(--tw-content);
-      left: 1px;
-    }
-  }
   .after\:h-0 {
     &::after {
       content: var(--tw-content);
@@ -1836,13 +1754,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .after\:-translate-y-1\/2 {
-    &::after {
-      content: var(--tw-content);
-      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .after\:border-t-8 {
     &::after {
       content: var(--tw-content);
@@ -2998,6 +2909,12 @@
       pointer-events: none;
     }
   }
+  .\[\&_svg\]\:size-5 {
+    & svg {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+    }
+  }
   .\[\&_svg\]\:shrink-0 {
     & svg {
       flex-shrink: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "3.2.1",
+  "version": "3.4.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",
@@ -126,7 +126,7 @@
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
-    "@jbpark/use-hooks": "^2.6.0",
+    "@jbpark/use-hooks": "^2.11.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",