@central-ui/react 0.1.1 → 0.2.0

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

@@ -1,8 +1,9 @@
 import type { StyleProps } from '../../types/Style.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
-import type { ComponentPropsWithRef, ReactElement } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 /**
- * Wrap the target element with OpenHandler and keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
+ * OpenButton renders its own trigger button; pass asChild to make your own target element the trigger instead. Keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
  *
  * @example Complete composition
  * import { Button, Tooltip } from '@central-ui/react'
@@ -10,9 +11,9 @@ import type { ComponentPropsWithRef, ReactElement } from 'react';
  * function Example() {
  *   return (
  *     <Tooltip.Root>
- *       <Tooltip.OpenHandler>
+ *       <Tooltip.OpenButton asChild>
  *         <Button.default variant="secondary">Delivery information</Button.default>
- *       </Tooltip.OpenHandler>
+ *       </Tooltip.OpenButton>
  *       <Tooltip.Popup>
  *         <Tooltip.PopupText>Usually arrives within three days.</Tooltip.PopupText>
  *         <Tooltip.Arrow />
@@ -22,23 +23,20 @@ import type { ComponentPropsWithRef, ReactElement } from 'react';
  * }
  *
  * @example Place help below its target
- * // Keep the same OpenHandler and Root.
+ * // Keep the same OpenButton and Root.
  * ;<Tooltip.Popup side="bottom">
  *   <Tooltip.PopupText>Delivery details</Tooltip.PopupText>
  * </Tooltip.Popup>
  */
-export declare const Root: <Payload>(props: BaseTooltip.Root.Props<Payload>) => React.JSX.Element;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const OpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<BaseTooltip.Trigger.Props<unknown>, "children" | "className" | "render"> & {
+export declare function Root<Payload = unknown>(props: BaseTooltip.Root.Props<Payload>): import("react").JSX.Element;
+/** Opens the tooltip on hover or focus. Pass asChild to give this behavior to your own element, like your app's Button. */
+export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseTooltip.Trigger.Props<unknown>, "className" | "render"> & {
     className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseTooltip.Popup>, 'className'> & {
     className?: string;
 } & Pick<BaseTooltip.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseTooltip.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & StyleProps;
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
-export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps & StyleProps): import("react").JSX.Element;
+export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps): import("react").JSX.Element;
 export declare const PopupText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { asChildRendering } from "../../utils/asChild.js";
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 import { forwardRef } from 'react';
 /**
- * Wrap the target element with OpenHandler and keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
+ * OpenButton renders its own trigger button; pass asChild to make your own target element the trigger instead. Keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
  *
  * @example Complete composition
  * import { Button, Tooltip } from '@central-ui/react'
@@ -10,9 +11,9 @@ import { forwardRef } from 'react';
  * function Example() {
  *   return (
  *     <Tooltip.Root>
- *       <Tooltip.OpenHandler>
+ *       <Tooltip.OpenButton asChild>
  *         <Button.default variant="secondary">Delivery information</Button.default>
- *       </Tooltip.OpenHandler>
+ *       </Tooltip.OpenButton>
  *       <Tooltip.Popup>
  *         <Tooltip.PopupText>Usually arrives within three days.</Tooltip.PopupText>
  *         <Tooltip.Arrow />
@@ -22,15 +23,18 @@ import { forwardRef } from 'react';
  * }
  *
  * @example Place help below its target
- * // Keep the same OpenHandler and Root.
+ * // Keep the same OpenButton and Root.
  * ;<Tooltip.Popup side="bottom">
  *   <Tooltip.PopupText>Delivery details</Tooltip.PopupText>
  * </Tooltip.Popup>
  */
-export const Root = BaseTooltip.Root;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const OpenHandler = forwardRef(function OpenHandler({ children, ...props }, ref) {
-    return _jsx(BaseTooltip.Trigger, { ...props, ref: ref, render: children });
+export function Root(props) {
+    return _jsx(BaseTooltip.Root, { ...props });
+}
+/** Opens the tooltip on hover or focus. Pass asChild to give this behavior to your own element, like your app's Button. */
+export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+    const rendering = asChildRendering({ asChild, children, component: 'tooltip-openbutton', disableStyle });
+    return _jsx(BaseTooltip.Trigger, { ...props, ref: ref, ...rendering });
 });
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side = 'top', sideOffset = 8, align = 'start', alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }) {
@@ -42,10 +46,9 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     ? (state) => ({ ...baseStyle, ...style(state) })
                     : { ...baseStyle, ...style } }) }) }));
 }
-export const PopupText = forwardRef(function PopupText({ disableStyle, className, ...props }, ref) {
+export const PopupText = /* @__PURE__ */ forwardRef(function PopupText({ disableStyle, className, ...props }, ref) {
     return (_jsx("span", { ...props, ref: ref, "data-component": "tooltip-popuptext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Arrow = forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
     return (_jsxs(BaseTooltip.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "tooltip-arrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("path", { 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", "data-component": "tooltip-arrow-1" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "tooltip-arrow-2" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "tooltip-arrow-3" })] }));
 });
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,154 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
+import type { Step as JoyrideStep } from 'react-joyride';
+import type { ComponentProps, ReactElement, ReactNode, SVGProps } from 'react';
+/**
+ * A guided tour that highlights elements one by one, each with a popup next to it.
+ * Root holds the steps (which element, in which order); Popup holds what every popup shows.
+ * Write the popup's frame and buttons once, and put what differs per step in a Content
+ * with the step's `value`, like Tabs.Content. Back/Next/Done/Skip/Close are styled buttons that show only when they can act.
+ *
+ * @example Complete composition, opened from a button
+ * import { Button, Tour } from '@central-ui/react'
+ *
+ * function Example() {
+ *   const [open, setOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button.default onClick={() => setOpen(true)}>Take the tour</Button.default>
+ *       <div id="search">…</div>
+ *       <div id="filters">…</div>
+ *
+ *       <Tour.Root
+ *         steps={[
+ *           { value: 'search', target: '#search' },
+ *           { value: 'filters', target: '#filters' },
+ *         ]}
+ *         open={open}
+ *         onOpenChange={setOpen}
+ *       >
+ *         <Tour.Popup>
+ *           <Tour.Content value="search">
+ *             <Tour.Title>Search</Tour.Title>
+ *             <Tour.Description>Find any order fast.</Tour.Description>
+ *           </Tour.Content>
+ *           <Tour.Content value="filters">
+ *             <Tour.Title>Filters</Tour.Title>
+ *             <Tour.Description>Narrow the results.</Tour.Description>
+ *           </Tour.Content>
+ *           <Tour.Progress />
+ *           <Tour.BackButton>Back</Tour.BackButton>
+ *           <Tour.NextButton>Next</Tour.NextButton>
+ *           <Tour.DoneButton>Done</Tour.DoneButton>
+ *         </Tour.Popup>
+ *       </Tour.Root>
+ *     </>
+ *   )
+ * }
+ *
+ * @example Start on its own as soon as the page mounts, with no trigger button
+ * // Uncontrolled: defaultOpen starts the tour when Root mounts, and Root closes it itself.
+ * // Mount Root conditionally (e.g. only for users who haven't seen it) to show it once.
+ * ;<Tour.Root steps={steps} defaultOpen onOpenChange={(open) => { if (!open) markTourSeen() }}>
+ *   <Tour.Popup>…</Tour.Popup>
+ * </Tour.Root>
+ *
+ * @example Content only one step has, like a video
+ * // Anything inside a Content shows only on its step; anything outside shows on every step.
+ * ;<Tour.Content value="filters">
+ *   <Tour.Title>Filters</Tour.Title>
+ *   <video src="/filters.mp4" autoPlay muted />
+ * </Tour.Content>
+ *
+ * @example Let users click the highlighted element during a step
+ * ;<Tour.Root steps={[{ value: 'upload', target: '#upload', interactive: true }]}>
+ */
+export declare function Root(props: {
+    /**
+     * The tour's stops, in order. Each `value` pairs with the Content of the same value,
+     * and `target` is the element to highlight, as a CSS selector or an element.
+     * Set `interactive` to let users click the highlighted element during that step,
+     * e.g. a "try it now" step; otherwise clicks on it are blocked so a click can't navigate away mid-tour.
+     */
+    steps: readonly ({
+        value: string;
+        interactive?: boolean;
+    } & Pick<JoyrideStep, 'target'>)[];
+    /** Whether the tour is showing. Use with onOpenChange to start it from your own button. */
+    open?: boolean;
+    /**
+     * Whether the tour starts as soon as Root mounts, when `open` isn't controlled.
+     * Use it for tours that start on their own, like a first visit.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the tour starts or ends, including when it ends by Close, Skip, Done, or the Escape key. */
+    onOpenChange?: (open: boolean) => void;
+    /** The `value` of the step showing. Use with onStepChange to control the step yourself. */
+    step?: string;
+    /**
+     * The `value` of the step the tour starts on, when `step` isn't controlled.
+     * @default the first step's value
+     */
+    defaultStep?: string;
+    /** Called with the next step's `value` whenever the tour moves to another step. */
+    onStepChange?: (step: string) => void;
+    /** The Popup. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+type PopupPlacement = {
+    side: 'top' | 'bottom' | 'left' | 'right';
+    align: 'start' | 'center' | 'end';
+};
+/**
+ * The box next to the highlighted element, shown on every step. Write the shared frame and buttons here once.
+ * `side` and `align` are where it prefers to sit; Joyride flips it when that side has no room, so it never leaves the screen.
+ */
+export declare function Popup({ disableStyle, className, side, align, ...props }: ComponentProps<'div'> & StyleProps & {
+    /**
+     * The side of the highlighted element the popup prefers.
+     * @default 'bottom'
+     */
+    side?: PopupPlacement['side'];
+    /**
+     * How the popup lines up along that side.
+     * @default 'center'
+     */
+    align?: PopupPlacement['align'];
+}): import("react").JSX.Element;
+/** Shows its children only while its step is showing, like Tabs.Content. Put anything specific to one step here. */
+export declare function Content({ disableStyle, className, value, ...props }: ComponentProps<'div'> & StyleProps & {
+    /** The `value` of the step this content belongs to, matching one of Root's steps. */
+    value: string;
+}): import("react").JSX.Element | null;
+export declare function Title({ disableStyle, className, ...props }: ComponentProps<'h2'> & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
+/** Shows the position in the tour, like "2 of 5". Pass a function as children to word it differently, e.g. for another language. */
+export declare function Progress({ disableStyle, className, children, ...props }: Omit<ComponentProps<'p'>, 'children'> & StyleProps & {
+    children?: (progress: {
+        step: number;
+        total: number;
+    }) => ReactNode;
+}): import("react").JSX.Element;
+type ButtonProps = ComponentProps<'button'> & AsChildProps & StyleProps;
+/** Goes back one step, styled like a secondary Button. Not rendered on the first step, where there's nothing to go back to. Pass asChild to give this behavior to your own button instead. */
+export declare function BackButton(props: ButtonProps): import("react").JSX.Element | null;
+/** Goes to the next step, styled like a primary Button. Not rendered on the last step; DoneButton takes its place there. Pass asChild to give this behavior to your own button instead. */
+export declare function NextButton(props: ButtonProps): import("react").JSX.Element | null;
+/** Finishes the tour, styled like a primary Button. Rendered only on the last step, in NextButton's place. Pass asChild to give this behavior to your own button instead. */
+export declare function DoneButton(props: ButtonProps): import("react").JSX.Element | null;
+/** Ends the tour early, styled like a tertiary Button. Not rendered on the last step, where Done already ends it. Pass asChild to give this behavior to your own button instead. */
+export declare function SkipButton(props: ButtonProps): import("react").JSX.Element | null;
+/**
+ * Ends the tour from any step: the round ✕ in the popup's top-right corner, like Dialog's.
+ * Icon-only: put just a CloseButtonIcon inside, never text like "Close". It is already named for screen readers by Joyride.
+ * Pass asChild to give this behavior to your own button instead.
+ */
+export declare function CloseButton(props: ButtonProps): import("react").JSX.Element;
+/** A default ✕ icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
+export declare function CloseButtonIcon({ disableStyle, children, className, ...props }: SVGProps<SVGSVGElement> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child only to replace it. */
+    children?: ReactElement<SVGProps<SVGSVGElement>>;
+}): import("react").FunctionComponentElement<any>;
+export {};

package/dist/components/tour/index.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { asChildStyleAttributes } from "../../utils/asChild.js";
+import { Joyride, ACTIONS, EVENTS, STATUS } from 'react-joyride';
+import { cloneElement, createContext, useContext, useLayoutEffect, useState, } from 'react';
+import { X } from "../../utils/icons.js";
+import { twMerge } from 'tailwind-merge';
+/**
+ * A guided tour that highlights elements one by one, each with a popup next to it.
+ * Root holds the steps (which element, in which order); Popup holds what every popup shows.
+ * Write the popup's frame and buttons once, and put what differs per step in a Content
+ * with the step's `value`, like Tabs.Content. Back/Next/Done/Skip/Close are styled buttons that show only when they can act.
+ *
+ * @example Complete composition, opened from a button
+ * import { Button, Tour } from '@central-ui/react'
+ *
+ * function Example() {
+ *   const [open, setOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button.default onClick={() => setOpen(true)}>Take the tour</Button.default>
+ *       <div id="search">…</div>
+ *       <div id="filters">…</div>
+ *
+ *       <Tour.Root
+ *         steps={[
+ *           { value: 'search', target: '#search' },
+ *           { value: 'filters', target: '#filters' },
+ *         ]}
+ *         open={open}
+ *         onOpenChange={setOpen}
+ *       >
+ *         <Tour.Popup>
+ *           <Tour.Content value="search">
+ *             <Tour.Title>Search</Tour.Title>
+ *             <Tour.Description>Find any order fast.</Tour.Description>
+ *           </Tour.Content>
+ *           <Tour.Content value="filters">
+ *             <Tour.Title>Filters</Tour.Title>
+ *             <Tour.Description>Narrow the results.</Tour.Description>
+ *           </Tour.Content>
+ *           <Tour.Progress />
+ *           <Tour.BackButton>Back</Tour.BackButton>
+ *           <Tour.NextButton>Next</Tour.NextButton>
+ *           <Tour.DoneButton>Done</Tour.DoneButton>
+ *         </Tour.Popup>
+ *       </Tour.Root>
+ *     </>
+ *   )
+ * }
+ *
+ * @example Start on its own as soon as the page mounts, with no trigger button
+ * // Uncontrolled: defaultOpen starts the tour when Root mounts, and Root closes it itself.
+ * // Mount Root conditionally (e.g. only for users who haven't seen it) to show it once.
+ * ;<Tour.Root steps={steps} defaultOpen onOpenChange={(open) => { if (!open) markTourSeen() }}>
+ *   <Tour.Popup>…</Tour.Popup>
+ * </Tour.Root>
+ *
+ * @example Content only one step has, like a video
+ * // Anything inside a Content shows only on its step; anything outside shows on every step.
+ * ;<Tour.Content value="filters">
+ *   <Tour.Title>Filters</Tour.Title>
+ *   <video src="/filters.mp4" autoPlay muted />
+ * </Tour.Content>
+ *
+ * @example Let users click the highlighted element during a step
+ * ;<Tour.Root steps={[{ value: 'upload', target: '#upload', interactive: true }]}>
+ */
+export function Root(props) {
+    // The step the tour starts on, and rewinds to when it ends
+    const firstStep = props.defaultStep ?? props.steps[0].value;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen ?? false);
+    const [uncontrolledStep, setUncontrolledStep] = useState(firstStep);
+    const [placement, setPlacement] = useState({
+        side: 'bottom',
+        align: 'center',
+    });
+    // Controlled props win over the internal state, like Base UI's open and value
+    const isOpen = props.open ?? uncontrolledOpen;
+    const currentStep = props.step ?? uncontrolledStep;
+    // Joyride counts steps by position, so the current value becomes its index
+    const stepIndex = props.steps.findIndex((step) => step.value === currentStep);
+    // Joyride places by one word, so Popup's side and align become e.g. 'left-start'
+    const joyridePlacement = placement.align === 'center'
+        ? placement.side
+        : `${placement.side}-${placement.align}`;
+    return (_jsx(RootContext.Provider, { value: { children: props.children, steps: props.steps, setPlacement }, children: _jsx(Joyride, { run: isOpen, stepIndex: stepIndex, steps: props.steps.map((step) => ({
+                target: step.target,
+                id: step.value,
+                // The popup's text lives in Content parts, not in data
+                content: null,
+                placement: joyridePlacement,
+                blockTargetInteraction: !step.interactive,
+            })), 
+            // Next moves straight to the following step, as in a classic guided tour
+            continuous: true, scrollToFirstStep: true, options: {
+                // Steps open directly, without a pulsing dot to click first
+                skipBeacon: true,
+                // A stray click on the dark overlay never ends the tour
+                overlayClickAction: false,
+                // Core layout, not overridable: the arrow matches Popover's and Tooltip's 20×10 size
+                arrowBase: 20,
+                arrowSize: 10,
+            }, tooltipComponent: PopupSlot, arrowComponent: Arrow, onEvent: (event) => {
+                // Ending the tour and rewinding it, so it restarts from the first step.
+                // Stopping `run` is what removes Joyride's overlay.
+                const end = () => {
+                    setUncontrolledOpen(false);
+                    props.onOpenChange?.(false);
+                    setUncontrolledStep(firstStep);
+                    props.onStepChange?.(firstStep);
+                };
+                // Ending by Skip, Close, or Escape
+                if (event.status === STATUS.SKIPPED || event.action === ACTIONS.CLOSE)
+                    return end();
+                // Moving to the next or previous step, or past a target missing from the page.
+                // In controlled mode Joyride waits for the new step, so moving past the last one (Done) must end the tour here.
+                if (event.type === EVENTS.STEP_AFTER ||
+                    event.type === EVENTS.TARGET_NOT_FOUND) {
+                    const nextStep = props.steps[event.index + (event.action === ACTIONS.PREV ? -1 : 1)];
+                    if (!nextStep)
+                        return end();
+                    setUncontrolledStep(nextStep.value);
+                    props.onStepChange?.(nextStep.value);
+                }
+            } }) }));
+}
+const RootContext = /* @__PURE__ */ createContext(null);
+/**
+ * Popover's arrow, drawn in Joyride's arrow slot. Its white base strip covers the popup's border where they meet,
+ * and it overlaps the popup by 2px, so the arrow reads as part of the popup with the border running around both.
+ */
+function Arrow(arrow) {
+    // The SVG points up, which fits a popup sitting below its target; other sides rotate it
+    const rotation = (() => {
+        if (arrow.placement.startsWith('top'))
+            return 180;
+        if (arrow.placement.startsWith('left'))
+            return 90;
+        if (arrow.placement.startsWith('right'))
+            return -90;
+        return 0;
+    })();
+    return (_jsxs("svg", { "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10", "data-component": "tour-arrow", "data-side": arrow.placement.split('-')[0], className: "pointer-events-none fill-white", 
+        // Core layout, not overridable: centered in Joyride's slot, rotated to its side, nudged 2px into the popup
+        style: {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: `translate(-50%, -50%) rotate(${rotation}deg) translateY(2px)`,
+        }, children: [_jsx("path", { 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", "data-component": "tour-arrow-1", className: "fill-inherit" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "tour-arrow-2", className: "fill-neutral-200" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "tour-arrow-3", className: "fill-inherit" })] }));
+}
+const StepContext = /* @__PURE__ */ createContext(null);
+/** Joyride renders this in its popup slot; it shows Root's children with the current step's state. */
+function PopupSlot(joyride) {
+    const root = useContext(RootContext);
+    if (!root)
+        throw new Error('Tour parts must be inside Tour.Root');
+    return (_jsx(StepContext.Provider, { value: { value: root.steps[joyride.index].value, joyride }, children: root.children }));
+}
+function useStep(part) {
+    const step = useContext(StepContext);
+    if (!step)
+        throw new Error(`Tour.${part} must be inside Tour.Popup`);
+    return step;
+}
+/**
+ * The box next to the highlighted element, shown on every step. Write the shared frame and buttons here once.
+ * `side` and `align` are where it prefers to sit; Joyride flips it when that side has no room, so it never leaves the screen.
+ */
+export function Popup({ disableStyle, className, side = 'bottom', align = 'center', ...props }) {
+    const step = useStep('Popup');
+    const root = useContext(RootContext);
+    // Handing the preferred placement to Root, which passes it to Joyride
+    useLayoutEffect(() => {
+        root?.setPlacement({ side, align });
+    }, [root?.setPlacement, side, align]);
+    return (_jsx("div", { ...props, ...step.joyride.tooltipProps, "data-component": "tour-popup", "data-step": step.value, "data-first": step.joyride.index === 0 ? '' : undefined, "data-last": step.joyride.isLastStep ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle &&
+            'relative flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3 rounded-xl border border-neutral-200 bg-white p-4 text-neutral-950 shadow-lg', className) }));
+}
+/** Shows its children only while its step is showing, like Tabs.Content. Put anything specific to one step here. */
+export function Content({ disableStyle, className, value, ...props }) {
+    const step = useStep('Content');
+    if (step.value !== value)
+        return null;
+    return (_jsx("div", { ...props, "data-component": "tour-content", "data-step": value, "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle && 'flex flex-col gap-1', className) }));
+}
+export function Title({ disableStyle, className, ...props }) {
+    return (_jsx("h2", { ...props, "data-component": "tour-title", "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle && 'text-sm font-semibold leading-5 text-neutral-950', className) }));
+}
+export function Description({ disableStyle, className, ...props }) {
+    return (_jsx("p", { ...props, "data-component": "tour-description", "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle && 'text-sm leading-5 text-neutral-600', className) }));
+}
+/** Shows the position in the tour, like "2 of 5". Pass a function as children to word it differently, e.g. for another language. */
+export function Progress({ disableStyle, className, children, ...props }) {
+    const step = useStep('Progress');
+    const progress = { step: step.joyride.index + 1, total: step.joyride.size };
+    return (_jsx("p", { ...props, "data-component": "tour-progress", "data-last": step.joyride.isLastStep ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle && 'text-xs tabular-nums text-neutral-500', className), children: children ? children(progress) : `${progress.step} of ${progress.total}` }));
+}
+// Shared by every tour button: Polaris Button's base look at its medium size.
+const buttonBase = 'relative flex w-fit min-h-7 cursor-pointer items-center justify-center gap-1.5 rounded-full px-4 py-1 text-[0.8rem] leading-4 font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none';
+// Polaris Button's primary variant, neutral tone
+const primaryButton = 'bg-neutral-950 text-white shadow-md hover:bg-black hover:text-neutral-200 focus-visible:bg-black active:bg-black [background-image:radial-gradient(50%_50%_at_50%_0%,_#ffffff33_0%,_#ffffff00_100%),_radial-gradient(49.59%_37.11%_at_50.41%_101.56%,_#ffffff26_0%,_#ffffff00_66.46%)] inset-shadow-[0rem_0rem_.25rem_.0625rem_#101010,0rem_0rem_.25rem_.125rem_#ffffff1a,0rem_0rem_.75rem_-.375rem_#ffffffbf]';
+// Polaris Button's secondary variant, neutral tone
+const secondaryButton = 'bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300';
+// Polaris Button's tertiary variant, neutral tone
+const tertiaryButton = 'bg-transparent text-neutral-950 hover:bg-black/8 focus-visible:bg-black/8 active:bg-black/13';
+/** Spreads Joyride's behavior for one button, keeping the user's own onClick too. With asChild, the consumer's child receives that behavior instead of this part's styled button. */
+function TourButton({ asChild, joyrideProps, part, defaultClassName, disableStyle, className, onClick, children, ...props }) {
+    const behaviorProps = {
+        ...props,
+        ...joyrideProps,
+        onClick: (event) => {
+            onClick?.(event);
+            joyrideProps.onClick(event);
+        },
+    };
+    // Giving the behavior to the consumer's child, which keeps its own appearance and onClick
+    if (asChild) {
+        const child = children;
+        return cloneElement(child, {
+            ...behaviorProps,
+            className: twMerge(child.props.className, className),
+            onClick: (event) => {
+                child.props.onClick?.(event);
+                behaviorProps.onClick(event);
+            },
+        });
+    }
+    return (_jsx("button", { type: "button", ...behaviorProps, ...asChildStyleAttributes({ asChild, component: `tour-${part}`, disableStyle }), className: twMerge(!disableStyle && defaultClassName, className), children: children }));
+}
+/** Goes back one step, styled like a secondary Button. Not rendered on the first step, where there's nothing to go back to. Pass asChild to give this behavior to your own button instead. */
+export function BackButton(props) {
+    const step = useStep('BackButton');
+    if (step.joyride.index === 0)
+        return null;
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.backProps, part: "backbutton", defaultClassName: `${buttonBase} ${secondaryButton}` }));
+}
+/** Goes to the next step, styled like a primary Button. Not rendered on the last step; DoneButton takes its place there. Pass asChild to give this behavior to your own button instead. */
+export function NextButton(props) {
+    const step = useStep('NextButton');
+    if (step.joyride.isLastStep)
+        return null;
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.primaryProps, part: "nextbutton", defaultClassName: `${buttonBase} ${primaryButton}` }));
+}
+/** Finishes the tour, styled like a primary Button. Rendered only on the last step, in NextButton's place. Pass asChild to give this behavior to your own button instead. */
+export function DoneButton(props) {
+    const step = useStep('DoneButton');
+    if (!step.joyride.isLastStep)
+        return null;
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.primaryProps, part: "donebutton", defaultClassName: `${buttonBase} ${primaryButton}` }));
+}
+/** Ends the tour early, styled like a tertiary Button. Not rendered on the last step, where Done already ends it. Pass asChild to give this behavior to your own button instead. */
+export function SkipButton(props) {
+    const step = useStep('SkipButton');
+    if (step.joyride.isLastStep)
+        return null;
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.skipProps, part: "skipbutton", defaultClassName: `${buttonBase} ${tertiaryButton}` }));
+}
+/**
+ * Ends the tour from any step: the round ✕ in the popup's top-right corner, like Dialog's.
+ * Icon-only: put just a CloseButtonIcon inside, never text like "Close". It is already named for screen readers by Joyride.
+ * Pass asChild to give this behavior to your own button instead.
+ */
+export function CloseButton(props) {
+    const step = useStep('CloseButton');
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.closeProps, part: "closebutton", defaultClassName: "absolute top-4 right-4 flex h-7 aspect-square w-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-neutral-200 bg-white p-0 text-neutral-950 shadow-sm hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-200 active:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500" }));
+}
+/** A default ✕ icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
+export function CloseButtonIcon({ disableStyle, children, className, ...props }) {
+    return cloneElement(children ?? _jsx(X, {}), {
+        ...props,
+        'aria-hidden': true,
+        ...{
+            'data-component': 'tour-closebuttonicon',
+            'data-style-disabled': disableStyle ? '' : undefined,
+        },
+        className: twMerge(!disableStyle && 'h-4 w-fit shrink-0 text-inherit', children?.props.className, className),
+    });
+}

package/dist/index.d.ts

@@ -40,11 +40,14 @@ export * as Spinner from './components/spinner/index.tsx';
 export * as Table from './components/table/index.tsx';
 export * as Chip from './components/chip/index.tsx';
 export * as TextLink from './components/textlink/index.tsx';
-export type { ToneProps } from './types/Tone.ts';
+export * as Tour from './components/tour/index.tsx';
+export * as BarChart from './components/barchart/index.tsx';
+export * as HorizontalBarChart from './components/horizontalbarchart/index.tsx';
+export * as LineChart from './components/linechart/index.tsx';
+export * as DonutChart from './components/donutchart/index.tsx';
 export { useVirtualizedCombobox, FilteredItemsSync as ComboboxFilteredItemsSync, } from './utils/virtualization/useVirtualizedCombobox.ts';
 export type { UseVirtualizedComboboxOptions } from './utils/virtualization/useVirtualizedCombobox.ts';
 export { useVirtualizedAutocomplete, FilteredItemsSync as AutocompleteFilteredItemsSync, } from './utils/virtualization/useVirtualizedAutocomplete.ts';
 export type { UseVirtualizedAutocompleteOptions } from './utils/virtualization/useVirtualizedAutocomplete.ts';
 export { useVirtualizedTable } from './utils/virtualization/useVirtualizedTable.ts';
 export type { UseVirtualizedTableOptions } from './utils/virtualization/useVirtualizedTable.ts';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -40,7 +40,11 @@ export * as Spinner from "./components/spinner/index.js";
 export * as Table from "./components/table/index.js";
 export * as Chip from "./components/chip/index.js";
 export * as TextLink from "./components/textlink/index.js";
+export * as Tour from "./components/tour/index.js";
+export * as BarChart from "./components/barchart/index.js";
+export * as HorizontalBarChart from "./components/horizontalbarchart/index.js";
+export * as LineChart from "./components/linechart/index.js";
+export * as DonutChart from "./components/donutchart/index.js";
 export { useVirtualizedCombobox, FilteredItemsSync as ComboboxFilteredItemsSync, } from "./utils/virtualization/useVirtualizedCombobox.js";
 export { useVirtualizedAutocomplete, FilteredItemsSync as AutocompleteFilteredItemsSync, } from "./utils/virtualization/useVirtualizedAutocomplete.js";
 export { useVirtualizedTable } from "./utils/virtualization/useVirtualizedTable.js";
-//# sourceMappingURL=index.js.map

package/dist/types/Icon.d.ts

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+/** Props forwarded to built-in SVG icons, without importing the full icon catalog into consumer types. */
+export interface SVGIconProps extends SVGProps<SVGSVGElement> {
+    /** Set the icon's width and height together; explicit width or height takes precedence. */
+    size?: string | number;
+    /** @deprecated Use nonScalingStroke instead. */
+    absoluteStrokeWidth?: boolean;
+    /** Keep the stroke thickness steady when changing the icon size. */
+    nonScalingStroke?: boolean;
+}

package/dist/types/Icon.js

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

package/dist/types/Style.d.ts

@@ -11,4 +11,3 @@ export type StyleProps = {
      */
     disableStyle?: boolean;
 };
-//# sourceMappingURL=Style.d.ts.map

package/dist/types/Style.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=Style.js.map

package/dist/types/Tone.d.ts

@@ -1,4 +1,3 @@
 export type ToneProps = {
     tone?: 'neutral' | 'valid' | 'invalid';
 };
-//# sourceMappingURL=Tone.d.ts.map

package/dist/types/Tone.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=Tone.js.map

package/dist/types/Validation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Email is required']` also shows that message in Error. Same for `'success'` and Success.
+ * Error and success never coexist, since a field holds one validation state at a time.
+ */
+export type Validation = 'error' | 'success' | readonly ['error' | 'success', string];
+export type ValidationProps = {
+    /**
+     * The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Email is required']` also shows that message in Error. Same for `'success'` and Success.
+     * Omit it for a neutral field.
+     */
+    validation?: Validation;
+};