@db-ux/react-core-components 4.9.1 → 4.10.0-esm-f121fc3

package/dist/components/tab-list/tab-list.js

@@ -1,13 +1,62 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls } from "../../utils";
-function DBTabListFn(props, component) {
-    var _a, _b;
-    const _ref = component || useRef(component);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tab-list", props.className) }),
-        React.createElement("ul", { role: "tablist" }, props.children)));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n } from "../../utils/index.js";
+import { forwardRef as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/tab-list/tab-list.tsx
+function o(r, o) {
+	return /* @__PURE__ */ a("div", {
+		ref: o || i(o),
+		...e(r, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		id: r.id ?? r.propOverrides?.id,
+		...t(r, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-tab-list", r.className),
+		children: /* @__PURE__ */ a("ul", {
+			role: "tablist",
+			children: r.children
+		})
+	});
 }
-const DBTabList = forwardRef(DBTabListFn);
-export default DBTabList;
+var s = r(o);
+//#endregion
+export { s as default };

package/dist/components/tab-panel/index.d.ts

@@ -1 +1 @@
-export { default as DBTabPanel } from './tab-panel';
+export { default as DBTabPanel } from './tab-panel.js';

package/dist/components/tab-panel/model.d.ts

@@ -1,4 +1,4 @@
-import type { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model.js';
 export type DBTabPanelDefaultProps = {
     /**
      * The content if you don't want to use children.

package/dist/components/tab-panel/tab-panel.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabPanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../..").GlobalProps> & import("./model").DBTabPanelDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
+declare const DBTabPanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../../index.js").GlobalProps> & import("./model").DBTabPanelDefaultProps & import("../../index.js").GlobalProps & React.RefAttributes<any>>;
 export default DBTabPanel;

package/dist/components/tab-panel/tab-panel.js

@@ -1,15 +1,61 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, useEffect, forwardRef } from "react";
-import { cls } from "../../utils";
-function DBTabPanelFn(props, component) {
-    var _a, _b;
-    const _ref = component || useRef(component);
-    useEffect(() => { }, []);
-    return (React.createElement("section", Object.assign({ role: "tabpanel", ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tab-panel", props.className), id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }),
-        props.content ? React.createElement(React.Fragment, null, props.content) : null,
-        props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n } from "../../utils/index.js";
+import { forwardRef as r, useEffect as i, useRef as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/tab-panel/tab-panel.tsx
+function l(r, l) {
+	let u = l || a(l);
+	return i(() => {}, []), /* @__PURE__ */ c("section", {
+		role: "tabpanel",
+		ref: u,
+		...e(r, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		...t(r, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-tab-panel", r.className),
+		id: r.id ?? r.propOverrides?.id,
+		children: [r.content ? /* @__PURE__ */ s(o, { children: r.content }) : null, r.children]
+	});
 }
-const DBTabPanel = forwardRef(DBTabPanelFn);
-export default DBTabPanel;
+var u = r(l);
+//#endregion
+export { u as default };

package/dist/components/tabs/index.d.ts

@@ -1 +1 @@
-export { default as DBTabs } from './tabs';
+export { default as DBTabs } from './tabs.js';

package/dist/components/tabs/model.d.ts

@@ -1,4 +1,4 @@
-import type { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
+import type { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model.js';
 import type { DBTabItemProps } from '../tab-item/model';
 import type { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];

package/dist/components/tabs/model.js

@@ -1,2 +1,4 @@
-export const TabsBehaviorList = ['scrollbar', 'arrows'];
-export const TabsInitialSelectedModeList = ['auto', 'manually'];
+//#region src/components/tabs/model.ts
+var e = ["scrollbar", "arrows"], t = ["auto", "manually"];
+//#endregion
+export { e as TabsBehaviorList, t as TabsInitialSelectedModeList };

package/dist/components/tabs/tabs.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabs: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "width" | "alignment" | keyof import("./model").DBTabsDefaultProps | "orientation" | keyof import("./model").DBTabsEventProps> & import("./model").DBTabsDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").OrientationProps & import("../../shared/model").WidthProps & import("../../shared/model").AlignmentProps & import("./model").DBTabsEventProps & React.RefAttributes<any>>;
+declare const DBTabs: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "width" | "alignment" | keyof import("./model.js").DBTabsDefaultProps | "orientation" | keyof import("./model.js").DBTabsEventProps> & import("./model.js").DBTabsDefaultProps & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").OrientationProps & import("../../shared/model.js").WidthProps & import("../../shared/model.js").AlignmentProps & import("./model.js").DBTabsEventProps & React.RefAttributes<any>>;
 export default DBTabs;

package/dist/components/tabs/tabs.js

@@ -1,180 +1,193 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls } from "../../utils";
-import DBButton from "../button/button";
-import DBTabItem from "../tab-item/tab-item";
-import DBTabList from "../tab-list/tab-list";
-import DBTabPanel from "../tab-panel/tab-panel";
-import { useId } from "react";
-function DBTabsFn(props, component) {
-    var _a, _b, _c, _d, _e, _f;
-    const uuid = useId();
-    const _ref = component || useRef(component);
-    const [_name, set_name] = useState(() => "");
-    const [initialized, setInitialized] = useState(() => false);
-    const [showScrollLeft, setShowScrollLeft] = useState(() => false);
-    const [showScrollRight, setShowScrollRight] = useState(() => false);
-    const [scrollContainer, setScrollContainer] = useState(() => null);
-    const [_resizeObserver, set_resizeObserver] = useState(() => undefined);
-    function convertTabs() {
-        try {
-            if (typeof props.tabs === "string") {
-                return JSON.parse(props.tabs);
-            }
-            return props.tabs;
-        }
-        catch (error) {
-            console.error(error);
-        }
-        return [];
-    }
-    function evaluateScrollButtons(tList) {
-        const needsScroll = tList.scrollWidth > tList.clientWidth;
-        setShowScrollLeft(needsScroll && tList.scrollLeft > 1);
-        setShowScrollRight(needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth);
-    }
-    function scroll(left) {
-        let step = Number(props.arrowScrollDistance) || 100;
-        if (left) {
-            step *= -1;
-        }
-        scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollBy({
-            top: 0,
-            left: step,
-            behavior: "smooth",
-        });
-    }
-    function initTabList() {
-        if (_ref.current) {
-            const tabList = _ref.current.querySelector(".db-tab-list");
-            if (tabList) {
-                const container = tabList.querySelector('[role="tablist"]');
-                if (container) {
-                    container.setAttribute("aria-orientation", props.orientation || "horizontal");
-                    if (props.behavior === "arrows") {
-                        setScrollContainer(container);
-                        evaluateScrollButtons(container);
-                        container.addEventListener("scroll", () => {
-                            evaluateScrollButtons(container);
-                        });
-                        // Use ResizeObserver to re-evaluate scroll buttons because it provides more accurate, container-specific resize detection than global window resize events.
-                        if (!_resizeObserver) {
-                            const observer = new ResizeObserver(() => {
-                                evaluateScrollButtons(container);
-                            });
-                            observer.observe(container);
-                            set_resizeObserver(observer);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    function initTabs(init) {
-        if (_ref.current) {
-            const tabItems = Array.from(_ref.current.getElementsByClassName("db-tab-item"));
-            const tabPanels = Array.from(_ref.current.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
-            for (const tabItem of tabItems) {
-                const index = tabItems.indexOf(tabItem);
-                const label = tabItem.querySelector("label");
-                const input = tabItem.querySelector("input");
-                if (input && label) {
-                    if (!input.id) {
-                        const tabId = `${_name}-tab-${index}`;
-                        label.setAttribute("for", tabId);
-                        input.id = tabId;
-                        input.setAttribute("name", _name);
-                        if (tabPanels.length > index) {
-                            input.setAttribute("aria-controls", `${_name}-tab-panel-${index}`);
-                        }
-                    }
-                    if (init) {
-                        // Auto select
-                        const autoSelect = !props.initialSelectedMode ||
-                            props.initialSelectedMode === "auto";
-                        const shouldAutoSelect = (props.initialSelectedIndex == null && index === 0) ||
-                            Number(props.initialSelectedIndex) === index;
-                        if (autoSelect && shouldAutoSelect) {
-                            input.click();
-                        }
-                    }
-                }
-            }
-            for (const panel of tabPanels) {
-                if (panel.id)
-                    continue;
-                const index = tabPanels.indexOf(panel);
-                panel.id = `${_name}-tab-panel-${index}`;
-                panel.setAttribute("aria-labelledby", `${_name}-tab-${index}`);
-            }
-        }
-    }
-    function handleChange(event) {
-        var _a;
-        event.stopPropagation();
-        if (event.target) {
-            const target = event.target;
-            const parent = target.parentElement;
-            if (parent &&
-                parent.parentElement &&
-                ((_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) === "LI") {
-                const tabItem = parent.parentElement;
-                if (tabItem) {
-                    const list = tabItem.parentElement;
-                    if (list) {
-                        const tabIndex = Array.from(list.children).indexOf(tabItem);
-                        if (props.onIndexChange) {
-                            props.onIndexChange(tabIndex);
-                        }
-                        if (props.onTabSelect) {
-                            props.onTabSelect(event);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    useEffect(() => {
-        set_name(`tabs-${props.name || uuid}`);
-        setInitialized(true);
-    }, []);
-    useEffect(() => {
-        if (_ref.current && initialized) {
-            initTabList();
-            initTabs(true);
-            const tabList = _ref.current.querySelector(".db-tab-list");
-            if (tabList) {
-                const observer = new MutationObserver((mutations) => {
-                    mutations.forEach((mutation) => {
-                        if (mutation.removedNodes.length || mutation.addedNodes.length) {
-                            initTabList();
-                            initTabs();
-                        }
-                    });
-                });
-                observer.observe(tabList, {
-                    childList: true,
-                    subtree: true,
-                });
-            }
-            setInitialized(false);
-        }
-    }, [_ref.current, initialized]);
-    useEffect(() => {
-        return () => {
-            _resizeObserver === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
-            set_resizeObserver(undefined);
-        };
-    }, []);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onTabSelect", "onIndexChange"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_c = props.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = props.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => handleChange(event), onChange: (event) => handleChange(event) }),
-        showScrollLeft ? (React.createElement(DBButton, { className: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
-        props.tabs ? (React.createElement(React.Fragment, null,
-            React.createElement(DBTabList, null, (_e = convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = convertTabs()) === null || _f === void 0 ? void 0 :
-            _f.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null,
-        showScrollRight ? (React.createElement(DBButton, { className: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll() }, "Scroll right")) : null,
-        props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n } from "../../utils/index.js";
+import r from "../button/button.js";
+import i from "../tab-item/tab-item.js";
+import a from "../tab-list/tab-list.js";
+import o from "../tab-panel/tab-panel.js";
+import { forwardRef as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+function h(s, h) {
+	let g = l(), _ = h || u(h), [v, y] = d(() => ""), [b, x] = d(() => !1), [S, C] = d(() => !1), [w, T] = d(() => !1), [E, D] = d(() => null), [O, k] = d(() => void 0);
+	function A() {
+		try {
+			return typeof s.tabs == "string" ? JSON.parse(s.tabs) : s.tabs;
+		} catch (e) {
+			console.error(e);
+		}
+		return [];
+	}
+	function j(e) {
+		let t = e.scrollWidth > e.clientWidth;
+		C(t && e.scrollLeft > 1), T(t && e.scrollLeft < e.scrollWidth - e.clientWidth);
+	}
+	function M(e) {
+		let t = Number(s.arrowScrollDistance) || 100;
+		e && (t *= -1), E?.scrollBy({
+			top: 0,
+			left: t,
+			behavior: "smooth"
+		});
+	}
+	function N() {
+		if (_.current) {
+			let e = _.current.querySelector(".db-tab-list");
+			if (e) {
+				let t = e.querySelector("[role=\"tablist\"]");
+				if (t && (t.setAttribute("aria-orientation", s.orientation || "horizontal"), s.behavior === "arrows" && (D(t), j(t), t.addEventListener("scroll", () => {
+					j(t);
+				}), !O))) {
+					let e = new ResizeObserver(() => {
+						j(t);
+					});
+					e.observe(t), k(e);
+				}
+			}
+		}
+	}
+	function P(e) {
+		if (_.current) {
+			let t = Array.from(_.current.getElementsByClassName("db-tab-item")), n = Array.from(_.current.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
+			for (let r of t) {
+				let i = t.indexOf(r), a = r.querySelector("label"), o = r.querySelector("input");
+				if (o && a) {
+					if (!o.id) {
+						let e = `${v}-tab-${i}`;
+						a.setAttribute("for", e), o.id = e, o.setAttribute("name", v), n.length > i && o.setAttribute("aria-controls", `${v}-tab-panel-${i}`);
+					}
+					if (e) {
+						let e = !s.initialSelectedMode || s.initialSelectedMode === "auto", t = s.initialSelectedIndex == null && i === 0 || Number(s.initialSelectedIndex) === i;
+						e && t && o.click();
+					}
+				}
+			}
+			for (let e of n) {
+				if (e.id) continue;
+				let t = n.indexOf(e);
+				e.id = `${v}-tab-panel-${t}`, e.setAttribute("aria-labelledby", `${v}-tab-${t}`);
+			}
+		}
+	}
+	function F(e) {
+		if (e.stopPropagation(), e.target) {
+			let t = e.target.parentElement;
+			if (t && t.parentElement && t.parentElement?.nodeName === "LI") {
+				let n = t.parentElement;
+				if (n) {
+					let t = n.parentElement;
+					if (t) {
+						let r = Array.from(t.children).indexOf(n);
+						s.onIndexChange && s.onIndexChange(r), s.onTabSelect && s.onTabSelect(e);
+					}
+				}
+			}
+		}
+	}
+	return c(() => {
+		y(`tabs-${s.name || g}`), x(!0);
+	}, []), c(() => {
+		if (_.current && b) {
+			N(), P(!0);
+			let e = _.current.querySelector(".db-tab-list");
+			e && new MutationObserver((e) => {
+				e.forEach((e) => {
+					(e.removedNodes.length || e.addedNodes.length) && (N(), P());
+				});
+			}).observe(e, {
+				childList: !0,
+				subtree: !0
+			}), x(!1);
+		}
+	}, [_.current, b]), c(() => () => {
+		O?.disconnect(), k(void 0);
+	}, []), /* @__PURE__ */ m("div", {
+		ref: _,
+		...e(s, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density",
+			"onTabSelect",
+			"onIndexChange"
+		]),
+		id: s.id ?? s.propOverrides?.id,
+		...t(s, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-tabs", s.className),
+		"data-orientation": s.orientation,
+		"data-scroll-behavior": s.behavior,
+		"data-alignment": s.alignment ?? "start",
+		"data-width": s.width ?? "auto",
+		onInput: (e) => F(e),
+		onChange: (e) => F(e),
+		children: [
+			S ? /* @__PURE__ */ p(r, {
+				className: "tabs-scroll-left",
+				variant: "ghost",
+				icon: "chevron_left",
+				type: "button",
+				noText: !0,
+				onClick: (e) => M(!0),
+				children: "Scroll left"
+			}) : null,
+			s.tabs ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(a, { children: A()?.map((e, t) => /* @__PURE__ */ p(i, {
+				active: e.active,
+				label: e.label,
+				iconTrailing: e.iconTrailing,
+				icon: e.icon,
+				noText: e.noText
+			}, s.name + "tab-item" + t)) }), A()?.map((e, t) => /* @__PURE__ */ p(o, {
+				content: e.content,
+				children: e.children
+			}, s.name + "tab-panel" + t))] }) : null,
+			w ? /* @__PURE__ */ p(r, {
+				className: "tabs-scroll-right",
+				variant: "ghost",
+				icon: "chevron_right",
+				type: "button",
+				noText: !0,
+				onClick: (e) => M(),
+				children: "Scroll right"
+			}) : null,
+			s.children
+		]
+	});
 }
-const DBTabs = forwardRef(DBTabsFn);
-export default DBTabs;
+var g = s(h);
+//#endregion
+export { g as default };

package/dist/components/tag/index.d.ts

@@ -1 +1 @@
-export { default as DBTag } from './tag';
+export { default as DBTag } from './tag.js';

package/dist/components/tag/model.d.ts

@@ -1,4 +1,4 @@
-import type { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, NoTextProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
+import type { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, NoTextProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model.js';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
 export type DBTagEventsProps = {

package/dist/components/tag/model.js

@@ -1 +1,4 @@
-export const TagBehaviorList = ['static', 'removable'];
+//#region src/components/tag/model.ts
+var e = ["static", "removable"];
+//#endregion
+export { e as TagBehaviorList };

package/dist/components/tag/tag.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../../shared/model").GlobalProps | "semantic" | "emphasis" | "icon" | "showIcon" | "noText" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & import("../../shared/model").NoTextProps & React.RefAttributes<any>>;
+declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../../shared/model.js").GlobalProps | "semantic" | "emphasis" | "icon" | "showIcon" | "noText" | keyof import("./model.js").DBTagDefaultProps | "overflow" | keyof import("./model.js").DBTagEventsProps> & import("./model.js").DBTagDefaultProps & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").IconProps & import("../../shared/model.js").SemanticProps & import("../../shared/model.js").OverflowProps & import("../../shared/model.js").EmphasisProps & import("../../shared/model.js").ShowIconProps & import("../../shared/model.js").ContentSlotProps & import("./model.js").DBTagEventsProps & import("../../shared/model.js").NoTextProps & React.RefAttributes<any>>;
 export default DBTag;