@hamster-note/components 0.2.0

package/dist/menu-B6uuZFif.js

@@ -0,0 +1,142 @@
+/* empty css                */
+import { r as e, t } from "./popover-Qg_fA2A_.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { createPortal as s } from "react-dom";
+//#region src/components/menu/Menu.tsx
+function c({ children: e, className: t, ...r }) {
+	let i = ["hn-menu", t].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		...r,
+		className: i,
+		role: "menu",
+		children: e
+	});
+}
+function l({ children: e, className: t, shortcut: i, tone: a = "default", type: o = "button", ...s }) {
+	let c = [
+		"hn-menu__item",
+		`hn-menu__item--${a}`,
+		t
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ r("button", {
+		...s,
+		className: c,
+		role: "menuitem",
+		type: o,
+		children: [/* @__PURE__ */ n("span", {
+			className: "hn-menu__item-label",
+			children: e
+		}), i != null && i !== "" ? /* @__PURE__ */ n("span", {
+			className: "hn-menu__shortcut",
+			children: i
+		}) : null]
+	});
+}
+function u({ className: e, ...t }) {
+	let r = ["hn-menu__separator", e].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("hr", {
+		...t,
+		className: r
+	});
+}
+function d({ children: e, className: t, ...r }) {
+	let i = ["hn-menu__label", t].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		...r,
+		className: i,
+		children: e
+	});
+}
+var f = 150, p = 200;
+function m({ label: l, children: u, className: d, disabled: m = !1, "aria-label": h, ...g }) {
+	let [_, v] = o(!1), y = a(null), b = a(null), [x, S] = o(null), C = a(null), { floatingRef: w, style: T } = e({
+		anchor: _ ? x : null,
+		placement: "right-start",
+		offset: 2,
+		crossOffset: -7
+	}), E = () => {
+		y.current !== null && (clearTimeout(y.current), y.current = null);
+	}, D = (e, t) => {
+		E(), y.current = setTimeout(() => {
+			v(e), y.current = null;
+		}, t);
+	};
+	i(() => () => {
+		y.current !== null && (clearTimeout(y.current), y.current = null);
+	}, []);
+	let O = () => {
+		m || D(!0, f);
+	}, k = () => {
+		D(!1, p);
+	}, A = () => {
+		m || (E(), v((e) => !e));
+	}, j = () => {
+		let e = C.current;
+		if (e === null) return;
+		let t = e.querySelector("[role=\"menuitem\"]");
+		t === null ? e.focus() : t.focus();
+	}, M = (e) => {
+		if (!m) switch (e.key) {
+			case "ArrowRight":
+			case "Enter":
+			case " ":
+				e.preventDefault(), E(), v(!0), requestAnimationFrame(() => {
+					j();
+				});
+				break;
+		}
+	}, N = (e) => {
+		switch (e.key) {
+			case "ArrowLeft":
+			case "Escape":
+				e.preventDefault(), E(), v(!1), b.current?.focus();
+				break;
+		}
+	}, P = h ?? (typeof l == "string" ? l : void 0), F = [
+		"hn-menu__submenu",
+		_ ? "hn-menu__submenu--open" : void 0,
+		d
+	].filter(Boolean).join(" "), I = (e) => {
+		C.current = e, w.current = e;
+	}, L = (e) => {
+		b.current = e, S(e);
+	};
+	return /* @__PURE__ */ r("div", {
+		...g,
+		className: F,
+		onPointerEnter: m ? void 0 : O,
+		onPointerLeave: m ? void 0 : k,
+		children: [/* @__PURE__ */ r("button", {
+			"aria-expanded": _,
+			"aria-haspopup": "menu",
+			className: "hn-menu__item hn-menu__submenu-trigger",
+			disabled: m,
+			onClick: A,
+			onKeyDown: M,
+			ref: L,
+			role: "menuitem",
+			type: "button",
+			children: [/* @__PURE__ */ n("span", {
+				className: "hn-menu__item-label",
+				children: l
+			}), /* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "hn-menu__submenu-chevron",
+				children: "▸"
+			})]
+		}), _ ? s(/* @__PURE__ */ n("div", {
+			className: "hn-menu__submenu-panel",
+			ref: I,
+			style: T,
+			children: /* @__PURE__ */ n(t, { children: /* @__PURE__ */ n(c, {
+				"aria-label": P,
+				onKeyDown: N,
+				tabIndex: -1,
+				children: u
+			}) })
+		}), document.body) : null]
+	});
+}
+//#endregion
+export { m as a, u as i, l as n, d as r, c as t };

package/dist/menu.d.ts

@@ -0,0 +1,2 @@
+export * from './components/menu/index.js'
+export {}

package/dist/menu.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, r, t as i } from "./menu-B6uuZFif.js";
+export { i as Menu, n as MenuItem, r as MenuLabel, t as MenuSeparator, e as MenuSubmenu };

package/dist/note-card-Dm-WbNTO.js

@@ -0,0 +1,50 @@
+/* empty css                */
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/note-card/NoteCard.tsx
+function r({ excerpt: r, meta: i, title: a }) {
+	return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ n("div", {
+		className: "hn-note-card__heading",
+		children: [/* @__PURE__ */ t("h3", {
+			className: "hn-note-card__title",
+			children: a
+		}), /* @__PURE__ */ t("p", {
+			className: "hn-note-card__excerpt",
+			children: r
+		})]
+	}), /* @__PURE__ */ t("p", {
+		className: "hn-note-card__meta",
+		children: i
+	})] });
+}
+function i({ className: e, excerpt: i, meta: a, onClick: o, selected: s = !1, title: c, ...l }) {
+	let u = [
+		"hn-note-card",
+		s ? "hn-note-card--selected" : void 0,
+		e
+	].filter(Boolean).join(" ");
+	return o === void 0 ? /* @__PURE__ */ t("article", {
+		className: u,
+		...l,
+		children: /* @__PURE__ */ t(r, {
+			excerpt: i,
+			meta: a,
+			title: c
+		})
+	}) : /* @__PURE__ */ n("article", {
+		className: `${u} hn-note-card--interactive`,
+		...l,
+		children: [/* @__PURE__ */ t("button", {
+			"aria-label": c,
+			"aria-pressed": s,
+			className: "hn-note-card__action",
+			onClick: o,
+			type: "button"
+		}), /* @__PURE__ */ t(r, {
+			excerpt: i,
+			meta: a,
+			title: c
+		})]
+	});
+}
+//#endregion
+export { i as t };

package/dist/note-card.d.ts

@@ -0,0 +1,2 @@
+export * from './components/note-card/index.js'
+export {}

package/dist/note-card.js

@@ -0,0 +1,2 @@
+import { t as e } from "./note-card-Dm-WbNTO.js";
+export { e as NoteCard };

package/dist/popover-Qg_fA2A_.js

@@ -0,0 +1,165 @@
+/* empty css                */
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as t, useContext as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
+import { createPortal as o } from "react-dom";
+//#region src/components/popover/use-anchor-position.ts
+var s = {
+	position: "fixed",
+	top: 0,
+	left: 0,
+	visibility: "hidden"
+}, c = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+function l(e) {
+	let [t, n] = e.split("-");
+	return {
+		side: t,
+		align: n
+	};
+}
+function u(e, t, n, r, i, a, o) {
+	let s = window.innerWidth, u = window.innerHeight, { side: d, align: f } = l(r), p = (r) => {
+		switch (r) {
+			case "bottom": return e.bottom + i + n > u - o;
+			case "top": return e.top - i - n < o;
+			case "right": return e.right + i + t > s - o;
+			case "left": return e.left - i - t < o;
+		}
+	}, m = d;
+	if (p(d)) {
+		let e = c[d];
+		p(e) || (m = e);
+	}
+	let h = 0, g = 0;
+	switch (m) {
+		case "bottom":
+			h = e.bottom + i;
+			break;
+		case "top":
+			h = e.top - i - n;
+			break;
+		case "right":
+			g = e.right + i;
+			break;
+		case "left":
+			g = e.left - i - t;
+			break;
+	}
+	return m === "top" || m === "bottom" ? (g = f === "start" ? e.left : e.right - t, g += a) : (h = f === "start" ? e.top : e.bottom - n, h += a), g = Math.min(Math.max(g, o), Math.max(o, s - t - o)), h = Math.min(Math.max(h, o), Math.max(o, u - n - o)), {
+		left: g,
+		top: h
+	};
+}
+function d({ anchor: e, placement: t = "bottom-start", offset: n = 6, crossOffset: o = 0, viewportMargin: c = 8 }) {
+	let l = i(null), [d, f] = a(s);
+	return r(() => {
+		if (e === null) return;
+		let r = () => {
+			let r = l.current;
+			if (r === null) return;
+			let { left: i, top: a } = u(e.getBoundingClientRect(), r.offsetWidth, r.offsetHeight, t, n, o, c);
+			f({
+				position: "fixed",
+				left: i,
+				top: a
+			});
+		};
+		r(), window.addEventListener("resize", r), window.addEventListener("scroll", r, !0);
+		let i = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => {
+			r();
+		});
+		return i?.observe(e), l.current !== null && i?.observe(l.current), () => {
+			window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0), i?.disconnect();
+		};
+	}, [
+		e,
+		t,
+		n,
+		o,
+		c
+	]), {
+		floatingRef: l,
+		style: d
+	};
+}
+//#endregion
+//#region src/components/popover/Popover.tsx
+var f = t(null);
+function p(e) {
+	return e === "vertical" ? "horizontal" : "vertical";
+}
+function m(e, t) {
+	if (e === void 0) return {};
+	switch (e) {
+		case "top": return {
+			position: "fixed",
+			top: t,
+			left: "50%",
+			transform: "translateX(-50%)"
+		};
+		case "bottom": return {
+			position: "fixed",
+			bottom: t,
+			left: "50%",
+			transform: "translateX(-50%)"
+		};
+		case "left": return {
+			position: "fixed",
+			left: t,
+			top: "50%",
+			transform: "translateY(-50%)"
+		};
+		case "right": return {
+			position: "fixed",
+			right: t,
+			top: "50%",
+			transform: "translateY(-50%)"
+		};
+	}
+}
+function h({ children: t, className: n, theme: r = "dark", orientation: i = "horizontal", edge: a, edgeOffset: s = 16, anchor: c = null, placement: l = "bottom-start", anchorOffset: u = 6, viewportMargin: p = 8, ref: h, style: g, ..._ }) {
+	let v = c !== null, { floatingRef: y, style: b } = d({
+		anchor: c,
+		placement: l,
+		offset: u,
+		viewportMargin: p
+	}), x = [
+		"hn-popover",
+		v ? "hn-popover--floating" : void 0,
+		n
+	].filter(Boolean).join(" "), S = v ? {
+		...b,
+		...g
+	} : {
+		...m(a, s),
+		...g
+	}, C = (e) => {
+		y.current = e, typeof h == "function" ? h(e) : h != null && (h.current = e);
+	}, w = /* @__PURE__ */ e(f.Provider, {
+		value: i,
+		children: /* @__PURE__ */ e("div", {
+			..._,
+			className: x,
+			"data-theme": r,
+			"data-orientation": i,
+			ref: C,
+			style: S,
+			children: t
+		})
+	});
+	return v && typeof document < "u" ? o(w, document.body) : w;
+}
+function g({ className: t, ...r }) {
+	let i = ["hn-popover__separator", t].filter(Boolean).join(" "), a = n(f);
+	return /* @__PURE__ */ e("hr", {
+		...r,
+		"aria-orientation": p(a),
+		className: i
+	});
+}
+//#endregion
+export { g as n, d as r, h as t };

package/dist/popover.d.ts

@@ -0,0 +1,2 @@
+export * from './components/popover/index.js'
+export {}

package/dist/popover.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./popover-Qg_fA2A_.js";
+export { t as Popover, e as PopoverSeparator };

package/dist/text-field-B8Scu04G.js

@@ -0,0 +1,31 @@
+/* empty css                */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useId as n } from "react";
+//#region src/components/text-field/TextField.tsx
+function r({ "aria-describedby": r, error: i, hint: a, id: o, label: s, ...c }) {
+	let l = n(), u = o ?? l, d = i ?? a, f = d === void 0 ? void 0 : `${u}-message`, p = [r, f].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ t("div", {
+		className: i === void 0 ? "hn-text-field" : "hn-text-field hn-text-field--invalid",
+		children: [
+			/* @__PURE__ */ e("label", {
+				className: "hn-text-field__label",
+				htmlFor: u,
+				children: s
+			}),
+			/* @__PURE__ */ e("input", {
+				"aria-describedby": p,
+				"aria-invalid": i !== void 0 || void 0,
+				className: "hn-text-field__control",
+				id: u,
+				...c
+			}),
+			d === void 0 ? null : /* @__PURE__ */ e("p", {
+				className: "hn-text-field__message",
+				id: f,
+				children: d
+			})
+		]
+	});
+}
+//#endregion
+export { r as t };

package/dist/text-field.d.ts

@@ -0,0 +1,2 @@
+export * from './components/text-field/index.js'
+export {}

package/dist/text-field.js

@@ -0,0 +1,2 @@
+import { t as e } from "./text-field-B8Scu04G.js";
+export { e as TextField };

package/dist/theme-C0p_hpKk.js

@@ -0,0 +1,67 @@
+/* empty css                */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/theme/theme.ts
+var t = {
+	violet: {
+		accent: "#7c83ff",
+		accentHover: "#9197ff",
+		focusRingColor: "rgb(145 151 255 / 42%)"
+	},
+	blue: {
+		accent: "#60a5fa",
+		accentHover: "#7db6fb",
+		focusRingColor: "rgb(96 165 250 / 42%)"
+	},
+	teal: {
+		accent: "#2dd4bf",
+		accentHover: "#4fdcc9",
+		focusRingColor: "rgb(45 212 191 / 42%)"
+	},
+	orange: {
+		accent: "#fb923c",
+		accentHover: "#fca45c",
+		focusRingColor: "rgb(251 146 60 / 42%)"
+	},
+	pink: {
+		accent: "#f472b6",
+		accentHover: "#f68cc4",
+		focusRingColor: "rgb(244 114 182 / 42%)"
+	}
+};
+function n(e) {
+	return e in t;
+}
+//#endregion
+//#region src/components/theme/ThemeProvider.tsx
+function r(e) {
+	if (n(e)) {
+		let n = t[e];
+		return {
+			dataAccent: e,
+			style: {
+				"--hn-color-accent": n.accent,
+				"--hn-color-accent-hover": n.accentHover,
+				"--hn-focus-ring": `0 0 0 3px ${n.focusRingColor}`
+			}
+		};
+	}
+	return {
+		dataAccent: "custom",
+		style: { "--hn-color-accent": e }
+	};
+}
+function i({ accent: t = "violet", children: n, className: i, mode: a = "dark", style: o }) {
+	let { dataAccent: s, style: c } = r(t);
+	return /* @__PURE__ */ e("div", {
+		className: ["hn-theme", i].filter(Boolean).join(" "),
+		"data-accent": s,
+		"data-mode": a,
+		style: {
+			...c,
+			...o
+		},
+		children: n
+	});
+}
+//#endregion
+export { t as n, n as r, i as t };

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+export * from './components/theme/index.js'
+export {}

package/dist/theme.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./theme-C0p_hpKk.js";
+export { e as THEME_ACCENTS, n as ThemeProvider, t as isThemeAccentPreset };

package/dist/use-modal-K9L8aPS0.js

@@ -0,0 +1,82 @@
+import { useEffect as e, useId as t, useLayoutEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+//#region src/components/dialog/use-modal.ts
+function o(e) {
+	return !(e.getAttribute("aria-hidden") === "true" || e.hasAttribute("hidden"));
+}
+function s(e) {
+	return Array.from(e.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), textarea:not([disabled]), select:not([disabled]), [tabindex]")).filter((e) => o(e));
+}
+function c({ open: o, onClose: c, closeOnEsc: l = !0, closeOnBackdrop: u = !0, exitDuration: d = 180 }) {
+	let [f, p] = a("closed"), m = i(null), h = i(null), g = i(null), _ = i(""), v = i(!1), y = t(), b = t(), x = r(() => o ? f === "closed" || f === "leaving" ? "entering" : f : f === "entering" || f === "open" ? "leaving" : f, [o, f]);
+	e(() => {
+		if (x !== "entering") return;
+		let e = setTimeout(() => {
+			p("open");
+		}, 180);
+		return () => {
+			clearTimeout(e);
+		};
+	}, [x]), e(() => {
+		if (x !== "leaving") return;
+		let e = setTimeout(() => {
+			p("closed");
+		}, d);
+		return () => {
+			clearTimeout(e);
+		};
+	}, [x, d]), e(() => {
+		if (x !== "entering" && x !== "closed") return;
+		if (x === "entering") {
+			let e = document.activeElement;
+			e instanceof HTMLElement && (g.current = e), v.current ||= (_.current = document.body.style.overflow, document.body.style.overflow = "hidden", !0);
+			let t = requestAnimationFrame(() => {
+				let e = m.current;
+				if (e === null) return;
+				let t = s(e);
+				t.length > 0 ? t[0]?.focus() : e.focus();
+			});
+			return () => {
+				cancelAnimationFrame(t);
+			};
+		}
+		let e = g.current;
+		e !== null && (document.contains(e) && e.focus(), g.current = null), v.current &&= (document.body.style.overflow = _.current, _.current = "", !1);
+	}, [x]), e(() => () => {
+		v.current &&= (document.body.style.overflow = _.current, _.current = "", !1);
+	}, []);
+	let S = i(l), C = i(u), w = i(c);
+	return n(() => {
+		S.current = l, C.current = u, w.current = c;
+	}), {
+		phase: x,
+		mounted: x !== "closed",
+		dataState: x === "leaving" ? "exit" : x === "entering" || x === "open" ? "enter" : void 0,
+		panelRef: m,
+		backdropRef: h,
+		titleId: y,
+		descriptionId: b,
+		handlePanelKeyDown: (e) => {
+			if (S.current && e.key === "Escape") {
+				e.preventDefault(), w.current();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = m.current;
+			if (t === null) return;
+			let n = s(t);
+			if (n.length === 0) {
+				e.preventDefault(), t.focus();
+				return;
+			}
+			let r = n[0], i = n[n.length - 1];
+			if (r === void 0 || i === void 0) return;
+			let a = document.activeElement;
+			e.shiftKey ? (a === r || a === t || !t.contains(a)) && (e.preventDefault(), i.focus()) : (a === i || !t.contains(a)) && (e.preventDefault(), r.focus());
+		},
+		handleBackdropPointerDown: (e) => {
+			C.current && e.target === h.current && w.current();
+		}
+	};
+}
+//#endregion
+export { c as t };

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@hamster-note/components",
+  "version": "0.2.0",
+  "description": "Reusable React components for HamsterNote products.",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./icon": {
+      "types": "./dist/icon.d.ts",
+      "import": "./dist/icon.js"
+    },
+    "./badge": {
+      "types": "./dist/badge.d.ts",
+      "import": "./dist/badge.js"
+    },
+    "./confirm": {
+      "types": "./dist/confirm.d.ts",
+      "import": "./dist/confirm.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog.d.ts",
+      "import": "./dist/dialog.js"
+    },
+    "./drawer": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.js"
+    },
+    "./kbd": {
+      "types": "./dist/kbd.d.ts",
+      "import": "./dist/kbd.js"
+    },
+    "./loading": {
+      "types": "./dist/loading.d.ts",
+      "import": "./dist/loading.js"
+    },
+    "./menu": {
+      "types": "./dist/menu.d.ts",
+      "import": "./dist/menu.js"
+    },
+    "./note-card": {
+      "types": "./dist/note-card.d.ts",
+      "import": "./dist/note-card.js"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js"
+    },
+    "./text-field": {
+      "types": "./dist/text-field.d.ts",
+      "import": "./dist/text-field.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./styles.css": "./dist/hamster-note-components.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "yarn typecheck && vite build --config vite.lib.config.ts",
+    "build:demo": "yarn typecheck && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 9810 --strictPort",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --max-warnings 0",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "yarn typecheck && yarn lint && yarn format:check"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.0.3",
+    "eslint": "10.7.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-react-refresh": "0.5.3",
+    "globals": "17.7.0",
+    "prettier": "3.9.5",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.64.0",
+    "vite": "8.1.5",
+    "vite-plugin-dts": "5.0.3"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "packageManager": "yarn@1.22.22"
+}