entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/primitives/IconButton/IconButton.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { loadingSpinnerRecipe, iconButtonRecipe } from './IconButton.css.js';
+
+/**
+ * A specialized square button component for displaying icons in editor interfaces.
+ *
+ * Designed for toolbar actions, quick controls, and icon-based interactions.
+ * Always square and sized appropriately for the contained icon.
+ * Supports various border radius options from sharp corners to fully circular.
+ *
+ * @example
+ * ```tsx
+ * // Basic ghost button (default)
+ * <IconButton aria-label="Save file">
+ *   <SaveIcon />
+ * </IconButton>
+ *
+ * // Circular filled button
+ * <IconButton
+ *   variant="filled"
+ *   radius="full"
+ *   size="lg"
+ *   aria-label="Add item"
+ * >
+ *   <AddIcon />
+ * </IconButton>
+ *
+ * // Sharp corners for toolbar
+ * <IconButton
+ *   variant="default"
+ *   radius="none"
+ *   aria-label="Settings"
+ * >
+ *   <SettingsIcon />
+ * </IconButton>
+ *
+ * // Toggle state
+ * <IconButton
+ *   pressed={isVisible}
+ *   radius="sm"
+ *   aria-label="Toggle visibility"
+ *   onClick={toggleVisibility}
+ * >
+ *   <EyeIcon />
+ * </IconButton>
+ * ```
+ */
+const IconButton = /*#__PURE__*/ React.memo(({ children, className, size = 'md', variant = 'ghost', radius = 'md', disabled = false, loading = false, pressed = false, onClick, 'aria-label': ariaLabel, testId, style, ref, ...props }) => {
+    return (jsx("button", { ref: ref, className: cx(iconButtonRecipe({
+            size,
+            variant,
+            radius,
+            pressed: pressed || undefined,
+        }), className), disabled: disabled || loading, onClick: onClick, "aria-label": ariaLabel, "aria-pressed": pressed, "data-testid": testId, style: style, ...props, children: loading ? (jsx("div", { className: loadingSpinnerRecipe({ size }) })) : (children) }));
+});
+IconButton.displayName = 'IconButton';
+
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

package/dist/esm/components/primitives/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../../../../src/components/primitives/IconButton/IconButton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACI;;;;;;;AA4CL;AAGF;;"}

package/dist/esm/components/primitives/Input/Input.css.js

@@ -0,0 +1,12 @@
+import './../../../assets/src/components/primitives/Input/Input.css.ts.vanilla-De5ditYa.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var helperTextRecipe = createRuntimeFn({defaultClassName:'Input_helperTextRecipe__k5jekyb',variantClassNames:{error:{true:'Input_helperTextRecipe_error_true__k5jekyc',false:'Input_helperTextRecipe_error_false__k5jekyd'}},defaultVariants:{error:false},compoundVariants:[]});
+var iconEndStyle = 'Input_iconEndStyle__k5jeky9';
+var iconStartStyle = 'Input_iconStartStyle__k5jeky8';
+var inputContainerStyle = 'Input_inputContainerStyle__k5jeky0';
+var inputRecipe = createRuntimeFn({defaultClassName:'Input_inputRecipe__k5jeky4',variantClassNames:{size:{sm:'Input_inputRecipe_size_sm__k5jeky5',md:'Input_inputRecipe_size_md__k5jeky6',lg:'Input_inputRecipe_size_lg__k5jeky7'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var labelRecipe = createRuntimeFn({defaultClassName:'Input_labelRecipe__k5jeky1',variantClassNames:{disabled:{true:'Input_labelRecipe_disabled_true__k5jeky2',false:'Input_labelRecipe_disabled_false__k5jeky3'}},defaultVariants:{disabled:false},compoundVariants:[]});
+
+export { helperTextRecipe, iconEndStyle, iconStartStyle, inputContainerStyle, inputRecipe, labelRecipe };
+//# sourceMappingURL=Input.css.js.map

package/dist/esm/components/primitives/Input/Input.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/esm/components/primitives/Input/Input.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { inputWrapperRecipe } from '../../form/InputWrapper.css.js';
+import { cx } from '../../../utils/cx.js';
+import React from 'react';
+import { labelRecipe, iconStartStyle, inputRecipe, iconEndStyle, helperTextRecipe, inputContainerStyle } from './Input.css.js';
+
+/**
+ * A versatile input component for text entry in editor interfaces.
+ *
+ * Provides a clean, consistent text input with support for labels, helper text,
+ * icons, and various states. Optimized for editor UIs with compact sizing.
+ *
+ * @example
+ * ```tsx
+ * // Basic text input
+ * <Input
+ *   placeholder="Enter text..."
+ *   value={text}
+ *   onChange={(e) => setText(e.target.value)}
+ * />
+ *
+ * // With label and helper text
+ * <Input
+ *   label="Project Name"
+ *   placeholder="My Project"
+ *   helperText="Choose a unique name for your project"
+ *   value={name}
+ *   onChange={(e) => setName(e.target.value)}
+ * />
+ *
+ * // With icons and error state
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   startIcon={<SearchIcon />}
+ *   error={!!emailError}
+ *   errorMessage={emailError}
+ *   value={email}
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ * ```
+ */
+const Input = ({ value, defaultValue, placeholder, type = 'text', size = 'md', disabled = false, error = false, required = false, readOnly = false, label, helperText, errorMessage, startIcon, endIcon, className, style, onChange, onFocus, onBlur, onKeyDown, testId, ref, ...props }) => {
+    const [focused, setFocused] = React.useState(false);
+    const inputId = React.useId();
+    const handleFocus = (event) => {
+        setFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        onBlur?.(event);
+    };
+    return (jsxs("div", { className: cx(inputContainerStyle, className), style: style, children: [label && (jsxs("label", { htmlFor: inputId, className: labelRecipe({ disabled: disabled || undefined }), children: [label, required && jsx("span", { style: { color: 'var(--accent-error)' }, children: " *" })] })), jsxs("div", { className: inputWrapperRecipe({
+                    size,
+                    error,
+                    disabled,
+                    focused,
+                }), children: [startIcon && jsx("div", { className: iconStartStyle, children: startIcon }), jsx("input", { ref: ref, id: inputId, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, required: required, readOnly: readOnly, className: inputRecipe({ size }), onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, "data-testid": testId, ...props }), endIcon && jsx("div", { className: iconEndStyle, children: endIcon })] }), (helperText ?? (error && errorMessage)) && (jsx("div", { className: helperTextRecipe({ error: error || undefined }), children: error && errorMessage ? errorMessage : helperText }))] }));
+};
+Input.displayName = 'Input';
+
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/esm/components/primitives/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../../src/components/primitives/Input/Input.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAiJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;AACI;AAyBL;AACA;AAEA;;AAEE;AACF;AAEA;;AAEE;AACF;;;;;;AAoBO;AAiCT;AAEA;;"}

package/dist/esm/components/primitives/Paper/Paper.css.js

@@ -0,0 +1,7 @@
+import './../../../assets/src/components/primitives/Paper/Paper.css.ts.vanilla-B_tPWU80.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var paperRecipe = createRuntimeFn({defaultClassName:'Paper_paperRecipe__3dkz7t0',variantClassNames:{elevation:{'0':'Paper_paperRecipe_elevation_0__3dkz7t1','1':'Paper_paperRecipe_elevation_1__3dkz7t2','2':'Paper_paperRecipe_elevation_2__3dkz7t3','3':'Paper_paperRecipe_elevation_3__3dkz7t4'},bordered:{true:'Paper_paperRecipe_bordered_true__3dkz7t5',false:'Paper_paperRecipe_bordered_false__3dkz7t6'},padding:{xs:'Paper_paperRecipe_padding_xs__3dkz7t7',sm:'Paper_paperRecipe_padding_sm__3dkz7t8',md:'Paper_paperRecipe_padding_md__3dkz7t9',lg:'Paper_paperRecipe_padding_lg__3dkz7ta',xl:'Paper_paperRecipe_padding_xl__3dkz7tb',xxl:'Paper_paperRecipe_padding_xxl__3dkz7tc',xxxl:'Paper_paperRecipe_padding_xxxl__3dkz7td'},nestLevel:{'0':'Paper_paperRecipe_nestLevel_0__3dkz7te','1':'Paper_paperRecipe_nestLevel_1__3dkz7tf','2':'Paper_paperRecipe_nestLevel_2__3dkz7tg','3':'Paper_paperRecipe_nestLevel_3__3dkz7th'},expand:{true:'Paper_paperRecipe_expand_true__3dkz7ti',false:'Paper_paperRecipe_expand_false__3dkz7tj'}},defaultVariants:{elevation:1,bordered:false,padding:'md',nestLevel:0,expand:false},compoundVariants:[]});
+
+export { paperRecipe };
+//# sourceMappingURL=Paper.css.js.map

package/dist/esm/components/primitives/Paper/Paper.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paper.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/esm/components/primitives/Paper/Paper.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { paperRecipe } from './Paper.css.js';
+
+/**
+ * A versatile paper component providing surface elevation and visual hierarchy.
+ *
+ * Perfect for creating cards, panels, modals, and any content that needs to stand out
+ * from the background. Supports elevation shadows, automatic background adjustment
+ * for nested components, and flexible spacing control.
+ *
+ * @example
+ * ```tsx
+ * // Basic paper with elevation
+ * <Paper elevation={2} padding="lg">
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here</p>
+ * </Paper>
+ *
+ * // Nested papers with automatic background adjustment
+ * <Paper nestLevel={0} padding="xl">
+ *   <h2>Main Container</h2>
+ *   <Paper nestLevel={1} padding="lg">
+ *     <h3>Nested Section</h3>
+ *     <Paper nestLevel={2} padding="md">
+ *       <p>Deeply nested content</p>
+ *     </Paper>
+ *   </Paper>
+ * </Paper>
+ *
+ * // Bordered paper without shadow
+ * <Paper elevation={0} bordered padding="md">
+ *   <p>Subtle outlined container</p>
+ * </Paper>
+ *
+ * // Full-width expanded paper
+ * <Paper expand elevation={1} padding="lg">
+ *   <header>Full width header</header>
+ *   <main>Main content area</main>
+ * </Paper>
+ *
+ * // Custom radius paper
+ * <Paper elevation={2} customRadius="12px" padding="lg">
+ *   <p>Paper with custom border radius</p>
+ * </Paper>
+ *
+ * // Compact paper for small UI elements
+ * <Paper elevation={1} padding="xs">
+ *   <Icon name="settings" />
+ * </Paper>
+ * ```
+ */
+const Paper = /*#__PURE__*/ React.memo(({ children, elevation = 1, bordered = false, padding = 'md', nestLevel = 0, expand = false, customRadius, className, testId, style, ref, ...htmlProps }) => {
+    const customRadiusStyle = customRadius !== undefined
+        ? {
+            borderRadius: typeof customRadius === 'number'
+                ? `${customRadius}px`
+                : customRadius,
+        }
+        : undefined;
+    return (jsx("div", { ref: ref, className: cx(paperRecipe({
+            elevation,
+            bordered: bordered || undefined,
+            padding,
+            nestLevel,
+            expand: expand || undefined,
+        }), className), "data-testid": testId, style: { ...customRadiusStyle, ...style }, ...htmlProps, children: children }));
+});
+Paper.displayName = 'Paper';
+
+export { Paper };
+//# sourceMappingURL=Paper.js.map

package/dist/esm/components/primitives/Paper/Paper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paper.js","sources":["../../../../../../src/components/primitives/Paper/Paper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CG;;AAgBC;AAEI;AACI;;AAGI;AACL;;;;;;;;;AAuBT;AAGF;;"}

package/dist/esm/components/primitives/Popover/Popover.css.js

@@ -0,0 +1,8 @@
+import './../../../assets/src/components/primitives/Popover/Popover.css.ts.vanilla-DW6aAr57.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var closeButtonStyle = 'Popover_closeButtonStyle__j7aln17';
+var contentPanelRecipe = createRuntimeFn({defaultClassName:'Popover_contentPanelRecipe__j7aln10',variantClassNames:{padding:{none:'Popover_contentPanelRecipe_padding_none__j7aln11',sm:'Popover_contentPanelRecipe_padding_sm__j7aln12',md:'Popover_contentPanelRecipe_padding_md__j7aln13',lg:'Popover_contentPanelRecipe_padding_lg__j7aln14'},visible:{true:'Popover_contentPanelRecipe_visible_true__j7aln15',false:'Popover_contentPanelRecipe_visible_false__j7aln16'}},defaultVariants:{padding:'md',visible:false},compoundVariants:[]});
+
+export { closeButtonStyle, contentPanelRecipe };
+//# sourceMappingURL=Popover.css.js.map

package/dist/esm/components/primitives/Popover/Popover.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/components/primitives/Popover/Popover.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useId, useRef, useState, useCallback, useMemo, createContext, useContext } from 'react';
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useInteractions } from '@floating-ui/react';
+
+// --- Context ---
+const PopoverContext = /*#__PURE__*/ createContext(null);
+function usePopoverContext() {
+    const ctx = useContext(PopoverContext);
+    if (!ctx) {
+        throw new Error('Popover compound components must be used within <Popover>');
+    }
+    return ctx;
+}
+// --- Component ---
+/**
+ * Popover component — a floating content container for interactive content
+ * anchored to a trigger element.
+ *
+ * Uses @floating-ui/react for robust positioning with collision detection,
+ * flip/shift behavior, and scroll-aware auto-updating.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button>Open</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <p>Popover content</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+const Popover = ({ open: openProp, defaultOpen = false, placement = 'bottom-start', offset: offset$1 = 8, closeOnClickOutside = true, closeOnEscape = true, returnFocus = true, portal = true, matchTriggerWidth = false, children, onOpenChange, }) => {
+    const autoId = useId();
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const isOpen = isControlled ? openProp : internalOpen;
+    const handleOpenChange = useCallback((nextOpen) => {
+        if (!isControlled) {
+            setInternalOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+    }, [isControlled, onOpenChange]);
+    const openPopover = useCallback(() => {
+        handleOpenChange(true);
+    }, [handleOpenChange]);
+    const closePopover = useCallback(() => {
+        handleOpenChange(false);
+        if (returnFocus) {
+            triggerRef.current?.focus();
+        }
+    }, [handleOpenChange, returnFocus]);
+    const toggle = useCallback(() => {
+        if (isOpen) {
+            closePopover();
+        }
+        else {
+            openPopover();
+        }
+    }, [isOpen, openPopover, closePopover]);
+    // Floating UI setup
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        placement: placement,
+        middleware: [offset(offset$1), flip(), shift({ padding: 8 })],
+        whileElementsMounted: autoUpdate,
+    });
+    // Interactions
+    const click = useClick(context);
+    const dismiss = useDismiss(context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape,
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        dismiss,
+    ]);
+    const contextValue = useMemo(() => ({
+        isOpen,
+        open: openPopover,
+        close: closePopover,
+        toggle,
+        triggerRef,
+        contentRef,
+        placement,
+        offset: offset$1,
+        portal,
+        matchTriggerWidth,
+        popoverId: autoId,
+        // Floating UI context
+        floatingRefs: refs,
+        floatingStyles,
+        floatingContext: context,
+        getReferenceProps,
+        getFloatingProps,
+    }), [
+        isOpen,
+        openPopover,
+        closePopover,
+        toggle,
+        placement,
+        offset$1,
+        portal,
+        matchTriggerWidth,
+        autoId,
+        refs,
+        floatingStyles,
+        context,
+        getReferenceProps,
+        getFloatingProps,
+    ]);
+    return (jsx(PopoverContext.Provider, { value: contextValue, children: children }));
+};
+Popover.displayName = 'Popover';
+
+export { Popover, usePopoverContext };
+//# sourceMappingURL=Popover.js.map

package/dist/esm/components/primitives/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../../../../src/components/primitives/Popover/Popover.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAwBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;;AAcD;AACA;AACA;;AAGA;;AAGA;;;;AAKI;AACF;AAIF;;AAEA;AAEA;;;AAGI;;AAEJ;AAEA;;AAEI;;;AAEA;;;;;AAMF;AACA;AACA;AACA;AACA;AACD;;AAGD;AACA;AACE;AACA;AACD;AAED;;;AAGC;AAED;;AAGI;AACA;;;;;;;;AAQA;;AAEA;;AAEA;;;AAGD;;;;;;;;;;;;;;;AAgBA;AAGH;AAKF;AAEA;;"}

package/dist/esm/components/primitives/Popover/PopoverClose.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { usePopoverContext } from './Popover.js';
+import { cx } from '../../../utils/cx.js';
+import { closeButtonStyle } from './Popover.css.js';
+
+// --- Close icon ---
+const CloseIcon = () => (jsx("svg", { width: 10, height: 10, viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M1.5 1.5L8.5 8.5M8.5 1.5L1.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+// --- Component ---
+const PopoverClose = ({ children, className, style, testId, ref, ...rest }) => {
+    const { close } = usePopoverContext();
+    const handleClick = useCallback((e) => {
+        e.stopPropagation();
+        close();
+    }, [close]);
+    return (jsx("button", { ref: ref, type: "button", "aria-label": "Close", onClick: handleClick, className: cx(closeButtonStyle, className), style: style, "data-testid": testId, ...rest, children: children ?? jsx(CloseIcon, {}) }));
+};
+PopoverClose.displayName = 'PopoverClose';
+
+export { PopoverClose };
+//# sourceMappingURL=PopoverClose.js.map

package/dist/esm/components/primitives/Popover/PopoverClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverClose.js","sources":["../../../../../../src/components/primitives/Popover/PopoverClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA;AAEA;AAiBA;;AAUE;AAEA;;AAGI;AACF;AAIF;AAcF;AAEA;;"}

package/dist/esm/components/primitives/Popover/PopoverContent.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { FloatingFocusManager } from '@floating-ui/react';
+import { usePopoverContext } from './Popover.js';
+import { cx } from '../../../utils/cx.js';
+import { contentPanelRecipe } from './Popover.css.js';
+
+// --- Component ---
+const PopoverContent = ({ children, width, maxHeight, padding = 'md', className, style, testId, ref: externalRef, ...rest }) => {
+    const { isOpen, contentRef, portal, matchTriggerWidth, popoverId, floatingRefs, floatingStyles, floatingContext, getFloatingProps, } = usePopoverContext();
+    const [visible, setVisible] = useState(false);
+    const contentId = `popover-${popoverId}-content`;
+    // Set ref
+    const setRef = useCallback((node) => {
+        contentRef.current = node;
+        floatingRefs.setFloating(node);
+        if (typeof externalRef === 'function') {
+            externalRef(node);
+        }
+        else if (externalRef && typeof externalRef === 'object') {
+            externalRef.current =
+                node;
+        }
+    }, [contentRef, floatingRefs, externalRef]);
+    // Trigger enter animation on next frame after open
+    useEffect(() => {
+        if (isOpen) {
+            requestAnimationFrame(() => {
+                setVisible(true);
+            });
+        }
+        else {
+            setVisible(false);
+        }
+    }, [isOpen]);
+    if (!isOpen) {
+        return null;
+    }
+    // Get trigger width for matchTriggerWidth
+    const triggerWidth = matchTriggerWidth
+        ? floatingRefs.reference.current
+            ? floatingRefs.reference.current.offsetWidth
+            : undefined
+        : undefined;
+    const computedWidth = matchTriggerWidth ? triggerWidth : width;
+    const floatingProps = getFloatingProps();
+    // Build dimension styles
+    const dimensionStyles = {};
+    if (computedWidth != null) {
+        dimensionStyles.width =
+            typeof computedWidth === 'number' ? `${computedWidth}px` : computedWidth;
+    }
+    if (maxHeight != null) {
+        dimensionStyles.maxHeight =
+            typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
+        dimensionStyles.overflowY = 'auto';
+    }
+    const contentElement = (jsx(FloatingFocusManager, { context: floatingContext, modal: false, children: jsx("div", { ref: setRef, role: "dialog", id: contentId, tabIndex: -1, className: cx(contentPanelRecipe({
+                padding,
+                visible: visible || undefined,
+            }), className), style: {
+                ...floatingStyles,
+                ...dimensionStyles,
+                ...style,
+            }, "data-testid": testId, ...floatingProps, ...rest, children: children }) }));
+    if (portal) {
+        return createPortal(contentElement, document.body);
+    }
+    return contentElement;
+};
+PopoverContent.displayName = 'PopoverContent';
+
+export { PopoverContent };
+//# sourceMappingURL=PopoverContent.js.map

package/dist/esm/components/primitives/Popover/PopoverContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.js","sources":["../../../../../../src/components/primitives/Popover/PopoverContent.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAUA;AAEO;;;AAwBL;;AAGA;AAEI;AACA;AACA;;;AAEO;AACJ;AACC;;;;;;;;AAWJ;;;;;AAIJ;;AAGE;;;;AAKA;AACE;AACA;;;AAKJ;;;AAIA;AACE;AACE;;AAEJ;AACE;AACE;AACF;;AAGF;;;AAWS;AAID;AACA;AACA;;;;;AAeR;AACF;AAEA;;"}

package/dist/esm/components/primitives/Popover/PopoverTrigger.js

@@ -0,0 +1,38 @@
+"use client";
+import React, { useCallback } from 'react';
+import { usePopoverContext } from './Popover.js';
+
+/**
+ * Wraps the trigger element for a Popover.
+ * Clicking the trigger toggles the popover open/closed.
+ */
+const PopoverTrigger = ({ children }) => {
+    const { toggle, isOpen, triggerRef, popoverId, floatingRefs, getReferenceProps, } = usePopoverContext();
+    const contentId = `popover-${popoverId}-content`;
+    const handleClick = useCallback((e) => {
+        e.stopPropagation();
+        toggle();
+    }, [toggle]);
+    const setRef = useCallback((node) => {
+        triggerRef.current = node;
+        floatingRefs.setReference(node);
+    }, [triggerRef, floatingRefs]);
+    // Clone the child element to add props
+    if (!React.isValidElement(children)) {
+        return null;
+    }
+    const referenceProps = getReferenceProps({
+        onClick: handleClick,
+    });
+    return React.cloneElement(children, {
+        ref: setRef,
+        ...referenceProps,
+        'aria-haspopup': 'dialog',
+        'aria-expanded': isOpen,
+        'aria-controls': isOpen ? contentId : undefined,
+    });
+};
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+export { PopoverTrigger };
+//# sourceMappingURL=PopoverTrigger.js.map

package/dist/esm/components/primitives/Popover/PopoverTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverTrigger.js","sources":["../../../../../../src/components/primitives/Popover/PopoverTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAMA;;;AAGG;;AAED;AAQA;AAEA;;AAGI;AACF;AAIF;AAEI;AACA;AACF;;;AAMA;;;AAIA;AACD;AAED;AAGI;AACA;AACA;AACA;;AAED;AAEL;AAEA;;"}

package/dist/esm/components/primitives/Switch/Switch.css.js

@@ -0,0 +1,15 @@
+import './../../../assets/src/components/primitives/Switch/Switch.css.ts.vanilla-CxqwUToB.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var labelTextStyle = 'Switch_labelTextStyle__h3xwyto';
+var switchContainerStyle = 'Switch_switchContainerStyle__h3xwyt0';
+var switchRowRecipe = createRuntimeFn({defaultClassName:'Switch_switchRowRecipe__h3xwyt1',variantClassNames:{size:{sm:'Switch_switchRowRecipe_size_sm__h3xwyt2',md:'Switch_switchRowRecipe_size_md__h3xwyt3',lg:'Switch_switchRowRecipe_size_lg__h3xwyt4'},disabled:{true:'Switch_switchRowRecipe_disabled_true__h3xwyt5',false:'Switch_switchRowRecipe_disabled_false__h3xwyt6'}},defaultVariants:{size:'md',disabled:false},compoundVariants:[]});
+var thumbDiameterVar = 'var(--thumbDiameterVar__h3xwytj)';
+var thumbRecipe = createRuntimeFn({defaultClassName:'Switch_thumbRecipe__h3xwytl',variantClassNames:{checked:{true:'Switch_thumbRecipe_checked_true__h3xwytm',false:'Switch_thumbRecipe_checked_false__h3xwytn'}},defaultVariants:{checked:false},compoundVariants:[]});
+var thumbTranslateVar = 'var(--thumbTranslateVar__h3xwytk)';
+var trackHeightVar = 'var(--trackHeightVar__h3xwyt8)';
+var trackRecipe = createRuntimeFn({defaultClassName:'Switch_trackRecipe__h3xwyt9',variantClassNames:{checked:{true:'Switch_trackRecipe_checked_true__h3xwyta',false:'Switch_trackRecipe_checked_false__h3xwytb'},disabled:{true:'Switch_trackRecipe_disabled_true__h3xwytc',false:'Switch_trackRecipe_disabled_false__h3xwytd'},error:{true:'Switch_trackRecipe_error_true__h3xwyte',false:'Switch_trackRecipe_error_false__h3xwytf'}},defaultVariants:{checked:false,disabled:false,error:false},compoundVariants:[[{error:true,checked:false},'Switch_trackRecipe_compound_0__h3xwytg'],[{disabled:true,checked:true},'Switch_trackRecipe_compound_1__h3xwyth'],[{disabled:true,checked:false},'Switch_trackRecipe_compound_2__h3xwyti']]});
+var trackWidthVar = 'var(--trackWidthVar__h3xwyt7)';
+
+export { labelTextStyle, switchContainerStyle, switchRowRecipe, thumbDiameterVar, thumbRecipe, thumbTranslateVar, trackHeightVar, trackRecipe, trackWidthVar };
+//# sourceMappingURL=Switch.css.js.map

package/dist/esm/components/primitives/Switch/Switch.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/esm/components/primitives/Switch/Switch.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import '../../form/FormLabel.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import '../../form/InputWrapper.js';
+import { cx } from '../../../utils/cx.js';
+import { trackHeightVar, trackWidthVar, thumbTranslateVar, thumbDiameterVar, thumbRecipe, trackRecipe, labelTextStyle, switchRowRecipe, switchContainerStyle } from './Switch.css.js';
+
+const SIZE_MAP = {
+    sm: { trackW: 28, trackH: 14, thumbDiameter: 10, offset: 2 },
+    md: { trackW: 34, trackH: 18, thumbDiameter: 14, offset: 2 },
+    lg: { trackW: 42, trackH: 22, thumbDiameter: 18, offset: 2 },
+};
+/**
+ * Switch component for boolean on/off states in editor toolbars,
+ * settings panels, and property inspectors.
+ *
+ * More space-efficient than Checkbox for toggle options like
+ * "Show Grid", "Snap to Grid", "Auto-Save".
+ *
+ * @example
+ * ```tsx
+ * <Switch label="Show Grid" />
+ * <Switch checked={value} onChange={setValue} label="Auto-save" />
+ * ```
+ */
+const Switch = ({ checked: checkedProp, defaultChecked = false, label, labelPosition = 'right', size = 'md', disabled = false, helperText, error = false, errorMessage, name, onChange, className, style, testId, ref, id: idProp, ...rest }) => {
+    const autoId = useId();
+    const switchId = idProp ?? autoId;
+    const helperId = `${switchId}-helper`;
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isControlled = checkedProp !== undefined;
+    const resolvedChecked = isControlled ? checkedProp : internalChecked;
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        const newChecked = !resolvedChecked;
+        if (!isControlled) {
+            setInternalChecked(newChecked);
+        }
+        onChange?.(newChecked);
+    }, [disabled, resolvedChecked, isControlled, onChange]);
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const config = SIZE_MAP[size];
+    const translateX = config.trackW - config.thumbDiameter - config.offset * 2;
+    const trackInlineVars = assignInlineVars({
+        [trackWidthVar]: `${config.trackW}px`,
+        [trackHeightVar]: `${config.trackH}px`,
+    });
+    const thumbInlineVars = assignInlineVars({
+        [thumbDiameterVar]: `${config.thumbDiameter}px`,
+        [thumbTranslateVar]: `${translateX}px`,
+    });
+    const thumbStyle = !resolvedChecked
+        ? { transform: `translateX(${config.offset}px)` }
+        : {};
+    const track = (jsxs("button", { ref: ref, type: "button", role: "switch", "aria-checked": resolvedChecked, "aria-disabled": disabled || undefined, "aria-describedby": showHelperText ? helperId : undefined, disabled: disabled, onClick: handleClick, className: trackRecipe({
+            checked: resolvedChecked || undefined,
+            disabled: disabled || undefined,
+            error: error || undefined,
+        }), style: trackInlineVars, "data-testid": testId, ...rest, children: [jsx("span", { className: thumbRecipe({
+                    checked: resolvedChecked || undefined,
+                }), style: { ...thumbInlineVars, ...thumbStyle } }), name && (jsx("input", { type: "hidden", name: name, value: resolvedChecked ? 'on' : '' }))] }));
+    if (!label && !showHelperText) {
+        return track;
+    }
+    return (jsxs("div", { className: cx(switchContainerStyle, className), style: style, children: [jsxs("label", { className: switchRowRecipe({
+                    size,
+                    disabled: disabled || undefined,
+                }), children: [labelPosition === 'left' && label && (jsx("span", { className: labelTextStyle, children: label })), track, labelPosition === 'right' && label && (jsx("span", { className: labelTextStyle, children: label }))] }), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+};
+Switch.displayName = 'Switch';
+
+export { Switch };
+//# sourceMappingURL=Switch.js.map

package/dist/esm/components/primitives/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../../../../src/components/primitives/Switch/Switch.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AA+GA;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;AAYG;AACI;AAmBL;AACA;AACA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;AAEA;AACA;;AAGE;AACA;AACD;;AAGC;AACA;AACD;;;;AAMD;;;;AAcK;;AAQE;AASP;AACE;;AAGF;;;;AAuBF;AAEA;;"}