@humuchen/mac-ui 0.0.1

package/dist/types/components/desktop/mac-desktop.d.ts

@@ -0,0 +1,88 @@
+import { BaseElement } from '../../internal/base-element';
+export interface DesktopIconData {
+    id: string;
+    label: string;
+    color?: string;
+    x?: number;
+    y?: number;
+    iconSrc?: string;
+}
+/**
+ * @tag mac-desktop
+ * @summary 带有图标布局、拖拽管理和集成 Dock 的 macOS 风格桌面容器。
+ *
+ * @slot - 用于放置 mac-desktop-icon 元素的默认插槽。
+ * @slot wallpaper - 自定义壁纸内容。
+ * @slot dock - Dock 栏内容（mac-dock-item 元素）。
+ *
+ * @csspart base - 桌面基础容器。
+ * @csspart wallpaper - 壁纸层。
+ * @csspart dock - Dock 容器区域。
+ *
+ * @event mac-layout-change - 布局模式变化时触发。
+ * @event mac-icons-reorder - 图标重新排序时触发。
+ */
+export declare class MacDesktop extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** 布局模式 */
+    layout: 'vertical' | 'horizontal';
+    /** 网格单元大小，单位为像素 */
+    cellSize: number;
+    /** 网格间距，单位为像素 */
+    spacing: number;
+    /** 桌面边缘内边距 */
+    padding: number;
+    /** 壁纸图片 URL */
+    wallpaper: string;
+    /** 是否显示 Dock */
+    showDock: boolean;
+    private _selectionRect;
+    private _contextMenu;
+    private _desktopIcons;
+    private _selectedIds;
+    private _isSelecting;
+    private _selStartX;
+    private _selStartY;
+    private _isDragging;
+    private _draggingIcons;
+    private _dragPointerStartX;
+    private _dragPointerStartY;
+    private _hasDragMoved;
+    private _dragCleanup;
+    private _selDragCleanup;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _getIconElements;
+    /**
+     * 通过 composedPath 在事件路径中查找 mac-desktop-icon 元素。
+     * 这是跨越 Shadow DOM 边界识别事件目标的最可靠方式。
+     */
+    private _findIconInComposedPath;
+    /** 根据当前布局模式排列图标 */
+    private _arrangeIcons;
+    private _selectIcon;
+    private _deselectAll;
+    private _applySelection;
+    private _startSelection;
+    private _updateSelectionRect;
+    private _endSelection;
+    private _checkSelectionOverlap;
+    private _startIconDrag;
+    private _showContextMenu;
+    private _hideContextMenu;
+    render(): import("lit").TemplateResult<1>;
+    private _onDesktopMouseDown;
+    private _onContextMenu;
+    private _onArrangeVertical;
+    private _onArrangeHorizontal;
+    private _onCleanUp;
+    private _onSelectAll;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _globalClickHandler;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-desktop': MacDesktop;
+    }
+}

package/dist/types/components/desktop/mac-desktop.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-desktop';
+import '../desktop-icon/mac-desktop-icon';
+import '../dock/mac-dock';
+import '../dock/mac-dock-item';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const WithWallpaper: Story;
+export declare const WithoutDock: Story;
+export declare const HorizontalLayout: Story;
+export declare const CustomIconImages: Story;
+export declare const RightClickMenu: Story;
+export declare const IconSelection: Story;
+export declare const IconDrag: Story;
+export declare const DenseGrid: Story;

package/dist/types/components/desktop-icon/index.d.ts

@@ -0,0 +1 @@
+export { MacDesktopIcon } from './mac-desktop-icon';

package/dist/types/components/desktop-icon/mac-desktop-icon.d.ts

@@ -0,0 +1,46 @@
+import { BaseElement } from '../../internal/base-element';
+/**
+ * @tag mac-desktop-icon
+ * @summary 带有选中状态的 macOS 风格桌面图标。
+ *
+ * @slot - 图标的视觉内容（图片、svg 等）。
+ *
+ * @csspart base - 图标的基础容器。
+ * @csspart icon - 图标图像区域。
+ * @csspart label - 标签文本区域。
+ *
+ * @event mac-icon-dblclick - 双击时触发。Detail: { iconId }
+ */
+export declare class MacDesktopIcon extends BaseElement {
+    /** 自增计数器，用于为未指定 iconId 的图标自动生成唯一标识 */
+    private static _autoIdCounter;
+    static styles: import("lit").CSSResult[];
+    /** 图标标签文本 */
+    label: string;
+    /** 图标标识符 */
+    iconId: string;
+    /** 图标是否被选中 */
+    selected: boolean;
+    /** 图标是否正在被拖拽 */
+    dragging: boolean;
+    /** 图标 X 坐标 */
+    x: number;
+    /** 图标 Y 坐标 */
+    y: number;
+    /** 默认占位符的图标颜色 */
+    color: string;
+    private _clickTimer;
+    private _clickCount;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _updatePosition;
+    render(): import("lit").TemplateResult<1>;
+    private _handleMouseDown;
+    private _handleTouchStart;
+    private _handleClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-desktop-icon': MacDesktopIcon;
+    }
+}

package/dist/types/components/desktop-icon/mac-desktop-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-desktop-icon';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const ColorVariants: Story;

package/dist/types/components/dock/index.d.ts

@@ -0,0 +1,2 @@
+export { MacDockItem } from './mac-dock-item';
+export { MacDock } from './mac-dock';

package/dist/types/components/dock/mac-dock-item.d.ts

@@ -0,0 +1,37 @@
+import { BaseElement } from '../../internal/base-element';
+/**
+ * @tag mac-dock-item
+ * @summary A macOS-style dock item with icon, label, and bounce animation.
+ *
+ * @slot - The icon's visual content (image, svg, etc.).
+ *
+ * @csspart base - The dock item container.
+ * @csspart icon - The icon image area.
+ * @csspart label - The tooltip label.
+ * @csspart indicator - The running indicator dot.
+ *
+ * @event mac-dock-item-click - Emitted on click. Detail: { itemId }
+ */
+export declare class MacDockItem extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** Item identifier */
+    itemId: string;
+    /** Item label (tooltip) */
+    label: string;
+    /** Icon color for default placeholder */
+    color: string;
+    /** Whether the app is running */
+    running: boolean;
+    /** Whether the icon is currently bouncing */
+    bouncing: boolean;
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleClick;
+    private _onBounceEnd;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-dock-item': MacDockItem;
+    }
+}

package/dist/types/components/dock/mac-dock.d.ts

@@ -0,0 +1,74 @@
+import { BaseElement } from '../../internal/base-element';
+/**
+ * @tag mac-dock
+ * @summary 带有液态玻璃背景、放大效果、右键菜单和拖拽移除功能的 macOS 27 Golden Gate 风格 Dock。
+ *
+ * @slot - 用于放置 mac-dock-item 元素的默认插槽。
+ * @slot separator - 区域之间的自定义分隔符内容。
+ *
+ * @csspart base - Dock 容器。
+ * @csspart glass - 液态玻璃背景层。
+ * @csspart items - 项目容器。
+ *
+ * @event mac-dock-item-click - 从 dock 项目转发。Detail: { itemId }
+ * @event mac-dock-item-remove - 项目被移除时触发。Detail: { itemId }
+ */
+export declare class MacDock extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** 放大比例因子（1.0 = 不放大） */
+    magnification: number;
+    /** 基础图标大小，单位为像素 */
+    iconSize: number;
+    /** 放大范围，单位为像素（影响邻近项目的光标距离） */
+    magnifyRange: number;
+    /** Dock 的位置 */
+    position: 'bottom' | 'left' | 'right';
+    private _dockItems;
+    private _contextMenu;
+    private _isHovering;
+    private _rafId;
+    private _contextMenuItem;
+    private _isDragging;
+    private _dragItem;
+    private _dragStartX;
+    private _dragStartY;
+    private _dragOffsetX;
+    private _dragOffsetY;
+    private _hasDragMoved;
+    private _dragGhost;
+    private _lastMoveEvent;
+    private _dragCleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _forwardItemClick;
+    private _getDockItems;
+    private _findDockItemInPath;
+    /**
+     * 核心放大算法：根据鼠标位置计算每个图标的缩放比例。
+     * 使用高斯分布，距离鼠标越近的图标放大越多，实现 macOS 风格的平滑放大效果。
+     */
+    private _applyMagnification;
+    private _resetMagnification;
+    private _onDockContextMenu;
+    private _globalClickHandler;
+    private _hideContextMenu;
+    private _onContextMenuOpen;
+    private _onContextRemoveFromDock;
+    private _cleanupDrag;
+    private _onDockMouseDown;
+    private _createDragGhost;
+    private _removeDragGhost;
+    private _dropIndicator;
+    private _findDropTarget;
+    private _updateDropIndicator;
+    private _removeDropIndicator;
+    private _onMouseMove;
+    private _onMouseEnter;
+    private _onMouseLeave;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-dock': MacDock;
+    }
+}

package/dist/types/components/dock/mac-dock.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-dock';
+import './mac-dock-item';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const WithRunningIndicators: Story;
+export declare const WithCustomIcons: Story;
+export declare const NoMagnification: Story;
+export declare const SmallIcons: Story;
+export declare const RightClickMenu: Story;
+export declare const DragToRemove: Story;

package/dist/types/components/drawer/mac-drawer.d.ts

@@ -0,0 +1,87 @@
+import { BaseElement } from '../../internal/base-element';
+/**
+ * @tag mac-drawer
+ * @summary 一个 macOS 风格的抽屉组件，从视口边缘滑入。
+ *
+ * @slot - 默认插槽，用于抽屉内容。
+ * @slot header - 自定义头部内容（替换默认标题和关闭按钮）。
+ * @slot footer - 底部内容（例如操作按钮）。
+ *
+ * @cssproperty --md-drawer-bg - 抽屉面板背景。
+ * @cssproperty --md-drawer-border - 抽屉面板边框。
+ * @cssproperty --md-drawer-shadow - 抽屉面板阴影。
+ * @cssproperty --md-drawer-header-padding - 头部内边距。
+ * @cssproperty --md-drawer-header-border - 头部底边框。
+ * @cssproperty --md-drawer-title-font-size - 标题字体大小。
+ * @cssproperty --md-drawer-title-color - 标题文字颜色。
+ * @cssproperty --md-drawer-body-padding - 内容区内边距。
+ * @cssproperty --md-drawer-footer-padding - 底部内边距。
+ * @cssproperty --md-drawer-footer-border - 底部顶边框。
+ * @cssproperty --md-drawer-close-color - 关闭图标颜色。
+ * @cssproperty --md-drawer-close-hover-bg - 关闭图标悬停背景。
+ * @cssproperty --md-drawer-mask-bg - 遮罩层背景。
+ * @cssproperty --md-drawer-radius - 抽屉圆角（暴露边缘）。
+ *
+ * @event mac-drawer-open - 抽屉打开后触发。
+ * @event mac-drawer-close - 抽屉关闭后触发。
+ * @event mac-drawer-after-open - 打开动画完成后触发。
+ * @event mac-drawer-after-close - 关闭动画完成后触发。
+ */
+export declare class MacDrawer extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** 抽屉是否打开 */
+    open: boolean;
+    /** 抽屉放置方向 */
+    placement: 'top' | 'right' | 'bottom' | 'left';
+    /** 抽屉标题 */
+    title: string;
+    /** 抽屉宽度（用于左/右放置） */
+    width: string;
+    /** 抽屉高度（用于上/下放置） */
+    height: string;
+    /** 是否显示关闭按钮 */
+    closable: boolean;
+    /** 点击遮罩是否关闭抽屉 */
+    maskClosable: boolean;
+    /** 是否显示遮罩层 */
+    showMask: boolean | 'transparent';
+    /** 按 ESC 键是否关闭抽屉 */
+    closeOnEsc: boolean;
+    /** 抽屉是否可调整大小 */
+    resizable: boolean;
+    /** 调整大小时的最小宽度（左/右） */
+    minWidth: string;
+    /** 调整大小时的最大宽度（左/右） */
+    maxWidth: string;
+    /** 调整大小时的最小高度（上/下） */
+    minHeight: string;
+    /** 调整大小时的最大高度（上/下） */
+    maxHeight: string;
+    private _isOpen;
+    private _maskEl;
+    private _panelEl;
+    private _isResizing;
+    private _resizeStartX;
+    private _resizeStartY;
+    private _resizeStartSize;
+    private static _stylesInjected;
+    willUpdate(): void;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _injectStyles;
+    private _applyThemeVars;
+    private _show;
+    private _hide;
+    private _createPortal;
+    private _slottedChildren;
+    private _removePortal;
+    private _close;
+    private _handleKeyDown;
+    private _onResizeStart;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-drawer': MacDrawer;
+    }
+}

package/dist/types/components/drawer/mac-drawer.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-drawer';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const RightPlacement: Story;
+export declare const LeftPlacement: Story;
+export declare const TopPlacement: Story;
+export declare const BottomPlacement: Story;
+export declare const Resizable: Story;
+export declare const NoMask: Story;
+export declare const TransparentMask: Story;
+export declare const WithFooter: Story;
+export declare const NoClosable: Story;

package/dist/types/components/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { MacDropdown } from './mac-dropdown';
+export type { DropdownItem } from './mac-dropdown';

package/dist/types/components/dropdown/mac-dropdown.d.ts

@@ -0,0 +1,77 @@
+import { BaseElement } from '../../internal/base-element';
+export interface DropdownItem {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    shortcut?: string;
+    divider?: boolean;
+    children?: DropdownItem[];
+}
+/**
+ * @tag mac-dropdown
+ * @summary 一个 macOS 风格的下拉菜单组件。
+ *
+ * @slot trigger - 触发下拉菜单打开的元素。
+ *
+ * @csspart base - 下拉菜单的基础容器。
+ * @csspart menu - 下拉菜单。
+ * @csspart item - 菜单项。
+ */
+export declare class MacDropdown extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** 菜单项。 */
+    items: DropdownItem[];
+    /** 下拉菜单的位置。 */
+    placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /** 当前激活/选中的值。 */
+    value: string;
+    /** 禁用下拉菜单。 */
+    disabled: boolean;
+    /** 悬停时打开下拉菜单。 */
+    openOnHover: boolean;
+    /** 悬停延迟（毫秒）。 */
+    hoverDelay: number;
+    /** 触发模式：click、contextmenu 或 both。 */
+    trigger: 'click' | 'contextmenu' | 'both';
+    private _open;
+    private _hoverTimeout;
+    private _menuEl;
+    private _menuId;
+    private _scrollHandler;
+    private _triggerEl;
+    /** 为 portal 菜单注入的样式（挂载到 body）。 */
+    private static _portalStylesInjected;
+    private static _injectPortalStyles;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _addScrollListener;
+    private _removeScrollListener;
+    private _handleDocumentClick;
+    private _handleKeyDown;
+    private _openMenu;
+    private _close;
+    private _toggle;
+    private _handleTriggerClick;
+    private _handleContextMenu;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _selectItem;
+    /**
+     * 根据触发元素或显式坐标计算菜单位置。
+     * 自动调整以保持在视口内。
+     */
+    private _calcPosition;
+    private _createMenu;
+    private _removeMenu;
+    private _renderItemsHTML;
+    private _bindMenuEvents;
+    private _findItem;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-dropdown': MacDropdown;
+    }
+}

package/dist/types/components/dropdown/mac-dropdown.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-dropdown';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const WithIcons: Story;
+export declare const WithSubmenu: Story;
+export declare const DangerItems: Story;
+export declare const OpenOnHover: Story;
+export declare const Placements: Story;
+export declare const Disabled: Story;
+export declare const ContextMenu: Story;

package/dist/types/components/dynamic-tags/index.d.ts

@@ -0,0 +1 @@
+export { MacDynamicTags } from './mac-dynamic-tags';

package/dist/types/components/dynamic-tags/mac-dynamic-tags.d.ts

@@ -0,0 +1,64 @@
+import { BaseElement } from '../../internal/base-element';
+/**
+ * @tag mac-dynamic-tags
+ * @summary 一个动态标签组件，用于添加和删除标签。
+ *
+ * @slot - 自定义标签渲染。通过 data-value 和 data-index 属性接收标签数据。
+ *
+ * @csspart container - 标签容器。
+ * @csspart tag - 每个标签元素。
+ * @csspart input - 用于添加标签的输入框。
+ * @csspart add-button - 输入框隐藏时显示的添加按钮。
+ *
+ * @event mac-update - 值变化时触发。Detail: { value: string[] }
+ * @event mac-add - 添加标签时触发。Detail: { value: string, index: number }
+ * @event mac-remove - 删除标签时触发。Detail: { value: string, index: number }
+ */
+export declare class MacDynamicTags extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** 标签的值（受控）。 */
+    value: string[];
+    /** 标签的默认值（非受控）。 */
+    defaultValue: string[];
+    /** 禁用组件。 */
+    disabled: boolean;
+    /** 标签的最大数量。 */
+    max?: number;
+    /** 标签的尺寸。 */
+    size?: 'sm' | 'md' | 'lg';
+    /** 标签的类型。 */
+    type: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    /** 标签是否圆角。 */
+    round: boolean;
+    /** 标签是否有边框。 */
+    bordered: boolean;
+    /** 标签是否可关闭。 */
+    closable: boolean;
+    /** 输入框的占位符。 */
+    inputPlaceholder: string;
+    /** 输入框的最大长度。 */
+    inputMaxLength?: number;
+    private _inputVisible;
+    private _inputValue;
+    private _internalValue;
+    private _inputRef;
+    private get _isControlled();
+    private get _resolvedValue();
+    private get _hasSlot();
+    connectedCallback(): void;
+    willUpdate(): void;
+    updated(changed: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+    private _showInput;
+    private _hideInput;
+    private _handleInputChange;
+    private _handleInputKeydown;
+    private _handleInputBlur;
+    private _addTag;
+    private _handleRemove;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-dynamic-tags': MacDynamicTags;
+    }
+}

package/dist/types/components/dynamic-tags/mac-dynamic-tags.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-dynamic-tags';
+import '../tag/mac-tag';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Types: Story;
+export declare const Sizes: Story;
+export declare const Round: Story;
+export declare const Disabled: Story;
+export declare const MaxCount: Story;
+export declare const NotClosable: Story;
+export declare const Unbordered: Story;
+export declare const Controlled: Story;
+export declare const WithMaxLength: Story;

package/dist/types/components/form/index.d.ts

@@ -0,0 +1,3 @@
+export { MacForm } from './mac-form';
+export { MacFormItem } from './mac-form-item';
+export type { FormRule } from './mac-form';

package/dist/types/components/form/mac-form-item.d.ts

@@ -0,0 +1,67 @@
+import { BaseElement } from '../../internal/base-element';
+import type { FormRule } from './mac-form';
+/**
+ * @tag mac-form-item
+ * @summary A form item component for wrapping form controls with label and validation.
+ *
+ * @slot - The form control element.
+ *
+ * @csspart base - The form item's base container.
+ * @csspart label - The label element.
+ * @csspart content - The content wrapper.
+ * @csspart error - The error message element.
+ */
+export declare class MacFormItem extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** The item's label. */
+    label: string;
+    /** The field path in the model. */
+    path: string;
+    /** Validation rule(s). */
+    rule?: FormRule | FormRule[];
+    /** Whether the field is required. */
+    required: boolean;
+    /** Whether to show the label. */
+    showLabel?: boolean;
+    /** Whether to show feedback (error messages). */
+    showFeedback?: boolean;
+    /** The item's size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disables the item. */
+    disabled: boolean;
+    private _errorMessage;
+    private _form?;
+    private _control?;
+    private _mutationObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private _findForm;
+    private _findControl;
+    private _findFirstControl;
+    private _getValue;
+    private _syncValueToControl;
+    private _syncDisabledToControl;
+    private _syncSizeToControl;
+    private _attachListeners;
+    private _handleChange;
+    private _handleInput;
+    private _handleBlur;
+    private _updateValue;
+    private _setControlStatus;
+    /** Validates the form item. */
+    validate(trigger?: 'blur' | 'change' | 'input'): Promise<boolean>;
+    /** Resets the validation state. */
+    reset(): void;
+    private _checkType;
+    private get _resolvedRules();
+    private get _showLabel();
+    private get _showFeedback();
+    private get _labelAlign();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-form-item': MacFormItem;
+    }
+}