entangle-ui 0.3.0 → 0.4.0

package/dist/esm/components/primitives/Checkbox/CheckboxGroup.js

@@ -1,25 +1,15 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useId, useState, useCallback } from 'react';
-import styled from '@emotion/styled';
+import { useId, useState, useCallback, createContext } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
 import { FormLabel } from '../../form/FormLabel.js';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import '../../form/InputWrapper.js';
-import { processCss } from '../../../utils/styledUtils.js';
+import { cx } from '../../../utils/cx.js';
+import { groupItemsStyle, groupGapVar, groupDirectionVar, groupContainerStyle } from './Checkbox.css.js';
 
 const CheckboxGroupContext = 
 /*#__PURE__*/ createContext(null);
-const StyledGroupContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-const StyledGroupItems = styled.div `
-  display: flex;
-  flex-direction: ${props => props.$direction};
-  gap: ${props => props.theme.spacing.md * props.$gap}px;
-`;
 /**
  * Groups multiple Checkbox components with shared state management.
  *
@@ -39,7 +29,7 @@ const StyledGroupItems = styled.div `
  * </CheckboxGroup>
  * ```
  */
-const CheckboxGroup = ({ value: valueProp, defaultValue = [], label, direction = 'column', gap = 2, disabled = false, size = 'md', helperText, error = false, errorMessage, required = false, children, onChange, className, style, css, testId, ref, id: idProp, ...rest }) => {
+const CheckboxGroup = ({ value: valueProp, defaultValue = [], label, direction = 'column', gap = 2, disabled = false, size = 'md', helperText, error = false, errorMessage, required = false, children, onChange, className, style, testId, ref, id: idProp, ...rest }) => {
     const autoId = useId();
     const groupId = idProp ?? autoId;
     const labelId = `${groupId}-label`;
@@ -63,7 +53,10 @@ const CheckboxGroup = ({ value: valueProp, defaultValue = [], label, direction =
         size,
     };
     const showHelperText = error && errorMessage ? errorMessage : helperText;
-    return (jsxs(StyledGroupContainer, { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": showHelperText ? helperId : undefined, className: className, style: style, "$css": css, "data-testid": testId, ...rest, children: [label && (jsx(FormLabel, { id: labelId, required: required, disabled: disabled, children: label })), jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsx(StyledGroupItems, { "$direction": direction, "$gap": gap, children: children }) }), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+    return (jsxs("div", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": showHelperText ? helperId : undefined, className: cx(groupContainerStyle, className), style: style, "data-testid": testId, ...rest, children: [label && (jsx(FormLabel, { id: labelId, required: required, disabled: disabled, children: label })), jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsx("div", { className: groupItemsStyle, style: assignInlineVars({
+                        [groupDirectionVar]: direction,
+                        [groupGapVar]: `${8 * gap}px`,
+                    }), children: children }) }), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 

package/dist/esm/components/primitives/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/primitives/Checkbox/CheckboxGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/primitives/Checkbox/CheckboxGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAmBE;AAEF;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAqBL;AACA;AACA;AACA;;AAGA;;AAGA;AAEI;AACE;AACA;;;;AAKF;;AAKJ;AACE;;;;;AAMF;AAEA;;AAqBU;;AAaZ;AAEA;;"}

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

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/primitives/Collapsible/Collapsible.css.ts.vanilla-C1rYV-JT.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var chevronRecipe = createRuntimeFn({defaultClassName:'Collapsible_chevronRecipe__14aon2g8',variantClassNames:{open:{true:'Collapsible_chevronRecipe_open_true__14aon2g9',false:'Collapsible_chevronRecipe_open_false__14aon2ga'}},defaultVariants:{open:false},compoundVariants:[]});
+var chevronSizeVar = 'var(--chevronSizeVar__14aon2g7)';
+var collapsibleRootStyle = 'Collapsible_collapsibleRootStyle__14aon2g0';
+var contentBodyStyle = 'Collapsible_contentBodyStyle__14aon2gh';
+var contentInnerStyle = 'Collapsible_contentInnerStyle__14aon2ge';
+var contentPaddingHVar = 'var(--contentPaddingHVar__14aon2gg)';
+var contentPaddingVVar = 'var(--contentPaddingVVar__14aon2gf)';
+var contentWrapperRecipe = createRuntimeFn({defaultClassName:'Collapsible_contentWrapperRecipe__14aon2gb',variantClassNames:{open:{true:'Collapsible_contentWrapperRecipe_open_true__14aon2gc',false:'Collapsible_contentWrapperRecipe_open_false__14aon2gd'}},defaultVariants:{open:false},compoundVariants:[]});
+var triggerFontSizeVar = 'var(--triggerFontSizeVar__14aon2g3)';
+var triggerHeightVar = 'var(--triggerHeightVar__14aon2g1)';
+var triggerPaddingVar = 'var(--triggerPaddingVar__14aon2g2)';
+var triggerRecipe = createRuntimeFn({defaultClassName:'Collapsible_triggerRecipe__14aon2g4',variantClassNames:{disabled:{true:'Collapsible_triggerRecipe_disabled_true__14aon2g5',false:'Collapsible_triggerRecipe_disabled_false__14aon2g6'}},defaultVariants:{disabled:false},compoundVariants:[]});
+
+export { chevronRecipe, chevronSizeVar, collapsibleRootStyle, contentBodyStyle, contentInnerStyle, contentPaddingHVar, contentPaddingVVar, contentWrapperRecipe, triggerFontSizeVar, triggerHeightVar, triggerPaddingVar, triggerRecipe };
+//# sourceMappingURL=Collapsible.css.js.map

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

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

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

@@ -1,94 +1,38 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useState, useCallback } from 'react';
-import styled from '@emotion/styled';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { triggerFontSizeVar, triggerPaddingVar, triggerHeightVar, contentPaddingHVar, contentPaddingVVar, chevronSizeVar, chevronRecipe, triggerRecipe, contentInnerStyle, contentBodyStyle, contentWrapperRecipe, collapsibleRootStyle } from './Collapsible.css.js';
+import { vars } from '../../../theme/contract.css.js';
 
 const TRIGGER_SIZE_MAP = {
-    sm: { height: 24, paddingKey: 'md', fontKey: 'xs', chevronSize: 10 },
-    md: { height: 28, paddingKey: 'md', fontKey: 'sm', chevronSize: 12 },
-    lg: { height: 32, paddingKey: 'lg', fontKey: 'md', chevronSize: 14 },
+    sm: {
+        height: '24px',
+        padding: vars.spacing.md,
+        fontSize: vars.typography.fontSize.xs,
+        chevronSize: 10,
+    },
+    md: {
+        height: '28px',
+        padding: vars.spacing.md,
+        fontSize: vars.typography.fontSize.sm,
+        chevronSize: 12,
+    },
+    lg: {
+        height: '32px',
+        padding: vars.spacing.lg,
+        fontSize: vars.typography.fontSize.md,
+        chevronSize: 14,
+    },
 };
 const CONTENT_SIZE_MAP = {
-    sm: { paddingVKey: 'sm', paddingHKey: 'md' },
-    md: { paddingVKey: 'md', paddingHKey: 'lg' },
-    lg: { paddingVKey: 'lg', paddingHKey: 'xl' },
+    sm: { paddingV: vars.spacing.sm, paddingH: vars.spacing.md },
+    md: { paddingV: vars.spacing.md, paddingH: vars.spacing.lg },
+    lg: { paddingV: vars.spacing.lg, paddingH: vars.spacing.xl },
 };
 // --- Chevron icon ---
 const ChevronRightIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4.5 3L7.5 6L4.5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-// --- Styled ---
-const StyledRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-`;
-const StyledTrigger = styled.button `
-  /* Reset */
-  margin: 0;
-  border: none;
-  font-family: inherit;
-  outline: none;
-  user-select: none;
-  width: 100%;
-  text-align: left;
-
-  /* Layout */
-  display: flex;
-  align-items: center;
-  gap: ${props => props.theme.spacing.sm}px;
-
-  /* Sizing */
-  height: ${props => TRIGGER_SIZE_MAP[props.$size].height}px;
-  padding: 0
-    ${props => props.theme.spacing[TRIGGER_SIZE_MAP[props.$size].paddingKey]}px;
-  font-size: ${props => props.theme.typography.fontSize[TRIGGER_SIZE_MAP[props.$size].fontKey]}px;
-  font-weight: ${props => props.theme.typography.fontWeight.medium};
-
-  /* Colors */
-  background: transparent;
-  color: ${props => props.theme.colors.text.muted};
-  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${props => (props.$disabled ? 0.5 : 1)};
-  transition:
-    color ${props => props.theme.transitions.fast},
-    background ${props => props.theme.transitions.fast};
-
-  &:hover {
-    color: ${props => props.$disabled
-    ? props.theme.colors.text.muted
-    : props.theme.colors.text.primary};
-  }
-
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-    border-radius: ${props => props.theme.borderRadius.sm}px;
-    z-index: 1;
-  }
-`;
-const StyledChevron = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: transform ${props => props.theme.transitions.fast};
-  transform: rotate(${props => (props.$open ? '90deg' : '0deg')});
-  color: currentColor;
-
-  svg {
-    width: ${props => props.$size}px;
-    height: ${props => props.$size}px;
-  }
-`;
-const StyledContentWrapper = styled.div `
-  display: grid;
-  grid-template-rows: ${props => (props.$open ? '1fr' : '0fr')};
-  transition: grid-template-rows ${props => props.theme.transitions.normal};
-`;
-const StyledContentInner = styled.div `
-  overflow: hidden;
-  min-height: 0;
-`;
-const StyledContentBody = styled.div `
-  padding: ${props => props.theme.spacing[CONTENT_SIZE_MAP[props.$size].paddingVKey]}px
-    ${props => props.theme.spacing[CONTENT_SIZE_MAP[props.$size].paddingHKey]}px;
-`;
 // --- Component ---
 const Collapsible = ({ trigger, open: openProp, defaultOpen = false, size = 'sm', indicator, disabled = false, keepMounted = false, onChange, children, className, style, testId, ref, ...rest }) => {
     const autoId = useId();
@@ -108,7 +52,25 @@ const Collapsible = ({ trigger, open: openProp, defaultOpen = false, size = 'sm'
     }, [disabled, resolvedOpen, isControlled, onChange]);
     const showIndicator = indicator !== null;
     const sizeConfig = TRIGGER_SIZE_MAP[size];
-    return (jsxs(StyledRoot, { ref: ref, className: className, style: style, "data-testid": testId, ...rest, children: [jsxs(StyledTrigger, { type: "button", id: triggerId, "aria-expanded": resolvedOpen, "aria-controls": contentId, "aria-disabled": disabled || undefined, disabled: disabled, onClick: handleToggle, "$size": size, "$disabled": disabled, children: [showIndicator && (jsx(StyledChevron, { "$open": resolvedOpen, "$size": sizeConfig.chevronSize, children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), jsx("span", { children: trigger })] }), (resolvedOpen || keepMounted) && (jsx(StyledContentWrapper, { "$open": resolvedOpen, role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !resolvedOpen || undefined, children: jsx(StyledContentInner, { children: jsx(StyledContentBody, { "$size": size, children: children }) }) }))] }));
+    const contentConfig = CONTENT_SIZE_MAP[size];
+    const triggerInlineVars = assignInlineVars({
+        [triggerHeightVar]: sizeConfig.height,
+        [triggerPaddingVar]: sizeConfig.padding,
+        [triggerFontSizeVar]: sizeConfig.fontSize,
+    });
+    const contentInlineVars = assignInlineVars({
+        [contentPaddingVVar]: contentConfig.paddingV,
+        [contentPaddingHVar]: contentConfig.paddingH,
+    });
+    return (jsxs("div", { ref: ref, className: cx(collapsibleRootStyle, className), style: style, "data-testid": testId, ...rest, children: [jsxs("button", { type: "button", id: triggerId, "aria-expanded": resolvedOpen, "aria-controls": contentId, "aria-disabled": disabled || undefined, disabled: disabled, onClick: handleToggle, className: triggerRecipe({
+                    disabled: disabled || undefined,
+                }), style: triggerInlineVars, children: [showIndicator && (jsx("span", { className: chevronRecipe({
+                            open: resolvedOpen || undefined,
+                        }), style: assignInlineVars({
+                            [chevronSizeVar]: `${sizeConfig.chevronSize}px`,
+                        }), children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), jsx("span", { children: trigger })] }), (resolvedOpen || keepMounted) && (jsx("div", { className: contentWrapperRecipe({
+                    open: resolvedOpen || undefined,
+                }), role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !resolvedOpen || undefined, children: jsx("div", { className: contentInnerStyle, children: jsx("div", { className: contentBodyStyle, style: contentInlineVars, children: children }) }) }))] }));
 };
 Collapsible.displayName = 'Collapsible';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","sources":["../../../../../../src/components/primitives/Collapsible/Collapsible.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Collapsible.js","sources":["../../../../../../src/components/primitives/Collapsible/Collapsible.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA+BA;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;;AAQH;AACE;AACA;AACA;;AAGF;AAEA;AAkBA;;AAkBE;AACA;AACA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;AACA;AACA;;AAGE;AACA;AACA;AACD;;AAGC;AACA;AACD;;;AAoBM;;AAOI;AAEC;AACD;;AAYF;AAeX;AAEA;;"}

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

@@ -0,0 +1,7 @@
+import './../../../assets/src/components/primitives/Icon/Icon.css.ts.vanilla-DIZ6dped.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var iconRecipe = createRuntimeFn({defaultClassName:'Icon_iconRecipe__1yo6gez0',variantClassNames:{size:{sm:'Icon_iconRecipe_size_sm__1yo6gez1',md:'Icon_iconRecipe_size_md__1yo6gez2',lg:'Icon_iconRecipe_size_lg__1yo6gez3'},color:{primary:'Icon_iconRecipe_color_primary__1yo6gez4',secondary:'Icon_iconRecipe_color_secondary__1yo6gez5',muted:'Icon_iconRecipe_color_muted__1yo6gez6',accent:'Icon_iconRecipe_color_accent__1yo6gez7',success:'Icon_iconRecipe_color_success__1yo6gez8',warning:'Icon_iconRecipe_color_warning__1yo6gez9',error:'Icon_iconRecipe_color_error__1yo6geza'}},defaultVariants:{size:'md',color:'primary'},compoundVariants:[]});
+
+export { iconRecipe };
+//# sourceMappingURL=Icon.css.js.map

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

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

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

@@ -1,61 +1,29 @@
+"use client";
 import { jsxs, 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 { iconRecipe } from './Icon.css.js';
 
-const StyledSVG = styled.svg `
-  /* Reset and base styles */
-  display: inline-block;
-  vertical-align: middle;
-  flex-shrink: 0;
-  user-select: none;
-
-  /* Size variants optimized for editor interfaces */
-  ${props => {
-    const sizes = {
-        sm: '12px',
-        md: '16px',
-        lg: '20px',
-    };
-    return `
-      width: ${sizes[props.$size]};
-      height: ${sizes[props.$size]};
-    `;
-}}
-
-  /* Color variants using theme tokens */
-  ${props => {
-    const { theme } = props;
-    // Standard color mappings to theme
-    const colorMap = {
-        primary: theme.colors.text.primary,
-        secondary: theme.colors.text.secondary,
-        muted: theme.colors.text.muted,
-        accent: theme.colors.accent.primary,
-        success: theme.colors.accent.success,
-        warning: theme.colors.accent.warning,
-        error: theme.colors.accent.error,
-    };
-    // Use theme color if available, otherwise treat as custom color
-    const color = colorMap[props.$color] || props.$color;
-    return `
-      color: ${color};
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    `;
-}}
-  
-  /* Ensure crisp rendering */
-  shape-rendering: geometricPrecision;
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-const Icon = /*#__PURE__*/ React.memo(({ children, size = 'md', color = 'primary', className, title, decorative = false, css, testId, ref, ...props }) => {
-    return (jsxs(StyledSVG, { ref: ref, className: className, "$size": size, "$color": color, "$css": css, viewBox: "0 0 24 24", fill: "none", "aria-hidden": decorative, role: decorative ? 'presentation' : 'img', "data-testid": testId, ...props, children: [title && !decorative && jsx("title", { children: title }), children] }));
+/**
+ * Standard color keys that map to recipe variants
+ */
+const STANDARD_COLORS = new Set([
+    'primary',
+    'secondary',
+    'muted',
+    'accent',
+    'success',
+    'warning',
+    'error',
+]);
+const Icon = /*#__PURE__*/ React.memo(({ children, size = 'md', color = 'primary', className, title, decorative = false, testId, ref, ...props }) => {
+    const isStandardColor = STANDARD_COLORS.has(color);
+    return (jsxs("svg", { ref: ref, className: cx(iconRecipe({
+            size,
+            color: isStandardColor
+                ? color
+                : undefined,
+        }), className), style: !isStandardColor ? { color } : undefined, viewBox: "0 0 24 24", fill: "none", "aria-hidden": decorative, role: decorative ? 'presentation' : 'img', "data-testid": testId, ...props, children: [title && !decorative && jsx("title", { children: title }), children] }));
 });
 Icon.displayName = 'Icon';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../../../src/components/primitives/Icon/Icon.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AA8CA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgB;;;;;;;;AAQxC,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;KACX;IACD,OAAO;AACI,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;AACjB,cAAA,EAAA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;KAC7B;AACH,CAAC;;;AAGC,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK;;AAGvB,IAAA,MAAM,QAAQ,GAAG;AACf,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;AAClC,QAAA,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;AACtC,QAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;AAC9B,QAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACnC,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACpC,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACpC,QAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;KACjC;;AAGD,IAAA,MAAM,KAAK,GACT,QAAQ,CAAC,KAAK,CAAC,MAA+B,CAAC,IAAI,KAAK,CAAC,MAAM;IAEjE,OAAO;eACI,KAAK,CAAA;;;;;;KAMf;AACH,CAAC;;;;;;AAMC,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAEY,MAAA,IAAI,iBAAiB,KAAK,CAAC,IAAI,CAC1C,CAAC,EACC,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,SAAS,EACT,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,KAAI;IACH,QACEA,IAAC,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACb,OAAA,EAAA,IAAI,YACH,KAAK,EAAA,MAAA,EACP,GAAG,EACT,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EAAA,aAAA,EACE,UAAU,EACvB,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,KAAK,EAC5B,aAAA,EAAA,MAAM,EACf,GAAA,KAAK,aAER,KAAK,IAAI,CAAC,UAAU,IAAIC,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAQ,KAAK,EAAA,CAAS,EAC9C,QAAQ,CACC,EAAA,CAAA;AAEhB,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../../../src/components/primitives/Icon/Icon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAgCA;;AAEG;AACH;;;;;;;;AAQC;AAEM;;;;AAoBK;AACE;AAQA;;AAgBZ;AAGF;;"}

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

@@ -0,0 +1,8 @@
+import './../../../assets/src/components/primitives/IconButton/IconButton.css.ts.vanilla-C-xAQoR3.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var iconButtonRecipe = createRuntimeFn({defaultClassName:'IconButton_iconButtonBase__rqqp000',variantClassNames:{size:{sm:'IconButton_iconButtonRecipe_size_sm__rqqp002',md:'IconButton_iconButtonRecipe_size_md__rqqp003',lg:'IconButton_iconButtonRecipe_size_lg__rqqp004'},variant:{'default':'IconButton_iconButtonRecipe_variant_default__rqqp005',ghost:'IconButton_iconButtonRecipe_variant_ghost__rqqp006',filled:'IconButton_iconButtonRecipe_variant_filled__rqqp007'},radius:{none:'IconButton_iconButtonRecipe_radius_none__rqqp008',sm:'IconButton_iconButtonRecipe_radius_sm__rqqp009',md:'IconButton_iconButtonRecipe_radius_md__rqqp00a',lg:'IconButton_iconButtonRecipe_radius_lg__rqqp00b',full:'IconButton_iconButtonRecipe_radius_full__rqqp00c'},pressed:{true:'IconButton_iconButtonRecipe_pressed_true__rqqp00d',false:'IconButton_iconButtonRecipe_pressed_false__rqqp00e'}},defaultVariants:{size:'md',variant:'ghost',radius:'md',pressed:false},compoundVariants:[]});
+var loadingSpinnerRecipe = createRuntimeFn({defaultClassName:'IconButton_loadingSpinnerRecipe__rqqp00g',variantClassNames:{size:{sm:'IconButton_loadingSpinnerRecipe_size_sm__rqqp00h',md:'IconButton_loadingSpinnerRecipe_size_md__rqqp00i',lg:'IconButton_loadingSpinnerRecipe_size_lg__rqqp00j'}},defaultVariants:{size:'md'},compoundVariants:[]});
+
+export { iconButtonRecipe, loadingSpinnerRecipe };
+//# sourceMappingURL=IconButton.css.js.map

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

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

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

@@ -1,174 +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 { loadingSpinnerRecipe, iconButtonRecipe } from './IconButton.css.js';
 
-const StyledIconButton = styled.button `
-  /* Reset */
-  margin: 0;
-  padding: 0;
-  font-family: inherit;
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
-  user-select: none;
-
-  /* Layout */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all ${props => props.theme.transitions.normal};
-  outline: none;
-  position: relative;
-
-  /* Size variants - square buttons scaled to icon size */
-  ${props => {
-    const sizes = {
-        sm: {
-            width: '20px', // Compact for 12px icons
-            height: '20px',
-            padding: '4px',
-        },
-        md: {
-            width: '24px', // Standard for 16px icons
-            height: '24px',
-            padding: '4px',
-        },
-        lg: {
-            width: '32px', // Larger for 20px icons
-            height: '32px',
-            padding: '6px',
-        },
-    };
-    const size = sizes[props.$size];
-    return `
-      width: ${size.width};
-      height: ${size.height};
-      padding: ${size.padding};
-    `;
-}}
-
-  /* Border radius variants */
-  ${props => {
-    const radiusMap = {
-        none: '0px',
-        sm: `${props.theme.borderRadius.sm}px`,
-        md: `${props.theme.borderRadius.md}px`,
-        lg: `${props.theme.borderRadius.lg}px`,
-        full: '50%',
-    };
-    return `border-radius: ${radiusMap[props.$radius]};`;
-}}
-  
-  /* Variant styles */
-  ${props => {
-    const { colors } = props.theme;
-    switch (props.$variant) {
-        case 'default':
-            return `
-          background: transparent;
-          border: 1px solid ${colors.border.default};
-          color: ${colors.text.primary};
-          
-          &:hover:not(:disabled) {
-            background: ${colors.surface.hover};
-            border-color: ${colors.border.focus};
-          }
-          
-          &:active:not(:disabled) {
-            background: ${colors.surface.active};
-          }
-        `;
-        case 'ghost':
-            return `
-          background: transparent;
-          border: 1px solid transparent;
-          color: ${colors.text.secondary};
-          
-          &:hover:not(:disabled) {
-            background: ${colors.surface.hover};
-            color: ${colors.text.primary};
-          }
-          
-          &:active:not(:disabled) {
-            background: ${colors.surface.active};
-          }
-        `;
-        case 'filled':
-            return `
-          background: ${colors.accent.primary};
-          border: 1px solid ${colors.accent.primary};
-          color: white;
-          
-          &:hover:not(:disabled) {
-            background: ${colors.accent.secondary};
-            border-color: ${colors.accent.secondary};
-          }
-          
-          &:active:not(:disabled) {
-            background: ${colors.accent.secondary};
-          }
-        `;
-        default:
-            return '';
-    }
-}}
-  
-  /* Pressed state */
-  ${props => props.$pressed &&
-    `
-    background: ${props.theme.colors.surface.active} !important;
-    border-color: ${props.theme.colors.border.focus} !important;
-  `}
-  
-  /* Disabled state */
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Focus visible */
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-
-  /* Active press effect */
-  &:active:not(:disabled) {
-    transform: translateY(0.5px);
-  }
-
-  /* Icon container - centers icon properly */
-  & > * {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-const LoadingSpinner = styled.div `
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-
-  ${props => {
-    const sizes = {
-        sm: '12px',
-        md: '16px',
-        lg: '20px',
-    };
-    return `
-      width: ${sizes[props.$size]};
-      height: ${sizes[props.$size]};
-    `;
-}}
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
 /**
  * A specialized square button component for displaying icons in editor interfaces.
  *
@@ -213,8 +48,13 @@ const LoadingSpinner = styled.div `
  * </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, css, style, ref, ...props }) => {
-    return (jsx(StyledIconButton, { ref: ref, className: className, "$size": size, "$variant": variant, "$radius": radius, "$loading": loading, "$pressed": pressed, "$css": css, disabled: disabled || loading, onClick: onClick, "aria-label": ariaLabel, "aria-pressed": pressed, "data-testid": testId, style: style, ...props, children: loading ? jsx(LoadingSpinner, { "$size": size }) : children }));
+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';
 

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../../../src/components/primitives/IconButton/IconButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAiHA,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAuB;;;;;AAKjD,UAAA,EAAA,KAAK,KAAK,KAAK,CAAC,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA;;;;;;;oBAO7C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAA;;;;;AAKvD,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE;YACF,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA,EAAE,EAAE;YACF,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA,EAAE,EAAE;YACF,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;KACF;IACD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/B,OAAO;AACI,aAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AACT,cAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACV,eAAA,EAAA,IAAI,CAAC,OAAO,CAAA;KACxB;AACH,CAAC;;;AAGC,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,SAAS,GAAG;AAChB,QAAA,IAAI,EAAE,KAAK;QACX,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAI,EAAA,CAAA;QACtC,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAI,EAAA,CAAA;QACtC,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAI,EAAA,CAAA;AACtC,QAAA,IAAI,EAAE,KAAK;KACZ;IACD,OAAO,CAAA,eAAA,EAAkB,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;AACtD,CAAC;;;AAGC,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK;AAE9B,IAAA,QAAQ,KAAK,CAAC,QAAQ;AACpB,QAAA,KAAK,SAAS;YACZ,OAAO;;8BAEe,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;mBAChC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAA;;;0BAGZ,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;4BAClB,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;;;;0BAIrB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAA;;SAEtC;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;;;mBAGI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAA;;;0BAGd,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;qBACzB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAA;;;;0BAId,MAAM,CAAC,OAAO,CAAC,MAAM,CAAA;;SAEtC;AAEH,QAAA,KAAK,QAAQ;YACX,OAAO;wBACS,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;8BACf,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;;;;0BAIzB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAA;4BACrB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAA;;;;0BAIzB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAA;;SAExC;AAEH,QAAA;AACE,YAAA,OAAO,EAAE;;AAEf,CAAC;;;AAGC,EAAA,EAAA,KAAK,IACL,KAAK,CAAC,QAAQ;AACd,IAAA;AACc,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAA;AAC/B,kBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;AAChD,EAAA,CAAA;;;;;;;;;;kBAUe,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA;;;;;;;;;;;;;;;;AAgBhD,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAA2B;;;;;;AAMxD,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;KACX;IACD,OAAO;AACI,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;AACjB,cAAA,EAAA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;KAC7B;AACH,CAAC;;;;;;;CAOF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACU,MAAA,UAAU,iBAAiB,KAAK,CAAC,IAAI,CAChD,CAAC,EACC,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,OAAO,EACjB,MAAM,GAAG,IAAI,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,MAAM,EACN,GAAG,EACH,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,KAAI;AACH,IAAA,QACEA,GAAA,CAAC,gBAAgB,EAAA,EACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EAAA,OAAA,EACb,IAAI,EAAA,UAAA,EACD,OAAO,EAAA,SAAA,EACR,MAAM,EAAA,UAAA,EACL,OAAO,EAAA,UAAA,EACP,OAAO,EAAA,MAAA,EACX,GAAG,EACT,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,OAAO,EAAE,OAAO,EAAA,YAAA,EACJ,SAAS,EAAA,cAAA,EACP,OAAO,EAAA,aAAA,EACR,MAAM,EACnB,KAAK,EAAE,KAAK,EAAA,GACR,KAAK,EAAA,QAAA,EAER,OAAO,GAAGA,GAAC,CAAA,cAAc,EAAQ,EAAA,OAAA,EAAA,IAAI,EAAI,CAAA,GAAG,QAAQ,EAAA,CACpC;AAEvB,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"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":";;;;;;;;;;;;"}