entangle-ui 0.3.0 → 0.5.0

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

@@ -1,38 +1,10 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import styled from '@emotion/styled';
 import { usePopoverContext } from './Popover.js';
+import { cx } from '../../../utils/cx.js';
+import { closeButtonStyle } from './Popover.css.js';
 
-// --- Styled ---
-const StyledCloseButton = styled.button `
-  /* Reset */
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  font-family: inherit;
-  outline: none;
-  cursor: pointer;
-
-  /* Layout */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  color: ${props => props.theme.colors.text.muted};
-  transition: background ${props => props.theme.transitions.fast};
-
-  &:hover {
-    background: ${props => props.theme.colors.surface.hover};
-    color: ${props => props.theme.colors.text.primary};
-  }
-
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-`;
 // --- 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 ---
@@ -42,7 +14,7 @@ const PopoverClose = ({ children, className, style, testId, ref, ...rest }) => {
         e.stopPropagation();
         close();
     }, [close]);
-    return (jsx(StyledCloseButton, { ref: ref, type: "button", "aria-label": "Close", onClick: handleClick, className: className, style: style, "data-testid": testId, ...rest, children: children ?? jsx(CloseIcon, {}) }));
+    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';
 

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverClose.js","sources":["../../../../../../src/components/primitives/Popover/PopoverClose.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAKA;AAEA,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;;mBAgBpB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;WAC5C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;2BACtB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAA;;;kBAG9C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;aAC9C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAA;;;;kBAInC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA;;CAEnD;AAED;AAEA,MAAM,SAAS,GAAa,OAC1BA,GAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAAA,QAAA,EAElBA,cACE,CAAC,EAAC,kCAAkC,EACpC,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,CAAA,EAAA,CACE,CACP;AAED;MAEa,YAAY,GAAgC,CAAC,EACxD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,iBAAiB,EAAE;AAErC,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,CAAsC,KAAI;QACzC,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,KAAK,EAAE;AACT,KAAC,EACD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,QACEA,GAAC,CAAA,iBAAiB,EAChB,EAAA,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACF,YAAA,EAAA,OAAO,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,iBACC,MAAM,EAAA,GACf,IAAI,EAAA,QAAA,EAEP,QAAQ,IAAIA,GAAA,CAAC,SAAS,EAAG,EAAA,CAAA,EAAA,CACR;AAExB;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"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

@@ -1,53 +1,12 @@
+"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 styled from '@emotion/styled';
 import { usePopoverContext } from './Popover.js';
+import { cx } from '../../../utils/cx.js';
+import { contentPanelRecipe } from './Popover.css.js';
 
-const PADDING_MAP = {
-    none: '0',
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-};
-const StyledContentPanel = styled.div `
-  z-index: ${props => props.theme.zIndex.popover};
-
-  background: ${props => props.theme.colors.background.elevated};
-  border: 1px solid ${props => props.theme.colors.border.default};
-  border-radius: ${props => props.theme.borderRadius.lg}px;
-  box-shadow: ${props => props.theme.shadows.lg};
-  color: ${props => props.theme.colors.text.primary};
-  font-size: ${props => props.theme.typography.fontSize.sm}px;
-  font-family: ${props => props.theme.typography.fontFamily.sans};
-
-  padding: ${props => {
-    const key = PADDING_MAP[props.$padding];
-    if (key === '0')
-        return '0';
-    return `${props.theme.spacing[key]}px`;
-}};
-
-  ${props => props.$width != null
-    ? `width: ${typeof props.$width === 'number' ? `${props.$width}px` : props.$width};`
-    : ''}
-  ${props => props.$maxHeight != null
-    ? `max-height: ${typeof props.$maxHeight === 'number' ? `${props.$maxHeight}px` : props.$maxHeight}; overflow-y: auto;`
-    : ''}
-
-  /* Animation */
-  transition:
-    opacity ${props => props.theme.transitions.fast},
-    transform ${props => props.theme.transitions.fast};
-  opacity: ${props => (props.$visible ? 1 : 0)};
-  transform: ${props => (props.$visible ? 'scale(1)' : 'scale(0.96)')};
-  pointer-events: ${props => (props.$visible ? 'auto' : 'none')};
-
-  &:focus {
-    outline: none;
-  }
-`;
 // --- 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();
@@ -87,8 +46,23 @@ const PopoverContent = ({ children, width, maxHeight, padding = 'md', className,
         : undefined;
     const computedWidth = matchTriggerWidth ? triggerWidth : width;
     const floatingProps = getFloatingProps();
-    const contentElement = (jsx(FloatingFocusManager, { context: floatingContext, modal: false, children: jsx(StyledContentPanel, { ref: setRef, role: "dialog", id: contentId, tabIndex: -1, "$width": computedWidth, "$maxHeight": maxHeight, "$padding": padding, "$visible": visible, className: className, style: {
+    // 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) {

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.js","sources":["../../../../../../src/components/primitives/Popover/PopoverContent.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"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

@@ -1,3 +1,4 @@
+"use client";
 import React, { useCallback } from 'react';
 import { usePopoverContext } from './Popover.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverTrigger.js","sources":["../../../../../../src/components/primitives/Popover/PopoverTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;AAGG;MACU,cAAc,GAAkC,CAAC,EAAE,QAAQ,EAAE,KAAI;AAC5E,IAAA,MAAM,EACJ,MAAM,EACN,MAAM,EACN,UAAU,EACV,SAAS,EACT,YAAY,EACZ,iBAAiB,GAClB,GAAG,iBAAiB,EAAE;AACvB,IAAA,MAAM,SAAS,GAAG,CAAW,QAAA,EAAA,SAAS,UAAU;AAEhD,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,CAAmB,KAAI;QACtB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,MAAM,EAAE;AACV,KAAC,EACD,CAAC,MAAM,CAAC,CACT;AAED,IAAA,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,IAAwB,KAAI;AAC3B,QAAA,UAAU,CAAC,OAAO,GAAG,IAAI;AACzB,QAAA,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC;AACjC,KAAC,EACD,CAAC,UAAU,EAAE,YAAY,CAAC,CAC3B;;IAGD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;AACnC,QAAA,OAAO,IAAI;;IAGb,MAAM,cAAc,GAAG,iBAAiB,CAAC;AACvC,QAAA,OAAO,EAAE,WAAW;AACrB,KAAA,CAAC;AAEF,IAAA,OAAO,KAAK,CAAC,YAAY,CACvB,QAAuD,EACvD;AACE,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,GAAG,cAAc;AACjB,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS;AAChD,KAAA,CACF;AACH;AAEA,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"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

@@ -1,133 +1,18 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useState, useCallback } from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+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 },
 };
-const FONT_SIZE_MAP = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-};
-// --- Styled components ---
-const StyledSwitchContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-`;
-const StyledSwitchRow = styled.label `
-  display: inline-flex;
-  align-items: center;
-  gap: ${props => props.theme.spacing.sm}px;
-  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
-  flex-direction: ${props => (props.$labelPosition === 'left' ? 'row' : 'row')};
-  font-size: ${props => props.theme.typography.fontSize[FONT_SIZE_MAP[props.$size]]}px;
-  color: ${props => props.$disabled
-    ? props.theme.colors.text.disabled
-    : props.theme.colors.text.secondary};
-  line-height: ${props => props.theme.typography.lineHeight.normal};
-  user-select: none;
-`;
-const StyledLabelText = styled.span `
-  order: ${props => props.$order};
-`;
-const StyledTrack = styled.button `
-  /* Reset */
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  outline: none;
-  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
-
-  /* Layout */
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  flex-shrink: 0;
-
-  /* Sizing */
-  width: ${props => SIZE_MAP[props.$size].trackW}px;
-  height: ${props => SIZE_MAP[props.$size].trackH}px;
-  border-radius: ${props => SIZE_MAP[props.$size].trackH}px;
-  transition:
-    background-color ${props => props.theme.transitions.fast},
-    border-color ${props => props.theme.transitions.fast};
-
-  /* State styles */
-  ${props => {
-    const { colors } = props.theme;
-    if (props.$disabled) {
-        return `
-        opacity: 0.5;
-        background: ${props.$checked ? colors.accent.primary : colors.surface.active};
-        border: 1px solid ${props.$checked ? 'transparent' : colors.border.default};
-      `;
-    }
-    if (props.$error && !props.$checked) {
-        return `
-        background: ${colors.surface.active};
-        border: 1px solid ${colors.accent.error};
-        &:hover {
-          background: ${colors.surface.hover};
-        }
-      `;
-    }
-    if (props.$checked) {
-        return `
-        background: ${colors.accent.primary};
-        border: 1px solid transparent;
-        &:hover {
-          background: ${colors.accent.secondary};
-        }
-      `;
-    }
-    return `
-      background: ${colors.surface.active};
-      border: 1px solid ${colors.border.default};
-      &:hover {
-        background: ${colors.surface.hover};
-      }
-    `;
-}}
-
-  /* Focus visible */
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-
-  /* Disabled */
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-const StyledThumb = styled.span `
-  position: absolute;
-  border-radius: 50%;
-  transition: transform ${props => props.theme.transitions.fast};
-
-  width: ${props => SIZE_MAP[props.$size].thumbDiameter}px;
-  height: ${props => SIZE_MAP[props.$size].thumbDiameter}px;
-
-  background: ${props => props.$checked ? 'white' : props.theme.colors.text.muted};
-
-  ${props => {
-    const config = SIZE_MAP[props.$size];
-    const translateX = config.trackW - config.thumbDiameter - config.offset * 2;
-    return `
-      transform: translateX(${props.$checked ? translateX : config.offset}px);
-    `;
-}}
-`;
 /**
  * Switch component for boolean on/off states in editor toolbars,
  * settings panels, and property inspectors.
@@ -141,7 +26,7 @@ const StyledThumb = styled.span `
  * <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, css, testId, ref, id: idProp, ...rest }) => {
+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`;
@@ -158,11 +43,33 @@ const Switch = ({ checked: checkedProp, defaultChecked = false, label, labelPosi
         onChange?.(newChecked);
     }, [disabled, resolvedChecked, isControlled, onChange]);
     const showHelperText = error && errorMessage ? errorMessage : helperText;
-    const track = (jsxs(StyledTrack, { ref: ref, type: "button", role: "switch", "aria-checked": resolvedChecked, "aria-disabled": disabled || undefined, "aria-describedby": showHelperText ? helperId : undefined, disabled: disabled, onClick: handleClick, "$size": size, "$checked": resolvedChecked, "$disabled": disabled, "$error": error, "$css": css, "data-testid": testId, ...rest, children: [jsx(StyledThumb, { "$size": size, "$checked": resolvedChecked }), name && (jsx("input", { type: "hidden", name: name, value: resolvedChecked ? 'on' : '' }))] }));
+    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(StyledSwitchContainer, { className: className, style: style, children: [jsxs(StyledSwitchRow, { "$labelPosition": labelPosition, "$disabled": disabled, "$size": size, children: [labelPosition === 'left' && label && (jsx(StyledLabelText, { "$order": 0, children: label })), track, labelPosition === 'right' && label && (jsx(StyledLabelText, { "$order": 1, children: label }))] }), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+    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';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../../../src/components/primitives/Switch/Switch.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"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;;"}

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

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/primitives/Text/Text.css.ts.vanilla-qTMvgKKC.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var textRecipe = createRuntimeFn({defaultClassName:'Text_textRecipe__1buvrbk0',variantClassNames:{variant:{display:'Text_textRecipe_variant_display__1buvrbk1',heading:'Text_textRecipe_variant_heading__1buvrbk2',subheading:'Text_textRecipe_variant_subheading__1buvrbk3',body:'Text_textRecipe_variant_body__1buvrbk4',caption:'Text_textRecipe_variant_caption__1buvrbk5',code:'Text_textRecipe_variant_code__1buvrbk6',inherit:'Text_textRecipe_variant_inherit__1buvrbk7'},color:{primary:'Text_textRecipe_color_primary__1buvrbk8',secondary:'Text_textRecipe_color_secondary__1buvrbk9',muted:'Text_textRecipe_color_muted__1buvrbka',disabled:'Text_textRecipe_color_disabled__1buvrbkb',accent:'Text_textRecipe_color_accent__1buvrbkc',success:'Text_textRecipe_color_success__1buvrbkd',warning:'Text_textRecipe_color_warning__1buvrbke',error:'Text_textRecipe_color_error__1buvrbkf'},size:{xs:'Text_textRecipe_size_xs__1buvrbkg',sm:'Text_textRecipe_size_sm__1buvrbkh',md:'Text_textRecipe_size_md__1buvrbki',lg:'Text_textRecipe_size_lg__1buvrbkj',xl:'Text_textRecipe_size_xl__1buvrbkk'},weight:{normal:'Text_textRecipe_weight_normal__1buvrbkl',medium:'Text_textRecipe_weight_medium__1buvrbkm',semibold:'Text_textRecipe_weight_semibold__1buvrbkn'},lineHeight:{tight:'Text_textRecipe_lineHeight_tight__1buvrbko',normal:'Text_textRecipe_lineHeight_normal__1buvrbkp',relaxed:'Text_textRecipe_lineHeight_relaxed__1buvrbkq'},align:{left:'Text_textRecipe_align_left__1buvrbkr',center:'Text_textRecipe_align_center__1buvrbks',right:'Text_textRecipe_align_right__1buvrbkt',justify:'Text_textRecipe_align_justify__1buvrbku'},nowrap:{true:'Text_textRecipe_nowrap_true__1buvrbkv',false:'Text_textRecipe_nowrap_false__1buvrbkw'},mono:{true:'Text_textRecipe_mono_true__1buvrbkx',false:'Text_textRecipe_mono_false__1buvrbky'},truncate:{true:'Text_textRecipe_truncate_true__1buvrbkz',false:'Text_textRecipe_truncate_false__1buvrbk10'}},defaultVariants:{variant:'body',color:'primary',nowrap:false,mono:false,truncate:false},compoundVariants:[]});
+var truncateMultiLineStyle = 'Text_truncateMultiLineStyle__1buvrbk12';
+var truncateSingleLineStyle = 'Text_truncateSingleLineStyle__1buvrbk11';
+
+export { textRecipe, truncateMultiLineStyle, truncateSingleLineStyle };
+//# sourceMappingURL=Text.css.js.map

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

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

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

@@ -1,130 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+import { cx } from '../../../utils/cx.js';
+import { truncateMultiLineStyle, truncateSingleLineStyle, textRecipe } from './Text.css.js';
 
-const StyledText = styled.span `
-  /* Reset */
-  margin: 0;
-  padding: 0;
-
-  /* Font family */
-  font-family: ${props => props.$mono || props.$variant === 'code'
-    ? props.theme.typography.fontFamily.mono
-    : props.theme.typography.fontFamily.sans};
-
-  /* Variant-based styling */
-  ${props => {
-    if (props.$variant === 'inherit') {
-        return '';
-    }
-    const variants = {
-        display: {
-            fontSize: props.theme.typography.fontSize.xl,
-            fontWeight: props.theme.typography.fontWeight.semibold,
-            lineHeight: props.theme.typography.lineHeight.tight,
-        },
-        heading: {
-            fontSize: props.theme.typography.fontSize.lg,
-            fontWeight: props.theme.typography.fontWeight.medium,
-            lineHeight: props.theme.typography.lineHeight.tight,
-        },
-        subheading: {
-            fontSize: props.theme.typography.fontSize.md,
-            fontWeight: props.theme.typography.fontWeight.medium,
-            lineHeight: props.theme.typography.lineHeight.normal,
-        },
-        body: {
-            fontSize: props.theme.typography.fontSize.sm,
-            fontWeight: props.theme.typography.fontWeight.normal,
-            lineHeight: props.theme.typography.lineHeight.normal,
-        },
-        caption: {
-            fontSize: props.theme.typography.fontSize.xs,
-            fontWeight: props.theme.typography.fontWeight.normal,
-            lineHeight: props.theme.typography.lineHeight.tight,
-        },
-        code: {
-            fontSize: props.theme.typography.fontSize.sm,
-            fontWeight: props.theme.typography.fontWeight.normal,
-            lineHeight: props.theme.typography.lineHeight.normal,
-        },
-    };
-    const variant = variants[props.$variant];
-    if (!variant)
-        return '';
-    return `
-      font-size: ${variant.fontSize}px;
-      font-weight: ${variant.fontWeight};
-      line-height: ${variant.lineHeight};
-    `;
-}}
-
-  /* Size override */
-  ${props => props.$size &&
-    props.$variant !== 'inherit' &&
-    `
-    font-size: ${props.theme.typography.fontSize[props.$size]}px;
-  `}
-
-  /* Weight override */
-  ${props => props.$weight &&
-    props.$variant !== 'inherit' &&
-    `
-    font-weight: ${props.theme.typography.fontWeight[props.$weight]};
-  `}
-
-  /* Line height override */
-  ${props => props.$lineHeight &&
-    props.$variant !== 'inherit' &&
-    `
-    line-height: ${props.theme.typography.lineHeight[props.$lineHeight]};
-  `}
-
-  /* Color */
-  color: ${props => {
-    const colorMap = {
-        primary: props.theme.colors.text.primary,
-        secondary: props.theme.colors.text.secondary,
-        muted: props.theme.colors.text.muted,
-        disabled: props.theme.colors.text.disabled,
-        accent: props.theme.colors.accent.primary,
-        success: props.theme.colors.accent.success,
-        warning: props.theme.colors.accent.warning,
-        error: props.theme.colors.accent.error,
-    };
-    return colorMap[props.$color];
-}};
-
-  /* Text alignment */
-  ${props => props.$align && `text-align: ${props.$align};`}
-
-  /* No wrap */
-  ${props => props.$nowrap && 'white-space: nowrap;'}
-
-  /* Truncation */
-  ${props => props.$truncate &&
-    !props.$maxLines &&
-    `
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `}
-
-  /* Multi-line truncation */
-  ${props => props.$truncate &&
-    props.$maxLines &&
-    `
-    display: -webkit-box;
-    -webkit-line-clamp: ${props.$maxLines};
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `}
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
 /**
  * A versatile text component for consistent typography in editor interfaces.
  *
@@ -157,8 +36,23 @@ const StyledText = styled.span `
  * <Text as="label" variant="caption">Form label</Text>
  * ```
  */
-const Text = /*#__PURE__*/ React.memo(({ children, as = 'span', variant = 'body', size, weight, color = 'primary', lineHeight, align, truncate = false, maxLines, nowrap = false, mono = false, className, style, css, ref, ...rest }) => {
-    return (jsx(StyledText, { ref: ref, as: as, "$variant": variant, "$size": size, "$weight": weight, "$color": color, "$lineHeight": lineHeight, "$align": align, "$truncate": truncate, "$maxLines": maxLines, "$nowrap": nowrap, "$mono": mono, "$css": css, className: className, style: style, ...rest, children: children }));
+const Text = /*#__PURE__*/ React.memo(({ children, as: Component = 'span', variant = 'body', size, weight, color = 'primary', lineHeight, align, truncate = false, maxLines, nowrap = false, mono = false, className, style, testId, ref, ...rest }) => {
+    // Only pass size/weight/lineHeight overrides when variant is not 'inherit'
+    const sizeVariant = size && variant !== 'inherit' ? size : undefined;
+    const weightVariant = weight && variant !== 'inherit' ? weight : undefined;
+    const lineHeightVariant = lineHeight && variant !== 'inherit' ? lineHeight : undefined;
+    const truncateStyle = truncate && maxLines ? { WebkitLineClamp: maxLines } : undefined;
+    return (jsx(Component, { ref: ref, className: cx(textRecipe({
+            variant,
+            color,
+            size: sizeVariant,
+            weight: weightVariant,
+            lineHeight: lineHeightVariant,
+            align,
+            nowrap: nowrap || undefined,
+            mono: mono || variant === 'code' ? true : undefined,
+            truncate: truncate || undefined,
+        }), truncate && !maxLines && truncateSingleLineStyle, truncate && maxLines ? truncateMultiLineStyle : undefined, className), style: { ...truncateStyle, ...style }, "data-testid": testId, ...rest, children: children }));
 });
 Text.displayName = 'Text';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../../../src/components/primitives/Text/Text.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Text.js","sources":["../../../../../../src/components/primitives/Text/Text.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAiLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACI;;AAqBH;AACA;AACA;AAGA;AAGA;;;AAOQ;AACA;AACA;;;AAGA;;AAED;AAYT;AAGF;;"}

package/dist/esm/components/primitives/Tooltip/Arrow.js

@@ -1,52 +1,19 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
-import { Tooltip } from '@base-ui-components/react/tooltip';
+import React from 'react';
+import { Tooltip } from '@base-ui/react/tooltip';
+import { cx } from '../../../utils/cx.js';
+import { tooltipArrowStyle, arrowFillStyle } from './Tooltip.css.js';
 
 const ArrowSvg = (props) => {
     return (jsx("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", style: {
             // Improve SVG rendering quality
             shapeRendering: 'geometricPrecision',
             imageRendering: 'crisp-edges',
-        }, ...props, children: jsx(ArrowFill, { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z" }) }));
+        }, ...props, children: jsx("path", { className: arrowFillStyle, d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z" }) }));
 };
-const ArrowFill = styled.path `
-  fill: ${props => props.theme.colors.background.elevated};
-`;
-const StyledTooltipArrow = styled(Tooltip.Arrow) `
-  display: flex;
-  transform-style: preserve-3d;
-  backface-visibility: hidden;
-  perspective: 1000px;
-  /* Ensure crisp rendering */
-  image-rendering: crisp-edges;
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: pixelated;
-
-  /* Antialiasing for smooth edges */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-  will-change: transform;
-`;
+const StyledTooltipArrow = React.forwardRef(({ className, ...props }, ref) => (jsx(Tooltip.Arrow, { ref: ref, className: cx(tooltipArrowStyle, typeof className === 'string' ? className : undefined), ...props })));
+StyledTooltipArrow.displayName = 'StyledTooltipArrow';
 
 export { ArrowSvg, StyledTooltipArrow };
 //# sourceMappingURL=Arrow.js.map

package/dist/esm/components/primitives/Tooltip/Arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrow.js","sources":["../../../../../../src/components/primitives/Tooltip/Arrow.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKa,MAAA,QAAQ,GAAG,CAAC,KAAkC,KAAI;AAC7D,IAAA,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;;AAEL,YAAA,cAAc,EAAE,oBAAoB;AACpC,YAAA,cAAc,EAAE,aAAa;SAC9B,EACG,GAAA,KAAK,EAET,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAA,EAAC,CAAC,EAAC,iMAAiM,EAAA,CAAG,EAC7M,CAAA;AAEV;AAEA,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;UACnB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAA;CACxD;AAEY,MAAA,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Arrow.js","sources":["../../../../../../src/components/primitives/Tooltip/Arrow.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQO;AACL;;AAQM;AACA;AACD;AASP;AAEO;AAcP;;"}