moduix 0.10.0 → 0.11.1

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

@@ -1 +1 @@
-export * from './Lightbox';
+import { Lightbox, LightboxBackdrop, LightboxClose, LightboxCloseButton, LightboxContent, LightboxFrame, LightboxGallery, LightboxImage, LightboxPopup, LightboxPortal, LightboxTrigger, LightboxViewport, createLightboxHandle } from "./Lightbox.js";

package/dist/components/List/List.cjs

@@ -0,0 +1,31 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_List_module = require("./List.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+//#region src/components/List/List.tsx
+function List({ as = "ul", marker, gap = "sm", size = "md", tone = "default", className, role, ...props }) {
+	const Component = as;
+	const resolvedMarker = marker ?? (as === "ol" ? "decimal" : "disc");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		"data-slot": "list-root",
+		"data-gap": gap,
+		"data-marker": resolvedMarker,
+		"data-marker-mode": marker === void 0 ? "auto" : "explicit",
+		"data-size": size,
+		"data-tone": tone,
+		role: role ?? (resolvedMarker === "none" ? "list" : void 0),
+		className: (0, clsx.default)(require_List_module.default.root, className),
+		...props
+	});
+}
+function ListItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		"data-slot": "list-item",
+		className,
+		...props
+	});
+}
+//#endregion
+exports.List = List;
+exports.ListItem = ListItem;

package/dist/components/List/List.css

@@ -0,0 +1,114 @@
+@layer ui.components {
+  .-Rq0Vq_root {
+    --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
+    --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
+    --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
+    --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
+    box-sizing: border-box;
+    color: var(--_list-color);
+    font-family: var(--list-font-family, var(--font-sans));
+    font-size: var(--_list-font-size);
+    font-weight: var(--list-font-weight, var(--weight-regular));
+    line-height: var(--_list-line-height);
+    letter-spacing: var(--list-letter-spacing, 0);
+    overflow-wrap: break-word;
+    margin: 0;
+    padding: 0;
+    list-style-position: outside;
+
+    & > :where(li + li) {
+      margin-block-start: var(--_list-gap);
+    }
+
+    & > :where(li)::marker {
+      color: var(--list-marker-color, currentColor);
+      font-weight: var(--list-marker-font-weight, inherit);
+    }
+
+    &[data-marker="none"] {
+      padding-inline-start: 0;
+      list-style: none;
+    }
+
+    &[data-marker="disc"], &[data-marker="decimal"] {
+      padding-inline-start: var(--list-padding-x, var(--spacing-5));
+    }
+
+    &[data-marker="disc"] {
+      list-style-type: disc;
+    }
+
+    &:is(ul)[data-marker="decimal"], &[data-marker="decimal"][data-marker-mode="explicit"] {
+      list-style-type: decimal;
+    }
+
+    &[data-size="xs"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-xs, var(--text-xs)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-xs, var(--line-height-text-xs)));
+    }
+
+    &[data-size="sm"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-sm, var(--text-sm)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-sm, var(--line-height-text-sm)));
+    }
+
+    &[data-size="md"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
+    }
+
+    &[data-size="lg"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-lg, var(--text-lg)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-lg, var(--line-height-text-lg)));
+    }
+
+    &[data-size="xl"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-xl, var(--text-xl)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-xl, var(--line-height-text-xl)));
+    }
+
+    &[data-tone="default"] {
+      --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
+    }
+
+    &[data-tone="muted"] {
+      --_list-color: var(--list-color, var(--list-muted-color, var(--color-muted-foreground)));
+    }
+
+    &[data-tone="subtle"] {
+      --_list-color: var(--list-color, var(--list-subtle-color, var(--color-secondary-foreground)));
+    }
+
+    &[data-tone="primary"] {
+      --_list-color: var(--list-color, var(--list-primary-color, var(--color-primary)));
+    }
+
+    &[data-tone="destructive"] {
+      --_list-color: var(--list-color, var(--list-destructive-color, var(--color-destructive)));
+    }
+  }
+
+  .-Rq0Vq_root[data-gap="xs"] {
+    --_list-gap: var(--list-gap, var(--list-gap-xs, var(--spacing-1)));
+  }
+
+  .-Rq0Vq_root[data-gap="sm"] {
+    --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
+  }
+
+  .-Rq0Vq_root[data-gap="md"] {
+    --_list-gap: var(--list-gap, var(--list-gap-md, var(--spacing-3)));
+  }
+
+  .-Rq0Vq_root[data-gap="lg"] {
+    --_list-gap: var(--list-gap, var(--list-gap-lg, var(--spacing-4)));
+  }
+
+  .-Rq0Vq_root[data-gap="xl"] {
+    --_list-gap: var(--list-gap, var(--list-gap-xl, var(--spacing-5)));
+  }
+
+  .-Rq0Vq_root[data-gap="2xl"] {
+    --_list-gap: var(--list-gap, var(--list-gap-2xl, var(--spacing-6)));
+  }
+}

package/dist/components/List/List.d.ts

@@ -1,17 +1,39 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from "react";
+
+//#region src/components/List/List.d.ts
+type ListAs = 'ul' | 'ol';
+type ListMarker = 'none' | 'disc' | 'decimal';
+type ListGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ListSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ListTone = 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
 type ListOwnProps = {
-    as?: 'ul' | 'ol';
-    marker?: 'none' | 'disc' | 'decimal';
-    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    tone?: 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
+  as?: ListAs;
+  marker?: ListMarker;
+  gap?: ListGap;
+  size?: ListSize;
+  tone?: ListTone;
 };
 type UnorderedListProps = ListOwnProps & ComponentPropsWithoutRef<'ul'> & {
-    as?: 'ul';
+  as?: 'ul';
 };
 type OrderedListProps = ListOwnProps & ComponentPropsWithoutRef<'ol'> & {
-    as: 'ol';
+  as: 'ol';
 };
-declare function List({ as, marker, gap, size, tone, className, ...props }: UnorderedListProps | OrderedListProps): import("react/jsx-runtime").JSX.Element;
-declare function ListItem({ className, ...props }: ComponentPropsWithoutRef<'li'>): import("react/jsx-runtime").JSX.Element;
-export { List, ListItem };
+type ListProps = UnorderedListProps | OrderedListProps;
+type ListItemProps = ComponentPropsWithoutRef<'li'>;
+declare function List({
+  as,
+  marker,
+  gap,
+  size,
+  tone,
+  className,
+  role,
+  ...props
+}: ListProps): import("react").JSX.Element;
+declare function ListItem({
+  className,
+  ...props
+}: ListItemProps): import("react").JSX.Element;
+//#endregion
+export { List, type ListAs, type ListGap, ListItem, type ListItemProps, type ListMarker, type ListProps, type ListSize, type ListTone };

package/dist/components/List/List.js

@@ -0,0 +1,28 @@
+import List_module_default from "./List.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/List/List.tsx
+function List({ as = "ul", marker, gap = "sm", size = "md", tone = "default", className, role, ...props }) {
+	const Component = as;
+	const resolvedMarker = marker ?? (as === "ol" ? "decimal" : "disc");
+	return /* @__PURE__ */ jsx(Component, {
+		"data-slot": "list-root",
+		"data-gap": gap,
+		"data-marker": resolvedMarker,
+		"data-marker-mode": marker === void 0 ? "auto" : "explicit",
+		"data-size": size,
+		"data-tone": tone,
+		role: role ?? (resolvedMarker === "none" ? "list" : void 0),
+		className: clsx$1(List_module_default.root, className),
+		...props
+	});
+}
+function ListItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "list-item",
+		className,
+		...props
+	});
+}
+//#endregion
+export { List, ListItem };

package/dist/components/List/List.module.cjs

@@ -0,0 +1,5 @@
+import './List.css';
+//#region src/components/List/List.module.css
+var List_module_default = { "root": "-Rq0Vq_root" };
+//#endregion
+exports.default = List_module_default;

package/dist/components/List/List.module.js

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

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

@@ -1 +1 @@
-export * from './List';
+import { List, ListAs, ListGap, ListItem, ListItemProps, ListMarker, ListProps, ListSize, ListTone } from "./List.js";

package/dist/components/Menu/Menu.cjs

@@ -0,0 +1,260 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_Menu_module = require("./Menu.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+let _base_ui_react_menu = require("@base-ui/react/menu");
+//#region src/components/Menu/Menu.tsx
+const MENU_CONTENT_SIDE_OFFSET = 8;
+const Menu = _base_ui_react_menu.Menu.Root;
+const MenuSubmenu = _base_ui_react_menu.Menu.SubmenuRoot;
+const createMenuHandle = _base_ui_react_menu.Menu.createHandle;
+function MenuTrigger({ className, render, ...props }) {
+	const triggerClassName = render ? className : require_mergeClassName.mergeClassName(className, require_Menu_module.default.trigger);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Trigger, {
+		"data-slot": "menu-trigger",
+		render,
+		className: triggerClassName,
+		...props
+	});
+}
+function MenuTriggerIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "menu-trigger-icon",
+		className: (0, clsx.clsx)(require_Menu_module.default.triggerIcon, className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.ChevronDownIcon, { className: require_Menu_module.default.iconSvg })
+	});
+}
+function MenuPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Portal, {
+		"data-slot": "menu-portal",
+		...props
+	});
+}
+function MenuBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Backdrop, {
+		"data-slot": "menu-backdrop",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.backdrop),
+		...props
+	});
+}
+function MenuPositioner({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Positioner, {
+		"data-slot": "menu-positioner",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.positioner),
+		...props
+	});
+}
+function MenuPopup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Popup, {
+		"data-slot": "menu-popup",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.popup),
+		...props
+	});
+}
+function MenuArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Arrow, {
+		"data-slot": "menu-arrow",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.arrow),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrowSvg, { className: require_Menu_module.default.arrowSvg })
+	});
+}
+function MenuViewport({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Viewport, {
+		"data-slot": "menu-viewport",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.viewport),
+		...props
+	});
+}
+function MenuContent({ className, children, showArrow = false, side, sideOffset = MENU_CONTENT_SIDE_OFFSET, align, alignOffset, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPositioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		collisionAvoidance,
+		collisionBoundary,
+		collisionPadding,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuPopup, {
+			className,
+			...props,
+			children: [showArrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuArrow, {}) : null, children]
+		})
+	}) });
+}
+function MenuSubmenuContent({ sideOffset = getSubmenuOffset, alignOffset = getSubmenuOffset, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuContent, {
+		sideOffset,
+		alignOffset,
+		...props
+	});
+}
+function MenuItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Item, {
+		"data-slot": "menu-item",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.item),
+		...props
+	});
+}
+function MenuLinkItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.LinkItem, {
+		"data-slot": "menu-link-item",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.linkItem),
+		...props
+	});
+}
+function MenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Separator, {
+		"data-slot": "menu-separator",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.separator),
+		...props
+	});
+}
+function MenuGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Group, {
+		"data-slot": "menu-group",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.group),
+		...props
+	});
+}
+function MenuGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.GroupLabel, {
+		"data-slot": "menu-group-label",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.groupLabel),
+		...props
+	});
+}
+function MenuSubmenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.SubmenuTrigger, {
+		"data-slot": "menu-submenu-trigger",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.submenuTrigger),
+		...props
+	});
+}
+function MenuSubmenuTriggerIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "menu-submenu-trigger-icon",
+		className: (0, clsx.clsx)(require_Menu_module.default.submenuTriggerIcon, className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.ChevronRightIcon, { className: require_Menu_module.default.iconSvg })
+	});
+}
+function MenuRadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.RadioGroup, {
+		"data-slot": "menu-radio-group",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.radioGroup),
+		...props
+	});
+}
+function MenuRadioItem({ className, indicator, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.RadioItem, {
+		"data-slot": "menu-radio-item",
+		"data-indicator-position": indicator,
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.radioItem),
+		...props
+	});
+}
+function MenuRadioItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.RadioItemIndicator, {
+		"data-slot": "menu-radio-item-indicator",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.radioItemIndicator),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CheckIcon, { className: require_Menu_module.default.itemIndicatorIcon })
+	});
+}
+function MenuCheckboxItem({ className, indicator, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.CheckboxItem, {
+		"data-slot": "menu-checkbox-item",
+		"data-indicator-position": indicator,
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.checkboxItem),
+		...props
+	});
+}
+function MenuCheckboxItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.CheckboxItemIndicator, {
+		"data-slot": "menu-checkbox-item-indicator",
+		className: require_mergeClassName.mergeClassName(className, require_Menu_module.default.checkboxItemIndicator),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CheckIcon, { className: require_Menu_module.default.itemIndicatorIcon })
+	});
+}
+function MenuItemText({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "menu-item-text",
+		className: (0, clsx.clsx)(require_Menu_module.default.itemText, className),
+		...props
+	});
+}
+function MenuItemTextContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "menu-item-text-content",
+		className: (0, clsx.clsx)(require_Menu_module.default.itemTextContent, className),
+		...props
+	});
+}
+function MenuItemTextIcon({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "menu-item-text-icon",
+		className: (0, clsx.clsx)(require_Menu_module.default.itemTextIcon, className),
+		...props
+	});
+}
+function MenuItemTextLabel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "menu-item-text-label",
+		className: (0, clsx.clsx)(require_Menu_module.default.itemTextLabel, className),
+		...props
+	});
+}
+function MenuItemShortcut({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "menu-item-shortcut",
+		className: (0, clsx.clsx)(require_Menu_module.default.itemShortcut, className),
+		...props
+	});
+}
+function getSubmenuOffset({ side }) {
+	return side === "top" || side === "bottom" ? 4 : -4;
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.PopupArrowIcon, {
+		fillClassName: require_Menu_module.default.arrowFill,
+		outerStrokeClassName: require_Menu_module.default.arrowOuterStroke,
+		innerStrokeClassName: require_Menu_module.default.arrowInnerStroke,
+		...props
+	});
+}
+//#endregion
+exports.Menu = Menu;
+exports.MenuArrow = MenuArrow;
+exports.MenuBackdrop = MenuBackdrop;
+exports.MenuCheckboxItem = MenuCheckboxItem;
+exports.MenuCheckboxItemIndicator = MenuCheckboxItemIndicator;
+exports.MenuContent = MenuContent;
+exports.MenuGroup = MenuGroup;
+exports.MenuGroupLabel = MenuGroupLabel;
+exports.MenuItem = MenuItem;
+exports.MenuItemShortcut = MenuItemShortcut;
+exports.MenuItemText = MenuItemText;
+exports.MenuItemTextContent = MenuItemTextContent;
+exports.MenuItemTextIcon = MenuItemTextIcon;
+exports.MenuItemTextLabel = MenuItemTextLabel;
+exports.MenuLinkItem = MenuLinkItem;
+exports.MenuPopup = MenuPopup;
+exports.MenuPortal = MenuPortal;
+exports.MenuPositioner = MenuPositioner;
+exports.MenuRadioGroup = MenuRadioGroup;
+exports.MenuRadioItem = MenuRadioItem;
+exports.MenuRadioItemIndicator = MenuRadioItemIndicator;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuSubmenu = MenuSubmenu;
+exports.MenuSubmenuContent = MenuSubmenuContent;
+exports.MenuSubmenuTrigger = MenuSubmenuTrigger;
+exports.MenuSubmenuTriggerIcon = MenuSubmenuTriggerIcon;
+exports.MenuTrigger = MenuTrigger;
+exports.MenuTriggerIcon = MenuTriggerIcon;
+exports.MenuViewport = MenuViewport;
+exports.createMenuHandle = createMenuHandle;