entangle-ui 0.3.0 → 0.4.0

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;;"}

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

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/primitives/Tooltip/Tooltip.css.ts.vanilla-CrEFoLBX.css';
+
+var arrowFillStyle = 'Tooltip_arrowFillStyle__u81kis2';
+var tooltipArrowStyle = 'Tooltip_tooltipArrowStyle__u81kis3';
+var tooltipContentStyle = 'Tooltip_tooltipContentStyle__u81kis0';
+var tooltipTriggerStyle = 'Tooltip_tooltipTriggerStyle__u81kis1';
+
+export { arrowFillStyle, tooltipArrowStyle, tooltipContentStyle, tooltipTriggerStyle };
+//# sourceMappingURL=Tooltip.css.js.map

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

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

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

@@ -1,87 +1,15 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import { cx } from '../../../utils/cx.js';
 import { StyledTooltipArrow, ArrowSvg } from './Arrow.js';
 import { parsePlacement, parseCollisionStrategy } from './utils.js';
+import { tooltipTriggerStyle, tooltipContentStyle } from './Tooltip.css.js';
 
-const StyledTooltipPositioner = styled(Tooltip$1.Positioner) `
-  /* Positioner handles positioning, no visual styles needed here */
-`;
-const StyledTooltipContent = styled.div `
-  /* Base styles */
-  background: ${props => props.theme.colors.background.elevated};
-  color: ${props => props.theme.colors.text.primary};
-  border-radius: ${props => props.theme.borderRadius.md}px;
-  padding: ${props => props.theme.spacing.sm}px
-    ${props => props.theme.spacing.md}px;
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  line-height: ${props => props.theme.typography.lineHeight.tight};
-  font-family: ${props => props.theme.typography.fontFamily.sans};
-  box-shadow: ${props => props.theme.shadows.lg};
-  max-width: 320px;
-  word-wrap: break-word;
-  z-index: ${props => props.theme.zIndex.tooltip};
-  min-height: 25px; // Ensure minimum height for better UX
-  display: flex;
-  align-items: center; // Center content vertically
-  justify-content: center; // Center content horizontally
-
-  /* Animation */
-  ${props => {
-    const { $animation } = props;
-    const duration = $animation?.duration ?? 200;
-    const easing = $animation?.easing ?? 'ease-out';
-    const animated = $animation?.animated !== false;
-    if (!animated) {
-        return 'transition: none;';
-    }
-    return `
-      transition: opacity ${duration}ms ${easing}, transform ${duration}ms ${easing};
-      transform-origin: var(--transform-origin);
-    `;
-}}
-
-  /* Entry/exit animations */
-  &[data-open] {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  &[data-closed] {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-const StyledTooltipTrigger = styled.div `
-  /* Trigger styles */
-  display: inline-block;
-  cursor: pointer;
-  width: fit-content; // Allow trigger to size to content
-  height: fit-content; // Allow trigger to size to content
-  position: relative; // Required for tooltip positioning
-  z-index: 1; // Ensure trigger is above tooltip
-  /* Prevents pointer events on the tooltip trigger */
-  pointer-events: none;
-  /* Allows pointer events on the children */
-  & > * {
-    pointer-events: auto;
-  }
-  /* Ensures the trigger is focusable */
-  &:focus {
-    outline: none; // Remove default focus outline
-    box-shadow: ${props => props.theme.shadows.focus}; // Custom focus style
-  }
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
 /**
  * A tooltip component that displays contextual information on hover.
  *
- * Built on @base-ui-components/react for robust accessibility and positioning.
+ * Built on @base-ui/react for robust accessibility and positioning.
  * Provides an intuitive API similar to MUI with advanced positioning and collision handling.
  * Supports both simple text and complex React nodes for advanced tooltip content.
  *
@@ -166,7 +94,7 @@ const StyledTooltipTrigger = styled.div `
  * </Tooltip>
  * ```
  */
-const Tooltip = ({ children, title, placement = 'top', collision = 'smart', collisionConfig, positioner = {}, animation = {}, delay = 600, closeDelay = 0, arrow = true, disabled = false, rootProps = {}, positionerProps = {}, className, testId, id, style, css, ref, ...htmlProps }) => {
+const Tooltip = ({ children, title, placement = 'top', collision = 'smart', collisionConfig, positioner = {}, animation = {}, delay = 600, closeDelay = 0, arrow = true, disabled = false, rootProps = {}, positionerProps = {}, className, testId, id, style, ref, ...htmlProps }) => {
     // If disabled, return just the children without tooltip
     if (disabled) {
         return children;
@@ -211,7 +139,20 @@ const Tooltip = ({ children, title, placement = 'top', collision = 'smart', coll
     if (trackCursor) {
         rootProps.trackCursorAxis = trackCursor;
     }
-    return (jsx(Tooltip$1.Provider, { delay: delay, closeDelay: closeDelay, ...rootProps, children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { render: props => jsx(StyledTooltipTrigger, { ...props }), children: children }), jsx(Tooltip$1.Portal, { children: jsx(StyledTooltipPositioner, { ...finalPositionerProps, children: jsx(Tooltip$1.Popup, { render: props => (jsxs(StyledTooltipContent, { ...props, className: className, "data-testid": testId, id: id, style: style, "$css": css, "$animation": animation, ref: ref, ...htmlProps, children: [title, arrow && (jsx(StyledTooltipArrow, { children: jsx(ArrowSvg, {}) }))] })) }) }) })] }) }));
+    // Build animation transition style
+    const animated = animation?.animated !== false;
+    const duration = animation?.duration ?? 200;
+    const easing = animation?.easing ?? 'ease-out';
+    const animationStyle = animated
+        ? {
+            transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
+        }
+        : { transition: 'none' };
+    return (jsx(Tooltip$1.Provider, { delay: delay, closeDelay: closeDelay, ...rootProps, children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { render: props => (jsx("div", { ...props, className: cx(tooltipTriggerStyle, props.className) })), children: children }), jsx(Tooltip$1.Portal, { children: jsx(Tooltip$1.Positioner, { ...finalPositionerProps, children: jsx(Tooltip$1.Popup, { render: props => (jsxs("div", { ...props, className: cx(tooltipContentStyle, className, props.className), "data-testid": testId, id: id, style: {
+                                    ...animationStyle,
+                                    ...style,
+                                    ...props.style,
+                                }, ref: ref, ...htmlProps, children: [title, arrow && (jsx(StyledTooltipArrow, { children: jsx(ArrowSvg, {}) }))] })) }) }) })] }) }));
 };
 Tooltip.displayName = 'Tooltip';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":[null],"names":["BaseTooltip","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA8HA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFG;AACI;;;AAuBH;;;;;;AAQA;AACI;AACE;AACA;AACA;AACqB;AACxB;AACH;;AAGF;;AASA;;;AAGE;AACA;;;AAGA;;;;AAKA;;;AAGI;;;;AAGF;;;;;AAMF;;;AAIF;AACA;AACA;;AAGE;;AAEG;AACH;;AA8BgB;AACA;;;AAoBpB;AAEA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../src/components/primitives/Tooltip/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAOA;;AAEG;AACU,MAAA,cAAc,GAAG,CAAC,SAA2B,KAAI;AAC5D,IAAA,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAGnD;IACD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE;AAC3C;AAEA;;AAEG;AACU,MAAA,sBAAsB,GAAG,CACpC,QAAkC,KAIhC;IACF,QAAQ,QAAQ;AACd,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE,SAAS;AAC7B,gBAAA,gBAAgB,EAAE,IAAI;aACvB;AAEH,QAAA,KAAK,YAAY;YACf,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,OAAO;AAC1B,iBAAA;aACF;AAEH,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE,SAAS;aAC9B;AAEH,QAAA;YACE,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,OAAO;AAC1B,iBAAA;aACF;;AAEP;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/primitives/Tooltip/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAOA;;AAEG;AACI,MAAM,cAAc,GAAG,CAAC,SAA2B,KAAI;AAC5D,IAAA,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAGnD;IACD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE;AAC3C;AAEA;;AAEG;AACI,MAAM,sBAAsB,GAAG,CACpC,QAAkC,KAIhC;IACF,QAAQ,QAAQ;AACd,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE,SAAS;AAC7B,gBAAA,gBAAgB,EAAE,IAAI;aACvB;AAEH,QAAA,KAAK,YAAY;YACf,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,OAAO;AAC1B,iBAAA;aACF;AAEH,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE,SAAS;aAC9B;AAEH,QAAA;YACE,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,OAAO;AAC1B,iBAAA;aACF;;AAEP;;;;"}

package/dist/esm/components/primitives/canvas/CanvasContainer.css.js

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/primitives/canvas/CanvasContainer.css.ts.vanilla-DR3zkEYQ.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var ariaLiveRegionStyle = 'CanvasContainer_ariaLiveRegionStyle__ktqdsj7';
+var canvasContainerHeightVar = 'var(--canvasContainerHeightVar__ktqdsj0)';
+var canvasContainerRecipe = createRuntimeFn({defaultClassName:'CanvasContainer_canvasContainerRecipe__ktqdsj1',variantClassNames:{responsive:{true:'CanvasContainer_canvasContainerRecipe_responsive_true__ktqdsj2',false:'CanvasContainer_canvasContainerRecipe_responsive_false__ktqdsj3'}},defaultVariants:{responsive:false},compoundVariants:[]});
+var canvasRecipe = createRuntimeFn({defaultClassName:'CanvasContainer_canvasRecipe__ktqdsj4',variantClassNames:{disabled:{true:'CanvasContainer_canvasRecipe_disabled_true__ktqdsj5',false:'CanvasContainer_canvasRecipe_disabled_false__ktqdsj6'}},defaultVariants:{disabled:false},compoundVariants:[]});
+
+export { ariaLiveRegionStyle, canvasContainerHeightVar, canvasContainerRecipe, canvasRecipe };
+//# sourceMappingURL=CanvasContainer.css.js.map

package/dist/esm/components/primitives/canvas/CanvasContainer.css.js.map

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