@winkintel/bootstrap-svelte 0.0.1

package/dist/Toast/toast.svelte.js

@@ -0,0 +1,83 @@
+import { Context } from '../common/index.js';
+/**
+ * ToastRootState is the state of the Toast component.
+ * It is used to manage the state of the Toast and its children.
+ */
+export class ToastRootState {
+    props;
+    // Default values for toast configuration
+    static DELAY_DEFAULT = 5000;
+    static DO_AUTOHIDE_DEFAULT = true;
+    static IS_SHOWN_DEFAULT = false;
+    static USE_FADE_DEFAULT = true;
+    // Using private field with getter to prevent external mutation without using the toggle method
+    #isShown = $state(ToastRootState.IS_SHOWN_DEFAULT);
+    constructor(props) {
+        this.props = props;
+        this.#isShown = this.props.isShown ?? ToastRootState.IS_SHOWN_DEFAULT;
+    }
+    get isShown() {
+        return this.#isShown;
+    }
+    /**
+     * Toggles the visibility state of the toast
+     * This is the only way to change the isShown state externally
+     */
+    toggleIsShown() {
+        this.#isShown = !this.#isShown;
+    }
+}
+/**
+ * ToastHeaderState is the state of the Toast.Header component.
+ * It is used to manage the state of the Toast.Header and its children.
+ */
+export class ToastHeaderState {
+    props;
+    root;
+    static IS_DISMISSIBLE_DEFAULT = true;
+    /**
+     * Derived state that depends on parent toast's visibility
+     * When the toast root's visibility changes, this will automatically update
+     */
+    isShown = $derived.by(() => this.root.isShown);
+    // Controls whether the close button is displayed in the header
+    isDismissible = $state(ToastHeaderState.IS_DISMISSIBLE_DEFAULT);
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.isDismissible = this.props.isDismissible ?? ToastHeaderState.IS_DISMISSIBLE_DEFAULT;
+    }
+    /**
+     * Event handler for the close button
+     * Delegates to the parent toast's toggle method to maintain a single source of truth
+     */
+    onclick() {
+        this.root.toggleIsShown();
+    }
+}
+/**
+ * Context for sharing toast state across component hierarchy
+ * Uses a unique key to prevent collisions with other contexts
+ */
+const ToastRootContext = new Context('toast-root');
+/**
+ * Creates a new ToastRootState and sets it in the context.
+ * @param props The props of the Toast component.
+ * @returns The created ToastRootState.
+ */
+export function initToastRootState(props) {
+    const rootState = new ToastRootState(props);
+    return ToastRootContext.set(rootState);
+}
+/**
+ * Creates a new ToastHeaderState and sets it in the context.
+ * @param props The props of the Toast.Header component.
+ * @returns The created ToastHeaderState.
+ */
+export function initToastHeaderState(props) {
+    if (!ToastRootContext.exists()) {
+        throw new Error('Toast.Header requires Toast.Root context. Please ensure Toast.Root is initialized before Toast.Header.');
+    }
+    const rootState = ToastRootContext.get();
+    return new ToastHeaderState(props, rootState);
+}

package/dist/Toast/types.d.ts

@@ -0,0 +1,53 @@
+import type { DivElement } from '../common/types.js';
+/**
+ * Specifies the position of toasts within a container
+ *
+ * The naming convention follows a two-part structure:
+ * - Vertical position: top, middle, bottom
+ * - Horizontal position: start, center, end (respects RTL/LTR direction)
+ */
+export type ToastPlacement = 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+/**
+ * Transforms the placement type into a Bootstrap class string.
+ * @param placement the placement of the toast
+ * @returns the corresponding Bootstrap class string
+ */
+export declare const transformToastPlacement: (placement: ToastPlacement) => string;
+/**
+ * Props for the main Toast component
+ *
+ * Controls visibility, animation, timing, and lifecycle events
+ */
+export type ToastRootProps = DivElement & {
+    delay?: number;
+    doAutohide?: boolean;
+    isShown?: boolean;
+    onHide?: EventListener;
+    onHidden?: EventListener;
+    onShow?: EventListener;
+    onShown?: EventListener;
+    useFade?: boolean;
+};
+/**
+ * Props for the Toast header section
+ *
+ * Contains title and optional close button
+ */
+export type ToastHeaderProps = DivElement & {
+    isDismissible?: boolean;
+};
+/**
+ * Props for the Toast body content
+ *
+ * Contains the main toast message
+ */
+export type ToastBodyProps = DivElement;
+/**
+ * Props for the Toast container component
+ *
+ * Manages multiple toasts with positioning control
+ */
+export type ToastContainerProps = DivElement & {
+    isFixed?: boolean;
+    placement?: ToastPlacement;
+};

package/dist/Toast/types.js

@@ -0,0 +1,19 @@
+/**
+ * Transforms the placement type into a Bootstrap class string.
+ * @param placement the placement of the toast
+ * @returns the corresponding Bootstrap class string
+ */
+export const transformToastPlacement = (placement) => {
+    const placementTypeToClassMap = {
+        'top-start': 'top-0 start-0',
+        'top-center': 'top-0 start-50 translate-middle-x',
+        'top-end': 'top-0 end-0',
+        'middle-start': 'top-50 start-0 translate-middle-y',
+        'middle-center': 'top-50 start-50 translate-middle',
+        'middle-end': 'top-50 end-0 translate-middle-y',
+        'bottom-start': 'bottom-0 start-0',
+        'bottom-center': 'bottom-0 start-50 translate-middle-x',
+        'bottom-end': 'bottom-0 end-0'
+    };
+    return placementTypeToClassMap[placement];
+};

package/dist/Tooltip/composition.d.ts

@@ -0,0 +1,3 @@
+export { default as Inner } from './tooltip-inner.svelte';
+export { default as Root } from './tooltip.svelte';
+export type { TooltipInnerProps as InnerProps, TooltipRootProps as RootProps } from './types.js';

package/dist/Tooltip/composition.js

@@ -0,0 +1,2 @@
+export { default as Inner } from './tooltip-inner.svelte';
+export { default as Root } from './tooltip.svelte';

package/dist/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * as Tooltip from './composition.js';

package/dist/Tooltip/index.js

@@ -0,0 +1 @@
+export * as Tooltip from './composition.js';

package/dist/Tooltip/tooltip-inner.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `tooltip-inner-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('tooltip-inner', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Tooltip/tooltip-inner.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Tooltip } from './index.js';
+declare const TooltipInner: import("svelte").Component<Tooltip.InnerProps, {}, "elementRef">;
+type TooltipInner = ReturnType<typeof TooltipInner>;
+export default TooltipInner;

package/dist/Tooltip/tooltip.svelte

@@ -0,0 +1,213 @@
+<!--
+@component
+## Tooltip
+Add small overlay content to any element for housing secondary information or interactive controls.
+
+@example
+```svelte
+<Button id="tooltip-button">Click for Tooltip</Button>
+<Tooltip.Root isShown={true} referenceElementId="tooltip-button">
+    <Tooltip.Header>Tooltip Title</Tooltip.Header>
+    <Tooltip.Body>
+        <p>This is the tooltip content.</p>
+    </Tooltip.Body>
+</Tooltip.Root>
+```
+
+#### Different Triggers
+```svelte
+<Tooltip.Root trigger="click" referenceElementId="click-button">...</Tooltip.Root>
+<Tooltip.Root trigger="hover" referenceElementId="hover-button">...</Tooltip.Root>
+<Tooltip.Root trigger="focus" referenceElementId="focus-button">...</Tooltip.Root>
+```
+#### Placement Options
+```svelte
+<Tooltip.Root placement="top" referenceElementId="top-button">...</Tooltip.Root>
+<Tooltip.Root placement="right" referenceElementId="right-button">...</Tooltip.Root>
+<Tooltip.Root placement="bottom" referenceElementId="bottom-button">...</Tooltip.Root>
+<Tooltip.Root placement="left" referenceElementId="left-button">...</Tooltip.Root>
+```
+#### Custom Container
+```svelte
+<div id="custom-container"></div>
+<Tooltip.Root container="#custom-container" referenceElementId="container-button">...</Tooltip.Root>
+```
+### Props
+- `children` (slot): Content to display inside the tooltip.
+- `class` (string): Optional. Additional CSS classes.
+- `container` (string | HTMLElement | false): Optional. Specifies the container where the tooltip should be appended. Default is 'body'.
+- `elementRef` (HTMLElement): Optional. Reference to the tooltip DOM element.
+- `id` (string): Optional. ID for the tooltip element.
+- `isShown` (boolean): Optional. Controls whether the tooltip is visible.
+- `onHide` (function): Optional. Callback to invoke when the tooltip starts hiding.
+- `onHidden` (function): Optional. Callback to invoke when the tooltip has been hidden.
+- `onShow` (function): Optional. Callback to invoke when the tooltip starts showing.
+- `onShown` (function): Optional. Callback to invoke when the tooltip has been shown.
+- `placement` (string): Optional. Position of the tooltip relative to the trigger element. Options: 'top', 'right', 'bottom', 'left', 'auto'. Default is 'right'.
+- `referenceElementId` (string): Required. ID of the element that triggers the tooltip. It accommodates the id containing a hash or not.
+- `trigger` (string): Optional. Event type that triggers the tooltip. Options: 'click', 'hover', 'focus', or space-separated combinations. Default is 'click'.
+- `type` (string): Optional. Type of the tooltip. Default is 'tooltip'. Can be 'tooltip' or 'popover'.
+- `useFade` (boolean): Optional. Controls whether the tooltip uses a fade transition. Default is true.
+-->
+<script lang="ts">import { hasFocus, noop, uniqueClsx } from '../common/index.js';
+import { Portal } from '../index.js';
+import { createPopper } from '@popperjs/core';
+import { onMount } from 'svelte';
+import { fade } from 'svelte/transition';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, container = false, elementRef = $bindable(null), id, isShown = false, onHide = noop, onHidden = noop, onShow = noop, onShown = noop, placement, referenceElementId, trigger, type = 'tooltip', useFade = true, ...restOfProps } = $props();
+// Set defaults based on type
+let effectiveId = $derived(id || `${type}-${uid}`);
+let effectivePlacement = $derived(placement || (type === 'tooltip' ? 'top' : 'right'));
+let effectiveTrigger = $derived(trigger || (type === 'tooltip' ? 'hover focus' : 'click'));
+const unset = Symbol('unset');
+let previousTrigger = unset;
+let popperInstance = null;
+let popperPlacement = $state('');
+let referenceElement = $state(null);
+let currentPopperPlacement = $derived(popperPlacement || effectivePlacement || 'top');
+let triggers = $derived.by(() => effectiveTrigger.split(' ')); // support space-delimited list of triggers
+let classes = $derived(uniqueClsx(type, {
+    [`bs-${type}-auto`]: currentPopperPlacement === 'auto',
+    [`bs-${type}-start`]: currentPopperPlacement === 'left',
+    [`bs-${type}-end`]: currentPopperPlacement === 'right',
+    [`bs-${type}-top`]: currentPopperPlacement === 'top',
+    [`bs-${type}-bottom`]: currentPopperPlacement === 'bottom',
+    fade: useFade,
+    show: isShown
+}, classValues));
+// Operations...
+const hide = () => (isShown = false);
+const show = () => (isShown = true);
+const toggle = () => {
+    if (triggers.includes('focus') && hasFocus(referenceElement)) {
+        // If the reference element is focused, we don't want to toggle the tooltip
+        return;
+    }
+    isShown = !isShown;
+};
+const addEventListeners = () => {
+    if (!referenceElement) {
+        return;
+    }
+    if (triggers.length === 0) {
+        return;
+    }
+    if (triggers.includes('click')) {
+        referenceElement.addEventListener('click', toggle);
+    }
+    if (triggers.includes('hover')) {
+        referenceElement.addEventListener('mouseenter', show);
+        referenceElement.addEventListener('mouseleave', hide);
+    }
+    if (triggers.includes('focus')) {
+        referenceElement.addEventListener('focusin', show);
+        referenceElement.addEventListener('focusout', hide);
+    }
+};
+const destroyPopper = () => {
+    if (!popperInstance) {
+        return;
+    }
+    popperInstance.destroy();
+    popperInstance = null;
+};
+const removeEventListeners = () => {
+    if (!referenceElement) {
+        return;
+    }
+    referenceElement.removeEventListener('click', toggle);
+    referenceElement.removeEventListener('mouseenter', show);
+    referenceElement.removeEventListener('mouseleave', hide);
+    referenceElement.removeEventListener('focusin', show);
+    referenceElement.removeEventListener('focusout', hide);
+};
+// Event listeners...
+const handleOnHidden = (event) => {
+    destroyPopper();
+    onHidden(event);
+};
+onMount(() => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    if (!referenceElementId) {
+        console.warn(`${type.charAt(0).toUpperCase() + type.slice(1)}: Missing referenceElementId. Unable to find the reference element.`);
+        return;
+    }
+    // accommodate the id containing a hash or not...
+    const elementId = referenceElementId.startsWith('#') ? referenceElementId.substring(1) : referenceElementId;
+    referenceElement = document.querySelector(`#${elementId}`);
+    addEventListeners();
+    return () => {
+        destroyPopper();
+        removeEventListeners();
+    };
+});
+// Listen changes to the `trigger` prop and update the state accordingly...
+$effect(() => {
+    if (previousTrigger !== unset && previousTrigger !== effectiveTrigger) {
+        removeEventListeners();
+        addEventListeners();
+    }
+    previousTrigger = effectiveTrigger;
+});
+// Listen changes to the `isShown` prop and update the state accordingly...
+$effect(() => {
+    if (!isShown || !elementRef || !referenceElement) {
+        return;
+    }
+    destroyPopper();
+    popperInstance = createPopper(referenceElement, elementRef, {
+        placement: effectivePlacement,
+        modifiers: [
+            {
+                name: 'placementUpdated',
+                enabled: true,
+                phase: 'main',
+                fn({ state }) {
+                    // Only support the placement of auto, top, right, bottom, left...
+                    if ((state.placement === 'auto' && popperPlacement !== 'auto') ||
+                        (state.placement === 'top' && popperPlacement !== 'top') ||
+                        (state.placement === 'left' && popperPlacement !== 'left') ||
+                        (state.placement === 'right' && popperPlacement !== 'right') ||
+                        (state.placement === 'bottom' && popperPlacement !== 'bottom')) {
+                        popperPlacement = state.placement;
+                    }
+                }
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: () => {
+                        // Different offset for tooltip vs popover
+                        return [0, type === 'tooltip' ? 6 : 8];
+                    }
+                }
+            }
+        ]
+    });
+});
+let containerElement = $derived(container === false ? 'body' : container);
+</script>
+
+<Portal target={containerElement} disabled={container === false}>
+    {#if isShown}
+        <div
+            bind:this={elementRef}
+            class={classes}
+            data-popper-placement={currentPopperPlacement}
+            id={effectiveId}
+            onintrostart={onShow}
+            onintroend={onShown}
+            onoutrostart={onHide}
+            onoutroend={handleOnHidden}
+            role="tooltip"
+            transition:fade={{ duration: useFade ? 150 : 0 }}
+            {...restOfProps}>
+            <div class={`${type}-arrow`} data-popper-arrow></div>
+            {@render children?.()}
+        </div>
+    {/if}
+</Portal>

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

@@ -0,0 +1,54 @@
+import type { Tooltip } from './index.js';
+/**
+ * ## Tooltip
+ * Add small overlay content to any element for housing secondary information or interactive controls.
+ *
+ * @example
+ * ```svelte
+ * <Button id="tooltip-button">Click for Tooltip</Button>
+ * <Tooltip.Root isShown={true} referenceElementId="tooltip-button">
+ * <Tooltip.Header>Tooltip Title</Tooltip.Header>
+ * <Tooltip.Body>
+ *     <p>This is the tooltip content.</p>
+ * </Tooltip.Body>
+ * </Tooltip.Root>
+ * ```
+ *
+ * #### Different Triggers
+ * ```svelte
+ * <Tooltip.Root trigger="click" referenceElementId="click-button">...</Tooltip.Root>
+ * <Tooltip.Root trigger="hover" referenceElementId="hover-button">...</Tooltip.Root>
+ * <Tooltip.Root trigger="focus" referenceElementId="focus-button">...</Tooltip.Root>
+ * ```
+ * #### Placement Options
+ * ```svelte
+ * <Tooltip.Root placement="top" referenceElementId="top-button">...</Tooltip.Root>
+ * <Tooltip.Root placement="right" referenceElementId="right-button">...</Tooltip.Root>
+ * <Tooltip.Root placement="bottom" referenceElementId="bottom-button">...</Tooltip.Root>
+ * <Tooltip.Root placement="left" referenceElementId="left-button">...</Tooltip.Root>
+ * ```
+ * #### Custom Container
+ * ```svelte
+ * <div id="custom-container"></div>
+ * <Tooltip.Root container="#custom-container" referenceElementId="container-button">...</Tooltip.Root>
+ * ```
+ * ### Props
+ * - `children` (slot): Content to display inside the tooltip.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `container` (string | HTMLElement | false): Optional. Specifies the container where the tooltip should be appended. Default is 'body'.
+ * - `elementRef` (HTMLElement): Optional. Reference to the tooltip DOM element.
+ * - `id` (string): Optional. ID for the tooltip element.
+ * - `isShown` (boolean): Optional. Controls whether the tooltip is visible.
+ * - `onHide` (function): Optional. Callback to invoke when the tooltip starts hiding.
+ * - `onHidden` (function): Optional. Callback to invoke when the tooltip has been hidden.
+ * - `onShow` (function): Optional. Callback to invoke when the tooltip starts showing.
+ * - `onShown` (function): Optional. Callback to invoke when the tooltip has been shown.
+ * - `placement` (string): Optional. Position of the tooltip relative to the trigger element. Options: 'top', 'right', 'bottom', 'left', 'auto'. Default is 'right'.
+ * - `referenceElementId` (string): Required. ID of the element that triggers the tooltip. It accommodates the id containing a hash or not.
+ * - `trigger` (string): Optional. Event type that triggers the tooltip. Options: 'click', 'hover', 'focus', or space-separated combinations. Default is 'click'.
+ * - `type` (string): Optional. Type of the tooltip. Default is 'tooltip'. Can be 'tooltip' or 'popover'.
+ * - `useFade` (boolean): Optional. Controls whether the tooltip uses a fade transition. Default is true.
+ */
+declare const Tooltip: import("svelte").Component<Tooltip.RootProps, {}, "elementRef">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/Tooltip/types.d.ts

@@ -0,0 +1,43 @@
+import type { DivElement, PopperPlacement } from '../common/types.js';
+/**
+ * Defines where the tooltip should be appended in the DOM
+ * - string: CSS selector for the container element
+ * - HTMLElement: Direct reference to a DOM element
+ * - false: Stays within natural DOM placement (no portal/teleport)
+ */
+export type TooltipContainer = string | HTMLElement | false;
+export type TooltipPlacement = PopperPlacement;
+/**
+ * Specifies what user interaction will activate the tooltip
+ * - 'click': Shows on click, hides on second click
+ * - 'hover': Shows on mouseenter, hides on mouseleave
+ * - 'focus': Shows on element focus, hides on blur
+ * - 'manual': Programmatic control only via isShown prop
+ */
+export type TooltipTrigger = 'click' | 'hover' | 'focus' | 'manual';
+/**
+ * Determines visual style and behavior variant
+ * - 'tooltip': Smaller, simpler style for brief hints
+ * - 'popover': Larger with styled header/body areas for more content
+ */
+export type TooltipType = 'tooltip' | 'popover';
+export type TooltipRootProps = DivElement & {
+    container?: TooltipContainer;
+    isShown?: boolean;
+    onHide?: EventListener;
+    onHidden?: EventListener;
+    onShow?: EventListener;
+    onShown?: EventListener;
+    placement?: TooltipPlacement;
+    referenceElementId?: string;
+    trigger?: TooltipTrigger | string;
+    type?: TooltipType;
+    useFade?: boolean;
+};
+/**
+ * Props for the inner content of the tooltip
+ * Uses type to adjust styling based on tooltip or popover variant
+ */
+export type TooltipInnerProps = DivElement & {
+    type?: TooltipType;
+};

package/dist/Tooltip/types.js

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

package/dist/common/context.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A utility class for managing Svelte component context in a type-safe manner.
+ * Provides methods to set, get, and check the existence of context values.
+ * @see https://github.com/svecosystem/runed/blob/runed%400.28.0/packages/runed/src/lib/utilities/context/context.ts
+ */
+export declare class Context<TContext> {
+    #private;
+    /**
+     * @param name The name of the context.
+     * This is used for generating the context key and error messages.
+     */
+    constructor(name: string);
+    /**
+     * The key used to get and set the context.
+     *
+     * It is not recommended to use this value directly.
+     * Instead, use the methods provided by this class.
+     */
+    get key(): symbol;
+    /**
+     * Checks whether this has been set in the context of a parent component.
+     *
+     * Must be called during component initialization.
+     */
+    exists(): boolean;
+    /**
+     * Retrieves the context that belongs to the closest parent component.
+     *
+     * Must be called during component initialization.
+     *
+     * @throws An error if the context does not exist.
+     */
+    get(): TContext;
+    /**
+     * Retrieves the context that belongs to the closest parent component,
+     * or the given fallback value if the context does not exist.
+     *
+     * Must be called during component initialization.
+     */
+    getOr<TFallback>(fallback: TFallback): TContext | TFallback;
+    /**
+     * Associates the given value with the current component and returns it.
+     *
+     * Must be called during component initialization.
+     */
+    set(context: TContext): TContext;
+}

package/dist/common/context.js

@@ -0,0 +1,70 @@
+import { getContext, hasContext, setContext } from 'svelte';
+/**
+ * A utility class for managing Svelte component context in a type-safe manner.
+ * Provides methods to set, get, and check the existence of context values.
+ * @see https://github.com/svecosystem/runed/blob/runed%400.28.0/packages/runed/src/lib/utilities/context/context.ts
+ */
+export class Context {
+    #name;
+    #key;
+    /**
+     * @param name The name of the context.
+     * This is used for generating the context key and error messages.
+     */
+    constructor(name) {
+        this.#name = name;
+        this.#key = Symbol(name);
+    }
+    /**
+     * The key used to get and set the context.
+     *
+     * It is not recommended to use this value directly.
+     * Instead, use the methods provided by this class.
+     */
+    get key() {
+        return this.#key;
+    }
+    /**
+     * Checks whether this has been set in the context of a parent component.
+     *
+     * Must be called during component initialization.
+     */
+    exists() {
+        return hasContext(this.#key);
+    }
+    /**
+     * Retrieves the context that belongs to the closest parent component.
+     *
+     * Must be called during component initialization.
+     *
+     * @throws An error if the context does not exist.
+     */
+    get() {
+        const context = getContext(this.#key);
+        if (context === undefined) {
+            throw new Error(`Context "${this.#name}" not found`);
+        }
+        return context;
+    }
+    /**
+     * Retrieves the context that belongs to the closest parent component,
+     * or the given fallback value if the context does not exist.
+     *
+     * Must be called during component initialization.
+     */
+    getOr(fallback) {
+        const context = getContext(this.#key);
+        if (context === undefined) {
+            return fallback;
+        }
+        return context;
+    }
+    /**
+     * Associates the given value with the current component and returns it.
+     *
+     * Must be called during component initialization.
+     */
+    set(context) {
+        return setContext(this.#key, context);
+    }
+}