entangle-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+const StyledSVG = styled.svg `
+  /* Reset and base styles */
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  user-select: none;
+
+  /* Size variants optimized for editor interfaces */
+  ${props => {
+    const sizes = {
+        sm: '12px',
+        md: '16px',
+        lg: '20px',
+    };
+    return `
+      width: ${sizes[props.$size]};
+      height: ${sizes[props.$size]};
+    `;
+}}
+
+  /* Color variants using theme tokens */
+  ${props => {
+    const { theme } = props;
+    // Standard color mappings to theme
+    const colorMap = {
+        primary: theme.colors.text.primary,
+        secondary: theme.colors.text.secondary,
+        muted: theme.colors.text.muted,
+        accent: theme.colors.accent.primary,
+        success: theme.colors.accent.success,
+        warning: theme.colors.accent.warning,
+        error: theme.colors.accent.error,
+    };
+    // Use theme color if available, otherwise treat as custom color
+    const color = colorMap[props.$color] || props.$color;
+    return `
+      color: ${color};
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    `;
+}}
+  
+  /* Ensure crisp rendering */
+  shape-rendering: geometricPrecision;
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+const Icon = /*#__PURE__*/ React.memo(({ children, size = 'md', color = 'primary', className, title, decorative = false, css, testId, ref, ...props }) => {
+    return (jsxs(StyledSVG, { ref: ref, className: className, "$size": size, "$color": color, "$css": css, 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":["_jsxs","_jsx"],"mappings":";;;;;AA8CA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgB;;;;;;;;AAQxC,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;KACX;IACD,OAAO;AACI,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;AACjB,cAAA,EAAA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;KAC7B;AACH,CAAC;;;AAGC,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK;;AAGvB,IAAA,MAAM,QAAQ,GAAG;AACf,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;AAClC,QAAA,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;AACtC,QAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;AAC9B,QAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACnC,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACpC,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACpC,QAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;KACjC;;AAGD,IAAA,MAAM,KAAK,GACT,QAAQ,CAAC,KAAK,CAAC,MAA+B,CAAC,IAAI,KAAK,CAAC,MAAM;IAEjE,OAAO;eACI,KAAK,CAAA;;;;;;KAMf;AACH,CAAC;;;;;;AAMC,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAEY,MAAA,IAAI,iBAAiB,KAAK,CAAC,IAAI,CAC1C,CAAC,EACC,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,SAAS,EACT,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,KAAI;IACH,QACEA,IAAC,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACb,OAAA,EAAA,IAAI,YACH,KAAK,EAAA,MAAA,EACP,GAAG,EACT,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EAAA,aAAA,EACE,UAAU,EACvB,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,KAAK,EAC5B,aAAA,EAAA,MAAM,EACf,GAAA,KAAK,aAER,KAAK,IAAI,CAAC,UAAU,IAAIC,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAQ,KAAK,EAAA,CAAS,EAC9C,QAAQ,CACC,EAAA,CAAA;AAEhB,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -0,0 +1,222 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+const StyledIconButton = styled.button `
+  /* Reset */
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all ${props => props.theme.transitions.normal};
+  outline: none;
+  position: relative;
+
+  /* Size variants - square buttons scaled to icon size */
+  ${props => {
+    const sizes = {
+        sm: {
+            width: '20px', // Compact for 12px icons
+            height: '20px',
+            padding: '4px',
+        },
+        md: {
+            width: '24px', // Standard for 16px icons
+            height: '24px',
+            padding: '4px',
+        },
+        lg: {
+            width: '32px', // Larger for 20px icons
+            height: '32px',
+            padding: '6px',
+        },
+    };
+    const size = sizes[props.$size];
+    return `
+      width: ${size.width};
+      height: ${size.height};
+      padding: ${size.padding};
+    `;
+}}
+
+  /* Border radius variants */
+  ${props => {
+    const radiusMap = {
+        none: '0px',
+        sm: `${props.theme.borderRadius.sm}px`,
+        md: `${props.theme.borderRadius.md}px`,
+        lg: `${props.theme.borderRadius.lg}px`,
+        full: '50%',
+    };
+    return `border-radius: ${radiusMap[props.$radius]};`;
+}}
+  
+  /* 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: ${colors.border.focus};
+          }
+          
+          &: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 '';
+    }
+}}
+  
+  /* Pressed state */
+  ${props => props.$pressed &&
+    `
+    background: ${props.theme.colors.surface.active} !important;
+    border-color: ${props.theme.colors.border.focus} !important;
+  `}
+  
+  /* Disabled state */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Focus visible */
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+  }
+
+  /* Active press effect */
+  &:active:not(:disabled) {
+    transform: translateY(0.5px);
+  }
+
+  /* Icon container - centers icon properly */
+  & > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+const LoadingSpinner = styled.div `
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+
+  ${props => {
+    const sizes = {
+        sm: '12px',
+        md: '16px',
+        lg: '20px',
+    };
+    return `
+      width: ${sizes[props.$size]};
+      height: ${sizes[props.$size]};
+    `;
+}}
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+/**
+ * A specialized square button component for displaying icons in editor interfaces.
+ *
+ * Designed for toolbar actions, quick controls, and icon-based interactions.
+ * Always square and sized appropriately for the contained icon.
+ * Supports various border radius options from sharp corners to fully circular.
+ *
+ * @example
+ * ```tsx
+ * // Basic ghost button (default)
+ * <IconButton aria-label="Save file">
+ *   <SaveIcon />
+ * </IconButton>
+ *
+ * // Circular filled button
+ * <IconButton
+ *   variant="filled"
+ *   radius="full"
+ *   size="lg"
+ *   aria-label="Add item"
+ * >
+ *   <AddIcon />
+ * </IconButton>
+ *
+ * // Sharp corners for toolbar
+ * <IconButton
+ *   variant="default"
+ *   radius="none"
+ *   aria-label="Settings"
+ * >
+ *   <SettingsIcon />
+ * </IconButton>
+ *
+ * // Toggle state
+ * <IconButton
+ *   pressed={isVisible}
+ *   radius="sm"
+ *   aria-label="Toggle visibility"
+ *   onClick={toggleVisibility}
+ * >
+ *   <EyeIcon />
+ * </IconButton>
+ * ```
+ */
+const IconButton = /*#__PURE__*/ React.memo(({ children, className, size = 'md', variant = 'ghost', radius = 'md', disabled = false, loading = false, pressed = false, onClick, 'aria-label': ariaLabel, testId, css, style, ref, ...props }) => {
+    return (jsx(StyledIconButton, { ref: ref, className: className, "$size": size, "$variant": variant, "$radius": radius, "$loading": loading, "$pressed": pressed, "$css": css, disabled: disabled || loading, onClick: onClick, "aria-label": ariaLabel, "aria-pressed": pressed, "data-testid": testId, style: style, ...props, children: loading ? jsx(LoadingSpinner, { "$size": size }) : children }));
+});
+IconButton.displayName = 'IconButton';
+
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

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

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

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

@@ -0,0 +1,133 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../form/FormLabel.js';
+import '../../form/FormHelperText.js';
+import { StyledInputWrapper } from '../../form/InputWrapper.js';
+import { processCss } from '../../../utils/styledUtils.js';
+import styled from '@emotion/styled';
+import React from 'react';
+
+const StyledInputContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${props => props.theme.spacing.xs}px;
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+const StyledLabel = styled.label `
+  font-size: ${props => props.theme.typography.fontSize.sm}px;
+  font-weight: ${props => props.theme.typography.fontWeight.medium};
+  color: ${props => props.$disabled
+    ? props.theme.colors.text.disabled
+    : props.theme.colors.text.secondary};
+  line-height: ${props => props.theme.typography.lineHeight.tight};
+`;
+const StyledInput = styled.input `
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  color: ${props => props.theme.colors.text.primary};
+
+  ${props => {
+    const fontSize = {
+        sm: props.theme.typography.fontSize.md,
+        md: props.theme.typography.fontSize.md,
+        lg: props.theme.typography.fontSize.lg,
+    };
+    return `font-size: ${fontSize[props.$size]}px;`;
+}}
+
+  &::placeholder {
+    color: ${props => props.theme.colors.text.muted};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Remove number input arrows */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;
+const StyledIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${props => props.theme.colors.text.muted};
+
+  ${props => props.$position === 'start' ? 'margin-right: 6px;' : 'margin-left: 6px;'}
+
+  & > * {
+    width: 14px;
+    height: 14px;
+  }
+`;
+const StyledHelperText = styled.div `
+  font-size: ${props => props.theme.typography.fontSize.xs}px;
+  line-height: ${props => props.theme.typography.lineHeight.tight};
+  color: ${props => props.$error
+    ? props.theme.colors.accent.error
+    : props.theme.colors.text.muted};
+`;
+/**
+ * A versatile input component for text entry in editor interfaces.
+ *
+ * Provides a clean, consistent text input with support for labels, helper text,
+ * icons, and various states. Optimized for editor UIs with compact sizing.
+ *
+ * @example
+ * ```tsx
+ * // Basic text input
+ * <Input
+ *   placeholder="Enter text..."
+ *   value={text}
+ *   onChange={(e) => setText(e.target.value)}
+ * />
+ *
+ * // With label and helper text
+ * <Input
+ *   label="Project Name"
+ *   placeholder="My Project"
+ *   helperText="Choose a unique name for your project"
+ *   value={name}
+ *   onChange={(e) => setName(e.target.value)}
+ * />
+ *
+ * // With icons and error state
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   startIcon={<SearchIcon />}
+ *   error={!!emailError}
+ *   errorMessage={emailError}
+ *   value={email}
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ * ```
+ */
+const Input = ({ value, defaultValue, placeholder, type = 'text', size = 'md', disabled = false, error = false, required = false, readOnly = false, label, helperText, errorMessage, startIcon, endIcon, className, style, css, onChange, onFocus, onBlur, onKeyDown, testId, ref, ...props }) => {
+    const [focused, setFocused] = React.useState(false);
+    const inputId = React.useId();
+    const handleFocus = (event) => {
+        setFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        onBlur?.(event);
+    };
+    return (jsxs(StyledInputContainer, { className: className, style: style, "$size": size, "$error": error, "$disabled": disabled, "$focused": focused, "$css": css, children: [label && (jsxs(StyledLabel, { htmlFor: inputId, "$disabled": disabled, children: [label, required && jsx("span", { style: { color: 'var(--accent-error)' }, children: " *" })] })), jsxs(StyledInputWrapper, { "$size": size, "$error": error, "$disabled": disabled, "$focused": focused, children: [startIcon && jsx(StyledIcon, { "$position": "start", children: startIcon }), jsx(StyledInput, { ref: ref, id: inputId, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, required: required, readOnly: readOnly, "$size": size, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, "data-testid": testId, ...props }), endIcon && jsx(StyledIcon, { "$position": "end", children: endIcon })] }), (helperText ?? (error && errorMessage)) && (jsx(StyledHelperText, { "$error": error, children: error && errorMessage ? errorMessage : helperText }))] }));
+};
+Input.displayName = 'Input';
+
+export { Input };
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../../src/components/primitives/Input/Input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,146 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+/**
+ * Get background color based on nesting level
+ */
+const getBackgroundColor = (nestLevel, theme) => {
+    const backgroundLevels = [
+        theme.colors.background.primary, // Level 0 - darkest
+        theme.colors.background.secondary, // Level 1
+        theme.colors.background.tertiary, // Level 2
+        theme.colors.background.elevated, // Level 3 - lightest
+    ];
+    return backgroundLevels[nestLevel] ?? backgroundLevels[0];
+};
+/**
+ * Get box shadow based on elevation level
+ */
+const getElevationShadow = (elevation, theme) => {
+    const shadowLevels = [
+        'none', // Level 0 - no shadow
+        theme.shadows.sm, // Level 1 - small shadow
+        theme.shadows.md, // Level 2 - medium shadow
+        theme.shadows.lg, // Level 3 - large shadow
+    ];
+    return shadowLevels[elevation] ?? 'none';
+};
+/**
+ * Get padding value from theme spacing tokens
+ */
+const getPaddingValue = (spacing, theme) => {
+    return `${theme.spacing[spacing]}px`;
+};
+const StyledPaper = styled.div `
+  /* Base styles */
+  box-sizing: border-box;
+  position: relative;
+
+  /* Background based on nesting level */
+  background-color: ${props => getBackgroundColor(props.$nestLevel, props.theme)};
+
+  /* Border radius */
+  border-radius: ${props => {
+    if (props.$customRadius !== undefined) {
+        return typeof props.$customRadius === 'number'
+            ? `${props.$customRadius}px`
+            : props.$customRadius;
+    }
+    return `${props.theme.borderRadius.md}px`;
+}};
+
+  /* Border */
+  ${props => props.$bordered &&
+    `
+    border: 1px solid ${props.theme.colors.border.default};
+  `}
+
+  /* Elevation shadow */
+  box-shadow: ${props => getElevationShadow(props.$elevation, props.theme)};
+
+  /* Padding */
+  padding: ${props => getPaddingValue(props.$padding, props.theme)};
+
+  /* Expansion */
+  ${props => props.$expand &&
+    `
+    width: 100%;
+    height: 100%;
+  `}
+
+  /* Smooth transitions for interactive states */
+  transition: box-shadow ${props => props.theme.transitions.normal},
+              background-color ${props => props.theme.transitions.normal};
+
+  /* Hover enhancement for elevated papers */
+  ${props => props.$elevation > 0 &&
+    `
+    &:hover {
+      box-shadow: ${props.$elevation === 1
+        ? props.theme.shadows.md
+        : props.$elevation === 2
+            ? props.theme.shadows.lg
+            : props.theme.shadows.xl};
+    }
+  `}
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * A versatile paper component providing surface elevation and visual hierarchy.
+ *
+ * Perfect for creating cards, panels, modals, and any content that needs to stand out
+ * from the background. Supports elevation shadows, automatic background adjustment
+ * for nested components, and flexible spacing control.
+ *
+ * @example
+ * ```tsx
+ * // Basic paper with elevation
+ * <Paper elevation={2} padding="lg">
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here</p>
+ * </Paper>
+ *
+ * // Nested papers with automatic background adjustment
+ * <Paper nestLevel={0} padding="xl">
+ *   <h2>Main Container</h2>
+ *   <Paper nestLevel={1} padding="lg">
+ *     <h3>Nested Section</h3>
+ *     <Paper nestLevel={2} padding="md">
+ *       <p>Deeply nested content</p>
+ *     </Paper>
+ *   </Paper>
+ * </Paper>
+ *
+ * // Bordered paper without shadow
+ * <Paper elevation={0} bordered padding="md">
+ *   <p>Subtle outlined container</p>
+ * </Paper>
+ *
+ * // Full-width expanded paper
+ * <Paper expand elevation={1} padding="lg">
+ *   <header>Full width header</header>
+ *   <main>Main content area</main>
+ * </Paper>
+ *
+ * // Custom radius paper
+ * <Paper elevation={2} customRadius="12px" padding="lg">
+ *   <p>Paper with custom border radius</p>
+ * </Paper>
+ *
+ * // Compact paper for small UI elements
+ * <Paper elevation={1} padding="xs">
+ *   <Icon name="settings" />
+ * </Paper>
+ * ```
+ */
+const Paper = /*#__PURE__*/ React.memo(({ children, elevation = 1, bordered = false, padding = 'md', nestLevel = 0, expand = false, customRadius, className, testId, css, style, ref, ...htmlProps }) => {
+    return (jsx(StyledPaper, { ref: ref, className: className, "$elevation": elevation, "$bordered": bordered, "$padding": padding, "$nestLevel": nestLevel, "$expand": expand, "$customRadius": customRadius, "$css": css, "data-testid": testId, style: style, ...htmlProps, children: children }));
+});
+Paper.displayName = 'Paper';
+
+export { Paper };
+//# sourceMappingURL=Paper.js.map

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

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