@moontra/moonui-pro 2.2.6 → 2.2.8
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.mjs +21 -23
- package/package.json +1 -1
- package/src/components/advanced-chart/index.tsx +1 -1
- package/src/components/dashboard/index.tsx +1 -1
- package/src/components/draggable-list/index.tsx +1 -1
- package/src/components/timeline/index.tsx +1 -1
- package/src/components/ui/alert.tsx +2 -3
package/dist/index.mjs
CHANGED
|
@@ -23,7 +23,6 @@ import * as ToastPrimitives from '@radix-ui/react-toast';
|
|
|
23
23
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
24
24
|
import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
|
|
25
25
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';
|
|
26
|
-
import { cn as cn$1 } from '@moontra/moonui';
|
|
27
26
|
import { ResponsiveContainer, ScatterChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Legend, Scatter, PieChart, Pie, Cell, AreaChart, Area, ReferenceLine, Brush, BarChart, Bar, LineChart, Line, ReferenceArea } from 'recharts';
|
|
28
27
|
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
|
|
29
28
|
import { useForm } from 'react-hook-form';
|
|
@@ -1830,7 +1829,7 @@ var MoonUIalertVariantsPro = cva(
|
|
|
1830
1829
|
);
|
|
1831
1830
|
var MoonUIAlertPro = t.forwardRef(
|
|
1832
1831
|
({ className, variant = "default", size, radius, hideIcon = false, closable = false, onClose, children, ...props }, ref) => {
|
|
1833
|
-
const
|
|
1832
|
+
const MoonUIIconPro = t.useMemo(() => {
|
|
1834
1833
|
switch (variant) {
|
|
1835
1834
|
case "success":
|
|
1836
1835
|
return Check;
|
|
@@ -1852,7 +1851,7 @@ var MoonUIAlertPro = t.forwardRef(
|
|
|
1852
1851
|
className: cn(MoonUIalertVariantsPro({ variant, size, radius, withClose: closable }), className),
|
|
1853
1852
|
...props,
|
|
1854
1853
|
children: [
|
|
1855
|
-
!hideIcon && /* @__PURE__ */ jsx(
|
|
1854
|
+
!hideIcon && /* @__PURE__ */ jsx(MoonUIIconPro, { className: "h-5 w-5" }),
|
|
1856
1855
|
/* @__PURE__ */ jsx("div", { className: "flex-1", children }),
|
|
1857
1856
|
closable && onClose && /* @__PURE__ */ jsx(
|
|
1858
1857
|
"button",
|
|
@@ -1887,7 +1886,6 @@ var MoonUIAlertDescriptionPro = t.forwardRef(({ className, ...props }, ref) => /
|
|
|
1887
1886
|
}
|
|
1888
1887
|
));
|
|
1889
1888
|
MoonUIAlertDescriptionPro.displayName = "AlertDescriptionPro";
|
|
1890
|
-
MoonUIIconPro;
|
|
1891
1889
|
var MoonUIaspectRatioVariantsPro = cva(
|
|
1892
1890
|
"relative overflow-hidden",
|
|
1893
1891
|
{
|
|
@@ -48789,7 +48787,7 @@ function Timeline({
|
|
|
48789
48787
|
return /* @__PURE__ */ jsxs(
|
|
48790
48788
|
"div",
|
|
48791
48789
|
{
|
|
48792
|
-
className: cn
|
|
48790
|
+
className: cn(
|
|
48793
48791
|
"relative flex gap-4",
|
|
48794
48792
|
compact ? "pb-4" : "pb-8",
|
|
48795
48793
|
interactive && "cursor-pointer hover:bg-muted/50 rounded-lg p-2 -m-2 transition-colors"
|
|
@@ -48797,7 +48795,7 @@ function Timeline({
|
|
|
48797
48795
|
onClick: () => handleEventClick(event),
|
|
48798
48796
|
children: [
|
|
48799
48797
|
orientation === "vertical" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
|
|
48800
|
-
/* @__PURE__ */ jsx("div", { className: cn
|
|
48798
|
+
/* @__PURE__ */ jsx("div", { className: cn(
|
|
48801
48799
|
"flex items-center justify-center w-8 h-8 rounded-full border-2 bg-background",
|
|
48802
48800
|
eventColor
|
|
48803
48801
|
), children: eventIcon }),
|
|
@@ -48806,18 +48804,18 @@ function Timeline({
|
|
|
48806
48804
|
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
48807
48805
|
/* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
|
|
48808
48806
|
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
48809
|
-
/* @__PURE__ */ jsx("h4", { className: cn
|
|
48807
|
+
/* @__PURE__ */ jsx("h4", { className: cn(
|
|
48810
48808
|
"font-medium text-sm",
|
|
48811
48809
|
compact ? "mb-1" : "mb-2"
|
|
48812
48810
|
), children: event.title }),
|
|
48813
|
-
event.description && /* @__PURE__ */ jsx("p", { className: cn
|
|
48811
|
+
event.description && /* @__PURE__ */ jsx("p", { className: cn(
|
|
48814
48812
|
"text-muted-foreground text-sm",
|
|
48815
48813
|
compact ? "mb-1" : "mb-2"
|
|
48816
48814
|
), children: event.description })
|
|
48817
48815
|
] }),
|
|
48818
48816
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
|
|
48819
48817
|
showRelativeTime ? /* @__PURE__ */ jsx("span", { children: getRelativeTime(event.date) }) : /* @__PURE__ */ jsx("span", { children: formatTime(event.date) }),
|
|
48820
|
-
/* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", className: cn
|
|
48818
|
+
/* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", className: cn("text-xs", textColor), children: event.type })
|
|
48821
48819
|
] })
|
|
48822
48820
|
] }),
|
|
48823
48821
|
showUserInfo && event.user && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
|
|
@@ -48863,7 +48861,7 @@ function Timeline({
|
|
|
48863
48861
|
events2.map((event, index) => renderEvent(event, index, index === events2.length - 1))
|
|
48864
48862
|
] }, date));
|
|
48865
48863
|
};
|
|
48866
|
-
return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn
|
|
48864
|
+
return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full", className), children: [
|
|
48867
48865
|
/* @__PURE__ */ jsxs(MoonUICardHeaderPro, { children: [
|
|
48868
48866
|
/* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
|
|
48869
48867
|
/* @__PURE__ */ jsx(Clock, { className: "h-5 w-5" }),
|
|
@@ -48876,7 +48874,7 @@ function Timeline({
|
|
|
48876
48874
|
" tracked"
|
|
48877
48875
|
] })
|
|
48878
48876
|
] }),
|
|
48879
|
-
/* @__PURE__ */ jsx(MoonUICardContentPro, { children: sortedEvents.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn
|
|
48877
|
+
/* @__PURE__ */ jsx(MoonUICardContentPro, { children: sortedEvents.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn(
|
|
48880
48878
|
"space-y-0",
|
|
48881
48879
|
orientation === "horizontal" && "flex overflow-x-auto gap-6"
|
|
48882
48880
|
), children: groupByDate ? renderGroupedEvents() : sortedEvents.map(
|
|
@@ -49104,13 +49102,13 @@ function AdvancedChart({
|
|
|
49104
49102
|
}
|
|
49105
49103
|
};
|
|
49106
49104
|
if (loading) {
|
|
49107
|
-
return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn
|
|
49105
|
+
return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
49108
49106
|
/* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }),
|
|
49109
49107
|
/* @__PURE__ */ jsx("span", { children: "Loading chart..." })
|
|
49110
49108
|
] }) }) });
|
|
49111
49109
|
}
|
|
49112
49110
|
if (error) {
|
|
49113
|
-
return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn
|
|
49111
|
+
return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
|
|
49114
49112
|
/* @__PURE__ */ jsx("p", { className: "text-destructive mb-2", children: error }),
|
|
49115
49113
|
onRefresh && /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "outline", onClick: onRefresh, children: [
|
|
49116
49114
|
/* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
|
|
@@ -49118,7 +49116,7 @@ function AdvancedChart({
|
|
|
49118
49116
|
] })
|
|
49119
49117
|
] }) }) });
|
|
49120
49118
|
}
|
|
49121
|
-
return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn
|
|
49119
|
+
return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full", className), ref: chartRef, children: [
|
|
49122
49120
|
/* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
|
|
49123
49121
|
/* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
|
|
49124
49122
|
/* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "text-base font-medium", children: [
|
|
@@ -49127,7 +49125,7 @@ function AdvancedChart({
|
|
|
49127
49125
|
trend.direction === "up" && /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-green-500" }),
|
|
49128
49126
|
trend.direction === "down" && /* @__PURE__ */ jsx(TrendingDown, { className: "h-4 w-4 text-red-500" }),
|
|
49129
49127
|
trend.direction === "neutral" && /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4 text-gray-500" }),
|
|
49130
|
-
/* @__PURE__ */ jsxs("span", { className: cn
|
|
49128
|
+
/* @__PURE__ */ jsxs("span", { className: cn(
|
|
49131
49129
|
"ml-1 text-sm",
|
|
49132
49130
|
trend.direction === "up" && "text-green-500",
|
|
49133
49131
|
trend.direction === "down" && "text-red-500",
|
|
@@ -49223,7 +49221,7 @@ function Dashboard({
|
|
|
49223
49221
|
return /* @__PURE__ */ jsxs(
|
|
49224
49222
|
MoonUICardPro,
|
|
49225
49223
|
{
|
|
49226
|
-
className: cn
|
|
49224
|
+
className: cn(
|
|
49227
49225
|
"cursor-pointer hover:shadow-md transition-shadow",
|
|
49228
49226
|
onMetricClick && "hover:bg-muted/50"
|
|
49229
49227
|
),
|
|
@@ -49231,11 +49229,11 @@ function Dashboard({
|
|
|
49231
49229
|
children: [
|
|
49232
49230
|
/* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
|
|
49233
49231
|
/* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-sm font-medium", children: metric.title }),
|
|
49234
|
-
/* @__PURE__ */ jsx("div", { className: cn
|
|
49232
|
+
/* @__PURE__ */ jsx("div", { className: cn("h-4 w-4", colorClass), children: metric.icon })
|
|
49235
49233
|
] }),
|
|
49236
49234
|
/* @__PURE__ */ jsxs(MoonUICardContentPro, { children: [
|
|
49237
49235
|
/* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: formatValue(metric.value) }),
|
|
49238
|
-
metric.change && /* @__PURE__ */ jsxs("div", { className: cn
|
|
49236
|
+
metric.change && /* @__PURE__ */ jsxs("div", { className: cn(
|
|
49239
49237
|
"flex items-center text-xs mt-1",
|
|
49240
49238
|
getChangeColor(metric.change.type)
|
|
49241
49239
|
), children: [
|
|
@@ -49255,7 +49253,7 @@ function Dashboard({
|
|
|
49255
49253
|
};
|
|
49256
49254
|
const renderWidget = (widget) => {
|
|
49257
49255
|
const sizeClass = WIDGET_SIZES[widget.size || "md"];
|
|
49258
|
-
return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn
|
|
49256
|
+
return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("h-fit", sizeClass), children: [
|
|
49259
49257
|
/* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
49260
49258
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
49261
49259
|
/* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base", children: widget.title }),
|
|
@@ -49310,12 +49308,12 @@ function Dashboard({
|
|
|
49310
49308
|
];
|
|
49311
49309
|
const displayMetrics = metrics.length > 0 ? metrics : defaultMetrics;
|
|
49312
49310
|
if (loading) {
|
|
49313
|
-
return /* @__PURE__ */ jsx("div", { className: cn
|
|
49311
|
+
return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-4", children: [
|
|
49314
49312
|
/* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-1/4" }),
|
|
49315
49313
|
/* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-32 bg-muted rounded" }, i)) })
|
|
49316
49314
|
] }) });
|
|
49317
49315
|
}
|
|
49318
|
-
return /* @__PURE__ */ jsxs("div", { className: cn
|
|
49316
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-6", className), children: [
|
|
49319
49317
|
showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
49320
49318
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
49321
49319
|
/* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
|
|
@@ -49387,7 +49385,7 @@ function DraggableList({
|
|
|
49387
49385
|
{
|
|
49388
49386
|
...provided.droppableProps,
|
|
49389
49387
|
ref: provided.innerRef,
|
|
49390
|
-
className: cn
|
|
49388
|
+
className: cn(
|
|
49391
49389
|
"space-y-2",
|
|
49392
49390
|
direction === "horizontal" && "flex space-y-0 space-x-2",
|
|
49393
49391
|
snapshot.isDraggingOver && "bg-muted/50 rounded-lg",
|
|
@@ -49406,7 +49404,7 @@ function DraggableList({
|
|
|
49406
49404
|
ref: provided2.innerRef,
|
|
49407
49405
|
...provided2.draggableProps,
|
|
49408
49406
|
...provided2.dragHandleProps,
|
|
49409
|
-
className: cn
|
|
49407
|
+
className: cn(
|
|
49410
49408
|
"transition-all duration-200",
|
|
49411
49409
|
snapshot2.isDragging && "rotate-2 scale-105 shadow-lg z-50",
|
|
49412
49410
|
disabled && "cursor-not-allowed opacity-50"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moontra/moonui-pro",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.8",
|
|
4
4
|
"description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.mjs",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import React, { ReactNode } from "react"
|
|
4
4
|
import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd"
|
|
5
|
-
import { cn } from
|
|
5
|
+
import { cn } from '../../lib/utils'
|
|
6
6
|
|
|
7
7
|
export interface DraggableListProps<T> {
|
|
8
8
|
items: T[]
|
|
@@ -131,12 +131,11 @@ MoonUIAlertDescriptionPro.displayName = "AlertDescriptionPro";
|
|
|
131
131
|
// Internal aliases for Pro component usage
|
|
132
132
|
export const alertVariantsInternal = MoonUIalertVariantsPro
|
|
133
133
|
export const AlertInternal = MoonUIAlertPro
|
|
134
|
-
export const IconInternal = MoonUIIconPro
|
|
135
134
|
export const AlertTitleInternal = MoonUIAlertTitlePro
|
|
136
135
|
export const AlertDescriptionInternal = MoonUIAlertDescriptionPro
|
|
137
136
|
|
|
138
137
|
// Pro exports
|
|
139
|
-
export { MoonUIalertVariantsPro, MoonUIAlertPro,
|
|
138
|
+
export { MoonUIalertVariantsPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAlertDescriptionPro }
|
|
140
139
|
|
|
141
140
|
// Clean exports (without MoonUI prefix for easier usage)
|
|
142
|
-
export { MoonUIalertVariantsPro as alertVariants, MoonUIAlertPro as Alert,
|
|
141
|
+
export { MoonUIalertVariantsPro as alertVariants, MoonUIAlertPro as Alert, MoonUIAlertTitlePro as AlertTitle, MoonUIAlertDescriptionPro as AlertDescription };
|