moduix 0.10.0 → 0.11.1

package/dist/components/Toast/Toast.d.ts

@@ -1,47 +1,88 @@
-import { ToastManager as BaseToastManager, ToastObject, Toast as ToastPrimitive } from '@base-ui/react/toast';
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
+import { Toast, ToastManager, ToastObject } from "@base-ui/react/toast";
+
+//#region src/components/Toast/Toast.d.ts
 type ToastPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 type ToastStackBehavior = 'stacked' | 'expanded';
 type ToastItem = ToastObject<any>;
-type AnchoredToastOptions = Omit<Parameters<BaseToastManager['add']>[0], 'id' | 'positionerProps'> & {
-    anchor: Element;
-    id?: string;
-    positionerProps?: NonNullable<Parameters<BaseToastManager['add']>[0]['positionerProps']>;
+type AnchoredToastOptions = Omit<Parameters<ToastManager['add']>[0], 'id' | 'positionerProps'> & {
+  anchor: Element;
+  id?: string;
+  positionerProps?: NonNullable<Parameters<ToastManager['add']>[0]['positionerProps']>;
 };
-declare const createToastManager: typeof ToastPrimitive.createToastManager;
-declare const useToastManager: typeof ToastPrimitive.useToastManager;
-declare function ToastProvider({ children, toastManager, anchoredToastManager, ...props }: ToastPrimitive.Provider.Props & {
-    anchoredToastManager?: BaseToastManager;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ToastPortal({ className, ...props }: ToastPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
-declare function ToastViewport({ className, placement, stackBehavior, ...props }: ToastPrimitive.Viewport.Props & {
-    placement?: ToastPlacement;
-    stackBehavior?: ToastStackBehavior;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ToastRoot(props: ToastPrimitive.Root.Props & {
-    placement?: ToastPlacement;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ToastContent(props: ToastPrimitive.Content.Props): import("react/jsx-runtime").JSX.Element;
-declare function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
-declare function ToastDescription(props: ToastPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
-declare function ToastAction({ className, ...props }: ToastPrimitive.Action.Props): import("react/jsx-runtime").JSX.Element;
-declare function ToastClose({ className, children, ...props }: ToastPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
-declare function ToastPositioner({ className, ...props }: ToastPrimitive.Positioner.Props): import("react/jsx-runtime").JSX.Element;
-declare function ToastArrow(props: ToastPrimitive.Arrow.Props): import("react/jsx-runtime").JSX.Element;
-declare function ToastRegion({ className, container, renderToast, placement, stackBehavior, ...props }: Omit<ToastPrimitive.Viewport.Props, 'children'> & {
-    placement?: ToastPlacement;
-    stackBehavior?: ToastStackBehavior;
-    container?: ToastPrimitive.Portal.Props['container'];
-    renderToast?: (toast: ToastItem, index: number) => ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ToastAnchoredRegion({ className, container, renderToast, ...props }: Omit<ToastPrimitive.Viewport.Props, 'children'> & {
-    container?: ToastPrimitive.Portal.Props['container'];
-    renderToast?: (toast: ToastItem, index: number) => ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+declare const createToastManager: typeof Toast.createToastManager;
+declare const useToastManager: typeof Toast.useToastManager;
+declare function ToastProvider({
+  children,
+  toastManager,
+  anchoredToastManager,
+  ...props
+}: Toast.Provider.Props & {
+  anchoredToastManager?: ToastManager;
+}): import("react").JSX.Element;
+declare function ToastPortal({
+  className,
+  ...props
+}: Toast.Portal.Props): import("react").JSX.Element;
+declare function ToastViewport({
+  className,
+  placement,
+  stackBehavior,
+  ...props
+}: Toast.Viewport.Props & {
+  placement?: ToastPlacement;
+  stackBehavior?: ToastStackBehavior;
+}): import("react").JSX.Element;
+declare function ToastRoot(props: Toast.Root.Props & {
+  placement?: ToastPlacement;
+}): import("react").JSX.Element;
+declare function ToastContent(props: Toast.Content.Props): import("react").JSX.Element;
+declare function ToastTitle({
+  className,
+  ...props
+}: Toast.Title.Props): import("react").JSX.Element;
+declare function ToastDescription(props: Toast.Description.Props): import("react").JSX.Element;
+declare function ToastAction({
+  className,
+  ...props
+}: Toast.Action.Props): import("react").JSX.Element;
+declare function ToastClose({
+  className,
+  children,
+  ...props
+}: Toast.Close.Props): import("react").JSX.Element;
+declare function ToastPositioner({
+  className,
+  ...props
+}: Toast.Positioner.Props): import("react").JSX.Element;
+declare function ToastArrow(props: Toast.Arrow.Props): import("react").JSX.Element;
+declare function ToastRegion({
+  className,
+  container,
+  renderToast,
+  placement,
+  stackBehavior,
+  ...props
+}: Omit<Toast.Viewport.Props, 'children'> & {
+  placement?: ToastPlacement;
+  stackBehavior?: ToastStackBehavior;
+  container?: Toast.Portal.Props['container'];
+  renderToast?: (toast: ToastItem, index: number) => ReactNode;
+}): import("react").JSX.Element;
+declare function ToastAnchoredRegion({
+  className,
+  container,
+  renderToast,
+  ...props
+}: Omit<Toast.Viewport.Props, 'children'> & {
+  container?: Toast.Portal.Props['container'];
+  renderToast?: (toast: ToastItem, index: number) => ReactNode;
+}): import("react").JSX.Element;
 declare function useAnchoredToastManager(): {
-    manager: BaseToastManager;
-    show: (options: AnchoredToastOptions) => string;
-    closeByAnchor: (anchor: Element | null) => void;
-    closeAll: () => void;
+  manager: ToastManager;
+  show: (options: AnchoredToastOptions) => string;
+  closeByAnchor: (anchor: Element | null) => void;
+  closeAll: () => void;
 };
-export { ToastProvider, ToastPortal, ToastViewport, ToastRoot, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, ToastPositioner, ToastArrow, ToastRegion, ToastAnchoredRegion, createToastManager, useToastManager, useAnchoredToastManager, };
+//#endregion
+export { AnchoredToastOptions, ToastAction, ToastAnchoredRegion, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPlacement, ToastPortal, ToastPositioner, ToastProvider, ToastRegion, ToastRoot, ToastStackBehavior, ToastTitle, ToastViewport, createToastManager, useAnchoredToastManager, useToastManager };

package/dist/components/Toast/Toast.js

@@ -0,0 +1,263 @@
+import { CloseIcon, PopupArrowIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Toast_module_default from "./Toast.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, createContext, useContext, useMemo } from "react";
+import { Toast } from "@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 = createContext(DEFAULT_TOAST_PLACEMENT);
+const ToastStackBehaviorContext = createContext(DEFAULT_STACK_BEHAVIOR);
+const ToastStyleContext = createContext("stacked");
+const AnchoredToastManagerContext = createContext(null);
+const createToastManager = Toast.createToastManager;
+const useToastManager = 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 = useMemo(() => createToastManager(), []);
+	const defaultAnchoredToastManager = useMemo(() => createToastManager(), []);
+	const resolvedToastManager = toastManager ?? defaultToastManager;
+	const resolvedAnchoredToastManager = anchoredToastManager ?? defaultAnchoredToastManager;
+	const anchoredToast = useMemo(() => createAnchoredToastManager(resolvedAnchoredToastManager), [resolvedAnchoredToastManager]);
+	return /* @__PURE__ */ jsx(AnchoredToastManagerContext.Provider, {
+		value: anchoredToast,
+		children: /* @__PURE__ */ jsx(Toast.Provider, {
+			toastManager: resolvedToastManager,
+			...props,
+			children
+		})
+	});
+}
+function ToastPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal",
+		className: mergeClassName(className, Toast_module_default.portal),
+		...props
+	});
+}
+function ToastViewport({ className, placement = DEFAULT_TOAST_PLACEMENT, stackBehavior = DEFAULT_STACK_BEHAVIOR, ...props }) {
+	return /* @__PURE__ */ jsx(ToastPlacementContext.Provider, {
+		value: placement,
+		children: /* @__PURE__ */ jsx(ToastStackBehaviorContext.Provider, {
+			value: stackBehavior,
+			children: /* @__PURE__ */ jsx(Toast.Viewport, {
+				"data-slot": "toast-viewport",
+				"data-placement": placement,
+				"data-stack-behavior": stackBehavior,
+				className: mergeClassName(className, Toast_module_default.viewport),
+				...props
+			})
+		})
+	});
+}
+function ToastRoot(props) {
+	const { className, placement, swipeDirection, toast, ...rootProps } = props;
+	const contextPlacement = useContext(ToastPlacementContext);
+	const stackBehavior = useContext(ToastStackBehaviorContext);
+	const anchored = isAnchoredToast(toast);
+	const resolvedPlacement = placement ?? contextPlacement;
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ jsx(ToastStyleContext.Provider, {
+		value: anchored ? "anchored" : "stacked",
+		children: /* @__PURE__ */ jsx(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: mergeClassName(className, anchored ? Toast_module_default.anchoredRoot : Toast_module_default.root)
+		})
+	});
+}
+function ToastContent(props) {
+	const { className, ...contentProps } = props;
+	const style = useContext(ToastStyleContext);
+	const stackBehavior = useContext(ToastStackBehaviorContext);
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ jsx(Toast.Content, {
+		...contentProps,
+		"data-slot": dataSlot ?? (style === "anchored" ? "toast-anchored-content" : "toast-content"),
+		"data-stack-behavior": style === "stacked" ? stackBehavior : void 0,
+		className: mergeClassName(className, style === "anchored" ? Toast_module_default.anchoredContent : Toast_module_default.content)
+	});
+}
+function ToastTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Title, {
+		"data-slot": "toast-title",
+		className: mergeClassName(className, Toast_module_default.title),
+		...props
+	});
+}
+function ToastDescription(props) {
+	const { className, ...descriptionProps } = props;
+	const style = useContext(ToastStyleContext);
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ jsx(Toast.Description, {
+		...descriptionProps,
+		"data-slot": dataSlot ?? (style === "anchored" ? "toast-anchored-description" : "toast-description"),
+		className: mergeClassName(className, style === "anchored" ? Toast_module_default.anchoredDescription : Toast_module_default.description)
+	});
+}
+function ToastAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Action, {
+		"data-slot": "toast-action",
+		className: mergeClassName(className, Toast_module_default.action),
+		...props
+	});
+}
+function ToastClose({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Close, {
+		"data-slot": "toast-close",
+		className: mergeClassName(className, Toast_module_default.close),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, { className: Toast_module_default.closeIcon })
+	});
+}
+function ToastPositioner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Positioner, {
+		"data-slot": "toast-positioner",
+		className: mergeClassName(className, Toast_module_default.positioner),
+		...props
+	});
+}
+function ToastArrow(props) {
+	const { className, children, ...arrowProps } = props;
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ jsx(Toast.Arrow, {
+		...arrowProps,
+		"data-slot": dataSlot ?? "toast-anchored-arrow",
+		className: mergeClassName(className, Toast_module_default.anchoredArrow),
+		children: children ?? /* @__PURE__ */ jsx(AnchoredArrowSvg, { className: 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__ */ jsx(ToastPortal, {
+		container,
+		children: /* @__PURE__ */ jsx(ToastViewport, {
+			placement,
+			stackBehavior,
+			className,
+			...props,
+			children: toasts.map((toast, index) => renderToast ? /* @__PURE__ */ jsx(Fragment$1, { children: renderToast(toast, index) }, toast.id) : /* @__PURE__ */ jsx(DefaultToast, { toast }, toast.id))
+		})
+	});
+}
+function ToastAnchoredRegion({ className, container, renderToast, ...props }) {
+	const anchoredToast = useContext(AnchoredToastManagerContext);
+	if (!anchoredToast) throw new Error("ToastAnchoredRegion must be used within ToastProvider.");
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		toastManager: anchoredToast.manager,
+		children: /* @__PURE__ */ jsx(ToastAnchoredRegionContent, {
+			className,
+			container,
+			renderToast,
+			...props
+		})
+	});
+}
+function ToastAnchoredRegionContent({ className, container, renderToast, ...props }) {
+	const { toasts } = useToastManager();
+	return /* @__PURE__ */ jsx(ToastPortal, {
+		container,
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			"data-slot": "toast-anchored-viewport",
+			className: mergeClassName(className, Toast_module_default.anchoredViewport),
+			...props,
+			children: toasts.map((toast, index) => /* @__PURE__ */ jsx(ToastPositioner, {
+				toast,
+				className: Toast_module_default.anchoredPositioner,
+				children: renderToast ? renderToast(toast, index) : /* @__PURE__ */ jsx(DefaultAnchoredToast, { toast })
+			}, toast.id))
+		})
+	});
+}
+function DefaultToast({ toast }) {
+	return /* @__PURE__ */ jsx(ToastRoot, {
+		toast,
+		children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+			/* @__PURE__ */ jsx(ToastTitle, {}),
+			/* @__PURE__ */ jsx(ToastDescription, {}),
+			toast.actionProps ? /* @__PURE__ */ jsx(ToastAction, {}) : null,
+			/* @__PURE__ */ jsx(ToastClose, { "aria-label": "Close toast" })
+		] })
+	});
+}
+function DefaultAnchoredToast({ toast }) {
+	return /* @__PURE__ */ jsxs(ToastRoot, {
+		toast,
+		children: [/* @__PURE__ */ jsx(ToastArrow, {}), /* @__PURE__ */ jsx(ToastContent, { children: /* @__PURE__ */ jsx(ToastDescription, {}) })]
+	});
+}
+function AnchoredArrowSvg(props) {
+	return /* @__PURE__ */ jsx(PopupArrowIcon, {
+		fillClassName: Toast_module_default.anchoredArrowFill,
+		outerStrokeClassName: Toast_module_default.anchoredArrowOuterStroke,
+		innerStrokeClassName: 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 = useContext(AnchoredToastManagerContext);
+	if (!anchoredToast) throw new Error("useAnchoredToastManager must be used within ToastProvider.");
+	return anchoredToast;
+}
+//#endregion
+export { ToastAction, ToastAnchoredRegion, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastPositioner, ToastProvider, ToastRegion, ToastRoot, ToastTitle, ToastViewport, createToastManager, useAnchoredToastManager, useToastManager };

package/dist/components/Toast/Toast.module.cjs

@@ -0,0 +1,26 @@
+import './Toast.css';
+//#region src/components/Toast/Toast.module.css
+var Toast_module_default = {
+	"action": "xGZ1aG_action",
+	"anchoredArrow": "xGZ1aG_anchoredArrow",
+	"anchoredArrowFill": "xGZ1aG_anchoredArrowFill",
+	"anchoredArrowInnerStroke": "xGZ1aG_anchoredArrowInnerStroke",
+	"anchoredArrowOuterStroke": "xGZ1aG_anchoredArrowOuterStroke",
+	"anchoredArrowSvg": "xGZ1aG_anchoredArrowSvg",
+	"anchoredContent": "xGZ1aG_anchoredContent",
+	"anchoredDescription": "xGZ1aG_anchoredDescription",
+	"anchoredPositioner": "xGZ1aG_anchoredPositioner",
+	"anchoredRoot": "xGZ1aG_anchoredRoot",
+	"anchoredViewport": "xGZ1aG_anchoredViewport",
+	"close": "xGZ1aG_close",
+	"closeIcon": "xGZ1aG_closeIcon",
+	"content": "xGZ1aG_content",
+	"description": "xGZ1aG_description",
+	"portal": "xGZ1aG_portal",
+	"positioner": "xGZ1aG_positioner",
+	"root": "xGZ1aG_root",
+	"title": "xGZ1aG_title",
+	"viewport": "xGZ1aG_viewport"
+};
+//#endregion
+exports.default = Toast_module_default;

package/dist/components/Toast/Toast.module.js

@@ -0,0 +1,26 @@
+import './Toast.css';
+//#region src/components/Toast/Toast.module.css
+var Toast_module_default = {
+	"action": "xGZ1aG_action",
+	"anchoredArrow": "xGZ1aG_anchoredArrow",
+	"anchoredArrowFill": "xGZ1aG_anchoredArrowFill",
+	"anchoredArrowInnerStroke": "xGZ1aG_anchoredArrowInnerStroke",
+	"anchoredArrowOuterStroke": "xGZ1aG_anchoredArrowOuterStroke",
+	"anchoredArrowSvg": "xGZ1aG_anchoredArrowSvg",
+	"anchoredContent": "xGZ1aG_anchoredContent",
+	"anchoredDescription": "xGZ1aG_anchoredDescription",
+	"anchoredPositioner": "xGZ1aG_anchoredPositioner",
+	"anchoredRoot": "xGZ1aG_anchoredRoot",
+	"anchoredViewport": "xGZ1aG_anchoredViewport",
+	"close": "xGZ1aG_close",
+	"closeIcon": "xGZ1aG_closeIcon",
+	"content": "xGZ1aG_content",
+	"description": "xGZ1aG_description",
+	"portal": "xGZ1aG_portal",
+	"positioner": "xGZ1aG_positioner",
+	"root": "xGZ1aG_root",
+	"title": "xGZ1aG_title",
+	"viewport": "xGZ1aG_viewport"
+};
+//#endregion
+export { Toast_module_default as default };

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

@@ -1 +1 @@
-export { ToastProvider, ToastPortal, ToastViewport, ToastRoot, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, ToastPositioner, ToastArrow, ToastRegion, ToastAnchoredRegion, createToastManager, useToastManager, useAnchoredToastManager, } from './Toast';
+import { AnchoredToastOptions, ToastAction, ToastAnchoredRegion, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPlacement, ToastPortal, ToastPositioner, ToastProvider, ToastRegion, ToastRoot, ToastStackBehavior, ToastTitle, ToastViewport, createToastManager, useAnchoredToastManager, useToastManager } from "./Toast.js";

package/dist/components/Toggle/Toggle.cjs

@@ -0,0 +1,18 @@
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_Toggle_module = require("./Toggle.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _base_ui_react_toggle = require("@base-ui/react/toggle");
+//#region src/components/Toggle/Toggle.tsx
+const Toggle = (0, react.forwardRef)(function Toggle({ className, variant = "default", size = "md", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toggle.Toggle, {
+		ref,
+		"data-slot": "toggle-root",
+		"data-variant": variant,
+		"data-size": size,
+		className: require_mergeClassName.mergeClassName(className, require_Toggle_module.default.root),
+		...props
+	});
+});
+//#endregion
+exports.Toggle = Toggle;

package/dist/components/Toggle/Toggle.css

@@ -0,0 +1,147 @@
+@layer ui.components {
+  .XH-hya_root {
+    box-sizing: border-box;
+    --toggle-border-color-current: transparent;
+    --toggle-bg-current: transparent;
+    --toggle-bg-hover-current: var(--toggle-bg-current);
+    --toggle-bg-active-current: var(--toggle-bg-hover-current);
+    --toggle-bg-pressed-current: var(--toggle-bg-current);
+    --toggle-color-current: var(--toggle-color, var(--color-foreground));
+    --toggle-color-pressed-current: var(--toggle-color-current);
+    --toggle-border-color-pressed-current: var(--toggle-border-color-current);
+    justify-content: center;
+    align-items: center;
+    gap: var(--toggle-content-gap, var(--spacing-2));
+    min-height: var(--toggle-size-md, var(--size-lg));
+    border-style: solid;
+    border-width: var(--toggle-border-width, var(--border-width-sm));
+    border-radius: var(--toggle-radius, var(--radius-md));
+    padding-block: var(--toggle-padding-y-md, .5rem);
+    padding-inline: var(--toggle-padding-x-md, 1rem);
+    border-color: var(--toggle-border-color-current);
+    background-color: var(--toggle-bg-current);
+    color: var(--toggle-color-current);
+    font: inherit;
+    font-size: var(--toggle-font-size, var(--text-sm));
+    font-weight: var(--toggle-font-weight, var(--weight-medium));
+    line-height: var(--toggle-line-height, var(--line-height-text-sm));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--toggle-transition, var(--transition-default)),
+      border-color var(--toggle-transition, var(--transition-default)),
+      color var(--toggle-transition, var(--transition-default)),
+      opacity var(--toggle-transition, var(--transition-default));
+    margin: 0;
+    display: inline-flex;
+
+    &:focus-visible {
+      outline: var(--toggle-focus-ring-width, var(--border-width-md)) solid
+        var(--toggle-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toggle-focus-ring-offset, -1px);
+    }
+
+    &[data-disabled], &[disabled] {
+      opacity: var(--toggle-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+      pointer-events: none;
+    }
+
+    & :where(svg) {
+      width: var(--toggle-icon-size, 1rem);
+      height: var(--toggle-icon-size, 1rem);
+      flex-shrink: 0;
+      display: block;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--toggle-bg-hover-current);
+      }
+    }
+
+    &:active {
+      background-color: var(--toggle-bg-active-current);
+    }
+
+    &[data-pressed] {
+      border-color: var(--toggle-border-color-pressed-current);
+      background-color: var(--toggle-bg-pressed-current);
+      color: var(--toggle-color-pressed-current);
+    }
+
+    &[data-variant="default"] {
+      --toggle-border-color-current: var(--toggle-default-border-color, transparent);
+      --toggle-bg-current: var(--toggle-default-bg, transparent);
+      --toggle-bg-hover-current: var(--toggle-default-bg-hover, var(--color-accent));
+      --toggle-bg-active-current: var(--toggle-default-bg-active, var(--color-accent));
+      --toggle-bg-pressed-current: var(--toggle-default-bg-pressed, var(--color-primary));
+      --toggle-color-current: var(--toggle-default-color, var(--toggle-color, var(--color-foreground)));
+      --toggle-color-pressed-current: var(--toggle-default-color-pressed, var(--color-primary-foreground));
+      --toggle-border-color-pressed-current: var(--toggle-default-border-color-pressed, var(--color-primary));
+    }
+
+    &[data-variant="outline"] {
+      --toggle-border-color-current: var(--toggle-outline-border-color, var(--color-border));
+      --toggle-bg-current: var(--toggle-outline-bg, var(--color-background));
+      --toggle-bg-hover-current: var(--toggle-outline-bg-hover, var(--color-accent));
+      --toggle-bg-active-current: var(--toggle-outline-bg-active, var(--color-accent));
+      --toggle-bg-pressed-current: var(--toggle-outline-bg-pressed, var(--color-primary));
+      --toggle-color-current: var(--toggle-outline-color, var(--toggle-color, var(--color-foreground)));
+      --toggle-color-pressed-current: var(--toggle-outline-color-pressed, var(--color-primary-foreground));
+      --toggle-border-color-pressed-current: var(--toggle-outline-border-color-pressed, var(--color-primary));
+    }
+
+    &[data-variant="ghost"] {
+      --toggle-border-color-current: var(--toggle-ghost-border-color, transparent);
+      --toggle-bg-current: var(--toggle-ghost-bg, transparent);
+      --toggle-bg-hover-current: var(--toggle-ghost-bg-hover, var(--color-accent));
+      --toggle-bg-active-current: var(--toggle-ghost-bg-active, var(--color-accent));
+      --toggle-bg-pressed-current: var(--toggle-ghost-bg-pressed, var(--color-accent));
+      --toggle-color-current: var(--toggle-ghost-color, var(--toggle-color, var(--color-foreground)));
+      --toggle-color-pressed-current: var(--toggle-ghost-color-pressed, var(--color-foreground));
+    }
+
+    &[data-size="xs"] {
+      min-height: var(--toggle-size-xs, var(--size-xs));
+      padding-block: var(--toggle-padding-y-xs, .25rem);
+      padding-inline: var(--toggle-padding-x-xs, .625rem);
+      font-size: var(--toggle-font-size-xs, var(--text-xs));
+      line-height: var(--toggle-line-height-xs, var(--line-height-text-xs));
+    }
+
+    &[data-size="sm"] {
+      min-height: var(--toggle-size-sm, var(--size-sm));
+      padding-block: var(--toggle-padding-y-sm, .375rem);
+      padding-inline: var(--toggle-padding-x-sm, .75rem);
+    }
+
+    &[data-size="lg"] {
+      min-height: var(--toggle-size-lg, var(--size-xl));
+      padding-block: var(--toggle-padding-y-lg, .625rem);
+      padding-inline: var(--toggle-padding-x-lg, 1.25rem);
+      font-size: var(--toggle-font-size-lg, var(--text-md));
+      line-height: var(--toggle-line-height-lg, var(--line-height-text-md));
+    }
+
+    &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
+      gap: 0;
+      padding: 0;
+    }
+
+    &[data-size="icon-sm"] {
+      width: var(--toggle-size-icon-sm, var(--size-sm));
+      height: var(--toggle-size-icon-sm, var(--size-sm));
+    }
+
+    &[data-size="icon-md"] {
+      width: var(--toggle-size-icon-md, var(--size-lg));
+      height: var(--toggle-size-icon-md, var(--size-lg));
+    }
+
+    &[data-size="icon-lg"] {
+      width: var(--toggle-size-icon-lg, var(--size-xl));
+      height: var(--toggle-size-icon-lg, var(--size-xl));
+    }
+  }
+}

package/dist/components/Toggle/Toggle.d.ts

@@ -1,8 +1,11 @@
-import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { Toggle } from "@base-ui/react/toggle";
+
+//#region src/components/Toggle/Toggle.d.ts
 type ToggleVariant = 'default' | 'outline' | 'ghost';
 type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
-declare const Toggle: import('react').ForwardRefExoticComponent<Omit<TogglePrimitive.Props<string> & {
-    variant?: ToggleVariant;
-    size?: ToggleSize;
-}, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-export { Toggle };
+declare const Toggle$1: import("react").ForwardRefExoticComponent<Omit<Toggle.Props<string> & {
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Toggle$1 as Toggle };

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,18 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Toggle_module_default from "./Toggle.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/Toggle/Toggle.tsx
+const Toggle$1 = forwardRef(function Toggle$2({ className, variant = "default", size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toggle, {
+		ref,
+		"data-slot": "toggle-root",
+		"data-variant": variant,
+		"data-size": size,
+		className: mergeClassName(className, Toggle_module_default.root),
+		...props
+	});
+});
+//#endregion
+export { Toggle$1 as Toggle };

package/dist/components/Toggle/Toggle.module.cjs

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