@hamster-note/components 0.2.0

package/dist/components/icon/index.d.ts

@@ -0,0 +1,4 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+export { ICON_NAMES } from './icon-names';
+export type { IconName } from './icon-names';

package/dist/components/kbd/Kbd.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+    readonly children?: ReactNode;
+    readonly keys?: readonly string[];
+}
+export declare function Kbd({ children, className, keys, ...props }: KbdProps): import("react").JSX.Element;

package/dist/components/kbd/index.d.ts

@@ -0,0 +1,2 @@
+export { Kbd } from './Kbd';
+export type { KbdProps } from './Kbd';

package/dist/components/loading/Loading.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+export type LoadingSize = 'small' | 'medium' | 'large';
+export interface LoadingOptions {
+    readonly text?: string | undefined;
+    readonly size?: LoadingSize | undefined;
+}
+export interface LoadingProps extends HTMLAttributes<HTMLDivElement> {
+    readonly size?: LoadingSize | undefined;
+    readonly text?: string | undefined;
+    readonly cover?: boolean | undefined;
+}
+export declare function Loading({ size, text, cover, className, children, ...props }: LoadingProps): import("react").JSX.Element;

package/dist/components/loading/index.d.ts

@@ -0,0 +1,3 @@
+export { Loading } from './Loading';
+export type { LoadingOptions, LoadingProps, LoadingSize } from './Loading';
+export { hideLoading, showLoading } from './loading';

package/dist/components/loading/loading.d.ts

@@ -0,0 +1,3 @@
+import { LoadingOptions } from './Loading';
+export declare function showLoading(options?: LoadingOptions): () => void;
+export declare function hideLoading(): void;

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,25 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type MenuItemTone = 'default' | 'danger';
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    readonly children: ReactNode;
+}
+export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly children: ReactNode;
+    readonly tone?: MenuItemTone;
+    readonly shortcut?: ReactNode;
+}
+export type MenuSeparatorProps = Omit<HTMLAttributes<HTMLHRElement>, 'children'>;
+export interface MenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+    readonly children: ReactNode;
+}
+export interface MenuSubmenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    readonly label: ReactNode;
+    readonly children: ReactNode;
+    readonly 'aria-label'?: string;
+    readonly disabled?: boolean;
+}
+export declare function Menu({ children, className, ...props }: MenuProps): import("react").JSX.Element;
+export declare function MenuItem({ children, className, shortcut, tone, type, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuSeparator({ className, ...props }: MenuSeparatorProps): import("react").JSX.Element;
+export declare function MenuLabel({ children, className, ...props }: MenuLabelProps): import("react").JSX.Element;
+export declare function MenuSubmenu({ label, children, className, disabled, 'aria-label': ariaLabel, ...props }: MenuSubmenuProps): import("react").JSX.Element;

package/dist/components/menu/index.d.ts

@@ -0,0 +1,2 @@
+export type { MenuItemProps, MenuItemTone, MenuLabelProps, MenuProps, MenuSeparatorProps, MenuSubmenuProps, } from './Menu';
+export { Menu, MenuItem, MenuLabel, MenuSeparator, MenuSubmenu } from './Menu';

package/dist/components/note-card/NoteCard.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes, MouseEventHandler } from 'react';
+export interface NoteCardProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'title'> {
+    readonly excerpt: string;
+    readonly meta: string;
+    readonly onClick?: MouseEventHandler<HTMLButtonElement>;
+    readonly selected?: boolean;
+    readonly title: string;
+}
+export declare function NoteCard({ className, excerpt, meta, onClick, selected, title, ...props }: NoteCardProps): import("react").JSX.Element;

package/dist/components/note-card/index.d.ts

@@ -0,0 +1,2 @@
+export { NoteCard } from './NoteCard';
+export type { NoteCardProps } from './NoteCard';

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+import { FloatingPlacement } from './use-anchor-position';
+export type PopoverTheme = 'dark' | 'light';
+export type PopoverOrientation = 'horizontal' | 'vertical';
+export type PopoverEdge = 'top' | 'bottom' | 'left' | 'right';
+export type PopoverPlacement = FloatingPlacement;
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+    readonly children: ReactNode;
+    readonly theme?: PopoverTheme;
+    readonly orientation?: PopoverOrientation;
+    readonly edge?: PopoverEdge;
+    readonly edgeOffset?: number;
+    readonly anchor?: HTMLElement | null;
+    readonly placement?: PopoverPlacement;
+    readonly anchorOffset?: number;
+    readonly viewportMargin?: number;
+    readonly ref?: Ref<HTMLDivElement>;
+}
+export type PopoverSeparatorProps = Omit<HTMLAttributes<HTMLHRElement>, 'aria-orientation' | 'children' | 'role'>;
+export declare function Popover({ children, className, theme, orientation, edge, edgeOffset, anchor, placement, anchorOffset, viewportMargin, ref, style, ...props }: PopoverProps): import("react").JSX.Element;
+export declare function PopoverSeparator({ className, ...props }: PopoverSeparatorProps): import("react").JSX.Element;

package/dist/components/popover/index.d.ts

@@ -0,0 +1,2 @@
+export type { PopoverEdge, PopoverOrientation, PopoverPlacement, PopoverProps, PopoverSeparatorProps, PopoverTheme, } from './Popover';
+export { Popover, PopoverSeparator } from './Popover';

package/dist/components/popover/use-anchor-position.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, RefObject } from 'react';
+export type FloatingPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'right-start';
+export interface UseAnchorPositionOptions {
+    readonly anchor: HTMLElement | null;
+    readonly placement?: FloatingPlacement;
+    readonly offset?: number;
+    readonly crossOffset?: number;
+    readonly viewportMargin?: number;
+}
+export interface UseAnchorPositionResult {
+    readonly floatingRef: RefObject<HTMLDivElement | null>;
+    readonly style: CSSProperties;
+}
+export declare function useAnchorPosition({ anchor, placement, offset, crossOffset, viewportMargin, }: UseAnchorPositionOptions): UseAnchorPositionResult;

package/dist/components/text-field/TextField.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from 'react';
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    readonly error?: string;
+    readonly hint?: string;
+    readonly label: string;
+}
+export declare function TextField({ 'aria-describedby': ariaDescribedBy, error, hint, id, label, ...props }: TextFieldProps): import("react").JSX.Element;

package/dist/components/text-field/index.d.ts

@@ -0,0 +1,2 @@
+export { TextField } from './TextField';
+export type { TextFieldProps } from './TextField';

package/dist/components/theme/ThemeProvider.d.ts

@@ -0,0 +1,77 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ThemeAccent, ThemeMode } from './theme';
+/**
+ * ThemeProvider 的 props。
+ */
+export interface ThemeProviderProps {
+    /**
+     * 主题色 accent。两种来源：
+     *  - 预设名（`violet` / `blue` / `teal` / `orange` / `pink`）：从
+     *    THEME_ACCENTS 读取精确的 accent / accentHover / focusRing 三件套
+     *    内联下发，保证与 TS 配置完全一致；
+     *  - 任意 CSS 颜色字符串（如 `#ff8a3d` / `oklch(...)`）：只下发
+     *    `--hn-color-accent`，hover 与 focusRing 由 theme.css 的
+     *    `[data-accent='custom']` 规则用 color-mix 实时派生。
+     *
+     * 默认 `violet`，与 tokens.css 的默认值一致，不传时视觉无变化。
+     *
+     * 与 `mode` 正交：accent 影响 `--hn-color-accent` 三件套，mode 影响全套
+     * 表面/文字/边框 token，两个轴独立组合。
+     */
+    readonly accent?: ThemeAccent;
+    readonly children: ReactNode;
+    /** 追加到根 div 的 className，便于使用方做布局或测试钩子。 */
+    readonly className?: string;
+    /**
+     * 明暗模式：`'dark'`（默认）或 `'light'`。
+     *
+     * 始终写入根 div 的 `data-mode` 属性（即便用默认值），让 theme.css 的
+     * `.hn-theme[data-mode='dark']` / `.hn-theme[data-mode='light']` 规则都能
+     * 命中，保证嵌套场景下内层 Provider 的 mode 可以预测地覆盖外层（例如
+     * light 内嵌套 dark 时，内层显式 data-mode='dark' 会强制把 token 拉回深色）。
+     *
+     * 与 `accent` 正交：mode 重定义 `--hn-color-surface` / `--hn-color-text` /
+     * `--hn-color-border` 等全套表面与文字 token，accent 只影响 accent 三件套。
+     * 两个轴在同一包裹层上共存（`data-mode` + `data-accent` + 内联 accent style）。
+     *
+     * 实际 token 覆盖值定义在 theme.css 中，ThemeProvider 只负责把 mode 透传到
+     * `data-mode` 属性，CSS 级联完成其余工作。
+     */
+    readonly mode?: ThemeMode;
+    /** 追加到根 div 的 style，合并时排在 ThemeProvider 内联 style 之后，可覆盖主题变量。 */
+    readonly style?: CSSProperties;
+}
+/**
+ * 主题 Provider：包裹子树即可切换 accent 主色与明暗模式。
+ *
+ * 实现：渲染一个 `<div class="hn-theme" data-accent="..." data-mode="..." style="...">`
+ * 包裹层，在内联 style 上重定义 `--hn-color-accent` / `--hn-color-accent-hover` /
+ * `--hn-focus-ring` 三个 accent token，同时通过 `data-mode` 属性让 theme.css 的
+ * `.hn-theme[data-mode='dark']` / `.hn-theme[data-mode='light']` 规则重定义全套
+ * 表面与文字 token（surface/text/border 等）。由于 CSS 自定义属性天然经级联
+ * 继承，子树所有组件无需任何改动即可吃到新主题 -- 这是本库「组件只引用全局
+ * token、主题靠包裹层覆盖 token」哲学的直接应用（与 Popover 的 dark/light
+ * 同范式）。
+ *
+ * 两个正交轴：
+ *  - accent（主色）：影响 Button primary、TextField 焦点边框、NoteCard/Menu/
+ *    Dialog/Drawer 焦点环、Loading 颜色等 accent 相关组件；
+ *  - mode（明暗）：影响所有引用 surface/text/border token 的组件的背景与文字。
+ *  两个轴独立组合，例如 `<ThemeProvider mode="light" accent="blue">`。
+ *
+ * `.hn-theme` 用 `display: contents` 让包裹 div 在盒模型上消失，不额外产生
+ * 一层盒子、不打断外层 flex/grid 布局，因此不要在它上面设置背景/圆角等视觉样式
+ * -- 页面级的 `background: var(--hn-color-surface)` 应由使用方在 app 根上应用。
+ *
+ * 支持嵌套：内层 ThemeProvider 经级联自然覆盖外层，最内层的 accent 与 mode 同时生效。
+ * 例如：
+ * ```tsx
+ * <ThemeProvider mode="light" accent="blue">
+ *   <ThemeProvider mode="dark" accent="teal">
+ *     <Button variant="primary">我是 teal + 深色背景</Button>
+ *   </ThemeProvider>
+ *   <Button variant="primary">我是 blue + 浅色背景</Button>
+ * </ThemeProvider>
+ * ```
+ */
+export declare function ThemeProvider({ accent, children, className, mode, style, }: ThemeProviderProps): import("react").JSX.Element;

package/dist/components/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+export { THEME_ACCENTS, isThemeAccentPreset } from './theme';
+export type { ThemeAccent, ThemeAccentPreset, ThemeMode } from './theme';

package/dist/components/theme/theme.d.ts

@@ -0,0 +1,87 @@
+/**
+ * 主题色配置（accent 主色）。
+ *
+ * 设计哲学：组件库所有组件只引用全局 token（见 tokens.css 的 :root），
+ * 主题切换通过在包裹层重定义同名 token、经 CSS 级联让子树自动继承
+ * （Popover 的 dark/light 即是这一范式）。本文件是 accent 主题色的
+ * 唯一数据源：ThemeProvider 读取这里的预设值，内联下发到包裹 div 的
+ * style 上，子树所有组件经 var(--hn-color-accent) 等拿到新色值。
+ *
+ * 预设色刻意避开既有语义色（danger #fb7185 / success #4ade80 /
+ * warning #fbbf24），避免主题色与语义色产生视觉冲突。
+ */
+/**
+ * 预设主题色表。
+ *
+ * 每个预设包含三个字段，分别对应 tokens.css 中被 accent 影响的三个 token：
+ * - accent：主色，映射到 --hn-color-accent
+ * - accentHover：hover 态色，映射到 --hn-color-accent-hover
+ * - focusRingColor：焦点环颜色（不含 box-shadow 前缀，仅颜色部分），
+ *   ThemeProvider 会拼成 `0 0 0 3px ${focusRingColor}` 写入 --hn-focus-ring
+ *
+ * `violet` 与 tokens.css 的默认值完全一致，作为 ThemeProvider 的默认预设，
+ * 保证不传 accent 时视觉与未包裹 ThemeProvider 时完全等价（零 Breaking Change）。
+ */
+export declare const THEME_ACCENTS: {
+    readonly violet: {
+        readonly accent: "#7c83ff";
+        readonly accentHover: "#9197ff";
+        readonly focusRingColor: "rgb(145 151 255 / 42%)";
+    };
+    readonly blue: {
+        readonly accent: "#60a5fa";
+        readonly accentHover: "#7db6fb";
+        readonly focusRingColor: "rgb(96 165 250 / 42%)";
+    };
+    readonly teal: {
+        readonly accent: "#2dd4bf";
+        readonly accentHover: "#4fdcc9";
+        readonly focusRingColor: "rgb(45 212 191 / 42%)";
+    };
+    readonly orange: {
+        readonly accent: "#fb923c";
+        readonly accentHover: "#fca45c";
+        readonly focusRingColor: "rgb(251 146 60 / 42%)";
+    };
+    readonly pink: {
+        readonly accent: "#f472b6";
+        readonly accentHover: "#f68cc4";
+        readonly focusRingColor: "rgb(244 114 182 / 42%)";
+    };
+};
+/**
+ * 预设主题色名：`violet` | `blue` | `teal` | `orange` | `pink`。
+ */
+export type ThemeAccentPreset = keyof typeof THEME_ACCENTS;
+/**
+ * 主题色入参类型。
+ *
+ * 用 `ThemeAccentPreset | (string & {})` 的交叉技巧保留两个能力：
+ * 1. 传入预设名时获得自动补全（IDE 列出五个预设）；
+ * 2. 传入任意 CSS 颜色字符串时仍类型合法（`(string & {})` 让 TS 不会
+ *    把 string 收窄成字面量联合，避免「自定义颜色」用法被类型拒绝）。
+ */
+export type ThemeAccent = ThemeAccentPreset | (string & {});
+/**
+ * 判断字符串是否是预设主题色名。
+ *
+ * 用于 Demo 或使用方在拿到一个 accent 字符串时区分「预设」与「自定义」
+ * 两种来源：预设走 ThemeProvider 内联下发的精确派生值，自定义走
+ * theme.css 中 `[data-accent='custom']` 的 color-mix 派生。
+ */
+export declare function isThemeAccentPreset(value: string): value is ThemeAccentPreset;
+/**
+ * 明暗模式。
+ *
+ * 与 accent 主题色正交：accent 重定义 `--hn-color-accent` 等 accent 三件套，
+ * mode 重定义 `--hn-color-surface` / `--hn-color-text` / `--hn-color-border`
+ * 等全套表面与文字 token。两个轴独立组合，例如可以同时「浅色背景 + 蓝色 accent」。
+ *
+ * - `dark`（默认）：与 tokens.css 的 :root 默认值一致，不传时视觉无变化；
+ * - `light`：重定义全套表面/文字/边框 token 为浅色配色。
+ *
+ * 实际的 token 覆盖值定义在 theme.css 的 `.hn-theme[data-mode='light']` 与
+ * `.hn-theme[data-mode='dark']` 规则中，ThemeProvider 只负责把 mode 写到
+ * 根 div 的 `data-mode` 属性上，CSS 级联完成其余工作。
+ */
+export type ThemeMode = 'dark' | 'light';

package/dist/confirm-3eBmopl8.js

@@ -0,0 +1,109 @@
+/* empty css                */
+import { t as e } from "./button-DRz0VTkf.js";
+import { t } from "./dialog-B4xS5zlK.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createContext as i, createElement as a, useCallback as o, useContext as s, useMemo as c, useState as l } from "react";
+import { createRoot as u } from "react-dom/client";
+//#region src/components/confirm/Confirm.tsx
+var d = i(null);
+function f({ open: i, title: a, description: o, confirmText: s = "确认", cancelText: c = "取消", tone: l = "default", loading: u = !1, onConfirm: d, onCancel: f, closeOnEsc: p = !0, closeOnBackdrop: m = !0 }) {
+	let h = () => {
+		f();
+	};
+	return /* @__PURE__ */ n(t, {
+		closeOnBackdrop: m,
+		closeOnEsc: p,
+		description: o,
+		onClose: h,
+		open: i,
+		title: a,
+		children: /* @__PURE__ */ r("div", {
+			className: "hn-confirm__footer",
+			"data-tone": l,
+			children: [/* @__PURE__ */ n(e, {
+				disabled: u,
+				onClick: h,
+				type: "button",
+				variant: "ghost",
+				children: c
+			}), /* @__PURE__ */ n(e, {
+				disabled: u,
+				onClick: () => {
+					d();
+				},
+				type: "button",
+				variant: "primary",
+				children: u ? "处理中…" : s
+			})]
+		})
+	});
+}
+function p({ children: e }) {
+	let [t, i] = l(null), a = o((e) => new Promise((t) => {
+		i((n) => (n !== null && n.resolve(!1), {
+			options: e,
+			resolve: t
+		}));
+	}), []), s = () => {
+		i((e) => (e !== null && e.resolve(!0), null));
+	}, u = () => {
+		i((e) => (e !== null && e.resolve(!1), null));
+	}, p = c(() => ({ confirm: a }), [a]);
+	return /* @__PURE__ */ r(d.Provider, {
+		value: p,
+		children: [e, t === null ? null : /* @__PURE__ */ n(f, {
+			closeOnBackdrop: t.options.closeOnBackdrop,
+			closeOnEsc: t.options.closeOnEsc,
+			confirmText: t.options.confirmText,
+			cancelText: t.options.cancelText,
+			description: t.options.description,
+			loading: t.options.loading,
+			onConfirm: s,
+			onCancel: u,
+			open: !0,
+			title: t.options.title,
+			tone: t.options.tone
+		})]
+	});
+}
+function m() {
+	let e = s(d);
+	if (e === null) throw Error("useConfirm 必须在 <ConfirmProvider> 内部调用；在组件树顶层包裹 ConfirmProvider 后再使用。");
+	return e.confirm;
+}
+//#endregion
+//#region src/components/confirm/confirm.ts
+function h(e) {
+	if (typeof document > "u") return console.warn("[hamster-note/components] confirm() 在非浏览器环境（无 document）下被调用，已直接 resolve(false)。请在客户端副作用中调用，或改用 <Confirm> 组件 / useConfirm() hook。"), Promise.resolve(!1);
+	let t = document.createElement("div");
+	document.body.appendChild(t);
+	let n = u(t), r = () => {
+		n.unmount(), Promise.resolve().then(() => {
+			t.parentNode !== null && t.parentNode.removeChild(t);
+		});
+	};
+	return new Promise((t) => {
+		let i = (e) => {
+			t(e), r();
+		};
+		n.render(a(f, {
+			open: !0,
+			title: e.title,
+			description: e.description,
+			confirmText: e.confirmText,
+			cancelText: e.cancelText,
+			tone: e.tone,
+			loading: e.loading,
+			closeOnEsc: e.closeOnEsc,
+			closeOnBackdrop: e.closeOnBackdrop,
+			onConfirm: () => {
+				i(!0);
+			},
+			onCancel: () => {
+				i(!1);
+			}
+		}));
+	});
+}
+//#endregion
+export { m as i, f as n, p as r, h as t };

package/dist/confirm.d.ts

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

package/dist/confirm.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./confirm-3eBmopl8.js";
+export { t as Confirm, n as ConfirmProvider, r as confirm, r as confirmDialog, e as useConfirm };

package/dist/dialog-B4xS5zlK.js

@@ -0,0 +1,53 @@
+/* empty css                */
+import { t as e } from "./use-modal-K9L8aPS0.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createPortal as i } from "react-dom";
+//#region src/components/dialog/Dialog.tsx
+function a({ children: a, className: o, title: s, description: c, open: l, onClose: u, closeOnEsc: d = !0, closeOnBackdrop: f = !0, ref: p, style: m, ...h }) {
+	let { dataState: g, mounted: _, backdropRef: v, panelRef: y, titleId: b, descriptionId: x, handlePanelKeyDown: S, handleBackdropPointerDown: C } = e({
+		open: l,
+		onClose: u,
+		closeOnEsc: d,
+		closeOnBackdrop: f
+	});
+	if (!_ || typeof document > "u") return null;
+	let w = ["hn-dialog__panel", o].filter(Boolean).join(" "), T = s === void 0 ? void 0 : b, E = c === void 0 ? void 0 : x, D = (e) => {
+		y.current = e, typeof p == "function" ? p(e) : p != null && (p.current = e);
+	};
+	return i(/* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("div", {
+		className: "hn-dialog__backdrop",
+		"data-state": g,
+		onPointerDown: C,
+		ref: v
+	}), /* @__PURE__ */ r("div", {
+		...h,
+		"aria-describedby": E,
+		"aria-labelledby": T,
+		"aria-modal": "true",
+		className: w,
+		"data-state": g,
+		onKeyDown: S,
+		ref: D,
+		role: "dialog",
+		style: m,
+		tabIndex: -1,
+		children: [
+			s === void 0 ? null : /* @__PURE__ */ n("h2", {
+				className: "hn-dialog__title",
+				id: b,
+				children: s
+			}),
+			c === void 0 ? null : /* @__PURE__ */ n("p", {
+				className: "hn-dialog__description",
+				id: x,
+				children: c
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "hn-dialog__content",
+				children: a
+			})
+		]
+	})] }), document.body);
+}
+//#endregion
+export { a as t };

package/dist/dialog.d.ts

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

package/dist/dialog.js

@@ -0,0 +1,2 @@
+import { t as e } from "./dialog-B4xS5zlK.js";
+export { e as Dialog };

package/dist/drawer-DoeuGAHD.js

@@ -0,0 +1,60 @@
+/* empty css                */
+import { t as e } from "./use-modal-K9L8aPS0.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createPortal as i } from "react-dom";
+//#region src/components/drawer/Drawer.tsx
+function a({ children: a, className: o, title: s, description: c, open: l, onClose: u, placement: d = "right", size: f, closeOnEsc: p = !0, closeOnBackdrop: m = !0, ref: h, style: g, ..._ }) {
+	let { dataState: v, mounted: y, backdropRef: b, panelRef: x, titleId: S, descriptionId: C, handlePanelKeyDown: w, handleBackdropPointerDown: T } = e({
+		open: l,
+		onClose: u,
+		closeOnEsc: p,
+		closeOnBackdrop: m
+	});
+	if (!y || typeof document > "u") return null;
+	let E = [
+		"hn-drawer__panel",
+		`hn-drawer__panel--${d}`,
+		o
+	].filter(Boolean).join(" "), D = {
+		...f === void 0 ? {} : { "--hn-drawer-size": `${String(f)}px` },
+		...g
+	}, O = s === void 0 ? void 0 : S, k = c === void 0 ? void 0 : C, A = (e) => {
+		x.current = e, typeof h == "function" ? h(e) : h != null && (h.current = e);
+	};
+	return i(/* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("div", {
+		className: "hn-drawer__backdrop",
+		"data-state": v,
+		onPointerDown: T,
+		ref: b
+	}), /* @__PURE__ */ r("div", {
+		..._,
+		"aria-describedby": k,
+		"aria-labelledby": O,
+		"aria-modal": "true",
+		className: E,
+		"data-state": v,
+		onKeyDown: w,
+		ref: A,
+		role: "dialog",
+		style: D,
+		tabIndex: -1,
+		children: [
+			s === void 0 ? null : /* @__PURE__ */ n("h2", {
+				className: "hn-drawer__title",
+				id: S,
+				children: s
+			}),
+			c === void 0 ? null : /* @__PURE__ */ n("p", {
+				className: "hn-drawer__description",
+				id: C,
+				children: c
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "hn-drawer__content",
+				children: a
+			})
+		]
+	})] }), document.body);
+}
+//#endregion
+export { a as t };

package/dist/drawer.d.ts

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

package/dist/drawer.js

@@ -0,0 +1,2 @@
+import { t as e } from "./drawer-DoeuGAHD.js";
+export { e as Drawer };

package/dist/hamster-note-components.css

@@ -0,0 +1,2 @@
+@layer hamster-note.tokens{:root{--hn-color-surface:#111114;--hn-color-surface-hover:#17171b;--hn-color-text:#f4f4f5;--hn-color-text-muted:#92929d;--hn-color-border:#ffffff1a;--hn-color-border-strong:#ffffff2b;--hn-color-accent:#7c83ff;--hn-color-accent-hover:#9197ff;--hn-color-danger:#fb7185;--hn-color-success:#4ade80;--hn-color-warning:#fbbf24;--hn-font-sans:"IBM Plex Sans", "Noto Sans SC", sans-serif;--hn-font-mono:"IBM Plex Mono", monospace;--hn-radius-sm:6px;--hn-radius-md:8px;--hn-radius-lg:12px;--hn-focus-ring:0 0 0 3px #9197ff6b;--hn-transition:.14s cubic-bezier(.2, .8, .2, 1)}}@layer hamster-note.components{.hn-badge{border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-sm);min-height:22px;font-family:var(--hn-font-mono);color:var(--hn-color-text-muted);background:#ffffff0a;align-items:center;gap:6px;padding:2px 8px;font-size:11px;font-weight:550;line-height:1.2;display:inline-flex}.hn-badge:before{content:"";background:currentColor;border-radius:50%;width:5px;height:5px}.hn-badge--accent{color:#aeb2ff;background:#7c83ff1a;border-color:#7c83ff3d}.hn-badge--success{color:var(--hn-color-success);background:#4ade8017;border-color:#4ade8038}.hn-badge--warning{color:var(--hn-color-warning);background:#fbbf2417;border-color:#fbbf2438}.hn-badge--danger{color:var(--hn-color-danger);background:#fb718517;border-color:#fb718538}.hn-button{border-radius:var(--hn-radius-md);min-height:36px;font-family:var(--hn-font-sans);color:var(--hn-color-text);cursor:pointer;transition:background-color var(--hn-transition), border-color var(--hn-transition), color var(--hn-transition), opacity var(--hn-transition);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:0 14px;font-size:13px;font-weight:600;line-height:1;display:inline-flex}.hn-button:focus-visible{box-shadow:var(--hn-focus-ring);outline:none}.hn-button:disabled{cursor:not-allowed;opacity:.42}.hn-button--primary{background:var(--hn-color-accent);color:#09090b}.hn-button--primary:hover:not(:disabled){background:var(--hn-color-accent-hover)}.hn-button--secondary{border-color:var(--hn-color-border);background:var(--hn-color-surface)}.hn-button--secondary:hover:not(:disabled){border-color:var(--hn-color-border-strong);background:var(--hn-color-surface-hover)}.hn-button--ghost{color:var(--hn-color-text-muted);background:0 0}.hn-button--ghost:hover:not(:disabled){background:var(--hn-color-surface-hover);color:var(--hn-color-text)}.hn-button--small{min-height:30px;padding:0 11px;font-size:12px}.hn-button--large{min-height:42px;padding:0 18px;font-size:14px}@media (prefers-reduced-motion:reduce){.hn-button{transition-duration:.01ms}}.hn-dialog__backdrop{z-index:1100;-webkit-backdrop-filter:blur(8px);background:#00000073;transition:opacity .14s cubic-bezier(.2,.8,.2,1);position:fixed;inset:0}.hn-dialog__backdrop[data-state=enter]{opacity:1}.hn-dialog__backdrop[data-state=exit]{opacity:0}.hn-dialog__panel{z-index:1100;border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-lg);background:var(--hn-color-surface);width:auto;min-width:320px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);color:var(--hn-color-text);font-family:var(--hn-font-sans);flex-direction:column;padding:20px 24px;transition:opacity .14s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 16px 48px #00000052}.hn-dialog__panel[data-state=enter]{opacity:1;transform:translate(-50%,-50%)}.hn-dialog__panel[data-state=exit],.hn-dialog__panel{opacity:0;transform:translate(-50%,calc(8px - 50%))}.hn-dialog__panel:focus-visible{box-shadow:var(--hn-focus-ring), 0 16px 48px #00000052;outline:none}.hn-dialog__title{letter-spacing:-.01em;color:var(--hn-color-text);margin:0 0 4px;font-size:18px;font-weight:550;line-height:1.45}.hn-dialog__description{color:var(--hn-color-text-muted);margin:0;font-size:13px;line-height:1.65}.hn-dialog__content{margin-top:16px}.hn-dialog__panel:not(:has(.hn-dialog__title)) .hn-dialog__content{margin-top:0}@media (prefers-reduced-motion:reduce){.hn-dialog__backdrop,.hn-dialog__panel{transition-duration:.01ms}}.hn-confirm__footer{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.hn-confirm__footer[data-tone=danger] .hn-button--primary{background:var(--hn-color-danger);color:#09090b}.hn-confirm__footer[data-tone=danger] .hn-button--primary:hover:not(:disabled){background:color-mix(in srgb, var(--hn-color-danger) 88%, white)}.hn-drawer__backdrop{z-index:1200;-webkit-backdrop-filter:blur(8px);background:#00000073;transition:opacity .14s cubic-bezier(.2,.8,.2,1);position:fixed;inset:0}.hn-drawer__backdrop[data-state=enter]{opacity:1}.hn-drawer__backdrop[data-state=exit]{opacity:0}.hn-drawer__panel{z-index:1200;border:1px solid var(--hn-color-border);background:var(--hn-color-surface);max-width:100vw;max-height:100vh;color:var(--hn-color-text);font-family:var(--hn-font-sans);opacity:0;flex-direction:column;padding:20px 24px;transition:opacity .14s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;box-shadow:0 16px 48px #00000052}.hn-drawer__panel:focus-visible{box-shadow:var(--hn-focus-ring), 0 16px 48px #00000052;outline:none}.hn-drawer__panel--left,.hn-drawer__panel--right{width:var(--hn-drawer-size,360px);max-width:100vw;height:100vh;top:0;bottom:0}.hn-drawer__panel--left{border-radius:0 var(--hn-radius-lg) var(--hn-radius-lg) 0;left:0;transform:translate(-100%)}.hn-drawer__panel--right{border-radius:var(--hn-radius-lg) 0 0 var(--hn-radius-lg);right:0;transform:translate(100%)}.hn-drawer__panel--left[data-state=enter],.hn-drawer__panel--right[data-state=enter]{opacity:1;transform:translate(0)}.hn-drawer__panel--left[data-state=exit]{opacity:0;transform:translate(-100%)}.hn-drawer__panel--right[data-state=exit]{opacity:0;transform:translate(100%)}.hn-drawer__panel--top,.hn-drawer__panel--bottom{width:100vw;height:var(--hn-drawer-size,280px);max-height:100vh;left:0;right:0}.hn-drawer__panel--top{border-radius:0 0 var(--hn-radius-lg) var(--hn-radius-lg);top:0;transform:translateY(-100%)}.hn-drawer__panel--bottom{border-radius:var(--hn-radius-lg) var(--hn-radius-lg) 0 0;bottom:0;transform:translateY(100%)}.hn-drawer__panel--top[data-state=enter],.hn-drawer__panel--bottom[data-state=enter]{opacity:1;transform:translateY(0)}.hn-drawer__panel--top[data-state=exit]{opacity:0;transform:translateY(-100%)}.hn-drawer__panel--bottom[data-state=exit]{opacity:0;transform:translateY(100%)}.hn-drawer__title{letter-spacing:-.01em;color:var(--hn-color-text);margin:0 0 4px;font-size:18px;font-weight:550;line-height:1.45}.hn-drawer__description{color:var(--hn-color-text-muted);margin:0;font-size:13px;line-height:1.65}.hn-drawer__content{flex:auto;margin-top:16px;overflow:auto}.hn-drawer__panel:not(:has(.hn-drawer__title)) .hn-drawer__content{margin-top:0}@media (prefers-reduced-motion:reduce){.hn-drawer__backdrop,.hn-drawer__panel{transition-duration:.01ms}}.hn-icon{vertical-align:-.125em;pointer-events:none;flex-shrink:0;justify-content:center;align-items:center;line-height:0;display:inline-flex}.hn-kbd{font-family:var(--hn-font-mono);color:var(--hn-color-text);white-space:nowrap;vertical-align:baseline;align-items:center;gap:4px;font-size:11px;line-height:1;display:inline-flex}.hn-kbd__key{border:1px solid color-mix(in srgb, var(--hn-color-text) 22%, transparent);border-radius:var(--hn-radius-sm);background:var(--hn-color-surface-hover);min-width:18px;color:var(--hn-color-text);vertical-align:baseline;white-space:nowrap;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;padding:2px 6px;font-family:inherit;font-size:11px;font-weight:500;line-height:1;display:inline-flex;box-shadow:inset 0 -1px #0000001f}.hn-kbd__plus{color:var(--hn-color-text-muted);-webkit-user-select:none;user-select:none;font-family:inherit;font-size:11px;font-weight:400;line-height:1}.hn-loading{color:var(--hn-color-accent);font-family:var(--hn-font-sans);justify-content:center;align-items:center;gap:8px;line-height:0;display:inline-flex}.hn-loading__spinner{animation:hn-loading-spin var(--hn-loading-duration,.9s) linear infinite;transform-origin:50%;flex-shrink:0;display:block}.hn-loading__text{color:var(--hn-color-text-muted);white-space:nowrap;font-size:13px;line-height:1.5}.hn-loading--small .hn-loading__text{font-size:12px}.hn-loading--large .hn-loading__text{font-size:14px}.hn-loading--cover{background:color-mix(in srgb, var(--hn-color-surface) 72%, transparent);-webkit-backdrop-filter:blur(2px);border-radius:inherit;color:var(--hn-color-accent);flex-direction:column;gap:12px;position:absolute;inset:0}.hn-loading--cover .hn-loading__text{color:var(--hn-color-text)}.hn-loading-overlay{z-index:1200;-webkit-backdrop-filter:blur(8px);color:var(--hn-color-accent);font-family:var(--hn-font-sans);background:#00000073;flex-direction:column;justify-content:center;align-items:center;gap:14px;animation:.14s cubic-bezier(.2,.8,.2,1) hn-loading-overlay-fade;display:flex;position:fixed;inset:0}.hn-loading-overlay .hn-loading__text{color:var(--hn-color-text);font-size:14px}@keyframes hn-loading-spin{to{transform:rotate(360deg)}}@keyframes hn-loading-overlay-fade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.hn-loading__spinner{animation-duration:2.4s;animation-timing-function:steps(12,end)}.hn-loading-overlay{animation-duration:.01ms}}.hn-popover{--hn-popover-background:#1e293bcc;--hn-popover-border:#ffffff1a;--hn-popover-separator:#ffffff2e;--hn-color-surface-hover:#ffffff1a;--hn-color-text:#f8fafc;--hn-color-text-muted:#cbd5e1;--hn-popover-padding:5px;max-width:100%;padding:var(--hn-popover-padding);border:1px solid var(--hn-popover-border);border-radius:calc(var(--hn-radius-md) + var(--hn-popover-padding));background:var(--hn-popover-background);-webkit-backdrop-filter:blur(12px);color:var(--hn-color-text);font-family:var(--hn-font-sans);align-items:center;gap:3px;display:inline-flex;box-shadow:0 8px 24px #0f172a47}.hn-popover[data-theme=light]{--hn-popover-background:#fffc;--hn-popover-border:#0f172a1f;--hn-popover-separator:#0f172a29;--hn-color-surface-hover:#f1f5f9;--hn-color-text:#1e293b;--hn-color-text-muted:#64748b;box-shadow:0 8px 24px #0f172a29}.hn-popover--floating{z-index:1000}.hn-popover[data-orientation=vertical]{flex-direction:column}.hn-popover__separator{background:var(--hn-popover-separator);border:0;flex:0 0 1px;width:1px;height:20px;margin:0 4px;padding:0}.hn-popover[data-orientation=vertical] .hn-popover__separator{flex:0 0 1px;width:20px;height:1px;margin:4px 0}.hn-menu{min-width:180px;font-family:var(--hn-font-sans);color:var(--hn-color-text);-webkit-backdrop-filter:blur(12px);border-radius:var(--hn-radius-md);background:#1e293bcc;flex-direction:column;gap:2px;padding:4px;display:flex}.hn-menu__item{border-radius:var(--hn-radius-md);width:100%;min-height:32px;color:var(--hn-color-text);cursor:pointer;text-align:left;transition:background-color var(--hn-transition), color var(--hn-transition);background:0 0;border:0;justify-content:space-between;align-items:center;gap:12px;padding:0 10px;font-size:13px;line-height:1;display:flex}.hn-menu__item:hover:not(:disabled){background:var(--hn-color-surface-hover)}.hn-menu__item:focus-visible{box-shadow:var(--hn-focus-ring);outline:none}.hn-menu__item:disabled{cursor:not-allowed;opacity:.42}.hn-menu__item--danger{color:var(--hn-color-danger)}.hn-menu__item-label{flex:auto;min-width:0}.hn-menu__shortcut{font:400 11px/1 var(--hn-font-mono);color:var(--hn-color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}.hn-menu__separator{background:var(--hn-popover-separator,var(--hn-color-border));border:0;height:1px;margin:4px 2px}.hn-menu__label{color:var(--hn-color-text-muted);-webkit-user-select:none;user-select:none;padding:4px 10px 2px;font-size:11px;line-height:1}.hn-menu__submenu{display:block}.hn-menu__submenu--open>.hn-menu__submenu-trigger{background:var(--hn-color-surface-hover)}.hn-menu__submenu-chevron{font:400 11px/1 var(--hn-font-sans);color:var(--hn-color-text-muted);transition:transform var(--hn-transition);flex-shrink:0;align-items:center;display:inline-flex}.hn-menu__submenu--open>.hn-menu__submenu-trigger .hn-menu__submenu-chevron{transform:rotate(90deg)}.hn-menu__submenu-panel{z-index:1000}.hn-menu__submenu-panel .hn-menu{min-width:160px}@media (prefers-reduced-motion:reduce){.hn-menu__item,.hn-menu__submenu-chevron{transition-duration:.01ms}}.hn-note-card{box-sizing:border-box;border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-lg);background:var(--hn-color-surface);width:100%;font-family:var(--hn-font-sans);color:var(--hn-color-text);text-align:left;transition:background-color var(--hn-transition), border-color var(--hn-transition), transform .18s cubic-bezier(.2, .8, .2, 1);gap:14px;padding:18px;display:grid;position:relative}.hn-note-card__action{z-index:1;border-radius:inherit;cursor:pointer;background:0 0;border:0;position:absolute;inset:0}.hn-note-card--interactive:has(.hn-note-card__action:hover){border-color:var(--hn-color-border-strong);background:var(--hn-color-surface-hover);transform:translateY(-1px)}.hn-note-card--interactive:has(.hn-note-card__action:focus-visible){box-shadow:var(--hn-focus-ring);outline:none}.hn-note-card__action:focus-visible{outline:none}.hn-note-card--selected{background:#7c83ff14;border-color:#7c83ff73}.hn-note-card__heading{gap:5px;display:grid}.hn-note-card__title,.hn-note-card__excerpt,.hn-note-card__meta{margin:0}.hn-note-card__title{letter-spacing:-.01em;font-size:15px;font-weight:600;line-height:1.35}.hn-note-card__excerpt{color:var(--hn-color-text-muted);text-wrap:pretty;font-size:13px;line-height:1.6}.hn-note-card__meta{font-family:var(--hn-font-mono);color:#70707b;font-size:11px;line-height:1.4}@media (prefers-reduced-motion:reduce){.hn-note-card{transition-duration:.01ms}}.hn-text-field{width:100%;font-family:var(--hn-font-sans);gap:7px;display:grid}.hn-text-field__label{color:var(--hn-color-text);font-size:12px;font-weight:600;line-height:1.3}.hn-text-field__control{box-sizing:border-box;border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-md);background:var(--hn-color-surface);width:100%;min-height:38px;font:400 14px/1.4 var(--hn-font-sans);color:var(--hn-color-text);transition:border-color var(--hn-transition), background-color var(--hn-transition), box-shadow var(--hn-transition);outline:none;padding:8px 11px}.hn-text-field__control::placeholder{color:#666670}.hn-text-field__control:hover:not(:disabled){border-color:var(--hn-color-border-strong)}.hn-text-field__control:focus-visible{border-color:var(--hn-color-accent);background:var(--hn-color-surface-hover);box-shadow:var(--hn-focus-ring);outline:none}.hn-text-field__control:disabled{cursor:not-allowed;opacity:.48}.hn-text-field--invalid .hn-text-field__control{border-color:#fb718599}.hn-text-field__message{color:var(--hn-color-text-muted);margin:0;font-size:12px;line-height:1.4}.hn-text-field--invalid .hn-text-field__message{color:var(--hn-color-danger)}@media (prefers-reduced-motion:reduce){.hn-text-field__control{transition-duration:.01ms}}.hn-theme{display:contents}.hn-theme[data-accent=custom]{--hn-color-accent-hover:color-mix(in srgb, var(--hn-color-accent), #fff 16%);--hn-focus-ring:0 0 0 3px color-mix(in srgb, var(--hn-color-accent) 42%, transparent)}}.hn-theme[data-mode=light]{--hn-color-surface:#fff;--hn-color-surface-hover:#f4f4f6;--hn-color-text:#18181b;--hn-color-text-muted:#63636d;--hn-color-border:#0000001a;--hn-color-border-strong:#0000002e;--hn-color-danger:#e11d48;--hn-color-success:#16a34a;--hn-color-warning:#d97706}.hn-theme[data-mode=dark]{--hn-color-surface:#111114;--hn-color-surface-hover:#17171b;--hn-color-text:#f4f4f5;--hn-color-text-muted:#92929d;--hn-color-border:#ffffff1a;--hn-color-border-strong:#ffffff2b;--hn-color-danger:#fb7185;--hn-color-success:#4ade80;--hn-color-warning:#fbbf24}
+/*$vite$:1*/