@dust-tt/sparkle 0.2.639 → 0.2.641-rc-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/cjs/index.js +1 -1
- package/dist/esm/components/Citation.d.ts +1 -1
- package/dist/esm/components/Citation.d.ts.map +1 -1
- package/dist/esm/components/Citation.js +28 -13
- package/dist/esm/components/Citation.js.map +1 -1
- package/dist/esm/stories/Citation.stories.d.ts +1 -1
- package/dist/esm/stories/Citation.stories.d.ts.map +1 -1
- package/dist/esm/stories/Citation.stories.js +24 -25
- package/dist/esm/stories/Citation.stories.js.map +1 -1
- package/dist/esm/stories/InteractiveImageGrid.stories.d.ts +1 -1
- package/dist/sparkle.css +8 -14
- package/package.json +1 -1
- package/src/components/Citation.tsx +69 -37
- package/src/stories/Citation.stories.tsx +44 -26
|
@@ -3,7 +3,7 @@ import { CardProps } from "../components";
|
|
|
3
3
|
type CitationProps = CardProps & {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
isLoading?: boolean;
|
|
6
|
-
tooltip?:
|
|
6
|
+
tooltip?: React.ReactNode;
|
|
7
7
|
};
|
|
8
8
|
declare const Citation: React.ForwardRefExoticComponent<CitationProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
9
|
declare const CitationIndex: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../../src/components/Citation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,
|
|
1
|
+
{"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../../src/components/Citation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAU,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAK3E,KAAK,aAAa,GAAG,SAAS,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,QAAQ,sFAwFb,CAAC;AAIF,QAAA,MAAM,aAAa,6GAiBjB,CAAC;AAGH,QAAA,MAAM,sBAAsB,2BAA4B,CAAC;AACzD,KAAK,uBAAuB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAcvE,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,OAAO,CAAC,EAAE,uBAAuB,CAAC;CACnC;AAED,QAAA,MAAM,YAAY,0FAYjB,CAAC;AAGF,UAAU,kBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,QAAA,MAAM,aAAa,8FAiBlB,CAAC;AAIF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,aAAa,2FAgClB,CAAC;AAIF,QAAA,MAAM,aAAa,6GAmBjB,CAAC;AAuBH,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,2FAkBlB,CAAC;AAGF,UAAU,wBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,iGAmBvB,CAAC;AAGH,OAAO,EACL,QAAQ,EACR,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,GACd,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
2
|
import { cva } from "class-variance-authority";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { Button,
|
|
4
|
+
import { Button, Spinner, Tooltip } from "../components";
|
|
5
|
+
import { LinkWrapper } from "../components/LinkWrapper";
|
|
5
6
|
import { XMarkIcon } from "../icons/app";
|
|
6
7
|
import { cn } from "../lib/utils";
|
|
7
8
|
var Citation = React.forwardRef(function (_a, ref) {
|
|
8
|
-
var children = _a.children,
|
|
9
|
+
var children = _a.children, isLoading = _a.isLoading, className = _a.className, tooltip = _a.tooltip, props = __rest(_a, ["children", "isLoading", "className", "tooltip"]);
|
|
9
10
|
var hasDescription = React.useMemo(function () {
|
|
10
11
|
var childrenArray = React.Children.toArray(children);
|
|
11
12
|
return childrenArray.some(function (child) {
|
|
@@ -19,21 +20,35 @@ var Citation = React.forwardRef(function (_a, ref) {
|
|
|
19
20
|
var contentWithDescription = (React.createElement(React.Fragment, null,
|
|
20
21
|
children,
|
|
21
22
|
!hasDescription && React.createElement(CitationDescription, null, "\u00A0")));
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
// Render as an inline chip (link when href provided, otherwise div)
|
|
24
|
+
// We intentionally do NOT render the description inline; it's expected in tooltip.
|
|
25
|
+
// Extract link-related props if present (from CardProps union)
|
|
26
|
+
var action = props.action;
|
|
27
|
+
var _b = props, href = _b.href, target = _b.target, rel = _b.rel, replace = _b.replace, shallow = _b.shallow, onClick = _b.onClick, rest = __rest(_b, ["href", "target", "rel", "replace", "shallow", "onClick"]);
|
|
28
|
+
// Filter out CitationDescription & CitationImage from inline content
|
|
29
|
+
var inlineChildren = React.Children.toArray(contentWithDescription).filter(function (child) {
|
|
30
|
+
return !(React.isValidElement(child) &&
|
|
31
|
+
(child.type === CitationDescription || child.type === CitationImage));
|
|
32
|
+
});
|
|
33
|
+
var chipContent = (React.createElement("div", __assign({ ref: ref, className: cn(
|
|
34
|
+
// base chip styles
|
|
35
|
+
"s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-xl s-px-2 s-py-1", "s-border s-border-border s-bg-background s-text-foreground", "dark:s-border-border-night dark:s-bg-background-night dark:s-text-foreground-night", "s-max-w-64 s-w-full s-truncate s-text-sm s-font-semibold", className),
|
|
36
|
+
// Keep button-like behavior if onClick
|
|
37
|
+
onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined }, rest),
|
|
38
|
+
inlineChildren,
|
|
39
|
+
action && React.createElement("div", { className: "s-ml-1 s-flex s-items-center" }, action),
|
|
40
|
+
isLoading && (React.createElement("span", { className: "s-ml-1 s-inline-flex" },
|
|
41
|
+
React.createElement(Spinner, { variant: "dark", size: "xs" })))));
|
|
42
|
+
var chip = href ? (React.createElement(LinkWrapper, { href: href, target: target, rel: rel, replace: replace, shallow: shallow }, chipContent)) : (chipContent);
|
|
28
43
|
if (tooltip) {
|
|
29
|
-
return React.createElement(Tooltip, { trigger:
|
|
44
|
+
return React.createElement(Tooltip, { trigger: chip, label: tooltip });
|
|
30
45
|
}
|
|
31
|
-
return
|
|
46
|
+
return chip;
|
|
32
47
|
});
|
|
33
48
|
Citation.displayName = "Citation";
|
|
34
49
|
var CitationIndex = React.forwardRef(function (_a, ref) {
|
|
35
50
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
36
|
-
return (React.createElement("div", __assign({ ref: ref, className: cn("s-z-10", "s-flex s-h-4 s-w-4 s-items-center s-justify-center s-rounded-full s-text-xs s-font-semibold",
|
|
51
|
+
return (React.createElement("div", __assign({ ref: ref, className: cn("s-z-10", "s-flex s-h-4 s-w-4 s-items-center s-justify-center s-rounded-full s-text-xs s-font-semibold", className) }, props), children));
|
|
37
52
|
});
|
|
38
53
|
CitationIndex.displayName = "CitationIndex";
|
|
39
54
|
var CITATION_GRID_VARIANTS = ["grid", "list"];
|
|
@@ -50,7 +65,7 @@ var citationGridVariants = cva("s-grid s-gap-2", {
|
|
|
50
65
|
});
|
|
51
66
|
var CitationGrid = React.forwardRef(function (_a, ref) {
|
|
52
67
|
var children = _a.children, className = _a.className, variant = _a.variant, props = __rest(_a, ["children", "className", "variant"]);
|
|
53
|
-
return (React.createElement("div", __assign({ ref: ref, className: cn("s-min-w-60 s-@container", className) }, props),
|
|
68
|
+
return (React.createElement("div", __assign({ ref: ref, className: cn("s-min-w-60 s-space-x-1 s-@container", className) }, props),
|
|
54
69
|
React.createElement("div", { className: citationGridVariants({ variant: variant }) }, children)));
|
|
55
70
|
});
|
|
56
71
|
CitationGrid.displayName = "CitationGrid";
|
|
@@ -72,7 +87,7 @@ var CitationImage = React.forwardRef(function (_a, ref) {
|
|
|
72
87
|
CitationImage.displayName = "CitationImage";
|
|
73
88
|
var CitationIcons = React.forwardRef(function (_a, ref) {
|
|
74
89
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
75
|
-
return (React.createElement("div", __assign({ ref: ref, className: cn("s-flex s-items-center s-gap-
|
|
90
|
+
return (React.createElement("div", __assign({ ref: ref, className: cn("s-flex s-flex-row s-items-center s-justify-center", "s-gap-1 s-rounded-lg s-p-1 s-text-xs s-font-medium", "s-bg-muted-background dark:s-bg-muted-background-night", "s-text-muted-foreground dark:s-text-muted-foreground-night", className) }, props), children));
|
|
76
91
|
});
|
|
77
92
|
CitationIcons.displayName = "CitationIcons";
|
|
78
93
|
var CitationLoading = React.forwardRef(function (_a, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Citation.js","sourceRoot":"","sources":["../../../src/components/Citation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,
|
|
1
|
+
{"version":3,"file":"Citation.js","sourceRoot":"","sources":["../../../src/components/Citation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ declare const meta: {
|
|
|
4
4
|
component: React.ForwardRefExoticComponent<(import("../index_with_tw_base").CardProps & {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
isLoading?: boolean | undefined;
|
|
7
|
-
tooltip?:
|
|
7
|
+
tooltip?: React.ReactNode;
|
|
8
8
|
}) & React.RefAttributes<HTMLDivElement>>;
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Citation.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Citation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwB1B,QAAA,MAAM,IAAI;;;;;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Citation.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Citation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwB1B,QAAA,MAAM,IAAI;;;;;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,gBAAgB,yBA+M5B,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Button, Citation, CitationClose, CitationDescription, CitationGrid, CitationIcons,
|
|
2
|
+
import { Button, Citation, CitationClose, CitationDescription, CitationGrid, CitationIcons, CitationIndex, CitationTitle, DocumentIcon, ExternalLinkIcon, FaviconIcon, GlobeAltIcon, Icon, ImageIcon, Tooltip, NotionLogo, Popover, SlackLogo, TableIcon, } from "../index_with_tw_base";
|
|
3
3
|
var meta = {
|
|
4
4
|
title: "Components/Citation",
|
|
5
5
|
component: Citation,
|
|
@@ -8,31 +8,30 @@ export default meta;
|
|
|
8
8
|
export var CitationsExample = function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-8" },
|
|
9
9
|
"Example of attachement",
|
|
10
10
|
React.createElement(CitationGrid, null,
|
|
11
|
-
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); },
|
|
11
|
+
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, tooltip: "@ed at 16:32 This is the latest ve" },
|
|
12
12
|
React.createElement(CitationIcons, null,
|
|
13
13
|
React.createElement(Icon, { visual: SlackLogo, size: "sm" })),
|
|
14
14
|
React.createElement(CitationTitle, null, "Citation w/ tooltip"),
|
|
15
15
|
React.createElement(CitationDescription, null, "@ed at 16:32 This is the latest ve"))),
|
|
16
16
|
React.createElement(CitationGrid, null,
|
|
17
|
-
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); },
|
|
17
|
+
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, tooltip: "@ed at 16:32 This is the latest ve" },
|
|
18
18
|
React.createElement(CitationIcons, null,
|
|
19
19
|
React.createElement(Icon, { visual: SlackLogo, size: "sm" })),
|
|
20
20
|
React.createElement(CitationTitle, null, "Slack thread"),
|
|
21
21
|
React.createElement(CitationDescription, null, "@ed at 16:32 This is the latest ve")),
|
|
22
|
-
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }
|
|
22
|
+
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); } },
|
|
23
23
|
React.createElement(CitationIcons, null,
|
|
24
24
|
React.createElement(Icon, { visual: TableIcon, size: "sm" })),
|
|
25
25
|
React.createElement(CitationTitle, null, "extract_financa.csv")),
|
|
26
|
-
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }
|
|
26
|
+
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); } },
|
|
27
27
|
React.createElement(CitationIcons, null,
|
|
28
28
|
React.createElement(FaviconIcon, { websiteUrl: "https://www.linkedin.com", size: "sm" })),
|
|
29
29
|
React.createElement(CitationTitle, null, "Linkedin, Edouard Wautier")),
|
|
30
|
-
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }
|
|
30
|
+
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); } },
|
|
31
31
|
React.createElement(CitationIcons, null,
|
|
32
32
|
React.createElement(FaviconIcon, { websiteUrl: "https://github.com", size: "sm" })),
|
|
33
33
|
React.createElement(CitationTitle, null, "GitHub Repository")),
|
|
34
|
-
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); },
|
|
35
|
-
React.createElement(CitationImage, { imgSrc: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
|
|
34
|
+
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, tooltip: React.createElement("img", { src: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", alt: "screenshot.png" }) },
|
|
36
35
|
React.createElement(CitationIcons, null,
|
|
37
36
|
React.createElement(Icon, { visual: ImageIcon, size: "sm" })),
|
|
38
37
|
React.createElement(CitationTitle, null, "screenshot.png")),
|
|
@@ -55,45 +54,45 @@ export var CitationsExample = function () { return (React.createElement("div", {
|
|
|
55
54
|
React.createElement(CitationIcons, null,
|
|
56
55
|
React.createElement(Icon, { visual: GlobeAltIcon, size: "sm" })),
|
|
57
56
|
React.createElement(CitationTitle, null, "Linkedin, Edouard Wautier")),
|
|
58
|
-
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48", action: React.createElement(CitationClose, { onClick: function () { return alert("Close clicked"); } }) },
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
React.createElement(
|
|
62
|
-
|
|
57
|
+
React.createElement(Tooltip, { trigger: React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48", action: React.createElement(CitationClose, { onClick: function () { return alert("Close clicked"); } }) },
|
|
58
|
+
React.createElement(CitationIcons, null,
|
|
59
|
+
React.createElement(Icon, { visual: ImageIcon, size: "sm" })),
|
|
60
|
+
React.createElement(CitationTitle, null, "screenshot.png")), label: React.createElement("div", { className: "s-flex s-w-80 s-max-w-[80vw] s-flex-col s-gap-2" },
|
|
61
|
+
React.createElement("img", { src: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", alt: "screenshot.png", className: "s-mx-auto s-max-h-40 s-w-full s-rounded-md s-object-contain" })) })),
|
|
63
62
|
"Example of citations in markdown",
|
|
64
63
|
React.createElement("div", null,
|
|
65
64
|
React.createElement(Popover, { trigger: React.createElement(CitationIndex, null, "1"), content: React.createElement(React.Fragment, null,
|
|
66
65
|
React.createElement(CitationIcons, null,
|
|
67
|
-
React.createElement(
|
|
68
|
-
React.createElement(
|
|
66
|
+
React.createElement(Icon, { visual: SlackLogo, size: "sm" }),
|
|
67
|
+
React.createElement(CitationIndex, null, "1")),
|
|
69
68
|
React.createElement(CitationTitle, null, "Hello"),
|
|
70
69
|
React.createElement(Button, { variant: "ghost", icon: ExternalLinkIcon, className: "s-absolute s-right-2 s-top-2" })) })),
|
|
71
70
|
"Example of dynamic grid",
|
|
72
71
|
React.createElement(CitationGrid, null,
|
|
73
72
|
React.createElement(Citation, { onClick: function () { return alert("Card clicked"); } },
|
|
74
73
|
React.createElement(CitationIcons, null,
|
|
75
|
-
React.createElement(
|
|
76
|
-
React.createElement(
|
|
74
|
+
React.createElement(Icon, { visual: SlackLogo, size: "sm" }),
|
|
75
|
+
React.createElement(CitationIndex, null, "1")),
|
|
77
76
|
React.createElement(CitationTitle, null, "Hello")),
|
|
78
77
|
React.createElement(Citation, { onClick: function () { return alert("Close action clicked"); } },
|
|
79
78
|
React.createElement(CitationIcons, null,
|
|
80
|
-
React.createElement(
|
|
81
|
-
React.createElement(
|
|
79
|
+
React.createElement(Icon, { visual: NotionLogo, size: "sm" }),
|
|
80
|
+
React.createElement(CitationIndex, null, "2")),
|
|
82
81
|
React.createElement(CitationTitle, null, "Hello")),
|
|
83
82
|
React.createElement(Citation, { onClick: function () { return alert("Close action clicked"); } },
|
|
84
83
|
React.createElement(CitationIcons, null,
|
|
85
|
-
React.createElement(
|
|
86
|
-
React.createElement(
|
|
84
|
+
React.createElement(Icon, { visual: DocumentIcon, size: "sm" }),
|
|
85
|
+
React.createElement(CitationIndex, null, "3")),
|
|
87
86
|
React.createElement(CitationTitle, null, "Hello")),
|
|
88
87
|
React.createElement(Citation, { onClick: function () { return alert("Close action clicked"); } },
|
|
89
88
|
React.createElement(CitationIcons, null,
|
|
90
|
-
React.createElement(
|
|
91
|
-
React.createElement(
|
|
89
|
+
React.createElement(FaviconIcon, { websiteUrl: "https://stackoverflow.com", size: "sm" }),
|
|
90
|
+
React.createElement(CitationIndex, null, "4")),
|
|
92
91
|
React.createElement(CitationTitle, null, "Stack Overflow Answer")),
|
|
93
92
|
React.createElement(Citation, { onClick: function () { return alert("Close action clicked"); } },
|
|
94
93
|
React.createElement(CitationIcons, null,
|
|
95
|
-
React.createElement(
|
|
96
|
-
React.createElement(
|
|
94
|
+
React.createElement(FaviconIcon, { websiteUrl: "https://www.wikipedia.org", size: "sm" }),
|
|
95
|
+
React.createElement(CitationIndex, null, "5")),
|
|
97
96
|
React.createElement(CitationTitle, null, "Wikipedia Article"))),
|
|
98
97
|
"Example of interactive content (list variant)",
|
|
99
98
|
React.createElement(CitationGrid, { variant: "list" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Citation.stories.js","sourceRoot":"","sources":["../../../src/stories/Citation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,MAAM,EACN,QAAQ,EACR,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,aAAa,EACb,
|
|
1
|
+
{"version":3,"file":"Citation.stories.js","sourceRoot":"","sources":["../../../src/stories/Citation.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ declare const meta: {
|
|
|
4
4
|
component: React.ForwardRefExoticComponent<(import("../index_with_tw_base").CardProps & {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
isLoading?: boolean | undefined;
|
|
7
|
-
tooltip?:
|
|
7
|
+
tooltip?: React.ReactNode;
|
|
8
8
|
}) & React.RefAttributes<HTMLDivElement>>;
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
package/dist/sparkle.css
CHANGED
|
@@ -1518,6 +1518,10 @@ select {
|
|
|
1518
1518
|
height: 1px;
|
|
1519
1519
|
}
|
|
1520
1520
|
|
|
1521
|
+
.s-max-h-40 {
|
|
1522
|
+
max-height: 10rem;
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1521
1525
|
.s-max-h-72 {
|
|
1522
1526
|
max-height: 18rem;
|
|
1523
1527
|
}
|
|
@@ -1856,6 +1860,10 @@ select {
|
|
|
1856
1860
|
max-width: 80vh;
|
|
1857
1861
|
}
|
|
1858
1862
|
|
|
1863
|
+
.s-max-w-\[80vw\] {
|
|
1864
|
+
max-width: 80vw;
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1859
1867
|
.s-max-w-\[900px\] {
|
|
1860
1868
|
max-width: 900px;
|
|
1861
1869
|
}
|
|
@@ -4417,10 +4425,6 @@ select {
|
|
|
4417
4425
|
padding-top: 1.75rem;
|
|
4418
4426
|
}
|
|
4419
4427
|
|
|
4420
|
-
.s-pt-\[min\(8\%\,theme\(spacing\.3\)\)\] {
|
|
4421
|
-
padding-top: min(8%,0.75rem);
|
|
4422
|
-
}
|
|
4423
|
-
|
|
4424
4428
|
.s-text-left {
|
|
4425
4429
|
text-align: left;
|
|
4426
4430
|
}
|
|
@@ -4919,11 +4923,6 @@ select {
|
|
|
4919
4923
|
color: rgb(42 50 65 / var(--tw-text-opacity));
|
|
4920
4924
|
}
|
|
4921
4925
|
|
|
4922
|
-
.s-text-primary-200 {
|
|
4923
|
-
--tw-text-opacity: 1;
|
|
4924
|
-
color: rgb(211 213 217 / var(--tw-text-opacity));
|
|
4925
|
-
}
|
|
4926
|
-
|
|
4927
4926
|
.s-text-primary-400 {
|
|
4928
4927
|
--tw-text-opacity: 1;
|
|
4929
4928
|
color: rgb(150 156 165 / var(--tw-text-opacity));
|
|
@@ -8193,11 +8192,6 @@ select {
|
|
|
8193
8192
|
color: rgb(255 241 247 / var(--tw-text-opacity));
|
|
8194
8193
|
}
|
|
8195
8194
|
|
|
8196
|
-
:is(.s-dark .dark\:s-text-primary-200-night) {
|
|
8197
|
-
--tw-text-opacity: 1;
|
|
8198
|
-
color: rgb(42 50 65 / var(--tw-text-opacity));
|
|
8199
|
-
}
|
|
8200
|
-
|
|
8201
8195
|
:is(.s-dark .dark\:s-text-primary-300) {
|
|
8202
8196
|
--tw-text-opacity: 1;
|
|
8203
8197
|
color: rgb(178 182 189 / var(--tw-text-opacity));
|
package/package.json
CHANGED
|
@@ -1,34 +1,19 @@
|
|
|
1
1
|
import { cva } from "class-variance-authority";
|
|
2
2
|
import React, { ReactNode } from "react";
|
|
3
3
|
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
Card,
|
|
7
|
-
CardProps,
|
|
8
|
-
Spinner,
|
|
9
|
-
Tooltip,
|
|
10
|
-
} from "@sparkle/components/";
|
|
4
|
+
import { Button, CardProps, Spinner, Tooltip } from "@sparkle/components/";
|
|
5
|
+
import { LinkWrapper, LinkWrapperProps } from "@sparkle/components/LinkWrapper";
|
|
11
6
|
import { XMarkIcon } from "@sparkle/icons/app";
|
|
12
7
|
import { cn } from "@sparkle/lib/utils";
|
|
13
8
|
|
|
14
9
|
type CitationProps = CardProps & {
|
|
15
10
|
children: React.ReactNode;
|
|
16
11
|
isLoading?: boolean;
|
|
17
|
-
tooltip?:
|
|
12
|
+
tooltip?: React.ReactNode;
|
|
18
13
|
};
|
|
19
14
|
|
|
20
15
|
const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
|
|
21
|
-
(
|
|
22
|
-
{
|
|
23
|
-
children,
|
|
24
|
-
variant = "secondary",
|
|
25
|
-
isLoading,
|
|
26
|
-
className,
|
|
27
|
-
tooltip,
|
|
28
|
-
...props
|
|
29
|
-
},
|
|
30
|
-
ref
|
|
31
|
-
) => {
|
|
16
|
+
({ children, isLoading, className, tooltip, ...props }, ref) => {
|
|
32
17
|
const hasDescription = React.useMemo(() => {
|
|
33
18
|
const childrenArray = React.Children.toArray(children);
|
|
34
19
|
return childrenArray.some(
|
|
@@ -47,30 +32,73 @@ const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
|
|
|
47
32
|
{!hasDescription && <CitationDescription> </CitationDescription>}
|
|
48
33
|
</>
|
|
49
34
|
);
|
|
50
|
-
|
|
51
|
-
|
|
35
|
+
// Render as an inline chip (link when href provided, otherwise div)
|
|
36
|
+
// We intentionally do NOT render the description inline; it's expected in tooltip.
|
|
37
|
+
|
|
38
|
+
// Extract link-related props if present (from CardProps union)
|
|
39
|
+
const action = (props as unknown as { action?: React.ReactNode }).action;
|
|
40
|
+
const { href, target, rel, replace, shallow, onClick, ...rest } =
|
|
41
|
+
props as unknown as LinkWrapperProps &
|
|
42
|
+
React.ButtonHTMLAttributes<HTMLDivElement>;
|
|
43
|
+
|
|
44
|
+
// Filter out CitationDescription & CitationImage from inline content
|
|
45
|
+
const inlineChildren = React.Children.toArray(
|
|
46
|
+
contentWithDescription
|
|
47
|
+
).filter(
|
|
48
|
+
(child) =>
|
|
49
|
+
!(
|
|
50
|
+
React.isValidElement(child) &&
|
|
51
|
+
(child.type === CitationDescription || child.type === CitationImage)
|
|
52
|
+
)
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
const chipContent = (
|
|
56
|
+
<div
|
|
52
57
|
ref={ref}
|
|
53
|
-
variant={variant}
|
|
54
|
-
size="sm"
|
|
55
58
|
className={cn(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
"s-
|
|
59
|
+
// base chip styles
|
|
60
|
+
"s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-xl s-px-2 s-py-1",
|
|
61
|
+
"s-border s-border-border s-bg-background s-text-foreground",
|
|
62
|
+
"dark:s-border-border-night dark:s-bg-background-night dark:s-text-foreground-night",
|
|
63
|
+
"s-max-w-64 s-w-full s-truncate s-text-sm s-font-semibold",
|
|
60
64
|
className
|
|
61
65
|
)}
|
|
62
|
-
|
|
66
|
+
// Keep button-like behavior if onClick
|
|
67
|
+
onClick={onClick as any}
|
|
68
|
+
role={onClick ? "button" : undefined}
|
|
69
|
+
tabIndex={onClick ? 0 : undefined}
|
|
70
|
+
{...(rest as any)}
|
|
71
|
+
>
|
|
72
|
+
{/* icons + title only */}
|
|
73
|
+
{inlineChildren}
|
|
74
|
+
{action && <div className="s-ml-1 s-flex s-items-center">{action}</div>}
|
|
75
|
+
{isLoading && (
|
|
76
|
+
<span className="s-ml-1 s-inline-flex">
|
|
77
|
+
<Spinner variant="dark" size="xs" />
|
|
78
|
+
</span>
|
|
79
|
+
)}
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
const chip = href ? (
|
|
84
|
+
<LinkWrapper
|
|
85
|
+
href={href}
|
|
86
|
+
target={target}
|
|
87
|
+
rel={rel}
|
|
88
|
+
replace={replace}
|
|
89
|
+
shallow={shallow}
|
|
63
90
|
>
|
|
64
|
-
{
|
|
65
|
-
|
|
66
|
-
|
|
91
|
+
{chipContent}
|
|
92
|
+
</LinkWrapper>
|
|
93
|
+
) : (
|
|
94
|
+
chipContent
|
|
67
95
|
);
|
|
68
96
|
|
|
69
97
|
if (tooltip) {
|
|
70
|
-
return <Tooltip trigger={
|
|
98
|
+
return <Tooltip trigger={chip} label={tooltip} />;
|
|
71
99
|
}
|
|
72
100
|
|
|
73
|
-
return
|
|
101
|
+
return chip;
|
|
74
102
|
}
|
|
75
103
|
);
|
|
76
104
|
|
|
@@ -86,8 +114,6 @@ const CitationIndex = React.forwardRef<
|
|
|
86
114
|
className={cn(
|
|
87
115
|
"s-z-10",
|
|
88
116
|
"s-flex s-h-4 s-w-4 s-items-center s-justify-center s-rounded-full s-text-xs s-font-semibold",
|
|
89
|
-
"s-text-primary-200 dark:s-text-primary-200-night",
|
|
90
|
-
"s-bg-primary-600 dark:s-bg-primary-600-night",
|
|
91
117
|
className
|
|
92
118
|
)}
|
|
93
119
|
{...props}
|
|
@@ -122,7 +148,7 @@ const CitationGrid = React.forwardRef<HTMLDivElement, CitationGridProps>(
|
|
|
122
148
|
return (
|
|
123
149
|
<div
|
|
124
150
|
ref={ref}
|
|
125
|
-
className={cn("s-min-w-60 s-@container", className)}
|
|
151
|
+
className={cn("s-min-w-60 s-space-x-1 s-@container", className)}
|
|
126
152
|
{...props}
|
|
127
153
|
>
|
|
128
154
|
<div className={citationGridVariants({ variant })}>{children}</div>
|
|
@@ -206,7 +232,13 @@ const CitationIcons = React.forwardRef<
|
|
|
206
232
|
return (
|
|
207
233
|
<div
|
|
208
234
|
ref={ref}
|
|
209
|
-
className={cn(
|
|
235
|
+
className={cn(
|
|
236
|
+
"s-flex s-flex-row s-items-center s-justify-center",
|
|
237
|
+
"s-gap-1 s-rounded-lg s-p-1 s-text-xs s-font-medium",
|
|
238
|
+
"s-bg-muted-background dark:s-bg-muted-background-night",
|
|
239
|
+
"s-text-muted-foreground dark:s-text-muted-foreground-night",
|
|
240
|
+
className
|
|
241
|
+
)}
|
|
210
242
|
{...props}
|
|
211
243
|
>
|
|
212
244
|
{children}
|