entangle-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
+
+const CONTENT_SIZE_MAP = {
+    sm: { paddingVKey: 'sm', paddingHKey: 'md' },
+    md: { paddingVKey: 'md', paddingHKey: 'lg' },
+    lg: { paddingVKey: 'lg', paddingHKey: 'xl' },
+};
+const StyledContentWrapper = styled.div `
+  display: grid;
+  grid-template-rows: ${props => (props.$expanded ? '1fr' : '0fr')};
+  transition: grid-template-rows ${props => props.theme.transitions.normal};
+`;
+const StyledContentInner = styled.div `
+  overflow: hidden;
+  min-height: 0;
+`;
+const StyledContentBody = styled.div `
+  padding: ${props => props.theme.spacing[CONTENT_SIZE_MAP[props.$size].paddingVKey]}px
+    ${props => props.theme.spacing[CONTENT_SIZE_MAP[props.$size].paddingHKey]}px;
+`;
+// --- Component ---
+const 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(StyledContentWrapper, { "$expanded": isExpanded, role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !isExpanded || undefined, children: jsx(StyledContentInner, { children: jsx(StyledContentBody, { ref: ref, "$size": size, className: 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":["_jsx"],"mappings":";;;;AAaA,MAAM,gBAAgB,GAA6C;IACjE,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE;IAC5C,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE;IAC5C,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE;CAC7C;AAQD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA2B;;AAE1C,sBAAA,EAAA,KAAK,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC,CAAA;mCAC/B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAA;CACzE;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGpC;AAMD,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAwB;AAC/C,WAAA,EAAA,KAAK,IACZ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAA;AAC9D,IAAA,EAAA,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAA;CAC5E;AAED;AAEa,MAAA,gBAAgB,GAAoC,CAAC,EAChE,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,mBAAmB,EAAE;IACnD,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,uBAAuB,EAAE;AAEvD,IAAA,MAAM,SAAS,GAAG,CAAA,UAAA,EAAa,WAAW,CAAY,SAAA,EAAA,KAAK,EAAE;AAC7D,IAAA,MAAM,SAAS,GAAG,CAAA,UAAA,EAAa,WAAW,CAAY,SAAA,EAAA,KAAK,EAAE;AAE7D,IAAA,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE;AAC/B,QAAA,OAAO,IAAI;;IAGb,QACEA,GAAC,CAAA,oBAAoB,EACR,EAAA,WAAA,EAAA,UAAU,EACrB,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,SAAS,EACI,iBAAA,EAAA,SAAS,EAC1B,MAAM,EAAE,CAAC,UAAU,IAAI,SAAS,EAEhC,QAAA,EAAAA,GAAA,CAAC,kBAAkB,EAAA,EAAA,QAAA,EACjBA,IAAC,iBAAiB,EAAA,EAChB,GAAG,EAAE,GAAG,EAAA,OAAA,EACD,IAAI,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,aAAA,EACC,MAAM,EAAA,GACf,IAAI,EAAA,QAAA,EAEP,QAAQ,EACS,CAAA,EAAA,CACD,EACA,CAAA;AAE3B;AAEA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { useAccordionContext, AccordionItemContext } from './Accordion.js';
+
+// --- Styled ---
+const StyledAccordionItem = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+// --- 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(StyledAccordionItem, { ref: ref, className: 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":["_jsx"],"mappings":";;;;AAQA;AAEA,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGrC;AAED;AAEa,MAAA,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,mBAAmB,EAAE;IAC/C,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEhD,IAAA,MAAM,WAAW,GAA8B;QAC7C,KAAK;QACL,UAAU;AACV,QAAA,UAAU,EAAE,QAAQ;KACrB;AAED,IAAA,QACEA,GAAA,CAAC,oBAAoB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,WAAW,EAC/C,QAAA,EAAAA,GAAA,CAAC,mBAAmB,EAAA,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,aAAA,EACC,MAAM,EAAA,GACf,IAAI,EAEP,QAAA,EAAA,QAAQ,EACW,CAAA,EAAA,CACQ;AAEpC;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

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

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import styled from '@emotion/styled';
+import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
+
+const TRIGGER_SIZE_MAP = {
+    sm: { height: 28, paddingKey: 'md', fontKey: 'xs', chevronSize: 10 },
+    md: { height: 32, paddingKey: 'lg', fontKey: 'sm', chevronSize: 12 },
+    lg: { height: 38, paddingKey: 'xl', fontKey: 'md', chevronSize: 14 },
+};
+const StyledTriggerButton = styled.button `
+  /* Reset */
+  margin: 0;
+  border: none;
+  font-family: inherit;
+  outline: none;
+  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+  width: 100%;
+  text-align: left;
+
+  /* Layout */
+  display: flex;
+  align-items: center;
+  gap: ${props => props.theme.spacing.sm}px;
+
+  /* Sizing */
+  height: ${props => TRIGGER_SIZE_MAP[props.$size].height}px;
+  padding: 0
+    ${props => props.theme.spacing[TRIGGER_SIZE_MAP[props.$size].paddingKey]}px;
+  font-size: ${props => props.theme.typography.fontSize[TRIGGER_SIZE_MAP[props.$size].fontKey]}px;
+  font-weight: ${props => props.theme.typography.fontWeight.medium};
+  color: ${props => props.theme.colors.text.primary};
+  transition: background ${props => props.theme.transitions.fast};
+
+  /* Disabled */
+  opacity: ${props => (props.$disabled ? 0.5 : 1)};
+
+  /* Variant styles */
+  ${props => {
+    const { colors } = props.theme;
+    switch (props.$variant) {
+        case 'ghost':
+            return `
+          background: transparent;
+          border-bottom: 1px solid ${colors.border.default};
+          &:hover:not(:disabled) {
+            background: ${colors.surface.hover};
+          }
+        `;
+        case 'filled':
+            return `
+          background: ${colors.background.tertiary};
+          &:hover:not(:disabled) {
+            background: ${colors.surface.hover};
+          }
+        `;
+        default:
+            return `
+          background: ${colors.surface.default};
+          border-bottom: 1px solid ${colors.border.default};
+          &:hover:not(:disabled) {
+            background: ${colors.surface.hover};
+          }
+        `;
+    }
+}}
+
+  /* Focus visible */
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+    z-index: 1;
+  }
+`;
+const StyledChevron = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform ${props => props.theme.transitions.fast};
+  transform: rotate(${props => (props.$expanded ? '90deg' : '0deg')});
+  color: ${props => props.theme.colors.text.muted};
+
+  svg {
+    width: ${props => props.$size}px;
+    height: ${props => props.$size}px;
+  }
+`;
+const StyledActionsArea = styled.span `
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  gap: ${props => props.theme.spacing.xs}px;
+`;
+const StyledIconArea = styled.span `
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+`;
+// --- 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 = TRIGGER_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(StyledTriggerButton, { ref: ref, type: "button", id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": isDisabled || undefined, disabled: isDisabled, onClick: handleClick, "$variant": variant, "$size": size, "$expanded": isExpanded, "$disabled": isDisabled, className: className, style: style, "data-testid": testId, ...rest, children: [showIndicator && (jsx(StyledChevron, { "$expanded": isExpanded, "$size": sizeConfig.chevronSize, children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), icon && jsx(StyledIconArea, { children: icon }), jsx("span", { children: children }), actions && (jsx(StyledActionsArea, { 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":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -0,0 +1,149 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+/**
+ * Calculate gap value based on spacing multiplier and theme
+ */
+const getGapValue = (gap, theme, customGap) => {
+    if (customGap !== undefined) {
+        return typeof customGap === 'number' ? `${customGap}px` : customGap;
+    }
+    return `${gap * theme.spacing.sm}px`;
+};
+const StyledFlex = styled.div `
+  /* Base flex container */
+  display: flex;
+  box-sizing: border-box;
+
+  /* Flex properties */
+  flex-direction: ${props => props.$direction};
+  flex-wrap: ${props => props.$wrap};
+  justify-content: ${props => props.$justify};
+  align-items: ${props => props.$align};
+  align-content: ${props => props.$alignContent};
+
+  /* Gap between items */
+  gap: ${props => getGapValue(props.$gap, props.theme, props.$customGap)};
+
+  /* Flex item properties (when this Flex is inside another flex container) */
+  flex-grow: ${props => props.$grow};
+  flex-shrink: ${props => props.$shrink};
+  flex-basis: ${props => typeof props.$basis === 'number' ? `${props.$basis}px` : props.$basis};
+
+  /* Size control */
+  ${props => props.$fullWidth && 'width: 100%;'}
+  ${props => props.$fullHeight && 'height: 100%;'}
+  
+  ${props => props.$minHeight &&
+    `min-height: ${typeof props.$minHeight === 'number'
+        ? `${props.$minHeight}px`
+        : props.$minHeight};`}
+  
+  ${props => props.$maxWidth &&
+    `max-width: ${typeof props.$maxWidth === 'number'
+        ? `${props.$maxWidth}px`
+        : props.$maxWidth};`}
+  
+  /* Responsive direction changes */
+  ${props => props.$sm &&
+    `
+    @media (min-width: 576px) {
+      flex-direction: ${props.$sm};
+    }
+  `}
+  
+  ${props => props.$md &&
+    `
+    @media (min-width: 768px) {
+      flex-direction: ${props.$md};
+    }
+  `}
+  
+  ${props => props.$lg &&
+    `
+    @media (min-width: 992px) {
+      flex-direction: ${props.$lg};
+    }
+  `}
+  
+  ${props => props.$xl &&
+    `
+    @media (min-width: 1200px) {
+      flex-direction: ${props.$xl};
+    }
+  `}
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * 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, css, style, ref, ...htmlProps }) => {
+    return (jsx(StyledFlex, { ref: ref, className: className, "$direction": direction, "$sm": sm, "$md": md, "$lg": lg, "$xl": xl, "$wrap": wrap, "$justify": justify, "$align": align, "$alignContent": alignContent, "$gap": gap, "$customGap": customGap, "$grow": grow, "$shrink": shrink, "$basis": basis, "$fullWidth": fullWidth, "$fullHeight": fullHeight, "$minHeight": minHeight, "$maxWidth": maxWidth, "$css": css, "data-testid": testId, style: style, ...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":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,118 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+/**
+ * Calculate gap value based on spacing multiplier and theme
+ */
+const getGapValue = (spacing, theme, customGap) => {
+    if (customGap !== undefined) {
+        return typeof customGap === 'number' ? `${customGap}px` : customGap;
+    }
+    return `${spacing * theme.spacing.sm}px`;
+};
+const StyledGrid = styled.div `
+  /* Container styles - creates CSS Grid layout */
+  ${props => props.$container &&
+    `
+    display: grid;
+    grid-template-columns: repeat(${props.$columns}, 1fr);
+    width: 100%;
+    box-sizing: border-box;
+    gap: ${getGapValue(props.$spacing ?? 2, props.theme, props.$gap)};
+  `}
+
+  /* Item styles - defines how this grid item behaves */
+  ${props => !props.$container &&
+    props.$size &&
+    `
+    grid-column: span ${props.$size === 'auto' ? 'auto' : props.$size};
+  `}
+  
+  /* Responsive grid item sizes */
+  ${props => !props.$container &&
+    `
+    /* Base size */
+    ${props.$size && `grid-column: span ${props.$size === 'auto' ? 'auto' : props.$size};`}
+    
+    /* Extra small screens and up */
+    ${props.$xs &&
+        `
+      grid-column: span ${props.$xs === 'auto' ? 'auto' : props.$xs};
+    `}
+    
+    /* Small screens and up (576px) */
+    @media (min-width: 576px) {
+      ${props.$sm && `grid-column: span ${props.$sm === 'auto' ? 'auto' : props.$sm};`}
+    }
+    
+    /* Medium screens and up (768px) */
+    @media (min-width: 768px) {
+      ${props.$md && `grid-column: span ${props.$md === 'auto' ? 'auto' : props.$md};`}
+    }
+    
+    /* Large screens and up (992px) */
+    @media (min-width: 992px) {
+      ${props.$lg && `grid-column: span ${props.$lg === 'auto' ? 'auto' : props.$lg};`}
+    }
+    
+    /* Extra large screens and up (1200px) */
+    @media (min-width: 1200px) {
+      ${props.$xl && `grid-column: span ${props.$xl === 'auto' ? 'auto' : props.$xl};`}
+    }
+  `}
+  
+  /* Ensure proper box sizing for all grid items */
+  box-sizing: border-box;
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * 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, css, style, ref, ...htmlProps }) => {
+    return (jsx(StyledGrid, { ref: ref, className: className, "$container": container, "$size": size, "$xs": xs, "$sm": sm, "$md": md, "$lg": lg, "$xl": xl, "$spacing": spacing, "$columns": columns, "$gap": gap, "$css": css, "data-testid": testId, style: style, ...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":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, createContext, useContext } from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+const PanelSurfaceContext = 
+/*#__PURE__*/ createContext({
+    size: 'md',
+});
+const usePanelSurface = () => useContext(PanelSurfaceContext);
+const HEADER_SIZE_MAP = {
+    sm: { minHeight: 24, paddingKey: 'sm', fontKey: 'xs' },
+    md: { minHeight: 28, paddingKey: 'md', fontKey: 'sm' },
+    lg: { minHeight: 32, paddingKey: 'lg', fontKey: 'md' },
+};
+const StyledRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: ${({ $background, theme }) => $background ?? theme.colors.background.secondary};
+  color: ${({ theme }) => theme.colors.text.primary};
+  border: ${({ $bordered, theme }) => $bordered ? `1px solid ${theme.colors.border.default}` : 'none'};
+  border-radius: ${({ theme }) => theme.borderRadius.md}px;
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: ${({ $size }) => HEADER_SIZE_MAP[$size].minHeight}px;
+  padding: 0
+    ${({ $size, theme }) => theme.spacing[HEADER_SIZE_MAP[$size].paddingKey]}px;
+  background: ${({ theme }) => theme.colors.background.secondary};
+  color: ${({ theme }) => theme.colors.text.secondary};
+  font-size: ${({ $size, theme }) => theme.typography.fontSize[HEADER_SIZE_MAP[$size].fontKey]}px;
+  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border.default};
+  flex-shrink: 0;
+  user-select: none;
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledHeaderActions = styled.div `
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xs}px;
+  margin-left: ${({ theme }) => theme.spacing.md}px;
+`;
+const StyledBody = styled.div `
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
+  padding: ${({ $padding }) => $padding};
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledFooter = styled.div `
+  display: flex;
+  align-items: center;
+  min-height: ${({ $size }) => HEADER_SIZE_MAP[$size].minHeight}px;
+  padding: 0
+    ${({ $size, theme }) => theme.spacing[HEADER_SIZE_MAP[$size].paddingKey]}px;
+  border-top: 1px solid ${({ theme }) => theme.colors.border.default};
+  background: ${({ theme }) => theme.colors.background.secondary};
+  color: ${({ theme }) => theme.colors.text.secondary};
+  font-size: ${({ $size, theme }) => theme.typography.fontSize[HEADER_SIZE_MAP[$size].fontKey]}px;
+  flex-shrink: 0;
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const PanelSurfaceHeader = ({ children, actions, className, style, testId, css, ref, ...rest }) => {
+    const { size } = usePanelSurface();
+    return (jsxs(StyledHeader, { ref: ref, className: className, style: style, "data-testid": testId, "$size": size, "$css": css, ...rest, children: [jsx("span", { children: children }), actions ? jsx(StyledHeaderActions, { children: actions }) : null] }));
+};
+PanelSurfaceHeader.displayName = 'PanelSurface.Header';
+const PanelSurfaceBody = ({ children, scroll = false, padding = 0, className, style, testId, css, ref, ...rest }) => {
+    const resolvedPadding = typeof padding === 'number' ? `${padding}px` : String(padding);
+    return (jsx(StyledBody, { ref: ref, className: className, style: style, "data-testid": testId, "$scroll": scroll, "$padding": resolvedPadding, "$css": css, ...rest, children: children }));
+};
+PanelSurfaceBody.displayName = 'PanelSurface.Body';
+const PanelSurfaceFooter = ({ children, className, style, testId, css, ref, ...rest }) => {
+    const { size } = usePanelSurface();
+    return (jsx(StyledFooter, { ref: ref, className: className, style: style, "data-testid": testId, "$size": size, "$css": css, ...rest, children: children }));
+};
+PanelSurfaceFooter.displayName = 'PanelSurface.Footer';
+const PanelSurfaceRoot = ({ children, size = 'md', bordered = true, background, className, style, testId, css, ref, ...rest }) => {
+    const contextValue = useMemo(() => ({ size }), [size]);
+    return (jsx(PanelSurfaceContext.Provider, { value: contextValue, children: jsx(StyledRoot, { ref: ref, className: className, style: style, "data-testid": testId, "$bordered": bordered, "$background": background, "$css": css, ...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":["_jsxs","_jsx"],"mappings":"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"}