chop-logic-components 4.0.0 → 4.0.3

package/dist/components/organisms/grid/head/GridHead2.js

@@ -0,0 +1,23 @@
+import { GridHeaderCell as e } from "../header-cell/HeaderCell.js";
+import { SelectAllGridRowsCell as t } from "../select-all-grid-rows-cell/SelectAllGridRowsCell.js";
+import './GridHead.css';/* empty css         */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/organisms/grid/head/GridHead.tsx
+var i = ({ columns: i, gridId: a, selectAll: o, deselectAll: s, selectable: c, isAllSelected: l, isAllCheckboxDisabled: u = !1 }) => /* @__PURE__ */ n("thead", {
+	className: "cl-grid-head",
+	children: /* @__PURE__ */ r("tr", {
+		className: "cl-grid-head__row",
+		children: [c && /* @__PURE__ */ n(t, {
+			isAllSelected: l,
+			disabled: u,
+			gridId: a,
+			selectAll: o,
+			deselectAll: s
+		}), i.map((t) => /* @__PURE__ */ n(e, {
+			title: t.title,
+			component: t.component
+		}, `${t.title}_${a}`))]
+	})
+});
+//#endregion
+export { i as GridHead };

package/dist/components/organisms/grid/header-cell/HeaderCell.js

@@ -1,8 +1,5 @@
-import { jsx as t } from "react/jsx-runtime";
-const d = ({
-  title: r,
-  component: e
-}) => /* @__PURE__ */ t("th", { children: e ?? r ?? "" });
-export {
-  d as GridHeaderCell
-};
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/organisms/grid/header-cell/HeaderCell.tsx
+var t = ({ title: t, component: n }) => /* @__PURE__ */ e("th", { children: n ?? t ?? "" });
+//#endregion
+export { t as GridHeaderCell };

package/dist/components/organisms/grid/select-all-grid-rows-cell/SelectAllGridRowsCell.js

@@ -1,24 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
-import { GridCheckbox as h } from "../checkbox/GridCheckbox.js";
-const m = ({
-  gridId: l,
-  isAllSelected: t,
-  selectAll: c,
-  deselectAll: o,
-  disabled: r
-}) => /* @__PURE__ */ e("th", { children: /* @__PURE__ */ e(
-  h,
-  {
-    label: "Select all rows",
-    onChange: (n) => {
-      const { checked: d } = n.target;
-      d ? c() : o();
-    },
-    id: `select_all_${l}`,
-    checked: t,
-    disabled: r
-  }
-) });
-export {
-  m as SelectAllGridRowsCell
-};
+import { GridCheckbox as e } from "../checkbox/GridCheckbox2.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/organisms/grid/select-all-grid-rows-cell/SelectAllGridRowsCell.tsx
+var n = ({ gridId: n, isAllSelected: r, selectAll: i, deselectAll: a, disabled: o }) => /* @__PURE__ */ t("th", { children: /* @__PURE__ */ t(e, {
+	label: "Select all rows",
+	onChange: (e) => {
+		let { checked: t } = e.target;
+		t ? i() : a();
+	},
+	id: `select_all_${n}`,
+	checked: r,
+	disabled: o
+}) });
+//#endregion
+export { n as SelectAllGridRowsCell };

package/dist/components/organisms/grid/select-grid-row-cell/SelectGridRowCell.js

@@ -1,24 +1,15 @@
+import { GridCheckbox as e } from "../checkbox/GridCheckbox2.js";
 import { jsx as t } from "react/jsx-runtime";
-import { GridCheckbox as h } from "../checkbox/GridCheckbox.js";
-const m = ({
-  rowId: e,
-  isRowSelected: c,
-  selectRowById: l,
-  deselectRowById: o,
-  disabled: r
-}) => /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(
-  h,
-  {
-    label: "Select row",
-    onChange: (d) => {
-      const { checked: n } = d.target;
-      n ? l(e) : o(e);
-    },
-    id: `select_row_${e}`,
-    checked: c,
-    disabled: r
-  }
-) });
-export {
-  m as SelectGridRowCell
-};
+//#region src/components/organisms/grid/select-grid-row-cell/SelectGridRowCell.tsx
+var n = ({ rowId: n, isRowSelected: r, selectRowById: i, deselectRowById: a, disabled: o }) => /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(e, {
+	label: "Select row",
+	onChange: (e) => {
+		let { checked: t } = e.target;
+		t ? i(n) : a(n);
+	},
+	id: `select_row_${n}`,
+	checked: r,
+	disabled: o
+}) });
+//#endregion
+export { n as SelectGridRowCell };

package/dist/components/organisms/menu/Menu.css

@@ -1 +1 @@
-.cl-menu-bar{list-style:none;margin:0;padding:0;padding-inline-start:0;display:flex;gap:var(--cl-s-gap);flex-direction:row;justify-content:flex-start;width:100%}.cl-menu-bar_vertical{flex-direction:column}
+.cl-menu-bar{padding:0;gap:var(--cl-s-gap);flex-direction:row;justify-content:flex-start;width:100%;margin:0;padding-inline-start:0;list-style:none;display:flex}.cl-menu-bar_vertical{flex-direction:column}

package/dist/components/organisms/menu/Menu2.js

@@ -0,0 +1,24 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { OrientationMode as t } from "../../../enums/orientation-mode.js";
+import { MenuListItem as n } from "./list-item/MenuListItem2.js";
+import './Menu.css';/* empty css     */
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/organisms/menu/Menu.tsx
+var i = ({ items: i = [], mode: a = t.Vertical, openedOn: o = "click", className: s, ...c }) => {
+	let l = e([
+		"cl-menu-bar",
+		s,
+		{ "cl-menu-bar_vertical": a === t.Vertical }
+	]);
+	return /* @__PURE__ */ r("menu", {
+		...c,
+		className: l,
+		children: i.map((e) => /* @__PURE__ */ r(n, {
+			item: e,
+			mode: a,
+			openedOn: o
+		}, e.id))
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/organisms/menu/leaf/MenuLeaf.css

@@ -1 +1 @@
-.cl-menu-leaf{color:var(--cl-base-font-color);display:flex;justify-content:flex-start;align-items:center;gap:var(--cl-m-gap);background-color:var(--cl-base-background-color);padding:var(--cl-m-gap);border-radius:var(--cl-border-radius);cursor:pointer;background-position:center;transition:background .3s;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-menu-leaf{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-menu-leaf{font-size:var(--cl-typography-base-desktop)}}.cl-menu-leaf:hover{text-shadow:var(--cl-text-shadow)}.cl-menu-leaf:focus-visible{outline:var(--cl-outline-border)}.cl-menu-leaf a{color:var(--cl-base-font-color)}
+.cl-menu-leaf{color:var(--cl-base-font-color);justify-content:flex-start;align-items:center;gap:var(--cl-m-gap);background-color:var(--cl-base-background-color);padding:var(--cl-m-gap);border-radius:var(--cl-border-radius);cursor:pointer;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-position:50%;font-weight:400;line-height:1.5;transition:background .3s;display:flex}@media (width>=640px){.cl-menu-leaf{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-menu-leaf{font-size:var(--cl-typography-base-desktop)}}.cl-menu-leaf:hover{text-shadow:var(--cl-text-shadow)}.cl-menu-leaf:focus-visible{outline:var(--cl-outline-border)}.cl-menu-leaf a{color:var(--cl-base-font-color)}

package/dist/components/organisms/menu/leaf/MenuLeaf2.js

@@ -0,0 +1,31 @@
+import { ElementSize as e } from "../../../../enums/element-size.js";
+import t from "../../../atoms/icon/Icon2.js";
+import './MenuLeaf.css';/* empty css         */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/organisms/menu/leaf/MenuLeaf.tsx
+var i = ({ item: i }) => {
+	let { icon: a, link: o, label: s, onFocus: c, onClick: l, onHover: u } = i, d = o ? /* @__PURE__ */ n("a", {
+		href: o,
+		target: "_blank",
+		rel: "noreferrer",
+		children: s
+	}) : /* @__PURE__ */ n("span", { children: s });
+	return /* @__PURE__ */ r("li", {
+		className: "cl-menu-leaf",
+		tabIndex: 0,
+		role: "menuitem",
+		onFocus: c,
+		onClick: l,
+		onKeyDown: (e) => {
+			e.stopPropagation(), e.key === "Enter" && l?.();
+		},
+		onMouseOver: u,
+		children: [/* @__PURE__ */ n(t, {
+			name: a,
+			hidden: !0,
+			size: e.Small
+		}), d]
+	});
+};
+//#endregion
+export { i as MenuLeaf };

package/dist/components/organisms/menu/list-item/MenuListItem.css

@@ -1 +1 @@
-.cl-sub-menu-bar{list-style:none;margin:0;padding:0;padding-inline-start:0;display:flex;gap:var(--cl-s-gap);justify-content:flex-start;width:100%;animation:cl-fade-in ease .4s;flex-direction:column;padding-left:var(--cl-l-gap);margin-left:var(--cl-l-gap);margin-top:var(--cl-s-gap);box-sizing:border-box;border-left:var(--cl-light-border)}.cl-sub-menu-bar_horizontal{position:absolute;top:100%;left:0%;width:max-content;border-radius:var(--cl-border-radius);border:var(--cl-light-border);box-shadow:var(--cl-box-shadow);background-color:var(--cl-base-background-color);padding:var(--cl-m-gap);margin:0;z-index:var(--cl-z-index-menu)}
+.cl-sub-menu-bar{padding:0;gap:var(--cl-s-gap);width:100%;padding-inline-start:0;padding-left:var(--cl-l-gap);margin:0;margin-left:var(--cl-l-gap);margin-top:var(--cl-s-gap);box-sizing:border-box;border-left:var(--cl-light-border);flex-direction:column;justify-content:flex-start;list-style:none;animation:.4s cl-fade-in;display:flex}.cl-sub-menu-bar_horizontal{border-radius:var(--cl-border-radius);border:var(--cl-light-border);width:max-content;box-shadow:var(--cl-box-shadow);background-color:var(--cl-base-background-color);padding:var(--cl-m-gap);z-index:var(--cl-z-index-menu);margin:0;position:absolute;top:100%;left:0%}

package/dist/components/organisms/menu/list-item/MenuListItem2.js

@@ -0,0 +1,38 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { OrientationMode as t } from "../../../../enums/orientation-mode.js";
+import { MenuLeaf as n } from "../leaf/MenuLeaf2.js";
+import { SubMenu as r } from "../sub-menu/SubMenu2.js";
+import './MenuListItem.css';/* empty css             */
+import { jsx as i } from "react/jsx-runtime";
+import { useState as a } from "react";
+//#region src/components/organisms/menu/list-item/MenuListItem.tsx
+var o = ({ item: s, mode: c, openedOn: l }) => {
+	let u = !s?.nestedItems?.length, [d, f] = a(!1), p = e(["cl-sub-menu-bar", { "cl-sub-menu-bar_horizontal": c === t.Horizontal }]);
+	return u ? /* @__PURE__ */ i(n, { item: s }) : /* @__PURE__ */ i(r, {
+		item: s,
+		isSubMenuOpened: d,
+		toggleSubMenu: () => {
+			f(!d);
+		},
+		closeSubMenu: () => {
+			f(!1);
+		},
+		openSubMenu: () => {
+			f(!0);
+		},
+		mode: c,
+		openedOn: l,
+		children: /* @__PURE__ */ i("ul", {
+			className: p,
+			role: "menu",
+			"aria-label": s.label,
+			children: s?.nestedItems?.map((e) => /* @__PURE__ */ i(o, {
+				item: e,
+				mode: c,
+				openedOn: l
+			}, e.id))
+		})
+	});
+};
+//#endregion
+export { o as MenuListItem };

package/dist/components/organisms/menu/sub-menu/SubMenu.css

@@ -1 +1 @@
-.cl-sub-menu{display:flex;justify-content:flex-start;align-items:center;flex-direction:column;gap:0;padding:0;position:relative;border-radius:var(--cl-border-radius)}.cl-sub-menu:focus-visible{outline:var(--cl-outline-border)}.cl-sub-menu a{color:var(--cl-base-font-color);text-decoration:none}.cl-sub-menu__text{color:var(--cl-base-font-color);position:relative;display:flex;box-sizing:border-box;gap:var(--cl-m-gap);align-items:center;width:100%;justify-content:space-between;background:transparent;padding:var(--cl-m-gap);border-radius:var(--cl-border-radius);cursor:pointer;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-sub-menu__text{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-sub-menu__text{font-size:var(--cl-typography-base-desktop)}}.cl-sub-menu__text:hover{text-shadow:var(--cl-text-shadow)}.cl-sub-menu__text:hover svg{filter:var(--cl-drop-shadow)}.cl-sub-menu__text span{display:flex;gap:var(--cl-m-gap);align-items:center}.cl-sub-menu__icon_opened{transform:rotate(180deg)}
+.cl-sub-menu{border-radius:var(--cl-border-radius);flex-direction:column;justify-content:flex-start;align-items:center;gap:0;padding:0;display:flex;position:relative}.cl-sub-menu:focus-visible{outline:var(--cl-outline-border)}.cl-sub-menu a{color:var(--cl-base-font-color);text-decoration:none}.cl-sub-menu__text{color:var(--cl-base-font-color);box-sizing:border-box;gap:var(--cl-m-gap);width:100%;padding:var(--cl-m-gap);border-radius:var(--cl-border-radius);cursor:pointer;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:0 0;justify-content:space-between;align-items:center;font-weight:400;line-height:1.5;display:flex;position:relative}@media (width>=640px){.cl-sub-menu__text{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-sub-menu__text{font-size:var(--cl-typography-base-desktop)}}.cl-sub-menu__text:hover{text-shadow:var(--cl-text-shadow)}.cl-sub-menu__text:hover svg{filter:var(--cl-drop-shadow)}.cl-sub-menu__text span{gap:var(--cl-m-gap);align-items:center;display:flex}.cl-sub-menu__icon_opened{transform:rotate(180deg)}

package/dist/components/organisms/menu/sub-menu/SubMenu2.js

@@ -0,0 +1,56 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../../enums/element-size.js";
+import { IconName as n } from "../../../../enums/icon-name.js";
+import { OrientationMode as r } from "../../../../enums/orientation-mode.js";
+import i from "../../../atoms/icon/Icon2.js";
+import { useClickOutside as a } from "../../../../hooks/use-click-outside/use-click-outside.js";
+import './SubMenu.css';/* empty css        */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRef as c } from "react";
+//#region src/components/organisms/menu/sub-menu/SubMenu.tsx
+var l = ({ item: l, isSubMenuOpened: u, toggleSubMenu: d, closeSubMenu: f, openSubMenu: p, openedOn: m, mode: h, children: g }) => {
+	let { icon: _, link: v, label: y } = l, b = c(null), x = c(null), S = e(["cl-sub-menu__icon", { "cl-sub-menu__icon_opened": u }]), C = v ? /* @__PURE__ */ s("a", {
+		href: v,
+		target: "_blank",
+		rel: "noreferrer",
+		children: [/* @__PURE__ */ o(i, {
+			name: _,
+			size: t.Small
+		}), y]
+	}) : /* @__PURE__ */ s("span", { children: [/* @__PURE__ */ o(i, {
+		name: _,
+		size: t.Small
+	}), y] }), w = (e) => {
+		e.stopPropagation(), e.key === " " && d();
+	};
+	return a({
+		ref: b,
+		dependentRef: x,
+		onClickOutsideHandler: () => {
+			h !== r.Vertical && f();
+		}
+	}), /* @__PURE__ */ s("li", {
+		className: "cl-sub-menu",
+		tabIndex: 0,
+		role: "menuitem",
+		"aria-haspopup": "true",
+		"aria-expanded": u,
+		onKeyDown: w,
+		onMouseEnter: m === "hover" ? p : void 0,
+		onMouseLeave: m === "hover" ? f : void 0,
+		ref: b,
+		children: [/* @__PURE__ */ s("span", {
+			className: "cl-sub-menu__text",
+			ref: x,
+			onClick: d,
+			onKeyDown: w,
+			children: [C, /* @__PURE__ */ o(i, {
+				name: n.ChevronDown,
+				className: S,
+				size: t.Small
+			})]
+		}), u && g]
+	});
+};
+//#endregion
+export { l as SubMenu };

package/dist/components/organisms/tabs/Tabs.css

@@ -1 +1 @@
-.cl-tabs{display:flex;flex-direction:column;width:100%}.cl-tabs_vertical{flex-direction:row}
+.cl-tabs{flex-direction:column;width:100%;display:flex}.cl-tabs_vertical{flex-direction:row}

package/dist/components/organisms/tabs/Tabs2.js

@@ -0,0 +1,60 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { OrientationMode as t } from "../../../enums/orientation-mode.js";
+import { TabContent as n } from "./content/TabContent2.js";
+import { TabList as r } from "./list/TabList2.js";
+import './Tabs.css';/* empty css     */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useState as o } from "react";
+//#region src/components/organisms/tabs/Tabs.tsx
+var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = t.Horizontal, stretched: d = !1, editable: f = !1, extendable: p = !1, extendedTabLabel: m = "New Tab", extendedTabContent: h, onTabTitleChange: g, onTabAdd: _, onTabSelect: v, onTabDelete: y, ...b }) => {
+	let [x, S] = o(s), C = s.length, [w, T] = o(C + 1), E = x.map((e) => e.id), D = E.map((e) => `tabpanel_${e}`), [O, k] = o(c && E.includes(c) ? c : E[0]), A = e([
+		"cl-tabs",
+		l,
+		{ "cl-tabs_vertical": u === t.Vertical }
+	]), j = (e) => {
+		k(e), v?.(e);
+	}, M = (e, t) => {
+		S((n) => n.map((n) => n.id === e ? {
+			...n,
+			title: t
+		} : n)), g?.(e, t);
+	}, N = () => {
+		let e = `added-tab-${w}`, t = {
+			id: e,
+			title: m || `Tab ${w}`,
+			content: h || /* @__PURE__ */ i("div", {})
+		};
+		S((e) => [...e, t]), T((e) => e + 1), _?.(), j(e);
+	}, P = (e) => {
+		if (S((t) => t.filter((t) => t.id !== e)), O === e) {
+			let t = E.indexOf(e), n;
+			n = t > 0 ? E[t - 1] : E.length > 1 ? E[1] : void 0, n && j(n);
+		}
+		y?.(e);
+	};
+	return /* @__PURE__ */ a("div", {
+		...b,
+		className: A,
+		children: [/* @__PURE__ */ i(r, {
+			tabs: x,
+			selectedTabId: O,
+			tabPanelIds: D,
+			onTabSelect: j,
+			onTabTitleChange: M,
+			mode: u,
+			tabIds: E,
+			stretched: d,
+			editable: f,
+			extendable: p,
+			onTabAdd: N,
+			onTabDelete: P
+		}), /* @__PURE__ */ i(n, {
+			tabs: x,
+			selectedTabId: O,
+			extendedTabContent: h,
+			extendable: p
+		})]
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/organisms/tabs/button/TabButton.css

@@ -1 +1 @@
-.cl-tab{color:var(--cl-base-font-color);background:transparent;outline:none;border:none;padding:var(--cl-m-gap);cursor:pointer;flex:1;border-radius:var(--cl-border-radius);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-tab{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-tab{font-size:var(--cl-typography-base-desktop)}}.cl-tab:focus-visible{outline:var(--cl-outline-border);outline-offset:-4px}.cl-tab__wrapper{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--cl-l-gap);border-radius:var(--cl-border-radius);border:var(--cl-light-border);background-color:var(--cl-surface-a10)}.cl-tab__buttons{margin-right:var(--cl-s-gap);display:flex;align-items:center;gap:0}.cl-tab__wrapper_selected{top:var(--cl-xs-gap);box-shadow:var(--cl-box-shadow);border:var(--cl-light-border);background-color:var(--cl-base-background-color)}.cl-tab__wrapper_vertical .cl-tab__wrapper_selected{top:0;left:var(--cl-xs-gap)}.cl-tab__wrapper_vertical .cl-tab__buttons{flex-direction:column}.cl-tab__wrapper_stretched{flex:1}.cl-tab__wrapper_disabled{pointer-events:none;opacity:.5}.cl-tab__wrapper_inactive{opacity:.7}.cl-tab__wrapper_inactive:hover{opacity:1}
+.cl-tab{color:var(--cl-base-font-color);padding:var(--cl-m-gap);cursor:pointer;border-radius:var(--cl-border-radius);white-space:nowrap;text-overflow:ellipsis;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:0 0;border:none;outline:none;flex:1;font-weight:400;line-height:1.5;overflow:hidden}@media (width>=640px){.cl-tab{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-tab{font-size:var(--cl-typography-base-desktop)}}.cl-tab:focus-visible{outline:var(--cl-outline-border);outline-offset:-4px}.cl-tab__wrapper{justify-content:space-between;align-items:center;gap:var(--cl-l-gap);border-radius:var(--cl-border-radius);border:var(--cl-light-border);background-color:var(--cl-surface-a10);display:flex;position:relative}.cl-tab__buttons{margin-right:var(--cl-s-gap);align-items:center;gap:0;display:flex}.cl-tab__wrapper_selected{top:var(--cl-xs-gap);box-shadow:var(--cl-box-shadow);border:var(--cl-light-border);background-color:var(--cl-base-background-color)}.cl-tab__wrapper_vertical .cl-tab__wrapper_selected{top:0;left:var(--cl-xs-gap)}.cl-tab__wrapper_vertical .cl-tab__buttons{flex-direction:column}.cl-tab__wrapper_stretched{flex:1}.cl-tab__wrapper_disabled{pointer-events:none;opacity:.5}.cl-tab__wrapper_inactive{opacity:.7}.cl-tab__wrapper_inactive:hover{opacity:1}

package/dist/components/organisms/tabs/button/TabButton2.js

@@ -0,0 +1,83 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ButtonView as t } from "../../../../enums/button-view.js";
+import { ElementSize as n } from "../../../../enums/element-size.js";
+import { IconName as r } from "../../../../enums/icon-name.js";
+import { OrientationMode as i } from "../../../../enums/orientation-mode.js";
+import a from "../../../atoms/button/Button2.js";
+import { TabEditInput as o } from "../edit-input/TabEditInput2.js";
+import './TabButton.css';/* empty css          */
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useEffect as u, useId as d, useRef as f, useState as p } from "react";
+//#region src/components/organisms/tabs/button/TabButton.tsx
+var m = ({ title: m, onTabSelect: h, onTabTitleChange: g, onTabDelete: _, tabId: v, isSelected: y, isDisabled: b = !1, stretched: x = !1, editable: S = !1, extendable: C = !1, tabPanelId: w, mode: T }) => {
+	let [E, D] = p(!1), [O, k] = p(m), A = f(null), j = d(), M = S && !b && y, N = C && !b && !!_ && y, P = M || N, F = e(["cl-tab__wrapper", {
+		"cl-tab__wrapper_disabled": b,
+		"cl-tab__wrapper_vertical": T === i.Vertical,
+		"cl-tab__wrapper_selected": y,
+		"cl-tab__wrapper_stretched": x,
+		"cl-tab__wrapper_editable": S,
+		"cl-tab__wrapper_inactive": !y
+	}]);
+	u(() => {
+		E && A.current && (A.current.focus(), A.current.select());
+	}, [E]), u(() => {
+		k(m);
+	}, [m]);
+	let I = () => {
+		b || D(!E);
+	}, L = () => {
+		E || h(v);
+	}, R = (e) => {
+		k(e.target.value);
+	}, z = (e) => {
+		e.relatedTarget?.id !== j && V();
+	}, B = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), V()) : e.key === "Escape" && (e.preventDefault(), H());
+	}, V = () => {
+		O.trim() && O !== m ? g?.(O.trim()) : k(m), D(!1);
+	}, H = () => {
+		k(m), D(!1);
+	};
+	return /* @__PURE__ */ c("span", {
+		className: F,
+		children: E ? /* @__PURE__ */ c(o, {
+			tabId: v,
+			editValue: O,
+			isEditMode: E,
+			onInputChange: R,
+			onInputBlur: z,
+			onInputKeyDown: B,
+			onSave: V,
+			onCancel: H,
+			cancelButtonId: j
+		}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("button", {
+			role: "tab",
+			id: v,
+			onClick: L,
+			"aria-selected": y,
+			"aria-controls": w,
+			className: "cl-tab",
+			disabled: b,
+			children: O
+		}), P && /* @__PURE__ */ l("span", {
+			className: "cl-tab__buttons",
+			children: [M && /* @__PURE__ */ c(a, {
+				view: t.Icon,
+				icon: r.Edit3,
+				onClick: I,
+				label: "Edit tab",
+				tooltip: "Edit tab",
+				iconSize: n.Small
+			}), N && /* @__PURE__ */ c(a, {
+				view: t.Icon,
+				icon: r.Trash2,
+				onClick: () => _?.(v),
+				label: "Delete tab",
+				tooltip: "Delete tab",
+				iconSize: n.Small
+			})]
+		})] })
+	});
+};
+//#endregion
+export { m as TabButton };

package/dist/components/organisms/tabs/content/TabContent.css

@@ -1 +1 @@
-.cl-tab-content{color:var(--cl-base-font-color);border-top:var(--cl-light-border);background-color:var(--cl-base-background-color);padding:var(--cl-l-gap);flex-grow:1;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-tab-content{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-tab-content{font-size:var(--cl-typography-base-desktop)}}
+.cl-tab-content{color:var(--cl-base-font-color);border-top:var(--cl-light-border);background-color:var(--cl-base-background-color);padding:var(--cl-l-gap);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-grow:1;font-weight:400;line-height:1.5}@media (width>=640px){.cl-tab-content{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-tab-content{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/organisms/tabs/content/TabContent2.js

@@ -0,0 +1,16 @@
+import './TabContent.css';/* empty css           */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/organisms/tabs/content/TabContent.tsx
+var t = ({ tabs: t, selectedTabId: n, extendable: r, extendedTabContent: i }) => {
+	let a = t.find((e) => e.id === n)?.content, o = `tabpanel_${n}`, s = r && !a;
+	return /* @__PURE__ */ e("div", {
+		role: "tabpanel",
+		"data-testid": "tab-content",
+		"aria-labelledby": n,
+		id: o,
+		className: "cl-tab-content",
+		children: s ? i : a
+	});
+};
+//#endregion
+export { t as TabContent };

package/dist/components/organisms/tabs/edit-input/TabEditInput.css

@@ -1 +1 @@
-.cl-tab-edit-container{display:flex;align-items:center;justify-content:space-between;gap:var(--cl-s-gap);width:100%;padding:0 var(--cl-s-gap)}.cl-tab-edit-container__input{flex:1;padding-block:0;padding-inline:0;padding:var(--cl-s-gap);border:var(--cl-light-border);border-radius:var(--cl-border-radius);color:var(--cl-base-font-color);background:transparent;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-tab-edit-container__input{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-tab-edit-container__input{font-size:var(--cl-typography-base-desktop)}}.cl-tab-edit-container__input:focus-visible,.cl-tab-edit-container__input:focus{outline:none}.cl-tab-edit-container__buttons{display:flex;align-items:center}
+.cl-tab-edit-container{justify-content:space-between;align-items:center;gap:var(--cl-s-gap);width:100%;padding:0 var(--cl-s-gap);display:flex}.cl-tab-edit-container__input{padding-block:0;padding-inline:0;padding:var(--cl-s-gap);border:var(--cl-light-border);border-radius:var(--cl-border-radius);color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:0 0;flex:1;font-weight:400;line-height:1.5}@media (width>=640px){.cl-tab-edit-container__input{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-tab-edit-container__input{font-size:var(--cl-typography-base-desktop)}}.cl-tab-edit-container__input:focus-visible,.cl-tab-edit-container__input:focus{outline:none}.cl-tab-edit-container__buttons{align-items:center;display:flex}

package/dist/components/organisms/tabs/edit-input/TabEditInput2.js

@@ -0,0 +1,45 @@
+import { ButtonView as e } from "../../../../enums/button-view.js";
+import { ElementSize as t } from "../../../../enums/element-size.js";
+import { IconName as n } from "../../../../enums/icon-name.js";
+import r from "../../../atoms/button/Button2.js";
+import './TabEditInput.css';/* empty css             */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useEffect as o, useRef as s } from "react";
+//#region src/components/organisms/tabs/edit-input/TabEditInput.tsx
+var c = ({ tabId: c, isEditMode: l, editValue: u, onInputChange: d, onInputBlur: f, onInputKeyDown: p, onSave: m, onCancel: h, cancelButtonId: g }) => {
+	let _ = s(null);
+	return o(() => {
+		l && _.current && (_.current.focus(), _.current.select());
+	}, [l]), /* @__PURE__ */ a("div", {
+		className: "cl-tab-edit-container",
+		children: [/* @__PURE__ */ i("input", {
+			ref: _,
+			id: `${c}-input`,
+			type: "text",
+			value: u,
+			onChange: d,
+			onBlur: f,
+			onKeyDown: p,
+			className: "cl-tab-edit-container__input",
+			maxLength: 50
+		}), /* @__PURE__ */ a("span", {
+			className: "cl-tab-edit-container__buttons",
+			children: [/* @__PURE__ */ i(r, {
+				view: e.Icon,
+				icon: n.Check,
+				onClick: m,
+				label: "Save tab title",
+				iconSize: t.Small
+			}), /* @__PURE__ */ i(r, {
+				view: e.Icon,
+				icon: n.X,
+				onClick: h,
+				label: "Cancel tab title change",
+				id: g,
+				iconSize: t.Small
+			})]
+		})]
+	});
+};
+//#endregion
+export { c as TabEditInput };

package/dist/components/organisms/tabs/list/TabList.css

@@ -1 +1 @@
-.cl-tab-list{padding:0 var(--cl-m-gap) var(--cl-m-gap) var(--cl-m-gap);display:flex;gap:var(--cl-m-gap);max-width:100%;overflow-y:hidden;overflow-x:auto}.cl-tab-list:focus{outline:var(--cl-outline-border);outline-offset:4px}.cl-tab-list>span:last-of-type{display:flex;align-items:center;justify-content:center}.cl-tab-list>span:last-of-type button{width:100%}.cl-tab-list_vertical{flex-shrink:0;flex-direction:column;border-bottom:none;border-right:var(--cl-light-border);padding:var(--cl-m-gap) var(--cl-m-gap) var(--cl-m-gap) 0;max-height:100%;overflow-x:hidden;overflow-y:auto}
+.cl-tab-list{padding:0 var(--cl-m-gap) var(--cl-m-gap) var(--cl-m-gap);gap:var(--cl-m-gap);max-width:100%;display:flex;overflow:auto hidden}.cl-tab-list:focus{outline:var(--cl-outline-border);outline-offset:4px}.cl-tab-list>span:last-of-type{justify-content:center;align-items:center;display:flex}.cl-tab-list>span:last-of-type button{width:100%}.cl-tab-list_vertical{border-bottom:none;border-right:var(--cl-light-border);padding:var(--cl-m-gap) var(--cl-m-gap) var(--cl-m-gap) 0;flex-direction:column;flex-shrink:0;max-height:100%;overflow:hidden auto}

package/dist/components/organisms/tabs/list/TabList2.js

@@ -0,0 +1,51 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { moveFocusOnElementById as t } from "../../../../utils/move-focus-on-element-by-id.js";
+import { ButtonView as n } from "../../../../enums/button-view.js";
+import { IconName as r } from "../../../../enums/icon-name.js";
+import { OrientationMode as i } from "../../../../enums/orientation-mode.js";
+import a from "../../../atoms/button/Button2.js";
+import { TabButton as o } from "../button/TabButton2.js";
+import './TabList.css';/* empty css        */
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/organisms/tabs/list/TabList.tsx
+var l = ({ tabs: l, onTabSelect: u, onTabTitleChange: d, selectedTabId: f, tabPanelIds: p, mode: m, tabIds: h, stretched: g, editable: _ = !1, extendable: v = !1, onTabAdd: y, onTabDelete: b }) => {
+	let x = e(["cl-tab-list", { "cl-tab-list_vertical": m === i.Vertical }]), S = (e) => {
+		let n = h.indexOf(f);
+		if (![
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowRight",
+			"ArrowDown"
+		].includes(e.key) || (e.preventDefault(), e.key === "ArrowUp" && m === i.Horizontal || e.key === "ArrowLeft" && m === i.Vertical)) return;
+		let r = h[e.key === "ArrowLeft" || e.key === "ArrowUp" ? C(n, h.length) : w(n, h.length)];
+		r && (t(r), u(r));
+	}, C = (e, t) => e - 1 >= 0 ? e - 1 : t - 1, w = (e, t) => e === t - 1 ? 0 : e + 1;
+	return /* @__PURE__ */ c("div", {
+		role: "tablist",
+		"data-testid": "tab-list",
+		onKeyDown: S,
+		className: x,
+		children: [l.map(({ id: e, title: t, disabled: n }, r) => /* @__PURE__ */ s(o, {
+			title: t,
+			onTabSelect: u,
+			onTabTitleChange: d ? (t) => d(e, t) : void 0,
+			tabId: e,
+			isSelected: e === f,
+			isDisabled: n,
+			tabPanelId: p[r],
+			mode: m,
+			stretched: g,
+			editable: _,
+			extendable: v,
+			onTabDelete: b
+		}, e)), v && /* @__PURE__ */ s(a, {
+			label: "Add Tab",
+			tooltip: "Add Tab",
+			view: n.Icon,
+			icon: r.PlusCircle,
+			onClick: y
+		})]
+	});
+};
+//#endregion
+export { l as TabList };

package/dist/enums/alert-mode.js

@@ -1,4 +1,6 @@
-var n = /* @__PURE__ */ ((r) => (r.Success = "success", r.Error = "error", r.Warning = "warning", r.Info = "info", r.Help = "help", r))(n || {});
-export {
-  n as AlertMode
-};
+//#region src/enums/alert-mode.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Success = "success", e.Error = "error", e.Warning = "warning", e.Info = "info", e.Help = "help", e;
+}({});
+//#endregion
+export { e as AlertMode };

package/dist/enums/button-view.js

@@ -1,4 +1,6 @@
-var n = /* @__PURE__ */ ((r) => (r.Primary = "primary", r.Secondary = "secondary", r.Icon = "icon", r.Inner = "inner", r))(n || {});
-export {
-  n as ButtonView
-};
+//#region src/enums/button-view.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Primary = "primary", e.Secondary = "secondary", e.Icon = "icon", e.Inner = "inner", e;
+}({});
+//#endregion
+export { e as ButtonView };

package/dist/enums/element-size.js

@@ -1,4 +1,6 @@
-var a = /* @__PURE__ */ ((r) => (r.ExtraSmall = "xs", r.Small = "s", r.Medium = "m", r.Large = "l", r.ExtraLarge = "xl", r.ExtraExtraLarge = "2xl", r))(a || {});
-export {
-  a as ElementSize
-};
+//#region src/enums/element-size.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.ExtraSmall = "xs", e.Small = "s", e.Medium = "m", e.Large = "l", e.ExtraLarge = "xl", e.ExtraExtraLarge = "2xl", e;
+}({});
+//#endregion
+export { e as ElementSize };