@caspeco/casper-ui-library 0.0.4 → 4.0.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 CHANGED
@@ -1,67 +1,65 @@
1
- # @caspeco/casper-ui-library
2
-
3
- [![NPM Version](https://img.shields.io/npm/v/%40caspeco%2Fcasper-ui-library)](https://www.npmjs.com/package/@caspeco/casper-ui-library)
4
-
5
- Caspeco's UI component library, built on top of on top of [Chakra UI](https://v2.chakra-ui.com/).
6
-
7
- 👉 **The usage documentation can be found at (TODO_INSERT_LINK).**
8
-
9
- ## Local development
10
-
11
- To build this project you need to have [Node.js](https://nodejs.org/en) installed.
12
-
13
- ### Commands
14
-
15
- All commands are run from the root of the project, from a terminal.
16
-
17
- <!-- prettier-ignore -->
18
- | Command | Description |
19
- | ------- | ----------- |
20
- | `npm install` | Install dependencies. |
21
- | `npm run dev` | Build a local development version of the entire library, compiled into a single .js file for improved HMR. Automatically rebuilds when the file contents change. |
22
- | `npm run build` | Build the library as it will be shipped on npm. Does not automatically rebuild when files change, but you can still use this build output to verify your changes in the documentation website or in another project. |
23
- | `cd ../docs && npm run dev` | Starts the documentation website. Usually you want to run this alongside the library in dev mode, so open a new terminal for this. See [/docs](../docs) for more info. |
24
- | `npm run test` | Run tests. |
25
- | `npm run lint` | Run linting with [@caspeco/eslint-config](https://github.com/Caspeco/eslint-config). If you use the recommended [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) you can see your eslint errors directly in your editor without having to run this. |
26
- | `npm run prettier:fix` | Reformat all files with [@caspeco/prettier-config](https://github.com/Caspeco/prettier-config). If you use the recommended [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) you can have your files automatically formatted on file save. |
27
-
28
- ### Preview locally in another project
29
-
30
- 1. Build local development version (see above).
31
- 2. In the consuming app, run `npm install --no-save ./relative/path/to/this/directory` (no trailing slash).
32
- - For example: `npm install --no-save ../../casper-ui-library/packages/casper-ui-library`
33
-
34
- Now when you make a change in the component library, it should rebuild automatically and the consuming app's HMR should kick in and reload the page (preserving state is not possible as the entire library is rebuilt).
35
-
36
- To unlink again you just need to run `npm install` in the consuming app. If it fails, you may need to delete `node_modules` first.
37
-
38
- If you get an error about duplicate react versions, make sure this is in the `vite.config.ts` in the consuming app:
39
-
40
- ```ts
41
- import path from "node:path";
42
-
43
- export default defineConfig({
44
- // ...
45
- resolve: {
46
- alias: {
47
- react: path.resolve("./node_modules/react"),
48
- },
49
- },
50
- });
51
- ```
52
-
53
- ## Contributing
54
-
55
- First make sure your repository is up to date
56
-
57
- ```bash
58
- git pull
59
- ```
60
-
61
- Create a new branch and make your changes there. Preferrably use a branch name that includes any related Jira issue and some short descriptive name:
62
-
63
- ```bash
64
- git checkout -b UTF-837-add-checkbox-component
65
- ```
66
-
67
- When you have made our changes, open a pull request using the template provided when opened and assign a reviewer.
1
+ # @caspeco/casper-ui-library
2
+
3
+ [![NPM Version](https://img.shields.io/npm/v/%40caspeco%2Fcasper-ui-library)](https://www.npmjs.com/package/@caspeco/casper-ui-library)
4
+
5
+ Caspeco's UI component library, built on top of on top of [Chakra UI](https://v2.chakra-ui.com/).
6
+
7
+ 👉 **The usage documentation can be found at https://caspeco.github.io/casper-ui-library**
8
+
9
+ ## Local development
10
+
11
+ To build this project you need to have [Node.js](https://nodejs.org/en) installed.
12
+
13
+ ### Commands
14
+
15
+ All commands are run from the root of the project, from a terminal.
16
+
17
+ <!-- prettier-ignore -->
18
+ | Command | Description |
19
+ | ------- | ----------- |
20
+ | `npm install` | Install dependencies. |
21
+ | `npm run dev` | Build a local development version of the entire library, compiled into a single .js file for improved HMR. Automatically rebuilds when the file contents change. |
22
+ | `npm run build` | Build the library as it will be shipped on npm. Does not automatically rebuild when files change, but you can still use this build output to verify your changes in the documentation website or in another project. |
23
+ | `cd ../docs && npm run dev` | Starts the documentation website. Usually you want to run this alongside the library in dev mode, so open a new terminal for this. See [/docs](../docs) for more info. |
24
+ | `npm run test` | Run tests. |
25
+ | `npm run lint` | Run linting with [@caspeco/eslint-config](https://github.com/Caspeco/eslint-config). If you use the recommended [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) you can see your eslint errors directly in your editor without having to run this. |
26
+ | `npm run prettier:fix` | Reformat all files with [@caspeco/prettier-config](https://github.com/Caspeco/prettier-config). If you use the recommended [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) you can have your files automatically formatted on file save. |
27
+
28
+ ### Preview locally in another project
29
+
30
+ 1. Build local development version (see above).
31
+ 2. In the consuming app, run `npm install --no-save ./relative/path/to/this/directory` (no trailing slash).
32
+ - For example: `npm install --no-save ../../casper-ui-library/packages/casper-ui-library`
33
+
34
+ Now when you make a change in the component library, it should rebuild automatically and the consuming app's HMR should kick in and reload the page (preserving state is not possible as the entire library is rebuilt).
35
+
36
+ To unlink again you just need to run `npm install` in the consuming app. If it fails, you may need to delete `node_modules` first.
37
+
38
+ If you get an error about duplicate react versions, make sure this is in the `vite.config.ts` in the consuming app:
39
+
40
+ ```ts
41
+ import path from "node:path";
42
+
43
+ export default defineConfig({
44
+ // ...
45
+ resolve: {
46
+ alias: {
47
+ react: path.resolve("./node_modules/react"),
48
+ },
49
+ },
50
+ });
51
+ ```
52
+
53
+ ## Contributing
54
+
55
+ 1. Make sure your repository is up to date.
56
+ ```bash
57
+ git pull
58
+ ```
59
+ 2. Create a new branch and make your changes there. Preferrably use a branch name that includes any related Jira issue and some short descriptive name.
60
+ ```bash
61
+ git checkout -b UTF-837-add-checkbox-component
62
+ ```
63
+ 3. Make your changes.
64
+ 4. Bump the `version` field in `package.json` (following [Semantic versioning](https://semver.org/)) and run `npm install`.
65
+ 5. Open a [pull request](https://github.com/Caspeco/casper-ui-library/pulls) using the template and assign a reviewer.
@@ -193,7 +193,7 @@ const _ = function(r) {
193
193
  const R = (((B = t.flip) == null ? void 0 : B.index) || 0) + 1, D = I[R];
194
194
  if (D && (!(s === "alignment" ? x !== E(D) : !1) || // We leave the current main axis only if every placement on that axis
195
195
  // overflows the main axis.
196
- O.every((g) => g.overflows[0] > 0 && E(g.placement) === x)))
196
+ O.every((g) => E(g.placement) === x ? g.overflows[0] > 0 : !0)))
197
197
  return {
198
198
  data: {
199
199
  index: R,
@@ -1,29 +1,85 @@
1
- import { anatomy as t } from "./chunk-OA3DH5LS.js";
2
- var r = t("accordion").parts("root", "container", "button", "panel").extend("icon");
3
- t("alert").parts("title", "description", "container").extend("icon", "spinner");
4
- t("avatar").parts("label", "badge", "container").extend("excessLabel", "group");
5
- t("breadcrumb").parts("link", "item", "container").extend("separator");
1
+ import { anatomy as t } from "./create-anatomy.js";
2
+ const a = t("accordion").parts(
3
+ "root",
4
+ "container",
5
+ "button",
6
+ "panel",
7
+ "icon"
8
+ );
9
+ t("alert").parts(
10
+ "title",
11
+ "description",
12
+ "container",
13
+ "icon",
14
+ "spinner"
15
+ );
16
+ t("avatar").parts(
17
+ "label",
18
+ "badge",
19
+ "container",
20
+ "excessLabel",
21
+ "group"
22
+ );
23
+ t("breadcrumb").parts(
24
+ "link",
25
+ "item",
26
+ "container",
27
+ "separator"
28
+ );
6
29
  t("button").parts();
7
- var e = t("checkbox").parts("control", "icon", "container").extend("label");
8
- t("progress").parts("track", "filledTrack").extend("label");
9
- var o = t("drawer").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
30
+ const r = t("checkbox").parts(
31
+ "control",
32
+ "icon",
33
+ "container",
34
+ "label"
35
+ );
36
+ t("progress").parts(
37
+ "track",
38
+ "filledTrack",
39
+ "label"
40
+ );
41
+ const e = t("drawer").parts(
42
+ "overlay",
43
+ "dialogContainer",
44
+ "dialog",
45
+ "header",
46
+ "closeButton",
47
+ "body",
48
+ "footer"
49
+ );
10
50
  t("editable").parts(
11
51
  "preview",
12
52
  "input",
13
53
  "textarea"
14
54
  );
15
- var n = t("form").parts(
55
+ const n = t("form").parts(
16
56
  "container",
17
57
  "requiredIndicator",
18
58
  "helperText"
19
- ), i = t("formError").parts("text", "icon"), p = t("input").parts(
59
+ ), i = t("formError").parts("text", "icon"), s = t("input").parts(
20
60
  "addon",
21
61
  "field",
22
62
  "element",
23
63
  "group"
24
64
  );
25
65
  t("list").parts("container", "item", "icon");
26
- var l = t("menu").parts("button", "list", "item").extend("groupTitle", "icon", "command", "divider"), s = t("modal").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
66
+ const c = t("menu").parts(
67
+ "button",
68
+ "list",
69
+ "item",
70
+ "groupTitle",
71
+ "icon",
72
+ "command",
73
+ "divider"
74
+ ), p = t("modal").parts(
75
+ "overlay",
76
+ "dialogContainer",
77
+ "dialog",
78
+ "header",
79
+ "closeButton",
80
+ "body",
81
+ "footer"
82
+ );
27
83
  t("numberinput").parts(
28
84
  "root",
29
85
  "field",
@@ -31,13 +87,21 @@ t("numberinput").parts(
31
87
  "stepper"
32
88
  );
33
89
  t("pininput").parts("field");
34
- t("popover").parts("content", "header", "body", "footer").extend("popper", "arrow", "closeButton");
90
+ t("popover").parts(
91
+ "content",
92
+ "header",
93
+ "body",
94
+ "footer",
95
+ "popper",
96
+ "arrow",
97
+ "closeButton"
98
+ );
35
99
  t("progress").parts(
36
100
  "label",
37
101
  "filledTrack",
38
102
  "track"
39
103
  );
40
- var c = t("radio").parts(
104
+ const l = t("radio").parts(
41
105
  "container",
42
106
  "control",
43
107
  "label"
@@ -56,7 +120,7 @@ t("stat").parts(
56
120
  "number",
57
121
  "icon"
58
122
  );
59
- var m = t("switch").parts(
123
+ const m = t("switch").parts(
60
124
  "container",
61
125
  "track",
62
126
  "thumb",
@@ -99,15 +163,15 @@ t("stepper").parts(
99
163
  "number"
100
164
  );
101
165
  export {
102
- r as accordionAnatomy,
103
- e as checkboxAnatomy,
104
- o as drawerAnatomy,
166
+ a as accordionAnatomy,
167
+ r as checkboxAnatomy,
168
+ e as drawerAnatomy,
105
169
  n as formAnatomy,
106
170
  i as formErrorAnatomy,
107
- p as inputAnatomy,
108
- l as menuAnatomy,
109
- s as modalAnatomy,
110
- c as radioAnatomy,
171
+ s as inputAnatomy,
172
+ c as menuAnatomy,
173
+ p as modalAnatomy,
174
+ l as radioAnatomy,
111
175
  d as selectAnatomy,
112
176
  m as switchAnatomy,
113
177
  b as tableAnatomy,
@@ -1,11 +1,11 @@
1
1
  import { ThemeBorderVariable, ThemeColorVariable, ThemeFontSizeVariable, ThemeRadiusVariable, ThemeSpaceVariable } from '../../theme-types.js';
2
2
  export declare const accordionConfig: {
3
3
  baseStyle?: import('@chakra-ui/styled-system').PartsStyleInterpolation<{
4
- keys: ("button" | "root" | "container" | "panel" | "icon")[];
4
+ keys: ("button" | "container" | "root" | "panel" | "icon")[];
5
5
  }> | undefined;
6
6
  sizes?: {
7
7
  [key: string]: import('@chakra-ui/styled-system').PartsStyleInterpolation<{
8
- keys: ("button" | "root" | "container" | "panel" | "icon")[];
8
+ keys: ("button" | "container" | "root" | "panel" | "icon")[];
9
9
  }>;
10
10
  } | undefined;
11
11
  variants?: {
@@ -141,6 +141,6 @@ export declare const accordionConfig: {
141
141
  variant?: "border" | "noBorder" | "list" | undefined;
142
142
  colorScheme?: string | undefined;
143
143
  } | undefined;
144
- parts: ("button" | "root" | "container" | "panel" | "icon")[];
144
+ parts: ("button" | "container" | "root" | "panel" | "icon")[];
145
145
  };
146
146
  //# sourceMappingURL=accordion-theme.d.ts.map
@@ -1,12 +1,12 @@
1
- import { accordionAnatomy as u } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as c, defineStyle as n } from "@chakra-ui/react";
3
- import { ThemeColorVariable as e, ThemeBorderVariable as a, ThemeSpaceVariable as r, ThemeRadiusVariable as o, ThemeFontSizeVariable as b } from "../../theme-types.js";
4
- const { definePartsStyle: t, defineMultiStyleConfig: s } = c(u.keys), d = n({
1
+ import { createMultiStyleConfigHelpers as u, defineStyle as n } from "@chakra-ui/react";
2
+ import { ThemeColorVariable as e, ThemeBorderVariable as a, ThemeSpaceVariable as r, ThemeRadiusVariable as o, ThemeFontSizeVariable as c } from "../../theme-types.js";
3
+ import { accordionAnatomy as b } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
4
+ const { definePartsStyle: t, defineMultiStyleConfig: s } = u(b.keys), d = n({
5
5
  width: "100%"
6
6
  }), i = n({
7
7
  display: "flex",
8
8
  width: "100%",
9
- fontSize: b.Large,
9
+ fontSize: c.Large,
10
10
  fontWeight: "500",
11
11
  py: r.Small,
12
12
  px: r.Medium,
@@ -1,11 +1,11 @@
1
- import { checkboxAnatomy as l } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as i, defineStyle as r } from "@chakra-ui/react";
1
+ import { createMultiStyleConfigHelpers as l, defineStyle as r } from "@chakra-ui/react";
3
2
  import { ThemeColorVariable as o } from "../../theme-types.js";
4
- import { ThemeColorToken as e, ThemeFontSizeToken as b, ThemeFontToken as A, ThemeBorderToken as v } from "../theme-tokens.js";
5
- const { definePartsStyle: c, defineMultiStyleConfig: s } = i(l.keys), h = r({
3
+ import { ThemeColorToken as e, ThemeFontSizeToken as i, ThemeFontToken as b, ThemeBorderToken as A } from "../theme-tokens.js";
4
+ import { checkboxAnatomy as v } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
5
+ const { definePartsStyle: c, defineMultiStyleConfig: s } = l(v.keys), h = r({
6
6
  m: 0,
7
- fontFamily: A.Body,
8
- fontSize: b.Medium,
7
+ fontFamily: b.Body,
8
+ fontSize: i.Medium,
9
9
  color: e.OnSurface,
10
10
  width: "100%",
11
11
  _disabled: {
@@ -54,7 +54,7 @@ const { definePartsStyle: c, defineMultiStyleConfig: s } = i(l.keys), h = r({
54
54
  borderColor: e.OnBackground,
55
55
  background: "transparent",
56
56
  borderRadius: "4px",
57
- border: v.Small,
57
+ border: A.Small,
58
58
  _disabled: {
59
59
  opacity: 0.48,
60
60
  borderColor: e.OnBackground,
@@ -1,7 +1,7 @@
1
- import { drawerAnatomy as i } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as t } from "@chakra-ui/react";
1
+ import { createMultiStyleConfigHelpers as i } from "@chakra-ui/react";
3
2
  import { ThemeColorToken as e } from "../theme-tokens.js";
4
- const { definePartsStyle: o, defineMultiStyleConfig: a } = t(i.keys), r = {
3
+ import { drawerAnatomy as t } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
4
+ const { definePartsStyle: o, defineMultiStyleConfig: a } = i(t.keys), r = {
5
5
  xs: o({ dialog: { maxWidth: "320px" } }),
6
6
  // Chakra default
7
7
  sm: o({ dialog: { maxWidth: "448px" } }),
@@ -1,12 +1,12 @@
1
- import { formErrorAnatomy as o } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as e } from "@chakra-ui/react";
3
- import { ThemeSpaceToken as r, ThemeFontSizeToken as t, ThemeFontToken as n, ThemeColorToken as m } from "../theme-tokens.js";
4
- const { definePartsStyle: i, defineMultiStyleConfig: l } = e(o.keys), f = i({
1
+ import { createMultiStyleConfigHelpers as o } from "@chakra-ui/react";
2
+ import { ThemeSpaceToken as e, ThemeFontSizeToken as r, ThemeFontToken as t, ThemeColorToken as n } from "../theme-tokens.js";
3
+ import { formErrorAnatomy as m } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
4
+ const { definePartsStyle: i, defineMultiStyleConfig: l } = o(m.keys), f = i({
5
5
  text: {
6
- color: m.Error,
7
- fontFamily: n.Body,
8
- fontSize: t.Small,
9
- marginTop: r.XSmall
6
+ color: n.Error,
7
+ fontFamily: t.Body,
8
+ fontSize: r.Small,
9
+ marginTop: e.XSmall
10
10
  }
11
11
  }), y = l({
12
12
  baseStyle: f
@@ -1,19 +1,19 @@
1
- import { formAnatomy as r } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as t, defineStyle as o } from "@chakra-ui/react";
3
- import { ThemeColorToken as e, ThemeFontSizeToken as n, ThemeFontToken as i, ThemeSpaceToken as l } from "../theme-tokens.js";
4
- const { definePartsStyle: a, defineMultiStyleConfig: c } = t(r.keys), d = o({
1
+ import { createMultiStyleConfigHelpers as r, defineStyle as o } from "@chakra-ui/react";
2
+ import { ThemeColorToken as e, ThemeFontSizeToken as n, ThemeFontToken as t, ThemeSpaceToken as i } from "../theme-tokens.js";
3
+ import { formAnatomy as l } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
4
+ const { definePartsStyle: a, defineMultiStyleConfig: c } = r(l.keys), d = o({
5
5
  color: e.Error
6
6
  }), m = o({
7
7
  color: e.OnBackgroundSubdued,
8
8
  fontSize: n.Small,
9
- marginTop: l.XSmall
9
+ marginTop: i.XSmall
10
10
  }), S = a({
11
11
  container: {
12
12
  _disabled: {
13
13
  opacity: 1,
14
14
  color: e.OnBackgroundSubdued
15
15
  },
16
- fontFamily: i.Body,
16
+ fontFamily: t.Body,
17
17
  fontSize: n.Medium,
18
18
  color: e.OnBackground
19
19
  },
@@ -1,10 +1,10 @@
1
- import { inputAnatomy as f } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as m, defineStyle as l } from "@chakra-ui/react";
3
- import { isTouchScreenDevice as s } from "../../theme-helper.js";
1
+ import { createMultiStyleConfigHelpers as f, defineStyle as l } from "@chakra-ui/react";
2
+ import { isTouchScreenDevice as m } from "../../theme-helper.js";
4
3
  import { ThemeColorVariable as n } from "../../theme-types.js";
5
- import { ThemeColorToken as o, ThemeSpaceToken as r, ThemeRadiusToken as t, ThemeBorderToken as d, ThemeFontToken as b, ThemeFontSizeToken as i } from "../theme-tokens.js";
6
- const { definePartsStyle: a, defineMultiStyleConfig: p } = m(f.keys), c = {
7
- fontFamily: b.Body,
4
+ import { ThemeColorToken as o, ThemeSpaceToken as r, ThemeRadiusToken as t, ThemeBorderToken as d, ThemeFontToken as s, ThemeFontSizeToken as i } from "../theme-tokens.js";
5
+ import { inputAnatomy as b } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
6
+ const { definePartsStyle: a, defineMultiStyleConfig: p } = f(b.keys), c = {
7
+ fontFamily: s.Body,
8
8
  color: o.OnSurface,
9
9
  border: d.XSmall,
10
10
  borderColor: o.OnSurfaceBorder,
@@ -40,7 +40,7 @@ const { definePartsStyle: a, defineMultiStyleConfig: p } = m(f.keys), c = {
40
40
  boxShadow: `0 0 0 4px ${n.InfoContainer}`
41
41
  },
42
42
  _hover: {
43
- borderColor: s() ? o.OnSurfaceBorder : o.OnSurface,
43
+ borderColor: m() ? o.OnSurfaceBorder : o.OnSurface,
44
44
  _disabled: void 0,
45
45
  _readOnly: void 0
46
46
  }
@@ -1,7 +1,7 @@
1
- import { menuAnatomy as n } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as r, defineStyle as a } from "@chakra-ui/react";
3
- import { ThemeSpaceVariable as e, ThemeFontSizeVariable as t, ThemeColorVariable as o, ThemeShadowVariable as l } from "../../theme-types.js";
4
- const { definePartsStyle: i, defineMultiStyleConfig: c } = r(n.keys), d = a({
1
+ import { createMultiStyleConfigHelpers as n, defineStyle as a } from "@chakra-ui/react";
2
+ import { ThemeSpaceVariable as e, ThemeFontSizeVariable as r, ThemeColorVariable as o, ThemeShadowVariable as t } from "../../theme-types.js";
3
+ import { menuAnatomy as l } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
4
+ const { definePartsStyle: i, defineMultiStyleConfig: c } = n(l.keys), d = a({
5
5
  minW: "280px",
6
6
  alignItems: "center",
7
7
  paddingLeft: e.Medium,
@@ -32,14 +32,14 @@ const { definePartsStyle: i, defineMultiStyleConfig: c } = r(n.keys), d = a({
32
32
  mr: e.XSmall
33
33
  }
34
34
  }), m = a({
35
- boxShadow: l.Medium,
35
+ boxShadow: t.Medium,
36
36
  bg: o.Surface,
37
37
  border: "none",
38
38
  borderRadius: e.Small
39
39
  }), u = a({
40
40
  opacity: 1,
41
41
  color: o.OnSurfaceSubdued,
42
- fontSize: t.Small,
42
+ fontSize: r.Small,
43
43
  mx: e.XSmall
44
44
  }), S = i({
45
45
  item: d,
@@ -1,8 +1,8 @@
1
- import { modalAnatomy as d } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as n } from "@chakra-ui/react";
3
- import { ThemeColorToken as o, ThemeRadiusToken as a, ThemeFontToken as r, ThemeFontSizeToken as m } from "../theme-tokens.js";
1
+ import { createMultiStyleConfigHelpers as d } from "@chakra-ui/react";
2
+ import { ThemeColorToken as o, ThemeRadiusToken as a, ThemeFontToken as r, ThemeFontSizeToken as n } from "../theme-tokens.js";
4
3
  import { buttonConfig as t } from "./button-theme.js";
5
- const { definePartsStyle: e, defineMultiStyleConfig: l } = n(d.keys);
4
+ import { modalAnatomy as m } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
5
+ const { definePartsStyle: e, defineMultiStyleConfig: l } = d(m.keys);
6
6
  var i;
7
7
  const x = e({
8
8
  overlay: {
@@ -12,7 +12,7 @@ const x = e({
12
12
  header: {
13
13
  bg: o.Surface,
14
14
  position: "relative",
15
- fontSize: m.XLarge,
15
+ fontSize: n.XLarge,
16
16
  fontFamily: r.SubHeader,
17
17
  color: o.OnSurfaceHeader,
18
18
  fontWeight: "medium",
@@ -1,7 +1,7 @@
1
- import { radioAnatomy as r } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as n } from "@chakra-ui/react";
3
- import { ThemeColorToken as o, ThemeBorderToken as t, ThemeFontSizeToken as c, ThemeFontToken as i } from "../theme-tokens.js";
4
- const { defineMultiStyleConfig: l } = n(r.keys), e = {
1
+ import { createMultiStyleConfigHelpers as r } from "@chakra-ui/react";
2
+ import { ThemeColorToken as o, ThemeBorderToken as n, ThemeFontSizeToken as t, ThemeFontToken as c } from "../theme-tokens.js";
3
+ import { radioAnatomy as i } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
4
+ const { defineMultiStyleConfig: l } = r(i.keys), e = {
5
5
  content: '""',
6
6
  display: "inline-block",
7
7
  pos: "relative",
@@ -12,14 +12,14 @@ const { defineMultiStyleConfig: l } = n(r.keys), e = {
12
12
  }, d = {
13
13
  label: {
14
14
  color: o.OnSurface,
15
- fontFamily: i.Body,
16
- fontSize: c.Medium,
15
+ fontFamily: c.Body,
16
+ fontSize: t.Medium,
17
17
  _disabled: {
18
18
  opacity: 1
19
19
  }
20
20
  },
21
21
  control: {
22
- border: t.Small,
22
+ border: n.Small,
23
23
  borderColor: o.OnBackground,
24
24
  color: o.OnAccent,
25
25
  bg: "transparent",
@@ -1,8 +1,8 @@
1
- import { selectAnatomy as c } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as f } from "@chakra-ui/react";
3
- import { ThemeColorToken as o, ThemeFontSizeToken as s } from "../theme-tokens.js";
1
+ import { createMultiStyleConfigHelpers as c } from "@chakra-ui/react";
2
+ import { ThemeColorToken as o, ThemeFontSizeToken as f } from "../theme-tokens.js";
4
3
  import { inputConfig as e } from "./input-theme.js";
5
- const { defineMultiStyleConfig: u, definePartsStyle: a } = f(c.keys);
4
+ import { selectAnatomy as s } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
5
+ const { defineMultiStyleConfig: u, definePartsStyle: a } = c(s.keys);
6
6
  var t, n;
7
7
  const l = a({
8
8
  // Apply input theme, as Select and Input share most of their appearances
@@ -18,7 +18,7 @@ const l = a({
18
18
  }
19
19
  },
20
20
  icon: {
21
- fontSize: s.Small,
21
+ fontSize: f.Small,
22
22
  color: o.OnSurface,
23
23
  _disabled: {
24
24
  opacity: 1,
@@ -1,7 +1,7 @@
1
- import { switchAnatomy as r } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as c, defineStyle as o } from "@chakra-ui/react";
1
+ import { createMultiStyleConfigHelpers as r, defineStyle as o } from "@chakra-ui/react";
3
2
  import { ThemeColorToken as e } from "../theme-tokens.js";
4
- const { definePartsStyle: t, defineMultiStyleConfig: i } = c(r.keys), h = o({
3
+ import { switchAnatomy as c } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
4
+ const { definePartsStyle: t, defineMultiStyleConfig: i } = r(c.keys), h = o({
5
5
  backgroundColor: e.Surface,
6
6
  borderColor: e.OnSurfaceSubdued,
7
7
  borderStyle: "solid",
@@ -1,10 +1,10 @@
1
- import { tableAnatomy as n } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as a, defineStyle as e } from "@chakra-ui/react";
3
- import { ThemeColorVariable as o, ThemeSpaceVariable as r, ThemeFontVariable as l } from "../../theme-types.js";
1
+ import { createMultiStyleConfigHelpers as n, defineStyle as e } from "@chakra-ui/react";
2
+ import { ThemeColorVariable as o, ThemeSpaceVariable as r, ThemeFontVariable as a } from "../../theme-types.js";
4
3
  import { ThemeFontSizeToken as t } from "../theme-tokens.js";
5
- const { definePartsStyle: d, defineMultiStyleConfig: i } = a(n.keys), b = e({
4
+ import { tableAnatomy as l } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
5
+ const { definePartsStyle: d, defineMultiStyleConfig: i } = n(l.keys), b = e({
6
6
  position: "relative",
7
- fontFamily: l.Body,
7
+ fontFamily: a.Body,
8
8
  fontSize: t.Small,
9
9
  th: {
10
10
  padding: "0px",
@@ -1,11 +1,11 @@
1
- import { tabsAnatomy as d } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as l } from "@chakra-ui/react";
1
+ import { createMultiStyleConfigHelpers as d } from "@chakra-ui/react";
3
2
  import { ThemeSpaceVariable as t } from "../../theme-types.js";
4
- import { ThemeBorderToken as a, ThemeRadiusToken as i, ThemeFontToken as c, ThemeColorToken as e, ThemeFontSizeToken as r } from "../theme-tokens.js";
5
- const { definePartsStyle: o, defineMultiStyleConfig: g } = l(d.keys), s = o({
3
+ import { ThemeBorderToken as a, ThemeRadiusToken as i, ThemeFontToken as l, ThemeColorToken as e, ThemeFontSizeToken as r } from "../theme-tokens.js";
4
+ import { tabsAnatomy as c } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
5
+ const { definePartsStyle: o, defineMultiStyleConfig: g } = d(c.keys), s = o({
6
6
  tab: {
7
7
  color: e.OnBackground,
8
- fontFamily: c.SubHeader,
8
+ fontFamily: l.SubHeader,
9
9
  fontWeight: "medium",
10
10
  borderRadius: i.XLarge,
11
11
  bg: "none",
@@ -1,7 +1,7 @@
1
- import { tagAnatomy as h } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
2
- import { createMultiStyleConfigHelpers as b } from "@chakra-ui/react";
3
- import { ThemeColorVariable as o, ThemeIconSizeVariable as t, ThemeFontSizeVariable as d, ThemeFontVariable as f, ThemeSpaceVariable as m, ThemeRadiusVariable as C } from "../../theme-types.js";
4
- const g = ["Primary", "Secondary", "Success", "Error", "Info", "Neutral", "Warning"], a = ".tag-dot", u = ".tag-icon", { definePartsStyle: n, defineMultiStyleConfig: p } = b(h.keys), x = g.reduce(
1
+ import { createMultiStyleConfigHelpers as h } from "@chakra-ui/react";
2
+ import { ThemeColorVariable as o, ThemeIconSizeVariable as t, ThemeFontSizeVariable as d, ThemeFontVariable as b, ThemeSpaceVariable as m, ThemeRadiusVariable as f } from "../../theme-types.js";
3
+ import { tagAnatomy as C } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
4
+ const g = ["Primary", "Secondary", "Success", "Error", "Info", "Neutral", "Warning"], a = ".tag-dot", u = ".tag-icon", { definePartsStyle: n, defineMultiStyleConfig: p } = h(C.keys), x = g.reduce(
5
5
  (l, e) => {
6
6
  const i = l, c = `${e.toLowerCase()}Solid`, s = e, r = `On${e}`;
7
7
  return i[c] = n({
@@ -39,7 +39,7 @@ const g = ["Primary", "Secondary", "Success", "Error", "Info", "Neutral", "Warni
39
39
  px: m.Small,
40
40
  bg: o.NeutralContainer,
41
41
  color: o.OnNeutralContainer,
42
- borderRadius: C.Small
42
+ borderRadius: f.Small
43
43
  },
44
44
  label: {
45
45
  alignItems: "center",
@@ -47,7 +47,7 @@ const g = ["Primary", "Secondary", "Success", "Error", "Info", "Neutral", "Warni
47
47
  lineHeight: "150%",
48
48
  mx: m.XSmall,
49
49
  letterSpacing: "0.0125em",
50
- font: f.Body
50
+ font: b.Body
51
51
  },
52
52
  closeButton: {
53
53
  opacity: "0.48",
package/package.json CHANGED
@@ -1,62 +1,62 @@
1
- {
2
- "name": "@caspeco/casper-ui-library",
3
- "version": "0.0.4",
4
- "prettier": "@caspeco/prettier-config",
5
- "type": "module",
6
- "sideEffects": false,
7
- "files": [
8
- "dist"
9
- ],
10
- "main": "dist/index.js",
11
- "module": "dist/index.js",
12
- "types": "dist/index.d.ts",
13
- "scripts": {
14
- "dev": "vite build --watch --mode dev",
15
- "build": "vite build --mode prod",
16
- "tsc": "tsc --project tsconfig.app.json",
17
- "test": "vitest run",
18
- "prettier": "prettier --check .",
19
- "prettier:fix": "prettier --write .",
20
- "check:types": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
21
- "lint": "eslint .",
22
- "preview": "vite preview"
23
- },
24
- "devDependencies": {
25
- "@arethetypeswrong/cli": "^0.18.2",
26
- "@caspeco/eslint-config": "^4.0.4",
27
- "@caspeco/prettier-config": "^1.0.6",
28
- "@eslint/js": "^9.32.0",
29
- "@testing-library/jest-dom": "^6.6.4",
30
- "@testing-library/react": "^16.3.0",
31
- "@types/jest": "^30.0.0",
32
- "@types/node": "^24.1.0",
33
- "@types/react": "^18.3.12",
34
- "@types/react-dom": "^18.3.1",
35
- "@vitejs/plugin-react-swc": "^3.11.0",
36
- "eslint": "^9.32.0",
37
- "eslint-plugin-react-hooks": "^5.2.0",
38
- "eslint-plugin-react-refresh": "^0.4.20",
39
- "globals": "^16.3.0",
40
- "jsdom": "^26.1.0",
41
- "tsc-alias": "^1.8.16",
42
- "typescript": "~5.8.3",
43
- "typescript-eslint": "^8.38.0",
44
- "vite": "^6.3.5",
45
- "vite-plugin-dts": "^4.5.4",
46
- "vite-tsconfig-paths": "^5.1.4",
47
- "vitest": "^3.2.4"
48
- },
49
- "peerDependencies": {
50
- "@chakra-ui/react": "^2.8.2",
51
- "framer-motion": "^12.23.12",
52
- "react": "^18.3.1",
53
- "react-dom": "^18.3.1"
54
- },
55
- "dependencies": {
56
- "@chakra-ui/anatomy": "^2.2.2",
57
- "@floating-ui/dom": "^1.7.2",
58
- "@tanstack/react-table": "^8.21.3",
59
- "csstype": "^3.1.3",
60
- "date-fns": "^4.1.0"
61
- }
62
- }
1
+ {
2
+ "name": "@caspeco/casper-ui-library",
3
+ "version": "4.0.0",
4
+ "prettier": "@caspeco/prettier-config",
5
+ "type": "module",
6
+ "sideEffects": false,
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "main": "dist/index.js",
11
+ "module": "dist/index.js",
12
+ "types": "dist/index.d.ts",
13
+ "scripts": {
14
+ "dev": "vite build --watch --mode dev",
15
+ "build": "vite build --mode prod",
16
+ "tsc": "tsc --project tsconfig.app.json",
17
+ "test": "vitest run",
18
+ "prettier": "prettier --check .",
19
+ "prettier:fix": "prettier --write .",
20
+ "check:types": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
21
+ "lint": "eslint .",
22
+ "preview": "vite preview"
23
+ },
24
+ "devDependencies": {
25
+ "@arethetypeswrong/cli": "^0.18.2",
26
+ "@caspeco/eslint-config": "^4.0.5",
27
+ "@caspeco/prettier-config": "^1.0.6",
28
+ "@eslint/js": "^9.33.0",
29
+ "@testing-library/jest-dom": "^6.7.0",
30
+ "@testing-library/react": "^16.3.0",
31
+ "@types/jest": "^30.0.0",
32
+ "@types/node": "^24.2.1",
33
+ "@types/react": "^18.3.12",
34
+ "@types/react-dom": "^18.3.1",
35
+ "@vitejs/plugin-react-swc": "^4.0.0",
36
+ "eslint": "^9.33.0",
37
+ "eslint-plugin-react-hooks": "^5.2.0",
38
+ "eslint-plugin-react-refresh": "^0.4.20",
39
+ "globals": "^16.3.0",
40
+ "jsdom": "^26.1.0",
41
+ "tsc-alias": "^1.8.16",
42
+ "typescript": "~5.9.2",
43
+ "typescript-eslint": "^8.39.1",
44
+ "vite": "^6.3.5",
45
+ "vite-plugin-dts": "^4.5.4",
46
+ "vite-tsconfig-paths": "^5.1.4",
47
+ "vitest": "^3.2.4"
48
+ },
49
+ "peerDependencies": {
50
+ "@chakra-ui/react": "^2.8.2",
51
+ "framer-motion": "^12.23.12",
52
+ "react": "^18.3.1",
53
+ "react-dom": "^18.3.1"
54
+ },
55
+ "dependencies": {
56
+ "@chakra-ui/anatomy": "^2.3.4",
57
+ "@floating-ui/dom": "^1.7.3",
58
+ "@tanstack/react-table": "^8.21.3",
59
+ "csstype": "^3.1.3",
60
+ "date-fns": "^4.1.0"
61
+ }
62
+ }