@etus/ui 0.4.0-beta.13 → 0.4.0-beta.15
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/chunk-FES2I2OT.js +3 -0
- package/dist/{chunk-6Z73ZQOP.js.map → chunk-FES2I2OT.js.map} +1 -1
- package/dist/chunk-K4MYVFWQ.js +109 -0
- package/dist/chunk-K4MYVFWQ.js.map +1 -0
- package/dist/chunk-KDJCZXLB.js +91 -0
- package/dist/chunk-KDJCZXLB.js.map +1 -0
- package/dist/{chunk-P27ERD6W.js → chunk-MDIXY44D.js} +2 -2
- package/dist/{chunk-P27ERD6W.js.map → chunk-MDIXY44D.js.map} +1 -1
- package/dist/chunk-OOJO4QGD.js +3 -0
- package/dist/{chunk-ATIEGLR2.js.map → chunk-OOJO4QGD.js.map} +1 -1
- package/dist/chunk-VORFH6HQ.js +46 -0
- package/dist/chunk-VORFH6HQ.js.map +1 -0
- package/dist/components/advanced/index.js +6 -6
- package/dist/components/data-display/DataTable/index.js +1 -1
- package/dist/components/data-display/FeatureItem/index.js +6 -0
- package/dist/components/data-display/index.js +15 -13
- package/dist/components/feedback/index.js +2 -2
- package/dist/components/forms/index.js +14 -14
- package/dist/components/index.js +90 -88
- package/dist/components/layout/index.js +1 -1
- package/dist/components/navigation/LogoConta/index.js +5 -0
- package/dist/components/navigation/LogoConta/index.js.map +1 -0
- package/dist/components/navigation/index.js +5 -4
- package/dist/components/primitives/ArrowAnimated/index.js +2 -89
- package/dist/components/primitives/ArrowAnimated/index.js.map +1 -1
- package/dist/components/primitives/index.js +12 -12
- package/dist/components/workflow/index.js +4 -4
- package/dist/index.d.ts +444 -306
- package/dist/index.js +90 -88
- package/dist/styles.css +27 -48
- package/package.json +2 -2
- package/dist/chunk-6Z73ZQOP.js +0 -3
- package/dist/chunk-ATIEGLR2.js +0 -3
- package/dist/chunk-N23L6UDK.js +0 -108
- package/dist/chunk-N23L6UDK.js.map +0 -1
- package/dist/components/data-display/DashboardFilterbar/index.js +0 -111
- package/dist/components/data-display/DashboardFilterbar/index.js.map +0 -1
- package/dist/components/navigation/MobileSidebar/index.js +0 -190
- package/dist/components/navigation/MobileSidebar/index.js.map +0 -1
- package/dist/components/navigation/UserProfileDropdown/index.js +0 -224
- package/dist/components/navigation/UserProfileDropdown/index.js.map +0 -1
- package/dist/components/navigation/WorkspaceDropdown/index.js +0 -192
- package/dist/components/navigation/WorkspaceDropdown/index.js.map +0 -1
- package/dist/components/primitives/FeatureItem/index.js +0 -5
- /package/dist/components/{primitives → data-display}/FeatureItem/index.js.map +0 -0
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import { DateRangePicker } from '../../../chunk-WXBC3D2N.js';
|
|
2
|
-
import '../../../chunk-YUHPTV2A.js';
|
|
3
|
-
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../../chunk-WBE6VQOO.js';
|
|
4
|
-
import '../../../chunk-GAMOVEZD.js';
|
|
5
|
-
import '../../../chunk-AFCSDND5.js';
|
|
6
|
-
import '../../../chunk-7TF5PVEU.js';
|
|
7
|
-
import '../../../chunk-TAZPML2P.js';
|
|
8
|
-
import '../../../chunk-4GVOOXYD.js';
|
|
9
|
-
import '../../../chunk-7ZJ32KRQ.js';
|
|
10
|
-
import '../../../chunk-3L5G7VI2.js';
|
|
11
|
-
import { cn } from '../../../chunk-HRNDJU7D.js';
|
|
12
|
-
import '../../../chunk-UP2VWCW5.js';
|
|
13
|
-
import { subYears, subMonths } from 'date-fns';
|
|
14
|
-
import { cva } from 'class-variance-authority';
|
|
15
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
16
|
-
|
|
17
|
-
var dashboardFilterbarVariants = cva(
|
|
18
|
-
// Base styles (always applied)
|
|
19
|
-
["w-full"],
|
|
20
|
-
{
|
|
21
|
-
variants: {
|
|
22
|
-
variant: {
|
|
23
|
-
default: "flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4",
|
|
24
|
-
minimal: "flex items-center gap-2",
|
|
25
|
-
stacked: "flex flex-col gap-3"
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
defaultVariants: {
|
|
29
|
-
variant: "default"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
);
|
|
33
|
-
var dashboardFilterbarItemVariants = cva([
|
|
34
|
-
"w-full sm:w-auto"
|
|
35
|
-
]);
|
|
36
|
-
function getComparisonPeriod(dateRange, period) {
|
|
37
|
-
if (!dateRange?.from || !dateRange?.to || period === "no-comparison") {
|
|
38
|
-
return void 0;
|
|
39
|
-
}
|
|
40
|
-
if (period === "previous-year") {
|
|
41
|
-
return {
|
|
42
|
-
from: subYears(dateRange.from, 1),
|
|
43
|
-
to: subYears(dateRange.to, 1)
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
if (period === "previous-period") {
|
|
47
|
-
const duration = dateRange.to.getTime() - dateRange.from.getTime();
|
|
48
|
-
const daysBack = Math.ceil(duration / (1e3 * 60 * 60 * 24));
|
|
49
|
-
return {
|
|
50
|
-
from: subMonths(dateRange.from, Math.ceil(daysBack / 30)),
|
|
51
|
-
to: subMonths(dateRange.to, Math.ceil(daysBack / 30))
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
return void 0;
|
|
55
|
-
}
|
|
56
|
-
var comparisonOptions = [
|
|
57
|
-
{ value: "no-comparison", label: "No comparison" },
|
|
58
|
-
{ value: "previous-period", label: "Previous period" },
|
|
59
|
-
{ value: "previous-year", label: "Previous year" }
|
|
60
|
-
];
|
|
61
|
-
function DashboardFilterbar({
|
|
62
|
-
selectedDates,
|
|
63
|
-
onDatesChange,
|
|
64
|
-
maxDate,
|
|
65
|
-
minDate,
|
|
66
|
-
comparisonPeriod = "no-comparison",
|
|
67
|
-
onComparisonPeriodChange,
|
|
68
|
-
showComparisonSelector = false,
|
|
69
|
-
variant,
|
|
70
|
-
className,
|
|
71
|
-
children,
|
|
72
|
-
...props
|
|
73
|
-
}) {
|
|
74
|
-
return /* @__PURE__ */ jsxs(
|
|
75
|
-
"div",
|
|
76
|
-
{
|
|
77
|
-
className: cn(dashboardFilterbarVariants({ variant }), className),
|
|
78
|
-
"data-slot": "dashboard-filterbar",
|
|
79
|
-
...props,
|
|
80
|
-
children: [
|
|
81
|
-
/* @__PURE__ */ jsx("div", { className: cn(dashboardFilterbarItemVariants()), children: /* @__PURE__ */ jsx(
|
|
82
|
-
DateRangePicker,
|
|
83
|
-
{
|
|
84
|
-
"aria-label": "Select date range",
|
|
85
|
-
maxDate,
|
|
86
|
-
minDate,
|
|
87
|
-
value: selectedDates,
|
|
88
|
-
onChange: onDatesChange
|
|
89
|
-
}
|
|
90
|
-
) }),
|
|
91
|
-
showComparisonSelector && /* @__PURE__ */ jsx("div", { className: cn(dashboardFilterbarItemVariants()), children: /* @__PURE__ */ jsxs(
|
|
92
|
-
Select,
|
|
93
|
-
{
|
|
94
|
-
value: comparisonPeriod,
|
|
95
|
-
onValueChange: (value) => onComparisonPeriodChange?.(value),
|
|
96
|
-
children: [
|
|
97
|
-
/* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-44", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select comparison" }) }),
|
|
98
|
-
/* @__PURE__ */ jsx(SelectContent, { children: comparisonOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
|
|
99
|
-
]
|
|
100
|
-
}
|
|
101
|
-
) }),
|
|
102
|
-
children
|
|
103
|
-
]
|
|
104
|
-
}
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
DashboardFilterbar.displayName = "DashboardFilterbar";
|
|
108
|
-
|
|
109
|
-
export { DashboardFilterbar, dashboardFilterbarItemVariants, dashboardFilterbarVariants, getComparisonPeriod };
|
|
110
|
-
//# sourceMappingURL=index.js.map
|
|
111
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/data-display/DashboardFilterbar/DashboardFilterbar.variants.ts","../../../../src/components/data-display/DashboardFilterbar/DashboardFilterbar.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["// DashboardFilterbar/DashboardFilterbar.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * DashboardFilterbar style variants using CVA\n */\nexport const dashboardFilterbarVariants = cva(\n // Base styles (always applied)\n [\"w-full\"],\n {\n variants: {\n variant: {\n default: \"flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4\",\n minimal: \"flex items-center gap-2\",\n stacked: \"flex flex-col gap-3\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport const dashboardFilterbarItemVariants = cva([\n \"w-full sm:w-auto\",\n])\n\nexport type DashboardFilterbarVariantProps = VariantProps<\n typeof dashboardFilterbarVariants\n>\n","// DashboardFilterbar/DashboardFilterbar.tsx\n\"use client\"\n\nimport type { ComparisonPeriod, DashboardFilterbarProps } from \"./DashboardFilterbar.types\"\nimport type { DateRange } from \"react-day-picker\"\n\nimport { subMonths, subYears } from \"date-fns\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { DateRangePicker } from \"../../forms/DateRangePicker\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../../forms/Select\"\nimport {\n dashboardFilterbarItemVariants,\n dashboardFilterbarVariants,\n} from \"./DashboardFilterbar.variants\"\n\n/**\n * Get the comparison period date range based on selected dates\n */\nexport function getComparisonPeriod(\n dateRange: DateRange | undefined,\n period: ComparisonPeriod\n): DateRange | undefined {\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: dateRange could be partial at runtime\n if (!dateRange?.from || !dateRange?.to || period === \"no-comparison\") {\n return undefined\n }\n\n if (period === \"previous-year\") {\n return {\n from: subYears(dateRange.from, 1),\n to: subYears(dateRange.to, 1),\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Exhaustive check for remaining union member\n if (period === \"previous-period\") {\n // Calculate the duration and subtract it\n const duration = dateRange.to.getTime() - dateRange.from.getTime()\n const daysBack = Math.ceil(duration / (1000 * 60 * 60 * 24))\n return {\n from: subMonths(dateRange.from, Math.ceil(daysBack / 30)),\n to: subMonths(dateRange.to, Math.ceil(daysBack / 30)),\n }\n }\n\n return undefined\n}\n\n/**\n * Comparison period options for the select\n */\nconst comparisonOptions: { label: string; value: ComparisonPeriod; }[] = [\n { value: \"no-comparison\", label: \"No comparison\" },\n { value: \"previous-period\", label: \"Previous period\" },\n { value: \"previous-year\", label: \"Previous year\" },\n]\n\n/**\n * DashboardFilterbar - Filter bar for dashboards\n *\n * Provides date range selection and optional comparison period selection.\n * Responsive layout that stacks on mobile.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DashboardFilterbar\n * selectedDates={dateRange}\n * onDatesChange={setDateRange}\n * />\n *\n * // With comparison period\n * <DashboardFilterbar\n * selectedDates={dateRange}\n * onDatesChange={setDateRange}\n * comparisonPeriod={comparison}\n * onComparisonPeriodChange={setComparison}\n * showComparisonSelector\n * />\n *\n * // With additional filters\n * <DashboardFilterbar\n * selectedDates={dateRange}\n * onDatesChange={setDateRange}\n * >\n * <Select>...</Select>\n * <Button>Export</Button>\n * </DashboardFilterbar>\n * ```\n */\nfunction DashboardFilterbar({\n selectedDates,\n onDatesChange,\n maxDate,\n minDate,\n comparisonPeriod = \"no-comparison\",\n onComparisonPeriodChange,\n showComparisonSelector = false,\n variant,\n className,\n children,\n ...props\n}: DashboardFilterbarProps) {\n return (\n <div\n className={cn(dashboardFilterbarVariants({ variant }), className)}\n data-slot=\"dashboard-filterbar\"\n {...props}\n >\n {/* Date Range Picker */}\n <div className={cn(dashboardFilterbarItemVariants())}>\n <DateRangePicker\n aria-label=\"Select date range\"\n maxDate={maxDate}\n minDate={minDate}\n value={selectedDates}\n onChange={onDatesChange}\n />\n </div>\n\n {/* Comparison Period Selector */}\n {showComparisonSelector && (\n <div className={cn(dashboardFilterbarItemVariants())}>\n <Select\n value={comparisonPeriod}\n onValueChange={(value) =>\n onComparisonPeriodChange?.(value as ComparisonPeriod)\n }\n >\n <SelectTrigger className=\"w-full sm:w-44\">\n <SelectValue placeholder=\"Select comparison\" />\n </SelectTrigger>\n <SelectContent>\n {comparisonOptions.map((option) => (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n )}\n\n {/* Additional filters/actions */}\n {children}\n </div>\n )\n}\n\nDashboardFilterbar.displayName = \"DashboardFilterbar\"\n\nexport { DashboardFilterbar }\n"]}
|
|
@@ -1,190 +0,0 @@
|
|
|
1
|
-
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerClose } from '../../../chunk-HI3T55XK.js';
|
|
2
|
-
import { Button } from '../../../chunk-7TF5PVEU.js';
|
|
3
|
-
import '../../../chunk-TAZPML2P.js';
|
|
4
|
-
import '../../../chunk-4GVOOXYD.js';
|
|
5
|
-
import '../../../chunk-7ZJ32KRQ.js';
|
|
6
|
-
import '../../../chunk-3L5G7VI2.js';
|
|
7
|
-
import { cn } from '../../../chunk-HRNDJU7D.js';
|
|
8
|
-
import '../../../chunk-UP2VWCW5.js';
|
|
9
|
-
import { MenuIcon } from 'lucide-react';
|
|
10
|
-
import { cva } from 'class-variance-authority';
|
|
11
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
12
|
-
|
|
13
|
-
var mobileSidebarVariants = cva(
|
|
14
|
-
// Base styles
|
|
15
|
-
[],
|
|
16
|
-
{
|
|
17
|
-
variants: {
|
|
18
|
-
variant: {
|
|
19
|
-
default: ""
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
defaultVariants: {
|
|
23
|
-
variant: "default"
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
var mobileSidebarTriggerVariants = cva([
|
|
28
|
-
"flex items-center rounded-md p-2",
|
|
29
|
-
"text-foreground",
|
|
30
|
-
"hover:bg-accent hover:text-accent-foreground",
|
|
31
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
32
|
-
"transition-colors",
|
|
33
|
-
"data-[state=open]:bg-accent"
|
|
34
|
-
]);
|
|
35
|
-
var mobileSidebarNavListVariants = cva([
|
|
36
|
-
"space-y-1.5"
|
|
37
|
-
]);
|
|
38
|
-
var mobileSidebarNavItemVariants = cva(
|
|
39
|
-
[
|
|
40
|
-
"flex items-center gap-x-2.5 rounded-md px-2 py-1.5",
|
|
41
|
-
"text-base font-medium sm:text-sm",
|
|
42
|
-
"transition-colors",
|
|
43
|
-
"hover:bg-accent",
|
|
44
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
45
|
-
],
|
|
46
|
-
{
|
|
47
|
-
variants: {
|
|
48
|
-
active: {
|
|
49
|
-
true: "text-primary",
|
|
50
|
-
false: "text-muted-foreground hover:text-foreground"
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
defaultVariants: {
|
|
54
|
-
active: false
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
var mobileSidebarShortcutsSectionVariants = cva([
|
|
59
|
-
"mt-8"
|
|
60
|
-
]);
|
|
61
|
-
var mobileSidebarShortcutsLabelVariants = cva([
|
|
62
|
-
"text-sm font-medium leading-6 text-muted-foreground sm:text-xs"
|
|
63
|
-
]);
|
|
64
|
-
var mobileSidebarShortcutsListVariants = cva([
|
|
65
|
-
"mt-2 space-y-0.5"
|
|
66
|
-
]);
|
|
67
|
-
var mobileSidebarShortcutItemVariants = cva([
|
|
68
|
-
"flex items-center gap-x-2.5 rounded-md px-2 py-1.5",
|
|
69
|
-
"font-medium sm:text-sm",
|
|
70
|
-
"text-muted-foreground hover:text-foreground",
|
|
71
|
-
"transition-colors",
|
|
72
|
-
"hover:bg-accent",
|
|
73
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
74
|
-
]);
|
|
75
|
-
var fallbackTitle = "Navigation menu";
|
|
76
|
-
var fallbackDescription = "Use os links deste painel para navegar.";
|
|
77
|
-
function MobileSidebar({
|
|
78
|
-
title,
|
|
79
|
-
navItems = [],
|
|
80
|
-
shortcuts = [],
|
|
81
|
-
shortcutsLabel = "Shortcuts",
|
|
82
|
-
trigger,
|
|
83
|
-
onNavItemClick,
|
|
84
|
-
onShortcutClick,
|
|
85
|
-
isActivePath,
|
|
86
|
-
variant,
|
|
87
|
-
className,
|
|
88
|
-
children,
|
|
89
|
-
...props
|
|
90
|
-
}) {
|
|
91
|
-
const defaultTrigger = /* @__PURE__ */ jsx(
|
|
92
|
-
Button,
|
|
93
|
-
{
|
|
94
|
-
"aria-label": "Open sidebar",
|
|
95
|
-
className: cn(mobileSidebarTriggerVariants()),
|
|
96
|
-
variant: "ghost",
|
|
97
|
-
children: /* @__PURE__ */ jsx(MenuIcon, { "aria-hidden": "true", className: "size-6 shrink-0 sm:size-5" })
|
|
98
|
-
}
|
|
99
|
-
);
|
|
100
|
-
return /* @__PURE__ */ jsx(
|
|
101
|
-
"div",
|
|
102
|
-
{
|
|
103
|
-
className: cn(mobileSidebarVariants({ variant }), className),
|
|
104
|
-
"data-slot": "mobile-sidebar",
|
|
105
|
-
...props,
|
|
106
|
-
children: /* @__PURE__ */ jsxs(Drawer, { children: [
|
|
107
|
-
/* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger ?? defaultTrigger }),
|
|
108
|
-
/* @__PURE__ */ jsxs(DrawerContent, { className: "sm:max-w-lg", "data-slot": "mobile-sidebar-content", children: [
|
|
109
|
-
title && /* @__PURE__ */ jsxs(DrawerHeader, { children: [
|
|
110
|
-
/* @__PURE__ */ jsx(DrawerTitle, { children: title }),
|
|
111
|
-
/* @__PURE__ */ jsx(DrawerDescription, { className: "sr-only", children: fallbackDescription })
|
|
112
|
-
] }),
|
|
113
|
-
!title && /* @__PURE__ */ jsxs(DrawerHeader, { children: [
|
|
114
|
-
/* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: fallbackTitle }),
|
|
115
|
-
/* @__PURE__ */ jsx(DrawerDescription, { className: "sr-only", children: fallbackDescription })
|
|
116
|
-
] }),
|
|
117
|
-
/* @__PURE__ */ jsxs(
|
|
118
|
-
"nav",
|
|
119
|
-
{
|
|
120
|
-
"aria-label": "Mobile navigation",
|
|
121
|
-
className: "flex flex-1 flex-col space-y-10 px-4 pb-4",
|
|
122
|
-
children: [
|
|
123
|
-
navItems.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn(mobileSidebarNavListVariants()), role: "list", children: navItems.map((item) => {
|
|
124
|
-
const isActive = item.active ?? isActivePath?.(item.href) ?? false;
|
|
125
|
-
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
126
|
-
"a",
|
|
127
|
-
{
|
|
128
|
-
className: cn(
|
|
129
|
-
mobileSidebarNavItemVariants({ active: isActive })
|
|
130
|
-
),
|
|
131
|
-
href: item.href,
|
|
132
|
-
onClick: () => onNavItemClick?.(item),
|
|
133
|
-
children: [
|
|
134
|
-
item.icon && /* @__PURE__ */ jsx(
|
|
135
|
-
"span",
|
|
136
|
-
{
|
|
137
|
-
"aria-hidden": "true",
|
|
138
|
-
className: "size-5 shrink-0",
|
|
139
|
-
children: item.icon
|
|
140
|
-
}
|
|
141
|
-
),
|
|
142
|
-
item.label
|
|
143
|
-
]
|
|
144
|
-
}
|
|
145
|
-
) }) }, item.id);
|
|
146
|
-
}) }),
|
|
147
|
-
shortcuts.length > 0 && /* @__PURE__ */ jsxs("div", { className: cn(mobileSidebarShortcutsSectionVariants()), children: [
|
|
148
|
-
/* @__PURE__ */ jsx("span", { className: cn(mobileSidebarShortcutsLabelVariants()), children: shortcutsLabel }),
|
|
149
|
-
/* @__PURE__ */ jsx(
|
|
150
|
-
"ul",
|
|
151
|
-
{
|
|
152
|
-
"aria-label": shortcutsLabel,
|
|
153
|
-
className: cn(mobileSidebarShortcutsListVariants()),
|
|
154
|
-
role: "list",
|
|
155
|
-
children: shortcuts.map((shortcut) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
156
|
-
"a",
|
|
157
|
-
{
|
|
158
|
-
className: cn(mobileSidebarShortcutItemVariants()),
|
|
159
|
-
href: shortcut.href,
|
|
160
|
-
onClick: () => onShortcutClick?.(shortcut),
|
|
161
|
-
children: [
|
|
162
|
-
shortcut.icon && /* @__PURE__ */ jsx(
|
|
163
|
-
"span",
|
|
164
|
-
{
|
|
165
|
-
"aria-hidden": "true",
|
|
166
|
-
className: "size-4 shrink-0",
|
|
167
|
-
children: shortcut.icon
|
|
168
|
-
}
|
|
169
|
-
),
|
|
170
|
-
shortcut.label
|
|
171
|
-
]
|
|
172
|
-
}
|
|
173
|
-
) }) }, shortcut.id))
|
|
174
|
-
}
|
|
175
|
-
)
|
|
176
|
-
] }),
|
|
177
|
-
children
|
|
178
|
-
]
|
|
179
|
-
}
|
|
180
|
-
)
|
|
181
|
-
] })
|
|
182
|
-
] })
|
|
183
|
-
}
|
|
184
|
-
);
|
|
185
|
-
}
|
|
186
|
-
MobileSidebar.displayName = "MobileSidebar";
|
|
187
|
-
|
|
188
|
-
export { MobileSidebar, mobileSidebarNavItemVariants, mobileSidebarNavListVariants, mobileSidebarShortcutItemVariants, mobileSidebarShortcutsLabelVariants, mobileSidebarShortcutsListVariants, mobileSidebarShortcutsSectionVariants, mobileSidebarTriggerVariants, mobileSidebarVariants };
|
|
189
|
-
//# sourceMappingURL=index.js.map
|
|
190
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/MobileSidebar/MobileSidebar.variants.ts","../../../../src/components/navigation/MobileSidebar/MobileSidebar.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["// MobileSidebar/MobileSidebar.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * MobileSidebar style variants using CVA\n */\nexport const mobileSidebarVariants = cva(\n // Base styles\n [],\n {\n variants: {\n variant: {\n default: \"\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport const mobileSidebarTriggerVariants = cva([\n \"flex items-center rounded-md p-2\",\n \"text-foreground\",\n \"hover:bg-accent hover:text-accent-foreground\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n \"transition-colors\",\n \"data-[state=open]:bg-accent\",\n])\n\nexport const mobileSidebarNavListVariants = cva([\n \"space-y-1.5\",\n])\n\nexport const mobileSidebarNavItemVariants = cva(\n [\n \"flex items-center gap-x-2.5 rounded-md px-2 py-1.5\",\n \"text-base font-medium sm:text-sm\",\n \"transition-colors\",\n \"hover:bg-accent\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n ],\n {\n variants: {\n active: {\n true: \"text-primary\",\n false: \"text-muted-foreground hover:text-foreground\",\n },\n },\n defaultVariants: {\n active: false,\n },\n }\n)\n\nexport const mobileSidebarShortcutsSectionVariants = cva([\n \"mt-8\",\n])\n\nexport const mobileSidebarShortcutsLabelVariants = cva([\n \"text-sm font-medium leading-6 text-muted-foreground sm:text-xs\",\n])\n\nexport const mobileSidebarShortcutsListVariants = cva([\n \"mt-2 space-y-0.5\",\n])\n\nexport const mobileSidebarShortcutItemVariants = cva([\n \"flex items-center gap-x-2.5 rounded-md px-2 py-1.5\",\n \"font-medium sm:text-sm\",\n \"text-muted-foreground hover:text-foreground\",\n \"transition-colors\",\n \"hover:bg-accent\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n])\n\nexport type MobileSidebarVariantProps = VariantProps<\n typeof mobileSidebarVariants\n>\n","// MobileSidebar/MobileSidebar.tsx\n\"use client\"\n\nimport type { MobileSidebarProps } from \"./MobileSidebar.types\"\n\nimport { MenuIcon } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Button } from \"../../primitives/Button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"../Drawer\"\nimport {\n mobileSidebarNavItemVariants,\n mobileSidebarNavListVariants,\n mobileSidebarShortcutItemVariants,\n mobileSidebarShortcutsLabelVariants,\n mobileSidebarShortcutsListVariants,\n mobileSidebarShortcutsSectionVariants,\n mobileSidebarTriggerVariants,\n mobileSidebarVariants,\n} from \"./MobileSidebar.variants\"\n\nconst fallbackTitle = \"Navigation menu\"\nconst fallbackDescription = \"Use os links deste painel para navegar.\"\n\n/**\n * MobileSidebar - Mobile-optimized navigation drawer\n *\n * A slide-out navigation panel for mobile devices, built on top of the Drawer component.\n * Supports main navigation items and a shortcuts section.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <MobileSidebar\n * title=\"My App\"\n * navItems={[\n * { id: \"home\", label: \"Home\", href: \"/\", icon: <HomeIcon /> },\n * { id: \"settings\", label: \"Settings\", href: \"/settings\", icon: <SettingsIcon /> },\n * ]}\n * />\n *\n * // With shortcuts and active path detection\n * <MobileSidebar\n * title=\"Dashboard\"\n * navItems={navItems}\n * shortcuts={shortcuts}\n * shortcutsLabel=\"Quick Links\"\n * isActivePath={(href) => pathname === href}\n * />\n *\n * // With custom trigger\n * <MobileSidebar\n * title=\"Menu\"\n * navItems={navItems}\n * trigger={<Button variant=\"outline\">Open Menu</Button>}\n * />\n * ```\n */\nfunction MobileSidebar({\n title,\n navItems = [],\n shortcuts = [],\n shortcutsLabel = \"Shortcuts\",\n trigger,\n onNavItemClick,\n onShortcutClick,\n isActivePath,\n variant,\n className,\n children,\n ...props\n}: MobileSidebarProps) {\n // Default trigger button\n const defaultTrigger = (\n <Button\n aria-label=\"Open sidebar\"\n className={cn(mobileSidebarTriggerVariants())}\n variant=\"ghost\"\n >\n <MenuIcon aria-hidden=\"true\" className=\"size-6 shrink-0 sm:size-5\" />\n </Button>\n )\n\n return (\n <div\n className={cn(mobileSidebarVariants({ variant }), className)}\n data-slot=\"mobile-sidebar\"\n {...props}\n >\n <Drawer>\n <DrawerTrigger asChild>{trigger ?? defaultTrigger}</DrawerTrigger>\n <DrawerContent className=\"sm:max-w-lg\" data-slot=\"mobile-sidebar-content\">\n {title && (\n <DrawerHeader>\n <DrawerTitle>{title}</DrawerTitle>\n <DrawerDescription className=\"sr-only\">\n {fallbackDescription}\n </DrawerDescription>\n </DrawerHeader>\n )}\n {!title && (\n <DrawerHeader>\n <DrawerTitle className=\"sr-only\">{fallbackTitle}</DrawerTitle>\n <DrawerDescription className=\"sr-only\">\n {fallbackDescription}\n </DrawerDescription>\n </DrawerHeader>\n )}\n\n <nav\n aria-label=\"Mobile navigation\"\n className=\"flex flex-1 flex-col space-y-10 px-4 pb-4\"\n >\n {/* Main navigation */}\n {navItems.length > 0 && (\n <ul className={cn(mobileSidebarNavListVariants())} role=\"list\">\n {navItems.map((item) => {\n const isActive = item.active ?? isActivePath?.(item.href) ?? false\n\n return (\n <li key={item.id}>\n <DrawerClose asChild>\n <a\n className={cn(\n mobileSidebarNavItemVariants({ active: isActive })\n )}\n href={item.href}\n onClick={() => onNavItemClick?.(item)}\n >\n {item.icon && (\n <span\n aria-hidden=\"true\"\n className=\"size-5 shrink-0\"\n >\n {item.icon}\n </span>\n )}\n {item.label}\n </a>\n </DrawerClose>\n </li>\n )\n })}\n </ul>\n )}\n\n {/* Shortcuts section */}\n {shortcuts.length > 0 && (\n <div className={cn(mobileSidebarShortcutsSectionVariants())}>\n <span className={cn(mobileSidebarShortcutsLabelVariants())}>\n {shortcutsLabel}\n </span>\n <ul\n aria-label={shortcutsLabel}\n className={cn(mobileSidebarShortcutsListVariants())}\n role=\"list\"\n >\n {shortcuts.map((shortcut) => (\n <li key={shortcut.id}>\n <DrawerClose asChild>\n <a\n className={cn(mobileSidebarShortcutItemVariants())}\n href={shortcut.href}\n onClick={() => onShortcutClick?.(shortcut)}\n >\n {shortcut.icon && (\n <span\n aria-hidden=\"true\"\n className=\"size-4 shrink-0\"\n >\n {shortcut.icon}\n </span>\n )}\n {shortcut.label}\n </a>\n </DrawerClose>\n </li>\n ))}\n </ul>\n </div>\n )}\n\n {/* Additional custom content */}\n {children}\n </nav>\n </DrawerContent>\n </Drawer>\n </div>\n )\n}\n\nMobileSidebar.displayName = \"MobileSidebar\"\n\nexport { MobileSidebar }\n"]}
|
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuItem } from '../../../chunk-OXDWUKGP.js';
|
|
2
|
-
import { cn } from '../../../chunk-HRNDJU7D.js';
|
|
3
|
-
import '../../../chunk-UP2VWCW5.js';
|
|
4
|
-
import { SunIcon, MoonIcon, ComputerIcon, ExternalLinkIcon, LogOutIcon } from 'lucide-react';
|
|
5
|
-
import { cva } from 'class-variance-authority';
|
|
6
|
-
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
7
|
-
|
|
8
|
-
var userProfileDropdownVariants = cva(
|
|
9
|
-
// Base styles
|
|
10
|
-
[],
|
|
11
|
-
{
|
|
12
|
-
variants: {
|
|
13
|
-
variant: {
|
|
14
|
-
default: "",
|
|
15
|
-
compact: ""
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
defaultVariants: {
|
|
19
|
-
variant: "default"
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
);
|
|
23
|
-
var userProfileTriggerVariants = cva(
|
|
24
|
-
// Base styles
|
|
25
|
-
[
|
|
26
|
-
"flex items-center gap-2 rounded-md p-2",
|
|
27
|
-
"text-sm font-medium",
|
|
28
|
-
"hover:bg-accent hover:text-accent-foreground",
|
|
29
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
30
|
-
"transition-colors"
|
|
31
|
-
],
|
|
32
|
-
{
|
|
33
|
-
variants: {
|
|
34
|
-
variant: {
|
|
35
|
-
default: "gap-3",
|
|
36
|
-
compact: "gap-2"
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
defaultVariants: {
|
|
40
|
-
variant: "default"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
var userProfileAvatarVariants = cva([
|
|
45
|
-
"flex items-center justify-center",
|
|
46
|
-
"rounded-full bg-primary text-primary-foreground",
|
|
47
|
-
"text-xs font-medium",
|
|
48
|
-
"overflow-hidden"
|
|
49
|
-
], {
|
|
50
|
-
variants: {
|
|
51
|
-
size: {
|
|
52
|
-
sm: "size-7",
|
|
53
|
-
md: "size-8",
|
|
54
|
-
lg: "size-10"
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
defaultVariants: {
|
|
58
|
-
size: "md"
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
var userProfileInfoVariants = cva([
|
|
62
|
-
"flex flex-col items-start text-left"
|
|
63
|
-
]);
|
|
64
|
-
var userProfileNameVariants = cva([
|
|
65
|
-
"text-sm font-medium text-foreground truncate max-w-32"
|
|
66
|
-
]);
|
|
67
|
-
var userProfileEmailVariants = cva([
|
|
68
|
-
"text-xs text-muted-foreground truncate max-w-32"
|
|
69
|
-
]);
|
|
70
|
-
var themeOptions = [
|
|
71
|
-
{ value: "light", label: "Light", icon: SunIcon },
|
|
72
|
-
{ value: "dark", label: "Dark", icon: MoonIcon },
|
|
73
|
-
{ value: "system", label: "System", icon: ComputerIcon }
|
|
74
|
-
];
|
|
75
|
-
function getInitials(name, email) {
|
|
76
|
-
if (name) {
|
|
77
|
-
const parts = name.split(" ").filter(Boolean);
|
|
78
|
-
const first = parts[0];
|
|
79
|
-
const second = parts[1];
|
|
80
|
-
if (first && second && first.length > 0 && second.length > 0) {
|
|
81
|
-
return `${first[0] ?? ""}${second[0] ?? ""}`.toUpperCase();
|
|
82
|
-
}
|
|
83
|
-
return name.slice(0, 2).toUpperCase();
|
|
84
|
-
}
|
|
85
|
-
if (email) {
|
|
86
|
-
return email.slice(0, 2).toUpperCase();
|
|
87
|
-
}
|
|
88
|
-
return "??";
|
|
89
|
-
}
|
|
90
|
-
function UserProfileTrigger({
|
|
91
|
-
user,
|
|
92
|
-
className,
|
|
93
|
-
...props
|
|
94
|
-
}) {
|
|
95
|
-
const initials = user.initials ?? getInitials(user.name, user.email);
|
|
96
|
-
return /* @__PURE__ */ jsxs(
|
|
97
|
-
"button",
|
|
98
|
-
{
|
|
99
|
-
className: cn(userProfileTriggerVariants(), className),
|
|
100
|
-
"data-slot": "user-profile-trigger",
|
|
101
|
-
type: "button",
|
|
102
|
-
...props,
|
|
103
|
-
children: [
|
|
104
|
-
/* @__PURE__ */ jsx("span", { className: cn(userProfileAvatarVariants()), children: user.avatarUrl ? /* @__PURE__ */ jsx(
|
|
105
|
-
"img",
|
|
106
|
-
{
|
|
107
|
-
alt: user.name ?? user.email,
|
|
108
|
-
className: "size-full object-cover",
|
|
109
|
-
src: user.avatarUrl
|
|
110
|
-
}
|
|
111
|
-
) : initials }),
|
|
112
|
-
/* @__PURE__ */ jsxs("span", { className: cn(userProfileInfoVariants()), children: [
|
|
113
|
-
user.name && /* @__PURE__ */ jsx("span", { className: cn(userProfileNameVariants()), children: user.name }),
|
|
114
|
-
/* @__PURE__ */ jsx("span", { className: cn(userProfileEmailVariants()), children: user.email })
|
|
115
|
-
] })
|
|
116
|
-
]
|
|
117
|
-
}
|
|
118
|
-
);
|
|
119
|
-
}
|
|
120
|
-
function UserProfileDropdown({
|
|
121
|
-
user,
|
|
122
|
-
theme = "system",
|
|
123
|
-
onThemeChange,
|
|
124
|
-
showThemeSwitcher = false,
|
|
125
|
-
menuItems = [],
|
|
126
|
-
onSignOut,
|
|
127
|
-
signOutLabel = "Sign out",
|
|
128
|
-
align = "end",
|
|
129
|
-
side = "bottom",
|
|
130
|
-
variant,
|
|
131
|
-
className,
|
|
132
|
-
children,
|
|
133
|
-
...props
|
|
134
|
-
}) {
|
|
135
|
-
return /* @__PURE__ */ jsx(
|
|
136
|
-
"div",
|
|
137
|
-
{
|
|
138
|
-
className: cn(userProfileDropdownVariants({ variant }), className),
|
|
139
|
-
"data-slot": "user-profile-dropdown",
|
|
140
|
-
...props,
|
|
141
|
-
children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
142
|
-
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsx(UserProfileTrigger, { user }) }),
|
|
143
|
-
/* @__PURE__ */ jsxs(DropdownMenuContent, { align, side, children: [
|
|
144
|
-
/* @__PURE__ */ jsx(DropdownMenuLabel, { children: user.email }),
|
|
145
|
-
showThemeSwitcher && /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
|
|
146
|
-
/* @__PURE__ */ jsx(DropdownMenuSubTrigger, { children: "Theme" }),
|
|
147
|
-
/* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(
|
|
148
|
-
DropdownMenuRadioGroup,
|
|
149
|
-
{
|
|
150
|
-
value: theme,
|
|
151
|
-
onValueChange: (value) => onThemeChange?.(value),
|
|
152
|
-
children: themeOptions.map((option) => /* @__PURE__ */ jsxs(
|
|
153
|
-
DropdownMenuRadioItem,
|
|
154
|
-
{
|
|
155
|
-
"aria-label": `Switch to ${option.label} mode`,
|
|
156
|
-
value: option.value,
|
|
157
|
-
children: [
|
|
158
|
-
/* @__PURE__ */ jsx(
|
|
159
|
-
option.icon,
|
|
160
|
-
{
|
|
161
|
-
"aria-hidden": "true",
|
|
162
|
-
className: "mr-2 size-4 shrink-0"
|
|
163
|
-
}
|
|
164
|
-
),
|
|
165
|
-
option.label
|
|
166
|
-
]
|
|
167
|
-
},
|
|
168
|
-
option.value
|
|
169
|
-
))
|
|
170
|
-
}
|
|
171
|
-
) })
|
|
172
|
-
] }) }),
|
|
173
|
-
menuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
174
|
-
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
175
|
-
/* @__PURE__ */ jsx(DropdownMenuGroup, { children: menuItems.map((item) => /* @__PURE__ */ jsx(
|
|
176
|
-
DropdownMenuItem,
|
|
177
|
-
{
|
|
178
|
-
asChild: !!item.href,
|
|
179
|
-
variant: item.variant,
|
|
180
|
-
onClick: item.onClick,
|
|
181
|
-
children: item.href ? /* @__PURE__ */ jsxs(
|
|
182
|
-
"a",
|
|
183
|
-
{
|
|
184
|
-
href: item.href,
|
|
185
|
-
rel: item.external ? "noopener noreferrer" : void 0,
|
|
186
|
-
target: item.external ? "_blank" : void 0,
|
|
187
|
-
children: [
|
|
188
|
-
item.icon && /* @__PURE__ */ jsx("span", { className: "mr-2 size-4", children: item.icon }),
|
|
189
|
-
item.label,
|
|
190
|
-
item.external && /* @__PURE__ */ jsx(
|
|
191
|
-
ExternalLinkIcon,
|
|
192
|
-
{
|
|
193
|
-
"aria-hidden": "true",
|
|
194
|
-
className: "mb-0.5 ml-1 size-3 text-muted-foreground"
|
|
195
|
-
}
|
|
196
|
-
)
|
|
197
|
-
]
|
|
198
|
-
}
|
|
199
|
-
) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
200
|
-
item.icon && /* @__PURE__ */ jsx("span", { className: "mr-2 size-4", children: item.icon }),
|
|
201
|
-
item.label
|
|
202
|
-
] })
|
|
203
|
-
},
|
|
204
|
-
item.id
|
|
205
|
-
)) })
|
|
206
|
-
] }),
|
|
207
|
-
onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
208
|
-
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
209
|
-
/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onSignOut, children: [
|
|
210
|
-
/* @__PURE__ */ jsx(LogOutIcon, { "aria-hidden": "true", className: "mr-2 size-4" }),
|
|
211
|
-
signOutLabel
|
|
212
|
-
] }) })
|
|
213
|
-
] })
|
|
214
|
-
] })
|
|
215
|
-
] })
|
|
216
|
-
}
|
|
217
|
-
);
|
|
218
|
-
}
|
|
219
|
-
UserProfileDropdown.displayName = "UserProfileDropdown";
|
|
220
|
-
UserProfileTrigger.displayName = "UserProfileTrigger";
|
|
221
|
-
|
|
222
|
-
export { UserProfileDropdown, UserProfileTrigger, userProfileAvatarVariants, userProfileDropdownVariants, userProfileEmailVariants, userProfileInfoVariants, userProfileNameVariants, userProfileTriggerVariants };
|
|
223
|
-
//# sourceMappingURL=index.js.map
|
|
224
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/UserProfileDropdown/UserProfileDropdown.variants.ts","../../../../src/components/navigation/UserProfileDropdown/UserProfileDropdown.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["// UserProfileDropdown/UserProfileDropdown.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * UserProfileDropdown style variants using CVA\n */\nexport const userProfileDropdownVariants = cva(\n // Base styles\n [],\n {\n variants: {\n variant: {\n default: \"\",\n compact: \"\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport const userProfileTriggerVariants = cva(\n // Base styles\n [\n \"flex items-center gap-2 rounded-md p-2\",\n \"text-sm font-medium\",\n \"hover:bg-accent hover:text-accent-foreground\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n \"transition-colors\",\n ],\n {\n variants: {\n variant: {\n default: \"gap-3\",\n compact: \"gap-2\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport const userProfileAvatarVariants = cva([\n \"flex items-center justify-center\",\n \"rounded-full bg-primary text-primary-foreground\",\n \"text-xs font-medium\",\n \"overflow-hidden\",\n], {\n variants: {\n size: {\n sm: \"size-7\",\n md: \"size-8\",\n lg: \"size-10\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n})\n\nexport const userProfileInfoVariants = cva([\n \"flex flex-col items-start text-left\",\n])\n\nexport const userProfileNameVariants = cva([\n \"text-sm font-medium text-foreground truncate max-w-32\",\n])\n\nexport const userProfileEmailVariants = cva([\n \"text-xs text-muted-foreground truncate max-w-32\",\n])\n\nexport type UserProfileDropdownVariantProps = VariantProps<\n typeof userProfileDropdownVariants\n>\n","// UserProfileDropdown/UserProfileDropdown.tsx\n\"use client\"\n\nimport type {\n ThemeOption,\n UserProfileDropdownProps,\n UserProfileTriggerProps,\n} from \"./UserProfileDropdown.types\"\n\nimport {\n ComputerIcon,\n ExternalLinkIcon,\n LogOutIcon,\n MoonIcon,\n SunIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"../DropdownMenu\"\nimport {\n userProfileAvatarVariants,\n userProfileDropdownVariants,\n userProfileEmailVariants,\n userProfileInfoVariants,\n userProfileNameVariants,\n userProfileTriggerVariants,\n} from \"./UserProfileDropdown.variants\"\n\n/**\n * Theme options for the theme switcher\n */\nconst themeOptions: { icon: typeof SunIcon; label: string; value: ThemeOption; }[] = [\n { value: \"light\", label: \"Light\", icon: SunIcon },\n { value: \"dark\", label: \"Dark\", icon: MoonIcon },\n { value: \"system\", label: \"System\", icon: ComputerIcon },\n]\n\n/**\n * Get user initials from name or email\n */\nfunction getInitials(name?: string, email?: string): string {\n if (name) {\n const parts = name.split(\" \").filter(Boolean)\n const first = parts[0]\n const second = parts[1]\n if (first && second && first.length > 0 && second.length > 0) {\n return `${first[0] ?? \"\"}${second[0] ?? \"\"}`.toUpperCase()\n }\n return name.slice(0, 2).toUpperCase()\n }\n if (email) {\n return email.slice(0, 2).toUpperCase()\n }\n return \"??\"\n}\n\n/**\n * UserProfileTrigger - Default trigger button showing user avatar and info\n */\nfunction UserProfileTrigger({\n user,\n className,\n ...props\n}: UserProfileTriggerProps) {\n const initials = user.initials ?? getInitials(user.name, user.email)\n\n return (\n <button\n className={cn(userProfileTriggerVariants(), className)}\n data-slot=\"user-profile-trigger\"\n type=\"button\"\n {...props}\n >\n <span className={cn(userProfileAvatarVariants())}>\n {user.avatarUrl ? (\n <img\n alt={user.name ?? user.email}\n className=\"size-full object-cover\"\n src={user.avatarUrl}\n />\n ) : (\n initials\n )}\n </span>\n <span className={cn(userProfileInfoVariants())}>\n {user.name && (\n <span className={cn(userProfileNameVariants())}>{user.name}</span>\n )}\n <span className={cn(userProfileEmailVariants())}>{user.email}</span>\n </span>\n </button>\n )\n}\n\n/**\n * UserProfileDropdown - User profile menu with theme switcher and actions\n *\n * A dropdown menu for user account actions including profile info display,\n * theme switching, custom menu items, and sign out.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <UserProfileDropdown\n * user={{ name: \"John Doe\", email: \"john@example.com\" }}\n * onSignOut={() => signOut()}\n * />\n *\n * // With theme switcher and custom items\n * <UserProfileDropdown\n * user={{ name: \"John Doe\", email: \"john@example.com\", avatarUrl: \"/avatar.jpg\" }}\n * showThemeSwitcher\n * theme={theme}\n * onThemeChange={setTheme}\n * menuItems={[\n * { id: \"docs\", label: \"Documentation\", href: \"/docs\", external: true },\n * { id: \"settings\", label: \"Settings\", onClick: () => openSettings() },\n * ]}\n * onSignOut={() => signOut()}\n * />\n *\n * // With custom trigger\n * <UserProfileDropdown user={user}>\n * <Button variant=\"ghost\">\n * <Avatar src={user.avatarUrl} />\n * </Button>\n * </UserProfileDropdown>\n * ```\n */\nfunction UserProfileDropdown({\n user,\n theme = \"system\",\n onThemeChange,\n showThemeSwitcher = false,\n menuItems = [],\n onSignOut,\n signOutLabel = \"Sign out\",\n align = \"end\",\n side = \"bottom\",\n variant,\n className,\n children,\n ...props\n}: UserProfileDropdownProps) {\n return (\n <div\n className={cn(userProfileDropdownVariants({ variant }), className)}\n data-slot=\"user-profile-dropdown\"\n {...props}\n >\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n {children ?? <UserProfileTrigger user={user} />}\n </DropdownMenuTrigger>\n <DropdownMenuContent align={align} side={side}>\n {/* User info label */}\n <DropdownMenuLabel>{user.email}</DropdownMenuLabel>\n\n {/* Theme switcher */}\n {showThemeSwitcher && (\n <DropdownMenuGroup>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={theme}\n onValueChange={(value) =>\n onThemeChange?.(value as ThemeOption)\n }\n >\n {themeOptions.map((option) => (\n <DropdownMenuRadioItem\n key={option.value}\n aria-label={`Switch to ${option.label} mode`}\n value={option.value}\n >\n <option.icon\n aria-hidden=\"true\"\n className=\"mr-2 size-4 shrink-0\"\n />\n {option.label}\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n )}\n\n {/* Custom menu items */}\n {menuItems.length > 0 && (\n <>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n {menuItems.map((item) => (\n <DropdownMenuItem\n key={item.id}\n asChild={!!item.href}\n variant={item.variant}\n onClick={item.onClick}\n >\n {item.href ? (\n <a\n href={item.href}\n rel={item.external ? \"noopener noreferrer\" : undefined}\n target={item.external ? \"_blank\" : undefined}\n >\n {item.icon && (\n <span className=\"mr-2 size-4\">{item.icon}</span>\n )}\n {item.label}\n {item.external && (\n <ExternalLinkIcon\n aria-hidden=\"true\"\n className=\"mb-0.5 ml-1 size-3 text-muted-foreground\"\n />\n )}\n </a>\n ) : (\n <>\n {item.icon && (\n <span className=\"mr-2 size-4\">{item.icon}</span>\n )}\n {item.label}\n </>\n )}\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </>\n )}\n\n {/* Sign out */}\n {onSignOut && (\n <>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={onSignOut}>\n <LogOutIcon aria-hidden=\"true\" className=\"mr-2 size-4\" />\n {signOutLabel}\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </>\n )}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n\nUserProfileDropdown.displayName = \"UserProfileDropdown\"\nUserProfileTrigger.displayName = \"UserProfileTrigger\"\n\nexport { UserProfileDropdown, UserProfileTrigger }\n"]}
|