@mastra/playground-ui 53.0.0-alpha.9 → 53.0.0
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/{code-DRGJVroV.js → code-D4Vw_fYq.js} +22 -16
- package/dist/code-D4Vw_fYq.js.map +1 -0
- package/dist/{code-BJMC6T9D.cjs → code-DhrdtZce.cjs} +22 -15
- package/dist/code-DhrdtZce.cjs.map +1 -0
- package/dist/{code-block-CBJhDEeB.js → code-block-DeksY23p.js} +2 -2
- package/dist/{code-block-CBJhDEeB.js.map → code-block-DeksY23p.js.map} +1 -1
- package/dist/{code-block-fmv8bHoT.cjs → code-block-DgHrBuR8.cjs} +2 -2
- package/dist/{code-block-fmv8bHoT.cjs.map → code-block-DgHrBuR8.cjs.map} +1 -1
- package/dist/{command-DWFd0d4c.js → command-Be-KrIAX.js} +2 -2
- package/dist/{command-DWFd0d4c.js.map → command-Be-KrIAX.js.map} +1 -1
- package/dist/{command-CUev1UxH.cjs → command-DsTBCmQq.cjs} +2 -2
- package/dist/{command-CUev1UxH.cjs.map → command-DsTBCmQq.cjs.map} +1 -1
- package/dist/components/ChatShell.cjs.js +20 -1
- package/dist/components/ChatShell.cjs.js.map +1 -1
- package/dist/components/ChatShell.es.js +20 -1
- package/dist/components/ChatShell.es.js.map +1 -1
- package/dist/components/Code.cjs.js +3 -1
- package/dist/components/Code.cjs.js.map +1 -1
- package/dist/components/Code.es.js +1 -1
- package/dist/components/CodeBlock.cjs.js +1 -1
- package/dist/components/CodeBlock.es.js +1 -1
- package/dist/components/CodeEditor.cjs.js +2 -1
- package/dist/components/CodeEditor.cjs.js.map +1 -1
- package/dist/components/CodeEditor.es.js +1 -1
- package/dist/components/Command.cjs.js +1 -1
- package/dist/components/Command.es.js +1 -1
- package/dist/components/CommandPalette.cjs.js +1 -1
- package/dist/components/CommandPalette.es.js +1 -1
- package/dist/components/DataCodeSection.cjs.js +1 -1
- package/dist/components/DataCodeSection.es.js +1 -1
- package/dist/components/DataPanel.cjs.js +1 -1
- package/dist/components/DataPanel.es.js +1 -1
- package/dist/components/Dialog.cjs.js +181 -2
- package/dist/components/Dialog.cjs.js.map +1 -1
- package/dist/components/Dialog.es.js +183 -1
- package/dist/components/Dialog.es.js.map +1 -1
- package/dist/components/HorizontalBars.cjs.js +1 -1
- package/dist/components/HorizontalBars.es.js +1 -1
- package/dist/components/IntegrationDialog.cjs.js +105 -0
- package/dist/components/IntegrationDialog.cjs.js.map +1 -0
- package/dist/components/IntegrationDialog.d.ts +2 -0
- package/dist/components/IntegrationDialog.es.js +101 -0
- package/dist/components/IntegrationDialog.es.js.map +1 -0
- package/dist/components/MarkdownRenderer.cjs.js +1 -1
- package/dist/components/MarkdownRenderer.es.js +1 -1
- package/dist/components/ThreadRail.cjs.js +19 -0
- package/dist/components/ThreadRail.cjs.js.map +1 -1
- package/dist/components/ThreadRail.es.js +19 -1
- package/dist/components/ThreadRail.es.js.map +1 -1
- package/dist/components/ai/plan.cjs.js +1 -1
- package/dist/components/ai/plan.es.js +1 -1
- package/dist/components/ai/tool-call.cjs.js +165 -0
- package/dist/components/ai/tool-call.cjs.js.map +1 -1
- package/dist/components/ai/tool-call.es.js +159 -3
- package/dist/components/ai/tool-call.es.js.map +1 -1
- package/dist/{data-code-section-D5I0m1cS.cjs → data-code-section-B_lg_J_0.cjs} +2 -2
- package/dist/{data-code-section-D5I0m1cS.cjs.map → data-code-section-B_lg_J_0.cjs.map} +1 -1
- package/dist/{data-code-section-d3NffL3V.js → data-code-section-Cm_W_XhO.js} +2 -2
- package/dist/{data-code-section-d3NffL3V.js.map → data-code-section-Cm_W_XhO.js.map} +1 -1
- package/dist/{data-panel-Bo2HCylZ.cjs → data-panel-Cv9j_IGQ.cjs} +2 -2
- package/dist/{data-panel-Bo2HCylZ.cjs.map → data-panel-Cv9j_IGQ.cjs.map} +1 -1
- package/dist/{data-panel-T3vp7wTD.js → data-panel-DXxeSnL1.js} +2 -2
- package/dist/{data-panel-T3vp7wTD.js.map → data-panel-DXxeSnL1.js.map} +1 -1
- package/dist/dialog-CZMPDVUj.js +259 -0
- package/dist/dialog-CZMPDVUj.js.map +1 -0
- package/dist/dialog-D-7Hkb3j.cjs +293 -0
- package/dist/dialog-D-7Hkb3j.cjs.map +1 -0
- package/dist/domains/metrics/components/token-usage-by-agent-card-view.cjs.js +1 -1
- package/dist/domains/metrics/components/token-usage-by-agent-card-view.es.js +1 -1
- package/dist/domains/metrics/components/traces-volume-card-view.cjs.js +1 -1
- package/dist/domains/metrics/components/traces-volume-card-view.es.js +1 -1
- package/dist/domains/traces/components/span-data-panel-view.cjs.js +1 -1
- package/dist/domains/traces/components/span-data-panel-view.es.js +1 -1
- package/dist/domains/traces/components/trace-columns-menu.cjs.js +1 -1
- package/dist/domains/traces/components/trace-columns-menu.es.js +1 -1
- package/dist/domains/traces/components/trace-data-panel-view.cjs.js +1 -1
- package/dist/domains/traces/components/trace-data-panel-view.es.js +1 -1
- package/dist/domains/traces/hooks/use-branch.cjs.js +2 -6
- package/dist/domains/traces/hooks/use-branch.cjs.js.map +1 -1
- package/dist/domains/traces/hooks/use-branch.es.js +2 -6
- package/dist/domains/traces/hooks/use-branch.es.js.map +1 -1
- package/dist/domains/traces/hooks/use-download-trace-json.cjs.js +4 -1
- package/dist/domains/traces/hooks/use-download-trace-json.cjs.js.map +1 -1
- package/dist/domains/traces/hooks/use-download-trace-json.es.js +4 -1
- package/dist/domains/traces/hooks/use-download-trace-json.es.js.map +1 -1
- package/dist/domains/traces/hooks/use-trace-spans.cjs.js +10 -7
- package/dist/domains/traces/hooks/use-trace-spans.cjs.js.map +1 -1
- package/dist/domains/traces/hooks/use-trace-spans.es.js +10 -7
- package/dist/domains/traces/hooks/use-trace-spans.es.js.map +1 -1
- package/dist/ee/signals/settings/signal-definition-form-dialog.cjs.js +1 -1
- package/dist/ee/signals/settings/signal-definition-form-dialog.es.js +1 -1
- package/dist/{highlight-CSJjjoqh.js → highlight-BmpoELR4.js} +6 -2
- package/dist/{highlight-CSJjjoqh.js.map → highlight-BmpoELR4.js.map} +1 -1
- package/dist/{highlight-CEt2vhD8.cjs → highlight-DK1dn-Fh.cjs} +6 -1
- package/dist/{highlight-CEt2vhD8.cjs.map → highlight-DK1dn-Fh.cjs.map} +1 -1
- package/dist/{horizontal-bars-DZ5J4TKv.js → horizontal-bars-CyP-B-BX.js} +37 -4
- package/dist/horizontal-bars-CyP-B-BX.js.map +1 -0
- package/dist/{horizontal-bars-CE1O-Y6G.cjs → horizontal-bars-Dgq3PYsg.cjs} +37 -4
- package/dist/horizontal-bars-Dgq3PYsg.cjs.map +1 -0
- package/dist/{markdown-renderer-DiJBbnYG.js → markdown-renderer-CaFpZTFS.js} +2 -2
- package/dist/{markdown-renderer-DiJBbnYG.js.map → markdown-renderer-CaFpZTFS.js.map} +1 -1
- package/dist/{markdown-renderer-DGIzNAQY.cjs → markdown-renderer-GVtZLunG.cjs} +2 -2
- package/dist/{markdown-renderer-DGIzNAQY.cjs.map → markdown-renderer-GVtZLunG.cjs.map} +1 -1
- package/dist/src/domains/traces/hooks/use-trace-spans.d.ts +3 -1
- package/dist/src/ds/components/ChatShell/chat-shell.d.ts +19 -2
- package/dist/src/ds/components/ChatShell/index.d.ts +3 -2
- package/dist/src/ds/components/Code/index.d.ts +1 -0
- package/dist/src/ds/components/Code/use-highlight.d.ts +10 -0
- package/dist/src/ds/components/CodeEditor/highlight.d.ts +1 -0
- package/dist/src/ds/components/CodeEditor/index.d.ts +1 -1
- package/dist/src/ds/components/Dialog/dialog-action.d.ts +9 -0
- package/dist/src/ds/components/Dialog/dialog-context.d.ts +16 -0
- package/dist/src/ds/components/Dialog/dialog-new-variant.stories.d.ts +64 -0
- package/dist/src/ds/components/Dialog/dialog.d.ts +15 -6
- package/dist/src/ds/components/Dialog/index.d.ts +2 -0
- package/dist/src/ds/components/HorizontalBars/horizontal-bars.stories.d.ts +2 -0
- package/dist/src/ds/components/IntegrationDialog/__fixtures__/integrations-catalog.d.ts +2 -0
- package/dist/src/ds/components/IntegrationDialog/index.d.ts +2 -0
- package/dist/src/ds/components/IntegrationDialog/integration-dialog.d.ts +28 -0
- package/dist/src/ds/components/IntegrationDialog/integration-dialog.stories.d.ts +24 -0
- package/dist/src/ds/components/ThreadRail/index.d.ts +1 -0
- package/dist/src/ds/components/ThreadRail/turn-groups.d.ts +19 -0
- package/dist/src/ds/components/ai/tool-call/ansi.d.ts +2 -0
- package/dist/src/ds/components/ai/tool-call/group-consecutive.d.ts +17 -0
- package/dist/src/ds/components/ai/tool-call/index.d.ts +4 -0
- package/dist/src/ds/components/ai/tool-call/tool-call-edit.d.ts +4 -0
- package/dist/src/ds/components/ai/tool-call/tool-call-group.d.ts +14 -0
- package/dist/src/ds/components/ai/tool-call/tool-call.d.ts +4 -0
- package/dist/src/ds/components/ai/tool-call/tool-presentation.d.ts +10 -0
- package/dist/style.css +138 -0
- package/package.json +8 -8
- package/dist/code-BJMC6T9D.cjs.map +0 -1
- package/dist/code-DRGJVroV.js.map +0 -1
- package/dist/dialog-CESxLg8S.js +0 -76
- package/dist/dialog-CESxLg8S.js.map +0 -1
- package/dist/dialog-K0q0KOOW.cjs +0 -107
- package/dist/dialog-K0q0KOOW.cjs.map +0 -1
- package/dist/horizontal-bars-CE1O-Y6G.cjs.map +0 -1
- package/dist/horizontal-bars-DZ5J4TKv.js.map +0 -1
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { DialogProps } from '../Dialog';
|
|
3
|
+
export type IntegrationDialogItem = {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
logo?: ReactNode;
|
|
7
|
+
badge?: string;
|
|
8
|
+
meta?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export type IntegrationDialogProps = Omit<DialogProps, 'variant' | 'intent' | 'children'> & {
|
|
12
|
+
title: ReactNode;
|
|
13
|
+
description?: ReactNode;
|
|
14
|
+
items: IntegrationDialogItem[];
|
|
15
|
+
onSelect: (item: IntegrationDialogItem) => void;
|
|
16
|
+
searchPlaceholder?: string;
|
|
17
|
+
searchLabel?: string;
|
|
18
|
+
emptyMessage?: ReactNode;
|
|
19
|
+
children?: ReactNode;
|
|
20
|
+
className?: string;
|
|
21
|
+
};
|
|
22
|
+
declare function IntegrationDialog({ title, description, items, onSelect, searchPlaceholder, searchLabel, emptyMessage, children, className, ...props }: IntegrationDialogProps): import("react").JSX.Element;
|
|
23
|
+
declare namespace IntegrationDialog {
|
|
24
|
+
var Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTrigger.Props<unknown> & {
|
|
25
|
+
asChild?: boolean;
|
|
26
|
+
}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
27
|
+
}
|
|
28
|
+
export { IntegrationDialog };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { IntegrationDialogItem } from './integration-dialog';
|
|
3
|
+
declare function Example({ items }: {
|
|
4
|
+
items?: IntegrationDialogItem[];
|
|
5
|
+
}): import("react").JSX.Element;
|
|
6
|
+
declare const meta: {
|
|
7
|
+
title: string;
|
|
8
|
+
component: typeof Example;
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: string;
|
|
11
|
+
docs: {
|
|
12
|
+
description: {
|
|
13
|
+
component: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export default meta;
|
|
19
|
+
type Story = StoryObj<typeof meta>;
|
|
20
|
+
export declare const Default: Story;
|
|
21
|
+
export declare const FewItems: Story;
|
|
22
|
+
export declare const NoLogos: Story;
|
|
23
|
+
export declare const DisabledItem: Story;
|
|
24
|
+
export declare const Empty: Story;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** A user's turn and everything the run produced under it. */
|
|
2
|
+
export interface TurnGroup<T> {
|
|
3
|
+
key: string;
|
|
4
|
+
entries: T[];
|
|
5
|
+
/** Opened by a user message, so it reserves room and anchors the scroll. */
|
|
6
|
+
opensTurn: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface TurnRules<T> {
|
|
9
|
+
key: (entry: T) => string;
|
|
10
|
+
opensTurn: (entry: T) => boolean;
|
|
11
|
+
/** A marker that belongs above the turn it introduces but arrives after the previous one, so it moves down. */
|
|
12
|
+
introduces?: (entry: T) => boolean;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Cuts a timeline where the reader's attention moves: a user message starts a turn,
|
|
16
|
+
* and everything the run answers with belongs to it. Entries before the first opener
|
|
17
|
+
* form a turn of their own that opens nothing.
|
|
18
|
+
*/
|
|
19
|
+
export declare function groupTurns<T>(entries: T[], { key, opensTurn, introduces }: TurnRules<T>): TurnGroup<T>[];
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export interface ConsecutiveGroups<T> {
|
|
2
|
+
/** Each run, keyed by its first member. */
|
|
3
|
+
byFirstKey: Map<string, T[]>;
|
|
4
|
+
/** The members after the first, which draw nothing of their own. */
|
|
5
|
+
memberKeys: Set<string>;
|
|
6
|
+
}
|
|
7
|
+
export interface ConsecutiveRules<T, U extends T> {
|
|
8
|
+
key: (item: U) => string;
|
|
9
|
+
/** Whether an item extends the run; anything else ends it. */
|
|
10
|
+
joins: (item: T) => item is U;
|
|
11
|
+
/** Runs shorter than this stay individual rows. */
|
|
12
|
+
min?: number;
|
|
13
|
+
}
|
|
14
|
+
/** Consecutive tool calls this long fold into one group row. */
|
|
15
|
+
export declare const TOOL_GROUP_MIN = 3;
|
|
16
|
+
/** Cuts a list into runs of joining items, keeping only the runs long enough to fold. */
|
|
17
|
+
export declare function groupConsecutive<T, U extends T>(items: readonly T[], { key, joins, min }: ConsecutiveRules<T, U>): ConsecutiveGroups<U>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ToolCallStatus } from './tool-call';
|
|
3
|
+
export interface ToolCallGroupStep {
|
|
4
|
+
toolName: string;
|
|
5
|
+
args: unknown;
|
|
6
|
+
status: ToolCallStatus;
|
|
7
|
+
}
|
|
8
|
+
export interface ToolCallGroupProps {
|
|
9
|
+
steps: ToolCallGroupStep[];
|
|
10
|
+
/** Rendered ahead of the icon, e.g. the time the first step began. */
|
|
11
|
+
leading?: ReactNode;
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export declare function ToolCallGroup({ steps, leading, children }: ToolCallGroupProps): import("react").JSX.Element;
|
|
@@ -38,4 +38,8 @@ export interface ToolCallMonoProps extends ComponentProps<'pre'> {
|
|
|
38
38
|
}
|
|
39
39
|
/** Monospace body block of an expanded call — arguments, command, output — with a hover copy. */
|
|
40
40
|
export declare const ToolCallMono: ({ copyText, className, children, ...props }: ToolCallMonoProps) => import("react").JSX.Element;
|
|
41
|
+
/** A shell command as the body shows it: `$` in the margin, the copy takes the command alone. */
|
|
42
|
+
export declare const ToolCallCommand: ({ command }: {
|
|
43
|
+
command: string;
|
|
44
|
+
}) => import("react").JSX.Element;
|
|
41
45
|
export type { ToolCallStatus };
|
|
@@ -10,3 +10,13 @@ export interface ToolPresentation {
|
|
|
10
10
|
/** Tool arguments and results as the mono body shows them: strings verbatim, the rest pretty JSON. */
|
|
11
11
|
export declare function stringifyToolValue(value: unknown): string;
|
|
12
12
|
export declare function presentTool(toolName: string, args: unknown): ToolPresentation;
|
|
13
|
+
export type ToolEdit = {
|
|
14
|
+
path?: string;
|
|
15
|
+
} & ({
|
|
16
|
+
oldText: string;
|
|
17
|
+
newText: string;
|
|
18
|
+
} | {
|
|
19
|
+
content: string;
|
|
20
|
+
});
|
|
21
|
+
export declare function toolEdit(toolName: string, args: unknown): ToolEdit | undefined;
|
|
22
|
+
export declare function isTaskTool(toolName: string): boolean;
|
package/dist/style.css
CHANGED
|
@@ -2234,6 +2234,10 @@
|
|
|
2234
2234
|
max-height: calc(85vh + 3rem);
|
|
2235
2235
|
}
|
|
2236
2236
|
|
|
2237
|
+
.max-h-\[calc\(100dvh-2rem\)\] {
|
|
2238
|
+
max-height: calc(100dvh - 2rem);
|
|
2239
|
+
}
|
|
2240
|
+
|
|
2237
2241
|
.max-h-\[calc\(100dvh-3rem\)\] {
|
|
2238
2242
|
max-height: calc(100dvh - 3rem);
|
|
2239
2243
|
}
|
|
@@ -2326,14 +2330,30 @@
|
|
|
2326
2330
|
min-height: 100dvh;
|
|
2327
2331
|
}
|
|
2328
2332
|
|
|
2333
|
+
.min-h-form-default {
|
|
2334
|
+
min-height: var(--spacing-form-default);
|
|
2335
|
+
}
|
|
2336
|
+
|
|
2329
2337
|
.min-h-form-md {
|
|
2330
2338
|
min-height: var(--spacing-form-md);
|
|
2331
2339
|
}
|
|
2332
2340
|
|
|
2341
|
+
.min-h-form-sm {
|
|
2342
|
+
min-height: var(--spacing-form-sm);
|
|
2343
|
+
}
|
|
2344
|
+
|
|
2345
|
+
.min-h-form-xs {
|
|
2346
|
+
min-height: var(--spacing-form-xs);
|
|
2347
|
+
}
|
|
2348
|
+
|
|
2333
2349
|
.min-h-full {
|
|
2334
2350
|
min-height: 100%;
|
|
2335
2351
|
}
|
|
2336
2352
|
|
|
2353
|
+
.w-\(--bar-width\) {
|
|
2354
|
+
width: var(--bar-width);
|
|
2355
|
+
}
|
|
2356
|
+
|
|
2337
2357
|
.w-\(--sidebar-width\) {
|
|
2338
2358
|
width: var(--sidebar-width);
|
|
2339
2359
|
}
|
|
@@ -2562,6 +2582,10 @@
|
|
|
2562
2582
|
width: 33.5rem;
|
|
2563
2583
|
}
|
|
2564
2584
|
|
|
2585
|
+
.w-\[calc\(100\%-2rem\)\] {
|
|
2586
|
+
width: calc(100% - 2rem);
|
|
2587
|
+
}
|
|
2588
|
+
|
|
2565
2589
|
.w-\[calc\(100vw-1\.5rem\)\] {
|
|
2566
2590
|
width: calc(100vw - 1.5rem);
|
|
2567
2591
|
}
|
|
@@ -4474,6 +4498,16 @@
|
|
|
4474
4498
|
}
|
|
4475
4499
|
}
|
|
4476
4500
|
|
|
4501
|
+
.bg-error\/10 {
|
|
4502
|
+
background-color: var(--color-error);
|
|
4503
|
+
}
|
|
4504
|
+
|
|
4505
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
4506
|
+
.bg-error\/10 {
|
|
4507
|
+
background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
|
|
4508
|
+
}
|
|
4509
|
+
}
|
|
4510
|
+
|
|
4477
4511
|
.bg-gray-100 {
|
|
4478
4512
|
background-color: var(--color-gray-100);
|
|
4479
4513
|
}
|
|
@@ -5102,6 +5136,10 @@
|
|
|
5102
5136
|
padding-inline: 32px;
|
|
5103
5137
|
}
|
|
5104
5138
|
|
|
5139
|
+
.px-\[inherit\] {
|
|
5140
|
+
padding-inline: inherit;
|
|
5141
|
+
}
|
|
5142
|
+
|
|
5105
5143
|
.py-0 {
|
|
5106
5144
|
padding-block: var(--spacing-0);
|
|
5107
5145
|
}
|
|
@@ -5222,6 +5260,10 @@
|
|
|
5222
5260
|
padding-top: var(--spacing-12);
|
|
5223
5261
|
}
|
|
5224
5262
|
|
|
5263
|
+
.pr-0 {
|
|
5264
|
+
padding-right: var(--spacing-0);
|
|
5265
|
+
}
|
|
5266
|
+
|
|
5225
5267
|
.pr-1 {
|
|
5226
5268
|
padding-right: var(--spacing-1);
|
|
5227
5269
|
}
|
|
@@ -5234,6 +5276,10 @@
|
|
|
5234
5276
|
padding-right: var(--spacing-2);
|
|
5235
5277
|
}
|
|
5236
5278
|
|
|
5279
|
+
.pr-2\.5 {
|
|
5280
|
+
padding-right: var(--spacing-2_5);
|
|
5281
|
+
}
|
|
5282
|
+
|
|
5237
5283
|
.pr-3 {
|
|
5238
5284
|
padding-right: var(--spacing-3);
|
|
5239
5285
|
}
|
|
@@ -5637,6 +5683,10 @@
|
|
|
5637
5683
|
text-wrap: wrap;
|
|
5638
5684
|
}
|
|
5639
5685
|
|
|
5686
|
+
.\[overflow-wrap\:anywhere\] {
|
|
5687
|
+
overflow-wrap: anywhere;
|
|
5688
|
+
}
|
|
5689
|
+
|
|
5640
5690
|
.break-words {
|
|
5641
5691
|
overflow-wrap: break-word;
|
|
5642
5692
|
}
|
|
@@ -5657,6 +5707,10 @@
|
|
|
5657
5707
|
text-overflow: ellipsis;
|
|
5658
5708
|
}
|
|
5659
5709
|
|
|
5710
|
+
.whitespace-normal {
|
|
5711
|
+
white-space: normal;
|
|
5712
|
+
}
|
|
5713
|
+
|
|
5660
5714
|
.whitespace-nowrap {
|
|
5661
5715
|
white-space: nowrap;
|
|
5662
5716
|
}
|
|
@@ -6334,6 +6388,12 @@
|
|
|
6334
6388
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
6335
6389
|
}
|
|
6336
6390
|
|
|
6391
|
+
.transition-\[clip-path\] {
|
|
6392
|
+
transition-property: clip-path;
|
|
6393
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
6394
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
6395
|
+
}
|
|
6396
|
+
|
|
6337
6397
|
.transition-\[color\,background-color\,opacity\] {
|
|
6338
6398
|
transition-property: color, background-color, opacity;
|
|
6339
6399
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
@@ -6376,6 +6436,12 @@
|
|
|
6376
6436
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
6377
6437
|
}
|
|
6378
6438
|
|
|
6439
|
+
.transition-\[min-height\] {
|
|
6440
|
+
transition-property: min-height;
|
|
6441
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
6442
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
6443
|
+
}
|
|
6444
|
+
|
|
6379
6445
|
.transition-\[opacity\,filter\,scale\] {
|
|
6380
6446
|
transition-property: opacity, filter, scale;
|
|
6381
6447
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
@@ -6506,6 +6572,16 @@
|
|
|
6506
6572
|
transition-duration: 1s;
|
|
6507
6573
|
}
|
|
6508
6574
|
|
|
6575
|
+
.duration-\[440ms\] {
|
|
6576
|
+
--tw-duration: .44s;
|
|
6577
|
+
transition-duration: .44s;
|
|
6578
|
+
}
|
|
6579
|
+
|
|
6580
|
+
.duration-\[1500ms\] {
|
|
6581
|
+
--tw-duration: 1.5s;
|
|
6582
|
+
transition-duration: 1.5s;
|
|
6583
|
+
}
|
|
6584
|
+
|
|
6509
6585
|
.duration-normal {
|
|
6510
6586
|
transition-duration: var(--duration-normal);
|
|
6511
6587
|
}
|
|
@@ -6514,6 +6590,16 @@
|
|
|
6514
6590
|
transition-duration: var(--duration-slow);
|
|
6515
6591
|
}
|
|
6516
6592
|
|
|
6593
|
+
.ease-\[cubic-bezier\(0\.2\,0\,0\.2\,1\)\] {
|
|
6594
|
+
--tw-ease: cubic-bezier(.2,0,.2,1);
|
|
6595
|
+
transition-timing-function: cubic-bezier(.2, 0, .2, 1);
|
|
6596
|
+
}
|
|
6597
|
+
|
|
6598
|
+
.ease-\[cubic-bezier\(0\.3\,0\,0\.2\,1\)\] {
|
|
6599
|
+
--tw-ease: cubic-bezier(.3,0,.2,1);
|
|
6600
|
+
transition-timing-function: cubic-bezier(.3, 0, .2, 1);
|
|
6601
|
+
}
|
|
6602
|
+
|
|
6517
6603
|
.ease-\[cubic-bezier\(0\.32\,0\.72\,0\,1\)\] {
|
|
6518
6604
|
--tw-ease: cubic-bezier(.32,.72,0,1);
|
|
6519
6605
|
transition-timing-function: cubic-bezier(.32, .72, 0, 1);
|
|
@@ -6524,6 +6610,11 @@
|
|
|
6524
6610
|
transition-timing-function: var(--ease-in-out);
|
|
6525
6611
|
}
|
|
6526
6612
|
|
|
6613
|
+
.ease-linear {
|
|
6614
|
+
--tw-ease: linear;
|
|
6615
|
+
transition-timing-function: linear;
|
|
6616
|
+
}
|
|
6617
|
+
|
|
6527
6618
|
.ease-out {
|
|
6528
6619
|
--tw-ease: var(--ease-out);
|
|
6529
6620
|
transition-timing-function: var(--ease-out);
|
|
@@ -6620,6 +6711,10 @@
|
|
|
6620
6711
|
--studio-frame-radius: 1.5rem;
|
|
6621
6712
|
}
|
|
6622
6713
|
|
|
6714
|
+
.\[clip-path\:inset\(0_100\%_0_0\)\] {
|
|
6715
|
+
clip-path: inset(0 100% 0 0);
|
|
6716
|
+
}
|
|
6717
|
+
|
|
6623
6718
|
.\[contain-intrinsic-size\:auto_10rem\] {
|
|
6624
6719
|
contain-intrinsic-size: auto 10rem;
|
|
6625
6720
|
}
|
|
@@ -6822,10 +6917,18 @@
|
|
|
6822
6917
|
opacity: 1;
|
|
6823
6918
|
}
|
|
6824
6919
|
|
|
6920
|
+
.group-data-\[completed\]\/hold\:\[clip-path\:inset\(0\)\]:is(:where(.group\/hold)[data-completed] *) {
|
|
6921
|
+
clip-path: inset(0);
|
|
6922
|
+
}
|
|
6923
|
+
|
|
6825
6924
|
.group-data-\[disabled\]\/switch\:w-5:is(:where(.group\/switch)[data-disabled] *) {
|
|
6826
6925
|
width: var(--spacing-5);
|
|
6827
6926
|
}
|
|
6828
6927
|
|
|
6928
|
+
.group-data-\[holding\]\/hold\:\[clip-path\:inset\(0\)\]:is(:where(.group\/hold)[data-holding] *) {
|
|
6929
|
+
clip-path: inset(0);
|
|
6930
|
+
}
|
|
6931
|
+
|
|
6829
6932
|
.group-data-\[indeterminate\]\/checkbox-indicator\:block:is(:where(.group\/checkbox-indicator)[data-indeterminate] *) {
|
|
6830
6933
|
display: block;
|
|
6831
6934
|
}
|
|
@@ -8141,6 +8244,10 @@
|
|
|
8141
8244
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
8142
8245
|
}
|
|
8143
8246
|
|
|
8247
|
+
.disabled\:pointer-events-none:disabled {
|
|
8248
|
+
pointer-events: none;
|
|
8249
|
+
}
|
|
8250
|
+
|
|
8144
8251
|
.disabled\:cursor-not-allowed:disabled {
|
|
8145
8252
|
cursor: not-allowed;
|
|
8146
8253
|
}
|
|
@@ -9237,6 +9344,16 @@
|
|
|
9237
9344
|
--tw-duration: 0s;
|
|
9238
9345
|
transition-duration: 0s;
|
|
9239
9346
|
}
|
|
9347
|
+
|
|
9348
|
+
.motion-reduce\:group-data-\[holding\]\/hold\:\[clip-path\:inset\(0_50\%_0_0\)\]:is(:where(.group\/hold)[data-holding] *) {
|
|
9349
|
+
clip-path: inset(0 50% 0 0);
|
|
9350
|
+
}
|
|
9351
|
+
}
|
|
9352
|
+
|
|
9353
|
+
@media not all and (min-width: 22rem) {
|
|
9354
|
+
.max-\[22rem\]\:w-full {
|
|
9355
|
+
width: 100%;
|
|
9356
|
+
}
|
|
9240
9357
|
}
|
|
9241
9358
|
|
|
9242
9359
|
@media (min-width: 1536px) {
|
|
@@ -9727,6 +9844,10 @@
|
|
|
9727
9844
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
9728
9845
|
}
|
|
9729
9846
|
|
|
9847
|
+
.dark\:block:is(.dark *) {
|
|
9848
|
+
display: block;
|
|
9849
|
+
}
|
|
9850
|
+
|
|
9730
9851
|
.dark\:border-transparent:is(.dark *) {
|
|
9731
9852
|
border-color: #0000;
|
|
9732
9853
|
}
|
|
@@ -9842,6 +9963,10 @@
|
|
|
9842
9963
|
}
|
|
9843
9964
|
}
|
|
9844
9965
|
|
|
9966
|
+
.dark\:\[clip-path\:inset\(0_0_0_var\(--bar-width\)\)\]:is(.dark *) {
|
|
9967
|
+
clip-path: inset(0 0 0 var(--bar-width));
|
|
9968
|
+
}
|
|
9969
|
+
|
|
9845
9970
|
@media (hover: hover) {
|
|
9846
9971
|
.dark\:hover\:bg-accent1\/90:is(.dark *):hover {
|
|
9847
9972
|
background-color: var(--color-accent1);
|
|
@@ -9859,6 +9984,10 @@
|
|
|
9859
9984
|
}
|
|
9860
9985
|
|
|
9861
9986
|
@starting-style {
|
|
9987
|
+
.starting\:min-h-0 {
|
|
9988
|
+
min-height: var(--spacing-0);
|
|
9989
|
+
}
|
|
9990
|
+
|
|
9862
9991
|
.starting\:opacity-0 {
|
|
9863
9992
|
opacity: 0;
|
|
9864
9993
|
}
|
|
@@ -10849,6 +10978,15 @@
|
|
|
10849
10978
|
color: var(--color-neutral5);
|
|
10850
10979
|
}
|
|
10851
10980
|
|
|
10981
|
+
.\[\&\>img\]\:size-full > img {
|
|
10982
|
+
width: 100%;
|
|
10983
|
+
height: 100%;
|
|
10984
|
+
}
|
|
10985
|
+
|
|
10986
|
+
.\[\&\>img\]\:object-contain > img {
|
|
10987
|
+
object-fit: contain;
|
|
10988
|
+
}
|
|
10989
|
+
|
|
10852
10990
|
.\[\&\>input\]\:flex-1 > input {
|
|
10853
10991
|
flex: 1;
|
|
10854
10992
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mastra/playground-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "53.0.0
|
|
4
|
+
"version": "53.0.0",
|
|
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/react": "1.4.11",
|
|
164
|
+
"@mastra/client-js": "^1.44.0"
|
|
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
|
-
"@internal/lint": "0.0.
|
|
206
|
-
"@mastra/
|
|
207
|
-
"@mastra/
|
|
208
|
-
"@mastra/
|
|
209
|
-
"@mastra/
|
|
205
|
+
"@internal/lint": "0.0.131",
|
|
206
|
+
"@mastra/core": "1.65.0",
|
|
207
|
+
"@mastra/memory": "1.28.3",
|
|
208
|
+
"@mastra/react": "1.4.11",
|
|
209
|
+
"@mastra/client-js": "^1.44.0"
|
|
210
210
|
},
|
|
211
211
|
"homepage": "https://mastra.ai",
|
|
212
212
|
"repository": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"code-BJMC6T9D.cjs","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as React.CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n\ninterface Highlighted {\n code: string;\n lang: string;\n tokens: ThemedToken[][];\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n if (!highlighted || highlighted.lang !== lang) return null;\n return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a frame\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const [highlighted, setHighlighted] = React.useState<Highlighted | null>(null);\n\n React.useEffect(() => {\n if (!lang) {\n setHighlighted(null);\n return;\n }\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(tokens => {\n if (!cancelled && tokens?.length) setHighlighted({ code, lang, tokens });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n const usable = usableHighlight(highlighted, code, lang);\n if (!usable) {\n return <pre {...props}>{code}</pre>;\n }\n\n const tail = code.slice(usable.code.length);\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {usable.tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n <span>{tokenSpans}</span>\n {lineIndex !== usable.tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n {tail}\n </code>\n </pre>\n );\n});\n"],"names":["React","Code","highlight","jsx","jsxs"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"code-DRGJVroV.js","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as React.CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n\ninterface Highlighted {\n code: string;\n lang: string;\n tokens: ThemedToken[][];\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n if (!highlighted || highlighted.lang !== lang) return null;\n return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a frame\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const [highlighted, setHighlighted] = React.useState<Highlighted | null>(null);\n\n React.useEffect(() => {\n if (!lang) {\n setHighlighted(null);\n return;\n }\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(tokens => {\n if (!cancelled && tokens?.length) setHighlighted({ code, lang, tokens });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n const usable = usableHighlight(highlighted, code, lang);\n if (!usable) {\n return <pre {...props}>{code}</pre>;\n }\n\n const tail = code.slice(usable.code.length);\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {usable.tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n <span>{tokenSpans}</span>\n {lineIndex !== usable.tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n {tail}\n </code>\n </pre>\n );\n});\n"],"names":["Code"],"mappings":"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"}
|
package/dist/dialog-CESxLg8S.js
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
|
|
3
|
-
import { X } from 'lucide-react';
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import { B as Button } from './Button-BsfLQEC6.js';
|
|
6
|
-
import { a as asChildRenderProps } from './as-child-N1qMDCr8.js';
|
|
7
|
-
import { c as cn } from './cn-B4oPhFx9.js';
|
|
8
|
-
import './dialog.css';/* empty css */
|
|
9
|
-
|
|
10
|
-
const Dialog = Dialog$1.Root;
|
|
11
|
-
const DialogTrigger = React.forwardRef(
|
|
12
|
-
({ asChild, children, ...props }, ref) => {
|
|
13
|
-
return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ref, ...asChildRenderProps(asChild, children), ...props, children: asChild ? void 0 : children });
|
|
14
|
-
}
|
|
15
|
-
);
|
|
16
|
-
DialogTrigger.displayName = "DialogTrigger";
|
|
17
|
-
const DialogPortal = Dialog$1.Portal;
|
|
18
|
-
const DialogClose = React.forwardRef(({ asChild, children, ...props }, ref) => {
|
|
19
|
-
return /* @__PURE__ */ jsx(Dialog$1.Close, { ref, ...asChildRenderProps(asChild, children), ...props, children: asChild ? void 0 : children });
|
|
20
|
-
});
|
|
21
|
-
DialogClose.displayName = "DialogClose";
|
|
22
|
-
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
23
|
-
Dialog$1.Backdrop,
|
|
24
|
-
{
|
|
25
|
-
ref,
|
|
26
|
-
className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
|
|
27
|
-
...props
|
|
28
|
-
}
|
|
29
|
-
));
|
|
30
|
-
DialogOverlay.displayName = "DialogOverlay";
|
|
31
|
-
const DialogContent = React.forwardRef(
|
|
32
|
-
({ className, children, showOverlay = true, overlayClassName, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
|
|
33
|
-
showOverlay && /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
|
|
34
|
-
/* @__PURE__ */ jsxs(
|
|
35
|
-
Dialog$1.Popup,
|
|
36
|
-
{
|
|
37
|
-
ref,
|
|
38
|
-
"data-slot": "dialog-content",
|
|
39
|
-
className: cn(
|
|
40
|
-
"dialog-content-anim",
|
|
41
|
-
"fixed top-[50%] left-[50%] z-50 grid translate-[-50%]",
|
|
42
|
-
"w-full max-w-[calc(100%-2rem)] sm:max-w-lg",
|
|
43
|
-
"rounded-xl border border-border1/40 bg-surface2/96 shadow-dialog backdrop-blur-md",
|
|
44
|
-
"focus-visible:outline-hidden",
|
|
45
|
-
className
|
|
46
|
-
),
|
|
47
|
-
...props,
|
|
48
|
-
children: [
|
|
49
|
-
children,
|
|
50
|
-
/* @__PURE__ */ jsx(
|
|
51
|
-
Dialog$1.Close,
|
|
52
|
-
{
|
|
53
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsx(X, {}) })
|
|
54
|
-
}
|
|
55
|
-
)
|
|
56
|
-
]
|
|
57
|
-
}
|
|
58
|
-
)
|
|
59
|
-
] })
|
|
60
|
-
);
|
|
61
|
-
DialogContent.displayName = "DialogContent";
|
|
62
|
-
const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
|
|
63
|
-
DialogHeader.displayName = "DialogHeader";
|
|
64
|
-
const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end", className), ...props });
|
|
65
|
-
DialogFooter.displayName = "DialogFooter";
|
|
66
|
-
const DialogBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("max-h-[50vh] overflow-y-auto px-4 py-3.5", className), ...props });
|
|
67
|
-
DialogBody.displayName = "DialogBody";
|
|
68
|
-
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
|
|
69
|
-
DialogTitle.displayName = "DialogTitle";
|
|
70
|
-
const DialogDescription = React.forwardRef(
|
|
71
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Description, { ref, className: cn("sr-only", className), ...props })
|
|
72
|
-
);
|
|
73
|
-
DialogDescription.displayName = "DialogDescription";
|
|
74
|
-
|
|
75
|
-
export { Dialog as D, DialogBody as a, DialogClose as b, DialogContent as c, DialogDescription as d, DialogFooter as e, DialogHeader as f, DialogOverlay as g, DialogPortal as h, DialogTitle as i, DialogTrigger as j };
|
|
76
|
-
//# sourceMappingURL=dialog-CESxLg8S.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-CESxLg8S.js","sources":["../src/ds/components/Dialog/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport { asChildRenderProps } from '@/lib/as-child';\nimport { cn } from '@/lib/utils';\n\nimport './dialog.css';\n\nconst Dialog = DialogPrimitive.Root;\n\ntype DialogTriggerProps = DialogPrimitive.Trigger.Props & {\n /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */\n asChild?: boolean;\n};\n\nconst DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\n ({ asChild, children, ...props }, ref) => {\n return (\n <DialogPrimitive.Trigger ref={ref} {...asChildRenderProps(asChild, children)} {...props}>\n {asChild ? undefined : children}\n </DialogPrimitive.Trigger>\n );\n },\n);\nDialogTrigger.displayName = 'DialogTrigger';\n\nconst DialogPortal = DialogPrimitive.Portal;\n\ntype DialogCloseProps = DialogPrimitive.Close.Props & {\n /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */\n asChild?: boolean;\n};\n\nconst DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(({ asChild, children, ...props }, ref) => {\n return (\n <DialogPrimitive.Close ref={ref} {...asChildRenderProps(asChild, children)} {...props}>\n {asChild ? undefined : children}\n </DialogPrimitive.Close>\n );\n});\nDialogClose.displayName = 'DialogClose';\n\ntype DialogOverlayProps = Omit<DialogPrimitive.Backdrop.Props, 'className'> & {\n className?: string;\n};\n\nconst DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(({ className, ...props }, ref) => (\n <DialogPrimitive.Backdrop\n ref={ref}\n className={cn('dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs', className)}\n {...props}\n />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\ntype DialogContentProps = Omit<DialogPrimitive.Popup.Props, 'className'> & {\n className?: string;\n showOverlay?: boolean;\n overlayClassName?: string;\n};\n\nconst DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(\n ({ className, children, showOverlay = true, overlayClassName, ...props }, ref) => (\n <DialogPortal>\n {showOverlay && <DialogOverlay className={overlayClassName} />}\n <DialogPrimitive.Popup\n ref={ref}\n data-slot=\"dialog-content\"\n className={cn(\n 'dialog-content-anim',\n 'fixed top-[50%] left-[50%] z-50 grid translate-[-50%]',\n 'w-full max-w-[calc(100%-2rem)] sm:max-w-lg',\n 'rounded-xl border border-border1/40 bg-surface2/96 shadow-dialog backdrop-blur-md',\n 'focus-visible:outline-hidden',\n className,\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.Close\n render={\n <Button variant=\"ghost\" size=\"sm\" className=\"absolute top-3 right-3\" aria-label=\"Close\">\n <X />\n </Button>\n }\n />\n </DialogPrimitive.Popup>\n </DialogPortal>\n ),\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col gap-0.5 px-4 py-3 text-left', className)} {...props} />\n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end', className)} {...props} />\n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('max-h-[50vh] overflow-y-auto px-4 py-3.5', className)} {...props} />\n);\nDialogBody.displayName = 'DialogBody';\n\ntype DialogTitleProps = Omit<DialogPrimitive.Title.Props, 'className'> & {\n className?: string;\n};\n\nconst DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title ref={ref} className={cn('text-ui-md font-medium', className)} {...props} />\n));\nDialogTitle.displayName = 'DialogTitle';\n\ntype DialogDescriptionProps = Omit<DialogPrimitive.Description.Props, 'className'> & {\n className?: string;\n};\n\nconst DialogDescription = React.forwardRef<HTMLParagraphElement, DialogDescriptionProps>(\n ({ className, ...props }, ref) => (\n <DialogPrimitive.Description ref={ref} className={cn('sr-only', className)} {...props} />\n ),\n);\nDialogDescription.displayName = 'DialogDescription';\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogBody,\n DialogTitle,\n DialogDescription,\n};\n"],"names":["DialogPrimitive"],"mappings":"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"}
|