@jbpark/ui-kit 10.2.0 → 10.4.0

package/dist/Toast.mjs

@@ -0,0 +1,198 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import { createImperativeStack, isBrowser } from "./components/organisms/imperative-stack.mjs";
+import { useEffect, useRef, useState } from "react";
+import { useTimeout } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Info, LoaderCircle, OctagonAlert, OctagonX, X } from "lucide-react";
+import { createPortal } from "react-dom";
+//#region src/components/organisms/toast.tsx
+const STATUS_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" }),
+	loading: /* @__PURE__ */ jsx(LoaderCircle, { className: "text-muted-foreground animate-spin" })
+};
+const Toast = ({ status, title, description, icon, closable = true, action, className, onClose }) => {
+	const { locale } = useConfig();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "toast",
+		role: status === "error" ? "alert" : "status",
+		className: cn(`pointer-events-auto flex w-80 max-w-[calc(100vw-2rem)] items-start
+        gap-3 rounded-lg`, "bg-background text-foreground border p-4 shadow-lg", className),
+		children: [
+			(icon || status) && /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5 shrink-0 [&_svg]:size-5",
+				children: icon || status && STATUS_ICONS[status]
+			}),
+			/* @__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, {
+				variant: "text",
+				shape: "circle",
+				size: "small",
+				"aria-label": locale.close ?? DEFAULT_LOCALE.close,
+				icon: /* @__PURE__ */ jsx(X, {}),
+				onClick: onClose
+			})
+		]
+	});
+};
+const DEFAULT_DURATION = 4e3;
+const PLACEMENTS = [
+	"top-start",
+	"top",
+	"top-end",
+	"bottom-start",
+	"bottom",
+	"bottom-end"
+];
+const EXIT_CLASSES = {
+	"top-start": "-translate-x-2",
+	top: "-translate-y-2",
+	"top-end": "translate-x-2",
+	"bottom-start": "-translate-x-2",
+	bottom: "translate-y-2",
+	"bottom-end": "translate-x-2"
+};
+const globalConfig = {};
+const StaticToast = ({ id, index, revision, duration = globalConfig.duration ?? DEFAULT_DURATION, container, placement = "bottom-end", onClose, ...props }) => {
+	const [visible, setVisible] = useState(true);
+	const isClosingRef = useRef(false);
+	const maxCount = globalConfig.maxCount;
+	const isQueued = maxCount !== void 0 && index >= Math.max(1, maxCount);
+	const close = () => {
+		if (isClosingRef.current) return;
+		isClosingRef.current = true;
+		onClose?.();
+		setVisible(false);
+		setTimeout(() => {
+			destroy(id);
+		}, 200);
+	};
+	const { reset, clear } = useTimeout(close, isQueued || !duration ? null : duration);
+	useEffect(() => {
+		if (revision > 0) reset();
+	}, [revision, reset]);
+	if (!isBrowser || isQueued) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: cn("transition-all duration-200", visible ? "opacity-100" : cn("opacity-0", EXIT_CLASSES[placement])),
+		onMouseEnter: clear,
+		onMouseLeave: reset,
+		onFocus: clear,
+		onBlur: reset,
+		children: /* @__PURE__ */ jsx(Toast, {
+			...props,
+			onClose: close
+		})
+	}), stacks[placement].getRootElement(container));
+};
+const createRootElement = (placement) => () => {
+	const el = document.createElement("div");
+	const [vertical, horizontal = "center"] = placement.split("-");
+	el.setAttribute("role", "region");
+	el.setAttribute("aria-label", "Notifications");
+	el.dataset.slot = "toast-stack";
+	el.dataset.placement = placement;
+	el.style.zIndex = "10000";
+	el.style.position = "fixed";
+	el.style.display = "flex";
+	el.style.flexDirection = vertical === "top" ? "column" : "column-reverse";
+	el.style.gap = "8px";
+	el.style.padding = "16px";
+	el.style.pointerEvents = "none";
+	el.style[vertical === "top" ? "top" : "bottom"] = "0";
+	if (horizontal === "start") {
+		el.style.insetInlineStart = "0";
+		el.style.alignItems = "flex-start";
+	} else if (horizontal === "end") {
+		el.style.insetInlineEnd = "0";
+		el.style.alignItems = "flex-end";
+	} else {
+		el.style.left = "0";
+		el.style.right = "0";
+		el.style.alignItems = "center";
+	}
+	return el;
+};
+const stacks = Object.fromEntries(PLACEMENTS.map((placement) => [placement, createImperativeStack({
+	createRootElement: createRootElement(placement),
+	StackItem: StaticToast
+})]));
+let revisionCounter = 0;
+const show = (props) => {
+	if (props.id) {
+		const revision = revisionCounter += 1;
+		for (const placement of PLACEMENTS) if (stacks[placement].update(props.id, (current) => ({
+			...props,
+			placement: current.placement,
+			container: current.container,
+			revision
+		}))) return props.id;
+	}
+	const placement = props.placement ?? globalConfig.placement ?? "bottom-end";
+	return stacks[placement].render({
+		...props,
+		placement,
+		revision: 0
+	});
+};
+const destroy = (id) => {
+	for (const placement of PLACEMENTS) stacks[placement].destroy(id);
+};
+Toast.destroy = destroy;
+Toast.destroyAll = () => {
+	destroy();
+};
+Toast.config = (config) => {
+	Object.assign(globalConfig, config);
+};
+Toast.open = (props) => show(props);
+Toast.info = (title, props) => show({
+	status: "info",
+	title,
+	...props
+});
+Toast.success = (title, props) => show({
+	status: "success",
+	title,
+	...props
+});
+Toast.error = (title, props) => show({
+	status: "error",
+	title,
+	...props
+});
+Toast.warning = (title, props) => show({
+	status: "warning",
+	title,
+	...props
+});
+Toast.loading = (title, props) => show({
+	status: "loading",
+	title,
+	duration: 0,
+	...props
+});
+//#endregion
+export { Toast as default };
+
+//# sourceMappingURL=Toast.mjs.map

package/dist/Toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.mjs","names":[],"sources":["../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useTimeout } from '@jbpark/use-hooks';\nimport {\n  Check,\n  Info,\n  LoaderCircle,\n  OctagonAlert,\n  OctagonX,\n  X,\n} from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport {\n  type ImperativeStack,\n  createImperativeStack,\n  isBrowser,\n} from './imperative-stack';\n\ntype ToastStatus = 'info' | 'success' | 'error' | 'warning' | 'loading';\n\nexport type Placement =\n  'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';\n\nexport interface Props {\n  status?: ToastStatus;\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  placement?: Placement;\n}\n\nexport interface GlobalConfig {\n  placement?: Placement;\n  duration?: number;\n  // Visible toasts per stack; later toasts wait until one closes.\n  maxCount?: number;\n}\n\ninterface StackEntry extends StaticProps {\n  revision: number;\n}\n\ntype StackItemProps = StackEntry & { id: string; index: number };\n\nconst STATUS_ICONS: Record<ToastStatus, 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  loading: <LoaderCircle className=\"text-muted-foreground animate-spin\" />,\n};\n\nconst Toast = ({\n  status,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  const { locale } = useConfig();\n\n  return (\n    <div\n      data-slot=\"toast\"\n      role={status === 'error' ? 'alert' : 'status'}\n      className={cn(\n        `pointer-events-auto flex w-80 max-w-[calc(100vw-2rem)] items-start\n        gap-3 rounded-lg`,\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || status) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (status && STATUS_ICONS[status])}\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          variant=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label={locale.close ?? DEFAULT_LOCALE.close}\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst PLACEMENTS: readonly Placement[] = [\n  'top-start',\n  'top',\n  'top-end',\n  'bottom-start',\n  'bottom',\n  'bottom-end',\n];\n\nconst EXIT_CLASSES: Record<Placement, string> = {\n  'top-start': '-translate-x-2',\n  top: '-translate-y-2',\n  'top-end': 'translate-x-2',\n  'bottom-start': '-translate-x-2',\n  bottom: 'translate-y-2',\n  'bottom-end': 'translate-x-2',\n};\n\nconst globalConfig: GlobalConfig = {};\n\nconst StaticToast = ({\n  id,\n  index,\n  revision,\n  duration = globalConfig.duration ?? DEFAULT_DURATION,\n  container,\n  placement = 'bottom-end',\n  onClose,\n  ...props\n}: StackItemProps): React.ReactPortal | null => {\n  const [visible, setVisible] = useState(true);\n  const isClosingRef = useRef(false);\n\n  const maxCount = globalConfig.maxCount;\n  const isQueued = maxCount !== undefined && index >= Math.max(1, maxCount);\n\n  const close = () => {\n    if (isClosingRef.current) {\n      return;\n    }\n\n    isClosingRef.current = true;\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      destroy(id);\n    }, 200);\n  };\n\n  const { reset, clear } = useTimeout(\n    close,\n    isQueued || !duration ? null : duration,\n  );\n\n  // An update restarts the visible duration.\n  useEffect(() => {\n    if (revision > 0) {\n      reset();\n    }\n  }, [revision, reset]);\n\n  if (!isBrowser || isQueued) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : cn('opacity-0', EXIT_CLASSES[placement]),\n      )}\n      // Without this, a toast with a closable/action button (or one the\n      // user is mid-read on) could auto-dismiss itself out from under\n      // them — hovering or focusing anything inside pauses the timer,\n      // moving away restarts it from the full duration.\n      onMouseEnter={clear}\n      onMouseLeave={reset}\n      onFocus={clear}\n      onBlur={reset}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    stacks[placement].getRootElement(container)!,\n  );\n};\n\nconst createRootElement = (placement: Placement) => () => {\n  const el = document.createElement('div');\n  const [vertical, horizontal = 'center'] = placement.split('-');\n\n  el.setAttribute('role', 'region');\n  // Plain DOM, created outside any React tree — no Config to read a\n  // locale override from until #226 gives the imperative stack a way\n  // to inherit one.\n  el.setAttribute('aria-label', 'Notifications');\n  el.dataset.slot = 'toast-stack';\n  el.dataset.placement = placement;\n  el.style.zIndex = '10000';\n  el.style.position = 'fixed';\n  el.style.display = 'flex';\n  // The oldest toast sits nearest the screen edge.\n  el.style.flexDirection = vertical === 'top' ? 'column' : 'column-reverse';\n  el.style.gap = '8px';\n  el.style.padding = '16px';\n  el.style.pointerEvents = 'none';\n  el.style[vertical === 'top' ? 'top' : 'bottom'] = '0';\n\n  if (horizontal === 'start') {\n    el.style.insetInlineStart = '0';\n    el.style.alignItems = 'flex-start';\n  } else if (horizontal === 'end') {\n    el.style.insetInlineEnd = '0';\n    el.style.alignItems = 'flex-end';\n  } else {\n    el.style.left = '0';\n    el.style.right = '0';\n    el.style.alignItems = 'center';\n  }\n\n  return el;\n};\n\nconst stacks = Object.fromEntries(\n  PLACEMENTS.map(placement => [\n    placement,\n    createImperativeStack<StackEntry>({\n      createRootElement: createRootElement(placement),\n      StackItem: StaticToast,\n    }),\n  ]),\n) as Record<Placement, ImperativeStack<StackEntry>>;\n\nlet revisionCounter = 0;\n\nconst show = (props: StaticProps): string | undefined => {\n  if (props.id) {\n    const revision = (revisionCounter += 1);\n\n    // An update replaces the content but stays in the toast's stack and\n    // container, so `placement` and `container` from the new call are ignored.\n    for (const placement of PLACEMENTS) {\n      if (\n        stacks[placement].update(props.id, current => ({\n          ...props,\n          placement: current.placement,\n          container: current.container,\n          revision,\n        }))\n      ) {\n        return props.id;\n      }\n    }\n  }\n\n  const placement = props.placement ?? globalConfig.placement ?? 'bottom-end';\n\n  return stacks[placement].render({ ...props, placement, revision: 0 });\n};\n\nconst destroy = (id?: string) => {\n  for (const placement of PLACEMENTS) {\n    stacks[placement].destroy(id);\n  }\n};\n\nToast.destroy = destroy;\n\nToast.destroyAll = () => {\n  destroy();\n};\n\n// Sets defaults for toasts shown afterwards. `maxCount` also applies to\n// queued toasts the next time their stack changes.\nToast.config = (config: GlobalConfig) => {\n  Object.assign(globalConfig, config);\n};\n\ntype TriggerOptions = Omit<StaticProps, 'status' | 'title'>;\n\nToast.open = (props: StaticProps) => show(props);\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  show({ status: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  show({ status: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  show({ status: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  show({ status: 'warning', title, ...props });\n// Stays until updated or closed unless `duration` is given.\nToast.loading = (title: React.ReactNode, props?: TriggerOptions) =>\n  show({ status: 'loading', title, duration: 0, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":"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"}

package/dist/ToggleGroup.d.mts

@@ -0,0 +1,28 @@
+import { ComponentSize } from "./providers/config/types.mjs";
+import { ReactNode } from "react";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+//#region src/components/atoms/toggle-group.d.ts
+export interface Option {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  iconOnly?: boolean;
+}
+export interface Props extends Omit<ToggleGroup$1.Props, 'children' | 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'className' | 'onChange' | 'dir'> {
+  options: readonly Option[];
+  value?: readonly string[];
+  defaultValue?: readonly string[];
+  onChange?: (values: string[]) => void;
+  size?: ComponentSize;
+  dir?: 'ltr' | 'rtl';
+  className?: string;
+  classNames?: {
+    item?: string;
+    pressedItem?: string;
+  };
+}
+declare const ToggleGroup: ({ options, value, defaultValue, onChange, size, disabled, orientation, dir, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { ToggleGroup as default };
+//# sourceMappingURL=ToggleGroup.d.mts.map

package/dist/ToggleGroup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.d.mts","names":["ToggleGroupPrimitive"],"sources":["../src/components/atoms/toggle-group.tsx"],"mappings":";;;;iBAciB;EACf;EACA;EACA,OAAO;EACP;EAEA;;iBAGe,cAAc,KAC7BA,cAAqB;EAUrB,kBAAkB;EAClB;EACA;EAGA,YAAY;EACZ,OAAO;EACP;EACA;EACA;IACE;IACA;;;cAIE,gBAAe,SAAA,OAAA,cAAA,UAAA,MAAA,UAAA,aAAA,KAAA,WAAA,eAAA,SAYlB,0BAAK,IAAA"}

package/dist/ToggleGroup.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import { useControllableState } from "@jbpark/use-hooks";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+//#region src/components/atoms/toggle-group.tsx
+const ToggleGroup = ({ options, value, defaultValue = [], onChange, size, disabled, orientation = "horizontal", dir, className, classNames, ...props }) => {
+	const { componentSize, direction } = useConfig();
+	const [pressed, setPressed] = useControllableState({
+		value,
+		defaultValue,
+		onChange: (values) => onChange?.([...values])
+	});
+	const resolvedSize = size ?? componentSize ?? "middle";
+	const resolvedDirection = dir ?? direction;
+	const pressedSet = new Set(pressed);
+	const optionValues = new Set(options.map((option) => option.value));
+	const handleValueChange = (values) => {
+		const next = new Set(values);
+		setPressed([...options.filter((option) => next.has(option.value)).map((option) => option.value), ...[...new Set(pressed)].filter((item) => !optionValues.has(item))]);
+	};
+	return /* @__PURE__ */ jsx(DirectionProvider, {
+		direction: resolvedDirection,
+		children: /* @__PURE__ */ jsx(ToggleGroup$1, {
+			...props,
+			"data-slot": "toggle-group",
+			dir: resolvedDirection,
+			multiple: true,
+			disabled,
+			orientation,
+			value: [...pressedSet],
+			onValueChange: handleValueChange,
+			className: cn("inline-flex w-fit gap-1 data-[orientation=vertical]:flex-col", className),
+			children: options.map((option) => /* @__PURE__ */ jsx(Toggle, {
+				value: option.value,
+				disabled: option.disabled,
+				"aria-label": option.iconOnly ? option.label : void 0,
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					size: resolvedSize,
+					shape: option.iconOnly ? "circle" : "default",
+					icon: option.icon
+				}),
+				className: cn(`data-pressed:bg-accent data-pressed:text-accent-foreground
+              aria-disabled:cursor-not-allowed`, classNames?.item, pressedSet.has(option.value) && classNames?.pressedItem),
+				children: option.iconOnly ? null : option.label
+			}, option.value))
+		})
+	});
+};
+//#endregion
+export { ToggleGroup as default };
+
+//# sourceMappingURL=ToggleGroup.mjs.map

package/dist/ToggleGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.mjs","names":["ToggleGroupPrimitive"],"sources":["../src/components/atoms/toggle-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\nimport { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from './button';\n\nexport interface Option {\n  value: string;\n  label: string;\n  icon?: ReactNode;\n  disabled?: boolean;\n  // Shows only the icon; the label stays the button's accessible name.\n  iconOnly?: boolean;\n}\n\nexport interface Props extends Omit<\n  ToggleGroupPrimitive.Props,\n  | 'children'\n  | 'value'\n  | 'defaultValue'\n  | 'onValueChange'\n  | 'multiple'\n  | 'className'\n  | 'onChange'\n  | 'dir'\n> {\n  options: readonly Option[];\n  value?: readonly string[];\n  defaultValue?: readonly string[];\n  // Receives pressed values in option order, followed by supplied values that\n  // match no option.\n  onChange?: (values: string[]) => void;\n  size?: ComponentSize;\n  dir?: 'ltr' | 'rtl';\n  className?: string;\n  classNames?: {\n    item?: string;\n    pressedItem?: string;\n  };\n}\n\nconst ToggleGroup = ({\n  options,\n  value,\n  defaultValue = [],\n  onChange,\n  size,\n  disabled,\n  orientation = 'horizontal',\n  dir,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const { componentSize, direction } = useConfig();\n  const [pressed, setPressed] = useControllableState<readonly string[]>({\n    value,\n    defaultValue,\n    onChange: values => onChange?.([...values]),\n  });\n\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const resolvedDirection = dir ?? direction;\n  const pressedSet = new Set(pressed);\n  const optionValues = new Set(options.map(option => option.value));\n\n  const handleValueChange = (values: string[]) => {\n    const next = new Set(values);\n\n    setPressed([\n      ...options\n        .filter(option => next.has(option.value))\n        .map(option => option.value),\n      ...[...new Set(pressed)].filter(item => !optionValues.has(item)),\n    ]);\n  };\n\n  return (\n    <DirectionProvider direction={resolvedDirection}>\n      <ToggleGroupPrimitive\n        {...props}\n        data-slot=\"toggle-group\"\n        dir={resolvedDirection}\n        multiple\n        disabled={disabled}\n        orientation={orientation}\n        value={[...pressedSet]}\n        onValueChange={handleValueChange}\n        className={cn(\n          'inline-flex w-fit gap-1 data-[orientation=vertical]:flex-col',\n          className, //\n        )}\n      >\n        {options.map(option => (\n          <Toggle\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled}\n            aria-label={option.iconOnly ? option.label : undefined}\n            render={\n              <Button\n                variant=\"text\"\n                size={resolvedSize}\n                shape={option.iconOnly ? 'circle' : 'default'}\n                icon={option.icon}\n              />\n            }\n            className={cn(\n              `data-pressed:bg-accent data-pressed:text-accent-foreground\n              aria-disabled:cursor-not-allowed`,\n              classNames?.item,\n              pressedSet.has(option.value) && classNames?.pressedItem,\n              //\n            )}\n          >\n            {option.iconOnly ? null : option.label}\n          </Toggle>\n        ))}\n      </ToggleGroupPrimitive>\n    </DirectionProvider>\n  );\n};\n\nexport default ToggleGroup;\n"],"mappings":";;;;;;;;;;AAiDA,MAAM,eAAe,EACnB,SACA,OACA,eAAe,CAAC,GAChB,UACA,MACA,UACA,cAAc,cACd,KACA,WACA,YACA,GAAG,YACQ;CACX,MAAM,EAAE,eAAe,cAAc,UAAU;CAC/C,MAAM,CAAC,SAAS,cAAc,qBAAwC;EACpE;EACA;EACA,WAAU,WAAU,WAAW,CAAC,GAAG,MAAM,CAAC;CAC5C,CAAC;CAED,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,oBAAoB,OAAO;CACjC,MAAM,aAAa,IAAI,IAAI,OAAO;CAClC,MAAM,eAAe,IAAI,IAAI,QAAQ,KAAI,WAAU,OAAO,KAAK,CAAC;CAEhE,MAAM,qBAAqB,WAAqB;EAC9C,MAAM,OAAO,IAAI,IAAI,MAAM;EAE3B,WAAW,CACT,GAAG,QACA,QAAO,WAAU,KAAK,IAAI,OAAO,KAAK,CAAC,CAAC,CACxC,KAAI,WAAU,OAAO,KAAK,GAC7B,GAAG,CAAC,GAAG,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,QAAO,SAAQ,CAAC,aAAa,IAAI,IAAI,CAAC,CACjE,CAAC;CACH;CAEA,OACE,oBAAC,mBAAD;EAAmB,WAAW;EAC5B,UAAA,oBAACA,eAAD;GACE,GAAI;GACJ,aAAU;GACV,KAAK;GACL,UAAA;GACU;GACG;GACb,OAAO,CAAC,GAAG,UAAU;GACrB,eAAe;GACf,WAAW,GACT,gEACA,SACF;GAEC,UAAA,QAAQ,KAAI,WACX,oBAAC,QAAD;IAEE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAY,OAAO,WAAW,OAAO,QAAQ,KAAA;IAC7C,QACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAM;KACN,OAAO,OAAO,WAAW,WAAW;KACpC,MAAM,OAAO;IACd,CAAA;IAEH,WAAW,GACT;iDAEA,YAAY,MACZ,WAAW,IAAI,OAAO,KAAK,KAAK,YAAY,WAE9C;IAEC,UAAA,OAAO,WAAW,OAAO,OAAO;GAC3B,GArBD,OAAO,KAqBN,CACT;EACmB,CAAA;CACL,CAAA;AAEvB"}

package/dist/{components/atoms/tooltip.d.mts → Tooltip.d.mts}

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from "react";
 //#region src/components/atoms/tooltip.d.ts
 declare const Core: <Payload>(props: import("@base-ui/react").TooltipRoot.Props<Payload>) => React.JSX.Element;
 type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
-interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'handle' | 'triggerId' | 'defaultTriggerId'> {
+export interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'handle' | 'triggerId' | 'defaultTriggerId'> {
   children: ReactElement;
   /** Supplementary visual hint; keep essential information visible elsewhere. */
   content: ReactNode;
@@ -17,5 +17,5 @@ interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'ha
 }
 declare const Tooltip: ({ children, content, className, placement, offset, delay, closeDelay, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Tooltip as default };
-//# sourceMappingURL=tooltip.d.mts.map
+export { Tooltip as default };
+//# sourceMappingURL=Tooltip.d.mts.map

package/dist/Tooltip.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.mts","names":[],"sources":["../src/components/atoms/tooltip.tsx"],"mappings":";;cAMiB,OAAI,SAAA,gCAAA,YAAA,MAAA,aAAA,MAAA,IAAA;KAEhB;iBAgCY,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,UAAU;;EAEV,SAAS;;EAET;EACA,YAAY;;EAEZ;;EAEA;EACA;;cAGI,YAAW,UAAA,SAAA,WAAA,WAAA,QAAA,OAAA,eAAA,SASd,0BAAK,IAAA"}

package/dist/{components/atoms/tooltip.mjs → Tooltip.mjs}

@@ -1,5 +1,5 @@
 "use client";
-import { tooltip_exports } from "../../core/tooltip.mjs";
+import { tooltip_exports } from "./core/tooltip.mjs";
 import { Children } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/tooltip.tsx
@@ -75,4 +75,4 @@ const Tooltip = ({ children, content, className, placement = "top", offset = 8,
 //#endregion
 export { Tooltip as default };
 
-//# sourceMappingURL=tooltip.mjs.map
+//# sourceMappingURL=Tooltip.mjs.map

package/dist/Tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.mjs","names":["tooltip"],"sources":["../src/components/atoms/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Children, type ReactElement, type ReactNode } from 'react';\n\nimport { tooltip } from '../../core';\n\nconst { Tooltip: Core, TooltipContent, TooltipTrigger } = tooltip;\n\ntype Placement =\n  | 'top'\n  | 'left'\n  | 'right'\n  | 'bottom'\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight'\n  | 'leftTop'\n  | 'leftBottom'\n  | 'rightTop'\n  | 'rightBottom';\n\ntype Side = NonNullable<React.ComponentProps<typeof TooltipContent>['side']>;\ntype Align = NonNullable<React.ComponentProps<typeof TooltipContent>['align']>;\n\nconst placementMap: Record<Placement, { side: Side; align: Align }> = {\n  top: { side: 'top', align: 'center' },\n  left: { side: 'left', align: 'center' },\n  right: { side: 'right', align: 'center' },\n  bottom: { side: 'bottom', align: 'center' },\n  topLeft: { side: 'top', align: 'start' },\n  topRight: { side: 'top', align: 'end' },\n  bottomLeft: { side: 'bottom', align: 'start' },\n  bottomRight: { side: 'bottom', align: 'end' },\n  leftTop: { side: 'left', align: 'start' },\n  leftBottom: { side: 'left', align: 'end' },\n  rightTop: { side: 'right', align: 'start' },\n  rightBottom: { side: 'right', align: 'end' },\n};\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'children' | 'handle' | 'triggerId' | 'defaultTriggerId'\n> {\n  children: ReactElement;\n  /** Supplementary visual hint; keep essential information visible elsewhere. */\n  content: ReactNode;\n  /** Popup class; the child retains its own className. */\n  className?: string;\n  placement?: Placement;\n  /** Distance between the trigger and popup in pixels. */\n  offset?: number;\n  /** Hover delay in milliseconds. Keyboard focus opens without this delay. */\n  delay?: number;\n  closeDelay?: number;\n}\n\nconst Tooltip = ({\n  children,\n  content,\n  className,\n  placement = 'top',\n  offset = 8,\n  delay,\n  closeDelay,\n  ...props\n}: Props) => {\n  const trigger = Children.only(children);\n  const { side, align } = placementMap[placement];\n\n  return (\n    <Core {...props}>\n      <TooltipTrigger render={trigger} delay={delay} closeDelay={closeDelay} />\n      <TooltipContent\n        side={side}\n        align={align}\n        sideOffset={offset}\n        className={className}\n      >\n        {content}\n      </TooltipContent>\n    </Core>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;AAMA,MAAM,EAAE,SAAS,MAAM,gBAAgB,mBAAmBA;AAmB1D,MAAM,eAAgE;CACpE,KAAK;EAAE,MAAM;EAAO,OAAO;CAAS;CACpC,MAAM;EAAE,MAAM;EAAQ,OAAO;CAAS;CACtC,OAAO;EAAE,MAAM;EAAS,OAAO;CAAS;CACxC,QAAQ;EAAE,MAAM;EAAU,OAAO;CAAS;CAC1C,SAAS;EAAE,MAAM;EAAO,OAAO;CAAQ;CACvC,UAAU;EAAE,MAAM;EAAO,OAAO;CAAM;CACtC,YAAY;EAAE,MAAM;EAAU,OAAO;CAAQ;CAC7C,aAAa;EAAE,MAAM;EAAU,OAAO;CAAM;CAC5C,SAAS;EAAE,MAAM;EAAQ,OAAO;CAAQ;CACxC,YAAY;EAAE,MAAM;EAAQ,OAAO;CAAM;CACzC,UAAU;EAAE,MAAM;EAAS,OAAO;CAAQ;CAC1C,aAAa;EAAE,MAAM;EAAS,OAAO;CAAM;AAC7C;AAmBA,MAAM,WAAW,EACf,UACA,SACA,WACA,YAAY,OACZ,SAAS,GACT,OACA,YACA,GAAG,YACQ;CACX,MAAM,UAAU,SAAS,KAAK,QAAQ;CACtC,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,OACE,qBAAC,MAAD;EAAM,GAAI;EAAV,UAAA,CACE,oBAAC,gBAAD;GAAgB,QAAQ;GAAgB;GAAmB;EAAa,CAAA,GACxE,oBAAC,gBAAD;GACQ;GACC;GACP,YAAY;GACD;GAEV,UAAA;EACa,CAAA,CACZ;;AAEV"}

package/dist/Tour.d.mts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/organisms/tour.d.ts
+export interface Step {
+  key: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Resolved after hydration. Missing/hidden targets use a centered popup. */
+  target?: () => HTMLElement | null;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange'> {
+  steps: readonly Step[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  current?: number;
+  defaultCurrent?: number;
+  onChange?: (current: number) => void;
+  onClose?: () => void;
+  onFinish?: () => void;
+  scrollIntoView?: boolean;
+  previousLabel?: string;
+  nextLabel?: string;
+  finishLabel?: string;
+  closeLabel?: string;
+  formatProgress?: (current: number, total: number) => string;
+  classNames?: {
+    popup?: string;
+    mask?: string;
+    highlight?: string;
+    actions?: string;
+  };
+}
+declare const Tour: ({ steps, open: openProp, defaultOpen, onOpenChange, current: currentProp, defaultCurrent, onChange, onClose, onFinish, scrollIntoView, previousLabel, nextLabel, finishLabel, closeLabel, formatProgress, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Tour as default };
+//# sourceMappingURL=Tour.d.mts.map

package/dist/Tour.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.d.mts","names":[],"sources":["../src/components/organisms/tour.tsx"],"mappings":";;iBAmBiB;EACf;EACA,OAAO;EACP,cAAc;;EAEd,eAAe;EACf;;iBAGe,cAAc,KAC7B;EAGA,gBAAgB;EAChB;EACA;EACA,gBAAgB;EAChB;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,iBAAiB;EACnC;IACE;IACA;IACA;IACA;;;cA6DE,SAAQ,OAAA,MAAA,UAAA,aAAA,cAAA,SAAA,aAAA,gBAAA,UAAA,SAAA,UAAA,gBAAA,eAAA,WAAA,aAAA,YAAA,gBAAA,WAAA,eAAA,SAmBX,0BAAK,IAAA"}

package/dist/Tour.mjs

@@ -0,0 +1,175 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import { OVERLAY_LAYER } from "./lib/z-layers.mjs";
+import Button from "./Button.mjs";
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle } from "./core/popover.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { useControllableState, useElementPosition } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/tour.tsx
+const TARGET_MUTATION = {
+	attributes: true,
+	attributeFilter: [
+		"hidden",
+		"style",
+		"class"
+	]
+};
+const measureVisible = (element) => element.isConnected && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden" ? element.getBoundingClientRect() : null;
+const StepTarget = ({ index, step, scrollIntoView, onMeasure }) => {
+	const { rect, element } = useElementPosition(() => step.target?.() ?? null, {
+		withElement: true,
+		measure: measureVisible,
+		mutation: TARGET_MUTATION
+	});
+	useEffect(() => {
+		if (element && scrollIntoView) element.scrollIntoView({
+			block: "center",
+			inline: "nearest",
+			behavior: "instant"
+		});
+	}, [element, scrollIntoView]);
+	useEffect(() => {
+		onMeasure({
+			index,
+			target: element,
+			rect
+		});
+	}, [
+		onMeasure,
+		index,
+		element,
+		rect
+	]);
+	return null;
+};
+const defaultFormatProgress = (current, total) => `Step ${current} of ${total}`;
+const Tour = ({ steps, open: openProp, defaultOpen = false, onOpenChange, current: currentProp, defaultCurrent = 0, onChange, onClose, onFinish, scrollIntoView = true, previousLabel = "Previous", nextLabel = "Next", finishLabel = "Finish", closeLabel = "Close tour", formatProgress = defaultFormatProgress, className, classNames, ...props }) => {
+	const { getContainer, direction } = useConfig();
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const [current, setCurrent] = useControllableState({
+		value: currentProp,
+		defaultValue: defaultCurrent,
+		onChange
+	});
+	const index = Number.isFinite(current) ? Math.max(0, Math.min(steps.length - 1, Math.floor(current))) : 0;
+	const step = steps[index];
+	const [measurement, setMeasurement] = useState(null);
+	const target = open && measurement && measurement.index === index ? measurement.target : null;
+	const rect = open && measurement && measurement.index === index ? measurement.rect : null;
+	const fallback = useMemo(() => ({ getBoundingClientRect: () => new DOMRect(window.innerWidth / 2, window.innerHeight / 2, 0, 0) }), []);
+	const close = () => {
+		onClose?.();
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "tour",
+		className: cn("contents", className),
+		children: [open && step && /* @__PURE__ */ jsx(StepTarget, {
+			index,
+			step,
+			scrollIntoView,
+			onMeasure: setMeasurement
+		}, index), /* @__PURE__ */ jsxs(Popover, {
+			open: open && !!step,
+			modal: true,
+			onOpenChange: (next, details) => {
+				if (details.reason === "outside-press") {
+					details.cancel();
+					return;
+				}
+				if (!next) close();
+			},
+			children: [/* @__PURE__ */ jsxs(PopoverPortal, {
+				container: getContainer(),
+				children: [/* @__PURE__ */ jsx(PopoverBackdrop, {
+					"data-slot": "tour-mask",
+					className: cn("fixed inset-0 bg-black/40", OVERLAY_LAYER, classNames?.mask)
+				}), open && rect && /* @__PURE__ */ jsx("div", {
+					"data-slot": "tour-highlight",
+					"aria-hidden": "true",
+					style: {
+						position: "fixed",
+						top: rect.top - 4,
+						left: rect.left - 4,
+						width: rect.width + 8,
+						height: rect.height + 8
+					},
+					className: cn("border-primary pointer-events-none rounded-md border-2", "z-1000", classNames?.highlight)
+				})]
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				"data-slot": "tour-popup",
+				dir: props.dir ?? direction,
+				anchor: target ?? fallback,
+				side: step?.placement ?? "bottom",
+				sideOffset: 12,
+				positionerStyle: target ? void 0 : {
+					position: "fixed",
+					left: "50%",
+					top: "50%",
+					transform: "translate(-50%, -50%)"
+				},
+				className: cn(`max-h-[calc(100dvh-2rem)] w-80 max-w-[calc(100vw-2rem)]
+            overflow-y-auto`, classNames?.popup),
+				children: [
+					/* @__PURE__ */ jsx(PopoverTitle, { children: step?.title }),
+					step?.description != null && /* @__PURE__ */ jsx(PopoverDescription, {
+						className: "mt-2 text-sm",
+						children: step.description
+					}),
+					/* @__PURE__ */ jsx("p", {
+						"data-slot": "tour-progress",
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						className: "text-muted-foreground mt-3 text-xs",
+						children: formatProgress(index + 1, steps.length)
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("mt-4 flex flex-wrap gap-2", classNames?.actions),
+						children: [
+							/* @__PURE__ */ jsx(PopoverClose, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "text",
+									size: "small"
+								}),
+								children: closeLabel
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "outlined",
+								size: "small",
+								disabled: index === 0,
+								focusableWhenDisabled: true,
+								className: "aria-disabled:pointer-events-none\n                aria-disabled:opacity-50",
+								onClick: () => setCurrent(index - 1),
+								children: previousLabel
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "small",
+								onClick: () => {
+									if (index < steps.length - 1) setCurrent(index + 1);
+									else {
+										onFinish?.();
+										setOpen(false);
+									}
+								},
+								children: index === steps.length - 1 ? finishLabel : nextLabel
+							})
+						]
+					}),
+					target && /* @__PURE__ */ jsx(PopoverArrow, {})
+				]
+			})]
+		})]
+	});
+};
+//#endregion
+export { Tour as default };
+
+//# sourceMappingURL=Tour.mjs.map

package/dist/Tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.mjs","names":["popover.Popover","popover.PopoverPortal","popover.PopoverBackdrop","popover.PopoverContent","popover.PopoverTitle","popover.PopoverDescription","popover.PopoverClose","popover.PopoverArrow"],"sources":["../src/components/organisms/tour.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentPropsWithRef,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useControllableState, useElementPosition } from '@jbpark/use-hooks';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { popover } from '../../core';\nimport { OVERLAY_LAYER } from '../../lib/z-layers';\nimport Button from '../atoms/button';\n\nexport interface Step {\n  key: string;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Resolved after hydration. Missing/hidden targets use a centered popup. */\n  target?: () => HTMLElement | null;\n  placement?: 'top' | 'bottom' | 'left' | 'right';\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'onChange'\n> {\n  steps: readonly Step[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  current?: number;\n  defaultCurrent?: number;\n  onChange?: (current: number) => void;\n  onClose?: () => void;\n  onFinish?: () => void;\n  scrollIntoView?: boolean;\n  previousLabel?: string;\n  nextLabel?: string;\n  finishLabel?: string;\n  closeLabel?: string;\n  formatProgress?: (current: number, total: number) => string;\n  classNames?: {\n    popup?: string;\n    mask?: string;\n    highlight?: string;\n    actions?: string;\n  };\n}\n\ninterface Measurement {\n  index: number;\n  target: HTMLElement | null;\n  rect: DOMRect | null;\n}\n\nconst TARGET_MUTATION = {\n  attributes: true,\n  attributeFilter: ['hidden', 'style', 'class'],\n};\n\nconst measureVisible = (element: HTMLElement) =>\n  element.isConnected &&\n  element.getClientRects().length > 0 &&\n  getComputedStyle(element).visibility !== 'hidden'\n    ? element.getBoundingClientRect()\n    : null;\n\n// Tracks one open step's target. Tour mounts it only while open and keys it by\n// step, so no listener stays attached while closed and a new step never\n// reports the previous step's element.\nconst StepTarget = ({\n  index,\n  step,\n  scrollIntoView,\n  onMeasure,\n}: {\n  index: number;\n  step: Step;\n  scrollIntoView: boolean;\n  onMeasure: (measurement: Measurement) => void;\n}) => {\n  const { rect, element } = useElementPosition<HTMLElement>(\n    () => step.target?.() ?? null,\n    { withElement: true, measure: measureVisible, mutation: TARGET_MUTATION },\n  );\n\n  useEffect(() => {\n    if (element && scrollIntoView) {\n      element.scrollIntoView({\n        block: 'center',\n        inline: 'nearest',\n        behavior: 'instant',\n      });\n    }\n  }, [element, scrollIntoView]);\n\n  useEffect(() => {\n    onMeasure({ index, target: element, rect });\n  }, [onMeasure, index, element, rect]);\n\n  return null;\n};\n\nconst defaultFormatProgress = (current: number, total: number) =>\n  `Step ${current} of ${total}`;\n\nconst Tour = ({\n  steps,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  current: currentProp,\n  defaultCurrent = 0,\n  onChange,\n  onClose,\n  onFinish,\n  scrollIntoView = true,\n  previousLabel = 'Previous',\n  nextLabel = 'Next',\n  finishLabel = 'Finish',\n  closeLabel = 'Close tour',\n  formatProgress = defaultFormatProgress,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const { getContainer, direction } = useConfig();\n  const [open, setOpen] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const [current, setCurrent] = useControllableState({\n    value: currentProp,\n    defaultValue: defaultCurrent,\n    onChange,\n  });\n  const index = Number.isFinite(current)\n    ? Math.max(0, Math.min(steps.length - 1, Math.floor(current)))\n    : 0;\n  const step = steps[index];\n  const [measurement, setMeasurement] = useState<Measurement | null>(null);\n  const target =\n    open && measurement && measurement.index === index\n      ? measurement.target\n      : null;\n  const rect =\n    open && measurement && measurement.index === index\n      ? measurement.rect\n      : null;\n  const fallback = useMemo(\n    () => ({\n      getBoundingClientRect: () =>\n        new DOMRect(window.innerWidth / 2, window.innerHeight / 2, 0, 0),\n    }),\n    [],\n  );\n\n  const close = () => {\n    onClose?.();\n    setOpen(false);\n  };\n\n  return (\n    <div\n      {...props}\n      data-slot=\"tour\"\n      className={cn(\n        'contents',\n        className, //\n      )}\n    >\n      {open && step && (\n        <StepTarget\n          key={index}\n          index={index}\n          step={step}\n          scrollIntoView={scrollIntoView}\n          onMeasure={setMeasurement}\n        />\n      )}\n      <popover.Popover\n        open={open && !!step}\n        modal\n        onOpenChange={(next, details) => {\n          if (details.reason === 'outside-press') {\n            details.cancel();\n\n            return;\n          }\n\n          if (!next) close();\n        }}\n      >\n        <popover.PopoverPortal container={getContainer()}>\n          <popover.PopoverBackdrop\n            data-slot=\"tour-mask\"\n            className={cn(\n              'fixed inset-0 bg-black/40',\n              OVERLAY_LAYER,\n              classNames?.mask, //\n            )}\n          />\n          {open && rect && (\n            <div\n              data-slot=\"tour-highlight\"\n              aria-hidden=\"true\"\n              style={{\n                position: 'fixed',\n                top: rect.top - 4,\n                left: rect.left - 4,\n                width: rect.width + 8,\n                height: rect.height + 8,\n              }}\n              className={cn(\n                'border-primary pointer-events-none rounded-md border-2',\n                OVERLAY_LAYER,\n                classNames?.highlight, //\n              )}\n            />\n          )}\n        </popover.PopoverPortal>\n        <popover.PopoverContent\n          data-slot=\"tour-popup\"\n          dir={props.dir ?? direction}\n          anchor={target ?? fallback}\n          side={step?.placement ?? 'bottom'}\n          sideOffset={12}\n          positionerStyle={\n            target\n              ? undefined\n              : {\n                  position: 'fixed',\n                  left: '50%',\n                  top: '50%',\n                  transform: 'translate(-50%, -50%)',\n                }\n          }\n          className={cn(\n            `max-h-[calc(100dvh-2rem)] w-80 max-w-[calc(100vw-2rem)]\n            overflow-y-auto`,\n            classNames?.popup, //\n          )}\n        >\n          <popover.PopoverTitle>{step?.title}</popover.PopoverTitle>\n          {step?.description != null && (\n            <popover.PopoverDescription className=\"mt-2 text-sm\">\n              {step.description}\n            </popover.PopoverDescription>\n          )}\n          <p\n            data-slot=\"tour-progress\"\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            className=\"text-muted-foreground mt-3 text-xs\"\n          >\n            {formatProgress(index + 1, steps.length)}\n          </p>\n          <div\n            className={cn(\n              'mt-4 flex flex-wrap gap-2',\n              classNames?.actions, //\n            )}\n          >\n            <popover.PopoverClose\n              render={<Button variant=\"text\" size=\"small\" />}\n            >\n              {closeLabel}\n            </popover.PopoverClose>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={index === 0}\n              focusableWhenDisabled\n              className=\"aria-disabled:pointer-events-none\n                aria-disabled:opacity-50\"\n              onClick={() => setCurrent(index - 1)}\n            >\n              {previousLabel}\n            </Button>\n            <Button\n              size=\"small\"\n              onClick={() => {\n                if (index < steps.length - 1) {\n                  setCurrent(index + 1);\n                } else {\n                  onFinish?.();\n                  setOpen(false);\n                }\n              }}\n            >\n              {index === steps.length - 1 ? finishLabel : nextLabel}\n            </Button>\n          </div>\n          {target && <popover.PopoverArrow />}\n        </popover.PopoverContent>\n      </popover.Popover>\n    </div>\n  );\n};\n\nexport default Tour;\n"],"mappings":"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"}