@mastra/playground-ui 53.0.1-alpha.0 → 53.1.0-alpha.1
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/SettingsLayout.cjs.js +27 -13
- package/dist/components/SettingsLayout.cjs.js.map +1 -1
- package/dist/components/SettingsLayout.es.js +27 -13
- package/dist/components/SettingsLayout.es.js.map +1 -1
- package/dist/components/ThreadList.cjs.js +4 -4
- package/dist/components/ThreadList.cjs.js.map +1 -1
- package/dist/components/ThreadList.es.js +4 -4
- package/dist/components/ThreadList.es.js.map +1 -1
- package/dist/src/ds/components/SettingsLayout/settings-layout.d.ts +4 -1
- package/dist/src/ds/components/SettingsLayout/settings-layout.stories.d.ts +19 -1
- package/dist/style.css +0 -4
- package/package.json +7 -7
|
@@ -6,9 +6,17 @@ const jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
const Txt = require('../Txt-D5Y_H2a0.cjs');
|
|
7
7
|
const utils_cn = require('../cn-DCPcv4xv.cjs');
|
|
8
8
|
|
|
9
|
-
function SettingsLayout({
|
|
9
|
+
function SettingsLayout({
|
|
10
|
+
title,
|
|
11
|
+
titleAccessory,
|
|
12
|
+
description,
|
|
13
|
+
action,
|
|
14
|
+
inset = false,
|
|
15
|
+
variant,
|
|
16
|
+
children
|
|
17
|
+
}) {
|
|
10
18
|
if (title === void 0 || title === null) {
|
|
11
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
|
+
return variant === "header" ? children : /* @__PURE__ */ jsxRuntime.jsx(
|
|
12
20
|
"div",
|
|
13
21
|
{
|
|
14
22
|
"data-slot": "settings-layout-content",
|
|
@@ -23,21 +31,27 @@ function SettingsLayout({ title, action, inset = false, children }) {
|
|
|
23
31
|
{
|
|
24
32
|
"data-slot": "settings-page-header",
|
|
25
33
|
className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-6 pb-0 sm:px-6 sm:pt-12",
|
|
26
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex min-w-0 flex-wrap items-
|
|
27
|
-
/* @__PURE__ */ jsxRuntime.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex min-w-0 flex-wrap items-start justify-between gap-4", inset && "pl-4"), children: [
|
|
35
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 gap-2", children: [
|
|
36
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
|
|
37
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
38
|
+
Txt.Txt,
|
|
39
|
+
{
|
|
40
|
+
as: "h1",
|
|
41
|
+
variant: "header-md",
|
|
42
|
+
className: utils_cn.cn("min-w-0 truncate", "font-sans font-medium tracking-normal text-neutral4"),
|
|
43
|
+
children: title
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
titleAccessory !== void 0 && titleAccessory !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: titleAccessory }) : null
|
|
47
|
+
] }),
|
|
48
|
+
description !== void 0 && description !== null ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "ui-md", className: "text-neutral4 m-0 leading-tight wrap-break-word", children: description }) : null
|
|
49
|
+
] }),
|
|
36
50
|
action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : null
|
|
37
51
|
] })
|
|
38
52
|
}
|
|
39
53
|
),
|
|
40
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
+
variant === "header" ? children : /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
55
|
"div",
|
|
42
56
|
{
|
|
43
57
|
"data-slot": "settings-layout-content",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingsLayout.cjs.js","sources":["../../src/ds/components/SettingsLayout/settings-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n title?: ReactNode;\n action?: ReactNode;\n inset?: boolean;\n children: ReactNode;\n}\n\nexport function SettingsLayout({
|
|
1
|
+
{"version":3,"file":"SettingsLayout.cjs.js","sources":["../../src/ds/components/SettingsLayout/settings-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n title?: ReactNode;\n titleAccessory?: ReactNode;\n description?: ReactNode;\n action?: ReactNode;\n inset?: boolean;\n variant?: 'default' | 'header';\n children: ReactNode;\n}\n\nexport function SettingsLayout({\n title,\n titleAccessory,\n description,\n action,\n inset = false,\n variant,\n children,\n}: SettingsLayoutProps) {\n if (title === undefined || title === null) {\n return variant === 'header' ? (\n children\n ) : (\n <div\n data-slot=\"settings-layout-content\"\n className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-6 sm:px-6 sm:py-8\"\n >\n <div className=\"min-w-0 space-y-14\">{children}</div>\n </div>\n );\n }\n\n return (\n <>\n <div\n data-slot=\"settings-page-header\"\n className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-6 pb-0 sm:px-6 sm:pt-12\"\n >\n <div className={cn('flex min-w-0 flex-wrap items-start justify-between gap-4', inset && 'pl-4')}>\n <div className=\"grid min-w-0 gap-2\">\n <div className=\"flex min-w-0 items-center gap-2\">\n <Txt\n as=\"h1\"\n variant=\"header-md\"\n className={cn('min-w-0 truncate', 'font-sans font-medium tracking-normal text-neutral4')}\n >\n {title}\n </Txt>\n {titleAccessory !== undefined && titleAccessory !== null ? (\n <div className=\"shrink-0\">{titleAccessory}</div>\n ) : null}\n </div>\n {description !== undefined && description !== null ? (\n <Txt as=\"p\" variant=\"ui-md\" className=\"text-neutral4 m-0 leading-tight wrap-break-word\">\n {description}\n </Txt>\n ) : null}\n </div>\n {action ? <div className=\"shrink-0\">{action}</div> : null}\n </div>\n </div>\n {variant === 'header' ? (\n children\n ) : (\n <div\n data-slot=\"settings-layout-content\"\n className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-6 sm:px-6 sm:py-8\"\n >\n <div className=\"min-w-0 space-y-8\">{children}</div>\n </div>\n )}\n </>\n );\n}\n"],"names":["jsx","jsxs","Fragment","cn","Txt"],"mappings":";;;;;;;;AAcO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,OAAA,KAAY,WACjB,QAAA,mBAEAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8EAAA;AAAA,QAEV,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EAAsB,QAAA,EAAS;AAAA;AAAA,KAChD;AAAA,EAEJ;AAEA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAF,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,SAAA,EAAU,kFAAA;AAAA,QAEV,0CAAC,KAAA,EAAA,EAAI,SAAA,EAAWG,YAAG,0DAAA,EAA4D,KAAA,IAAS,MAAM,CAAA,EAC5F,QAAA,EAAA;AAAA,0BAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oBAAA,EACb,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,8BAAAD,cAAA;AAAA,gBAACI,OAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,IAAA;AAAA,kBACH,OAAA,EAAQ,WAAA;AAAA,kBACR,SAAA,EAAWD,WAAA,CAAG,kBAAA,EAAoB,qDAAqD,CAAA;AAAA,kBAEtF,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cACC,cAAA,KAAmB,UAAa,cAAA,KAAmB,IAAA,kCACjD,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,cAAA,EAAe,CAAA,GACxC;AAAA,aAAA,EACN,CAAA;AAAA,YACC,WAAA,KAAgB,MAAA,IAAa,WAAA,KAAgB,IAAA,mBAC5CH,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,iDAAA,EACnC,uBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,yBAASJ,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA,SAAA,EACvD;AAAA;AAAA,KACF;AAAA,IACC,OAAA,KAAY,WACX,QAAA,mBAEAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8EAAA;AAAA,QAEV,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAS;AAAA;AAAA;AAC/C,GAAA,EAEJ,CAAA;AAEJ;;;;"}
|
|
@@ -2,9 +2,17 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import { T as Txt } from '../Txt-ByUf-9Ic.js';
|
|
3
3
|
import { c as cn } from '../cn-B4oPhFx9.js';
|
|
4
4
|
|
|
5
|
-
function SettingsLayout({
|
|
5
|
+
function SettingsLayout({
|
|
6
|
+
title,
|
|
7
|
+
titleAccessory,
|
|
8
|
+
description,
|
|
9
|
+
action,
|
|
10
|
+
inset = false,
|
|
11
|
+
variant,
|
|
12
|
+
children
|
|
13
|
+
}) {
|
|
6
14
|
if (title === void 0 || title === null) {
|
|
7
|
-
return /* @__PURE__ */ jsx(
|
|
15
|
+
return variant === "header" ? children : /* @__PURE__ */ jsx(
|
|
8
16
|
"div",
|
|
9
17
|
{
|
|
10
18
|
"data-slot": "settings-layout-content",
|
|
@@ -19,21 +27,27 @@ function SettingsLayout({ title, action, inset = false, children }) {
|
|
|
19
27
|
{
|
|
20
28
|
"data-slot": "settings-page-header",
|
|
21
29
|
className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-6 pb-0 sm:px-6 sm:pt-12",
|
|
22
|
-
children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-wrap items-
|
|
23
|
-
/* @__PURE__ */
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-wrap items-start justify-between gap-4", inset && "pl-4"), children: [
|
|
31
|
+
/* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-2", children: [
|
|
32
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
|
|
33
|
+
/* @__PURE__ */ jsx(
|
|
34
|
+
Txt,
|
|
35
|
+
{
|
|
36
|
+
as: "h1",
|
|
37
|
+
variant: "header-md",
|
|
38
|
+
className: cn("min-w-0 truncate", "font-sans font-medium tracking-normal text-neutral4"),
|
|
39
|
+
children: title
|
|
40
|
+
}
|
|
41
|
+
),
|
|
42
|
+
titleAccessory !== void 0 && titleAccessory !== null ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: titleAccessory }) : null
|
|
43
|
+
] }),
|
|
44
|
+
description !== void 0 && description !== null ? /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-neutral4 m-0 leading-tight wrap-break-word", children: description }) : null
|
|
45
|
+
] }),
|
|
32
46
|
action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
|
|
33
47
|
] })
|
|
34
48
|
}
|
|
35
49
|
),
|
|
36
|
-
/* @__PURE__ */ jsx(
|
|
50
|
+
variant === "header" ? children : /* @__PURE__ */ jsx(
|
|
37
51
|
"div",
|
|
38
52
|
{
|
|
39
53
|
"data-slot": "settings-layout-content",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingsLayout.es.js","sources":["../../src/ds/components/SettingsLayout/settings-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n title?: ReactNode;\n action?: ReactNode;\n inset?: boolean;\n children: ReactNode;\n}\n\nexport function SettingsLayout({
|
|
1
|
+
{"version":3,"file":"SettingsLayout.es.js","sources":["../../src/ds/components/SettingsLayout/settings-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n title?: ReactNode;\n titleAccessory?: ReactNode;\n description?: ReactNode;\n action?: ReactNode;\n inset?: boolean;\n variant?: 'default' | 'header';\n children: ReactNode;\n}\n\nexport function SettingsLayout({\n title,\n titleAccessory,\n description,\n action,\n inset = false,\n variant,\n children,\n}: SettingsLayoutProps) {\n if (title === undefined || title === null) {\n return variant === 'header' ? (\n children\n ) : (\n <div\n data-slot=\"settings-layout-content\"\n className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-6 sm:px-6 sm:py-8\"\n >\n <div className=\"min-w-0 space-y-14\">{children}</div>\n </div>\n );\n }\n\n return (\n <>\n <div\n data-slot=\"settings-page-header\"\n className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-6 pb-0 sm:px-6 sm:pt-12\"\n >\n <div className={cn('flex min-w-0 flex-wrap items-start justify-between gap-4', inset && 'pl-4')}>\n <div className=\"grid min-w-0 gap-2\">\n <div className=\"flex min-w-0 items-center gap-2\">\n <Txt\n as=\"h1\"\n variant=\"header-md\"\n className={cn('min-w-0 truncate', 'font-sans font-medium tracking-normal text-neutral4')}\n >\n {title}\n </Txt>\n {titleAccessory !== undefined && titleAccessory !== null ? (\n <div className=\"shrink-0\">{titleAccessory}</div>\n ) : null}\n </div>\n {description !== undefined && description !== null ? (\n <Txt as=\"p\" variant=\"ui-md\" className=\"text-neutral4 m-0 leading-tight wrap-break-word\">\n {description}\n </Txt>\n ) : null}\n </div>\n {action ? <div className=\"shrink-0\">{action}</div> : null}\n </div>\n </div>\n {variant === 'header' ? (\n children\n ) : (\n <div\n data-slot=\"settings-layout-content\"\n className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-6 sm:px-6 sm:py-8\"\n >\n <div className=\"min-w-0 space-y-8\">{children}</div>\n </div>\n )}\n </>\n );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,OAAA,KAAY,WACjB,QAAA,mBAEA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8EAAA;AAAA,QAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EAAsB,QAAA,EAAS;AAAA;AAAA,KAChD;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,SAAA,EAAU,kFAAA;AAAA,QAEV,+BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,0DAAA,EAA4D,KAAA,IAAS,MAAM,CAAA,EAC5F,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,IAAA;AAAA,kBACH,OAAA,EAAQ,WAAA;AAAA,kBACR,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,qDAAqD,CAAA;AAAA,kBAEtF,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cACC,cAAA,KAAmB,UAAa,cAAA,KAAmB,IAAA,uBACjD,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,cAAA,EAAe,CAAA,GACxC;AAAA,aAAA,EACN,CAAA;AAAA,YACC,WAAA,KAAgB,MAAA,IAAa,WAAA,KAAgB,IAAA,mBAC5C,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,iDAAA,EACnC,uBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA,SAAA,EACvD;AAAA;AAAA,KACF;AAAA,IACC,OAAA,KAAY,WACX,QAAA,mBAEA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8EAAA;AAAA,QAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAS;AAAA;AAAA;AAC/C,GAAA,EAEJ,CAAA;AAEJ;;;;"}
|
|
@@ -14,7 +14,7 @@ const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded =
|
|
|
14
14
|
{
|
|
15
15
|
"aria-label": ariaLabel,
|
|
16
16
|
className: utils_cn.cn(
|
|
17
|
-
"h-full overflow-y-auto p-1",
|
|
17
|
+
"flex h-full flex-col gap-1 overflow-y-auto p-1",
|
|
18
18
|
!embedded && "rounded-studio-panel border border-border1/50 bg-surface3"
|
|
19
19
|
),
|
|
20
20
|
children
|
|
@@ -22,10 +22,10 @@ const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded =
|
|
|
22
22
|
) });
|
|
23
23
|
};
|
|
24
24
|
const ThreadListNewItem = ({ as, href, to, children }) => {
|
|
25
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { as, href, to, variant: "ghost", className: "w-full justify-start rounded-xl", children });
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { as, href, to, variant: "ghost", className: "w-full justify-start rounded-xl px-3", children });
|
|
26
26
|
};
|
|
27
27
|
const ThreadListSeparator = () => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", "aria-orientation": "horizontal", className: "bg-border1/40 -mx-1 my-1 h-px" });
|
|
28
|
-
const ThreadListItems = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-col gap-
|
|
28
|
+
const ThreadListItems = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-col gap-1", "data-testid": "thread-list", children });
|
|
29
29
|
const ThreadListItem = ({
|
|
30
30
|
as,
|
|
31
31
|
href,
|
|
@@ -47,7 +47,7 @@ const ThreadListItem = ({
|
|
|
47
47
|
onClick,
|
|
48
48
|
variant: "ghost",
|
|
49
49
|
className: utils_cn.cn(
|
|
50
|
-
"
|
|
50
|
+
"w-full min-w-0 justify-start rounded-xl px-3 text-left",
|
|
51
51
|
onDelete && "pr-9",
|
|
52
52
|
isActive && "bg-surface4 text-neutral6",
|
|
53
53
|
className
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThreadList.cjs.js","sources":["../../src/ds/components/ThreadList/thread-list.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ElementType, MouseEvent, ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../Button';\nimport { Txt } from '../Txt';\n\nexport interface ThreadListProps {\n children: ReactNode;\n 'aria-label'?: string;\n /**\n * When true, drops the standalone block chrome (background, border, rounded corners, inset)\n * so the list can render flush inside an outer container without nesting a second box.\n */\n embedded?: boolean;\n}\n\nexport const ThreadList = ({ children, 'aria-label': ariaLabel = 'Threads', embedded = false }: ThreadListProps) => {\n return (\n <div className={cn('size-full', !embedded && 'pb-2 pl-2')}>\n <nav\n aria-label={ariaLabel}\n className={cn(\n 'h-full overflow-y-auto p-1',\n !embedded && 'rounded-studio-panel border border-border1/50 bg-surface3',\n )}\n >\n {children}\n </nav>\n </div>\n );\n};\n\nexport interface ThreadListNewItemProps {\n as?: ElementType;\n href?: string;\n to?: string;\n children: ReactNode;\n}\n\nexport const ThreadListNewItem = ({ as, href, to, children }: ThreadListNewItemProps) => {\n return (\n <Button as={as} href={href} to={to} variant=\"ghost\" className=\"w-full justify-start rounded-xl\">\n {children}\n </Button>\n );\n};\n\nexport const ThreadListSeparator = () => (\n <div role=\"separator\" aria-orientation=\"horizontal\" className=\"bg-border1/40 -mx-1 my-1 h-px\" />\n);\n\nexport interface ThreadListItemsProps {\n children: ReactNode;\n}\n\nexport const ThreadListItems = ({ children }: ThreadListItemsProps) => (\n <ol className=\"flex flex-col gap-
|
|
1
|
+
{"version":3,"file":"ThreadList.cjs.js","sources":["../../src/ds/components/ThreadList/thread-list.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ElementType, MouseEvent, ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../Button';\nimport { Txt } from '../Txt';\n\nexport interface ThreadListProps {\n children: ReactNode;\n 'aria-label'?: string;\n /**\n * When true, drops the standalone block chrome (background, border, rounded corners, inset)\n * so the list can render flush inside an outer container without nesting a second box.\n */\n embedded?: boolean;\n}\n\nexport const ThreadList = ({ children, 'aria-label': ariaLabel = 'Threads', embedded = false }: ThreadListProps) => {\n return (\n <div className={cn('size-full', !embedded && 'pb-2 pl-2')}>\n <nav\n aria-label={ariaLabel}\n className={cn(\n 'flex h-full flex-col gap-1 overflow-y-auto p-1',\n !embedded && 'rounded-studio-panel border border-border1/50 bg-surface3',\n )}\n >\n {children}\n </nav>\n </div>\n );\n};\n\nexport interface ThreadListNewItemProps {\n as?: ElementType;\n href?: string;\n to?: string;\n children: ReactNode;\n}\n\nexport const ThreadListNewItem = ({ as, href, to, children }: ThreadListNewItemProps) => {\n return (\n <Button as={as} href={href} to={to} variant=\"ghost\" className=\"w-full justify-start rounded-xl px-3\">\n {children}\n </Button>\n );\n};\n\nexport const ThreadListSeparator = () => (\n <div role=\"separator\" aria-orientation=\"horizontal\" className=\"bg-border1/40 -mx-1 my-1 h-px\" />\n);\n\nexport interface ThreadListItemsProps {\n children: ReactNode;\n}\n\nexport const ThreadListItems = ({ children }: ThreadListItemsProps) => (\n <ol className=\"flex flex-col gap-1\" data-testid=\"thread-list\">\n {children}\n </ol>\n);\n\nexport interface ThreadListItemProps {\n as?: ElementType;\n href?: string;\n to?: string;\n isActive?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onDelete?: () => void;\n deleteLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nexport const ThreadListItem = ({\n as,\n href,\n to,\n isActive,\n onClick,\n onDelete,\n deleteLabel = 'delete',\n className,\n children,\n}: ThreadListItemProps) => {\n return (\n <li className=\"group relative\">\n <Button\n as={as}\n href={href}\n to={to}\n onClick={onClick}\n variant=\"ghost\"\n className={cn(\n 'w-full min-w-0 justify-start rounded-xl px-3 text-left',\n onDelete && 'pr-9',\n isActive && 'bg-surface4 text-neutral6',\n className,\n )}\n >\n <span className=\"min-w-0 flex-1\">{children}</span>\n </Button>\n\n {onDelete && (\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n className=\"absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100\"\n onClick={onDelete}\n aria-label={deleteLabel}\n >\n <X />\n </Button>\n )}\n </li>\n );\n};\n\nexport interface ThreadListEmptyProps {\n children: ReactNode;\n}\n\nexport const ThreadListEmpty = ({ children }: ThreadListEmptyProps) => {\n return (\n <Txt as=\"p\" variant=\"ui-sm\" className=\"text-neutral3 px-5 py-3\">\n {children}\n </Txt>\n );\n};\n"],"names":["jsx","cn","Button","jsxs","X","Txt"],"mappings":";;;;;;;;;;AAiBO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,cAAc,SAAA,GAAY,SAAA,EAAW,QAAA,GAAW,KAAA,EAAM,KAAuB;AAClH,EAAA,uBACEA,cAAA,CAAC,SAAI,SAAA,EAAWC,WAAA,CAAG,aAAa,CAAC,QAAA,IAAY,WAAW,CAAA,EACtD,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAWC,WAAA;AAAA,QACT,gDAAA;AAAA,QACA,CAAC,QAAA,IAAY;AAAA,OACf;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AASO,MAAM,oBAAoB,CAAC,EAAE,IAAI,IAAA,EAAM,EAAA,EAAI,UAAS,KAA8B;AACvF,EAAA,uBACED,cAAA,CAACE,iBAAO,EAAA,EAAQ,IAAA,EAAY,IAAQ,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,sCAAA,EAC3D,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,mBAAA,GAAsB,sBACjCF,cAAA,CAAC,KAAA,EAAA,EAAI,MAAK,WAAA,EAAY,kBAAA,EAAiB,YAAA,EAAa,SAAA,EAAU,+BAAA,EAAgC;AAOzF,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,qBACzCA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qBAAA,EAAsB,aAAA,EAAY,aAAA,EAC7C,QAAA,EACH;AAeK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,uBACEG,eAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,oBAAAH,cAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,IAAA;AAAA,QACA,EAAA;AAAA,QACA,OAAA;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,SAAA,EAAWD,WAAA;AAAA,UACT,wDAAA;AAAA,UACA,QAAA,IAAY,MAAA;AAAA,UACZ,QAAA,IAAY,2BAAA;AAAA,UACZ;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAS;AAAA;AAAA,KAC7C;AAAA,IAEC,QAAA,oBACCA,cAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAU,+HAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,YAAA,EAAY,WAAA;AAAA,QAEZ,yCAACE,aAAA,EAAA,EAAE;AAAA;AAAA;AACL,GAAA,EAEJ,CAAA;AAEJ;AAMO,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,KAA4B;AACrE,EAAA,uBACEJ,cAAA,CAACK,WAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,OAAA,EAAQ,SAAA,EAAU,2BACnC,QAAA,EACH,CAAA;AAEJ;;;;;;;;;"}
|
|
@@ -10,7 +10,7 @@ const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded =
|
|
|
10
10
|
{
|
|
11
11
|
"aria-label": ariaLabel,
|
|
12
12
|
className: cn(
|
|
13
|
-
"h-full overflow-y-auto p-1",
|
|
13
|
+
"flex h-full flex-col gap-1 overflow-y-auto p-1",
|
|
14
14
|
!embedded && "rounded-studio-panel border border-border1/50 bg-surface3"
|
|
15
15
|
),
|
|
16
16
|
children
|
|
@@ -18,10 +18,10 @@ const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded =
|
|
|
18
18
|
) });
|
|
19
19
|
};
|
|
20
20
|
const ThreadListNewItem = ({ as, href, to, children }) => {
|
|
21
|
-
return /* @__PURE__ */ jsx(Button, { as, href, to, variant: "ghost", className: "w-full justify-start rounded-xl", children });
|
|
21
|
+
return /* @__PURE__ */ jsx(Button, { as, href, to, variant: "ghost", className: "w-full justify-start rounded-xl px-3", children });
|
|
22
22
|
};
|
|
23
23
|
const ThreadListSeparator = () => /* @__PURE__ */ jsx("div", { role: "separator", "aria-orientation": "horizontal", className: "bg-border1/40 -mx-1 my-1 h-px" });
|
|
24
|
-
const ThreadListItems = ({ children }) => /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-
|
|
24
|
+
const ThreadListItems = ({ children }) => /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-1", "data-testid": "thread-list", children });
|
|
25
25
|
const ThreadListItem = ({
|
|
26
26
|
as,
|
|
27
27
|
href,
|
|
@@ -43,7 +43,7 @@ const ThreadListItem = ({
|
|
|
43
43
|
onClick,
|
|
44
44
|
variant: "ghost",
|
|
45
45
|
className: cn(
|
|
46
|
-
"
|
|
46
|
+
"w-full min-w-0 justify-start rounded-xl px-3 text-left",
|
|
47
47
|
onDelete && "pr-9",
|
|
48
48
|
isActive && "bg-surface4 text-neutral6",
|
|
49
49
|
className
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThreadList.es.js","sources":["../../src/ds/components/ThreadList/thread-list.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ElementType, MouseEvent, ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../Button';\nimport { Txt } from '../Txt';\n\nexport interface ThreadListProps {\n children: ReactNode;\n 'aria-label'?: string;\n /**\n * When true, drops the standalone block chrome (background, border, rounded corners, inset)\n * so the list can render flush inside an outer container without nesting a second box.\n */\n embedded?: boolean;\n}\n\nexport const ThreadList = ({ children, 'aria-label': ariaLabel = 'Threads', embedded = false }: ThreadListProps) => {\n return (\n <div className={cn('size-full', !embedded && 'pb-2 pl-2')}>\n <nav\n aria-label={ariaLabel}\n className={cn(\n 'h-full overflow-y-auto p-1',\n !embedded && 'rounded-studio-panel border border-border1/50 bg-surface3',\n )}\n >\n {children}\n </nav>\n </div>\n );\n};\n\nexport interface ThreadListNewItemProps {\n as?: ElementType;\n href?: string;\n to?: string;\n children: ReactNode;\n}\n\nexport const ThreadListNewItem = ({ as, href, to, children }: ThreadListNewItemProps) => {\n return (\n <Button as={as} href={href} to={to} variant=\"ghost\" className=\"w-full justify-start rounded-xl\">\n {children}\n </Button>\n );\n};\n\nexport const ThreadListSeparator = () => (\n <div role=\"separator\" aria-orientation=\"horizontal\" className=\"bg-border1/40 -mx-1 my-1 h-px\" />\n);\n\nexport interface ThreadListItemsProps {\n children: ReactNode;\n}\n\nexport const ThreadListItems = ({ children }: ThreadListItemsProps) => (\n <ol className=\"flex flex-col gap-
|
|
1
|
+
{"version":3,"file":"ThreadList.es.js","sources":["../../src/ds/components/ThreadList/thread-list.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ElementType, MouseEvent, ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../Button';\nimport { Txt } from '../Txt';\n\nexport interface ThreadListProps {\n children: ReactNode;\n 'aria-label'?: string;\n /**\n * When true, drops the standalone block chrome (background, border, rounded corners, inset)\n * so the list can render flush inside an outer container without nesting a second box.\n */\n embedded?: boolean;\n}\n\nexport const ThreadList = ({ children, 'aria-label': ariaLabel = 'Threads', embedded = false }: ThreadListProps) => {\n return (\n <div className={cn('size-full', !embedded && 'pb-2 pl-2')}>\n <nav\n aria-label={ariaLabel}\n className={cn(\n 'flex h-full flex-col gap-1 overflow-y-auto p-1',\n !embedded && 'rounded-studio-panel border border-border1/50 bg-surface3',\n )}\n >\n {children}\n </nav>\n </div>\n );\n};\n\nexport interface ThreadListNewItemProps {\n as?: ElementType;\n href?: string;\n to?: string;\n children: ReactNode;\n}\n\nexport const ThreadListNewItem = ({ as, href, to, children }: ThreadListNewItemProps) => {\n return (\n <Button as={as} href={href} to={to} variant=\"ghost\" className=\"w-full justify-start rounded-xl px-3\">\n {children}\n </Button>\n );\n};\n\nexport const ThreadListSeparator = () => (\n <div role=\"separator\" aria-orientation=\"horizontal\" className=\"bg-border1/40 -mx-1 my-1 h-px\" />\n);\n\nexport interface ThreadListItemsProps {\n children: ReactNode;\n}\n\nexport const ThreadListItems = ({ children }: ThreadListItemsProps) => (\n <ol className=\"flex flex-col gap-1\" data-testid=\"thread-list\">\n {children}\n </ol>\n);\n\nexport interface ThreadListItemProps {\n as?: ElementType;\n href?: string;\n to?: string;\n isActive?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onDelete?: () => void;\n deleteLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nexport const ThreadListItem = ({\n as,\n href,\n to,\n isActive,\n onClick,\n onDelete,\n deleteLabel = 'delete',\n className,\n children,\n}: ThreadListItemProps) => {\n return (\n <li className=\"group relative\">\n <Button\n as={as}\n href={href}\n to={to}\n onClick={onClick}\n variant=\"ghost\"\n className={cn(\n 'w-full min-w-0 justify-start rounded-xl px-3 text-left',\n onDelete && 'pr-9',\n isActive && 'bg-surface4 text-neutral6',\n className,\n )}\n >\n <span className=\"min-w-0 flex-1\">{children}</span>\n </Button>\n\n {onDelete && (\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n className=\"absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100\"\n onClick={onDelete}\n aria-label={deleteLabel}\n >\n <X />\n </Button>\n )}\n </li>\n );\n};\n\nexport interface ThreadListEmptyProps {\n children: ReactNode;\n}\n\nexport const ThreadListEmpty = ({ children }: ThreadListEmptyProps) => {\n return (\n <Txt as=\"p\" variant=\"ui-sm\" className=\"text-neutral3 px-5 py-3\">\n {children}\n </Txt>\n );\n};\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,cAAc,SAAA,GAAY,SAAA,EAAW,QAAA,GAAW,KAAA,EAAM,KAAuB;AAClH,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,aAAa,CAAC,QAAA,IAAY,WAAW,CAAA,EACtD,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,CAAC,QAAA,IAAY;AAAA,OACf;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AASO,MAAM,oBAAoB,CAAC,EAAE,IAAI,IAAA,EAAM,EAAA,EAAI,UAAS,KAA8B;AACvF,EAAA,uBACE,GAAA,CAAC,UAAO,EAAA,EAAQ,IAAA,EAAY,IAAQ,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,sCAAA,EAC3D,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,mBAAA,GAAsB,sBACjC,GAAA,CAAC,KAAA,EAAA,EAAI,MAAK,WAAA,EAAY,kBAAA,EAAiB,YAAA,EAAa,SAAA,EAAU,+BAAA,EAAgC;AAOzF,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,qBACzC,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qBAAA,EAAsB,aAAA,EAAY,aAAA,EAC7C,QAAA,EACH;AAeK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,IAAA;AAAA,QACA,EAAA;AAAA,QACA,OAAA;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,SAAA,EAAW,EAAA;AAAA,UACT,wDAAA;AAAA,UACA,QAAA,IAAY,MAAA;AAAA,UACZ,QAAA,IAAY,2BAAA;AAAA,UACZ;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAS;AAAA;AAAA,KAC7C;AAAA,IAEC,QAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAU,+HAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,YAAA,EAAY,WAAA;AAAA,QAEZ,8BAAC,CAAA,EAAA,EAAE;AAAA;AAAA;AACL,GAAA,EAEJ,CAAA;AAEJ;AAMO,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,KAA4B;AACrE,EAAA,uBACE,GAAA,CAAC,OAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,OAAA,EAAQ,SAAA,EAAU,2BACnC,QAAA,EACH,CAAA;AAEJ;;;;"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
export interface SettingsLayoutProps {
|
|
3
3
|
title?: ReactNode;
|
|
4
|
+
titleAccessory?: ReactNode;
|
|
5
|
+
description?: ReactNode;
|
|
4
6
|
action?: ReactNode;
|
|
5
7
|
inset?: boolean;
|
|
8
|
+
variant?: 'default' | 'header';
|
|
6
9
|
children: ReactNode;
|
|
7
10
|
}
|
|
8
|
-
export declare function SettingsLayout({ title, action, inset, children }: SettingsLayoutProps): import("react").JSX.Element;
|
|
11
|
+
export declare function SettingsLayout({ title, titleAccessory, description, action, inset, variant, children, }: SettingsLayoutProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
|
|
@@ -2,11 +2,14 @@ import { StoryObj } from '@storybook/react-vite';
|
|
|
2
2
|
import { SectionVariant } from '../Section';
|
|
3
3
|
type SettingsLayoutStoryProps = {
|
|
4
4
|
title: string;
|
|
5
|
+
description: string;
|
|
5
6
|
inset: boolean;
|
|
6
7
|
sectionVariant: SectionVariant;
|
|
7
8
|
showAction: boolean;
|
|
9
|
+
showTitleAccessory: boolean;
|
|
10
|
+
variant: 'default' | 'header';
|
|
8
11
|
};
|
|
9
|
-
declare function SettingsLayoutStory({ title, inset, sectionVariant, showAction }: SettingsLayoutStoryProps): import("react").JSX.Element;
|
|
12
|
+
declare function SettingsLayoutStory({ title, description, inset, sectionVariant, showAction, showTitleAccessory, variant, }: SettingsLayoutStoryProps): import("react").JSX.Element;
|
|
10
13
|
declare const meta: {
|
|
11
14
|
title: string;
|
|
12
15
|
component: typeof SettingsLayoutStory;
|
|
@@ -15,14 +18,20 @@ declare const meta: {
|
|
|
15
18
|
};
|
|
16
19
|
args: {
|
|
17
20
|
title: string;
|
|
21
|
+
description: string;
|
|
18
22
|
inset: false;
|
|
19
23
|
sectionVariant: "factory";
|
|
20
24
|
showAction: false;
|
|
25
|
+
showTitleAccessory: false;
|
|
26
|
+
variant: "default";
|
|
21
27
|
};
|
|
22
28
|
argTypes: {
|
|
23
29
|
title: {
|
|
24
30
|
control: "text";
|
|
25
31
|
};
|
|
32
|
+
description: {
|
|
33
|
+
control: "text";
|
|
34
|
+
};
|
|
26
35
|
inset: {
|
|
27
36
|
control: "boolean";
|
|
28
37
|
};
|
|
@@ -33,9 +42,18 @@ declare const meta: {
|
|
|
33
42
|
showAction: {
|
|
34
43
|
control: "boolean";
|
|
35
44
|
};
|
|
45
|
+
showTitleAccessory: {
|
|
46
|
+
control: "boolean";
|
|
47
|
+
};
|
|
48
|
+
variant: {
|
|
49
|
+
control: "select";
|
|
50
|
+
options: string[];
|
|
51
|
+
};
|
|
36
52
|
};
|
|
37
53
|
};
|
|
38
54
|
export default meta;
|
|
39
55
|
type Story = StoryObj<typeof meta>;
|
|
40
56
|
export declare const Default: Story;
|
|
57
|
+
export declare const WithDescription: Story;
|
|
41
58
|
export declare const InsetWithAction: Story;
|
|
59
|
+
export declare const HeaderOnly: Story;
|
package/dist/style.css
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mastra/playground-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "53.0
|
|
4
|
+
"version": "53.1.0-alpha.1",
|
|
5
5
|
"description": "Mastra Playground components",
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.css"
|
|
@@ -160,8 +160,8 @@
|
|
|
160
160
|
"react": ">=19.0.0",
|
|
161
161
|
"react-dom": ">=19.0.0",
|
|
162
162
|
"tailwindcss": "^4.0.0",
|
|
163
|
-
"@mastra/
|
|
164
|
-
"@mastra/
|
|
163
|
+
"@mastra/client-js": "^1.44.1-alpha.1",
|
|
164
|
+
"@mastra/react": "1.4.12-alpha.1"
|
|
165
165
|
},
|
|
166
166
|
"devDependencies": {
|
|
167
167
|
"@storybook/addon-a11y": "^10.4.1",
|
|
@@ -202,11 +202,11 @@
|
|
|
202
202
|
"vite-plugin-dts": "^4.5.4",
|
|
203
203
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
204
204
|
"vitest": "4.1.10",
|
|
205
|
-
"@mastra/client-js": "^1.44.1-alpha.0",
|
|
206
205
|
"@internal/lint": "0.0.131",
|
|
207
|
-
"@mastra/
|
|
208
|
-
"@mastra/
|
|
209
|
-
"@mastra/react": "1.4.12-alpha.
|
|
206
|
+
"@mastra/memory": "1.29.0-alpha.1",
|
|
207
|
+
"@mastra/client-js": "^1.44.1-alpha.1",
|
|
208
|
+
"@mastra/react": "1.4.12-alpha.1",
|
|
209
|
+
"@mastra/core": "1.66.0-alpha.1"
|
|
210
210
|
},
|
|
211
211
|
"homepage": "https://mastra.ai",
|
|
212
212
|
"repository": {
|