@syscore/ui-library 1.11.0 → 1.11.2
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/client/components/icons/UtilityClose.tsx +1 -1
- package/client/components/ui/tooltip.tsx +28 -3
- package/client/global.css +13 -15
- package/client/ui/Panel.stories.tsx +38 -23
- package/client/ui/Tooltip.stories.tsx +30 -19
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +59 -45
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -869,6 +869,50 @@ function Skeleton({
|
|
|
869
869
|
}
|
|
870
870
|
);
|
|
871
871
|
}
|
|
872
|
+
const UtilityClose = ({ className }) => {
|
|
873
|
+
return /* @__PURE__ */ jsx(
|
|
874
|
+
"div",
|
|
875
|
+
{
|
|
876
|
+
className: cn(
|
|
877
|
+
"size-4 flex items-center justify-center text-gray-500 group-hover:text-gray-400",
|
|
878
|
+
className
|
|
879
|
+
),
|
|
880
|
+
children: /* @__PURE__ */ jsxs(
|
|
881
|
+
"svg",
|
|
882
|
+
{
|
|
883
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
884
|
+
width: "12",
|
|
885
|
+
height: "12",
|
|
886
|
+
viewBox: "0 0 12 12",
|
|
887
|
+
fill: "none",
|
|
888
|
+
className: cn("size-3 text-inherit"),
|
|
889
|
+
children: [
|
|
890
|
+
/* @__PURE__ */ jsx(
|
|
891
|
+
"path",
|
|
892
|
+
{
|
|
893
|
+
d: "M10.8002 1.19995L1.2002 10.8",
|
|
894
|
+
stroke: "currentColor",
|
|
895
|
+
strokeWidth: "1.5",
|
|
896
|
+
strokeLinecap: "round",
|
|
897
|
+
strokeLinejoin: "round"
|
|
898
|
+
}
|
|
899
|
+
),
|
|
900
|
+
/* @__PURE__ */ jsx(
|
|
901
|
+
"path",
|
|
902
|
+
{
|
|
903
|
+
d: "M1.2002 1.19995L10.8002 10.8",
|
|
904
|
+
stroke: "currentColor",
|
|
905
|
+
strokeWidth: "1.5",
|
|
906
|
+
strokeLinecap: "round",
|
|
907
|
+
strokeLinejoin: "round"
|
|
908
|
+
}
|
|
909
|
+
)
|
|
910
|
+
]
|
|
911
|
+
}
|
|
912
|
+
)
|
|
913
|
+
}
|
|
914
|
+
);
|
|
915
|
+
};
|
|
872
916
|
const TooltipContext = React.createContext({
|
|
873
917
|
trigger: "hover",
|
|
874
918
|
toggle: () => {
|
|
@@ -965,6 +1009,7 @@ function TooltipContent({
|
|
|
965
1009
|
side: side2 = "bottom",
|
|
966
1010
|
children,
|
|
967
1011
|
alignOffset = 0,
|
|
1012
|
+
hideClose = false,
|
|
968
1013
|
...props
|
|
969
1014
|
}) {
|
|
970
1015
|
const { trigger, close, triggerRef } = React.useContext(TooltipContext);
|
|
@@ -998,7 +1043,7 @@ function TooltipContent({
|
|
|
998
1043
|
className: cn("tooltip-content", className),
|
|
999
1044
|
...props,
|
|
1000
1045
|
children: [
|
|
1001
|
-
/* @__PURE__ */ jsx("div", { className: "tooltip-arrow",
|
|
1046
|
+
/* @__PURE__ */ jsx("div", { className: "tooltip-arrow", children: /* @__PURE__ */ jsx(
|
|
1002
1047
|
"svg",
|
|
1003
1048
|
{
|
|
1004
1049
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1015,11 +1060,24 @@ function TooltipContent({
|
|
|
1015
1060
|
)
|
|
1016
1061
|
}
|
|
1017
1062
|
) }),
|
|
1063
|
+
!hideClose && /* @__PURE__ */ jsx(ToggleClose, { className: "absolute top-4 right-4" }),
|
|
1018
1064
|
children
|
|
1019
1065
|
]
|
|
1020
1066
|
}
|
|
1021
1067
|
) });
|
|
1022
1068
|
}
|
|
1069
|
+
function ToggleClose({ className }) {
|
|
1070
|
+
const { close } = React.useContext(TooltipContext);
|
|
1071
|
+
return /* @__PURE__ */ jsx(
|
|
1072
|
+
"button",
|
|
1073
|
+
{
|
|
1074
|
+
"data-slot": "tooltip-close",
|
|
1075
|
+
onClick: close,
|
|
1076
|
+
className: cn("group cursor-pointer", className),
|
|
1077
|
+
children: /* @__PURE__ */ jsx(UtilityClose, {})
|
|
1078
|
+
}
|
|
1079
|
+
);
|
|
1080
|
+
}
|
|
1023
1081
|
const SIDEBAR_COOKIE_NAME = "sidebar:state";
|
|
1024
1082
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
1025
1083
|
const SIDEBAR_WIDTH = "16rem";
|
|
@@ -2299,50 +2357,6 @@ function Calendar({
|
|
|
2299
2357
|
);
|
|
2300
2358
|
}
|
|
2301
2359
|
Calendar.displayName = "Calendar";
|
|
2302
|
-
const UtilityClose = ({ className }) => {
|
|
2303
|
-
return /* @__PURE__ */ jsx(
|
|
2304
|
-
"div",
|
|
2305
|
-
{
|
|
2306
|
-
className: cn(
|
|
2307
|
-
"size-4 flex items-center justify-center text-gray-500",
|
|
2308
|
-
className
|
|
2309
|
-
),
|
|
2310
|
-
children: /* @__PURE__ */ jsxs(
|
|
2311
|
-
"svg",
|
|
2312
|
-
{
|
|
2313
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2314
|
-
width: "12",
|
|
2315
|
-
height: "12",
|
|
2316
|
-
viewBox: "0 0 12 12",
|
|
2317
|
-
fill: "none",
|
|
2318
|
-
className: cn("size-3 text-inherit"),
|
|
2319
|
-
children: [
|
|
2320
|
-
/* @__PURE__ */ jsx(
|
|
2321
|
-
"path",
|
|
2322
|
-
{
|
|
2323
|
-
d: "M10.8002 1.19995L1.2002 10.8",
|
|
2324
|
-
stroke: "currentColor",
|
|
2325
|
-
strokeWidth: "1.5",
|
|
2326
|
-
strokeLinecap: "round",
|
|
2327
|
-
strokeLinejoin: "round"
|
|
2328
|
-
}
|
|
2329
|
-
),
|
|
2330
|
-
/* @__PURE__ */ jsx(
|
|
2331
|
-
"path",
|
|
2332
|
-
{
|
|
2333
|
-
d: "M1.2002 1.19995L10.8002 10.8",
|
|
2334
|
-
stroke: "currentColor",
|
|
2335
|
-
strokeWidth: "1.5",
|
|
2336
|
-
strokeLinecap: "round",
|
|
2337
|
-
strokeLinejoin: "round"
|
|
2338
|
-
}
|
|
2339
|
-
)
|
|
2340
|
-
]
|
|
2341
|
-
}
|
|
2342
|
-
)
|
|
2343
|
-
}
|
|
2344
|
-
);
|
|
2345
|
-
};
|
|
2346
2360
|
function Dialog({
|
|
2347
2361
|
...props
|
|
2348
2362
|
}) {
|