@stainless-api/ui-primitives 0.1.0-beta.3 → 0.1.0-beta.31

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 (43) hide show
  1. package/dist/Accordion-CL3Oarbz.js +31 -0
  2. package/dist/Accordion-X9MBt29l.d.ts +26 -0
  3. package/dist/Button-DFAg4M-E.js +51 -0
  4. package/dist/Button-DMtVJEuK.d.ts +38 -0
  5. package/dist/Callout-BGkXD7D2.js +28 -0
  6. package/dist/Callout-DlwbfFHm.d.ts +18 -0
  7. package/dist/components/Accordion.d.ts +2 -0
  8. package/dist/components/Accordion.js +3 -0
  9. package/dist/components/Button.d.ts +2 -0
  10. package/dist/components/Button.js +3 -0
  11. package/dist/components/Callout.d.ts +2 -0
  12. package/dist/components/Callout.js +3 -0
  13. package/dist/index.d.ts +170 -0
  14. package/dist/index.js +180 -0
  15. package/dist/scripts/index.d.ts +23 -0
  16. package/dist/scripts/index.js +161 -0
  17. package/dist/styles/starlight-compat.css +151 -0
  18. package/dist/styles/starlight-compat.js +0 -0
  19. package/dist/styles.css +1041 -0
  20. package/dist/styles.js +0 -0
  21. package/package.json +38 -24
  22. package/.env +0 -1
  23. package/CHANGELOG.md +0 -21
  24. package/eslint.config.js +0 -2
  25. package/src/components/Button.tsx +0 -94
  26. package/src/components/Callout.tsx +0 -31
  27. package/src/components/DetailsGroup.tsx +0 -17
  28. package/src/components/DropdownButton.tsx +0 -98
  29. package/src/components/button.css +0 -157
  30. package/src/components/callout.css +0 -72
  31. package/src/components/details.css +0 -126
  32. package/src/components/dropdown-button.css +0 -162
  33. package/src/index.ts +0 -4
  34. package/src/scripts/dropdown-button.ts +0 -55
  35. package/src/scripts/index.ts +0 -1
  36. package/src/styles/layout.css +0 -11
  37. package/src/styles/scales.css +0 -129
  38. package/src/styles/starlight-compat.css +0 -125
  39. package/src/styles/swatches.css +0 -87
  40. package/src/styles/theme.css +0 -49
  41. package/src/styles/typography.css +0 -199
  42. package/src/styles.css +0 -11
  43. package/tsconfig.json +0 -15
package/dist/scripts/index.js ADDED
@@ -0,0 +1,161 @@
1
+ //#region src/scripts/dropdown.ts
2
+ function initDropdown({ root, onSelect, initialValue }) {
3
+ if (!root) {
4
+ console.error("Dropdown root element not found");
5
+ return;
6
+ }
7
+ const trigger = root.querySelector("[data-part=\"trigger\"]");
8
+ const menu = root.querySelector("[data-part=\"menu\"]");
9
+ if (!trigger) {
10
+ console.error("Dropdown trigger not found");
11
+ return;
12
+ }
13
+ if (!menu) {
14
+ console.error("Dropdown menu not found");
15
+ return;
16
+ }
17
+ const selectedSlot = trigger.querySelector("[data-part=\"trigger-selected\"]");
18
+ const items = Array.from(menu.querySelectorAll("[data-part=\"item\"]"));
19
+ function open() {
20
+ if (!trigger || !menu || !root) return;
21
+ trigger.setAttribute("aria-expanded", "true");
22
+ menu.dataset.state = "open";
23
+ menu.removeAttribute("aria-hidden");
24
+ const triggerRect = trigger.getBoundingClientRect();
25
+ const menuHeight = menu.offsetHeight;
26
+ const spaceBelow = window.innerHeight - triggerRect.bottom;
27
+ const spaceAbove = triggerRect.top;
28
+ menu.classList.remove("stl-ui-dropdown-menu--above", "stl-ui-dropdown-menu--below");
29
+ if (spaceBelow < menuHeight && spaceAbove > spaceBelow) menu.classList.add("stl-ui-dropdown-menu--above");
30
+ else menu.classList.add("stl-ui-dropdown-menu--below");
31
+ }
32
+ function close() {
33
+ if (!trigger || !menu || !root) return;
34
+ trigger.setAttribute("aria-expanded", "false");
35
+ menu.dataset.state = "closed";
36
+ menu.setAttribute("aria-hidden", "true");
37
+ }
38
+ function renderSelectedFromItem(item) {
39
+ if (!selectedSlot) return;
40
+ const tmpl = item.querySelector("template[data-part=\"selected-template\"]");
41
+ if (!tmpl) {
42
+ console.error("Dropdown item template not found");
43
+ return;
44
+ }
45
+ selectedSlot.innerHTML = "";
46
+ selectedSlot.appendChild(tmpl.content.cloneNode(true));
47
+ selectedSlot.removeAttribute("data-placeholder");
48
+ }
49
+ function selectItem(item) {
50
+ if (!trigger) {
51
+ console.error("Dropdown trigger not found");
52
+ return;
53
+ }
54
+ items.forEach((i) => i.setAttribute("aria-selected", String(i === item)));
55
+ trigger.dataset.value = item.getAttribute("data-value") || "";
56
+ renderSelectedFromItem(item);
57
+ }
58
+ function handleItemSelection(e) {
59
+ const item = e.target.closest("[data-part=\"item\"]");
60
+ if (!item) {
61
+ console.error("Dropdown item not found");
62
+ return;
63
+ }
64
+ if (!trigger) {
65
+ console.error("Dropdown trigger not found");
66
+ return;
67
+ }
68
+ selectItem(item);
69
+ onSelect?.(item.getAttribute("data-value") || "");
70
+ close();
71
+ trigger.focus();
72
+ }
73
+ function handleTriggerClick() {
74
+ if (!trigger) return false;
75
+ if (trigger.getAttribute("aria-expanded") === "true") {
76
+ close();
77
+ return false;
78
+ } else {
79
+ open();
80
+ return true;
81
+ }
82
+ }
83
+ const initial = (initialValue ? items.find((i) => i.getAttribute("data-value") === initialValue) : items.find((i) => i.getAttribute("aria-selected") === "true")) ?? items[0];
84
+ if (initial) selectItem(initial);
85
+ trigger.addEventListener("click", () => {
86
+ handleTriggerClick();
87
+ });
88
+ trigger.addEventListener("keydown", (e) => {
89
+ if (e.key !== "Enter" && e.key !== " ") return;
90
+ e.preventDefault();
91
+ if (handleTriggerClick()) items[0]?.focus();
92
+ });
93
+ menu.addEventListener("click", (e) => {
94
+ handleItemSelection(e);
95
+ });
96
+ document.addEventListener("keydown", (e) => {
97
+ if (!(trigger.getAttribute("aria-expanded") === "true")) return;
98
+ if (e.key === "Escape") {
99
+ close();
100
+ trigger.focus();
101
+ return;
102
+ }
103
+ if (e.key === "ArrowDown") {
104
+ e.preventDefault();
105
+ const activeElement = document.activeElement;
106
+ if (activeElement === trigger) {
107
+ items[0]?.focus();
108
+ return;
109
+ }
110
+ let nextSibling = activeElement?.nextElementSibling;
111
+ while (nextSibling && nextSibling.tagName.toLowerCase() === "hr") nextSibling = nextSibling.nextElementSibling;
112
+ if (nextSibling instanceof HTMLElement && items.includes(nextSibling)) nextSibling.focus();
113
+ return;
114
+ }
115
+ if (e.key === "ArrowUp") {
116
+ e.preventDefault();
117
+ const activeElement = document.activeElement;
118
+ if (activeElement === trigger) {
119
+ items[items.length - 1]?.focus();
120
+ return;
121
+ }
122
+ let prevSibling = activeElement?.previousElementSibling;
123
+ while (prevSibling && prevSibling.tagName.toLowerCase() === "hr") prevSibling = prevSibling.previousElementSibling;
124
+ if (prevSibling instanceof HTMLElement && items.includes(prevSibling)) prevSibling.focus();
125
+ return;
126
+ }
127
+ });
128
+ document.addEventListener("click", (e) => {
129
+ if (!root.contains(e.target)) close();
130
+ });
131
+ }
132
+
133
+ //#endregion
134
+ //#region src/scripts/dropdown-button.ts
135
+ function initDropdownButton({ dropdown, onSelect, onPrimaryAction }) {
136
+ const trigger = dropdown.querySelector("[data-part=\"trigger\"]");
137
+ const menu = dropdown.querySelector("[data-part=\"menu\"]");
138
+ const primaryAction = dropdown.querySelector("[data-part=\"primary-action\"]");
139
+ if (!trigger) {
140
+ console.error("Dropdown trigger not found");
141
+ return;
142
+ }
143
+ if (!menu) {
144
+ console.error("Dropdown menu not found");
145
+ return;
146
+ }
147
+ if (!primaryAction) {
148
+ console.error("Dropdown primary action not found");
149
+ return;
150
+ }
151
+ primaryAction.addEventListener("click", () => {
152
+ onPrimaryAction(primaryAction);
153
+ });
154
+ initDropdown({
155
+ root: dropdown,
156
+ onSelect
157
+ });
158
+ }
159
+
160
+ //#endregion
161
+ export { initDropdown, initDropdownButton };
package/dist/styles/starlight-compat.css ADDED
@@ -0,0 +1,151 @@
1
+ :root {
2
+ /* Layout and Typography */
3
+ --sl-font: var(--stl-typography-font);
4
+ --sl-font-mono: var(--stl-typography-font-mono);
5
+ --sl-line-height: var(--stl-typography-line-height);
6
+
7
+ /* Font sizes */
8
+ --sl-text-h1: var(--stl-typography-text-h1);
9
+ --sl-text-h2: var(--stl-typography-text-h2);
10
+ --sl-text-h3: var(--stl-typography-text-h3);
11
+ --sl-text-h4: var(--stl-typography-text-h4);
12
+ --sl-text-h5: var(--stl-typography-text-h5);
13
+ --sl-text-body: var(--stl-typography-scale-base);
14
+ --sl-text-sm: var(--stl-typography-scale-sm);
15
+ --sl-text-body-sm: var(--stl-typography-scale-sm);
16
+ --sl-text-code: var(--stl-typography-scale-sm);
17
+ --sl-text-code-sm: var(--stl-typography-scale-xs);
18
+
19
+ /* Colors */
20
+ --sl-color-bg: var(--stl-color-background);
21
+ --sl-color-bg-sidebar: var(--stl-color-background);
22
+ --sl-color-bg-ui: var(--stl-color-ui-background);
23
+ --sl-color-bg-nav: var(--stl-color-background);
24
+ --sl-color-bg-inline-code: var(--stl-color-muted-background);
25
+ --sl-color-bg-accent: var(--stl-color-accent-inverse-background);
26
+
27
+ --sl-color-text: var(--stl-color-foreground);
28
+ --sl-color-text-secondary: var(--stl-color-foreground-reduced);
29
+ --sl-color-text-tertiary: var(--stl-color-foreground-muted);
30
+ --sl-color-text-accent: var(--stl-color-accent-foreground);
31
+ --sl-color-hairline: var(--stl-color-border);
32
+ --sl-color-hairline-light: var(--stl-color-border-faint);
33
+ --sl-color-hairline-shade: var(--stl-color-border-strong);
34
+ --sl-color-text-invert: var(--stl-color-inverse-foreground);
35
+
36
+ /* Accent colors */
37
+
38
+ --sl-color-accent-low: var(--stl-color-accent-muted-background);
39
+ --sl-color-accent: var(--stl-color-accent);
40
+ --sl-color-accent-high: var(--stl-color-accent);
41
+
42
+ /* Primary colors */
43
+ --sl-color-red-low: var(--stl-color-red-muted-background);
44
+ --sl-color-red: var(--stl-color-red);
45
+ --sl-color-red-high: var(--stl-color-red);
46
+
47
+ --sl-color-green-low: var(--stl-color-green-muted-background);
48
+ --sl-color-green: var(--stl-color-green);
49
+ --sl-color-green-high: var(--stl-color-green);
50
+
51
+ --sl-color-blue-low: var(--stl-color-blue-muted-background);
52
+ --sl-color-blue: var(--stl-color-blue);
53
+ --sl-color-blue-high: var(--stl-color-blue);
54
+
55
+ --sl-color-orange-low: var(--stl-color-orange-muted-background);
56
+ --sl-color-orange: var(--stl-color-orange);
57
+ --sl-color-orange-high: var(--stl-color-orange);
58
+
59
+ --sl-color-purple-low: var(--stl-color-purple-muted-background);
60
+ --sl-color-purple: var(--stl-color-purple);
61
+ --sl-color-purple-high: var(--stl-color-purple);
62
+
63
+ --sl-color-teal-low: var(--stl-color-cyan-muted-background);
64
+ --sl-color-teal: var(--stl-color-cyan);
65
+ --sl-color-teal-high: var(--stl-color-cyan);
66
+
67
+ --sl-color-magenta-low: var(--stl-color-pink-muted-background);
68
+ --sl-color-magenta: var(--stl-color-pink);
69
+ --sl-color-magenta-high: var(--stl-color-pink);
70
+
71
+ --sl-color-yellow-low: var(--stl-color-yellow-muted-background);
72
+ --sl-color-yellow: var(--stl-color-yellow);
73
+ --sl-color-yellow-high: var(--stl-color-yellow);
74
+ }
75
+
76
+ /* Starlight Compatibility */
77
+ .stl-ui-prose {
78
+ /* TODO: Disable starlight headingLinks and replace with our own */
79
+ /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
80
+ .sl-heading-wrapper.level-h1 {
81
+ font-size: var(--stl-typography-text-h1);
82
+ letter-spacing: -0.03em;
83
+ margin-top: 64px;
84
+ line-height: var(--stl-typography-line-height-headings);
85
+ }
86
+ .sl-heading-wrapper.level-h2 {
87
+ font-size: var(--stl-typography-text-h2);
88
+ letter-spacing: -0.03em;
89
+ margin-top: 48px;
90
+ line-height: var(--stl-typography-line-height-headings);
91
+ }
92
+
93
+ .sl-heading-wrapper.level-h3 {
94
+ font-size: var(--stl-typography-text-h3);
95
+ letter-spacing: -0.02em;
96
+ margin-top: 40px;
97
+ line-height: var(--stl-typography-line-height-headings);
98
+ }
99
+ .sl-heading-wrapper.level-h4 {
100
+ font-size: var(--stl-typography-text-h4);
101
+ letter-spacing: -0.02em;
102
+ margin-top: 32px;
103
+ line-height: var(--stl-typography-line-height-headings);
104
+ }
105
+ .sl-heading-wrapper.level-h5 {
106
+ font-size: var(--stl-typography-text-h5);
107
+ letter-spacing: -0.02em;
108
+ margin-top: 24px;
109
+ line-height: var(--stl-typography-line-height-headings);
110
+ }
111
+ .sl-heading-wrapper {
112
+ --sl-anchor-icon-size: 0.8em;
113
+ }
114
+ /* TODO: replace with an icon that matches Stainless branding */
115
+ .sl-anchor-link svg {
116
+ margin-top: 0;
117
+ }
118
+ }
119
+
120
+ /* TODO: remove these */
121
+ .stl-ui-prose starlight-tabs {
122
+ a {
123
+ text-decoration: none;
124
+ line-height: unset;
125
+ color: var(--stl-color-foreground);
126
+
127
+ &[aria-selected='true'] {
128
+ color: var(--stl-color-accent-foreground);
129
+ font-weight: normal;
130
+ }
131
+ }
132
+
133
+ ol,
134
+ ul {
135
+ &:not(.stl-ui-not-prose *) {
136
+ padding-left: 0;
137
+ }
138
+ }
139
+
140
+ li:not(.stl-ui-not-prose *) {
141
+ margin-bottom: -2px;
142
+ &:not(:last-child) {
143
+ margin-bottom: -2px;
144
+ }
145
+
146
+ a:first-child {
147
+ display: flex;
148
+ }
149
+ }
150
+ }
151
+
package/dist/styles/starlight-compat.js ADDED
File without changes