@refraktor/core 0.0.1

package/build/components/timeline/timeline.d.ts

@@ -0,0 +1,4 @@
+import { TimelineFactoryPayload } from "./timeline.types";
+declare const Timeline: import("../..").RefraktorComponent<TimelineFactoryPayload>;
+export default Timeline;
+//# sourceMappingURL=timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAEH,sBAAsB,EAGzB,MAAM,kBAAkB,CAAC;AAe1B,QAAA,MAAM,QAAQ,4DA2EZ,CAAC;AAOH,eAAe,QAAQ,CAAC"}

package/build/components/timeline/timeline.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { Children, cloneElement, isValidElement, useCallback, useMemo } from "react";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { TimelineProvider } from "./timeline.context";
+import { getSize } from "./timeline.styles";
+import { TimelineItem } from "./timeline-item";
+const defaultProps = {
+    orientation: "vertical",
+    size: "md",
+    radius: "full",
+    lineVariant: "solid",
+    active: -1
+};
+const isTimelineItemElement = (child) => isValidElement(child) && child.type === TimelineItem;
+const Timeline = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, orientation, size, radius, lineVariant, active, className, classNames, ...props } = useProps("Timeline", defaultProps, _props);
+    const classes = useClassNames("Timeline", classNames);
+    const _id = useId(id);
+    const sizeStyles = getSize(size);
+    const resolvedChildren = useMemo(() => {
+        const items = Children.toArray(children);
+        const itemCount = items.filter(isTimelineItemElement).length;
+        let itemIndex = 0;
+        return items.map((child) => {
+            if (!isTimelineItemElement(child)) {
+                return child;
+            }
+            const nextChild = cloneElement(child, {
+                __timelineIndex: itemIndex,
+                __timelineCount: itemCount
+            });
+            itemIndex += 1;
+            return nextChild;
+        });
+    }, [children]);
+    const getStyles = useCallback((part) => classes[part], [classes]);
+    return (_jsx(TimelineProvider, { value: {
+            orientation,
+            size,
+            radius,
+            lineVariant,
+            active,
+            getStyles
+        }, children: _jsx("div", { ref: ref, id: _id, role: "list", "data-orientation": orientation, className: cx("w-full", orientation === "horizontal"
+                ? "flex items-start"
+                : "flex flex-col", orientation === "horizontal" && sizeStyles.rootGap, classes.root, className), ...props, children: resolvedChildren }) }));
+});
+Timeline.displayName = "@refraktor/core/Timeline";
+Timeline.configure = createComponentConfig();
+Timeline.classNames = createClassNamesConfig();
+Timeline.Item = TimelineItem;
+export default Timeline;

package/build/components/timeline/timeline.styles.d.ts

@@ -0,0 +1,25 @@
+import { RefraktorSize } from "../../theme";
+import { TimelineLineVariant, TimelineOrientation } from "./timeline.types";
+type TimelineSizeStyles = {
+    rootGap: string;
+    itemGap: string;
+    itemSpacing: string;
+    connectorExtend: string;
+    bulletWrapper: string;
+    bullet: string;
+    contentGap: string;
+    date: string;
+    title: string;
+    description: string;
+};
+export declare const getSize: (size?: RefraktorSize) => TimelineSizeStyles;
+export declare const getStatus: (active: boolean) => {
+    bullet: string;
+    date: string;
+    title: string;
+    description: string;
+    connectorColor: string;
+};
+export declare function getConnector(lineVariant?: TimelineLineVariant, orientation?: TimelineOrientation): "w-0 flex-1 border-l border-dashed border-[var(--refraktor-timeline-connector-color)]" | "w-0 flex-1 border-l border-dotted border-[var(--refraktor-timeline-connector-color)]" | "w-px flex-1 bg-[var(--refraktor-timeline-connector-color)]" | "ml-2 h-0 flex-1 border-t border-dashed border-[var(--refraktor-timeline-connector-color)]" | "ml-2 h-0 flex-1 border-t border-dotted border-[var(--refraktor-timeline-connector-color)]" | "ml-2 h-px flex-1 bg-[var(--refraktor-timeline-connector-color)]";
+export {};
+//# sourceMappingURL=timeline.styles.d.ts.map

package/build/components/timeline/timeline.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,KAAK,kBAAkB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AA0FF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,uBAAgB,CAAC;AAEnE,eAAO,MAAM,SAAS,GAAI,QAAQ,OAAO;;;;;;CACM,CAAC;AAEhD,wBAAgB,YAAY,CACxB,WAAW,GAAE,mBAA6B,EAC1C,WAAW,GAAE,mBAAgC,kfAuBhD"}

package/build/components/timeline/timeline.styles.js

@@ -0,0 +1,98 @@
+const sizes = {
+    xs: {
+        rootGap: "gap-3",
+        itemGap: "gap-2",
+        itemSpacing: "pb-3",
+        connectorExtend: "-mb-3",
+        bulletWrapper: "w-4",
+        bullet: "size-4 text-[9px]",
+        contentGap: "gap-1",
+        date: "text-[10px]",
+        title: "text-xs",
+        description: "text-xs"
+    },
+    sm: {
+        rootGap: "gap-3",
+        itemGap: "gap-2.5",
+        itemSpacing: "pb-3",
+        connectorExtend: "-mb-3",
+        bulletWrapper: "w-5",
+        bullet: "size-4.5 text-[10px]",
+        contentGap: "gap-1",
+        date: "text-[11px]",
+        title: "text-xs",
+        description: "text-xs"
+    },
+    md: {
+        rootGap: "gap-4",
+        itemGap: "gap-3",
+        itemSpacing: "pb-4",
+        connectorExtend: "-mb-4",
+        bulletWrapper: "w-6",
+        bullet: "size-5 text-xs",
+        contentGap: "gap-1.5",
+        date: "text-xs",
+        title: "text-sm",
+        description: "text-xs"
+    },
+    lg: {
+        rootGap: "gap-4",
+        itemGap: "gap-3.5",
+        itemSpacing: "pb-4",
+        connectorExtend: "-mb-4",
+        bulletWrapper: "w-7",
+        bullet: "size-6 text-sm",
+        contentGap: "gap-1.5",
+        date: "text-sm",
+        title: "text-base",
+        description: "text-sm"
+    },
+    xl: {
+        rootGap: "gap-5",
+        itemGap: "gap-4",
+        itemSpacing: "pb-5",
+        connectorExtend: "-mb-5",
+        bulletWrapper: "w-8",
+        bullet: "size-7 text-base",
+        contentGap: "gap-2",
+        date: "text-base",
+        title: "text-lg",
+        description: "text-base"
+    }
+};
+const statuses = {
+    default: {
+        bullet: "border border-[var(--refraktor-border)] text-[var(--refraktor-text-secondary)]",
+        date: "text-[var(--refraktor-text-secondary)]",
+        title: "text-[var(--refraktor-text)]",
+        description: "text-[var(--refraktor-text-secondary)]",
+        connectorColor: "var(--refraktor-border)"
+    },
+    active: {
+        bullet: "border border-[var(--refraktor-primary)] text-[var(--refraktor-text)]",
+        date: "text-[var(--refraktor-text-secondary)]",
+        title: "text-[var(--refraktor-text)]",
+        description: "text-[var(--refraktor-text-secondary)]",
+        connectorColor: "var(--refraktor-primary)"
+    }
+};
+export const getSize = (size = "md") => sizes[size];
+export const getStatus = (active) => active ? statuses.active : statuses.default;
+export function getConnector(lineVariant = "solid", orientation = "vertical") {
+    if (orientation === "vertical") {
+        if (lineVariant === "dashed") {
+            return "w-0 flex-1 border-l border-dashed border-[var(--refraktor-timeline-connector-color)]";
+        }
+        if (lineVariant === "dotted") {
+            return "w-0 flex-1 border-l border-dotted border-[var(--refraktor-timeline-connector-color)]";
+        }
+        return "w-px flex-1 bg-[var(--refraktor-timeline-connector-color)]";
+    }
+    if (lineVariant === "dashed") {
+        return "ml-2 h-0 flex-1 border-t border-dashed border-[var(--refraktor-timeline-connector-color)]";
+    }
+    if (lineVariant === "dotted") {
+        return "ml-2 h-0 flex-1 border-t border-dotted border-[var(--refraktor-timeline-connector-color)]";
+    }
+    return "ml-2 h-px flex-1 bg-[var(--refraktor-timeline-connector-color)]";
+}

package/build/components/timeline/timeline.test.d.ts

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

package/build/components/timeline/timeline.test.d.ts.map

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

package/build/components/timeline/timeline.test.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "../../vitest";
+import Timeline from "./timeline";
+describe("@refraktor/core/Timeline", () => {
+    it("renders timeline items with title and children description", async () => {
+        await render(_jsxs(Timeline, { children: [_jsx(Timeline.Item, { title: "Project started", children: "Planning" }), _jsx(Timeline.Item, { title: "In progress", children: "Building" })] }));
+        expect(screen.getByRole("list")).toBeInTheDocument();
+        expect(screen.getAllByRole("listitem")).toHaveLength(2);
+        expect(screen.getByText("Project started")).toBeInTheDocument();
+        expect(screen.getByText("Building")).toBeInTheDocument();
+    });
+    it("renders date above title", async () => {
+        await render(_jsx(Timeline, { children: _jsx(Timeline.Item, { date: "Mar 2026", title: "Project started", children: "Planning" }) }));
+        const date = screen.getByText("Mar 2026");
+        const title = screen.getByText("Project started");
+        expect(date).toHaveAttribute("data-timeline-date", "true");
+        expect(date.compareDocumentPosition(title) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+    it("supports horizontal orientation", async () => {
+        const { container } = await render(_jsxs(Timeline, { orientation: "horizontal", children: [_jsx(Timeline.Item, { title: "Step 1" }), _jsx(Timeline.Item, { title: "Step 2" })] }));
+        const root = container.firstElementChild;
+        const item = screen.getAllByRole("listitem")[0];
+        expect(root).toHaveAttribute("data-orientation", "horizontal");
+        expect(item).toHaveAttribute("data-orientation", "horizontal");
+    });
+    it("hides the connector on the last item", async () => {
+        const { container } = await render(_jsxs(Timeline, { children: [_jsx(Timeline.Item, { title: "One" }), _jsx(Timeline.Item, { title: "Two" }), _jsx(Timeline.Item, { title: "Three" })] }));
+        const connectors = container.querySelectorAll('[data-timeline-connector="true"]');
+        expect(connectors).toHaveLength(2);
+    });
+    it("marks current and previous items active from root active prop", async () => {
+        const { container } = await render(_jsxs(Timeline, { lineVariant: "dashed", active: 1, children: [_jsx(Timeline.Item, { title: "Done" }), _jsx(Timeline.Item, { title: "Now" })] }));
+        const items = screen.getAllByRole("listitem");
+        const connector = container.querySelector('[data-timeline-connector="true"]');
+        expect(items[0]).toHaveAttribute("data-active", "true");
+        expect(items[1]).toHaveAttribute("data-active", "true");
+        expect(connector).toHaveClass("border-dashed");
+    });
+    it("marks all items active when active exceeds the last index", async () => {
+        await render(_jsxs(Timeline, { active: 10, children: [_jsx(Timeline.Item, { title: "One" }), _jsx(Timeline.Item, { title: "Two" })] }));
+        const items = screen.getAllByRole("listitem");
+        expect(items[0]).toHaveAttribute("data-active", "true");
+        expect(items[1]).toHaveAttribute("data-active", "true");
+    });
+    it("marks no items active when active is -1", async () => {
+        await render(_jsxs(Timeline, { active: -1, children: [_jsx(Timeline.Item, { title: "One" }), _jsx(Timeline.Item, { title: "Two" })] }));
+        const items = screen.getAllByRole("listitem");
+        expect(items[0]).toHaveAttribute("data-active", "false");
+        expect(items[1]).toHaveAttribute("data-active", "false");
+    });
+    it("supports root and slot class names", async () => {
+        const { container } = await render(_jsxs(Timeline, { className: "custom-root", classNames: {
+                item: "custom-item",
+                bullet: "custom-bullet",
+                connector: "custom-connector",
+                date: "custom-date",
+                title: "custom-title"
+            }, children: [_jsx(Timeline.Item, { date: "Date", title: "Entry", children: "Desc" }), _jsx(Timeline.Item, { title: "Entry 2" })] }));
+        const root = container.firstElementChild;
+        const item = screen.getAllByRole("listitem")[0];
+        const bullet = container.querySelector('[data-timeline-bullet="true"]');
+        const connector = container.querySelector('[data-timeline-connector="true"]');
+        const date = screen.getByText("Date");
+        const title = screen.getByText("Entry");
+        expect(root).toHaveClass("custom-root");
+        expect(item).toHaveClass("custom-item");
+        expect(bullet).toHaveClass("custom-bullet");
+        expect(connector).toHaveClass("custom-connector");
+        expect(date).toHaveClass("custom-date");
+        expect(title).toHaveClass("custom-title");
+    });
+});

package/build/components/timeline/timeline.types.d.ts

@@ -0,0 +1,67 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { TimelineItem } from "./timeline-item";
+export type TimelineOrientation = "vertical" | "horizontal";
+export type TimelineLineVariant = "solid" | "dashed" | "dotted";
+export type TimelineClassNames = {
+    root?: string;
+    item?: string;
+    bulletWrapper?: string;
+    bullet?: string;
+    connector?: string;
+    content?: string;
+    date?: string;
+    title?: string;
+    description?: string;
+};
+export interface TimelineProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing timeline items */
+    children: ReactNode;
+    /** Timeline orientation @default `vertical` */
+    orientation?: TimelineOrientation;
+    /** Shared timeline size @default `md` */
+    size?: RefraktorSize;
+    /** Radius used for bullets @default `full` */
+    radius?: RefraktorRadius;
+    /** Connector style @default `solid` */
+    lineVariant?: TimelineLineVariant;
+    /** Active step index. Use `-1` for no active step @default `-1` */
+    active?: number;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: TimelineClassNames;
+}
+export interface TimelineItemProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+    /** Item date/timestamp displayed above title */
+    date?: ReactNode;
+    /** Item heading */
+    title?: ReactNode;
+    /** Custom bullet content */
+    bullet?: ReactNode;
+    /** Whether connector should be rendered @default `true` */
+    line?: boolean;
+    /** Item description/body */
+    children?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+    /** @internal */
+    __timelineIndex?: number;
+    /** @internal */
+    __timelineCount?: number;
+}
+export interface TimelineFactoryPayload extends FactoryPayload {
+    props: TimelineProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<TimelineProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<TimelineClassNames>>;
+        Item: typeof TimelineItem;
+    };
+}
+export interface TimelineItemFactoryPayload extends FactoryPayload {
+    props: TimelineItemProps;
+    ref: HTMLDivElement;
+}
+//# sourceMappingURL=timeline.types.d.ts.map

package/build/components/timeline/timeline.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAClE,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IAEpB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC,yCAAyC;IACzC,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,uCAAuC;IACvC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACnC;AAED,MAAM,WAAW,iBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,gDAAgD;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,mBAAmB;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,gBAAgB;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC1D,KAAK,EAAE,aAAa,CAAC;IACrB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,aAAa,CAAC,CAAC,CAAC;QACnE,UAAU,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC1E,IAAI,EAAE,OAAO,YAAY,CAAC;KAC7B,CAAC;CACL;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IAC9D,KAAK,EAAE,iBAAiB,CAAC;IACzB,GAAG,EAAE,cAAc,CAAC;CACvB"}

package/build/components/timeline/timeline.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Tooltip } from "./tooltip";
+export type { TooltipProps, TooltipClassNames, TooltipMiddlewares, TooltipPositioning, TooltipTrigger } from "./tooltip.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,YAAY,EACR,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACjB,MAAM,iBAAiB,CAAC"}

package/build/components/tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from "./tooltip";

package/build/components/tooltip/tooltip.d.ts

@@ -0,0 +1,4 @@
+import { TooltipFactoryPayload } from "./tooltip.types";
+declare const Tooltip: import("../..").RefraktorComponent<TooltipFactoryPayload>;
+export default Tooltip;
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,qBAAqB,EAExB,MAAM,iBAAiB,CAAC;AAoBzB,QAAA,MAAM,OAAO,2DAsHX,CAAC;AAMH,eAAe,OAAO,CAAC"}

package/build/components/tooltip/tooltip.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { useTooltip } from "./use-tooltip";
+import { cloneElement, isValidElement } from "react";
+import { Transition } from "../transition";
+import { FloatingArrow, FloatingPortal } from "@floating-ui/react";
+const defaultProps = {
+    positioning: {
+        placement: "top",
+        offset: 8
+    },
+    middlewares: { flip: true, shift: true, inline: true },
+    trigger: "hover",
+    openDelay: 0,
+    closeDelay: 0,
+    showArrow: false,
+    radius: "default",
+    withinPortal: true
+};
+const Tooltip = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, children, content, opened, defaultOpened, onOpenedChange, positioning, middlewares, disabled, trigger, openDelay, closeDelay, showArrow, transitionProps, radius, withinPortal, className, classNames, ...props } = useProps("Tooltip", defaultProps, _props);
+    const classes = useClassNames("Tooltip", classNames);
+    const _id = useId(id);
+    const { opened: isOpened, context, refs, floatingStyles, getReferenceProps, getFloatingProps, placement, arrowRef } = useTooltip({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        openDelay,
+        closeDelay,
+        showArrow
+    });
+    const triggerElement = isValidElement(children)
+        ? cloneElement(children, {
+            ref: refs.setReference,
+            ...getReferenceProps({
+                ...children.props
+            })
+        })
+        : null;
+    const tooltipContent = (_jsx(Transition, { transition: "fade", duration: 200, mounted: isOpened, ...transitionProps, children: _jsxs("div", { ref: (node) => {
+                refs.setFloating(node);
+                if (typeof ref === "function") {
+                    ref(node);
+                }
+                else if (ref) {
+                    ref.current = node;
+                }
+            }, id: _id, role: "tooltip", style: floatingStyles, className: cx("z-50 px-1.5 py-0.5 text-sm bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md", getRadius(radius), classes.content, className), ...getFloatingProps(), ...props, children: [content, showArrow && (_jsx(FloatingArrow, { ref: arrowRef, context: context, width: 10, height: 5, className: cx("fill-[var(--refraktor-bg)]", classes.arrow) }))] }) }));
+    return (_jsxs("div", { className: cx("inline-block", classes.root), children: [_jsx("span", { className: cx("inline-block", classes.trigger), children: triggerElement }), withinPortal ? (_jsx(FloatingPortal, { children: tooltipContent })) : (tooltipContent)] }));
+});
+Tooltip.displayName = "@refraktor/core/Tooltip";
+Tooltip.configure = createComponentConfig();
+Tooltip.classNames = createClassNamesConfig();
+export default Tooltip;

package/build/components/tooltip/tooltip.types.d.ts

@@ -0,0 +1,68 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { FlipOptions, InlineOptions, Placement, ShiftOptions } from "@floating-ui/react";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { TransitionProps } from "../transition";
+import { RefraktorRadius } from "../../theme";
+export type TooltipClassNames = {
+    root?: string;
+    trigger?: string;
+    content?: string;
+    arrow?: string;
+};
+export type TooltipPositioning = {
+    /** The placement of the tooltip relative to the trigger element @default `top` */
+    placement?: Placement;
+    /** Offset distance from the trigger element in pixels @default `8` */
+    offset?: number;
+};
+export type TooltipMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+export type TooltipTrigger = "hover" | "focus";
+export interface TooltipProps extends Omit<ComponentPropsWithoutRef<"div">, "content"> {
+    /** The trigger element that activates the tooltip */
+    children: ReactNode;
+    /** Content to display inside the tooltip */
+    content: ReactNode;
+    /** State of the tooltip (controlled) */
+    opened?: boolean;
+    /** Initial state of the tooltip (uncontrolled) */
+    defaultOpened?: boolean;
+    /** Callback called when the tooltip state changes */
+    onOpenedChange?: (opened: boolean) => void;
+    /** Positioning settings for the tooltip */
+    positioning?: TooltipPositioning;
+    /** Middlewares settings for the tooltip */
+    middlewares?: TooltipMiddlewares;
+    /** Whether the tooltip is disabled @default `false` */
+    disabled?: boolean;
+    /** Trigger type for the tooltip @default `hover` */
+    trigger?: TooltipTrigger;
+    /** Delay in milliseconds before the tooltip opens @default `0` */
+    openDelay?: number;
+    /** Delay in milliseconds before the tooltip closes @default `0` */
+    closeDelay?: number;
+    /** Whether to show the arrow for the tooltip @default `false` */
+    showArrow?: boolean;
+    /** Transition props for the tooltip content, uses Transition component internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    /** Radius for the tooltip content @default `default` */
+    radius?: RefraktorRadius;
+    /** Whether to render the tooltip within a portal @default `true` */
+    withinPortal?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: TooltipClassNames;
+}
+export interface TooltipFactoryPayload extends FactoryPayload {
+    props: TooltipProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<TooltipProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<TooltipClassNames>>;
+    };
+}
+//# sourceMappingURL=tooltip.types.d.ts.map

package/build/components/tooltip/tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EACR,WAAW,EACX,aAAa,EACb,SAAS,EACT,YAAY,EACf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,kFAAkF;IAClF,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,YAAa,SAAQ,IAAI,CACtC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,SAAS,CACZ;IACG,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;IAEpB,4CAA4C;IAC5C,OAAO,EAAE,SAAS,CAAC;IAEnB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,kDAAkD;IAClD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAE3C,2CAA2C;IAC3C,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC,2CAA2C;IAC3C,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,qFAAqF;IACrF,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAEhE,wDAAwD;IACxD,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IACzD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,YAAY,CAAC,CAAC,CAAC;QAClE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,iBAAiB,CAAC,CACnD,CAAC;KACL,CAAC;CACL"}

package/build/components/tooltip/tooltip.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/tooltip/use-tooltip.d.ts

@@ -0,0 +1,35 @@
+import { TooltipMiddlewares, TooltipPositioning, TooltipTrigger } from "./tooltip.types";
+import { FloatingContext, Placement } from "@floating-ui/react";
+interface UseTooltipProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    positioning?: TooltipPositioning;
+    middlewares?: TooltipMiddlewares;
+    disabled?: boolean;
+    trigger?: TooltipTrigger;
+    showArrow?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+}
+export interface UseTooltipReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        reference: React.MutableRefObject<HTMLElement | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    floatingStyles: React.CSSProperties;
+    getReferenceProps: (userProps?: React.HTMLAttributes<HTMLElement>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLAttributes<HTMLElement>) => Record<string, unknown>;
+    arrowRef: React.RefObject<SVGSVGElement | null>;
+    placement: Placement;
+}
+export declare function useTooltip(options?: UseTooltipProps): UseTooltipReturn;
+export {};
+//# sourceMappingURL=use-tooltip.d.ts.map

package/build/components/tooltip/use-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/use-tooltip.ts"],"names":[],"mappings":"AACA,OAAO,EACH,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAIH,eAAe,EAIf,SAAS,EAQZ,MAAM,oBAAoB,CAAC;AAG5B,UAAU,eAAe;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE;QACF,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QAChD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QACtD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,EAAE,CACf,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IAChD,SAAS,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,OAAO,GAAE,eAAoB,GAAG,gBAAgB,CAyI1E"}

package/build/components/tooltip/use-tooltip.js

@@ -0,0 +1,97 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { arrow, autoUpdate, flip, inline, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { useCallback, useMemo, useRef } from "react";
+export function useTooltip(options = {}) {
+    const { opened, defaultOpened, onOpenedChange, positioning = {
+        placement: "top",
+        offset: 8
+    }, middlewares = { flip: true, shift: true, inline: true }, disabled = false, trigger = "hover", showArrow = false, openDelay = 0, closeDelay = 0 } = options;
+    const arrowRef = useRef(null);
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const middleware = useMemo(() => {
+        const middleware = [];
+        middleware.push(offset(positioning.offset ?? 8));
+        if (middlewares.flip) {
+            middleware.push(flip(typeof middlewares.flip === "boolean"
+                ? undefined
+                : middlewares.flip));
+        }
+        if (middlewares.shift) {
+            middleware.push(shift(typeof middlewares.shift === "boolean"
+                ? undefined
+                : middlewares.shift));
+        }
+        if (middlewares.inline) {
+            middleware.push(inline(typeof middlewares.inline === "boolean"
+                ? undefined
+                : middlewares.inline));
+        }
+        if (arrowRef.current && showArrow) {
+            middleware.push(arrow({
+                element: arrowRef.current
+            }));
+        }
+        return middleware;
+    }, [positioning.offset, middlewares, showArrow, arrowRef]);
+    const floating = useFloating({
+        placement: positioning.placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware: middleware,
+        whileElementsMounted: autoUpdate
+    });
+    const hover = useHover(floating.context, {
+        enabled: trigger === "hover" && !disabled,
+        delay: {
+            open: openDelay,
+            close: closeDelay
+        }
+    });
+    const focus = useFocus(floating.context, {
+        enabled: trigger === "focus" && !disabled
+    });
+    const dismiss = useDismiss(floating.context);
+    const role = useRole(floating.context, {
+        role: "tooltip"
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        hover,
+        focus,
+        dismiss,
+        role
+    ]);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [setIsOpen, isOpen]);
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            reference: floating.refs
+                .reference,
+            floating: floating.refs
+                .floating
+        },
+        floatingStyles: floating.floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        placement: floating.placement,
+        arrowRef
+    };
+}