@omnifyjp/ui 1.0.0 → 1.0.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/dist/components/calendar-event-chip.js +28 -2
- package/dist/components/calendar-event-chip.js.map +1 -1
- package/dist/components/calendar-event-sheet.js +79 -5
- package/dist/components/calendar-event-sheet.js.map +1 -1
- package/dist/components/calendar-mini.js +91 -4
- package/dist/components/calendar-mini.js.map +1 -1
- package/dist/components/calendar-toolbar.js +50 -3
- package/dist/components/calendar-toolbar.js.map +1 -1
- package/dist/components/chart.js +237 -2
- package/dist/components/chart.js.map +1 -1
- package/dist/components/date-picker.js +88 -5
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/form.js +109 -3
- package/dist/components/form.js.map +1 -1
- package/dist/index.d.ts +1 -12
- package/dist/index.js +0 -7
- package/package.json +10 -10
- package/src/styles/theme.css +1 -1
- package/dist/chunk-36YYHIJU.js +0 -52
- package/dist/chunk-36YYHIJU.js.map +0 -1
- package/dist/chunk-DNCZOUNY.js +0 -239
- package/dist/chunk-DNCZOUNY.js.map +0 -1
- package/dist/chunk-HWTW64R5.js +0 -90
- package/dist/chunk-HWTW64R5.js.map +0 -1
- package/dist/chunk-KTBOZ4NE.js +0 -93
- package/dist/chunk-KTBOZ4NE.js.map +0 -1
- package/dist/chunk-LVZNNIK4.js +0 -111
- package/dist/chunk-LVZNNIK4.js.map +0 -1
- package/dist/chunk-THQUH6WX.js +0 -81
- package/dist/chunk-THQUH6WX.js.map +0 -1
- package/dist/chunk-TTH7TWVX.js +0 -30
- package/dist/chunk-TTH7TWVX.js.map +0 -1
|
@@ -1,4 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
import '
|
|
1
|
+
import { cn } from '../chunk-DGPY4WP3.js';
|
|
2
|
+
import { format } from 'date-fns';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function CalendarEventChip({ event, compact = false, onClick }) {
|
|
6
|
+
return /* @__PURE__ */ jsxs(
|
|
7
|
+
"button",
|
|
8
|
+
{
|
|
9
|
+
type: "button",
|
|
10
|
+
onClick: () => onClick?.(event),
|
|
11
|
+
className: cn(
|
|
12
|
+
"w-full text-left rounded px-1.5 py-0.5 text-xs font-medium truncate transition-opacity hover:opacity-80 cursor-pointer",
|
|
13
|
+
compact ? "leading-tight" : "leading-normal"
|
|
14
|
+
),
|
|
15
|
+
style: {
|
|
16
|
+
backgroundColor: `${event.color}20`,
|
|
17
|
+
color: event.color,
|
|
18
|
+
borderLeft: `2px solid ${event.color}`
|
|
19
|
+
},
|
|
20
|
+
children: [
|
|
21
|
+
!event.allDay && !compact && /* @__PURE__ */ jsx("span", { className: "opacity-75 mr-1", children: format(event.start, "HH:mm") }),
|
|
22
|
+
event.title
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { CalendarEventChip };
|
|
3
29
|
//# sourceMappingURL=calendar-event-chip.js.map
|
|
4
30
|
//# sourceMappingURL=calendar-event-chip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"calendar-event-chip.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/components/calendar-event-chip.tsx"],"names":[],"mappings":";;;;AAyCO,SAAS,kBAAkB,EAAE,KAAA,EAAO,OAAA,GAAU,KAAA,EAAO,SAAQ,EAA2B;AAC7F,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,MAAM,OAAA,GAAU,KAAK,CAAA;AAAA,MAC9B,SAAA,EAAW,EAAA;AAAA,QACT,wHAAA;AAAA,QACA,UAAU,eAAA,GAAkB;AAAA,OAC9B;AAAA,MACA,KAAA,EAAO;AAAA,QACL,eAAA,EAAiB,CAAA,EAAG,KAAA,CAAM,KAAK,CAAA,EAAA,CAAA;AAAA,QAC/B,OAAO,KAAA,CAAM,KAAA;AAAA,QACb,UAAA,EAAY,CAAA,UAAA,EAAa,KAAA,CAAM,KAAK,CAAA;AAAA,OACtC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,KAAA,CAAM,MAAA,IAAU,CAAC,OAAA,oBACjB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EAAmB,QAAA,EAAA,MAAA,CAAO,KAAA,CAAM,KAAA,EAAO,OAAO,CAAA,EAAE,CAAA;AAAA,QAEjE,KAAA,CAAM;AAAA;AAAA;AAAA,GACT;AAEJ","file":"calendar-event-chip.js","sourcesContent":["import { format } from 'date-fns';\nimport { cn } from '../lib/utils';\n\n/** Event data shape required by CalendarEventChip. */\nexport interface CalendarEventChipEvent {\n /** Unique event identifier. */\n id: string;\n /** Display title of the event. */\n title: string;\n /** Event start date/time. */\n start: Date;\n /** Event end date/time. */\n end: Date;\n /** Whether this is an all-day event. When true, time is not displayed. */\n allDay?: boolean;\n /** CSS color string used for the chip background, text, and left border. */\n color: string;\n}\n\nexport interface CalendarEventChipProps {\n /** The event to display. */\n event: CalendarEventChipEvent;\n /** Use compact layout with tighter line-height. Defaults to `false`. */\n compact?: boolean;\n /** Callback when the chip is clicked. */\n onClick?: (event: CalendarEventChipEvent) => void;\n}\n\n/**\n * Small colored chip representing a calendar event. Shows the event title\n * with a colored left border and tinted background. Optionally displays\n * the start time for non-all-day events.\n *\n * @example\n * ```tsx\n * <CalendarEventChip\n * event={{ id: \"1\", title: \"Standup\", start: new Date(), end: new Date(), color: \"#3b82f6\" }}\n * onClick={(e) => openDetail(e.id)}\n * />\n * ```\n */\nexport function CalendarEventChip({ event, compact = false, onClick }: CalendarEventChipProps) {\n return (\n <button\n type=\"button\"\n onClick={() => onClick?.(event)}\n className={cn(\n 'w-full text-left rounded px-1.5 py-0.5 text-xs font-medium truncate transition-opacity hover:opacity-80 cursor-pointer',\n compact ? 'leading-tight' : 'leading-normal'\n )}\n style={{\n backgroundColor: `${event.color}20`,\n color: event.color,\n borderLeft: `2px solid ${event.color}`,\n }}\n >\n {!event.allDay && !compact && (\n <span className=\"opacity-75 mr-1\">{format(event.start, 'HH:mm')}</span>\n )}\n {event.title}\n </button>\n );\n}\n"]}
|
|
@@ -1,9 +1,83 @@
|
|
|
1
|
-
|
|
2
|
-
import '../chunk-
|
|
3
|
-
import '../chunk-
|
|
4
|
-
import '../chunk-
|
|
5
|
-
import '../chunk-55E7D2HR.js';
|
|
1
|
+
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../chunk-JLTBUACL.js';
|
|
2
|
+
import { CalendarCategoryBadge } from '../chunk-JAJMM32I.js';
|
|
3
|
+
import { Separator } from '../chunk-PGWNOZDX.js';
|
|
4
|
+
import { Button } from '../chunk-55E7D2HR.js';
|
|
6
5
|
import '../chunk-A3BB5ZOC.js';
|
|
7
6
|
import '../chunk-DGPY4WP3.js';
|
|
7
|
+
import { format } from 'date-fns';
|
|
8
|
+
import { Clock, MapPin, Users, Trash2 } from 'lucide-react';
|
|
9
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
10
|
+
|
|
11
|
+
var defaultLabels = {
|
|
12
|
+
allDay: "All Day",
|
|
13
|
+
attendees: "Attendees",
|
|
14
|
+
delete: "Delete"
|
|
15
|
+
};
|
|
16
|
+
function CalendarEventSheet({
|
|
17
|
+
event,
|
|
18
|
+
open,
|
|
19
|
+
onOpenChange,
|
|
20
|
+
onDelete,
|
|
21
|
+
categoryLabel,
|
|
22
|
+
categoryStyles,
|
|
23
|
+
labels: labelsProp
|
|
24
|
+
}) {
|
|
25
|
+
const labels = { ...defaultLabels, ...labelsProp };
|
|
26
|
+
if (!event) return null;
|
|
27
|
+
const timeDisplay = event.allDay ? labels.allDay : `${format(event.start, "HH:mm")} - ${format(event.end, "HH:mm")}`;
|
|
28
|
+
return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { className: "sm:max-w-md", children: [
|
|
29
|
+
/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: event.title }) }),
|
|
30
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-4", children: [
|
|
31
|
+
/* @__PURE__ */ jsx(
|
|
32
|
+
CalendarCategoryBadge,
|
|
33
|
+
{
|
|
34
|
+
category: event.category,
|
|
35
|
+
label: categoryLabel,
|
|
36
|
+
styles: categoryStyles
|
|
37
|
+
}
|
|
38
|
+
),
|
|
39
|
+
event.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: event.description }),
|
|
40
|
+
/* @__PURE__ */ jsx(Separator, {}),
|
|
41
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
|
|
42
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
|
|
43
|
+
/* @__PURE__ */ jsx(Clock, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }),
|
|
44
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
45
|
+
/* @__PURE__ */ jsx("p", { className: "font-medium", children: format(event.start, "EEEE, MMMM d, yyyy") }),
|
|
46
|
+
/* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: timeDisplay })
|
|
47
|
+
] })
|
|
48
|
+
] }),
|
|
49
|
+
event.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
|
|
50
|
+
/* @__PURE__ */ jsx(MapPin, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }),
|
|
51
|
+
/* @__PURE__ */ jsx("span", { children: event.location })
|
|
52
|
+
] }),
|
|
53
|
+
event.attendees && event.attendees.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 text-sm", children: [
|
|
54
|
+
/* @__PURE__ */ jsx(Users, { className: "w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5" }),
|
|
55
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
56
|
+
/* @__PURE__ */ jsx("p", { className: "font-medium mb-1", children: labels.attendees }),
|
|
57
|
+
/* @__PURE__ */ jsx("div", { className: "space-y-1", children: event.attendees.map((email) => /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: email }, email)) })
|
|
58
|
+
] })
|
|
59
|
+
] })
|
|
60
|
+
] }),
|
|
61
|
+
/* @__PURE__ */ jsx(Separator, {}),
|
|
62
|
+
/* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
|
|
63
|
+
Button,
|
|
64
|
+
{
|
|
65
|
+
variant: "destructive",
|
|
66
|
+
size: "sm",
|
|
67
|
+
onClick: () => {
|
|
68
|
+
onDelete?.(event.id);
|
|
69
|
+
onOpenChange(false);
|
|
70
|
+
},
|
|
71
|
+
children: [
|
|
72
|
+
/* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
|
|
73
|
+
labels.delete
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
) })
|
|
77
|
+
] })
|
|
78
|
+
] }) });
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export { CalendarEventSheet };
|
|
8
82
|
//# sourceMappingURL=calendar-event-sheet.js.map
|
|
9
83
|
//# sourceMappingURL=calendar-event-sheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"calendar-event-sheet.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/components/calendar-event-sheet.tsx"],"names":[],"mappings":"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","file":"calendar-event-sheet.js","sourcesContent":["import { format } from 'date-fns';\nimport { Clock, MapPin, Users, Trash2 } from 'lucide-react';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from './sheet';\nimport { Button } from './button';\nimport { Separator } from './separator';\nimport { CalendarCategoryBadge } from './calendar-category-badge';\n\n/** Extended event data shape for the detail sheet, including description, location, and attendees. */\nexport interface CalendarEventSheetEvent {\n /** Unique event identifier. */\n id: string;\n /** Display title of the event. */\n title: string;\n /** Optional long description or notes for the event. */\n description?: string;\n /** Event start date/time. */\n start: Date;\n /** Event end date/time. */\n end: Date;\n /** Whether this is an all-day event. */\n allDay?: boolean;\n /** CSS color string for the event. */\n color: string;\n /** Category key (e.g. \"meeting\", \"deadline\") used by CalendarCategoryBadge. */\n category: string;\n /** Optional location string. */\n location?: string;\n /** Optional list of attendee email addresses. */\n attendees?: string[];\n}\n\n/** Localizable labels for the event detail sheet. All have English defaults. */\nexport interface CalendarEventSheetLabels {\n /** Text displayed for all-day events instead of a time range. */\n allDay?: string;\n /** Heading text for the attendees section. */\n attendees?: string;\n /** Label for the delete button. */\n delete?: string;\n}\n\nconst defaultLabels: Required<CalendarEventSheetLabels> = {\n allDay: 'All Day',\n attendees: 'Attendees',\n delete: 'Delete',\n};\n\nexport interface CalendarEventSheetProps {\n /** The event to display, or `null` to render nothing. */\n event: CalendarEventSheetEvent | null;\n /** Whether the sheet is open. */\n open: boolean;\n /** Callback to toggle the sheet open state. */\n onOpenChange: (open: boolean) => void;\n /** Optional callback when the delete button is clicked. Receives the event id. */\n onDelete?: (id: string) => void;\n /** Override display label for the category badge. */\n categoryLabel?: string;\n /** Custom className styles per category key for the CalendarCategoryBadge. */\n categoryStyles?: Record<string, string>;\n /** Localizable UI labels with English defaults. */\n labels?: CalendarEventSheetLabels;\n}\n\n/**\n * Side sheet that displays full event details including title, category badge,\n * description, date/time, location, attendees, and a delete action.\n * Built on top of the Sheet component.\n *\n * @example\n * ```tsx\n * <CalendarEventSheet\n * event={selectedEvent}\n * open={sheetOpen}\n * onOpenChange={setSheetOpen}\n * onDelete={(id) => removeEvent(id)}\n * />\n * ```\n */\nexport function CalendarEventSheet({\n event,\n open,\n onOpenChange,\n onDelete,\n categoryLabel,\n categoryStyles,\n labels: labelsProp,\n}: CalendarEventSheetProps) {\n const labels = { ...defaultLabels, ...labelsProp };\n\n if (!event) return null;\n\n const timeDisplay = event.allDay\n ? labels.allDay\n : `${format(event.start, 'HH:mm')} - ${format(event.end, 'HH:mm')}`;\n\n return (\n <Sheet open={open} onOpenChange={onOpenChange}>\n <SheetContent className=\"sm:max-w-md\">\n <SheetHeader>\n <SheetTitle>{event.title}</SheetTitle>\n </SheetHeader>\n <div className=\"mt-4 space-y-4\">\n <CalendarCategoryBadge\n category={event.category}\n label={categoryLabel}\n styles={categoryStyles}\n />\n\n {event.description && (\n <p className=\"text-sm text-muted-foreground\">{event.description}</p>\n )}\n\n <Separator />\n\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-3 text-sm\">\n <Clock className=\"w-4 h-4 text-muted-foreground flex-shrink-0\" />\n <div>\n <p className=\"font-medium\">{format(event.start, 'EEEE, MMMM d, yyyy')}</p>\n <p className=\"text-muted-foreground\">{timeDisplay}</p>\n </div>\n </div>\n\n {event.location && (\n <div className=\"flex items-center gap-3 text-sm\">\n <MapPin className=\"w-4 h-4 text-muted-foreground flex-shrink-0\" />\n <span>{event.location}</span>\n </div>\n )}\n\n {event.attendees && event.attendees.length > 0 && (\n <div className=\"flex items-start gap-3 text-sm\">\n <Users className=\"w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5\" />\n <div>\n <p className=\"font-medium mb-1\">{labels.attendees}</p>\n <div className=\"space-y-1\">\n {event.attendees.map(email => (\n <p key={email} className=\"text-muted-foreground\">{email}</p>\n ))}\n </div>\n </div>\n </div>\n )}\n </div>\n\n <Separator />\n\n <div className=\"flex justify-end\">\n <Button\n variant=\"destructive\"\n size=\"sm\"\n onClick={() => {\n onDelete?.(event.id);\n onOpenChange(false);\n }}\n >\n <Trash2 className=\"w-4 h-4\" />\n {labels.delete}\n </Button>\n </div>\n </div>\n </SheetContent>\n </Sheet>\n );\n}\n"]}
|
|
@@ -1,6 +1,93 @@
|
|
|
1
|
-
|
|
2
|
-
import '../chunk-
|
|
3
|
-
import '../chunk-
|
|
4
|
-
import '
|
|
1
|
+
import { Checkbox } from '../chunk-WL4ZO2H3.js';
|
|
2
|
+
import { Separator } from '../chunk-PGWNOZDX.js';
|
|
3
|
+
import { cn } from '../chunk-DGPY4WP3.js';
|
|
4
|
+
import { useMemo } from 'react';
|
|
5
|
+
import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, format, isSameMonth, isSameDay, isToday } from 'date-fns';
|
|
6
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
var defaultLabels = {
|
|
9
|
+
sun: "Sun",
|
|
10
|
+
mon: "Mon",
|
|
11
|
+
tue: "Tue",
|
|
12
|
+
wed: "Wed",
|
|
13
|
+
thu: "Thu",
|
|
14
|
+
fri: "Fri",
|
|
15
|
+
sat: "Sat",
|
|
16
|
+
categories: "Categories"
|
|
17
|
+
};
|
|
18
|
+
function CalendarMini({
|
|
19
|
+
currentDate,
|
|
20
|
+
selectedDate,
|
|
21
|
+
onSelectDate,
|
|
22
|
+
categories,
|
|
23
|
+
enabledCategories,
|
|
24
|
+
onToggleCategory,
|
|
25
|
+
labels: labelsProp
|
|
26
|
+
}) {
|
|
27
|
+
const labels = { ...defaultLabels, ...labelsProp };
|
|
28
|
+
const days = useMemo(() => {
|
|
29
|
+
const monthStart = startOfMonth(currentDate);
|
|
30
|
+
const monthEnd = endOfMonth(currentDate);
|
|
31
|
+
const calStart = startOfWeek(monthStart, { weekStartsOn: 0 });
|
|
32
|
+
const calEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
|
|
33
|
+
return eachDayOfInterval({ start: calStart, end: calEnd });
|
|
34
|
+
}, [currentDate]);
|
|
35
|
+
const weekDays = [labels.sun, labels.mon, labels.tue, labels.wed, labels.thu, labels.fri, labels.sat];
|
|
36
|
+
return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
|
|
37
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
38
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mb-2", children: format(currentDate, "MMMM yyyy") }),
|
|
39
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-0", children: [
|
|
40
|
+
weekDays.map((day) => /* @__PURE__ */ jsx("div", { className: "text-center text-[10px] font-medium text-muted-foreground py-1", children: day }, day)),
|
|
41
|
+
days.map((day) => {
|
|
42
|
+
const inMonth = isSameMonth(day, currentDate);
|
|
43
|
+
const selected = isSameDay(day, selectedDate);
|
|
44
|
+
const today = isToday(day);
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
"button",
|
|
47
|
+
{
|
|
48
|
+
type: "button",
|
|
49
|
+
onClick: () => onSelectDate(day),
|
|
50
|
+
className: cn(
|
|
51
|
+
"w-7 h-7 text-[11px] rounded-full flex items-center justify-center transition-colors",
|
|
52
|
+
!inMonth && "text-muted-foreground/40",
|
|
53
|
+
inMonth && !selected && "hover:bg-accent",
|
|
54
|
+
selected && "bg-primary text-primary-foreground",
|
|
55
|
+
today && !selected && "font-bold text-primary"
|
|
56
|
+
),
|
|
57
|
+
children: format(day, "d")
|
|
58
|
+
},
|
|
59
|
+
day.toISOString()
|
|
60
|
+
);
|
|
61
|
+
})
|
|
62
|
+
] })
|
|
63
|
+
] }),
|
|
64
|
+
categories && categories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
65
|
+
/* @__PURE__ */ jsx(Separator, {}),
|
|
66
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
67
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mb-2", children: labels.categories }),
|
|
68
|
+
/* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: categories.map((cat) => /* @__PURE__ */ jsxs(
|
|
69
|
+
"label",
|
|
70
|
+
{
|
|
71
|
+
className: "flex items-center gap-2 py-1 px-1 rounded hover:bg-accent transition-colors cursor-pointer",
|
|
72
|
+
children: [
|
|
73
|
+
/* @__PURE__ */ jsx(
|
|
74
|
+
Checkbox,
|
|
75
|
+
{
|
|
76
|
+
checked: enabledCategories?.includes(cat.key) ?? false,
|
|
77
|
+
onCheckedChange: () => onToggleCategory?.(cat.key)
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
/* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: cat.color } }),
|
|
81
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm", children: cat.label })
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
cat.key
|
|
85
|
+
)) })
|
|
86
|
+
] })
|
|
87
|
+
] })
|
|
88
|
+
] });
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export { CalendarMini };
|
|
5
92
|
//# sourceMappingURL=calendar-mini.js.map
|
|
6
93
|
//# sourceMappingURL=calendar-mini.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"calendar-mini.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/components/calendar-mini.tsx"],"names":[],"mappings":"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","file":"calendar-mini.js","sourcesContent":["import { useMemo } from 'react';\nimport {\n startOfMonth, endOfMonth, startOfWeek, endOfWeek,\n eachDayOfInterval, isSameMonth, isSameDay, isToday, format,\n} from 'date-fns';\nimport { cn } from '../lib/utils';\nimport { Checkbox } from './checkbox';\nimport { Separator } from './separator';\n\n/** A category that can be toggled on/off in the mini calendar's filter section. */\nexport interface CalendarCategory {\n /** Unique key for this category. */\n key: string;\n /** CSS color string used for the category dot. */\n color: string;\n /** Display label for the category. */\n label: string;\n}\n\n/** Localizable labels for the mini calendar. All have English defaults. */\nexport interface CalendarMiniLabels {\n /** Label for Sunday column header. */\n sun?: string;\n /** Label for Monday column header. */\n mon?: string;\n /** Label for Tuesday column header. */\n tue?: string;\n /** Label for Wednesday column header. */\n wed?: string;\n /** Label for Thursday column header. */\n thu?: string;\n /** Label for Friday column header. */\n fri?: string;\n /** Label for Saturday column header. */\n sat?: string;\n /** Heading text for the categories filter section. */\n categories?: string;\n}\n\nconst defaultLabels: Required<CalendarMiniLabels> = {\n sun: 'Sun', mon: 'Mon', tue: 'Tue', wed: 'Wed', thu: 'Thu', fri: 'Fri', sat: 'Sat',\n categories: 'Categories',\n};\n\nexport interface CalendarMiniProps {\n /** The month to display (any date within the target month). */\n currentDate: Date;\n /** The currently selected date, highlighted with primary color. */\n selectedDate: Date;\n /** Callback when a day cell is clicked. */\n onSelectDate: (date: Date) => void;\n /** Optional list of event categories for the filter section. */\n categories?: CalendarCategory[];\n /** Keys of currently enabled categories. */\n enabledCategories?: string[];\n /** Callback when a category checkbox is toggled. */\n onToggleCategory?: (key: string) => void;\n /** Localizable UI labels with English defaults. */\n labels?: CalendarMiniLabels;\n}\n\n/**\n * Compact month calendar with optional category filters. Designed for sidebar\n * placement in calendar views. Locale-agnostic via the `labels` prop.\n *\n * @example\n * ```tsx\n * <CalendarMini\n * currentDate={new Date()}\n * selectedDate={selectedDate}\n * onSelectDate={setSelectedDate}\n * categories={[{ key: \"meeting\", color: \"#3b82f6\", label: \"Meeting\" }]}\n * enabledCategories={[\"meeting\"]}\n * onToggleCategory={(key) => toggle(key)}\n * />\n * ```\n */\nexport function CalendarMini({\n currentDate,\n selectedDate,\n onSelectDate,\n categories,\n enabledCategories,\n onToggleCategory,\n labels: labelsProp,\n}: CalendarMiniProps) {\n const labels = { ...defaultLabels, ...labelsProp };\n\n const days = useMemo(() => {\n const monthStart = startOfMonth(currentDate);\n const monthEnd = endOfMonth(currentDate);\n const calStart = startOfWeek(monthStart, { weekStartsOn: 0 });\n const calEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });\n return eachDayOfInterval({ start: calStart, end: calEnd });\n }, [currentDate]);\n\n const weekDays = [labels.sun, labels.mon, labels.tue, labels.wed, labels.thu, labels.fri, labels.sat];\n\n return (\n <div className=\"space-y-4\">\n {/* Mini calendar */}\n <div>\n <p className=\"text-sm font-semibold mb-2\">{format(currentDate, 'MMMM yyyy')}</p>\n <div className=\"grid grid-cols-7 gap-0\">\n {weekDays.map(day => (\n <div key={day} className=\"text-center text-[10px] font-medium text-muted-foreground py-1\">\n {day}\n </div>\n ))}\n {days.map(day => {\n const inMonth = isSameMonth(day, currentDate);\n const selected = isSameDay(day, selectedDate);\n const today = isToday(day);\n return (\n <button\n key={day.toISOString()}\n type=\"button\"\n onClick={() => onSelectDate(day)}\n className={cn(\n 'w-7 h-7 text-[11px] rounded-full flex items-center justify-center transition-colors',\n !inMonth && 'text-muted-foreground/40',\n inMonth && !selected && 'hover:bg-accent',\n selected && 'bg-primary text-primary-foreground',\n today && !selected && 'font-bold text-primary',\n )}\n >\n {format(day, 'd')}\n </button>\n );\n })}\n </div>\n </div>\n\n {categories && categories.length > 0 && (\n <>\n <Separator />\n {/* Category filters */}\n <div>\n <p className=\"text-sm font-semibold mb-2\">{labels.categories}</p>\n <div className=\"space-y-1.5\">\n {categories.map(cat => (\n <label\n key={cat.key}\n className=\"flex items-center gap-2 py-1 px-1 rounded hover:bg-accent transition-colors cursor-pointer\"\n >\n <Checkbox\n checked={enabledCategories?.includes(cat.key) ?? false}\n onCheckedChange={() => onToggleCategory?.(cat.key)}\n />\n <div className=\"w-2.5 h-2.5 rounded-full\" style={{ backgroundColor: cat.color }} />\n <span className=\"text-sm\">{cat.label}</span>\n </label>\n ))}\n </div>\n </div>\n </>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1,7 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
import '../chunk-ZPMXRW2A.js';
|
|
1
|
+
import { ToggleGroup, ToggleGroupItem } from '../chunk-ZPMXRW2A.js';
|
|
3
2
|
import '../chunk-NU56GKGM.js';
|
|
4
|
-
import '../chunk-55E7D2HR.js';
|
|
3
|
+
import { Button } from '../chunk-55E7D2HR.js';
|
|
5
4
|
import '../chunk-DGPY4WP3.js';
|
|
5
|
+
import { format } from 'date-fns';
|
|
6
|
+
import { ChevronLeft, ChevronRight, Plus } from 'lucide-react';
|
|
7
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
|
+
|
|
9
|
+
var defaultLabels = {
|
|
10
|
+
today: "Today",
|
|
11
|
+
month: "Month",
|
|
12
|
+
week: "Week",
|
|
13
|
+
day: "Day",
|
|
14
|
+
createEvent: "Create Event"
|
|
15
|
+
};
|
|
16
|
+
function CalendarToolbar({
|
|
17
|
+
currentDate,
|
|
18
|
+
view,
|
|
19
|
+
onViewChange,
|
|
20
|
+
onPrev,
|
|
21
|
+
onNext,
|
|
22
|
+
onToday,
|
|
23
|
+
onCreateEvent,
|
|
24
|
+
labels: labelsProp,
|
|
25
|
+
titleFormat: titleFormatProp
|
|
26
|
+
}) {
|
|
27
|
+
const labels = { ...defaultLabels, ...labelsProp };
|
|
28
|
+
const titleFormat = titleFormatProp ?? (view === "day" ? "EEEE, MMMM d, yyyy" : "MMMM yyyy");
|
|
29
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 flex-wrap", children: [
|
|
30
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
31
|
+
/* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onToday, children: labels.today }),
|
|
32
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
33
|
+
/* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "w-8 h-8", onClick: onPrev, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" }) }),
|
|
34
|
+
/* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "w-8 h-8", onClick: onNext, children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" }) })
|
|
35
|
+
] }),
|
|
36
|
+
/* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: format(currentDate, titleFormat) })
|
|
37
|
+
] }),
|
|
38
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
39
|
+
/* @__PURE__ */ jsxs(ToggleGroup, { type: "single", value: view, onValueChange: (val) => val && onViewChange(val), children: [
|
|
40
|
+
/* @__PURE__ */ jsx(ToggleGroupItem, { value: "month", size: "sm", children: labels.month }),
|
|
41
|
+
/* @__PURE__ */ jsx(ToggleGroupItem, { value: "week", size: "sm", children: labels.week }),
|
|
42
|
+
/* @__PURE__ */ jsx(ToggleGroupItem, { value: "day", size: "sm", children: labels.day })
|
|
43
|
+
] }),
|
|
44
|
+
onCreateEvent && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onCreateEvent, children: [
|
|
45
|
+
/* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }),
|
|
46
|
+
labels.createEvent
|
|
47
|
+
] })
|
|
48
|
+
] })
|
|
49
|
+
] });
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export { CalendarToolbar };
|
|
6
53
|
//# sourceMappingURL=calendar-toolbar.js.map
|
|
7
54
|
//# sourceMappingURL=calendar-toolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"calendar-toolbar.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/components/calendar-toolbar.tsx"],"names":[],"mappings":";;;;;;;;AAsBA,IAAM,aAAA,GAAiD;AAAA,EACrD,KAAA,EAAO,OAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,WAAA,EAAa;AACf,CAAA;AAyCO,SAAS,eAAA,CAAgB;AAAA,EAC9B,WAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,WAAA,EAAa;AACf,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,EAAE,GAAG,aAAA,EAAe,GAAG,UAAA,EAAW;AAEjD,EAAA,MAAM,WAAA,GAAc,eAAA,KAAoB,IAAA,KAAS,KAAA,GAC7C,oBAAA,GACA,WAAA,CAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAQ,SAAA,EAAU,IAAA,EAAK,MAAK,OAAA,EAAS,OAAA,EAC1C,iBAAO,KAAA,EACV,CAAA;AAAA,sBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,MAAA,EAAO,SAAA,EAAU,SAAA,EAAU,OAAA,EAAS,MAAA,EAC/D,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,WAAU,CAAA,EACnC,CAAA;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,OAAA,EAAQ,MAAK,MAAA,EAAO,SAAA,EAAU,SAAA,EAAU,OAAA,EAAS,MAAA,EAC/D,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,WAAU,CAAA,EACpC;AAAA,OAAA,EACF,CAAA;AAAA,0BACC,IAAA,EAAA,EAAG,SAAA,EAAU,yBAAyB,QAAA,EAAA,MAAA,CAAO,WAAA,EAAa,WAAW,CAAA,EAAE;AAAA,KAAA,EAC1E,CAAA;AAAA,oBAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAK,QAAA,EAAS,KAAA,EAAO,IAAA,EAAM,eAAe,CAAA,GAAA,KAAO,GAAA,IAAO,YAAA,CAAa,GAAmB,CAAA,EACnG,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,mBAAgB,KAAA,EAAM,OAAA,EAAQ,IAAA,EAAK,IAAA,EAAM,iBAAO,KAAA,EAAM,CAAA;AAAA,4BACtD,eAAA,EAAA,EAAgB,KAAA,EAAM,QAAO,IAAA,EAAK,IAAA,EAAM,iBAAO,IAAA,EAAK,CAAA;AAAA,4BACpD,eAAA,EAAA,EAAgB,KAAA,EAAM,OAAM,IAAA,EAAK,IAAA,EAAM,iBAAO,GAAA,EAAI;AAAA,OAAA,EACrD,CAAA;AAAA,MACC,iCACC,IAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,SAAS,aAAA,EACzB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAU,SAAA,EAAU,CAAA;AAAA,QACzB,MAAA,CAAO;AAAA,OAAA,EACV;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ","file":"calendar-toolbar.js","sourcesContent":["import { format } from 'date-fns';\nimport { ChevronLeft, ChevronRight, Plus } from 'lucide-react';\nimport { Button } from './button';\nimport { ToggleGroup, ToggleGroupItem } from './toggle-group';\n\n/** Supported calendar view modes. */\nexport type CalendarView = 'month' | 'week' | 'day';\n\n/** Localizable labels for the calendar toolbar. All have English defaults. */\nexport interface CalendarToolbarLabels {\n /** Label for the \"Today\" button. */\n today?: string;\n /** Label for the \"Month\" view toggle. */\n month?: string;\n /** Label for the \"Week\" view toggle. */\n week?: string;\n /** Label for the \"Day\" view toggle. */\n day?: string;\n /** Label for the \"Create Event\" button. */\n createEvent?: string;\n}\n\nconst defaultLabels: Required<CalendarToolbarLabels> = {\n today: 'Today',\n month: 'Month',\n week: 'Week',\n day: 'Day',\n createEvent: 'Create Event',\n};\n\nexport interface CalendarToolbarProps {\n /** The date currently being viewed. Used for the title display. */\n currentDate: Date;\n /** The active calendar view mode. */\n view: CalendarView;\n /** Callback when the user switches between month/week/day views. */\n onViewChange: (view: CalendarView) => void;\n /** Navigate to the previous period. */\n onPrev: () => void;\n /** Navigate to the next period. */\n onNext: () => void;\n /** Navigate to today. */\n onToday: () => void;\n /** Optional callback for the \"Create Event\" button. Button is hidden when omitted. */\n onCreateEvent?: () => void;\n /** Localizable UI labels with English defaults. */\n labels?: CalendarToolbarLabels;\n /** date-fns format string for the title. Defaults to `\"MMMM yyyy\"` or `\"EEEE, MMMM d, yyyy\"` for day view. */\n titleFormat?: string;\n}\n\n/**\n * Toolbar for calendar views with navigation controls (prev/next/today),\n * view mode toggle (month/week/day), and an optional \"Create Event\" button.\n * Locale-agnostic via the `labels` prop.\n *\n * @example\n * ```tsx\n * <CalendarToolbar\n * currentDate={currentDate}\n * view=\"month\"\n * onViewChange={setView}\n * onPrev={handlePrev}\n * onNext={handleNext}\n * onToday={handleToday}\n * onCreateEvent={() => setDialogOpen(true)}\n * />\n * ```\n */\nexport function CalendarToolbar({\n currentDate,\n view,\n onViewChange,\n onPrev,\n onNext,\n onToday,\n onCreateEvent,\n labels: labelsProp,\n titleFormat: titleFormatProp,\n}: CalendarToolbarProps) {\n const labels = { ...defaultLabels, ...labelsProp };\n\n const titleFormat = titleFormatProp ?? (view === 'day'\n ? 'EEEE, MMMM d, yyyy'\n : 'MMMM yyyy');\n\n return (\n <div className=\"flex items-center justify-between gap-4 flex-wrap\">\n <div className=\"flex items-center gap-2\">\n <Button variant=\"outline\" size=\"sm\" onClick={onToday}>\n {labels.today}\n </Button>\n <div className=\"flex items-center\">\n <Button variant=\"ghost\" size=\"icon\" className=\"w-8 h-8\" onClick={onPrev}>\n <ChevronLeft className=\"w-4 h-4\" />\n </Button>\n <Button variant=\"ghost\" size=\"icon\" className=\"w-8 h-8\" onClick={onNext}>\n <ChevronRight className=\"w-4 h-4\" />\n </Button>\n </div>\n <h2 className=\"text-lg font-semibold\">{format(currentDate, titleFormat)}</h2>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <ToggleGroup type=\"single\" value={view} onValueChange={val => val && onViewChange(val as CalendarView)}>\n <ToggleGroupItem value=\"month\" size=\"sm\">{labels.month}</ToggleGroupItem>\n <ToggleGroupItem value=\"week\" size=\"sm\">{labels.week}</ToggleGroupItem>\n <ToggleGroupItem value=\"day\" size=\"sm\">{labels.day}</ToggleGroupItem>\n </ToggleGroup>\n {onCreateEvent && (\n <Button size=\"sm\" onClick={onCreateEvent}>\n <Plus className=\"w-4 h-4\" />\n {labels.createEvent}\n </Button>\n )}\n </div>\n </div>\n );\n}\n"]}
|
package/dist/components/chart.js
CHANGED
|
@@ -1,4 +1,239 @@
|
|
|
1
|
-
|
|
2
|
-
import '
|
|
1
|
+
import { cn } from '../chunk-DGPY4WP3.js';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as RechartsPrimitive from 'recharts';
|
|
4
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var THEMES = { light: "", dark: ".dark" };
|
|
7
|
+
var ChartContext = React.createContext(null);
|
|
8
|
+
function useChart() {
|
|
9
|
+
const context = React.useContext(ChartContext);
|
|
10
|
+
if (!context) {
|
|
11
|
+
throw new Error("useChart must be used within a <ChartContainer />");
|
|
12
|
+
}
|
|
13
|
+
return context;
|
|
14
|
+
}
|
|
15
|
+
function ChartContainer({
|
|
16
|
+
id,
|
|
17
|
+
className,
|
|
18
|
+
children,
|
|
19
|
+
config,
|
|
20
|
+
...props
|
|
21
|
+
}) {
|
|
22
|
+
const uniqueId = React.useId();
|
|
23
|
+
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
|
24
|
+
return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
"data-slot": "chart",
|
|
28
|
+
"data-chart": chartId,
|
|
29
|
+
className: cn(
|
|
30
|
+
"[&_.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",
|
|
31
|
+
className
|
|
32
|
+
),
|
|
33
|
+
...props,
|
|
34
|
+
children: [
|
|
35
|
+
/* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
|
|
36
|
+
/* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
) });
|
|
40
|
+
}
|
|
41
|
+
var ChartStyle = ({ id, config }) => {
|
|
42
|
+
const colorConfig = Object.entries(config).filter(
|
|
43
|
+
([, config2]) => config2.theme || config2.color
|
|
44
|
+
);
|
|
45
|
+
if (!colorConfig.length) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
return /* @__PURE__ */ jsx(
|
|
49
|
+
"style",
|
|
50
|
+
{
|
|
51
|
+
dangerouslySetInnerHTML: {
|
|
52
|
+
__html: Object.entries(THEMES).map(
|
|
53
|
+
([theme, prefix]) => `
|
|
54
|
+
${prefix} [data-chart=${id}] {
|
|
55
|
+
${colorConfig.map(([key, itemConfig]) => {
|
|
56
|
+
const color = itemConfig.theme?.[theme] || itemConfig.color;
|
|
57
|
+
return color ? ` --color-${key}: ${color};` : null;
|
|
58
|
+
}).join("\n")}
|
|
59
|
+
}
|
|
60
|
+
`
|
|
61
|
+
).join("\n")
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
};
|
|
66
|
+
var ChartTooltip = RechartsPrimitive.Tooltip;
|
|
67
|
+
function ChartTooltipContent({
|
|
68
|
+
active,
|
|
69
|
+
payload,
|
|
70
|
+
className,
|
|
71
|
+
indicator = "dot",
|
|
72
|
+
hideLabel = false,
|
|
73
|
+
hideIndicator = false,
|
|
74
|
+
label,
|
|
75
|
+
labelFormatter,
|
|
76
|
+
labelClassName,
|
|
77
|
+
formatter,
|
|
78
|
+
color,
|
|
79
|
+
nameKey,
|
|
80
|
+
labelKey
|
|
81
|
+
}) {
|
|
82
|
+
const { config } = useChart();
|
|
83
|
+
const tooltipLabel = React.useMemo(() => {
|
|
84
|
+
if (hideLabel || !payload?.length) {
|
|
85
|
+
return null;
|
|
86
|
+
}
|
|
87
|
+
const [item] = payload;
|
|
88
|
+
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
|
|
89
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
90
|
+
const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
|
|
91
|
+
if (labelFormatter) {
|
|
92
|
+
return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
|
|
93
|
+
}
|
|
94
|
+
if (!value) {
|
|
95
|
+
return null;
|
|
96
|
+
}
|
|
97
|
+
return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
|
|
98
|
+
}, [
|
|
99
|
+
label,
|
|
100
|
+
labelFormatter,
|
|
101
|
+
payload,
|
|
102
|
+
hideLabel,
|
|
103
|
+
labelClassName,
|
|
104
|
+
config,
|
|
105
|
+
labelKey
|
|
106
|
+
]);
|
|
107
|
+
if (!active || !payload?.length) {
|
|
108
|
+
return null;
|
|
109
|
+
}
|
|
110
|
+
const nestLabel = payload.length === 1 && indicator !== "dot";
|
|
111
|
+
return /* @__PURE__ */ jsxs(
|
|
112
|
+
"div",
|
|
113
|
+
{
|
|
114
|
+
className: cn(
|
|
115
|
+
"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",
|
|
116
|
+
className
|
|
117
|
+
),
|
|
118
|
+
children: [
|
|
119
|
+
!nestLabel ? tooltipLabel : null,
|
|
120
|
+
/* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
|
|
121
|
+
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
|
122
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
123
|
+
const indicatorColor = color || item.payload?.fill || item.color;
|
|
124
|
+
return /* @__PURE__ */ jsx(
|
|
125
|
+
"div",
|
|
126
|
+
{
|
|
127
|
+
className: cn(
|
|
128
|
+
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
|
129
|
+
indicator === "dot" && "items-center"
|
|
130
|
+
),
|
|
131
|
+
children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
132
|
+
itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
className: cn(
|
|
136
|
+
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
|
137
|
+
{
|
|
138
|
+
"h-2.5 w-2.5": indicator === "dot",
|
|
139
|
+
"w-1": indicator === "line",
|
|
140
|
+
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
141
|
+
"my-0.5": nestLabel && indicator === "dashed"
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
style: {
|
|
145
|
+
"--color-bg": indicatorColor,
|
|
146
|
+
"--color-border": indicatorColor
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
),
|
|
150
|
+
/* @__PURE__ */ jsxs(
|
|
151
|
+
"div",
|
|
152
|
+
{
|
|
153
|
+
className: cn(
|
|
154
|
+
"flex flex-1 justify-between leading-none",
|
|
155
|
+
nestLabel ? "items-end" : "items-center"
|
|
156
|
+
),
|
|
157
|
+
children: [
|
|
158
|
+
/* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
|
|
159
|
+
nestLabel ? tooltipLabel : null,
|
|
160
|
+
/* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
|
|
161
|
+
] }),
|
|
162
|
+
item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
] })
|
|
167
|
+
},
|
|
168
|
+
item.dataKey
|
|
169
|
+
);
|
|
170
|
+
}) })
|
|
171
|
+
]
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
var ChartLegend = RechartsPrimitive.Legend;
|
|
176
|
+
function ChartLegendContent({
|
|
177
|
+
className,
|
|
178
|
+
hideIcon = false,
|
|
179
|
+
payload,
|
|
180
|
+
verticalAlign = "bottom",
|
|
181
|
+
nameKey
|
|
182
|
+
}) {
|
|
183
|
+
const { config } = useChart();
|
|
184
|
+
if (!payload?.length) {
|
|
185
|
+
return null;
|
|
186
|
+
}
|
|
187
|
+
return /* @__PURE__ */ jsx(
|
|
188
|
+
"div",
|
|
189
|
+
{
|
|
190
|
+
className: cn(
|
|
191
|
+
"flex items-center justify-center gap-4",
|
|
192
|
+
verticalAlign === "top" ? "pb-3" : "pt-3",
|
|
193
|
+
className
|
|
194
|
+
),
|
|
195
|
+
children: payload.map((item) => {
|
|
196
|
+
const key = `${nameKey || item.dataKey || "value"}`;
|
|
197
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
198
|
+
return /* @__PURE__ */ jsxs(
|
|
199
|
+
"div",
|
|
200
|
+
{
|
|
201
|
+
className: cn(
|
|
202
|
+
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
|
|
203
|
+
),
|
|
204
|
+
children: [
|
|
205
|
+
itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
|
|
206
|
+
"div",
|
|
207
|
+
{
|
|
208
|
+
className: "h-2 w-2 shrink-0 rounded-[2px]",
|
|
209
|
+
style: {
|
|
210
|
+
backgroundColor: item.color
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
),
|
|
214
|
+
itemConfig?.label
|
|
215
|
+
]
|
|
216
|
+
},
|
|
217
|
+
item.value
|
|
218
|
+
);
|
|
219
|
+
})
|
|
220
|
+
}
|
|
221
|
+
);
|
|
222
|
+
}
|
|
223
|
+
function getPayloadConfigFromPayload(config, payload, key) {
|
|
224
|
+
if (typeof payload !== "object" || payload === null) {
|
|
225
|
+
return void 0;
|
|
226
|
+
}
|
|
227
|
+
const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
|
|
228
|
+
let configLabelKey = key;
|
|
229
|
+
if (key in payload && typeof payload[key] === "string") {
|
|
230
|
+
configLabelKey = payload[key];
|
|
231
|
+
} else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
|
|
232
|
+
configLabelKey = payloadPayload[key];
|
|
233
|
+
}
|
|
234
|
+
return configLabelKey in config ? config[configLabelKey] : config[key];
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
|
|
3
238
|
//# sourceMappingURL=chart.js.map
|
|
4
239
|
//# sourceMappingURL=chart.js.map
|