@j3m-quantum/ui 0.7.13 → 0.8.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/index.cjs +312 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +33 -1
- package/dist/index.d.ts +33 -1
- package/dist/index.js +296 -4
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +82 -26
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -845,6 +845,298 @@ function ToggleGroupItem({
|
|
|
845
845
|
}
|
|
846
846
|
);
|
|
847
847
|
}
|
|
848
|
+
function ToolBarCanvas({
|
|
849
|
+
className,
|
|
850
|
+
...props
|
|
851
|
+
}) {
|
|
852
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
853
|
+
"div",
|
|
854
|
+
{
|
|
855
|
+
"data-slot": "toolbar-canvas",
|
|
856
|
+
className: cn(
|
|
857
|
+
"inline-flex items-center gap-1 rounded-full bg-sidebar border border-sidebar-border p-1.5",
|
|
858
|
+
className
|
|
859
|
+
),
|
|
860
|
+
...props
|
|
861
|
+
}
|
|
862
|
+
);
|
|
863
|
+
}
|
|
864
|
+
function ToolBarCanvasDivider({
|
|
865
|
+
className,
|
|
866
|
+
...props
|
|
867
|
+
}) {
|
|
868
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
869
|
+
"div",
|
|
870
|
+
{
|
|
871
|
+
"data-slot": "toolbar-canvas-divider",
|
|
872
|
+
className: cn("w-px h-6 mx-1.5 bg-foreground/20", className),
|
|
873
|
+
...props
|
|
874
|
+
}
|
|
875
|
+
);
|
|
876
|
+
}
|
|
877
|
+
function ToolBarCanvasGroup({
|
|
878
|
+
className,
|
|
879
|
+
...props
|
|
880
|
+
}) {
|
|
881
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
882
|
+
"div",
|
|
883
|
+
{
|
|
884
|
+
"data-slot": "toolbar-canvas-group",
|
|
885
|
+
className: cn("flex items-center gap-1", className),
|
|
886
|
+
...props
|
|
887
|
+
}
|
|
888
|
+
);
|
|
889
|
+
}
|
|
890
|
+
var toolBarCanvasButtonVariants = classVarianceAuthority.cva(
|
|
891
|
+
"inline-flex items-center justify-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
892
|
+
{
|
|
893
|
+
variants: {
|
|
894
|
+
size: {
|
|
895
|
+
default: "size-10",
|
|
896
|
+
sm: "size-8",
|
|
897
|
+
lg: "size-12"
|
|
898
|
+
}
|
|
899
|
+
},
|
|
900
|
+
defaultVariants: {
|
|
901
|
+
size: "default"
|
|
902
|
+
}
|
|
903
|
+
}
|
|
904
|
+
);
|
|
905
|
+
function ToolBarCanvasButton({
|
|
906
|
+
className,
|
|
907
|
+
size,
|
|
908
|
+
children,
|
|
909
|
+
...props
|
|
910
|
+
}) {
|
|
911
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
912
|
+
TogglePrimitive__namespace.Root,
|
|
913
|
+
{
|
|
914
|
+
"data-slot": "toolbar-canvas-button",
|
|
915
|
+
className: cn(
|
|
916
|
+
toolBarCanvasButtonVariants({ size }),
|
|
917
|
+
"bg-transparent text-foreground/70 hover:bg-muted hover:text-foreground",
|
|
918
|
+
"data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
|
|
919
|
+
"[&_svg]:size-5 [&_svg]:shrink-0",
|
|
920
|
+
className
|
|
921
|
+
),
|
|
922
|
+
...props,
|
|
923
|
+
children
|
|
924
|
+
}
|
|
925
|
+
);
|
|
926
|
+
}
|
|
927
|
+
function PlayerCanvas({
|
|
928
|
+
className,
|
|
929
|
+
...props
|
|
930
|
+
}) {
|
|
931
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
932
|
+
"div",
|
|
933
|
+
{
|
|
934
|
+
"data-slot": "player-canvas",
|
|
935
|
+
className: cn(
|
|
936
|
+
"relative flex flex-col gap-3",
|
|
937
|
+
className
|
|
938
|
+
),
|
|
939
|
+
...props
|
|
940
|
+
}
|
|
941
|
+
);
|
|
942
|
+
}
|
|
943
|
+
function PlayerCanvasControls({
|
|
944
|
+
className,
|
|
945
|
+
...props
|
|
946
|
+
}) {
|
|
947
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
948
|
+
"div",
|
|
949
|
+
{
|
|
950
|
+
"data-slot": "player-canvas-controls",
|
|
951
|
+
className: cn(
|
|
952
|
+
"flex items-center gap-2 px-1.5 py-1.5 rounded-full bg-sidebar border border-sidebar-border",
|
|
953
|
+
className
|
|
954
|
+
),
|
|
955
|
+
...props
|
|
956
|
+
}
|
|
957
|
+
);
|
|
958
|
+
}
|
|
959
|
+
var playerCanvasPlayButtonVariants = classVarianceAuthority.cva(
|
|
960
|
+
"inline-flex items-center justify-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-white hover:opacity-90",
|
|
961
|
+
{
|
|
962
|
+
variants: {
|
|
963
|
+
size: {
|
|
964
|
+
default: "size-14",
|
|
965
|
+
sm: "size-10",
|
|
966
|
+
lg: "size-16"
|
|
967
|
+
}
|
|
968
|
+
},
|
|
969
|
+
defaultVariants: {
|
|
970
|
+
size: "default"
|
|
971
|
+
}
|
|
972
|
+
}
|
|
973
|
+
);
|
|
974
|
+
function PlayerCanvasPlayButton({
|
|
975
|
+
className,
|
|
976
|
+
size,
|
|
977
|
+
isPlaying,
|
|
978
|
+
children,
|
|
979
|
+
style,
|
|
980
|
+
...props
|
|
981
|
+
}) {
|
|
982
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
983
|
+
"button",
|
|
984
|
+
{
|
|
985
|
+
"data-slot": "player-canvas-play-button",
|
|
986
|
+
"data-playing": isPlaying,
|
|
987
|
+
className: cn(
|
|
988
|
+
playerCanvasPlayButtonVariants({ size }),
|
|
989
|
+
"[&_svg]:size-6 [&_svg]:shrink-0",
|
|
990
|
+
className
|
|
991
|
+
),
|
|
992
|
+
style: {
|
|
993
|
+
backgroundColor: "var(--j3m-primary-250)",
|
|
994
|
+
...style
|
|
995
|
+
},
|
|
996
|
+
...props,
|
|
997
|
+
children
|
|
998
|
+
}
|
|
999
|
+
);
|
|
1000
|
+
}
|
|
1001
|
+
var playerCanvasSkipButtonVariants = classVarianceAuthority.cva(
|
|
1002
|
+
"inline-flex items-center justify-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-transparent text-foreground/60 hover:text-foreground hover:bg-muted",
|
|
1003
|
+
{
|
|
1004
|
+
variants: {
|
|
1005
|
+
size: {
|
|
1006
|
+
default: "size-10",
|
|
1007
|
+
sm: "size-8",
|
|
1008
|
+
lg: "size-12"
|
|
1009
|
+
}
|
|
1010
|
+
},
|
|
1011
|
+
defaultVariants: {
|
|
1012
|
+
size: "default"
|
|
1013
|
+
}
|
|
1014
|
+
}
|
|
1015
|
+
);
|
|
1016
|
+
function PlayerCanvasSkipButton({
|
|
1017
|
+
className,
|
|
1018
|
+
size,
|
|
1019
|
+
children,
|
|
1020
|
+
...props
|
|
1021
|
+
}) {
|
|
1022
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1023
|
+
"button",
|
|
1024
|
+
{
|
|
1025
|
+
"data-slot": "player-canvas-skip-button",
|
|
1026
|
+
className: cn(
|
|
1027
|
+
playerCanvasSkipButtonVariants({ size }),
|
|
1028
|
+
"[&_svg]:size-5 [&_svg]:shrink-0",
|
|
1029
|
+
className
|
|
1030
|
+
),
|
|
1031
|
+
...props,
|
|
1032
|
+
children
|
|
1033
|
+
}
|
|
1034
|
+
);
|
|
1035
|
+
}
|
|
1036
|
+
function PlayerCanvasDivider({
|
|
1037
|
+
className,
|
|
1038
|
+
...props
|
|
1039
|
+
}) {
|
|
1040
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1041
|
+
"div",
|
|
1042
|
+
{
|
|
1043
|
+
"data-slot": "player-canvas-divider",
|
|
1044
|
+
className: cn("w-px h-10 mx-2 bg-foreground/15", className),
|
|
1045
|
+
...props
|
|
1046
|
+
}
|
|
1047
|
+
);
|
|
1048
|
+
}
|
|
1049
|
+
function PlayerCanvasInfo({
|
|
1050
|
+
className,
|
|
1051
|
+
...props
|
|
1052
|
+
}) {
|
|
1053
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1054
|
+
"div",
|
|
1055
|
+
{
|
|
1056
|
+
"data-slot": "player-canvas-info",
|
|
1057
|
+
className: cn("flex flex-col justify-center flex-1 min-w-0", className),
|
|
1058
|
+
...props
|
|
1059
|
+
}
|
|
1060
|
+
);
|
|
1061
|
+
}
|
|
1062
|
+
function PlayerCanvasLabel({
|
|
1063
|
+
className,
|
|
1064
|
+
...props
|
|
1065
|
+
}) {
|
|
1066
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1067
|
+
"span",
|
|
1068
|
+
{
|
|
1069
|
+
"data-slot": "player-canvas-label",
|
|
1070
|
+
className: cn(
|
|
1071
|
+
"text-xs font-medium text-foreground/50 uppercase tracking-wider",
|
|
1072
|
+
className
|
|
1073
|
+
),
|
|
1074
|
+
...props
|
|
1075
|
+
}
|
|
1076
|
+
);
|
|
1077
|
+
}
|
|
1078
|
+
function PlayerCanvasTitle({
|
|
1079
|
+
className,
|
|
1080
|
+
...props
|
|
1081
|
+
}) {
|
|
1082
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1083
|
+
"span",
|
|
1084
|
+
{
|
|
1085
|
+
"data-slot": "player-canvas-title",
|
|
1086
|
+
className: cn(
|
|
1087
|
+
"text-lg font-semibold text-foreground truncate",
|
|
1088
|
+
className
|
|
1089
|
+
),
|
|
1090
|
+
...props
|
|
1091
|
+
}
|
|
1092
|
+
);
|
|
1093
|
+
}
|
|
1094
|
+
function PlayerCanvasActionButton({
|
|
1095
|
+
className,
|
|
1096
|
+
children,
|
|
1097
|
+
...props
|
|
1098
|
+
}) {
|
|
1099
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1100
|
+
"button",
|
|
1101
|
+
{
|
|
1102
|
+
"data-slot": "player-canvas-action-button",
|
|
1103
|
+
className: cn(
|
|
1104
|
+
"inline-flex items-center justify-center size-10 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-transparent text-foreground/40 hover:text-foreground hover:bg-muted",
|
|
1105
|
+
"[&_svg]:size-5 [&_svg]:shrink-0",
|
|
1106
|
+
className
|
|
1107
|
+
),
|
|
1108
|
+
...props,
|
|
1109
|
+
children
|
|
1110
|
+
}
|
|
1111
|
+
);
|
|
1112
|
+
}
|
|
1113
|
+
function PlayerCanvasProgress({
|
|
1114
|
+
className,
|
|
1115
|
+
value = 0,
|
|
1116
|
+
max = 100,
|
|
1117
|
+
...props
|
|
1118
|
+
}) {
|
|
1119
|
+
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
1120
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1121
|
+
"div",
|
|
1122
|
+
{
|
|
1123
|
+
"data-slot": "player-canvas-progress",
|
|
1124
|
+
className: cn("relative h-2 w-full rounded-full bg-foreground/10 overflow-hidden", className),
|
|
1125
|
+
...props,
|
|
1126
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1127
|
+
"div",
|
|
1128
|
+
{
|
|
1129
|
+
"data-slot": "player-canvas-progress-bar",
|
|
1130
|
+
className: "absolute inset-y-0 left-0 rounded-full transition-all duration-200",
|
|
1131
|
+
style: {
|
|
1132
|
+
width: `${percentage}%`,
|
|
1133
|
+
backgroundColor: "var(--j3m-primary-250)"
|
|
1134
|
+
}
|
|
1135
|
+
}
|
|
1136
|
+
)
|
|
1137
|
+
}
|
|
1138
|
+
);
|
|
1139
|
+
}
|
|
848
1140
|
function Label2({
|
|
849
1141
|
className,
|
|
850
1142
|
...props
|
|
@@ -3202,7 +3494,7 @@ function CommandItem({
|
|
|
3202
3494
|
{
|
|
3203
3495
|
"data-slot": "command-item",
|
|
3204
3496
|
className: cn(
|
|
3205
|
-
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
3497
|
+
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground data-[selected=true]:[&_svg]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
3206
3498
|
className
|
|
3207
3499
|
),
|
|
3208
3500
|
...props
|
|
@@ -3717,7 +4009,7 @@ function NavigationMenuItem({
|
|
|
3717
4009
|
);
|
|
3718
4010
|
}
|
|
3719
4011
|
var navigationMenuTriggerStyle = classVarianceAuthority.cva(
|
|
3720
|
-
"group inline-flex h-9 w-max items-center justify-center rounded-
|
|
4012
|
+
"group inline-flex h-9 w-max items-center justify-center rounded-full bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
|
|
3721
4013
|
);
|
|
3722
4014
|
function NavigationMenuTrigger({
|
|
3723
4015
|
className,
|
|
@@ -3794,7 +4086,7 @@ function NavigationMenuLink({
|
|
|
3794
4086
|
{
|
|
3795
4087
|
"data-slot": "navigation-menu-link",
|
|
3796
4088
|
className: cn(
|
|
3797
|
-
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
|
4089
|
+
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground hover:[&_svg]:text-accent-foreground hover:[&_p]:text-accent-foreground hover:[&_.text-muted-foreground]:text-accent-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
|
3798
4090
|
className
|
|
3799
4091
|
),
|
|
3800
4092
|
...props
|
|
@@ -5383,6 +5675,16 @@ exports.PaginationItem = PaginationItem;
|
|
|
5383
5675
|
exports.PaginationLink = PaginationLink;
|
|
5384
5676
|
exports.PaginationNext = PaginationNext;
|
|
5385
5677
|
exports.PaginationPrevious = PaginationPrevious;
|
|
5678
|
+
exports.PlayerCanvas = PlayerCanvas;
|
|
5679
|
+
exports.PlayerCanvasActionButton = PlayerCanvasActionButton;
|
|
5680
|
+
exports.PlayerCanvasControls = PlayerCanvasControls;
|
|
5681
|
+
exports.PlayerCanvasDivider = PlayerCanvasDivider;
|
|
5682
|
+
exports.PlayerCanvasInfo = PlayerCanvasInfo;
|
|
5683
|
+
exports.PlayerCanvasLabel = PlayerCanvasLabel;
|
|
5684
|
+
exports.PlayerCanvasPlayButton = PlayerCanvasPlayButton;
|
|
5685
|
+
exports.PlayerCanvasProgress = PlayerCanvasProgress;
|
|
5686
|
+
exports.PlayerCanvasSkipButton = PlayerCanvasSkipButton;
|
|
5687
|
+
exports.PlayerCanvasTitle = PlayerCanvasTitle;
|
|
5386
5688
|
exports.Popover = Popover;
|
|
5387
5689
|
exports.PopoverAnchor = PopoverAnchor;
|
|
5388
5690
|
exports.PopoverContent = PopoverContent;
|
|
@@ -5465,6 +5767,10 @@ exports.Toaster = Toaster;
|
|
|
5465
5767
|
exports.Toggle = Toggle;
|
|
5466
5768
|
exports.ToggleGroup = ToggleGroup;
|
|
5467
5769
|
exports.ToggleGroupItem = ToggleGroupItem;
|
|
5770
|
+
exports.ToolBarCanvas = ToolBarCanvas;
|
|
5771
|
+
exports.ToolBarCanvasButton = ToolBarCanvasButton;
|
|
5772
|
+
exports.ToolBarCanvasDivider = ToolBarCanvasDivider;
|
|
5773
|
+
exports.ToolBarCanvasGroup = ToolBarCanvasGroup;
|
|
5468
5774
|
exports.Tooltip = Tooltip2;
|
|
5469
5775
|
exports.TooltipContent = TooltipContent;
|
|
5470
5776
|
exports.TooltipProvider = TooltipProvider;
|
|
@@ -5474,8 +5780,11 @@ exports.buttonGroupVariants = buttonGroupVariants;
|
|
|
5474
5780
|
exports.buttonVariants = buttonVariants;
|
|
5475
5781
|
exports.cardVariants = cardVariants;
|
|
5476
5782
|
exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
|
|
5783
|
+
exports.playerCanvasPlayButtonVariants = playerCanvasPlayButtonVariants;
|
|
5784
|
+
exports.playerCanvasSkipButtonVariants = playerCanvasSkipButtonVariants;
|
|
5477
5785
|
exports.sectionVariants = sectionVariants;
|
|
5478
5786
|
exports.toggleVariants = toggleVariants;
|
|
5787
|
+
exports.toolBarCanvasButtonVariants = toolBarCanvasButtonVariants;
|
|
5479
5788
|
exports.useFormField = useFormField;
|
|
5480
5789
|
exports.useIsMobile = useIsMobile;
|
|
5481
5790
|
exports.useSidebar = useSidebar;
|