@arolariu/components 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/EXAMPLES.md +1035 -1035
- package/LICENSE.md +21 -21
- package/changelog.md +9 -0
- package/dist/components/ui/bubble-background.js.map +1 -1
- package/dist/components/ui/chart.d.ts +25 -11
- package/dist/components/ui/chart.d.ts.map +1 -1
- package/dist/components/ui/chart.js +14 -11
- package/dist/components/ui/chart.js.map +1 -1
- package/dist/components/ui/dropdrawer.js.map +1 -1
- package/dist/components/ui/typewriter.d.ts +18 -0
- package/dist/components/ui/typewriter.d.ts.map +1 -0
- package/dist/components/ui/typewriter.js +128 -0
- package/dist/components/ui/typewriter.js.map +1 -0
- package/dist/hooks/use-mobile.js.map +1 -1
- package/dist/index.css +67 -25
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/lib/utils.js.map +1 -1
- package/package.json +42 -37
- package/src/components/ui/bubble-background.tsx +189 -189
- package/src/components/ui/chart.tsx +67 -35
- package/src/components/ui/dropdrawer.tsx +973 -973
- package/src/components/ui/typewriter.tsx +188 -0
- package/src/hooks/use-mobile.tsx +44 -44
- package/src/index.ts +407 -400
- package/src/lib/utils.ts +10 -10
package/LICENSE.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Alexandru-Razvan Olariu
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Alexandru-Razvan Olariu
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/changelog.md
CHANGED
|
@@ -8,6 +8,15 @@ All notable changes to **@arolariu/components** are documented here following [K
|
|
|
8
8
|
|
|
9
9
|
## 🎉 Latest Releases
|
|
10
10
|
|
|
11
|
+
### [0.1.1](https://www.npmjs.com/package/@arolariu/components/v/0.1.1) - 2025-08-25
|
|
12
|
+
|
|
13
|
+
**🔧 Dependencies & Infrastructure**
|
|
14
|
+
|
|
15
|
+
- ⬆️ **Upgraded Radix UI** packages to latest versions for better performance
|
|
16
|
+
- ⬆️ **Updated rslib/rsbuild** core packages to latest versions
|
|
17
|
+
- 🆕 **Typewriter Component** Added new component from Aceternity UI.
|
|
18
|
+
- ⬆️ **Recharts V3** Upgraded chart.tsx to use Rechars v3.
|
|
19
|
+
|
|
11
20
|
### [0.1.0](https://www.npmjs.com/package/@arolariu/components/v/0.1.0) - 2025-08-12
|
|
12
21
|
|
|
13
22
|
**🔧 Dependencies & Infrastructure**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\ui\\bubble-background.js","sources":["webpack://@arolariu/components/./src/components/ui/bubble-background.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"components\\ui\\bubble-background.js","sources":["webpack://@arolariu/components/./src/components/ui/bubble-background.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport {\n motion,\n type SpringOptions,\n Transition,\n useMotionValue,\n useSpring,\n} from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n interactive?: boolean;\n transition?: SpringOptions;\n colors?: {\n first: string;\n second: string;\n third: string;\n fourth: string;\n fifth: string;\n sixth: string;\n };\n}\n\nconst BubbleBackground = React.forwardRef<\n HTMLDivElement,\n BubbleBackgroundProps\n>(\n (\n {\n className,\n children,\n interactive = false,\n transition = { stiffness: 100, damping: 20 },\n colors = {\n first: \"18,113,255\",\n second: \"221,74,255\",\n third: \"0,220,255\",\n fourth: \"200,50,50\",\n fifth: \"180,180,50\",\n sixth: \"140,100,255\",\n },\n ...props\n },\n ref,\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n React.useImperativeHandle(\n ref,\n () => containerRef.current as HTMLDivElement,\n );\n\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const springX = useSpring(mouseX, transition);\n const springY = useSpring(mouseY, transition);\n\n React.useEffect(() => {\n if (!interactive) return;\n\n const currentContainer = containerRef.current;\n if (!currentContainer) return;\n\n const handleMouseMove = (e: MouseEvent) => {\n const rect = currentContainer.getBoundingClientRect();\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + rect.height / 2;\n mouseX.set(e.clientX - centerX);\n mouseY.set(e.clientY - centerY);\n };\n\n currentContainer?.addEventListener(\"mousemove\", handleMouseMove);\n return () =>\n currentContainer?.removeEventListener(\"mousemove\", handleMouseMove);\n }, [interactive, mouseX, mouseY]);\n\n return (\n <div\n ref={containerRef}\n className={cn(\n \"relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900\",\n className,\n )}\n {...props}\n >\n <style>\n {`\n :root {\n --first-color: ${colors.first};\n --second-color: ${colors.second};\n --third-color: ${colors.third};\n --fourth-color: ${colors.fourth};\n --fifth-color: ${colors.fifth};\n --sixth-color: ${colors.sixth};\n }\n `}\n </style>\n\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"absolute top-0 left-0 w-0 h-0\"\n >\n <defs>\n <filter id=\"goo\">\n <feGaussianBlur\n in=\"SourceGraphic\"\n stdDeviation=\"10\"\n result=\"blur\"\n />\n <feColorMatrix\n in=\"blur\"\n mode=\"matrix\"\n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8\"\n result=\"goo\"\n />\n <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n </filter>\n </defs>\n </svg>\n\n <div\n className=\"absolute inset-0\"\n style={{ filter: \"url(#goo) blur(40px)\" }}\n >\n <motion.div\n className=\"absolute rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--first-color),0.8)_0%,rgba(var(--first-color),0)_50%)]\"\n animate={{ y: [-50, 50, -50] }}\n transition={{ duration: 30, ease: \"easeInOut\", repeat: Infinity }}\n />\n\n <motion.div\n className=\"absolute inset-0 flex justify-center items-center origin-[calc(50%-400px)]\"\n animate={{ rotate: 360 }}\n transition={\n {\n duration: 20,\n ease: \"linear\",\n repeat: Infinity,\n repeatType: \"reverse\",\n } satisfies Transition\n }\n >\n <div className=\"rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--second-color),0.8)_0%,rgba(var(--second-color),0)_50%)]\" />\n </motion.div>\n\n <motion.div\n className=\"absolute inset-0 flex justify-center items-center origin-[calc(50%+400px)]\"\n animate={{ rotate: 360 }}\n transition={{ duration: 40, ease: \"linear\", repeat: Infinity }}\n >\n <div className=\"absolute rounded-full size-[80%] bg-[radial-gradient(circle_at_center,rgba(var(--third-color),0.8)_0%,rgba(var(--third-color),0)_50%)] mix-blend-hard-light top-[calc(50%+200px)] left-[calc(50%-500px)]\" />\n </motion.div>\n\n <motion.div\n className=\"absolute rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--fourth-color),0.8)_0%,rgba(var(--fourth-color),0)_50%)] opacity-70\"\n animate={{ x: [-50, 50, -50] }}\n transition={{ duration: 40, ease: \"easeInOut\", repeat: Infinity }}\n />\n\n <motion.div\n className=\"absolute inset-0 flex justify-center items-center origin-[calc(50%_-_800px)_calc(50%_+_200px)]\"\n animate={{ rotate: 360 }}\n transition={{ duration: 20, ease: \"linear\", repeat: Infinity }}\n >\n <div className=\"absolute rounded-full size-[160%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--fifth-color),0.8)_0%,rgba(var(--fifth-color),0)_50%)] top-[calc(50%-80%)] left-[calc(50%-80%)]\" />\n </motion.div>\n\n {interactive && (\n <motion.div\n className=\"absolute rounded-full size-full mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--sixth-color),0.8)_0%,rgba(var(--sixth-color),0)_50%)] opacity-70\"\n style={{\n x: springX,\n y: springY,\n }}\n />\n )}\n </div>\n\n {children}\n </div>\n );\n },\n);\n\nBubbleBackground.displayName = \"BubbleBackground\";\n\nexport { BubbleBackground, type BubbleBackgroundProps };\n"],"names":["BubbleBackground","React","className","children","interactive","transition","colors","props","ref","containerRef","mouseX","useMotionValue","mouseY","springX","useSpring","springY","currentContainer","handleMouseMove","e","rect","centerX","centerY","cn","motion","Infinity"],"mappings":"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"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import * as RechartsPrimitive from "recharts";
|
|
3
|
+
import type { LegendPayload } from "recharts/types/component/DefaultLegendContent";
|
|
4
|
+
import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
|
|
5
|
+
import type { Props as LegendProps } from "recharts/types/component/Legend";
|
|
6
|
+
import { TooltipContentProps } from "recharts/types/component/Tooltip";
|
|
3
7
|
declare const THEMES: {
|
|
4
8
|
readonly light: "";
|
|
5
9
|
readonly dark: ".dark";
|
|
@@ -16,6 +20,25 @@ export type ChartConfig = {
|
|
|
16
20
|
theme: Record<keyof typeof THEMES, string>;
|
|
17
21
|
});
|
|
18
22
|
};
|
|
23
|
+
export type CustomTooltipProps = TooltipContentProps<ValueType, NameType> & {
|
|
24
|
+
className?: string;
|
|
25
|
+
hideLabel?: boolean;
|
|
26
|
+
hideIndicator?: boolean;
|
|
27
|
+
indicator?: "line" | "dot" | "dashed";
|
|
28
|
+
nameKey?: string;
|
|
29
|
+
labelKey?: string;
|
|
30
|
+
labelFormatter?: (label: TooltipContentProps<number, string>["label"], payload: TooltipContentProps<number, string>["payload"]) => React.ReactNode;
|
|
31
|
+
formatter?: (value: number | string, name: string, item: Payload<number | string, string>, index: number, payload: ReadonlyArray<Payload<number | string, string>>) => React.ReactNode;
|
|
32
|
+
labelClassName?: string;
|
|
33
|
+
color?: string;
|
|
34
|
+
};
|
|
35
|
+
export type ChartLegendContentProps = {
|
|
36
|
+
className?: string;
|
|
37
|
+
hideIcon?: boolean;
|
|
38
|
+
verticalAlign?: LegendProps["verticalAlign"];
|
|
39
|
+
payload?: LegendPayload[];
|
|
40
|
+
nameKey?: string;
|
|
41
|
+
};
|
|
19
42
|
declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
|
|
20
43
|
config: ChartConfig;
|
|
21
44
|
children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
|
|
@@ -25,17 +48,8 @@ declare const ChartStyle: ({ id, config }: {
|
|
|
25
48
|
config: ChartConfig;
|
|
26
49
|
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
27
50
|
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
28
|
-
declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator,
|
|
29
|
-
hideLabel?: boolean;
|
|
30
|
-
hideIndicator?: boolean;
|
|
31
|
-
indicator?: "line" | "dot" | "dashed";
|
|
32
|
-
nameKey?: string;
|
|
33
|
-
labelKey?: string;
|
|
34
|
-
}): import("react/jsx-runtime").JSX.Element | null;
|
|
51
|
+
declare function ChartTooltipContent({ active, payload, label, className, indicator, hideLabel, hideIndicator, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }: CustomTooltipProps): import("react/jsx-runtime").JSX.Element | null;
|
|
35
52
|
declare const ChartLegend: typeof RechartsPrimitive.Legend;
|
|
36
|
-
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }:
|
|
37
|
-
hideIcon?: boolean;
|
|
38
|
-
nameKey?: string;
|
|
39
|
-
}): import("react/jsx-runtime").JSX.Element | null;
|
|
53
|
+
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
40
54
|
export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
|
|
41
55
|
//# sourceMappingURL=chart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -43,25 +43,28 @@ const ChartStyle = ({ id, config })=>{
|
|
|
43
43
|
return /*#__PURE__*/ jsx("style", {
|
|
44
44
|
dangerouslySetInnerHTML: {
|
|
45
45
|
__html: Object.entries(THEMES).map(([theme, prefix])=>`
|
|
46
|
-
${prefix} [data-chart=${id}] {
|
|
47
|
-
${colorConfig.map(([key, itemConfig])=>{
|
|
46
|
+
${prefix} [data-chart=${id}] {
|
|
47
|
+
${colorConfig.map(([key, itemConfig])=>{
|
|
48
48
|
const color = itemConfig.theme?.[theme] || itemConfig.color;
|
|
49
49
|
return color ? ` --color-${key}: ${color};` : null;
|
|
50
50
|
}).join("\n")}
|
|
51
|
-
}
|
|
52
|
-
`).join("\n")
|
|
51
|
+
}
|
|
52
|
+
`).join("\n")
|
|
53
53
|
}
|
|
54
54
|
});
|
|
55
55
|
};
|
|
56
56
|
const ChartTooltip = Tooltip;
|
|
57
|
-
function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false,
|
|
57
|
+
function ChartTooltipContent({ active, payload, label, className, indicator = "dot", hideLabel = false, hideIndicator = false, labelFormatter, formatter, labelClassName, color, nameKey, labelKey }) {
|
|
58
58
|
const { config } = useChart();
|
|
59
59
|
const tooltipLabel = useMemo(()=>{
|
|
60
60
|
if (hideLabel || !payload?.length) return null;
|
|
61
61
|
const [item] = payload;
|
|
62
62
|
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
|
|
63
63
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
64
|
-
const value =
|
|
64
|
+
const value = (()=>{
|
|
65
|
+
const v = labelKey || "string" != typeof label ? itemConfig?.label : config[label]?.label ?? label;
|
|
66
|
+
return "string" == typeof v || "number" == typeof v ? v : void 0;
|
|
67
|
+
})();
|
|
65
68
|
if (labelFormatter) return /*#__PURE__*/ jsx("div", {
|
|
66
69
|
className: cn("font-medium", labelClassName),
|
|
67
70
|
children: labelFormatter(value, payload)
|
|
@@ -83,7 +86,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
83
86
|
if (!active || !payload?.length) return null;
|
|
84
87
|
const nestLabel = 1 === payload.length && "dot" !== indicator;
|
|
85
88
|
return /*#__PURE__*/ jsxs("div", {
|
|
86
|
-
className: cn("border-
|
|
89
|
+
className: cn("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", className),
|
|
87
90
|
children: [
|
|
88
91
|
nestLabel ? null : tooltipLabel,
|
|
89
92
|
/*#__PURE__*/ jsx("div", {
|
|
@@ -93,7 +96,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
93
96
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
94
97
|
const indicatorColor = color || item.payload.fill || item.color;
|
|
95
98
|
return /*#__PURE__*/ jsx("div", {
|
|
96
|
-
className: cn("[&>svg]:text-
|
|
99
|
+
className: cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", "dot" === indicator && "items-center"),
|
|
97
100
|
children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /*#__PURE__*/ jsxs(Fragment, {
|
|
98
101
|
children: [
|
|
99
102
|
itemConfig?.icon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ jsx("div", {
|
|
@@ -116,13 +119,13 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
116
119
|
children: [
|
|
117
120
|
nestLabel ? tooltipLabel : null,
|
|
118
121
|
/*#__PURE__*/ jsx("span", {
|
|
119
|
-
className: "text-
|
|
122
|
+
className: "text-muted-foreground",
|
|
120
123
|
children: itemConfig?.label || item.name
|
|
121
124
|
})
|
|
122
125
|
]
|
|
123
126
|
}),
|
|
124
127
|
item.value && /*#__PURE__*/ jsx("span", {
|
|
125
|
-
className: "text-
|
|
128
|
+
className: "text-foreground font-mono font-medium tabular-nums",
|
|
126
129
|
children: item.value.toLocaleString()
|
|
127
130
|
})
|
|
128
131
|
]
|
|
@@ -145,7 +148,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
|
|
|
145
148
|
const key = `${nameKey || item.dataKey || "value"}`;
|
|
146
149
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
147
150
|
return /*#__PURE__*/ jsxs("div", {
|
|
148
|
-
className: cn("[&>svg]:text-
|
|
151
|
+
className: cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
|
|
149
152
|
children: [
|
|
150
153
|
itemConfig?.icon && !hideIcon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : /*#__PURE__*/ jsx("div", {
|
|
151
154
|
className: "h-2 w-2 shrink-0 rounded-[2px]",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\ui\\chart.js","sources":["webpack://@arolariu/components/./src/components/ui/chart.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode;\n icon?: React.ComponentType;\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\n );\n};\n\ntype ChartContextProps = {\n config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n const context = React.useContext(ChartContext);\n\n if (!context) {\n throw new Error(\"useChart must be used within a <ChartContainer />\");\n }\n\n return context;\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig;\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"];\n}) {\n const uniqueId = React.useId();\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-slot=\"chart\"\n data-chart={chartId}\n className={cn(\n \"[&_.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\",\n className,\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer>\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme || config.color,\n );\n\n if (!colorConfig.length) {\n return null;\n }\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color;\n return color ? ` --color-${key}: ${color};` : null;\n })\n .join(\"\\n\")}\n}\n`,\n )\n .join(\"\\n\"),\n }}\n />\n );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean;\n hideIndicator?: boolean;\n indicator?: \"line\" | \"dot\" | \"dashed\";\n nameKey?: string;\n labelKey?: string;\n }) {\n const { config } = useChart();\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null;\n }\n\n const [item] = payload;\n const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label;\n\n if (labelFormatter) {\n return (\n <div className={cn(\"font-medium\", labelClassName)}>\n {labelFormatter(value, payload)}\n </div>\n );\n }\n\n if (!value) {\n return null;\n }\n\n return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ]);\n\n if (!active || !payload?.length) {\n return null;\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n return (\n <div\n className={cn(\n \"border-neutral-200/50 bg-white grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-neutral-200 px-2.5 py-1.5 text-xs shadow-xl dark:border-neutral-800/50 dark:bg-neutral-950 dark:border-neutral-800\",\n className,\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const indicatorColor = color || item.payload.fill || item.color;\n\n return (\n <div\n key={item.dataKey}\n className={cn(\n \"[&>svg]:text-neutral-500 flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 dark:[&>svg]:text-neutral-400\",\n indicator === \"dot\" && \"items-center\",\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn(\n \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n {\n \"h-2.5 w-2.5\": indicator === \"dot\",\n \"w-1\": indicator === \"line\",\n \"w-0 border-[1.5px] border-dashed bg-transparent\":\n indicator === \"dashed\",\n \"my-0.5\": nestLabel && indicator === \"dashed\",\n },\n )}\n style={\n {\n \"--color-bg\": indicatorColor,\n \"--color-border\": indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n \"flex flex-1 justify-between leading-none\",\n nestLabel ? \"items-end\" : \"items-center\",\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-neutral-500 dark:text-neutral-400\">\n {itemConfig?.label || item.name}\n </span>\n </div>\n {item.value && (\n <span className=\"text-neutral-950 font-mono font-medium tabular-nums dark:text-neutral-50\">\n {item.value.toLocaleString()}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> &\n Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n hideIcon?: boolean;\n nameKey?: string;\n }) {\n const { config } = useChart();\n\n if (!payload?.length) {\n return null;\n }\n\n return (\n <div\n className={cn(\n \"flex items-center justify-center gap-4\",\n verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n className,\n )}\n >\n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n return (\n <div\n key={item.value}\n className={cn(\n \"[&>svg]:text-neutral-500 flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 dark:[&>svg]:text-neutral-400\",\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color,\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n );\n })}\n </div>\n );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string,\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined;\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined;\n\n let configLabelKey: string = key;\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string;\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string;\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config];\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n};\n"],"names":["THEMES","ChartContext","React","useChart","context","Error","ChartContainer","id","className","children","config","props","uniqueId","chartId","cn","ChartStyle","RechartsPrimitive","colorConfig","Object","theme","prefix","key","itemConfig","color","ChartTooltip","ChartTooltipContent","active","payload","indicator","hideLabel","hideIndicator","label","labelFormatter","labelClassName","formatter","nameKey","labelKey","tooltipLabel","item","getPayloadConfigFromPayload","value","nestLabel","index","indicatorColor","undefined","ChartLegend","ChartLegendContent","hideIcon","verticalAlign","payloadPayload","configLabelKey"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components\\ui\\chart.js","sources":["webpack://@arolariu/components/./src/components/ui/chart.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport type { LegendPayload } from \"recharts/types/component/DefaultLegendContent\";\nimport {\n NameType,\n Payload,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport type { Props as LegendProps } from \"recharts/types/component/Legend\";\nimport { TooltipContentProps } from \"recharts/types/component/Tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode;\n icon?: React.ComponentType;\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\n );\n};\n\ntype ChartContextProps = {\n config: ChartConfig;\n};\n\nexport type CustomTooltipProps = TooltipContentProps<ValueType, NameType> & {\n className?: string;\n hideLabel?: boolean;\n hideIndicator?: boolean;\n indicator?: \"line\" | \"dot\" | \"dashed\";\n nameKey?: string;\n labelKey?: string;\n labelFormatter?: (\n label: TooltipContentProps<number, string>[\"label\"],\n payload: TooltipContentProps<number, string>[\"payload\"],\n ) => React.ReactNode;\n formatter?: (\n value: number | string,\n name: string,\n item: Payload<number | string, string>,\n index: number,\n payload: ReadonlyArray<Payload<number | string, string>>,\n ) => React.ReactNode;\n labelClassName?: string;\n color?: string;\n};\n\nexport type ChartLegendContentProps = {\n className?: string;\n hideIcon?: boolean;\n verticalAlign?: LegendProps[\"verticalAlign\"];\n payload?: LegendPayload[];\n nameKey?: string;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n const context = React.useContext(ChartContext);\n\n if (!context) {\n throw new Error(\"useChart must be used within a <ChartContainer />\");\n }\n\n return context;\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig;\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"];\n}) {\n const uniqueId = React.useId();\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-slot=\"chart\"\n data-chart={chartId}\n className={cn(\n \"[&_.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\",\n className,\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer>\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme || config.color,\n );\n\n if (!colorConfig.length) {\n return null;\n }\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n ${prefix} [data-chart=${id}] {\n ${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color;\n return color ? ` --color-${key}: ${color};` : null;\n })\n .join(\"\\n\")}\n }\n `,\n )\n .join(\"\\n\"),\n }}\n />\n );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n active,\n payload,\n label,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n labelFormatter,\n formatter,\n labelClassName,\n color,\n nameKey,\n labelKey,\n}: CustomTooltipProps) {\n const { config } = useChart();\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null;\n }\n\n const [item] = payload;\n const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const value = (() => {\n const v =\n !labelKey && typeof label === \"string\"\n ? (config[label as keyof typeof config]?.label ?? label)\n : itemConfig?.label;\n\n return typeof v === \"string\" || typeof v === \"number\" ? v : undefined;\n })();\n\n if (labelFormatter) {\n return (\n <div className={cn(\"font-medium\", labelClassName)}>\n {labelFormatter(value, payload)}\n </div>\n );\n }\n\n if (!value) {\n return null;\n }\n\n return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ]);\n\n if (!active || !payload?.length) {\n return null;\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n return (\n <div\n className={cn(\n \"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\",\n className,\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const indicatorColor = color || item.payload.fill || item.color;\n\n return (\n <div\n key={item.dataKey}\n className={cn(\n \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n indicator === \"dot\" && \"items-center\",\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn(\n \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n {\n \"h-2.5 w-2.5\": indicator === \"dot\",\n \"w-1\": indicator === \"line\",\n \"w-0 border-[1.5px] border-dashed bg-transparent\":\n indicator === \"dashed\",\n \"my-0.5\": nestLabel && indicator === \"dashed\",\n },\n )}\n style={\n {\n \"--color-bg\": indicatorColor,\n \"--color-border\": indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n \"flex flex-1 justify-between leading-none\",\n nestLabel ? \"items-end\" : \"items-center\",\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-muted-foreground\">\n {itemConfig?.label || item.name}\n </span>\n </div>\n {item.value && (\n <span className=\"text-foreground font-mono font-medium tabular-nums\">\n {item.value.toLocaleString()}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: ChartLegendContentProps) {\n const { config } = useChart();\n\n if (!payload?.length) {\n return null;\n }\n\n return (\n <div\n className={cn(\n \"flex items-center justify-center gap-4\",\n verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n className,\n )}\n >\n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n return (\n <div\n key={item.value}\n className={cn(\n \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\",\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color,\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n );\n })}\n </div>\n );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string,\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined;\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined;\n\n let configLabelKey: string = key;\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string;\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string;\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config];\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n};\n"],"names":["THEMES","ChartContext","React","useChart","context","Error","ChartContainer","id","className","children","config","props","uniqueId","chartId","cn","ChartStyle","RechartsPrimitive","colorConfig","Object","theme","prefix","key","itemConfig","color","ChartTooltip","ChartTooltipContent","active","payload","label","indicator","hideLabel","hideIndicator","labelFormatter","formatter","labelClassName","nameKey","labelKey","tooltipLabel","item","getPayloadConfigFromPayload","value","v","undefined","nestLabel","index","indicatorColor","ChartLegend","ChartLegendContent","hideIcon","verticalAlign","payloadPayload","configLabelKey"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\ui\\dropdrawer.js","sources":["webpack://@arolariu/components/./src/components/ui/dropdrawer.tsx"],"sourcesContent":["\r\n\r\nimport { AnimatePresence, motion, Transition } from \"motion/react\";\r\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {\r\n Drawer,\r\n DrawerClose,\r\n DrawerContent,\r\n DrawerFooter,\r\n DrawerHeader,\r\n DrawerTitle,\r\n DrawerTrigger,\r\n} from \"@/components/ui/drawer\";\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuItem,\r\n DropdownMenuLabel,\r\n DropdownMenuSeparator,\r\n DropdownMenuSub,\r\n DropdownMenuSubContent,\r\n DropdownMenuSubTrigger,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport { useIsMobile } from \"@/hooks/use-mobile\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst DropDrawerContext = React.createContext<{ isMobile: boolean }>({\r\n isMobile: false,\r\n});\r\n\r\nconst useDropDrawerContext = () => {\r\n const context = React.useContext(DropDrawerContext);\r\n if (!context) {\r\n throw new Error(\r\n \"DropDrawer components cannot be rendered outside the Context\",\r\n );\r\n }\r\n return context;\r\n};\r\n\r\nfunction DropDrawer({\r\n children,\r\n ...props\r\n}:\r\n | React.ComponentProps<typeof Drawer>\r\n | React.ComponentProps<typeof DropdownMenu>) {\r\n const isMobile = useIsMobile();\r\n const DropdownComponent = isMobile ? Drawer : DropdownMenu;\r\n\r\n return (\r\n <DropDrawerContext.Provider value={{ isMobile }}>\r\n <DropdownComponent\r\n data-slot=\"drop-drawer\"\r\n {...(isMobile && { autoFocus: true })}\r\n {...props}\r\n >\r\n {children}\r\n </DropdownComponent>\r\n </DropDrawerContext.Provider>\r\n );\r\n}\r\n\r\nfunction DropDrawerTrigger({\r\n className,\r\n children,\r\n ...props\r\n}:\r\n | React.ComponentProps<typeof DrawerTrigger>\r\n | React.ComponentProps<typeof DropdownMenuTrigger>) {\r\n const { isMobile } = useDropDrawerContext();\r\n const TriggerComponent = isMobile ? DrawerTrigger : DropdownMenuTrigger;\r\n\r\n return (\r\n <TriggerComponent\r\n data-slot=\"drop-drawer-trigger\"\r\n className={className}\r\n {...props}\r\n >\r\n {children}\r\n </TriggerComponent>\r\n );\r\n}\r\n\r\nfunction DropDrawerContent({\r\n className,\r\n children,\r\n ...props\r\n}:\r\n | React.ComponentProps<typeof DrawerContent>\r\n | React.ComponentProps<typeof DropdownMenuContent>) {\r\n const { isMobile } = useDropDrawerContext();\r\n const [activeSubmenu, setActiveSubmenu] = React.useState<string | null>(null);\r\n const [submenuTitle, setSubmenuTitle] = React.useState<string | null>(null);\r\n const [submenuStack, setSubmenuStack] = React.useState<\r\n { id: string; title: string }[]\r\n >([]);\r\n // Add animation direction state\r\n const [animationDirection, setAnimationDirection] = React.useState<\r\n \"forward\" | \"backward\"\r\n >(\"forward\");\r\n\r\n // Create a ref to store submenu content by ID\r\n const submenuContentRef = React.useRef<Map<string, React.ReactNode[]>>(\r\n new Map(),\r\n );\r\n\r\n // Function to navigate to a submenu\r\n const navigateToSubmenu = React.useCallback((id: string, title: string) => {\r\n // Set animation direction to forward when navigating to a submenu\r\n setAnimationDirection(\"forward\");\r\n setActiveSubmenu(id);\r\n setSubmenuTitle(title);\r\n setSubmenuStack((prev) => [...prev, { id, title }]);\r\n }, []);\r\n\r\n // Function to go back to previous menu\r\n const goBack = React.useCallback(() => {\r\n // Set animation direction to backward when going back\r\n setAnimationDirection(\"backward\");\r\n\r\n if (submenuStack.length <= 1) {\r\n // If we're at the first level, go back to main menu\r\n setActiveSubmenu(null);\r\n setSubmenuTitle(null);\r\n setSubmenuStack([]);\r\n } else {\r\n // Go back to previous submenu\r\n const newStack = [...submenuStack];\r\n newStack.pop(); // Remove current\r\n const previous = newStack[newStack.length - 1];\r\n setActiveSubmenu(previous.id);\r\n setSubmenuTitle(previous.title);\r\n setSubmenuStack(newStack);\r\n }\r\n }, [submenuStack]);\r\n\r\n // Function to register submenu content\r\n const registerSubmenuContent = React.useCallback(\r\n (id: string, content: React.ReactNode[]) => {\r\n submenuContentRef.current.set(id, content);\r\n },\r\n [],\r\n );\r\n\r\n // Function to extract submenu content\r\n const extractSubmenuContent = React.useCallback(\r\n (elements: React.ReactNode, targetId: string): React.ReactNode[] => {\r\n const result: React.ReactNode[] = [];\r\n\r\n // Recursive function to search through all children\r\n const findSubmenuContent = (node: React.ReactNode) => {\r\n // Skip if not a valid element\r\n if (!React.isValidElement(node)) return;\r\n\r\n const element = node as React.ReactElement;\r\n // Use a more specific type to avoid 'any'\r\n const props = element.props as {\r\n id?: string;\r\n \"data-submenu-id\"?: string;\r\n children?: React.ReactNode;\r\n };\r\n\r\n // Check if this is a DropDrawerSub\r\n if (element.type === DropDrawerSub) {\r\n // Get all possible ID values\r\n const elementId = props.id;\r\n const dataSubmenuId = props[\"data-submenu-id\"];\r\n\r\n // If this is the submenu we're looking for\r\n if (elementId === targetId || dataSubmenuId === targetId) {\r\n // Find the SubContent within this Sub\r\n if (props.children) {\r\n React.Children.forEach(props.children, (child) => {\r\n if (\r\n React.isValidElement(child) &&\r\n child.type === DropDrawerSubContent\r\n ) {\r\n // Add all children of the SubContent to the result\r\n const subContentProps = child.props as {\r\n children?: React.ReactNode;\r\n };\r\n if (subContentProps.children) {\r\n React.Children.forEach(\r\n subContentProps.children,\r\n (contentChild) => {\r\n result.push(contentChild);\r\n },\r\n );\r\n }\r\n }\r\n });\r\n }\r\n return; // Found what we needed, no need to search deeper\r\n }\r\n }\r\n\r\n // If this element has children, search through them\r\n if (props.children) {\r\n if (Array.isArray(props.children)) {\r\n props.children.forEach((child: React.ReactNode) =>\r\n findSubmenuContent(child),\r\n );\r\n } else {\r\n findSubmenuContent(props.children);\r\n }\r\n }\r\n };\r\n\r\n // Start the search from the root elements\r\n if (Array.isArray(elements)) {\r\n elements.forEach((child) => findSubmenuContent(child));\r\n } else {\r\n findSubmenuContent(elements);\r\n }\r\n\r\n return result;\r\n },\r\n [],\r\n );\r\n\r\n // Get submenu content (either from cache or extract it)\r\n const getSubmenuContent = React.useCallback(\r\n (id: string) => {\r\n // Check if we have the content in our ref\r\n const cachedContent = submenuContentRef.current.get(id || \"\");\r\n if (cachedContent && cachedContent.length > 0) {\r\n return cachedContent;\r\n }\r\n\r\n // If not in cache, extract it\r\n const submenuContent = extractSubmenuContent(children, id);\r\n\r\n if (submenuContent.length === 0) {\r\n return [];\r\n }\r\n\r\n // Store in cache for future use\r\n if (id) {\r\n submenuContentRef.current.set(id, submenuContent);\r\n }\r\n\r\n return submenuContent;\r\n },\r\n [children, extractSubmenuContent],\r\n );\r\n\r\n // Animation variants for Framer Motion\r\n const variants = {\r\n enter: (direction: \"forward\" | \"backward\") => ({\r\n x: direction === \"forward\" ? \"100%\" : \"-100%\",\r\n opacity: 0,\r\n }),\r\n center: {\r\n x: 0,\r\n opacity: 1,\r\n },\r\n exit: (direction: \"forward\" | \"backward\") => ({\r\n x: direction === \"forward\" ? \"-100%\" : \"100%\",\r\n opacity: 0,\r\n }),\r\n };\r\n\r\n // Animation transition\r\n const transition = {\r\n duration: 0.3,\r\n ease: [0.25, 0.1, 0.25, 1.0], // cubic-bezier easing\r\n } satisfies Transition;\r\n\r\n if (isMobile) {\r\n return (\r\n <SubmenuContext.Provider\r\n value={{\r\n activeSubmenu,\r\n setActiveSubmenu: (id) => {\r\n if (id === null) {\r\n setActiveSubmenu(null);\r\n setSubmenuTitle(null);\r\n setSubmenuStack([]);\r\n }\r\n },\r\n submenuTitle,\r\n setSubmenuTitle,\r\n navigateToSubmenu,\r\n registerSubmenuContent,\r\n }}\r\n >\r\n <DrawerContent\r\n data-slot=\"drop-drawer-content\"\r\n className={cn(\"max-h-[90vh]\", className)}\r\n {...props}\r\n >\r\n {activeSubmenu ? (\r\n <>\r\n <DrawerHeader>\r\n <div className=\"flex items-center gap-2\">\r\n <button\r\n onClick={goBack}\r\n className=\"hover:bg-neutral-100/50 rounded-full p-1 dark:hover:bg-neutral-800/50\"\r\n >\r\n <ChevronLeftIcon className=\"h-5 w-5\" />\r\n </button>\r\n <DrawerTitle>{submenuTitle || \"Submenu\"}</DrawerTitle>\r\n </div>\r\n </DrawerHeader>\r\n <div className=\"flex-1 relative overflow-y-auto max-h-[70vh]\">\r\n {/* Use AnimatePresence to handle exit animations */}\r\n <AnimatePresence\r\n initial={false}\r\n mode=\"wait\"\r\n custom={animationDirection}\r\n >\r\n <motion.div\r\n key={activeSubmenu || \"main\"}\r\n custom={animationDirection}\r\n variants={variants}\r\n initial=\"enter\"\r\n animate=\"center\"\r\n exit=\"exit\"\r\n transition={transition}\r\n className=\"pb-6 space-y-1.5 w-full h-full\"\r\n >\r\n {activeSubmenu\r\n ? getSubmenuContent(activeSubmenu)\r\n : children}\r\n </motion.div>\r\n </AnimatePresence>\r\n </div>\r\n </>\r\n ) : (\r\n <>\r\n <DrawerHeader className=\"sr-only\">\r\n <DrawerTitle>Menu</DrawerTitle>\r\n </DrawerHeader>\r\n <div className=\"overflow-y-auto max-h-[70vh]\">\r\n <AnimatePresence\r\n initial={false}\r\n mode=\"wait\"\r\n custom={animationDirection}\r\n >\r\n <motion.div\r\n key=\"main-menu\"\r\n custom={animationDirection}\r\n variants={variants}\r\n initial=\"enter\"\r\n animate=\"center\"\r\n exit=\"exit\"\r\n transition={transition}\r\n className=\"pb-6 space-y-1.5 w-full\"\r\n >\r\n {children}\r\n </motion.div>\r\n </AnimatePresence>\r\n </div>\r\n </>\r\n )}\r\n </DrawerContent>\r\n </SubmenuContext.Provider>\r\n );\r\n }\r\n\r\n return (\r\n <SubmenuContext.Provider\r\n value={{\r\n activeSubmenu,\r\n setActiveSubmenu,\r\n submenuTitle,\r\n setSubmenuTitle,\r\n registerSubmenuContent,\r\n }}\r\n >\r\n <DropdownMenuContent\r\n data-slot=\"drop-drawer-content\"\r\n align=\"end\"\r\n sideOffset={4}\r\n className={cn(\r\n \"max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[220px] overflow-y-auto\",\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </DropdownMenuContent>\r\n </SubmenuContext.Provider>\r\n );\r\n}\r\n\r\nfunction DropDrawerItem({\r\n className,\r\n children,\r\n onSelect,\r\n onClick,\r\n icon,\r\n variant = \"default\",\r\n inset,\r\n disabled,\r\n ...props\r\n}: React.ComponentProps<typeof DropdownMenuItem> & {\r\n icon?: React.ReactNode;\r\n}) {\r\n const { isMobile } = useDropDrawerContext();\r\n\r\n // Define hooks outside of conditionals to follow React rules\r\n // Check if this item is inside a group by looking at parent elements\r\n const isInGroup = React.useCallback(\r\n (element: HTMLElement | null): boolean => {\r\n if (!element) return false;\r\n\r\n // Check if any parent has a data-drop-drawer-group attribute\r\n let parent = element.parentElement;\r\n while (parent) {\r\n if (parent.hasAttribute(\"data-drop-drawer-group\")) {\r\n return true;\r\n }\r\n parent = parent.parentElement;\r\n }\r\n return false;\r\n },\r\n [],\r\n );\r\n\r\n // Create a ref to check if the item is in a group\r\n const itemRef = React.useRef<HTMLDivElement>(null);\r\n const [isInsideGroup, setIsInsideGroup] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n // Only run this effect in mobile mode\r\n if (!isMobile) return;\r\n\r\n // Use a short timeout to ensure the DOM is fully rendered\r\n const timer = setTimeout(() => {\r\n if (itemRef.current) {\r\n setIsInsideGroup(isInGroup(itemRef.current));\r\n }\r\n }, 0);\r\n\r\n return () => clearTimeout(timer);\r\n }, [isInGroup, isMobile]);\r\n\r\n if (isMobile) {\r\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n if (disabled) return;\r\n if (onClick) onClick(e);\r\n if (onSelect) onSelect(e as unknown as Event);\r\n };\r\n\r\n // Only wrap in DrawerClose if it's not a submenu item\r\n const content = (\r\n <div\r\n ref={itemRef}\r\n data-slot=\"drop-drawer-item\"\r\n data-variant={variant}\r\n data-inset={inset}\r\n data-disabled={disabled}\r\n className={cn(\r\n \"flex cursor-pointer items-center justify-between px-4 py-4\",\r\n // Only apply margin, background and rounded corners if not in a group\r\n !isInsideGroup &&\r\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800\",\r\n // For items in a group, don't add background but add more padding\r\n isInsideGroup && \"bg-transparent py-4\",\r\n inset && \"pl-8\",\r\n variant === \"destructive\" &&\r\n \"text-red-500 dark:text-red-500 dark:text-red-900 dark:dark:text-red-900\",\r\n disabled && \"pointer-events-none opacity-50\",\r\n className,\r\n )}\r\n onClick={handleClick}\r\n aria-disabled={disabled}\r\n {...props}\r\n >\r\n <div className=\"flex items-center gap-2\">{children}</div>\r\n {icon && <div className=\"flex-shrink-0\">{icon}</div>}\r\n </div>\r\n );\r\n\r\n // Check if this is inside a submenu\r\n const isInSubmenu =\r\n (props as Record<string, unknown>)[\"data-parent-submenu-id\"] ||\r\n (props as Record<string, unknown>)[\"data-parent-submenu\"];\r\n\r\n if (isInSubmenu) {\r\n return content;\r\n }\r\n\r\n return <DrawerClose asChild>{content}</DrawerClose>;\r\n }\r\n\r\n return (\r\n <DropdownMenuItem\r\n data-slot=\"drop-drawer-item\"\r\n data-variant={variant}\r\n data-inset={inset}\r\n className={className}\r\n onSelect={onSelect}\r\n onClick={onClick as React.MouseEventHandler<HTMLDivElement>}\r\n variant={variant}\r\n inset={inset}\r\n disabled={disabled}\r\n {...props}\r\n >\r\n <div className=\"flex w-full items-center justify-between\">\r\n <div>{children}</div>\r\n {icon && <div>{icon}</div>}\r\n </div>\r\n </DropdownMenuItem>\r\n );\r\n}\r\n\r\nfunction DropDrawerSeparator({\r\n className,\r\n ...props\r\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\r\n const { isMobile } = useDropDrawerContext();\r\n\r\n // For mobile, render a simple divider\r\n if (isMobile) {\r\n return null;\r\n }\r\n\r\n // For desktop, use the standard dropdown separator\r\n return (\r\n <DropdownMenuSeparator\r\n data-slot=\"drop-drawer-separator\"\r\n className={className}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nfunction DropDrawerLabel({\r\n className,\r\n children,\r\n ...props\r\n}:\r\n | React.ComponentProps<typeof DropdownMenuLabel>\r\n | React.ComponentProps<typeof DrawerTitle>) {\r\n const { isMobile } = useDropDrawerContext();\r\n\r\n if (isMobile) {\r\n return (\r\n <DrawerHeader className=\"p-0\">\r\n <DrawerTitle\r\n data-slot=\"drop-drawer-label\"\r\n className={cn(\r\n \"text-neutral-500 px-4 py-2 text-sm font-medium dark:text-neutral-400\",\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </DrawerTitle>\r\n </DrawerHeader>\r\n );\r\n }\r\n\r\n return (\r\n <DropdownMenuLabel\r\n data-slot=\"drop-drawer-label\"\r\n className={className}\r\n {...props}\r\n >\r\n {children}\r\n </DropdownMenuLabel>\r\n );\r\n}\r\n\r\nfunction DropDrawerFooter({\r\n className,\r\n children,\r\n ...props\r\n}: React.ComponentProps<typeof DrawerFooter> | React.ComponentProps<\"div\">) {\r\n const { isMobile } = useDropDrawerContext();\r\n\r\n if (isMobile) {\r\n return (\r\n <DrawerFooter\r\n data-slot=\"drop-drawer-footer\"\r\n className={cn(\"p-4\", className)}\r\n {...props}\r\n >\r\n {children}\r\n </DrawerFooter>\r\n );\r\n }\r\n\r\n // No direct equivalent in DropdownMenu, so we'll just render a div\r\n return (\r\n <div\r\n data-slot=\"drop-drawer-footer\"\r\n className={cn(\"p-2\", className)}\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n );\r\n}\r\n\r\nfunction DropDrawerGroup({\r\n className,\r\n children,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n children: React.ReactNode;\r\n}) {\r\n const { isMobile } = useDropDrawerContext();\r\n\r\n // Add separators between children on mobile\r\n const childrenWithSeparators = React.useMemo(() => {\r\n if (!isMobile) return children;\r\n\r\n const childArray = React.Children.toArray(children);\r\n\r\n // Filter out any existing separators\r\n const filteredChildren = childArray.filter(\r\n (child) =>\r\n React.isValidElement(child) && child.type !== DropDrawerSeparator,\r\n );\r\n\r\n // Add separators between items\r\n return filteredChildren.flatMap((child, index) => {\r\n if (index === filteredChildren.length - 1) return [child];\r\n return [\r\n child,\r\n <div\r\n key={`separator-${index}`}\r\n className=\"bg-neutral-200 h-px dark:bg-neutral-800\"\r\n aria-hidden=\"true\"\r\n />,\r\n ];\r\n });\r\n }, [children, isMobile]);\r\n\r\n if (isMobile) {\r\n return (\r\n <div\r\n data-drop-drawer-group\r\n data-slot=\"drop-drawer-group\"\r\n role=\"group\"\r\n className={cn(\r\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-3 overflow-hidden rounded-xl dark:bg-neutral-800 dark:dark:bg-neutral-800\",\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {childrenWithSeparators}\r\n </div>\r\n );\r\n }\r\n\r\n // On desktop, use a div with proper role and attributes\r\n return (\r\n <div\r\n data-drop-drawer-group\r\n data-slot=\"drop-drawer-group\"\r\n role=\"group\"\r\n className={className}\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n );\r\n}\r\n\r\n// Context for managing submenu state on mobile\r\ninterface SubmenuContextType {\r\n activeSubmenu: string | null;\r\n setActiveSubmenu: (id: string | null) => void;\r\n submenuTitle: string | null;\r\n setSubmenuTitle: (title: string | null) => void;\r\n navigateToSubmenu?: (id: string, title: string) => void;\r\n registerSubmenuContent?: (id: string, content: React.ReactNode[]) => void;\r\n}\r\n\r\nconst SubmenuContext = React.createContext<SubmenuContextType>({\r\n activeSubmenu: null,\r\n setActiveSubmenu: () => {},\r\n submenuTitle: null,\r\n setSubmenuTitle: () => {},\r\n navigateToSubmenu: undefined,\r\n registerSubmenuContent: undefined,\r\n});\r\n\r\n// Submenu components\r\n// Counter for generating simple numeric IDs\r\nlet submenuIdCounter = 0;\r\n\r\nfunction DropDrawerSub({\r\n children,\r\n id,\r\n ...props\r\n}: React.ComponentProps<typeof DropdownMenuSub> & {\r\n id?: string;\r\n}) {\r\n const { isMobile } = useDropDrawerContext();\r\n const { registerSubmenuContent } = React.useContext(SubmenuContext);\r\n\r\n // Generate a simple numeric ID instead of using React.useId()\r\n const [generatedId] = React.useState(() => `submenu-${submenuIdCounter++}`);\r\n const submenuId = id || generatedId;\r\n\r\n // Extract submenu content to register with parent\r\n React.useEffect(() => {\r\n if (!registerSubmenuContent) return;\r\n\r\n // Find the SubContent within this Sub\r\n const contentItems: React.ReactNode[] = [];\r\n React.Children.forEach(children, (child) => {\r\n if (React.isValidElement(child) && child.type === DropDrawerSubContent) {\r\n // Add all children of the SubContent to the result\r\n React.Children.forEach(\r\n (child.props as { children?: React.ReactNode }).children,\r\n (contentChild) => {\r\n contentItems.push(contentChild);\r\n },\r\n );\r\n }\r\n });\r\n\r\n // Register the content with the parent\r\n if (contentItems.length > 0) {\r\n registerSubmenuContent(submenuId, contentItems);\r\n }\r\n }, [children, registerSubmenuContent, submenuId]);\r\n\r\n if (isMobile) {\r\n // For mobile, we'll use the context to manage submenu state\r\n // Process children to pass the submenu ID to the trigger and content\r\n const processedChildren = React.Children.map(children, (child) => {\r\n if (!React.isValidElement(child)) return child;\r\n\r\n if (child.type === DropDrawerSubTrigger) {\r\n return React.cloneElement(\r\n child as React.ReactElement,\r\n {\r\n ...(child.props as object),\r\n \"data-parent-submenu-id\": submenuId,\r\n \"data-submenu-id\": submenuId,\r\n // Use only data attributes, not custom props\r\n \"data-parent-submenu\": submenuId,\r\n } as React.HTMLAttributes<HTMLElement>,\r\n );\r\n }\r\n\r\n if (child.type === DropDrawerSubContent) {\r\n return React.cloneElement(\r\n child as React.ReactElement,\r\n {\r\n ...(child.props as object),\r\n \"data-parent-submenu-id\": submenuId,\r\n \"data-submenu-id\": submenuId,\r\n // Use only data attributes, not custom props\r\n \"data-parent-submenu\": submenuId,\r\n } as React.HTMLAttributes<HTMLElement>,\r\n );\r\n }\r\n\r\n return child;\r\n });\r\n\r\n return (\r\n <div\r\n data-slot=\"drop-drawer-sub\"\r\n data-submenu-id={submenuId}\r\n id={submenuId}\r\n >\r\n {processedChildren}\r\n </div>\r\n );\r\n }\r\n\r\n // For desktop, pass the generated ID to the DropdownMenuSub\r\n return (\r\n <DropdownMenuSub\r\n data-slot=\"drop-drawer-sub\"\r\n data-submenu-id={submenuId}\r\n // Don't pass id to DropdownMenuSub as it doesn't accept this prop\r\n {...props}\r\n >\r\n {children}\r\n </DropdownMenuSub>\r\n );\r\n}\r\n\r\nfunction DropDrawerSubTrigger({\r\n className,\r\n inset,\r\n children,\r\n ...props\r\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\r\n icon?: React.ReactNode;\r\n}) {\r\n const { isMobile } = useDropDrawerContext();\r\n const { navigateToSubmenu } = React.useContext(SubmenuContext);\r\n\r\n // Define hooks outside of conditionals to follow React rules\r\n // Check if this item is inside a group by looking at parent elements\r\n const isInGroup = React.useCallback(\r\n (element: HTMLElement | null): boolean => {\r\n if (!element) return false;\r\n\r\n // Check if any parent has a data-drop-drawer-group attribute\r\n let parent = element.parentElement;\r\n while (parent) {\r\n if (parent.hasAttribute(\"data-drop-drawer-group\")) {\r\n return true;\r\n }\r\n parent = parent.parentElement;\r\n }\r\n return false;\r\n },\r\n [],\r\n );\r\n\r\n // Create a ref to check if the item is in a group\r\n const itemRef = React.useRef<HTMLDivElement>(null);\r\n const [isInsideGroup, setIsInsideGroup] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n // Only run this effect in mobile mode\r\n if (!isMobile) return;\r\n\r\n // Use a short timeout to ensure the DOM is fully rendered\r\n const timer = setTimeout(() => {\r\n if (itemRef.current) {\r\n setIsInsideGroup(isInGroup(itemRef.current));\r\n }\r\n }, 0);\r\n\r\n return () => clearTimeout(timer);\r\n }, [isInGroup, isMobile]);\r\n\r\n if (isMobile) {\r\n // Find the parent submenu ID\r\n const handleClick = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n // Get the closest parent with data-submenu-id attribute\r\n const element = e.currentTarget as HTMLElement;\r\n let submenuId: string | null = null;\r\n\r\n // First check if the element itself has the data attribute\r\n if (element.closest(\"[data-submenu-id]\")) {\r\n const closestElement = element.closest(\"[data-submenu-id]\");\r\n const id = closestElement?.getAttribute(\"data-submenu-id\");\r\n if (id) {\r\n submenuId = id;\r\n }\r\n }\r\n\r\n // If not found, try props\r\n if (!submenuId) {\r\n submenuId =\r\n ((props as Record<string, unknown>)[\r\n \"data-parent-submenu-id\"\r\n ] as string) ||\r\n ((props as Record<string, unknown>)[\"data-parent-submenu\"] as string);\r\n }\r\n\r\n if (!submenuId) {\r\n return;\r\n }\r\n\r\n // Get the title\r\n const title = typeof children === \"string\" ? children : \"Submenu\";\r\n\r\n // Navigate to the submenu\r\n if (navigateToSubmenu) {\r\n navigateToSubmenu(submenuId, title);\r\n }\r\n };\r\n\r\n // Combine onClick handlers\r\n const combinedOnClick = (e: React.MouseEvent) => {\r\n // Call the original onClick if provided\r\n const typedProps = props as Record<string, unknown>;\r\n if (typedProps[\"onClick\"]) {\r\n const originalOnClick = typedProps[\r\n \"onClick\"\r\n ] as React.MouseEventHandler<HTMLDivElement>;\r\n originalOnClick(e as React.MouseEvent<HTMLDivElement>);\r\n }\r\n\r\n // Call our navigation handler\r\n handleClick(e);\r\n };\r\n\r\n // Remove onClick from props to avoid duplicate handlers\r\n const { ...restProps } = props as Record<string, unknown>;\r\n\r\n // Don't wrap in DrawerClose for submenu triggers\r\n return (\r\n <div\r\n ref={itemRef}\r\n data-slot=\"drop-drawer-sub-trigger\"\r\n data-inset={inset}\r\n className={cn(\r\n \"flex cursor-pointer items-center justify-between px-4 py-4\",\r\n // Only apply margin, background and rounded corners if not in a group\r\n !isInsideGroup &&\r\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800\",\r\n // For items in a group, don't add background but add more padding\r\n isInsideGroup && \"bg-transparent py-4\",\r\n inset && \"pl-8\",\r\n className,\r\n )}\r\n onClick={combinedOnClick}\r\n {...restProps}\r\n >\r\n <div className=\"flex items-center gap-2\">{children}</div>\r\n <ChevronRightIcon className=\"h-5 w-5\" />\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <DropdownMenuSubTrigger\r\n data-slot=\"drop-drawer-sub-trigger\"\r\n data-inset={inset}\r\n className={className}\r\n inset={inset}\r\n {...props}\r\n >\r\n {children}\r\n </DropdownMenuSubTrigger>\r\n );\r\n}\r\n\r\nfunction DropDrawerSubContent({\r\n className,\r\n sideOffset = 4,\r\n children,\r\n ...props\r\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\r\n const { isMobile } = useDropDrawerContext();\r\n\r\n if (isMobile) {\r\n // For mobile, we don't render the content directly\r\n // It will be rendered by the DropDrawerContent component when active\r\n return null;\r\n }\r\n\r\n return (\r\n <DropdownMenuSubContent\r\n data-slot=\"drop-drawer-sub-content\"\r\n sideOffset={sideOffset}\r\n className={cn(\r\n \"z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:border-neutral-800\",\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </DropdownMenuSubContent>\r\n );\r\n}\r\n\r\nexport {\r\n DropDrawer,\r\n DropDrawerContent,\r\n DropDrawerFooter,\r\n DropDrawerGroup,\r\n DropDrawerItem,\r\n DropDrawerLabel,\r\n DropDrawerSeparator,\r\n DropDrawerSub,\r\n DropDrawerSubContent,\r\n DropDrawerSubTrigger,\r\n DropDrawerTrigger,\r\n};\r\n"],"names":["DropDrawerContext","React","useDropDrawerContext","context","Error","DropDrawer","children","props","isMobile","useIsMobile","DropdownComponent","Drawer","DropdownMenu","DropDrawerTrigger","className","TriggerComponent","DrawerTrigger","DropdownMenuTrigger","DropDrawerContent","activeSubmenu","setActiveSubmenu","submenuTitle","setSubmenuTitle","submenuStack","setSubmenuStack","animationDirection","setAnimationDirection","submenuContentRef","Map","navigateToSubmenu","id","title","prev","goBack","newStack","previous","registerSubmenuContent","content","extractSubmenuContent","elements","targetId","result","findSubmenuContent","node","element","DropDrawerSub","elementId","dataSubmenuId","child","DropDrawerSubContent","subContentProps","contentChild","Array","getSubmenuContent","cachedContent","submenuContent","variants","direction","transition","SubmenuContext","DrawerContent","cn","DrawerHeader","ChevronLeftIcon","DrawerTitle","AnimatePresence","motion","DropdownMenuContent","DropDrawerItem","onSelect","onClick","icon","variant","inset","disabled","isInGroup","parent","itemRef","isInsideGroup","setIsInsideGroup","timer","setTimeout","clearTimeout","handleClick","e","isInSubmenu","DrawerClose","DropdownMenuItem","DropDrawerSeparator","DropdownMenuSeparator","DropDrawerLabel","DropdownMenuLabel","DropDrawerFooter","DrawerFooter","DropDrawerGroup","childrenWithSeparators","childArray","filteredChildren","index","undefined","submenuIdCounter","generatedId","submenuId","contentItems","processedChildren","DropDrawerSubTrigger","DropdownMenuSub","closestElement","combinedOnClick","typedProps","originalOnClick","restProps","ChevronRightIcon","DropdownMenuSubTrigger","sideOffset","DropdownMenuSubContent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components\\ui\\dropdrawer.js","sources":["webpack://@arolariu/components/./src/components/ui/dropdrawer.tsx"],"sourcesContent":["\n\nimport { AnimatePresence, motion, Transition } from \"motion/react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/components/ui/drawer\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { cn } from \"@/lib/utils\";\n\nconst DropDrawerContext = React.createContext<{ isMobile: boolean }>({\n isMobile: false,\n});\n\nconst useDropDrawerContext = () => {\n const context = React.useContext(DropDrawerContext);\n if (!context) {\n throw new Error(\n \"DropDrawer components cannot be rendered outside the Context\",\n );\n }\n return context;\n};\n\nfunction DropDrawer({\n children,\n ...props\n}:\n | React.ComponentProps<typeof Drawer>\n | React.ComponentProps<typeof DropdownMenu>) {\n const isMobile = useIsMobile();\n const DropdownComponent = isMobile ? Drawer : DropdownMenu;\n\n return (\n <DropDrawerContext.Provider value={{ isMobile }}>\n <DropdownComponent\n data-slot=\"drop-drawer\"\n {...(isMobile && { autoFocus: true })}\n {...props}\n >\n {children}\n </DropdownComponent>\n </DropDrawerContext.Provider>\n );\n}\n\nfunction DropDrawerTrigger({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DrawerTrigger>\n | React.ComponentProps<typeof DropdownMenuTrigger>) {\n const { isMobile } = useDropDrawerContext();\n const TriggerComponent = isMobile ? DrawerTrigger : DropdownMenuTrigger;\n\n return (\n <TriggerComponent\n data-slot=\"drop-drawer-trigger\"\n className={className}\n {...props}\n >\n {children}\n </TriggerComponent>\n );\n}\n\nfunction DropDrawerContent({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DrawerContent>\n | React.ComponentProps<typeof DropdownMenuContent>) {\n const { isMobile } = useDropDrawerContext();\n const [activeSubmenu, setActiveSubmenu] = React.useState<string | null>(null);\n const [submenuTitle, setSubmenuTitle] = React.useState<string | null>(null);\n const [submenuStack, setSubmenuStack] = React.useState<\n { id: string; title: string }[]\n >([]);\n // Add animation direction state\n const [animationDirection, setAnimationDirection] = React.useState<\n \"forward\" | \"backward\"\n >(\"forward\");\n\n // Create a ref to store submenu content by ID\n const submenuContentRef = React.useRef<Map<string, React.ReactNode[]>>(\n new Map(),\n );\n\n // Function to navigate to a submenu\n const navigateToSubmenu = React.useCallback((id: string, title: string) => {\n // Set animation direction to forward when navigating to a submenu\n setAnimationDirection(\"forward\");\n setActiveSubmenu(id);\n setSubmenuTitle(title);\n setSubmenuStack((prev) => [...prev, { id, title }]);\n }, []);\n\n // Function to go back to previous menu\n const goBack = React.useCallback(() => {\n // Set animation direction to backward when going back\n setAnimationDirection(\"backward\");\n\n if (submenuStack.length <= 1) {\n // If we're at the first level, go back to main menu\n setActiveSubmenu(null);\n setSubmenuTitle(null);\n setSubmenuStack([]);\n } else {\n // Go back to previous submenu\n const newStack = [...submenuStack];\n newStack.pop(); // Remove current\n const previous = newStack[newStack.length - 1];\n setActiveSubmenu(previous.id);\n setSubmenuTitle(previous.title);\n setSubmenuStack(newStack);\n }\n }, [submenuStack]);\n\n // Function to register submenu content\n const registerSubmenuContent = React.useCallback(\n (id: string, content: React.ReactNode[]) => {\n submenuContentRef.current.set(id, content);\n },\n [],\n );\n\n // Function to extract submenu content\n const extractSubmenuContent = React.useCallback(\n (elements: React.ReactNode, targetId: string): React.ReactNode[] => {\n const result: React.ReactNode[] = [];\n\n // Recursive function to search through all children\n const findSubmenuContent = (node: React.ReactNode) => {\n // Skip if not a valid element\n if (!React.isValidElement(node)) return;\n\n const element = node as React.ReactElement;\n // Use a more specific type to avoid 'any'\n const props = element.props as {\n id?: string;\n \"data-submenu-id\"?: string;\n children?: React.ReactNode;\n };\n\n // Check if this is a DropDrawerSub\n if (element.type === DropDrawerSub) {\n // Get all possible ID values\n const elementId = props.id;\n const dataSubmenuId = props[\"data-submenu-id\"];\n\n // If this is the submenu we're looking for\n if (elementId === targetId || dataSubmenuId === targetId) {\n // Find the SubContent within this Sub\n if (props.children) {\n React.Children.forEach(props.children, (child) => {\n if (\n React.isValidElement(child) &&\n child.type === DropDrawerSubContent\n ) {\n // Add all children of the SubContent to the result\n const subContentProps = child.props as {\n children?: React.ReactNode;\n };\n if (subContentProps.children) {\n React.Children.forEach(\n subContentProps.children,\n (contentChild) => {\n result.push(contentChild);\n },\n );\n }\n }\n });\n }\n return; // Found what we needed, no need to search deeper\n }\n }\n\n // If this element has children, search through them\n if (props.children) {\n if (Array.isArray(props.children)) {\n props.children.forEach((child: React.ReactNode) =>\n findSubmenuContent(child),\n );\n } else {\n findSubmenuContent(props.children);\n }\n }\n };\n\n // Start the search from the root elements\n if (Array.isArray(elements)) {\n elements.forEach((child) => findSubmenuContent(child));\n } else {\n findSubmenuContent(elements);\n }\n\n return result;\n },\n [],\n );\n\n // Get submenu content (either from cache or extract it)\n const getSubmenuContent = React.useCallback(\n (id: string) => {\n // Check if we have the content in our ref\n const cachedContent = submenuContentRef.current.get(id || \"\");\n if (cachedContent && cachedContent.length > 0) {\n return cachedContent;\n }\n\n // If not in cache, extract it\n const submenuContent = extractSubmenuContent(children, id);\n\n if (submenuContent.length === 0) {\n return [];\n }\n\n // Store in cache for future use\n if (id) {\n submenuContentRef.current.set(id, submenuContent);\n }\n\n return submenuContent;\n },\n [children, extractSubmenuContent],\n );\n\n // Animation variants for Framer Motion\n const variants = {\n enter: (direction: \"forward\" | \"backward\") => ({\n x: direction === \"forward\" ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n center: {\n x: 0,\n opacity: 1,\n },\n exit: (direction: \"forward\" | \"backward\") => ({\n x: direction === \"forward\" ? \"-100%\" : \"100%\",\n opacity: 0,\n }),\n };\n\n // Animation transition\n const transition = {\n duration: 0.3,\n ease: [0.25, 0.1, 0.25, 1.0], // cubic-bezier easing\n } satisfies Transition;\n\n if (isMobile) {\n return (\n <SubmenuContext.Provider\n value={{\n activeSubmenu,\n setActiveSubmenu: (id) => {\n if (id === null) {\n setActiveSubmenu(null);\n setSubmenuTitle(null);\n setSubmenuStack([]);\n }\n },\n submenuTitle,\n setSubmenuTitle,\n navigateToSubmenu,\n registerSubmenuContent,\n }}\n >\n <DrawerContent\n data-slot=\"drop-drawer-content\"\n className={cn(\"max-h-[90vh]\", className)}\n {...props}\n >\n {activeSubmenu ? (\n <>\n <DrawerHeader>\n <div className=\"flex items-center gap-2\">\n <button\n onClick={goBack}\n className=\"hover:bg-neutral-100/50 rounded-full p-1 dark:hover:bg-neutral-800/50\"\n >\n <ChevronLeftIcon className=\"h-5 w-5\" />\n </button>\n <DrawerTitle>{submenuTitle || \"Submenu\"}</DrawerTitle>\n </div>\n </DrawerHeader>\n <div className=\"flex-1 relative overflow-y-auto max-h-[70vh]\">\n {/* Use AnimatePresence to handle exit animations */}\n <AnimatePresence\n initial={false}\n mode=\"wait\"\n custom={animationDirection}\n >\n <motion.div\n key={activeSubmenu || \"main\"}\n custom={animationDirection}\n variants={variants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transition}\n className=\"pb-6 space-y-1.5 w-full h-full\"\n >\n {activeSubmenu\n ? getSubmenuContent(activeSubmenu)\n : children}\n </motion.div>\n </AnimatePresence>\n </div>\n </>\n ) : (\n <>\n <DrawerHeader className=\"sr-only\">\n <DrawerTitle>Menu</DrawerTitle>\n </DrawerHeader>\n <div className=\"overflow-y-auto max-h-[70vh]\">\n <AnimatePresence\n initial={false}\n mode=\"wait\"\n custom={animationDirection}\n >\n <motion.div\n key=\"main-menu\"\n custom={animationDirection}\n variants={variants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transition}\n className=\"pb-6 space-y-1.5 w-full\"\n >\n {children}\n </motion.div>\n </AnimatePresence>\n </div>\n </>\n )}\n </DrawerContent>\n </SubmenuContext.Provider>\n );\n }\n\n return (\n <SubmenuContext.Provider\n value={{\n activeSubmenu,\n setActiveSubmenu,\n submenuTitle,\n setSubmenuTitle,\n registerSubmenuContent,\n }}\n >\n <DropdownMenuContent\n data-slot=\"drop-drawer-content\"\n align=\"end\"\n sideOffset={4}\n className={cn(\n \"max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[220px] overflow-y-auto\",\n className,\n )}\n {...props}\n >\n {children}\n </DropdownMenuContent>\n </SubmenuContext.Provider>\n );\n}\n\nfunction DropDrawerItem({\n className,\n children,\n onSelect,\n onClick,\n icon,\n variant = \"default\",\n inset,\n disabled,\n ...props\n}: React.ComponentProps<typeof DropdownMenuItem> & {\n icon?: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n\n // Define hooks outside of conditionals to follow React rules\n // Check if this item is inside a group by looking at parent elements\n const isInGroup = React.useCallback(\n (element: HTMLElement | null): boolean => {\n if (!element) return false;\n\n // Check if any parent has a data-drop-drawer-group attribute\n let parent = element.parentElement;\n while (parent) {\n if (parent.hasAttribute(\"data-drop-drawer-group\")) {\n return true;\n }\n parent = parent.parentElement;\n }\n return false;\n },\n [],\n );\n\n // Create a ref to check if the item is in a group\n const itemRef = React.useRef<HTMLDivElement>(null);\n const [isInsideGroup, setIsInsideGroup] = React.useState(false);\n\n React.useEffect(() => {\n // Only run this effect in mobile mode\n if (!isMobile) return;\n\n // Use a short timeout to ensure the DOM is fully rendered\n const timer = setTimeout(() => {\n if (itemRef.current) {\n setIsInsideGroup(isInGroup(itemRef.current));\n }\n }, 0);\n\n return () => clearTimeout(timer);\n }, [isInGroup, isMobile]);\n\n if (isMobile) {\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n if (onClick) onClick(e);\n if (onSelect) onSelect(e as unknown as Event);\n };\n\n // Only wrap in DrawerClose if it's not a submenu item\n const content = (\n <div\n ref={itemRef}\n data-slot=\"drop-drawer-item\"\n data-variant={variant}\n data-inset={inset}\n data-disabled={disabled}\n className={cn(\n \"flex cursor-pointer items-center justify-between px-4 py-4\",\n // Only apply margin, background and rounded corners if not in a group\n !isInsideGroup &&\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n // For items in a group, don't add background but add more padding\n isInsideGroup && \"bg-transparent py-4\",\n inset && \"pl-8\",\n variant === \"destructive\" &&\n \"text-red-500 dark:text-red-500 dark:text-red-900 dark:dark:text-red-900\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n onClick={handleClick}\n aria-disabled={disabled}\n {...props}\n >\n <div className=\"flex items-center gap-2\">{children}</div>\n {icon && <div className=\"flex-shrink-0\">{icon}</div>}\n </div>\n );\n\n // Check if this is inside a submenu\n const isInSubmenu =\n (props as Record<string, unknown>)[\"data-parent-submenu-id\"] ||\n (props as Record<string, unknown>)[\"data-parent-submenu\"];\n\n if (isInSubmenu) {\n return content;\n }\n\n return <DrawerClose asChild>{content}</DrawerClose>;\n }\n\n return (\n <DropdownMenuItem\n data-slot=\"drop-drawer-item\"\n data-variant={variant}\n data-inset={inset}\n className={className}\n onSelect={onSelect}\n onClick={onClick as React.MouseEventHandler<HTMLDivElement>}\n variant={variant}\n inset={inset}\n disabled={disabled}\n {...props}\n >\n <div className=\"flex w-full items-center justify-between\">\n <div>{children}</div>\n {icon && <div>{icon}</div>}\n </div>\n </DropdownMenuItem>\n );\n}\n\nfunction DropDrawerSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n const { isMobile } = useDropDrawerContext();\n\n // For mobile, render a simple divider\n if (isMobile) {\n return null;\n }\n\n // For desktop, use the standard dropdown separator\n return (\n <DropdownMenuSeparator\n data-slot=\"drop-drawer-separator\"\n className={className}\n {...props}\n />\n );\n}\n\nfunction DropDrawerLabel({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DropdownMenuLabel>\n | React.ComponentProps<typeof DrawerTitle>) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n return (\n <DrawerHeader className=\"p-0\">\n <DrawerTitle\n data-slot=\"drop-drawer-label\"\n className={cn(\n \"text-neutral-500 px-4 py-2 text-sm font-medium dark:text-neutral-400\",\n className,\n )}\n {...props}\n >\n {children}\n </DrawerTitle>\n </DrawerHeader>\n );\n }\n\n return (\n <DropdownMenuLabel\n data-slot=\"drop-drawer-label\"\n className={className}\n {...props}\n >\n {children}\n </DropdownMenuLabel>\n );\n}\n\nfunction DropDrawerFooter({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DrawerFooter> | React.ComponentProps<\"div\">) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n return (\n <DrawerFooter\n data-slot=\"drop-drawer-footer\"\n className={cn(\"p-4\", className)}\n {...props}\n >\n {children}\n </DrawerFooter>\n );\n }\n\n // No direct equivalent in DropdownMenu, so we'll just render a div\n return (\n <div\n data-slot=\"drop-drawer-footer\"\n className={cn(\"p-2\", className)}\n {...props}\n >\n {children}\n </div>\n );\n}\n\nfunction DropDrawerGroup({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n children: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n\n // Add separators between children on mobile\n const childrenWithSeparators = React.useMemo(() => {\n if (!isMobile) return children;\n\n const childArray = React.Children.toArray(children);\n\n // Filter out any existing separators\n const filteredChildren = childArray.filter(\n (child) =>\n React.isValidElement(child) && child.type !== DropDrawerSeparator,\n );\n\n // Add separators between items\n return filteredChildren.flatMap((child, index) => {\n if (index === filteredChildren.length - 1) return [child];\n return [\n child,\n <div\n key={`separator-${index}`}\n className=\"bg-neutral-200 h-px dark:bg-neutral-800\"\n aria-hidden=\"true\"\n />,\n ];\n });\n }, [children, isMobile]);\n\n if (isMobile) {\n return (\n <div\n data-drop-drawer-group\n data-slot=\"drop-drawer-group\"\n role=\"group\"\n className={cn(\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-3 overflow-hidden rounded-xl dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n className,\n )}\n {...props}\n >\n {childrenWithSeparators}\n </div>\n );\n }\n\n // On desktop, use a div with proper role and attributes\n return (\n <div\n data-drop-drawer-group\n data-slot=\"drop-drawer-group\"\n role=\"group\"\n className={className}\n {...props}\n >\n {children}\n </div>\n );\n}\n\n// Context for managing submenu state on mobile\ninterface SubmenuContextType {\n activeSubmenu: string | null;\n setActiveSubmenu: (id: string | null) => void;\n submenuTitle: string | null;\n setSubmenuTitle: (title: string | null) => void;\n navigateToSubmenu?: (id: string, title: string) => void;\n registerSubmenuContent?: (id: string, content: React.ReactNode[]) => void;\n}\n\nconst SubmenuContext = React.createContext<SubmenuContextType>({\n activeSubmenu: null,\n setActiveSubmenu: () => {},\n submenuTitle: null,\n setSubmenuTitle: () => {},\n navigateToSubmenu: undefined,\n registerSubmenuContent: undefined,\n});\n\n// Submenu components\n// Counter for generating simple numeric IDs\nlet submenuIdCounter = 0;\n\nfunction DropDrawerSub({\n children,\n id,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSub> & {\n id?: string;\n}) {\n const { isMobile } = useDropDrawerContext();\n const { registerSubmenuContent } = React.useContext(SubmenuContext);\n\n // Generate a simple numeric ID instead of using React.useId()\n const [generatedId] = React.useState(() => `submenu-${submenuIdCounter++}`);\n const submenuId = id || generatedId;\n\n // Extract submenu content to register with parent\n React.useEffect(() => {\n if (!registerSubmenuContent) return;\n\n // Find the SubContent within this Sub\n const contentItems: React.ReactNode[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) && child.type === DropDrawerSubContent) {\n // Add all children of the SubContent to the result\n React.Children.forEach(\n (child.props as { children?: React.ReactNode }).children,\n (contentChild) => {\n contentItems.push(contentChild);\n },\n );\n }\n });\n\n // Register the content with the parent\n if (contentItems.length > 0) {\n registerSubmenuContent(submenuId, contentItems);\n }\n }, [children, registerSubmenuContent, submenuId]);\n\n if (isMobile) {\n // For mobile, we'll use the context to manage submenu state\n // Process children to pass the submenu ID to the trigger and content\n const processedChildren = React.Children.map(children, (child) => {\n if (!React.isValidElement(child)) return child;\n\n if (child.type === DropDrawerSubTrigger) {\n return React.cloneElement(\n child as React.ReactElement,\n {\n ...(child.props as object),\n \"data-parent-submenu-id\": submenuId,\n \"data-submenu-id\": submenuId,\n // Use only data attributes, not custom props\n \"data-parent-submenu\": submenuId,\n } as React.HTMLAttributes<HTMLElement>,\n );\n }\n\n if (child.type === DropDrawerSubContent) {\n return React.cloneElement(\n child as React.ReactElement,\n {\n ...(child.props as object),\n \"data-parent-submenu-id\": submenuId,\n \"data-submenu-id\": submenuId,\n // Use only data attributes, not custom props\n \"data-parent-submenu\": submenuId,\n } as React.HTMLAttributes<HTMLElement>,\n );\n }\n\n return child;\n });\n\n return (\n <div\n data-slot=\"drop-drawer-sub\"\n data-submenu-id={submenuId}\n id={submenuId}\n >\n {processedChildren}\n </div>\n );\n }\n\n // For desktop, pass the generated ID to the DropdownMenuSub\n return (\n <DropdownMenuSub\n data-slot=\"drop-drawer-sub\"\n data-submenu-id={submenuId}\n // Don't pass id to DropdownMenuSub as it doesn't accept this prop\n {...props}\n >\n {children}\n </DropdownMenuSub>\n );\n}\n\nfunction DropDrawerSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n icon?: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n const { navigateToSubmenu } = React.useContext(SubmenuContext);\n\n // Define hooks outside of conditionals to follow React rules\n // Check if this item is inside a group by looking at parent elements\n const isInGroup = React.useCallback(\n (element: HTMLElement | null): boolean => {\n if (!element) return false;\n\n // Check if any parent has a data-drop-drawer-group attribute\n let parent = element.parentElement;\n while (parent) {\n if (parent.hasAttribute(\"data-drop-drawer-group\")) {\n return true;\n }\n parent = parent.parentElement;\n }\n return false;\n },\n [],\n );\n\n // Create a ref to check if the item is in a group\n const itemRef = React.useRef<HTMLDivElement>(null);\n const [isInsideGroup, setIsInsideGroup] = React.useState(false);\n\n React.useEffect(() => {\n // Only run this effect in mobile mode\n if (!isMobile) return;\n\n // Use a short timeout to ensure the DOM is fully rendered\n const timer = setTimeout(() => {\n if (itemRef.current) {\n setIsInsideGroup(isInGroup(itemRef.current));\n }\n }, 0);\n\n return () => clearTimeout(timer);\n }, [isInGroup, isMobile]);\n\n if (isMobile) {\n // Find the parent submenu ID\n const handleClick = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Get the closest parent with data-submenu-id attribute\n const element = e.currentTarget as HTMLElement;\n let submenuId: string | null = null;\n\n // First check if the element itself has the data attribute\n if (element.closest(\"[data-submenu-id]\")) {\n const closestElement = element.closest(\"[data-submenu-id]\");\n const id = closestElement?.getAttribute(\"data-submenu-id\");\n if (id) {\n submenuId = id;\n }\n }\n\n // If not found, try props\n if (!submenuId) {\n submenuId =\n ((props as Record<string, unknown>)[\n \"data-parent-submenu-id\"\n ] as string) ||\n ((props as Record<string, unknown>)[\"data-parent-submenu\"] as string);\n }\n\n if (!submenuId) {\n return;\n }\n\n // Get the title\n const title = typeof children === \"string\" ? children : \"Submenu\";\n\n // Navigate to the submenu\n if (navigateToSubmenu) {\n navigateToSubmenu(submenuId, title);\n }\n };\n\n // Combine onClick handlers\n const combinedOnClick = (e: React.MouseEvent) => {\n // Call the original onClick if provided\n const typedProps = props as Record<string, unknown>;\n if (typedProps[\"onClick\"]) {\n const originalOnClick = typedProps[\n \"onClick\"\n ] as React.MouseEventHandler<HTMLDivElement>;\n originalOnClick(e as React.MouseEvent<HTMLDivElement>);\n }\n\n // Call our navigation handler\n handleClick(e);\n };\n\n // Remove onClick from props to avoid duplicate handlers\n const { ...restProps } = props as Record<string, unknown>;\n\n // Don't wrap in DrawerClose for submenu triggers\n return (\n <div\n ref={itemRef}\n data-slot=\"drop-drawer-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"flex cursor-pointer items-center justify-between px-4 py-4\",\n // Only apply margin, background and rounded corners if not in a group\n !isInsideGroup &&\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n // For items in a group, don't add background but add more padding\n isInsideGroup && \"bg-transparent py-4\",\n inset && \"pl-8\",\n className,\n )}\n onClick={combinedOnClick}\n {...restProps}\n >\n <div className=\"flex items-center gap-2\">{children}</div>\n <ChevronRightIcon className=\"h-5 w-5\" />\n </div>\n );\n }\n\n return (\n <DropdownMenuSubTrigger\n data-slot=\"drop-drawer-sub-trigger\"\n data-inset={inset}\n className={className}\n inset={inset}\n {...props}\n >\n {children}\n </DropdownMenuSubTrigger>\n );\n}\n\nfunction DropDrawerSubContent({\n className,\n sideOffset = 4,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n // For mobile, we don't render the content directly\n // It will be rendered by the DropDrawerContent component when active\n return null;\n }\n\n return (\n <DropdownMenuSubContent\n data-slot=\"drop-drawer-sub-content\"\n sideOffset={sideOffset}\n className={cn(\n \"z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:border-neutral-800\",\n className,\n )}\n {...props}\n >\n {children}\n </DropdownMenuSubContent>\n );\n}\n\nexport {\n DropDrawer,\n DropDrawerContent,\n DropDrawerFooter,\n DropDrawerGroup,\n DropDrawerItem,\n DropDrawerLabel,\n DropDrawerSeparator,\n DropDrawerSub,\n DropDrawerSubContent,\n DropDrawerSubTrigger,\n DropDrawerTrigger,\n};\n"],"names":["DropDrawerContext","React","useDropDrawerContext","context","Error","DropDrawer","children","props","isMobile","useIsMobile","DropdownComponent","Drawer","DropdownMenu","DropDrawerTrigger","className","TriggerComponent","DrawerTrigger","DropdownMenuTrigger","DropDrawerContent","activeSubmenu","setActiveSubmenu","submenuTitle","setSubmenuTitle","submenuStack","setSubmenuStack","animationDirection","setAnimationDirection","submenuContentRef","Map","navigateToSubmenu","id","title","prev","goBack","newStack","previous","registerSubmenuContent","content","extractSubmenuContent","elements","targetId","result","findSubmenuContent","node","element","DropDrawerSub","elementId","dataSubmenuId","child","DropDrawerSubContent","subContentProps","contentChild","Array","getSubmenuContent","cachedContent","submenuContent","variants","direction","transition","SubmenuContext","DrawerContent","cn","DrawerHeader","ChevronLeftIcon","DrawerTitle","AnimatePresence","motion","DropdownMenuContent","DropDrawerItem","onSelect","onClick","icon","variant","inset","disabled","isInGroup","parent","itemRef","isInsideGroup","setIsInsideGroup","timer","setTimeout","clearTimeout","handleClick","e","isInSubmenu","DrawerClose","DropdownMenuItem","DropDrawerSeparator","DropdownMenuSeparator","DropDrawerLabel","DropdownMenuLabel","DropDrawerFooter","DrawerFooter","DropDrawerGroup","childrenWithSeparators","childArray","filteredChildren","index","undefined","submenuIdCounter","generatedId","submenuId","contentItems","processedChildren","DropDrawerSubTrigger","DropdownMenuSub","closestElement","combinedOnClick","typedProps","originalOnClick","restProps","ChevronRightIcon","DropdownMenuSubTrigger","sideOffset","DropdownMenuSubContent"],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export declare const TypewriterText: ({ words, className, cursorClassName, }: {
|
|
3
|
+
words: {
|
|
4
|
+
text: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
}[];
|
|
7
|
+
className?: string;
|
|
8
|
+
cursorClassName?: string;
|
|
9
|
+
}) => React.JSX.Element;
|
|
10
|
+
export declare const TypewriterTextSmooth: ({ words, className, cursorClassName, }: {
|
|
11
|
+
words: {
|
|
12
|
+
text: string;
|
|
13
|
+
className?: string;
|
|
14
|
+
}[];
|
|
15
|
+
className?: string;
|
|
16
|
+
cursorClassName?: string;
|
|
17
|
+
}) => React.JSX.Element;
|
|
18
|
+
//# sourceMappingURL=typewriter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["../../../src/components/ui/typewriter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,cAAc,GAAI,wCAI5B;IACD,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,KAAG,KAAK,CAAC,GAAG,CAAC,OAiFb,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,wCAIlC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,KAAG,KAAK,CAAC,GAAG,CAAC,OA2Eb,CAAC"}
|