@msviderok/base-ui-solid 1.0.0-beta.1

package/esm/tooltip/root/TooltipRoot.d.ts

@@ -0,0 +1,71 @@
+import { type JSX } from 'solid-js';
+import { TooltipOpenChangeReason } from "./TooltipRootContext.js";
+/**
+ * Groups all parts of the tooltip.
+ * Doesn’t render its own HTML element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+export declare function TooltipRoot(props: TooltipRoot.Props): JSX.Element;
+export declare namespace TooltipRoot {
+  interface State {}
+  interface Props {
+    children?: JSX.Element;
+    /**
+     * Whether the tooltip is initially open.
+     *
+     * To render a controlled tooltip, use the `open` prop instead.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Whether the tooltip is currently open.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the tooltip is opened or closed.
+     * @type (open: boolean, event?: Event, reason?: Tooltip.Root.OpenChangeReason) => void
+     */
+    onOpenChange?: (open: boolean, event: Event | undefined, reason: TooltipOpenChangeReason | undefined) => void;
+    /**
+     * Event handler called after any animations complete when the tooltip is opened or closed.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * Whether the tooltip contents can be hovered without closing the tooltip.
+     * @default true
+     */
+    hoverable?: boolean;
+    /**
+     * Determines which axis the tooltip should track the cursor on.
+     * @default 'none'
+     */
+    trackCursorAxis?: 'none' | 'x' | 'y' | 'both';
+    /**
+     * How long to wait before opening the tooltip. Specified in milliseconds.
+     * @default 600
+     */
+    delay?: number;
+    /**
+     * How long to wait before closing the tooltip. Specified in milliseconds.
+     * @default 0
+     */
+    closeDelay?: number;
+    /**
+     * A ref to imperative actions.
+     * - `unmount`: When specified, the tooltip will not be unmounted when closed.
+     * Instead, the `unmount` function must be called to unmount the tooltip manually.
+     * Useful when the tooltip's animation is controlled by an external library.
+     */
+    actionsRef?: Actions;
+    /**
+     * Whether the tooltip is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+  }
+  interface Actions {
+    unmount: () => void;
+  }
+  type OpenChangeReason = TooltipOpenChangeReason;
+}

package/esm/tooltip/root/TooltipRoot.js

@@ -0,0 +1,188 @@
+import { batch, createEffect, createSignal, onMount } from 'solid-js';
+import { safePolygon, useClientPoint, useDelayGroup, useDismiss, useFloatingRootContext, useFocus, useHover, useInteractions } from "../../floating-ui-solid/index.js";
+import { mergeProps } from "../../merge-props/mergeProps.js";
+import { translateOpenChangeReason } from "../../utils/translateOpenChangeReason.js";
+import { useControlled } from "../../utils/useControlled.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useTooltipProviderContext } from "../provider/TooltipProviderContext.js";
+import { OPEN_DELAY } from "../utils/constants.js";
+import { TooltipRootContext } from "./TooltipRootContext.js";
+
+/**
+ * Groups all parts of the tooltip.
+ * Doesn’t render its own HTML element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TooltipRoot(props) {
+  const disabled = () => props.disabled ?? false;
+  const defaultOpen = () => props.defaultOpen ?? false;
+  const hoverable = () => props.hoverable ?? true;
+  const trackCursorAxis = () => props.trackCursorAxis ?? 'none';
+  const delayWithDefault = () => props.delay ?? OPEN_DELAY;
+  const closeDelayWithDefault = () => props.closeDelay ?? 0;
+  const [triggerElement, setTriggerElement] = createSignal(null);
+  const [positionerElement, setPositionerElement] = createSignal(null);
+  const [instantTypeState, setInstantTypeState] = createSignal();
+  const refs = {
+    popupRef: null
+  };
+  const [openState, setOpenUnwrapped] = useControlled({
+    controlled: () => props.open,
+    default: defaultOpen,
+    name: 'Tooltip',
+    state: 'open'
+  });
+  const setOpen = (nextOpen, event, reason) => {
+    const isHover = reason === 'trigger-hover';
+    const isFocusOpen = nextOpen && reason === 'trigger-focus';
+    const isDismissClose = !nextOpen && (reason === 'trigger-press' || reason === 'escape-key');
+    function changeState() {
+      batch(() => {
+        props.onOpenChange?.(nextOpen, event, reason);
+        setOpenUnwrapped(nextOpen);
+      });
+    }
+    if (isHover) {
+      // If a hover reason is provided, we need to flush the state synchronously. This ensures
+      // `node.getAnimations()` knows about the new state.
+      changeState();
+    } else {
+      changeState();
+    }
+    if (isFocusOpen || isDismissClose) {
+      setInstantTypeState(isFocusOpen ? 'focus' : 'dismiss');
+    } else if (reason === 'trigger-hover') {
+      setInstantTypeState(undefined);
+    }
+  };
+  createEffect(() => {
+    if (openState() && disabled()) {
+      setOpen(false, undefined, 'disabled');
+    }
+  });
+  const {
+    mounted,
+    setMounted,
+    transitionStatus
+  } = useTransitionStatus(openState);
+  const handleUnmount = () => {
+    batch(() => {
+      setMounted(false);
+      props.onOpenChangeComplete?.(false);
+    });
+  };
+  useOpenChangeComplete({
+    enabled: () => !props.actionsRef,
+    open: openState,
+    ref: () => refs.popupRef,
+    onComplete() {
+      if (!openState()) {
+        handleUnmount();
+      }
+    }
+  });
+  onMount(() => {
+    if (props.actionsRef) {
+      props.actionsRef.unmount = handleUnmount;
+    }
+  });
+  const floatingRootContext = useFloatingRootContext({
+    elements: {
+      reference: triggerElement,
+      floating: positionerElement
+    },
+    open: openState,
+    onOpenChange(openValue, eventValue, reasonValue) {
+      setOpen(openValue, eventValue, translateOpenChangeReason(reasonValue));
+    }
+  });
+  const providerContext = useTooltipProviderContext();
+  const {
+    delayRef,
+    isInstantPhase,
+    hasProvider
+  } = useDelayGroup(floatingRootContext);
+  const instantType = () => isInstantPhase() ? 'delay' : instantTypeState();
+  const hover = useHover(floatingRootContext, {
+    enabled: () => !disabled(),
+    mouseOnly: true,
+    move: false,
+    handleClose: context => {
+      if (hoverable() && trackCursorAxis() !== 'both') {
+        return safePolygon()(context);
+      }
+      return () => undefined;
+    },
+    restMs() {
+      const providerDelay = providerContext?.delay();
+      const delayRefValue = delayRef();
+      const groupOpenValue = typeof delayRefValue === 'object' ? delayRefValue.open : undefined;
+      let computedRestMs = delayWithDefault();
+      if (hasProvider()) {
+        if (groupOpenValue !== 0) {
+          computedRestMs = props.delay ?? providerDelay ?? delayWithDefault();
+        } else {
+          computedRestMs = 0;
+        }
+      }
+      return computedRestMs;
+    },
+    delay() {
+      const delayRefValue = delayRef();
+      const closeValue = typeof delayRefValue === 'object' ? delayRefValue.close : undefined;
+      let computedCloseDelay = closeDelayWithDefault();
+      if (props.closeDelay == null && hasProvider()) {
+        computedCloseDelay = closeValue;
+      }
+      return {
+        close: computedCloseDelay
+      };
+    }
+  });
+  const focus = useFocus(floatingRootContext, {
+    enabled: () => !disabled()
+  });
+  const dismiss = useDismiss(floatingRootContext, {
+    enabled: () => !disabled(),
+    referencePress: true
+  });
+  const clientPoint = useClientPoint(floatingRootContext, {
+    enabled: () => !disabled() && trackCursorAxis() !== 'none',
+    axis: () => {
+      const axis = trackCursorAxis();
+      return axis === 'none' ? undefined : axis;
+    }
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([hover, focus, dismiss, clientPoint]);
+  const contextValue = {
+    open: openState,
+    setOpen,
+    mounted,
+    setMounted,
+    setTriggerElement,
+    positionerElement,
+    setPositionerElement,
+    refs,
+    triggerProps: externalProps => mergeProps(externalProps, getReferenceProps()),
+    popupProps: externalProps => mergeProps(externalProps, getFloatingProps()),
+    floatingRootContext,
+    instantType,
+    transitionStatus,
+    // eslint-disable-next-line solid/reactivity
+    onOpenChangeComplete: props.onOpenChangeComplete,
+    delay: delayWithDefault,
+    closeDelay: closeDelayWithDefault,
+    trackCursorAxis,
+    hoverable
+  };
+  return /*#__PURE__*/_jsx(TooltipRootContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+}

package/esm/tooltip/root/TooltipRootContext.d.ts

@@ -0,0 +1,30 @@
+import { type Accessor, type Setter } from 'solid-js';
+import type { FloatingRootContext } from "../../floating-ui-solid/index.js";
+import { BaseOpenChangeReason } from "../../utils/translateOpenChangeReason.js";
+import type { BaseUIHTMLProps, HTMLProps } from "../../utils/types.js";
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+export type TooltipOpenChangeReason = BaseOpenChangeReason | 'disabled';
+export interface TooltipRootContext {
+  open: Accessor<boolean>;
+  setOpen: (open: boolean, event: Event | undefined, reason: TooltipOpenChangeReason | undefined) => void;
+  setTriggerElement: (el: Element | null | undefined) => void;
+  positionerElement: Accessor<HTMLElement | null | undefined>;
+  setPositionerElement: Setter<HTMLElement | null | undefined>;
+  refs: {
+    popupRef: HTMLElement | null | undefined;
+  };
+  delay: Accessor<number>;
+  closeDelay: Accessor<number>;
+  mounted: Accessor<boolean>;
+  setMounted: (mounted: boolean) => void;
+  triggerProps: (externalProps: HTMLProps | BaseUIHTMLProps) => BaseUIHTMLProps;
+  popupProps: (externalProps: HTMLProps | BaseUIHTMLProps) => BaseUIHTMLProps;
+  instantType: Accessor<'delay' | 'dismiss' | 'focus' | undefined>;
+  floatingRootContext: FloatingRootContext;
+  trackCursorAxis: Accessor<'none' | 'x' | 'y' | 'both'>;
+  transitionStatus: Accessor<TransitionStatus>;
+  onOpenChangeComplete: ((open: boolean) => void) | undefined;
+  hoverable: Accessor<boolean>;
+}
+export declare const TooltipRootContext: import("solid-js").Context<TooltipRootContext | undefined>;
+export declare function useTooltipRootContext(): TooltipRootContext;

package/esm/tooltip/root/TooltipRootContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'solid-js';
+export const TooltipRootContext = createContext(undefined);
+export function useTooltipRootContext() {
+  const context = useContext(TooltipRootContext);
+  if (context === undefined) {
+    throw new Error('Base UI: TooltipRootContext is missing. Tooltip parts must be placed within <Tooltip.Root>.');
+  }
+  return context;
+}

package/esm/tooltip/trigger/TooltipTrigger.d.ts

@@ -0,0 +1,17 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * An element to attach the tooltip to.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+export declare function TooltipTrigger(componentProps: TooltipTrigger.Props): import("solid-js").JSX.Element;
+export declare namespace TooltipTrigger {
+  interface State {
+    /**
+     * Whether the tooltip is currently open.
+     */
+    open: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'button', State> {}
+}

package/esm/tooltip/trigger/TooltipTrigger.js

@@ -0,0 +1,34 @@
+import { splitComponentProps } from "../../solid-helpers.js";
+import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useTooltipRootContext } from "../root/TooltipRootContext.js";
+
+/**
+ * An element to attach the tooltip to.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export function TooltipTrigger(componentProps) {
+  const [,, elementProps] = splitComponentProps(componentProps, []);
+  const {
+    open,
+    setTriggerElement,
+    triggerProps
+  } = useTooltipRootContext();
+  const state = {
+    get open() {
+      return open();
+    }
+  };
+  const element = useRenderElement('button', componentProps, {
+    state,
+    ref: setTriggerElement,
+    props: [triggerProps, elementProps],
+    customStyleHookMapping: triggerOpenStateMapping
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: element()
+  });
+}

package/esm/tooltip/trigger/TooltipTriggerDataAttributes.d.ts

@@ -0,0 +1,6 @@
+export declare enum TooltipTriggerDataAttributes {
+  /**
+   * Present when the corresponding tooltip is open.
+   */
+  popupOpen = "data-popup-open",
+}

package/esm/tooltip/trigger/TooltipTriggerDataAttributes.js

@@ -0,0 +1,8 @@
+import { CommonTriggerDataAttributes } from "../../utils/popupStateMapping.js";
+export let TooltipTriggerDataAttributes = function (TooltipTriggerDataAttributes) {
+  /**
+   * Present when the corresponding tooltip is open.
+   */
+  TooltipTriggerDataAttributes[TooltipTriggerDataAttributes["popupOpen"] = CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  return TooltipTriggerDataAttributes;
+}({});

package/esm/tooltip/utils/constants.d.ts

@@ -0,0 +1 @@
+export declare const OPEN_DELAY = 600;

package/esm/tooltip/utils/constants.js

@@ -0,0 +1 @@
+export const OPEN_DELAY = 600;

package/esm/unstable-no-ssr/NoSsr.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from 'solid-js';
+import type { NoSsrProps } from "./NoSsr.types.js";
+/**
+ * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+ *
+ * This component can be useful in a variety of situations:
+ *
+ * * Escape hatch for broken dependencies not supporting SSR.
+ * * Improve the time-to-first paint on the client by only rendering above the fold.
+ * * Reduce the rendering time on the server.
+ * * Under too heavy server load, you can turn on service degradation.
+ *
+ * Documentation: [Base UI Unstable No Ssr](https://base-ui.com/solid/components/unstable-no-ssr)
+ */
+export declare function NoSsr(props: NoSsrProps): JSX.Element;

package/esm/unstable-no-ssr/NoSsr.js

@@ -0,0 +1,25 @@
+import { createSignal, onMount, Show } from 'solid-js';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+ *
+ * This component can be useful in a variety of situations:
+ *
+ * * Escape hatch for broken dependencies not supporting SSR.
+ * * Improve the time-to-first paint on the client by only rendering above the fold.
+ * * Reduce the rendering time on the server.
+ * * Under too heavy server load, you can turn on service degradation.
+ *
+ * Documentation: [Base UI Unstable No Ssr](https://base-ui.com/solid/components/unstable-no-ssr)
+ */
+export function NoSsr(props) {
+  const [mountedState, setMountedState] = createSignal(false);
+  onMount(() => {
+    setMountedState(true);
+  });
+  return /*#__PURE__*/_jsx(Show, {
+    when: mountedState(),
+    fallback: props.fallback ?? null,
+    children: props.children
+  });
+}

package/esm/unstable-no-ssr/NoSsr.types.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'solid-js';
+export interface NoSsrProps {
+  /**
+   * You can wrap a node.
+   */
+  children?: JSX.Element;
+  /**
+   * If `true`, the component will not only prevent server-side rendering.
+   * It will also defer the rendering of the children into a different screen frame.
+   * @default false
+   */
+  defer?: boolean;
+  /**
+   * The fallback content to display.
+   * @default null
+   */
+  fallback?: JSX.Element;
+}

package/esm/unstable-no-ssr/NoSsr.types.js

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

package/esm/unstable-no-ssr/index.d.ts

@@ -0,0 +1,2 @@
+export { NoSsr } from "./NoSsr.js";
+export * from "./NoSsr.types.js";

package/esm/unstable-no-ssr/index.js

@@ -0,0 +1,2 @@
+export { NoSsr } from "./NoSsr.js";
+export * from "./NoSsr.types.js";

package/esm/unstable-use-media-query/index.d.ts

@@ -0,0 +1,32 @@
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from "../solid-helpers.js";
+export declare function useMediaQuery(query: MaybeAccessor<string>, options: useMediaQuery.Options): Accessor<boolean>;
+export declare namespace useMediaQuery {
+  interface Options {
+    /**
+     * As `window.matchMedia()` is unavailable on the server,
+     * it returns a default matches during the first mount.
+     * @default false
+     */
+    defaultMatches?: MaybeAccessor<boolean>;
+    /**
+     * You can provide your own implementation of matchMedia.
+     * This can be used for handling an iframe content window.
+     */
+    matchMedia?: typeof window.matchMedia;
+    /**
+     * To perform the server-side hydration, the hook needs to render twice.
+     * A first time with `defaultMatches`, the value of the server, and a second time with the resolved value.
+     * This double pass rendering cycle comes with a drawback: it's slower.
+     * You can set this option to `true` if you use the returned value **only** client-side.
+     * @default false
+     */
+    noSsr?: MaybeAccessor<boolean>;
+    /**
+     * You can provide your own implementation of `matchMedia`, it's used when rendering server-side.
+     */
+    ssrMatchMedia?: (query: string) => {
+      matches: boolean;
+    };
+  }
+}

package/esm/unstable-use-media-query/index.js

@@ -0,0 +1,48 @@
+import { createSignal, onCleanup, onMount } from 'solid-js';
+import { isServer } from 'solid-js/web';
+import { access } from "../solid-helpers.js";
+export function useMediaQuery(query, options) {
+  // Wait for jsdom to support the match media feature.
+  // All the browsers Base UI support have this built-in.
+  // This defensive check is here for simplicity.
+  // Most of the time, the match media logic isn't central to people tests.
+  const supportMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  const safeQuery = () => access(query).replace(/^@media( ?)/m, '');
+  const defaultMatches = () => access(options.defaultMatches) ?? false;
+  const matchMedia = () => options.matchMedia ?? (supportMatchMedia() ? window.matchMedia : null);
+  const ssrMatchMedia = () => options.ssrMatchMedia ?? null;
+  const noSsr = () => access(options.noSsr) ?? false;
+  const [match, setMatch] = createSignal(defaultMatches());
+  onMount(() => {
+    const matchMediaValue = matchMedia();
+    if (matchMediaValue === null) {
+      setMatch(defaultMatches());
+      return;
+    }
+    function notify(event) {
+      setMatch(event.matches);
+    }
+    const mediaQueryList = matchMediaValue(safeQuery());
+    mediaQueryList.addEventListener('change', notify);
+    onCleanup(() => {
+      mediaQueryList.removeEventListener('change', notify);
+    });
+  });
+  if (isServer) {
+    const matchMediaValue = matchMedia();
+    if (noSsr() && matchMediaValue) {
+      return () => matchMediaValue(safeQuery()).matches;
+    }
+    const ssrMatch = ssrMatchMedia();
+    if (ssrMatch !== null) {
+      const {
+        matches
+      } = ssrMatch(safeQuery());
+      setMatch(matches);
+      return () => matches;
+    }
+    setMatch(defaultMatches());
+    return () => defaultMatches();
+  }
+  return match;
+}

package/esm/use-button/index.d.ts

@@ -0,0 +1 @@
+export { useButton } from "./useButton.js";

package/esm/use-button/index.js

@@ -0,0 +1 @@
+export { useButton } from "./useButton.js";

package/esm/use-button/useButton.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps, type JSX } from 'solid-js';
+import { type MaybeAccessor } from "../solid-helpers.js";
+export declare function useButton(parameters?: useButton.Parameters): useButton.ReturnValue;
+export declare namespace useButton {
+  interface Parameters {
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: MaybeAccessor<boolean | undefined>;
+    /**
+     * Whether the button may receive focus even if it is disabled.
+     * @default false
+     */
+    focusableWhenDisabled?: MaybeAccessor<boolean | undefined>;
+    tabIndex?: MaybeAccessor<NonNullable<JSX.HTMLAttributes<any>['tabIndex']> | undefined>;
+    /**
+     * Whether the component is being rendered as a native button.
+     * @default true
+     */
+    native?: MaybeAccessor<boolean | undefined>;
+  }
+  interface ReturnValue {
+    /**
+     * Resolver for the button props.
+     * @param externalProps additional props for the button
+     * @returns props that should be spread on the button
+     */
+    getButtonProps: (externalProps?: ComponentProps<any>) => ComponentProps<any>;
+    /**
+     * A ref to the button DOM element. This ref should be passed to the rendered element.
+     * It is not a part of the props returned by `getButtonProps`.
+     */
+    buttonRef: (value: HTMLButtonElement | HTMLAnchorElement | HTMLElement | null | undefined) => void;
+  }
+}