@johly/bits-ui 2.18.1

package/dist/bits/tooltip/types.d.ts

@@ -0,0 +1,153 @@
+import type { FloatingLayerContentProps } from "../utilities/floating-layer/types.js";
+import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
+import type { DismissibleLayerProps } from "../utilities/dismissible-layer/types.js";
+import type { EscapeLayerProps } from "../utilities/escape-layer/types.js";
+import type { Snippet } from "svelte";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { PortalProps } from "../utilities/portal/types.js";
+import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { TooltipTether as TooltipTetherImpl } from "./tooltip.svelte.js";
+export type TooltipTether<Payload = never> = TooltipTetherImpl<Payload>;
+export type TooltipRootSnippetProps<Payload = never> = {
+    open: boolean;
+    triggerId: string | null;
+    payload: [Payload] extends [never] ? null : Payload | null;
+};
+export type TooltipProviderPropsWithoutHTML = WithChildren<{
+    /**
+     * The delay in milliseconds before the tooltip opens.
+     *
+     * @defaultValue 700
+     */
+    delayDuration?: number;
+    /**
+     * How much time a user has to enter another trigger without
+     * incurring a delay again.
+     * @defaultValue 300
+     */
+    skipDelayDuration?: number;
+    /**
+     * Prevents tooltip from remaining open when hovering over the content.
+     *
+     * @defaultValue false
+     */
+    disableHoverableContent?: boolean;
+    /**
+     * When `true`, the tooltip will not close when you click on the trigger.
+     *
+     * @defaultValue false
+     */
+    disableCloseOnTriggerClick?: boolean;
+    /**
+     * When `true`, the tooltip will be disabled and will not open.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Prevent the tooltip from opening if the focus did not come using
+     * the keyboard.
+     *
+     * @defaultValue false
+     */
+    ignoreNonKeyboardFocus?: boolean;
+}>;
+export type TooltipProviderProps = TooltipProviderPropsWithoutHTML;
+export type TooltipRootPropsWithoutHTML<Payload = never> = Omit<WithChildren<{
+    /**
+     * The open state of the tooltip.
+     *
+     * @defaultValue false
+     */
+    open?: boolean;
+    /**
+     * A callback that will be called when the tooltip is opened or closed.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that will be called when the tooltip is opened or closed.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
+    /**
+     * The delay in milliseconds before the tooltip opens.
+     *
+     * @defaultValue 700
+     */
+    delayDuration?: number;
+    /**
+     * Prevents tooltip from remaining open when hovering over the content.
+     *
+     * @defaultValue false
+     */
+    disableHoverableContent?: boolean;
+    /**
+     * When `true`, the tooltip will not close when you click on the trigger.
+     *
+     * @defaultValue false
+     */
+    disableCloseOnTriggerClick?: boolean;
+    /**
+     * When `true`, the tooltip will be disabled and will not open.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Prevent the tooltip from opening if the focus did not come using
+     * the keyboard.
+     *
+     * @defaultValue false
+     */
+    ignoreNonKeyboardFocus?: boolean;
+    /**
+     * The active trigger id for controlled single tooltip mode.
+     */
+    triggerId?: string | null;
+    /**
+     * Shared tether used to connect detached triggers and infer payload types.
+     */
+    tether?: TooltipTether<Payload> | undefined;
+}>, "children"> & {
+    children?: Snippet | Snippet<[TooltipRootSnippetProps<Payload>]>;
+};
+export type TooltipRootProps<Payload = never> = TooltipRootPropsWithoutHTML<Payload>;
+export type TooltipContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<FloatingLayerContentProps, "content" | "preventScroll"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
+    /**
+     * When `true`, the tooltip will be forced to mount in the DOM.
+     *
+     * Useful for more control over the transition behavior.
+     */
+    forceMount?: boolean;
+}, FloatingContentSnippetProps>;
+export type TooltipContentProps = TooltipContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TooltipContentPropsWithoutHTML>;
+export type TooltipContentStaticPropsWithoutHTML = WithChildNoChildrenSnippetProps<Pick<FloatingLayerContentProps, "dir"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
+    /**
+     * When `true`, the tooltip will be forced to mount in the DOM.
+     *
+     * Useful for more control over the transition behavior.
+     */
+    forceMount?: boolean;
+}, StaticContentSnippetProps>;
+export type TooltipContentStaticProps = TooltipContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TooltipContentStaticPropsWithoutHTML>;
+export type TooltipArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
+export type TooltipArrowProps = ArrowProps;
+export type TooltipPortalPropsWithoutHTML = PortalProps;
+export type TooltipPortalProps = PortalProps;
+export type TooltipTriggerPropsWithoutHTML<Payload = never> = WithChild<{
+    /**
+     * Whether the tooltip trigger is disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | null | undefined;
+    /**
+     * Payload for the trigger used by singleton tooltip root snippets.
+     */
+    payload?: [Payload] extends [never] ? unknown : Payload;
+    /**
+     * Shared tether used to connect detached triggers and infer payload types.
+     */
+    tether?: TooltipTether<Payload> | undefined;
+}>;
+export type TooltipTriggerProps<Payload = never> = TooltipTriggerPropsWithoutHTML<Payload> & Without<BitsPrimitiveButtonAttributes, TooltipTriggerPropsWithoutHTML<Payload>>;

package/dist/bits/tooltip/types.js

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

package/dist/bits/tooltip/utils.d.ts

@@ -0,0 +1 @@
+export declare const TOOLTIP_OPEN_EVENT = "tooltip.open";

package/dist/bits/tooltip/utils.js

@@ -0,0 +1 @@
+export const TOOLTIP_OPEN_EVENT = "tooltip.open";

package/dist/bits/utilities/arrow/arrow.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import type { ArrowProps } from "./types.js";
+	import { useId } from "../../../internal/use-id.js";
+
+	let {
+		id = useId(),
+		children,
+		child,
+		width = 10,
+		height = 5,
+		...restProps
+	}: ArrowProps = $props();
+
+	const mergedProps = $derived(mergeProps(restProps, { id }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>
+		{#if children}
+			{@render children?.()}
+		{:else}
+			<svg {width} {height} viewBox="0 0 30 10" preserveAspectRatio="none" data-arrow="">
+				<polygon points="0,0 30,0 15,10" fill="currentColor" />
+			</svg>
+		{/if}
+	</span>
+{/if}

package/dist/bits/utilities/arrow/arrow.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ArrowProps } from "./types.js";
+declare const Arrow: import("svelte").Component<ArrowProps, {}, "">;
+type Arrow = ReturnType<typeof Arrow>;
+export default Arrow;

package/dist/bits/utilities/arrow/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Arrow } from "./arrow.svelte";
+export type { ArrowProps } from "./types.js";

package/dist/bits/utilities/arrow/index.js

@@ -0,0 +1 @@
+export { default as Arrow } from "./arrow.svelte";

package/dist/bits/utilities/arrow/types.d.ts

@@ -0,0 +1,17 @@
+import type { WithChild } from "../../../internal/types.js";
+import type { BitsPrimitiveSpanAttributes } from "../../../shared/attributes.js";
+export type ArrowPropsWithoutHTML = WithChild<{
+    /**
+     * The width of the arrow in pixels.
+     *
+     * @defaultValue 10
+     */
+    width?: number;
+    /**
+     * The height of the arrow in pixels.
+     *
+     * @defaultValue 5
+     */
+    height?: number;
+}>;
+export type ArrowProps = ArrowPropsWithoutHTML & BitsPrimitiveSpanAttributes;

package/dist/bits/utilities/arrow/types.js

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

package/dist/bits/utilities/config/bits-config.d.ts

@@ -0,0 +1,44 @@
+import { Context } from "runed";
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { BitsConfigPropsWithoutChildren } from "./types.js";
+type BitsConfigStateProps = ReadableBoxedValues<BitsConfigPropsWithoutChildren>;
+export declare const BitsConfigContext: Context<BitsConfigState>;
+/**
+ * Gets the current Bits UI configuration state from the context.
+ *
+ * Returns a default configuration (where all values are `undefined`) if no configuration is found.
+ */
+export declare function getBitsConfig(): Required<ReadableBoxedValues<BitsConfigPropsWithoutChildren>>;
+/**
+ * Creates and sets a new Bits UI configuration state that inherits from parent configs.
+ *
+ * @param opts - Configuration options for this level
+ * @returns The configuration state instance
+ *
+ * @example
+ * ```typescript
+ * // In a component that wants to set a default portal target
+ * const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
+ *
+ * // Child components will inherit this config and can override specific values
+ * const childConfig = useBitsConfig({ someOtherProp: box("value") });
+ * // childConfig still has defaultPortalTo="#some-element" from parent
+ * ```
+ */
+export declare function useBitsConfig(opts: BitsConfigStateProps): BitsConfigState;
+/**
+ * Configuration state that inherits from parent configurations.
+ *
+ * @example
+ * Config resolution:
+ * ```
+ * Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
+ * Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
+ * Level 3: { theme: "light" }   // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
+ * ```
+ */
+export declare class BitsConfigState {
+    readonly opts: Required<BitsConfigStateProps>;
+    constructor(parent: BitsConfigState | null, opts: BitsConfigStateProps);
+}
+export {};

package/dist/bits/utilities/config/bits-config.js

@@ -0,0 +1,92 @@
+import { Context } from "runed";
+import { boxWith } from "svelte-toolbelt";
+export const BitsConfigContext = new Context("BitsConfig");
+/**
+ * Gets the current Bits UI configuration state from the context.
+ *
+ * Returns a default configuration (where all values are `undefined`) if no configuration is found.
+ */
+export function getBitsConfig() {
+    const fallback = new BitsConfigState(null, {});
+    return BitsConfigContext.getOr(fallback).opts;
+}
+/**
+ * Creates and sets a new Bits UI configuration state that inherits from parent configs.
+ *
+ * @param opts - Configuration options for this level
+ * @returns The configuration state instance
+ *
+ * @example
+ * ```typescript
+ * // In a component that wants to set a default portal target
+ * const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
+ *
+ * // Child components will inherit this config and can override specific values
+ * const childConfig = useBitsConfig({ someOtherProp: box("value") });
+ * // childConfig still has defaultPortalTo="#some-element" from parent
+ * ```
+ */
+export function useBitsConfig(opts) {
+    return BitsConfigContext.set(new BitsConfigState(BitsConfigContext.getOr(null), opts));
+}
+/**
+ * Configuration state that inherits from parent configurations.
+ *
+ * @example
+ * Config resolution:
+ * ```
+ * Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
+ * Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
+ * Level 3: { theme: "light" }   // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
+ * ```
+ */
+export class BitsConfigState {
+    opts;
+    constructor(parent, opts) {
+        const resolveConfigOption = createConfigResolver(parent, opts);
+        this.opts = {
+            defaultPortalTo: resolveConfigOption((config) => config.defaultPortalTo),
+            defaultLocale: resolveConfigOption((config) => config.defaultLocale),
+        };
+    }
+}
+/**
+ * Returns a config resolver that resolves a given config option's value.
+ *
+ * The resolver creates reactive boxes that resolve config option values using this priority:
+ * 1. Current level's value (if defined)
+ * 2. Parent level's value (if defined and current is undefined)
+ * 3. `undefined` (if no value is found in either parent or child)
+ *
+ * @param parent - Parent configuration state (null if this is root level)
+ * @param currentOpts - Current level's configuration options
+ *
+ * @example
+ * ```typescript
+ * // Given this hierarchy:
+ * // Root: { defaultPortalTo: "#some-element" }
+ * // Child: { someOtherProp: "value" } // no defaultPortalTo specified
+ *
+ * const resolveConfigOption = createConfigResolver(parent, opts);
+ * const portalTo = resolveConfigOption(config => config.defaultPortalTo);
+ *
+ * // portalTo.current === "#some-element" (inherited from parent)
+ * // even when child didn't specify `defaultPortalTo`
+ * ```
+ */
+function createConfigResolver(parent, currentOpts) {
+    return (getter) => {
+        const configOption = boxWith(() => {
+            // try current opts first
+            const value = getter(currentOpts)?.current;
+            if (value !== undefined)
+                return value;
+            // if no parent, return undefined
+            if (parent === null)
+                return undefined;
+            // get value from parent (which already has its own chain resolved)
+            return getter(parent.opts)?.current;
+        });
+        return configOption;
+    };
+}

package/dist/bits/utilities/config/components/bits-config.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { BitsConfigProps } from "../types.js";
+	import { useBitsConfig } from "../bits-config.js";
+	import { boxWith } from "svelte-toolbelt";
+
+	let { children, defaultPortalTo, defaultLocale }: BitsConfigProps = $props();
+
+	useBitsConfig({
+		defaultPortalTo: boxWith(() => defaultPortalTo),
+		defaultLocale: boxWith(() => defaultLocale),
+	});
+</script>
+
+{@render children?.()}

package/dist/bits/utilities/config/components/bits-config.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BitsConfigProps } from "../types.js";
+declare const BitsConfig: import("svelte").Component<BitsConfigProps, {}, "">;
+type BitsConfig = ReturnType<typeof BitsConfig>;
+export default BitsConfig;

package/dist/bits/utilities/config/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as BitsConfig } from "./components/bits-config.svelte";
+export { getBitsConfig, BitsConfigState } from "./bits-config.js";

package/dist/bits/utilities/config/exports.js

@@ -0,0 +1,2 @@
+export { default as BitsConfig } from "./components/bits-config.svelte";
+export { getBitsConfig, BitsConfigState } from "./bits-config.js";

package/dist/bits/utilities/config/index.d.ts

@@ -0,0 +1 @@
+export * from "./exports.js";

package/dist/bits/utilities/config/index.js

@@ -0,0 +1 @@
+export * from "./exports.js";

package/dist/bits/utilities/config/prop-resolvers.d.ts

@@ -0,0 +1,13 @@
+import { type Getter, type ReadableBox } from "svelte-toolbelt";
+/**
+ * Resolves a locale value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"en"`
+ */
+export declare const resolveLocaleProp: (getProp: Getter<string | undefined>) => ReadableBox<string>;
+/**
+ * Resolves a portal's `to` value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"body"`
+ */
+export declare const resolvePortalToProp: (getProp: Getter<string | Element | undefined>) => ReadableBox<string | Element>;

package/dist/bits/utilities/config/prop-resolvers.js

@@ -0,0 +1,37 @@
+import { boxWith } from "svelte-toolbelt";
+import { getBitsConfig } from "./bits-config.js";
+/**
+ * Creates a generic prop resolver that follows a standard priority chain:
+ * 1. The getter's prop value (if defined)
+ * 2. The config default value (if no getter prop value is defined)
+ * 3. The fallback value (if no config value found)
+ */
+function createPropResolver(configOption, fallback) {
+    return (getProp) => {
+        const config = getBitsConfig();
+        return boxWith(() => {
+            // 1. return the prop's value, if provided
+            const propValue = getProp();
+            if (propValue !== undefined)
+                return propValue;
+            // 2. return the resolved config option value, if available
+            const option = configOption(config).current;
+            if (option !== undefined)
+                return option;
+            // 3. return the fallback if no other value is found
+            return fallback;
+        });
+    };
+}
+/**
+ * Resolves a locale value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"en"`
+ */
+export const resolveLocaleProp = createPropResolver((config) => config.defaultLocale, "en");
+/**
+ * Resolves a portal's `to` value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"body"`
+ */
+export const resolvePortalToProp = createPropResolver((config) => config.defaultPortalTo, "body");

package/dist/bits/utilities/config/types.d.ts

@@ -0,0 +1,13 @@
+import type { WithChildren } from "../../../internal/types.js";
+import type { PortalTarget } from "../portal/types.js";
+export type BitsConfigPropsWithoutChildren = {
+    /**
+     * The default portal `to`/target to use for the `Portal` components throughout the app.
+     */
+    defaultPortalTo?: PortalTarget;
+    /**
+     * The default locale to use for the components that support localization.
+     */
+    defaultLocale?: string;
+};
+export type BitsConfigProps = WithChildren<BitsConfigPropsWithoutChildren>;

package/dist/bits/utilities/config/types.js

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

package/dist/bits/utilities/dismissible-layer/dismissible-layer.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import type { DismissibleLayerImplProps } from "./types.js";
+	import { DismissibleLayerState } from "./use-dismissable-layer.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+
+	let {
+		interactOutsideBehavior = "close",
+		onInteractOutside = noop,
+		onFocusOutside = noop,
+		id,
+		children,
+		enabled,
+		isValidEvent = () => false,
+		ref,
+	}: DismissibleLayerImplProps = $props();
+
+	const dismissibleLayerState = DismissibleLayerState.create({
+		id: boxWith(() => id),
+		interactOutsideBehavior: boxWith(() => interactOutsideBehavior),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		enabled: boxWith(() => enabled),
+		onFocusOutside: boxWith(() => onFocusOutside),
+		isValidEvent: boxWith(() => isValidEvent),
+		ref,
+	});
+</script>
+
+{@render children?.({ props: dismissibleLayerState.props })}

package/dist/bits/utilities/dismissible-layer/dismissible-layer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DismissibleLayerImplProps } from "./types.js";
+declare const DismissibleLayer: import("svelte").Component<DismissibleLayerImplProps, {}, "">;
+type DismissibleLayer = ReturnType<typeof DismissibleLayer>;
+export default DismissibleLayer;

package/dist/bits/utilities/dismissible-layer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DismissibleLayer } from "./dismissible-layer.svelte";
+export type { DismissibleLayerProps } from "./types.js";

package/dist/bits/utilities/dismissible-layer/index.js

@@ -0,0 +1 @@
+export { default as DismissibleLayer } from "./dismissible-layer.svelte";

package/dist/bits/utilities/dismissible-layer/types.d.ts

@@ -0,0 +1,49 @@
+import type { Snippet } from "svelte";
+import type { WritableBox } from "svelte-toolbelt";
+export type InteractOutsideEvent = PointerEvent;
+export type InteractOutsideEventHandler = (e: PointerEvent) => void;
+export type InteractOutsideBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
+export type DismissibleLayerProps = {
+    /**
+     * Callback fired when an outside interaction event completes,
+     * which is either a `pointerup`, `mouseup`, or `touchend`
+     * event, depending on the user's input device.
+     */
+    onInteractOutside?: InteractOutsideEventHandler;
+    /**
+     * Interact outside behavior type.
+     * `close`: Closes the element immediately.
+     * `defer-otherwise-close`: Delegates the action to the parent element. If no parent is found, it closes the element.
+     * `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done.
+     * `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an outside interaction.
+     *
+     * @defaultValue `close`
+     */
+    interactOutsideBehavior?: InteractOutsideBehaviorType;
+    /**
+     * Callback fired when focus leaves the dismissible layer.
+     */
+    onFocusOutside?: (event: FocusEvent) => void;
+};
+export type DismissibleLayerImplProps = {
+    /**
+     * Whether the layer is enabled.
+     */
+    enabled: boolean;
+    /**
+     * ID of the layer.
+     */
+    id: string;
+    /**
+     * Provide a custom event validator function to determine if the event should be
+     * considered a dismissal event. This was added to handle the case where a user
+     * has one context menu open and right clicks on another context menu. We normally ignore
+     * right clicks for "close" events, but in this case we want to close the context menu when
+     * another is open.
+     */
+    isValidEvent?: (e: PointerEvent, node: HTMLElement) => boolean;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    ref: WritableBox<HTMLElement | null>;
+} & DismissibleLayerProps;

package/dist/bits/utilities/dismissible-layer/types.js

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

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type ReadableBox, type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
+import type { DismissibleLayerImplProps, InteractOutsideBehaviorType } from "./types.js";
+interface DismissibleLayerStateOpts extends ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> {
+    ref: WritableBox<HTMLElement | null>;
+}
+export declare class DismissibleLayerState {
+    #private;
+    static create(opts: DismissibleLayerStateOpts): DismissibleLayerState;
+    readonly opts: DismissibleLayerStateOpts;
+    constructor(opts: DismissibleLayerStateOpts);
+    props: {
+        onfocuscapture: () => void;
+        onblurcapture: () => void;
+    };
+}
+export declare function getTopMostDismissableLayer(layersArr?: [DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>][]): [DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>] | undefined;
+export type FocusOutsideEvent = CustomEvent<{
+    originalEvent: FocusEvent;
+}>;
+export {};