@stainless-api/ui-primitives 0.1.0-beta.36 → 0.1.0-beta.38
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.
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime3 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/Accordion.d.ts
|
|
5
|
+
type AccordionProps = React.ComponentProps<'details'>;
|
|
6
|
+
declare function Accordion({
|
|
7
|
+
className,
|
|
8
|
+
children,
|
|
9
|
+
...props
|
|
10
|
+
}: AccordionProps): react_jsx_runtime3.JSX.Element;
|
|
11
|
+
declare namespace Accordion {
|
|
12
|
+
var Summary: typeof AccordionSummary;
|
|
13
|
+
var Group: typeof AccordionGroup;
|
|
14
|
+
}
|
|
15
|
+
declare function AccordionSummary({
|
|
16
|
+
children,
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: React.ComponentProps<'summary'>): react_jsx_runtime3.JSX.Element;
|
|
20
|
+
declare function AccordionGroup({
|
|
21
|
+
className,
|
|
22
|
+
children,
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
|
|
25
|
+
//#endregion
|
|
26
|
+
export { AccordionProps as n, Accordion as t };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import { LucideIcon } from "lucide-react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/Button.d.ts
|
|
6
|
+
type ButtonVariant = 'outline' | 'ghost' | 'accent' | 'accent-muted' | 'muted' | 'success' | 'destructive' | 'default';
|
|
7
|
+
type BaseProps = {
|
|
8
|
+
variant?: ButtonVariant;
|
|
9
|
+
className?: string;
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
size?: 'sm' | 'lg' | 'default';
|
|
12
|
+
border?: boolean;
|
|
13
|
+
loading?: {
|
|
14
|
+
label: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
type AnchorBranch = BaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
|
|
18
|
+
href: string;
|
|
19
|
+
};
|
|
20
|
+
type ButtonBranch = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & {
|
|
21
|
+
href?: never;
|
|
22
|
+
};
|
|
23
|
+
type ButtonProps = AnchorBranch | ButtonBranch;
|
|
24
|
+
declare function Button(props: ButtonProps): react_jsx_runtime0.JSX.Element;
|
|
25
|
+
declare namespace Button {
|
|
26
|
+
var Label: ({
|
|
27
|
+
className,
|
|
28
|
+
...rest
|
|
29
|
+
}: LabelProps) => react_jsx_runtime0.JSX.Element;
|
|
30
|
+
var Icon: ({
|
|
31
|
+
className,
|
|
32
|
+
icon: Icon,
|
|
33
|
+
size
|
|
34
|
+
}: IconProps) => react_jsx_runtime0.JSX.Element;
|
|
35
|
+
}
|
|
36
|
+
type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
37
|
+
type IconProps = {
|
|
38
|
+
icon: LucideIcon;
|
|
39
|
+
size?: number;
|
|
40
|
+
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
41
|
+
//#endregion
|
|
42
|
+
export { ButtonProps as n, ButtonVariant as r, Button as t };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/Callout.d.ts
|
|
5
|
+
type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
|
|
6
|
+
type CalloutProps = {
|
|
7
|
+
variant?: CalloutVariant;
|
|
8
|
+
className?: string;
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
} & Omit<React.ComponentProps<'aside'>, 'className' | 'children'>;
|
|
11
|
+
declare function Callout({
|
|
12
|
+
variant,
|
|
13
|
+
className,
|
|
14
|
+
children,
|
|
15
|
+
...props
|
|
16
|
+
}: CalloutProps): react_jsx_runtime2.JSX.Element;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { CalloutProps as n, CalloutVariant as r, Callout as t };
|
|
@@ -81,6 +81,9 @@
|
|
|
81
81
|
line-height: var(--stl-typography-line-height-heading);
|
|
82
82
|
font-family: var(--stl-typography-font-heading);
|
|
83
83
|
--sl-anchor-icon-size: 0.8em;
|
|
84
|
+
:is(h1, h2, h3, h4, h5) {
|
|
85
|
+
font-size: inherit;
|
|
86
|
+
}
|
|
84
87
|
}
|
|
85
88
|
.sl-heading-wrapper.level-h1 {
|
|
86
89
|
font-size: var(--stl-typography-text-h1);
|
package/dist/styles.css
CHANGED
|
@@ -12,14 +12,13 @@
|
|
|
12
12
|
--stl-typography-text-body-sm: var(--stl-typography-scale-sm);
|
|
13
13
|
--stl-typography-text-body-xs: var(--stl-typography-scale-xs);
|
|
14
14
|
|
|
15
|
-
--stl-typography-text-code: max(0.875em, var(--stl-typography-scale-
|
|
16
|
-
|
|
17
|
-
--stl-typography-text-h1: var(--stl-typography-scale-5xl);
|
|
18
|
-
--stl-typography-text-h2: var(--stl-typography-scale-4xl);
|
|
19
|
-
--stl-typography-text-h3: var(--stl-typography-scale-3xl);
|
|
20
|
-
--stl-typography-text-h4: var(--stl-typography-scale-2xl);
|
|
21
|
-
--stl-typography-text-h5: var(--stl-typography-scale-xl);
|
|
15
|
+
--stl-typography-text-code: max(0.875em, var(--stl-typography-scale-xs));
|
|
22
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);
|
|
23
22
|
--stl-typography-scale-xs: 12px;
|
|
24
23
|
--stl-typography-scale-sm: 14px;
|
|
25
24
|
--stl-typography-scale-base: 16px;
|
|
@@ -65,6 +64,11 @@ body {
|
|
|
65
64
|
color: initial;
|
|
66
65
|
}
|
|
67
66
|
|
|
67
|
+
&.small {
|
|
68
|
+
font-size: var(--stl-typography-scale-sm);
|
|
69
|
+
letter-spacing: normal;
|
|
70
|
+
}
|
|
71
|
+
|
|
68
72
|
:where(strong:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose strong) {
|
|
69
73
|
color: var(--stl-color-foreground);
|
|
70
74
|
}
|
|
@@ -89,35 +93,35 @@ body {
|
|
|
89
93
|
/* Heading 1/Medium */
|
|
90
94
|
font-size: var(--stl-typography-text-h1);
|
|
91
95
|
letter-spacing: -0.03em;
|
|
92
|
-
margin-top:
|
|
96
|
+
margin-top: 1.5em;
|
|
93
97
|
}
|
|
94
98
|
|
|
95
99
|
:where(h2:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h2) {
|
|
96
100
|
/* Heading 2/Medium */
|
|
97
101
|
font-size: var(--stl-typography-text-h2);
|
|
98
102
|
letter-spacing: -0.03em;
|
|
99
|
-
margin-top:
|
|
103
|
+
margin-top: 1.35em;
|
|
100
104
|
}
|
|
101
105
|
|
|
102
106
|
:where(h3:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h3) {
|
|
103
107
|
/* Heading 3/Medium */
|
|
104
108
|
font-size: var(--stl-typography-text-h3);
|
|
105
109
|
letter-spacing: -0.02em;
|
|
106
|
-
margin-top:
|
|
110
|
+
margin-top: 1.35em;
|
|
107
111
|
}
|
|
108
112
|
|
|
109
113
|
:where(h4:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h4) {
|
|
110
114
|
/* Heading 4/Medium */
|
|
111
115
|
font-size: var(--stl-typography-text-h4);
|
|
112
116
|
letter-spacing: -0.02em;
|
|
113
|
-
margin-top:
|
|
117
|
+
margin-top: 1.35em;
|
|
114
118
|
}
|
|
115
119
|
|
|
116
120
|
:where(h5:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h5) {
|
|
117
121
|
/* Heading 5/Medium */
|
|
118
122
|
font-size: var(--stl-typography-text-h5);
|
|
119
123
|
letter-spacing: -0.02em;
|
|
120
|
-
margin-top:
|
|
124
|
+
margin-top: 1.2em;
|
|
121
125
|
}
|
|
122
126
|
|
|
123
127
|
:where(li:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose li) {
|
|
@@ -126,15 +130,34 @@ body {
|
|
|
126
130
|
}
|
|
127
131
|
}
|
|
128
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 */
|
|
129
152
|
:where(
|
|
130
153
|
pre:not(.stl-ui-not-prose *, .expressive-code *),
|
|
131
154
|
.stl-ui-not-prose .stl-ui-prose pre:not(.expressive-code *)
|
|
132
155
|
) {
|
|
133
156
|
padding: 12px 20px;
|
|
134
157
|
border-radius: var(--stl-ui-layout-border-radius-sml);
|
|
135
|
-
border: 1px solid var(--stl-color-border
|
|
158
|
+
border: 1px solid var(--stl-color-border);
|
|
136
159
|
background-color: var(--stl-color-faint-background);
|
|
137
|
-
overflow:
|
|
160
|
+
overflow: auto;
|
|
138
161
|
margin-bottom: 1rem;
|
|
139
162
|
}
|
|
140
163
|
|
|
@@ -173,9 +196,7 @@ body {
|
|
|
173
196
|
}
|
|
174
197
|
|
|
175
198
|
/* code blocks */
|
|
176
|
-
&:where(pre > &) {
|
|
177
|
-
font-size: var(--stl-typography-text-body-sm);
|
|
178
|
-
}
|
|
199
|
+
/* &:where(pre > &) { } */
|
|
179
200
|
}
|
|
180
201
|
}
|
|
181
202
|
|
|
@@ -205,7 +226,7 @@ body {
|
|
|
205
226
|
--stl-ui-layout-border-radius-sml: 8px;
|
|
206
227
|
--stl-ui-layout-border-radius: 12px;
|
|
207
228
|
--stl-ui-layout-border-radius-med: 16px;
|
|
208
|
-
--stl-ui-layout-border-radius-max:
|
|
229
|
+
--stl-ui-layout-border-radius-max: 100vmax;
|
|
209
230
|
--stl-ui-left-content-indent: 24px;
|
|
210
231
|
|
|
211
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.
|
|
3
|
+
"version": "0.1.0-beta.38",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"react-dom": "^19.2.3",
|
|
24
24
|
"rolldown": "1.0.0-beta.54",
|
|
25
25
|
"sass": "^1.96.0",
|
|
26
|
-
"tsdown": "^0.
|
|
26
|
+
"tsdown": "^0.18.0",
|
|
27
27
|
"typescript": "5.9.3",
|
|
28
28
|
"@stainless/eslint-config": "0.1.0-beta.0"
|
|
29
29
|
},
|