entangle-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,183 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+const StyledButton = styled.button `
+  /* Reset */
+  margin: 0;
+  font-family: inherit;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: ${props => props.theme.typography.fontWeight.medium};
+  border-radius: ${props => props.theme.borderRadius.md}px;
+  transition: all ${props => props.theme.transitions.normal};
+  outline: none;
+
+  /* Size variants */
+  ${props => {
+    const sizes = {
+        sm: {
+            height: '20px',
+            padding: `0 ${props.theme.spacing.sm}px`,
+            fontSize: `${props.theme.typography.fontSize.md}px`,
+            gap: `${props.theme.spacing.xs}px`,
+        },
+        md: {
+            height: '24px',
+            padding: `0 ${props.theme.spacing.md}px`,
+            fontSize: `${props.theme.typography.fontSize.md}px`,
+            gap: `${props.theme.spacing.sm}px`,
+        },
+        lg: {
+            height: '32px',
+            padding: `0 ${props.theme.spacing.xl}px`,
+            fontSize: `${props.theme.typography.fontSize.lg}px`,
+            gap: `${props.theme.spacing.md}px`,
+        },
+    };
+    const size = sizes[props.$size];
+    return `
+      height: ${size.height};
+      padding: ${size.padding};
+      font-size: ${size.fontSize};
+      gap: ${size.gap};
+    `;
+}}
+
+  /* Variant styles */
+  ${props => {
+    const { colors } = props.theme;
+    switch (props.$variant) {
+        case 'default':
+            return `
+          background: transparent;
+          border: 1px solid ${colors.border.default};
+          color: ${colors.text.primary};
+          
+          &:hover:not(:disabled) {
+            background: ${colors.surface.hover};
+            border-color: transparent;
+          }
+          
+          &:active:not(:disabled) {
+            background: ${colors.surface.active};
+          }
+        `;
+        case 'ghost':
+            return `
+          background: transparent;
+          border: 1px solid transparent;
+          color: ${colors.text.secondary};
+          
+          &:hover:not(:disabled) {
+            background: ${colors.surface.hover};
+            color: ${colors.text.primary};
+          }
+          
+          &:active:not(:disabled) {
+            background: ${colors.surface.active};
+          }
+        `;
+        case 'filled':
+            return `
+          background: ${colors.accent.primary};
+          border: 1px solid ${colors.accent.primary};
+          color: white;
+          
+          &:hover:not(:disabled) {
+            background: ${colors.accent.secondary};
+            border-color: ${colors.accent.secondary};
+          }
+          
+          &:active:not(:disabled) {
+            background: ${colors.accent.secondary};
+          }
+        `;
+        default:
+            return '';
+    }
+}}
+  
+  /* Full width */
+  ${props => props.$fullWidth && 'width: 100%;'}
+  
+  /* Disabled state */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Focus visible */
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+  }
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * Loading spinner component
+ */
+const LoadingSpinner = styled.div `
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+/**
+ * Icon wrapper
+ */
+const IconWrapper = styled.span `
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+/**
+ * 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, css, ref, ...props }) => {
+    return (jsxs(StyledButton, { ref: ref, className: className, "$size": size, "$variant": variant, "$loading": loading, "$fullWidth": fullWidth, "$css": css, disabled: disabled || loading, onClick: onClick, "data-testid": testId, style: style, ...props, children: [loading ? (jsx(LoadingSpinner, {})) : icon ? (jsx(IconWrapper, { 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":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,205 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useId, useState, useCallback } from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+import '../../form/FormLabel.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import '../../form/InputWrapper.js';
+import { CheckboxGroupContext } from './CheckboxGroup.js';
+
+// --- Size maps ---
+const BOX_SIZES = {
+    sm: 14,
+    md: 16,
+    lg: 20,
+};
+const ICON_SIZES = {
+    sm: 10,
+    md: 12,
+    lg: 14,
+};
+const FONT_SIZE_MAP = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+};
+// --- Styled components ---
+const StyledCheckboxContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const StyledCheckboxLabel = styled.label `
+  display: inline-flex;
+  align-items: center;
+  gap: ${props => props.theme.spacing.sm}px;
+  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
+  flex-direction: ${props => props.$labelPosition === 'left' ? 'row-reverse' : 'row'};
+  font-size: ${props => props.theme.typography.fontSize[FONT_SIZE_MAP[props.$size]]}px;
+  color: ${props => props.$disabled
+    ? props.theme.colors.text.disabled
+    : props.theme.colors.text.secondary};
+  line-height: ${props => props.theme.typography.lineHeight.normal};
+  user-select: none;
+`;
+const StyledCheckboxBox = styled.button `
+  /* Reset */
+  padding: 0;
+  margin: 0;
+  border: none;
+  font: inherit;
+  outline: none;
+  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
+
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  /* Sizing */
+  width: ${props => BOX_SIZES[props.$size]}px;
+  height: ${props => BOX_SIZES[props.$size]}px;
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+  transition: all ${props => props.theme.transitions.fast};
+
+  /* Variant + State styles */
+  ${props => {
+    const { colors } = props.theme;
+    const isActive = props.$checked || props.$indeterminate;
+    if (props.$disabled) {
+        return `
+        opacity: 0.5;
+        background: ${isActive ? colors.accent.primary : props.$variant === 'filled' ? colors.surface.default : 'transparent'};
+        border: 1px solid ${isActive ? colors.accent.primary : colors.border.default};
+      `;
+    }
+    if (props.$error) {
+        return `
+        background: ${isActive ? colors.accent.error : 'transparent'};
+        border: 1px solid ${colors.accent.error};
+        &:hover {
+          border-color: ${colors.accent.error};
+          background: ${isActive ? colors.accent.error : 'transparent'};
+        }
+      `;
+    }
+    if (isActive) {
+        return `
+        background: ${colors.accent.primary};
+        border: 1px solid ${colors.accent.primary};
+        &:hover {
+          background: ${colors.accent.secondary};
+          border-color: ${colors.accent.secondary};
+        }
+      `;
+    }
+    if (props.$variant === 'filled') {
+        return `
+        background: ${colors.surface.default};
+        border: 1px solid ${colors.border.default};
+        &:hover {
+          border-color: ${colors.border.focus};
+        }
+      `;
+    }
+    return `
+      background: transparent;
+      border: 1px solid ${colors.border.default};
+      &:hover {
+        border-color: ${colors.border.focus};
+      }
+    `;
+}}
+
+  /* Focus visible */
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+  }
+
+  /* Disabled state */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * 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, css, 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 checkboxBox = (jsxs(StyledCheckboxBox, { 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, "$size": size, "$variant": variant, "$checked": resolvedChecked, "$indeterminate": indeterminate, "$disabled": disabled, "$error": error, "$css": css, "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(StyledCheckboxContainer, { className: className, style: style, children: [jsxs(StyledCheckboxLabel, { "$labelPosition": labelPosition, "$disabled": disabled, "$size": 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":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useId, useState, useCallback } from 'react';
+import styled from '@emotion/styled';
+import { FormLabel } from '../../form/FormLabel.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import '../../form/InputWrapper.js';
+import { processCss } from '../../../utils/styledUtils.js';
+
+const CheckboxGroupContext = 
+/*#__PURE__*/ createContext(null);
+const StyledGroupContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+const StyledGroupItems = styled.div `
+  display: flex;
+  flex-direction: ${props => props.$direction};
+  gap: ${props => props.theme.spacing.md * props.$gap}px;
+`;
+/**
+ * Groups multiple Checkbox components with shared state management.
+ *
+ * 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, css, 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(StyledGroupContainer, { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": showHelperText ? helperId : undefined, className: className, style: style, "$css": css, "data-testid": testId, ...rest, children: [label && (jsx(FormLabel, { id: labelId, required: required, disabled: disabled, children: label })), jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsx(StyledGroupItems, { "$direction": direction, "$gap": gap, children: children }) }), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+};
+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":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, useCallback } from 'react';
+import styled from '@emotion/styled';
+
+const TRIGGER_SIZE_MAP = {
+    sm: { height: 24, paddingKey: 'md', fontKey: 'xs', chevronSize: 10 },
+    md: { height: 28, paddingKey: 'md', fontKey: 'sm', chevronSize: 12 },
+    lg: { height: 32, paddingKey: 'lg', fontKey: 'md', chevronSize: 14 },
+};
+const CONTENT_SIZE_MAP = {
+    sm: { paddingVKey: 'sm', paddingHKey: 'md' },
+    md: { paddingVKey: 'md', paddingHKey: 'lg' },
+    lg: { paddingVKey: 'lg', paddingHKey: 'xl' },
+};
+// --- Chevron icon ---
+const ChevronRightIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4.5 3L7.5 6L4.5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+// --- Styled ---
+const StyledRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const StyledTrigger = styled.button `
+  /* Reset */
+  margin: 0;
+  border: none;
+  font-family: inherit;
+  outline: none;
+  user-select: none;
+  width: 100%;
+  text-align: left;
+
+  /* Layout */
+  display: flex;
+  align-items: center;
+  gap: ${props => props.theme.spacing.sm}px;
+
+  /* Sizing */
+  height: ${props => TRIGGER_SIZE_MAP[props.$size].height}px;
+  padding: 0
+    ${props => props.theme.spacing[TRIGGER_SIZE_MAP[props.$size].paddingKey]}px;
+  font-size: ${props => props.theme.typography.fontSize[TRIGGER_SIZE_MAP[props.$size].fontKey]}px;
+  font-weight: ${props => props.theme.typography.fontWeight.medium};
+
+  /* Colors */
+  background: transparent;
+  color: ${props => props.theme.colors.text.muted};
+  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${props => (props.$disabled ? 0.5 : 1)};
+  transition:
+    color ${props => props.theme.transitions.fast},
+    background ${props => props.theme.transitions.fast};
+
+  &:hover {
+    color: ${props => props.$disabled
+    ? props.theme.colors.text.muted
+    : props.theme.colors.text.primary};
+  }
+
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+    border-radius: ${props => props.theme.borderRadius.sm}px;
+    z-index: 1;
+  }
+`;
+const StyledChevron = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform ${props => props.theme.transitions.fast};
+  transform: rotate(${props => (props.$open ? '90deg' : '0deg')});
+  color: currentColor;
+
+  svg {
+    width: ${props => props.$size}px;
+    height: ${props => props.$size}px;
+  }
+`;
+const StyledContentWrapper = styled.div `
+  display: grid;
+  grid-template-rows: ${props => (props.$open ? '1fr' : '0fr')};
+  transition: grid-template-rows ${props => props.theme.transitions.normal};
+`;
+const StyledContentInner = styled.div `
+  overflow: hidden;
+  min-height: 0;
+`;
+const StyledContentBody = styled.div `
+  padding: ${props => props.theme.spacing[CONTENT_SIZE_MAP[props.$size].paddingVKey]}px
+    ${props => props.theme.spacing[CONTENT_SIZE_MAP[props.$size].paddingHKey]}px;
+`;
+// --- Component ---
+const Collapsible = ({ trigger, open: openProp, defaultOpen = false, size = 'sm', indicator, disabled = false, keepMounted = false, onChange, children, className, style, testId, ref, ...rest }) => {
+    const autoId = useId();
+    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];
+    return (jsxs(StyledRoot, { ref: ref, className: className, style: style, "data-testid": testId, ...rest, children: [jsxs(StyledTrigger, { type: "button", id: triggerId, "aria-expanded": resolvedOpen, "aria-controls": contentId, "aria-disabled": disabled || undefined, disabled: disabled, onClick: handleToggle, "$size": size, "$disabled": disabled, children: [showIndicator && (jsx(StyledChevron, { "$open": resolvedOpen, "$size": sizeConfig.chevronSize, children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), jsx("span", { children: trigger })] }), (resolvedOpen || keepMounted) && (jsx(StyledContentWrapper, { "$open": resolvedOpen, role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !resolvedOpen || undefined, children: jsx(StyledContentInner, { children: jsx(StyledContentBody, { "$size": size, children: children }) }) }))] }));
+};
+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":["_jsx","_jsxs"],"mappings":";;;;AAcA,MAAM,gBAAgB,GAA+C;AACnE,IAAA,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE;AACpE,IAAA,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE;AACpE,IAAA,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE;CACrE;AAOD,MAAM,gBAAgB,GAA+C;IACnE,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;AAED;AAEA,MAAM,gBAAgB,GAA+B,CAAC,EAAE,IAAI,EAAE,MAC5DA,GACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAAA,QAAA,EAElBA,GACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,oBAAoB,EACtB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,CACtB,EACE,CAAA,CACP;AAED;AAEA,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG5B;AAOD,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAoB;;;;;;;;;;;;;SAa9C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;YAG5B,KAAK,IAAI,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAA;;AAEnD,IAAA,EAAA,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAA;AAC7D,aAAA,EAAA,KAAK,IAChB,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;iBACzD,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,CAAA;;;;WAIvD,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;AACrC,UAAA,EAAA,KAAK,KAAK,KAAK,CAAC,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA;AACrD,WAAA,EAAA,KAAK,KAAK,KAAK,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAA;;YAErC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAA;iBAChC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAA;;;AAGzC,WAAA,EAAA,KAAK,IACZ,KAAK,CAAC;MACF,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;MACxB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAA;;;;kBAIvB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA;qBAC/B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;;;CAGxD;AAOD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAoB;;;;;0BAK3B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAA;AACzC,oBAAA,EAAA,KAAK,KAAK,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC,CAAA;;;;AAIlD,WAAA,EAAA,KAAK,IAAI,KAAK,CAAC,KAAK,CAAA;AACnB,YAAA,EAAA,KAAK,IAAI,KAAK,CAAC,KAAK,CAAA;;CAEjC;AAMD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA2B;;AAE1C,sBAAA,EAAA,KAAK,KAAK,KAAK,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAAA;mCAC3B,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;MAEa,WAAW,GAA+B,CAAC,EACtD,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,WAAW,GAAG,KAAK,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,MAAM,GAAG,KAAK,EAAE;AACtB,IAAA,MAAM,SAAS,GAAG,CAAe,YAAA,EAAA,MAAM,UAAU;AACjD,IAAA,MAAM,SAAS,GAAG,CAAe,YAAA,EAAA,MAAM,UAAU;IAEjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC;AAC7D,IAAA,MAAM,YAAY,GAAG,QAAQ,KAAK,SAAS;IAC3C,MAAM,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,YAAY;AAE3D,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;AACpC,QAAA,IAAI,QAAQ;YAAE;AAEd,QAAA,MAAM,QAAQ,GAAG,CAAC,YAAY;QAE9B,IAAI,CAAC,YAAY,EAAE;YACjB,eAAe,CAAC,QAAQ,CAAC;;AAG3B,QAAA,QAAQ,GAAG,QAAQ,CAAC;KACrB,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;AAEpD,IAAA,MAAM,aAAa,GAAG,SAAS,KAAK,IAAI;AACxC,IAAA,MAAM,UAAU,GAAG,gBAAgB,CAAC,IAAI,CAAC;AAEzC,IAAA,QACEC,IAAA,CAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,aAAA,EACC,MAAM,EAAA,GACf,IAAI,EAAA,QAAA,EAAA,CAERA,IAAC,CAAA,aAAa,EACZ,EAAA,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,SAAS,EACE,eAAA,EAAA,YAAY,EACZ,eAAA,EAAA,SAAS,EACT,eAAA,EAAA,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,YAAY,EACd,OAAA,EAAA,IAAI,EACA,WAAA,EAAA,QAAQ,EAElB,QAAA,EAAA,CAAA,aAAa,KACZD,GAAC,CAAA,aAAa,EAAQ,EAAA,OAAA,EAAA,YAAY,EAAS,OAAA,EAAA,UAAU,CAAC,WAAW,EAAA,QAAA,EAC9D,SAAS,IAAIA,GAAC,CAAA,gBAAgB,EAAC,EAAA,IAAI,EAAE,UAAU,CAAC,WAAW,EAAI,CAAA,EAAA,CAClD,CACjB,EACDA,GAAO,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,OAAO,EAAQ,CAAA,CAAA,EAAA,CACR,EAEf,CAAC,YAAY,IAAI,WAAW,MAC3BA,GAAC,CAAA,oBAAoB,EACZ,EAAA,OAAA,EAAA,YAAY,EACnB,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,SAAS,EACI,iBAAA,EAAA,SAAS,EAC1B,MAAM,EAAE,CAAC,YAAY,IAAI,SAAS,EAAA,QAAA,EAElCA,GAAC,CAAA,kBAAkB,EACjB,EAAA,QAAA,EAAAA,GAAA,CAAC,iBAAiB,EAAA,EAAA,OAAA,EAAQ,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAqB,EAC3C,CAAA,EAAA,CACA,CACxB,CAAA,EAAA,CACU;AAEjB;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}