@timbal-ai/timbal-react 1.0.0 → 1.1.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/CHANGELOG.md +28 -0
- package/README.md +45 -4
- package/dist/app.cjs +1996 -1183
- package/dist/app.d.cts +8 -4
- package/dist/app.d.ts +8 -4
- package/dist/app.esm.js +23 -6
- package/dist/{chart-artifact-CBo9x8Ch.d.ts → chart-artifact-BZp7nmaf.d.ts} +253 -12
- package/dist/{chart-artifact-DOkwSTjQ.d.cts → chart-artifact-CX-rh9nq.d.cts} +253 -12
- package/dist/{chat-Bed4FQSl.d.cts → chat-DCms8pJ_.d.cts} +31 -4
- package/dist/{chat-Bed4FQSl.d.ts → chat-DCms8pJ_.d.ts} +31 -4
- package/dist/chat.cjs +1088 -775
- package/dist/chat.d.cts +1 -1
- package/dist/chat.d.ts +1 -1
- package/dist/chat.esm.js +3 -3
- package/dist/{chunk-FOD67Z6G.esm.js → chunk-4AKJ6FKE.esm.js} +235 -4
- package/dist/{chunk-YEFBANNF.esm.js → chunk-6HWMJNZT.esm.js} +242 -288
- package/dist/{chunk-C6IXFM4T.esm.js → chunk-FRZOEYBO.esm.js} +4 -4
- package/dist/chunk-JEAUF54A.esm.js +52 -0
- package/dist/{chunk-AYHOVAMI.esm.js → chunk-P3KDAYX6.esm.js} +1 -1
- package/dist/{chunk-GLPOVYEA.esm.js → chunk-TK2AGIME.esm.js} +662 -274
- package/dist/{chunk-RZ6QC6RG.esm.js → chunk-XCM3V6RK.esm.js} +2 -2
- package/dist/{chunk-SNLXVG7H.esm.js → chunk-YXZ22OJN.esm.js} +849 -665
- package/dist/index.cjs +2558 -1789
- package/dist/index.d.cts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.esm.js +29 -11
- package/dist/pill-segmented-tabs-Ba5q0feL.d.cts +500 -0
- package/dist/pill-segmented-tabs-Ba5q0feL.d.ts +500 -0
- package/dist/studio.cjs +1310 -997
- package/dist/studio.d.cts +2 -2
- package/dist/studio.d.ts +2 -2
- package/dist/studio.esm.js +5 -5
- package/dist/styles.css +26 -0
- package/dist/ui.cjs +275 -37
- package/dist/ui.d.cts +71 -491
- package/dist/ui.d.ts +71 -491
- package/dist/ui.esm.js +22 -6
- package/dist/{welcome-COOb05a5.d.cts → welcome-CRqOPKMp.d.cts} +1 -1
- package/dist/{welcome-DE08m9ca.d.ts → welcome-DlHUa3OL.d.ts} +1 -1
- package/package.json +7 -3
package/dist/studio.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-
|
|
1
|
+
export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-CRqOPKMp.cjs';
|
|
2
2
|
import { FC } from 'react';
|
|
3
|
-
import './chat-
|
|
3
|
+
import './chat-DCms8pJ_.cjs';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import '@assistant-ui/react';
|
|
6
6
|
import '@timbal-ai/timbal-sdk';
|
package/dist/studio.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-
|
|
1
|
+
export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-DlHUa3OL.js';
|
|
2
2
|
import { FC } from 'react';
|
|
3
|
-
import './chat-
|
|
3
|
+
import './chat-DCms8pJ_.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import '@assistant-ui/react';
|
|
6
6
|
import '@timbal-ai/timbal-sdk';
|
package/dist/studio.esm.js
CHANGED
|
@@ -8,12 +8,12 @@ import {
|
|
|
8
8
|
TimbalChatShell,
|
|
9
9
|
TimbalMark,
|
|
10
10
|
TimbalStudioShell
|
|
11
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-FRZOEYBO.esm.js";
|
|
12
12
|
import "./chunk-QIABF4KB.esm.js";
|
|
13
|
-
import "./chunk-
|
|
14
|
-
import "./chunk-
|
|
15
|
-
import "./chunk-
|
|
16
|
-
import "./chunk-
|
|
13
|
+
import "./chunk-XCM3V6RK.esm.js";
|
|
14
|
+
import "./chunk-YXZ22OJN.esm.js";
|
|
15
|
+
import "./chunk-P3KDAYX6.esm.js";
|
|
16
|
+
import "./chunk-4AKJ6FKE.esm.js";
|
|
17
17
|
export {
|
|
18
18
|
ModeToggle,
|
|
19
19
|
STUDIO_NAV_MODE,
|
package/dist/styles.css
CHANGED
|
@@ -106,6 +106,16 @@
|
|
|
106
106
|
--ghost-fill-hover: oklch(0.965 0.002 260 / 0.7);
|
|
107
107
|
--ghost-fill-active: oklch(0.91 0.004 260 / 0.7);
|
|
108
108
|
|
|
109
|
+
/* Chart series palette — shadcn-style categorical tokens. Series 1 leans on
|
|
110
|
+
the brand primary so single-series charts feel native; 2–6 are distinct.
|
|
111
|
+
Override any of these in your host app's :root to rebrand every chart. */
|
|
112
|
+
--chart-1: var(--primary);
|
|
113
|
+
--chart-2: oklch(0.62 0.13 184);
|
|
114
|
+
--chart-3: oklch(0.7 0.16 70);
|
|
115
|
+
--chart-4: oklch(0.62 0.2 300);
|
|
116
|
+
--chart-5: oklch(0.65 0.21 28);
|
|
117
|
+
--chart-6: oklch(0.6 0.13 233);
|
|
118
|
+
|
|
109
119
|
/* Code block surface (markdown). */
|
|
110
120
|
--code-block-bg: oklch(0.98 0 0);
|
|
111
121
|
--code-header-bg: oklch(0.965 0 0);
|
|
@@ -235,6 +245,15 @@
|
|
|
235
245
|
--ghost-fill-hover: oklch(1 0 0 / 0.10);
|
|
236
246
|
--ghost-fill-active: oklch(1 0 0 / 0.15);
|
|
237
247
|
|
|
248
|
+
/* Chart series palette (dark) — brighter, higher-chroma so lines/areas read
|
|
249
|
+
against the dark surface. Series 1 still follows the brand primary. */
|
|
250
|
+
--chart-1: var(--primary);
|
|
251
|
+
--chart-2: oklch(0.7 0.14 184);
|
|
252
|
+
--chart-3: oklch(0.77 0.16 70);
|
|
253
|
+
--chart-4: oklch(0.7 0.19 300);
|
|
254
|
+
--chart-5: oklch(0.7 0.2 28);
|
|
255
|
+
--chart-6: oklch(0.68 0.13 233);
|
|
256
|
+
|
|
238
257
|
--code-block-bg: oklch(0.19 0 0);
|
|
239
258
|
--code-header-bg: oklch(0.22 0 0 / 0.8);
|
|
240
259
|
|
|
@@ -306,6 +325,13 @@
|
|
|
306
325
|
--color-bubble-user: var(--bubble-user);
|
|
307
326
|
--color-bubble-user-foreground: var(--bubble-user-foreground);
|
|
308
327
|
|
|
328
|
+
--color-chart-1: var(--chart-1);
|
|
329
|
+
--color-chart-2: var(--chart-2);
|
|
330
|
+
--color-chart-3: var(--chart-3);
|
|
331
|
+
--color-chart-4: var(--chart-4);
|
|
332
|
+
--color-chart-5: var(--chart-5);
|
|
333
|
+
--color-chart-6: var(--chart-6);
|
|
334
|
+
|
|
309
335
|
--color-primary-fill-from: var(--primary-fill-from);
|
|
310
336
|
--color-primary-fill-to: var(--primary-fill-to);
|
|
311
337
|
--color-primary-fill-hover-from: var(--primary-fill-hover-from);
|
package/dist/ui.cjs
CHANGED
|
@@ -70,6 +70,12 @@ __export(ui_exports, {
|
|
|
70
70
|
CardFooter: () => CardFooter,
|
|
71
71
|
CardHeader: () => CardHeader,
|
|
72
72
|
CardTitle: () => CardTitle,
|
|
73
|
+
ChartContainer: () => ChartContainer,
|
|
74
|
+
ChartLegend: () => ChartLegend,
|
|
75
|
+
ChartLegendContent: () => ChartLegendContent,
|
|
76
|
+
ChartStyle: () => ChartStyle,
|
|
77
|
+
ChartTooltip: () => ChartTooltip,
|
|
78
|
+
ChartTooltipContent: () => ChartTooltipContent,
|
|
73
79
|
Checkbox: () => Checkbox,
|
|
74
80
|
Collapsible: () => Collapsible,
|
|
75
81
|
CollapsibleContent: () => CollapsibleContent,
|
|
@@ -268,6 +274,7 @@ __export(ui_exports, {
|
|
|
268
274
|
overlaySurfaceClass: () => overlaySurfaceClass,
|
|
269
275
|
toast: () => toast,
|
|
270
276
|
toggleVariants: () => toggleVariants,
|
|
277
|
+
useChart: () => useChart,
|
|
271
278
|
useToast: () => useToast
|
|
272
279
|
});
|
|
273
280
|
module.exports = __toCommonJS(ui_exports);
|
|
@@ -3807,10 +3814,234 @@ function Skeleton({ className, ...props }) {
|
|
|
3807
3814
|
);
|
|
3808
3815
|
}
|
|
3809
3816
|
|
|
3810
|
-
// src/ui/
|
|
3817
|
+
// src/ui/chart.tsx
|
|
3818
|
+
var React4 = __toESM(require("react"), 1);
|
|
3819
|
+
var RechartsPrimitive = __toESM(require("recharts"), 1);
|
|
3811
3820
|
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
3821
|
+
var THEMES = { light: "", dark: ".dark" };
|
|
3822
|
+
var ChartContext = React4.createContext(null);
|
|
3823
|
+
function useChart() {
|
|
3824
|
+
const context = React4.useContext(ChartContext);
|
|
3825
|
+
if (!context) {
|
|
3826
|
+
throw new Error("useChart must be used within a <ChartContainer />");
|
|
3827
|
+
}
|
|
3828
|
+
return context;
|
|
3829
|
+
}
|
|
3830
|
+
function ChartContainer({
|
|
3831
|
+
id,
|
|
3832
|
+
className,
|
|
3833
|
+
children,
|
|
3834
|
+
config,
|
|
3835
|
+
...props
|
|
3836
|
+
}) {
|
|
3837
|
+
const uniqueId = React4.useId();
|
|
3838
|
+
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
|
3839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
3840
|
+
"div",
|
|
3841
|
+
{
|
|
3842
|
+
"data-slot": "chart",
|
|
3843
|
+
"data-chart": chartId,
|
|
3844
|
+
className: cn(
|
|
3845
|
+
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
|
3846
|
+
className
|
|
3847
|
+
),
|
|
3848
|
+
...props,
|
|
3849
|
+
children: [
|
|
3850
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChartStyle, { id: chartId, config }),
|
|
3851
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RechartsPrimitive.ResponsiveContainer, { children })
|
|
3852
|
+
]
|
|
3853
|
+
}
|
|
3854
|
+
) });
|
|
3855
|
+
}
|
|
3856
|
+
var ChartStyle = ({ id, config }) => {
|
|
3857
|
+
const colorConfig = Object.entries(config).filter(
|
|
3858
|
+
([, c]) => c.theme || c.color
|
|
3859
|
+
);
|
|
3860
|
+
if (!colorConfig.length) {
|
|
3861
|
+
return null;
|
|
3862
|
+
}
|
|
3863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3864
|
+
"style",
|
|
3865
|
+
{
|
|
3866
|
+
dangerouslySetInnerHTML: {
|
|
3867
|
+
__html: Object.entries(THEMES).map(
|
|
3868
|
+
([theme, prefix]) => `
|
|
3869
|
+
${prefix} [data-chart=${id}] {
|
|
3870
|
+
${colorConfig.map(([key, itemConfig]) => {
|
|
3871
|
+
const color = itemConfig.theme?.[theme] || itemConfig.color;
|
|
3872
|
+
return color ? ` --color-${key}: ${color};` : null;
|
|
3873
|
+
}).join("\n")}
|
|
3874
|
+
}
|
|
3875
|
+
`
|
|
3876
|
+
).join("\n")
|
|
3877
|
+
}
|
|
3878
|
+
}
|
|
3879
|
+
);
|
|
3880
|
+
};
|
|
3881
|
+
var ChartTooltip = RechartsPrimitive.Tooltip;
|
|
3882
|
+
function ChartTooltipContent({
|
|
3883
|
+
active,
|
|
3884
|
+
payload,
|
|
3885
|
+
className,
|
|
3886
|
+
indicator = "dot",
|
|
3887
|
+
hideLabel = false,
|
|
3888
|
+
hideIndicator = false,
|
|
3889
|
+
label,
|
|
3890
|
+
labelFormatter,
|
|
3891
|
+
labelClassName,
|
|
3892
|
+
formatter,
|
|
3893
|
+
color,
|
|
3894
|
+
nameKey,
|
|
3895
|
+
labelKey
|
|
3896
|
+
}) {
|
|
3897
|
+
const { config } = useChart();
|
|
3898
|
+
const tooltipLabel = React4.useMemo(() => {
|
|
3899
|
+
if (hideLabel || !payload?.length) {
|
|
3900
|
+
return null;
|
|
3901
|
+
}
|
|
3902
|
+
const [item] = payload;
|
|
3903
|
+
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
|
|
3904
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
3905
|
+
const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
|
|
3906
|
+
if (labelFormatter) {
|
|
3907
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
|
|
3908
|
+
}
|
|
3909
|
+
if (!value) {
|
|
3910
|
+
return null;
|
|
3911
|
+
}
|
|
3912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("font-medium", labelClassName), children: value });
|
|
3913
|
+
}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
|
|
3914
|
+
if (!active || !payload?.length) {
|
|
3915
|
+
return null;
|
|
3916
|
+
}
|
|
3917
|
+
const nestLabel = payload.length === 1 && indicator !== "dot";
|
|
3918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
3919
|
+
"div",
|
|
3920
|
+
{
|
|
3921
|
+
className: cn(
|
|
3922
|
+
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
|
|
3923
|
+
"animate-in fade-in-0 zoom-in-95 duration-150",
|
|
3924
|
+
className
|
|
3925
|
+
),
|
|
3926
|
+
children: [
|
|
3927
|
+
!nestLabel ? tooltipLabel : null,
|
|
3928
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
3929
|
+
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
|
3930
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
3931
|
+
const indicatorColor = color || item.payload?.fill || item.color;
|
|
3932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3933
|
+
"div",
|
|
3934
|
+
{
|
|
3935
|
+
className: cn(
|
|
3936
|
+
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
|
3937
|
+
indicator === "dot" && "items-center"
|
|
3938
|
+
),
|
|
3939
|
+
children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
|
|
3940
|
+
itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3941
|
+
"div",
|
|
3942
|
+
{
|
|
3943
|
+
className: cn(
|
|
3944
|
+
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
|
3945
|
+
{
|
|
3946
|
+
"h-2.5 w-2.5": indicator === "dot",
|
|
3947
|
+
"w-1": indicator === "line",
|
|
3948
|
+
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
3949
|
+
"my-0.5": nestLabel && indicator === "dashed"
|
|
3950
|
+
}
|
|
3951
|
+
),
|
|
3952
|
+
style: {
|
|
3953
|
+
"--color-bg": indicatorColor,
|
|
3954
|
+
"--color-border": indicatorColor
|
|
3955
|
+
}
|
|
3956
|
+
}
|
|
3957
|
+
),
|
|
3958
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
3959
|
+
"div",
|
|
3960
|
+
{
|
|
3961
|
+
className: cn(
|
|
3962
|
+
"flex flex-1 justify-between leading-none",
|
|
3963
|
+
nestLabel ? "items-end" : "items-center"
|
|
3964
|
+
),
|
|
3965
|
+
children: [
|
|
3966
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "grid gap-1.5", children: [
|
|
3967
|
+
nestLabel ? tooltipLabel : null,
|
|
3968
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
|
|
3969
|
+
] }),
|
|
3970
|
+
item.value != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
|
|
3971
|
+
]
|
|
3972
|
+
}
|
|
3973
|
+
)
|
|
3974
|
+
] })
|
|
3975
|
+
},
|
|
3976
|
+
`${item.dataKey ?? index}`
|
|
3977
|
+
);
|
|
3978
|
+
}) })
|
|
3979
|
+
]
|
|
3980
|
+
}
|
|
3981
|
+
);
|
|
3982
|
+
}
|
|
3983
|
+
var ChartLegend = RechartsPrimitive.Legend;
|
|
3984
|
+
function ChartLegendContent({
|
|
3985
|
+
className,
|
|
3986
|
+
hideIcon = false,
|
|
3987
|
+
payload,
|
|
3988
|
+
verticalAlign = "bottom",
|
|
3989
|
+
nameKey
|
|
3990
|
+
}) {
|
|
3991
|
+
const { config } = useChart();
|
|
3992
|
+
if (!payload?.length) {
|
|
3993
|
+
return null;
|
|
3994
|
+
}
|
|
3995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3996
|
+
"div",
|
|
3997
|
+
{
|
|
3998
|
+
className: cn(
|
|
3999
|
+
"flex items-center justify-center gap-4",
|
|
4000
|
+
verticalAlign === "top" ? "pb-3" : "pt-3",
|
|
4001
|
+
className
|
|
4002
|
+
),
|
|
4003
|
+
children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
4004
|
+
const key = `${nameKey || item.dataKey || "value"}`;
|
|
4005
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
4006
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
4007
|
+
"div",
|
|
4008
|
+
{
|
|
4009
|
+
className: "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
|
|
4010
|
+
children: [
|
|
4011
|
+
itemConfig?.icon && !hideIcon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4012
|
+
"div",
|
|
4013
|
+
{
|
|
4014
|
+
className: "h-2 w-2 shrink-0 rounded-[2px]",
|
|
4015
|
+
style: { backgroundColor: item.color }
|
|
4016
|
+
}
|
|
4017
|
+
),
|
|
4018
|
+
itemConfig?.label
|
|
4019
|
+
]
|
|
4020
|
+
},
|
|
4021
|
+
`${item.value ?? index}`
|
|
4022
|
+
);
|
|
4023
|
+
})
|
|
4024
|
+
}
|
|
4025
|
+
);
|
|
4026
|
+
}
|
|
4027
|
+
function getPayloadConfigFromPayload(config, payload, key) {
|
|
4028
|
+
if (typeof payload !== "object" || payload === null) {
|
|
4029
|
+
return void 0;
|
|
4030
|
+
}
|
|
4031
|
+
const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
|
|
4032
|
+
let configLabelKey = key;
|
|
4033
|
+
if (key in payload && typeof payload[key] === "string") {
|
|
4034
|
+
configLabelKey = payload[key];
|
|
4035
|
+
} else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
|
|
4036
|
+
configLabelKey = payloadPayload[key];
|
|
4037
|
+
}
|
|
4038
|
+
return configLabelKey in config ? config[configLabelKey] : config[key];
|
|
4039
|
+
}
|
|
4040
|
+
|
|
4041
|
+
// src/ui/table.tsx
|
|
4042
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
3812
4043
|
function Table({ className, ...props }) {
|
|
3813
|
-
return /* @__PURE__ */ (0,
|
|
4044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3814
4045
|
"table",
|
|
3815
4046
|
{
|
|
3816
4047
|
"data-slot": "table",
|
|
@@ -3820,7 +4051,7 @@ function Table({ className, ...props }) {
|
|
|
3820
4051
|
) });
|
|
3821
4052
|
}
|
|
3822
4053
|
function TableHeader({ className, ...props }) {
|
|
3823
|
-
return /* @__PURE__ */ (0,
|
|
4054
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3824
4055
|
"thead",
|
|
3825
4056
|
{
|
|
3826
4057
|
"data-slot": "table-header",
|
|
@@ -3830,7 +4061,7 @@ function TableHeader({ className, ...props }) {
|
|
|
3830
4061
|
);
|
|
3831
4062
|
}
|
|
3832
4063
|
function TableBody({ className, ...props }) {
|
|
3833
|
-
return /* @__PURE__ */ (0,
|
|
4064
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3834
4065
|
"tbody",
|
|
3835
4066
|
{
|
|
3836
4067
|
"data-slot": "table-body",
|
|
@@ -3840,7 +4071,7 @@ function TableBody({ className, ...props }) {
|
|
|
3840
4071
|
);
|
|
3841
4072
|
}
|
|
3842
4073
|
function TableFooter({ className, ...props }) {
|
|
3843
|
-
return /* @__PURE__ */ (0,
|
|
4074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3844
4075
|
"tfoot",
|
|
3845
4076
|
{
|
|
3846
4077
|
"data-slot": "table-footer",
|
|
@@ -3853,7 +4084,7 @@ function TableFooter({ className, ...props }) {
|
|
|
3853
4084
|
);
|
|
3854
4085
|
}
|
|
3855
4086
|
function TableRow({ className, ...props }) {
|
|
3856
|
-
return /* @__PURE__ */ (0,
|
|
4087
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3857
4088
|
"tr",
|
|
3858
4089
|
{
|
|
3859
4090
|
"data-slot": "table-row",
|
|
@@ -3866,7 +4097,7 @@ function TableRow({ className, ...props }) {
|
|
|
3866
4097
|
);
|
|
3867
4098
|
}
|
|
3868
4099
|
function TableHead({ className, ...props }) {
|
|
3869
|
-
return /* @__PURE__ */ (0,
|
|
4100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3870
4101
|
"th",
|
|
3871
4102
|
{
|
|
3872
4103
|
"data-slot": "table-head",
|
|
@@ -3879,7 +4110,7 @@ function TableHead({ className, ...props }) {
|
|
|
3879
4110
|
);
|
|
3880
4111
|
}
|
|
3881
4112
|
function TableCell({ className, ...props }) {
|
|
3882
|
-
return /* @__PURE__ */ (0,
|
|
4113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3883
4114
|
"td",
|
|
3884
4115
|
{
|
|
3885
4116
|
"data-slot": "table-cell",
|
|
@@ -3892,7 +4123,7 @@ function TableCell({ className, ...props }) {
|
|
|
3892
4123
|
);
|
|
3893
4124
|
}
|
|
3894
4125
|
function TableCaption({ className, ...props }) {
|
|
3895
|
-
return /* @__PURE__ */ (0,
|
|
4126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3896
4127
|
"caption",
|
|
3897
4128
|
{
|
|
3898
4129
|
"data-slot": "table-caption",
|
|
@@ -3905,17 +4136,17 @@ function TableCaption({ className, ...props }) {
|
|
|
3905
4136
|
// src/ui/toast.tsx
|
|
3906
4137
|
var import_radix_ui32 = require("radix-ui");
|
|
3907
4138
|
var import_lucide_react18 = require("lucide-react");
|
|
3908
|
-
var
|
|
4139
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
3909
4140
|
function ToastProvider({
|
|
3910
4141
|
...props
|
|
3911
4142
|
}) {
|
|
3912
|
-
return /* @__PURE__ */ (0,
|
|
4143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui32.Toast.Provider, { "data-slot": "toast-provider", ...props });
|
|
3913
4144
|
}
|
|
3914
4145
|
function ToastViewport({
|
|
3915
4146
|
className,
|
|
3916
4147
|
...props
|
|
3917
4148
|
}) {
|
|
3918
|
-
return /* @__PURE__ */ (0,
|
|
4149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
3919
4150
|
import_radix_ui32.Toast.Viewport,
|
|
3920
4151
|
{
|
|
3921
4152
|
"data-slot": "toast-viewport",
|
|
@@ -3932,7 +4163,7 @@ function Toast({
|
|
|
3932
4163
|
variant = "default",
|
|
3933
4164
|
...props
|
|
3934
4165
|
}) {
|
|
3935
|
-
return /* @__PURE__ */ (0,
|
|
4166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
3936
4167
|
import_radix_ui32.Toast.Root,
|
|
3937
4168
|
{
|
|
3938
4169
|
"data-slot": "toast",
|
|
@@ -3951,7 +4182,7 @@ function ToastAction({
|
|
|
3951
4182
|
className,
|
|
3952
4183
|
...props
|
|
3953
4184
|
}) {
|
|
3954
|
-
return /* @__PURE__ */ (0,
|
|
4185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
3955
4186
|
import_radix_ui32.Toast.Action,
|
|
3956
4187
|
{
|
|
3957
4188
|
"data-slot": "toast-action",
|
|
@@ -3967,7 +4198,7 @@ function ToastClose({
|
|
|
3967
4198
|
className,
|
|
3968
4199
|
...props
|
|
3969
4200
|
}) {
|
|
3970
|
-
return /* @__PURE__ */ (0,
|
|
4201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
3971
4202
|
import_radix_ui32.Toast.Close,
|
|
3972
4203
|
{
|
|
3973
4204
|
"data-slot": "toast-close",
|
|
@@ -3977,7 +4208,7 @@ function ToastClose({
|
|
|
3977
4208
|
),
|
|
3978
4209
|
"toast-close": "",
|
|
3979
4210
|
...props,
|
|
3980
|
-
children: /* @__PURE__ */ (0,
|
|
4211
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react18.XIcon, { className: "size-4" })
|
|
3981
4212
|
}
|
|
3982
4213
|
);
|
|
3983
4214
|
}
|
|
@@ -3985,7 +4216,7 @@ function ToastTitle({
|
|
|
3985
4216
|
className,
|
|
3986
4217
|
...props
|
|
3987
4218
|
}) {
|
|
3988
|
-
return /* @__PURE__ */ (0,
|
|
4219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
3989
4220
|
import_radix_ui32.Toast.Title,
|
|
3990
4221
|
{
|
|
3991
4222
|
"data-slot": "toast-title",
|
|
@@ -3998,7 +4229,7 @@ function ToastDescription({
|
|
|
3998
4229
|
className,
|
|
3999
4230
|
...props
|
|
4000
4231
|
}) {
|
|
4001
|
-
return /* @__PURE__ */ (0,
|
|
4232
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
4002
4233
|
import_radix_ui32.Toast.Description,
|
|
4003
4234
|
{
|
|
4004
4235
|
"data-slot": "toast-description",
|
|
@@ -4009,7 +4240,7 @@ function ToastDescription({
|
|
|
4009
4240
|
}
|
|
4010
4241
|
|
|
4011
4242
|
// src/ui/use-toast.ts
|
|
4012
|
-
var
|
|
4243
|
+
var React5 = __toESM(require("react"), 1);
|
|
4013
4244
|
var TOAST_LIMIT = 3;
|
|
4014
4245
|
var TOAST_REMOVE_DELAY = 5e3;
|
|
4015
4246
|
var listeners = /* @__PURE__ */ new Set();
|
|
@@ -4062,8 +4293,8 @@ function toast(input) {
|
|
|
4062
4293
|
return memoryState.add(input);
|
|
4063
4294
|
}
|
|
4064
4295
|
function useToast() {
|
|
4065
|
-
const [state, setState] =
|
|
4066
|
-
|
|
4296
|
+
const [state, setState] = React5.useState(memoryState);
|
|
4297
|
+
React5.useEffect(() => {
|
|
4067
4298
|
listeners.add(setState);
|
|
4068
4299
|
return () => {
|
|
4069
4300
|
listeners.delete(setState);
|
|
@@ -4077,33 +4308,33 @@ function useToast() {
|
|
|
4077
4308
|
}
|
|
4078
4309
|
|
|
4079
4310
|
// src/ui/toaster.tsx
|
|
4080
|
-
var
|
|
4311
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
4081
4312
|
function Toaster() {
|
|
4082
4313
|
const { toasts, dismiss } = useToast();
|
|
4083
|
-
return /* @__PURE__ */ (0,
|
|
4084
|
-
toasts.map(({ id, title, description, variant }) => /* @__PURE__ */ (0,
|
|
4314
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ToastProvider, { children: [
|
|
4315
|
+
toasts.map(({ id, title, description, variant }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
|
|
4085
4316
|
Toast,
|
|
4086
4317
|
{
|
|
4087
4318
|
variant,
|
|
4088
4319
|
onOpenChange: (open) => !open && dismiss(id),
|
|
4089
4320
|
children: [
|
|
4090
|
-
/* @__PURE__ */ (0,
|
|
4091
|
-
title ? /* @__PURE__ */ (0,
|
|
4092
|
-
description ? /* @__PURE__ */ (0,
|
|
4321
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "grid gap-1", children: [
|
|
4322
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastTitle, { children: title }) : null,
|
|
4323
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastDescription, { children: description }) : null
|
|
4093
4324
|
] }),
|
|
4094
|
-
/* @__PURE__ */ (0,
|
|
4325
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastClose, {})
|
|
4095
4326
|
]
|
|
4096
4327
|
},
|
|
4097
4328
|
id
|
|
4098
4329
|
)),
|
|
4099
|
-
/* @__PURE__ */ (0,
|
|
4330
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastViewport, {})
|
|
4100
4331
|
] });
|
|
4101
4332
|
}
|
|
4102
4333
|
|
|
4103
4334
|
// src/ui/shimmer.tsx
|
|
4104
4335
|
var import_react = require("motion/react");
|
|
4105
4336
|
var import_react2 = require("react");
|
|
4106
|
-
var
|
|
4337
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
4107
4338
|
var ShimmerComponent = ({
|
|
4108
4339
|
children,
|
|
4109
4340
|
as: Component = "p",
|
|
@@ -4118,7 +4349,7 @@ var ShimmerComponent = ({
|
|
|
4118
4349
|
() => (children?.length ?? 0) * spread,
|
|
4119
4350
|
[children, spread]
|
|
4120
4351
|
);
|
|
4121
|
-
return /* @__PURE__ */ (0,
|
|
4352
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4122
4353
|
MotionComponent,
|
|
4123
4354
|
{
|
|
4124
4355
|
animate: { backgroundPosition: "0% center" },
|
|
@@ -4178,7 +4409,7 @@ var pillSegmentedActiveIndicatorClass = cn(
|
|
|
4178
4409
|
);
|
|
4179
4410
|
|
|
4180
4411
|
// src/ui/pill-segmented-tabs.tsx
|
|
4181
|
-
var
|
|
4412
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
4182
4413
|
var PillTab = ({
|
|
4183
4414
|
tabKey,
|
|
4184
4415
|
label,
|
|
@@ -4192,7 +4423,7 @@ var PillTab = ({
|
|
|
4192
4423
|
const handlePress = (0, import_react3.useCallback)(() => {
|
|
4193
4424
|
if (!disabled) onSelect(tabKey);
|
|
4194
4425
|
}, [disabled, onSelect, tabKey]);
|
|
4195
|
-
return /* @__PURE__ */ (0,
|
|
4426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
4196
4427
|
"button",
|
|
4197
4428
|
{
|
|
4198
4429
|
type: "button",
|
|
@@ -4205,15 +4436,15 @@ var PillTab = ({
|
|
|
4205
4436
|
!disabled && (isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground")
|
|
4206
4437
|
),
|
|
4207
4438
|
children: [
|
|
4208
|
-
isActive && animateIndicator ? /* @__PURE__ */ (0,
|
|
4439
|
+
isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
4209
4440
|
import_react4.motion.div,
|
|
4210
4441
|
{
|
|
4211
4442
|
layoutId,
|
|
4212
4443
|
className: pillSegmentedActiveIndicatorClass,
|
|
4213
4444
|
transition: { type: "spring", duration: 0.3, bounce: 0.15 }
|
|
4214
4445
|
}
|
|
4215
|
-
) : isActive ? /* @__PURE__ */ (0,
|
|
4216
|
-
/* @__PURE__ */ (0,
|
|
4446
|
+
) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
|
|
4447
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
|
|
4217
4448
|
]
|
|
4218
4449
|
}
|
|
4219
4450
|
);
|
|
@@ -4233,7 +4464,7 @@ var PillSegmentedTabs = ({
|
|
|
4233
4464
|
const isFlush = trackVariant === "flush";
|
|
4234
4465
|
const trackClass = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
|
|
4235
4466
|
const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
|
|
4236
|
-
return /* @__PURE__ */ (0,
|
|
4467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
4237
4468
|
PillTab,
|
|
4238
4469
|
{
|
|
4239
4470
|
tabKey: tab.key,
|
|
@@ -4291,6 +4522,12 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
|
|
|
4291
4522
|
CardFooter,
|
|
4292
4523
|
CardHeader,
|
|
4293
4524
|
CardTitle,
|
|
4525
|
+
ChartContainer,
|
|
4526
|
+
ChartLegend,
|
|
4527
|
+
ChartLegendContent,
|
|
4528
|
+
ChartStyle,
|
|
4529
|
+
ChartTooltip,
|
|
4530
|
+
ChartTooltipContent,
|
|
4294
4531
|
Checkbox,
|
|
4295
4532
|
Collapsible,
|
|
4296
4533
|
CollapsibleContent,
|
|
@@ -4489,5 +4726,6 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
|
|
|
4489
4726
|
overlaySurfaceClass,
|
|
4490
4727
|
toast,
|
|
4491
4728
|
toggleVariants,
|
|
4729
|
+
useChart,
|
|
4492
4730
|
useToast
|
|
4493
4731
|
});
|