@stainless-api/ui-primitives 0.1.0-beta.39 → 0.1.0-beta.40
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.
- package/dist/components/Accordion.d.ts +25 -1
- package/dist/components/Accordion.js +29 -1
- package/dist/components/Button.d.ts +41 -1
- package/dist/components/Button.js +49 -1
- package/dist/components/Callout.d.ts +17 -1
- package/dist/components/Callout.js +26 -1
- package/dist/components/Steps.d.ts +17 -0
- package/dist/components/Steps.js +24 -0
- package/dist/index.d.ts +25 -24
- package/dist/index.js +5 -4
- package/dist/styles/starlight-compat.css +5 -0
- package/dist/styles.css +62 -0
- package/package.json +5 -5
- package/dist/Accordion-CL3Oarbz.js +0 -31
- package/dist/Accordion-Cj5GURin.d.ts +0 -26
- package/dist/Button-C1OEwBk_.js +0 -51
- package/dist/Button-D4DkAJY5.d.ts +0 -42
- package/dist/Callout-BGkXD7D2.js +0 -28
- package/dist/Callout-Desqa2PM.d.ts +0 -18
|
@@ -1,2 +1,26 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime0 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_runtime0.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_runtime0.JSX.Element;
|
|
20
|
+
declare function AccordionGroup({
|
|
21
|
+
className,
|
|
22
|
+
children,
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
|
|
25
|
+
//#endregion
|
|
2
26
|
export { Accordion, AccordionProps };
|
|
@@ -1,3 +1,31 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
4
|
|
|
5
|
+
//#region src/components/Accordion.tsx
|
|
6
|
+
function Accordion({ className, children, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx("details", {
|
|
8
|
+
className: clsx("stl-ui-accordion", className),
|
|
9
|
+
...props,
|
|
10
|
+
children
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function AccordionSummary({ children, className, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx("summary", {
|
|
15
|
+
className: clsx("stl-ui-accordion__summary", className),
|
|
16
|
+
...props,
|
|
17
|
+
children
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
Accordion.Summary = AccordionSummary;
|
|
21
|
+
function AccordionGroup({ className, children, ...props }) {
|
|
22
|
+
return /* @__PURE__ */ jsx("div", {
|
|
23
|
+
className: clsx("stl-ui-accordion-group", className),
|
|
24
|
+
...props,
|
|
25
|
+
children
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
Accordion.Group = AccordionGroup;
|
|
29
|
+
|
|
30
|
+
//#endregion
|
|
3
31
|
export { Accordion };
|
|
@@ -1,2 +1,42 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime2 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_runtime2.JSX.Element;
|
|
25
|
+
declare namespace Button {
|
|
26
|
+
var Label: ({
|
|
27
|
+
className,
|
|
28
|
+
...rest
|
|
29
|
+
}: LabelProps) => react_jsx_runtime2.JSX.Element;
|
|
30
|
+
var Icon: ({
|
|
31
|
+
className,
|
|
32
|
+
icon: Icon,
|
|
33
|
+
size
|
|
34
|
+
}: IconProps) => react_jsx_runtime2.JSX.Element;
|
|
35
|
+
}
|
|
36
|
+
type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
37
|
+
type IconProps = {
|
|
38
|
+
icon: LucideIcon;
|
|
39
|
+
size?: number;
|
|
40
|
+
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
41
|
+
//#endregion
|
|
2
42
|
export { Button, ButtonProps, ButtonVariant };
|
|
@@ -1,3 +1,51 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
4
|
|
|
5
|
+
//#region src/components/Button.tsx
|
|
6
|
+
function Button(props) {
|
|
7
|
+
const { variant, children, border, loading, ...rest } = props;
|
|
8
|
+
const classes = clsx("stl-ui-button", {
|
|
9
|
+
"stl-ui-button--outline": variant === "outline",
|
|
10
|
+
"stl-ui-button--ghost": variant === "ghost",
|
|
11
|
+
"stl-ui-button--accent": variant === "accent",
|
|
12
|
+
"stl-ui-button--accent-muted": variant === "accent-muted",
|
|
13
|
+
"stl-ui-button--muted": variant === "muted",
|
|
14
|
+
"stl-ui-button--success": variant === "success",
|
|
15
|
+
"stl-ui-button--destructive": variant === "destructive"
|
|
16
|
+
}, {
|
|
17
|
+
"stl-ui-button--size-sm": props.size === "sm",
|
|
18
|
+
"stl-ui-button--size-lg": props.size === "lg"
|
|
19
|
+
}, { "stl-ui-button--with-border": variant === "outline" || border }, { "stl-ui-button--loading": !!loading }, "not-content", "stl-ui-not-prose", props.className);
|
|
20
|
+
if (loading) {
|
|
21
|
+
rest["aria-disabled"] = "true";
|
|
22
|
+
rest["aria-label"] = loading.label;
|
|
23
|
+
rest["title"] = loading.label;
|
|
24
|
+
}
|
|
25
|
+
if ("href" in rest) return /* @__PURE__ */ jsx("a", {
|
|
26
|
+
...rest,
|
|
27
|
+
className: classes,
|
|
28
|
+
children
|
|
29
|
+
});
|
|
30
|
+
return /* @__PURE__ */ jsx("button", {
|
|
31
|
+
...rest,
|
|
32
|
+
type: rest.type ?? "button",
|
|
33
|
+
className: classes,
|
|
34
|
+
children
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
Button.Label = function ButtonLabel({ className, ...rest }) {
|
|
38
|
+
return /* @__PURE__ */ jsx("span", {
|
|
39
|
+
className: clsx("stl-ui-button-label leading-none", className),
|
|
40
|
+
...rest
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
Button.Icon = function ButtonIcon({ className, icon: Icon, size = 18 }) {
|
|
44
|
+
return /* @__PURE__ */ jsx("span", {
|
|
45
|
+
className: clsx("stl-ui-button__icon", className),
|
|
46
|
+
children: /* @__PURE__ */ jsx(Icon, { size })
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
//#endregion
|
|
3
51
|
export { Button };
|
|
@@ -1,2 +1,18 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime5 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_runtime5.JSX.Element;
|
|
17
|
+
//#endregion
|
|
2
18
|
export { Callout, CalloutProps, CalloutVariant };
|
|
@@ -1,3 +1,28 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Check, CircleAlert, Info, Lightbulb, OctagonAlert, TriangleAlert } from "lucide-react";
|
|
2
5
|
|
|
6
|
+
//#region src/components/Callout.tsx
|
|
7
|
+
function Callout({ variant = "info", className, children, ...props }) {
|
|
8
|
+
const classes = clsx("stl-ui-callout", `stl-ui-callout--${variant}`, className);
|
|
9
|
+
const Icon = {
|
|
10
|
+
info: Info,
|
|
11
|
+
note: CircleAlert,
|
|
12
|
+
tip: Lightbulb,
|
|
13
|
+
success: Check,
|
|
14
|
+
warning: TriangleAlert,
|
|
15
|
+
danger: OctagonAlert
|
|
16
|
+
}[variant];
|
|
17
|
+
return /* @__PURE__ */ jsxs("aside", {
|
|
18
|
+
className: classes,
|
|
19
|
+
...props,
|
|
20
|
+
children: [/* @__PURE__ */ jsx(Icon, { className: "stl-ui-callout__icon" }), /* @__PURE__ */ jsx("div", {
|
|
21
|
+
className: "stl-ui-callout__content",
|
|
22
|
+
children
|
|
23
|
+
})]
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
//#endregion
|
|
3
28
|
export { Callout };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react_jsx_runtime6 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/Steps.d.ts
|
|
4
|
+
declare function Steps({
|
|
5
|
+
children
|
|
6
|
+
}: {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
}): react_jsx_runtime6.JSX.Element;
|
|
9
|
+
declare function Step({
|
|
10
|
+
children,
|
|
11
|
+
title
|
|
12
|
+
}: {
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
title: string;
|
|
15
|
+
}): react_jsx_runtime6.JSX.Element;
|
|
16
|
+
//#endregion
|
|
17
|
+
export { Step, Steps };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/Steps.tsx
|
|
4
|
+
function Steps({ children }) {
|
|
5
|
+
return /* @__PURE__ */ jsx("ol", {
|
|
6
|
+
className: "stl-ui-steps",
|
|
7
|
+
children
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
function Step({ children, title }) {
|
|
11
|
+
return /* @__PURE__ */ jsxs("li", {
|
|
12
|
+
className: "stl-ui-steps__step",
|
|
13
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
14
|
+
className: "stl-ui-steps__step-title",
|
|
15
|
+
children: title
|
|
16
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
17
|
+
className: "stl-ui-steps__step-content",
|
|
18
|
+
children
|
|
19
|
+
})]
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
export { Step, Steps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { Accordion, AccordionProps } from "./components/Accordion.js";
|
|
2
|
+
import { Button, ButtonProps, ButtonVariant } from "./components/Button.js";
|
|
3
|
+
import { Callout, CalloutProps, CalloutVariant } from "./components/Callout.js";
|
|
4
|
+
import { Step, Steps } from "./components/Steps.js";
|
|
4
5
|
import * as react3 from "react";
|
|
5
6
|
import { ComponentProps } from "react";
|
|
6
|
-
import * as
|
|
7
|
+
import * as react_jsx_runtime23 from "react/jsx-runtime";
|
|
7
8
|
|
|
8
9
|
//#region src/components/dropdown/DropdownMenu.d.ts
|
|
9
10
|
declare function Menu({
|
|
10
11
|
className,
|
|
11
12
|
...props
|
|
12
|
-
}: ComponentProps<'div'>):
|
|
13
|
+
}: ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
|
|
13
14
|
declare namespace Menu {
|
|
14
15
|
var Item: typeof MenuItem;
|
|
15
16
|
var ItemText: typeof MenuItemText;
|
|
@@ -21,7 +22,7 @@ declare function MenuItemText({
|
|
|
21
22
|
...props
|
|
22
23
|
}: ComponentProps<'span'> & {
|
|
23
24
|
subtle?: boolean;
|
|
24
|
-
}):
|
|
25
|
+
}): react_jsx_runtime23.JSX.Element;
|
|
25
26
|
type MenuItemBaseProps = {
|
|
26
27
|
children?: React.ReactNode;
|
|
27
28
|
value: string;
|
|
@@ -42,7 +43,7 @@ declare function MenuItem({
|
|
|
42
43
|
isExternalLink,
|
|
43
44
|
isSelected,
|
|
44
45
|
...props
|
|
45
|
-
}: MenuItemProps):
|
|
46
|
+
}: MenuItemProps): react_jsx_runtime23.JSX.Element;
|
|
46
47
|
/**
|
|
47
48
|
* A template component that defines the content to be displayed in the dropdown trigger
|
|
48
49
|
* when a menu item is selected. This template is used to customize the appearance of
|
|
@@ -53,13 +54,13 @@ declare function MenuItem({
|
|
|
53
54
|
*/
|
|
54
55
|
declare function MenuItemTemplate({
|
|
55
56
|
...props
|
|
56
|
-
}: ComponentProps<'template'>):
|
|
57
|
+
}: ComponentProps<'template'>): react_jsx_runtime23.JSX.Element;
|
|
57
58
|
//#endregion
|
|
58
59
|
//#region src/components/dropdown/Dropdown.d.ts
|
|
59
60
|
declare function Dropdown({
|
|
60
61
|
className,
|
|
61
62
|
...props
|
|
62
|
-
}: ComponentProps<'div'>):
|
|
63
|
+
}: ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
|
|
63
64
|
declare namespace Dropdown {
|
|
64
65
|
var Menu: typeof Menu;
|
|
65
66
|
var MenuItem: ({
|
|
@@ -83,40 +84,40 @@ declare namespace Dropdown {
|
|
|
83
84
|
isSelected?: boolean;
|
|
84
85
|
} & react3.ClassAttributes<HTMLButtonElement> & react3.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
85
86
|
href?: never;
|
|
86
|
-
})) =>
|
|
87
|
+
})) => react_jsx_runtime23.JSX.Element;
|
|
87
88
|
var MenuItemText: ({
|
|
88
89
|
className,
|
|
89
90
|
subtle,
|
|
90
91
|
...props
|
|
91
92
|
}: ComponentProps<"span"> & {
|
|
92
93
|
subtle?: boolean;
|
|
93
|
-
}) =>
|
|
94
|
+
}) => react_jsx_runtime23.JSX.Element;
|
|
94
95
|
var MenuItemTemplate: ({
|
|
95
96
|
...props
|
|
96
|
-
}: ComponentProps<"template">) =>
|
|
97
|
+
}: ComponentProps<"template">) => react_jsx_runtime23.JSX.Element;
|
|
97
98
|
var Trigger: ({
|
|
98
99
|
className,
|
|
99
100
|
...props
|
|
100
|
-
}: ComponentProps<"button">) =>
|
|
101
|
+
}: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
|
|
101
102
|
var TriggerSelectedItem: ({
|
|
102
103
|
className,
|
|
103
104
|
...props
|
|
104
|
-
}: ComponentProps<"div">) =>
|
|
105
|
+
}: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
|
|
105
106
|
var TriggerIcon: ({
|
|
106
107
|
className,
|
|
107
108
|
...props
|
|
108
|
-
}: ComponentProps<"span">) =>
|
|
109
|
+
}: ComponentProps<"span">) => react_jsx_runtime23.JSX.Element;
|
|
109
110
|
var Icon: ({
|
|
110
111
|
className,
|
|
111
112
|
...props
|
|
112
|
-
}: ComponentProps<"div">) =>
|
|
113
|
+
}: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
|
|
113
114
|
}
|
|
114
115
|
//#endregion
|
|
115
116
|
//#region src/components/dropdown/DropdownButton.d.ts
|
|
116
117
|
declare function DropdownButton({
|
|
117
118
|
className,
|
|
118
119
|
...props
|
|
119
|
-
}: ComponentProps<'div'>):
|
|
120
|
+
}: ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
|
|
120
121
|
declare namespace DropdownButton {
|
|
121
122
|
var Menu: typeof Menu;
|
|
122
123
|
var MenuItem: ({
|
|
@@ -140,31 +141,31 @@ declare namespace DropdownButton {
|
|
|
140
141
|
isSelected?: boolean;
|
|
141
142
|
} & react3.ClassAttributes<HTMLButtonElement> & react3.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
142
143
|
href?: never;
|
|
143
|
-
})) =>
|
|
144
|
+
})) => react_jsx_runtime23.JSX.Element;
|
|
144
145
|
var MenuItemText: ({
|
|
145
146
|
className,
|
|
146
147
|
subtle,
|
|
147
148
|
...props
|
|
148
149
|
}: ComponentProps<"span"> & {
|
|
149
150
|
subtle?: boolean;
|
|
150
|
-
}) =>
|
|
151
|
+
}) => react_jsx_runtime23.JSX.Element;
|
|
151
152
|
var PrimaryAction: ({
|
|
152
153
|
className,
|
|
153
154
|
...props
|
|
154
|
-
}: ComponentProps<"button">) =>
|
|
155
|
+
}: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
|
|
155
156
|
var PrimaryActionText: ({
|
|
156
157
|
children
|
|
157
158
|
}: {
|
|
158
159
|
children?: React.ReactNode;
|
|
159
|
-
}) =>
|
|
160
|
+
}) => react_jsx_runtime23.JSX.Element;
|
|
160
161
|
var Trigger: ({
|
|
161
162
|
className,
|
|
162
163
|
...props
|
|
163
|
-
}: ComponentProps<"button">) =>
|
|
164
|
+
}: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
|
|
164
165
|
var Icon: ({
|
|
165
166
|
className,
|
|
166
167
|
...props
|
|
167
|
-
}: ComponentProps<"div">) =>
|
|
168
|
+
}: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
|
|
168
169
|
}
|
|
169
170
|
//#endregion
|
|
170
|
-
export { Accordion, AccordionProps, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, Dropdown, DropdownButton };
|
|
171
|
+
export { Accordion, AccordionProps, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, Dropdown, DropdownButton, Step, Steps };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { Button } from "./components/Button.js";
|
|
2
|
+
import { Callout } from "./components/Callout.js";
|
|
3
|
+
import { Accordion } from "./components/Accordion.js";
|
|
4
|
+
import { Step, Steps } from "./components/Steps.js";
|
|
4
5
|
import clsx from "clsx";
|
|
5
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import { CheckIcon, ChevronsUpDown, ExternalLink } from "lucide-react";
|
|
@@ -177,4 +178,4 @@ DropdownButton.Trigger = Trigger;
|
|
|
177
178
|
DropdownButton.Icon = Icon;
|
|
178
179
|
|
|
179
180
|
//#endregion
|
|
180
|
-
export { Accordion, Button, Callout, Dropdown, DropdownButton };
|
|
181
|
+
export { Accordion, Button, Callout, Dropdown, DropdownButton, Step, Steps };
|
package/dist/styles.css
CHANGED
|
@@ -1107,6 +1107,68 @@ a.stl-ui-button {
|
|
|
1107
1107
|
}
|
|
1108
1108
|
}
|
|
1109
1109
|
|
|
1110
|
+
.stl-ui-steps {
|
|
1111
|
+
padding-left: 0;
|
|
1112
|
+
}
|
|
1113
|
+
|
|
1114
|
+
.stl-ui-steps__step {
|
|
1115
|
+
--step-icon-width: 24px;
|
|
1116
|
+
--step-padding: 12px;
|
|
1117
|
+
list-style: none;
|
|
1118
|
+
position: relative;
|
|
1119
|
+
padding: var(--step-padding);
|
|
1120
|
+
/* Space for the custom marker */
|
|
1121
|
+
padding-left: calc(var(--step-icon-width) + var(--step-padding));
|
|
1122
|
+
margin: 0;
|
|
1123
|
+
|
|
1124
|
+
&::before {
|
|
1125
|
+
content: counter(list-item);
|
|
1126
|
+
position: absolute;
|
|
1127
|
+
left: 0;
|
|
1128
|
+
top: var(--step-padding);
|
|
1129
|
+
width: var(--step-icon-width);
|
|
1130
|
+
height: var(--step-icon-width);
|
|
1131
|
+
border: 1px solid var(--stl-color-border);
|
|
1132
|
+
border-radius: 100%;
|
|
1133
|
+
display: flex;
|
|
1134
|
+
align-items: center;
|
|
1135
|
+
justify-content: center;
|
|
1136
|
+
background: var(--stl-color-bg);
|
|
1137
|
+
z-index: 1;
|
|
1138
|
+
font-size: var(--stl-typography-text-body-xs);
|
|
1139
|
+
font-style: normal;
|
|
1140
|
+
font-weight: 600;
|
|
1141
|
+
line-height: 100%;
|
|
1142
|
+
}
|
|
1143
|
+
|
|
1144
|
+
&::after {
|
|
1145
|
+
content: '';
|
|
1146
|
+
position: absolute;
|
|
1147
|
+
left: calc(var(--step-icon-width) / 2 - 0.5px);
|
|
1148
|
+
top: calc(var(--step-icon-width) + var(--step-padding));
|
|
1149
|
+
bottom: calc(-1 * (var(--step-padding)));
|
|
1150
|
+
width: 1px;
|
|
1151
|
+
background: var(--stl-color-border);
|
|
1152
|
+
}
|
|
1153
|
+
|
|
1154
|
+
&:last-child {
|
|
1155
|
+
padding-bottom: 0;
|
|
1156
|
+
|
|
1157
|
+
/* No line after the last step */
|
|
1158
|
+
&::after {
|
|
1159
|
+
display: none;
|
|
1160
|
+
}
|
|
1161
|
+
}
|
|
1162
|
+
}
|
|
1163
|
+
.stl-ui-steps__step-title {
|
|
1164
|
+
font-weight: 600;
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1167
|
+
.stl-ui-steps__step-content {
|
|
1168
|
+
margin-bottom: 0;
|
|
1169
|
+
margin-top: 4px;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1110
1172
|
/* design system variables */
|
|
1111
1173
|
|
|
1112
1174
|
/* components */
|
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.40",
|
|
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.
|
|
17
|
+
"lucide-react": "^0.562.0"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"@types/react": "19.2.7",
|
|
21
21
|
"@types/react-dom": "^19.2.3",
|
|
22
22
|
"react": "^19.2.3",
|
|
23
23
|
"react-dom": "^19.2.3",
|
|
24
|
-
"rolldown": "1.0.0-beta.
|
|
25
|
-
"sass": "^1.
|
|
26
|
-
"tsdown": "^0.
|
|
24
|
+
"rolldown": "1.0.0-beta.58",
|
|
25
|
+
"sass": "^1.97.2",
|
|
26
|
+
"tsdown": "^0.19.0-beta.3",
|
|
27
27
|
"typescript": "5.9.3",
|
|
28
28
|
"@stainless/eslint-config": "0.1.0-beta.1"
|
|
29
29
|
},
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
|
|
5
|
-
//#region src/components/Accordion.tsx
|
|
6
|
-
function Accordion({ className, children, ...props }) {
|
|
7
|
-
return /* @__PURE__ */ jsx("details", {
|
|
8
|
-
className: clsx("stl-ui-accordion", className),
|
|
9
|
-
...props,
|
|
10
|
-
children
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
function AccordionSummary({ children, className, ...props }) {
|
|
14
|
-
return /* @__PURE__ */ jsx("summary", {
|
|
15
|
-
className: clsx("stl-ui-accordion__summary", className),
|
|
16
|
-
...props,
|
|
17
|
-
children
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
Accordion.Summary = AccordionSummary;
|
|
21
|
-
function AccordionGroup({ className, children, ...props }) {
|
|
22
|
-
return /* @__PURE__ */ jsx("div", {
|
|
23
|
-
className: clsx("stl-ui-accordion-group", className),
|
|
24
|
-
...props,
|
|
25
|
-
children
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
Accordion.Group = AccordionGroup;
|
|
29
|
-
|
|
30
|
-
//#endregion
|
|
31
|
-
export { Accordion as t };
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import * as react_jsx_runtime0 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_runtime0.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_runtime0.JSX.Element;
|
|
20
|
-
declare function AccordionGroup({
|
|
21
|
-
className,
|
|
22
|
-
children,
|
|
23
|
-
...props
|
|
24
|
-
}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
|
|
25
|
-
//#endregion
|
|
26
|
-
export { AccordionProps as n, Accordion as t };
|
package/dist/Button-C1OEwBk_.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
|
|
5
|
-
//#region src/components/Button.tsx
|
|
6
|
-
function Button(props) {
|
|
7
|
-
const { variant, children, border, loading, ...rest } = props;
|
|
8
|
-
const classes = clsx("stl-ui-button", {
|
|
9
|
-
"stl-ui-button--outline": variant === "outline",
|
|
10
|
-
"stl-ui-button--ghost": variant === "ghost",
|
|
11
|
-
"stl-ui-button--accent": variant === "accent",
|
|
12
|
-
"stl-ui-button--accent-muted": variant === "accent-muted",
|
|
13
|
-
"stl-ui-button--muted": variant === "muted",
|
|
14
|
-
"stl-ui-button--success": variant === "success",
|
|
15
|
-
"stl-ui-button--destructive": variant === "destructive"
|
|
16
|
-
}, {
|
|
17
|
-
"stl-ui-button--size-sm": props.size === "sm",
|
|
18
|
-
"stl-ui-button--size-lg": props.size === "lg"
|
|
19
|
-
}, { "stl-ui-button--with-border": variant === "outline" || border }, { "stl-ui-button--loading": !!loading }, "not-content", "stl-ui-not-prose", props.className);
|
|
20
|
-
if (loading) {
|
|
21
|
-
rest["aria-disabled"] = "true";
|
|
22
|
-
rest["aria-label"] = loading.label;
|
|
23
|
-
rest["title"] = loading.label;
|
|
24
|
-
}
|
|
25
|
-
if ("href" in rest) return /* @__PURE__ */ jsx("a", {
|
|
26
|
-
...rest,
|
|
27
|
-
className: classes,
|
|
28
|
-
children
|
|
29
|
-
});
|
|
30
|
-
return /* @__PURE__ */ jsx("button", {
|
|
31
|
-
...rest,
|
|
32
|
-
type: rest.type ?? "button",
|
|
33
|
-
className: classes,
|
|
34
|
-
children
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
Button.Label = function ButtonLabel({ className, ...rest }) {
|
|
38
|
-
return /* @__PURE__ */ jsx("span", {
|
|
39
|
-
className: clsx("stl-ui-button-label leading-none", className),
|
|
40
|
-
...rest
|
|
41
|
-
});
|
|
42
|
-
};
|
|
43
|
-
Button.Icon = function ButtonIcon({ className, icon: Icon, size = 18 }) {
|
|
44
|
-
return /* @__PURE__ */ jsx("span", {
|
|
45
|
-
className: clsx("stl-ui-button__icon", className),
|
|
46
|
-
children: /* @__PURE__ */ jsx(Icon, { size })
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
//#endregion
|
|
51
|
-
export { Button as t };
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import * as react_jsx_runtime3 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_runtime3.JSX.Element;
|
|
25
|
-
declare namespace Button {
|
|
26
|
-
var Label: ({
|
|
27
|
-
className,
|
|
28
|
-
...rest
|
|
29
|
-
}: LabelProps) => react_jsx_runtime3.JSX.Element;
|
|
30
|
-
var Icon: ({
|
|
31
|
-
className,
|
|
32
|
-
icon: Icon,
|
|
33
|
-
size
|
|
34
|
-
}: IconProps) => react_jsx_runtime3.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 };
|
package/dist/Callout-BGkXD7D2.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
import { Check, CircleAlert, Info, Lightbulb, OctagonAlert, TriangleAlert } from "lucide-react";
|
|
5
|
-
|
|
6
|
-
//#region src/components/Callout.tsx
|
|
7
|
-
function Callout({ variant = "info", className, children, ...props }) {
|
|
8
|
-
const classes = clsx("stl-ui-callout", `stl-ui-callout--${variant}`, className);
|
|
9
|
-
const Icon = {
|
|
10
|
-
info: Info,
|
|
11
|
-
note: CircleAlert,
|
|
12
|
-
tip: Lightbulb,
|
|
13
|
-
success: Check,
|
|
14
|
-
warning: TriangleAlert,
|
|
15
|
-
danger: OctagonAlert
|
|
16
|
-
}[variant];
|
|
17
|
-
return /* @__PURE__ */ jsxs("aside", {
|
|
18
|
-
className: classes,
|
|
19
|
-
...props,
|
|
20
|
-
children: [/* @__PURE__ */ jsx(Icon, { className: "stl-ui-callout__icon" }), /* @__PURE__ */ jsx("div", {
|
|
21
|
-
className: "stl-ui-callout__content",
|
|
22
|
-
children
|
|
23
|
-
})]
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
//#endregion
|
|
28
|
-
export { Callout as t };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import * as react_jsx_runtime0 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_runtime0.JSX.Element;
|
|
17
|
-
//#endregion
|
|
18
|
-
export { CalloutProps as n, CalloutVariant as r, Callout as t };
|