moduix 0.11.0 → 0.11.1

package/dist/components/Textarea/Textarea.css

@@ -0,0 +1,59 @@
+@layer ui.components {
+  .Wcx2Va_root {
+    box-sizing: border-box;
+    width: var(--textarea-width, 100%);
+    max-width: var(--textarea-max-width, none);
+    min-height: var(--textarea-min-height, 6rem);
+    border: var(--textarea-border-width, var(--border-width-sm)) var(--textarea-border-style, solid)
+      var(--textarea-border-color, var(--color-border));
+    border-radius: var(--textarea-radius, var(--radius-md));
+    padding: var(--textarea-padding-y, .5rem) var(--textarea-padding-x, .875rem);
+    background-color: var(--textarea-bg, var(--color-background));
+    color: var(--textarea-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--textarea-font-size, var(--text-md));
+    line-height: var(--textarea-line-height, var(--line-height-text-md));
+    outline: var(--textarea-focus-ring-width, var(--textarea-border-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--textarea-focus-ring-offset, calc(0px - var(--textarea-border-width, var(--border-width-sm))));
+    resize: var(--textarea-resize, vertical);
+    transition: border-color var(--textarea-transition, var(--transition-default)),
+      outline-color var(--textarea-transition, var(--transition-default)),
+      opacity var(--textarea-transition, var(--transition-default));
+    margin: 0;
+  }
+
+  .Wcx2Va_root::placeholder {
+    color: var(--textarea-placeholder-color, var(--color-muted-foreground));
+  }
+
+  .Wcx2Va_root:focus-visible {
+    outline-color: var(--textarea-focus-ring-color, var(--color-ring));
+  }
+
+  .Wcx2Va_root[data-invalid] {
+    border-color: var(--textarea-border-color-invalid, var(--color-destructive));
+  }
+
+  .Wcx2Va_root[data-invalid]:focus-visible {
+    outline-color: var(--textarea-border-color-invalid, var(--color-destructive));
+  }
+
+  .Wcx2Va_root:is([disabled], [data-disabled]) {
+    pointer-events: none;
+    opacity: var(--textarea-disabled-opacity, var(--opacity-disabled));
+  }
+
+  .Wcx2Va_root:is(:read-only, [data-readonly]) {
+    background-color: var(--textarea-readonly-bg, var(--textarea-bg, var(--color-background)));
+    color: var(--textarea-readonly-color, var(--textarea-color, var(--color-foreground)));
+  }
+
+  @supports (field-sizing: content) {
+    .Wcx2Va_root[data-auto-resize] {
+      field-sizing: content;
+      resize: none;
+      overflow-y: hidden;
+    }
+  }
+}

package/dist/components/Textarea/Textarea.d.ts

@@ -1,7 +1,9 @@
-import { ComponentProps } from 'react';
+import { ComponentProps } from "react";
+
+//#region src/components/Textarea/Textarea.d.ts
 type TextareaProps = ComponentProps<'textarea'> & {
-    autoResize?: boolean;
+  autoResize?: boolean;
 };
-declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
-export { Textarea };
-export type { TextareaProps };
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { Textarea, type TextareaProps };

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,28 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Textarea_module_default from "./Textarea.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { Field } from "@base-ui/react/field";
+import { mergeProps } from "@base-ui/react/merge-props";
+//#region src/components/Textarea/Textarea.tsx
+const assignForwardedRef = (ref, value) => {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+};
+const Textarea = forwardRef(function Textarea({ autoResize = false, className, ...props }, forwardedRef) {
+	const setTextareaRef = useCallback((node) => {
+		assignForwardedRef(forwardedRef, node instanceof HTMLTextAreaElement ? node : null);
+	}, [forwardedRef]);
+	return /* @__PURE__ */ jsx(Field.Control, {
+		ref: setTextareaRef,
+		"data-slot": "textarea-root",
+		"data-auto-resize": autoResize ? "" : void 0,
+		className: mergeClassName(className, Textarea_module_default.root),
+		render: (controlProps) => /* @__PURE__ */ jsx("textarea", { ...mergeProps(controlProps, props) })
+	});
+});
+//#endregion
+export { Textarea };

package/dist/components/Textarea/Textarea.module.cjs

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

package/dist/components/Textarea/Textarea.module.js

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

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

@@ -1,2 +1 @@
-export { Textarea } from './Textarea';
-export type { TextareaProps } from './Textarea';
+import { Textarea, TextareaProps } from "./Textarea.js";

package/dist/components/Toast/Toast.cjs

@@ -0,0 +1,278 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_Toast_module = require("./Toast.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _base_ui_react_toast = require("@base-ui/react/toast");
+//#region src/components/Toast/Toast.tsx
+const DEFAULT_TOAST_PLACEMENT = "bottom-right";
+const DEFAULT_STACK_BEHAVIOR = "stacked";
+const DEFAULT_ANCHORED_SIDE_OFFSET = 8;
+const TOP_TOAST_SWIPE_DIRECTIONS = [
+	"left",
+	"right",
+	"up"
+];
+const BOTTOM_TOAST_SWIPE_DIRECTIONS = [
+	"left",
+	"right",
+	"down"
+];
+const ToastPlacementContext = (0, react.createContext)(DEFAULT_TOAST_PLACEMENT);
+const ToastStackBehaviorContext = (0, react.createContext)(DEFAULT_STACK_BEHAVIOR);
+const ToastStyleContext = (0, react.createContext)("stacked");
+const AnchoredToastManagerContext = (0, react.createContext)(null);
+const createToastManager = _base_ui_react_toast.Toast.createToastManager;
+const useToastManager = _base_ui_react_toast.Toast.useToastManager;
+function isAnchoredToast(toast) {
+	return Boolean(toast.positionerProps?.anchor);
+}
+function getToastSwipeDirection(placement) {
+	return placement.startsWith("top") ? TOP_TOAST_SWIPE_DIRECTIONS : BOTTOM_TOAST_SWIPE_DIRECTIONS;
+}
+function ToastProvider({ children, toastManager, anchoredToastManager, ...props }) {
+	const defaultToastManager = (0, react.useMemo)(() => createToastManager(), []);
+	const defaultAnchoredToastManager = (0, react.useMemo)(() => createToastManager(), []);
+	const resolvedToastManager = toastManager ?? defaultToastManager;
+	const resolvedAnchoredToastManager = anchoredToastManager ?? defaultAnchoredToastManager;
+	const anchoredToast = (0, react.useMemo)(() => createAnchoredToastManager(resolvedAnchoredToastManager), [resolvedAnchoredToastManager]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnchoredToastManagerContext.Provider, {
+		value: anchoredToast,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Provider, {
+			toastManager: resolvedToastManager,
+			...props,
+			children
+		})
+	});
+}
+function ToastPortal({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Portal, {
+		"data-slot": "toast-portal",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.portal),
+		...props
+	});
+}
+function ToastViewport({ className, placement = DEFAULT_TOAST_PLACEMENT, stackBehavior = DEFAULT_STACK_BEHAVIOR, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastPlacementContext.Provider, {
+		value: placement,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastStackBehaviorContext.Provider, {
+			value: stackBehavior,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Viewport, {
+				"data-slot": "toast-viewport",
+				"data-placement": placement,
+				"data-stack-behavior": stackBehavior,
+				className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.viewport),
+				...props
+			})
+		})
+	});
+}
+function ToastRoot(props) {
+	const { className, placement, swipeDirection, toast, ...rootProps } = props;
+	const contextPlacement = (0, react.useContext)(ToastPlacementContext);
+	const stackBehavior = (0, react.useContext)(ToastStackBehaviorContext);
+	const anchored = isAnchoredToast(toast);
+	const resolvedPlacement = placement ?? contextPlacement;
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastStyleContext.Provider, {
+		value: anchored ? "anchored" : "stacked",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Root, {
+			...rootProps,
+			toast,
+			"data-slot": dataSlot ?? (anchored ? "toast-anchored-root" : "toast-root"),
+			"data-placement": resolvedPlacement,
+			"data-stack-behavior": stackBehavior,
+			swipeDirection: anchored ? swipeDirection : swipeDirection ?? getToastSwipeDirection(resolvedPlacement),
+			className: require_mergeClassName.mergeClassName(className, anchored ? require_Toast_module.default.anchoredRoot : require_Toast_module.default.root)
+		})
+	});
+}
+function ToastContent(props) {
+	const { className, ...contentProps } = props;
+	const style = (0, react.useContext)(ToastStyleContext);
+	const stackBehavior = (0, react.useContext)(ToastStackBehaviorContext);
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Content, {
+		...contentProps,
+		"data-slot": dataSlot ?? (style === "anchored" ? "toast-anchored-content" : "toast-content"),
+		"data-stack-behavior": style === "stacked" ? stackBehavior : void 0,
+		className: require_mergeClassName.mergeClassName(className, style === "anchored" ? require_Toast_module.default.anchoredContent : require_Toast_module.default.content)
+	});
+}
+function ToastTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Title, {
+		"data-slot": "toast-title",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.title),
+		...props
+	});
+}
+function ToastDescription(props) {
+	const { className, ...descriptionProps } = props;
+	const style = (0, react.useContext)(ToastStyleContext);
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Description, {
+		...descriptionProps,
+		"data-slot": dataSlot ?? (style === "anchored" ? "toast-anchored-description" : "toast-description"),
+		className: require_mergeClassName.mergeClassName(className, style === "anchored" ? require_Toast_module.default.anchoredDescription : require_Toast_module.default.description)
+	});
+}
+function ToastAction({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Action, {
+		"data-slot": "toast-action",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.action),
+		...props
+	});
+}
+function ToastClose({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Close, {
+		"data-slot": "toast-close",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.close),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CloseIcon, { className: require_Toast_module.default.closeIcon })
+	});
+}
+function ToastPositioner({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Positioner, {
+		"data-slot": "toast-positioner",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.positioner),
+		...props
+	});
+}
+function ToastArrow(props) {
+	const { className, children, ...arrowProps } = props;
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Arrow, {
+		...arrowProps,
+		"data-slot": dataSlot ?? "toast-anchored-arrow",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.anchoredArrow),
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnchoredArrowSvg, { className: require_Toast_module.default.anchoredArrowSvg })
+	});
+}
+function ToastRegion({ className, container, renderToast, placement = DEFAULT_TOAST_PLACEMENT, stackBehavior = DEFAULT_STACK_BEHAVIOR, ...props }) {
+	const { toasts: allToasts } = useToastManager();
+	const toasts = allToasts.filter((toast) => !isAnchoredToast(toast));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastPortal, {
+		container,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastViewport, {
+			placement,
+			stackBehavior,
+			className,
+			...props,
+			children: toasts.map((toast, index) => renderToast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderToast(toast, index) }, toast.id) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToast, { toast }, toast.id))
+		})
+	});
+}
+function ToastAnchoredRegion({ className, container, renderToast, ...props }) {
+	const anchoredToast = (0, react.useContext)(AnchoredToastManagerContext);
+	if (!anchoredToast) throw new Error("ToastAnchoredRegion must be used within ToastProvider.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Provider, {
+		toastManager: anchoredToast.manager,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastAnchoredRegionContent, {
+			className,
+			container,
+			renderToast,
+			...props
+		})
+	});
+}
+function ToastAnchoredRegionContent({ className, container, renderToast, ...props }) {
+	const { toasts } = useToastManager();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastPortal, {
+		container,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Viewport, {
+			"data-slot": "toast-anchored-viewport",
+			className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.anchoredViewport),
+			...props,
+			children: toasts.map((toast, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastPositioner, {
+				toast,
+				className: require_Toast_module.default.anchoredPositioner,
+				children: renderToast ? renderToast(toast, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultAnchoredToast, { toast })
+			}, toast.id))
+		})
+	});
+}
+function DefaultToast({ toast }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastRoot, {
+		toast,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastTitle, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastDescription, {}),
+			toast.actionProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastAction, {}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastClose, { "aria-label": "Close toast" })
+		] })
+	});
+}
+function DefaultAnchoredToast({ toast }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastRoot, {
+		toast,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastArrow, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastDescription, {}) })]
+	});
+}
+function AnchoredArrowSvg(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.PopupArrowIcon, {
+		fillClassName: require_Toast_module.default.anchoredArrowFill,
+		outerStrokeClassName: require_Toast_module.default.anchoredArrowOuterStroke,
+		innerStrokeClassName: require_Toast_module.default.anchoredArrowInnerStroke,
+		...props
+	});
+}
+function createAnchoredToastManager(manager = createToastManager()) {
+	const anchorIds = /* @__PURE__ */ new WeakMap();
+	let idCounter = 0;
+	const show = ({ anchor, id, positionerProps, onRemove, ...options }) => {
+		const resolvedId = anchorIds.get(anchor) ?? id ?? `anchored-${Date.now()}-${++idCounter}`;
+		manager.add({
+			...options,
+			id: resolvedId,
+			positionerProps: {
+				sideOffset: DEFAULT_ANCHORED_SIDE_OFFSET,
+				...positionerProps,
+				anchor
+			},
+			onRemove: () => {
+				if (anchorIds.get(anchor) === resolvedId) anchorIds.delete(anchor);
+				onRemove?.();
+			}
+		});
+		anchorIds.set(anchor, resolvedId);
+		return resolvedId;
+	};
+	const closeByAnchor = (anchor) => {
+		if (!anchor) return;
+		const toastId = anchorIds.get(anchor);
+		if (!toastId) return;
+		manager.close(toastId);
+		anchorIds.delete(anchor);
+	};
+	const closeAll = () => {
+		manager.close();
+	};
+	return {
+		manager,
+		show,
+		closeByAnchor,
+		closeAll
+	};
+}
+function useAnchoredToastManager() {
+	const anchoredToast = (0, react.useContext)(AnchoredToastManagerContext);
+	if (!anchoredToast) throw new Error("useAnchoredToastManager must be used within ToastProvider.");
+	return anchoredToast;
+}
+//#endregion
+exports.ToastAction = ToastAction;
+exports.ToastAnchoredRegion = ToastAnchoredRegion;
+exports.ToastArrow = ToastArrow;
+exports.ToastClose = ToastClose;
+exports.ToastContent = ToastContent;
+exports.ToastDescription = ToastDescription;
+exports.ToastPortal = ToastPortal;
+exports.ToastPositioner = ToastPositioner;
+exports.ToastProvider = ToastProvider;
+exports.ToastRegion = ToastRegion;
+exports.ToastRoot = ToastRoot;
+exports.ToastTitle = ToastTitle;
+exports.ToastViewport = ToastViewport;
+exports.createToastManager = createToastManager;
+exports.useAnchoredToastManager = useAnchoredToastManager;
+exports.useToastManager = useToastManager;