@winkintel/bootstrap-svelte 0.0.1

package/dist/Tab/tab.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Tab } from './index.js';
+/**
+ * ## Tab.Root
+ * Root component for tab content. Used with tabs navigation.
+ *
+ * @example
+ * ```svelte
+ * <Tab.Root>
+ * <Nav.Root data-testid="nav-tabs" itemStyle="tabs">
+ *     <Nav.Item>
+ *         <Nav.Link href="#home-tabpane" id="home-navlink" isActive={true}>Home</Nav.Link>
+ *     </Nav.Item>
+ *     <Nav.Item>
+ *         <Nav.Link href="#profile-tabpane" id="profile-navlink">Profile</Nav.Link>
+ *     </Nav.Item>
+ *     <Nav.Item>
+ *         <Nav.Link href="#contact-tabpane" id="contact-navlink">Contact</Nav.Link>
+ *     </Nav.Item>
+ *     <Nav.Item>
+ *         <Nav.Link href="#disabled-tabpane" id="disabled-navlink" isDisabled={true}>Disabled</Nav.Link>
+ *     </Nav.Item>
+ * </Nav.Root>
+ * <Tab.Content data-testid="tab-content-container">
+ *     <Tab.Pane data-testid="home-content" id="home-tabpane" isActive={true}>
+ *         <h5 class="mt-3">Home Content</h5>
+ *         <p>This is the home content panel.</p>
+ *     </Tab.Pane>
+ *     <Tab.Pane data-testid="profile-content" id="profile-tabpane">
+ *         <h5 class="mt-3">Profile Content</h5>
+ *         <p>This is the profile content panel.</p>
+ *     </Tab.Pane>
+ *     <Tab.Pane data-testid="contact-content" id="contact-tabpane">
+ *         <h5 class="mt-3">Contact Content</h5>
+ *         <p>This is the contact content panel.</p>
+ *     </Tab.Pane>
+ *     <Tab.Pane data-testid="disabled-content" id="disabled-tabpane">
+ *         <h5 class="mt-3">Disabled Content</h5>
+ *         <p>This is the disabled content panel.</p>
+ *     </Tab.Pane>
+ * </Tab.Content>
+ * </Tab.Root>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the root DOM element
+ * - `id` (string): Optional. Unique ID for the root element. Defaults to `tab-{uid}`, where `uid` is a unique identifier.
+ */
+declare const Tab: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/dist/Tab/types.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonElement, DivElement } from '../common/types.js';
+export type TabRootProps = DivElement;
+export type TabContentProps = DivElement;
+export type TabNavLinkProps = ButtonElement & {
+    isActive?: boolean;
+    isDisabled?: boolean;
+    onclick?: EventListener;
+    targetPaneId?: string;
+};
+export type TabPaneProps = DivElement & {
+    doFade?: boolean;
+    id?: string;
+    isActive?: boolean;
+    onHide?: EventListener;
+    onHidden?: EventListener;
+    onShow?: EventListener;
+    onShown?: EventListener;
+};

package/dist/Tab/types.js

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

package/dist/Table/composition.d.ts

@@ -0,0 +1,9 @@
+export { default as Body } from './table-body.svelte';
+export { default as Caption } from './table-caption.svelte';
+export { default as Data } from './table-data.svelte';
+export { default as Foot } from './table-foot.svelte';
+export { default as Head } from './table-head.svelte';
+export { default as Header } from './table-header.svelte';
+export { default as Row } from './table-row.svelte';
+export { default as Root } from './table.svelte';
+export type { TableBodyProps as BodyProps, TableCaptionProps as CaptionProps, TableContainerProps as ContainerProps, TableDataProps as DataProps, TableFootProps as FootProps, TableHeaderProps as HeaderProps, TableHeadProps as HeadProps, TableResponsiveProps as ResponsiveProps, TableRootProps as RootProps, TableRowProps as RowProps } from './types.js';

package/dist/Table/composition.js

@@ -0,0 +1,8 @@
+export { default as Body } from './table-body.svelte';
+export { default as Caption } from './table-caption.svelte';
+export { default as Data } from './table-data.svelte';
+export { default as Foot } from './table-foot.svelte';
+export { default as Head } from './table-head.svelte';
+export { default as Header } from './table-header.svelte';
+export { default as Row } from './table-row.svelte';
+export { default as Root } from './table.svelte';

package/dist/Table/index.d.ts

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

package/dist/Table/index.js

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

package/dist/Table/table-body.svelte

@@ -0,0 +1,30 @@
+<!--
+@component
+## Table.Body
+A component to render a Bootstrap table body.
+
+@example
+```svelte
+<Table.Body hasGroupDivider>
+    <Table.Row>
+        <Table.Data>Mark</Table.Data>
+        <Table.Data>Otto</Table.Data>
+        <Table.Data>@mdo</Table.Data>
+    </Table.Row>
+</Table.Body>
+```
+
+### Props
+- `class` (string): Additional classes to apply to the table body.
+- `hasGroupDivider` (boolean): Applies a group divider style to the body.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initTableBodyState } from './table.svelte.js';
+let { children, class: classValues, hasGroupDivider = false, ...restOfProps } = $props();
+const _bodyState = initTableBodyState({});
+let classes = $derived(uniqueClsx({ 'table-group-divider': hasGroupDivider }, classValues));
+</script>
+
+<tbody class={classes} {...restOfProps}>
+    {@render children?.()}
+</tbody>

package/dist/Table/table-body.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Table } from './index.js';
+/**
+ * ## Table.Body
+ * A component to render a Bootstrap table body.
+ *
+ * @example
+ * ```svelte
+ * <Table.Body hasGroupDivider>
+ * <Table.Row>
+ *     <Table.Data>Mark</Table.Data>
+ *     <Table.Data>Otto</Table.Data>
+ *     <Table.Data>@mdo</Table.Data>
+ * </Table.Row>
+ * </Table.Body>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Additional classes to apply to the table body.
+ * - `hasGroupDivider` (boolean): Applies a group divider style to the body.
+ */
+declare const TableBody: import("svelte").Component<Table.BodyProps, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/Table/table-caption.svelte

@@ -0,0 +1,20 @@
+<!--
+@component
+## Table.Caption
+A component to render a Bootstrap table caption.
+
+@example
+```svelte
+<Table.Caption>Table Caption</Table.Caption>
+```
+
+### Props
+None
+-->
+<script lang="ts">let { children, ...restOfProps } = $props();
+export {};
+</script>
+
+<caption {...restOfProps}>
+    {@render children?.()}
+</caption>

package/dist/Table/table-caption.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ## Table.Caption
+ * A component to render a Bootstrap table caption.
+ *
+ * @example
+ * ```svelte
+ * <Table.Caption>Table Caption</Table.Caption>
+ * ```
+ *
+ * ### Props
+ * None
+ */
+declare const TableCaption: import("svelte").Component<import("../index.js").CaptionElement, {}, "">;
+type TableCaption = ReturnType<typeof TableCaption>;
+export default TableCaption;

package/dist/Table/table-data.svelte

@@ -0,0 +1,30 @@
+<!--
+@component
+## Table.Data
+A component to render a Bootstrap table data cell.
+
+@example
+```svelte
+<Table.Data>Mark</Table.Data>
+```
+
+### Props
+- `class` (string): Additional classes to apply to the data cell.
+- `colorVariant` (string): Applies contextual color variant to the data cell.
+- `isActive` (boolean): Applies active state styling to the data cell.
+- `verticalAlign` ('top' | 'middle' | 'bottom'): Sets vertical alignment of the data cell content.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initTableDataState, TableDataState } from './table.svelte.js';
+let { children, class: classValues, colorVariant, isActive = false, verticalAlign, ...restOfProps } = $props();
+const _dataState = initTableDataState({});
+let classes = $derived(uniqueClsx({
+    [`align-${verticalAlign}`]: !!verticalAlign,
+    'table-active': isActive,
+    [`table-${colorVariant}`]: !!colorVariant
+}, classValues));
+</script>
+
+<td class={classes} {...restOfProps}>
+    {@render children?.()}
+</td>

package/dist/Table/table-data.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Table } from './index.js';
+/**
+ * ## Table.Data
+ * A component to render a Bootstrap table data cell.
+ *
+ * @example
+ * ```svelte
+ * <Table.Data>Mark</Table.Data>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Additional classes to apply to the data cell.
+ * - `colorVariant` (string): Applies contextual color variant to the data cell.
+ * - `isActive` (boolean): Applies active state styling to the data cell.
+ * - `verticalAlign` ('top' | 'middle' | 'bottom'): Sets vertical alignment of the data cell content.
+ */
+declare const TableData: import("svelte").Component<Table.DataProps, {}, "">;
+type TableData = ReturnType<typeof TableData>;
+export default TableData;

package/dist/Table/table-foot.svelte

@@ -0,0 +1,31 @@
+<!--
+@component
+## Table.Foot
+A component to render a Bootstrap table foot.
+
+@example
+```svelte
+<Table.Foot hasGroupDivider>
+    <Table.Row>
+        <Table.Data>Footer</Table.Data>
+        <Table.Data>Footer</Table.Data>
+        <Table.Data>Footer</Table.Data>
+        <Table.Data>Footer</Table.Data>
+    </Table.Row>
+</Table.Foot>
+```
+
+### Props
+- `hasGroupDivider` (boolean): Applies a group divider style to the foot.
+- `class` (string): Additional classes to apply to the table foot.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initTableFootState, TableFootState } from './table.svelte.js';
+let { children, class: classValues, hasGroupDivider = false, ...restOfProps } = $props();
+const _footState = initTableFootState({});
+let classes = $derived(uniqueClsx({ 'table-group-divider': hasGroupDivider }, classValues));
+</script>
+
+<tfoot class={classes} {...restOfProps}>
+    {@render children?.()}
+</tfoot>

package/dist/Table/table-foot.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Table } from './index.js';
+/**
+ * ## Table.Foot
+ * A component to render a Bootstrap table foot.
+ *
+ * @example
+ * ```svelte
+ * <Table.Foot hasGroupDivider>
+ * <Table.Row>
+ *     <Table.Data>Footer</Table.Data>
+ *     <Table.Data>Footer</Table.Data>
+ *     <Table.Data>Footer</Table.Data>
+ *     <Table.Data>Footer</Table.Data>
+ * </Table.Row>
+ * </Table.Foot>
+ * ```
+ *
+ * ### Props
+ * - `hasGroupDivider` (boolean): Applies a group divider style to the foot.
+ * - `class` (string): Additional classes to apply to the table foot.
+ */
+declare const TableFoot: import("svelte").Component<Table.FootProps, {}, "">;
+type TableFoot = ReturnType<typeof TableFoot>;
+export default TableFoot;

package/dist/Table/table-head.svelte

@@ -0,0 +1,31 @@
+<!--
+@component
+## Table.Head
+A component to render a Bootstrap table head.
+
+@example
+```svelte
+<Table.Head colorScheme="dark">
+    <Table.Row>
+        <Table.Header>#</Table.Header>
+        <Table.Header>First Name</Table.Header>
+        <Table.Header>Last Name</Table.Header>
+        <Table.Header>Username</Table.Header>
+    </Table.Row>
+</Table.Head>
+```
+
+### Props
+- `colorScheme` (string): Applies a color scheme to the table head.
+- `class` (string): Additional classes to apply to the table head.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initTableHeadState } from './table.svelte.js';
+let { children, class: classValues, colorScheme, ...restOfProps } = $props();
+const _headState = initTableHeadState({});
+let classes = $derived(uniqueClsx({ [`table-${colorScheme}`]: !!colorScheme }, classValues));
+</script>
+
+<thead class={classes} {...restOfProps}>
+    {@render children?.()}
+</thead>

package/dist/Table/table-head.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Table } from './index.js';
+/**
+ * ## Table.Head
+ * A component to render a Bootstrap table head.
+ *
+ * @example
+ * ```svelte
+ * <Table.Head colorScheme="dark">
+ * <Table.Row>
+ *     <Table.Header>#</Table.Header>
+ *     <Table.Header>First Name</Table.Header>
+ *     <Table.Header>Last Name</Table.Header>
+ *     <Table.Header>Username</Table.Header>
+ * </Table.Row>
+ * </Table.Head>
+ * ```
+ *
+ * ### Props
+ * - `colorScheme` (string): Applies a color scheme to the table head.
+ * - `class` (string): Additional classes to apply to the table head.
+ */
+declare const TableHead: import("svelte").Component<Table.HeadProps, {}, "">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/Table/table-header.svelte

@@ -0,0 +1,38 @@
+<!--
+@component
+## Table.Header
+A component to render a Bootstrap table header cell.
+
+@example
+```svelte
+<Table.Header scope="col">Name</Table.Header>
+```
+
+### Props
+- `scope` (string): Defines the scope of the header cell. If not provided, it defaults to "col" when inside a `<thead>` and "row" when inside a `<tbody>`.
+- `class` (string): Additional classes to apply to the header cell.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { doesTableBodyContextExists, doesTableHeadContextExists, initTableHeaderState, TableHeaderState } from './table.svelte.js';
+let { children, class: classValues, scope, ...restOfProps } = $props();
+const _headerState = initTableHeaderState({});
+const isInHeadContext = doesTableHeadContextExists();
+const isInBodyContext = doesTableBodyContextExists();
+let classes = $derived(uniqueClsx(classValues));
+let scopeValue = $derived.by(() => {
+    if (scope) {
+        return scope;
+    }
+    if (isInHeadContext) {
+        return 'col';
+    }
+    if (isInBodyContext) {
+        return 'row';
+    }
+    return undefined;
+});
+</script>
+
+<th class={classes} scope={scopeValue} {...restOfProps}>
+    {@render children?.()}
+</th>

package/dist/Table/table-header.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Table } from './index.js';
+/**
+ * ## Table.Header
+ * A component to render a Bootstrap table header cell.
+ *
+ * @example
+ * ```svelte
+ * <Table.Header scope="col">Name</Table.Header>
+ * ```
+ *
+ * ### Props
+ * - `scope` (string): Defines the scope of the header cell. If not provided, it defaults to "col" when inside a `<thead>` and "row" when inside a `<tbody>`.
+ * - `class` (string): Additional classes to apply to the header cell.
+ */
+declare const TableHeader: import("svelte").Component<Table.HeaderProps, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/Table/table-row.svelte

@@ -0,0 +1,34 @@
+<!--
+@component
+## Table.Row
+A component to render a Bootstrap table row.
+
+@example
+```svelte
+<Table.Row isActive verticalAlign="middle" colorVariant="dark">
+    <Table.Header>1</Table.Header>
+    <Table.Data>Mark</Table.Data>
+    <Table.Data>Otto</Table.Data>
+    <Table.Data>@mdo</Table.Data>
+</Table.Row>
+```
+
+### Props
+- `colorVariant` (string): Applies contextual color variant to the row.
+- `isActive` (boolean): Applies active state styling to the row.
+- `verticalAlign` ('top' | 'middle' | 'bottom'): Sets vertical alignment of the row content.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initTableRowState, TableRowState } from './table.svelte.js';
+let { children, class: classValues, colorVariant, isActive = false, verticalAlign, ...restOfProps } = $props();
+const _rowState = initTableRowState({});
+let classes = $derived(uniqueClsx({
+    [`align-${verticalAlign}`]: !!verticalAlign,
+    'table-active': isActive,
+    [`table-${colorVariant}`]: !!colorVariant
+}, classValues));
+</script>
+
+<tr class={classes} {...restOfProps}>
+    {@render children?.()}
+</tr>

package/dist/Table/table-row.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Table } from './index.js';
+/**
+ * ## Table.Row
+ * A component to render a Bootstrap table row.
+ *
+ * @example
+ * ```svelte
+ * <Table.Row isActive verticalAlign="middle" colorVariant="dark">
+ * <Table.Header>1</Table.Header>
+ * <Table.Data>Mark</Table.Data>
+ * <Table.Data>Otto</Table.Data>
+ * <Table.Data>@mdo</Table.Data>
+ * </Table.Row>
+ * ```
+ *
+ * ### Props
+ * - `colorVariant` (string): Applies contextual color variant to the row.
+ * - `isActive` (boolean): Applies active state styling to the row.
+ * - `verticalAlign` ('top' | 'middle' | 'bottom'): Sets vertical alignment of the row content.
+ */
+declare const TableRow: import("svelte").Component<Table.RowProps, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

package/dist/Table/table.svelte

@@ -0,0 +1,154 @@
+<!--
+@component
+## Table
+A component to render a Bootstrap table.
+
+@example
+```svelte
+<Table.Root isBordered isStriped isHoverable>
+    <Table.Head>
+        <Table.Row>
+            <Table.Header>#</Table.Header>
+            <Table.Header>First Name</Table.Header>
+            <Table.Header>Last Name</Table.Header>
+            <Table.Header>Username</Table.Header>
+        </Table.Row>
+    </Table.Head>
+    <Table.Body>
+        <Table.Row>
+            <Table.Header>1</Table.Header>
+            <Table.Cell>Mark</Table.Cell>
+            <Table.Cell>Otto</Table.Cell>
+            <Table.Cell>@mdo</Table.Cell>
+        </Table.Row>
+    </Table.Body>
+</Table.Root>
+```
+#### Responsive Table
+```svelte
+<Table.Root isBordered isResponsive responsiveProps={{ breakpoint: 'md' }}>
+    ...
+</Table.Root>
+```
+#### Caption Example
+```svelte
+<Table.Root isBordered isCaptionTop>
+    <Table.Caption>List of users</Table.Caption>
+    ...
+</Table.Root>
+```
+#### Striped Columns Example
+```svelte
+<Table.Root isBordered isStripedColumns>
+    ...
+</Table.Root>
+```
+#### Vertical Alignment Example
+```svelte
+<Table.Root isBordered verticalAlign="middle">
+    ...
+</Table.Root>
+```
+#### Color Variants
+```svelte
+<Table.Root isBordered colorVariant="dark">
+    ...
+</Table.Root>
+```
+#### Border Color Variants
+```svelte
+<Table.Root isBordered borderColorVariant="border-primary">
+    ...
+</Table.Root>
+```
+#### Size Variants
+```svelte
+<Table.Root isBordered size="sm">
+    ...
+</Table.Root>
+```
+### Sub-components
+- `Table.Caption`: Component to render a table caption.
+- `Table.Head`: Component to render the table head section.
+- `Table.Body`: Component to render the table body section.
+- `Table.Row`: Component to render a table row.
+- `Table.Header`: Component to render a table header cell.
+- `Table.Data`: Component to render a table data cell.
+
+### Props
+- `borderColorVariant` (string): Optional. Border color variant class (e.g., 'border-primary').
+- `colorVariant` (string): Optional. Color variant for the table (e.g., 'dark', 'light').
+- `containerProps` (object): Optional. Props for the container div when `isContained` is true.
+- `elementRef` (HTMLTableElement): Optional. Reference to the table element.
+- `isBordered` (boolean): Optional. If true, adds borders to all table cells. Default is false.
+- `isBorderless` (boolean): Optional. If true, removes borders from the table. Default is false.
+- `isCaptionTop` (boolean): Optional. If true, places the caption at the top of the table. Default is false.
+- `isContained` (boolean): Optional. If true, wraps the table in a container div. Default is false.
+- `isHoverable` (boolean): Optional. If true, enables hover state on table rows. Default is false.
+- `isResponsive` (boolean): Optional. If true, makes the table responsive. Default is false.
+- `isStriped` (boolean): Optional. If true, adds zebra-striping to the table rows. Default is false.
+- `isStripedColumns` (boolean): Optional. If true, adds zebra-striping to the table columns. Default is false.
+- `responsiveProps` (object): Optional. Props for responsive behavior, including:
+  - `breakpoint` (string): Breakpoint for responsive table. Options: 'sm', 'md', 'lg', 'xl', 'xxl'. Default is 'md'.
+- `size` (string): Optional. Size variant for the table. Options: 'sm'. Default is undefined.
+- `verticalAlign` (string): Optional. Vertical alignment for table cells. Options: 'top', 'middle', 'bottom'. Default is undefined.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initTableRootState, TableRootState } from './table.svelte.js';
+let { borderColorVariant, children, class: classValues, containerProps = {}, colorVariant, elementRef = $bindable(null), isBordered = false, isBorderless = false, isCaptionTop = false, isHoverable = false, isResponsive = false, isStriped = false, isStripedColumns = false, responsiveProps = {}, size, tableContainerFooter, verticalAlign, ...restOfProps } = $props();
+let containerClassValues = $derived(containerProps.class);
+let restOfContainerProps = $derived.by(() => {
+    const { class: _classValues, ...rest } = containerProps;
+    return rest;
+});
+let breakpoint = $derived(responsiveProps.breakpoint);
+let responsiveClassValues = $derived(responsiveProps.class);
+let restOfResponsiveProps = $derived.by(() => {
+    const { breakpoint: _breakpoint, class: _classValues, ...rest } = responsiveProps;
+    return rest;
+});
+const _rootState = initTableRootState({});
+let hasResponsiveBreakpoint = $derived(!!breakpoint && breakpoint !== 'xs');
+let classes = $derived(uniqueClsx('table', {
+    [`align-${verticalAlign}`]: !!verticalAlign,
+    'caption-top': isCaptionTop,
+    [`table-${colorVariant}`]: !!colorVariant,
+    'table-bordered': isBordered && !isBorderless,
+    [`${borderColorVariant}`]: !!borderColorVariant && isBordered,
+    'table-borderless': isBorderless && !isBordered,
+    'table-hover': isHoverable,
+    [`table-${size}`]: !!size,
+    'table-striped': isStriped,
+    'table-striped-columns': isStripedColumns
+}, classValues));
+let containerClasses = $derived(uniqueClsx('table-container', containerClassValues));
+let responsiveClasses = $derived(uniqueClsx({
+    'table-responsive': isResponsive && !hasResponsiveBreakpoint,
+    [`table-responsive-${breakpoint}`]: hasResponsiveBreakpoint
+}, responsiveClassValues));
+</script>
+
+{#snippet tableElement()}
+    <table bind:this={elementRef} class={classes} {...restOfProps}>
+        {@render children?.()}
+    </table>
+{/snippet}
+
+{#snippet responsiveElement()}
+    {#if isResponsive}
+        <div class={responsiveClasses} {...restOfResponsiveProps}>
+            {@render tableElement()}
+        </div>
+    {:else}
+        {@render tableElement()}
+    {/if}
+    {@render tableContainerFooter?.()}
+{/snippet}
+
+{#snippet containerElement()}
+    <div class={containerClasses} {...restOfContainerProps}>
+        {@render responsiveElement()}
+    </div>
+{/snippet}
+
+{@render containerElement()}