@stainless-api/ui-primitives 0.1.0-beta.35 → 0.1.0-beta.37

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 (8) hide show
  1. package/dist/{Button-D4DkAJY5.d.ts → Button-Db7cVanm.d.ts} +4 -4
  2. package/dist/{Callout-Desqa2PM.d.ts → Callout-DlwbfFHm.d.ts} +2 -2
  3. package/dist/components/Button.d.ts +1 -1
  4. package/dist/components/Callout.d.ts +1 -1
  5. package/dist/index.d.ts +2 -2
  6. package/dist/styles/starlight-compat.css +5 -8
  7. package/dist/styles.css +44 -20
  8. package/package.json +7 -7
package/dist/{Button-D4DkAJY5.d.ts → Button-Db7cVanm.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import * as react_jsx_runtime3 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime2 from "react/jsx-runtime";
3
3
  import { LucideIcon } from "lucide-react";
4
4
 
5
5
  //#region src/components/Button.d.ts
@@ -21,17 +21,17 @@ type ButtonBranch = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
21
21
  href?: never;
22
22
  };
23
23
  type ButtonProps = AnchorBranch | ButtonBranch;
24
- declare function Button(props: ButtonProps): react_jsx_runtime3.JSX.Element;
24
+ declare function Button(props: ButtonProps): react_jsx_runtime2.JSX.Element;
25
25
  declare namespace Button {
26
26
  var Label: ({
27
27
  className,
28
28
  ...rest
29
- }: LabelProps) => react_jsx_runtime3.JSX.Element;
29
+ }: LabelProps) => react_jsx_runtime2.JSX.Element;
30
30
  var Icon: ({
31
31
  className,
32
32
  icon: Icon,
33
33
  size
34
- }: IconProps) => react_jsx_runtime3.JSX.Element;
34
+ }: IconProps) => react_jsx_runtime2.JSX.Element;
35
35
  }
36
36
  type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
37
37
  type IconProps = {
package/dist/{Callout-Desqa2PM.d.ts → Callout-DlwbfFHm.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import * as react_jsx_runtime0 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime5 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/components/Callout.d.ts
5
5
  type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
@@ -13,6 +13,6 @@ declare function Callout({
13
13
  className,
14
14
  children,
15
15
  ...props
16
- }: CalloutProps): react_jsx_runtime0.JSX.Element;
16
+ }: CalloutProps): react_jsx_runtime5.JSX.Element;
17
17
  //#endregion
18
18
  export { CalloutProps as n, CalloutVariant as r, Callout as t };
package/dist/components/Button.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-D4DkAJY5.js";
1
+ import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-Db7cVanm.js";
2
2
  export { Button, ButtonProps, ButtonVariant };
package/dist/components/Callout.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-Desqa2PM.js";
1
+ import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-DlwbfFHm.js";
2
2
  export { Callout, CalloutProps, CalloutVariant };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { n as AccordionProps, t as Accordion } from "./Accordion-Cj5GURin.js";
2
- import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-D4DkAJY5.js";
3
- import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-Desqa2PM.js";
2
+ import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-Db7cVanm.js";
3
+ import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-DlwbfFHm.js";
4
4
  import * as react3 from "react";
5
5
  import { ComponentProps } from "react";
6
6
  import * as react_jsx_runtime21 from "react/jsx-runtime";
package/dist/styles/starlight-compat.css CHANGED
@@ -77,39 +77,36 @@
77
77
  .stl-ui-prose {
78
78
  /* TODO: Disable starlight headingLinks and replace with our own */
79
79
  /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
80
+ .sl-heading-wrapper {
81
+ line-height: var(--stl-typography-line-height-heading);
82
+ font-family: var(--stl-typography-font-heading);
83
+ --sl-anchor-icon-size: 0.8em;
84
+ }
80
85
  .sl-heading-wrapper.level-h1 {
81
86
  font-size: var(--stl-typography-text-h1);
82
87
  letter-spacing: -0.03em;
83
88
  margin-top: 64px;
84
- line-height: var(--stl-typography-line-height-headings);
85
89
  }
86
90
  .sl-heading-wrapper.level-h2 {
87
91
  font-size: var(--stl-typography-text-h2);
88
92
  letter-spacing: -0.03em;
89
93
  margin-top: 48px;
90
- line-height: var(--stl-typography-line-height-headings);
91
94
  }
92
95
 
93
96
  .sl-heading-wrapper.level-h3 {
94
97
  font-size: var(--stl-typography-text-h3);
95
98
  letter-spacing: -0.02em;
96
99
  margin-top: 40px;
97
- line-height: var(--stl-typography-line-height-headings);
98
100
  }
99
101
  .sl-heading-wrapper.level-h4 {
100
102
  font-size: var(--stl-typography-text-h4);
101
103
  letter-spacing: -0.02em;
102
104
  margin-top: 32px;
103
- line-height: var(--stl-typography-line-height-headings);
104
105
  }
105
106
  .sl-heading-wrapper.level-h5 {
106
107
  font-size: var(--stl-typography-text-h5);
107
108
  letter-spacing: -0.02em;
108
109
  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
110
  }
114
111
  /* TODO: replace with an icon that matches Stainless branding */
115
112
  .sl-anchor-link svg {
package/dist/styles.css CHANGED
@@ -3,21 +3,22 @@
3
3
  :root {
4
4
  --stl-typography-font: 'Geist', system-ui, sans-serif;
5
5
  --stl-typography-font-mono: 'Geist Mono', ui-monospace, monospace;
6
+ --stl-typography-font-heading: var(--stl-typography-font);
7
+
6
8
  --stl-typography-line-height: 1.5;
7
- --stl-typography-line-height-headings: 1.2;
9
+ --stl-typography-line-height-heading: 1.2;
8
10
 
9
11
  --stl-typography-text-body: var(--stl-typography-scale-base);
10
12
  --stl-typography-text-body-sm: var(--stl-typography-scale-sm);
11
13
  --stl-typography-text-body-xs: var(--stl-typography-scale-xs);
12
14
 
13
- --stl-typography-text-code: max(0.875em, var(--stl-typography-scale-sm));
14
-
15
- --stl-typography-text-h1: var(--stl-typography-scale-5xl);
16
- --stl-typography-text-h2: var(--stl-typography-scale-4xl);
17
- --stl-typography-text-h3: var(--stl-typography-scale-3xl);
18
- --stl-typography-text-h4: var(--stl-typography-scale-2xl);
19
- --stl-typography-text-h5: var(--stl-typography-scale-xl);
15
+ --stl-typography-text-code: max(0.875em, var(--stl-typography-scale-xs));
20
16
 
17
+ --stl-typography-text-h1: calc(var(--stl-typography-scale-5xl) / var(--stl-typography-scale-base) * 1em);
18
+ --stl-typography-text-h2: calc(var(--stl-typography-scale-4xl) / var(--stl-typography-scale-base) * 1em);
19
+ --stl-typography-text-h3: calc(var(--stl-typography-scale-3xl) / var(--stl-typography-scale-base) * 1em);
20
+ --stl-typography-text-h4: calc(var(--stl-typography-scale-2xl) / var(--stl-typography-scale-base) * 1em);
21
+ --stl-typography-text-h5: calc(var(--stl-typography-scale-xl) / var(--stl-typography-scale-base) * 1em);
21
22
  --stl-typography-scale-xs: 12px;
22
23
  --stl-typography-scale-sm: 14px;
23
24
  --stl-typography-scale-base: 16px;
@@ -63,6 +64,11 @@ body {
63
64
  color: initial;
64
65
  }
65
66
 
67
+ &.small {
68
+ font-size: var(--stl-typography-scale-sm);
69
+ letter-spacing: normal;
70
+ }
71
+
66
72
  :where(strong:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose strong) {
67
73
  color: var(--stl-color-foreground);
68
74
  }
@@ -79,42 +85,43 @@ body {
79
85
  :where(h1, h2, h3, h4, h5, h6):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
80
86
  color: var(--stl-color-foreground);
81
87
  font-weight: 500;
82
- line-height: var(--stl-typography-line-height-headings);
88
+ line-height: var(--stl-typography-line-height-heading);
89
+ font-family: var(--stl-typography-font-heading);
83
90
  }
84
91
 
85
92
  :where(h1:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h1) {
86
93
  /* Heading 1/Medium */
87
94
  font-size: var(--stl-typography-text-h1);
88
95
  letter-spacing: -0.03em;
89
- margin-top: 64px;
96
+ margin-top: 1.5em;
90
97
  }
91
98
 
92
99
  :where(h2:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h2) {
93
100
  /* Heading 2/Medium */
94
101
  font-size: var(--stl-typography-text-h2);
95
102
  letter-spacing: -0.03em;
96
- margin-top: 48px;
103
+ margin-top: 1.35em;
97
104
  }
98
105
 
99
106
  :where(h3:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h3) {
100
107
  /* Heading 3/Medium */
101
108
  font-size: var(--stl-typography-text-h3);
102
109
  letter-spacing: -0.02em;
103
- margin-top: 40px;
110
+ margin-top: 1.35em;
104
111
  }
105
112
 
106
113
  :where(h4:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h4) {
107
114
  /* Heading 4/Medium */
108
115
  font-size: var(--stl-typography-text-h4);
109
116
  letter-spacing: -0.02em;
110
- margin-top: 32px;
117
+ margin-top: 1.35em;
111
118
  }
112
119
 
113
120
  :where(h5:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h5) {
114
121
  /* Heading 5/Medium */
115
122
  font-size: var(--stl-typography-text-h5);
116
123
  letter-spacing: -0.02em;
117
- margin-top: 24px;
124
+ margin-top: 1.2em;
118
125
  }
119
126
 
120
127
  :where(li:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose li) {
@@ -123,15 +130,34 @@ body {
123
130
  }
124
131
  }
125
132
 
133
+ &.smaller-headings {
134
+ --stl-typography-text-h1: calc(var(--stl-typography-scale-3xl) / var(--stl-typography-scale-base) * 1em);
135
+ --stl-typography-text-h2: calc(var(--stl-typography-scale-2xl) / var(--stl-typography-scale-base) * 1em);
136
+ --stl-typography-text-h3: calc(var(--stl-typography-scale-xl) / var(--stl-typography-scale-base) * 1em);
137
+ --stl-typography-text-h4: calc(var(--stl-typography-scale-xl) / var(--stl-typography-scale-base) * 1em);
138
+ --stl-typography-text-h5: calc(var(--stl-typography-scale-lg) / var(--stl-typography-scale-base) * 1em);
139
+
140
+ :where(h1) {
141
+ margin-top: 1.5em;
142
+ }
143
+ :where(h2, h3, h4) {
144
+ margin-top: 1.25em;
145
+ }
146
+ :where(h5) {
147
+ margin-top: 1em;
148
+ }
149
+ }
150
+
151
+ /* code blocks */
126
152
  :where(
127
153
  pre:not(.stl-ui-not-prose *, .expressive-code *),
128
154
  .stl-ui-not-prose .stl-ui-prose pre:not(.expressive-code *)
129
155
  ) {
130
156
  padding: 12px 20px;
131
157
  border-radius: var(--stl-ui-layout-border-radius-sml);
132
- border: 1px solid var(--stl-color-border-faint);
158
+ border: 1px solid var(--stl-color-border);
133
159
  background-color: var(--stl-color-faint-background);
134
- overflow: scroll;
160
+ overflow: auto;
135
161
  margin-bottom: 1rem;
136
162
  }
137
163
 
@@ -170,9 +196,7 @@ body {
170
196
  }
171
197
 
172
198
  /* code blocks */
173
- &:where(pre > &) {
174
- font-size: var(--stl-typography-text-body-sm);
175
- }
199
+ /* &:where(pre > &) { } */
176
200
  }
177
201
  }
178
202
 
@@ -202,7 +226,7 @@ body {
202
226
  --stl-ui-layout-border-radius-sml: 8px;
203
227
  --stl-ui-layout-border-radius: 12px;
204
228
  --stl-ui-layout-border-radius-med: 16px;
205
- --stl-ui-layout-border-radius-max: 9999px;
229
+ --stl-ui-layout-border-radius-max: 100vmax;
206
230
  --stl-ui-left-content-indent: 24px;
207
231
 
208
232
  --stl-ui-page-padding-inline: 20px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stainless-api/ui-primitives",
3
- "version": "0.1.0-beta.35",
3
+ "version": "0.1.0-beta.37",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -14,16 +14,16 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "clsx": "^2.1.1",
17
- "lucide-react": "^0.555.0"
17
+ "lucide-react": "^0.561.0"
18
18
  },
19
19
  "devDependencies": {
20
20
  "@types/react": "19.2.7",
21
21
  "@types/react-dom": "^19.2.3",
22
- "react": "^19.2.1",
23
- "react-dom": "^19.2.1",
24
- "rolldown": "1.0.0-beta.53",
25
- "sass": "^1.94.2",
26
- "tsdown": "^0.16.8",
22
+ "react": "^19.2.3",
23
+ "react-dom": "^19.2.3",
24
+ "rolldown": "1.0.0-beta.54",
25
+ "sass": "^1.96.0",
26
+ "tsdown": "^0.17.3",
27
27
  "typescript": "5.9.3",
28
28
  "@stainless/eslint-config": "0.1.0-beta.0"
29
29
  },