chop-logic-components 4.2.0 → 4.4.0

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/hooks/index.d.ts

@@ -3,6 +3,7 @@ export { useClickOutside } from './use-click-outside/use-click-outside';
 export { useContainerDimensions } from './use-container-dimensions/use-container-dimensions';
 export { useDebounce } from './use-debounce/use-debounce';
 export { useElementIds } from './use-element-ids/use-element-ids';
+export { useFormPending } from './use-form-pending/use-form-pending';
 export { useIsHovered } from './use-is-hovered/use-is-hovered';
 export { useIsMounted } from './use-is-mounted/use-is-mounted';
 export { useIsOverflow } from './use-is-overflow/use-is-overflow';

package/dist/hooks/index.js

@@ -3,6 +3,7 @@ export * from './use-click-outside/index.js';
 export * from './use-container-dimensions/index.js';
 export * from './use-debounce/index.js';
 export * from './use-element-ids/index.js';
+export * from './use-form-pending/index.js';
 export * from './use-is-hovered/index.js';
 export * from './use-is-mounted/index.js';
 export * from './use-is-overflow/index.js';

package/dist/hooks/use-click-outside/use-click-outside.js

@@ -3,7 +3,7 @@ import { useEffect as e } from "react";
 var t = ({ ref: t, onClickOutsideHandler: n, dependentRef: r }) => {
 	e(() => {
 		let e = (e) => {
-			let i = t?.current && !t.current.contains(e.target), a = r?.current ? !r?.current?.contains(e.target) : !0;
+			let i = t?.current && !t.current.contains(e.target), a = !r?.current || !r?.current?.contains(e.target);
 			i && a && n();
 		};
 		return document.addEventListener("mousedown", e), () => {

package/dist/hooks/use-form-pending/index.js

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

package/dist/hooks/use-form-pending/use-form-pending.d.ts

@@ -0,0 +1 @@
+export declare const useFormPending: () => boolean;

package/dist/hooks/use-form-pending/use-form-pending.js

@@ -0,0 +1,9 @@
+import { FormContext as e } from "../../components/contexts/form/FormContext.js";
+import { useContext as t } from "react";
+//#region src/hooks/use-form-pending/use-form-pending.ts
+var n = () => {
+	let { isPending: n } = t(e);
+	return n ?? !1;
+};
+//#endregion
+export { n as useFormPending };

package/dist/hooks/use-remaining-timer/use-remaining-timer.js

@@ -15,7 +15,9 @@ function r({ isOpened: r, isHovered: i, onClose: a, autoClose: o = !0, autoClose
 		u.current = Date.now() - d.current;
 		let e = () => {
 			let t = Date.now() - u.current;
-			if (d.current = t, l(Math.max(0, 100 - t / s * 100)), t >= s) {
+			d.current = t;
+			let n = Math.max(0, 100 - t / s * 100);
+			if (l(n), t >= s) {
 				a();
 				return;
 			}

package/dist/index.es.js

@@ -1,57 +1,62 @@
-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/gallery/Gallery2.js";
-import te from "./components/organisms/grid/Grid2.js";
-import ne from "./components/organisms/menu/Menu2.js";
-import re 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 Gallery, te 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, ne 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, re 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 { FormContext as k } from "./components/contexts/form/FormContext.js";
+import { CL_DARK_THEME_CLASS as A, CL_LIGHT_THEME_CLASS as j, ThemeContext as M } from "./components/contexts/theme/ThemeContext.js";
+import { ThemeProvider as N } from "./components/contexts/theme/ThemeProvider.js";
+import { useFormPending as P } from "./hooks/use-form-pending/use-form-pending.js";
+import { useIsHovered as F } from "./hooks/use-is-hovered/use-is-hovered.js";
+import { useIsMounted as I } from "./hooks/use-is-mounted/use-is-mounted.js";
+import { useIsOverflow as L } from "./hooks/use-is-overflow/use-is-overflow.js";
+import { useKeyPress as R } from "./hooks/use-key-press/use-key-press.js";
+import { useModalFocusTrap as z } from "./hooks/use-modal-focus-trap/use-modal-focus-trap.js";
+import { useRemainingTimer as B } from "./hooks/use-remaining-timer/use-remaining-timer.js";
+import { useResetFormInput as V } from "./hooks/use-reset-form-input/use-reset-form-input.js";
+import { useTheme as H } from "./hooks/use-theme/use-theme.js";
+import { useTooltipPosition as U } from "./hooks/use-tooltip-position/use-tooltip-position.js";
+import { useWindowDimensions as W } from "./hooks/use-window-dimensions/use-window-dimensions.js";
+import G from "./components/atoms/tooltip/Tooltip2.js";
+import K from "./components/molecules/accordion/Accordion2.js";
+import q from "./components/molecules/alert/Alert2.js";
+import J from "./components/molecules/breadcrumbs/Breadcrumbs2.js";
+import Y from "./components/molecules/checkbox/Checkbox2.js";
+import X from "./components/molecules/multi-select/MultiSelect.js";
+import Z from "./components/molecules/numeric-input/NumericInput2.js";
+import Q from "./components/molecules/search/Search2.js";
+import $ from "./components/molecules/select/Select2.js";
+import ee from "./components/molecules/switch/Switch2.js";
+import te from "./components/molecules/text-input/TextInput2.js";
+import ne from "./components/organisms/dialog/Dialog2.js";
+import re from "./components/organisms/form/Form2.js";
+import ie from "./components/organisms/gallery/Gallery2.js";
+import ae from "./components/organisms/grid/Grid2.js";
+import oe from "./components/organisms/menu/Menu2.js";
+import se from "./components/organisms/preview-card/PreviewCard2.js";
+import ce from "./components/organisms/tabs/Tabs2.js";
+export { K as Accordion, q as Alert, r as AlertMode, f as Avatar, J as Breadcrumbs, p as Button, i as ButtonView, A as CL_DARK_THEME_CLASS, j as CL_LIGHT_THEME_CLASS, Y as Checkbox, ne as Dialog, m as EditableText, a as ElementSize, h as ErrorMessage, re as Form, k as FormContext, ie as Gallery, ae 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, oe as Menu, X as MultiSelect, Z as NumericInput, l as OrientationMode, S as Portal, se as PreviewCard, Q as Search, $ as Select, u as SemanticColor, ee as Switch, ce as Tabs, C as Tag, te as TextInput, M as ThemeContext, N as ThemeProvider, G as Tooltip, d as TooltipContainer, w as useAutoClose, T as useClickOutside, E as useContainerDimensions, D as useDebounce, O as useElementIds, P as useFormPending, F as useIsHovered, I as useIsMounted, L as useIsOverflow, R as useKeyPress, z as useModalFocusTrap, B as useRemainingTimer, V as useResetFormInput, H as useTheme, U as useTooltipPosition, W as useWindowDimensions, e as withErrorBoundary, t as withFigureCaption, n as withTooltip };

package/dist/types/form.d.ts

@@ -9,10 +9,13 @@ export interface FormInputParams {
     value: unknown;
     valid?: boolean;
 }
-export interface FormProps extends PropsWithChildren, ChopLogicComponentProps {
+export interface FormProps<TActionState = void> extends PropsWithChildren, ChopLogicComponentProps {
     initialValues?: FormValues;
     hasReset?: boolean;
-    onClickSubmit?: (data: FormValues) => void;
+    resetOnSuccess?: boolean;
+    action?: (prevState: TActionState, formData: FormData) => TActionState | Promise<TActionState>;
+    actionInitialState?: TActionState;
+    onActionComplete?: (state: TActionState) => void;
+    onSubmit?: (data: FormValues) => void | Promise<void>;
     onReset?: FormEventHandler<HTMLFormElement>;
-    onSubmit?: FormEventHandler<HTMLFormElement>;
 }

package/dist/types/image.d.ts

@@ -1,9 +1,22 @@
-export interface ImageSource {
+export interface ArtDirectionSource {
     src: string;
-    descriptor?: string;
-    media?: string;
+    media: string;
     type?: string;
+    descriptor?: never;
 }
+export interface ResolutionSource {
+    src: string;
+    descriptor: string;
+    type?: string;
+    media?: never;
+}
+export interface PlainSource {
+    src: string;
+    type?: string;
+    media?: never;
+    descriptor?: never;
+}
+export type ImageSource = ArtDirectionSource | ResolutionSource | PlainSource;
 export interface ImageProps {
     src: string;
     alt: string;

package/dist/types/index.d.ts

@@ -10,12 +10,13 @@ export type { FormInputParams, FormProps, FormValidationState, FormValues } from
 export type { GalleryItem, GalleryMode, GalleryProps } from './gallery';
 export type { GridColumn, GridItem, GridProps, GridRowValue, RenderDataItemCallback } from './grid';
 export type { HeaderProps } from './header';
-export type { ImageProps, ImageSource } from './image';
+export type { ArtDirectionSource, ImageProps, ImageSource, PlainSource, ResolutionSource, } from './image';
 export type { LinkProps } from './link';
 export type { LoaderProps } from './loader';
 export type { MenuItem, MenuProps } from './menu';
 export type { MultiSelectProps } from './multi-select';
 export type { NumericInputProps } from './numeric';
+export type { Author, AvatarProps, PreviewCardProps, TagData, TagProps } from './preview-card';
 export type { SearchProps } from './search';
 export type { SelectProps } from './select';
 export type { SwitchProps } from './switch';

package/dist/types/preview-card.d.ts

@@ -0,0 +1,38 @@
+import { LinkTarget } from '../enums';
+import { ChopLogicComponentProps } from './_common';
+import { ImageProps } from './image';
+export interface Author {
+    id: string;
+    name: string;
+    imageUrl: string;
+    tooltip?: string;
+    link?: string;
+    linkTarget?: LinkTarget;
+}
+export interface TagData {
+    id: string;
+    name: string;
+    description?: string;
+    color?: string;
+}
+export interface AvatarProps extends ChopLogicComponentProps {
+    name: string;
+    imageUrl: string;
+    tooltip?: string;
+    link?: string;
+    linkTarget?: LinkTarget;
+}
+export interface TagProps extends ChopLogicComponentProps {
+    name: string;
+    tooltip?: string;
+    color?: string;
+}
+export interface PreviewCardProps extends ChopLogicComponentProps {
+    link: string;
+    linkTarget?: LinkTarget;
+    image: ImageProps;
+    title: string;
+    authors: Author[];
+    tags: TagData[];
+    summary?: string;
+}