@moduix/react 1.1.0

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,75 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import Tooltip_module_default from "./Tooltip.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Tooltip } from "@ark-ui/react/tooltip";
+//#region src/components/tooltip/Tooltip.tsx
+function TooltipRoot({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Tooltip.Root, { ...props })
+	});
+}
+function TooltipRootProvider({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Tooltip.RootProvider, { ...props })
+	});
+}
+const TooltipTrigger = forwardRef(function TooltipTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		ref,
+		"data-slot": "tooltip-trigger",
+		asChild,
+		className: clsx(!asChild && Tooltip_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const TooltipPositioner = forwardRef(function TooltipPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		ref,
+		"data-slot": "tooltip-positioner",
+		className: clsx(Tooltip_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const TooltipContent = forwardRef(function TooltipContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Content, {
+		ref,
+		"data-slot": "tooltip-content",
+		className: clsx(Tooltip_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const TooltipArrow = forwardRef(function TooltipArrow({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
+		ref,
+		"data-slot": "tooltip-arrow",
+		className: clsx(Tooltip_module_default.arrow, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(TooltipArrowTip, {})
+	});
+});
+const TooltipArrowTip = forwardRef(function TooltipArrowTip({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.ArrowTip, {
+		ref,
+		"data-slot": "tooltip-arrow-tip",
+		className: clsx(Tooltip_module_default.arrowTip, normalizeClassName(className)),
+		...props
+	});
+});
+const Tooltip$1 = Object.assign(TooltipRoot, {
+	Root: TooltipRoot,
+	RootProvider: TooltipRootProvider,
+	Trigger: TooltipTrigger,
+	Positioner: TooltipPositioner,
+	Content: TooltipContent,
+	Arrow: TooltipArrow,
+	ArrowTip: TooltipArrowTip
+});
+//#endregion
+export { Tooltip$1 as Tooltip };

package/dist/components/tooltip/Tooltip.module.js

@@ -0,0 +1,13 @@
+import './Tooltip.css';
+//#region src/components/tooltip/Tooltip.module.css
+var Tooltip_module_default = {
+	"arrow": "DqDdfq_arrow",
+	"arrowTip": "DqDdfq_arrowTip",
+	"content": "DqDdfq_content",
+	"positioner": "DqDdfq_positioner",
+	"tooltip-content-in": "DqDdfq_tooltip-content-in",
+	"tooltip-content-out": "DqDdfq_tooltip-content-out",
+	"trigger": "DqDdfq_trigger"
+};
+//#endregion
+export { Tooltip_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Tooltip } from "./Tooltip.js";
+export { Tooltip };

package/dist/components/tour/Tour.css

@@ -0,0 +1,286 @@
+@layer ui.components {
+  .vsTV1G_backdrop {
+    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--layer-index, 0));
+    background-color: var(--tour-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    backdrop-filter: var(--backdrop-filter, blur(var(--tour-backdrop-blur, 4px)));
+
+    &[data-state="open"] {
+      animation: vsTV1G_tour-backdrop-in var(--tour-backdrop-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"] {
+      animation: vsTV1G_tour-backdrop-out var(--tour-backdrop-transition, var(--transition-default));
+    }
+  }
+
+  .vsTV1G_spotlight {
+    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--tour-layer, 0));
+    box-shadow: var(--tour-spotlight-shadow, 0 0 0 var(--tour-spotlight-ring-width, 2px) var(--color-ring));
+  }
+
+  .vsTV1G_positioner {
+    z-index: var(--z-index, var(--tour-z-index, var(--z-modal)));
+    max-width: var(--available-width);
+    max-height: var(--available-height);
+    outline: 0;
+
+    &[data-type="dialog"] {
+      overscroll-behavior: contain;
+      padding: var(--tour-positioner-padding, var(--spacing-4));
+      place-items: center;
+      display: grid;
+      position: fixed;
+      inset: 0;
+      overflow-y: auto;
+    }
+
+    &[data-type="floating"] {
+      z-index: var(--tour-z-index, var(--z-modal));
+      margin: var(--tour-floating-offset, var(--spacing-6));
+      position: fixed;
+
+      &[data-placement*="top"] {
+        inset-block-start: 0;
+      }
+
+      &[data-placement*="bottom"] {
+        inset-block-end: 0;
+      }
+
+      &[data-placement*="start"] {
+        inset-inline-start: 0;
+      }
+
+      &[data-placement*="end"] {
+        inset-inline-end: 0;
+      }
+    }
+  }
+
+  .vsTV1G_content {
+    --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
+    --arrow-size: var(--tour-arrow-size, .625rem);
+    box-sizing: border-box;
+    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--layer-index, 0));
+    gap: var(--tour-gap, var(--spacing-1));
+    width: min(var(--tour-width, 20rem), var(--available-width, 100vw));
+    max-width: min(var(--tour-max-width, calc(100vw - var(--spacing-8))),
+      var(--available-width, 100vw));
+    max-height: min(var(--tour-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--tour-padding, var(--spacing-5));
+    border: var(--tour-border-width, var(--border-width-sm)) solid
+      var(--tour-border-color, var(--color-border));
+    border-radius: var(--tour-radius, var(--radius-lg));
+    background-color: var(--tour-bg, var(--color-popover));
+    color: var(--tour-color, var(--color-popover-foreground));
+    box-shadow: var(--tour-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: visible;
+
+    &[data-state="open"] {
+      animation: vsTV1G_tour-content-in var(--tour-transition, var(--transition-default)) both;
+    }
+
+    &[data-state="closed"] {
+      animation: vsTV1G_tour-content-out var(--tour-transition, var(--transition-default)) both;
+    }
+
+    &[data-type="dialog"] {
+      width: min(var(--tour-dialog-width, 26rem),
+        var(--tour-max-width, calc(100vw - var(--spacing-8))));
+    }
+
+    &[data-type="floating"] {
+      width: min(var(--tour-floating-width, 22rem),
+        var(--tour-max-width, calc(100vw - var(--spacing-8))));
+    }
+  }
+
+  .vsTV1G_arrow {
+    --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
+    --arrow-size: var(--tour-arrow-size, .625rem);
+  }
+
+  .vsTV1G_arrowTip {
+    border-top: var(--tour-border-width, var(--border-width-sm)) solid
+      var(--tour-arrow-stroke-color, var(--tour-border-color, var(--color-border)));
+    border-left: var(--tour-border-width, var(--border-width-sm)) solid
+      var(--tour-arrow-stroke-color, var(--tour-border-color, var(--color-border)));
+  }
+
+  .vsTV1G_title {
+    margin: var(--tour-title-margin, 0);
+    color: var(--tour-title-color, var(--tour-color, var(--color-popover-foreground)));
+    font-size: var(--tour-title-font-size, var(--text-md));
+    font-weight: var(--tour-title-font-weight, var(--weight-semibold));
+    line-height: var(--tour-title-line-height, var(--line-height-text-md));
+    padding-inline-end: var(--tour-title-padding-inline-end, var(--spacing-6));
+  }
+
+  .vsTV1G_description {
+    margin: var(--tour-description-margin, 0);
+    color: var(--tour-description-color, var(--color-muted-foreground));
+    font-size: var(--tour-description-font-size, var(--text-sm));
+    line-height: var(--tour-description-line-height, var(--line-height-text-sm));
+  }
+
+  .vsTV1G_progressText {
+    margin-top: var(--tour-progress-text-margin-top, var(--spacing-2));
+    color: var(--tour-progress-text-color, var(--color-muted-foreground));
+    font-size: var(--tour-progress-text-font-size, var(--text-xs));
+    line-height: var(--tour-progress-text-line-height, var(--line-height-text-xs));
+    order: 1;
+  }
+
+  .vsTV1G_closeTrigger {
+    box-sizing: border-box;
+    width: var(--tour-close-trigger-size, 1.75rem);
+    height: var(--tour-close-trigger-size, 1.75rem);
+    border-radius: var(--tour-close-trigger-radius, var(--radius-md));
+    background: var(--tour-close-trigger-bg, transparent);
+    color: var(--tour-close-trigger-color, var(--color-muted-foreground));
+    font: inherit;
+    cursor: pointer;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    line-height: 1;
+    display: inline-flex;
+    position: absolute;
+    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-2));
+    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-2));
+
+    & :where(svg) {
+      width: var(--tour-close-trigger-icon-size, .875rem);
+      height: var(--tour-close-trigger-icon-size, .875rem);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background: var(--tour-close-trigger-bg-hover, var(--color-accent));
+        color: var(--tour-close-trigger-color-hover, var(--tour-color, var(--color-popover-foreground)));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--tour-focus-ring-width, var(--border-width-sm)) solid
+        var(--tour-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+    }
+  }
+
+  .vsTV1G_closeIcon {
+    --close-button-size: var(--tour-close-trigger-size, 1.75rem);
+    --close-button-radius: var(--tour-close-trigger-radius, var(--radius-md));
+    --close-button-icon-size: var(--tour-close-trigger-icon-size, .875rem);
+    --close-button-bg: var(--tour-close-trigger-bg, transparent);
+    --close-button-bg-hover: var(--tour-close-trigger-bg-hover, var(--color-accent));
+    --close-button-color: var(--tour-close-trigger-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--tour-close-trigger-color-hover, var(--tour-color, var(--color-popover-foreground)));
+    --close-button-focus-ring-width: var(--tour-focus-ring-width, var(--border-width-sm));
+    --close-button-focus-ring-color: var(--tour-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+    position: absolute;
+    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-2));
+    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-2));
+  }
+
+  .vsTV1G_control {
+    justify-content: flex-end;
+    gap: var(--tour-control-gap, var(--spacing-2));
+    margin-top: var(--tour-control-margin-top, var(--spacing-3));
+    flex-wrap: wrap;
+    order: 2;
+    display: flex;
+  }
+
+  .vsTV1G_actionTrigger {
+    box-sizing: border-box;
+    min-height: var(--tour-action-height, 2rem);
+    justify-content: center;
+    align-items: center;
+    gap: var(--tour-action-gap, var(--spacing-2));
+    padding-block: var(--tour-action-padding-y, .375rem);
+    padding-inline: var(--tour-action-padding-x, .75rem);
+    border: var(--tour-action-border-width, var(--border-width-sm)) solid
+      var(--tour-action-border-color, var(--color-border));
+    border-radius: var(--tour-action-radius, var(--radius-md));
+    background: var(--tour-action-bg, var(--color-background));
+    color: var(--tour-action-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--tour-action-font-size, var(--text-sm));
+    font-weight: var(--tour-action-font-weight, var(--weight-medium));
+    line-height: var(--tour-action-line-height, var(--line-height-text-sm));
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--tour-action-transition, var(--transition-default)),
+      border-color var(--tour-action-transition, var(--transition-default)),
+      color var(--tour-action-transition, var(--transition-default));
+    text-decoration: none;
+    display: inline-flex;
+
+    &[data-type="next"], &[data-type="close"] {
+      border-color: var(--tour-action-primary-border-color, var(--color-primary));
+      background: var(--tour-action-primary-bg, var(--color-primary));
+      color: var(--tour-action-primary-color, var(--color-primary-foreground));
+    }
+
+    @media (hover: hover) {
+      &:hover:not([data-disabled], :disabled) {
+        background: var(--tour-action-bg-hover, var(--color-accent));
+      }
+
+      &:is([data-type="next"], [data-type="close"]):hover:not([data-disabled], :disabled) {
+        border-color: var(--tour-action-primary-border-color-hover, color-mix(in oklab, var(--color-primary), black 12%));
+        background: var(--tour-action-primary-bg-hover, color-mix(in oklab, var(--color-primary), black 12%));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--tour-focus-ring-width, var(--border-width-sm)) solid
+        var(--tour-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+    }
+
+    &[data-disabled], &:disabled {
+      pointer-events: none;
+      opacity: var(--tour-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  @keyframes vsTV1G_tour-backdrop-in {
+    from {
+      opacity: var(--tour-backdrop-starting-opacity, 0);
+      backdrop-filter: var(--tour-backdrop-starting-blur, none);
+    }
+  }
+
+  @keyframes vsTV1G_tour-backdrop-out {
+    to {
+      opacity: var(--tour-backdrop-ending-opacity, 0);
+      backdrop-filter: var(--tour-backdrop-ending-blur, none);
+    }
+  }
+
+  @keyframes vsTV1G_tour-content-in {
+    from {
+      opacity: var(--tour-content-starting-opacity, 0);
+      translate: var(--tour-content-starting-translate-x, 0)
+        var(--tour-content-starting-translate-y, 0);
+      scale: var(--tour-content-starting-scale, var(--scale-popup));
+    }
+  }
+
+  @keyframes vsTV1G_tour-content-out {
+    to {
+      opacity: var(--tour-content-ending-opacity, 0);
+      translate: var(--tour-content-ending-translate-x, 0) var(--tour-content-ending-translate-y, 0);
+      scale: var(--tour-content-ending-scale, var(--scale-popup));
+    }
+  }
+}

package/dist/components/tour/Tour.d.ts

@@ -0,0 +1,30 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps } from "react";
+import { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "@ark-ui/react/tour";
+
+//#region src/components/tour/Tour.d.ts
+type TourRootProps = ComponentProps<typeof Tour.Root> & OverlayPortalProps;
+declare function TourRoot({
+  portalled,
+  portalRef,
+  ...props
+}: TourRootProps): import("react").JSX.Element;
+declare const Tour$1: typeof TourRoot & {
+  Root: typeof TourRoot;
+  Backdrop: import("react").ForwardRefExoticComponent<Omit<Tour.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Spotlight: import("react").ForwardRefExoticComponent<Omit<Tour.SpotlightProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<Tour.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Tour.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Arrow: import("react").ForwardRefExoticComponent<Omit<Tour.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ArrowTip: import("react").ForwardRefExoticComponent<Omit<Tour.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<Tour.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<Tour.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ProgressText: import("react").ForwardRefExoticComponent<Omit<Tour.ProgressTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Tour.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Tour.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<Tour.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Actions: (props: Tour.ActionsProps) => import("react").ReactNode;
+  ActionTrigger: import("react").ForwardRefExoticComponent<Omit<Tour.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Tour$1 as Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise };

package/dist/components/tour/Tour.js

@@ -0,0 +1,149 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import Tour_module_default from "./Tour.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "@ark-ui/react/tour";
+//#region src/components/tour/Tour.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close tour";
+function TourRoot({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Tour.Root, { ...props })
+	});
+}
+const TourBackdrop = forwardRef(function TourBackdrop({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Tour.Backdrop, {
+		ref,
+		"data-slot": "tour-backdrop",
+		className: clsx(Tour_module_default.backdrop, normalizeClassName(className)),
+		...props
+	}) });
+});
+const TourSpotlight = forwardRef(function TourSpotlight({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Tour.Spotlight, {
+		ref,
+		"data-slot": "tour-spotlight",
+		className: clsx(Tour_module_default.spotlight, normalizeClassName(className)),
+		...props
+	}) });
+});
+const TourPositioner = forwardRef(function TourPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Tour.Positioner, {
+		ref,
+		"data-slot": "tour-positioner",
+		className: clsx(Tour_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const TourContent = forwardRef(function TourContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.Content, {
+		ref,
+		"data-slot": "tour-content",
+		className: clsx(Tour_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const TourArrow = forwardRef(function TourArrow({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.Arrow, {
+		ref,
+		"data-slot": "tour-arrow",
+		className: clsx(Tour_module_default.arrow, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(TourArrowTip, {})
+	});
+});
+const TourArrowTip = forwardRef(function TourArrowTip({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.ArrowTip, {
+		ref,
+		"data-slot": "tour-arrow-tip",
+		className: clsx(Tour_module_default.arrowTip, normalizeClassName(className)),
+		...props
+	});
+});
+const TourTitle = forwardRef(function TourTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.Title, {
+		ref,
+		"data-slot": "tour-title",
+		className: clsx(Tour_module_default.title, normalizeClassName(className)),
+		...props
+	});
+});
+const TourDescription = forwardRef(function TourDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.Description, {
+		ref,
+		"data-slot": "tour-description",
+		className: clsx(Tour_module_default.description, normalizeClassName(className)),
+		...props
+	});
+});
+const TourProgressText = forwardRef(function TourProgressText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.ProgressText, {
+		ref,
+		"data-slot": "tour-progress-text",
+		className: clsx(Tour_module_default.progressText, normalizeClassName(className)),
+		...props
+	});
+});
+const TourCloseTrigger = forwardRef(function TourCloseTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.CloseTrigger, {
+		ref,
+		asChild,
+		"data-slot": "tour-close-trigger",
+		className: clsx(!asChild && Tour_module_default.closeTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const TourCloseIcon = forwardRef(function TourCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.CloseTrigger, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			"data-slot": "tour-close-icon",
+			"aria-label": ariaLabel,
+			className: clsx(Tour_module_default.closeIcon, normalizeClassName(className)),
+			children
+		})
+	});
+});
+const TourControl = forwardRef(function TourControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.Control, {
+		ref,
+		"data-slot": "tour-control",
+		className: clsx(Tour_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const TourActionTrigger = forwardRef(function TourActionTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tour.ActionTrigger, {
+		ref,
+		asChild,
+		"data-slot": "tour-action-trigger",
+		className: clsx(!asChild && Tour_module_default.actionTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const TourActions = Tour.Actions;
+const Tour$1 = Object.assign(TourRoot, {
+	Root: TourRoot,
+	Backdrop: TourBackdrop,
+	Spotlight: TourSpotlight,
+	Positioner: TourPositioner,
+	Content: TourContent,
+	Arrow: TourArrow,
+	ArrowTip: TourArrowTip,
+	Title: TourTitle,
+	Description: TourDescription,
+	ProgressText: TourProgressText,
+	CloseTrigger: TourCloseTrigger,
+	CloseIcon: TourCloseIcon,
+	Control: TourControl,
+	Actions: TourActions,
+	ActionTrigger: TourActionTrigger
+});
+//#endregion
+export { Tour$1 as Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise };

package/dist/components/tour/Tour.module.js

@@ -0,0 +1,23 @@
+import './Tour.css';
+//#region src/components/tour/Tour.module.css
+var Tour_module_default = {
+	"actionTrigger": "vsTV1G_actionTrigger",
+	"arrow": "vsTV1G_arrow",
+	"arrowTip": "vsTV1G_arrowTip",
+	"backdrop": "vsTV1G_backdrop",
+	"closeIcon": "vsTV1G_closeIcon",
+	"closeTrigger": "vsTV1G_closeTrigger",
+	"content": "vsTV1G_content",
+	"control": "vsTV1G_control",
+	"description": "vsTV1G_description",
+	"positioner": "vsTV1G_positioner",
+	"progressText": "vsTV1G_progressText",
+	"spotlight": "vsTV1G_spotlight",
+	"title": "vsTV1G_title",
+	"tour-backdrop-in": "vsTV1G_tour-backdrop-in",
+	"tour-backdrop-out": "vsTV1G_tour-backdrop-out",
+	"tour-content-in": "vsTV1G_tour-content-in",
+	"tour-content-out": "vsTV1G_tour-content-out"
+};
+//#endregion
+export { Tour_module_default as default };

package/dist/components/tour/index.d.ts

@@ -0,0 +1,2 @@
+import { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "./Tour.js";
+export { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise };