@winkintel/bootstrap-svelte 0.0.1

package/dist/Pagination/pagination.svelte.js

@@ -0,0 +1,117 @@
+import { Context } from '../common/index.js';
+import { Pagination } from './index.js';
+/**
+ * Manages the state for the Pagination root component.
+ * Handles the tracking of active and disabled pagination items.
+ * Provides methods to check and set the active and disabled states.
+ */
+export class PaginationRootState {
+    props;
+    #activePaginationItemId = $state('');
+    #disabledPaginationItemId = $state('');
+    constructor(props) {
+        this.props = props;
+        this.isPaginationItemActive = this.isPaginationItemActive.bind(this);
+        this.setPaginationItemActive = this.setPaginationItemActive.bind(this);
+        this.isPaginationItemDisabled = this.isPaginationItemDisabled.bind(this);
+        this.setPaginationItemDisabled = this.setPaginationItemDisabled.bind(this);
+    }
+    isPaginationItemActive(itemId) {
+        return this.#activePaginationItemId === itemId;
+    }
+    setPaginationItemActive(itemId) {
+        this.#activePaginationItemId = itemId;
+    }
+    isPaginationItemDisabled(itemId) {
+        return this.#disabledPaginationItemId === itemId;
+    }
+    setPaginationItemDisabled(itemId) {
+        this.#disabledPaginationItemId = itemId;
+    }
+}
+/**
+ * Manages the state for an individual Pagination item.
+ * Tracks active and disabled states and provides methods to check and set these states.
+ * Initializes its active and disabled states based on the `isActive` and `isDisabled` props.
+ */
+export class PaginationItemState {
+    props;
+    root;
+    isActive = $derived.by(() => this.root.isPaginationItemActive(this.props.id || ''));
+    isDisabled = $derived.by(() => this.root.isPaginationItemDisabled(this.props.id || ''));
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        if (this.props.isActive) {
+            this.root.setPaginationItemActive(this.props.id || '');
+        }
+        if (this.props.isDisabled) {
+            this.root.setPaginationItemDisabled(this.props.id || '');
+        }
+    }
+}
+/**
+ * Manages the state for the Pagination.Link component.
+ * Tracks the active state of the link and provides a method to handle click events.
+ * The click event sets the active state of the corresponding Pagination item.
+ */
+export class PaginationLinkState {
+    props;
+    root;
+    item;
+    constructor(props, root, item) {
+        this.props = props;
+        this.root = root;
+        this.item = item;
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick() {
+        if (this.root.props.isStateful) {
+            this.root.setPaginationItemActive(this.item.props.id || '');
+        }
+    }
+}
+const PaginationRootContext = new Context('pagination-root');
+const PaginationItemContext = new Context('pagination-item');
+/**
+ * Creates a new PaginationRootState and sets it in the PaginationRootContext.
+ * This function initializes the root state for the Pagination component.
+ * @param props The props of the Pagination component.
+ * @returns The created PaginationRootState instance.
+ */
+export function initPaginationRootState(props) {
+    const rootState = new PaginationRootState(props);
+    return PaginationRootContext.set(rootState);
+}
+/**
+ * Creates a new PaginationItemState and sets it in the PaginationItemContext.
+ * This function initializes the state for an individual Pagination item.
+ * @param props The props of the Pagination.Item component.
+ * @returns The created PaginationItemState instance.
+ * @throws Will throw an error if PaginationRootContext is not set.
+ */
+export function initPaginationItemState(props) {
+    if (!PaginationRootContext.exists()) {
+        throw new Error('PaginationRootContext is not set. Please initialize it first.');
+    }
+    const rootState = PaginationRootContext.get();
+    return PaginationItemContext.set(new PaginationItemState(props, rootState));
+}
+/**
+ * Creates a new PaginationLinkState and sets it in the PaginationItemContext.
+ * This function initializes the state for the Pagination.Link component.
+ * @param props The props of the Pagination.Link component.
+ * @returns The created PaginationLinkState instance.
+ * @throws Error if PaginationRootContext or PaginationItemContext is not set.
+ */
+export function initPaginationLinkState(props) {
+    if (!PaginationRootContext.exists()) {
+        throw new Error('PaginationRootContext is not set. Please initialize it first.');
+    }
+    if (!PaginationItemContext.exists()) {
+        throw new Error('PaginationItemContext is not set. Please initialize it first.');
+    }
+    const rootState = PaginationRootContext.get();
+    const itemState = PaginationItemContext.get();
+    return new PaginationLinkState(props, rootState, itemState);
+}

package/dist/Pagination/types.d.ts

@@ -0,0 +1,19 @@
+import type { AnchorElement, ListItemElement, UListElement } from '../common/types.js';
+export type PaginationAlignment = 'start' | 'center' | 'end';
+export type PaginationSize = 'sm' | 'lg';
+export type PaginationRootProps = UListElement & {
+    alignment?: PaginationAlignment;
+    'aria-label'?: string;
+    isStateful?: boolean;
+    size?: PaginationSize;
+};
+export type PaginationItemProps = ListItemElement & {
+    isActive?: boolean;
+    isDisabled?: boolean;
+};
+export type PaginationLinkProps = AnchorElement & {
+    'aria-label'?: string;
+    href?: HTMLAnchorElement['href'];
+    isDisabled?: boolean;
+    onclick?: EventListener;
+};

package/dist/Pagination/types.js

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

package/dist/Placeholder/composition.d.ts

@@ -0,0 +1,3 @@
+export { default as Item } from './placeholder-item.svelte';
+export { default as Root } from './placeholder.svelte';
+export type { PlaceholderItemProps as ItemProps, PlaceholderRootProps as RootProps } from './types.js';

package/dist/Placeholder/composition.js

@@ -0,0 +1,2 @@
+export { default as Item } from './placeholder-item.svelte';
+export { default as Root } from './placeholder.svelte';

package/dist/Placeholder/index.d.ts

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

package/dist/Placeholder/index.js

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

package/dist/Placeholder/placeholder-item.svelte

@@ -0,0 +1,53 @@
+<!--
+@component
+## Placeholder.Item
+A component that represents an individual placeholder element.
+
+@example
+```svelte
+<Placeholder.Item class="col-12" />
+```
+
+#### Width options
+```svelte
+<Placeholder.Item class="col-6" />
+<Placeholder.Item class="w-75" />
+<Placeholder.Item style="width: 25%;" />
+```
+
+#### Size variants
+```svelte
+<Placeholder.Item class="col-12" size="lg" />
+<Placeholder.Item class="col-12" />
+<Placeholder.Item class="col-12" size="sm" />
+<Placeholder.Item class="col-12" size="xs" />
+```
+
+#### Color variants
+```svelte
+<Placeholder.Item class="col-12" colorVariant="primary" />
+<Placeholder.Item class="col-12" colorVariant="secondary" />
+<Placeholder.Item class="col-12" colorVariant="success" />
+<Placeholder.Item class="col-12" colorVariant="danger" />
+<Placeholder.Item class="col-12" colorVariant="warning" />
+<Placeholder.Item class="col-12" colorVariant="info" />
+<Placeholder.Item class="col-12" colorVariant="light" />
+<Placeholder.Item class="col-12" colorVariant="dark" />
+```
+
+### Props
+- `class` (string): Optional. CSS classes for styling the placeholder item.
+- `colorVariant` (string): Optional. Color variant for the placeholder ('primary', 'success', etc.).
+- `elementRef` (HTMLSpanElement): Optional. Reference to the placeholder item DOM element.
+- `id` (string): Optional. ID for the placeholder item element.
+- `size` ('xs' | 'sm' | 'lg'): Optional. Size of the placeholder.
+- `isAnimated` (boolean): Optional. Whether the placeholder should animate, defaults to true.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, colorVariant, elementRef = $bindable(null), size, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('placeholder', size && `placeholder-${size}`, colorVariant && `bg-${colorVariant}`, classValues));
+</script>
+
+<span bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</span>

package/dist/Placeholder/placeholder-item.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Placeholder } from './index.js';
+/**
+ * ## Placeholder.Item
+ * A component that represents an individual placeholder element.
+ *
+ * @example
+ * ```svelte
+ * <Placeholder.Item class="col-12" />
+ * ```
+ *
+ * #### Width options
+ * ```svelte
+ * <Placeholder.Item class="col-6" />
+ * <Placeholder.Item class="w-75" />
+ * <Placeholder.Item style="width: 25%;" />
+ * ```
+ *
+ * #### Size variants
+ * ```svelte
+ * <Placeholder.Item class="col-12" size="lg" />
+ * <Placeholder.Item class="col-12" />
+ * <Placeholder.Item class="col-12" size="sm" />
+ * <Placeholder.Item class="col-12" size="xs" />
+ * ```
+ *
+ * #### Color variants
+ * ```svelte
+ * <Placeholder.Item class="col-12" colorVariant="primary" />
+ * <Placeholder.Item class="col-12" colorVariant="secondary" />
+ * <Placeholder.Item class="col-12" colorVariant="success" />
+ * <Placeholder.Item class="col-12" colorVariant="danger" />
+ * <Placeholder.Item class="col-12" colorVariant="warning" />
+ * <Placeholder.Item class="col-12" colorVariant="info" />
+ * <Placeholder.Item class="col-12" colorVariant="light" />
+ * <Placeholder.Item class="col-12" colorVariant="dark" />
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. CSS classes for styling the placeholder item.
+ * - `colorVariant` (string): Optional. Color variant for the placeholder ('primary', 'success', etc.).
+ * - `elementRef` (HTMLSpanElement): Optional. Reference to the placeholder item DOM element.
+ * - `id` (string): Optional. ID for the placeholder item element.
+ * - `size` ('xs' | 'sm' | 'lg'): Optional. Size of the placeholder.
+ * - `isAnimated` (boolean): Optional. Whether the placeholder should animate, defaults to true.
+ */
+declare const PlaceholderItem: import("svelte").Component<Placeholder.ItemProps, {}, "elementRef">;
+type PlaceholderItem = ReturnType<typeof PlaceholderItem>;
+export default PlaceholderItem;

package/dist/Placeholder/placeholder.svelte

@@ -0,0 +1,37 @@
+<!--
+@component
+## Placeholder.Root
+A container for placeholder items with optional animation effects.
+
+@example
+```svelte
+<Placeholder.Root>
+    <Placeholder.Item width="col-12" />
+    <Placeholder.Item width="col-8" />
+</Placeholder.Root>
+```
+
+#### Animation types
+```svelte
+<Placeholder.Root type="glow">
+    <Placeholder.Item width="col-12" />
+</Placeholder.Root>
+
+<Placeholder.Root type="wave">
+    <Placeholder.Item width="col-12" />
+</Placeholder.Root>
+```
+
+### Props
+- `class` (string): Optional. CSS classes for styling the placeholder container
+- `elementRef` (HTMLDivElement): Optional. Reference to the placeholder container DOM element
+- `type` ('glow' | 'wave'): Optional. Animation type for the placeholders, defaults to 'glow'
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), type = 'glow', ...restOfProps } = $props();
+let classes = $derived(uniqueClsx(`placeholder-${type}`, classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Placeholder/placeholder.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Placeholder } from './index.js';
+/**
+ * ## Placeholder.Root
+ * A container for placeholder items with optional animation effects.
+ *
+ * @example
+ * ```svelte
+ * <Placeholder.Root>
+ * <Placeholder.Item width="col-12" />
+ * <Placeholder.Item width="col-8" />
+ * </Placeholder.Root>
+ * ```
+ *
+ * #### Animation types
+ * ```svelte
+ * <Placeholder.Root type="glow">
+ * <Placeholder.Item width="col-12" />
+ * </Placeholder.Root>
+ *
+ * <Placeholder.Root type="wave">
+ * <Placeholder.Item width="col-12" />
+ * </Placeholder.Root>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. CSS classes for styling the placeholder container
+ * - `elementRef` (HTMLDivElement): Optional. Reference to the placeholder container DOM element
+ * - `type` ('glow' | 'wave'): Optional. Animation type for the placeholders, defaults to 'glow'
+ */
+declare const Placeholder: import("svelte").Component<Placeholder.RootProps, {}, "elementRef">;
+type Placeholder = ReturnType<typeof Placeholder>;
+export default Placeholder;

package/dist/Placeholder/types.d.ts

@@ -0,0 +1,12 @@
+import type { BaseColorVariant, DivElement, SpanElement } from '../common/types.js';
+export type PlaceholderAnimationType = 'glow' | 'wave';
+export type PlaceholderItemColorVariant = BaseColorVariant;
+export type PlaceholderItemSize = 'xs' | 'sm' | 'lg';
+export type PlaceholderRootProps = DivElement & {
+    type?: PlaceholderAnimationType;
+};
+export type PlaceholderItemProps = SpanElement & {
+    colorVariant?: PlaceholderItemColorVariant;
+    isAnimated?: boolean;
+    size?: PlaceholderItemSize;
+};

package/dist/Placeholder/types.js

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

package/dist/Popover/composition.d.ts

@@ -0,0 +1,4 @@
+export { default as Body } from './popover-body.svelte';
+export { default as Header } from './popover-header.svelte';
+export { default as Root } from './popover.svelte';
+export type { PopoverBodyProps as BodyProps, PopoverHeaderProps as HeaderProps, PopoverRootProps as RootProps } from './types.js';

package/dist/Popover/composition.js

@@ -0,0 +1,3 @@
+export { default as Body } from './popover-body.svelte';
+export { default as Header } from './popover-header.svelte';
+export { default as Root } from './popover.svelte';

package/dist/Popover/index.d.ts

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

package/dist/Popover/index.js

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

package/dist/Popover/popover-body.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 = `popover-body-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('popover-body', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Popover/popover-body.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PopoverBody: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type PopoverBody = ReturnType<typeof PopoverBody>;
+export default PopoverBody;

package/dist/Popover/popover-header.svelte

@@ -0,0 +1,11 @@
+<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 = `popover-header-${uid}`, level = 3, ...restOfProps } = $props();
+let elementType = $derived(`h${level}`);
+let classes = $derived(uniqueClsx('popover-header', classValues));
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Popover/popover-header.svelte.d.ts

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

package/dist/Popover/popover.svelte

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

package/dist/Popover/popover.svelte.d.ts

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

package/dist/Popover/types.d.ts

@@ -0,0 +1,20 @@
+import type { DivElement, HeadingElement, HeadingLevels, PopperPlacement } from '../common/types.js';
+export type PopoverContainer = string | HTMLElement | false;
+export type PopoverPlacement = PopperPlacement;
+export type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';
+export type PopoverRootProps = DivElement & {
+    container?: PopoverContainer;
+    isShown?: boolean;
+    onHide?: EventListener;
+    onHidden?: EventListener;
+    onShow?: EventListener;
+    onShown?: EventListener;
+    placement?: PopoverPlacement;
+    referenceElementId?: string;
+    trigger?: PopoverTrigger | string;
+    useFade?: boolean;
+};
+export type PopoverHeaderProps = HeadingElement & {
+    level?: HeadingLevels;
+};
+export type PopoverBodyProps = DivElement;

package/dist/Popover/types.js

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

package/dist/Portal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Portal } from './portal.svelte';
+export * from './types.js';

package/dist/Portal/index.js

@@ -0,0 +1,2 @@
+export { default as Portal } from './portal.svelte';
+export * from './types.js';

package/dist/Portal/portal-host.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">const { children } = $props();
+export {};
+</script>
+
+{@render children?.()}

package/dist/Portal/portal-host.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const PortalHost: import("svelte").Component<$$ComponentProps, {}, "">;
+type PortalHost = ReturnType<typeof PortalHost>;
+export default PortalHost;

package/dist/Portal/portal.svelte

@@ -0,0 +1,69 @@
+<!--
+@component
+## Portal
+Render a component into a different part of the DOM tree.
+
+@example
+```svelte
+<Portal target="body">
+    <div>
+        <h1>Hello from the portal!</h1>
+        <p>This content is rendered as a child of the <code>body</code> element.</p>
+    </div>
+</Portal>
+```
+
+#### Disabled prop
+```svelte
+<Portal target="body" disabled={true}>
+    <div>
+        <p>This content will be rendered inline instead of as a child of the <code>body</code> element.</p>
+    </div>
+</Portal>
+```
+
+### Props
+- `children`: The content to render inside the portal. This can be any valid Svelte component or HTML element.
+- `disabled`: If true, the portal will not be rendered. This is useful for conditionally rendering the portal based on some state.
+- `target`: The target element to render the portal into. This can be a string selector or an element reference.
+-->
+<script lang="ts">import { getAllContexts, mount, unmount } from 'svelte';
+import PortalHost from './portal-host.svelte';
+const { children, target, disabled = false } = $props();
+const allContexts = getAllContexts();
+$effect(() => {
+    let component;
+    let element;
+    if (disabled) {
+        return;
+    }
+    if (!target) {
+        console.warn(`[Portal] target is not defined. Please provide a valid target element.`);
+        return;
+    }
+    if (typeof target === 'string') {
+        element = document.querySelector(target);
+    }
+    else {
+        element = target;
+    }
+    if (!element) {
+        console.warn(`[Portal] Unable to find target element: ${target}`);
+        return;
+    }
+    component = mount(PortalHost, {
+        target: element,
+        props: { children },
+        context: allContexts
+    });
+    return () => {
+        if (component) {
+            unmount(component);
+        }
+    };
+});
+</script>
+
+{#if disabled}
+    {@render children()}
+{/if}