@moduix/solid 1.0.0

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,193 @@
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { Tooltip, useTooltip, useTooltipContext } from "@ark-ui/solid/tooltip";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import Tooltip_module from "./Tooltip.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
+function assignDisabledTriggerRef(ref, element) {
+    if ('function' == typeof ref) ref(element);
+}
+function TooltipRoot(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(Tooltip.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function TooltipRootProvider(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(Tooltip.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function TooltipTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Tooltip.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tooltip-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && Tooltip_module.trigger, local.class);
+        }
+    }, others));
+}
+function TooltipDisabledTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'ref',
+        'tabIndex'
+    ]);
+    return createComponent(Tooltip.Trigger, mergeProps(others, {
+        asChild: (triggerProps)=>{
+            const primitiveProps = triggerProps();
+            const primitiveRef = primitiveProps.ref;
+            return (()=>{
+                var _el$ = _tmpl$();
+                use((element)=>{
+                    assignDisabledTriggerRef(primitiveRef, element);
+                    assignDisabledTriggerRef(local.ref, element);
+                }, _el$);
+                spread(_el$, mergeProps(primitiveProps, {
+                    "data-slot": "tooltip-disabled-trigger",
+                    get tabIndex () {
+                        return local.tabIndex ?? 0;
+                    },
+                    get ["class"] () {
+                        return clsx(Tooltip_module.disabledTrigger, local.class);
+                    }
+                }), false, true);
+                insert(_el$, ()=>local.children);
+                return _el$;
+            })();
+        }
+    }));
+}
+function TooltipPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Tooltip.Positioner, mergeProps({
+                "data-slot": "tooltip-positioner",
+                get ["class"] () {
+                    return clsx(Tooltip_module.positioner, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function TooltipContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tooltip.Content, mergeProps({
+        "data-slot": "tooltip-content",
+        get ["class"] () {
+            return clsx(Tooltip_module.content, local.class);
+        }
+    }, others));
+}
+function TooltipBody(props) {
+    return createComponent(TooltipPositioner, {
+        get children () {
+            return createComponent(TooltipContent, props);
+        }
+    });
+}
+function TooltipArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Tooltip.Arrow, mergeProps({
+        "data-slot": "tooltip-arrow",
+        get ["class"] () {
+            return clsx(Tooltip_module.arrow, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(TooltipArrowTip, {});
+        }
+    }));
+}
+function TooltipArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tooltip.ArrowTip, mergeProps({
+        "data-slot": "tooltip-arrow-tip",
+        get ["class"] () {
+            return clsx(Tooltip_module.arrowTip, local.class);
+        }
+    }, others));
+}
+const Tooltip_Tooltip = Object.assign(TooltipRoot, {
+    Root: TooltipRoot,
+    RootProvider: TooltipRootProvider,
+    Context: Tooltip.Context,
+    Trigger: TooltipTrigger,
+    DisabledTrigger: TooltipDisabledTrigger,
+    Body: TooltipBody,
+    Positioner: TooltipPositioner,
+    Content: TooltipContent,
+    Arrow: TooltipArrow,
+    ArrowTip: TooltipArrowTip
+});
+export { Tooltip_Tooltip as Tooltip, useTooltip, useTooltipContext };

package/dist/components/tooltip/Tooltip.jsx

@@ -0,0 +1,109 @@
+import { Tooltip, useTooltip, useTooltipContext } from "@ark-ui/solid/tooltip";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import Tooltip_module from "./Tooltip.module.jsx";
+function assignDisabledTriggerRef(ref, element) {
+    if ('function' == typeof ref) ref(element);
+}
+function TooltipRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Tooltip.Root lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Tooltip.Root>
+    </OverlayPortalProvider>;
+}
+function TooltipRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Tooltip.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Tooltip.RootProvider>
+    </OverlayPortalProvider>;
+}
+function TooltipTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Tooltip.Trigger asChild={local.asChild} data-slot="tooltip-trigger" class={clsx(!local.asChild && Tooltip_module.trigger, local.class)} {...others}/>;
+}
+function TooltipDisabledTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'ref',
+        'tabIndex'
+    ]);
+    return <Tooltip.Trigger {...others} asChild={(triggerProps)=>{
+        const primitiveProps = triggerProps();
+        const primitiveRef = primitiveProps.ref;
+        return <span {...primitiveProps} ref={(element)=>{
+            assignDisabledTriggerRef(primitiveRef, element);
+            assignDisabledTriggerRef(local.ref, element);
+        }} data-slot="tooltip-disabled-trigger" tabIndex={local.tabIndex ?? 0} class={clsx(Tooltip_module.disabledTrigger, local.class)}>
+            {local.children}
+          </span>;
+    }}/>;
+}
+function TooltipPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Tooltip.Positioner data-slot="tooltip-positioner" class={clsx(Tooltip_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function TooltipContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tooltip.Content data-slot="tooltip-content" class={clsx(Tooltip_module.content, local.class)} {...others}/>;
+}
+function TooltipBody(props) {
+    return <TooltipPositioner>
+      <TooltipContent {...props}/>
+    </TooltipPositioner>;
+}
+function TooltipArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Tooltip.Arrow data-slot="tooltip-arrow" class={clsx(Tooltip_module.arrow, local.class)} {...others}>
+      {resolvedChildren() ?? <TooltipArrowTip/>}
+    </Tooltip.Arrow>;
+}
+function TooltipArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tooltip.ArrowTip data-slot="tooltip-arrow-tip" class={clsx(Tooltip_module.arrowTip, local.class)} {...others}/>;
+}
+const Tooltip_Tooltip = Object.assign(TooltipRoot, {
+    Root: TooltipRoot,
+    RootProvider: TooltipRootProvider,
+    Context: Tooltip.Context,
+    Trigger: TooltipTrigger,
+    DisabledTrigger: TooltipDisabledTrigger,
+    Body: TooltipBody,
+    Positioner: TooltipPositioner,
+    Content: TooltipContent,
+    Arrow: TooltipArrow,
+    ArrowTip: TooltipArrowTip
+});
+export { Tooltip_Tooltip as Tooltip, useTooltip, useTooltipContext };

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

@@ -0,0 +1,14 @@
+import "./Tooltip_module.css";
+const Tooltip_module = {
+    trigger: "trigger-Q4UfW0",
+    disabledTrigger: "disabledTrigger-G8UpBu",
+    positioner: "positioner-oQOZIG",
+    content: "content-Ca8mTU",
+    "tooltip-content-in": "tooltip-content-in-QxxE9U",
+    tooltipContentIn: "tooltip-content-in-QxxE9U",
+    "tooltip-content-out": "tooltip-content-out-SPnpmw",
+    tooltipContentOut: "tooltip-content-out-SPnpmw",
+    arrow: "arrow-x8sqfJ",
+    arrowTip: "arrowTip-WCS6HO"
+};
+export default Tooltip_module;

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

@@ -0,0 +1,14 @@
+import "./Tooltip_module.css";
+const Tooltip_module = {
+    trigger: "trigger-Q4UfW0",
+    disabledTrigger: "disabledTrigger-G8UpBu",
+    positioner: "positioner-oQOZIG",
+    content: "content-Ca8mTU",
+    "tooltip-content-in": "tooltip-content-in-QxxE9U",
+    tooltipContentIn: "tooltip-content-in-QxxE9U",
+    "tooltip-content-out": "tooltip-content-out-SPnpmw",
+    tooltipContentOut: "tooltip-content-out-SPnpmw",
+    arrow: "arrow-x8sqfJ",
+    arrowTip: "arrowTip-WCS6HO"
+};
+export default Tooltip_module;

package/dist/components/tooltip/Tooltip_module.css

@@ -0,0 +1,156 @@
+@layer moduix.components {
+  .trigger-Q4UfW0 {
+    box-sizing: border-box;
+    min-height: var(--moduix-tooltip-trigger-height, var(--moduix-size-md));
+    padding: var(--moduix-tooltip-trigger-padding-y, var(--moduix-spacing-1))
+      var(--moduix-tooltip-trigger-padding-x, var(--moduix-spacing-3-5));
+    border: var(--moduix-tooltip-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tooltip-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tooltip-trigger-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-tooltip-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-tooltip-trigger-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-tooltip-trigger-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tooltip-trigger-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--moduix-tooltip-transition, var(--moduix-duration-fast))
+        var(--moduix-ease-in-out),
+      border-color var(--moduix-tooltip-transition, var(--moduix-duration-fast))
+        var(--moduix-ease-in-out),
+      color var(--moduix-tooltip-transition, var(--moduix-duration-fast)) var(--moduix-ease-in-out);
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .trigger-Q4UfW0:hover {
+      background-color: var(--moduix-tooltip-trigger-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .trigger-Q4UfW0:active, .trigger-Q4UfW0[data-state="open"] {
+    background-color: var(--moduix-tooltip-trigger-bg-active, var(--moduix-tooltip-trigger-bg-hover, var(--moduix-color-accent)));
+  }
+
+  .trigger-Q4UfW0:focus-visible {
+    outline: var(--moduix-tooltip-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-tooltip-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-tooltip-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+  }
+
+  .trigger-Q4UfW0[data-disabled], .trigger-Q4UfW0[disabled] {
+    pointer-events: none;
+    opacity: var(--moduix-tooltip-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .disabledTrigger-G8UpBu {
+    cursor: not-allowed;
+    display: inline-flex;
+  }
+
+  .disabledTrigger-G8UpBu > :is(:disabled, [data-disabled]) {
+    pointer-events: none;
+  }
+
+  .positioner-oQOZIG {
+    z-index: var(--z-index, var(--moduix-z-popup));
+    max-width: var(--available-width);
+    max-height: var(--available-height);
+  }
+
+  .content-Ca8mTU {
+    --arrow-background: var(--moduix-tooltip-arrow-background, var(--moduix-tooltip-bg, var(--moduix-color-popover)));
+    --arrow-size: var(--moduix-tooltip-arrow-size, var(--moduix-spacing-2-5));
+    box-sizing: border-box;
+    z-index: var(--moduix-tooltip-z-index, var(--moduix-z-popup));
+    max-width: min(var(--moduix-tooltip-max-width, 20rem), var(--available-width));
+    max-height: min(var(--moduix-tooltip-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--moduix-tooltip-padding-y, var(--moduix-spacing-1))
+      var(--moduix-tooltip-padding-x, var(--moduix-spacing-2));
+    border: var(--moduix-tooltip-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tooltip-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tooltip-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-tooltip-bg, var(--moduix-color-popover));
+    color: var(--moduix-tooltip-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-tooltip-shadow, var(--moduix-shadow-md));
+    font-size: var(--moduix-tooltip-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tooltip-line-height, var(--moduix-line-height-text-sm));
+    text-align: center;
+    overflow-wrap: anywhere;
+    transform-origin: var(--transform-origin);
+    position: relative;
+    overflow: visible;
+  }
+
+  .content-Ca8mTU[data-state="open"] {
+    animation: tooltip-content-in-QxxE9U
+        var(--moduix-tooltip-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast)))
+        var(--moduix-popup-motion-easing, ease-out);
+  }
+
+  .content-Ca8mTU[data-state="closed"] {
+    animation: tooltip-content-out-SPnpmw
+        var(--moduix-tooltip-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast)))
+        var(--moduix-popup-motion-easing, ease-in);
+  }
+
+  .content-Ca8mTU[data-instant] {
+    animation-duration: 0s;
+  }
+
+  .arrow-x8sqfJ {
+    --arrow-background: var(--moduix-tooltip-arrow-background, var(--moduix-tooltip-bg, var(--moduix-color-popover)));
+    --arrow-size: var(--moduix-tooltip-arrow-size, var(--moduix-spacing-2-5));
+  }
+
+  .arrowTip-WCS6HO {
+    border-top: var(--moduix-tooltip-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tooltip-arrow-stroke-color, var(--moduix-tooltip-border-color, var(--moduix-color-border)));
+    border-left: var(--moduix-tooltip-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tooltip-arrow-stroke-color, var(--moduix-tooltip-border-color, var(--moduix-color-border)));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-Q4UfW0 {
+      transition: none;
+    }
+
+    .content-Ca8mTU[data-state] {
+      animation: none;
+    }
+  }
+
+  @keyframes tooltip-content-in-QxxE9U {
+    from {
+      opacity: var(--moduix-tooltip-popup-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-tooltip-popup-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-tooltip-popup-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      transform: scale(var(--moduix-tooltip-popup-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup))));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes tooltip-content-out-SPnpmw {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: var(--moduix-tooltip-popup-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-tooltip-popup-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-tooltip-popup-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      transform: scale(var(--moduix-tooltip-popup-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup))));
+    }
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export { Tooltip, useTooltip, useTooltipContext } from './Tooltip.js';
+export type { TooltipRootProps, TooltipRootProviderProps } from './Tooltip.js';

package/dist/components/tooltip/index.js

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

package/dist/components/tooltip/index.jsx

@@ -0,0 +1 @@
+export { Tooltip, useTooltip, useTooltipContext } from "./Tooltip.jsx";

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

@@ -0,0 +1,46 @@
+import { type HTMLArkProps } from '@ark-ui/solid/factory';
+import { Tour as TourPrimitive, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from '@ark-ui/solid/tour';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type TourRootProps = ComponentProps<typeof TourPrimitive.Root> & OverlayPortalProps;
+type TourCloseIconProps = Omit<ComponentProps<typeof TourPrimitive.CloseTrigger>, 'asChild'>;
+declare function TourRoot(props: TourRootProps): import("solid-js").JSX.Element;
+declare function TourBackdrop(props: ComponentProps<typeof TourPrimitive.Backdrop>): import("solid-js").JSX.Element;
+declare function TourSpotlight(props: ComponentProps<typeof TourPrimitive.Spotlight>): import("solid-js").JSX.Element;
+declare function TourPositioner(props: ComponentProps<typeof TourPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function TourContent(props: ComponentProps<typeof TourPrimitive.Content>): import("solid-js").JSX.Element;
+declare function TourArrow(props: ComponentProps<typeof TourPrimitive.Arrow>): import("solid-js").JSX.Element;
+declare function TourArrowTip(props: ComponentProps<typeof TourPrimitive.ArrowTip>): import("solid-js").JSX.Element;
+declare function TourTitle(props: ComponentProps<typeof TourPrimitive.Title>): import("solid-js").JSX.Element;
+declare function TourDescription(props: ComponentProps<typeof TourPrimitive.Description>): import("solid-js").JSX.Element;
+declare function TourProgressText(props: ComponentProps<typeof TourPrimitive.ProgressText>): import("solid-js").JSX.Element;
+declare function TourBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function TourCloseTrigger(props: ComponentProps<typeof TourPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+declare function TourCloseIcon(props: TourCloseIconProps): import("solid-js").JSX.Element;
+declare function TourControl(props: ComponentProps<typeof TourPrimitive.Control>): import("solid-js").JSX.Element;
+declare function TourActionTrigger(props: ComponentProps<typeof TourPrimitive.ActionTrigger>): import("solid-js").JSX.Element;
+declare function TourActionList(props: {
+    class?: string;
+}): import("solid-js").JSX.Element;
+declare const Tour: typeof TourRoot & {
+    Root: typeof TourRoot;
+    Context: (props: TourPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Backdrop: typeof TourBackdrop;
+    Spotlight: typeof TourSpotlight;
+    Positioner: typeof TourPositioner;
+    Content: typeof TourContent;
+    Arrow: typeof TourArrow;
+    ArrowTip: typeof TourArrowTip;
+    Title: typeof TourTitle;
+    Description: typeof TourDescription;
+    ProgressText: typeof TourProgressText;
+    Body: typeof TourBody;
+    CloseTrigger: typeof TourCloseTrigger;
+    CloseIcon: typeof TourCloseIcon;
+    Control: typeof TourControl;
+    Actions: (props: TourPrimitive.ActionsProps) => import("solid-js").JSX.Element;
+    ActionList: typeof TourActionList;
+    ActionTrigger: typeof TourActionTrigger;
+};
+export { Tour, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise, };
+export type { TourCloseIconProps, TourRootProps };