@moduix/solid-tailwind 1.0.0

package/dist/components/tour/Tour.js

@@ -0,0 +1,274 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { Tour, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "@ark-ui/solid/tour";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close tour';
+function TourRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Tour.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function TourBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Tour.Backdrop, mergeProps({
+                "data-slot": "tour-backdrop",
+                get ["class"] () {
+                    return cn('z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] bg-overlay backdrop-blur-xs data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function TourSpotlight(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Tour.Spotlight, mergeProps({
+                "data-slot": "tour-spotlight",
+                get ["class"] () {
+                    return cn('z-[calc(50+var(--tour-layer,0))] ring-2 ring-ring', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function TourPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Tour.Positioner, mergeProps({
+                "data-slot": "tour-positioner",
+                get ["class"] () {
+                    return cn('!z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0 data-[type=dialog]:fixed data-[type=dialog]:inset-0 data-[type=dialog]:grid data-[type=dialog]:place-items-center data-[type=dialog]:overflow-y-auto data-[type=dialog]:overscroll-contain data-[type=dialog]:p-4 data-[type=floating]:fixed data-[type=floating]:max-h-[calc(100dvh-3rem)] data-[type=floating]:max-w-[calc(100vw-3rem)] data-[type=floating]:data-[placement=bottom]:start-1/2 data-[type=floating]:data-[placement=bottom]:bottom-6 data-[type=floating]:data-[placement=bottom]:-translate-x-1/2 data-[type=floating]:data-[placement=bottom-end]:end-6 data-[type=floating]:data-[placement=bottom-end]:bottom-6 data-[type=floating]:data-[placement=bottom-start]:start-6 data-[type=floating]:data-[placement=bottom-start]:bottom-6 data-[type=floating]:data-[placement=center]:inset-1/2 data-[type=floating]:data-[placement=center]:-translate-x-1/2 data-[type=floating]:data-[placement=center]:-translate-y-1/2 data-[type=floating]:data-[placement=left]:start-6 data-[type=floating]:data-[placement=left]:top-1/2 data-[type=floating]:data-[placement=left]:-translate-y-1/2 data-[type=floating]:data-[placement=left-end]:start-6 data-[type=floating]:data-[placement=left-end]:bottom-6 data-[type=floating]:data-[placement=left-start]:start-6 data-[type=floating]:data-[placement=left-start]:top-6 data-[type=floating]:data-[placement=right]:end-6 data-[type=floating]:data-[placement=right]:top-1/2 data-[type=floating]:data-[placement=right]:-translate-y-1/2 data-[type=floating]:data-[placement=right-end]:end-6 data-[type=floating]:data-[placement=right-end]:bottom-6 data-[type=floating]:data-[placement=right-start]:end-6 data-[type=floating]:data-[placement=right-start]:top-6 data-[type=floating]:data-[placement=top]:start-1/2 data-[type=floating]:data-[placement=top]:top-6 data-[type=floating]:data-[placement=top]:-translate-x-1/2 data-[type=floating]:data-[placement=top-end]:end-6 data-[type=floating]:data-[placement=top-end]:top-6 data-[type=floating]:data-[placement=top-start]:start-6 data-[type=floating]:data-[placement=top-start]:top-6', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function TourContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tour.Content, mergeProps({
+        "data-slot": "tour-content",
+        get ["class"] () {
+            return cn('relative z-60 flex max-h-[min(24rem,var(--available-height,100dvh))] w-80 max-w-[min(calc(100vw-2rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col gap-1 overflow-visible rounded-lg border border-border bg-popover p-5 text-popover-foreground shadow-lg outline-0 has-[>[data-slot=tour-body]]:grid has-[>[data-slot=tour-body]]:grid-rows-[minmax(0,1fr)_auto] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open data-[type=dialog]:w-[min(26rem,calc(100vw-2rem))] data-[type=floating]:w-[min(22rem,calc(100vw-2rem))] motion-reduce:animate-none', local.class);
+        }
+    }, others));
+}
+function TourArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Tour.Arrow, mergeProps({
+        "data-slot": "tour-arrow",
+        get ["class"] () {
+            return cn('!size-2.5', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(TourArrowTip, {});
+        }
+    }));
+}
+function TourArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tour.ArrowTip, mergeProps({
+        "data-slot": "tour-arrow-tip",
+        get ["class"] () {
+            return cn('border-t border-l border-border !bg-popover', local.class);
+        }
+    }, others));
+}
+function TourTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tour.Title, mergeProps({
+        "data-slot": "tour-title",
+        get ["class"] () {
+            return cn('pe-6 text-md leading-6 font-semibold text-popover-foreground', local.class);
+        }
+    }, others));
+}
+function TourDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tour.Description, mergeProps({
+        "data-slot": "tour-description",
+        get ["class"] () {
+            return cn('text-sm leading-5 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function TourProgressText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tour.ProgressText, mergeProps({
+        "data-slot": "tour-progress-text",
+        get ["class"] () {
+            return cn('order-1 mt-2 text-xs leading-4 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function TourBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "tour-body",
+        get ["class"] () {
+            return cn('flex min-h-0 flex-col gap-1 overflow-auto', local.class);
+        }
+    }, others));
+}
+function TourCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Tour.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tour-close-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'absolute end-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-md leading-none text-muted-foreground outline-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [&>svg]:size-3 [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-popover-foreground', local.class);
+        }
+    }, others));
+}
+function TourCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Tour.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "tour-close-icon",
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL;
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return cn('absolute end-4 top-4 size-7 rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-popover-foreground', local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }))
+    }, others));
+}
+function TourControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tour.Control, mergeProps({
+        "data-slot": "tour-control",
+        get ["class"] () {
+            return cn('order-2 mt-3 flex flex-wrap justify-end gap-2', local.class);
+        }
+    }, others));
+}
+function TourActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Tour.ActionTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tour-action-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && "inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap text-foreground no-underline outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[type=close]:border-primary data-[type=close]:bg-primary data-[type=close]:text-primary-foreground data-[type=next]:border-primary data-[type=next]:bg-primary data-[type=next]:text-primary-foreground motion-reduce:transition-none [@media(hover:hover)]:[&:is([data-type='next'],[data-type='close']):not(:disabled):not([data-disabled]):hover]:border-[color-mix(in_oklab,var(--color-primary),black_12%)] [@media(hover:hover)]:[&:is([data-type='next'],[data-type='close']):not(:disabled):not([data-disabled]):hover]:bg-[color-mix(in_oklab,var(--color-primary),black_12%)] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent", local.class);
+        }
+    }, others));
+}
+const TourActions = Tour.Actions;
+function TourActionList(props) {
+    const [local] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tour.Actions, {
+        children: (actions)=>createComponent(For, {
+                get each () {
+                    return actions();
+                },
+                children: (action)=>createComponent(TourActionTrigger, {
+                        action: action,
+                        get ["class"] () {
+                            return local.class;
+                        }
+                    })
+            })
+    });
+}
+const Tour_Tour = Object.assign(TourRoot, {
+    Root: TourRoot,
+    Context: Tour.Context,
+    Backdrop: TourBackdrop,
+    Spotlight: TourSpotlight,
+    Positioner: TourPositioner,
+    Content: TourContent,
+    Arrow: TourArrow,
+    ArrowTip: TourArrowTip,
+    Title: TourTitle,
+    Description: TourDescription,
+    ProgressText: TourProgressText,
+    Body: TourBody,
+    CloseTrigger: TourCloseTrigger,
+    CloseIcon: TourCloseIcon,
+    Control: TourControl,
+    Actions: TourActions,
+    ActionList: TourActionList,
+    ActionTrigger: TourActionTrigger
+});
+export { Tour_Tour as Tour, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise };

package/dist/components/tour/Tour.jsx

@@ -0,0 +1,155 @@
+import { ark } from "@ark-ui/solid/factory";
+import { Tour, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "@ark-ui/solid/tour";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close tour';
+function TourRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Tour.Root lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Tour.Root>
+    </OverlayPortalProvider>;
+}
+function TourBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Tour.Backdrop data-slot="tour-backdrop" class={cn('z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] bg-overlay backdrop-blur-xs data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function TourSpotlight(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Tour.Spotlight data-slot="tour-spotlight" class={cn('z-[calc(50+var(--tour-layer,0))] ring-2 ring-ring', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function TourPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Tour.Positioner data-slot="tour-positioner" class={cn('!z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0 data-[type=dialog]:fixed data-[type=dialog]:inset-0 data-[type=dialog]:grid data-[type=dialog]:place-items-center data-[type=dialog]:overflow-y-auto data-[type=dialog]:overscroll-contain data-[type=dialog]:p-4 data-[type=floating]:fixed data-[type=floating]:max-h-[calc(100dvh-3rem)] data-[type=floating]:max-w-[calc(100vw-3rem)] data-[type=floating]:data-[placement=bottom]:start-1/2 data-[type=floating]:data-[placement=bottom]:bottom-6 data-[type=floating]:data-[placement=bottom]:-translate-x-1/2 data-[type=floating]:data-[placement=bottom-end]:end-6 data-[type=floating]:data-[placement=bottom-end]:bottom-6 data-[type=floating]:data-[placement=bottom-start]:start-6 data-[type=floating]:data-[placement=bottom-start]:bottom-6 data-[type=floating]:data-[placement=center]:inset-1/2 data-[type=floating]:data-[placement=center]:-translate-x-1/2 data-[type=floating]:data-[placement=center]:-translate-y-1/2 data-[type=floating]:data-[placement=left]:start-6 data-[type=floating]:data-[placement=left]:top-1/2 data-[type=floating]:data-[placement=left]:-translate-y-1/2 data-[type=floating]:data-[placement=left-end]:start-6 data-[type=floating]:data-[placement=left-end]:bottom-6 data-[type=floating]:data-[placement=left-start]:start-6 data-[type=floating]:data-[placement=left-start]:top-6 data-[type=floating]:data-[placement=right]:end-6 data-[type=floating]:data-[placement=right]:top-1/2 data-[type=floating]:data-[placement=right]:-translate-y-1/2 data-[type=floating]:data-[placement=right-end]:end-6 data-[type=floating]:data-[placement=right-end]:bottom-6 data-[type=floating]:data-[placement=right-start]:end-6 data-[type=floating]:data-[placement=right-start]:top-6 data-[type=floating]:data-[placement=top]:start-1/2 data-[type=floating]:data-[placement=top]:top-6 data-[type=floating]:data-[placement=top]:-translate-x-1/2 data-[type=floating]:data-[placement=top-end]:end-6 data-[type=floating]:data-[placement=top-end]:top-6 data-[type=floating]:data-[placement=top-start]:start-6 data-[type=floating]:data-[placement=top-start]:top-6', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function TourContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tour.Content data-slot="tour-content" class={cn('relative z-60 flex max-h-[min(24rem,var(--available-height,100dvh))] w-80 max-w-[min(calc(100vw-2rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col gap-1 overflow-visible rounded-lg border border-border bg-popover p-5 text-popover-foreground shadow-lg outline-0 has-[>[data-slot=tour-body]]:grid has-[>[data-slot=tour-body]]:grid-rows-[minmax(0,1fr)_auto] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open data-[type=dialog]:w-[min(26rem,calc(100vw-2rem))] data-[type=floating]:w-[min(22rem,calc(100vw-2rem))] motion-reduce:animate-none', local.class)} {...others}/>;
+}
+function TourArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Tour.Arrow data-slot="tour-arrow" class={cn('!size-2.5', local.class)} {...others}>
+      {resolvedChildren() ?? <TourArrowTip/>}
+    </Tour.Arrow>;
+}
+function TourArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tour.ArrowTip data-slot="tour-arrow-tip" class={cn('border-t border-l border-border !bg-popover', local.class)} {...others}/>;
+}
+function TourTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tour.Title data-slot="tour-title" class={cn('pe-6 text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others}/>;
+}
+function TourDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tour.Description data-slot="tour-description" class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+}
+function TourProgressText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tour.ProgressText data-slot="tour-progress-text" class={cn('order-1 mt-2 text-xs leading-4 text-muted-foreground', local.class)} {...others}/>;
+}
+function TourBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="tour-body" class={cn('flex min-h-0 flex-col gap-1 overflow-auto', local.class)} {...others}/>;
+}
+function TourCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Tour.CloseTrigger asChild={local.asChild} data-slot="tour-close-trigger" class={cn(!local.asChild && 'absolute end-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-md leading-none text-muted-foreground outline-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [&>svg]:size-3 [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-popover-foreground', local.class)} {...others}/>;
+}
+function TourCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Tour.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="tour-close-icon" aria-label={local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL} aria-labelledby={local['aria-labelledby']} class={cn('absolute end-4 top-4 size-7 rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-popover-foreground', local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} {...others}/>;
+}
+function TourControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tour.Control data-slot="tour-control" class={cn('order-2 mt-3 flex flex-wrap justify-end gap-2', local.class)} {...others}/>;
+}
+function TourActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Tour.ActionTrigger asChild={local.asChild} data-slot="tour-action-trigger" class={cn(!local.asChild && "inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap text-foreground no-underline outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[type=close]:border-primary data-[type=close]:bg-primary data-[type=close]:text-primary-foreground data-[type=next]:border-primary data-[type=next]:bg-primary data-[type=next]:text-primary-foreground motion-reduce:transition-none [@media(hover:hover)]:[&:is([data-type='next'],[data-type='close']):not(:disabled):not([data-disabled]):hover]:border-[color-mix(in_oklab,var(--color-primary),black_12%)] [@media(hover:hover)]:[&:is([data-type='next'],[data-type='close']):not(:disabled):not([data-disabled]):hover]:bg-[color-mix(in_oklab,var(--color-primary),black_12%)] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent", local.class)} {...others}/>;
+}
+const TourActions = Tour.Actions;
+function TourActionList(props) {
+    const [local] = splitProps(props, [
+        'class'
+    ]);
+    return <Tour.Actions>
+      {(actions)=><For each={actions()}>
+          {(action)=><TourActionTrigger action={action} class={local.class}/>}
+        </For>}
+    </Tour.Actions>;
+}
+const Tour_Tour = Object.assign(TourRoot, {
+    Root: TourRoot,
+    Context: Tour.Context,
+    Backdrop: TourBackdrop,
+    Spotlight: TourSpotlight,
+    Positioner: TourPositioner,
+    Content: TourContent,
+    Arrow: TourArrow,
+    ArrowTip: TourArrowTip,
+    Title: TourTitle,
+    Description: TourDescription,
+    ProgressText: TourProgressText,
+    Body: TourBody,
+    CloseTrigger: TourCloseTrigger,
+    CloseIcon: TourCloseIcon,
+    Control: TourControl,
+    Actions: TourActions,
+    ActionList: TourActionList,
+    ActionTrigger: TourActionTrigger
+});
+export { Tour_Tour as Tour, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise };

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

@@ -0,0 +1,2 @@
+export { Tour, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise, } from './Tour.js';
+export type { TourCloseIconProps, TourRootProps } from './Tour.js';

package/dist/components/tour/index.js

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

package/dist/components/tour/index.jsx

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

package/dist/components/tree-view/TreeView.d.ts

@@ -0,0 +1,58 @@
+import { type HTMLArkProps } from '@ark-ui/solid/factory';
+import { TreeView as TreeViewPrimitive, createFileTreeCollection, createTreeCollection, type TreeNode, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, type TreeViewNodeState, type TreeViewRootComponent, type TreeViewRootProviderComponent, useTreeView, useTreeViewContext, useTreeViewNodeContext } from '@ark-ui/solid/tree-view';
+import type { Accessor, ComponentProps, JSX } from 'solid-js';
+declare const TreeViewRoot: TreeViewRootComponent;
+declare const TreeViewRootProvider: TreeViewRootProviderComponent;
+declare function TreeViewLabel(props: ComponentProps<typeof TreeViewPrimitive.Label>): JSX.Element;
+declare function TreeViewTree(props: ComponentProps<typeof TreeViewPrimitive.Tree>): JSX.Element;
+declare function TreeViewBranch(props: ComponentProps<typeof TreeViewPrimitive.Branch>): JSX.Element;
+declare function TreeViewBranchControl(props: ComponentProps<typeof TreeViewPrimitive.BranchControl>): JSX.Element;
+declare function TreeViewBranchTrigger(props: ComponentProps<typeof TreeViewPrimitive.BranchTrigger>): JSX.Element;
+declare function TreeViewBranchIndicator(props: ComponentProps<typeof TreeViewPrimitive.BranchIndicator>): JSX.Element;
+declare function TreeViewBranchText(props: ComponentProps<typeof TreeViewPrimitive.BranchText>): JSX.Element;
+declare function TreeViewBranchContent(props: ComponentProps<typeof TreeViewPrimitive.BranchContent>): JSX.Element;
+declare function TreeViewBranchIndentGuide(props: ComponentProps<typeof TreeViewPrimitive.BranchIndentGuide>): JSX.Element;
+declare function TreeViewItem(props: ComponentProps<typeof TreeViewPrimitive.Item>): JSX.Element;
+declare function TreeViewItemText(props: ComponentProps<typeof TreeViewPrimitive.ItemText>): JSX.Element;
+declare function TreeViewItemIndicator(props: ComponentProps<typeof TreeViewPrimitive.ItemIndicator>): JSX.Element;
+declare function TreeViewNodeCheckbox(props: ComponentProps<typeof TreeViewPrimitive.NodeCheckbox>): JSX.Element;
+type TreeViewNodeCheckboxIndicatorProps = ComponentProps<typeof TreeViewPrimitive.NodeCheckboxIndicator> & Omit<HTMLArkProps<'span'>, 'children'>;
+declare function TreeViewNodeCheckboxIndicator(props: TreeViewNodeCheckboxIndicatorProps): JSX.Element;
+declare function TreeViewNodeRenameInput(props: ComponentProps<typeof TreeViewPrimitive.NodeRenameInput>): JSX.Element;
+declare const TreeViewNodeProvider: typeof TreeViewPrimitive.NodeProvider;
+type TreeViewNodeRenderProps<T extends TreeNode> = {
+    indexPath: number[];
+    node: T;
+    state: Accessor<TreeViewNodeState>;
+};
+type TreeViewNodeProps<T extends TreeNode> = {
+    children: (props: TreeViewNodeRenderProps<T>) => JSX.Element;
+    indexPath: number[];
+    node: T;
+};
+declare function TreeViewNode<T extends TreeNode>(props: TreeViewNodeProps<T>): JSX.Element;
+type TreeViewComponent = typeof TreeViewRoot & {
+    Root: typeof TreeViewRoot;
+    RootProvider: typeof TreeViewRootProvider;
+    Context: typeof TreeViewPrimitive.Context;
+    NodeContext: typeof TreeViewPrimitive.NodeContext;
+    Label: typeof TreeViewLabel;
+    Tree: typeof TreeViewTree;
+    Node: typeof TreeViewNode;
+    NodeProvider: typeof TreeViewNodeProvider;
+    Branch: typeof TreeViewBranch;
+    BranchControl: typeof TreeViewBranchControl;
+    BranchTrigger: typeof TreeViewBranchTrigger;
+    BranchIndicator: typeof TreeViewBranchIndicator;
+    BranchText: typeof TreeViewBranchText;
+    BranchContent: typeof TreeViewBranchContent;
+    BranchIndentGuide: typeof TreeViewBranchIndentGuide;
+    Item: typeof TreeViewItem;
+    ItemText: typeof TreeViewItemText;
+    ItemIndicator: typeof TreeViewItemIndicator;
+    NodeCheckbox: typeof TreeViewNodeCheckbox;
+    NodeCheckboxIndicator: typeof TreeViewNodeCheckboxIndicator;
+    NodeRenameInput: typeof TreeViewNodeRenameInput;
+};
+declare const TreeView: TreeViewComponent;
+export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext, type TreeViewLoadChildrenDetails, type TreeViewNodeProps, type TreeViewNodeRenderProps, type TreeViewNodeState, type TreeViewNodeProviderProps, };