@winkintel/bootstrap-svelte 0.0.1

package/dist/common/css.d.ts

@@ -0,0 +1,71 @@
+import { type EasingFunction } from 'bezier-easing';
+import clsx from 'clsx';
+/**
+ * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0.25, 0.1, 0.25, 1).
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export declare const ease: EasingFunction;
+/**
+ * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0.42, 0, 1, 1).
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export declare const easeIn: EasingFunction;
+/**
+ * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0, 0, 0.58, 1).
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-out
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export declare const easeOut: EasingFunction;
+/**
+ * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0.42, 0, 0.58, 1).
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in-out
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export declare const easeInOut: EasingFunction;
+/**
+ * This easing function will match the CSS `cubic-bezier()` easing function using a cubic Bezier curve defined by the points (0, 0, 1, 1).
+ * @param x1 A number between 0 and 1 that defines the x-coordinate of the first control point of the cubic Bezier curve.
+ * @param y1 A number between 0 and 1 that defines the y-coordinate of the first control point of the cubic Bezier curve.
+ * @param x2 A number between 0 and 1 that defines the x-coordinate of the second control point of the cubic Bezier curve.
+ * @param y2 A number between 0 and 1 that defines the y-coordinate of the second control point of the cubic Bezier curve.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export declare const cubicBezier: (x1: number, y1: number, x2: number, y2: number) => EasingFunction;
+/**
+ * A utility function that wraps the `clsx` function to remove duplicate class names and reserve the order of appearance.
+ * @param args - The same input parameters as the `clsx` function.
+ * @returns A string containing unique class names.
+ */
+export declare function uniqueClsx(...args: Parameters<typeof clsx>): string;
+export type CSSProperties = {
+    [key: string]: string | number;
+};
+/**
+ * Converts a JavaScript style object to a CSS string
+ * @param {CSSProperties} styleObj - Object with camelCase style properties
+ * @returns {string} CSS string with kebab-case properties
+ *
+ * @example
+ * const styleObj = {
+ *     backgroundColor: 'red',
+ *     fontSize: '16px',
+ *     marginTop: '10px'
+ * };
+ * const cssString = toStyle(styleObj);
+ * console.log(cssString); // "background-color: red; font-size: 16px; margin-top: 10px"
+ */
+export declare function toStyle(styleObj: CSSProperties): string;
+/**
+ * Converts a CSS string to a JavaScript style object
+ * @param {string|null|undefined} cssString - CSS string with kebab-case properties
+ * @returns {CSSProperties} Object with camelCase style properties
+ *
+ * @example
+ * const cssString = "background-color: red; font-size: 16px; margin-top: 10px";
+ * const styleObj = fromStyle(cssString);
+ * console.log(styleObj); // { backgroundColor: 'red', fontSize: '16px', marginTop: '10px' }
+ */
+export declare function fromStyle(cssString: string | null | undefined): CSSProperties;

package/dist/common/css.js

@@ -0,0 +1,133 @@
+import BezierEasing, {} from 'bezier-easing';
+import clsx from 'clsx';
+/**
+ * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0.25, 0.1, 0.25, 1).
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export const ease = BezierEasing(0.25, 0.1, 0.25, 1);
+/**
+ * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0.42, 0, 1, 1).
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export const easeIn = BezierEasing(0.42, 0, 1, 1);
+/**
+ * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0, 0, 0.58, 1).
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-out
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export const easeOut = BezierEasing(0, 0, 0.58, 1);
+/**
+ * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0.42, 0, 0.58, 1).
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in-out
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export const easeInOut = BezierEasing(0.42, 0, 0.58, 1);
+/**
+ * This easing function will match the CSS `cubic-bezier()` easing function using a cubic Bezier curve defined by the points (0, 0, 1, 1).
+ * @param x1 A number between 0 and 1 that defines the x-coordinate of the first control point of the cubic Bezier curve.
+ * @param y1 A number between 0 and 1 that defines the y-coordinate of the first control point of the cubic Bezier curve.
+ * @param x2 A number between 0 and 1 that defines the x-coordinate of the second control point of the cubic Bezier curve.
+ * @param y2 A number between 0 and 1 that defines the y-coordinate of the second control point of the cubic Bezier curve.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier
+ * @returns {EasingFunction} The easing function: (input: number): number;
+ */
+export const cubicBezier = (x1, y1, x2, y2) => {
+    return BezierEasing(x1, y1, x2, y2);
+};
+/**
+ * A utility function that wraps the `clsx` function to remove duplicate class names and reserve the order of appearance.
+ * @param args - The same input parameters as the `clsx` function.
+ * @returns A string containing unique class names.
+ */
+export function uniqueClsx(...args) {
+    const classString = clsx(...args);
+    // Early return for empty strings
+    if (!classString) {
+        return '';
+    }
+    // Using a regex split will normalize whitespace and split simultaneously...
+    const classes = classString.split(/\s+/);
+    const seen = new Set();
+    const result = [];
+    for (let i = 0; i < classes.length; i++) {
+        const cls = classes[i];
+        if (cls && !seen.has(cls)) {
+            seen.add(cls);
+            result.push(cls);
+        }
+    }
+    return result.join(' ');
+}
+/**
+ * Converts a JavaScript style object to a CSS string
+ * @param {CSSProperties} styleObj - Object with camelCase style properties
+ * @returns {string} CSS string with kebab-case properties
+ *
+ * @example
+ * const styleObj = {
+ *     backgroundColor: 'red',
+ *     fontSize: '16px',
+ *     marginTop: '10px'
+ * };
+ * const cssString = toStyle(styleObj);
+ * console.log(cssString); // "background-color: red; font-size: 16px; margin-top: 10px"
+ */
+export function toStyle(styleObj) {
+    if (!styleObj || typeof styleObj !== 'object') {
+        return '';
+    }
+    return Object.entries(styleObj)
+        .map(([key, value]) => {
+        // Convert camelCase to kebab-case (e.g., flexDirection to flex-direction)
+        const kebabKey = key.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+        return `${kebabKey}: ${value}`;
+    })
+        .join(';');
+}
+/**
+ * Converts a CSS string to a JavaScript style object
+ * @param {string|null|undefined} cssString - CSS string with kebab-case properties
+ * @returns {CSSProperties} Object with camelCase style properties
+ *
+ * @example
+ * const cssString = "background-color: red; font-size: 16px; margin-top: 10px";
+ * const styleObj = fromStyle(cssString);
+ * console.log(styleObj); // { backgroundColor: 'red', fontSize: '16px', marginTop: '10px' }
+ */
+export function fromStyle(cssString) {
+    if (!cssString || typeof cssString !== 'string') {
+        return {};
+    }
+    const styleObj = {};
+    // Split the string by semicolons and process each style declaration
+    cssString.split(';').forEach((declaration) => {
+        // Skip empty declarations
+        if (!declaration.trim()) {
+            return;
+        }
+        // Split the declaration into property and value
+        const [property, ...valueParts] = declaration.split(':');
+        // Handle case where there might be colons in the value (like in data URLs)
+        const value = valueParts.join(':').trim();
+        const trimmedProperty = property?.trim();
+        if (!trimmedProperty || !value) {
+            return;
+        }
+        let camelProperty;
+        // Special handling for CSS custom properties (variables)
+        if (trimmedProperty.startsWith('--')) {
+            // Keep CSS variables as-is, don't convert to camelCase
+            camelProperty = trimmedProperty;
+        }
+        else {
+            // Convert kebab-case to camelCase (e.g., flex-direction to flexDirection)
+            camelProperty = trimmedProperty.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+        }
+        // Try to convert numeric strings to numbers, but not for CSS variables or var() functions
+        const parsedValue = !isNaN(Number(value)) && value.trim() !== '' && !value.includes('var(') ? Number(value) : value;
+        styleObj[camelProperty] = parsedValue;
+    });
+    return styleObj;
+}

package/dist/common/dom.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Gets the value of an attribute from an HTML element
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ * @returns The attribute value or null if not found
+ */
+export declare const getAttribute: (element: HTMLElement | null | undefined, attribute: string) => string | null;
+/**
+ * Checks if an HTML element has a specific attribute
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ * @returns Whether the element has the attribute
+ */
+export declare const hasAttribute: (element: HTMLElement | null | undefined, attribute: string) => boolean;
+/**
+ * Checks if the given element has focus.
+ * @param element - The HTML element to check
+ * @returns {boolean} True if the element has focus, false otherwise
+ */
+export declare const hasFocus: (element: HTMLElement | null | undefined) => boolean;
+/**
+ * Checks if an HTML element is disabled.
+ * @param element - The HTML element to check
+ * @returns {boolean} True if the element is disabled, false otherwise.
+ */
+export declare const isDisabled: (element: HTMLElement | null | undefined) => boolean;
+/**
+ * Checks if the document is in RTL (right-to-left) mode
+ * @returns {boolean} True if the document is in RTL mode, false otherwise
+ */
+export declare const isRTL: () => boolean;
+/**
+ * Removes an attribute from an HTML element
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ */
+export declare const removeAttribute: (element: HTMLElement | null | undefined, attribute: string) => void;
+/**
+ * Sets an attribute on an HTML element
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ * @param value - The attribute value
+ */
+export declare const setAttribute: (element: HTMLElement | null | undefined, attribute: string, value: string) => void;
+/**
+ * Toggles an attribute on an HTML element
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ * @param defaultValue - The default value to set when adding the attribute
+ */
+export declare const toggleAttribute: (element: HTMLElement | null | undefined, attribute: string, defaultValue?: string) => void;

package/dist/common/dom.js

@@ -0,0 +1,98 @@
+/**
+ * Gets the value of an attribute from an HTML element
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ * @returns The attribute value or null if not found
+ */
+export const getAttribute = (element, attribute) => {
+    if (!element) {
+        return null;
+    }
+    return element.getAttribute(attribute);
+};
+/**
+ * Checks if an HTML element has a specific attribute
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ * @returns Whether the element has the attribute
+ */
+export const hasAttribute = (element, attribute) => {
+    if (!element) {
+        return false;
+    }
+    return element.hasAttribute(attribute);
+};
+/**
+ * Checks if the given element has focus.
+ * @param element - The HTML element to check
+ * @returns {boolean} True if the element has focus, false otherwise
+ */
+export const hasFocus = (element) => {
+    if (!element) {
+        return false;
+    }
+    return element === document.activeElement;
+};
+/**
+ * Checks if an HTML element is disabled.
+ * @param element - The HTML element to check
+ * @returns {boolean} True if the element is disabled, false otherwise.
+ */
+export const isDisabled = (element) => {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+        return true;
+    }
+    if (element.classList.contains('disabled')) {
+        return true;
+    }
+    // Check if it's an input, button, or other element with a disabled property
+    if ('disabled' in element) {
+        return element.disabled;
+    }
+    return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false';
+};
+/**
+ * Checks if the document is in RTL (right-to-left) mode
+ * @returns {boolean} True if the document is in RTL mode, false otherwise
+ */
+export const isRTL = () => typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+/**
+ * Removes an attribute from an HTML element
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ */
+export const removeAttribute = (element, attribute) => {
+    if (!element) {
+        return;
+    }
+    element.removeAttribute(attribute);
+};
+/**
+ * Sets an attribute on an HTML element
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ * @param value - The attribute value
+ */
+export const setAttribute = (element, attribute, value) => {
+    if (!element) {
+        return;
+    }
+    element.setAttribute(attribute, value);
+};
+/**
+ * Toggles an attribute on an HTML element
+ * @param element - The HTML element
+ * @param attribute - The attribute name
+ * @param defaultValue - The default value to set when adding the attribute
+ */
+export const toggleAttribute = (element, attribute, defaultValue = '') => {
+    if (!element) {
+        return;
+    }
+    if (hasAttribute(element, attribute)) {
+        removeAttribute(element, attribute);
+    }
+    else {
+        setAttribute(element, attribute, defaultValue);
+    }
+};

package/dist/common/index.d.ts

@@ -0,0 +1,6 @@
+export * from './context.js';
+export * from './css.js';
+export * from './dom.js';
+export * from './noop.js';
+export * from './scrollbar.js';
+export type * from './types.js';

package/dist/common/index.js

@@ -0,0 +1,5 @@
+export * from './context.js';
+export * from './css.js';
+export * from './dom.js';
+export * from './noop.js';
+export * from './scrollbar.js';

package/dist/common/nav-tab.svelte.d.ts

@@ -0,0 +1,88 @@
+import type { Nav } from '../Nav/index.js';
+import type { Tab } from '../Tab/index.js';
+/**
+ * Manages the state for the Nav root component.
+ * Handles the tracking of active nav links and provides methods to set them.
+ * Supports both tab and non-tab navigation.
+ */
+export declare class NavRootState {
+    #private;
+    readonly props: Nav.RootProps;
+    constructor(props: Nav.RootProps);
+    isNavLinkActive(navLinkId: string): boolean;
+    registerNavLinkState(linkState: NavLinkState): void;
+    setNavLinkActive(navLinkId: string): void;
+}
+/**
+ * Manages the state for an individual Nav link.
+ * Tracks active state and provides methods to handle clicks.
+ */
+export declare class NavLinkState {
+    readonly props: Nav.LinkProps;
+    readonly root: TabRootState | NavRootState;
+    isActive: boolean;
+    ariaControls: string | undefined;
+    readonly isTab: boolean;
+    constructor(props: Nav.LinkProps, root: TabRootState | NavRootState);
+    onclick(event: Event): void;
+}
+/**
+ * Manages the state for the Tab root component.
+ * Handles the tracking of active tab panes and provides methods to set them.
+ */
+export declare class TabRootState {
+    #private;
+    readonly props: Tab.RootProps;
+    constructor(props: Tab.RootProps);
+    isNavLinkActive(navLinkId: string): boolean;
+    isTabPaneActive(tabPaneId: string): boolean;
+    registerNavLinkState(linkState: NavLinkState): void;
+    registerTabPaneState(paneState: TabPaneState): void;
+    setNavLinkActive(navLinkId: string): void;
+    setTabPaneActive(tabPaneId: string): void;
+    getAriaLabelledBy(tabPaneId: string): string | undefined;
+}
+/**
+ * Manages the state for an individual Tab pane.
+ * Tracks active state and provides methods to handle clicks.
+ */
+export declare class TabPaneState {
+    readonly props: Tab.PaneProps;
+    readonly root: TabRootState;
+    isActive: boolean;
+    ariaLabelledBy: string | undefined;
+    constructor(props: Tab.PaneProps, root: TabRootState);
+}
+/**
+ * Checks if the Tab root context exists.
+ * @returns True if the Tab root context exists, false otherwise.
+ */
+export declare const doesTabRootContextExists: () => boolean;
+/**
+ * Creates and initializes the Nav root state.
+ * This function is used to set up the context for the Nav component.
+ * @param props - The props for the Nav root component.
+ * @returns The created NavRootState instance.
+ */
+export declare function initNavRootState(props: Nav.RootProps): NavRootState;
+/**
+ * Creates and initializes the Tab root state.
+ * This function is used to set up the context for the Tab component.
+ * @param props - The props for the Tab root component.
+ * @returns The created TabRootState instance.
+ */
+export declare function initTabRootState(props: Tab.RootProps): TabRootState;
+/**
+ * Creates and initializes the Nav link state.
+ * This function is used to set up the context for the Nav link component.
+ * @param props - The props for the Nav link component.
+ * @returns The created NavLinkState instance.
+ */
+export declare function initNavLinkState(props: Nav.LinkProps): NavLinkState;
+/**
+ * Creates and initializes the Tab pane state.
+ * This function is used to set up the context for the Tab pane component.
+ * @param props - The props for the Tab pane component.
+ * @returns The created TabPaneState instance.
+ */
+export declare function initTabPaneState(props: Tab.PaneProps): TabPaneState;

package/dist/common/nav-tab.svelte.js

@@ -0,0 +1,188 @@
+import { Context } from './index.js';
+/**
+ * Manages the state for the Nav root component.
+ * Handles the tracking of active nav links and provides methods to set them.
+ * Supports both tab and non-tab navigation.
+ */
+export class NavRootState {
+    props;
+    #activeNavLinkId = $state('');
+    #navLinkStates = [];
+    constructor(props) {
+        this.props = props;
+        this.isNavLinkActive = this.isNavLinkActive.bind(this);
+        this.registerNavLinkState = this.registerNavLinkState.bind(this);
+        this.setNavLinkActive = this.setNavLinkActive.bind(this);
+    }
+    isNavLinkActive(navLinkId) {
+        return this.#activeNavLinkId === navLinkId;
+    }
+    registerNavLinkState(linkState) {
+        this.#navLinkStates.push(linkState);
+    }
+    setNavLinkActive(navLinkId) {
+        this.#activeNavLinkId = navLinkId;
+    }
+}
+/**
+ * Manages the state for an individual Nav link.
+ * Tracks active state and provides methods to handle clicks.
+ */
+export class NavLinkState {
+    props;
+    root;
+    isActive = $derived.by(() => this.root.isNavLinkActive(this.props.id || ''));
+    ariaControls = $derived.by(() => (this.isTab ? this.props.href?.replace('#', '') : undefined));
+    isTab;
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.onclick = this.onclick.bind(this);
+        this.isTab = root instanceof TabRootState;
+        if (this.props.isActive) {
+            this.root.setNavLinkActive(this.props.id || '');
+        }
+    }
+    onclick(event) {
+        if (this.isTab && this.root instanceof TabRootState) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const tabPaneId = this.props.href?.replace('#', '');
+            if (tabPaneId) {
+                this.root.setNavLinkActive(this.props.id || '');
+                this.root.setTabPaneActive(tabPaneId);
+            }
+        }
+        else if (this.props.href === '#' || this.props.href === '#!') {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else {
+            this.root.setNavLinkActive(this.props.id || '');
+        }
+    }
+}
+/**
+ * Manages the state for the Tab root component.
+ * Handles the tracking of active tab panes and provides methods to set them.
+ */
+export class TabRootState {
+    props;
+    #activeNavLinkId = $state('');
+    #activeTabPaneId = $state('');
+    #navLinkStates = [];
+    #tabPaneStates = [];
+    constructor(props) {
+        this.props = props;
+        this.isNavLinkActive = this.isNavLinkActive.bind(this);
+        this.isTabPaneActive = this.isTabPaneActive.bind(this);
+        this.registerNavLinkState = this.registerNavLinkState.bind(this);
+        this.registerTabPaneState = this.registerTabPaneState.bind(this);
+        this.setNavLinkActive = this.setNavLinkActive.bind(this);
+        this.setTabPaneActive = this.setTabPaneActive.bind(this);
+    }
+    isNavLinkActive(navLinkId) {
+        return this.#activeNavLinkId === navLinkId;
+    }
+    isTabPaneActive(tabPaneId) {
+        return this.#activeTabPaneId === tabPaneId;
+    }
+    registerNavLinkState(linkState) {
+        this.#navLinkStates.push(linkState);
+    }
+    registerTabPaneState(paneState) {
+        this.#tabPaneStates.push(paneState);
+    }
+    setNavLinkActive(navLinkId) {
+        this.#activeNavLinkId = navLinkId;
+    }
+    setTabPaneActive(tabPaneId) {
+        this.#activeTabPaneId = tabPaneId;
+    }
+    getAriaLabelledBy(tabPaneId) {
+        const navLink = this.#navLinkStates.find((link) => link.props.href === `#${tabPaneId}`);
+        return navLink ? navLink.props.id || undefined : undefined;
+    }
+}
+/**
+ * Manages the state for an individual Tab pane.
+ * Tracks active state and provides methods to handle clicks.
+ */
+export class TabPaneState {
+    props;
+    root;
+    isActive = $derived.by(() => this.root.isTabPaneActive(this.props.id || ''));
+    ariaLabelledBy = $derived.by(() => this.root.getAriaLabelledBy(this.props.id || ''));
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        if (this.props.isActive) {
+            this.root.setTabPaneActive(this.props.id || '');
+        }
+    }
+}
+const NavRootContext = new Context('nav-root');
+const TabRootContext = new Context('tab-root');
+/**
+ * Checks if the Tab root context exists.
+ * @returns True if the Tab root context exists, false otherwise.
+ */
+export const doesTabRootContextExists = () => TabRootContext.exists();
+/**
+ * Creates and initializes the Nav root state.
+ * This function is used to set up the context for the Nav component.
+ * @param props - The props for the Nav root component.
+ * @returns The created NavRootState instance.
+ */
+export function initNavRootState(props) {
+    const rootState = new NavRootState(props);
+    return NavRootContext.set(rootState);
+}
+/**
+ * Creates and initializes the Tab root state.
+ * This function is used to set up the context for the Tab component.
+ * @param props - The props for the Tab root component.
+ * @returns The created TabRootState instance.
+ */
+export function initTabRootState(props) {
+    const rootState = new TabRootState(props);
+    return TabRootContext.set(rootState);
+}
+/**
+ * Creates and initializes the Nav link state.
+ * This function is used to set up the context for the Nav link component.
+ * @param props - The props for the Nav link component.
+ * @returns The created NavLinkState instance.
+ */
+export function initNavLinkState(props) {
+    if (TabRootContext.exists()) {
+        const rootState = TabRootContext.get();
+        const linkState = new NavLinkState(props, rootState);
+        rootState.registerNavLinkState(linkState);
+        return linkState;
+    }
+    else if (!NavRootContext.exists()) {
+        throw new Error('Nav.Link requires Nav.Root or Tab.Root context. Please ensure either the Nav.Root or Tab.Root is initialized before Nav.Link.');
+    }
+    else {
+        const rootState = NavRootContext.get();
+        const linkState = new NavLinkState(props, rootState);
+        rootState.registerNavLinkState(linkState);
+        return linkState;
+    }
+}
+/**
+ * Creates and initializes the Tab pane state.
+ * This function is used to set up the context for the Tab pane component.
+ * @param props - The props for the Tab pane component.
+ * @returns The created TabPaneState instance.
+ */
+export function initTabPaneState(props) {
+    if (!TabRootContext.exists()) {
+        throw new Error('Tab.Pane requires Tab.Root context. Please ensure Tab.Root is initialized before Tab.Pane.');
+    }
+    const rootState = TabRootContext.get();
+    const paneState = new TabPaneState(props, rootState);
+    rootState.registerTabPaneState(paneState);
+    return paneState;
+}