chop-logic-components 4.1.1 → 4.3.0

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

@@ -1,14 +1,14 @@
-import { getClassName as e } from "../../../../utils/get-class-name.js";
-import { OrientationMode as t } from "../../../../enums/orientation-mode.js";
+import { OrientationMode as e } from "../../../../enums/orientation-mode.js";
+import { getClassName as t } from "../../../../utils/get-class-name.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";
+import { useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#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, {
+	let u = !s?.nestedItems?.length, [d, f] = i(!1), p = t(["cl-sub-menu-bar", { "cl-sub-menu-bar_horizontal": c === e.Horizontal }]);
+	return u ? /* @__PURE__ */ a(n, { item: s }) : /* @__PURE__ */ a(r, {
 		item: s,
 		isSubMenuOpened: d,
 		toggleSubMenu: () => {
@@ -22,11 +22,11 @@ var o = ({ item: s, mode: c, openedOn: l }) => {
 		},
 		mode: c,
 		openedOn: l,
-		children: /* @__PURE__ */ i("ul", {
+		children: /* @__PURE__ */ a("ul", {
 			className: p,
 			role: "menu",
 			"aria-label": s.label,
-			children: s?.nestedItems?.map((e) => /* @__PURE__ */ i(o, {
+			children: s?.nestedItems?.map((e) => /* @__PURE__ */ a(o, {
 				item: e,
 				mode: c,
 				openedOn: l

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

@@ -1,25 +1,25 @@
-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 { ElementSize as e } from "../../../../enums/element-size.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import { OrientationMode as n } from "../../../../enums/orientation-mode.js";
+import { getClassName as r } from "../../../../utils/get-class-name.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";
+import { useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#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", {
+	let { icon: _, link: v, label: y } = l, b = o(null), x = o(null), S = r(["cl-sub-menu__icon", { "cl-sub-menu__icon_opened": u }]), C = v ? /* @__PURE__ */ c("a", {
 		href: v,
 		target: "_blank",
 		rel: "noreferrer",
-		children: [/* @__PURE__ */ o(i, {
+		children: [/* @__PURE__ */ s(i, {
 			name: _,
-			size: t.Small
+			size: e.Small
 		}), y]
-	}) : /* @__PURE__ */ s("span", { children: [/* @__PURE__ */ o(i, {
+	}) : /* @__PURE__ */ c("span", { children: [/* @__PURE__ */ s(i, {
 		name: _,
-		size: t.Small
+		size: e.Small
 	}), y] }), w = (e) => {
 		e.stopPropagation(), e.key === " " && d();
 	};
@@ -27,9 +27,9 @@ var l = ({ item: l, isSubMenuOpened: u, toggleSubMenu: d, closeSubMenu: f, openS
 		ref: b,
 		dependentRef: x,
 		onClickOutsideHandler: () => {
-			h !== r.Vertical && f();
+			h !== n.Vertical && f();
 		}
-	}), /* @__PURE__ */ s("li", {
+	}), /* @__PURE__ */ c("li", {
 		className: "cl-sub-menu",
 		tabIndex: 0,
 		role: "menuitem",
@@ -39,15 +39,15 @@ var l = ({ item: l, isSubMenuOpened: u, toggleSubMenu: d, closeSubMenu: f, openS
 		onMouseEnter: m === "hover" ? p : void 0,
 		onMouseLeave: m === "hover" ? f : void 0,
 		ref: b,
-		children: [/* @__PURE__ */ s("span", {
+		children: [/* @__PURE__ */ c("span", {
 			className: "cl-sub-menu__text",
 			ref: x,
 			onClick: d,
 			onKeyDown: w,
-			children: [C, /* @__PURE__ */ o(i, {
-				name: n.ChevronDown,
+			children: [C, /* @__PURE__ */ s(i, {
+				name: t.ChevronDown,
 				className: S,
-				size: t.Small
+				size: e.Small
 			})]
 		}), u && g]
 	});

package/dist/components/organisms/preview-card/PreviewCard.css

@@ -0,0 +1 @@
+.cl-preview-card{border:var(--cl-light-border);border-radius:var(--cl-border-radius);background-color:var(--cl-surface-a0);color:var(--cl-base-font-color);font-family:var(--cl-core-font);box-shadow:var(--cl-box-shadow);flex-direction:column;width:30rem;display:flex;overflow:hidden}.cl-preview-card__image{border-bottom:var(--cl-light-border);border-radius:0!important}.cl-preview-card__image-link{line-height:0;text-decoration:none;display:block}.cl-preview-card__image-link:focus{outline:2px solid var(--cl-accent-a0);outline-offset:-2px}.cl-preview-card__title{padding:var(--cl-l-gap) var(--cl-l-gap) var(--cl-s-gap);margin:0}.cl-preview-card__summary{padding:0 var(--cl-l-gap) var(--cl-m-gap);margin:0}.cl-preview-card__authors{gap:var(--cl-m-gap);padding:var(--cl-m-gap) var(--cl-l-gap);flex-wrap:wrap;margin:0;list-style:none;display:flex}.cl-preview-card__author-item{align-items:center;gap:var(--cl-s-gap);font-style:italic;display:inline-flex}.cl-preview-card__tags{gap:var(--cl-s-gap);padding:var(--cl-m-gap) var(--cl-l-gap) var(--cl-l-gap);flex-wrap:wrap;margin:0;list-style:none;display:flex}.cl-preview-card__tag-item{display:inline-flex}.cl-preview-card__summary,.cl-preview-card__author-item{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;font-weight:400;line-height:1.2}@media (width>=640px){.cl-preview-card__summary,.cl-preview-card__author-item{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-preview-card__summary,.cl-preview-card__author-item{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/organisms/preview-card/PreviewCard.d.ts

@@ -0,0 +1,4 @@
+import { PreviewCardProps } from '../../../types';
+import { FC } from 'react';
+declare const PreviewCard: FC<PreviewCardProps>;
+export default PreviewCard;

package/dist/components/organisms/preview-card/PreviewCard2.js

@@ -0,0 +1,57 @@
+import { LinkTarget as e } from "../../../enums/link-target.js";
+import { getClassName as t } from "../../../utils/get-class-name.js";
+import n from "../../atoms/avatar/Avatar2.js";
+import r from "../../atoms/header/Header2.js";
+import i from "../../atoms/image/Image2.js";
+import a from "../../atoms/tag/Tag2.js";
+import './PreviewCard.css';/* empty css            */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/organisms/preview-card/PreviewCard.tsx
+var c = ({ link: c, linkTarget: l = e.Self, image: u, title: d, summary: f, authors: p = [], tags: m = [], className: h, ...g }) => {
+	let _ = t(["cl-preview-card", h]), v = l === e.Blank, y = d || "Preview card", b = `View article: ${d}`;
+	return /* @__PURE__ */ s("article", {
+		className: _,
+		"aria-label": y,
+		...g,
+		children: [
+			/* @__PURE__ */ o("a", {
+				href: c,
+				target: l,
+				rel: v ? "noopener noreferrer" : void 0,
+				"aria-label": b,
+				className: "cl-preview-card__image-link",
+				children: /* @__PURE__ */ o(i, {
+					...u,
+					className: "cl-preview-card__image"
+				})
+			}),
+			/* @__PURE__ */ o(r, {
+				as: "h6",
+				className: "cl-preview-card__title",
+				children: d
+			}),
+			f && /* @__PURE__ */ o("p", {
+				className: "cl-preview-card__summary",
+				children: f
+			}),
+			p.length > 0 && /* @__PURE__ */ o("ul", {
+				className: "cl-preview-card__authors",
+				"aria-label": "Authors",
+				children: p.map((e) => /* @__PURE__ */ s("li", {
+					className: "cl-preview-card__author-item",
+					children: [/* @__PURE__ */ o(n, { ...e }), /* @__PURE__ */ o("span", { children: e.name })]
+				}, e.id))
+			}),
+			m.length > 0 && /* @__PURE__ */ o("ul", {
+				className: "cl-preview-card__tags",
+				"aria-label": "Tags",
+				children: m.map((e) => /* @__PURE__ */ o("li", {
+					className: "cl-preview-card__tag-item",
+					children: /* @__PURE__ */ o(a, { ...e })
+				}, e.id))
+			})
+		]
+	});
+};
+//#endregion
+export { c as default };

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

@@ -1,16 +1,16 @@
-import { getClassName as e } from "../../../utils/get-class-name.js";
-import { OrientationMode as t } from "../../../enums/orientation-mode.js";
+import { OrientationMode as e } from "../../../enums/orientation-mode.js";
+import { getClassName as t } from "../../../utils/get-class-name.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";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#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([
+var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = e.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] = i(s), C = s.length, [w, T] = i(C + 1), E = x.map((e) => e.id), D = E.map((e) => `tabpanel_${e}`), [O, k] = i(c && E.includes(c) ? c : E[0]), A = t([
 		"cl-tabs",
 		l,
-		{ "cl-tabs_vertical": u === t.Vertical }
+		{ "cl-tabs_vertical": u === e.Vertical }
 	]), j = (e) => {
 		k(e), v?.(e);
 	}, M = (e, t) => {
@@ -22,7 +22,7 @@ var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = t.Horizontal, stret
 		let e = `added-tab-${w}`, t = {
 			id: e,
 			title: m || `Tab ${w}`,
-			content: h || /* @__PURE__ */ i("div", {})
+			content: h || /* @__PURE__ */ a("div", {})
 		};
 		S((e) => [...e, t]), T((e) => e + 1), _?.(), j(e);
 	}, P = (e) => {
@@ -32,10 +32,10 @@ var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = t.Horizontal, stret
 		}
 		y?.(e);
 	};
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ o("div", {
 		...b,
 		className: A,
-		children: [/* @__PURE__ */ i(r, {
+		children: [/* @__PURE__ */ a(r, {
 			tabs: x,
 			selectedTabId: O,
 			tabPanelIds: D,
@@ -48,7 +48,7 @@ var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = t.Horizontal, stret
 			extendable: p,
 			onTabAdd: N,
 			onTabDelete: P
-		}), /* @__PURE__ */ i(n, {
+		}), /* @__PURE__ */ a(n, {
 			tabs: x,
 			selectedTabId: O,
 			extendedTabContent: h,

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

@@ -1,26 +1,26 @@
-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 { 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 { OrientationMode as r } from "../../../../enums/orientation-mode.js";
+import { getClassName as i } from "../../../../utils/get-class-name.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";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#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", {
+	let [E, D] = u(!1), [O, k] = u(m), A = l(null), j = c(), M = S && !b && y, N = C && !b && !!_ && y, P = M || N, F = i(["cl-tab__wrapper", {
 		"cl-tab__wrapper_disabled": b,
-		"cl-tab__wrapper_vertical": T === i.Vertical,
+		"cl-tab__wrapper_vertical": T === r.Vertical,
 		"cl-tab__wrapper_selected": y,
 		"cl-tab__wrapper_stretched": x,
 		"cl-tab__wrapper_editable": S,
 		"cl-tab__wrapper_inactive": !y
 	}]);
-	u(() => {
+	s(() => {
 		E && A.current && (A.current.focus(), A.current.select());
-	}, [E]), u(() => {
+	}, [E]), s(() => {
 		k(m);
 	}, [m]);
 	let I = () => {
@@ -38,9 +38,9 @@ var m = ({ title: m, onTabSelect: h, onTabTitleChange: g, onTabDelete: _, tabId:
 	}, H = () => {
 		k(m), D(!1);
 	};
-	return /* @__PURE__ */ c("span", {
+	return /* @__PURE__ */ f("span", {
 		className: F,
-		children: E ? /* @__PURE__ */ c(o, {
+		children: E ? /* @__PURE__ */ f(o, {
 			tabId: v,
 			editValue: O,
 			isEditMode: E,
@@ -50,7 +50,7 @@ var m = ({ title: m, onTabSelect: h, onTabTitleChange: g, onTabDelete: _, tabId:
 			onSave: V,
 			onCancel: H,
 			cancelButtonId: j
-		}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("button", {
+		}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
 			role: "tab",
 			id: v,
 			onClick: L,
@@ -59,22 +59,22 @@ var m = ({ title: m, onTabSelect: h, onTabTitleChange: g, onTabDelete: _, tabId:
 			className: "cl-tab",
 			disabled: b,
 			children: O
-		}), P && /* @__PURE__ */ l("span", {
+		}), P && /* @__PURE__ */ p("span", {
 			className: "cl-tab__buttons",
-			children: [M && /* @__PURE__ */ c(a, {
-				view: t.Icon,
-				icon: r.Edit3,
+			children: [M && /* @__PURE__ */ f(a, {
+				view: e.Icon,
+				icon: n.Edit3,
 				onClick: I,
 				label: "Edit tab",
 				tooltip: "Edit tab",
-				iconSize: n.Small
-			}), N && /* @__PURE__ */ c(a, {
-				view: t.Icon,
-				icon: r.Trash2,
+				iconSize: t.Small
+			}), N && /* @__PURE__ */ f(a, {
+				view: e.Icon,
+				icon: n.Trash2,
 				onClick: () => _?.(v),
 				label: "Delete tab",
 				tooltip: "Delete tab",
-				iconSize: n.Small
+				iconSize: t.Small
 			})]
 		})] })
 	});

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

@@ -3,16 +3,16 @@ 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";
+import { useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#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(() => {
+	let _ = a(null);
+	return i(() => {
 		l && _.current && (_.current.focus(), _.current.select());
-	}, [l]), /* @__PURE__ */ a("div", {
+	}, [l]), /* @__PURE__ */ s("div", {
 		className: "cl-tab-edit-container",
-		children: [/* @__PURE__ */ i("input", {
+		children: [/* @__PURE__ */ o("input", {
 			ref: _,
 			id: `${c}-input`,
 			type: "text",
@@ -22,15 +22,15 @@ var c = ({ tabId: c, isEditMode: l, editValue: u, onInputChange: d, onInputBlur:
 			onKeyDown: p,
 			className: "cl-tab-edit-container__input",
 			maxLength: 50
-		}), /* @__PURE__ */ a("span", {
+		}), /* @__PURE__ */ s("span", {
 			className: "cl-tab-edit-container__buttons",
-			children: [/* @__PURE__ */ i(r, {
+			children: [/* @__PURE__ */ o(r, {
 				view: e.Icon,
 				icon: n.Check,
 				onClick: m,
 				label: "Save tab title",
 				iconSize: t.Small
-			}), /* @__PURE__ */ i(r, {
+			}), /* @__PURE__ */ o(r, {
 				view: e.Icon,
 				icon: n.X,
 				onClick: h,

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

@@ -1,24 +1,24 @@
-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 { ButtonView as e } from "../../../../enums/button-view.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import { OrientationMode as n } from "../../../../enums/orientation-mode.js";
+import { getClassName as r } from "../../../../utils/get-class-name.js";
+import { moveFocusOnElementById as i } from "../../../../utils/move-focus-on-element-by-id.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);
+	let x = r(["cl-tab-list", { "cl-tab-list_vertical": m === n.Vertical }]), S = (e) => {
+		let t = 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));
+		].includes(e.key) || (e.preventDefault(), e.key === "ArrowUp" && m === n.Horizontal || e.key === "ArrowLeft" && m === n.Vertical)) return;
+		let r = h[e.key === "ArrowLeft" || e.key === "ArrowUp" ? C(t, h.length) : w(t, h.length)];
+		r && (i(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",
@@ -41,8 +41,8 @@ var l = ({ tabs: l, onTabSelect: u, onTabTitleChange: d, selectedTabId: f, tabPa
 		}, e)), v && /* @__PURE__ */ s(a, {
 			label: "Add Tab",
 			tooltip: "Add Tab",
-			view: n.Icon,
-			icon: r.PlusCircle,
+			view: e.Icon,
+			icon: t.PlusCircle,
 			onClick: y
 		})]
 	});

package/dist/enums/index.d.ts

@@ -2,6 +2,7 @@ export { AlertMode } from './alert-mode';
 export { ButtonView } from './button-view';
 export { ElementSize } from './element-size';
 export { IconName } from './icon-name';
+export { LinkTarget } from './link-target';
 export { LoaderView } from './loader-view';
 export { OrientationMode } from './orientation-mode';
 export { SemanticColor } from './semantic-color';

package/dist/enums/index.js

@@ -2,6 +2,7 @@ export * from './alert-mode.js';
 export * from './button-view.js';
 export * from './element-size.js';
 export * from './icon-name.js';
+export * from './link-target.js';
 export * from './loader-view.js';
 export * from './orientation-mode.js';
 export * from './semantic-color.js';

package/dist/enums/link-target.d.ts

@@ -0,0 +1,6 @@
+export declare enum LinkTarget {
+    Self = "_self",
+    Blank = "_blank",
+    Parent = "_parent",
+    Top = "_top"
+}

package/dist/enums/link-target.js

@@ -0,0 +1,6 @@
+//#region src/enums/link-target.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Self = "_self", e.Blank = "_blank", e.Parent = "_parent", e.Top = "_top", e;
+}({});
+//#endregion
+export { e as LinkTarget };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from './main'
+export * from './main.js'
 export {}

package/dist/index.es.js

@@ -1,56 +1,61 @@
-import { withTooltip as e } from "./components/hocs/with-tooltip/with-tooltip.js";
-import { AlertMode as t } from "./enums/alert-mode.js";
-import { ButtonView as n } from "./enums/button-view.js";
-import { ElementSize as r } from "./enums/element-size.js";
-import { IconName as i } from "./enums/icon-name.js";
-import { LoaderView as a } from "./enums/loader-view.js";
-import { OrientationMode as o } from "./enums/orientation-mode.js";
-import { SemanticColor as s } from "./enums/semantic-color.js";
-import { TooltipContainer as c } from "./enums/tooltip-container.js";
-import l from "./components/atoms/button/Button2.js";
-import u from "./components/atoms/editable-text/EditableText2.js";
-import d from "./components/atoms/error-message/ErrorMessage2.js";
-import f from "./components/atoms/header/Header2.js";
-import p from "./components/atoms/icon/Icon2.js";
-import { withErrorBoundary as m } from "./components/hocs/with-error-boundary/with-error-boundary.js";
-import { withFigureCaption as h } from "./components/hocs/with-figure-caption/with-figure-caption.js";
-import g from "./components/atoms/image/Image2.js";
-import _ from "./components/atoms/input/Input2.js";
-import v from "./components/atoms/label/Label2.js";
-import y from "./components/atoms/link/Link2.js";
-import b from "./components/atoms/portal/Portal.js";
-import { useAutoClose as x } from "./hooks/use-auto-close/use-auto-close.js";
-import { useClickOutside as S } from "./hooks/use-click-outside/use-click-outside.js";
-import { useContainerDimensions as C } from "./hooks/use-container-dimensions/use-container-dimensions.js";
-import { useDebounce as w } from "./hooks/use-debounce/use-debounce.js";
-import { useElementIds as T } from "./hooks/use-element-ids/use-element-ids.js";
-import { useIsHovered as E } from "./hooks/use-is-hovered/use-is-hovered.js";
-import { useIsMounted as D } from "./hooks/use-is-mounted/use-is-mounted.js";
-import { useIsOverflow as O } from "./hooks/use-is-overflow/use-is-overflow.js";
-import { useKeyPress as k } from "./hooks/use-key-press/use-key-press.js";
-import { useModalFocusTrap as A } from "./hooks/use-modal-focus-trap/use-modal-focus-trap.js";
-import { useRemainingTimer as j } from "./hooks/use-remaining-timer/use-remaining-timer.js";
-import { FormContext as M } from "./components/contexts/form/FormContext.js";
-import { CL_DARK_THEME_CLASS as N, CL_LIGHT_THEME_CLASS as P, ThemeContext as F } from "./components/contexts/theme/ThemeContext.js";
-import { ThemeProvider as I } from "./components/contexts/theme/ThemeProvider.js";
-import { useResetFormInput as L } from "./hooks/use-reset-form-input/use-reset-form-input.js";
-import { useTheme as R } from "./hooks/use-theme/use-theme.js";
-import { useTooltipPosition as z } from "./hooks/use-tooltip-position/use-tooltip-position.js";
-import { useWindowDimensions as B } from "./hooks/use-window-dimensions/use-window-dimensions.js";
-import V from "./components/atoms/tooltip/Tooltip2.js";
-import H from "./components/molecules/accordion/Accordion2.js";
-import U from "./components/molecules/alert/Alert2.js";
-import W from "./components/molecules/breadcrumbs/Breadcrumbs2.js";
-import G from "./components/molecules/checkbox/Checkbox2.js";
-import K from "./components/molecules/multi-select/MultiSelect.js";
-import q from "./components/molecules/numeric-input/NumericInput2.js";
-import J from "./components/molecules/search/Search2.js";
-import Y from "./components/molecules/select/Select2.js";
-import X from "./components/molecules/switch/Switch2.js";
-import Z from "./components/molecules/text-input/TextInput2.js";
-import Q from "./components/organisms/dialog/Dialog2.js";
-import $ from "./components/organisms/form/Form2.js";
-import ee from "./components/organisms/grid/Grid2.js";
-import te from "./components/organisms/menu/Menu2.js";
-import ne from "./components/organisms/tabs/Tabs2.js";
-export { H as Accordion, U as Alert, t as AlertMode, W as Breadcrumbs, l as Button, n as ButtonView, N as CL_DARK_THEME_CLASS, P as CL_LIGHT_THEME_CLASS, G as Checkbox, Q as Dialog, u as EditableText, r as ElementSize, d as ErrorMessage, $ as Form, M as FormContext, ee as Grid, f as Header, p as Icon, i as IconName, g as Image, _ as Input, v as Label, y as Link, a as LoaderView, te as Menu, K as MultiSelect, q as NumericInput, o as OrientationMode, b as Portal, J as Search, Y as Select, s as SemanticColor, X as Switch, ne as Tabs, Z as TextInput, F as ThemeContext, I as ThemeProvider, V as Tooltip, c as TooltipContainer, x as useAutoClose, S as useClickOutside, C as useContainerDimensions, w as useDebounce, T as useElementIds, E as useIsHovered, D as useIsMounted, O as useIsOverflow, k as useKeyPress, A as useModalFocusTrap, j as useRemainingTimer, L as useResetFormInput, R as useTheme, z as useTooltipPosition, B as useWindowDimensions, m as withErrorBoundary, h as withFigureCaption, e as withTooltip };
+import { withErrorBoundary as e } from "./components/hocs/with-error-boundary/with-error-boundary.js";
+import { withFigureCaption as t } from "./components/hocs/with-figure-caption/with-figure-caption.js";
+import { withTooltip as n } from "./components/hocs/with-tooltip/with-tooltip.js";
+import { AlertMode as r } from "./enums/alert-mode.js";
+import { ButtonView as i } from "./enums/button-view.js";
+import { ElementSize as a } from "./enums/element-size.js";
+import { IconName as o } from "./enums/icon-name.js";
+import { LinkTarget as s } from "./enums/link-target.js";
+import { LoaderView as c } from "./enums/loader-view.js";
+import { OrientationMode as l } from "./enums/orientation-mode.js";
+import { SemanticColor as u } from "./enums/semantic-color.js";
+import { TooltipContainer as d } from "./enums/tooltip-container.js";
+import f from "./components/atoms/avatar/Avatar2.js";
+import p from "./components/atoms/button/Button2.js";
+import m from "./components/atoms/editable-text/EditableText2.js";
+import h from "./components/atoms/error-message/ErrorMessage2.js";
+import g from "./components/atoms/header/Header2.js";
+import _ from "./components/atoms/icon/Icon2.js";
+import v from "./components/atoms/image/Image2.js";
+import y from "./components/atoms/input/Input2.js";
+import b from "./components/atoms/label/Label2.js";
+import x from "./components/atoms/link/Link2.js";
+import S from "./components/atoms/portal/Portal.js";
+import C from "./components/atoms/tag/Tag2.js";
+import { useAutoClose as w } from "./hooks/use-auto-close/use-auto-close.js";
+import { useClickOutside as T } from "./hooks/use-click-outside/use-click-outside.js";
+import { useContainerDimensions as E } from "./hooks/use-container-dimensions/use-container-dimensions.js";
+import { useDebounce as D } from "./hooks/use-debounce/use-debounce.js";
+import { useElementIds as O } from "./hooks/use-element-ids/use-element-ids.js";
+import { useIsHovered as k } from "./hooks/use-is-hovered/use-is-hovered.js";
+import { useIsMounted as A } from "./hooks/use-is-mounted/use-is-mounted.js";
+import { useIsOverflow as j } from "./hooks/use-is-overflow/use-is-overflow.js";
+import { useKeyPress as M } from "./hooks/use-key-press/use-key-press.js";
+import { useModalFocusTrap as N } from "./hooks/use-modal-focus-trap/use-modal-focus-trap.js";
+import { useRemainingTimer as P } from "./hooks/use-remaining-timer/use-remaining-timer.js";
+import { FormContext as F } from "./components/contexts/form/FormContext.js";
+import { CL_DARK_THEME_CLASS as I, CL_LIGHT_THEME_CLASS as L, ThemeContext as R } from "./components/contexts/theme/ThemeContext.js";
+import { ThemeProvider as z } from "./components/contexts/theme/ThemeProvider.js";
+import { useResetFormInput as B } from "./hooks/use-reset-form-input/use-reset-form-input.js";
+import { useTheme as V } from "./hooks/use-theme/use-theme.js";
+import { useTooltipPosition as H } from "./hooks/use-tooltip-position/use-tooltip-position.js";
+import { useWindowDimensions as U } from "./hooks/use-window-dimensions/use-window-dimensions.js";
+import W from "./components/atoms/tooltip/Tooltip2.js";
+import G from "./components/molecules/accordion/Accordion2.js";
+import K from "./components/molecules/alert/Alert2.js";
+import q from "./components/molecules/breadcrumbs/Breadcrumbs2.js";
+import J from "./components/molecules/checkbox/Checkbox2.js";
+import Y from "./components/molecules/multi-select/MultiSelect.js";
+import X from "./components/molecules/numeric-input/NumericInput2.js";
+import Z from "./components/molecules/search/Search2.js";
+import Q from "./components/molecules/select/Select2.js";
+import $ from "./components/molecules/switch/Switch2.js";
+import ee from "./components/molecules/text-input/TextInput2.js";
+import te from "./components/organisms/dialog/Dialog2.js";
+import ne from "./components/organisms/form/Form2.js";
+import re from "./components/organisms/gallery/Gallery2.js";
+import ie from "./components/organisms/grid/Grid2.js";
+import ae from "./components/organisms/menu/Menu2.js";
+import oe from "./components/organisms/preview-card/PreviewCard2.js";
+import se from "./components/organisms/tabs/Tabs2.js";
+export { G as Accordion, K as Alert, r as AlertMode, f as Avatar, q as Breadcrumbs, p as Button, i as ButtonView, I as CL_DARK_THEME_CLASS, L as CL_LIGHT_THEME_CLASS, J as Checkbox, te as Dialog, m as EditableText, a as ElementSize, h as ErrorMessage, ne as Form, F as FormContext, re as Gallery, ie as Grid, g as Header, _ as Icon, o as IconName, v as Image, y as Input, b as Label, x as Link, s as LinkTarget, c as LoaderView, ae as Menu, Y as MultiSelect, X as NumericInput, l as OrientationMode, S as Portal, oe as PreviewCard, Z as Search, Q as Select, u as SemanticColor, $ as Switch, se as Tabs, C as Tag, ee as TextInput, R as ThemeContext, z as ThemeProvider, W as Tooltip, d as TooltipContainer, w as useAutoClose, T as useClickOutside, E as useContainerDimensions, D as useDebounce, O as useElementIds, k as useIsHovered, A as useIsMounted, j as useIsOverflow, M as useKeyPress, N as useModalFocusTrap, P as useRemainingTimer, B as useResetFormInput, V as useTheme, H as useTooltipPosition, U as useWindowDimensions, e as withErrorBoundary, t as withFigureCaption, n as withTooltip };

package/dist/styles/main.css

@@ -1 +1 @@
-:root{--cl-core-font:Arial, Helvetica, sans-serif;--cl-monospace-font:"Courier New", Courier, monospace;--cl-fancy-font:Georgia, "Times New Roman", Times, serif;--cl-xs-gap:2px;--cl-s-gap:4px;--cl-m-gap:8px;--cl-l-gap:16px;--cl-xl-gap:32px;--cl-xxl-gap:64px;--cl-icon-size:20px;--cl-thumb-size:24px;--cl-border-radius:4px;--cl-z-index-base:1;--cl-z-index-menu:5;--cl-z-index-popup:10;--cl-z-index-modal:20;--cl-typography-h1-mobile:2.25rem;--cl-typography-h1-tablet:2.5rem;--cl-typography-h1-desktop:3rem;--cl-typography-h2-mobile:2rem;--cl-typography-h2-tablet:2.25rem;--cl-typography-h2-desktop:2.5rem;--cl-typography-h3-mobile:1.75rem;--cl-typography-h3-tablet:2rem;--cl-typography-h3-desktop:2.25rem;--cl-typography-h4-mobile:1.5rem;--cl-typography-h4-tablet:1.75rem;--cl-typography-h4-desktop:2rem;--cl-typography-h5-mobile:1.25rem;--cl-typography-h5-tablet:1.5rem;--cl-typography-h5-desktop:1.75rem;--cl-typography-h6-mobile:1rem;--cl-typography-h6-tablet:1.125rem;--cl-typography-h6-desktop:1.25rem;--cl-typography-base-mobile:1rem;--cl-typography-base-tablet:1.125rem;--cl-typography-base-desktop:1.25rem;--cl-typography-small-mobile:.875rem;--cl-typography-small-tablet:1rem;--cl-typography-small-desktop:1.125rem;--cl-breakpoint-sm:640px;--cl-breakpoint-md:768px;--cl-breakpoint-lg:1024px;--cl-breakpoint-xl:1280px;--cl-breakpoint-xxl:1536px;--cl-base-font-color:#000;--cl-base-background-color:#fff;--cl-accent-a0:#8d1c12;--cl-accent-a10:#7d1c11;--cl-accent-a20:#6d1b10;--cl-accent-a30:#5e190f;--cl-surface-a0:#fff;--cl-surface-a10:#f0f0f0;--cl-surface-a20:#e1e1e1;--cl-surface-a30:#d3d3d3;--cl-surface-tonal-a0:#f7e8e4;--cl-surface-tonal-a10:#e9dcd8;--cl-surface-tonal-a20:#dbd0cd;--cl-surface-tonal-a30:#cec4c2;--cl-success-a0:#1b7f5c;--cl-success-a10:#28be8a;--cl-success-a20:#58dbad;--cl-warning-a0:#b8871f;--cl-warning-a10:#dfae44;--cl-warning-a20:#ebca85;--cl-danger-a0:#b13535;--cl-danger-a10:#d06262;--cl-danger-a20:#e29d9d;--cl-info-a0:#1e56a3;--cl-info-a10:#347ada;--cl-info-a20:#74a4e6;--cl-accent-gradient:linear-gradient(135deg, #8d1c12 0%, #7d1c11 50%, #6d1b10 100%);--cl-box-shadow:#0003 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#0003 4.8px 4.8px 6.4px;--cl-text-shadow:2.4px 2.4px 3.2px #00000026;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #00000026);--cl-shadow-background:#0000004d;--cl-accent-border:1px solid #8d1c12;--cl-danger-border:1px solid #d06262;--cl-success-border:1px solid #28be8a;--cl-warning-border:1px solid #dfae44;--cl-info-border:1px solid #347ada;--cl-light-border:1px solid #c0b8b6;--cl-outline-border:1px solid #000}.cl-components-dark-theme{--cl-base-background-color:#000;--cl-base-font-color:#fff;--cl-accent-a0:#eb5cbe;--cl-accent-a10:#ef71c5;--cl-accent-a20:#f385cc;--cl-accent-a30:#f697d4;--cl-surface-a0:#121212;--cl-surface-a10:#282828;--cl-surface-a20:#3f3f3f;--cl-surface-a30:#575757;--cl-surface-tonal-a0:#251a21;--cl-surface-tonal-a10:#3a2f36;--cl-surface-tonal-a20:#4f464c;--cl-surface-tonal-a30:#665d63;--cl-success-a0:#9ae8ce;--cl-success-a10:#47d5a6;--cl-success-a20:#22946e;--cl-warning-a0:#a87a2a;--cl-warning-a10:#d7ac61;--cl-warning-a20:#ecd7b2;--cl-danger-a0:#eb9e9e;--cl-danger-a10:#d94a4a;--cl-danger-a20:#9c2121;--cl-info-a0:#92b2e5;--cl-info-a10:#4077d1;--cl-info-a20:#21498a;--cl-accent-gradient:linear-gradient(135deg, #eb5cbe 0%, #ef71c5 50%, #f385cc 100%);--cl-box-shadow:#ffffff4d 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#ffffff4d 4px 4px 5px;--cl-text-shadow:2.4px 2.4px 3.2px #ffffff80;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #ffffff4d);--cl-shadow-background:#ffffff4d;--cl-accent-border:1px solid #eb5cbe;--cl-danger-border:1px solid #d94a4a;--cl-success-border:1px solid #47d5a6;--cl-warning-border:1px solid #d7ac61;--cl-info-border:1px solid #4077d1;--cl-light-border:1px solid #665d63;--cl-outline-border:1px solid #fff}@keyframes cl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cl-fade-out{0%{opacity:1}to{opacity:0}}.cl-fade-in{animation:.4s cl-fade-in}.cl-fade-out{animation:.4s cl-fade-out}
+:root{--cl-core-font:Arial, Helvetica, sans-serif;--cl-monospace-font:"Courier New", Courier, monospace;--cl-fancy-font:Georgia, "Times New Roman", Times, serif;--cl-xs-gap:2px;--cl-s-gap:4px;--cl-m-gap:8px;--cl-l-gap:16px;--cl-xl-gap:32px;--cl-xxl-gap:64px;--cl-icon-size:20px;--cl-thumb-size:24px;--cl-border-radius:4px;--cl-z-index-base:1;--cl-z-index-menu:5;--cl-z-index-popup:10;--cl-z-index-modal:20;--cl-typography-h1-mobile:2.25rem;--cl-typography-h1-tablet:2.5rem;--cl-typography-h1-desktop:3rem;--cl-typography-h2-mobile:2rem;--cl-typography-h2-tablet:2.25rem;--cl-typography-h2-desktop:2.5rem;--cl-typography-h3-mobile:1.75rem;--cl-typography-h3-tablet:2rem;--cl-typography-h3-desktop:2.25rem;--cl-typography-h4-mobile:1.5rem;--cl-typography-h4-tablet:1.75rem;--cl-typography-h4-desktop:2rem;--cl-typography-h5-mobile:1.25rem;--cl-typography-h5-tablet:1.5rem;--cl-typography-h5-desktop:1.75rem;--cl-typography-h6-mobile:1rem;--cl-typography-h6-tablet:1.125rem;--cl-typography-h6-desktop:1.25rem;--cl-typography-base-mobile:1rem;--cl-typography-base-tablet:1.125rem;--cl-typography-base-desktop:1.25rem;--cl-typography-small-mobile:.875rem;--cl-typography-small-tablet:1rem;--cl-typography-small-desktop:1.125rem;--cl-breakpoint-sm:640px;--cl-breakpoint-md:768px;--cl-breakpoint-lg:1024px;--cl-breakpoint-xl:1280px;--cl-breakpoint-xxl:1536px;--cl-base-font-color:#000;--cl-base-background-color:#fff;--cl-accent-a0:#8d1c12;--cl-accent-a10:#7d1c11;--cl-accent-a20:#6d1b10;--cl-accent-a30:#5e190f;--cl-surface-a0:#fff;--cl-surface-a10:#f0f0f0;--cl-surface-a20:#e1e1e1;--cl-surface-a30:#d3d3d3;--cl-surface-tonal-a0:#f7e8e4;--cl-surface-tonal-a10:#e9dcd8;--cl-surface-tonal-a20:#dbd0cd;--cl-surface-tonal-a30:#cec4c2;--cl-success-a0:#1b7f5c;--cl-success-a10:#28be8a;--cl-success-a20:#58dbad;--cl-warning-a0:#b8871f;--cl-warning-a10:#dfae44;--cl-warning-a20:#ebca85;--cl-danger-a0:#b13535;--cl-danger-a10:#d06262;--cl-danger-a20:#e29d9d;--cl-info-a0:#1e56a3;--cl-info-a10:#347ada;--cl-info-a20:#74a4e6;--cl-accent-gradient:linear-gradient(135deg, #8d1c12 0%, #7d1c11 50%, #6d1b10 100%);--cl-box-shadow:#0003 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#0003 4.8px 4.8px 6.4px;--cl-text-shadow:2.4px 2.4px 3.2px #00000026;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #00000026);--cl-shadow-background:#0000004d;--cl-shadow-background-deep:#000000e6;--cl-accent-border:1px solid #8d1c12;--cl-danger-border:1px solid #d06262;--cl-success-border:1px solid #28be8a;--cl-warning-border:1px solid #dfae44;--cl-info-border:1px solid #347ada;--cl-light-border:1px solid #c0b8b6;--cl-outline-border:1px solid #000}.cl-components-dark-theme{--cl-base-background-color:#000;--cl-base-font-color:#fff;--cl-accent-a0:#eb5cbe;--cl-accent-a10:#ef71c5;--cl-accent-a20:#f385cc;--cl-accent-a30:#f697d4;--cl-surface-a0:#121212;--cl-surface-a10:#282828;--cl-surface-a20:#3f3f3f;--cl-surface-a30:#575757;--cl-surface-tonal-a0:#251a21;--cl-surface-tonal-a10:#3a2f36;--cl-surface-tonal-a20:#4f464c;--cl-surface-tonal-a30:#665d63;--cl-success-a0:#9ae8ce;--cl-success-a10:#47d5a6;--cl-success-a20:#22946e;--cl-warning-a0:#a87a2a;--cl-warning-a10:#d7ac61;--cl-warning-a20:#ecd7b2;--cl-danger-a0:#eb9e9e;--cl-danger-a10:#d94a4a;--cl-danger-a20:#9c2121;--cl-info-a0:#92b2e5;--cl-info-a10:#4077d1;--cl-info-a20:#21498a;--cl-accent-gradient:linear-gradient(135deg, #eb5cbe 0%, #ef71c5 50%, #f385cc 100%);--cl-box-shadow:#ffffff4d 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#ffffff4d 4px 4px 5px;--cl-text-shadow:2.4px 2.4px 3.2px #ffffff80;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #ffffff4d);--cl-shadow-background:#ffffff4d;--cl-shadow-background-deep:#000000e6;--cl-accent-border:1px solid #eb5cbe;--cl-danger-border:1px solid #d94a4a;--cl-success-border:1px solid #47d5a6;--cl-warning-border:1px solid #d7ac61;--cl-info-border:1px solid #4077d1;--cl-light-border:1px solid #665d63;--cl-outline-border:1px solid #fff}@keyframes cl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cl-fade-out{0%{opacity:1}to{opacity:0}}.cl-fade-in{animation:.4s cl-fade-in}.cl-fade-out{animation:.4s cl-fade-out}

package/dist/types/gallery.d.ts

@@ -0,0 +1,13 @@
+import { ChopLogicComponentProps } from './_common';
+import { ImageProps } from './image';
+export type GalleryItem = ImageProps;
+export type GalleryMode = 'grid' | 'masonry' | 'carousel';
+export interface GalleryProps extends ChopLogicComponentProps {
+    images?: GalleryItem[];
+    layout?: GalleryMode;
+    columns?: number;
+    rows?: number;
+    gap?: string;
+    label?: string;
+    enableFullscreen?: boolean;
+}