@winkintel/bootstrap-svelte 0.0.1

package/dist/CloseButton/close-button.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { CloseButtonRootProps } from './types.js';
+/**
+ * ## CloseButton
+ * A button component that provides a standardized close button functionality.
+ * Typically used in alerts, modals, and other dismissible components.
+ *
+ * @example
+ * ```svelte
+ * <CloseButton />
+ * ```
+ *
+ * #### Basic close button
+ * ```svelte
+ * <CloseButton />
+ * ```
+ *
+ * #### Disabled state
+ * ```svelte
+ * <CloseButton disabled={true} />
+ * ```
+ * ### Props
+ * - `ariaLabel` (string): Optional. Customizes the aria-label attribute for accessibility (defaults to "Close")
+ * - `class` (string): Optional. Additional CSS classes to apply to the close button
+ * - `disabled` (boolean): Optional. Disables the close button when set to true
+ * - `elementRef` (HTMLElement): Optional. Reference to the button DOM element
+ */
+declare const CloseButton: import("svelte").Component<CloseButtonRootProps, {}, "elementRef">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;

package/dist/CloseButton/index.d.ts

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

package/dist/CloseButton/index.js

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

package/dist/CloseButton/types.d.ts

@@ -0,0 +1,6 @@
+import type { WithElementRef } from '../common/types.js';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type CloseButtonRootProps = WithElementRef<HTMLButtonAttributes> & {
+    disabled?: boolean;
+    ariaLabel?: string;
+};

package/dist/CloseButton/types.js

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

package/dist/Col/col.svelte

@@ -0,0 +1,133 @@
+<!--
+@component
+## Col
+A component that implements Bootstrap's grid column functionality.
+
+@example
+```svelte
+<Row>
+    <Col>Content</Col>
+</Row>
+```
+
+#### With responsive sizing
+```svelte
+<Row>
+    <Col sizing={{ xs: 12, sm: 6, md: 4 }}>Content</Col>
+</Row>
+```
+
+#### With breakpoint-only sizing (using asterisk)
+```svelte
+<Row>
+    <Col sizing={{ sm: '*', md: '*' }}>Content</Col>
+</Row>
+```
+
+#### With simple numeric sizing
+```svelte
+<Row>
+    <Col sizing={6}>Content</Col>
+</Row>
+```
+
+#### With column offsets
+```svelte
+<Row>
+    <Col offset={2}>Offset by 2</Col>
+    <Col offset={{ md: 3, lg: 4 }}>Responsive offset</Col>
+</Row>
+```
+
+#### With column ordering
+```svelte
+<Row>
+    <Col order="first">First in order</Col>
+    <Col order={2}>Second in order</Col>
+    <Col order={{ xs: 'last', lg: 3 }}>Responsive order</Col>
+</Row>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the column DOM element.
+- `offset` (ColOffsetMap | ZeroToEleven): Optional. Column offset configuration. Can be a number between 0-11 or a breakpoint map.
+- `order` (ColOrderMap | ZeroToFive | FirstOrLast): Optional. Column order configuration. Can be a number between 0-5, 'first', 'last', or a breakpoint map.
+- `sizing` (ColSizingMap | OneToTwelve | 'auto'): Optional. Grid sizing configuration. Can be a number between 1-12, 'auto', or a breakpoint map. When using a breakpoint map, you can use '*' to generate a breakpoint-only class (e.g., `col-sm` instead of `col-sm-*`).
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), offset, order, sizing, ...restOfProps } = $props();
+// Generate sizing classes based on the sizing prop
+let sizingClasses = $derived.by(() => {
+    // If sizing is a string and is 'auto', return a single col-auto class
+    if (typeof sizing === 'string' && sizing === 'auto') {
+        return [`col-${sizing}`];
+    }
+    // If sizing is a number (OneToTwelve type), generate a simple col-n class
+    if (typeof sizing === 'number') {
+        return [`col-${sizing}`];
+    }
+    // If sizing is an object (BreakpointSizingMap type), generate breakpoint-specific classes
+    else if (sizing && typeof sizing === 'object') {
+        return Object.entries(sizing).map(([breakpoint, value]) => {
+            // If the breakpoint is 'xs', return 'col-{value}'
+            if (breakpoint === 'xs') {
+                return `col-${value}`;
+            }
+            // If the value is '*', return just 'col-{breakpoint}'
+            if (value === '*') {
+                return `col-${breakpoint}`;
+            }
+            // Otherwise, return 'col-{breakpoint}-{value}'
+            return `col-${breakpoint}-${value}`;
+        });
+    }
+    // Default: no sizing classes
+    return [];
+});
+// Generate offset classes if provided
+let offsetClasses = $derived.by(() => {
+    // If offset is a number (ZeroToEleven type), generate a simple offset-n class
+    if (typeof offset === 'number') {
+        return [`offset-${offset}`];
+    }
+    // If offset is an object (ColOffsetMap type), generate breakpoint-specific classes
+    else if (offset && typeof offset === 'object') {
+        return Object.entries(offset).map(([breakpoint, value]) => {
+            // If the value is '*', return just 'offset-{breakpoint}'
+            // if (value === '*') {
+            //     return `offset-${breakpoint}`;
+            // }
+            // Otherwise, return 'offset-{breakpoint}-{value}'
+            return `offset-${breakpoint}-${value}`;
+        });
+    }
+    // Default: no offset classes
+    return [];
+});
+// Generate order classes if provided
+let orderClasses = $derived.by(() => {
+    // If order is a string (e.g., 'first' or 'last'), return a single order-first or order-last class
+    if (typeof order === 'string' && (order === 'first' || order === 'last')) {
+        return [`order-${order}`];
+    }
+    // If order is a number (ZeroToEleven type), generate a simple order-n class
+    if (typeof order === 'number') {
+        return [`order-${order}`];
+    }
+    // If order is an object (ColOrderMap type), generate breakpoint-specific classes
+    else if (order && typeof order === 'object') {
+        return Object.entries(order).map(([breakpoint, value]) => {
+            // return 'order-{breakpoint}-{value}'
+            return `order-${breakpoint}-${value}`;
+        });
+    }
+    // Default: no order classes
+    return [];
+});
+let classes = $derived(uniqueClsx({ col: sizing === undefined }, ...sizingClasses, ...offsetClasses, ...orderClasses, classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Col/col.svelte.d.ts

@@ -0,0 +1,60 @@
+import type { ColRootProps } from './types.js';
+/**
+ * ## Col
+ * A component that implements Bootstrap's grid column functionality.
+ *
+ * @example
+ * ```svelte
+ * <Row>
+ * <Col>Content</Col>
+ * </Row>
+ * ```
+ *
+ * #### With responsive sizing
+ * ```svelte
+ * <Row>
+ * <Col sizing={{ xs: 12, sm: 6, md: 4 }}>Content</Col>
+ * </Row>
+ * ```
+ *
+ * #### With breakpoint-only sizing (using asterisk)
+ * ```svelte
+ * <Row>
+ * <Col sizing={{ sm: '*', md: '*' }}>Content</Col>
+ * </Row>
+ * ```
+ *
+ * #### With simple numeric sizing
+ * ```svelte
+ * <Row>
+ * <Col sizing={6}>Content</Col>
+ * </Row>
+ * ```
+ *
+ * #### With column offsets
+ * ```svelte
+ * <Row>
+ * <Col offset={2}>Offset by 2</Col>
+ * <Col offset={{ md: 3, lg: 4 }}>Responsive offset</Col>
+ * </Row>
+ * ```
+ *
+ * #### With column ordering
+ * ```svelte
+ * <Row>
+ * <Col order="first">First in order</Col>
+ * <Col order={2}>Second in order</Col>
+ * <Col order={{ xs: 'last', lg: 3 }}>Responsive order</Col>
+ * </Row>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the column DOM element.
+ * - `offset` (ColOffsetMap | ZeroToEleven): Optional. Column offset configuration. Can be a number between 0-11 or a breakpoint map.
+ * - `order` (ColOrderMap | ZeroToFive | FirstOrLast): Optional. Column order configuration. Can be a number between 0-5, 'first', 'last', or a breakpoint map.
+ * - `sizing` (ColSizingMap | OneToTwelve | 'auto'): Optional. Grid sizing configuration. Can be a number between 1-12, 'auto', or a breakpoint map. When using a breakpoint map, you can use '*' to generate a breakpoint-only class (e.g., `col-sm` instead of `col-sm-*`).
+ */
+declare const Col: import("svelte").Component<ColRootProps, {}, "elementRef">;
+type Col = ReturnType<typeof Col>;
+export default Col;

package/dist/Col/index.d.ts

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

package/dist/Col/index.js

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

package/dist/Col/types.d.ts

@@ -0,0 +1,30 @@
+import type { AutoOrAsterisk, DivElement, FirstOrLast, OneToTwelve, ZeroToEleven, ZeroToFive } from '../common/types.js';
+export type ColSizingMap = {
+    xs?: OneToTwelve | AutoOrAsterisk;
+    sm?: OneToTwelve | AutoOrAsterisk;
+    md?: OneToTwelve | AutoOrAsterisk;
+    lg?: OneToTwelve | AutoOrAsterisk;
+    xl?: OneToTwelve | AutoOrAsterisk;
+    xxl?: OneToTwelve | AutoOrAsterisk;
+};
+export type ColOffsetMap = {
+    xs?: ZeroToEleven;
+    sm?: ZeroToEleven;
+    md?: ZeroToEleven;
+    lg?: ZeroToEleven;
+    xl?: ZeroToEleven;
+    xxl?: ZeroToEleven;
+};
+export type ColOrderMap = {
+    xs?: ZeroToFive | FirstOrLast;
+    sm?: ZeroToFive | FirstOrLast;
+    md?: ZeroToFive | FirstOrLast;
+    lg?: ZeroToFive | FirstOrLast;
+    xl?: ZeroToFive | FirstOrLast;
+    xxl?: ZeroToFive | FirstOrLast;
+};
+export type ColRootProps = DivElement & {
+    sizing?: ColSizingMap | OneToTwelve | 'auto';
+    offset?: ColOffsetMap | ZeroToEleven;
+    order?: ColOrderMap | ZeroToFive | FirstOrLast;
+};

package/dist/Col/types.js

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

package/dist/Collapse/collapse-aria-attachment.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { Attachment } from 'svelte/attachments';
+import type { CollapseAriaOptions } from './types.js';
+export declare function collapseAria(options: CollapseAriaOptions): Attachment<HTMLElement>;

package/dist/Collapse/collapse-aria-attachment.svelte.js

@@ -0,0 +1,32 @@
+export function collapseAria(options) {
+    return (element) => {
+        // Sanity check the options...
+        if (!options || typeof options !== 'object') {
+            throw new Error('CollapseAria: options must be an object');
+        }
+        if (options.ariaControls === undefined) {
+            throw new Error('CollapseAria: options.ariaControls is required');
+        }
+        if (typeof options.ariaExpanded !== 'boolean') {
+            throw new Error('CollapseAria: options.ariaExpanded must be a boolean');
+        }
+        // Update the aria-expanded attribute based on isExpanded option
+        element.setAttribute('aria-expanded', options.ariaExpanded.toString());
+        // Set the aria-controls attribute to link to the controlled element
+        if (!element.hasAttribute('aria-controls')) {
+            element.setAttribute('aria-controls', options.ariaControls);
+        }
+        // If the element is not a button, set role="button" for accessibility
+        if (element.tagName.toLowerCase() !== 'button' && !element.hasAttribute('role')) {
+            element.setAttribute('role', 'button');
+        }
+        // Return cleanup function that will be called when the attachment is removed
+        return () => {
+            element.removeAttribute('aria-expanded');
+            element.removeAttribute('aria-controls');
+            if (element.getAttribute('role') === 'button') {
+                element.removeAttribute('role');
+            }
+        };
+    };
+}

package/dist/Collapse/collapse.svelte

@@ -0,0 +1,63 @@
+<!--
+@component
+## Collapse
+A collapsible component that can toggle content visibility with a smooth animation.
+Supports both vertical and horizontal collapse directions.
+
+@example
+```svelte
+<Collapse isExpanded={true}>
+    Content that can be toggled
+</Collapse>
+```
+
+#### Basic collapse
+```svelte
+<Collapse isExpanded={showContent}>
+    <div class="card card-body">
+        Some collapsible content
+    </div>
+</Collapse>
+```
+
+#### Horizontal collapse
+```svelte
+<Collapse isExpanded={showContent} isHorizontal={true}>
+    <div class="card card-body" style="width: 200px;">
+        Horizontally collapsing content
+    </div>
+</Collapse>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the collapse
+- `transitionDuration` (number): Optional. Duration of the collapse transition in milliseconds. Default is 350ms.
+- `elementRef` (HTMLElement): Optional. Reference to the collapse DOM element
+- `isExpanded` (boolean): Optional. Controls the visibility state of the collapse
+- `isHorizontal` (boolean): Optional. Enables horizontal collapse animation instead of vertical. Only the `width` style on the child element is required.
+- `onCollapse` (function): Optional. Callback triggered when the collapse starts hiding
+- `onCollapsed` (function): Optional. Callback triggered when the collapse has finished hiding
+- `onExpand` (function): Optional. Callback triggered when the collapse starts showing
+- `onExpanded` (function): Optional. Callback triggered when the collapse has finished showing
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+import { collapseIn, collapseOut } from './transition.js';
+let { children, class: classValues, transitionDuration: _transitionDuration = 350, elementRef = $bindable(null), isHorizontal = false, isExpanded = false, onCollapse = noop, onCollapsed = noop, onExpand = noop, onExpanded = noop, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('collapse', { 'collapse-horizontal': isHorizontal }, { show: isExpanded }, classValues));
+</script>
+
+{#if isExpanded}
+    <div
+        bind:this={elementRef}
+        class={classes}
+        onintrostart={onExpand}
+        onintroend={onExpanded}
+        onoutrostart={onCollapse}
+        onoutroend={onCollapsed}
+        in:collapseIn={{ isHorizontal }}
+        out:collapseOut={{ isHorizontal }}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}

package/dist/Collapse/collapse.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { CollapseRootProps } from './index.js';
+/**
+ * ## Collapse
+ * A collapsible component that can toggle content visibility with a smooth animation.
+ * Supports both vertical and horizontal collapse directions.
+ *
+ * @example
+ * ```svelte
+ * <Collapse isExpanded={true}>
+ * Content that can be toggled
+ * </Collapse>
+ * ```
+ *
+ * #### Basic collapse
+ * ```svelte
+ * <Collapse isExpanded={showContent}>
+ * <div class="card card-body">
+ *     Some collapsible content
+ * </div>
+ * </Collapse>
+ * ```
+ *
+ * #### Horizontal collapse
+ * ```svelte
+ * <Collapse isExpanded={showContent} isHorizontal={true}>
+ * <div class="card card-body" style="width: 200px;">
+ *     Horizontally collapsing content
+ * </div>
+ * </Collapse>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the collapse
+ * - `transitionDuration` (number): Optional. Duration of the collapse transition in milliseconds. Default is 350ms.
+ * - `elementRef` (HTMLElement): Optional. Reference to the collapse DOM element
+ * - `isExpanded` (boolean): Optional. Controls the visibility state of the collapse
+ * - `isHorizontal` (boolean): Optional. Enables horizontal collapse animation instead of vertical. Only the `width` style on the child element is required.
+ * - `onCollapse` (function): Optional. Callback triggered when the collapse starts hiding
+ * - `onCollapsed` (function): Optional. Callback triggered when the collapse has finished hiding
+ * - `onExpand` (function): Optional. Callback triggered when the collapse starts showing
+ * - `onExpanded` (function): Optional. Callback triggered when the collapse has finished showing
+ */
+declare const Collapse: import("svelte").Component<CollapseRootProps, {}, "elementRef">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;

package/dist/Collapse/index.d.ts

@@ -0,0 +1,3 @@
+export * from './collapse-aria-attachment.svelte.js';
+export { default as Collapse } from './collapse.svelte';
+export * from './types.js';

package/dist/Collapse/index.js

@@ -0,0 +1,3 @@
+export * from './collapse-aria-attachment.svelte.js';
+export { default as Collapse } from './collapse.svelte';
+export * from './types.js';

package/dist/Collapse/transition.d.ts

@@ -0,0 +1,5 @@
+import type { TransitionConfig } from 'svelte/transition';
+import type { CollapseTransitionParams } from './types.js';
+export declare function collapseIn(node: HTMLElement, params: CollapseTransitionParams): TransitionConfig;
+export declare function collapseOut(node: HTMLElement, params: CollapseTransitionParams): TransitionConfig;
+export declare function getTransitionDuration(element: HTMLElement | null | undefined): number;

package/dist/Collapse/transition.js

@@ -0,0 +1,75 @@
+export function collapseIn(node, params) {
+    const isHorizontal = params.isHorizontal;
+    // Choose dimension to animate: width for horizontal, height for vertical
+    const stylePropName = isHorizontal ? 'width' : 'height';
+    // Bootstrap collapse semantics: start with "collapsing" state, remove "collapse" and "show"
+    node.classList.add('collapsing');
+    node.classList.remove('collapse', 'show');
+    node.style[stylePropName] = '0';
+    const duration = getTransitionDuration(node);
+    return {
+        duration,
+        css: (_progress, _remaining) => 'overflow: hidden;',
+        // Svelte calls tick with progress from 0 to 1 during the transition
+        tick: (progress, _remaining) => {
+            if (progress < 1) {
+                // Mid-transition: set dimension to full scroll size to trigger CSS transition
+                if (isHorizontal) {
+                    node.style.width = `${node.scrollWidth}px`;
+                }
+                else {
+                    node.style.height = `${node.scrollHeight}px`;
+                }
+            }
+            else {
+                // Completion: remove "collapsing", add "collapse" and "show", clear inline styles
+                node.classList.remove('collapsing');
+                node.classList.add('collapse', 'show');
+                node.style[stylePropName] = '';
+            }
+        }
+    };
+}
+export function collapseOut(node, params) {
+    // Choose dimension to animate: width for horizontal, height for vertical
+    const dimension = params.isHorizontal ? 'width' : 'height';
+    // Set initial dimension to current size, then transition to 0
+    node.style[dimension] = `${node.getBoundingClientRect()[dimension]}px`;
+    // Bootstrap collapse semantics: start with "collapsing" state, remove "collapse" and "show"
+    node.classList.add('collapsing');
+    node.classList.remove('collapse', 'show');
+    const duration = getTransitionDuration(node);
+    return {
+        duration,
+        css: (_progress, _remaining) => 'overflow: hidden;',
+        // Svelte calls tick with progress from 1 to 0 during the out transition
+        tick: (progress, _remaining) => {
+            if (progress > 0) {
+                // Mid-transition: clear dimension to allow CSS transition to 0
+                node.style[dimension] = '';
+            }
+            else if (progress === 0) {
+                // Completion: remove "collapsing", add "collapse" (but not "show")
+                node.classList.remove('collapsing');
+                node.classList.add('collapse');
+            }
+        }
+    };
+}
+export function getTransitionDuration(element) {
+    if (!element)
+        return 0;
+    // Read CSS transition-duration and transition-delay from computed styles
+    let { transitionDuration, transitionDelay } = window.getComputedStyle(element);
+    const floatTransitionDuration = Number.parseFloat(transitionDuration);
+    const floatTransitionDelay = Number.parseFloat(transitionDelay);
+    // Return 0 if no transition is configured
+    if (!floatTransitionDuration && !floatTransitionDelay) {
+        return 0;
+    }
+    // If multiple durations are defined (comma-separated), take the first one
+    transitionDuration = transitionDuration.split(',')[0];
+    transitionDelay = transitionDelay.split(',')[0];
+    // Return total duration in milliseconds (duration + delay)
+    return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000;
+}

package/dist/Collapse/types.d.ts

@@ -0,0 +1,18 @@
+import type { DivElement } from '../common/types.js';
+export type CollapseTransitionStylePropName = 'width' | 'height';
+export type CollapseTransitionParams = {
+    isHorizontal?: boolean;
+};
+export type CollapseRootProps = DivElement & {
+    isHorizontal?: boolean;
+    isExpanded?: boolean;
+    onCollapse?: EventListener;
+    onCollapsed?: EventListener;
+    onExpand?: EventListener;
+    onExpanded?: EventListener;
+    transitionDuration?: number;
+};
+export type CollapseAriaOptions = {
+    ariaControls: string;
+    ariaExpanded: boolean;
+};

package/dist/Collapse/types.js

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

package/dist/Container/container.svelte

@@ -0,0 +1,46 @@
+<!--
+@component
+## Container
+Container component that sets a max-width at various breakpoints.
+
+@example
+```svelte
+<Container>
+    Content goes here
+</Container>
+```
+
+#### Fluid container example
+```svelte
+<Container isFluid={true}>
+    Content goes here, spanning the entire width of viewport
+</Container>
+```
+
+#### Responsive container example
+```svelte
+<Container breakpoint="md">
+    Content has a max-width up to the md breakpoint
+</Container>
+```
+
+### Props
+- `breakpoint` (string): Optional. Breakpoint at which the container becomes responsive ('sm', 'md', 'lg', 'xl', 'xxl')
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element
+- `elementType` (string): Optional. HTML element type to render as (default is 'div'). Can be 'article', 'aside', 'footer', etc.
+- `isFluid` (boolean): Optional. Makes the container full-width, spanning the entire viewport width
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { breakpoint, children, class: classValues, elementRef = $bindable(null), elementType = 'div', isFluid = false, ...restOfProps } = $props();
+// Build class string based on props
+let classes = $derived(uniqueClsx({
+    'container-fluid': isFluid,
+    [`container-${breakpoint}`]: !isFluid && breakpoint && breakpoint !== 'xs',
+    container: !isFluid && (!breakpoint || breakpoint === 'xs')
+}, classValues));
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Container/container.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { ContainerRootProps } from './types.js';
+/**
+ * ## Container
+ * Container component that sets a max-width at various breakpoints.
+ *
+ * @example
+ * ```svelte
+ * <Container>
+ * Content goes here
+ * </Container>
+ * ```
+ *
+ * #### Fluid container example
+ * ```svelte
+ * <Container isFluid={true}>
+ * Content goes here, spanning the entire width of viewport
+ * </Container>
+ * ```
+ *
+ * #### Responsive container example
+ * ```svelte
+ * <Container breakpoint="md">
+ * Content has a max-width up to the md breakpoint
+ * </Container>
+ * ```
+ *
+ * ### Props
+ * - `breakpoint` (string): Optional. Breakpoint at which the container becomes responsive ('sm', 'md', 'lg', 'xl', 'xxl')
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element
+ * - `elementType` (string): Optional. HTML element type to render as (default is 'div'). Can be 'article', 'aside', 'footer', etc.
+ * - `isFluid` (boolean): Optional. Makes the container full-width, spanning the entire viewport width
+ */
+declare const Container: import("svelte").Component<ContainerRootProps, {}, "elementRef">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/Container/index.d.ts

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

package/dist/Container/index.js

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

package/dist/Container/types.d.ts

@@ -0,0 +1,8 @@
+import type { BaseBreakpoint, DivElement } from '../common/types.js';
+export type ContainerBreakpoint = BaseBreakpoint;
+export type ContainerElementType = 'article' | 'aside' | 'div' | 'footer' | 'header' | 'main' | 'section';
+export type ContainerRootProps = DivElement & {
+    breakpoint?: ContainerBreakpoint;
+    elementType?: ContainerElementType;
+    isFluid?: boolean;
+};

package/dist/Container/types.js

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

package/dist/Dropdown/composition.d.ts

@@ -0,0 +1,8 @@
+export { default as Divider } from './dropdown-divider.svelte';
+export { default as Header } from './dropdown-header.svelte';
+export { default as ItemText } from './dropdown-item-text.svelte';
+export { default as Item } from './dropdown-item.svelte';
+export { default as Menu } from './dropdown-menu.svelte';
+export { default as Toggle } from './dropdown-toggle.svelte';
+export { default as Root } from './dropdown.svelte';
+export type { DropdownDividerProps as DividerProps, DropdownHeaderProps as HeaderProps, DropdownItemProps as ItemProps, DropdownTextProps as ItemTextProps, DropdownMenuProps as MenuProps, DropdownRootProps as RootProps, DropdownToggleProps as ToggleProps } from './types.js';