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

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/Toggle/AGENTS.md

@@ -0,0 +1,33 @@
+# Toggle — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Toggle } from "@stamcat/craftsman/Toggle";
+```
+
+Props:
+
+- Extends `Input` props, excluding `type`, `preAdornment`, and `endAdornment` (all internally managed).
+- `width?: number` — pixel width of the switch track (default: `40`). Track height, thumb size, and thumb travel all derive from this via `calc()`.
+- `label?: string | ReactNode`, `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"right"`), `error?`, `required?` — same as `Input`.
+
+Behavior notes:
+
+- `Toggle` is `<Input type="checkbox">` under the hood — it is a real, keyboard-accessible checkbox styled as a switch, not a custom widget.
+- `width` sets a single `--toggle-width` CSS variable inline; the track, thumb, and checked-state translation are all `calc()`-derived from it in `Toggle.scss` (the same sizing pattern used by `Button`'s `--btn-size`, `Checkbox`'s `--checkbox-size`, and `RadioButton`'s `--radio-size`).
+- The underlying checkbox input is stretched invisibly over the full switch (`opacity: 0`) so it stays the real click/keyboard target; the visual slider is rendered via `endAdornment` with `pointer-events: none`.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+
+Example:
+
+```tsx
+const [enabled, setEnabled] = useState(false);
+
+<Toggle
+  label="Enable notifications"
+  width={48}
+  checked={enabled}
+  onChange={(event) => setEnabled(event.currentTarget.checked)}
+/>
+```

package/src/components/Toggle/Toggle.css

@@ -0,0 +1 @@
+@layer craftsman-component{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}

package/src/components/Toggle/Toggle.d.ts

@@ -0,0 +1,5 @@
+import { InputProps } from '../Input/Input';
+export type ToggleProps = Omit<InputProps, "type" | "preAdornment" | "endAdornment"> & {
+    width?: number;
+};
+export declare const Toggle: React.FC<ToggleProps>;

package/src/components/Toggle/Toggle.scss

@@ -0,0 +1,64 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .input-wrapper.toggle {
+        > label {
+            display: inline-flex;
+            align-items: center;
+            gap: #{u.width("gutter", 0.5)};
+        }
+
+        .input-field {
+            position: relative;
+            width: var(--toggle-width, 60px);
+            height: calc(var(--toggle-width, 60px) * 0.56);
+        }
+
+        .input.checkbox {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            opacity: 0;
+            cursor: pointer;
+            z-index: 1;
+        }
+
+        .input-end-adornment {
+            position: absolute;
+            inset: 0;
+            top: 0;
+            transform: none;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background-color: var(--gray400);
+            border-radius: calc(var(--toggle-width, 60px) * 0.56);
+            transition: background-color 0.2s ease;
+
+            &::before {
+                position: absolute;
+                content: "";
+                left: calc(var(--toggle-width, 60px) * 0.065);
+                bottom: calc(var(--toggle-width, 60px) * 0.065);
+                height: calc(var(--toggle-width, 60px) * 0.43);
+                width: calc(var(--toggle-width, 60px) * 0.43);
+                border-radius: 50%;
+                background-color: var(--white);
+                transition: transform 0.2s ease;
+            }
+        }
+
+        .input.checkbox:checked + .input-end-adornment .toggle-slider {
+            background-color: var(--blue500);
+
+            &::before {
+                transform: translateX(calc(var(--toggle-width, 60px) * 0.43));
+            }
+        }
+    }
+}

package/src/components/Toggle/Toggle2.esm.js

@@ -0,0 +1,19 @@
+"use client";
+import { Input as e } from "../Input/Input2.esm.js";
+import './Toggle.css';/* empty css           */
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Toggle/Toggle.tsx
+var r = ({ labelPosition: r = "right", className: i, style: a, width: o = 40, ...s }) => /* @__PURE__ */ n(e, {
+	type: "checkbox",
+	labelPosition: r,
+	className: t("toggle", i),
+	endAdornment: /* @__PURE__ */ n("span", { className: "toggle-slider" }),
+	style: {
+		...a,
+		"--toggle-width": `${o}px`
+	},
+	...s
+});
+//#endregion
+export { r as Toggle };

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 };

package/src/components/index.d.ts

@@ -1,7 +1,23 @@
-export { Button } from './Button';
-export { Input } from './Input';
-export { InputPassword } from './InputPassword';
-export { Loader } from './Loader';
-export { RadioButton } from './RadioButton';
-export { Checkbox } from './Checkbox';
-export { Modal } from './Modal';
+export { Button } from './Button/Button';
+export { Input } from './Input/Input';
+export { InputPassword } from './InputPassword/InputPassword';
+export { Loader } from './Loader/Loader';
+export { RadioButton } from './RadioButton/RadioButton';
+export { Checkbox } from './Checkbox/Checkbox';
+export { Textarea } from './Textarea/Textarea';
+export { Text } from './Text/Text';
+export { Modal } from './Modal/Modal';
+export { Select } from './Select/Select';
+export { DatePicker } from './DatePicker/DatePicker';
+export { DateRangePicker } from './DateRangePicker/DateRangePicker';
+export { InputPhone } from './InputPhone/InputPhone';
+export { InputNumber } from './InputNumber/InputNumber';
+export { Toggle } from './Toggle/Toggle';
+export { Pagination } from './Pagination/Pagination';
+export { Carousel } from './Carousel/Carousel';
+export { TimePicker } from './TimePicker/TimePicker';
+export { DateTimePicker } from './DateTimePicker/DateTimePicker';
+export { Tooltip } from './Tooltip/Tooltip';
+export { Notice } from './Notice/Notice';
+export { SortableList } from './SortableList/SortableList';
+export * from './Icons';

package/src/stories/documentation/AboutUs.mdx

@@ -0,0 +1,21 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import stamPhoto from "../assets/Stam.jpg";
+
+<Meta title="About Stamcat" />
+
+# About Stamcat
+
+This repository's namespace - Stamcat - is named after my cat, Stam.
+
+When I chose this name, I wanted something that wasn't simply *my name*, <br />
+and I didn't want a name that implied that I'm some kind of elite developer.<br />
+I wanted something simple to celebrate all that is good, to have fun, and to enjoy what I do.
+
+Stam was the greatest thing that ever happened to me. She was the embodiment of love, 
+the vet-certified cutest kitty in the world, and she forever changed my life for the better.
+
+Though we had to say goodbye on September 9, 2025, she will always be with me in the morning sunlight,
+the sound of running water, and in the birds and squirrels outside her favorite window.
+<img src={stamPhoto} alt="Stam" />
+<blockquote>Lay down, black gives way to blue. <br /> Lay down, I'll remember you <br />- <em>J. Cantrell</em></blockquote>
+