@crewlethq/ui 0.50.0 → 0.51.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 (74) hide show
  1. package/README.md +20 -0
  2. package/dist/ArtifactCard/index.js +1 -1
  3. package/dist/{ArtifactCard-SOB63NV5.css → ArtifactCard-F7IVRL3A.css} +3 -0
  4. package/dist/AvatarPicker/index.js +2 -2
  5. package/dist/BrandSample/index.js +3 -3
  6. package/dist/BrandScope/index.js +2 -2
  7. package/dist/Callout/index.js +1 -1
  8. package/dist/{Callout-ZAVG3P66.css → Callout-G3N3IE6M.css} +9 -0
  9. package/dist/ColorChip/ColorChip.d.ts +26 -0
  10. package/dist/ColorChip/index.d.ts +3 -0
  11. package/dist/ColorChip/index.js +3 -0
  12. package/dist/ColorChip-A5XHTH3J.css +46 -0
  13. package/dist/ColorField/ColorField.d.ts +16 -8
  14. package/dist/ColorField/index.js +2 -2
  15. package/dist/ColorSwatch/index.js +2 -2
  16. package/dist/ContrastBadge/ContrastBadge.d.ts +13 -0
  17. package/dist/ContrastBadge/index.d.ts +2 -2
  18. package/dist/ContrastBadge/index.js +2 -2
  19. package/dist/ContrastHelp/ContrastHelp.d.ts +40 -0
  20. package/dist/ContrastHelp/index.d.ts +3 -0
  21. package/dist/ContrastHelp/index.js +12 -0
  22. package/dist/ContrastHelp-MZCAW5WQ.css +43 -0
  23. package/dist/DataView/index.js +2 -2
  24. package/dist/EditingStatus/EditingStatus.d.ts +3 -5
  25. package/dist/EditingStatus/index.js +1 -1
  26. package/dist/{EditingStatus-NNA2CKIL.css → EditingStatus-YU7EGM6Y.css} +22 -7
  27. package/dist/FolderTile/index.js +1 -1
  28. package/dist/{FolderTile-FDT5Y63Z.css → FolderTile-MIUEB7SO.css} +12 -5
  29. package/dist/FollowBanner/index.js +2 -2
  30. package/dist/InlineEditor/index.js +2 -2
  31. package/dist/LinkInterstitial/index.js +2 -2
  32. package/dist/ListInput/ListInput.d.ts +3 -1
  33. package/dist/ListInput/index.js +1 -1
  34. package/dist/{ListInput-WUP2YITQ.css → ListInput-P2ECUQJ2.css} +1 -1
  35. package/dist/LogoSlot/index.js +3 -3
  36. package/dist/RichEditor/index.js +2 -2
  37. package/dist/SandboxedFrame/index.js +2 -2
  38. package/dist/SetupWizard/SetupWizard.d.ts +13 -3
  39. package/dist/SetupWizard/index.js +1 -1
  40. package/dist/{SetupWizard-Y5BTXZX5.css → SetupWizard-GZK5UDKC.css} +27 -1
  41. package/dist/ShareDialog/index.js +2 -2
  42. package/dist/{chunk-BEAXJARF.js → chunk-2UFUP2ZH.js} +2 -2
  43. package/dist/{chunk-4A4QG6UC.js → chunk-34C7NYIQ.js} +1 -1
  44. package/dist/chunk-6GTTRJWJ.js +24 -0
  45. package/dist/{chunk-QGRA2RHC.js → chunk-6RMZH7P7.js} +1 -1
  46. package/dist/{chunk-W6FOEBIL.js → chunk-73WHPLWQ.js} +24 -15
  47. package/dist/chunk-7W3LYIOC.js +27 -0
  48. package/dist/{chunk-OEEYL2CM.js → chunk-AVMQMY66.js} +2 -2
  49. package/dist/{chunk-SZZRIHGT.js → chunk-BPCY7ZID.js} +1 -1
  50. package/dist/chunk-DTSZUH6H.js +124 -0
  51. package/dist/chunk-EJWPYEG4.js +38 -0
  52. package/dist/{chunk-M4QM477B.js → chunk-FXHWOXGD.js} +1 -1
  53. package/dist/{chunk-JWNYI7UD.js → chunk-KHP7TJF7.js} +1 -1
  54. package/dist/chunk-KIRQZG3G.js +53 -0
  55. package/dist/{chunk-JFDIMO3A.js → chunk-PGYIDNGG.js} +1 -1
  56. package/dist/{chunk-WLSEAIVC.js → chunk-RHPBTE3F.js} +1 -1
  57. package/dist/{chunk-Q44X36QC.js → chunk-S63QOMXC.js} +1 -1
  58. package/dist/{chunk-GP4YWZFO.js → chunk-U3LNU4B2.js} +1 -1
  59. package/dist/{chunk-PGR2PKH6.js → chunk-UUTEWGO6.js} +10 -10
  60. package/dist/{chunk-356JNSER.js → chunk-WQQ5T5SA.js} +1 -1
  61. package/dist/{chunk-NSSOWQCJ.js → chunk-WW7TU6HE.js} +15 -12
  62. package/dist/{chunk-P3OIM6OC.js → chunk-X7WEE3EK.js} +1 -1
  63. package/dist/generated/index.d.ts +2 -0
  64. package/dist/generated/index.js +75 -73
  65. package/dist/index.js +75 -73
  66. package/dist/styles.css +175 -20
  67. package/dist/utils/hexColour.d.ts +13 -0
  68. package/package.json +3 -3
  69. package/dist/chunk-KKHCUHWS.js +0 -107
  70. package/dist/chunk-MMOXWAUG.js +0 -42
  71. package/dist/chunk-UZMNR366.js +0 -9
  72. package/dist/{chunk-3QSKDZR5.js → chunk-EW2N4FOD.js} +1 -1
  73. package/dist/{chunk-HNQ2EIMR.js → chunk-P432I5DQ.js} +0 -0
  74. package/dist/{chunk-NAWUXCBC.js → chunk-WX6IJJ4U.js} +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crewlethq/ui",
3
- "version": "0.50.0",
3
+ "version": "0.51.0",
4
4
  "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -42,8 +42,8 @@
42
42
  "clean": "rm -rf dist src/generated"
43
43
  },
44
44
  "dependencies": {
45
- "@crewlethq/icons": "0.50.0",
46
- "@crewlethq/tokens": "0.50.0",
45
+ "@crewlethq/icons": "0.51.0",
46
+ "@crewlethq/tokens": "0.51.0",
47
47
  "prosemirror-commands": "1.7.2",
48
48
  "prosemirror-gapcursor": "1.4.1",
49
49
  "prosemirror-history": "1.5.1",
@@ -1,107 +0,0 @@
1
- import { Stepper } from './chunk-LDGQIDIZ.js';
2
- import { PageHeader } from './chunk-DKB73KZI.js';
3
- import { Disclosure } from './chunk-OGXHZHRX.js';
4
- import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
5
- import { useMediaMatch } from './chunk-RTPQDNW3.js';
6
- import { cx } from './chunk-ODEQTPFM.js';
7
- import './SetupWizard-Y5BTXZX5.css';
8
- import { useId, useRef, useEffect, createElement } from 'react';
9
- import { breakpoint } from '@crewlethq/tokens';
10
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
11
-
12
- var LABELS = {
13
- progress: (position, total) => `Step ${position} of ${total}`,
14
- asideToggle: "Preview"
15
- };
16
- var PHONE = `(width < ${breakpoint.phone})`;
17
- function SetupWizard({
18
- title,
19
- headingLevel,
20
- trail,
21
- status,
22
- actions,
23
- steps,
24
- current,
25
- reached,
26
- onSelect,
27
- stepsLabel,
28
- heading,
29
- lead,
30
- children,
31
- aside,
32
- asideLabel,
33
- footer,
34
- labels,
35
- className,
36
- ...rest
37
- }) {
38
- const text = { ...LABELS, ...labels };
39
- const phone = useMediaMatch(PHONE);
40
- const context = useHeadingLevel();
41
- const titleLevel = headingLevel ?? context;
42
- const stepLevel = nextHeadingLevel(titleLevel);
43
- const contentLevel = nextHeadingLevel(stepLevel);
44
- const headingId = useId();
45
- const headingRef = useRef(null);
46
- const shown = useRef(current);
47
- useEffect(() => {
48
- if (shown.current === current) return;
49
- shown.current = current;
50
- headingRef.current?.focus();
51
- }, [current]);
52
- if (aside !== void 0 && aside !== null && !asideLabel) {
53
- throw new TypeError("SetupWizard needs an asideLabel with an aside: it names the aside\u2019s landmark");
54
- }
55
- const position = steps.findIndex((step2) => step2.id === current);
56
- const step = steps[position];
57
- const stepper = /* @__PURE__ */ jsx(
58
- Stepper,
59
- {
60
- label: stepsLabel,
61
- steps,
62
- current,
63
- reached,
64
- onSelect,
65
- tone: "brand",
66
- orientation: phone ? "horizontal" : "vertical"
67
- }
68
- );
69
- const asideBlock = aside === void 0 || aside === null ? null : /* @__PURE__ */ jsx("aside", { className: "crewlet-setup-wizard__aside", "aria-label": asideLabel, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: contentLevel, children: aside }) });
70
- return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-setup-wizard", className), children: /* @__PURE__ */ jsxs("div", { className: "crewlet-setup-wizard__frame", children: [
71
- /* @__PURE__ */ jsxs("div", { className: "crewlet-setup-wizard__head", children: [
72
- trail ? /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__trail", children: trail }) : null,
73
- /* @__PURE__ */ jsx(
74
- PageHeader,
75
- {
76
- title,
77
- headingLevel: titleLevel,
78
- actions: status || actions ? /* @__PURE__ */ jsxs(Fragment, { children: [
79
- status ? /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__status", children: status }) : null,
80
- actions
81
- ] }) : void 0
82
- }
83
- )
84
- ] }),
85
- /* @__PURE__ */ jsxs("nav", { className: "crewlet-setup-wizard__rail", "aria-label": stepsLabel, children: [
86
- phone && step ? /* @__PURE__ */ jsxs("p", { className: "crewlet-setup-wizard__position", children: [
87
- text.progress(position + 1, steps.length),
88
- /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
89
- /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__position-step", children: step.label })
90
- ] }) : null,
91
- stepper
92
- ] }),
93
- /* @__PURE__ */ jsxs("section", { className: "crewlet-setup-wizard__content", "aria-labelledby": headingId, children: [
94
- createElement(
95
- headingTag(stepLevel),
96
- { id: headingId, ref: headingRef, tabIndex: -1, className: "crewlet-setup-wizard__heading" },
97
- heading
98
- ),
99
- lead ? /* @__PURE__ */ jsx("p", { className: "crewlet-setup-wizard__lead", children: lead }) : null,
100
- /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__body", children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: contentLevel, children }) })
101
- ] }),
102
- asideBlock === null ? null : phone ? /* @__PURE__ */ jsx(Disclosure, { className: "crewlet-setup-wizard__preview", title: text.asideToggle, headingLevel: stepLevel, children: asideBlock }) : asideBlock,
103
- /* @__PURE__ */ jsx("footer", { className: "crewlet-setup-wizard__footer", children: footer })
104
- ] }) });
105
- }
106
-
107
- export { SetupWizard };
@@ -1,42 +0,0 @@
1
- import { useNow, formatRelative } from './chunk-3CZ7XAVY.js';
2
- import { VisuallyHidden } from './chunk-BZFWDIV6.js';
3
- import { cx } from './chunk-ODEQTPFM.js';
4
- import './EditingStatus-NNA2CKIL.css';
5
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
6
-
7
- var LABELS = {
8
- editing: "Editing",
9
- unsaved: "Unsaved changes",
10
- saving: "Saving",
11
- saved: (ago) => `Saved ${ago}`,
12
- savedSpoken: "Saved"
13
- };
14
- function EditingStatus({ dirty, saving = false, savedAt, labels, className }) {
15
- const text = { ...LABELS, ...labels };
16
- const state = saving ? text.saving : dirty ? text.unsaved : savedAt !== void 0 && savedAt !== null ? /* @__PURE__ */ jsx(SavedAgo, { at: savedAt, labels: text }) : null;
17
- return /* @__PURE__ */ jsxs(
18
- "span",
19
- {
20
- role: "status",
21
- "aria-live": "polite",
22
- className: cx("crewlet-editing-status", dirty && "crewlet-editing-status--dirty", className),
23
- children: [
24
- /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__dot", "aria-hidden": "true" }),
25
- /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__label", children: text.editing }),
26
- state && /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }),
27
- state && /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__state", children: state })
28
- ]
29
- }
30
- );
31
- }
32
- function SavedAgo({ at, labels }) {
33
- const now = useNow();
34
- const ago = formatRelative(at, now);
35
- if (ago === null) return null;
36
- return /* @__PURE__ */ jsxs(Fragment, { children: [
37
- /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: labels.saved(ago) }),
38
- /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.savedSpoken })
39
- ] });
40
- }
41
-
42
- export { EditingStatus };
@@ -1,9 +0,0 @@
1
- import { parseHex } from '@crewlethq/tokens';
2
-
3
- // src/utils/hexColour.ts
4
- function normalizeHex(value) {
5
- if (typeof value !== "string") return null;
6
- return parseHex(value) === null ? null : value.trim().toLowerCase();
7
- }
8
-
9
- export { normalizeHex };
@@ -1,7 +1,7 @@
1
1
  import { HuePicker } from './chunk-34RMTXDZ.js';
2
2
  import { Popover } from './chunk-KHJIEPZV.js';
3
- import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
4
3
  import { CharacterPicker } from './chunk-SNQRGH4A.js';
4
+ import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
5
5
  import { Avatar } from './chunk-PZKHBB7D.js';
6
6
  import { cx } from './chunk-ODEQTPFM.js';
7
7
  import './AvatarPicker-PREY36MG.css';
File without changes
@@ -1,6 +1,6 @@
1
1
  import { PageHeader } from './chunk-DKB73KZI.js';
2
- import { DateTimePicker } from './chunk-ZFM5L7M4.js';
3
2
  import { DataTable } from './chunk-WQ7S7CKZ.js';
3
+ import { DateTimePicker } from './chunk-ZFM5L7M4.js';
4
4
  import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
5
5
  import { Toolbar } from './chunk-NR4CPM4T.js';
6
6
  import { Popover } from './chunk-KHJIEPZV.js';