@canonical/react-ds-core 0.5.1-experimental.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.
Files changed (36) hide show
  1. package/README.md +91 -0
  2. package/dist/esm/index.js +2 -0
  3. package/dist/esm/index.js.map +1 -0
  4. package/dist/esm/ui/Button/Button.js +10 -0
  5. package/dist/esm/ui/Button/Button.js.map +1 -0
  6. package/dist/esm/ui/Button/index.js +2 -0
  7. package/dist/esm/ui/Button/index.js.map +1 -0
  8. package/dist/esm/ui/Button/styles.css +63 -0
  9. package/dist/esm/ui/Button/types.js +2 -0
  10. package/dist/esm/ui/Button/types.js.map +1 -0
  11. package/dist/esm/ui/Chip/Chip.css +79 -0
  12. package/dist/esm/ui/Chip/Chip.js +15 -0
  13. package/dist/esm/ui/Chip/Chip.js.map +1 -0
  14. package/dist/esm/ui/Chip/index.js +4 -0
  15. package/dist/esm/ui/Chip/index.js.map +1 -0
  16. package/dist/esm/ui/Chip/types.js +2 -0
  17. package/dist/esm/ui/Chip/types.js.map +1 -0
  18. package/dist/esm/ui/index.js +2 -0
  19. package/dist/esm/ui/index.js.map +1 -0
  20. package/dist/types/index.d.ts +2 -0
  21. package/dist/types/index.d.ts.map +1 -0
  22. package/dist/types/ui/Button/Button.d.ts +6 -0
  23. package/dist/types/ui/Button/Button.d.ts.map +1 -0
  24. package/dist/types/ui/Button/index.d.ts +3 -0
  25. package/dist/types/ui/Button/index.d.ts.map +1 -0
  26. package/dist/types/ui/Button/types.d.ts +15 -0
  27. package/dist/types/ui/Button/types.d.ts.map +1 -0
  28. package/dist/types/ui/Chip/Chip.d.ts +10 -0
  29. package/dist/types/ui/Chip/Chip.d.ts.map +1 -0
  30. package/dist/types/ui/Chip/index.d.ts +3 -0
  31. package/dist/types/ui/Chip/index.d.ts.map +1 -0
  32. package/dist/types/ui/Chip/types.d.ts +27 -0
  33. package/dist/types/ui/Chip/types.d.ts.map +1 -0
  34. package/dist/types/ui/index.d.ts +2 -0
  35. package/dist/types/ui/index.d.ts.map +1 -0
  36. package/package.json +73 -0
package/README.md ADDED
@@ -0,0 +1,91 @@
1
+ # React + TypeScript + Vite
2
+
3
+ This template provides a minimal setup to get React working in Vite with HMR.
4
+
5
+ Currently, two official plugins are available:
6
+
7
+ - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)
8
+ uses [Babel](https://babeljs.io/) for Fast Refresh
9
+ - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)
10
+ uses [SWC](https://swc.rs/) for Fast Refresh
11
+
12
+ ## Caveats
13
+
14
+ ### TSConfig
15
+
16
+ #### Skip library check
17
+
18
+ We use [skipLibCheck](https://www.typescriptlang.org/tsconfig/#skipLibCheck) to
19
+ skip type checking of declaration files. This is needed for compatibility with
20
+ storybook dependencies. If this option is not enabled, the following error occurs:
21
+
22
+ ```
23
+ The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("storybook/internal/types")' call instead.
24
+ ```
25
+
26
+ Library checking is only disabled for Storybook files. This is due to
27
+ Storybook dependencies using CommonJS modules alongside ECMAScript modules,
28
+ which causes issues when TypeScript tries to type-check them together.
29
+
30
+ Storybook files are excluded from builds in [tsconfig.build.json](tsconfig.build.json).
31
+ Library type-checking is enabled for builds.
32
+
33
+
34
+ ### Bun
35
+
36
+ [Bun](https://bun.sh/) is being experimentally used as a package manager.
37
+
38
+ ### Build tool
39
+
40
+ Bun includes a [native JS bundler](https://bun.sh/docs/bundler) that can
41
+ transpile Typescript.
42
+
43
+ #### Downsides
44
+
45
+ We are not currently considering using `bun build` for production builds for
46
+ the following reasons:
47
+
48
+ ##### Globstar
49
+
50
+ Bun's [implementation of globstar](https://bun.sh/docs/api/glob) is non-standard.
51
+ It is difficult to build arbitrarily deep filepaths, as Bun expects a globstar
52
+ for each level of supported nesting. Most glob implementations treat a globstar
53
+ as representing an arbitrary number of non-hidden directories. However, with
54
+ Bun, matching `.ts` files in `src/ui/Button` requires the glob pattern
55
+ `**/**/*.ts`, which does not match files in other levels of nesting.
56
+
57
+ ##### Dist Depth
58
+
59
+ Generating `dist/` output that has the correct folder structure (i.e.,
60
+ `dist/ui/Button/`) is non-trivial. `bun build` generates output with folder
61
+ structure starting from matching the shallowest source file. However, this is
62
+ not always desired. For example, if `ui/` is inside `src/`, one must `cd` into
63
+ `src` before running `bun build` to generate the appropriate folder structure.
64
+ You must then set build output to `../dist` to place build results in the
65
+ project root. This makes the build script unnecessarily complex.
66
+
67
+ ##### Type emitting
68
+
69
+ `bun build` does not generate types, so it must be accompanied by the usage of
70
+ some other tool that generates type declarations.
71
+
72
+ #### Upsides
73
+
74
+ ##### Speed
75
+
76
+ Bun builds slightly faster than the Typescript compiler.
77
+
78
+ | Tool | Command | Real Time | User Time | Sys Time |
79
+ | ---- | --------------------------------------------------------------------| --------- | --------- | -------- |
80
+ | Bun | `bun run build:package:bun` | 0m0.648s | 0m1.498s | 0m0.117s |
81
+ | Typescript | `bun run build:package:tsc && bun run build:package:copycss` | 0m0.707s | 0m1.615s | 0m0.094s |
82
+
83
+ Note that the bun build must also call `tsc` to generate type declarations, and
84
+ the tsc build must call the external `copyfiles` dependency to copy assets into
85
+ `dist/`.
86
+
87
+ ##### Non-TS bundling
88
+
89
+ `bun build` copies non-TS assets (such as images, stylesheets, etc) into `dist`.
90
+ `tsc` must be followed up with a manual step that copies non-TS files (currently,
91
+ this is only CSS) into `dist`.
@@ -0,0 +1,2 @@
1
+ export * from "./ui/index.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import "./styles.css";
3
+ /** Buttons are clickable elements used to perform an action. */
4
+ const Button = ({ id, className, appearance, label, ...props }) => {
5
+ return (_jsx("button", { id: id, className: ["ds", "button", appearance, className]
6
+ .filter(Boolean)
7
+ .join(" "), ...props, "aria-label": label, children: label }));
8
+ };
9
+ export default Button;
10
+ //# sourceMappingURL=Button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACF,EAAsB,EAAE;IAC9B,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;aAC/C,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,gBACG,KAAK,YAEhB,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default as Button } from "./Button.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1,63 @@
1
+ /* component styles */
2
+
3
+ /* component variables
4
+ --button-color-background: background color of the button
5
+ --button-color-background-hover: background color of the button on hover
6
+ --button-color-background-active: background color of the button on active
7
+ --button-color-text: text color of the button
8
+ --button-color-border: border color of the button
9
+ --button-color-border-hover: border color of the button on hover
10
+ --button-color-border-active: border color of the button on active
11
+
12
+ --button-margin-left: left margin of the button
13
+ --button-margin-bottom: bottom margin of the button
14
+ --button-padding-vertical: vertical padding of the button
15
+ --button-padding-horizontal: horizontal padding of the button
16
+ --button-border-width: border width of the button
17
+ --button-font-size: font size of the button
18
+ --button-font-weight: font weight of the button
19
+ --button-line-height: line height of the button
20
+ */
21
+ .ds.button {
22
+ display: inline-block;
23
+ cursor: pointer;
24
+
25
+ color: var(--intent-color-text, var(--button-color-text));
26
+ background-color: var(--intent-color, var(--button-color-background));
27
+ border-color: var(--intent-color-border, var(--button-color-border));
28
+ border-style: solid;
29
+ border-width: var(--button-border-width);
30
+ font-size: var(--button-font-size);
31
+ font-weight: var(--button-font-weight);
32
+ line-height: var(--button-line-height);
33
+ margin-block-end: var(--button-margin-bottom);
34
+ margin-inline-end: var(--button-margin-left);
35
+ padding-block: var(--button-padding-vertical);
36
+ padding-inline: var(--button-padding-horizontal);
37
+
38
+ text-align: left;
39
+ text-decoration: none;
40
+
41
+ /* component states */
42
+ &:hover {
43
+ background-color: var(
44
+ --intent-color-hover,
45
+ var(--button-color-background-hover)
46
+ );
47
+ border-color: var(
48
+ --intent-color-border-hover,
49
+ var(--button-color-border-hover)
50
+ );
51
+ }
52
+
53
+ &:active {
54
+ background-color: var(
55
+ --intent-color-active,
56
+ var(--button-color-background-active)
57
+ );
58
+ border-color: var(
59
+ --intent-color-border-active,
60
+ var(--button-color-border-active)
61
+ );
62
+ }
63
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,79 @@
1
+ /* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
2
+
3
+ .ds.chip {
4
+ border-color: var(--intent-color-border, var(--chip-color-border));
5
+ border-style: solid;
6
+ border-radius: var(--chip-border-radius);
7
+ border-width: var(--chip-border-width);
8
+
9
+ color: var(--intent-color-text-tinted, var(--chip-color-text));
10
+ background-color: var(--intent-color-tinted, var(--chip-color-background));
11
+
12
+ display: inline-flex;
13
+ align-items: baseline;
14
+
15
+ user-select: none;
16
+ white-space: nowrap;
17
+
18
+ font-size: var(--chip-font-size);
19
+ font-weight: var(--chip-font-weight);
20
+ line-height: var(--chip-line-height);
21
+
22
+ margin-block-end: var(--chip-margin-bottom);
23
+ margin-inline-end: var(--chip-margin-left);
24
+ padding-block: var(--chip-padding-vertical);
25
+ padding-inline: var(--chip-padding-horizontal);
26
+
27
+ & > .lead {
28
+ font-variant-caps: all-small-caps;
29
+ font-variant-numeric: oldstyle-nums;
30
+ }
31
+
32
+ & > .lead + .value::before {
33
+ content: ": ";
34
+ }
35
+
36
+ & > .lead,
37
+ & > .value {
38
+ display: inline;
39
+ overflow: hidden;
40
+ text-overflow: ellipsis;
41
+ }
42
+
43
+ & > .dismiss {
44
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
45
+ background-color: var(--chip-color-background);
46
+ align-self: center;
47
+ background-size: 0.75rem;
48
+ background-repeat: no-repeat;
49
+ background-position: center;
50
+ display: inline-block;
51
+ cursor: pointer;
52
+ margin-left: var(--spacing-horizontal-xsmall);
53
+ flex: 0 0 auto;
54
+ border-radius: 50%;
55
+ border-color: transparent;
56
+ height: var(--font-size-default);
57
+ width: var(--font-size-default);
58
+ }
59
+
60
+ &:is(button) {
61
+ cursor: pointer;
62
+ }
63
+
64
+ &:hover:not(:has(.dismiss)),
65
+ & > .dismiss:hover {
66
+ background-color: var(
67
+ --intent-color-tinted-hover,
68
+ var(--chip-color-background-hover)
69
+ );
70
+ }
71
+
72
+ &:active:not(:has(.dismiss)),
73
+ & > .dismiss:active {
74
+ background-color: var(
75
+ --intent-color-tinted-active,
76
+ var(--chip-color-background-active)
77
+ );
78
+ }
79
+ }
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import "./Chip.css";
3
+ const componentCssClassName = "ds chip";
4
+ /**
5
+ * description of the Chip component
6
+ * @returns {React.ReactElement} - Rendered Chip
7
+ */
8
+ const Chip = ({ appearance = "neutral", lead, value, onClick, onDismiss, id, className, style, ...props }) => {
9
+ const Container = onClick ? "button" : "span";
10
+ return (_jsxs(Container, { id: id, style: style, className: [componentCssClassName, appearance, className]
11
+ .filter(Boolean)
12
+ .join(" "), onClick: onClick, ...props, children: [lead && _jsx("span", { className: "lead", children: lead }), value && _jsx("span", { className: "value", children: value }), onDismiss && (_jsx("button", { type: "button", className: "dismiss", "aria-label": "Dismiss", onClick: () => onDismiss() }))] }));
13
+ };
14
+ export default Chip;
15
+ //# sourceMappingURL=Chip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":";AAEA,OAAO,YAAY,CAAC;AAGpB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;GAGG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,UAAU,GAAG,SAAS,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,EAAE,EACF,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACM,EAAsB,EAAE;IACtC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAC9C,OAAO,CACL,MAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,UAAU,EAAE,SAAS,CAAC;aACtD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,OAAO,EAAE,OAAO,KACZ,KAAK,aAER,IAAI,IAAI,eAAM,SAAS,EAAC,MAAM,YAAE,IAAI,GAAQ,EAC5C,KAAK,IAAI,eAAM,SAAS,EAAC,OAAO,YAAE,KAAK,GAAQ,EAC/C,SAAS,IAAI,CACZ,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,SAAS,gBACR,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAC1B,CACH,IACS,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -0,0 +1,4 @@
1
+ /* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
2
+ export { default as Chip } from "./Chip.js";
3
+ export * from "./types.js";
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Chip/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Chip/types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export { Button } from "./Button/index.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,mBAAmB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from "./ui/index.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
@@ -0,0 +1,6 @@
1
+ import type Props from "./types.js";
2
+ import "./styles.css";
3
+ /** Buttons are clickable elements used to perform an action. */
4
+ declare const Button: ({ id, className, appearance, label, ...props }: Props) => React.ReactElement;
5
+ export default Button;
6
+ //# sourceMappingURL=Button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,QAAA,MAAM,MAAM,mDAMT,KAAK,KAAG,KAAK,CAAC,YAahB,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as Button } from "./Button.js";
2
+ export type { default as ButtonProps, BaseProps as ButtonBaseProps, } from "./types.js";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EACV,OAAO,IAAI,WAAW,EACtB,SAAS,IAAI,eAAe,GAC7B,MAAM,YAAY,CAAC"}
@@ -0,0 +1,15 @@
1
+ import type React from "react";
2
+ export interface BaseProps {
3
+ id?: string;
4
+ /** Additional CSS classes */
5
+ className?: string;
6
+ /** The visual style of the button */
7
+ appearance?: "neutral" | "base" | "positive" | "negative" | "link";
8
+ /** Button contents */
9
+ label: string;
10
+ /** Optional click handler */
11
+ onClick?: () => void;
12
+ }
13
+ type Props = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
14
+ export default Props;
15
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACnE,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEvE,eAAe,KAAK,CAAC"}
@@ -0,0 +1,10 @@
1
+ import type React from "react";
2
+ import "./Chip.css";
3
+ import type { ChipPropsType } from "./types.js";
4
+ /**
5
+ * description of the Chip component
6
+ * @returns {React.ReactElement} - Rendered Chip
7
+ */
8
+ declare const Chip: ({ appearance, lead, value, onClick, onDismiss, id, className, style, ...props }: ChipPropsType) => React.ReactElement;
9
+ export default Chip;
10
+ //# sourceMappingURL=Chip.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD;;;GAGG;AACH,QAAA,MAAM,IAAI,oFAUP,aAAa,KAAG,KAAK,CAAC,YAwBxB,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as Chip } from "./Chip.js";
2
+ export * from "./types.js";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}
@@ -0,0 +1,27 @@
1
+ import type React from "react";
2
+ /**
3
+ * Props for the `Chip` component.
4
+ */
5
+ export interface ChipProps {
6
+ /**
7
+ * The chip’s appearance.
8
+ * @default "neutral"
9
+ */
10
+ appearance?: "neutral" | "positive" | "negative" | "caution" | "information";
11
+ /** Text shown before the value. */
12
+ lead?: string;
13
+ /** The chip’s value text. */
14
+ value?: string;
15
+ /** Called when the chip is clicked. */
16
+ onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
17
+ /** Called when the chip is dismissed. */
18
+ onDismiss?: () => void;
19
+ /** Unique identifier for the chip. */
20
+ id?: string;
21
+ /** Additional CSS class names. */
22
+ className?: string;
23
+ /** Inline styles for the chip. */
24
+ style?: React.CSSProperties;
25
+ }
26
+ export type ChipPropsType = ChipProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "children">;
27
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAE7E,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE/D,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,GACnC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { Button, type ButtonProps } from "./Button/index.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
package/package.json ADDED
@@ -0,0 +1,73 @@
1
+ {
2
+ "name": "@canonical/react-ds-core",
3
+ "version": "0.5.1-experimental.0",
4
+ "type": "module",
5
+ "module": "dist/esm/index.js",
6
+ "types": "dist/types/index.d.ts",
7
+ "files": ["dist"],
8
+ "author": {
9
+ "email": "webteam@canonical.com",
10
+ "name": "Canonical Webteam"
11
+ },
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "https://github.com/canonical/ds25"
15
+ },
16
+ "license": "LGPL-3.0",
17
+ "bugs": {
18
+ "url": "https://github.com/canonical/ds25/issues"
19
+ },
20
+ "homepage": "https://github.com/canonical/ds25#readme",
21
+ "scripts": {
22
+ "build": "bun run build:package",
23
+ "build:storybook": "storybook build",
24
+ "build:package": "bun run build:package:tsc && bun run build:package:copycss",
25
+ "build:package:copycss": "copyfiles -u 1 src/ui/**/*.css dist/esm",
26
+ "build:package:tsc": "tsc -p tsconfig.build.json",
27
+ "check": "bun run check:biome && bun run check:ts",
28
+ "check:fix": "bun run check:biome:fix && bun run check:ts",
29
+ "check:biome": "biome check src *.json",
30
+ "check:biome:fix": "biome check --write src *.json",
31
+ "check:ts": "tsc --noEmit",
32
+ "storybook": "storybook dev -p 6006 --no-open --host 0.0.0.0",
33
+ "test": "bun run test:vitest",
34
+ "test:watch": "bun run test:vitest:watch",
35
+ "test:vitest": "vitest run",
36
+ "test:vitest:watch": "vitest"
37
+ },
38
+ "dependencies": {
39
+ "@canonical/storybook-addon-baseline-grid": "^0.5.1-experimental.0",
40
+ "@canonical/styles": "^0.5.0-experimental.0",
41
+ "react": "^19.0.0",
42
+ "react-dom": "^19.0.0"
43
+ },
44
+ "devDependencies": {
45
+ "@biomejs/biome": "^1.9.4",
46
+ "@canonical/biome-config": "^0.4.0-experimental.0",
47
+ "@canonical/typescript-config-react": "^0.4.0-experimental.0",
48
+ "@chromatic-com/storybook": "^3.2.2",
49
+ "@storybook/addon-essentials": "^8.4.7",
50
+ "@storybook/addon-interactions": "^8.4.7",
51
+ "@storybook/addon-links": "^8.4.7",
52
+ "@storybook/addon-onboarding": "^8.4.7",
53
+ "@storybook/addon-themes": "^8.4.7",
54
+ "@storybook/blocks": "^8.4.7",
55
+ "@storybook/react": "^8.4.7",
56
+ "@storybook/react-vite": "^8.4.7",
57
+ "@storybook/test": "^8.4.7",
58
+ "@testing-library/jest-dom": "^6.6.3",
59
+ "@testing-library/react": "^16.1.0",
60
+ "@types/node": "^22.10.1",
61
+ "@types/react": "^19.0.1",
62
+ "@types/react-dom": "^19.0.2",
63
+ "@vitejs/plugin-react": "^4.3.4",
64
+ "copyfiles": "^2.4.1",
65
+ "globals": "^15.13.0",
66
+ "jsdom": "^25.0.1",
67
+ "storybook": "^8.4.7",
68
+ "typescript": "^5.7.2",
69
+ "vite": "^6.0.3",
70
+ "vite-tsconfig-paths": "^5.1.4",
71
+ "vitest": "^2.1.8"
72
+ }
73
+ }