entangle-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,166 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+const StyledText = styled.span `
+  /* Reset */
+  margin: 0;
+  padding: 0;
+
+  /* Font family */
+  font-family: ${props => props.$mono || props.$variant === 'code'
+    ? props.theme.typography.fontFamily.mono
+    : props.theme.typography.fontFamily.sans};
+
+  /* Variant-based styling */
+  ${props => {
+    if (props.$variant === 'inherit') {
+        return '';
+    }
+    const variants = {
+        display: {
+            fontSize: props.theme.typography.fontSize.xl,
+            fontWeight: props.theme.typography.fontWeight.semibold,
+            lineHeight: props.theme.typography.lineHeight.tight,
+        },
+        heading: {
+            fontSize: props.theme.typography.fontSize.lg,
+            fontWeight: props.theme.typography.fontWeight.medium,
+            lineHeight: props.theme.typography.lineHeight.tight,
+        },
+        subheading: {
+            fontSize: props.theme.typography.fontSize.md,
+            fontWeight: props.theme.typography.fontWeight.medium,
+            lineHeight: props.theme.typography.lineHeight.normal,
+        },
+        body: {
+            fontSize: props.theme.typography.fontSize.sm,
+            fontWeight: props.theme.typography.fontWeight.normal,
+            lineHeight: props.theme.typography.lineHeight.normal,
+        },
+        caption: {
+            fontSize: props.theme.typography.fontSize.xs,
+            fontWeight: props.theme.typography.fontWeight.normal,
+            lineHeight: props.theme.typography.lineHeight.tight,
+        },
+        code: {
+            fontSize: props.theme.typography.fontSize.sm,
+            fontWeight: props.theme.typography.fontWeight.normal,
+            lineHeight: props.theme.typography.lineHeight.normal,
+        },
+    };
+    const variant = variants[props.$variant];
+    if (!variant)
+        return '';
+    return `
+      font-size: ${variant.fontSize}px;
+      font-weight: ${variant.fontWeight};
+      line-height: ${variant.lineHeight};
+    `;
+}}
+
+  /* Size override */
+  ${props => props.$size &&
+    props.$variant !== 'inherit' &&
+    `
+    font-size: ${props.theme.typography.fontSize[props.$size]}px;
+  `}
+
+  /* Weight override */
+  ${props => props.$weight &&
+    props.$variant !== 'inherit' &&
+    `
+    font-weight: ${props.theme.typography.fontWeight[props.$weight]};
+  `}
+
+  /* Line height override */
+  ${props => props.$lineHeight &&
+    props.$variant !== 'inherit' &&
+    `
+    line-height: ${props.theme.typography.lineHeight[props.$lineHeight]};
+  `}
+
+  /* Color */
+  color: ${props => {
+    const colorMap = {
+        primary: props.theme.colors.text.primary,
+        secondary: props.theme.colors.text.secondary,
+        muted: props.theme.colors.text.muted,
+        disabled: props.theme.colors.text.disabled,
+        accent: props.theme.colors.accent.primary,
+        success: props.theme.colors.accent.success,
+        warning: props.theme.colors.accent.warning,
+        error: props.theme.colors.accent.error,
+    };
+    return colorMap[props.$color];
+}};
+
+  /* Text alignment */
+  ${props => props.$align && `text-align: ${props.$align};`}
+
+  /* No wrap */
+  ${props => props.$nowrap && 'white-space: nowrap;'}
+
+  /* Truncation */
+  ${props => props.$truncate &&
+    !props.$maxLines &&
+    `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `}
+
+  /* Multi-line truncation */
+  ${props => props.$truncate &&
+    props.$maxLines &&
+    `
+    display: -webkit-box;
+    -webkit-line-clamp: ${props.$maxLines};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `}
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * A versatile text component for consistent typography in editor interfaces.
+ *
+ * Provides semantic variants, flexible sizing, and comprehensive text styling
+ * options optimized for professional editor UIs. Uses theme typography tokens
+ * for consistent spacing and sizing across the application.
+ *
+ * @example
+ * ```tsx
+ * // Semantic variants
+ * <Text variant="display">Main Title</Text>
+ * <Text variant="heading">Section Heading</Text>
+ * <Text variant="body">Regular paragraph text</Text>
+ * <Text variant="caption">Small helper text</Text>
+ * <Text variant="code">console.log('hello')</Text>
+ *
+ * // Custom sizing and colors
+ * <Text size="lg" weight="semibold" color="accent">
+ *   Custom styled text
+ * </Text>
+ *
+ * // With truncation
+ * <Text truncate maxLines={2}>
+ *   Long text that will be truncated after two lines...
+ * </Text>
+ *
+ * // Different HTML elements
+ * <Text as="h1" variant="display">Page Title</Text>
+ * <Text as="p" variant="body">Paragraph content</Text>
+ * <Text as="label" variant="caption">Form label</Text>
+ * ```
+ */
+const Text = /*#__PURE__*/ React.memo(({ children, as = 'span', variant = 'body', size, weight, color = 'primary', lineHeight, align, truncate = false, maxLines, nowrap = false, mono = false, className, style, css, ref, ...rest }) => {
+    return (jsx(StyledText, { ref: ref, as: as, "$variant": variant, "$size": size, "$weight": weight, "$color": color, "$lineHeight": lineHeight, "$align": align, "$truncate": truncate, "$maxLines": maxLines, "$nowrap": nowrap, "$mono": mono, "$css": css, className: className, style: style, ...rest, children: children }));
+});
+Text.displayName = 'Text';
+
+export { Text };
+//# sourceMappingURL=Text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../../../../src/components/primitives/Text/Text.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAgLA,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAiB;;;;;;iBAM9B,KAAK,IAClB,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK;MAC9B,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC;MAClC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAA;;;AAG1C,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE;AAChC,QAAA,OAAO,EAAE;;AAGX,IAAA,MAAM,QAAQ,GAAG;AACf,QAAA,OAAO,EAAE;YACP,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC5C,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,QAAQ;YACtD,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK;AACpD,SAAA;AACD,QAAA,OAAO,EAAE;YACP,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC5C,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;YACpD,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK;AACpD,SAAA;AACD,QAAA,UAAU,EAAE;YACV,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC5C,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;YACpD,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;AACrD,SAAA;AACD,QAAA,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC5C,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;YACpD,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;AACrD,SAAA;AACD,QAAA,OAAO,EAAE;YACP,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC5C,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;YACpD,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK;AACpD,SAAA;AACD,QAAA,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC5C,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;YACpD,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;AACrD,SAAA;KACF;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;AACxC,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,EAAE;IAEvB,OAAO;AACQ,iBAAA,EAAA,OAAO,CAAC,QAAQ,CAAA;AACd,mBAAA,EAAA,OAAO,CAAC,UAAU,CAAA;AAClB,mBAAA,EAAA,OAAO,CAAC,UAAU,CAAA;KAClC;AACH,CAAC;;;AAGC,EAAA,EAAA,KAAK,IACL,KAAK,CAAC,KAAK;IACX,KAAK,CAAC,QAAQ,KAAK,SAAS;AAC5B,IAAA;iBACa,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;AAC1D,EAAA,CAAA;;;AAGC,EAAA,EAAA,KAAK,IACL,KAAK,CAAC,OAAO;IACb,KAAK,CAAC,QAAQ,KAAK,SAAS;AAC5B,IAAA;mBACe,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AAChE,EAAA,CAAA;;;AAGC,EAAA,EAAA,KAAK,IACL,KAAK,CAAC,WAAW;IACjB,KAAK,CAAC,QAAQ,KAAK,SAAS;AAC5B,IAAA;mBACe,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;AACpE,EAAA,CAAA;;;AAGQ,SAAA,EAAA,KAAK,IAAG;AACf,IAAA,MAAM,QAAQ,GAAG;QACf,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;QACxC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;QAC5C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;QACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;QAC1C,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;QACzC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;QAC1C,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;QAC1C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;KACvC;AACD,IAAA,OAAO,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;AAC/B,CAAC,CAAA;;;IAGC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,CAAe,YAAA,EAAA,KAAK,CAAC,MAAM,CAAG,CAAA,CAAA;;;AAGvD,EAAA,EAAA,KAAK,IAAI,KAAK,CAAC,OAAO,IAAI,sBAAsB;;;AAGhD,EAAA,EAAA,KAAK,IACL,KAAK,CAAC,SAAS;IACf,CAAC,KAAK,CAAC,SAAS;AAChB,IAAA;;;;AAID,EAAA,CAAA;;;AAGC,EAAA,EAAA,KAAK,IACL,KAAK,CAAC,SAAS;AACf,IAAA,KAAK,CAAC,SAAS;AACf,IAAA;;AAEsB,wBAAA,EAAA,KAAK,CAAC,SAAS,CAAA;;;;AAItC,EAAA,CAAA;;;AAGC,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACI,MAAM,IAAI,iBAAiB,KAAK,CAAC,IAAI,CAC1C,CAAC,EACC,QAAQ,EACR,EAAE,GAAG,MAAM,EACX,OAAO,GAAG,MAAM,EAChB,IAAI,EACJ,MAAM,EACN,KAAK,GAAG,SAAS,EACjB,UAAU,EACV,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,QACEA,IAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACI,UAAA,EAAA,OAAO,WACV,IAAI,EAAA,SAAA,EACF,MAAM,EACP,QAAA,EAAA,KAAK,EACA,aAAA,EAAA,UAAU,EACf,QAAA,EAAA,KAAK,eACF,QAAQ,EAAA,WAAA,EACR,QAAQ,EACV,SAAA,EAAA,MAAM,WACR,IAAI,EAAA,MAAA,EACL,GAAG,EACT,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,GACR,IAAI,EAEP,QAAA,EAAA,QAAQ,EACE,CAAA;AAEjB,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/esm/components/primitives/Tooltip/Arrow.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { Tooltip } from '@base-ui-components/react/tooltip';
+
+const ArrowSvg = (props) => {
+    return (jsx("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", style: {
+            // Improve SVG rendering quality
+            shapeRendering: 'geometricPrecision',
+            imageRendering: 'crisp-edges',
+        }, ...props, children: jsx(ArrowFill, { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z" }) }));
+};
+const ArrowFill = styled.path `
+  fill: ${props => props.theme.colors.background.elevated};
+`;
+const StyledTooltipArrow = styled(Tooltip.Arrow) `
+  display: flex;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  perspective: 1000px;
+  /* Ensure crisp rendering */
+  image-rendering: crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: pixelated;
+
+  /* Antialiasing for smooth edges */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &[data-side='top'] {
+    bottom: -8px;
+    rotate: 180deg;
+  }
+
+  &[data-side='bottom'] {
+    top: -8px;
+    rotate: 0deg;
+  }
+
+  &[data-side='left'] {
+    right: -13px;
+    rotate: 90deg;
+  }
+
+  &[data-side='right'] {
+    left: -13px;
+    rotate: -90deg;
+  }
+  will-change: transform;
+`;
+
+export { ArrowSvg, StyledTooltipArrow };
+//# sourceMappingURL=Arrow.js.map

package/dist/esm/components/primitives/Tooltip/Arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.js","sources":["../../../../../../src/components/primitives/Tooltip/Arrow.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKa,MAAA,QAAQ,GAAG,CAAC,KAAkC,KAAI;AAC7D,IAAA,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;;AAEL,YAAA,cAAc,EAAE,oBAAoB;AACpC,YAAA,cAAc,EAAE,aAAa;SAC9B,EACG,GAAA,KAAK,EAET,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAA,EAAC,CAAC,EAAC,iMAAiM,EAAA,CAAG,EAC7M,CAAA;AAEV;AAEA,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;UACnB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAA;CACxD;AAEY,MAAA,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,219 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+import { StyledTooltipArrow, ArrowSvg } from './Arrow.js';
+import { parsePlacement, parseCollisionStrategy } from './utils.js';
+
+const StyledTooltipPositioner = styled(Tooltip$1.Positioner) `
+  /* Positioner handles positioning, no visual styles needed here */
+`;
+const StyledTooltipContent = styled.div `
+  /* Base styles */
+  background: ${props => props.theme.colors.background.elevated};
+  color: ${props => props.theme.colors.text.primary};
+  border-radius: ${props => props.theme.borderRadius.md}px;
+  padding: ${props => props.theme.spacing.sm}px
+    ${props => props.theme.spacing.md}px;
+  font-size: ${props => props.theme.typography.fontSize.xs}px;
+  line-height: ${props => props.theme.typography.lineHeight.tight};
+  font-family: ${props => props.theme.typography.fontFamily.sans};
+  box-shadow: ${props => props.theme.shadows.lg};
+  max-width: 320px;
+  word-wrap: break-word;
+  z-index: ${props => props.theme.zIndex.tooltip};
+  min-height: 25px; // Ensure minimum height for better UX
+  display: flex;
+  align-items: center; // Center content vertically
+  justify-content: center; // Center content horizontally
+
+  /* Animation */
+  ${props => {
+    const { $animation } = props;
+    const duration = $animation?.duration ?? 200;
+    const easing = $animation?.easing ?? 'ease-out';
+    const animated = $animation?.animated !== false;
+    if (!animated) {
+        return 'transition: none;';
+    }
+    return `
+      transition: opacity ${duration}ms ${easing}, transform ${duration}ms ${easing};
+      transform-origin: var(--transform-origin);
+    `;
+}}
+
+  /* Entry/exit animations */
+  &[data-open] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-closed] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+const StyledTooltipTrigger = styled.div `
+  /* Trigger styles */
+  display: inline-block;
+  cursor: pointer;
+  width: fit-content; // Allow trigger to size to content
+  height: fit-content; // Allow trigger to size to content
+  position: relative; // Required for tooltip positioning
+  z-index: 1; // Ensure trigger is above tooltip
+  /* Prevents pointer events on the tooltip trigger */
+  pointer-events: none;
+  /* Allows pointer events on the children */
+  & > * {
+    pointer-events: auto;
+  }
+  /* Ensures the trigger is focusable */
+  &:focus {
+    outline: none; // Remove default focus outline
+    box-shadow: ${props => props.theme.shadows.focus}; // Custom focus style
+  }
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * A tooltip component that displays contextual information on hover.
+ *
+ * Built on @base-ui-components/react for robust accessibility and positioning.
+ * Provides an intuitive API similar to MUI with advanced positioning and collision handling.
+ * Supports both simple text and complex React nodes for advanced tooltip content.
+ *
+ * @example
+ * ```tsx
+ * // Simple text tooltip
+ * <Tooltip title="Save your work">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ *
+ * // Intuitive positioning (MUI-style)
+ * <Tooltip placement="bottom-start" title="Menu options">
+ *   <IconButton><MenuIcon /></IconButton>
+ * </Tooltip>
+ *
+ * // Intelligent collision handling (new default)
+ * <Tooltip collision="smart" title="Intelligent positioning">
+ *   <Button>Smart tooltip</Button>
+ * </Tooltip>
+ *
+ * // Advanced collision configuration
+ * <Tooltip
+ *   collisionConfig={{
+ *     side: 'flip',
+ *     align: 'shift',
+ *     fallbackAxisSide: 'start',
+ *     hideWhenDetached: true
+ *   }}
+ *   title="Custom collision handling"
+ * >
+ *   <Button>Advanced collision</Button>
+ * </Tooltip>
+ *
+ * // Advanced positioning
+ * <Tooltip
+ *   positioner={{
+ *     offset: 12,
+ *     padding: 10,
+ *     sticky: true,
+ *     boundary: '#container'
+ *   }}
+ *   title="Advanced positioning"
+ * >
+ *   <Button>Advanced</Button>
+ * </Tooltip>
+ *
+ * // Custom animations
+ * <Tooltip
+ *   animation={{
+ *     animated: true,
+ *     duration: 300,
+ *     easing: 'ease-in-out'
+ *   }}
+ *   title="Custom animation"
+ * >
+ *   <Button>Animated</Button>
+ * </Tooltip>
+ *
+ * // Interactive tooltip
+ * <Tooltip
+ *   hoverable={true}
+ *   closeDelay={300}
+ *   title={
+ *     <div>
+ *       <strong>Interactive Content</strong>
+ *       <br />
+ *       <button>Click me</button>
+ *     </div>
+ *   }
+ * >
+ *   <Button>Hoverable tooltip</Button>
+ * </Tooltip>
+ *
+ * // Full control with raw props
+ * <Tooltip
+ *   arrow={false}
+ *   rootProps={{ trackCursorAxis: 'x' }}
+ *   positionerProps={{ arrowPadding: 20 }}
+ *   title="Full control"
+ * >
+ *   <Button>Power user</Button>
+ * </Tooltip>
+ * ```
+ */
+const Tooltip = ({ children, title, placement = 'top', collision = 'smart', collisionConfig, positioner = {}, animation = {}, delay = 600, closeDelay = 0, arrow = true, disabled = false, rootProps = {}, positionerProps = {}, className, testId, id, style, css, ref, ...htmlProps }) => {
+    // If disabled, return just the children without tooltip
+    if (disabled) {
+        return children;
+    }
+    // Parse placement into side and align
+    const { side, align } = parsePlacement(placement);
+    // Parse collision strategy or use custom config
+    const collisionSettings = collisionConfig
+        ? {
+            collisionAvoidance: {
+                side: collisionConfig.side ?? 'flip',
+                align: collisionConfig.align ?? 'shift',
+                fallbackAxisSide: collisionConfig.fallbackAxisSide ?? 'none',
+            },
+        }
+        : parseCollisionStrategy(collision);
+    // Prepare positioner configuration
+    const { offset = 8, padding = 8, sticky = false, boundary, trackCursor, } = positioner;
+    // Prepare final positioner props
+    const finalPositionerProps = {
+        side,
+        align,
+        sideOffset: offset,
+        collisionPadding: padding,
+        sticky,
+        collisionAvoidance: collisionSettings.collisionAvoidance,
+        ...positionerProps,
+    };
+    // Handle boundary if specified
+    if (boundary) {
+        if (typeof boundary === 'string') {
+            const boundaryElement = document.querySelector(boundary);
+            if (boundaryElement) {
+                finalPositionerProps.collisionBoundary = boundaryElement;
+            }
+        }
+        else {
+            finalPositionerProps.collisionBoundary = boundary;
+        }
+    }
+    // Handle cursor tracking
+    if (trackCursor) {
+        rootProps.trackCursorAxis = trackCursor;
+    }
+    return (jsx(Tooltip$1.Provider, { delay: delay, closeDelay: closeDelay, ...rootProps, children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { render: props => jsx(StyledTooltipTrigger, { ...props }), children: children }), jsx(Tooltip$1.Portal, { children: jsx(StyledTooltipPositioner, { ...finalPositionerProps, children: jsx(Tooltip$1.Popup, { render: props => (jsxs(StyledTooltipContent, { ...props, className: className, "data-testid": testId, id: id, style: style, "$css": css, "$animation": animation, ref: ref, ...htmlProps, children: [title, arrow && (jsx(StyledTooltipArrow, { children: jsx(ArrowSvg, {}) }))] })) }) }) })] }) }));
+};
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

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

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

package/dist/esm/components/primitives/Tooltip/utils.js

@@ -0,0 +1,66 @@
+/**
+ * Convert our placement prop to Base UI side and align
+ */
+const parsePlacement = (placement) => {
+    const [side, align = 'center'] = placement.split('-');
+    return { side, align: align || 'center' };
+};
+/**
+ * Convert collision strategy to Base UI CollisionAvoidance config
+ */
+const parseCollisionStrategy = (strategy) => {
+    switch (strategy) {
+        case 'flip':
+            return {
+                collisionAvoidance: {
+                    side: 'flip',
+                    align: 'none',
+                    fallbackAxisSide: 'none',
+                },
+            };
+        case 'shift':
+            return {
+                collisionAvoidance: {
+                    side: 'shift',
+                    align: 'shift',
+                    fallbackAxisSide: 'none',
+                },
+            };
+        case 'hide':
+            return {
+                collisionAvoidance: undefined,
+                hideWhenDetached: true,
+            };
+        case 'flip-shift':
+            return {
+                collisionAvoidance: {
+                    side: 'flip',
+                    align: 'shift',
+                    fallbackAxisSide: 'none',
+                },
+            };
+        case 'smart':
+            return {
+                collisionAvoidance: {
+                    side: 'flip',
+                    align: 'shift',
+                    fallbackAxisSide: 'start',
+                },
+            };
+        case 'none':
+            return {
+                collisionAvoidance: undefined,
+            };
+        default:
+            return {
+                collisionAvoidance: {
+                    side: 'flip',
+                    align: 'shift',
+                    fallbackAxisSide: 'start',
+                },
+            };
+    }
+};
+
+export { parseCollisionStrategy, parsePlacement };
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/primitives/Tooltip/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/primitives/Tooltip/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAOA;;AAEG;AACU,MAAA,cAAc,GAAG,CAAC,SAA2B,KAAI;AAC5D,IAAA,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAGnD;IACD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE;AAC3C;AAEA;;AAEG;AACU,MAAA,sBAAsB,GAAG,CACpC,QAAkC,KAIhC;IACF,QAAQ,QAAQ;AACd,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE,SAAS;AAC7B,gBAAA,gBAAgB,EAAE,IAAI;aACvB;AAEH,QAAA,KAAK,YAAY;YACf,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,OAAO;AAC1B,iBAAA;aACF;AAEH,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE,SAAS;aAC9B;AAEH,QAAA;YACE,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,OAAO;AAC1B,iBAAA;aACF;;AAEP;;;;"}