chop-logic-components 4.0.3 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -8
- package/dist/components/atoms/button/secondary-button/SecondaryButton.css +1 -1
- package/dist/components/atoms/icon/Icon2.js +7 -11
- package/dist/components/hocs/with-error-boundary/index.js +2 -0
- package/dist/components/hocs/with-error-boundary/with-error-boundary.js +32 -0
- package/dist/components/molecules/multi-select/Option.js +11 -11
- package/dist/components/molecules/select/option/Option2.js +10 -10
- package/dist/components/molecules/switch/Switch2.js +4 -4
- package/dist/components/molecules/text-input/TextInputStateless.js +8 -8
- package/dist/components/organisms/dialog/Dialog.css +1 -1
- package/dist/components/organisms/tabs/content/TabContent2.js +3 -3
- package/dist/index.d.ts +7 -0
- package/dist/index.es.js +42 -41
- package/dist/styles/main.css +1 -1
- package/package.json +17 -17
package/README.md
CHANGED
|
@@ -2,25 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
[](https://github.com/ChopLogic/chop-logic-components/actions/workflows/github-pages.yml)
|
|
5
|
+
#### Code Quality Checks
|
|
7
6
|
[](https://codecov.io/gh/ChopLogic/chop-logic-components)
|
|
7
|
+
[](https://dashboard.stryker-mutator.io/reports/github.com/ChopLogic/chop-logic-components/main)
|
|
8
8
|
[](https://sonarcloud.io/summary/new_code?id=ChopLogic_chop-logic-components)
|
|
9
|
+
[](https://biomejs.dev)
|
|
10
|
+
|
|
11
|
+
#### Deployments
|
|
12
|
+
[](https://github.com/ChopLogic/chop-logic-components/actions/workflows/github-pages.yml)
|
|
9
13
|
[](https://github.com/ChopLogic/chop-logic-components/actions/workflows/npm.yml)
|
|
14
|
+
|
|
15
|
+
#### Standards
|
|
10
16
|
[](CODE_OF_CONDUCT.md)
|
|
11
17
|
[](https://conventionalcommits.org)
|
|
12
|
-
[](https://biomejs.dev)
|
|
13
|
-
[](https://prettier.io)
|
|
14
18
|
[](https://keepachangelog.com/en/1.1.0/)
|
|
15
19
|
[](https://semver.org/spec/v2.0.0)
|
|
16
|
-
[](https://opensource.org/licenses/MIT)
|
|
17
21
|
|
|
18
22
|
Welcome to **Chop Logic Components**, a React components library packed with a variety of **styled
|
|
19
23
|
components** and **custom hooks** that are easy to integrate into any React project.
|
|
20
24
|
|
|
21
25
|
## 📚 About This Library
|
|
22
26
|
|
|
23
|
-
Chop Logic Components follows **Atomic Design** principles with **Fully Typed TypeScript** components. All styling uses **pure CSS with CSS variables** (BEM naming convention with `cl-` prefix) for consistent theming across light and dark modes. Built for developer productivity with comprehensive Storybook documentation and accessibility-first approach.
|
|
27
|
+
Chop Logic Components follows **Atomic Design** principles with **Fully Typed TypeScript** components. All styling uses **pure CSS with CSS variables** (BEM naming convention with `cl-` prefix) for consistent theming across light and dark modes. Built for developer productivity with comprehensive [Storybook documentation](https://choplogic.github.io/chop-logic-components) and accessibility-first approach.
|
|
24
28
|
|
|
25
29
|
## ✨ Features
|
|
26
30
|
|
|
@@ -30,9 +34,9 @@ Components has the tools to make it easier.
|
|
|
30
34
|
|
|
31
35
|
## 🔗 Links
|
|
32
36
|
|
|
33
|
-
- [Storybook Playground](https://choplogic.github.io/chop-logic-components)
|
|
34
|
-
- [Changelog](CHANGELOG.md)
|
|
35
37
|
- [NPM package](https://www.npmjs.com/package/chop-logic-components)
|
|
38
|
+
- [Playground](https://choplogic.github.io/chop-logic-components)
|
|
39
|
+
- [Changelog](CHANGELOG.md)
|
|
36
40
|
|
|
37
41
|
## 📦 Installation
|
|
38
42
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.cl-secondary-button{background:var(--cl-surface-a10);cursor:pointer;border-radius:var(--cl-border-radius);gap:var(--cl-s-gap);box-shadow:var(--cl-box-shadow);
|
|
1
|
+
.cl-secondary-button{background:var(--cl-surface-a10);cursor:pointer;border-radius:var(--cl-border-radius);border:var(--cl-light-border);gap:var(--cl-s-gap);box-shadow:var(--cl-box-shadow);transition:all .15s}.cl-secondary-button:hover{box-shadow:var(--cl-box-shadow-extended)}.cl-secondary-button:active{box-shadow:var(--cl-box-shadow);transform:scale(.98)}.cl-secondary-button__text{font-family:var(--cl-core-font);font-size:inherit;color:var(--cl-base-font-color);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}.cl-secondary-button__icon:before{color:var(--cl-base-font-color);margin-right:var(--cl-s-gap)}
|
|
@@ -3,9 +3,9 @@ import { ElementSize as t } from "../../../enums/element-size.js";
|
|
|
3
3
|
import './Icon.css';/* empty css */
|
|
4
4
|
import { jsx as n } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/atoms/icon/Icon.tsx
|
|
6
|
-
var r = ({ name: r, testId: i, className: a, hidden: o, size: s = t.Medium, ...c }) => {
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
var r = ({ name: r, testId: i, className: a, hidden: o, size: s = t.Medium, ...c }) => r ? /* @__PURE__ */ n("span", {
|
|
7
|
+
"data-testid": i,
|
|
8
|
+
className: e([
|
|
9
9
|
a,
|
|
10
10
|
"cl-icon",
|
|
11
11
|
r,
|
|
@@ -17,13 +17,9 @@ var r = ({ name: r, testId: i, className: a, hidden: o, size: s = t.Medium, ...c
|
|
|
17
17
|
"cl-icon_xlarge": s === t.ExtraLarge,
|
|
18
18
|
"cl-icon_2xlarge": s === t.ExtraExtraLarge
|
|
19
19
|
}
|
|
20
|
-
])
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"aria-hidden": o,
|
|
25
|
-
...c
|
|
26
|
-
});
|
|
27
|
-
};
|
|
20
|
+
]),
|
|
21
|
+
"aria-hidden": o,
|
|
22
|
+
...c
|
|
23
|
+
}) : null;
|
|
28
24
|
//#endregion
|
|
29
25
|
export { r as default };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import e from "../../atoms/error-message/ErrorMessage2.js";
|
|
2
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { Component as n, useId as r } from "react";
|
|
4
|
+
//#region src/components/hocs/with-error-boundary/with-error-boundary.tsx
|
|
5
|
+
var i = class extends n {
|
|
6
|
+
constructor(e) {
|
|
7
|
+
super(e), this.state = { hasError: !1 };
|
|
8
|
+
}
|
|
9
|
+
static getDerivedStateFromError() {
|
|
10
|
+
return { hasError: !0 };
|
|
11
|
+
}
|
|
12
|
+
componentDidCatch(e, t) {
|
|
13
|
+
this.props.onError?.();
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
return this.state.hasError ? /* @__PURE__ */ t(e, {
|
|
17
|
+
errorId: this.props.errorId,
|
|
18
|
+
message: this.props.errorMessage,
|
|
19
|
+
visible: !0
|
|
20
|
+
}) : this.props.children;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
function a(e) {
|
|
24
|
+
return ({ errorMessage: n, onError: a, ...o }) => /* @__PURE__ */ t(i, {
|
|
25
|
+
errorId: `cl-error-boundary-${r().replace(/:/g, "")}`,
|
|
26
|
+
errorMessage: n,
|
|
27
|
+
onError: a,
|
|
28
|
+
children: /* @__PURE__ */ t(e, { ...o })
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
//#endregion
|
|
32
|
+
export { a as withErrorBoundary };
|
|
@@ -10,22 +10,22 @@ var o = ({ value: o, onSelect: s }) => {
|
|
|
10
10
|
"cl-select-option",
|
|
11
11
|
"cl-select-option_multi",
|
|
12
12
|
{ "cl-select-option_selected": u }
|
|
13
|
-
])
|
|
14
|
-
switch (t.key) {
|
|
15
|
-
case " ":
|
|
16
|
-
case "SpaceBar":
|
|
17
|
-
case "Enter":
|
|
18
|
-
t.preventDefault(), s(e);
|
|
19
|
-
break;
|
|
20
|
-
default: break;
|
|
21
|
-
}
|
|
22
|
-
};
|
|
13
|
+
]);
|
|
23
14
|
return /* @__PURE__ */ a("li", {
|
|
24
15
|
id: c,
|
|
25
16
|
role: "option",
|
|
26
17
|
"aria-selected": u,
|
|
27
18
|
tabIndex: 0,
|
|
28
|
-
onKeyDown:
|
|
19
|
+
onKeyDown: ((e) => (t) => {
|
|
20
|
+
switch (t.key) {
|
|
21
|
+
case " ":
|
|
22
|
+
case "SpaceBar":
|
|
23
|
+
case "Enter":
|
|
24
|
+
t.preventDefault(), s(e);
|
|
25
|
+
break;
|
|
26
|
+
default: break;
|
|
27
|
+
}
|
|
28
|
+
})(c),
|
|
29
29
|
onClick: () => s(c),
|
|
30
30
|
className: d,
|
|
31
31
|
children: [u ? /* @__PURE__ */ i(r, {
|
|
@@ -8,22 +8,22 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
|
8
8
|
var o = ({ value: o, selected: s, onSelect: c, onClear: l }) => {
|
|
9
9
|
let { id: u, label: d } = o, f = e(["cl-select-option", { "cl-select-option_selected": s }]), p = (e) => {
|
|
10
10
|
s ? l() : c(e);
|
|
11
|
-
}, m = (e) => (t) => {
|
|
12
|
-
switch (t.key) {
|
|
13
|
-
case " ":
|
|
14
|
-
case "SpaceBar":
|
|
15
|
-
case "Enter":
|
|
16
|
-
t.preventDefault(), p(e);
|
|
17
|
-
break;
|
|
18
|
-
default: break;
|
|
19
|
-
}
|
|
20
11
|
};
|
|
21
12
|
return /* @__PURE__ */ a("li", {
|
|
22
13
|
id: u,
|
|
23
14
|
role: "option",
|
|
24
15
|
"aria-selected": s,
|
|
25
16
|
tabIndex: 0,
|
|
26
|
-
onKeyDown:
|
|
17
|
+
onKeyDown: ((e) => (t) => {
|
|
18
|
+
switch (t.key) {
|
|
19
|
+
case " ":
|
|
20
|
+
case "SpaceBar":
|
|
21
|
+
case "Enter":
|
|
22
|
+
t.preventDefault(), p(e);
|
|
23
|
+
break;
|
|
24
|
+
default: break;
|
|
25
|
+
}
|
|
26
|
+
})(u),
|
|
27
27
|
onClick: () => p(u),
|
|
28
28
|
className: f,
|
|
29
29
|
children: [/* @__PURE__ */ i("span", { children: d }), s && /* @__PURE__ */ i(r, {
|
|
@@ -15,16 +15,16 @@ var i = ({ checked: i, onChange: a, label: o, disabled: s = !1, className: c, id
|
|
|
15
15
|
"cl-switch__checked": p,
|
|
16
16
|
"cl-switch_disabled": s
|
|
17
17
|
}
|
|
18
|
-
])
|
|
19
|
-
s || m(!p);
|
|
20
|
-
};
|
|
18
|
+
]);
|
|
21
19
|
return /* @__PURE__ */ r("div", {
|
|
22
20
|
role: "switch",
|
|
23
21
|
"aria-checked": p,
|
|
24
22
|
"aria-label": o,
|
|
25
23
|
tabIndex: s ? -1 : 0,
|
|
26
24
|
className: g,
|
|
27
|
-
onClick:
|
|
25
|
+
onClick: () => {
|
|
26
|
+
s || m(!p);
|
|
27
|
+
},
|
|
28
28
|
onKeyDown: h,
|
|
29
29
|
id: l,
|
|
30
30
|
children: [
|
|
@@ -8,14 +8,10 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
|
8
8
|
import { useState as s } from "react";
|
|
9
9
|
//#region src/components/molecules/text-input/TextInputStateless.tsx
|
|
10
10
|
var c = ({ name: c, label: l, errorMessage: u, value: d, onChange: f, onBlur: p, onFocus: m, onClear: h, maxLength: g, id: _, tabIndex: v, placeholder: y = "Type here...", disabled: b = !1, required: x = !1, clearable: S = !0, readOnly: C = !1, autoComplete: w = "off", type: T = "text", className: E, style: D, defaultValue: O }) => {
|
|
11
|
-
let k = _ ?? `text-input-${c}`, A = `${c}-error`, [j, M] = s(!1), N = T === "password"
|
|
12
|
-
M(!j);
|
|
13
|
-
}, I = () => {
|
|
14
|
-
f && f({ target: { value: "" } }), h?.();
|
|
15
|
-
};
|
|
11
|
+
let k = _ ?? `text-input-${c}`, A = `${c}-error`, [j, M] = s(!1), N = T === "password";
|
|
16
12
|
return /* @__PURE__ */ o("div", {
|
|
17
13
|
style: D,
|
|
18
|
-
className:
|
|
14
|
+
className: e(["cl-text-input", E]),
|
|
19
15
|
children: [/* @__PURE__ */ a(r, {
|
|
20
16
|
label: l,
|
|
21
17
|
required: x,
|
|
@@ -42,8 +38,12 @@ var c = ({ name: c, label: l, errorMessage: u, value: d, onChange: f, onBlur: p,
|
|
|
42
38
|
children: [/* @__PURE__ */ a(i, {
|
|
43
39
|
clearable: S,
|
|
44
40
|
isPasswordButtonVisible: N,
|
|
45
|
-
handleClear:
|
|
46
|
-
|
|
41
|
+
handleClear: () => {
|
|
42
|
+
f && f({ target: { value: "" } }), h?.();
|
|
43
|
+
},
|
|
44
|
+
togglePassword: () => {
|
|
45
|
+
M(!j);
|
|
46
|
+
},
|
|
47
47
|
passwordShown: j,
|
|
48
48
|
label: l,
|
|
49
49
|
disabled: b
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.cl-dialog{width:100%;height:100%;z-index:inherit;background-color
|
|
1
|
+
.cl-dialog{width:100%;height:100%;z-index:inherit;background-color:var(--cl-shadow-background);justify-content:center;align-items:center;animation:.4s cl-fade-in;display:flex;position:fixed;top:0;left:0}.cl-dialog__layout{z-index:var(--cl-z-index-modal);background-color:var(--cl-base-background-color);box-shadow:var(--cl-box-shadow);color:var(--cl-base-font-color);padding:var(--cl-l-gap);border-top-left-radius:var(--cl-border-radius);border-top-right-radius:var(--cl-border-radius);height:90%;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.5;position:absolute;bottom:0;left:0}.cl-dialog__button{right:var(--cl-s-gap);top:var(--cl-s-gap);position:absolute}@media (width>=640px){.cl-dialog__layout{font-size:var(--cl-typography-base-tablet)}.cl-dialog__button{right:var(--cl-m-gap);top:var(--cl-m-gap)}}@media (width>=1024px){.cl-dialog__layout{font-size:var(--cl-typography-base-desktop);padding:var(--cl-xl-gap)}.cl-dialog__button{right:var(--cl-l-gap);top:var(--cl-l-gap)}}@media screen and (width>=640px){.cl-dialog__layout{border-bottom-left-radius:var(--cl-border-radius);border-bottom-right-radius:var(--cl-border-radius);width:fit-content;min-width:40%;max-width:90%;height:fit-content;max-height:90%;position:relative}}.cl-dialog_closing{animation:.4s cl-fade-out}
|
|
@@ -2,14 +2,14 @@ import './TabContent.css';/* empty css */
|
|
|
2
2
|
import { jsx as e } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/organisms/tabs/content/TabContent.tsx
|
|
4
4
|
var t = ({ tabs: t, selectedTabId: n, extendable: r, extendedTabContent: i }) => {
|
|
5
|
-
let a = t.find((e) => e.id === n)?.content
|
|
5
|
+
let a = t.find((e) => e.id === n)?.content;
|
|
6
6
|
return /* @__PURE__ */ e("div", {
|
|
7
7
|
role: "tabpanel",
|
|
8
8
|
"data-testid": "tab-content",
|
|
9
9
|
"aria-labelledby": n,
|
|
10
|
-
id:
|
|
10
|
+
id: `tabpanel_${n}`,
|
|
11
11
|
className: "cl-tab-content",
|
|
12
|
-
children:
|
|
12
|
+
children: r && !a ? i : a
|
|
13
13
|
});
|
|
14
14
|
};
|
|
15
15
|
//#endregion
|
package/dist/index.d.ts
CHANGED
|
@@ -901,6 +901,13 @@ declare type useTooltipPositionParams = {
|
|
|
901
901
|
|
|
902
902
|
export declare function useWindowDimensions(): Dimensions;
|
|
903
903
|
|
|
904
|
+
export declare function withErrorBoundary<P extends object>(ComponentToWrap: ComponentType<P>): FC<P & WithErrorBoundaryProps>;
|
|
905
|
+
|
|
906
|
+
export declare type WithErrorBoundaryProps = {
|
|
907
|
+
errorMessage?: string;
|
|
908
|
+
onError?: () => void;
|
|
909
|
+
};
|
|
910
|
+
|
|
904
911
|
export declare function withFigureCaption<P extends object>(Component: ComponentType<P>): FC<P & WithFigureCaptionProps>;
|
|
905
912
|
|
|
906
913
|
declare type WithFigureCaptionProps = {
|
package/dist/index.es.js
CHANGED
|
@@ -12,44 +12,45 @@ import u from "./components/atoms/editable-text/EditableText2.js";
|
|
|
12
12
|
import d from "./components/atoms/error-message/ErrorMessage2.js";
|
|
13
13
|
import f from "./components/atoms/header/Header2.js";
|
|
14
14
|
import p from "./components/atoms/icon/Icon2.js";
|
|
15
|
-
import {
|
|
16
|
-
import h from "./components/
|
|
17
|
-
import g from "./components/atoms/
|
|
18
|
-
import _ from "./components/atoms/
|
|
19
|
-
import v from "./components/atoms/
|
|
20
|
-
import y from "./components/atoms/
|
|
21
|
-
import
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import B from "./
|
|
40
|
-
import V from "./components/
|
|
41
|
-
import H from "./components/molecules/
|
|
42
|
-
import U from "./components/molecules/
|
|
43
|
-
import W from "./components/molecules/
|
|
44
|
-
import G from "./components/molecules/
|
|
45
|
-
import K from "./components/molecules/
|
|
46
|
-
import q from "./components/molecules/
|
|
47
|
-
import J from "./components/molecules/
|
|
48
|
-
import Y from "./components/molecules/
|
|
49
|
-
import X from "./components/molecules/
|
|
50
|
-
import Z from "./components/
|
|
51
|
-
import Q from "./components/organisms/
|
|
52
|
-
import $ from "./components/organisms/
|
|
53
|
-
import ee from "./components/organisms/
|
|
54
|
-
import te from "./components/organisms/
|
|
55
|
-
|
|
15
|
+
import { withErrorBoundary as m } from "./components/hocs/with-error-boundary/with-error-boundary.js";
|
|
16
|
+
import { withFigureCaption as h } from "./components/hocs/with-figure-caption/with-figure-caption.js";
|
|
17
|
+
import g from "./components/atoms/image/Image2.js";
|
|
18
|
+
import _ from "./components/atoms/input/Input2.js";
|
|
19
|
+
import v from "./components/atoms/label/Label2.js";
|
|
20
|
+
import y from "./components/atoms/link/Link2.js";
|
|
21
|
+
import b from "./components/atoms/portal/Portal.js";
|
|
22
|
+
import { useAutoClose as x } from "./hooks/use-auto-close/use-auto-close.js";
|
|
23
|
+
import { useClickOutside as S } from "./hooks/use-click-outside/use-click-outside.js";
|
|
24
|
+
import { useContainerDimensions as C } from "./hooks/use-container-dimensions/use-container-dimensions.js";
|
|
25
|
+
import { useDebounce as w } from "./hooks/use-debounce/use-debounce.js";
|
|
26
|
+
import { useElementIds as T } from "./hooks/use-element-ids/use-element-ids.js";
|
|
27
|
+
import { useIsHovered as E } from "./hooks/use-is-hovered/use-is-hovered.js";
|
|
28
|
+
import { useIsMounted as D } from "./hooks/use-is-mounted/use-is-mounted.js";
|
|
29
|
+
import { useIsOverflow as O } from "./hooks/use-is-overflow/use-is-overflow.js";
|
|
30
|
+
import { useKeyPress as k } from "./hooks/use-key-press/use-key-press.js";
|
|
31
|
+
import { useModalFocusTrap as A } from "./hooks/use-modal-focus-trap/use-modal-focus-trap.js";
|
|
32
|
+
import { useRemainingTimer as j } from "./hooks/use-remaining-timer/use-remaining-timer.js";
|
|
33
|
+
import { FormContext as M } from "./components/contexts/form/FormContext.js";
|
|
34
|
+
import { CL_DARK_THEME_CLASS as N, CL_LIGHT_THEME_CLASS as P, ThemeContext as F } from "./components/contexts/theme/ThemeContext.js";
|
|
35
|
+
import { ThemeProvider as I } from "./components/contexts/theme/ThemeProvider.js";
|
|
36
|
+
import { useResetFormInput as L } from "./hooks/use-reset-form-input/use-reset-form-input.js";
|
|
37
|
+
import { useTheme as R } from "./hooks/use-theme/use-theme.js";
|
|
38
|
+
import { useTooltipPosition as z } from "./hooks/use-tooltip-position/use-tooltip-position.js";
|
|
39
|
+
import { useWindowDimensions as B } from "./hooks/use-window-dimensions/use-window-dimensions.js";
|
|
40
|
+
import V from "./components/atoms/tooltip/Tooltip2.js";
|
|
41
|
+
import H from "./components/molecules/accordion/Accordion2.js";
|
|
42
|
+
import U from "./components/molecules/alert/Alert2.js";
|
|
43
|
+
import W from "./components/molecules/breadcrumbs/Breadcrumbs2.js";
|
|
44
|
+
import G from "./components/molecules/checkbox/Checkbox2.js";
|
|
45
|
+
import K from "./components/molecules/multi-select/MultiSelect.js";
|
|
46
|
+
import q from "./components/molecules/numeric-input/NumericInput2.js";
|
|
47
|
+
import J from "./components/molecules/search/Search2.js";
|
|
48
|
+
import Y from "./components/molecules/select/Select2.js";
|
|
49
|
+
import X from "./components/molecules/switch/Switch2.js";
|
|
50
|
+
import Z from "./components/molecules/text-input/TextInput2.js";
|
|
51
|
+
import Q from "./components/organisms/dialog/Dialog2.js";
|
|
52
|
+
import $ from "./components/organisms/form/Form2.js";
|
|
53
|
+
import ee from "./components/organisms/grid/Grid2.js";
|
|
54
|
+
import te from "./components/organisms/menu/Menu2.js";
|
|
55
|
+
import ne from "./components/organisms/tabs/Tabs2.js";
|
|
56
|
+
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 };
|
package/dist/styles/main.css
CHANGED
|
@@ -1 +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-accent-border:1px solid #8d1c12;--cl-danger-border:1px solid #
|
|
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}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"type": "git",
|
|
5
5
|
"url": "git+https://github.com/ChopLogic/chop-logic-components.git"
|
|
6
6
|
},
|
|
7
|
-
"version": "4.0
|
|
7
|
+
"version": "4.1.0",
|
|
8
8
|
"description": "Reusable React components and hooks for the Chop Logic project",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"module": "dist/index.es.js",
|
|
@@ -116,31 +116,31 @@
|
|
|
116
116
|
},
|
|
117
117
|
"homepage": "https://choplogic.github.io/chop-logic-components",
|
|
118
118
|
"devDependencies": {
|
|
119
|
-
"@biomejs/biome": "^2.4.
|
|
120
|
-
"@commitlint/cli": "^20.
|
|
121
|
-
"@commitlint/config-conventional": "^20.
|
|
122
|
-
"@storybook/addon-a11y": "^10.
|
|
123
|
-
"@storybook/addon-docs": "^10.
|
|
124
|
-
"@storybook/react-vite": "^10.
|
|
125
|
-
"@stryker-mutator/core": "^9.6.
|
|
126
|
-
"@stryker-mutator/vitest-runner": "^9.6.
|
|
119
|
+
"@biomejs/biome": "^2.4.12",
|
|
120
|
+
"@commitlint/cli": "^20.5.0",
|
|
121
|
+
"@commitlint/config-conventional": "^20.5.0",
|
|
122
|
+
"@storybook/addon-a11y": "^10.3.5",
|
|
123
|
+
"@storybook/addon-docs": "^10.3.5",
|
|
124
|
+
"@storybook/react-vite": "^10.3.5",
|
|
125
|
+
"@stryker-mutator/core": "^9.6.1",
|
|
126
|
+
"@stryker-mutator/vitest-runner": "^9.6.1",
|
|
127
127
|
"@testing-library/jest-dom": "^6.9.1",
|
|
128
128
|
"@testing-library/react": "^16.3.2",
|
|
129
|
-
"@types/node": "^25.
|
|
129
|
+
"@types/node": "^25.6.0",
|
|
130
130
|
"@types/react": "^19.2.14",
|
|
131
131
|
"@types/react-dom": "^19.2.3",
|
|
132
|
-
"@vitest/coverage-v8": "^4.1.
|
|
132
|
+
"@vitest/coverage-v8": "^4.1.4",
|
|
133
133
|
"husky": "^9.1.7",
|
|
134
134
|
"husky-init": "^8.0.0",
|
|
135
|
-
"jsdom": "^
|
|
136
|
-
"prettier": "^3.8.
|
|
135
|
+
"jsdom": "^29.0.2",
|
|
136
|
+
"prettier": "^3.8.3",
|
|
137
137
|
"remark-gfm": "^4.0.1",
|
|
138
|
-
"storybook": "^10.
|
|
139
|
-
"typescript": "^
|
|
140
|
-
"vite": "^8.0.
|
|
138
|
+
"storybook": "^10.3.5",
|
|
139
|
+
"typescript": "^6.0.3",
|
|
140
|
+
"vite": "^8.0.8",
|
|
141
141
|
"vite-plugin-dts": "^4.5.4",
|
|
142
142
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
143
|
-
"vitest": "^4.1.
|
|
143
|
+
"vitest": "^4.1.4"
|
|
144
144
|
},
|
|
145
145
|
"overrides": {
|
|
146
146
|
"storybook": "$storybook"
|