@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/toggle/Toggle.d.ts

@@ -1,19 +1,16 @@
-import { type JSX } from "solid-js";
-import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
-type ToggleBaseProps = {
-    color?: ComponentColor;
-    size?: ComponentSize;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-invalid"?: boolean;
-    "aria-required"?: boolean;
-    "aria-labelledby"?: string;
-    "aria-checked"?: boolean;
+import "./Toggle.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ToggleColor = "default" | "accent" | "success" | "warning" | "danger";
+export type ToggleSize = "sm" | "md" | "lg";
+export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color"> & IComponentBaseProps & {
+    defaultChecked?: boolean;
+    children?: JSX.Element;
+    description?: JSX.Element;
+    icon?: JSX.Element;
+    isDisabled?: boolean;
+    color?: ToggleColor;
+    size?: ToggleSize;
 };
-export type ToggleProps = ToggleBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof ToggleBaseProps>;
-declare const Toggle: (props: ToggleProps) => JSX.Element;
+declare const Toggle: Component<ToggleProps>;
 export default Toggle;

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,124 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Toggle.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=toggle__icon data-slot=toggle-icon>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=toggle__description data-slot=description>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=toggle__content data-slot=toggle-content>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label data-slot=toggle><input><span class=toggle__control data-slot=toggle-control aria-hidden=true><span class=toggle__thumb data-slot=toggle-thumb>");
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const TOGGLE_COLOR_CLASS = {
+    default: "toggle--default",
+    accent: "toggle--accent",
+    success: "toggle--success",
+    warning: "toggle--warning",
+    danger: "toggle--danger"
+};
+const TOGGLE_SIZE_CLASS = {
+    sm: "toggle--sm",
+    md: "toggle--md",
+    lg: "toggle--lg"
+};
+const Toggle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "children",
+        "description",
+        "icon",
+        "isDisabled",
+        "color",
+        "size",
+        "checked",
+        "defaultChecked",
+        "disabled",
+        "onChange",
+        "dataTheme"
+    ]);
+    const [internalSelected, setInternalSelected] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultChecked));
+    const isControlled = ()=>void 0 !== local.checked;
+    const isSelected = ()=>isControlled() ? Boolean(local.checked) : internalSelected();
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const color = ()=>local.color ?? "accent";
+    const size = ()=>local.size ?? "md";
+    const hasContent = ()=>null != local.children || null != local.description;
+    const handleChange = (event)=>{
+        invokeEventHandler(local.onChange, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        if (!isControlled()) setInternalSelected(event.currentTarget.checked);
+    };
+    return (()=>{
+        var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "checkbox",
+            role: "switch",
+            class: "toggle__input",
+            "data-slot": "toggle-input",
+            get checked () {
+                return isSelected();
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            onChange: handleChange
+        }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.icon;
+            },
+            get children () {
+                var _el$5 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.icon);
+                return _el$5;
+            }
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return hasContent();
+            },
+            get children () {
+                var _el$6 = _tmpl$4();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.children;
+                    },
+                    get children () {
+                        var _el$7 = _tmpl$2();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+                        return _el$7;
+                    }
+                }), null);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.description;
+                    },
+                    get children () {
+                        var _el$8 = _tmpl$3();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.description);
+                        return _el$8;
+                    }
+                }), null);
+                return _el$6;
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("toggle", TOGGLE_SIZE_CLASS[size()], TOGGLE_COLOR_CLASS[color()], isDisabled() && "toggle--disabled", local.class, local.className), _v$2 = local.dataTheme, _v$3 = isSelected() ? "true" : "false", _v$4 = isDisabled() ? "true" : "false", _v$5 = isDisabled() ? "true" : "false";
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-selected", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
+        });
+        return _el$;
+    })();
+};
+const toggle_Toggle = Toggle;
+export { toggle_Toggle as default };

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

@@ -1 +1 @@
-export { default } from "./Toggle";
+export { default, type ToggleProps, type ToggleColor, type ToggleSize } from "./Toggle";

package/dist/components/toggle/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Toggle_js_93f01922__ from "./Toggle.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Toggle_js_93f01922__["default"];
+export { __webpack_exports__default as default };

package/dist/components/toggle/toggle.css

@@ -0,0 +1,228 @@
+@layer components {
+  .toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--color-base-content);
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
+    --switch-control-bg: var(--color-default);
+    --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
+    --switch-control-bg-pressed: var(--switch-control-bg-hover);
+    --switch-control-bg-checked: var(--color-accent);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  .toggle__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  .toggle__control {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    overflow: hidden;
+    border-radius: 9999px;
+    height: 1.25rem;
+    width: 2.5rem;
+    background-color: var(--switch-control-bg);
+    transition:
+      background-color 250ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .toggle__thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background-color: white;
+    margin-inline-start: 0.125rem;
+    height: 1rem;
+    width: 1.375rem;
+    box-shadow:
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06),
+      0 0 1px 0 oklch(0% 0 0 / 0.3);
+    transition:
+      margin 300ms ease,
+      background-color 200ms ease;
+  }
+
+  .toggle__icon {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toggle__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .toggle__description {
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  /* ── Focus state ── */
+
+  .toggle:focus-within .toggle__control,
+  .toggle__input:focus-visible + .toggle__control,
+  .toggle[data-focus-visible="true"] .toggle__control {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--switch-control-bg-checked) 22%, transparent);
+  }
+
+  /* ── Hover state ── */
+
+  @media (hover: hover) {
+    .toggle:hover .toggle__control,
+    .toggle[data-hovered="true"] .toggle__control {
+      background-color: var(--switch-control-bg-hover);
+    }
+  }
+
+  /* ── Pressed state ── */
+
+  .toggle:active .toggle__control,
+  .toggle[data-pressed="true"] .toggle__control {
+    background-color: var(--switch-control-bg-pressed);
+  }
+
+  /* ── Checked state ── */
+
+  .toggle[data-selected="true"] .toggle__control {
+    background-color: var(--switch-control-bg-checked);
+  }
+
+  .toggle[data-selected="true"] .toggle__thumb {
+    margin-inline-start: calc(100% - 1.5rem);
+    box-shadow:
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06),
+      0 0 1px 0 oklch(0% 0 0 / 0.3);
+  }
+
+  /* ── Checked + Hover ── */
+
+  @media (hover: hover) {
+    .toggle[data-selected="true"]:hover .toggle__control,
+    .toggle[data-selected="true"][data-hovered="true"] .toggle__control {
+      background-color: var(--switch-control-bg-checked-hover);
+    }
+  }
+
+  /* ── Checked + Pressed ── */
+
+  .toggle[data-selected="true"]:active .toggle__control,
+  .toggle[data-selected="true"][data-pressed="true"] .toggle__control {
+    background-color: var(--switch-control-bg-checked-hover);
+  }
+
+  /* ── Size: sm ── */
+
+  .toggle--sm .toggle__control {
+    height: 1rem;
+    width: 2rem;
+  }
+
+  .toggle--sm .toggle__thumb {
+    height: 0.75rem;
+    width: 1.03125rem;
+  }
+
+  .toggle--sm[data-selected="true"] .toggle__thumb {
+    margin-inline-start: calc(100% - 1.15625rem);
+  }
+
+  /* ── Size: md (default) ── */
+
+  .toggle--md {
+    /* Default size */
+  }
+
+  /* ── Size: lg ── */
+
+  .toggle--lg .toggle__control {
+    height: 1.5rem;
+    width: 3rem;
+  }
+
+  .toggle--lg .toggle__thumb {
+    height: 1.25rem;
+    width: 1.71875rem;
+  }
+
+  .toggle--lg[data-selected="true"] .toggle__thumb {
+    margin-inline-start: calc(100% - 1.84375rem);
+  }
+
+  /* ── Color: default ── */
+
+  .toggle--default {
+    --switch-control-bg-checked: var(--color-default-foreground);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Color: accent (default) ── */
+
+  .toggle--accent {
+    --switch-control-bg-checked: var(--color-accent);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Color: success ── */
+
+  .toggle--success {
+    --switch-control-bg-checked: var(--color-success);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Color: warning ── */
+
+  .toggle--warning {
+    --switch-control-bg-checked: var(--color-warning);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Color: danger ── */
+
+  .toggle--danger {
+    --switch-control-bg-checked: var(--color-danger);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Disabled state ── */
+
+  .toggle--disabled,
+  .toggle[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .toggle--disabled .toggle__thumb,
+  .toggle[data-disabled="true"] .toggle__thumb {
+    background-color: color-mix(in oklab, var(--color-default-foreground) 20%, transparent);
+  }
+
+  .toggle--disabled[data-selected="true"] .toggle__thumb,
+  .toggle[data-disabled="true"][data-selected="true"] .toggle__thumb {
+    opacity: 0.4;
+  }
+}

package/dist/components/tooltip/Tooltip.css

@@ -0,0 +1,161 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Root
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip {
+    position: relative;
+    display: inline-flex;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__trigger {
+    display: inline-flex;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .tooltip__trigger:focus-visible,
+  .tooltip__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.375rem);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__content {
+    position: absolute;
+    z-index: 9999;
+    max-width: 20rem;
+    border-radius: var(--radius-field, 0.5rem);
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    white-space: normal;
+    word-break: break-word;
+    text-align: center;
+    width: max-content;
+    pointer-events: none;
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    box-shadow:
+      0 4px 6px -1px oklch(0% 0 0 / 0.1),
+      0 2px 4px -2px oklch(0% 0 0 / 0.1);
+
+    opacity: 0;
+    overflow: visible;
+    transition:
+      opacity 150ms ease,
+      transform 150ms ease;
+  }
+
+  /* Visible state */
+  .tooltip__content[data-open="true"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ----- Placement: top (default) ----- */
+  .tooltip__content[data-placement="top"] {
+    bottom: calc(100% + 0.75rem);
+    left: 50%;
+    transform: translateX(-50%) translateY(0.25rem);
+  }
+
+  .tooltip__content[data-placement="top"][data-open="true"] {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  /* ----- Placement: bottom ----- */
+  .tooltip__content[data-placement="bottom"] {
+    top: calc(100% + 0.75rem);
+    left: 50%;
+    transform: translateX(-50%) translateY(-0.25rem);
+  }
+
+  .tooltip__content[data-placement="bottom"][data-open="true"] {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  /* ----- Placement: left ----- */
+  .tooltip__content[data-placement="left"] {
+    right: calc(100% + 0.75rem);
+    top: 50%;
+    transform: translateX(0.25rem) translateY(-50%);
+  }
+
+  .tooltip__content[data-placement="left"][data-open="true"] {
+    transform: translateX(0) translateY(-50%);
+  }
+
+  /* ----- Placement: right ----- */
+  .tooltip__content[data-placement="right"] {
+    left: calc(100% + 0.75rem);
+    top: 50%;
+    transform: translateX(-0.25rem) translateY(-50%);
+  }
+
+  .tooltip__content[data-placement="right"][data-open="true"] {
+    transform: translateX(0) translateY(-50%);
+  }
+
+  /* ----- Reduced motion ----- */
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip__content {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Arrow
+   * Arrow lives inside .tooltip__content, so it positions relative to the content bubble.
+   * The default SVG (viewBox 0 0 12 12, path "M0 0C5.48483 8 6.5 8 12 0Z") points downward.
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__arrow {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    color: var(--color-neutral);
+  }
+
+  /* Arrow placement: top → content is above trigger, arrow hangs below content pointing down */
+  .tooltip__arrow[data-placement="top"] {
+    top: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Arrow placement: bottom → content is below trigger, arrow sits above content pointing up */
+  .tooltip__arrow[data-placement="bottom"] {
+    bottom: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+  }
+
+  /* Arrow placement: left → content is left of trigger, arrow at right edge pointing right */
+  .tooltip__arrow[data-placement="left"] {
+    left: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+  }
+
+  /* Arrow placement: right → content is right of trigger, arrow at left edge pointing left */
+  .tooltip__arrow[data-placement="right"] {
+    right: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Disabled state
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip[data-disabled="true"] .tooltip__trigger {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}

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

@@ -1,15 +1,35 @@
-import { type JSX } from "solid-js";
-import type { ComponentColor, ComponentPosition, IComponentBaseProps } from "../types";
-type TooltipBaseProps = {
-    message: string;
-    open?: boolean;
-    color?: ComponentColor;
-    position?: ComponentPosition;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-};
-export type TooltipProps = TooltipBaseProps & IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, keyof TooltipBaseProps>;
-declare const Tooltip: (props: TooltipProps) => JSX.Element;
+import "./Tooltip.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export type TooltipRootProps = IComponentBaseProps & {
+    children: JSX.Element;
+    placement?: TooltipPlacement;
+    showArrow?: boolean;
+    delay?: number;
+    closeDelay?: number;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+};
+export type TooltipTriggerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type TooltipContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type TooltipArrowProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const TooltipRoot: ParentComponent<TooltipRootProps>;
+declare const TooltipTrigger: Component<TooltipTriggerProps>;
+declare const TooltipContent: Component<TooltipContentProps>;
+declare const TooltipArrow: Component<TooltipArrowProps>;
+declare const Tooltip: ParentComponent<TooltipRootProps> & {
+    Root: ParentComponent<TooltipRootProps>;
+    Trigger: Component<TooltipTriggerProps>;
+    Content: Component<TooltipContentProps>;
+    Arrow: Component<TooltipArrowProps>;
+};
 export default Tooltip;
+export { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow };