moduix 0.11.0 → 0.11.2

package/dist/components/CommandPalette/CommandPalette.js

@@ -0,0 +1,278 @@
+import { CloseIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import CommandPalette_module_default from "./CommandPalette.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { createContext, useContext, useEffect, useMemo } from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/CommandPalette/CommandPalette.tsx
+const createCommandPaletteHandle = Dialog.createHandle;
+const CommandPaletteContext = createContext(null);
+function useCommandPaletteContext(componentName) {
+	const context = useContext(CommandPaletteContext);
+	if (!context) throw new Error(`${componentName} must be used within CommandPalette.`);
+	return context;
+}
+function isMacLikePlatform() {
+	if (typeof navigator === "undefined") return false;
+	const platform = navigator.userAgentData?.platform ?? navigator.platform;
+	return /mac|iphone|ipad|ipod/i.test(platform);
+}
+function isShortcutMatch(event, shortcut) {
+	const parts = shortcut.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+	const key = parts.at(-1);
+	const primaryModifier = parts.includes("mod") ? isMacLikePlatform() ? "meta" : "ctrl" : null;
+	const needsCtrl = parts.includes("ctrl") || parts.includes("control") || primaryModifier === "ctrl";
+	const needsMeta = parts.includes("meta") || parts.includes("cmd") || parts.includes("command") || primaryModifier === "meta";
+	const needsAlt = parts.includes("alt") || parts.includes("option");
+	const needsShift = parts.includes("shift");
+	const eventKey = event.key.toLowerCase();
+	const eventCode = event.code.startsWith("Key") || event.code.startsWith("Digit") ? event.code.slice(event.code.startsWith("Key") ? 3 : 5).toLowerCase() : event.code.toLowerCase();
+	if (!key || eventKey !== key && eventCode !== key) return false;
+	return event.ctrlKey === needsCtrl && event.metaKey === needsMeta && event.altKey === needsAlt && event.shiftKey === needsShift;
+}
+function isEditableTarget(target) {
+	if (!(target instanceof Element)) return false;
+	return target.closest("input, textarea, select, [contenteditable], [contenteditable=\"true\"]") !== null;
+}
+function isGroupedItems(items) {
+	return Boolean(items?.[0] && typeof items[0] === "object" && items[0] !== null && "items" in items[0]);
+}
+function CommandPalette({ modal = true, shortcut = "mod+k", shortcutTarget, handle, children, ...props }) {
+	const fallbackHandle = useMemo(() => createCommandPaletteHandle(), []);
+	const resolvedHandle = handle ?? fallbackHandle;
+	useEffect(() => {
+		if (shortcut === false || shortcutTarget === null) return;
+		const target = shortcutTarget ?? document;
+		const handleKeyDown = (event) => {
+			if (event.defaultPrevented || event.isComposing || isEditableTarget(event.target) || !isShortcutMatch(event, shortcut)) return;
+			event.preventDefault();
+			resolvedHandle.open(null);
+		};
+		const eventListener = handleKeyDown;
+		target.addEventListener("keydown", eventListener);
+		return () => target.removeEventListener("keydown", eventListener);
+	}, [
+		resolvedHandle,
+		shortcut,
+		shortcutTarget
+	]);
+	return /* @__PURE__ */ jsx(CommandPaletteContext.Provider, {
+		value: {
+			handle: resolvedHandle,
+			modal
+		},
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			modal,
+			handle: resolvedHandle,
+			...props,
+			children
+		})
+	});
+}
+function CommandPaletteTrigger({ className, render, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "command-palette-trigger",
+		className: render ? className : mergeClassName(className, CommandPalette_module_default.trigger),
+		render,
+		...props
+	});
+}
+function CommandPalettePortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, { ...props });
+}
+function CommandPaletteBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "command-palette-backdrop",
+		className: mergeClassName(className, CommandPalette_module_default.backdrop),
+		...props
+	});
+}
+function CommandPaletteViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		"data-slot": "command-palette-viewport",
+		className: mergeClassName(className, CommandPalette_module_default.viewport),
+		...props
+	});
+}
+function CommandPalettePopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		"data-slot": "command-palette-popup",
+		className: mergeClassName(className, CommandPalette_module_default.popup),
+		...props
+	});
+}
+function CommandPaletteClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "command-palette-close",
+		className: mergeClassName(className, CommandPalette_module_default.close),
+		...props
+	});
+}
+function CommandPaletteContent({ className, children, items, itemToStringValue, value, defaultValue, onValueChange, filter, filteredItems, limit, ...props }) {
+	const { modal } = useCommandPaletteContext("CommandPaletteContent");
+	const autocompleteProps = {
+		autoHighlight: "always",
+		defaultValue,
+		filter,
+		filteredItems,
+		inline: true,
+		itemToStringValue,
+		keepHighlight: true,
+		limit,
+		onValueChange,
+		open: true,
+		value
+	};
+	return /* @__PURE__ */ jsxs(CommandPalettePortal, { children: [modal === true ? /* @__PURE__ */ jsx(CommandPaletteBackdrop, {}) : null, /* @__PURE__ */ jsx(CommandPaletteViewport, {
+		className: modal === true ? void 0 : CommandPalette_module_default.viewportNonModal,
+		children: /* @__PURE__ */ jsx(CommandPalettePopup, {
+			className,
+			...props,
+			children: isGroupedItems(items) ? /* @__PURE__ */ jsx(Autocomplete.Root, {
+				...autocompleteProps,
+				items,
+				children
+			}) : /* @__PURE__ */ jsx(Autocomplete.Root, {
+				...autocompleteProps,
+				items,
+				children
+			})
+		})
+	})] });
+}
+function CommandPaletteInputWrap({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-palette-input-wrap",
+		className: clsx(CommandPalette_module_default.inputWrap, className),
+		...props
+	});
+}
+function CommandPaletteInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Input, {
+		"data-slot": "command-palette-input",
+		className: mergeClassName(className, CommandPalette_module_default.input),
+		...props
+	});
+}
+function CommandPaletteClear({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Clear, {
+		"data-slot": "command-palette-clear",
+		className: mergeClassName(className, CommandPalette_module_default.clear),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, { className: CommandPalette_module_default.iconSvg })
+	});
+}
+function CommandPaletteStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Status, {
+		"data-slot": "command-palette-status",
+		className: mergeClassName(className, CommandPalette_module_default.status),
+		...props
+	});
+}
+function CommandPaletteEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Empty, {
+		"data-slot": "command-palette-empty",
+		className: mergeClassName(className, CommandPalette_module_default.empty),
+		...props
+	});
+}
+function CommandPaletteList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.List, {
+		"data-slot": "command-palette-list",
+		className: mergeClassName(className, CommandPalette_module_default.list),
+		...props
+	});
+}
+function CommandPaletteGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Group, {
+		"data-slot": "command-palette-group",
+		className: mergeClassName(className, CommandPalette_module_default.group),
+		...props
+	});
+}
+function CommandPaletteGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+		"data-slot": "command-palette-group-label",
+		className: mergeClassName(className, CommandPalette_module_default.groupLabel),
+		...props
+	});
+}
+function CommandPaletteCollection(props) {
+	return /* @__PURE__ */ jsx(Autocomplete.Collection, {
+		"data-slot": "command-palette-collection",
+		...props
+	});
+}
+function CommandPaletteItem({ className, closeOnSelect = true, onClick, ...props }) {
+	const { handle } = useCommandPaletteContext("CommandPaletteItem");
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented && closeOnSelect) handle.close();
+	};
+	return /* @__PURE__ */ jsx(Autocomplete.Item, {
+		"data-slot": "command-palette-item",
+		className: mergeClassName(className, CommandPalette_module_default.item),
+		onClick: handleClick,
+		...props
+	});
+}
+function CommandPaletteItemIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-palette-item-icon",
+		className: clsx(CommandPalette_module_default.itemIcon, className),
+		...props
+	});
+}
+function CommandPaletteItemText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-palette-item-text",
+		className: clsx(CommandPalette_module_default.itemText, className),
+		...props
+	});
+}
+function CommandPaletteItemLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-palette-item-label",
+		className: clsx(CommandPalette_module_default.itemLabel, className),
+		...props
+	});
+}
+function CommandPaletteItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-palette-item-description",
+		className: clsx(CommandPalette_module_default.itemDescription, className),
+		...props
+	});
+}
+function CommandPaletteItemMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-palette-item-meta",
+		className: clsx(CommandPalette_module_default.itemMeta, className),
+		...props
+	});
+}
+function CommandPaletteSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Separator, {
+		"data-slot": "command-palette-separator",
+		className: mergeClassName(className, CommandPalette_module_default.separator),
+		...props
+	});
+}
+function CommandPaletteFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-palette-footer",
+		className: clsx(CommandPalette_module_default.footer, className),
+		...props
+	});
+}
+function CommandPaletteKbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "command-palette-kbd",
+		className: clsx(CommandPalette_module_default.kbd, className),
+		...props
+	});
+}
+//#endregion
+export { CommandPalette, CommandPaletteBackdrop, CommandPaletteClear, CommandPaletteClose, CommandPaletteCollection, CommandPaletteContent, CommandPaletteEmpty, CommandPaletteFooter, CommandPaletteGroup, CommandPaletteGroupLabel, CommandPaletteInput, CommandPaletteInputWrap, CommandPaletteItem, CommandPaletteItemDescription, CommandPaletteItemIcon, CommandPaletteItemLabel, CommandPaletteItemMeta, CommandPaletteItemText, CommandPaletteKbd, CommandPaletteList, CommandPalettePopup, CommandPalettePortal, CommandPaletteSeparator, CommandPaletteStatus, CommandPaletteTrigger, CommandPaletteViewport, createCommandPaletteHandle };

package/dist/components/CommandPalette/CommandPalette.module.js

@@ -0,0 +1,30 @@
+import './CommandPalette.css';
+//#region src/components/CommandPalette/CommandPalette.module.css
+var CommandPalette_module_default = {
+	"backdrop": "CtKZ6G_backdrop",
+	"clear": "CtKZ6G_clear",
+	"close": "CtKZ6G_close",
+	"empty": "CtKZ6G_empty",
+	"footer": "CtKZ6G_footer",
+	"group": "CtKZ6G_group",
+	"groupLabel": "CtKZ6G_groupLabel",
+	"iconSvg": "CtKZ6G_iconSvg",
+	"input": "CtKZ6G_input",
+	"inputWrap": "CtKZ6G_inputWrap",
+	"item": "CtKZ6G_item",
+	"itemDescription": "CtKZ6G_itemDescription",
+	"itemIcon": "CtKZ6G_itemIcon",
+	"itemLabel": "CtKZ6G_itemLabel",
+	"itemMeta": "CtKZ6G_itemMeta",
+	"itemText": "CtKZ6G_itemText",
+	"kbd": "CtKZ6G_kbd",
+	"list": "CtKZ6G_list",
+	"popup": "CtKZ6G_popup",
+	"separator": "CtKZ6G_separator",
+	"status": "CtKZ6G_status",
+	"trigger": "CtKZ6G_trigger",
+	"viewport": "CtKZ6G_viewport",
+	"viewportNonModal": "CtKZ6G_viewportNonModal"
+};
+//#endregion
+export { CommandPalette_module_default as default };

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

@@ -1 +1 @@
-export { CommandPalette, createCommandPaletteHandle, CommandPaletteTrigger, CommandPalettePortal, CommandPaletteBackdrop, CommandPaletteViewport, CommandPalettePopup, CommandPaletteClose, CommandPaletteContent, CommandPaletteInputWrap, CommandPaletteInput, CommandPaletteClear, CommandPaletteStatus, CommandPaletteEmpty, CommandPaletteList, CommandPaletteGroup, CommandPaletteGroupLabel, CommandPaletteCollection, CommandPaletteItem, CommandPaletteItemIcon, CommandPaletteItemText, CommandPaletteItemLabel, CommandPaletteItemDescription, CommandPaletteItemMeta, CommandPaletteSeparator, CommandPaletteFooter, CommandPaletteKbd, } from './CommandPalette';
+import { CommandPalette, CommandPaletteBackdrop, CommandPaletteClear, CommandPaletteClose, CommandPaletteCollection, CommandPaletteContent, CommandPaletteEmpty, CommandPaletteFooter, CommandPaletteGroup, CommandPaletteGroupLabel, CommandPaletteInput, CommandPaletteInputWrap, CommandPaletteItem, CommandPaletteItemDescription, CommandPaletteItemIcon, CommandPaletteItemLabel, CommandPaletteItemMeta, CommandPaletteItemText, CommandPaletteKbd, CommandPaletteList, CommandPalettePopup, CommandPalettePortal, CommandPaletteSeparator, CommandPaletteStatus, CommandPaletteTrigger, CommandPaletteViewport, createCommandPaletteHandle } from "./CommandPalette.js";

package/dist/components/Container/Container.css

@@ -0,0 +1,45 @@
+@layer ui.components {
+  .HTeeAq_root {
+    --container-gutter: var(--container-gutter-md, clamp(1rem, 4vw, 2rem));
+    --container-max-width: var(--container-max-width-lg, 72rem);
+    box-sizing: border-box;
+    width: 100%;
+    max-width: calc(var(--container-max-width) + (var(--container-gutter) * 2));
+    min-width: 0;
+    padding-inline: var(--container-gutter);
+    margin-inline: auto;
+    display: block;
+  }
+
+  .HTeeAq_root[data-size="xs"] {
+    --container-max-width: var(--container-max-width-xs, 40rem);
+  }
+
+  .HTeeAq_root[data-size="sm"] {
+    --container-max-width: var(--container-max-width-sm, 48rem);
+  }
+
+  .HTeeAq_root[data-size="md"] {
+    --container-max-width: var(--container-max-width-md, 64rem);
+  }
+
+  .HTeeAq_root[data-size="xl"] {
+    --container-max-width: var(--container-max-width-xl, 90rem);
+  }
+
+  .HTeeAq_root[data-size="full"] {
+    max-width: none;
+  }
+
+  .HTeeAq_root[data-gutter="none"] {
+    --container-gutter: 0;
+  }
+
+  .HTeeAq_root[data-gutter="sm"] {
+    --container-gutter: var(--container-gutter-sm, clamp(.75rem, 3vw, 1.5rem));
+  }
+
+  .HTeeAq_root[data-gutter="lg"] {
+    --container-gutter: var(--container-gutter-lg, clamp(1.5rem, 5vw, 3rem));
+  }
+}

package/dist/components/Container/Container.d.ts

@@ -1,7 +1,16 @@
-import { ComponentPropsWithoutRef, ElementType } from 'react';
-declare function Container({ as: Root, size, gutter, className, ...props }: ComponentPropsWithoutRef<'div'> & {
-    as?: ElementType;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    gutter?: 'none' | 'sm' | 'md' | 'lg';
+import { ComponentPropsWithoutRef, ElementType } from "react";
+
+//#region src/components/Container/Container.d.ts
+declare function Container({
+  as: Root,
+  size,
+  gutter,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'div'> & {
+  as?: ElementType;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  gutter?: 'none' | 'sm' | 'md' | 'lg';
 }): import("react").JSX.Element;
-export { Container };
+//#endregion
+export { Container };

package/dist/components/Container/Container.js

@@ -0,0 +1,15 @@
+import Container_module_default from "./Container.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/Container/Container.tsx
+function Container({ as: Root = "div", size = "lg", gutter = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx(Root, {
+		...props,
+		"data-slot": "container-root",
+		"data-size": size,
+		"data-gutter": gutter,
+		className: clsx$1(Container_module_default.root, className)
+	});
+}
+//#endregion
+export { Container };

package/dist/components/Container/Container.module.js

@@ -0,0 +1,5 @@
+import './Container.css';
+//#region src/components/Container/Container.module.css
+var Container_module_default = { "root": "HTeeAq_root" };
+//#endregion
+export { Container_module_default as default };

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

@@ -1 +1 @@
-export * from './Container';
+import { Container } from "./Container.js";