entangle-ui 0.3.0 → 0.5.0

package/dist/esm/components/navigation/Tabs/Tab.js

@@ -1,190 +1,100 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import styled from '@emotion/styled';
 import { useTabsContext } from './Tabs.js';
-import '../../primitives/Icon/Icon.js';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
 import { CloseIcon } from '../../Icons/CloseIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import '../../Icons/InfoIcon.js';
+import '../../Icons/LinkIcon.js';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import { cx } from '../../../utils/cx.js';
+import { vars } from '../../../theme/contract.css.js';
+import { tabIconStyle, tabCloseButtonStyle, tabRecipe, tabBaseStyle, tabEnclosedActiveVerticalStyle, tabEnclosedActiveHorizontalStyle, tabEnclosedInactiveStyle, tabEnclosedStyle, tabPillsActiveStyle, tabPillsInactiveStyle, tabPillsStyle, tabUnderlineActiveVerticalStyle, tabUnderlineActiveHorizontalStyle, tabUnderlineInactiveIndicatorStyle, tabUnderlineActiveStyle, tabUnderlineInactiveStyle, tabUnderlineStyle } from './Tabs.css.js';
 
 const TAB_SIZE_MAP = {
-    sm: {
-        height: 24,
-        paddingKey: 'sm',
-        fontKey: 'xs',
-        iconSize: 11,
-    },
-    md: {
-        height: 28,
-        paddingKey: 'md',
-        fontKey: 'sm',
-        iconSize: 13,
-    },
-    lg: {
-        height: 32,
-        paddingKey: 'lg',
-        fontKey: 'md',
-        iconSize: 15,
-    },
+    sm: { iconSize: 11 },
+    md: { iconSize: 13 },
+    lg: { iconSize: 15 },
 };
-const StyledTab = styled.button `
-  /* Reset */
-  margin: 0;
-  border: none;
-  font-family: inherit;
-  outline: none;
-  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
-  user-select: none;
-  white-space: nowrap;
-  background: transparent;
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-
-  /* Layout */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${props => props.theme.spacing.xs}px;
-  position: relative;
-  flex-shrink: 0;
-
-  /* Sizing */
-  height: ${props => TAB_SIZE_MAP[props.$size].height}px;
-  padding: 0
-    ${props => props.theme.spacing[TAB_SIZE_MAP[props.$size].paddingKey]}px;
-  font-size: ${props => props.theme.typography.fontSize[TAB_SIZE_MAP[props.$size].fontKey]}px;
-  font-weight: ${props => props.theme.typography.fontWeight.medium};
-  line-height: ${props => props.theme.typography.lineHeight.tight};
-  transition: all ${props => props.theme.transitions.fast};
-  min-width: 0;
-
-  /* Full width */
-  ${props => props.$fullWidth && 'flex: 1;'}
-
-  /* Disabled */
-  opacity: ${props => (props.$disabled ? 0.5 : 1)};
-
-  /* Variant styles */
-  ${props => {
-    const { colors } = props.theme;
-    switch (props.$variant) {
+// --- Helper to compute variant classes ---
+function getVariantClasses(variant, isActive, orientation) {
+    switch (variant) {
         case 'underline':
-            return `
-          color: ${props.$active ? colors.text.primary : colors.text.secondary};
-          background: ${props.$active ? colors.surface.active : 'transparent'};
-          ${props.$active
-                ? props.$orientation === 'vertical'
-                    ? 'margin-right: -1px;'
-                    : 'margin-bottom: -1px;'
-                : ''}
-
-          &::after {
-            content: '';
-            position: absolute;
-            border-radius: ${props.theme.borderRadius.sm}px;
-            background: ${colors.accent.primary};
-            opacity: ${props.$active ? 1 : 0};
-            transition: opacity ${props.theme.transitions.fast};
-            ${props.$orientation === 'vertical'
-                ? `
-                  top: 0;
-                  bottom: 0;
-                  right: -1px;
-                  width: 2px;
-                `
-                : `
-                  left: 0;
-                  right: 0;
-                  bottom: -1px;
-                  height: 2px;
-                `}
-          }
-
-          &:hover:not(:disabled) {
-            color: ${colors.text.primary};
-            background: ${colors.surface.hover};
-          }
-        `;
+            return cx(tabUnderlineStyle, isActive ? tabUnderlineActiveStyle : tabUnderlineInactiveStyle, isActive
+                ? orientation === 'vertical'
+                    ? tabUnderlineActiveVerticalStyle
+                    : tabUnderlineActiveHorizontalStyle
+                : tabUnderlineInactiveIndicatorStyle);
         case 'pills':
-            return `
-          color: ${props.$active ? colors.text.primary : colors.text.secondary};
-          background: ${props.$active ? colors.surface.active : colors.background.secondary};
-          border: 1px solid ${props.$active ? colors.border.default : 'transparent'};
-          border-radius: ${props.theme.borderRadius.md}px;
-
-          &:hover:not(:disabled) {
-            background: ${props.$active ? colors.surface.active : colors.surface.hover};
-          }
-        `;
+            return cx(tabPillsStyle, isActive ? tabPillsActiveStyle : tabPillsInactiveStyle);
         case 'enclosed':
-            return `
-          color: ${props.$active ? colors.text.primary : colors.text.secondary};
-          ${props.$active
-                ? `
-                border: 1px solid ${colors.border.default};
-                background: ${colors.background.primary};
-                ${props.$orientation === 'vertical'
-                    ? `
-                      border-right-color: ${colors.background.primary};
-                      border-radius: ${props.theme.borderRadius.md}px 0 0 ${props.theme.borderRadius.md}px;
-                      margin-right: -1px;
-                    `
-                    : `
-                      border-bottom-color: ${colors.background.primary};
-                      border-radius: ${props.theme.borderRadius.md}px ${props.theme.borderRadius.md}px 0 0;
-                      margin-bottom: -1px;
-                    `}
-              `
-                : `
-                background: ${colors.surface.default};
-                border: 1px solid transparent;
-              `}
-
-          &:hover:not(:disabled) {
-            color: ${colors.text.primary};
-            background: ${props.$active ? colors.background.primary : colors.surface.hover};
-          }
-        `;
+            return cx(tabEnclosedStyle, isActive
+                ? orientation === 'vertical'
+                    ? tabEnclosedActiveVerticalStyle
+                    : tabEnclosedActiveHorizontalStyle
+                : tabEnclosedInactiveStyle);
         default:
             return '';
     }
-}}
-
-  /* Focus visible */
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-    z-index: 1;
-  }
-`;
-const StyledTabIcon = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  svg {
-    width: ${props => props.$size}px;
-    height: ${props => props.$size}px;
-  }
-`;
-const StyledCloseButton = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  cursor: pointer;
-  color: ${props => props.theme.colors.text.muted};
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  padding: 2px;
-  margin-left: ${props => props.theme.spacing.sm}px;
-  transition: all ${props => props.theme.transitions.fast};
-
-  &:hover {
-    color: ${props => props.theme.colors.text.primary};
-    background: ${props => props.theme.colors.surface.hover};
-  }
-
-  svg {
-    color: currentColor;
-  }
-`;
+}
 // --- Component ---
 const Tab = ({ value, children, icon, disabled = false, closable = false, onClose, className, style, testId, ref, ...rest }) => {
     const { activeValue, setActiveValue, variant, size, orientation, fullWidth, tabsId, } = useTabsContext();
@@ -214,7 +124,15 @@ const Tab = ({ value, children, icon, disabled = false, closable = false, onClos
         e.stopPropagation();
         onClose?.(value);
     }, [onClose, value]);
-    return (jsxs(StyledTab, { ref: ref, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": panelId, "aria-disabled": disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: handleClick, onKeyDown: handleKeyDown, "$active": isActive, "$disabled": disabled, "$variant": variant, "$size": size, "$orientation": orientation, "$fullWidth": fullWidth, className: className, style: style, "data-testid": testId, ...rest, children: [icon && (jsx(StyledTabIcon, { "$size": sizeConfig.iconSize, children: icon })), children, closable && (jsx(StyledCloseButton, { role: "button", "aria-label": `Close ${typeof children === 'string' ? children : value}`, onClick: handleClose, children: jsx(CloseIcon, { size: closeIconSize, decorative: true }) }))] }));
+    const variantClasses = getVariantClasses(variant, isActive, orientation);
+    return (jsxs("button", { ref: ref, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": panelId, "aria-disabled": disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: handleClick, onKeyDown: handleKeyDown, className: cx(tabBaseStyle, tabRecipe({ size, disabled, fullWidth }), variantClasses, className), style: {
+            gap: vars.spacing.xs,
+            transition: `all ${vars.transitions.fast}`,
+            ...style,
+        }, "data-testid": testId, ...rest, children: [icon && (jsx("span", { className: tabIconStyle, style: {
+                    width: `${sizeConfig.iconSize}px`,
+                    height: `${sizeConfig.iconSize}px`,
+                }, children: icon })), children, closable && (jsx("span", { className: tabCloseButtonStyle, role: "button", "aria-label": `Close ${typeof children === 'string' ? children : value}`, onClick: handleClose, children: jsx(CloseIcon, { size: closeIconSize, decorative: true }) }))] }));
 };
 Tab.displayName = 'Tab';
 

package/dist/esm/components/navigation/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/navigation/Tabs/Tab.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/navigation/Tabs/Tab.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA;AACE;AACA;AACA;;AAGF;AAEA;;AAMI;AACE;;AAKM;AACA;;AAGR;AACE;AAIF;AACE;;AAIM;AACA;;AAGR;AACE;;AAEN;AAEA;AAEO;AAaL;AASA;AACA;AACA;AAEA;AACA;AAEA;;;;;AAMA;AAEI;;;;;;;;;;AAUF;AAIF;;AAGI;AACF;;AAMF;AAmBM;AACA;AACA;AACD;AAQK;AACA;;AAmBZ;AAEA;;"}

package/dist/esm/components/navigation/Tabs/TabList.js

@@ -1,64 +1,13 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useCallback } from 'react';
-import styled from '@emotion/styled';
 import { useTabsContext } from './Tabs.js';
+import { cx } from '../../../utils/cx.js';
+import { tabListRecipe } from './Tabs.css.js';
 
-const StyledTabList = styled.div `
-  display: flex;
-  flex-direction: ${props => props.$orientation === 'vertical' ? 'column' : 'row'};
-  align-items: stretch;
-  overflow-x: ${props => props.$orientation === 'horizontal' ? 'auto' : 'visible'};
-  overflow-y: ${props => props.$orientation === 'vertical' ? 'auto' : 'visible'};
-  flex-shrink: 0;
-  min-width: 0;
-  gap: ${props => props.theme.spacing.xs}px;
-
-  /* Hide scrollbar */
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Variant-specific styles */
-  ${props => {
-    const { colors } = props.theme;
-    switch (props.$variant) {
-        case 'underline':
-            return props.$orientation === 'vertical'
-                ? `border-right: 1px solid ${colors.border.default};`
-                : `border-bottom: 1px solid ${colors.border.default};`;
-        case 'enclosed':
-            return props.$orientation === 'vertical'
-                ? `
-              border-right: 1px solid ${colors.border.default};
-              padding: ${props.theme.spacing.xs}px 0;
-            `
-                : `
-              border-bottom: 1px solid ${colors.border.default};
-              padding: 0 ${props.theme.spacing.xs}px;
-            `;
-        case 'pills':
-            return props.$pillsFrame
-                ? `
-              padding: ${props.theme.spacing.xs}px;
-              border: 1px solid ${colors.border.default};
-              border-radius: ${props.theme.borderRadius.md}px;
-              background: ${colors.background.secondary};
-            `
-                : `
-              padding: 0;
-              border: none;
-              border-radius: 0;
-              background: transparent;
-            `;
-        default:
-            return '';
-    }
-}}
-`;
 // --- Component ---
 const TabList = ({ children, className, style, testId, ref, ...rest }) => {
-    const { orientation, variant, fullWidth, pillsFrame } = useTabsContext();
+    const { orientation, variant, pillsFrame } = useTabsContext();
     const listRef = useRef(null);
     const setListRef = useCallback((node) => {
         listRef.current = node;
@@ -107,7 +56,7 @@ const TabList = ({ children, className, style, testId, ref, ...rest }) => {
             tabs[nextIndex]?.focus();
         }
     }, [orientation]);
-    return (jsx(StyledTabList, { ref: setListRef, role: "tablist", "aria-orientation": orientation, "$orientation": orientation, "$variant": variant, "$fullWidth": fullWidth, "$pillsFrame": pillsFrame, className: className, style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: children }));
+    return (jsx("div", { ref: setListRef, role: "tablist", "aria-orientation": orientation, className: cx(tabListRecipe({ orientation, variant, pillsFrame }), className), style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: children }));
 };
 TabList.displayName = 'TabList';
 

package/dist/esm/components/navigation/Tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/navigation/Tabs/TabList.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/navigation/Tabs/TabList.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA;;;AAWE;AAEA;AAEI;AACA;;;;AAGG;;AAEL;AAIF;AAEI;AACA;;AAEA;;;;AAMA;;;;AAMA;AACE;;AAEE;AACA;;;AAEF;;AAEE;;AACmB;;AAErB;;;;AAIA;;AAEE;;;AAIJ;AACE;;AAEJ;;AAqBJ;AAEA;;"}

package/dist/esm/components/navigation/Tabs/TabPanel.js

@@ -1,17 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
 import { useTabsContext } from './Tabs.js';
+import { cx } from '../../../utils/cx.js';
+import { tabPanelStyle } from './Tabs.css.js';
 
-// --- Styled ---
-const StyledTabPanel = styled.div `
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  outline: none;
-`;
 // --- Component ---
 const TabPanel = ({ value, children, keepMounted = false, className, style, testId, ref, ...rest }) => {
     const { activeValue, tabsId } = useTabsContext();
@@ -21,7 +13,7 @@ const TabPanel = ({ value, children, keepMounted = false, className, style, test
     if (!isActive && !keepMounted) {
         return null;
     }
-    return (jsx(StyledTabPanel, { ref: ref, role: "tabpanel", id: panelId, "aria-labelledby": tabId, tabIndex: isActive ? 0 : -1, hidden: !isActive || undefined, className: className, style: {
+    return (jsx("div", { ref: ref, role: "tabpanel", id: panelId, "aria-labelledby": tabId, tabIndex: isActive ? 0 : -1, hidden: !isActive || undefined, className: cx(tabPanelStyle, className), style: {
             ...style,
             ...(isActive ? undefined : { display: 'none' }),
         }, "data-testid": testId, ...rest, children: children }));

package/dist/esm/components/navigation/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQhC;AAED;AAEa,MAAA,QAAQ,GAA4B,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE;AAChD,IAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,KAAK;AAEtC,IAAA,MAAM,KAAK,GAAG,CAAA,KAAA,EAAQ,MAAM,CAAQ,KAAA,EAAA,KAAK,EAAE;AAC3C,IAAA,MAAM,OAAO,GAAG,CAAA,KAAA,EAAQ,MAAM,CAAU,OAAA,EAAA,KAAK,EAAE;AAE/C,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE;AAC7B,QAAA,OAAO,IAAI;;AAGb,IAAA,QACEA,GAAC,CAAA,cAAc,IACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,qBACM,KAAK,EACtB,QAAQ,EAAE,QAAQ,GAAG,CAAC,GAAG,EAAE,EAC3B,MAAM,EAAE,CAAC,QAAQ,IAAI,SAAS,EAC9B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;AACL,YAAA,GAAG,KAAK;AACR,YAAA,IAAI,QAAQ,GAAG,SAAS,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AAChD,SAAA,EAAA,aAAA,EACY,MAAM,EACf,GAAA,IAAI,YAEP,QAAQ,EAAA,CACM;AAErB;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAQA;AAEO;;AAWL;AAEA;AACA;AAEA;AACE;;;AAaI;AACA;AACD;AAOP;AAEA;;"}

package/dist/esm/components/navigation/Tabs/Tabs.css.js

@@ -0,0 +1,26 @@
+import './../../../assets/src/components/navigation/Tabs/Tabs.css.ts.vanilla-D7RGpDPC.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var tabBaseStyle = 'Tabs_tabBaseStyle__v404x7i';
+var tabCloseButtonStyle = 'Tabs_tabCloseButtonStyle__v404x715';
+var tabEnclosedActiveHorizontalStyle = 'Tabs_tabEnclosedActiveHorizontalStyle__v404x711';
+var tabEnclosedActiveVerticalStyle = 'Tabs_tabEnclosedActiveVerticalStyle__v404x712';
+var tabEnclosedInactiveStyle = 'Tabs_tabEnclosedInactiveStyle__v404x713';
+var tabEnclosedStyle = 'Tabs_tabEnclosedStyle__v404x710';
+var tabIconStyle = 'Tabs_tabIconStyle__v404x714';
+var tabListRecipe = createRuntimeFn({defaultClassName:'Tabs_tabListBase__v404x73',variantClassNames:{orientation:{horizontal:'Tabs_tabListRecipe_orientation_horizontal__v404x75',vertical:'Tabs_tabListRecipe_orientation_vertical__v404x76'},variant:{underline:'Tabs_tabListRecipe_variant_underline__v404x77',pills:'Tabs_tabListRecipe_variant_pills__v404x78',enclosed:'Tabs_tabListRecipe_variant_enclosed__v404x79'},pillsFrame:{true:'Tabs_tabListRecipe_pillsFrame_true__v404x7a',false:'Tabs_tabListRecipe_pillsFrame_false__v404x7b'}},defaultVariants:{orientation:'horizontal',variant:'underline',pillsFrame:true},compoundVariants:[[{variant:'underline',orientation:'horizontal'},'Tabs_tabListRecipe_compound_0__v404x7c'],[{variant:'underline',orientation:'vertical'},'Tabs_tabListRecipe_compound_1__v404x7d'],[{variant:'enclosed',orientation:'horizontal'},'Tabs_tabListRecipe_compound_2__v404x7e'],[{variant:'enclosed',orientation:'vertical'},'Tabs_tabListRecipe_compound_3__v404x7f'],[{variant:'pills',pillsFrame:true},'Tabs_tabListRecipe_compound_4__v404x7g'],[{variant:'pills',pillsFrame:false},'Tabs_tabListRecipe_compound_5__v404x7h']]});
+var tabPanelStyle = 'Tabs_tabPanelStyle__v404x716';
+var tabPillsActiveStyle = 'Tabs_tabPillsActiveStyle__v404x7y';
+var tabPillsInactiveStyle = 'Tabs_tabPillsInactiveStyle__v404x7z';
+var tabPillsStyle = 'Tabs_tabPillsStyle__v404x7x';
+var tabRecipe = createRuntimeFn({defaultClassName:'Tabs_tabRecipe__v404x7j',variantClassNames:{size:{sm:'Tabs_tabRecipe_size_sm__v404x7k',md:'Tabs_tabRecipe_size_md__v404x7l',lg:'Tabs_tabRecipe_size_lg__v404x7m'},disabled:{true:'Tabs_tabRecipe_disabled_true__v404x7n',false:'Tabs_tabRecipe_disabled_false__v404x7o'},fullWidth:{true:'Tabs_tabRecipe_fullWidth_true__v404x7p',false:'Tabs_tabRecipe_fullWidth_false__v404x7q'}},defaultVariants:{size:'md',disabled:false,fullWidth:false},compoundVariants:[]});
+var tabUnderlineActiveHorizontalStyle = 'Tabs_tabUnderlineActiveHorizontalStyle__v404x7u';
+var tabUnderlineActiveStyle = 'Tabs_tabUnderlineActiveStyle__v404x7s';
+var tabUnderlineActiveVerticalStyle = 'Tabs_tabUnderlineActiveVerticalStyle__v404x7v';
+var tabUnderlineInactiveIndicatorStyle = 'Tabs_tabUnderlineInactiveIndicatorStyle__v404x7w';
+var tabUnderlineInactiveStyle = 'Tabs_tabUnderlineInactiveStyle__v404x7t';
+var tabUnderlineStyle = 'Tabs_tabUnderlineStyle__v404x7r';
+var tabsRootRecipe = createRuntimeFn({defaultClassName:'Tabs_tabsRootRecipe__v404x70',variantClassNames:{orientation:{horizontal:'Tabs_tabsRootRecipe_orientation_horizontal__v404x71',vertical:'Tabs_tabsRootRecipe_orientation_vertical__v404x72'}},defaultVariants:{orientation:'horizontal'},compoundVariants:[]});
+
+export { tabBaseStyle, tabCloseButtonStyle, tabEnclosedActiveHorizontalStyle, tabEnclosedActiveVerticalStyle, tabEnclosedInactiveStyle, tabEnclosedStyle, tabIconStyle, tabListRecipe, tabPanelStyle, tabPillsActiveStyle, tabPillsInactiveStyle, tabPillsStyle, tabRecipe, tabUnderlineActiveHorizontalStyle, tabUnderlineActiveStyle, tabUnderlineActiveVerticalStyle, tabUnderlineInactiveIndicatorStyle, tabUnderlineInactiveStyle, tabUnderlineStyle, tabsRootRecipe };
+//# sourceMappingURL=Tabs.css.js.map

package/dist/esm/components/navigation/Tabs/Tabs.css.js.map

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

package/dist/esm/components/navigation/Tabs/Tabs.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useCallback, useMemo, createContext, useContext } from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+import { useId, useState, useCallback, useMemo, useContext, createContext } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { tabsRootRecipe } from './Tabs.css.js';
 
 // --- Context ---
 const TabsContext = /*#__PURE__*/ createContext(null);
@@ -12,14 +13,6 @@ function useTabsContext() {
     }
     return ctx;
 }
-const StyledTabsRoot = styled.div `
-  display: flex;
-  flex-direction: ${props => props.$orientation === 'vertical' ? 'row' : 'column'};
-  min-width: 0;
-  min-height: 0;
-
-  ${props => processCss(props.$css, props.theme)}
-`;
 // --- Component ---
 /**
  * Tabs component for switching between views within a panel.
@@ -38,7 +31,7 @@ const StyledTabsRoot = styled.div `
  * </Tabs>
  * ```
  */
-const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'md', orientation = 'horizontal', fullWidth = false, pillsFrame = true, children, onChange, className, style, css, testId, ref, ...rest }) => {
+const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'md', orientation = 'horizontal', fullWidth = false, pillsFrame = true, children, onChange, className, style, testId, ref, ...rest }) => {
     const autoId = useId();
     const tabsId = autoId;
     const [internalValue, setInternalValue] = useState(defaultValue ?? '');
@@ -69,7 +62,7 @@ const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'm
         pillsFrame,
         tabsId,
     ]);
-    return (jsx(TabsContext.Provider, { value: contextValue, children: jsx(StyledTabsRoot, { ref: ref, "$orientation": orientation, "$css": css, className: className, style: style, "data-testid": testId, ...rest, children: children }) }));
+    return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(tabsRootRecipe({ orientation }), className), style: style, "data-testid": testId, ...rest, children: children }) }));
 };
 Tabs.displayName = 'Tabs';
 

package/dist/esm/components/navigation/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAYA;AAEA,MAAM,WAAW,iBAAiB,aAAa,CAA0B,IAAI,CAAC;SAE9D,cAAc,GAAA;AAC5B,IAAA,MAAM,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC;IACnC,IAAI,CAAC,GAAG,EAAE;AACR,QAAA,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC;;AAExE,IAAA,OAAO,GAAG;AACZ;AASA,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAqB;;AAElC,kBAAA,EAAA,KAAK,IACrB,KAAK,CAAC,YAAY,KAAK,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;;;;AAIpD,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;AAEA;;;;;;;;;;;;;;;;AAgBG;MACU,IAAI,GAAwB,CAAC,EACxC,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,IAAI,EACX,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,MAAM,GAAG,KAAK,EAAE;IACtB,MAAM,MAAM,GAAG,MAAM;AAErB,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,EAAE,CAAC;AACtE,IAAA,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS;IAC5C,MAAM,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa;AAE5D,IAAA,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,GAAW,KAAI;QACd,IAAI,CAAC,YAAY,EAAE;YACjB,gBAAgB,CAAC,GAAG,CAAC;;AAEvB,QAAA,QAAQ,GAAG,GAAG,CAAC;AACjB,KAAC,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,CAC1B,OAAO;QACL,WAAW;QACX,cAAc;QACd,OAAO;QACP,IAAI;QACJ,WAAW;QACX,SAAS;QACT,UAAU;QACV,MAAM;AACP,KAAA,CAAC,EACF;QACE,WAAW;QACX,cAAc;QACd,OAAO;QACP,IAAI;QACJ,WAAW;QACX,SAAS;QACT,UAAU;QACV,MAAM;AACP,KAAA,CACF;AAED,IAAA,QACEA,GAAC,CAAA,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACvCA,IAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,WAAW,EACnB,MAAA,EAAA,GAAG,EACT,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACC,aAAA,EAAA,MAAM,KACf,IAAI,EAAA,QAAA,EAEP,QAAQ,EACM,CAAA,EAAA,CACI;AAE3B;AAEA,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;AAGE;;AAEE;;AAEF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;;AAiBD;;AAGA;AACA;;AAGA;;;;AAKI;AACF;AAIF;;;;;;;;;AAUG;;;;;;;;;AAUA;AAGH;AAaF;AAEA;;"}

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

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/primitives/Button/Button.css.ts.vanilla-CT592JL7.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var buttonRecipe = createRuntimeFn({defaultClassName:'Button_buttonRecipe__btu0m70',variantClassNames:{variant:{'default':'Button_buttonRecipe_variant_default__btu0m71',ghost:'Button_buttonRecipe_variant_ghost__btu0m72',filled:'Button_buttonRecipe_variant_filled__btu0m73'},size:{sm:'Button_buttonRecipe_size_sm__btu0m74',md:'Button_buttonRecipe_size_md__btu0m75',lg:'Button_buttonRecipe_size_lg__btu0m76'},fullWidth:{true:'Button_buttonRecipe_fullWidth_true__btu0m77'}},defaultVariants:{variant:'default',size:'md'},compoundVariants:[]});
+var iconWrapperStyle = 'Button_iconWrapperStyle__btu0m7a';
+var loadingSpinnerStyle = 'Button_loadingSpinnerStyle__btu0m79';
+
+export { buttonRecipe, iconWrapperStyle, loadingSpinnerStyle };
+//# sourceMappingURL=Button.css.js.map

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

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