@stainless-api/ui-primitives 0.1.0-beta.11 → 0.1.0-beta.12
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/.turbo/turbo-build.log +31 -1
- package/CHANGELOG.md +6 -0
- package/dist/Accordion-DLQE3Td6.js +31 -0
- package/dist/Accordion-_dikpfLR.d.ts +26 -0
- package/dist/Button-DBhd6kU7.js +51 -0
- package/dist/Button-sTZ6xvkU.d.ts +38 -0
- package/dist/Callout-Dsp2nbSy.d.ts +18 -0
- package/dist/Callout-UZQRuCQ5.js +28 -0
- package/dist/DropdownButton-CNJ5NyBS.d.ts +53 -0
- package/dist/DropdownButton-CStYzJ6s.js +83 -0
- package/dist/components/Accordion.d.ts +2 -10
- package/dist/components/Accordion.js +3 -19
- package/dist/components/Button.d.ts +2 -27
- package/dist/components/Button.js +3 -33
- package/dist/components/Callout.d.ts +2 -8
- package/dist/components/Callout.js +3 -16
- package/dist/components/DropdownButton.d.ts +2 -21
- package/dist/components/DropdownButton.js +3 -37
- package/dist/index.d.ts +5 -4
- package/dist/index.js +6 -5
- package/dist/scripts/index.d.ts +12 -1
- package/dist/scripts/index.js +35 -2
- package/dist/styles.css +1172 -0
- package/dist/styles.js +1 -0
- package/package.json +1 -1
- package/dist/components/Accordion.js.map +0 -1
- package/dist/components/Button.js.map +0 -1
- package/dist/components/Callout.js.map +0 -1
- package/dist/components/DropdownButton.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/scripts/dropdown-button.d.ts +0 -5
- package/dist/scripts/dropdown-button.js +0 -43
- package/dist/scripts/dropdown-button.js.map +0 -1
- package/dist/scripts/index.js.map +0 -1
- package/dist/tsconfig.tsbuildinfo +0 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
3
|
> @stainless-api/ui-primitives@0.1.0-beta.10 build /Users/maxfreundlich/code/work/stl-api-docs/packages/ui-primitives
|
|
4
|
-
>
|
|
4
|
+
> tsdown
|
|
5
5
|
|
|
6
|
+
[34mℹ[39m tsdown [2mv0.15.12[22m powered by rolldown [2mv1.0.0-beta.45[22m
|
|
7
|
+
[34mℹ[39m Using tsdown config: [4m/Users/maxfreundlich/code/work/stl-api-docs/packages/ui-primitives/tsdown.config.ts[24m
|
|
8
|
+
[34mℹ[39m entry: [34msrc/index.ts, src/styles.css, src/components/Accordion.tsx, src/components/Button.tsx, src/components/Callout.tsx, src/components/DropdownButton.tsx, src/scripts/index.ts[39m
|
|
9
|
+
[34mℹ[39m tsconfig: [34mtsconfig.json[39m
|
|
10
|
+
[34mℹ[39m Build start
|
|
11
|
+
[34mℹ[39m Cleaning 24 files
|
|
12
|
+
[34mℹ[39m [2mdist/[22m[1mscripts/index.js[22m [2m 1.29 kB[22m [2m│ gzip: 0.51 kB[22m
|
|
13
|
+
[34mℹ[39m [2mdist/[22m[1mindex.js[22m [2m 0.29 kB[22m [2m│ gzip: 0.16 kB[22m
|
|
14
|
+
[34mℹ[39m [2mdist/[22m[1mcomponents/DropdownButton.js[22m [2m 0.10 kB[22m [2m│ gzip: 0.09 kB[22m
|
|
15
|
+
[34mℹ[39m [2mdist/[22m[1mcomponents/Accordion.js[22m [2m 0.08 kB[22m [2m│ gzip: 0.08 kB[22m
|
|
16
|
+
[34mℹ[39m [2mdist/[22m[1mcomponents/Callout.js[22m [2m 0.07 kB[22m [2m│ gzip: 0.08 kB[22m
|
|
17
|
+
[34mℹ[39m [2mdist/[22m[1mcomponents/Button.js[22m [2m 0.07 kB[22m [2m│ gzip: 0.08 kB[22m
|
|
18
|
+
[34mℹ[39m [2mdist/[22m[1mstyles.js[22m [2m 0.01 kB[22m [2m│ gzip: 0.03 kB[22m
|
|
19
|
+
[34mℹ[39m [2mdist/[22mstyles.css [2m40.23 kB[22m [2m│ gzip: 6.91 kB[22m
|
|
20
|
+
[34mℹ[39m [2mdist/[22mDropdownButton-CStYzJ6s.js [2m 2.70 kB[22m [2m│ gzip: 0.70 kB[22m
|
|
21
|
+
[34mℹ[39m [2mdist/[22mButton-DBhd6kU7.js [2m 1.51 kB[22m [2m│ gzip: 0.55 kB[22m
|
|
22
|
+
[34mℹ[39m [2mdist/[22mCallout-UZQRuCQ5.js [2m 0.82 kB[22m [2m│ gzip: 0.44 kB[22m
|
|
23
|
+
[34mℹ[39m [2mdist/[22mAccordion-DLQE3Td6.js [2m 0.80 kB[22m [2m│ gzip: 0.30 kB[22m
|
|
24
|
+
[34mℹ[39m [2mdist/[22m[32m[1mindex.d.ts[22m[39m [2m 0.46 kB[22m [2m│ gzip: 0.20 kB[22m
|
|
25
|
+
[34mℹ[39m [2mdist/[22m[32m[1mscripts/index.d.ts[22m[39m [2m 0.30 kB[22m [2m│ gzip: 0.19 kB[22m
|
|
26
|
+
[34mℹ[39m [2mdist/[22m[32m[1mcomponents/Callout.d.ts[22m[39m [2m 0.14 kB[22m [2m│ gzip: 0.11 kB[22m
|
|
27
|
+
[34mℹ[39m [2mdist/[22m[32m[1mcomponents/Button.d.ts[22m[39m [2m 0.14 kB[22m [2m│ gzip: 0.10 kB[22m
|
|
28
|
+
[34mℹ[39m [2mdist/[22m[32m[1mcomponents/Accordion.d.ts[22m[39m [2m 0.12 kB[22m [2m│ gzip: 0.09 kB[22m
|
|
29
|
+
[34mℹ[39m [2mdist/[22m[32m[1mcomponents/DropdownButton.d.ts[22m[39m [2m 0.10 kB[22m [2m│ gzip: 0.08 kB[22m
|
|
30
|
+
[34mℹ[39m [2mdist/[22m[32mDropdownButton-CNJ5NyBS.d.ts[39m [2m 1.40 kB[22m [2m│ gzip: 0.42 kB[22m
|
|
31
|
+
[34mℹ[39m [2mdist/[22m[32mButton-sTZ6xvkU.d.ts[39m [2m 1.27 kB[22m [2m│ gzip: 0.52 kB[22m
|
|
32
|
+
[34mℹ[39m [2mdist/[22m[32mAccordion-_dikpfLR.d.ts[39m [2m 0.74 kB[22m [2m│ gzip: 0.31 kB[22m
|
|
33
|
+
[34mℹ[39m [2mdist/[22m[32mCallout-Dsp2nbSy.d.ts[39m [2m 0.57 kB[22m [2m│ gzip: 0.33 kB[22m
|
|
34
|
+
[34mℹ[39m 22 files, total: 53.22 kB
|
|
35
|
+
[32m✔[39m Build complete in [32m756ms[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,31 @@
|
|
|
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 };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime8 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_runtime8.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_runtime8.JSX.Element;
|
|
20
|
+
declare function AccordionGroup({
|
|
21
|
+
className,
|
|
22
|
+
children,
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime8.JSX.Element;
|
|
25
|
+
//#endregion
|
|
26
|
+
export { AccordionProps as n, Accordion as t };
|
|
@@ -0,0 +1,51 @@
|
|
|
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 } = 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
|
+
}, "not-content", "stl-ui-not-prose", props.className);
|
|
20
|
+
if ("href" in props) {
|
|
21
|
+
const { href,...rest$1 } = props;
|
|
22
|
+
return /* @__PURE__ */ jsx("a", {
|
|
23
|
+
href,
|
|
24
|
+
...rest$1,
|
|
25
|
+
className: classes,
|
|
26
|
+
children
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
const { type,...rest } = props;
|
|
30
|
+
return /* @__PURE__ */ jsx("button", {
|
|
31
|
+
type: type ?? "button",
|
|
32
|
+
...rest,
|
|
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 };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime11 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
|
+
};
|
|
13
|
+
type AnchorBranch = BaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
|
|
14
|
+
href: string;
|
|
15
|
+
};
|
|
16
|
+
type ButtonBranch = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & {
|
|
17
|
+
href?: never;
|
|
18
|
+
};
|
|
19
|
+
type ButtonProps = AnchorBranch | ButtonBranch;
|
|
20
|
+
declare function Button(props: ButtonProps): react_jsx_runtime11.JSX.Element;
|
|
21
|
+
declare namespace Button {
|
|
22
|
+
var Label: ({
|
|
23
|
+
className,
|
|
24
|
+
...rest
|
|
25
|
+
}: LabelProps) => react_jsx_runtime11.JSX.Element;
|
|
26
|
+
var Icon: ({
|
|
27
|
+
className,
|
|
28
|
+
icon: Icon,
|
|
29
|
+
size
|
|
30
|
+
}: IconProps) => react_jsx_runtime11.JSX.Element;
|
|
31
|
+
}
|
|
32
|
+
type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
33
|
+
type IconProps = {
|
|
34
|
+
icon: LucideIcon;
|
|
35
|
+
size?: number;
|
|
36
|
+
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
37
|
+
//#endregion
|
|
38
|
+
export { ButtonProps as n, ButtonVariant as r, Button as t };
|
|
@@ -0,0 +1,18 @@
|
|
|
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 };
|
|
@@ -0,0 +1,28 @@
|
|
|
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 };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/DropdownButton.d.ts
|
|
5
|
+
declare function DropdownButton({
|
|
6
|
+
id,
|
|
7
|
+
className,
|
|
8
|
+
...props
|
|
9
|
+
}: ComponentPropsWithoutRef<'div'> & {
|
|
10
|
+
id: string;
|
|
11
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
12
|
+
declare namespace DropdownButton {
|
|
13
|
+
var Menu: ({
|
|
14
|
+
className,
|
|
15
|
+
...props
|
|
16
|
+
}: ComponentPropsWithoutRef<"div">) => react_jsx_runtime0.JSX.Element;
|
|
17
|
+
var MenuItem: ({
|
|
18
|
+
children,
|
|
19
|
+
value,
|
|
20
|
+
isExternalLink,
|
|
21
|
+
...props
|
|
22
|
+
}: ComponentPropsWithoutRef<"div"> & {
|
|
23
|
+
children?: React.ReactNode;
|
|
24
|
+
value: string;
|
|
25
|
+
isExternalLink?: boolean;
|
|
26
|
+
}) => react_jsx_runtime0.JSX.Element;
|
|
27
|
+
var MenuItemIcon: ({
|
|
28
|
+
className,
|
|
29
|
+
...props
|
|
30
|
+
}: ComponentPropsWithoutRef<"div">) => react_jsx_runtime0.JSX.Element;
|
|
31
|
+
var MenuItemText: ({
|
|
32
|
+
className,
|
|
33
|
+
subtle,
|
|
34
|
+
...props
|
|
35
|
+
}: ComponentPropsWithoutRef<"span"> & {
|
|
36
|
+
subtle?: boolean;
|
|
37
|
+
}) => react_jsx_runtime0.JSX.Element;
|
|
38
|
+
var PrimaryAction: ({
|
|
39
|
+
className,
|
|
40
|
+
...props
|
|
41
|
+
}: ComponentPropsWithoutRef<"button">) => react_jsx_runtime0.JSX.Element;
|
|
42
|
+
var PrimaryActionText: ({
|
|
43
|
+
children
|
|
44
|
+
}: {
|
|
45
|
+
children?: React.ReactNode;
|
|
46
|
+
}) => react_jsx_runtime0.JSX.Element;
|
|
47
|
+
var Trigger: ({
|
|
48
|
+
className,
|
|
49
|
+
...props
|
|
50
|
+
}: ComponentPropsWithoutRef<"button">) => react_jsx_runtime0.JSX.Element;
|
|
51
|
+
}
|
|
52
|
+
//#endregion
|
|
53
|
+
export { DropdownButton as t };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { ChevronsUpDown, ExternalLink } from "lucide-react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/DropdownButton.tsx
|
|
6
|
+
function PrimaryActionText({ children }) {
|
|
7
|
+
return /* @__PURE__ */ jsx("span", {
|
|
8
|
+
"data-part": "primary-action-text",
|
|
9
|
+
children
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function PrimaryAction({ className,...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx("button", {
|
|
14
|
+
"data-part": "primary-action",
|
|
15
|
+
...props,
|
|
16
|
+
className: clsx("stl-ui-dropdown-button__button stl-ui-dropdown-button--action", className)
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function Trigger({ className,...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx("button", {
|
|
21
|
+
"aria-haspopup": "listbox",
|
|
22
|
+
"aria-expanded": "false",
|
|
23
|
+
"data-part": "trigger",
|
|
24
|
+
...props,
|
|
25
|
+
className: clsx("stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger", className),
|
|
26
|
+
children: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16 })
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function Menu({ className,...props }) {
|
|
30
|
+
return /* @__PURE__ */ jsx("div", {
|
|
31
|
+
"data-state": "closed",
|
|
32
|
+
"data-part": "menu",
|
|
33
|
+
...props,
|
|
34
|
+
className: clsx("stl-ui-dropdown-button__menu", className)
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function MenuItemIcon({ className,...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsx("div", {
|
|
39
|
+
"data-part": "item-icon",
|
|
40
|
+
...props,
|
|
41
|
+
className: clsx("stl-ui-dropdown-button__menu-item-icon", className)
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
function MenuItemText({ className, subtle,...props }) {
|
|
45
|
+
return /* @__PURE__ */ jsx("span", {
|
|
46
|
+
"data-part": "item-text",
|
|
47
|
+
className: clsx(`stl-ui-dropdown-button__menu-item-text`, { "stl-ui-dropdown-button__menu-item-text--subtle": subtle }, className),
|
|
48
|
+
...props
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
function MenuItem({ children, value, isExternalLink,...props }) {
|
|
52
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
53
|
+
"data-part": "item",
|
|
54
|
+
"data-value": value,
|
|
55
|
+
...props,
|
|
56
|
+
className: clsx("stl-ui-dropdown-button__menu-item", props.className),
|
|
57
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
58
|
+
className: "stl-ui-dropdown-button__menu-item-content",
|
|
59
|
+
children
|
|
60
|
+
}), isExternalLink && /* @__PURE__ */ jsx("div", {
|
|
61
|
+
className: "stl-ui-dropdown-button__menu-item-external-link-icon",
|
|
62
|
+
"data-part": "item-external-link-icon",
|
|
63
|
+
children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
|
|
64
|
+
})]
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
function DropdownButton({ id, className,...props }) {
|
|
68
|
+
return /* @__PURE__ */ jsx("div", {
|
|
69
|
+
id,
|
|
70
|
+
...props,
|
|
71
|
+
className: clsx("stl-ui-dropdown-button stl-ui-not-prose not-content", className)
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
DropdownButton.Menu = Menu;
|
|
75
|
+
DropdownButton.MenuItem = MenuItem;
|
|
76
|
+
DropdownButton.MenuItemIcon = MenuItemIcon;
|
|
77
|
+
DropdownButton.MenuItemText = MenuItemText;
|
|
78
|
+
DropdownButton.PrimaryAction = PrimaryAction;
|
|
79
|
+
DropdownButton.PrimaryActionText = PrimaryActionText;
|
|
80
|
+
DropdownButton.Trigger = Trigger;
|
|
81
|
+
|
|
82
|
+
//#endregion
|
|
83
|
+
export { DropdownButton as t };
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export
|
|
3
|
-
export declare function Accordion({ className, children, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
export declare namespace Accordion {
|
|
5
|
-
var Summary: typeof AccordionSummary;
|
|
6
|
-
var Group: typeof AccordionGroup;
|
|
7
|
-
}
|
|
8
|
-
declare function AccordionSummary({ children, className, ...props }: React.ComponentProps<'summary'>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
declare function AccordionGroup({ className, children, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
1
|
+
import { n as AccordionProps, t as Accordion } from "../Accordion-_dikpfLR.js";
|
|
2
|
+
export { Accordion, AccordionProps };
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
const classes = clsx('stl-ui-accordion', className);
|
|
5
|
-
return (_jsx("details", { className: classes, ...props, children: children }));
|
|
6
|
-
}
|
|
7
|
-
function AccordionSummary({ children, className, ...props }) {
|
|
8
|
-
const classes = clsx('stl-ui-accordion__summary', className);
|
|
9
|
-
return (_jsx("summary", { className: classes, ...props, children: children }));
|
|
10
|
-
}
|
|
11
|
-
Accordion.Summary = AccordionSummary;
|
|
12
|
-
function AccordionGroup({ className, children, ...props }) {
|
|
13
|
-
const classes = clsx('stl-ui-accordion-group', className);
|
|
14
|
-
// TODO: boolean `exclusive` prop assigns a unique `name` to each of the child <details> elements
|
|
15
|
-
// For now this can be handled by the user
|
|
16
|
-
return (_jsx("div", { className: classes, ...props, children: children }));
|
|
17
|
-
}
|
|
18
|
-
Accordion.Group = AccordionGroup;
|
|
19
|
-
//# sourceMappingURL=Accordion.js.map
|
|
1
|
+
import { t as Accordion } from "../Accordion-DLQE3Td6.js";
|
|
2
|
+
|
|
3
|
+
export { Accordion };
|
|
@@ -1,27 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export type ButtonVariant = 'outline' | 'ghost' | 'accent' | 'accent-muted' | 'muted' | 'success' | 'destructive' | 'default';
|
|
4
|
-
type BaseProps = {
|
|
5
|
-
variant?: ButtonVariant;
|
|
6
|
-
className?: string;
|
|
7
|
-
children?: React.ReactNode;
|
|
8
|
-
size?: 'sm' | 'lg' | 'default';
|
|
9
|
-
};
|
|
10
|
-
type AnchorBranch = BaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
|
|
11
|
-
href: string;
|
|
12
|
-
};
|
|
13
|
-
type ButtonBranch = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & {
|
|
14
|
-
href?: never;
|
|
15
|
-
};
|
|
16
|
-
export type ButtonProps = AnchorBranch | ButtonBranch;
|
|
17
|
-
export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
-
export declare namespace Button {
|
|
19
|
-
var Label: ({ className, ...rest }: LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
-
var Icon: ({ className, icon: Icon, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
-
}
|
|
22
|
-
type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
23
|
-
type IconProps = {
|
|
24
|
-
icon: LucideIcon;
|
|
25
|
-
size?: number;
|
|
26
|
-
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
27
|
-
export {};
|
|
1
|
+
import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-sTZ6xvkU.js";
|
|
2
|
+
export { Button, ButtonProps, ButtonVariant };
|
|
@@ -1,33 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
// (or radix-ui/react-slot). In .astro, children are passed as static HTML elements
|
|
5
|
-
// rather than React elements, so they can’t be cloned or modified to add class names.
|
|
6
|
-
export function Button(props) {
|
|
7
|
-
const { variant, children } = 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
|
-
}, 'not-content', 'stl-ui-not-prose', props.className);
|
|
20
|
-
if ('href' in props) {
|
|
21
|
-
const { href, ...rest } = props;
|
|
22
|
-
return (_jsx("a", { href: href, ...rest, className: classes, children: children }));
|
|
23
|
-
}
|
|
24
|
-
const { type, ...rest } = props;
|
|
25
|
-
return (_jsx("button", { type: type ?? 'button', ...rest, className: classes, children: children }));
|
|
26
|
-
}
|
|
27
|
-
Button.Label = function ButtonLabel({ className, ...rest }) {
|
|
28
|
-
return _jsx("span", { className: clsx('stl-ui-button-label leading-none', className), ...rest });
|
|
29
|
-
};
|
|
30
|
-
Button.Icon = function ButtonIcon({ className, icon: Icon, size = 18 }) {
|
|
31
|
-
return (_jsx("span", { className: clsx('stl-ui-button__icon', className), children: _jsx(Icon, { size: size }) }));
|
|
32
|
-
};
|
|
33
|
-
//# sourceMappingURL=Button.js.map
|
|
1
|
+
import { t as Button } from "../Button-DBhd6kU7.js";
|
|
2
|
+
|
|
3
|
+
export { Button };
|
|
@@ -1,8 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export
|
|
3
|
-
export type CalloutProps = {
|
|
4
|
-
variant?: CalloutVariant;
|
|
5
|
-
className?: string;
|
|
6
|
-
children?: React.ReactNode;
|
|
7
|
-
} & Omit<React.ComponentProps<'aside'>, 'className' | 'children'>;
|
|
8
|
-
export declare function Callout({ variant, className, children, ...props }: CalloutProps): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-Dsp2nbSy.js";
|
|
2
|
+
export { Callout, CalloutProps, CalloutVariant };
|
|
@@ -1,16 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export function Callout({ variant = 'info', className, children, ...props }) {
|
|
5
|
-
const classes = clsx('stl-ui-callout', `stl-ui-callout--${variant}`, className);
|
|
6
|
-
const Icon = {
|
|
7
|
-
info: Info,
|
|
8
|
-
note: CircleAlert,
|
|
9
|
-
tip: Lightbulb,
|
|
10
|
-
success: Check,
|
|
11
|
-
warning: TriangleAlert,
|
|
12
|
-
danger: OctagonAlert,
|
|
13
|
-
}[variant];
|
|
14
|
-
return (_jsxs("aside", { className: classes, ...props, children: [_jsx(Icon, { className: "stl-ui-callout__icon" }), _jsx("div", { className: "stl-ui-callout__content", children: children })] }));
|
|
15
|
-
}
|
|
16
|
-
//# sourceMappingURL=Callout.js.map
|
|
1
|
+
import { t as Callout } from "../Callout-UZQRuCQ5.js";
|
|
2
|
+
|
|
3
|
+
export { Callout };
|
|
@@ -1,21 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export
|
|
3
|
-
id: string;
|
|
4
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
export declare namespace DropdownButton {
|
|
6
|
-
var Menu: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
var MenuItem: ({ children, value, isExternalLink, ...props }: ComponentPropsWithoutRef<"div"> & {
|
|
8
|
-
children?: React.ReactNode;
|
|
9
|
-
value: string;
|
|
10
|
-
isExternalLink?: boolean;
|
|
11
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
var MenuItemIcon: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
var MenuItemText: ({ className, subtle, ...props }: ComponentPropsWithoutRef<"span"> & {
|
|
14
|
-
subtle?: boolean;
|
|
15
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
var PrimaryAction: ({ className, ...props }: ComponentPropsWithoutRef<"button">) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
var PrimaryActionText: ({ children }: {
|
|
18
|
-
children?: React.ReactNode;
|
|
19
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
-
var Trigger: ({ className, ...props }: ComponentPropsWithoutRef<"button">) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
-
}
|
|
1
|
+
import { t as DropdownButton } from "../DropdownButton-CNJ5NyBS.js";
|
|
2
|
+
export { DropdownButton };
|
|
@@ -1,37 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
function PrimaryActionText({ children }) {
|
|
5
|
-
return _jsx("span", { "data-part": "primary-action-text", children: children });
|
|
6
|
-
}
|
|
7
|
-
function PrimaryAction({ className, ...props }) {
|
|
8
|
-
return (_jsx("button", { "data-part": "primary-action", ...props, className: clsx('stl-ui-dropdown-button__button stl-ui-dropdown-button--action', className) }));
|
|
9
|
-
}
|
|
10
|
-
function Trigger({ className, ...props }) {
|
|
11
|
-
return (_jsx("button", { "aria-haspopup": "listbox", "aria-expanded": "false", "data-part": "trigger", ...props, className: clsx('stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger', className), children: _jsx(ChevronsUpDown, { size: 16 }) }));
|
|
12
|
-
}
|
|
13
|
-
function Menu({ className, ...props }) {
|
|
14
|
-
return (_jsx("div", { "data-state": "closed", "data-part": "menu", ...props, className: clsx('stl-ui-dropdown-button__menu', className) }));
|
|
15
|
-
}
|
|
16
|
-
function MenuItemIcon({ className, ...props }) {
|
|
17
|
-
return (_jsx("div", { "data-part": "item-icon", ...props, className: clsx('stl-ui-dropdown-button__menu-item-icon', className) }));
|
|
18
|
-
}
|
|
19
|
-
function MenuItemText({ className, subtle, ...props }) {
|
|
20
|
-
return (_jsx("span", { "data-part": "item-text", className: clsx(`stl-ui-dropdown-button__menu-item-text`, {
|
|
21
|
-
'stl-ui-dropdown-button__menu-item-text--subtle': subtle,
|
|
22
|
-
}, className), ...props }));
|
|
23
|
-
}
|
|
24
|
-
function MenuItem({ children, value, isExternalLink, ...props }) {
|
|
25
|
-
return (_jsxs("div", { "data-part": "item", "data-value": value, ...props, className: clsx('stl-ui-dropdown-button__menu-item', props.className), children: [_jsx("div", { className: "stl-ui-dropdown-button__menu-item-content", children: children }), isExternalLink && (_jsx("div", { className: "stl-ui-dropdown-button__menu-item-external-link-icon", "data-part": "item-external-link-icon", children: _jsx(ExternalLink, { size: 16 }) }))] }));
|
|
26
|
-
}
|
|
27
|
-
export function DropdownButton({ id, className, ...props }) {
|
|
28
|
-
return (_jsx("div", { id: id, ...props, className: clsx('stl-ui-dropdown-button stl-ui-not-prose not-content', className) }));
|
|
29
|
-
}
|
|
30
|
-
DropdownButton.Menu = Menu;
|
|
31
|
-
DropdownButton.MenuItem = MenuItem;
|
|
32
|
-
DropdownButton.MenuItemIcon = MenuItemIcon;
|
|
33
|
-
DropdownButton.MenuItemText = MenuItemText;
|
|
34
|
-
DropdownButton.PrimaryAction = PrimaryAction;
|
|
35
|
-
DropdownButton.PrimaryActionText = PrimaryActionText;
|
|
36
|
-
DropdownButton.Trigger = Trigger;
|
|
37
|
-
//# sourceMappingURL=DropdownButton.js.map
|
|
1
|
+
import { t as DropdownButton } from "../DropdownButton-CStYzJ6s.js";
|
|
2
|
+
|
|
3
|
+
export { DropdownButton };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { n as AccordionProps, t as Accordion } from "./Accordion-_dikpfLR.js";
|
|
2
|
+
import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-sTZ6xvkU.js";
|
|
3
|
+
import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-Dsp2nbSy.js";
|
|
4
|
+
import { t as DropdownButton } from "./DropdownButton-CNJ5NyBS.js";
|
|
5
|
+
export { Accordion, AccordionProps, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, DropdownButton };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { t as Button } from "./Button-DBhd6kU7.js";
|
|
2
|
+
import { t as DropdownButton } from "./DropdownButton-CStYzJ6s.js";
|
|
3
|
+
import { t as Callout } from "./Callout-UZQRuCQ5.js";
|
|
4
|
+
import { t as Accordion } from "./Accordion-DLQE3Td6.js";
|
|
5
|
+
|
|
6
|
+
export { Accordion, Button, Callout, DropdownButton };
|
package/dist/scripts/index.d.ts
CHANGED
|
@@ -1 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/scripts/dropdown-button.d.ts
|
|
2
|
+
declare function initDropdownButton({
|
|
3
|
+
dropdownId,
|
|
4
|
+
onSelect,
|
|
5
|
+
onPrimaryAction
|
|
6
|
+
}: {
|
|
7
|
+
dropdownId: string;
|
|
8
|
+
onSelect: (value: string) => void;
|
|
9
|
+
onPrimaryAction: (primaryActionElement: Element) => void;
|
|
10
|
+
}): void;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { initDropdownButton };
|