entangle-ui 0.2.0 → 0.4.0

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,70 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+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);
+function useTabsContext() {
+    const ctx = useContext(TabsContext);
+    if (!ctx) {
+        throw new Error('Tabs compound components must be used within <Tabs>');
+    }
+    return ctx;
+}
+// --- Component ---
+/**
+ * Tabs component for switching between views within a panel.
+ *
+ * Compound component pattern: use with TabList, Tab, and TabPanel.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="properties">
+ *   <TabList>
+ *     <Tab value="properties">Properties</Tab>
+ *     <Tab value="materials">Materials</Tab>
+ *   </TabList>
+ *   <TabPanel value="properties">Properties content</TabPanel>
+ *   <TabPanel value="materials">Materials content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+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 ?? '');
+    const isControlled = valueProp !== undefined;
+    const activeValue = isControlled ? valueProp : internalValue;
+    const setActiveValue = useCallback((val) => {
+        if (!isControlled) {
+            setInternalValue(val);
+        }
+        onChange?.(val);
+    }, [isControlled, onChange]);
+    const contextValue = useMemo(() => ({
+        activeValue,
+        setActiveValue,
+        variant,
+        size,
+        orientation,
+        fullWidth,
+        pillsFrame,
+        tabsId,
+    }), [
+        activeValue,
+        setActiveValue,
+        variant,
+        size,
+        orientation,
+        fullWidth,
+        pillsFrame,
+        tabsId,
+    ]);
+    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';
+
+export { Tabs, useTabsContext };
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"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/BaseButton/BaseButton.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+
+const BaseButton = /*#__PURE__*/ forwardRef(({ className, disabled = false, children, ...props }, ref) => {
+    return (jsx("button", { ref: ref, className: cn(
+        // Reset only some styles, not all
+        'bg-transparent p-0 m-0', 
+        // Base interactive styles
+        'cursor-pointer select-none', 'focus:outline-none', 
+        // Disabled state
+        disabled && 'cursor-not-allowed', className), disabled: disabled, ...props, children: children }));
+});
+BaseButton.displayName = 'BaseButton';
+
+export { BaseButton };
+//# sourceMappingURL=BaseButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.js","sources":["../../../../../../src/components/primitives/BaseButton/BaseButton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAiBO;;;;;AAWC;;AAGA;AASR;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":";;;;;;;;;"}

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { loadingSpinnerStyle, iconWrapperStyle, buttonRecipe } from './Button.css.js';
+
+/**
+ * Versatile button component for editor interfaces.
+ *
+ * Supports multiple variants, sizes, and states. Optimized for professional
+ * editor interfaces with compact dimensions and precise interactions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button variant="default" size="md">Save</Button>
+ *
+ * // With icon and loading state
+ * <Button
+ *   icon={<SaveIcon />}
+ *   loading={isSaving}
+ *   onClick={handleSave}
+ * >
+ *   Save Project
+ * </Button>
+ *
+ * // Full width button
+ * <Button variant="filled" fullWidth>
+ *   Confirm
+ * </Button>
+ * ```
+ */
+const Button = /*#__PURE__*/ React.memo(({ children, className, size = 'md', variant = 'default', disabled = false, loading = false, icon, fullWidth = false, onClick, testId, style, ref, ...props }) => {
+    return (jsxs("button", { ref: ref, className: cx(buttonRecipe({ variant, size, fullWidth: fullWidth || undefined }), className), disabled: disabled || loading, onClick: onClick, "data-testid": testId, style: style, ...props, children: [loading ? (jsx("div", { className: loadingSpinnerStyle })) : icon ? (jsx("span", { className: iconWrapperStyle, children: icon })) : null, children && jsx("span", { children: children })] }));
+});
+Button.displayName = 'Button';
+
+export { Button };
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqGA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;;AAiBC;AAsBF;AAGF;;"}

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

@@ -0,0 +1,14 @@
+import './../../../assets/src/components/primitives/Checkbox/Checkbox.css.ts.vanilla-dvrGPiPs.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var boxSizeVar = 'var(--boxSizeVar__2ajd0p9)';
+var checkboxBoxRecipe = createRuntimeFn({defaultClassName:'Checkbox_checkboxBoxRecipe__2ajd0pa',variantClassNames:{active:{true:'Checkbox_checkboxBoxRecipe_active_true__2ajd0pb',false:'Checkbox_checkboxBoxRecipe_active_false__2ajd0pc'},variant:{'default':'Checkbox_checkboxBoxRecipe_variant_default__2ajd0pd',filled:'Checkbox_checkboxBoxRecipe_variant_filled__2ajd0pe'},disabled:{true:'Checkbox_checkboxBoxRecipe_disabled_true__2ajd0pf',false:'Checkbox_checkboxBoxRecipe_disabled_false__2ajd0pg'},error:{true:'Checkbox_checkboxBoxRecipe_error_true__2ajd0ph',false:'Checkbox_checkboxBoxRecipe_error_false__2ajd0pi'}},defaultVariants:{active:false,variant:'default',disabled:false,error:false},compoundVariants:[[{error:true,active:false},'Checkbox_checkboxBoxRecipe_compound_0__2ajd0pj'],[{error:true,active:true},'Checkbox_checkboxBoxRecipe_compound_1__2ajd0pk'],[{variant:'filled',active:false},'Checkbox_checkboxBoxRecipe_compound_2__2ajd0pl'],[{disabled:true,active:true},'Checkbox_checkboxBoxRecipe_compound_3__2ajd0pm'],[{disabled:true,active:false,variant:'filled'},'Checkbox_checkboxBoxRecipe_compound_4__2ajd0pn'],[{disabled:true,active:false,variant:'default'},'Checkbox_checkboxBoxRecipe_compound_5__2ajd0po']]});
+var checkboxContainerStyle = 'Checkbox_checkboxContainerStyle__2ajd0p0';
+var checkboxLabelRecipe = createRuntimeFn({defaultClassName:'Checkbox_checkboxLabelRecipe__2ajd0p1',variantClassNames:{labelPosition:{left:'Checkbox_checkboxLabelRecipe_labelPosition_left__2ajd0p2',right:'Checkbox_checkboxLabelRecipe_labelPosition_right__2ajd0p3'},size:{sm:'Checkbox_checkboxLabelRecipe_size_sm__2ajd0p4',md:'Checkbox_checkboxLabelRecipe_size_md__2ajd0p5',lg:'Checkbox_checkboxLabelRecipe_size_lg__2ajd0p6'},disabled:{true:'Checkbox_checkboxLabelRecipe_disabled_true__2ajd0p7',false:'Checkbox_checkboxLabelRecipe_disabled_false__2ajd0p8'}},defaultVariants:{labelPosition:'right',size:'md',disabled:false},compoundVariants:[]});
+var groupContainerStyle = 'Checkbox_groupContainerStyle__2ajd0pp';
+var groupDirectionVar = 'var(--groupDirectionVar__2ajd0pq)';
+var groupGapVar = 'var(--groupGapVar__2ajd0pr)';
+var groupItemsStyle = 'Checkbox_groupItemsStyle__2ajd0ps';
+
+export { boxSizeVar, checkboxBoxRecipe, checkboxContainerStyle, checkboxLabelRecipe, groupContainerStyle, groupDirectionVar, groupGapVar, groupItemsStyle };
+//# sourceMappingURL=Checkbox.css.js.map

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

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

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

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useId, useState, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import '../../form/FormLabel.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import '../../form/InputWrapper.js';
+import { CheckboxGroupContext } from './CheckboxGroup.js';
+import { cx } from '../../../utils/cx.js';
+import { boxSizeVar, checkboxBoxRecipe, checkboxLabelRecipe, checkboxContainerStyle } from './Checkbox.css.js';
+
+// --- Size maps ---
+const BOX_SIZES = {
+    sm: 14,
+    md: 16,
+    lg: 20,
+};
+const ICON_SIZES = {
+    sm: 10,
+    md: 12,
+    lg: 14,
+};
+/**
+ * Checkbox component for boolean selection in settings panels,
+ * property inspectors, and form interfaces.
+ *
+ * Supports controlled/uncontrolled modes, indeterminate state,
+ * label positioning, sizes, variants, and error states.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox label="Enable shadows" />
+ * <Checkbox checked={value} onChange={setValue} label="Auto-save" />
+ * <Checkbox indeterminate label="Select all" />
+ * ```
+ */
+const Checkbox = ({ checked: checkedProp, defaultChecked = false, indeterminate = false, label, labelPosition = 'right', size: sizeProp = 'md', variant = 'default', disabled: disabledProp = false, required = false, error = false, helperText, errorMessage, value, name, onChange, className, style, testId, ref, id: idProp, ...rest }) => {
+    const groupContext = useContext(CheckboxGroupContext);
+    const autoId = useId();
+    const checkboxId = idProp ?? autoId;
+    const helperId = `${checkboxId}-helper`;
+    // Internal state for uncontrolled mode
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    // Resolve group context
+    const disabled = disabledProp || (groupContext?.disabled ?? false);
+    const size = sizeProp ?? groupContext?.size ?? 'md';
+    // Determine checked state for group integration
+    const isGrouped = groupContext !== null && value !== undefined;
+    const isControlled = checkedProp !== undefined;
+    let resolvedChecked;
+    if (isGrouped) {
+        resolvedChecked = groupContext.groupValue.includes(value);
+    }
+    else if (isControlled) {
+        resolvedChecked = checkedProp;
+    }
+    else {
+        resolvedChecked = internalChecked;
+    }
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        const newChecked = !resolvedChecked;
+        if (isGrouped && value) {
+            groupContext.toggleValue(value);
+        }
+        if (!isControlled && !isGrouped) {
+            setInternalChecked(newChecked);
+        }
+        onChange?.(newChecked);
+    }, [
+        disabled,
+        resolvedChecked,
+        isGrouped,
+        value,
+        groupContext,
+        isControlled,
+        onChange,
+    ]);
+    const iconSize = ICON_SIZES[size];
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const ariaChecked = indeterminate
+        ? 'mixed'
+        : resolvedChecked
+            ? 'true'
+            : 'false';
+    const isActive = resolvedChecked || indeterminate;
+    const boxInlineVars = assignInlineVars({
+        [boxSizeVar]: `${BOX_SIZES[size]}px`,
+    });
+    const checkboxBox = (jsxs("button", { ref: ref, type: "button", role: "checkbox", "aria-checked": ariaChecked, "aria-disabled": disabled || undefined, "aria-required": required || undefined, "aria-invalid": error || undefined, "aria-describedby": showHelperText ? helperId : undefined, disabled: disabled, onClick: handleClick, className: checkboxBoxRecipe({
+            active: isActive || undefined,
+            variant,
+            disabled: disabled || undefined,
+            error: error || undefined,
+        }), style: boxInlineVars, "data-testid": testId, ...rest, children: [indeterminate ? (jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }) })) : (jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", style: {
+                    opacity: resolvedChecked ? 1 : 0,
+                    transform: resolvedChecked ? 'scale(1)' : 'scale(0)',
+                    transition: 'opacity 150ms ease-out, transform 150ms ease-out',
+                }, children: jsx("path", { d: "M2 6L5 9L10 3", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })), name && (jsx("input", { type: "hidden", name: name, value: resolvedChecked ? (value ?? 'on') : '' }))] }));
+    if (!label && !showHelperText) {
+        return checkboxBox;
+    }
+    return (jsxs("div", { className: cx(checkboxContainerStyle, className), style: style, children: [jsxs("label", { className: checkboxLabelRecipe({
+                    labelPosition,
+                    disabled: disabled || undefined,
+                    size,
+                }), children: [checkboxBox, label && jsx("span", { children: label })] }), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+};
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAeA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;AAaG;AACI;AAuBL;AACA;AACA;AACA;;;;;;;;AAWA;AAEA;;;;;;;;;;AASA;AACE;;AAEA;AAEA;AACE;;AAGF;;;AAIA;AACF;;;;;;;;AAQC;AAED;AACA;;AAGE;AACA;AACE;;AAGJ;;;AAIC;;;;;;AAmBI;;;AAiCK;;AAsBV;AACE;;AAGF;;;;AAOO;AAYT;AAEA;;"}

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { cx } from '../../../utils/cx.js';
+import { groupItemsStyle, groupGapVar, groupDirectionVar, groupContainerStyle } from './Checkbox.css.js';
+
+const CheckboxGroupContext = 
+/*#__PURE__*/ createContext(null);
+/**
+ * Groups multiple Checkbox components with shared state management.
+ *
+ * Manages a `string[]` value, propagates `disabled` and `size` to children
+ * via React Context. Supports controlled and uncontrolled modes.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Render passes"
+ *   value={selected}
+ *   onChange={setSelected}
+ * >
+ *   <Checkbox value="diffuse" label="Diffuse" />
+ *   <Checkbox value="specular" label="Specular" />
+ *   <Checkbox value="shadow" label="Shadow" />
+ * </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, testId, ref, id: idProp, ...rest }) => {
+    const autoId = useId();
+    const groupId = idProp ?? autoId;
+    const labelId = `${groupId}-label`;
+    const helperId = `${groupId}-helper`;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const currentValue = isControlled ? valueProp : internalValue;
+    const toggleValue = useCallback((itemValue) => {
+        const nextValue = currentValue.includes(itemValue)
+            ? currentValue.filter(v => v !== itemValue)
+            : [...currentValue, itemValue];
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChange?.(nextValue);
+    }, [currentValue, isControlled, onChange]);
+    const contextValue = {
+        groupValue: currentValue,
+        toggleValue,
+        disabled,
+        size,
+    };
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    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';
+
+export { CheckboxGroup, CheckboxGroupContext };
+//# sourceMappingURL=CheckboxGroup.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,78 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { 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: '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: { 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" }) }));
+// --- 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();
+    const triggerId = `collapsible-${autoId}-trigger`;
+    const contentId = `collapsible-${autoId}-content`;
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const resolvedOpen = isControlled ? openProp : internalOpen;
+    const handleToggle = useCallback(() => {
+        if (disabled)
+            return;
+        const nextOpen = !resolvedOpen;
+        if (!isControlled) {
+            setInternalOpen(nextOpen);
+        }
+        onChange?.(nextOpen);
+    }, [disabled, resolvedOpen, isControlled, onChange]);
+    const showIndicator = indicator !== null;
+    const sizeConfig = TRIGGER_SIZE_MAP[size];
+    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';
+
+export { Collapsible };
+//# sourceMappingURL=Collapsible.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { iconRecipe } from './Icon.css.js';
+
+/**
+ * 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';
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"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":";;;;;;;;"}