@furystack/shades-common-components 11.0.0 → 12.0.0

package/esm/components/timeline.d.ts

@@ -0,0 +1,53 @@
+import type { PartialElement } from '@furystack/shades';
+import type { Palette } from '../services/theme-provider-service.js';
+/**
+ * Props for a single timeline item.
+ */
+export type TimelineItemProps = PartialElement<HTMLElement> & {
+    /** Palette color for the dot. Defaults to 'primary'. */
+    color?: keyof Palette;
+    /** Custom dot content (e.g. an icon). Replaces the default filled circle. */
+    dot?: JSX.Element;
+    /** Label displayed on the opposite side from the content (used in alternate or right mode). */
+    label?: string;
+};
+/**
+ * A single item in a Timeline.
+ * Renders a dot, a connector tail, and the item's content (children).
+ */
+export declare const TimelineItem: (props: Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+} & {
+    /** Palette color for the dot. Defaults to 'primary'. */
+    color?: keyof Palette;
+    /** Custom dot content (e.g. an icon). Replaces the default filled circle. */
+    dot?: JSX.Element;
+    /** Label displayed on the opposite side from the content (used in alternate or right mode). */
+    label?: string;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+/**
+ * Props for the Timeline container.
+ */
+export type TimelineProps = PartialElement<HTMLElement> & {
+    /** Layout mode. 'left' places content on the right, 'right' on the left, 'alternate' switches sides. Defaults to 'left'. */
+    mode?: 'left' | 'right' | 'alternate';
+    /** Show a pending indicator on the last item. `true` shows a default "Loading..." text, a string/JSX shows custom content. */
+    pending?: boolean | string | JSX.Element;
+};
+/**
+ * Timeline displays a list of events in chronological order.
+ * Supports left, right, and alternate layout modes with optional pending state.
+ */
+export declare const Timeline: (props: Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+} & {
+    /** Layout mode. 'left' places content on the right, 'right' on the left, 'alternate' switches sides. Defaults to 'left'. */
+    mode?: "left" | "right" | "alternate";
+    /** Show a pending indicator on the last item. `true` shows a default "Loading..." text, a string/JSX shows custom content. */
+    pending?: boolean | string | JSX.Element;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=timeline.d.ts.map

package/esm/components/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../src/components/timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA;AAEpE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC5D,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,OAAO,CAAA;IACrB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;IAZvB,wDAAwD;YAChD,MAAM,OAAO;IACrB,6EAA6E;UACvE,GAAG,CAAC,OAAO;IACjB,+FAA+F;YACvF,MAAM;sEA8Hd,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACxD,4HAA4H;IAC5H,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAA;IACrC,8HAA8H;IAC9H,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,CAAA;CACzC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;IAVnB,4HAA4H;WACrH,MAAM,GAAG,OAAO,GAAG,WAAW;IACrC,8HAA8H;cACpH,OAAO,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO;sEAsExC,CAAA"}

package/esm/components/timeline.js

@@ -0,0 +1,162 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../services/css-variable-theme.js';
+import { paletteMainColors } from '../services/palette-css-vars.js';
+/**
+ * A single item in a Timeline.
+ * Renders a dot, a connector tail, and the item's content (children).
+ */
+export const TimelineItem = Shade({
+    shadowDomName: 'shade-timeline-item',
+    css: {
+        display: 'flex',
+        position: 'relative',
+        minHeight: '64px',
+        '& .timeline-label': {
+            flex: '1',
+            textAlign: 'right',
+            paddingRight: cssVariableTheme.spacing.md,
+            paddingTop: '2px',
+            fontFamily: cssVariableTheme.typography.fontFamily,
+            fontSize: cssVariableTheme.typography.fontSize.sm,
+            color: cssVariableTheme.text.secondary,
+            boxSizing: 'border-box',
+        },
+        '& .timeline-dot-column': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flexShrink: '0',
+            width: '24px',
+        },
+        '& .timeline-dot': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '12px',
+            height: '12px',
+            borderRadius: cssVariableTheme.shape.borderRadius.full,
+            backgroundColor: 'var(--timeline-dot-color)',
+            flexShrink: '0',
+            zIndex: '1',
+            marginTop: '5px',
+        },
+        '& .timeline-dot[data-custom]': {
+            width: 'auto',
+            height: 'auto',
+            backgroundColor: 'transparent',
+            color: 'var(--timeline-dot-color)',
+            fontSize: '20px',
+            lineHeight: '1',
+        },
+        '& .timeline-tail': {
+            flex: '1',
+            width: '2px',
+            backgroundColor: cssVariableTheme.divider,
+            marginTop: cssVariableTheme.spacing.xs,
+        },
+        '& .timeline-tail[data-pending]': {
+            borderLeft: `2px dashed ${cssVariableTheme.divider}`,
+            backgroundColor: 'transparent',
+            width: '0',
+        },
+        '& .timeline-content': {
+            flex: '1',
+            paddingLeft: cssVariableTheme.spacing.md,
+            paddingBottom: cssVariableTheme.spacing.lg,
+            fontFamily: cssVariableTheme.typography.fontFamily,
+            fontSize: cssVariableTheme.typography.fontSize.sm,
+            color: cssVariableTheme.text.primary,
+            boxSizing: 'border-box',
+        },
+        // When placed in a right-mode or alternate-right context, the label goes right and content goes left
+        '&[data-side="right"] .timeline-label': {
+            textAlign: 'left',
+            paddingRight: '0',
+            paddingLeft: cssVariableTheme.spacing.md,
+            order: '3',
+        },
+        '&[data-side="right"] .timeline-content': {
+            textAlign: 'right',
+            paddingLeft: '0',
+            paddingRight: cssVariableTheme.spacing.md,
+            order: '1',
+        },
+        '&[data-side="right"] .timeline-dot-column': {
+            order: '2',
+        },
+        // Last item: hide tail
+        '&[data-last] .timeline-tail': {
+            visibility: 'hidden',
+        },
+    },
+    render: ({ props, children, useHostProps }) => {
+        const { color = 'primary', dot, label, style } = props;
+        const colors = paletteMainColors[color];
+        useHostProps({
+            style: {
+                '--timeline-dot-color': colors.main,
+                ...style,
+            },
+        });
+        const isPending = props['data-pending'] !== undefined;
+        return (createComponent(createComponent, null,
+            label !== undefined ? createComponent("div", { className: "timeline-label" }, label) : null,
+            createComponent("div", { className: "timeline-dot-column" },
+                createComponent("div", { className: "timeline-dot", ...(dot ? { 'data-custom': '' } : {}) }, dot ?? null),
+                createComponent("div", { className: "timeline-tail", ...(isPending ? { 'data-pending': '' } : {}) })),
+            createComponent("div", { className: "timeline-content" }, children)));
+    },
+});
+/**
+ * Timeline displays a list of events in chronological order.
+ * Supports left, right, and alternate layout modes with optional pending state.
+ */
+export const Timeline = Shade({
+    shadowDomName: 'shade-timeline',
+    css: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: `${cssVariableTheme.spacing.md} 0`,
+        margin: '0',
+        listStyle: 'none',
+        fontFamily: cssVariableTheme.typography.fontFamily,
+    },
+    render: ({ props, children, useHostProps }) => {
+        const { mode = 'left', pending, style } = props;
+        useHostProps({
+            'data-mode': mode,
+            ...(style ? { style: style } : {}),
+        });
+        const items = (Array.isArray(children) ? children.flat() : children ? [children] : []);
+        const totalItems = pending ? items.length + 1 : items.length;
+        items.forEach((child, index) => {
+            if (child && typeof child === 'object' && 'setAttribute' in child) {
+                const isLast = index === totalItems - 1;
+                if (isLast) {
+                    child.setAttribute('data-last', '');
+                }
+                else {
+                    child.removeAttribute('data-last');
+                }
+                if (mode === 'right') {
+                    child.setAttribute('data-side', 'right');
+                }
+                else if (mode === 'alternate') {
+                    child.setAttribute('data-side', index % 2 === 0 ? 'left' : 'right');
+                }
+                else {
+                    child.removeAttribute('data-side');
+                }
+            }
+        });
+        const pendingItem = pending ? (createComponent(TimelineItem, { color: "info", dot: createComponent("span", { style: { fontSize: cssVariableTheme.typography.fontSize.md } }, "\u23F3"), "data-last": "", "data-pending": "", ...(mode === 'right'
+                ? { 'data-side': 'right' }
+                : mode === 'alternate'
+                    ? { 'data-side': items.length % 2 === 0 ? 'left' : 'right' }
+                    : {}) }, pending === true ? 'Loading...' : pending)) : null;
+        return (createComponent(createComponent, null,
+            items,
+            pendingItem));
+    },
+});
+//# sourceMappingURL=timeline.js.map

package/esm/components/timeline.js.map

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

package/esm/components/timeline.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=timeline.spec.d.ts.map

package/esm/components/timeline.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.spec.d.ts","sourceRoot":"","sources":["../../src/components/timeline.spec.tsx"],"names":[],"mappings":""}

package/esm/components/timeline.spec.js

@@ -0,0 +1,209 @@
+import { createComponent, flushUpdates } from '@furystack/shades';
+import { describe, expect, it } from 'vitest';
+import { Timeline, TimelineItem } from './timeline.js';
+describe('TimelineItem', () => {
+    it('should be defined', () => {
+        expect(TimelineItem).toBeDefined();
+        expect(typeof TimelineItem).toBe('function');
+    });
+    it('should create a timeline item element', () => {
+        const el = (createComponent(TimelineItem, null));
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-timeline-item');
+    });
+    it('should pass children as content', () => {
+        const el = (createComponent(TimelineItem, null, "Event happened"));
+        expect(el).toBeDefined();
+    });
+    it('should set props correctly', () => {
+        const el = (createComponent(TimelineItem, { color: "success", label: "2024-01-01" }));
+        expect(el.props.color).toBe('success');
+        expect(el.props.label).toBe('2024-01-01');
+    });
+    it('should render dot and content', async () => {
+        const el = (createComponent("div", null,
+            createComponent(TimelineItem, null,
+                createComponent("span", null, "Event content"))));
+        const item = el.firstElementChild;
+        item.updateComponent();
+        await flushUpdates();
+        expect(item.querySelector('.timeline-dot')).not.toBeNull();
+        expect(item.querySelector('.timeline-content')).not.toBeNull();
+        expect(item.querySelector('.timeline-tail')).not.toBeNull();
+    });
+    it('should render a label when provided', async () => {
+        const el = (createComponent("div", null,
+            createComponent(TimelineItem, { label: "Jan 2024" }, "Event")));
+        const item = el.firstElementChild;
+        item.updateComponent();
+        await flushUpdates();
+        const label = item.querySelector('.timeline-label');
+        expect(label).not.toBeNull();
+        expect(label.textContent).toBe('Jan 2024');
+    });
+    it('should not render a label when not provided', async () => {
+        const el = (createComponent("div", null,
+            createComponent(TimelineItem, null, "Event")));
+        const item = el.firstElementChild;
+        item.updateComponent();
+        await flushUpdates();
+        expect(item.querySelector('.timeline-label')).toBeNull();
+    });
+    it('should set custom dot when dot prop is provided', async () => {
+        const el = (createComponent("div", null,
+            createComponent(TimelineItem, { dot: createComponent("span", null, "\uD83C\uDF89") }, "Party!")));
+        const item = el.firstElementChild;
+        item.updateComponent();
+        await flushUpdates();
+        const dot = item.querySelector('.timeline-dot');
+        expect(dot.hasAttribute('data-custom')).toBe(true);
+    });
+    it('should not set data-custom when dot prop is not provided', async () => {
+        const el = (createComponent("div", null,
+            createComponent(TimelineItem, null, "Event")));
+        const item = el.firstElementChild;
+        item.updateComponent();
+        await flushUpdates();
+        const dot = item.querySelector('.timeline-dot');
+        expect(dot.hasAttribute('data-custom')).toBe(false);
+    });
+    it('should set CSS custom property for dot color', async () => {
+        const el = (createComponent("div", null,
+            createComponent(TimelineItem, { color: "success" }, "Done")));
+        const item = el.firstElementChild;
+        item.updateComponent();
+        await flushUpdates();
+        expect(item.style.getPropertyValue('--timeline-dot-color')).toBe('var(--shades-theme-palette-success-main)');
+    });
+    it('should default to primary color', async () => {
+        const el = (createComponent("div", null,
+            createComponent(TimelineItem, null, "Event")));
+        const item = el.firstElementChild;
+        item.updateComponent();
+        await flushUpdates();
+        expect(item.style.getPropertyValue('--timeline-dot-color')).toBe('var(--shades-theme-palette-primary-main)');
+    });
+    it('should render dashed tail when data-pending attribute is set', async () => {
+        const el = (createComponent("div", null,
+            createComponent(TimelineItem, { "data-pending": "" }, "Event")));
+        const item = el.firstElementChild;
+        item.updateComponent();
+        await flushUpdates();
+        const tail = item.querySelector('.timeline-tail');
+        expect(tail.hasAttribute('data-pending')).toBe(true);
+    });
+});
+describe('Timeline', () => {
+    it('should be defined', () => {
+        expect(Timeline).toBeDefined();
+        expect(typeof Timeline).toBe('function');
+    });
+    it('should create a timeline element', () => {
+        const el = (createComponent(Timeline, null));
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-timeline');
+    });
+    it('should set props correctly', () => {
+        const el = (createComponent(Timeline, { mode: "alternate", pending: true }));
+        expect(el.props.mode).toBe('alternate');
+        expect(el.props.pending).toBe(true);
+    });
+    it('should render timeline items as children', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, null,
+                createComponent(TimelineItem, null, "First"),
+                createComponent(TimelineItem, null, "Second"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        const items = timeline.querySelectorAll('shade-timeline-item');
+        expect(items.length).toBe(2);
+    });
+    it('should set data-mode attribute', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, { mode: "alternate" },
+                createComponent(TimelineItem, null, "Event"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        expect(timeline.getAttribute('data-mode')).toBe('alternate');
+    });
+    it('should default mode to left', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, null,
+                createComponent(TimelineItem, null, "Event"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        expect(timeline.getAttribute('data-mode')).toBe('left');
+    });
+    it('should mark last item with data-last', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, null,
+                createComponent(TimelineItem, null, "First"),
+                createComponent(TimelineItem, null, "Last"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        const items = timeline.querySelectorAll('shade-timeline-item');
+        expect(items[0].hasAttribute('data-last')).toBe(false);
+        expect(items[1].hasAttribute('data-last')).toBe(true);
+    });
+    it('should add pending item when pending is true', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, { pending: true },
+                createComponent(TimelineItem, null, "Event"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        const items = timeline.querySelectorAll('shade-timeline-item');
+        expect(items.length).toBe(2);
+    });
+    it('should not mark original last item as data-last when pending is present', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, { pending: true },
+                createComponent(TimelineItem, null, "First"),
+                createComponent(TimelineItem, null, "Second"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        const items = timeline.querySelectorAll('shade-timeline-item');
+        expect(items[0].hasAttribute('data-last')).toBe(false);
+        expect(items[1].hasAttribute('data-last')).toBe(false);
+    });
+    it('should set data-side="right" on items in right mode', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, { mode: "right" },
+                createComponent(TimelineItem, null, "Event"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        const item = timeline.querySelector('shade-timeline-item');
+        expect(item.getAttribute('data-side')).toBe('right');
+    });
+    it('should alternate data-side in alternate mode', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, { mode: "alternate" },
+                createComponent(TimelineItem, null, "First"),
+                createComponent(TimelineItem, null, "Second"),
+                createComponent(TimelineItem, null, "Third"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        const items = timeline.querySelectorAll('shade-timeline-item');
+        expect(items[0].getAttribute('data-side')).toBe('left');
+        expect(items[1].getAttribute('data-side')).toBe('right');
+        expect(items[2].getAttribute('data-side')).toBe('left');
+    });
+    it('should not set data-side in left mode', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Timeline, { mode: "left" },
+                createComponent(TimelineItem, null, "Event"))));
+        const timeline = el.firstElementChild;
+        timeline.updateComponent();
+        await flushUpdates();
+        const item = timeline.querySelector('shade-timeline-item');
+        expect(item.hasAttribute('data-side')).toBe(false);
+    });
+});
+//# sourceMappingURL=timeline.spec.js.map

package/esm/components/timeline.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.spec.js","sourceRoot":"","sources":["../../src/components/timeline.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/tooltip.d.ts

@@ -0,0 +1,25 @@
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipProps = {
+    /**
+     * The tooltip content to display
+     */
+    title: JSX.Element | string;
+    /**
+     * Placement of the tooltip relative to its trigger element
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Delay in milliseconds before the tooltip appears
+     */
+    delay?: number;
+    /**
+     * Whether the tooltip is disabled
+     */
+    disabled?: boolean;
+};
+export declare const Tooltip: (props: TooltipProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=tooltip.d.ts.map

package/esm/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAElE,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,OAAO;;;;sEAkIlB,CAAA"}

package/esm/components/tooltip.js

@@ -0,0 +1,113 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
+export const Tooltip = Shade({
+    shadowDomName: 'shade-tooltip',
+    css: {
+        position: 'relative',
+        display: 'inline-flex',
+        '& .tooltip-popup': {
+            position: 'absolute',
+            zIndex: cssVariableTheme.zIndex.tooltip,
+            pointerEvents: 'none',
+            opacity: '0',
+            visibility: 'hidden',
+            transition: buildTransition(['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default], ['visibility', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default]),
+            transitionDelay: '0s',
+            padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+            borderRadius: cssVariableTheme.shape.borderRadius.sm,
+            backgroundColor: cssVariableTheme.text.primary,
+            color: cssVariableTheme.background.default,
+            fontSize: cssVariableTheme.typography.fontSize.xs,
+            fontFamily: cssVariableTheme.typography.fontFamily,
+            fontWeight: cssVariableTheme.typography.fontWeight.medium,
+            lineHeight: cssVariableTheme.typography.lineHeight.tight,
+            whiteSpace: 'nowrap',
+            maxWidth: '300px',
+            boxShadow: cssVariableTheme.shadows.md,
+        },
+        '&:hover .tooltip-popup, &:focus-within .tooltip-popup': {
+            opacity: '1',
+            visibility: 'visible',
+            transitionDelay: 'var(--tooltip-delay, 0s)',
+        },
+        '&[data-disabled] .tooltip-popup': {
+            display: 'none',
+        },
+        // Placement: top (default)
+        '&:not([data-placement]) .tooltip-popup, &[data-placement="top"] .tooltip-popup': {
+            bottom: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            marginBottom: cssVariableTheme.spacing.xs,
+        },
+        // Placement: bottom
+        '&[data-placement="bottom"] .tooltip-popup': {
+            top: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            marginTop: cssVariableTheme.spacing.xs,
+        },
+        // Placement: left
+        '&[data-placement="left"] .tooltip-popup': {
+            right: '100%',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            marginRight: cssVariableTheme.spacing.xs,
+        },
+        // Placement: right
+        '&[data-placement="right"] .tooltip-popup': {
+            left: '100%',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            marginLeft: cssVariableTheme.spacing.xs,
+        },
+        // Arrow base styles
+        '& .tooltip-arrow': {
+            position: 'absolute',
+            width: '8px',
+            height: '8px',
+            backgroundColor: 'inherit',
+            transform: 'rotate(45deg)',
+        },
+        // Arrow: top placement (arrow at bottom of popup)
+        '&:not([data-placement]) .tooltip-arrow, &[data-placement="top"] .tooltip-arrow': {
+            bottom: '-4px',
+            left: '50%',
+            marginLeft: '-4px',
+        },
+        // Arrow: bottom placement (arrow at top of popup)
+        '&[data-placement="bottom"] .tooltip-arrow': {
+            top: '-4px',
+            left: '50%',
+            marginLeft: '-4px',
+        },
+        // Arrow: left placement (arrow at right of popup)
+        '&[data-placement="left"] .tooltip-arrow': {
+            right: '-4px',
+            top: '50%',
+            marginTop: '-4px',
+        },
+        // Arrow: right placement (arrow at left of popup)
+        '&[data-placement="right"] .tooltip-arrow': {
+            left: '-4px',
+            top: '50%',
+            marginTop: '-4px',
+        },
+    },
+    render: ({ props, children, useHostProps }) => {
+        const { placement, delay, disabled } = props;
+        useHostProps({
+            'data-placement': placement || undefined,
+            'data-disabled': disabled ? '' : undefined,
+            style: {
+                ...(delay !== undefined && delay > 0 ? { '--tooltip-delay': `${delay}ms` } : {}),
+            },
+        });
+        return (createComponent(createComponent, null,
+            children,
+            createComponent("div", { className: "tooltip-popup", role: "tooltip" },
+                createComponent("span", { className: "tooltip-arrow" }),
+                props.title)));
+    },
+});
+//# sourceMappingURL=tooltip.js.map

package/esm/components/tooltip.js.map

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

package/esm/components/tooltip.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tooltip.spec.d.ts.map

package/esm/components/tooltip.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.spec.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.spec.tsx"],"names":[],"mappings":""}