@stamcat/craftsman 0.0.27-alpha.2 → 0.0.27-alpha.20

package/src/components/TimePicker/TimePicker.scss

@@ -0,0 +1,226 @@
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_placeholders";
+@use "../DatePicker/_DatePicker";
+
+@layer craftsman-component {
+    .react-time-picker,
+    .react-time-picker *,
+    .react-time-picker *:before,
+    .react-time-picker *:after {
+        @extend %border-box;
+    }
+
+    .react-time-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }   
+        &__wrapper {
+            @extend %date-picker-wrapper;
+            padding: 6px 24px 6px 8px;
+        }  
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }   
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+    }
+
+    .react-time-picker__inputGroup__input:invalid {
+        background: rgba(255, 0, 0, 0.1);
+    }
+
+    .react-time-picker__inputGroup__amPm {
+        font: inherit;
+        -webkit-appearance: menulist;
+        -moz-appearance: menulist;
+        appearance: menulist;
+    }
+
+    .react-time-picker__button:enabled {
+        cursor: pointer;
+    }
+
+    .react-time-picker__button:enabled:hover .react-time-picker__button__icon,
+    .react-time-picker__button:enabled:focus .react-time-picker__button__icon {
+        stroke: #0078d7;
+    }
+
+    .react-time-picker__button:disabled .react-time-picker__button__icon {
+        stroke: #6d6d6d;
+    }
+
+    .react-time-picker__button svg {
+        display: inherit;
+    }
+
+    .react-time-picker__clock {
+        width: 200px;
+        height: 200px;
+        max-width: 100vw;
+        padding: 25px;
+        background-color: white;
+        border: thin solid #a0a096;
+        z-index: 1;
+    }
+
+    .react-time-picker__clock--closed {
+        display: none;
+    }
+
+    .timePicker {
+        // suppress the built-in clock popup — our custom wheel renders instead
+        .react-time-picker__clock {
+            display: none;
+        }
+
+        .timePicker__field {
+            position: relative;
+
+            .input-view-toggle {
+                position: absolute;
+                right: 4px;
+                top: 50%;
+                transform: translateY(-50%);
+                padding: 4px;
+                line-height: 1;
+            }
+        }
+
+        &__display {
+            position: relative;
+            display: inline-flex;
+            height: 160px;
+            background-color: #{u.color("white")};
+            border: 1px solid #{u.color("gray400")};
+            border-radius: 8px;
+            z-index: 1;
+            &:before,
+            &:after {
+                position: absolute;
+                left: 0;
+                right: 0;
+                content: "";
+                display: block;
+                height: calc(50% - 32px / 2);
+                z-index: 1;
+                pointer-events: none;
+            }
+
+            &:before {
+                top: -0.5px;
+                border-bottom: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
+                background: linear-gradient(
+                    to top,
+                    rgba(var(--background-site-rgb-value), 0.65) 0%,
+                    rgba(var(--background-site-rgb-value), 1) 100%
+                );
+            }
+
+            &:after {
+                bottom: -0.5px;
+                border-top: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
+                background: linear-gradient(
+                    to bottom,
+                    rgba(var(--background-site-rgb-value), 0.65) 0%,
+                    rgba(var(--background-site-rgb-value), 1) 100%
+                );
+            }
+
+            .ios-picker {
+                height: 100%;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: 6px;
+                padding: 0 12px;
+                line-height: 1;
+                font-size: 16px;
+
+                &--disabled {
+                    pointer-events: none;
+                    opacity: 0.5;
+                }
+            }
+
+            .ios-picker__scene {
+                min-width: 30px;
+                height: 100%;
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+                touch-action: pan-x;
+            }
+
+            .ios-picker__viewport {
+                height: 32px;
+                width: 100%;
+                perspective: 1000px;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                -webkit-touch-callout: none;
+                -khtml-user-select: none;
+                -webkit-tap-highlight-color: transparent;
+            }
+
+            .ios-picker__viewport--perspective-left {
+                perspective-origin: calc(50% + 130px) 50%;
+                transform: translateX(27px);
+            }
+
+            .ios-picker__viewport--perspective-right {
+                perspective-origin: calc(50% - 130px) 50%;
+                transform: translateX(-27px);
+            }
+
+            .ios-picker__viewport--perspective-center {
+                perspective-origin: 50% 50%;
+            }
+
+            .ios-picker__container {
+                height: 100%;
+                width: 100%;
+                transform-style: preserve-3d;
+                will-change: transform;
+            }
+
+            .ios-picker__slide {
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                backface-visibility: hidden;
+                opacity: 0;
+            }
+
+            .ios-picker__label {
+                font-weight: 700;
+                white-space: nowrap;
+                pointer-events: none;
+            }
+        }
+    }
+}

package/src/components/TimePicker/TimePicker2.esm.js

@@ -0,0 +1,98 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
+import './TimePicker.css';/* empty css               */
+import { resolveLocale as n } from "./utilities.esm.js";
+import { TimePickerDisplay as r } from "./TimePickerDisplay.esm.js";
+import { require_lib as i } from "../../../node_modules/react-device-detect/dist/lib.esm.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useEffect as s, useState as c } from "react";
+import { FaClock as l, FaRegClock as u, FaX as d } from "react-icons/fa6";
+import { autoUpdate as f, flip as p, offset as m, shift as h, useFloating as g } from "@floating-ui/react-dom";
+import { TimePicker as _ } from "react-time-picker";
+//#region src/components/TimePicker/TimePicker.tsx
+var v = i(), y = (i) => {
+	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = i, [A, j] = c(null), [M, N] = c(null), { floatingStyles: P } = g({
+		placement: "bottom-start",
+		strategy: "absolute",
+		whileElementsMounted: f,
+		middleware: [
+			m(4),
+			p(),
+			h()
+		],
+		elements: {
+			reference: A,
+			floating: M
+		}
+	}), [F, I] = c(!1), L = n(b);
+	return s(() => {
+		if (!F) return;
+		let e = (e) => {
+			A?.contains(e.target) || M?.contains(e.target) || I(!1);
+		};
+		return document.addEventListener("pointerdown", e), () => {
+			document.removeEventListener("pointerdown", e);
+		};
+	}, [
+		F,
+		A,
+		M
+	]), /* @__PURE__ */ o("div", {
+		className: "timePicker",
+		ref: j,
+		onFocus: (e) => {
+			v.isMobile || e.target instanceof HTMLInputElement && I(!0);
+		},
+		onKeyDown: (e) => {
+			e.key === "Enter" && I(!1);
+		},
+		children: [
+			O && /* @__PURE__ */ a("input", {
+				type: "hidden",
+				name: O,
+				value: typeof S == "string" ? S : "",
+				readOnly: !0
+			}),
+			/* @__PURE__ */ a(t, {
+				label: w,
+				labelPosition: T,
+				error: E,
+				required: D,
+				children: /* @__PURE__ */ o("div", {
+					className: "timePicker__field",
+					children: [/* @__PURE__ */ a(_, {
+						...k,
+						value: S,
+						onChange: C,
+						locale: L,
+						required: D,
+						disableClock: !0,
+						clearIcon: /* @__PURE__ */ a(d, { size: 14 })
+					}), !v.isMobile && /* @__PURE__ */ a(e, {
+						type: "button",
+						variant: "text",
+						onClick: () => I((e) => !e),
+						"aria-label": F ? "Hide time picker" : "Show time picker",
+						"aria-pressed": F,
+						disabled: i.disabled,
+						className: "input-view-toggle",
+						children: a(F ? l : u, { size: 16 })
+					})]
+				})
+			}),
+			!v.isMobile && /* @__PURE__ */ a(r, {
+				value: S,
+				onChange: (e) => C?.(e),
+				locale: L,
+				labels: y,
+				format: x,
+				visible: F,
+				floatingRef: N,
+				style: P
+			})
+		]
+	});
+};
+//#endregion
+export { y as TimePicker };

package/src/components/TimePicker/TimePickerDisplay.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+type TimePickerDisplayProps = {
+    value?: unknown;
+    onChange?: (val: string) => void;
+    locale?: Intl.LocalesArgument;
+    format?: 24 | 12;
+    labels?: {
+        hour?: string;
+        minute?: string;
+    };
+    visible?: boolean;
+    floatingRef?: (node: HTMLElement | null) => void;
+    style?: React.CSSProperties;
+};
+export declare const TimePickerDisplay: React.FC<TimePickerDisplayProps>;
+export {};

package/src/components/TimePicker/TimePickerDisplay.esm.js

@@ -0,0 +1,54 @@
+import { getAmPmLabels as e, getUnitLabel as t, is24HourFormat as n, isEmpty as r } from "../../utilities/validations.esm.js";
+import { padTime as i, parseTimeString as a, resolveLocale as o, resolveTimeFormat as s, to24Hour as c } from "./utilities.esm.js";
+import { IosPickerItem as l } from "./TimePickerWheel.esm.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import "react";
+//#region src/components/TimePicker/TimePickerDisplay.tsx
+var f = (e, t) => e ? t : void 0, p = (p) => {
+	let { value: m, onChange: h, locale: g, format: _, labels: v, visible: y = !1, floatingRef: b, style: x } = p, S = o(g), [C, w] = a(m), T = !r(m), E = s(_, n(S)), D = +(E === 12), O = E === 12 ? e(S) : null, k = +(C >= 12), A = E === 12 ? (C % 12 + 11) % 12 : C;
+	return y ? /* @__PURE__ */ d("div", {
+		className: "timePicker__display",
+		ref: b,
+		style: x,
+		children: [
+			/* @__PURE__ */ u(l, {
+				slideCount: E,
+				perspective: "left",
+				loop: !0,
+				offset: D,
+				selectedIndex: f(T, A),
+				onSelect: (e) => {
+					let t = c(e + D, C >= 12, E === 12);
+					h?.(`${i(t)}:${i(w)}`);
+				},
+				label: t(S, "hour", v?.hour)
+			}),
+			/* @__PURE__ */ u(l, {
+				slideCount: 60,
+				perspective: "right",
+				loop: !0,
+				selectedIndex: f(T, w),
+				onSelect: (e) => {
+					h?.(`${i(C)}:${i(e)}`);
+				},
+				label: t(S, "minute", v?.minute)
+			}),
+			E === 12 && O && /* @__PURE__ */ u(l, {
+				slideCount: 2,
+				perspective: "center",
+				loop: !1,
+				slides: O,
+				selectedIndex: f(T, k),
+				onSelect: (e) => {
+					let t = e === 1;
+					if (t === C >= 12) return;
+					let n = t ? C + 12 : C - 12;
+					h?.(`${i(n)}:${i(w)}`);
+				},
+				label: ""
+			})
+		]
+	}) : null;
+};
+//#endregion
+export { p as TimePickerDisplay };

package/src/components/TimePicker/TimePickerWheel.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type IosPickerItemProps = {
+    loop?: boolean;
+    label: string;
+    slideCount: number;
+    perspective: "left" | "right" | "center";
+    offset?: number;
+    slides?: React.ReactNode[];
+    selectedIndex?: number;
+    onSelect?: (index: number) => void;
+    disabled?: boolean;
+};
+export declare const IosPickerItem: (props: IosPickerItemProps) => React.JSX.Element;

package/src/components/TimePicker/TimePickerWheel.esm.js

@@ -0,0 +1,61 @@
+"use client";
+import e from "../../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.esm.js";
+import "./constants.esm.js";
+import { inactivateEmblaTransform as t, setContainerStyles as n, setSlideStyles as r, snapOnPointerUp as i } from "./utilities.esm.js";
+import a from "clsx";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useCallback as c, useEffect as l, useLayoutEffect as u, useRef as d } from "react";
+//#region src/components/TimePicker/TimePickerWheel.tsx
+var f = (f) => {
+	let { slideCount: p, perspective: m, label: h, loop: g = !1, offset: _ = 0, slides: v, selectedIndex: y, onSelect: b, disabled: x } = f, [S, C] = e({
+		loop: g,
+		axis: "y",
+		dragFree: !0,
+		containScroll: !1
+	}), w = d(null), T = d(b);
+	u(() => {
+		T.current = b;
+	});
+	let E = p * 20, D = g ? 0 : 20, O = c((e) => {
+		n(e, (p * 20 - D) * e.scrollProgress()), e.slideNodes().forEach((t, n) => {
+			r(e, n, g, p, E);
+		});
+	}, [
+		g,
+		p,
+		D,
+		E
+	]);
+	return l(() => {
+		if (!C) return () => {};
+		let e = (e) => T.current?.(e.selectedScrollSnap());
+		return C.on("pointerUp", i), C.on("scroll", O), C.on("reInit", t), C.on("reInit", O), C.on("select", e), t(C), O(C), () => {
+			C.off("pointerUp", i), C.off("scroll", O), C.off("reInit", t), C.off("reInit", O), C.off("select", e);
+		};
+	}, [C, O]), l(() => {
+		!C || y === void 0 || C.selectedScrollSnap() !== y && C.scrollTo(y);
+	}, [C, y]), /* @__PURE__ */ s("div", {
+		className: a("ios-picker", { "ios-picker--disabled": x }),
+		"aria-disabled": x,
+		children: [/* @__PURE__ */ o("div", {
+			className: "ios-picker__scene",
+			ref: w,
+			children: /* @__PURE__ */ o("div", {
+				className: `ios-picker__viewport ios-picker__viewport--perspective-${m}`,
+				ref: S,
+				children: /* @__PURE__ */ o("div", {
+					className: "ios-picker__container",
+					children: Array.from({ length: p }, (e, t) => /* @__PURE__ */ o("div", {
+						className: "ios-picker__slide",
+						children: v ? v[t] : t + _
+					}, t))
+				})
+			})
+		}), /* @__PURE__ */ o("div", {
+			className: "ios-picker__label",
+			children: h
+		})]
+	});
+};
+//#endregion
+export { f as IosPickerItem };

package/src/components/TimePicker/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const CIRCLE_DEGREES = 360;
+export declare const WHEEL_ITEM_SIZE = 32;
+export declare const WHEEL_ITEM_COUNT = 18;
+export declare const WHEEL_ITEMS_IN_VIEW = 4;
+export declare const WHEEL_ITEM_RADIUS: number;
+export declare const IN_VIEW_DEGREES: number;
+export declare const WHEEL_RADIUS: number;

package/src/components/TimePicker/constants.esm.js

@@ -0,0 +1,3 @@
+var e = Math.round(32 / 2 / Math.tan(Math.PI / 18));
+//#endregion
+export { e as WHEEL_RADIUS };

package/src/components/TimePicker/utilities.d.ts

@@ -0,0 +1,15 @@
+import { EmblaCarouselType } from 'embla-carousel';
+export declare const parseTimeString: (val: unknown) => [number, number];
+export declare const padTime: (n: number) => string;
+export declare const toDisplayHour: (hours: number, is12h: boolean) => number;
+export declare const to24Hour: (display: number, isPM: boolean, is12h: boolean) => number;
+export declare const resolveLocale: (locale?: Intl.LocalesArgument) => string;
+export declare const resolveTimeFormat: (format: 24 | 12 | undefined, is24h: boolean) => 24 | 12;
+export declare const isInView: (wheelLocation: number, slidePosition: number) => boolean;
+export declare const setSlideStyles: (emblaApi: EmblaCarouselType, index: number, loop: boolean, slideCount: number, totalRadius: number) => void;
+export declare const setContainerStyles: (emblaApi: EmblaCarouselType, wheelRotation: number) => void;
+export declare const inactivateEmblaTransform: (emblaApi: EmblaCarouselType) => void;
+export declare const snapOnPointerUp: (emblaApi: EmblaCarouselType) => void;
+export declare const resolveHasValue: (value: React.ComponentProps<"input">["value"], internalHours: number | null) => boolean;
+export declare const resolveTime: (value: unknown, h: number | null, m: number | null) => [number, number];
+export declare const toDisplayInputValue: (hasVal: boolean, val: string | number) => string;

package/src/components/TimePicker/utilities.esm.js

@@ -0,0 +1,20 @@
+import { WHEEL_RADIUS as e } from "./constants.esm.js";
+//#region src/components/TimePicker/utilities.ts
+var t = (e) => {
+	if (typeof e != "string" || !e.includes(":")) return [0, 0];
+	let [t, n] = e.split(":").map(Number);
+	return [isNaN(t) ? 0 : t, isNaN(n) ? 0 : n];
+}, n = (e) => String(e).padStart(2, "0"), r = (e, t, n) => n ? e === 12 ? t ? 12 : 0 : t ? e + 12 : e : e, i = (e) => e ? String(Array.isArray(e) ? e[0] : e) : typeof navigator < "u" ? navigator.language : "en-US", a = (e, t) => e ?? (t ? 24 : 12), o = (e, t) => Math.abs(e - t) < 80, s = (t, n, r, i, a) => {
+	let s = t.slideNodes()[n], c = t.scrollProgress() * a, l = t.scrollSnapList()[n] * a, u = l + a, d = l - a, f = !1, p = n * -20;
+	o(c, l) && (f = !0), r && o(c, d) && (f = !0, p = -360 + (i - n) * 20), r && o(c, u) && (f = !0, p = -(a % 360) - n * 20), f ? (s.style.opacity = "1", s.style.transform = `translateY(-${n * 100}%) rotateX(${p}deg) translateZ(${e}px)`) : (s.style.opacity = "0", s.style.transform = "none");
+}, c = (t, n) => {
+	t.containerNode().style.transform = `translateZ(${e}px) rotateX(${n}deg)`;
+}, l = (e) => {
+	let { translate: t } = e.internalEngine();
+	t.clear(), t.toggleActive(!1);
+}, u = (e) => {
+	let { scrollTo: t, target: n, location: r } = e.internalEngine(), i = n.get() - r.get(), a = Math.abs(i) < 32 / 2.5 ? 10 : .1;
+	t.distance(i * a, !0);
+};
+//#endregion
+export { l as inactivateEmblaTransform, o as isInView, n as padTime, t as parseTimeString, i as resolveLocale, a as resolveTimeFormat, c as setContainerStyles, s as setSlideStyles, u as snapOnPointerUp, r as to24Hour };

package/src/components/Tooltip/AGENTS.md

@@ -0,0 +1,41 @@
+# Tooltip — Agent Usage Notes
+
+> Not yet part of the documented public export surface (see `craftsman-component-usage` skill's Known Limitations). Source path only — do not assume `@stamcat/craftsman/Tooltip` is published until confirmed in `exports.ts`.
+
+Import (source-relative, once exported):
+
+```tsx
+import { Tooltip } from "@stamcat/craftsman/Tooltip";
+```
+
+Props:
+
+- `anchor: React.ReactNode` — the element the tooltip is attached to.
+- `content: React.ReactNode` — the floating content shown.
+- `placement?: Placement` (from `@floating-ui/react-dom`, default: `"bottom-start"`)
+- `strategy?: Strategy` (from `@floating-ui/react-dom`, default: `"absolute"`)
+- `showContent?: "hover" | "click"` (default: `"hover"`)
+- `anchorStyles?: React.CSSProperties`
+- `contentStyles?: React.CSSProperties`
+
+Behavior notes:
+
+- Built on `@floating-ui/react-dom`'s `useFloating` with `autoUpdate` and `offset(12)`, `flip()`, `shift()` middleware.
+- `showContent="hover"` toggles visibility on the anchor's `mouseenter`/`mouseleave`.
+- `showContent="click"` toggles visibility on anchor click, and closes on any outside `pointerdown`.
+- Floating content is only rendered in the DOM while visible (not just hidden via CSS).
+- Current `placement` is exposed via `data-placement` on the floating element for style targeting.
+
+Example:
+
+```tsx
+<Tooltip
+  anchor={<Button variant="text">Hover me</Button>}
+  content="Helpful detail"
+  placement="top"
+/>
+```
+
+Implementation caution:
+
+- No dedicated theme entry currently in `theme.components`; style via `anchorStyles`/`contentStyles` or global selectors targeting `.tooltip__anchor` / `.tooltip__floating`.

package/src/components/Tooltip/Tooltip.css

@@ -0,0 +1 @@
+@layer craftsman-component{.tooltip{--tooltip-bg:var(--gray800)}.tooltip__floating{background-color:var(--tooltip-bg);color:var(--white);padding:calc(var(--w-gutter) * .25) calc(var(--w-gutter) * .5);border-radius:6px;position:relative}.tooltip__floating:before{content:"";background-color:var(--tooltip-bg);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.tooltip__floating[data-placement^=bottom]:before{margin-left:-4px;top:-4px;left:50%}.tooltip__floating[data-placement^=top]:before{margin-left:-4px;bottom:-4px;left:50%}.tooltip__floating[data-placement^=left]:before{margin-top:-4px;top:50%;right:-4px}.tooltip__floating[data-placement^=right]:before{margin-top:-4px;top:50%;left:-4px}}

package/src/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import { Placement, Strategy } from '@floating-ui/react-dom';
+import { default as React } from 'react';
+export type TooltipProps = {
+    anchor: React.ReactNode;
+    content: React.ReactNode;
+    placement?: Placement;
+    strategy?: Strategy;
+    showContent?: "hover" | "click";
+    anchorStyles?: React.CSSProperties;
+    contentStyles?: React.CSSProperties;
+};
+export declare const Tooltip: React.FC<TooltipProps>;

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,29 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .tooltip {
+        --tooltip-bg: #{u.color("gray800")};
+
+        &__floating {
+            position: relative;
+            background-color: var(--tooltip-bg);
+            color: #{u.color("white")};
+            padding: #{u.width("gutter", 0.25)} #{u.width("gutter", 0.5)};
+            border-radius: 6px;
+
+            &::before {
+                content: '';
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background-color: var(--tooltip-bg);
+                transform: rotate(45deg);
+            }
+
+            &[data-placement^="bottom"]::before { top: -4px; left: 50%; margin-left: -4px; }
+            &[data-placement^="top"]::before    { bottom: -4px; left: 50%; margin-left: -4px; }
+            &[data-placement^="left"]::before   { right: -4px; top: 50%; margin-top: -4px; }
+            &[data-placement^="right"]::before  { left: -4px; top: 50%; margin-top: -4px; }
+        }
+    }
+}

package/src/components/Tooltip/Tooltip2.esm.js

@@ -0,0 +1,65 @@
+"use client";
+import './Tooltip.css';/* empty css            */
+import e from "clsx";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useEffect as r, useState as i } from "react";
+import { autoUpdate as a, flip as o, offset as s, shift as c, useFloating as l } from "@floating-ui/react-dom";
+//#region src/components/Tooltip/Tooltip.tsx
+var u = (u) => {
+	let { showContent: d = "hover" } = u, [f, p] = i(null), [m, h] = i(null), { floatingStyles: g, placement: _ } = l({
+		placement: u.placement ?? "bottom-start",
+		strategy: u.strategy ?? "absolute",
+		whileElementsMounted: a,
+		middleware: [
+			s(12),
+			o(),
+			c()
+		],
+		elements: {
+			reference: f,
+			floating: m
+		}
+	}), [v, y] = i(!1);
+	return r(() => {
+		if (!v || d !== "click") return;
+		let e = (e) => {
+			f?.contains(e.target) || m?.contains(e.target) || y(!1);
+		};
+		return document.addEventListener("pointerdown", e), () => {
+			document.removeEventListener("pointerdown", e);
+		};
+	}, [
+		v,
+		d,
+		f,
+		m
+	]), /* @__PURE__ */ n("div", {
+		className: e("tooltip"),
+		children: [/* @__PURE__ */ t("div", {
+			className: e("tooltip__anchor"),
+			ref: p,
+			onMouseEnter: () => {
+				d === "hover" && y(!0);
+			},
+			onMouseLeave: () => {
+				d === "hover" && y(!1);
+			},
+			onClick: () => {
+				d === "click" && y((e) => !e);
+			},
+			style: u.anchorStyles,
+			children: u.anchor
+		}), v && /* @__PURE__ */ t("div", {
+			className: e("tooltip__floating"),
+			ref: h,
+			"data-placement": _,
+			style: {
+				...g,
+				...u.contentStyles
+			},
+			children: u.content
+		})]
+	});
+};
+//#endregion
+export { u as Tooltip };