chop-logic-components 4.2.0 → 4.3.0

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.es.js

@@ -1,57 +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/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 { 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/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;
+}

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/ChopLogic/chop-logic-components.git"
   },
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Reusable React components and hooks for the Chop Logic project",
   "type": "module",
   "module": "dist/index.es.js",
@@ -117,34 +117,34 @@
   },
   "homepage": "https://choplogic.github.io/chop-logic-components",
   "devDependencies": {
-    "@biomejs/biome": "^2.4.16",
-    "@commitlint/cli": "^21.0.2",
-    "@commitlint/config-conventional": "^21.0.2",
-    "@storybook/addon-a11y": "^10.4.4",
-    "@storybook/addon-docs": "^10.4.4",
-    "@storybook/react-vite": "^10.4.4",
+    "@biomejs/biome": "^2.5.1",
+    "@commitlint/cli": "^21.1.0",
+    "@commitlint/config-conventional": "^21.1.0",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@storybook/test-runner": "^0.24.4",
     "@stryker-mutator/core": "^9.6.1",
     "@stryker-mutator/vitest-runner": "^9.6.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.9",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "husky-init": "^8.0.0",
     "jsdom": "^29.1.1",
-    "prettier": "^3.8.4",
+    "prettier": "^3.8.5",
     "remark-gfm": "^4.0.1",
-    "start-server-and-test": "^3.0.10",
-    "storybook": "^10.4.4",
+    "start-server-and-test": "^3.0.11",
+    "storybook": "^10.4.6",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vite-plugin-dts": "^5.0.2",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.9"
   },
   "overrides": {
     "storybook": "$storybook"