@ckc-net/puck-extended 0.2.2 → 0.3.0
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/LICENSE +1 -1
- package/README.md +182 -0
- package/dist/index.d.ts +241 -199
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +880 -518
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import React, { Children, cloneElement,
|
|
1
|
+
import React, { Children, cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
3
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
2
5
|
import { clsx } from "clsx";
|
|
3
6
|
import { twMerge } from "tailwind-merge";
|
|
4
|
-
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, BaselineIcon, BoldIcon, BoxIcon, CaseLowerIcon, CaseSensitiveIcon, CaseUpperIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleAlertIcon, CircleCheckIcon, DatabaseIcon, FileIcon, FileTextIcon, GripVerticalIcon, InfoIcon, ItalicIcon, LightbulbIcon, LinkIcon, Loader2Icon, LoaderCircleIcon, LockIcon, MinusIcon, MoreHorizontalIcon, SearchIcon, StrikethroughIcon, TriangleAlertIcon, UnderlineIcon, UploadIcon, XIcon } from "lucide-react";
|
|
7
|
+
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, BaselineIcon, BoldIcon, BoxIcon, CaseLowerIcon, CaseSensitiveIcon, CaseUpperIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleAlertIcon, CircleCheckIcon, DatabaseIcon, FileIcon, FileTextIcon, GripVerticalIcon, InfoIcon, ItalicIcon, LightbulbIcon, LinkIcon, Loader2Icon, LoaderCircleIcon, LockIcon, MinusIcon, MoreHorizontalIcon, PlusIcon, SearchIcon, StrikethroughIcon, Trash2Icon, TriangleAlertIcon, UnderlineIcon, UploadIcon, XIcon } from "lucide-react";
|
|
5
8
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
|
|
6
10
|
import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
|
|
7
11
|
import { Input as Input$1 } from "@base-ui/react/input";
|
|
8
|
-
import { mergeProps } from "@base-ui/react/merge-props";
|
|
9
12
|
import { Select as Select$1 } from "@base-ui/react/select";
|
|
10
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
11
|
-
import { cva } from "class-variance-authority";
|
|
12
13
|
import { Radio } from "@base-ui/react/radio";
|
|
13
14
|
import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
|
|
14
15
|
import { Field } from "@base-ui/react/field";
|
|
15
|
-
import { createUsePuck } from "@puckeditor/core";
|
|
16
|
+
import { AutoField, createUsePuck, walkTree } from "@puckeditor/core";
|
|
16
17
|
import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
|
|
17
|
-
import { Accordion as
|
|
18
|
-
import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
|
|
18
|
+
import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
|
|
19
19
|
import { Popover as Popover$1 } from "@base-ui/react/popover";
|
|
20
20
|
import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
|
|
21
21
|
import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
|
|
@@ -33,6 +33,55 @@ function cn(...inputs) {
|
|
|
33
33
|
return twMerge(clsx(inputs));
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
//#endregion
|
|
37
|
+
//#region src/components/ui/button.tsx
|
|
38
|
+
const buttonVariants = cva("[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
39
|
+
defaultVariants: {
|
|
40
|
+
size: "default",
|
|
41
|
+
variant: "default"
|
|
42
|
+
},
|
|
43
|
+
variants: {
|
|
44
|
+
size: {
|
|
45
|
+
default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
|
|
46
|
+
icon: "size-9 sm:size-8",
|
|
47
|
+
"icon-lg": "size-10 sm:size-9",
|
|
48
|
+
"icon-sm": "size-8 sm:size-7",
|
|
49
|
+
"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
|
|
50
|
+
"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
|
|
51
|
+
lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
|
|
52
|
+
sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
|
|
53
|
+
xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
|
|
54
|
+
xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
|
|
55
|
+
},
|
|
56
|
+
variant: {
|
|
57
|
+
default: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
|
|
58
|
+
destructive: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-destructive/90",
|
|
59
|
+
"destructive-outline": "border-input bg-transparent not-dark:bg-clip-padding text-destructive-foreground not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
|
|
60
|
+
ghost: "border-transparent data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
|
|
61
|
+
link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
|
|
62
|
+
outline: "border-input bg-background not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
|
|
63
|
+
primary: "border-transparent from-primary-600 to-primary-500 hover:from-primary-500 hover:to-primary-600 bg-linear-to-t text-white inset-shadow-[0_2px_0_0] inset-shadow-white/25 hover:text-white",
|
|
64
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90"
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
function Button({ className, variant, size, render, ...props }) {
|
|
69
|
+
const typeValue = render ? void 0 : "button";
|
|
70
|
+
return useRender({
|
|
71
|
+
defaultTagName: "button",
|
|
72
|
+
props: mergeProps({
|
|
73
|
+
className: cn(buttonVariants({
|
|
74
|
+
className,
|
|
75
|
+
size,
|
|
76
|
+
variant
|
|
77
|
+
})),
|
|
78
|
+
"data-slot": "button",
|
|
79
|
+
type: typeValue
|
|
80
|
+
}, props),
|
|
81
|
+
render
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
|
|
36
85
|
//#endregion
|
|
37
86
|
//#region src/components/ui/label.tsx
|
|
38
87
|
function Label$2({ className, readOnly, children, ...props }) {
|
|
@@ -45,11 +94,194 @@ function Label$2({ className, readOnly, children, ...props }) {
|
|
|
45
94
|
});
|
|
46
95
|
}
|
|
47
96
|
|
|
97
|
+
//#endregion
|
|
98
|
+
//#region src/components/ui/tooltip.tsx
|
|
99
|
+
const cssAnimationPresets = {
|
|
100
|
+
none: "transition-none",
|
|
101
|
+
scale: [`[transition-property:scale,opacity]`, `data-starting-style:scale-80 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:scale-80`],
|
|
102
|
+
fade: [`[transition-property:opacity,scale]`, `data-starting-style:scale-98 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:scale-98`],
|
|
103
|
+
slideOutside: [
|
|
104
|
+
`[transition-property:translate,opacity]`,
|
|
105
|
+
`data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:translate-y-[10px] data-[side=bottom]:data-ending-style:translate-y-[10px] data-[side=bottom]:data-ending-style:opacity-0`,
|
|
106
|
+
`data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:translate-y-[-10px] data-[side=top]:data-ending-style:translate-y-[-10px] data-[side=top]:data-ending-style:opacity-0`,
|
|
107
|
+
`data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:translate-x-[-10px] data-[side=left]:data-ending-style:translate-x-[-10px] data-[side=left]:data-ending-style:opacity-0`,
|
|
108
|
+
`data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:translate-x-[10px] data-[side=right]:data-ending-style:translate-x-[10px] data-[side=right]:data-ending-style:opacity-0`,
|
|
109
|
+
`data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:opacity-0`,
|
|
110
|
+
`data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:opacity-0`
|
|
111
|
+
],
|
|
112
|
+
slideInside: [
|
|
113
|
+
`[transition-property:translate,opacity]`,
|
|
114
|
+
`data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:translate-y-[-10px] data-[side=bottom]:data-ending-style:translate-y-[-10px] data-[side=bottom]:data-ending-style:opacity-0`,
|
|
115
|
+
`data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:translate-y-[10px] data-[side=top]:data-ending-style:translate-y-[10px] data-[side=top]:data-ending-style:opacity-0`,
|
|
116
|
+
`data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:translate-x-[10px] data-[side=left]:data-ending-style:translate-x-[10px] data-[side=left]:data-ending-style:opacity-0`,
|
|
117
|
+
`data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:translate-x-[-10px] data-[side=right]:data-ending-style:translate-x-[-10px] data-[side=right]:data-ending-style:opacity-0`,
|
|
118
|
+
`data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:translate-x-[10px] data-[side=inline-start]:data-ending-style:translate-x-[10px] data-[side=inline-start]:data-ending-style:opacity-0`,
|
|
119
|
+
`data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:translate-x-[-10px] data-[side=inline-end]:data-ending-style:translate-x-[-10px] data-[side=inline-end]:data-ending-style:opacity-0`
|
|
120
|
+
],
|
|
121
|
+
wipe: [
|
|
122
|
+
`[transition-property:clip-path] [will-change:clip-path]`,
|
|
123
|
+
`[clip-path:inset(0_0_0_0_round_var(--radius))] [-webkit-clip-path:inset(0_0_0_0_round_var(--radius))]`,
|
|
124
|
+
`data-[side=bottom]:data-starting-style:[clip-path:inset(0_0_100%_0_round_var(--radius))] data-[side=bottom]:data-ending-style:[clip-path:inset(0_0_100%_0_round_var(--radius))]`,
|
|
125
|
+
`data-[side=top]:data-starting-style:[clip-path:inset(100%_0_0_0_round_var(--radius))] data-[side=top]:data-ending-style:[clip-path:inset(100%_0_0_0_round_var(--radius))]`,
|
|
126
|
+
`data-[side=left]:data-starting-style:[clip-path:inset(0_0_0_100%_round_var(--radius))] data-[side=left]:data-ending-style:[clip-path:inset(0_0_0_100%_round_var(--radius))]`,
|
|
127
|
+
`data-[side=right]:data-starting-style:[clip-path:inset(0_100%_0_0_round_var(--radius))] data-[side=right]:data-ending-style:[clip-path:inset(0_100%_0_0_round_var(--radius))]`,
|
|
128
|
+
`data-[side=inline-start]:data-starting-style:[clip-path:inset(0_0_0_100%_round_var(--radius))] data-[side=inline-start]:data-ending-style:[clip-path:inset(0_0_0_100%_round_var(--radius))]`,
|
|
129
|
+
`data-[side=inline-end]:data-starting-style:[clip-path:inset(0_100%_0_0_round_var(--radius))] data-[side=inline-end]:data-ending-style:[clip-path:inset(0_100%_0_0_round_var(--radius))]`
|
|
130
|
+
],
|
|
131
|
+
wipeScale: [
|
|
132
|
+
`[transition-property:clip-path,scale] [will-change:clip-path,scale]`,
|
|
133
|
+
`[clip-path:inset(0_0_0_0_round_var(--radius))] [-webkit-clip-path:inset(0_0_0_0_round_var(--radius))]`,
|
|
134
|
+
`data-starting-style:scale-80 data-ending-style:scale-80`,
|
|
135
|
+
`data-[side=bottom]:data-starting-style:[clip-path:inset(0_0_100%_0_round_var(--radius))] data-[side=bottom]:data-ending-style:[clip-path:inset(0_0_100%_0_round_var(--radius))]`,
|
|
136
|
+
`data-[side=top]:data-starting-style:[clip-path:inset(100%_0_0_0_round_var(--radius))] data-[side=top]:data-ending-style:[clip-path:inset(100%_0_0_0_round_var(--radius))]`,
|
|
137
|
+
`data-[side=left]:data-starting-style:[clip-path:inset(0_0_0_100%_round_var(--radius))] data-[side=left]:data-ending-style:[clip-path:inset(0_0_0_100%_round_var(--radius))]`,
|
|
138
|
+
`data-[side=right]:data-starting-style:[clip-path:inset(0_100%_0_0_round_var(--radius))] data-[side=right]:data-ending-style:[clip-path:inset(0_100%_0_0_round_var(--radius))]`,
|
|
139
|
+
`data-[side=inline-start]:data-starting-style:[clip-path:inset(0_0_0_100%_round_var(--radius))] data-[side=inline-start]:data-ending-style:[clip-path:inset(0_0_0_100%_round_var(--radius))]`,
|
|
140
|
+
`data-[side=inline-end]:data-starting-style:[clip-path:inset(0_100%_0_0_round_var(--radius))] data-[side=inline-end]:data-ending-style:[clip-path:inset(0_100%_0_0_round_var(--radius))]`
|
|
141
|
+
],
|
|
142
|
+
motion: [
|
|
143
|
+
`[transition-property:translate,scale,opacity,rotateX,rotateY,transform] [will-change:translate,scale,opacity,rotateX,rotateY,transform]`,
|
|
144
|
+
`[transform:perspective(1000px)]`,
|
|
145
|
+
`data-[side=bottom]:data-starting-style:translate-y-[7px] data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:scale-[0.26] data-[side=bottom]:data-starting-style:rotate-x-[70deg] data-[side=bottom]:data-ending-style:translate-y-[7px] data-[side=bottom]:data-ending-style:opacity-0 data-[side=bottom]:data-ending-style:scale-[0.26] data-[side=bottom]:data-ending-style:rotate-x-[70deg]`,
|
|
146
|
+
`data-[side=top]:data-starting-style:translate-y-[7px] data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:scale-[0.26] data-[side=top]:data-starting-style:rotate-x-[70deg] data-[side=top]:data-ending-style:translate-y-[7px] data-[side=top]:data-ending-style:opacity-0 data-[side=top]:data-ending-style:scale-[0.26] data-[side=top]:data-ending-style:rotate-x-[70deg]`,
|
|
147
|
+
`data-[side=left]:data-starting-style:translate-x-[-7px] data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:scale-[0.26] data-[side=left]:data-starting-style:rotate-y-[-40deg] data-[side=left]:data-ending-style:translate-x-[-7px] data-[side=left]:data-ending-style:opacity-0 data-[side=left]:data-ending-style:scale-[0.26] data-[side=left]:data-ending-style:rotate-y-[-40deg]`,
|
|
148
|
+
`data-[side=right]:data-starting-style:translate-x-[7px] data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:scale-[0.26] data-[side=right]:data-starting-style:rotate-y-[40deg] data-[side=right]:data-ending-style:translate-x-[7px] data-[side=right]:data-ending-style:opacity-0 data-[side=right]:data-ending-style:scale-[0.26] data-[side=right]:data-ending-style:rotate-y-[40deg]`,
|
|
149
|
+
`data-[side=inline-start]:data-starting-style:translate-x-[-7px] data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:scale-[0.26] data-[side=inline-start]:data-starting-style:rotate-y-[-40deg] data-[side=inline-start]:data-ending-style:translate-x-[-7px] data-[side=inline-start]:data-ending-style:opacity-0 data-[side=inline-start]:data-ending-style:scale-[0.26] data-[side=inline-start]:data-ending-style:rotate-y-[-40deg]`,
|
|
150
|
+
`data-[side=inline-end]:data-starting-style:translate-x-[7px] data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:scale-[0.26] data-[side=inline-end]:data-starting-style:rotate-y-[40deg] data-[side=inline-end]:data-ending-style:translate-x-[7px] data-[side=inline-end]:data-ending-style:opacity-0 data-[side=inline-end]:data-ending-style:scale-[0.26] data-[side=inline-end]:data-ending-style:rotate-y-[40deg]`
|
|
151
|
+
],
|
|
152
|
+
motionBlur: [
|
|
153
|
+
`[transition-property:translate,scale,opacity,rotateX,rotateY,transform,filter] [will-change:translate,scale,opacity,rotateX,rotateY,transform,filter]`,
|
|
154
|
+
`[transform:perspective(1000px)]`,
|
|
155
|
+
`data-starting-style:blur-[9px] data-ending-style:blur-[9px]`,
|
|
156
|
+
`data-[side=bottom]:data-starting-style:translate-y-[7px] data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:scale-[0.26] data-[side=bottom]:data-starting-style:rotate-x-[70deg] data-[side=bottom]:data-ending-style:translate-y-[7px] data-[side=bottom]:data-ending-style:opacity-0 data-[side=bottom]:data-ending-style:scale-[0.26] data-[side=bottom]:data-ending-style:rotate-x-[70deg]`,
|
|
157
|
+
`data-[side=top]:data-starting-style:translate-y-[7px] data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:scale-[0.26] data-[side=top]:data-starting-style:rotate-x-[70deg] data-[side=top]:data-ending-style:translate-y-[7px] data-[side=top]:data-ending-style:opacity-0 data-[side=top]:data-ending-style:scale-[0.26] data-[side=top]:data-ending-style:rotate-x-[70deg]`,
|
|
158
|
+
`data-[side=left]:data-starting-style:translate-x-[-7px] data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:scale-[0.26] data-[side=left]:data-starting-style:rotate-y-[-40deg] data-[side=left]:data-ending-style:translate-x-[-7px] data-[side=left]:data-ending-style:opacity-0 data-[side=left]:data-ending-style:scale-[0.26] data-[side=left]:data-ending-style:rotate-y-[-40deg]`,
|
|
159
|
+
`data-[side=right]:data-starting-style:translate-x-[7px] data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:scale-[0.26] data-[side=right]:data-starting-style:rotate-y-[40deg] data-[side=right]:data-ending-style:translate-x-[7px] data-[side=right]:data-ending-style:opacity-0 data-[side=right]:data-ending-style:scale-[0.26] data-[side=right]:data-ending-style:rotate-y-[40deg]`,
|
|
160
|
+
`data-[side=inline-start]:data-starting-style:translate-x-[-7px] data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:scale-[0.26] data-[side=inline-start]:data-starting-style:rotate-y-[-40deg] data-[side=inline-start]:data-ending-style:translate-x-[-7px] data-[side=inline-start]:data-ending-style:opacity-0 data-[side=inline-start]:data-ending-style:scale-[0.26] data-[side=inline-start]:data-ending-style:rotate-y-[-40deg]`,
|
|
161
|
+
`data-[side=inline-end]:data-starting-style:translate-x-[7px] data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:scale-[0.26] data-[side=inline-end]:data-starting-style:rotate-y-[40deg] data-[side=inline-end]:data-ending-style:translate-x-[7px] data-[side=inline-end]:data-ending-style:opacity-0 data-[side=inline-end]:data-ending-style:scale-[0.26] data-[side=inline-end]:data-ending-style:rotate-y-[40deg]`
|
|
162
|
+
]
|
|
163
|
+
};
|
|
164
|
+
const cssTransitionPresets = {
|
|
165
|
+
inExpo: `duration-[0.25s] ease-[cubic-bezier(0.95,0.05,0.795,0.035)]`,
|
|
166
|
+
outExpo: `duration-[0.25s] ease-[cubic-bezier(0.19,1,0.22,1)]`,
|
|
167
|
+
inOutExpo: `duration-[0.25s] ease-[cubic-bezier(1,0,0,1)]`,
|
|
168
|
+
anticipate: `duration-[0.25s] ease-[cubic-bezier(1,-0.4,0.35,0.95)]`,
|
|
169
|
+
quickOut: `duration-[0.25s] ease-out`,
|
|
170
|
+
overshootOut: `duration-[0.25s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)]`,
|
|
171
|
+
swiftOut: `duration-[0.25s] ease-[cubic-bezier(0.175,0.885,0.32,1.1)]`,
|
|
172
|
+
snappyOut: `duration-[0.25s] ease-[cubic-bezier(0.19,1,0.22,1)]`,
|
|
173
|
+
in: `duration-[0.25s] ease-[cubic-bezier(0.42,0,1,1)]`,
|
|
174
|
+
out: `duration-[0.25s] ease-[cubic-bezier(0,0,0.58,1)]`,
|
|
175
|
+
inOut: `duration-[0.25s] ease-[cubic-bezier(0.42,0,0.58,1)]`,
|
|
176
|
+
outIn: `duration-[0.25s] ease-[cubic-bezier(0.1,0.7,0.9,0.5)]`,
|
|
177
|
+
inQuad: `duration-[0.25s] ease-[cubic-bezier(0.55,0.085,0.68,0.53)]`,
|
|
178
|
+
outQuad: `duration-[0.25s] ease-[cubic-bezier(0.25,0.46,0.45,0.94)]`,
|
|
179
|
+
inOutQuad: `duration-[0.32s] ease-[cubic-bezier(0.455,0.03,0.515,0.955)]`,
|
|
180
|
+
inCubic: `duration-[0.25s] ease-[cubic-bezier(0.55,0.055,0.675,0.19)]`,
|
|
181
|
+
outCubic: `duration-[0.25s] ease-[cubic-bezier(0.215,0.61,0.355,1)]`,
|
|
182
|
+
inOutCubic: `duration-[0.25s] ease-[cubic-bezier(0.645,0.045,0.355,1)]`,
|
|
183
|
+
inQuart: `duration-[0.25s] ease-[cubic-bezier(0.895,0.03,0.685,0.22)]`,
|
|
184
|
+
outQuart: `duration-[0.25s] ease-[cubic-bezier(0.165,0.84,0.44,1)]`,
|
|
185
|
+
inOutQuart: `duration-[0.25s] ease-[cubic-bezier(0.77,0,0.175,1)]`,
|
|
186
|
+
inQuint: `duration-[0.25s] ease-[cubic-bezier(0.755,0.05,0.855,0.06)]`,
|
|
187
|
+
outQuint: `duration-[0.25s] ease-[cubic-bezier(0.23,1,0.32,1)]`,
|
|
188
|
+
inOutQuint: `duration-[0.25s] ease-[cubic-bezier(0.86,0,0.07,1)]`,
|
|
189
|
+
inCirc: `duration-[0.25s] ease-[cubic-bezier(0.6,0.04,0.98,0.335)]`,
|
|
190
|
+
outCirc: `duration-[0.25s] ease-[cubic-bezier(0.075,0.82,0.165,1)]`,
|
|
191
|
+
inOutCirc: `duration-[0.25s] ease-[cubic-bezier(0.785,0.135,0.15,0.86)]`,
|
|
192
|
+
inOutBase: `duration-[0.25s] ease-[cubic-bezier(0.25,0.1,0.25,1)]`,
|
|
193
|
+
none: `duration-0 ease-none`
|
|
194
|
+
};
|
|
195
|
+
function TooltipProvider({ delay = 300, ...props }) {
|
|
196
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
|
|
197
|
+
"data-slot": "tooltip-provider",
|
|
198
|
+
delay,
|
|
199
|
+
...props
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
function Tooltip({ ...props }) {
|
|
203
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Root, {
|
|
204
|
+
"data-slot": "tooltip",
|
|
205
|
+
...props
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
function TooltipTrigger(props) {
|
|
209
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
|
|
210
|
+
"data-slot": "tooltip-trigger",
|
|
211
|
+
...props
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
function TooltipPortal(props) {
|
|
215
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
|
|
216
|
+
"data-slot": "tooltip-portal",
|
|
217
|
+
...props
|
|
218
|
+
});
|
|
219
|
+
}
|
|
220
|
+
function TooltipPositioner({ className, side = "top", ...rest }) {
|
|
221
|
+
return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
|
|
222
|
+
side,
|
|
223
|
+
"data-slot": "tooltip-positioner",
|
|
224
|
+
className: cn("z-100", (side === "inline-end" || side === "inline-start") && "**:data-[slot=tooltip-arrow]:hidden", className),
|
|
225
|
+
...rest
|
|
226
|
+
}) });
|
|
227
|
+
}
|
|
228
|
+
function TooltipPopup({ className, animationPreset = "scale", transitionPreset = "outQuint", reduceMotion = false, showArrow = false, side = "top", sideOffset = 4, align = "center", alignOffset = 0, ...rest }) {
|
|
229
|
+
const cssAnimationConfig = useMemo(() => {
|
|
230
|
+
if (reduceMotion) return "none";
|
|
231
|
+
if (animationPreset) return cssAnimationPresets[animationPreset];
|
|
232
|
+
return cssAnimationPresets.scale;
|
|
233
|
+
}, [
|
|
234
|
+
animationPreset,
|
|
235
|
+
reduceMotion,
|
|
236
|
+
side
|
|
237
|
+
]);
|
|
238
|
+
const cssTransitionConfig = useMemo(() => {
|
|
239
|
+
if (reduceMotion) return "none";
|
|
240
|
+
if (transitionPreset) return cssTransitionPresets[transitionPreset];
|
|
241
|
+
return cssTransitionPresets.snappyOut;
|
|
242
|
+
}, [
|
|
243
|
+
transitionPreset,
|
|
244
|
+
reduceMotion,
|
|
245
|
+
side
|
|
246
|
+
]);
|
|
247
|
+
return /* @__PURE__ */ jsx(TooltipPositioner, {
|
|
248
|
+
side,
|
|
249
|
+
sideOffset,
|
|
250
|
+
align,
|
|
251
|
+
alignOffset,
|
|
252
|
+
children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
|
|
253
|
+
"data-slot": "tooltip-popup",
|
|
254
|
+
className: cn("[--radius:10px]", "bg-popover border-border pointer-events-auto w-fit origin-(--transform-origin) rounded-(--radius) border px-2 py-1 text-[13px] text-balance shadow-xs data-instant:duration-0!", className, cssAnimationConfig, cssTransitionConfig, showArrow && [
|
|
255
|
+
`before: before:bg-popover z-[-1] before:absolute before:h-2 before:w-2 before:rotate-45 before:content-['']`,
|
|
256
|
+
side === "top" && `before:border-border before:-bottom-[4.7px] before:left-1/2 before:-translate-x-1/2 before:border-r before:border-b`,
|
|
257
|
+
side === "right" && `before:border-border before:top-1/2 before:-left-[4.07px] before:-translate-y-1/2 before:border-b before:border-l`,
|
|
258
|
+
side === "bottom" && `before:border-border before:-top-[4.7px] before:left-1/2 before:-translate-x-1/2 before:border-t before:border-l`,
|
|
259
|
+
side === "left" && `before:border-border before:top-1/2 before:-right-[4.07px] before:-translate-y-1/2 before:border-t before:border-r`,
|
|
260
|
+
side === "inline-start" && `before:border-border before:top-1/2 before:-right-[4.07px] before:-translate-y-1/2 before:border-t before:border-r`,
|
|
261
|
+
side === "inline-end" && `before:border-border before:top-1/2 before:-left-[4.07px] before:-translate-y-1/2 before:border-b before:border-l`
|
|
262
|
+
]),
|
|
263
|
+
...rest
|
|
264
|
+
})
|
|
265
|
+
});
|
|
266
|
+
}
|
|
267
|
+
|
|
48
268
|
//#endregion
|
|
49
269
|
//#region src/components/Fields/Label/index.tsx
|
|
50
|
-
const Label$1 = ({ label, readOnly }) => /* @__PURE__ */
|
|
270
|
+
const Label$1 = ({ label, readOnly, tooltip }) => /* @__PURE__ */ jsxs(Label$2, {
|
|
51
271
|
readOnly,
|
|
52
|
-
children: label
|
|
272
|
+
children: [label, tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
273
|
+
delay: 200,
|
|
274
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
275
|
+
variant: "secondary",
|
|
276
|
+
className: "!text-xs !rounded-full !p-0 !size-5 flex items-center justify-center",
|
|
277
|
+
children: "?"
|
|
278
|
+
})
|
|
279
|
+
}), /* @__PURE__ */ jsx(TooltipPopup, {
|
|
280
|
+
side: "top",
|
|
281
|
+
align: "end",
|
|
282
|
+
className: "max-w-64 text-xs",
|
|
283
|
+
children: tooltip
|
|
284
|
+
})] })]
|
|
53
285
|
});
|
|
54
286
|
var Label_default = Label$1;
|
|
55
287
|
|
|
@@ -90,11 +322,13 @@ const FieldCheckbox = ({ onChange, value, readOnly, field, label }) => {
|
|
|
90
322
|
onChange(newValues);
|
|
91
323
|
}
|
|
92
324
|
};
|
|
93
|
-
|
|
325
|
+
const containerClassName = layout === "horizontal" ? "flex w-fit flex-wrap gap-1.5" : "flex flex-col gap-3";
|
|
326
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [label && /* @__PURE__ */ jsx(Label_default, {
|
|
94
327
|
label,
|
|
95
|
-
readOnly
|
|
328
|
+
readOnly: field.readOnly || readOnly,
|
|
329
|
+
tooltip: field.tooltip
|
|
96
330
|
}), /* @__PURE__ */ jsx("div", {
|
|
97
|
-
className:
|
|
331
|
+
className: containerClassName,
|
|
98
332
|
children: field.options.map((option, index) => {
|
|
99
333
|
const optionValue = option.value;
|
|
100
334
|
const key = `${String(optionValue)}-${index}`;
|
|
@@ -152,7 +386,8 @@ function Input({ className, size = "default", unstyled = false, nativeInput = fa
|
|
|
152
386
|
//#region src/components/Fields/Input/index.tsx
|
|
153
387
|
const FieldInput = ({ onChange, value, label, field, readOnly }) => /* @__PURE__ */ jsxs(Fragment, { children: [label && /* @__PURE__ */ jsx(Label_default, {
|
|
154
388
|
label,
|
|
155
|
-
readOnly: field.readOnly || readOnly
|
|
389
|
+
readOnly: field.readOnly || readOnly,
|
|
390
|
+
tooltip: field.tooltip
|
|
156
391
|
}), /* @__PURE__ */ jsx(Input, {
|
|
157
392
|
type: "text",
|
|
158
393
|
value: value || "",
|
|
@@ -278,9 +513,9 @@ function SelectGroupLabel(props) {
|
|
|
278
513
|
//#endregion
|
|
279
514
|
//#region src/components/Fields/NumberUnit/index.tsx
|
|
280
515
|
const FieldNumberUnit = ({ onChange, value, label, field, readOnly }) => {
|
|
281
|
-
const currentValue =
|
|
282
|
-
value: "",
|
|
283
|
-
unit: field.options?.[0]?.value
|
|
516
|
+
const currentValue = {
|
|
517
|
+
value: value?.value ?? "",
|
|
518
|
+
unit: value?.unit ?? field.options?.[0]?.value ?? ""
|
|
284
519
|
};
|
|
285
520
|
const handleInputChange = (newValue) => {
|
|
286
521
|
if (!readOnly) onChange({
|
|
@@ -294,9 +529,10 @@ const FieldNumberUnit = ({ onChange, value, label, field, readOnly }) => {
|
|
|
294
529
|
unit: newUnit
|
|
295
530
|
});
|
|
296
531
|
};
|
|
297
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label_default, {
|
|
532
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [label && /* @__PURE__ */ jsx(Label_default, {
|
|
298
533
|
label,
|
|
299
|
-
readOnly: field.readOnly || readOnly
|
|
534
|
+
readOnly: field.readOnly || readOnly,
|
|
535
|
+
tooltip: field.tooltip
|
|
300
536
|
}), /* @__PURE__ */ jsxs("div", {
|
|
301
537
|
className: "flex",
|
|
302
538
|
children: [/* @__PURE__ */ jsx("div", {
|
|
@@ -356,9 +592,10 @@ const FieldSelect = ({ onChange, value, label, field, readOnly }) => {
|
|
|
356
592
|
return acc;
|
|
357
593
|
}, {});
|
|
358
594
|
const hasGroups = Object.keys(groupedOptions).some((key) => key !== "__ungrouped");
|
|
359
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label_default, {
|
|
595
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [label && /* @__PURE__ */ jsx(Label_default, {
|
|
360
596
|
label,
|
|
361
|
-
readOnly: field.readOnly || readOnly
|
|
597
|
+
readOnly: field.readOnly || readOnly,
|
|
598
|
+
tooltip: field.tooltip
|
|
362
599
|
}), /* @__PURE__ */ jsxs(Select, {
|
|
363
600
|
items: itemsWithPlaceholder,
|
|
364
601
|
value: selectValue,
|
|
@@ -421,9 +658,10 @@ const FieldRadio = ({ onChange, value, readOnly, field, label }) => {
|
|
|
421
658
|
if (!readOnly && newValue != null) onChange(newValue);
|
|
422
659
|
};
|
|
423
660
|
const groupClassName = layout === "horizontal" ? "border-input flex w-fit flex-wrap divide-x divide-stone-200 overflow-hidden rounded-md border" : "flex flex-col gap-3";
|
|
424
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label_default, {
|
|
661
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [label && /* @__PURE__ */ jsx(Label_default, {
|
|
425
662
|
label,
|
|
426
|
-
readOnly
|
|
663
|
+
readOnly: field.readOnly || readOnly,
|
|
664
|
+
tooltip: field.tooltip
|
|
427
665
|
}), /* @__PURE__ */ jsx(RadioGroup, {
|
|
428
666
|
layout,
|
|
429
667
|
value: value?.toString() || "",
|
|
@@ -475,9 +713,10 @@ function Textarea({ className, size = "default", unstyled = false, ...props }) {
|
|
|
475
713
|
|
|
476
714
|
//#endregion
|
|
477
715
|
//#region src/components/Fields/Textarea/index.tsx
|
|
478
|
-
const FieldTextarea = ({ onChange, value, label, field, readOnly }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label_default, {
|
|
716
|
+
const FieldTextarea = ({ onChange, value, label, field, readOnly }) => /* @__PURE__ */ jsxs(Fragment, { children: [label && /* @__PURE__ */ jsx(Label_default, {
|
|
479
717
|
label,
|
|
480
|
-
readOnly: field.readOnly || readOnly
|
|
718
|
+
readOnly: field.readOnly || readOnly,
|
|
719
|
+
tooltip: field.tooltip
|
|
481
720
|
}), /* @__PURE__ */ jsx(Textarea, {
|
|
482
721
|
value: value || "",
|
|
483
722
|
placeholder: field.placeholder,
|
|
@@ -495,7 +734,7 @@ const Action = ({ children, label, onClick }) => /* @__PURE__ */ jsx("button", {
|
|
|
495
734
|
title: label,
|
|
496
735
|
children
|
|
497
736
|
});
|
|
498
|
-
const Group = ({ children }) => /* @__PURE__ */ jsx("div", {
|
|
737
|
+
const Group$1 = ({ children }) => /* @__PURE__ */ jsx("div", {
|
|
499
738
|
className: "mx-2 flex h-full items-center first:ml-0 last:mr-0 empty:hidden [&>*]:m-0",
|
|
500
739
|
children
|
|
501
740
|
});
|
|
@@ -517,7 +756,7 @@ const ActionBar = ({ label, parentAction, children }) => /* @__PURE__ */ jsxs("d
|
|
|
517
756
|
});
|
|
518
757
|
ActionBar.Action = Action;
|
|
519
758
|
ActionBar.Label = Label;
|
|
520
|
-
ActionBar.Group = Group;
|
|
759
|
+
ActionBar.Group = Group$1;
|
|
521
760
|
ActionBar.Separator = Separator$2;
|
|
522
761
|
var ActionBar_default = ActionBar;
|
|
523
762
|
|
|
@@ -558,179 +797,40 @@ function TabsPanel({ className, ...props }) {
|
|
|
558
797
|
|
|
559
798
|
//#endregion
|
|
560
799
|
//#region src/components/ui/accordion.tsx
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
slide: [`[transition-property:translate,opacity,height] [will-change:translate,opacity,height]`, `data-starting-style:opacity-0 data-starting-style:translate-y-[10px] data-ending-style:translate-y-[10px] data-ending-style:opacity-0 data-ending-style:h-0 data-starting-style:h-0`],
|
|
566
|
-
perspective: [
|
|
567
|
-
`[transition-property:opacity,rotateX,rotateY,transform,height] [will-change:opacity,rotateX,rotateY,transform,height]`,
|
|
568
|
-
`[transform:perspective(1000px)] origin-top`,
|
|
569
|
-
`data-starting-style:h-0 data-ending-style:h-0`,
|
|
570
|
-
`data-starting-style:opacity-0 data-ending-style:opacity-0`,
|
|
571
|
-
`data-starting-style:-rotate-x-[90deg] data-ending-style:-rotate-x-[90deg]`
|
|
572
|
-
],
|
|
573
|
-
perspectiveBlur: [
|
|
574
|
-
`[transition-property:opacity,rotateX,rotateY,transform,height,filter] [will-change:opacity,rotateX,rotateY,transform,height,filter]`,
|
|
575
|
-
`[transform:perspective(1000px)] origin-top`,
|
|
576
|
-
`data-starting-style:h-0 data-ending-style:h-0`,
|
|
577
|
-
`data-starting-style:opacity-0 data-ending-style:opacity-0`,
|
|
578
|
-
`data-starting-style:-rotate-x-[90deg] data-ending-style:-rotate-x-[90deg]`,
|
|
579
|
-
`data-starting-style:blur-[9px] data-ending-style:blur-[9px]`
|
|
580
|
-
]
|
|
581
|
-
};
|
|
582
|
-
const cssTransitionPresets$1 = {
|
|
583
|
-
inExpo: `duration-[0.35s] ease-[cubic-bezier(0.95,0.05,0.795,0.035)]`,
|
|
584
|
-
outExpo: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,
|
|
585
|
-
inOutExpo: `duration-[0.35s] ease-[cubic-bezier(1,0,0,1)]`,
|
|
586
|
-
anticipate: `duration-[0.35s] ease-[cubic-bezier(1,-0.4,0.35,0.95)]`,
|
|
587
|
-
quickOut: `duration-[0.35s] ease-out`,
|
|
588
|
-
overshootOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)]`,
|
|
589
|
-
swiftOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.1)]`,
|
|
590
|
-
snappyOut: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,
|
|
591
|
-
in: `duration-[0.35s] ease-[cubic-bezier(0.42,0,1,1)]`,
|
|
592
|
-
out: `duration-[0.35s] ease-[cubic-bezier(0,0,0.58,1)]`,
|
|
593
|
-
inOut: `duration-[0.25s] ease-[cubic-bezier(0.42,0,0.58,1)]`,
|
|
594
|
-
outIn: `duration-[0.35s] ease-[cubic-bezier(0.1,0.7,0.9,0.5)]`,
|
|
595
|
-
inQuad: `duration-[0.35s] ease-[cubic-bezier(0.55,0.085,0.68,0.53)]`,
|
|
596
|
-
outQuad: `duration-[0.25s] ease-[cubic-bezier(0.25,0.46,0.45,0.94)]`,
|
|
597
|
-
inOutQuad: `duration-[0.32s] ease-[cubic-bezier(0.455,0.03,0.515,0.955)]`,
|
|
598
|
-
inCubic: `duration-[0.35s] ease-[cubic-bezier(0.55,0.055,0.675,0.19)]`,
|
|
599
|
-
outCubic: `duration-[0.35s] ease-[cubic-bezier(0.215,0.61,0.355,1)]`,
|
|
600
|
-
inOutCubic: `duration-[0.35s] ease-[cubic-bezier(0.645,0.045,0.355,1)]`,
|
|
601
|
-
inQuart: `duration-[0.35s] ease-[cubic-bezier(0.895,0.03,0.685,0.22)]`,
|
|
602
|
-
outQuart: `duration-[0.35s] ease-[cubic-bezier(0.165,0.84,0.44,1)]`,
|
|
603
|
-
inOutQuart: `duration-[0.35s] ease-[cubic-bezier(0.77,0,0.175,1)]`,
|
|
604
|
-
inQuint: `duration-[0.35s] ease-[cubic-bezier(0.755,0.05,0.855,0.06)]`,
|
|
605
|
-
outQuint: `duration-[0.35s] ease-[cubic-bezier(0.23,1,0.32,1)]`,
|
|
606
|
-
inOutQuint: `duration-[0.35s] ease-[cubic-bezier(0.86,0,0.07,1)]`,
|
|
607
|
-
inCirc: `duration-[0.35s] ease-[cubic-bezier(0.6,0.04,0.98,0.335)]`,
|
|
608
|
-
outCirc: `duration-[0.35s] ease-[cubic-bezier(0.075,0.82,0.165,1)]`,
|
|
609
|
-
inOutCirc: `duration-[0.35s] ease-[cubic-bezier(0.785,0.135,0.15,0.86)]`,
|
|
610
|
-
inOutBase: `duration-[0.35s] ease-[cubic-bezier(0.25,0.1,0.25,1)]`
|
|
611
|
-
};
|
|
612
|
-
const AccordionContext = createContext(void 0);
|
|
613
|
-
function useAccordion() {
|
|
614
|
-
const context = useContext(AccordionContext);
|
|
615
|
-
if (!context) throw new Error("useAccordion must be used within a AccordionProvider");
|
|
616
|
-
return context;
|
|
617
|
-
}
|
|
618
|
-
function Accordion({ value, defaultValue, onValueChange, animationPreset = "fade", transitionPreset = "outQuad", reduceMotion, variant = "default", className, multiple = false, ...props }) {
|
|
619
|
-
const [accordionValue, setAccordionValue] = useState(value ?? defaultValue ?? []);
|
|
620
|
-
const handleValueChange = (value$1, eventDetails) => {
|
|
621
|
-
setAccordionValue(value$1);
|
|
622
|
-
onValueChange?.(value$1, eventDetails);
|
|
623
|
-
};
|
|
624
|
-
return /* @__PURE__ */ jsx(AccordionContext.Provider, {
|
|
625
|
-
value: {
|
|
626
|
-
value: accordionValue,
|
|
627
|
-
onValueChange: handleValueChange,
|
|
628
|
-
animationPreset,
|
|
629
|
-
transitionPreset,
|
|
630
|
-
reduceMotion,
|
|
631
|
-
variant
|
|
632
|
-
},
|
|
633
|
-
children: /* @__PURE__ */ jsx(Accordion$1.Root, {
|
|
634
|
-
"data-slot": "accordion",
|
|
635
|
-
value: accordionValue,
|
|
636
|
-
onValueChange: handleValueChange,
|
|
637
|
-
multiple,
|
|
638
|
-
className: cn("w-full", variant === "default" && "flex flex-col rounded-2xl border outline-hidden", variant === "card" && "flex flex-col gap-1.5", variant === "swiss" && "rounded-2xl", className),
|
|
639
|
-
...props
|
|
640
|
-
})
|
|
641
|
-
});
|
|
642
|
-
}
|
|
643
|
-
const AccordionItemContext = createContext(void 0);
|
|
644
|
-
function useAccordionItem() {
|
|
645
|
-
const context = useContext(AccordionItemContext);
|
|
646
|
-
if (!context) throw new Error("useAccordionItem must be used within a AccordionItemProvider");
|
|
647
|
-
return context;
|
|
648
|
-
}
|
|
649
|
-
function AccordionItem({ value: itemValue, onOpenChange, className, ...rest }) {
|
|
650
|
-
const { value, variant = "default" } = useAccordion();
|
|
651
|
-
const [isOpen, setIsOpen] = useState(value?.includes(itemValue) ?? false);
|
|
652
|
-
useEffect(() => {
|
|
653
|
-
setIsOpen(value?.includes(itemValue) ?? false);
|
|
654
|
-
}, [value, itemValue]);
|
|
655
|
-
const handleItemOpenChange = (open, eventDetails) => {
|
|
656
|
-
setIsOpen(open);
|
|
657
|
-
onOpenChange?.(open, eventDetails);
|
|
658
|
-
};
|
|
659
|
-
return /* @__PURE__ */ jsx(AccordionItemContext.Provider, {
|
|
660
|
-
value: {
|
|
661
|
-
open: isOpen,
|
|
662
|
-
onOpenChange: handleItemOpenChange,
|
|
663
|
-
variant
|
|
664
|
-
},
|
|
665
|
-
children: /* @__PURE__ */ jsx(Accordion$1.Item, {
|
|
666
|
-
"data-slot": "accordion-item",
|
|
667
|
-
value: itemValue,
|
|
668
|
-
onOpenChange: handleItemOpenChange,
|
|
669
|
-
className: cn("w-full outline-hidden contain-layout", `[transition-property:border-radius,margin,border] duration-260 ease-[cubic-bezier(0.215,0.61,0.355,1)] will-change-[border-radius,margin,border]`, "focus-within:relative focus-within:z-2", variant === "default" && "border-border bg-card border-b first:rounded-t-2xl last:rounded-b-2xl last:border-b-0", variant === "card" && "rounded-[14px] border p-1", variant === "swiss" && [
|
|
670
|
-
"bg-popover border-border/60 relative overflow-hidden border-x",
|
|
671
|
-
"data-closed:border-border/60 data-closed:border-b",
|
|
672
|
-
"first:border-border/60 first:rounded-t-2xl first:border-t",
|
|
673
|
-
"last:border-border/60 last:rounded-b-2xl last:border-b",
|
|
674
|
-
"data-open:border-primary/70 data-open:z-2 data-open:rounded-2xl data-open:border",
|
|
675
|
-
"data-open:my-6 data-open:first:mt-0 data-open:last:mb-0",
|
|
676
|
-
"has-[+_[data-slot='accordion-item'][data-open]]:rounded-b-2xl",
|
|
677
|
-
"has-[+_[data-slot='accordion-item'][data-open]]:border-b!",
|
|
678
|
-
"has-[+_[data-slot='accordion-item'][data-open]]:border-border/60",
|
|
679
|
-
"data-open:[&+[data-slot='accordion-item']]:rounded-t-2xl",
|
|
680
|
-
"data-open:[&+[data-slot='accordion-item'][data-closed]]:border-t",
|
|
681
|
-
"data-open:[&+[data-slot='accordion-item']]:border-border/60",
|
|
682
|
-
"data-closed:first:border-t",
|
|
683
|
-
"data-closed:last:border-b"
|
|
684
|
-
], className),
|
|
685
|
-
...rest
|
|
686
|
-
})
|
|
800
|
+
function Accordion(props) {
|
|
801
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
|
|
802
|
+
"data-slot": "accordion",
|
|
803
|
+
...props
|
|
687
804
|
});
|
|
688
805
|
}
|
|
689
|
-
function
|
|
690
|
-
return /* @__PURE__ */ jsx(
|
|
691
|
-
|
|
692
|
-
|
|
806
|
+
function AccordionItem({ className, ...props }) {
|
|
807
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
|
|
808
|
+
className: cn("border-b last:border-b-0", className),
|
|
809
|
+
"data-slot": "accordion-item",
|
|
693
810
|
...props
|
|
694
811
|
});
|
|
695
812
|
}
|
|
696
|
-
function AccordionTrigger({ className,
|
|
697
|
-
|
|
698
|
-
return /* @__PURE__ */ jsx(AccordionHeader, {
|
|
813
|
+
function AccordionTrigger({ className, children, ...props }) {
|
|
814
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
|
|
699
815
|
className: "flex",
|
|
700
|
-
children: /* @__PURE__ */ jsxs(
|
|
816
|
+
children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
|
|
817
|
+
className: cn("flex flex-1 cursor-pointer items-start justify-between gap-4 py-3 text-left font-medium text-sm outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180 px-4 hover:bg-muted", className),
|
|
701
818
|
"data-slot": "accordion-trigger",
|
|
702
|
-
className: cn("hover:bg-muted bg-muted flex w-full cursor-pointer items-center px-4 py-3 text-left text-sm not-data-panel-open:bg-transparent", "[transition-property:background-color,border-radius] duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] will-change-[background-color,border-radius]", `focus-visible:bg-accent not-data-panel-open:dark:hover:bg-accent dark:focus-visible:bg-accent focus-visible:outline-ring font-medium focus-visible:outline-2 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50`, variant === "card" && [`not-data-panel-open:bg-secondary/80 data-panel-open:bg-secondary/80 rounded-lg data-panel-open:rounded-b-none`], className),
|
|
703
819
|
...props,
|
|
704
|
-
children: [children, /* @__PURE__ */ jsx(
|
|
705
|
-
className: "
|
|
706
|
-
|
|
820
|
+
children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
821
|
+
className: "pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-0 ease-in-out",
|
|
822
|
+
"data-slot": "accordion-indicator"
|
|
707
823
|
})]
|
|
708
824
|
})
|
|
709
825
|
});
|
|
710
826
|
}
|
|
711
|
-
function AccordionPanel({ className, children,
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
if (reduceMotion) return cssAnimationPresets$1.none;
|
|
715
|
-
if (animationPreset) return cssAnimationPresets$1[animationPreset];
|
|
716
|
-
return cssAnimationPresets$1.fade;
|
|
717
|
-
}, [animationPreset, reduceMotion]);
|
|
718
|
-
const cssTransitionConfig = useMemo(() => {
|
|
719
|
-
if (reduceMotion) return "";
|
|
720
|
-
if (transitionPreset) return cssTransitionPresets$1[transitionPreset];
|
|
721
|
-
return cssTransitionPresets$1.inOutExpo;
|
|
722
|
-
}, [transitionPreset, reduceMotion]);
|
|
723
|
-
return /* @__PURE__ */ jsx(Accordion$1.Panel, {
|
|
827
|
+
function AccordionPanel({ className, children, ...props }) {
|
|
828
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Panel, {
|
|
829
|
+
className: "h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-0 ease-in-out data-ending-style:h-0 data-starting-style:h-0",
|
|
724
830
|
"data-slot": "accordion-panel",
|
|
725
|
-
className: cn("h-(--accordion-panel-height) overflow-hidden text-sm", cssAnimationConfig, cssTransitionConfig, className),
|
|
726
|
-
style: {
|
|
727
|
-
willChange: "height, opacity, transform",
|
|
728
|
-
...style
|
|
729
|
-
},
|
|
730
831
|
...props,
|
|
731
832
|
children: /* @__PURE__ */ jsx("div", {
|
|
732
|
-
|
|
733
|
-
className: cn(variant === "default" ? "p-0" : "p-3 pl-4"),
|
|
833
|
+
className: cn("pt-0 pb-4", className),
|
|
734
834
|
children
|
|
735
835
|
})
|
|
736
836
|
});
|
|
@@ -738,13 +838,13 @@ function AccordionPanel({ className, children, style, ...props }) {
|
|
|
738
838
|
|
|
739
839
|
//#endregion
|
|
740
840
|
//#region src/components/FieldGroups/index.tsx
|
|
741
|
-
const usePuck$
|
|
841
|
+
const usePuck$2 = createUsePuck();
|
|
742
842
|
const isSingleAccordion = (accordions) => {
|
|
743
843
|
return "fields" in accordions && Array.isArray(accordions.fields);
|
|
744
844
|
};
|
|
745
845
|
const FieldGroups = ({ children }) => {
|
|
746
|
-
const config = usePuck$
|
|
747
|
-
const selectedItem = usePuck$
|
|
846
|
+
const config = usePuck$2((s) => s.config);
|
|
847
|
+
const selectedItem = usePuck$2((s) => s.selectedItem);
|
|
748
848
|
const componentConfig = useMemo(() => {
|
|
749
849
|
if (!selectedItem?.type) return null;
|
|
750
850
|
return config.components?.[selectedItem.type] || null;
|
|
@@ -840,265 +940,94 @@ const FieldGroups = ({ children }) => {
|
|
|
840
940
|
});
|
|
841
941
|
}, [tabsConfig, organizedChildren]);
|
|
842
942
|
if (!tabsConfig) return /* @__PURE__ */ jsx("div", {
|
|
843
|
-
className: "flex flex-col gap-y-3",
|
|
844
|
-
children
|
|
845
|
-
});
|
|
846
|
-
if (!hasOrganizedFields) return /* @__PURE__ */ jsx("div", {
|
|
847
|
-
className: "flex flex-col gap-y-3",
|
|
848
|
-
children
|
|
849
|
-
});
|
|
850
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
851
|
-
className: "puck-field-groups",
|
|
852
|
-
children: [/* @__PURE__ */ jsxs(Tabs, {
|
|
853
|
-
defaultValue: defaultTab,
|
|
854
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
855
|
-
className: "px-2 pt-2",
|
|
856
|
-
children: /* @__PURE__ */ jsx(TabsList, {
|
|
857
|
-
className: "w-full justify-center",
|
|
858
|
-
children: Object.entries(tabsConfig).map(([tabKey, tabConfig]) => {
|
|
859
|
-
const tabContent = organizedChildren[tabKey];
|
|
860
|
-
if (!tabContent || typeof tabContent !== "object") return null;
|
|
861
|
-
if (!Object.keys(tabContent).some((accordionKey) => Array.isArray(tabContent[accordionKey]) && tabContent[accordionKey].length > 0)) return null;
|
|
862
|
-
return /* @__PURE__ */ jsx(TabsTab, {
|
|
863
|
-
value: tabKey,
|
|
864
|
-
className: "flex-1",
|
|
865
|
-
children: tabConfig.title
|
|
866
|
-
}, tabKey);
|
|
867
|
-
})
|
|
868
|
-
})
|
|
869
|
-
}), Object.entries(tabsConfig).map(([tabKey, tabConfig]) => {
|
|
870
|
-
const tabContent = organizedChildren[tabKey];
|
|
871
|
-
if (!tabContent || typeof tabContent !== "object") return null;
|
|
872
|
-
const { accordions } = tabConfig;
|
|
873
|
-
if (isSingleAccordion(accordions)) {
|
|
874
|
-
const fields = tabContent[tabKey];
|
|
875
|
-
if (!fields || !Array.isArray(fields) || fields.length === 0) return null;
|
|
876
|
-
return /* @__PURE__ */ jsx(TabsPanel, {
|
|
877
|
-
value: tabKey,
|
|
878
|
-
children: /* @__PURE__ */ jsx(Accordion, {
|
|
879
|
-
defaultValue: accordions.defaultExpanded ? [tabKey] : [],
|
|
880
|
-
className: "rounded-none border-none",
|
|
881
|
-
children: /* @__PURE__ */ jsxs(AccordionItem, {
|
|
882
|
-
value: tabKey,
|
|
883
|
-
children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: accordions.title }), /* @__PURE__ */ jsx(AccordionPanel, {
|
|
884
|
-
className: "p-0",
|
|
885
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
886
|
-
className: "flex flex-col",
|
|
887
|
-
children: fields
|
|
888
|
-
})
|
|
889
|
-
})]
|
|
890
|
-
})
|
|
891
|
-
})
|
|
892
|
-
}, tabKey);
|
|
893
|
-
}
|
|
894
|
-
const accordionsRecord = accordions;
|
|
895
|
-
return /* @__PURE__ */ jsx(TabsPanel, {
|
|
896
|
-
value: tabKey,
|
|
897
|
-
children: /* @__PURE__ */ jsx(Accordion, {
|
|
898
|
-
multiple: true,
|
|
899
|
-
defaultValue: Object.entries(accordionsRecord).filter(([, accordionConfig]) => accordionConfig?.defaultExpanded).map(([accordionKey]) => accordionKey),
|
|
900
|
-
className: "rounded-none border-none",
|
|
901
|
-
children: Object.entries(accordionsRecord).map(([accordionKey, accordionConfig]) => {
|
|
902
|
-
const fields = tabContent[accordionKey];
|
|
903
|
-
if (!fields || !Array.isArray(fields) || fields.length === 0) return null;
|
|
904
|
-
return /* @__PURE__ */ jsxs(AccordionItem, {
|
|
905
|
-
value: accordionKey,
|
|
906
|
-
children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: accordionConfig.title }), /* @__PURE__ */ jsx(AccordionPanel, {
|
|
907
|
-
className: "p-0",
|
|
908
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
909
|
-
className: "flex flex-col",
|
|
910
|
-
children: fields
|
|
911
|
-
})
|
|
912
|
-
})]
|
|
913
|
-
}, accordionKey);
|
|
914
|
-
})
|
|
915
|
-
})
|
|
916
|
-
}, tabKey);
|
|
917
|
-
})]
|
|
918
|
-
}), organizedChildren["__ungrouped"]?.default && Array.isArray(organizedChildren["__ungrouped"].default) && organizedChildren["__ungrouped"].default.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
919
|
-
className: "mt-4 space-y-4 border-t pt-4",
|
|
920
|
-
children: organizedChildren["__ungrouped"].default
|
|
921
|
-
})]
|
|
922
|
-
});
|
|
923
|
-
};
|
|
924
|
-
var FieldGroups_default = FieldGroups;
|
|
925
|
-
|
|
926
|
-
//#endregion
|
|
927
|
-
//#region src/components/ui/tooltip.tsx
|
|
928
|
-
const cssAnimationPresets = {
|
|
929
|
-
none: "transition-none",
|
|
930
|
-
scale: [`[transition-property:scale,opacity]`, `data-starting-style:scale-80 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:scale-80`],
|
|
931
|
-
fade: [`[transition-property:opacity,scale]`, `data-starting-style:scale-98 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:scale-98`],
|
|
932
|
-
slideOutside: [
|
|
933
|
-
`[transition-property:translate,opacity]`,
|
|
934
|
-
`data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:translate-y-[10px] data-[side=bottom]:data-ending-style:translate-y-[10px] data-[side=bottom]:data-ending-style:opacity-0`,
|
|
935
|
-
`data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:translate-y-[-10px] data-[side=top]:data-ending-style:translate-y-[-10px] data-[side=top]:data-ending-style:opacity-0`,
|
|
936
|
-
`data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:translate-x-[-10px] data-[side=left]:data-ending-style:translate-x-[-10px] data-[side=left]:data-ending-style:opacity-0`,
|
|
937
|
-
`data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:translate-x-[10px] data-[side=right]:data-ending-style:translate-x-[10px] data-[side=right]:data-ending-style:opacity-0`,
|
|
938
|
-
`data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:opacity-0`,
|
|
939
|
-
`data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:opacity-0`
|
|
940
|
-
],
|
|
941
|
-
slideInside: [
|
|
942
|
-
`[transition-property:translate,opacity]`,
|
|
943
|
-
`data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:translate-y-[-10px] data-[side=bottom]:data-ending-style:translate-y-[-10px] data-[side=bottom]:data-ending-style:opacity-0`,
|
|
944
|
-
`data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:translate-y-[10px] data-[side=top]:data-ending-style:translate-y-[10px] data-[side=top]:data-ending-style:opacity-0`,
|
|
945
|
-
`data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:translate-x-[10px] data-[side=left]:data-ending-style:translate-x-[10px] data-[side=left]:data-ending-style:opacity-0`,
|
|
946
|
-
`data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:translate-x-[-10px] data-[side=right]:data-ending-style:translate-x-[-10px] data-[side=right]:data-ending-style:opacity-0`,
|
|
947
|
-
`data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:translate-x-[10px] data-[side=inline-start]:data-ending-style:translate-x-[10px] data-[side=inline-start]:data-ending-style:opacity-0`,
|
|
948
|
-
`data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:translate-x-[-10px] data-[side=inline-end]:data-ending-style:translate-x-[-10px] data-[side=inline-end]:data-ending-style:opacity-0`
|
|
949
|
-
],
|
|
950
|
-
wipe: [
|
|
951
|
-
`[transition-property:clip-path] [will-change:clip-path]`,
|
|
952
|
-
`[clip-path:inset(0_0_0_0_round_var(--radius))] [-webkit-clip-path:inset(0_0_0_0_round_var(--radius))]`,
|
|
953
|
-
`data-[side=bottom]:data-starting-style:[clip-path:inset(0_0_100%_0_round_var(--radius))] data-[side=bottom]:data-ending-style:[clip-path:inset(0_0_100%_0_round_var(--radius))]`,
|
|
954
|
-
`data-[side=top]:data-starting-style:[clip-path:inset(100%_0_0_0_round_var(--radius))] data-[side=top]:data-ending-style:[clip-path:inset(100%_0_0_0_round_var(--radius))]`,
|
|
955
|
-
`data-[side=left]:data-starting-style:[clip-path:inset(0_0_0_100%_round_var(--radius))] data-[side=left]:data-ending-style:[clip-path:inset(0_0_0_100%_round_var(--radius))]`,
|
|
956
|
-
`data-[side=right]:data-starting-style:[clip-path:inset(0_100%_0_0_round_var(--radius))] data-[side=right]:data-ending-style:[clip-path:inset(0_100%_0_0_round_var(--radius))]`,
|
|
957
|
-
`data-[side=inline-start]:data-starting-style:[clip-path:inset(0_0_0_100%_round_var(--radius))] data-[side=inline-start]:data-ending-style:[clip-path:inset(0_0_0_100%_round_var(--radius))]`,
|
|
958
|
-
`data-[side=inline-end]:data-starting-style:[clip-path:inset(0_100%_0_0_round_var(--radius))] data-[side=inline-end]:data-ending-style:[clip-path:inset(0_100%_0_0_round_var(--radius))]`
|
|
959
|
-
],
|
|
960
|
-
wipeScale: [
|
|
961
|
-
`[transition-property:clip-path,scale] [will-change:clip-path,scale]`,
|
|
962
|
-
`[clip-path:inset(0_0_0_0_round_var(--radius))] [-webkit-clip-path:inset(0_0_0_0_round_var(--radius))]`,
|
|
963
|
-
`data-starting-style:scale-80 data-ending-style:scale-80`,
|
|
964
|
-
`data-[side=bottom]:data-starting-style:[clip-path:inset(0_0_100%_0_round_var(--radius))] data-[side=bottom]:data-ending-style:[clip-path:inset(0_0_100%_0_round_var(--radius))]`,
|
|
965
|
-
`data-[side=top]:data-starting-style:[clip-path:inset(100%_0_0_0_round_var(--radius))] data-[side=top]:data-ending-style:[clip-path:inset(100%_0_0_0_round_var(--radius))]`,
|
|
966
|
-
`data-[side=left]:data-starting-style:[clip-path:inset(0_0_0_100%_round_var(--radius))] data-[side=left]:data-ending-style:[clip-path:inset(0_0_0_100%_round_var(--radius))]`,
|
|
967
|
-
`data-[side=right]:data-starting-style:[clip-path:inset(0_100%_0_0_round_var(--radius))] data-[side=right]:data-ending-style:[clip-path:inset(0_100%_0_0_round_var(--radius))]`,
|
|
968
|
-
`data-[side=inline-start]:data-starting-style:[clip-path:inset(0_0_0_100%_round_var(--radius))] data-[side=inline-start]:data-ending-style:[clip-path:inset(0_0_0_100%_round_var(--radius))]`,
|
|
969
|
-
`data-[side=inline-end]:data-starting-style:[clip-path:inset(0_100%_0_0_round_var(--radius))] data-[side=inline-end]:data-ending-style:[clip-path:inset(0_100%_0_0_round_var(--radius))]`
|
|
970
|
-
],
|
|
971
|
-
motion: [
|
|
972
|
-
`[transition-property:translate,scale,opacity,rotateX,rotateY,transform] [will-change:translate,scale,opacity,rotateX,rotateY,transform]`,
|
|
973
|
-
`[transform:perspective(1000px)]`,
|
|
974
|
-
`data-[side=bottom]:data-starting-style:translate-y-[7px] data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:scale-[0.26] data-[side=bottom]:data-starting-style:rotate-x-[70deg] data-[side=bottom]:data-ending-style:translate-y-[7px] data-[side=bottom]:data-ending-style:opacity-0 data-[side=bottom]:data-ending-style:scale-[0.26] data-[side=bottom]:data-ending-style:rotate-x-[70deg]`,
|
|
975
|
-
`data-[side=top]:data-starting-style:translate-y-[7px] data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:scale-[0.26] data-[side=top]:data-starting-style:rotate-x-[70deg] data-[side=top]:data-ending-style:translate-y-[7px] data-[side=top]:data-ending-style:opacity-0 data-[side=top]:data-ending-style:scale-[0.26] data-[side=top]:data-ending-style:rotate-x-[70deg]`,
|
|
976
|
-
`data-[side=left]:data-starting-style:translate-x-[-7px] data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:scale-[0.26] data-[side=left]:data-starting-style:rotate-y-[-40deg] data-[side=left]:data-ending-style:translate-x-[-7px] data-[side=left]:data-ending-style:opacity-0 data-[side=left]:data-ending-style:scale-[0.26] data-[side=left]:data-ending-style:rotate-y-[-40deg]`,
|
|
977
|
-
`data-[side=right]:data-starting-style:translate-x-[7px] data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:scale-[0.26] data-[side=right]:data-starting-style:rotate-y-[40deg] data-[side=right]:data-ending-style:translate-x-[7px] data-[side=right]:data-ending-style:opacity-0 data-[side=right]:data-ending-style:scale-[0.26] data-[side=right]:data-ending-style:rotate-y-[40deg]`,
|
|
978
|
-
`data-[side=inline-start]:data-starting-style:translate-x-[-7px] data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:scale-[0.26] data-[side=inline-start]:data-starting-style:rotate-y-[-40deg] data-[side=inline-start]:data-ending-style:translate-x-[-7px] data-[side=inline-start]:data-ending-style:opacity-0 data-[side=inline-start]:data-ending-style:scale-[0.26] data-[side=inline-start]:data-ending-style:rotate-y-[-40deg]`,
|
|
979
|
-
`data-[side=inline-end]:data-starting-style:translate-x-[7px] data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:scale-[0.26] data-[side=inline-end]:data-starting-style:rotate-y-[40deg] data-[side=inline-end]:data-ending-style:translate-x-[7px] data-[side=inline-end]:data-ending-style:opacity-0 data-[side=inline-end]:data-ending-style:scale-[0.26] data-[side=inline-end]:data-ending-style:rotate-y-[40deg]`
|
|
980
|
-
],
|
|
981
|
-
motionBlur: [
|
|
982
|
-
`[transition-property:translate,scale,opacity,rotateX,rotateY,transform,filter] [will-change:translate,scale,opacity,rotateX,rotateY,transform,filter]`,
|
|
983
|
-
`[transform:perspective(1000px)]`,
|
|
984
|
-
`data-starting-style:blur-[9px] data-ending-style:blur-[9px]`,
|
|
985
|
-
`data-[side=bottom]:data-starting-style:translate-y-[7px] data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:scale-[0.26] data-[side=bottom]:data-starting-style:rotate-x-[70deg] data-[side=bottom]:data-ending-style:translate-y-[7px] data-[side=bottom]:data-ending-style:opacity-0 data-[side=bottom]:data-ending-style:scale-[0.26] data-[side=bottom]:data-ending-style:rotate-x-[70deg]`,
|
|
986
|
-
`data-[side=top]:data-starting-style:translate-y-[7px] data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:scale-[0.26] data-[side=top]:data-starting-style:rotate-x-[70deg] data-[side=top]:data-ending-style:translate-y-[7px] data-[side=top]:data-ending-style:opacity-0 data-[side=top]:data-ending-style:scale-[0.26] data-[side=top]:data-ending-style:rotate-x-[70deg]`,
|
|
987
|
-
`data-[side=left]:data-starting-style:translate-x-[-7px] data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:scale-[0.26] data-[side=left]:data-starting-style:rotate-y-[-40deg] data-[side=left]:data-ending-style:translate-x-[-7px] data-[side=left]:data-ending-style:opacity-0 data-[side=left]:data-ending-style:scale-[0.26] data-[side=left]:data-ending-style:rotate-y-[-40deg]`,
|
|
988
|
-
`data-[side=right]:data-starting-style:translate-x-[7px] data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:scale-[0.26] data-[side=right]:data-starting-style:rotate-y-[40deg] data-[side=right]:data-ending-style:translate-x-[7px] data-[side=right]:data-ending-style:opacity-0 data-[side=right]:data-ending-style:scale-[0.26] data-[side=right]:data-ending-style:rotate-y-[40deg]`,
|
|
989
|
-
`data-[side=inline-start]:data-starting-style:translate-x-[-7px] data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:scale-[0.26] data-[side=inline-start]:data-starting-style:rotate-y-[-40deg] data-[side=inline-start]:data-ending-style:translate-x-[-7px] data-[side=inline-start]:data-ending-style:opacity-0 data-[side=inline-start]:data-ending-style:scale-[0.26] data-[side=inline-start]:data-ending-style:rotate-y-[-40deg]`,
|
|
990
|
-
`data-[side=inline-end]:data-starting-style:translate-x-[7px] data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:scale-[0.26] data-[side=inline-end]:data-starting-style:rotate-y-[40deg] data-[side=inline-end]:data-ending-style:translate-x-[7px] data-[side=inline-end]:data-ending-style:opacity-0 data-[side=inline-end]:data-ending-style:scale-[0.26] data-[side=inline-end]:data-ending-style:rotate-y-[40deg]`
|
|
991
|
-
]
|
|
992
|
-
};
|
|
993
|
-
const cssTransitionPresets = {
|
|
994
|
-
inExpo: `duration-[0.25s] ease-[cubic-bezier(0.95,0.05,0.795,0.035)]`,
|
|
995
|
-
outExpo: `duration-[0.25s] ease-[cubic-bezier(0.19,1,0.22,1)]`,
|
|
996
|
-
inOutExpo: `duration-[0.25s] ease-[cubic-bezier(1,0,0,1)]`,
|
|
997
|
-
anticipate: `duration-[0.25s] ease-[cubic-bezier(1,-0.4,0.35,0.95)]`,
|
|
998
|
-
quickOut: `duration-[0.25s] ease-out`,
|
|
999
|
-
overshootOut: `duration-[0.25s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)]`,
|
|
1000
|
-
swiftOut: `duration-[0.25s] ease-[cubic-bezier(0.175,0.885,0.32,1.1)]`,
|
|
1001
|
-
snappyOut: `duration-[0.25s] ease-[cubic-bezier(0.19,1,0.22,1)]`,
|
|
1002
|
-
in: `duration-[0.25s] ease-[cubic-bezier(0.42,0,1,1)]`,
|
|
1003
|
-
out: `duration-[0.25s] ease-[cubic-bezier(0,0,0.58,1)]`,
|
|
1004
|
-
inOut: `duration-[0.25s] ease-[cubic-bezier(0.42,0,0.58,1)]`,
|
|
1005
|
-
outIn: `duration-[0.25s] ease-[cubic-bezier(0.1,0.7,0.9,0.5)]`,
|
|
1006
|
-
inQuad: `duration-[0.25s] ease-[cubic-bezier(0.55,0.085,0.68,0.53)]`,
|
|
1007
|
-
outQuad: `duration-[0.25s] ease-[cubic-bezier(0.25,0.46,0.45,0.94)]`,
|
|
1008
|
-
inOutQuad: `duration-[0.32s] ease-[cubic-bezier(0.455,0.03,0.515,0.955)]`,
|
|
1009
|
-
inCubic: `duration-[0.25s] ease-[cubic-bezier(0.55,0.055,0.675,0.19)]`,
|
|
1010
|
-
outCubic: `duration-[0.25s] ease-[cubic-bezier(0.215,0.61,0.355,1)]`,
|
|
1011
|
-
inOutCubic: `duration-[0.25s] ease-[cubic-bezier(0.645,0.045,0.355,1)]`,
|
|
1012
|
-
inQuart: `duration-[0.25s] ease-[cubic-bezier(0.895,0.03,0.685,0.22)]`,
|
|
1013
|
-
outQuart: `duration-[0.25s] ease-[cubic-bezier(0.165,0.84,0.44,1)]`,
|
|
1014
|
-
inOutQuart: `duration-[0.25s] ease-[cubic-bezier(0.77,0,0.175,1)]`,
|
|
1015
|
-
inQuint: `duration-[0.25s] ease-[cubic-bezier(0.755,0.05,0.855,0.06)]`,
|
|
1016
|
-
outQuint: `duration-[0.25s] ease-[cubic-bezier(0.23,1,0.32,1)]`,
|
|
1017
|
-
inOutQuint: `duration-[0.25s] ease-[cubic-bezier(0.86,0,0.07,1)]`,
|
|
1018
|
-
inCirc: `duration-[0.25s] ease-[cubic-bezier(0.6,0.04,0.98,0.335)]`,
|
|
1019
|
-
outCirc: `duration-[0.25s] ease-[cubic-bezier(0.075,0.82,0.165,1)]`,
|
|
1020
|
-
inOutCirc: `duration-[0.25s] ease-[cubic-bezier(0.785,0.135,0.15,0.86)]`,
|
|
1021
|
-
inOutBase: `duration-[0.25s] ease-[cubic-bezier(0.25,0.1,0.25,1)]`,
|
|
1022
|
-
none: `duration-0 ease-none`
|
|
1023
|
-
};
|
|
1024
|
-
function TooltipProvider({ delay = 300, ...props }) {
|
|
1025
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
|
|
1026
|
-
"data-slot": "tooltip-provider",
|
|
1027
|
-
delay,
|
|
1028
|
-
...props
|
|
1029
|
-
});
|
|
1030
|
-
}
|
|
1031
|
-
function Tooltip({ ...props }) {
|
|
1032
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Root, {
|
|
1033
|
-
"data-slot": "tooltip",
|
|
1034
|
-
...props
|
|
1035
|
-
});
|
|
1036
|
-
}
|
|
1037
|
-
function TooltipTrigger(props) {
|
|
1038
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
|
|
1039
|
-
"data-slot": "tooltip-trigger",
|
|
1040
|
-
...props
|
|
1041
|
-
});
|
|
1042
|
-
}
|
|
1043
|
-
function TooltipPortal(props) {
|
|
1044
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
|
|
1045
|
-
"data-slot": "tooltip-portal",
|
|
1046
|
-
...props
|
|
1047
|
-
});
|
|
1048
|
-
}
|
|
1049
|
-
function TooltipPositioner({ className, side = "top", ...rest }) {
|
|
1050
|
-
return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
|
|
1051
|
-
side,
|
|
1052
|
-
"data-slot": "tooltip-positioner",
|
|
1053
|
-
className: cn("z-100", (side === "inline-end" || side === "inline-start") && "**:data-[slot=tooltip-arrow]:hidden", className),
|
|
1054
|
-
...rest
|
|
1055
|
-
}) });
|
|
1056
|
-
}
|
|
1057
|
-
function TooltipPopup({ className, animationPreset = "scale", transitionPreset = "outQuint", reduceMotion = false, showArrow = false, side = "top", sideOffset = 4, align = "center", alignOffset = 0, ...rest }) {
|
|
1058
|
-
const cssAnimationConfig = useMemo(() => {
|
|
1059
|
-
if (reduceMotion) return "none";
|
|
1060
|
-
if (animationPreset) return cssAnimationPresets[animationPreset];
|
|
1061
|
-
return cssAnimationPresets.scale;
|
|
1062
|
-
}, [
|
|
1063
|
-
animationPreset,
|
|
1064
|
-
reduceMotion,
|
|
1065
|
-
side
|
|
1066
|
-
]);
|
|
1067
|
-
const cssTransitionConfig = useMemo(() => {
|
|
1068
|
-
if (reduceMotion) return "none";
|
|
1069
|
-
if (transitionPreset) return cssTransitionPresets[transitionPreset];
|
|
1070
|
-
return cssTransitionPresets.snappyOut;
|
|
1071
|
-
}, [
|
|
1072
|
-
transitionPreset,
|
|
1073
|
-
reduceMotion,
|
|
1074
|
-
side
|
|
1075
|
-
]);
|
|
1076
|
-
return /* @__PURE__ */ jsx(TooltipPositioner, {
|
|
1077
|
-
side,
|
|
1078
|
-
sideOffset,
|
|
1079
|
-
align,
|
|
1080
|
-
alignOffset,
|
|
1081
|
-
children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
|
|
1082
|
-
"data-slot": "tooltip-popup",
|
|
1083
|
-
className: cn("[--radius:10px]", "bg-popover border-border pointer-events-auto w-fit origin-(--transform-origin) rounded-(--radius) border px-2 py-1 text-[13px] text-balance shadow-xs data-instant:duration-0!", className, cssAnimationConfig, cssTransitionConfig, showArrow && [
|
|
1084
|
-
`before: before:bg-popover z-[-1] before:absolute before:h-2 before:w-2 before:rotate-45 before:content-['']`,
|
|
1085
|
-
side === "top" && `before:border-border before:-bottom-[4.7px] before:left-1/2 before:-translate-x-1/2 before:border-r before:border-b`,
|
|
1086
|
-
side === "right" && `before:border-border before:top-1/2 before:-left-[4.07px] before:-translate-y-1/2 before:border-b before:border-l`,
|
|
1087
|
-
side === "bottom" && `before:border-border before:-top-[4.7px] before:left-1/2 before:-translate-x-1/2 before:border-t before:border-l`,
|
|
1088
|
-
side === "left" && `before:border-border before:top-1/2 before:-right-[4.07px] before:-translate-y-1/2 before:border-t before:border-r`,
|
|
1089
|
-
side === "inline-start" && `before:border-border before:top-1/2 before:-right-[4.07px] before:-translate-y-1/2 before:border-t before:border-r`,
|
|
1090
|
-
side === "inline-end" && `before:border-border before:top-1/2 before:-left-[4.07px] before:-translate-y-1/2 before:border-b before:border-l`
|
|
1091
|
-
]),
|
|
1092
|
-
...rest
|
|
1093
|
-
})
|
|
943
|
+
className: "flex flex-col gap-y-3",
|
|
944
|
+
children
|
|
1094
945
|
});
|
|
1095
|
-
|
|
946
|
+
if (!hasOrganizedFields) return /* @__PURE__ */ jsx("div", {
|
|
947
|
+
className: "flex flex-col gap-y-3",
|
|
948
|
+
children
|
|
949
|
+
});
|
|
950
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
951
|
+
className: "puck-field-groups",
|
|
952
|
+
children: [/* @__PURE__ */ jsxs(Tabs, {
|
|
953
|
+
defaultValue: defaultTab,
|
|
954
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
955
|
+
className: "px-2 pt-2",
|
|
956
|
+
children: /* @__PURE__ */ jsx(TabsList, {
|
|
957
|
+
className: "w-full justify-center",
|
|
958
|
+
children: Object.entries(tabsConfig).map(([tabKey, tabConfig]) => {
|
|
959
|
+
const tabContent = organizedChildren[tabKey];
|
|
960
|
+
if (!tabContent || typeof tabContent !== "object") return null;
|
|
961
|
+
if (!Object.keys(tabContent).some((accordionKey) => Array.isArray(tabContent[accordionKey]) && tabContent[accordionKey].length > 0)) return null;
|
|
962
|
+
return /* @__PURE__ */ jsx(TabsTab, {
|
|
963
|
+
value: tabKey,
|
|
964
|
+
className: "flex-1",
|
|
965
|
+
children: tabConfig.title
|
|
966
|
+
}, tabKey);
|
|
967
|
+
})
|
|
968
|
+
})
|
|
969
|
+
}), Object.entries(tabsConfig).map(([tabKey, tabConfig]) => {
|
|
970
|
+
const tabContent = organizedChildren[tabKey];
|
|
971
|
+
if (!tabContent || typeof tabContent !== "object") return null;
|
|
972
|
+
const { accordions } = tabConfig;
|
|
973
|
+
if (isSingleAccordion(accordions)) {
|
|
974
|
+
const fields = tabContent[tabKey];
|
|
975
|
+
if (!fields || !Array.isArray(fields) || fields.length === 0) return null;
|
|
976
|
+
return /* @__PURE__ */ jsx(TabsPanel, {
|
|
977
|
+
value: tabKey,
|
|
978
|
+
children: /* @__PURE__ */ jsx(Accordion, {
|
|
979
|
+
defaultValue: accordions.defaultExpanded ? [tabKey] : [],
|
|
980
|
+
className: "rounded-none border-none",
|
|
981
|
+
children: /* @__PURE__ */ jsxs(AccordionItem, {
|
|
982
|
+
value: tabKey,
|
|
983
|
+
children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: accordions.title }), /* @__PURE__ */ jsx(AccordionPanel, {
|
|
984
|
+
className: "p-0",
|
|
985
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
986
|
+
className: "flex flex-col",
|
|
987
|
+
children: fields
|
|
988
|
+
})
|
|
989
|
+
})]
|
|
990
|
+
})
|
|
991
|
+
})
|
|
992
|
+
}, tabKey);
|
|
993
|
+
}
|
|
994
|
+
const accordionsRecord = accordions;
|
|
995
|
+
return /* @__PURE__ */ jsx(TabsPanel, {
|
|
996
|
+
value: tabKey,
|
|
997
|
+
children: /* @__PURE__ */ jsx(Accordion, {
|
|
998
|
+
multiple: true,
|
|
999
|
+
defaultValue: Object.entries(accordionsRecord).filter(([, accordionConfig]) => accordionConfig?.defaultExpanded).map(([accordionKey]) => accordionKey),
|
|
1000
|
+
className: "rounded-none border-none",
|
|
1001
|
+
children: Object.entries(accordionsRecord).map(([accordionKey, accordionConfig]) => {
|
|
1002
|
+
const fields = tabContent[accordionKey];
|
|
1003
|
+
if (!fields || !Array.isArray(fields) || fields.length === 0) return null;
|
|
1004
|
+
return /* @__PURE__ */ jsxs(AccordionItem, {
|
|
1005
|
+
value: accordionKey,
|
|
1006
|
+
children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: accordionConfig.title }), /* @__PURE__ */ jsx(AccordionPanel, {
|
|
1007
|
+
className: "p-0",
|
|
1008
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
1009
|
+
className: "flex flex-col",
|
|
1010
|
+
children: fields
|
|
1011
|
+
})
|
|
1012
|
+
})]
|
|
1013
|
+
}, accordionKey);
|
|
1014
|
+
})
|
|
1015
|
+
})
|
|
1016
|
+
}, tabKey);
|
|
1017
|
+
})]
|
|
1018
|
+
}), organizedChildren["__ungrouped"]?.default && Array.isArray(organizedChildren["__ungrouped"].default) && organizedChildren["__ungrouped"].default.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
1019
|
+
className: "mt-4 space-y-4 border-t pt-4",
|
|
1020
|
+
children: organizedChildren["__ungrouped"].default
|
|
1021
|
+
})]
|
|
1022
|
+
});
|
|
1023
|
+
};
|
|
1024
|
+
var FieldGroups_default = FieldGroups;
|
|
1096
1025
|
|
|
1097
1026
|
//#endregion
|
|
1098
1027
|
//#region src/components/DrawerItem/index.tsx
|
|
1099
|
-
const usePuck = createUsePuck();
|
|
1028
|
+
const usePuck$1 = createUsePuck();
|
|
1100
1029
|
const DrawerItem = ({ name, icon }) => {
|
|
1101
|
-
const componentConfig = usePuck(useCallback((state) => state.config, [])).components?.[name];
|
|
1030
|
+
const componentConfig = usePuck$1(useCallback((state) => state.config, [])).components?.[name];
|
|
1102
1031
|
const iconOrImage = icon || componentConfig?.metadata?.icon;
|
|
1103
1032
|
const imageUrl = componentConfig?.metadata?.image;
|
|
1104
1033
|
const description = componentConfig?.metadata?.description;
|
|
@@ -1122,25 +1051,23 @@ const DrawerItem = ({ name, icon }) => {
|
|
|
1122
1051
|
})]
|
|
1123
1052
|
});
|
|
1124
1053
|
if (!hasTooltipContent) return drawerContent;
|
|
1125
|
-
return /* @__PURE__ */ jsx(TooltipProvider, {
|
|
1054
|
+
return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
1126
1055
|
delay: 200,
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
})] })
|
|
1143
|
-
});
|
|
1056
|
+
className: "w-full",
|
|
1057
|
+
children: drawerContent
|
|
1058
|
+
}), /* @__PURE__ */ jsxs(TooltipPopup, {
|
|
1059
|
+
side: "right",
|
|
1060
|
+
sideOffset: 8,
|
|
1061
|
+
className: "w-64 p-2",
|
|
1062
|
+
children: [imageUrl && /* @__PURE__ */ jsx("img", {
|
|
1063
|
+
src: imageUrl,
|
|
1064
|
+
alt: name,
|
|
1065
|
+
className: "h-auto w-full rounded-sm object-contain"
|
|
1066
|
+
}), description && /* @__PURE__ */ jsx("p", {
|
|
1067
|
+
className: "text-muted-foreground mt-2 text-sm",
|
|
1068
|
+
children: description
|
|
1069
|
+
})]
|
|
1070
|
+
})] }) });
|
|
1144
1071
|
};
|
|
1145
1072
|
var DrawerItem_default = DrawerItem;
|
|
1146
1073
|
|
|
@@ -1152,7 +1079,10 @@ const createPuckOverridesPlugin = () => {
|
|
|
1152
1079
|
drawer: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
|
|
1153
1080
|
drawerItem: DrawerItem_default,
|
|
1154
1081
|
fields: FieldGroups_default,
|
|
1155
|
-
fieldLabel: ({ children, label }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label_default, {
|
|
1082
|
+
fieldLabel: ({ children, label, field, tooltip }) => /* @__PURE__ */ jsxs(Fragment, { children: [label && /* @__PURE__ */ jsx(Label_default, {
|
|
1083
|
+
label,
|
|
1084
|
+
tooltip
|
|
1085
|
+
}), children] }),
|
|
1156
1086
|
fieldTypes: {
|
|
1157
1087
|
checkbox: Checkbox_default,
|
|
1158
1088
|
numberUnit: NumberUnit_default,
|
|
@@ -1165,55 +1095,6 @@ const createPuckOverridesPlugin = () => {
|
|
|
1165
1095
|
};
|
|
1166
1096
|
var plugin_default = createPuckOverridesPlugin;
|
|
1167
1097
|
|
|
1168
|
-
//#endregion
|
|
1169
|
-
//#region src/components/ui/button.tsx
|
|
1170
|
-
const buttonVariants = cva("[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
1171
|
-
defaultVariants: {
|
|
1172
|
-
size: "default",
|
|
1173
|
-
variant: "default"
|
|
1174
|
-
},
|
|
1175
|
-
variants: {
|
|
1176
|
-
size: {
|
|
1177
|
-
default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
|
|
1178
|
-
icon: "size-9 sm:size-8",
|
|
1179
|
-
"icon-lg": "size-10 sm:size-9",
|
|
1180
|
-
"icon-sm": "size-8 sm:size-7",
|
|
1181
|
-
"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
|
|
1182
|
-
"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
|
|
1183
|
-
lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
|
|
1184
|
-
sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
|
|
1185
|
-
xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
|
|
1186
|
-
xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
|
|
1187
|
-
},
|
|
1188
|
-
variant: {
|
|
1189
|
-
default: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
|
|
1190
|
-
destructive: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-destructive/90",
|
|
1191
|
-
"destructive-outline": "border-input bg-transparent not-dark:bg-clip-padding text-destructive-foreground not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
|
|
1192
|
-
ghost: "border-transparent data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
|
|
1193
|
-
link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
|
|
1194
|
-
outline: "border-input bg-background not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
|
|
1195
|
-
primary: "border-transparent from-primary-600 to-primary-500 hover:from-primary-500 hover:to-primary-600 bg-linear-to-t text-white inset-shadow-[0_2px_0_0] inset-shadow-white/25 hover:text-white",
|
|
1196
|
-
secondary: "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90"
|
|
1197
|
-
}
|
|
1198
|
-
}
|
|
1199
|
-
});
|
|
1200
|
-
function Button({ className, variant, size, render, ...props }) {
|
|
1201
|
-
const typeValue = render ? void 0 : "button";
|
|
1202
|
-
return useRender({
|
|
1203
|
-
defaultTagName: "button",
|
|
1204
|
-
props: mergeProps({
|
|
1205
|
-
className: cn(buttonVariants({
|
|
1206
|
-
className,
|
|
1207
|
-
size,
|
|
1208
|
-
variant
|
|
1209
|
-
})),
|
|
1210
|
-
"data-slot": "button",
|
|
1211
|
-
type: typeValue
|
|
1212
|
-
}, props),
|
|
1213
|
-
render
|
|
1214
|
-
});
|
|
1215
|
-
}
|
|
1216
|
-
|
|
1217
1098
|
//#endregion
|
|
1218
1099
|
//#region src/components/ui/popover.tsx
|
|
1219
1100
|
const PopoverCreateHandle = Popover$1.createHandle;
|
|
@@ -2511,6 +2392,16 @@ const fetchMedias = async ({ query, filters, page = 1, limit = 10, sortBy, sortO
|
|
|
2511
2392
|
total: 0
|
|
2512
2393
|
};
|
|
2513
2394
|
};
|
|
2395
|
+
const fetchMediaById = async (id) => {
|
|
2396
|
+
try {
|
|
2397
|
+
return (await fetchMedias({
|
|
2398
|
+
filters: { id: id.toString() },
|
|
2399
|
+
limit: 1
|
|
2400
|
+
})).items[0] ?? null;
|
|
2401
|
+
} catch {
|
|
2402
|
+
return null;
|
|
2403
|
+
}
|
|
2404
|
+
};
|
|
2514
2405
|
const MediaUploadZone = ({ onUploadSuccess, acceptedTypes = "image/*,video/*,application/pdf", maxSize = 10 }) => {
|
|
2515
2406
|
const [uploading, setUploading] = useState(false);
|
|
2516
2407
|
const [uploadProgress, setUploadProgress] = useState(0);
|
|
@@ -2812,7 +2703,11 @@ const MediaPicker = ({ value, onChange, mediaType, acceptedTypes = "image/*,vide
|
|
|
2812
2703
|
const handleMediaChange = (media) => {
|
|
2813
2704
|
onChange({
|
|
2814
2705
|
type: "media",
|
|
2815
|
-
media
|
|
2706
|
+
media: {
|
|
2707
|
+
id: media.id,
|
|
2708
|
+
name: media.name,
|
|
2709
|
+
thumbnail: media.thumbnail
|
|
2710
|
+
}
|
|
2816
2711
|
});
|
|
2817
2712
|
};
|
|
2818
2713
|
const handleClear = () => {
|
|
@@ -2826,12 +2721,13 @@ const MediaPicker = ({ value, onChange, mediaType, acceptedTypes = "image/*,vide
|
|
|
2826
2721
|
children: [/* @__PURE__ */ jsx("div", {
|
|
2827
2722
|
className: "flex items-center gap-2",
|
|
2828
2723
|
children: /* @__PURE__ */ jsxs(InputGroup, { children: [
|
|
2829
|
-
currentValue.type === "media" && currentValue.media && /* @__PURE__ */ jsx(InputGroupAddon, {
|
|
2724
|
+
currentValue.type === "media" && currentValue.media?.thumbnail && /* @__PURE__ */ jsx(InputGroupAddon, {
|
|
2830
2725
|
align: "inline-start",
|
|
2831
2726
|
className: "pl-1.5",
|
|
2832
|
-
children: /* @__PURE__ */ jsx(
|
|
2833
|
-
|
|
2834
|
-
|
|
2727
|
+
children: /* @__PURE__ */ jsx("img", {
|
|
2728
|
+
src: currentValue.media.thumbnail,
|
|
2729
|
+
alt: currentValue.media.name,
|
|
2730
|
+
className: cn("max-h-12 my-1.5 aspect-square border border-border rounded-md object-cover")
|
|
2835
2731
|
})
|
|
2836
2732
|
}),
|
|
2837
2733
|
/* @__PURE__ */ jsx(InputGroupInput, {
|
|
@@ -2866,10 +2762,55 @@ const MediaPicker = ({ value, onChange, mediaType, acceptedTypes = "image/*,vide
|
|
|
2866
2762
|
})
|
|
2867
2763
|
});
|
|
2868
2764
|
};
|
|
2765
|
+
/**
|
|
2766
|
+
* Retourne l'URL directe si le type est "url".
|
|
2767
|
+
* Pour les références média (`type: "media"`), utiliser `useMediaUrl` à la place.
|
|
2768
|
+
*/
|
|
2869
2769
|
const getMediaUrl = (value) => {
|
|
2870
2770
|
if (!value) return void 0;
|
|
2871
|
-
if (value.type === "
|
|
2872
|
-
|
|
2771
|
+
if (value.type === "url") return value.url;
|
|
2772
|
+
};
|
|
2773
|
+
/**
|
|
2774
|
+
* Hook React qui résout dynamiquement l'URL courante d'un `MediaPickerValue`.
|
|
2775
|
+
*
|
|
2776
|
+
* Pour les références média (`type: "media"`), l'URL est récupérée depuis
|
|
2777
|
+
* l'API à partir de l'`id` du média — ce qui garantit que le lien reste
|
|
2778
|
+
* valide même si l'URL du fichier a été modifiée après la sélection.
|
|
2779
|
+
*
|
|
2780
|
+
* @example
|
|
2781
|
+
* const { url, loading } = useMediaUrl(value)
|
|
2782
|
+
* return loading ? <Spinner /> : <img src={url} />
|
|
2783
|
+
*/
|
|
2784
|
+
const useMediaUrl = (value) => {
|
|
2785
|
+
const [url, setUrl] = useState(void 0);
|
|
2786
|
+
const [loading, setLoading] = useState(false);
|
|
2787
|
+
const mediaId = value?.type === "media" ? value.media?.id : void 0;
|
|
2788
|
+
const directUrl = value?.type === "url" ? value.url : void 0;
|
|
2789
|
+
useEffect(() => {
|
|
2790
|
+
if (directUrl !== void 0) {
|
|
2791
|
+
setUrl(directUrl || void 0);
|
|
2792
|
+
return;
|
|
2793
|
+
}
|
|
2794
|
+
if (mediaId !== void 0) {
|
|
2795
|
+
let cancelled = false;
|
|
2796
|
+
setLoading(true);
|
|
2797
|
+
fetchMediaById(mediaId).then((media) => {
|
|
2798
|
+
if (!cancelled) setUrl(media ? media.url : void 0);
|
|
2799
|
+
}).catch(() => {
|
|
2800
|
+
if (!cancelled) setUrl(void 0);
|
|
2801
|
+
}).finally(() => {
|
|
2802
|
+
if (!cancelled) setLoading(false);
|
|
2803
|
+
});
|
|
2804
|
+
return () => {
|
|
2805
|
+
cancelled = true;
|
|
2806
|
+
};
|
|
2807
|
+
}
|
|
2808
|
+
setUrl(void 0);
|
|
2809
|
+
}, [mediaId, directUrl]);
|
|
2810
|
+
return {
|
|
2811
|
+
url,
|
|
2812
|
+
loading
|
|
2813
|
+
};
|
|
2873
2814
|
};
|
|
2874
2815
|
|
|
2875
2816
|
//#endregion
|
|
@@ -3180,6 +3121,321 @@ function AnchoredToasts() {
|
|
|
3180
3121
|
});
|
|
3181
3122
|
}
|
|
3182
3123
|
|
|
3124
|
+
//#endregion
|
|
3125
|
+
//#region src/blocks/Template/index.tsx
|
|
3126
|
+
const usePuck = createUsePuck();
|
|
3127
|
+
/**
|
|
3128
|
+
* Module-level cache keyed by storageKey.
|
|
3129
|
+
* Populated when the field is rendered; consumed by resolveData.
|
|
3130
|
+
*/
|
|
3131
|
+
const _resolveCache = /* @__PURE__ */ new Map();
|
|
3132
|
+
const resolveApiUrl = (apiUrl) => {
|
|
3133
|
+
if (!apiUrl) return void 0;
|
|
3134
|
+
return typeof apiUrl === "function" ? apiUrl() : apiUrl;
|
|
3135
|
+
};
|
|
3136
|
+
/**
|
|
3137
|
+
* Factory that returns a ready-to-use Puck `ComponentConfig` for a Template
|
|
3138
|
+
* block.
|
|
3139
|
+
*
|
|
3140
|
+
* Without `apiUrl` — templates are saved in `localStorage` (per-browser).
|
|
3141
|
+
* With `apiUrl` — templates are saved in a database and shared across all
|
|
3142
|
+
* users and devices.
|
|
3143
|
+
*
|
|
3144
|
+
* @example
|
|
3145
|
+
* // Basic (localStorage)
|
|
3146
|
+
* Template: createTemplateBlock({ storageKey: 'my-project' })
|
|
3147
|
+
*
|
|
3148
|
+
* // Database-backed (shared)
|
|
3149
|
+
* Template: createTemplateBlock({
|
|
3150
|
+
* storageKey: 'my-project',
|
|
3151
|
+
* apiUrl: () => document.getElementById('editor')?.dataset.templatesUrl,
|
|
3152
|
+
* getHeaders: () => ({ 'X-CSRF-TOKEN': getCsrfToken() }),
|
|
3153
|
+
* })
|
|
3154
|
+
*/
|
|
3155
|
+
function createTemplateBlock(options = {}) {
|
|
3156
|
+
const { storageKey = "puck-template", defaultTemplates = {}, apiUrl, getHeaders } = options;
|
|
3157
|
+
const localStorageKey = `puck-templates:${storageKey}`;
|
|
3158
|
+
const useApi = !!apiUrl;
|
|
3159
|
+
/** Read saved templates from the appropriate storage. */
|
|
3160
|
+
const getStoredTemplates = () => {
|
|
3161
|
+
if (useApi) return _resolveCache.get(storageKey) ?? {};
|
|
3162
|
+
try {
|
|
3163
|
+
return JSON.parse(localStorage.getItem(localStorageKey) ?? "{}");
|
|
3164
|
+
} catch {
|
|
3165
|
+
return {};
|
|
3166
|
+
}
|
|
3167
|
+
};
|
|
3168
|
+
return {
|
|
3169
|
+
fields: {
|
|
3170
|
+
template: {
|
|
3171
|
+
type: "custom",
|
|
3172
|
+
render: ({ name, value, onChange }) => {
|
|
3173
|
+
const config = usePuck((s) => s.config);
|
|
3174
|
+
const props = usePuck((s) => s.selectedItem?.props);
|
|
3175
|
+
const [apiTemplates, setApiTemplates] = useState([]);
|
|
3176
|
+
const [localTemplates, setLocalTemplates] = useState(useApi ? {} : JSON.parse(localStorage.getItem(localStorageKey) ?? "{}"));
|
|
3177
|
+
const [isLoading, setIsLoading] = useState(useApi);
|
|
3178
|
+
const [isSaving, setIsSaving] = useState(false);
|
|
3179
|
+
const [newTemplateName, setNewTemplateName] = useState("");
|
|
3180
|
+
useEffect(() => {
|
|
3181
|
+
if (!useApi) return;
|
|
3182
|
+
const url = resolveApiUrl(apiUrl);
|
|
3183
|
+
if (!url) {
|
|
3184
|
+
setIsLoading(false);
|
|
3185
|
+
return;
|
|
3186
|
+
}
|
|
3187
|
+
setIsLoading(true);
|
|
3188
|
+
fetch(`${url}?key=${encodeURIComponent(storageKey)}`, {
|
|
3189
|
+
headers: {
|
|
3190
|
+
Accept: "application/json",
|
|
3191
|
+
...getHeaders?.() ?? {}
|
|
3192
|
+
},
|
|
3193
|
+
credentials: "same-origin"
|
|
3194
|
+
}).then((r) => r.json()).then((json) => {
|
|
3195
|
+
const tpls = json.templates ?? [];
|
|
3196
|
+
setApiTemplates(tpls);
|
|
3197
|
+
syncCache(tpls);
|
|
3198
|
+
}).catch(() => {}).finally(() => setIsLoading(false));
|
|
3199
|
+
}, []);
|
|
3200
|
+
const syncCache = (tpls) => {
|
|
3201
|
+
const cached = {};
|
|
3202
|
+
tpls.forEach((t) => {
|
|
3203
|
+
cached[String(t.id)] = {
|
|
3204
|
+
label: t.name,
|
|
3205
|
+
data: t.data
|
|
3206
|
+
};
|
|
3207
|
+
});
|
|
3208
|
+
_resolveCache.set(storageKey, cached);
|
|
3209
|
+
};
|
|
3210
|
+
const handleSave = async () => {
|
|
3211
|
+
if (!props?.children?.length) return;
|
|
3212
|
+
setIsSaving(true);
|
|
3213
|
+
try {
|
|
3214
|
+
const data = props.children.map((child) => {
|
|
3215
|
+
return walkTree({
|
|
3216
|
+
type: child.type,
|
|
3217
|
+
props: {
|
|
3218
|
+
...child.props,
|
|
3219
|
+
id: crypto.randomUUID()
|
|
3220
|
+
}
|
|
3221
|
+
}, config, (content) => content.map((item) => ({
|
|
3222
|
+
...item,
|
|
3223
|
+
props: {
|
|
3224
|
+
...item.props,
|
|
3225
|
+
id: crypto.randomUUID()
|
|
3226
|
+
}
|
|
3227
|
+
})));
|
|
3228
|
+
});
|
|
3229
|
+
const label = newTemplateName.trim() || (/* @__PURE__ */ new Date()).toLocaleString();
|
|
3230
|
+
if (useApi) {
|
|
3231
|
+
const url = resolveApiUrl(apiUrl);
|
|
3232
|
+
const created = (await (await fetch(url, {
|
|
3233
|
+
method: "POST",
|
|
3234
|
+
headers: {
|
|
3235
|
+
"Content-Type": "application/json",
|
|
3236
|
+
Accept: "application/json",
|
|
3237
|
+
...getHeaders?.() ?? {}
|
|
3238
|
+
},
|
|
3239
|
+
credentials: "same-origin",
|
|
3240
|
+
body: JSON.stringify({
|
|
3241
|
+
key: storageKey,
|
|
3242
|
+
name: label,
|
|
3243
|
+
data
|
|
3244
|
+
})
|
|
3245
|
+
})).json()).template;
|
|
3246
|
+
const updated = [...apiTemplates, created];
|
|
3247
|
+
setApiTemplates(updated);
|
|
3248
|
+
syncCache(updated);
|
|
3249
|
+
onChange(String(created.id));
|
|
3250
|
+
} else {
|
|
3251
|
+
const templateId = crypto.randomUUID();
|
|
3252
|
+
const updated = {
|
|
3253
|
+
...localTemplates,
|
|
3254
|
+
[templateId]: {
|
|
3255
|
+
label,
|
|
3256
|
+
data
|
|
3257
|
+
}
|
|
3258
|
+
};
|
|
3259
|
+
localStorage.setItem(localStorageKey, JSON.stringify(updated));
|
|
3260
|
+
setLocalTemplates(updated);
|
|
3261
|
+
onChange(templateId);
|
|
3262
|
+
}
|
|
3263
|
+
setNewTemplateName("");
|
|
3264
|
+
} finally {
|
|
3265
|
+
setIsSaving(false);
|
|
3266
|
+
}
|
|
3267
|
+
};
|
|
3268
|
+
const handleDelete = async (templateValue) => {
|
|
3269
|
+
if (useApi) {
|
|
3270
|
+
const url = resolveApiUrl(apiUrl);
|
|
3271
|
+
await fetch(`${url}/${templateValue}`, {
|
|
3272
|
+
method: "DELETE",
|
|
3273
|
+
headers: {
|
|
3274
|
+
Accept: "application/json",
|
|
3275
|
+
...getHeaders?.() ?? {}
|
|
3276
|
+
},
|
|
3277
|
+
credentials: "same-origin"
|
|
3278
|
+
});
|
|
3279
|
+
const updated = apiTemplates.filter((t) => String(t.id) !== templateValue);
|
|
3280
|
+
setApiTemplates(updated);
|
|
3281
|
+
syncCache(updated);
|
|
3282
|
+
} else {
|
|
3283
|
+
const { [templateValue]: _, ...rest } = localTemplates;
|
|
3284
|
+
localStorage.setItem(localStorageKey, JSON.stringify(rest));
|
|
3285
|
+
setLocalTemplates(rest);
|
|
3286
|
+
}
|
|
3287
|
+
if (value === templateValue) onChange("blank");
|
|
3288
|
+
};
|
|
3289
|
+
const builtInOptions = [{
|
|
3290
|
+
label: "Blank",
|
|
3291
|
+
value: "blank"
|
|
3292
|
+
}, ...Object.entries(defaultTemplates).map(([k, t]) => ({
|
|
3293
|
+
value: k,
|
|
3294
|
+
label: t.label
|
|
3295
|
+
}))];
|
|
3296
|
+
const savedOptions = useApi ? apiTemplates.map((t) => ({
|
|
3297
|
+
value: String(t.id),
|
|
3298
|
+
label: t.name
|
|
3299
|
+
})) : Object.entries(localTemplates).map(([k, t]) => ({
|
|
3300
|
+
value: k,
|
|
3301
|
+
label: t.label
|
|
3302
|
+
}));
|
|
3303
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
|
|
3304
|
+
className: "flex flex-col gap-3",
|
|
3305
|
+
children: [isLoading ? /* @__PURE__ */ jsxs(Label$2, {
|
|
3306
|
+
className: "justify-start",
|
|
3307
|
+
children: [/* @__PURE__ */ jsx(Loader2Icon, {
|
|
3308
|
+
size: 16,
|
|
3309
|
+
className: "animate-spin"
|
|
3310
|
+
}), "Templates loading..."]
|
|
3311
|
+
}) : /* @__PURE__ */ jsx(AutoField, {
|
|
3312
|
+
value,
|
|
3313
|
+
onChange,
|
|
3314
|
+
field: {
|
|
3315
|
+
label: "Select a template",
|
|
3316
|
+
type: "select",
|
|
3317
|
+
options: [...builtInOptions, ...savedOptions]
|
|
3318
|
+
}
|
|
3319
|
+
}), savedOptions.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
3320
|
+
style: {
|
|
3321
|
+
marginTop: 8,
|
|
3322
|
+
borderTop: "1px solid var(--puck-color-grey-09)",
|
|
3323
|
+
paddingTop: 8
|
|
3324
|
+
},
|
|
3325
|
+
children: savedOptions.map((opt) => /* @__PURE__ */ jsxs("div", {
|
|
3326
|
+
style: {
|
|
3327
|
+
display: "flex",
|
|
3328
|
+
alignItems: "center",
|
|
3329
|
+
justifyContent: "space-between",
|
|
3330
|
+
padding: "3px 0",
|
|
3331
|
+
fontSize: 11,
|
|
3332
|
+
color: "var(--puck-color-grey-04)"
|
|
3333
|
+
},
|
|
3334
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
3335
|
+
style: {
|
|
3336
|
+
overflow: "hidden",
|
|
3337
|
+
textOverflow: "ellipsis",
|
|
3338
|
+
whiteSpace: "nowrap",
|
|
3339
|
+
marginRight: 4
|
|
3340
|
+
},
|
|
3341
|
+
children: opt.label
|
|
3342
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
3343
|
+
onClick: () => handleDelete(opt.value),
|
|
3344
|
+
style: {
|
|
3345
|
+
background: "none",
|
|
3346
|
+
border: "none",
|
|
3347
|
+
cursor: "pointer",
|
|
3348
|
+
padding: 2,
|
|
3349
|
+
color: "var(--puck-color-rose-06, #e11d48)",
|
|
3350
|
+
flexShrink: 0,
|
|
3351
|
+
display: "flex",
|
|
3352
|
+
alignItems: "center"
|
|
3353
|
+
},
|
|
3354
|
+
title: "Supprimer ce template",
|
|
3355
|
+
type: "button",
|
|
3356
|
+
children: /* @__PURE__ */ jsx(Trash2Icon, { size: 12 })
|
|
3357
|
+
})]
|
|
3358
|
+
}, opt.value))
|
|
3359
|
+
})]
|
|
3360
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
3361
|
+
className: "flex flex-col gap-3",
|
|
3362
|
+
children: [
|
|
3363
|
+
/* @__PURE__ */ jsx(Label$2, {
|
|
3364
|
+
className: "mb-0",
|
|
3365
|
+
children: "Nom du template"
|
|
3366
|
+
}),
|
|
3367
|
+
/* @__PURE__ */ jsx(Input, {
|
|
3368
|
+
type: "text",
|
|
3369
|
+
value: newTemplateName,
|
|
3370
|
+
onChange: (e) => setNewTemplateName(e.target.value),
|
|
3371
|
+
onKeyDown: (e) => {
|
|
3372
|
+
if (e.key === "Enter" && !isSaving && props?.children?.length) handleSave();
|
|
3373
|
+
},
|
|
3374
|
+
placeholder: (/* @__PURE__ */ new Date()).toLocaleString()
|
|
3375
|
+
}),
|
|
3376
|
+
/* @__PURE__ */ jsx(Button, {
|
|
3377
|
+
variant: "outline",
|
|
3378
|
+
onClick: handleSave,
|
|
3379
|
+
disabled: isSaving || !props?.children?.length,
|
|
3380
|
+
children: isSaving ? "Sauvegarde…" : "Sauvegarder comme template"
|
|
3381
|
+
})
|
|
3382
|
+
]
|
|
3383
|
+
})] });
|
|
3384
|
+
}
|
|
3385
|
+
},
|
|
3386
|
+
children: { type: "slot" }
|
|
3387
|
+
},
|
|
3388
|
+
defaultProps: {
|
|
3389
|
+
template: "blank",
|
|
3390
|
+
children: []
|
|
3391
|
+
},
|
|
3392
|
+
resolveData: async (data, { changed, trigger }) => {
|
|
3393
|
+
if (!changed.template || trigger === "load") return data;
|
|
3394
|
+
const allTemplates = {
|
|
3395
|
+
blank: {
|
|
3396
|
+
label: "Blank",
|
|
3397
|
+
data: []
|
|
3398
|
+
},
|
|
3399
|
+
...defaultTemplates,
|
|
3400
|
+
...getStoredTemplates()
|
|
3401
|
+
};
|
|
3402
|
+
if (useApi && !allTemplates[data.props.template]) try {
|
|
3403
|
+
const url = resolveApiUrl(apiUrl);
|
|
3404
|
+
if (url) {
|
|
3405
|
+
const tpls = (await (await fetch(`${url}?key=${encodeURIComponent(storageKey)}`, {
|
|
3406
|
+
headers: {
|
|
3407
|
+
Accept: "application/json",
|
|
3408
|
+
...getHeaders?.() ?? {}
|
|
3409
|
+
},
|
|
3410
|
+
credentials: "same-origin"
|
|
3411
|
+
})).json()).templates ?? [];
|
|
3412
|
+
const cached = {};
|
|
3413
|
+
tpls.forEach((t) => {
|
|
3414
|
+
cached[String(t.id)] = {
|
|
3415
|
+
label: t.name,
|
|
3416
|
+
data: t.data
|
|
3417
|
+
};
|
|
3418
|
+
});
|
|
3419
|
+
_resolveCache.set(storageKey, cached);
|
|
3420
|
+
Object.assign(allTemplates, cached);
|
|
3421
|
+
}
|
|
3422
|
+
} catch {}
|
|
3423
|
+
const children = allTemplates[data.props.template]?.data ?? allTemplates["blank"].data;
|
|
3424
|
+
return {
|
|
3425
|
+
...data,
|
|
3426
|
+
props: {
|
|
3427
|
+
...data.props,
|
|
3428
|
+
children
|
|
3429
|
+
}
|
|
3430
|
+
};
|
|
3431
|
+
},
|
|
3432
|
+
render: ({ children: Children$1 }) => /* @__PURE__ */ jsx("div", {
|
|
3433
|
+
className: "flex flex-col md:grid",
|
|
3434
|
+
children: /* @__PURE__ */ jsx(Children$1, {})
|
|
3435
|
+
})
|
|
3436
|
+
};
|
|
3437
|
+
}
|
|
3438
|
+
|
|
3183
3439
|
//#endregion
|
|
3184
3440
|
//#region src/utils/animation.tsx
|
|
3185
3441
|
const animationField = { animation: {
|
|
@@ -3284,6 +3540,112 @@ function animationToAttributes(animation) {
|
|
|
3284
3540
|
}
|
|
3285
3541
|
const animationDefaultProps = { animation: "" };
|
|
3286
3542
|
|
|
3543
|
+
//#endregion
|
|
3544
|
+
//#region src/components/ui/group.tsx
|
|
3545
|
+
const groupVariants = cva("flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64 dark:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64", {
|
|
3546
|
+
defaultVariants: { orientation: "horizontal" },
|
|
3547
|
+
variants: { orientation: {
|
|
3548
|
+
horizontal: "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none",
|
|
3549
|
+
vertical: "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none"
|
|
3550
|
+
} }
|
|
3551
|
+
});
|
|
3552
|
+
function Group({ className, orientation, children, ...props }) {
|
|
3553
|
+
return /* @__PURE__ */ jsx("div", {
|
|
3554
|
+
className: cn(groupVariants({ orientation }), className),
|
|
3555
|
+
"data-orientation": orientation,
|
|
3556
|
+
"data-slot": "group",
|
|
3557
|
+
role: "group",
|
|
3558
|
+
...props,
|
|
3559
|
+
children
|
|
3560
|
+
});
|
|
3561
|
+
}
|
|
3562
|
+
|
|
3563
|
+
//#endregion
|
|
3564
|
+
//#region src/utils/customClasses.tsx
|
|
3565
|
+
function CustomClassesField({ value, onChange, field }) {
|
|
3566
|
+
const [input, setInput] = useState("");
|
|
3567
|
+
const tags = value || [];
|
|
3568
|
+
const addTag = () => {
|
|
3569
|
+
const trimmed = input.trim();
|
|
3570
|
+
if (!trimmed || tags.includes(trimmed)) {
|
|
3571
|
+
setInput("");
|
|
3572
|
+
return;
|
|
3573
|
+
}
|
|
3574
|
+
onChange([...tags, trimmed]);
|
|
3575
|
+
setInput("");
|
|
3576
|
+
};
|
|
3577
|
+
const removeTag = (tag) => {
|
|
3578
|
+
onChange(tags.filter((t) => t !== tag));
|
|
3579
|
+
};
|
|
3580
|
+
const handleKeyDown = (e) => {
|
|
3581
|
+
if (e.key === "Enter") {
|
|
3582
|
+
e.preventDefault();
|
|
3583
|
+
addTag();
|
|
3584
|
+
}
|
|
3585
|
+
};
|
|
3586
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label_default, { label: field.label }), /* @__PURE__ */ jsxs("div", {
|
|
3587
|
+
className: "flex flex-col gap-y-2",
|
|
3588
|
+
children: [tags.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
3589
|
+
className: "flex flex-wrap gap-1",
|
|
3590
|
+
children: tags.map((tag) => /* @__PURE__ */ jsxs("div", {
|
|
3591
|
+
className: "flex items-center gap-1 pl-1.5 pr-1 py-0.5 bg-secondary text-secondary-foreground rounded-md text-xs leading-none",
|
|
3592
|
+
children: [tag, /* @__PURE__ */ jsx(Button, {
|
|
3593
|
+
size: "icon-xs",
|
|
3594
|
+
variant: "ghost",
|
|
3595
|
+
className: "!size-4 rounded-sm hover:text-destructive text-secondary-foreground/50",
|
|
3596
|
+
type: "button",
|
|
3597
|
+
onClick: () => removeTag(tag),
|
|
3598
|
+
"aria-label": `Delete ${tag}`,
|
|
3599
|
+
children: /* @__PURE__ */ jsx(XIcon, { size: 10 })
|
|
3600
|
+
})]
|
|
3601
|
+
}, tag))
|
|
3602
|
+
}), /* @__PURE__ */ jsxs(Group, {
|
|
3603
|
+
"aria-label": "Custom classes",
|
|
3604
|
+
className: "gap-2 w-full",
|
|
3605
|
+
children: [/* @__PURE__ */ jsx(Input, {
|
|
3606
|
+
type: "text",
|
|
3607
|
+
value: input,
|
|
3608
|
+
placeholder: "Class name",
|
|
3609
|
+
onChange: (e) => setInput(e.currentTarget.value),
|
|
3610
|
+
onKeyDown: handleKeyDown
|
|
3611
|
+
}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
|
|
3612
|
+
size: "icon",
|
|
3613
|
+
variant: "primary",
|
|
3614
|
+
onClick: addTag,
|
|
3615
|
+
"aria-label": "Add",
|
|
3616
|
+
children: /* @__PURE__ */ jsx(PlusIcon, {})
|
|
3617
|
+
}) })]
|
|
3618
|
+
})]
|
|
3619
|
+
})] });
|
|
3620
|
+
}
|
|
3621
|
+
const customClassesField = { customClasses: {
|
|
3622
|
+
type: "custom",
|
|
3623
|
+
label: "Classes",
|
|
3624
|
+
render: ({ value, onChange, field }) => /* @__PURE__ */ jsx(CustomClassesField, {
|
|
3625
|
+
value,
|
|
3626
|
+
onChange,
|
|
3627
|
+
field
|
|
3628
|
+
})
|
|
3629
|
+
} };
|
|
3630
|
+
function customClassesToClasses(customClasses) {
|
|
3631
|
+
if (!customClasses || customClasses.length === 0) return "";
|
|
3632
|
+
return customClasses.join(" ");
|
|
3633
|
+
}
|
|
3634
|
+
const customClassesDefaultProps = { customClasses: [] };
|
|
3635
|
+
|
|
3636
|
+
//#endregion
|
|
3637
|
+
//#region src/utils/pagePicker.tsx
|
|
3638
|
+
const pageField = {
|
|
3639
|
+
type: "custom",
|
|
3640
|
+
render: ({ value, onChange, field }) => /* @__PURE__ */ jsxs(Fragment, { children: [field.label && /* @__PURE__ */ jsx(Label_default, {
|
|
3641
|
+
label: field.label,
|
|
3642
|
+
tooltip: field.tooltip
|
|
3643
|
+
}), /* @__PURE__ */ jsx(PagePicker, {
|
|
3644
|
+
value,
|
|
3645
|
+
onChange
|
|
3646
|
+
})] })
|
|
3647
|
+
};
|
|
3648
|
+
|
|
3287
3649
|
//#endregion
|
|
3288
3650
|
//#region src/utils/display.tsx
|
|
3289
3651
|
const displayField = { display: {
|
|
@@ -4333,5 +4695,5 @@ function useOptimizedImage(src) {
|
|
|
4333
4695
|
}
|
|
4334
4696
|
|
|
4335
4697
|
//#endregion
|
|
4336
|
-
export { Accordion,
|
|
4698
|
+
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionBar_default as ActionBar, AnchoredToastProvider, Badge, Button, Checkbox, ColorPicker, ColorPickerContent, Dialog, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPopup, DialogTitle, DialogTrigger, DrawerItem_default as DrawerItem, Checkbox_default as FieldCheckbox, FieldGroups_default as FieldGroups, Input_default as FieldInput, NumberUnit_default as FieldNumberUnit, Radio_default as FieldRadio, Select_default as FieldSelect, Textarea_default as FieldTextarea, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GRAY_COLORS, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, Label_default as Label, MediaPicker, Menu, MenuCheckboxItem, MenuCreateHandle, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubPopup, MenuSubTrigger, MenuTrigger, PREDEFINED_COLORS, PagePicker, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PickerModal, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, RichTextMenuColorPicker, RichTextMenuLink, ScrollArea, ScrollBar, Select, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, Textarea, ToastProvider, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, anchoredToastManager, animationDefaultProps, animationField, animationToAttributes, badgeVariants, buttonVariants, plugin_default as createPuckOverridesPlugin, createTemplateBlock, customClassesDefaultProps, customClassesField, customClassesToClasses, displayDefaultProps, displayField, displayToClasses, fontWeightDefaultProps, fontWeightField, fontWeightToClasses, getMediaUrl, lineHeightDefaultProps, lineHeightField, lineHeightToClasses, marginDefaultProps, marginField, marginToClasses, paddingDefaultProps, paddingField, paddingToClasses, pageField, positionDefaultProps, positionField, positionToClasses, richTextMenuColorPickerExtension, sizeDefaultProps, sizeField, sizeToClasses, spacingDefaultProps, spacingFieldNames, spacingFields, spacingOptions, spacingToClasses, textAlignDefaultProps, textAlignField, textAlignToClasses, textColorDefaultProps, textColorField, textColorToClasses, textDecorationDefaultProps, textDecorationField, textDecorationToClasses, textSizeDefaultProps, textSizeField, textSizeToClasses, textTransformDefaultProps, textTransformField, textTransformToClasses, toastManager, typographyDefaultProps, typographyFieldNames, typographyFields, typographyToClasses, useMediaUrl, useOptimizedImage, usePageUrl };
|
|
4337
4699
|
//# sourceMappingURL=index.js.map
|