entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/layout/Accordion/Accordion.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, useCallback, createContext, useContext } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { accordionGapVar, accordionRoot } from './Accordion.css.js';
+
+// --- Contexts ---
+const AccordionContext = 
+/*#__PURE__*/ createContext(null);
+const AccordionItemContext = 
+/*#__PURE__*/ createContext(null);
+function useAccordionContext() {
+    const ctx = useContext(AccordionContext);
+    if (!ctx) {
+        throw new Error('Accordion compound components must be used within <Accordion>');
+    }
+    return ctx;
+}
+function useAccordionItemContext() {
+    const ctx = useContext(AccordionItemContext);
+    if (!ctx) {
+        throw new Error('AccordionTrigger/AccordionContent must be used within <AccordionItem>');
+    }
+    return ctx;
+}
+// --- Helpers ---
+function normalizeValue(value) {
+    if (value === undefined)
+        return [];
+    if (Array.isArray(value))
+        return value;
+    return [value];
+}
+// --- Component ---
+/**
+ * Accordion component for collapsible sections in property inspectors
+ * and settings panels.
+ *
+ * Compound component pattern: use with AccordionItem, AccordionTrigger,
+ * and AccordionContent.
+ *
+ * @example
+ * ```tsx
+ * <Accordion defaultValue="transform">
+ *   <AccordionItem value="transform">
+ *     <AccordionTrigger>Transform</AccordionTrigger>
+ *     <AccordionContent>Position, rotation, scale fields...</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+const Accordion = ({ value: valueProp, defaultValue, multiple = false, collapsible = false, variant = 'default', size = 'md', gap = 0, children, onChange, className, style, testId, ref, ...rest }) => {
+    const autoId = useId();
+    const [internalValue, setInternalValue] = useState(normalizeValue(defaultValue));
+    const isControlled = valueProp !== undefined;
+    const expandedItems = isControlled
+        ? normalizeValue(valueProp)
+        : internalValue;
+    const toggleItem = useCallback((itemValue) => {
+        const isExpanded = expandedItems.includes(itemValue);
+        let nextExpanded;
+        if (multiple) {
+            nextExpanded = isExpanded
+                ? expandedItems.filter(v => v !== itemValue)
+                : [...expandedItems, itemValue];
+        }
+        else {
+            if (isExpanded) {
+                nextExpanded = collapsible ? [] : expandedItems;
+            }
+            else {
+                nextExpanded = [itemValue];
+            }
+        }
+        if (!isControlled) {
+            setInternalValue(nextExpanded);
+        }
+        if (multiple) {
+            onChange?.(nextExpanded);
+        }
+        else {
+            onChange?.(nextExpanded[0] ?? '');
+        }
+    }, [expandedItems, multiple, collapsible, isControlled, onChange]);
+    const contextValue = {
+        expandedItems,
+        toggleItem,
+        variant,
+        size,
+        accordionId: autoId,
+    };
+    const mergedStyle = {
+        ...assignInlineVars({
+            [accordionGapVar]: `${gap}px`,
+        }),
+        ...style,
+    };
+    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(accordionRoot, className), style: mergedStyle, "data-testid": testId, ...rest, children: children }) }));
+};
+Accordion.displayName = 'Accordion';
+
+export { Accordion, AccordionContext, AccordionItemContext, useAccordionContext, useAccordionItemContext };
+//# sourceMappingURL=Accordion.js.map

package/dist/esm/components/layout/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/layout/Accordion/Accordion.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkBA;AAEA;AACE;AACF;AACE;;AAGA;;AAEE;;AAIF;AACF;;AAGE;;AAEE;;AAIF;AACF;AAIA;AAEA;;AAC2B;AACzB;AAA0B;;AAE5B;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;;AAiBD;AAEA;AAGA;;AAEE;;AAGF;;AAII;;AAGE;AACE;AACA;;;;;;;AAKA;;;;;;;AASF;;;;;AAIJ;AAIF;;;;;AAKE;;AAGF;AACE;AACE;;AAEF;;AAGF;AAaF;AAEA;;"}

package/dist/esm/components/layout/Accordion/AccordionContent.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
+import { cx } from '../../../utils/cx.js';
+import { contentInner, contentBody, contentWrapperExpanded, contentWrapperCollapsed, contentWrapper } from './Accordion.css.js';
+
+// --- Component ---
+const AccordionContent = ({ children, keepMounted = false, className, style, testId, ref, ...rest }) => {
+    const { size, accordionId } = useAccordionContext();
+    const { value, isExpanded } = useAccordionItemContext();
+    const triggerId = `accordion-${accordionId}-trigger-${value}`;
+    const contentId = `accordion-${accordionId}-content-${value}`;
+    if (!isExpanded && !keepMounted) {
+        return null;
+    }
+    return (jsx("div", { className: cx(contentWrapper, isExpanded ? contentWrapperExpanded : contentWrapperCollapsed), role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !isExpanded || undefined, children: jsx("div", { className: contentInner, children: jsx("div", { ref: ref, className: cx(contentBody({ size }), className), style: style, "data-testid": testId, ...rest, children: children }) }) }));
+};
+AccordionContent.displayName = 'AccordionContent';
+
+export { AccordionContent };
+//# sourceMappingURL=AccordionContent.js.map

package/dist/esm/components/layout/Accordion/AccordionContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.js","sources":["../../../../../../src/components/layout/Accordion/AccordionContent.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEO;;;AAYL;AACA;AAEA;AACE;;AAGF;AAwBF;AAEA;;"}

package/dist/esm/components/layout/Accordion/AccordionItem.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useAccordionContext, AccordionItemContext } from './Accordion.js';
+import { cx } from '../../../utils/cx.js';
+import { accordionItem } from './Accordion.css.js';
+
+// --- Component ---
+const AccordionItem = ({ value, disabled = false, children, className, style, testId, ref, ...rest }) => {
+    const { expandedItems } = useAccordionContext();
+    const isExpanded = expandedItems.includes(value);
+    const itemContext = {
+        value,
+        isExpanded,
+        isDisabled: disabled,
+    };
+    return (jsx(AccordionItemContext.Provider, { value: itemContext, children: jsx("div", { ref: ref, className: cx(accordionItem, className), style: style, "data-testid": testId, ...rest, children: children }) }));
+};
+AccordionItem.displayName = 'AccordionItem';
+
+export { AccordionItem };
+//# sourceMappingURL=AccordionItem.js.map

package/dist/esm/components/layout/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/layout/Accordion/AccordionItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAWA;AAEO;AAUL;;AAGA;;;AAGE;;AAGF;AAaF;AAEA;;"}

package/dist/esm/components/layout/Accordion/AccordionTrigger.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
+import { cx } from '../../../utils/cx.js';
+import { chevronExpanded, chevronCollapsed, chevronStyle, iconArea, actionsArea, triggerButton } from './Accordion.css.js';
+
+const CHEVRON_SIZE_MAP = {
+    sm: { chevronSize: 10 },
+    md: { chevronSize: 12 },
+    lg: { chevronSize: 14 },
+};
+// --- 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 AccordionTrigger = ({ children, icon, actions, indicator, className, style, testId, ref, ...rest }) => {
+    const { toggleItem, variant, size, accordionId } = useAccordionContext();
+    const { value, isExpanded, isDisabled } = useAccordionItemContext();
+    const sizeConfig = CHEVRON_SIZE_MAP[size];
+    const triggerId = `accordion-${accordionId}-trigger-${value}`;
+    const contentId = `accordion-${accordionId}-content-${value}`;
+    const handleClick = useCallback(() => {
+        if (!isDisabled) {
+            toggleItem(value);
+        }
+    }, [isDisabled, toggleItem, value]);
+    const handleActionsClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const showIndicator = indicator !== null;
+    return (jsxs("button", { ref: ref, type: "button", id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": isDisabled || undefined, disabled: isDisabled, onClick: handleClick, className: cx(triggerButton({ variant, size, disabled: isDisabled }), className), style: style, "data-testid": testId, ...rest, children: [showIndicator && (jsx("span", { className: cx(chevronStyle, isExpanded ? chevronExpanded : chevronCollapsed), style: {
+                    width: `${sizeConfig.chevronSize}px`,
+                    height: `${sizeConfig.chevronSize}px`,
+                }, children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { children: children }), actions && (jsx("span", { className: actionsArea, onClick: handleActionsClick, children: actions }))] }));
+};
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+export { AccordionTrigger };
+//# sourceMappingURL=AccordionTrigger.js.map

package/dist/esm/components/layout/Accordion/AccordionTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.js","sources":["../../../../../../src/components/layout/Accordion/AccordionTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAqBA;AACE;AACA;AACA;;AAGF;AAEA;AAkBA;AAEO;AAWL;;AAEA;AAEA;AACA;AAEA;;;;;AAMA;;;AAIA;AAEA;AAyBU;AACA;;AAeZ;AAEA;;"}

package/dist/esm/components/layout/Flex/Flex.css.js

@@ -0,0 +1,11 @@
+import './../../../assets/src/components/layout/Flex/Flex.css.ts.vanilla-D7wY2gY6.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var basisVar = 'var(--basisVar__tsbw353)';
+var flexRecipe = createRuntimeFn({defaultClassName:'Flex_flexRecipe__tsbw354',variantClassNames:{direction:{row:'Flex_flexRecipe_direction_row__tsbw355','row-reverse':'Flex_flexRecipe_direction_row-reverse__tsbw356',column:'Flex_flexRecipe_direction_column__tsbw357','column-reverse':'Flex_flexRecipe_direction_column-reverse__tsbw358'},wrap:{nowrap:'Flex_flexRecipe_wrap_nowrap__tsbw359',wrap:'Flex_flexRecipe_wrap_wrap__tsbw35a','wrap-reverse':'Flex_flexRecipe_wrap_wrap-reverse__tsbw35b'},justify:{'flex-start':'Flex_flexRecipe_justify_flex-start__tsbw35c','flex-end':'Flex_flexRecipe_justify_flex-end__tsbw35d',center:'Flex_flexRecipe_justify_center__tsbw35e','space-between':'Flex_flexRecipe_justify_space-between__tsbw35f','space-around':'Flex_flexRecipe_justify_space-around__tsbw35g','space-evenly':'Flex_flexRecipe_justify_space-evenly__tsbw35h'},align:{'flex-start':'Flex_flexRecipe_align_flex-start__tsbw35i','flex-end':'Flex_flexRecipe_align_flex-end__tsbw35j',center:'Flex_flexRecipe_align_center__tsbw35k',stretch:'Flex_flexRecipe_align_stretch__tsbw35l',baseline:'Flex_flexRecipe_align_baseline__tsbw35m'},alignContent:{'flex-start':'Flex_flexRecipe_alignContent_flex-start__tsbw35n','flex-end':'Flex_flexRecipe_alignContent_flex-end__tsbw35o',center:'Flex_flexRecipe_alignContent_center__tsbw35p',stretch:'Flex_flexRecipe_alignContent_stretch__tsbw35q','space-between':'Flex_flexRecipe_alignContent_space-between__tsbw35r','space-around':'Flex_flexRecipe_alignContent_space-around__tsbw35s'},fullWidth:{true:'Flex_flexRecipe_fullWidth_true__tsbw35t'},fullHeight:{true:'Flex_flexRecipe_fullHeight_true__tsbw35u'}},defaultVariants:{direction:'row',wrap:'nowrap',justify:'flex-start',align:'stretch',alignContent:'stretch'},compoundVariants:[]});
+var gapVar = 'var(--gapVar__tsbw350)';
+var growVar = 'var(--growVar__tsbw351)';
+var shrinkVar = 'var(--shrinkVar__tsbw352)';
+
+export { basisVar, flexRecipe, gapVar, growVar, shrinkVar };
+//# sourceMappingURL=Flex.css.js.map

package/dist/esm/components/layout/Flex/Flex.css.js.map

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

package/dist/esm/components/layout/Flex/Flex.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utils/cx.js';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { basisVar, shrinkVar, growVar, gapVar, flexRecipe } from './Flex.css.js';
+
+/** Base spacing unit in px */
+const SPACING_UNIT = 4;
+/**
+ * Calculate gap value based on spacing multiplier
+ */
+const getGapValue = (gap, customGap) => {
+    if (customGap !== undefined) {
+        return typeof customGap === 'number' ? `${customGap}px` : customGap;
+    }
+    return `${gap * SPACING_UNIT}px`;
+};
+/**
+ * A comprehensive flexbox component providing full control over flex properties.
+ *
+ * More powerful than Stack for complex layouts requiring precise flexbox control.
+ * Supports all flexbox properties, responsive direction changes, and flexible sizing.
+ * Perfect for complex layouts, navigation bars, form layouts, and sophisticated arrangements.
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal flex
+ * <Flex justify="space-between" align="center">
+ *   <div>Left content</div>
+ *   <div>Right content</div>
+ * </Flex>
+ *
+ * // Vertical stack with gap
+ * <Flex direction="column" gap={3}>
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </Flex>
+ *
+ * // Responsive navigation
+ * <Flex
+ *   direction="column"
+ *   md="row"
+ *   justify="space-between"
+ *   align="center"
+ *   gap={2}
+ * >
+ *   <Logo />
+ *   <Navigation />
+ *   <UserMenu />
+ * </Flex>
+ *
+ * // Flexible form layout
+ * <Flex direction="column" gap={2} maxWidth="400px">
+ *   <Input label="Email" />
+ *   <Input label="Password" />
+ *   <Flex justify="space-between" gap={2}>
+ *     <Button fullWidth variant="ghost">Cancel</Button>
+ *     <Button fullWidth variant="filled">Login</Button>
+ *   </Flex>
+ * </Flex>
+ *
+ * // Card grid with wrapping
+ * <Flex wrap="wrap" gap={3} justify="center">
+ *   <Card basis="300px">Card 1</Card>
+ *   <Card basis="300px">Card 2</Card>
+ *   <Card basis="300px">Card 3</Card>
+ * </Flex>
+ *
+ * // Complex layout with nesting
+ * <Flex direction="column" fullHeight>
+ *   <Header />
+ *   <Flex grow={1}>
+ *     <Sidebar basis="200px" />
+ *     <MainContent grow={1} />
+ *   </Flex>
+ *   <Footer />
+ * </Flex>
+ * ```
+ */
+const Flex = ({ children, direction = 'row', sm, md, lg, xl, wrap = 'nowrap', justify = 'flex-start', align = 'stretch', alignContent = 'stretch', gap = 0, customGap, grow = 0, shrink = 1, basis = 'auto', fullWidth = false, fullHeight = false, minHeight, maxWidth, className, testId, style, ref, ...htmlProps }) => {
+    const basisValue = typeof basis === 'number' ? `${basis}px` : basis;
+    const dynamicStyle = {
+        ...assignInlineVars({
+            [gapVar]: getGapValue(gap, customGap),
+            [growVar]: String(grow),
+            [shrinkVar]: String(shrink),
+            [basisVar]: basisValue,
+        }),
+        ...(minHeight !== undefined
+            ? {
+                minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight,
+            }
+            : undefined),
+        ...(maxWidth !== undefined
+            ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth }
+            : undefined),
+        ...style,
+    };
+    // Build data attributes for responsive direction overrides
+    const dataAttrs = {};
+    if (sm)
+        dataAttrs['data-sm-dir'] = sm;
+    if (md)
+        dataAttrs['data-md-dir'] = md;
+    if (lg)
+        dataAttrs['data-lg-dir'] = lg;
+    if (xl)
+        dataAttrs['data-xl-dir'] = xl;
+    return (jsx("div", { ref: ref, className: cx(flexRecipe({
+            direction,
+            wrap,
+            justify,
+            align,
+            alignContent,
+            fullWidth: fullWidth || undefined,
+            fullHeight: fullHeight || undefined,
+        }), className), "data-testid": testId, style: dynamicStyle, ...dataAttrs, ...htmlProps, children: children }));
+};
+Flex.displayName = 'Flex';
+
+export { Flex };
+//# sourceMappingURL=Flex.js.map

package/dist/esm/components/layout/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkMA;AACA;AAEA;;AAEG;AACH;AACE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACI;AA0BL;AAEA;AACE;;AAEE;AACA;;;;AAIA;AACI;AAED;;;AAGH;;AAEF;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;;;;;;;;;AAcD;AAWT;AAEA;;"}

package/dist/esm/components/layout/Grid/Grid.css.js

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/layout/Grid/Grid.css.ts.vanilla-gqfqUi29.css';
+
+var columnsVar = 'var(--columnsVar__wzrx2t1)';
+var gapVar = 'var(--gapVar__wzrx2t0)';
+var gridContainer = 'Grid_gridContainer__wzrx2t2';
+var gridItem = 'Grid_gridItem__wzrx2t3';
+
+export { columnsVar, gapVar, gridContainer, gridItem };
+//# sourceMappingURL=Grid.css.js.map

package/dist/esm/components/layout/Grid/Grid.css.js.map

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

package/dist/esm/components/layout/Grid/Grid.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utils/cx.js';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { columnsVar, gapVar, gridContainer, gridItem } from './Grid.css.js';
+
+/** Base spacing unit in px */
+const SPACING_UNIT = 4;
+/**
+ * Calculate gap value based on spacing multiplier
+ */
+const getGapValue = (spacing, customGap) => {
+    if (customGap !== undefined) {
+        return typeof customGap === 'number' ? `${customGap}px` : customGap;
+    }
+    return `${spacing * SPACING_UNIT}px`;
+};
+/**
+ * A flexible 12-column grid system component for creating responsive layouts.
+ *
+ * Supports both container and item modes. Container grids create the grid layout,
+ * while item grids define how much space each child should occupy.
+ * Built on CSS Grid for modern, flexible layouts.
+ *
+ * @example
+ * ```tsx
+ * // Basic two-column layout
+ * <Grid container spacing="md">
+ *   <Grid size={6}>Left content</Grid>
+ *   <Grid size={6}>Right content</Grid>
+ * </Grid>
+ *
+ * // Responsive three-column layout
+ * <Grid container spacing="lg">
+ *   <Grid xs={12} sm={6} md={4}>Card 1</Grid>
+ *   <Grid xs={12} sm={6} md={4}>Card 2</Grid>
+ *   <Grid xs={12} sm={12} md={4}>Card 3</Grid>
+ * </Grid>
+ *
+ * // Nested grids
+ * <Grid container spacing="md">
+ *   <Grid size={8}>
+ *     <Grid container spacing="sm">
+ *       <Grid size={6}>Nested left</Grid>
+ *       <Grid size={6}>Nested right</Grid>
+ *     </Grid>
+ *   </Grid>
+ *   <Grid size={4}>Sidebar</Grid>
+ * </Grid>
+ *
+ * // Custom gap
+ * <Grid container gap="2rem">
+ *   <Grid size={4}>Item 1</Grid>
+ *   <Grid size={4}>Item 2</Grid>
+ *   <Grid size={4}>Item 3</Grid>
+ * </Grid>
+ * ```
+ */
+const Grid = ({ children, container = false, size, xs, sm, md, lg, xl, spacing = 2, columns = 12, gap, className, testId, style, ref, ...htmlProps }) => {
+    if (container) {
+        const containerStyle = {
+            ...assignInlineVars({
+                [gapVar]: getGapValue(spacing, gap),
+                [columnsVar]: String(columns),
+            }),
+            ...style,
+        };
+        return (jsx("div", { ref: ref, className: cx(gridContainer, className), "data-testid": testId, style: containerStyle, ...htmlProps, children: children }));
+    }
+    // Item mode — use data attributes for responsive grid-column spans
+    const dataAttrs = {};
+    if (xs !== undefined)
+        dataAttrs['data-xs'] = String(xs);
+    if (sm !== undefined)
+        dataAttrs['data-sm'] = String(sm);
+    if (md !== undefined)
+        dataAttrs['data-md'] = String(md);
+    if (lg !== undefined)
+        dataAttrs['data-lg'] = String(lg);
+    if (xl !== undefined)
+        dataAttrs['data-xl'] = String(xl);
+    const itemStyle = {
+        ...(size !== undefined
+            ? { gridColumn: `span ${size === 'auto' ? 'auto' : size}` }
+            : undefined),
+        ...style,
+    };
+    return (jsx("div", { ref: ref, className: cx(gridItem, className), "data-testid": testId, style: itemStyle, ...dataAttrs, ...htmlProps, children: children }));
+};
+Grid.displayName = 'Grid';
+
+export { Grid };
+//# sourceMappingURL=Grid.js.map

package/dist/esm/components/layout/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../../../../src/components/layout/Grid/Grid.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAoGA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;;;AAoBC;AACE;;AAEE;;AAEF;;;;;;;;;;;;;;;;AA2BJ;;AAEI;;AAEF;;AAGF;AAYF;AAEA;;"}

package/dist/esm/components/layout/PanelSurface/PanelSurface.css.js

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/layout/PanelSurface/PanelSurface.css.ts.vanilla-HZvObe0l.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var backgroundVar = 'var(--backgroundVar__1h989w10)';
+var bodyHidden = 'PanelSurface_bodyHidden__1h989w1b';
+var bodyScrollable = 'PanelSurface_bodyScrollable__1h989w1a';
+var bodyStyle = 'PanelSurface_bodyStyle__1h989w19';
+var footerRecipe = createRuntimeFn({defaultClassName:'PanelSurface_footerRecipe__1h989w1c',variantClassNames:{size:{sm:'PanelSurface_footerRecipe_size_sm__1h989w1d',md:'PanelSurface_footerRecipe_size_md__1h989w1e',lg:'PanelSurface_footerRecipe_size_lg__1h989w1f'}},defaultVariants:{},compoundVariants:[]});
+var headerActions = 'PanelSurface_headerActions__1h989w18';
+var headerRecipe = createRuntimeFn({defaultClassName:'PanelSurface_headerRecipe__1h989w14',variantClassNames:{size:{sm:'PanelSurface_headerRecipe_size_sm__1h989w15',md:'PanelSurface_headerRecipe_size_md__1h989w16',lg:'PanelSurface_headerRecipe_size_lg__1h989w17'}},defaultVariants:{},compoundVariants:[]});
+var rootBordered = 'PanelSurface_rootBordered__1h989w12';
+var rootNoBorder = 'PanelSurface_rootNoBorder__1h989w13';
+var rootStyle = 'PanelSurface_rootStyle__1h989w11';
+
+export { backgroundVar, bodyHidden, bodyScrollable, bodyStyle, footerRecipe, headerActions, headerRecipe, rootBordered, rootNoBorder, rootStyle };
+//# sourceMappingURL=PanelSurface.css.js.map

package/dist/esm/components/layout/PanelSurface/PanelSurface.css.js.map

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

package/dist/esm/components/layout/PanelSurface/PanelSurface.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, createContext, useContext } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { backgroundVar, rootBordered, rootNoBorder, rootStyle, footerRecipe, bodyScrollable, bodyHidden, bodyStyle, headerActions, headerRecipe } from './PanelSurface.css.js';
+import { vars } from '../../../theme/contract.css.js';
+
+const PanelSurfaceContext = 
+/*#__PURE__*/ createContext({
+    size: 'md',
+});
+const usePanelSurface = () => useContext(PanelSurfaceContext);
+const PanelSurfaceHeader = ({ children, actions, className, style, testId, ref, ...rest }) => {
+    const { size } = usePanelSurface();
+    return (jsxs("div", { ref: ref, className: cx(headerRecipe({ size }), className), style: style, "data-testid": testId, ...rest, children: [jsx("span", { children: children }), actions ? jsx("div", { className: headerActions, children: actions }) : null] }));
+};
+PanelSurfaceHeader.displayName = 'PanelSurface.Header';
+const PanelSurfaceBody = ({ children, scroll = false, padding = 0, className, style, testId, ref, ...rest }) => {
+    const resolvedPadding = typeof padding === 'number' ? `${padding}px` : String(padding);
+    const mergedStyle = {
+        padding: resolvedPadding,
+        ...style,
+    };
+    return (jsx("div", { ref: ref, className: cx(bodyStyle, scroll ? bodyScrollable : bodyHidden, className), style: mergedStyle, "data-testid": testId, ...rest, children: children }));
+};
+PanelSurfaceBody.displayName = 'PanelSurface.Body';
+const PanelSurfaceFooter = ({ children, className, style, testId, ref, ...rest }) => {
+    const { size } = usePanelSurface();
+    return (jsx("div", { ref: ref, className: cx(footerRecipe({ size }), className), style: style, "data-testid": testId, ...rest, children: children }));
+};
+PanelSurfaceFooter.displayName = 'PanelSurface.Footer';
+const PanelSurfaceRoot = ({ children, size = 'md', bordered = true, background, className, style, testId, ref, ...rest }) => {
+    const contextValue = useMemo(() => ({ size }), [size]);
+    const mergedStyle = {
+        ...assignInlineVars({
+            [backgroundVar]: background ?? vars.colors.background.secondary,
+        }),
+        ...style,
+    };
+    return (jsx(PanelSurfaceContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(rootStyle, bordered ? rootBordered : rootNoBorder, className), style: mergedStyle, "data-testid": testId, ...rest, children: children }) }));
+};
+PanelSurfaceRoot.displayName = 'PanelSurface';
+const PanelSurface = /*#__PURE__*/ Object.assign(PanelSurfaceRoot, {
+    Header: PanelSurfaceHeader,
+    Body: PanelSurfaceBody,
+    Footer: PanelSurfaceFooter,
+});
+
+export { PanelSurface };
+//# sourceMappingURL=PanelSurface.js.map

package/dist/esm/components/layout/PanelSurface/PanelSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSurface.js","sources":["../../../../../../src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACD;AAEH;AAEA;AASE;;AAcF;AAEA;AAEA;AAUE;AAGA;AACE;AACA;;AAGF;AAWF;AAEA;AAEA;AAQE;AAEA;AAWF;AAEA;AAEA;AAWE;AAEA;AACE;;;AAGA;;;AAoBJ;AAEA;AAEO;AACL;AACA;AACA;AACD;;"}

package/dist/esm/components/layout/ScrollArea/ScrollArea.css.js

@@ -0,0 +1,27 @@
+import './../../../assets/src/components/layout/ScrollArea/ScrollArea.css.ts.vanilla-UsyrfXTC.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var fadeMaskBase = 'ScrollArea_fadeMaskBase__17ntphkh';
+var fadeMaskBottom = 'ScrollArea_fadeMaskBottom__17ntphkl';
+var fadeMaskHiddenStyle = 'ScrollArea_fadeMaskHiddenStyle__17ntphkj';
+var fadeMaskLeft = 'ScrollArea_fadeMaskLeft__17ntphkm';
+var fadeMaskRight = 'ScrollArea_fadeMaskRight__17ntphkn';
+var fadeMaskSizeVar = 'var(--fadeMaskSizeVar__17ntphk2)';
+var fadeMaskTop = 'ScrollArea_fadeMaskTop__17ntphkk';
+var fadeMaskVisible = 'ScrollArea_fadeMaskVisible__17ntphki';
+var rootAutoFill = 'ScrollArea_rootAutoFill__17ntphk4';
+var rootStyle = 'ScrollArea_rootStyle__17ntphk3';
+var scrollbarHidden = 'ScrollArea_scrollbarHidden__17ntphkc';
+var scrollbarHorizontal = 'ScrollArea_scrollbarHorizontal__17ntphka';
+var scrollbarPaddingVar = 'var(--scrollbarPaddingVar__17ntphk1)';
+var scrollbarVertical = 'ScrollArea_scrollbarVertical__17ntphk9';
+var scrollbarVisible = 'ScrollArea_scrollbarVisible__17ntphkb';
+var scrollbarWidthVar = 'var(--scrollbarWidthVar__17ntphk0)';
+var thumbBase = 'ScrollArea_thumbBase__17ntphkd';
+var thumbDragging = 'ScrollArea_thumbDragging__17ntphkg';
+var thumbHorizontal = 'ScrollArea_thumbHorizontal__17ntphkf';
+var thumbVertical = 'ScrollArea_thumbVertical__17ntphke';
+var viewportRecipe = createRuntimeFn({defaultClassName:'ScrollArea_viewportRecipe__17ntphk5',variantClassNames:{direction:{vertical:'ScrollArea_viewportRecipe_direction_vertical__17ntphk6',horizontal:'ScrollArea_viewportRecipe_direction_horizontal__17ntphk7',both:'ScrollArea_viewportRecipe_direction_both__17ntphk8'}},defaultVariants:{},compoundVariants:[]});
+
+export { fadeMaskBase, fadeMaskBottom, fadeMaskHiddenStyle, fadeMaskLeft, fadeMaskRight, fadeMaskSizeVar, fadeMaskTop, fadeMaskVisible, rootAutoFill, rootStyle, scrollbarHidden, scrollbarHorizontal, scrollbarPaddingVar, scrollbarVertical, scrollbarVisible, scrollbarWidthVar, thumbBase, thumbDragging, thumbHorizontal, thumbVertical, viewportRecipe };
+//# sourceMappingURL=ScrollArea.css.js.map

package/dist/esm/components/layout/ScrollArea/ScrollArea.css.js.map

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