moduix 0.11.0 → 0.11.1

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,2 +1 @@
-export { ToastProvider, ToastPortal, ToastViewport, ToastRoot, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, ToastPositioner, ToastArrow, ToastRegion, ToastAnchoredRegion, createToastManager, useToastManager, useAnchoredToastManager, } from './Toast';
-export type { AnchoredToastOptions, ToastPlacement, ToastStackBehavior } 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;

package/dist/components/Toggle/Toggle.module.js

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

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

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

package/dist/components/ToggleGroup/ToggleGroup.cjs

@@ -0,0 +1,42 @@
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_Toggle = require("../Toggle/Toggle.cjs");
+const require_ToggleGroup_module = require("./ToggleGroup.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _base_ui_react_toggle_group = require("@base-ui/react/toggle-group");
+//#region src/components/ToggleGroup/ToggleGroup.tsx
+const ToggleGroupContext = (0, react.createContext)({
+	variant: "default",
+	size: "md"
+});
+const ToggleGroup = (0, react.forwardRef)(function ToggleGroup({ className, variant = "default", size = "md", ...props }, ref) {
+	const contextValue = (0, react.useMemo)(() => ({
+		variant,
+		size
+	}), [size, variant]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toggle_group.ToggleGroup, {
+			ref,
+			"data-slot": "toggle-group-root",
+			"data-variant": variant,
+			"data-size": size,
+			className: require_mergeClassName.mergeClassName(className, require_ToggleGroup_module.default.root),
+			...props
+		})
+	});
+});
+const ToggleGroupItem = (0, react.forwardRef)(function ToggleGroupItem({ className, variant, size, ...props }, ref) {
+	const inherited = (0, react.useContext)(ToggleGroupContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.Toggle, {
+		ref,
+		"data-slot": "toggle-group-item",
+		variant: variant ?? inherited.variant,
+		size: size ?? inherited.size,
+		className: require_mergeClassName.mergeClassName(className, require_ToggleGroup_module.default.item),
+		...props
+	});
+});
+//#endregion
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;

package/dist/components/ToggleGroup/ToggleGroup.css

@@ -0,0 +1,42 @@
+@layer ui.components {
+  .Y8wHdq_root {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--toggle-group-gap, var(--border-width-sm));
+    padding: var(--toggle-group-padding, .125rem);
+    border: var(--toggle-group-border-width, var(--border-width-sm)) solid
+      var(--toggle-group-border-color, var(--color-border));
+    border-radius: var(--toggle-group-radius, var(--radius-lg));
+    background-color: var(--toggle-group-bg, var(--color-muted));
+    color: var(--toggle-group-color, var(--color-foreground));
+    display: inline-flex;
+  }
+
+  .Y8wHdq_root[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .Y8wHdq_root[data-variant="ghost"] {
+    --toggle-group-bg: var(--toggle-group-ghost-bg, transparent);
+    --toggle-group-border-color: var(--toggle-group-ghost-border-color, transparent);
+    --toggle-group-padding: var(--toggle-group-ghost-padding, 0);
+  }
+
+  .Y8wHdq_root[data-variant="outline"] {
+    --toggle-group-bg: var(--toggle-group-outline-bg, var(--color-background));
+  }
+
+  .Y8wHdq_item {
+    border-radius: var(--toggle-group-item-radius, var(--radius-md));
+    --toggle-default-color: var(--toggle-group-color, var(--color-foreground));
+    --toggle-ghost-color: var(--toggle-group-color, var(--color-foreground));
+    --toggle-outline-color: var(--toggle-group-color, var(--color-foreground));
+    flex: none;
+  }
+
+  .Y8wHdq_root[data-orientation="vertical"] > .Y8wHdq_item {
+    justify-content: flex-start;
+    width: 100%;
+  }
+}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

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