chop-logic-components 3.7.3 → 4.0.1

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+const d = ({
+  title: r,
+  component: e
+}) => /* @__PURE__ */ t("th", { children: e ?? r ?? "" });
+export {
+  d as GridHeaderCell
+};

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

@@ -0,0 +1,2 @@
+export { default } from './HeaderCell.js';
+export * from './HeaderCell.js';

package/dist/components/organisms/grid/index.js

@@ -0,0 +1,3 @@
+export { default } from './Grid.js';
+export * from './Grid.js';
+import './Grid.css';

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

@@ -0,0 +1,24 @@
+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
+};

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

@@ -0,0 +1,2 @@
+export { default } from './SelectAllGridRowsCell.js';
+export * from './SelectAllGridRowsCell.js';

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

@@ -0,0 +1,24 @@
+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
+};

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

@@ -0,0 +1,2 @@
+export { default } from './SelectGridRowCell.js';
+export * from './SelectGridRowCell.js';

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

@@ -0,0 +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}

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './Menu.js';
+export * from './Menu.js';
+import './Menu.css';

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

@@ -0,0 +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)}

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

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

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

@@ -0,0 +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)}

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

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

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

@@ -0,0 +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)}

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './SubMenu.js';
+export * from './SubMenu.js';
+import './SubMenu.css';

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

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

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

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

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

@@ -0,0 +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}

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

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

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

@@ -0,0 +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)}}

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

@@ -0,0 +1,19 @@
+import { jsx as d } from "react/jsx-runtime";
+import './TabContent.css';/* empty css               */
+const l = ({ tabs: o, selectedTabId: t, extendable: a, extendedTabContent: e }) => {
+  const n = o.find((c) => c.id === t)?.content, i = `tabpanel_${t}`;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      role: "tabpanel",
+      "data-testid": "tab-content",
+      "aria-labelledby": t,
+      id: i,
+      className: "cl-tab-content",
+      children: a && !n ? e : n
+    }
+  );
+};
+export {
+  l as TabContent
+};

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

@@ -0,0 +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}

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './Tabs.js';
+export * from './Tabs.js';
+import './Tabs.css';

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

@@ -0,0 +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}

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

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