@bergetai/ui 0.1.78
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 +21 -0
- package/README.md +70 -0
- package/dist/chunk-YEGBDRHW.js +127 -0
- package/dist/chunk-YEGBDRHW.js.map +1 -0
- package/dist/index.cjs +2717 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +547 -0
- package/dist/index.d.ts +547 -0
- package/dist/index.js +2496 -0
- package/dist/index.js.map +1 -0
- package/dist/shiki.cjs +165 -0
- package/dist/shiki.cjs.map +1 -0
- package/dist/shiki.d.cts +10 -0
- package/dist/shiki.d.ts +10 -0
- package/dist/shiki.js +11 -0
- package/dist/shiki.js.map +1 -0
- package/dist/styles/index.css +919 -0
- package/package.json +64 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,2496 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getHighlighter
|
|
3
|
+
} from "./chunk-YEGBDRHW.js";
|
|
4
|
+
|
|
5
|
+
// src/components/button/Button.tsx
|
|
6
|
+
import * as React3 from "react";
|
|
7
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
8
|
+
|
|
9
|
+
// src/lib/utils.ts
|
|
10
|
+
import { clsx } from "clsx";
|
|
11
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
12
|
+
var twMerge = extendTailwindMerge({
|
|
13
|
+
extend: {
|
|
14
|
+
classGroups: {
|
|
15
|
+
rounded: [
|
|
16
|
+
"rounded-berget-none",
|
|
17
|
+
"rounded-berget-xs",
|
|
18
|
+
"rounded-berget-sm",
|
|
19
|
+
"rounded-berget-md",
|
|
20
|
+
"rounded-berget-lg",
|
|
21
|
+
"rounded-berget-full"
|
|
22
|
+
],
|
|
23
|
+
"font-size": ["text-h1", "text-h2", "text-h3", "text-h4", "text-p", "text-mono"]
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
function cn(...inputs) {
|
|
28
|
+
return twMerge(clsx(inputs));
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// src/primitives/button.tsx
|
|
32
|
+
import * as React from "react";
|
|
33
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
34
|
+
import { cva } from "class-variance-authority";
|
|
35
|
+
import { jsx } from "react/jsx-runtime";
|
|
36
|
+
var buttonVariants = cva(
|
|
37
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
38
|
+
{
|
|
39
|
+
variants: {
|
|
40
|
+
variant: {
|
|
41
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
42
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
43
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
44
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
45
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
46
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
47
|
+
},
|
|
48
|
+
size: {
|
|
49
|
+
default: "h-10 px-4 py-2",
|
|
50
|
+
sm: "h-9 rounded-md px-3",
|
|
51
|
+
lg: "h-11 rounded-md px-8",
|
|
52
|
+
icon: "h-10 w-10"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
defaultVariants: {
|
|
56
|
+
variant: "default",
|
|
57
|
+
size: "default"
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
var Button = React.forwardRef(
|
|
62
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
63
|
+
const Comp = asChild ? Slot : "button";
|
|
64
|
+
return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size }), className), ref, ...props });
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
Button.displayName = "Button";
|
|
68
|
+
|
|
69
|
+
// src/components/icon/Icon.tsx
|
|
70
|
+
import * as React2 from "react";
|
|
71
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
72
|
+
var iconStrokeMap = {
|
|
73
|
+
16: 1.4,
|
|
74
|
+
24: 1.6,
|
|
75
|
+
32: 1.8
|
|
76
|
+
};
|
|
77
|
+
var Icon = React2.forwardRef(
|
|
78
|
+
({
|
|
79
|
+
icon: IconComponent,
|
|
80
|
+
size,
|
|
81
|
+
className,
|
|
82
|
+
"aria-label": ariaLabel,
|
|
83
|
+
"aria-hidden": ariaHidden = true,
|
|
84
|
+
...props
|
|
85
|
+
}, ref) => {
|
|
86
|
+
const strokeWidth = iconStrokeMap[size];
|
|
87
|
+
const sizeClass = size === 16 ? "w-4 h-4" : size === 24 ? "w-6 h-6" : "w-8 h-8";
|
|
88
|
+
const ariaAttributes = ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": ariaHidden };
|
|
89
|
+
return /* @__PURE__ */ jsx2(
|
|
90
|
+
IconComponent,
|
|
91
|
+
{
|
|
92
|
+
ref,
|
|
93
|
+
className: cn(sizeClass, className),
|
|
94
|
+
strokeWidth,
|
|
95
|
+
...ariaAttributes,
|
|
96
|
+
...props
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
Icon.displayName = "Icon";
|
|
102
|
+
|
|
103
|
+
// src/components/button/Button.tsx
|
|
104
|
+
import { Loader2 } from "lucide-react";
|
|
105
|
+
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
106
|
+
var buttonVariants2 = cva2(
|
|
107
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium cursor-pointer transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-berget-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
108
|
+
{
|
|
109
|
+
variants: {
|
|
110
|
+
variant: {
|
|
111
|
+
default: "bg-berget-button-default-bg text-berget-button-default-fg shadow-lg hover:bg-berget-button-default-bg/90 hover:shadow-xl",
|
|
112
|
+
primary: "bg-berget-button-primary-bg text-berget-button-primary-fg shadow-lg hover:bg-berget-button-primary-bg/90 hover:shadow-xl",
|
|
113
|
+
secondary: "bg-berget-button-secondary-bg text-berget-button-secondary-fg shadow hover:bg-berget-button-secondary-bg/80 hover:shadow-lg",
|
|
114
|
+
destructive: "bg-berget-button-destructive-bg text-berget-button-destructive-fg shadow-sm hover:bg-berget-button-destructive-bg/80 hover:shadow",
|
|
115
|
+
highlight: "relative overflow-hidden bg-berget-background border border-berget-border-interactive backdrop-blur-[5px] text-foreground hover:bg-berget-background/80 hover:border-berget-border-interactive-elevated hover:shadow-lg",
|
|
116
|
+
icon: "!flex !flex-row !justify-center !items-center !gap-0 !p-0 !w-[44px] !h-[44px] !bg-berget-button-default-bg !text-berget-button-default-fg shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)] !rounded-full"
|
|
117
|
+
},
|
|
118
|
+
size: {
|
|
119
|
+
sm: "h-6 px-3 py-1.5 text-xs [&_svg]:size-4",
|
|
120
|
+
default: "h-8 px-4 py-2 text-sm [&_svg]:size-6",
|
|
121
|
+
lg: "h-10 px-5 py-2.5 text-base [&_svg]:size-6",
|
|
122
|
+
icon: "!w-[44px] !h-[44px] !p-0 [&_svg]:size-5"
|
|
123
|
+
},
|
|
124
|
+
width: {
|
|
125
|
+
default: "w-auto",
|
|
126
|
+
full: "w-full"
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
defaultVariants: {
|
|
130
|
+
variant: "default",
|
|
131
|
+
size: "default",
|
|
132
|
+
width: "default"
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
var Button2 = React3.forwardRef(
|
|
137
|
+
({
|
|
138
|
+
className,
|
|
139
|
+
variant,
|
|
140
|
+
size,
|
|
141
|
+
width,
|
|
142
|
+
asChild = false,
|
|
143
|
+
isLoading = false,
|
|
144
|
+
type = "button",
|
|
145
|
+
children,
|
|
146
|
+
...props
|
|
147
|
+
}, ref) => {
|
|
148
|
+
const isHighlight = variant === "highlight";
|
|
149
|
+
const isIcon = variant === "icon";
|
|
150
|
+
if (asChild) {
|
|
151
|
+
return /* @__PURE__ */ jsx3(
|
|
152
|
+
Button,
|
|
153
|
+
{
|
|
154
|
+
className: cn(buttonVariants2({ variant, size, width }), className),
|
|
155
|
+
ref,
|
|
156
|
+
asChild: true,
|
|
157
|
+
type,
|
|
158
|
+
"aria-disabled": isLoading || void 0,
|
|
159
|
+
"aria-busy": isLoading || void 0,
|
|
160
|
+
...props,
|
|
161
|
+
children
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
return /* @__PURE__ */ jsxs(
|
|
166
|
+
Button,
|
|
167
|
+
{
|
|
168
|
+
className: cn(buttonVariants2({ variant, size, width }), className),
|
|
169
|
+
ref,
|
|
170
|
+
type,
|
|
171
|
+
"aria-disabled": isLoading || void 0,
|
|
172
|
+
"aria-busy": isLoading || void 0,
|
|
173
|
+
...props,
|
|
174
|
+
children: [
|
|
175
|
+
isHighlight && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
176
|
+
/* @__PURE__ */ jsx3("div", { className: "absolute inset-0 top-[1px] h-[calc(100%-1px)] w-full bg-[radial-gradient(100%_100%_at_49.87%_0%,color-mix(in_oklch,var(--berget-foreground)_4%,transparent)_0%,transparent_100%)] pointer-events-none" }),
|
|
177
|
+
/* @__PURE__ */ jsx3("div", { className: "absolute top-0 left-0 right-0 h-[1px] bg-[radial-gradient(55.66%_112.5%_at_50%_0%,var(--berget-foreground)_0%,transparent_92.4%)] opacity-[0.3] pointer-events-none" })
|
|
178
|
+
] }),
|
|
179
|
+
/* @__PURE__ */ jsx3(
|
|
180
|
+
"span",
|
|
181
|
+
{
|
|
182
|
+
className: cn(
|
|
183
|
+
"inline-flex items-center",
|
|
184
|
+
!isIcon && "gap-2",
|
|
185
|
+
isHighlight && "relative z-10"
|
|
186
|
+
),
|
|
187
|
+
children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
188
|
+
/* @__PURE__ */ jsx3(Icon, { icon: Loader2, size: 16, className: "animate-spin", "aria-hidden": true }),
|
|
189
|
+
!isIcon && children
|
|
190
|
+
] }) : children
|
|
191
|
+
}
|
|
192
|
+
)
|
|
193
|
+
]
|
|
194
|
+
}
|
|
195
|
+
);
|
|
196
|
+
}
|
|
197
|
+
);
|
|
198
|
+
Button2.displayName = "Button";
|
|
199
|
+
|
|
200
|
+
// src/components/typography/Typography.tsx
|
|
201
|
+
import * as React4 from "react";
|
|
202
|
+
import { cva as cva3 } from "class-variance-authority";
|
|
203
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
204
|
+
var typographyVariants = cva3("", {
|
|
205
|
+
variants: {
|
|
206
|
+
variant: {
|
|
207
|
+
// Fluid heading scale — use @theme tokens (clamp-based, 390px → 1440px)
|
|
208
|
+
h1: "text-h1 font-h1 leading-h1 tracking-h1 text-balance",
|
|
209
|
+
h2: "text-h2 font-h2 leading-h2 tracking-h2 text-balance",
|
|
210
|
+
h3: "text-h3 font-h3 leading-h3 tracking-h3 text-balance",
|
|
211
|
+
h4: "text-h4 font-h4 leading-h4 tracking-h4 text-balance",
|
|
212
|
+
// Static sans-serif sub-heading
|
|
213
|
+
h5: "text-xl font-xl leading-xl text-balance",
|
|
214
|
+
// Body and UI text — use @theme tokens where available
|
|
215
|
+
large: "text-lg font-lg leading-lg text-pretty",
|
|
216
|
+
body: "text-p font-p leading-p text-pretty",
|
|
217
|
+
small: "text-sm font-sm leading-sm text-pretty",
|
|
218
|
+
xs: "text-xs font-xs leading-xs text-pretty",
|
|
219
|
+
// Monospaced — use @theme token
|
|
220
|
+
mono: "text-mono font-mono leading-mono text-pretty",
|
|
221
|
+
// Inline code / spec labels
|
|
222
|
+
code: "text-xs font-mono"
|
|
223
|
+
},
|
|
224
|
+
color: {
|
|
225
|
+
default: "text-berget-foreground",
|
|
226
|
+
muted: "text-berget-muted-foreground",
|
|
227
|
+
dim: "text-berget-foreground/50"
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
defaultVariants: {
|
|
231
|
+
variant: "body",
|
|
232
|
+
color: "default"
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
var defaultElementMap = {
|
|
236
|
+
h1: "h1",
|
|
237
|
+
h2: "h2",
|
|
238
|
+
h3: "h3",
|
|
239
|
+
h4: "h4",
|
|
240
|
+
h5: "h5",
|
|
241
|
+
large: "p",
|
|
242
|
+
body: "p",
|
|
243
|
+
small: "p",
|
|
244
|
+
xs: "p",
|
|
245
|
+
mono: "p",
|
|
246
|
+
code: "span"
|
|
247
|
+
};
|
|
248
|
+
var Typography = React4.forwardRef(
|
|
249
|
+
({ className, variant = "body", color = "default", as, children, ...props }, ref) => {
|
|
250
|
+
const Component = as ?? defaultElementMap[variant ?? "body"] ?? "p";
|
|
251
|
+
return /* @__PURE__ */ jsx4(
|
|
252
|
+
Component,
|
|
253
|
+
{
|
|
254
|
+
className: cn(typographyVariants({ variant, color }), className),
|
|
255
|
+
ref,
|
|
256
|
+
...props,
|
|
257
|
+
children
|
|
258
|
+
}
|
|
259
|
+
);
|
|
260
|
+
}
|
|
261
|
+
);
|
|
262
|
+
Typography.displayName = "Typography";
|
|
263
|
+
|
|
264
|
+
// src/components/card/Card.tsx
|
|
265
|
+
import * as React6 from "react";
|
|
266
|
+
import { cva as cva4 } from "class-variance-authority";
|
|
267
|
+
|
|
268
|
+
// src/primitives/card.tsx
|
|
269
|
+
import * as React5 from "react";
|
|
270
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
271
|
+
var Card = React5.forwardRef(
|
|
272
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
273
|
+
"div",
|
|
274
|
+
{
|
|
275
|
+
ref,
|
|
276
|
+
className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className),
|
|
277
|
+
...props
|
|
278
|
+
}
|
|
279
|
+
)
|
|
280
|
+
);
|
|
281
|
+
Card.displayName = "Card";
|
|
282
|
+
var CardHeader = React5.forwardRef(
|
|
283
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
|
|
284
|
+
);
|
|
285
|
+
CardHeader.displayName = "CardHeader";
|
|
286
|
+
var CardTitle = React5.forwardRef(
|
|
287
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx5("h2", { ref, className: cn("text-2xl leading-none tracking-tight", className), ...props })
|
|
288
|
+
);
|
|
289
|
+
CardTitle.displayName = "CardTitle";
|
|
290
|
+
var CardDescription = React5.forwardRef(
|
|
291
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
|
|
292
|
+
);
|
|
293
|
+
CardDescription.displayName = "CardDescription";
|
|
294
|
+
var CardContent = React5.forwardRef(
|
|
295
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("p-6 pt-0", className), ...props })
|
|
296
|
+
);
|
|
297
|
+
CardContent.displayName = "CardContent";
|
|
298
|
+
var CardFooter = React5.forwardRef(
|
|
299
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
|
|
300
|
+
);
|
|
301
|
+
CardFooter.displayName = "CardFooter";
|
|
302
|
+
|
|
303
|
+
// src/components/card/Card.tsx
|
|
304
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
305
|
+
var cardVariants = cva4("rounded-berget-sm", {
|
|
306
|
+
variants: {
|
|
307
|
+
variant: {
|
|
308
|
+
outlined: "bg-transparent border border-berget-border",
|
|
309
|
+
filled: "bg-berget-card-filled-bg border border-berget-border"
|
|
310
|
+
},
|
|
311
|
+
padding: {
|
|
312
|
+
none: "p-0",
|
|
313
|
+
sm: "p-3 sm:p-4",
|
|
314
|
+
md: "p-4 sm:p-6",
|
|
315
|
+
lg: "p-6 sm:p-8"
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
defaultVariants: {
|
|
319
|
+
variant: "outlined",
|
|
320
|
+
padding: "md"
|
|
321
|
+
}
|
|
322
|
+
});
|
|
323
|
+
var Card2 = React6.forwardRef(
|
|
324
|
+
({ className, variant, padding, children, ...props }, ref) => {
|
|
325
|
+
return /* @__PURE__ */ jsx6(
|
|
326
|
+
Card,
|
|
327
|
+
{
|
|
328
|
+
ref,
|
|
329
|
+
className: cn(cardVariants({ variant, padding }), className),
|
|
330
|
+
...props,
|
|
331
|
+
children
|
|
332
|
+
}
|
|
333
|
+
);
|
|
334
|
+
}
|
|
335
|
+
);
|
|
336
|
+
Card2.displayName = "Card";
|
|
337
|
+
|
|
338
|
+
// src/components/badge/Badge.tsx
|
|
339
|
+
import * as React7 from "react";
|
|
340
|
+
import { cva as cva5 } from "class-variance-authority";
|
|
341
|
+
import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
342
|
+
var badgeVariants = cva5(
|
|
343
|
+
"inline-flex items-center whitespace-nowrap rounded-full transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-2",
|
|
344
|
+
{
|
|
345
|
+
variants: {
|
|
346
|
+
variant: {
|
|
347
|
+
default: "px-8",
|
|
348
|
+
tag: "px-4",
|
|
349
|
+
semantic: "px-3"
|
|
350
|
+
},
|
|
351
|
+
status: {
|
|
352
|
+
default: "bg-berget-badge-default-bg text-berget-badge-default-fg",
|
|
353
|
+
active: "bg-berget-badge-active-bg text-berget-badge-active-fg",
|
|
354
|
+
tagDefault: "bg-berget-badge-tag-default-bg text-berget-badge-tag-default-fg",
|
|
355
|
+
tagActive: "bg-berget-badge-tag-active-bg text-berget-badge-tag-active-fg",
|
|
356
|
+
tagGhost: "bg-berget-badge-tag-ghost-bg text-berget-badge-tag-ghost-fg",
|
|
357
|
+
info: "berget-tint berget-tint-info",
|
|
358
|
+
success: "berget-tint berget-tint-success",
|
|
359
|
+
warning: "berget-tint berget-tint-warning",
|
|
360
|
+
error: "berget-tint berget-tint-error"
|
|
361
|
+
},
|
|
362
|
+
size: {
|
|
363
|
+
sm: "text-xs h-6",
|
|
364
|
+
md: "text-sm h-6"
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
defaultVariants: {
|
|
368
|
+
variant: "default",
|
|
369
|
+
status: "default",
|
|
370
|
+
size: "md"
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
);
|
|
374
|
+
var Badge = React7.forwardRef(
|
|
375
|
+
({ className, variant, status, size, icon, iconGap = 2, children, ...props }, ref) => {
|
|
376
|
+
return /* @__PURE__ */ jsxs2("div", { className: cn(badgeVariants({ variant, status, size }), className), ref, ...props, children: [
|
|
377
|
+
icon && /* @__PURE__ */ jsx7("div", { style: { marginRight: children ? `${iconGap * 0.25}rem` : "0" }, children: icon }),
|
|
378
|
+
children
|
|
379
|
+
] });
|
|
380
|
+
}
|
|
381
|
+
);
|
|
382
|
+
Badge.displayName = "Badge";
|
|
383
|
+
|
|
384
|
+
// src/components/alert/Alert.tsx
|
|
385
|
+
import * as React9 from "react";
|
|
386
|
+
import { cva as cva7 } from "class-variance-authority";
|
|
387
|
+
|
|
388
|
+
// src/primitives/alert.tsx
|
|
389
|
+
import * as React8 from "react";
|
|
390
|
+
import { cva as cva6 } from "class-variance-authority";
|
|
391
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
392
|
+
var alertVariants = cva6(
|
|
393
|
+
"relative w-full rounded-lg p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
|
|
394
|
+
{
|
|
395
|
+
variants: {
|
|
396
|
+
variant: {
|
|
397
|
+
default: "",
|
|
398
|
+
destructive: ""
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
defaultVariants: {
|
|
402
|
+
variant: "default"
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
);
|
|
406
|
+
var Alert = React8.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx8("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
|
|
407
|
+
Alert.displayName = "Alert";
|
|
408
|
+
var AlertTitle = React8.forwardRef(
|
|
409
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx8("h5", { ref, className: cn("mb-1 leading-none tracking-tight", className), ...props })
|
|
410
|
+
);
|
|
411
|
+
AlertTitle.displayName = "AlertTitle";
|
|
412
|
+
var AlertDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props }));
|
|
413
|
+
AlertDescription.displayName = "AlertDescription";
|
|
414
|
+
|
|
415
|
+
// src/components/alert/Alert.tsx
|
|
416
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
417
|
+
var alertVariants2 = cva7("", {
|
|
418
|
+
variants: {
|
|
419
|
+
variant: {
|
|
420
|
+
default: "border-berget-border",
|
|
421
|
+
info: "berget-tint berget-tint-info",
|
|
422
|
+
success: "berget-tint berget-tint-success",
|
|
423
|
+
warning: "berget-tint berget-tint-warning",
|
|
424
|
+
destructive: "berget-tint berget-tint-error"
|
|
425
|
+
}
|
|
426
|
+
},
|
|
427
|
+
defaultVariants: {
|
|
428
|
+
variant: "default"
|
|
429
|
+
}
|
|
430
|
+
});
|
|
431
|
+
var Alert2 = React9.forwardRef(
|
|
432
|
+
({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx9(Alert, { ref, className: cn(alertVariants2({ variant }), className), ...props })
|
|
433
|
+
);
|
|
434
|
+
Alert2.displayName = "Alert";
|
|
435
|
+
|
|
436
|
+
// src/components/input/Input.tsx
|
|
437
|
+
import * as React11 from "react";
|
|
438
|
+
|
|
439
|
+
// src/primitives/input.tsx
|
|
440
|
+
import * as React10 from "react";
|
|
441
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
442
|
+
var Input = React10.forwardRef(
|
|
443
|
+
({ className, type, ...props }, ref) => {
|
|
444
|
+
return /* @__PURE__ */ jsx10(
|
|
445
|
+
"input",
|
|
446
|
+
{
|
|
447
|
+
type,
|
|
448
|
+
className: cn(
|
|
449
|
+
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file: file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
450
|
+
className
|
|
451
|
+
),
|
|
452
|
+
ref,
|
|
453
|
+
...props
|
|
454
|
+
}
|
|
455
|
+
);
|
|
456
|
+
}
|
|
457
|
+
);
|
|
458
|
+
Input.displayName = "Input";
|
|
459
|
+
|
|
460
|
+
// src/components/input/Input.tsx
|
|
461
|
+
import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
462
|
+
var Input2 = React11.forwardRef(
|
|
463
|
+
({ className, icon, actionButton, label, description, error, id, disabled, ...props }, ref) => {
|
|
464
|
+
const generatedId = React11.useId();
|
|
465
|
+
const inputId = id || generatedId;
|
|
466
|
+
const errorId = `${inputId}-error`;
|
|
467
|
+
const descriptionId = `${inputId}-description`;
|
|
468
|
+
const inputElement = /* @__PURE__ */ jsx11(
|
|
469
|
+
Input,
|
|
470
|
+
{
|
|
471
|
+
ref,
|
|
472
|
+
id: inputId,
|
|
473
|
+
disabled,
|
|
474
|
+
"aria-invalid": !!error,
|
|
475
|
+
"aria-describedby": cn(error && errorId, description && descriptionId),
|
|
476
|
+
className: cn(
|
|
477
|
+
"isolate rounded-berget-xs bg-card focus-visible:border-berget-form-focus-border focus-visible:ring-0 focus-visible:ring-offset-0 hover:bg-berget-surface-hover transition-colors duration-200 px-3 sm:px-4 py-2 sm:py-2.5 text-sm",
|
|
478
|
+
icon && "pl-10",
|
|
479
|
+
actionButton && "pr-12",
|
|
480
|
+
error && "border-berget-destructive-foreground/50 bg-berget-destructive",
|
|
481
|
+
disabled && "cursor-not-allowed",
|
|
482
|
+
className
|
|
483
|
+
),
|
|
484
|
+
...props
|
|
485
|
+
}
|
|
486
|
+
);
|
|
487
|
+
if (!icon && !actionButton) {
|
|
488
|
+
return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
|
|
489
|
+
label && /* @__PURE__ */ jsx11(
|
|
490
|
+
"label",
|
|
491
|
+
{
|
|
492
|
+
htmlFor: inputId,
|
|
493
|
+
className: cn(
|
|
494
|
+
"text-sm font-sans leading-none",
|
|
495
|
+
disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground",
|
|
496
|
+
error && "text-berget-destructive-foreground"
|
|
497
|
+
),
|
|
498
|
+
children: label
|
|
499
|
+
}
|
|
500
|
+
),
|
|
501
|
+
inputElement,
|
|
502
|
+
(description || error) && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
|
|
503
|
+
description && /* @__PURE__ */ jsx11(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
|
|
504
|
+
error && /* @__PURE__ */ jsx11(
|
|
505
|
+
Typography,
|
|
506
|
+
{
|
|
507
|
+
variant: "xs",
|
|
508
|
+
id: errorId,
|
|
509
|
+
className: "text-berget-destructive-foreground",
|
|
510
|
+
children: error
|
|
511
|
+
}
|
|
512
|
+
)
|
|
513
|
+
] })
|
|
514
|
+
] });
|
|
515
|
+
}
|
|
516
|
+
return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
|
|
517
|
+
label && /* @__PURE__ */ jsx11(
|
|
518
|
+
"label",
|
|
519
|
+
{
|
|
520
|
+
htmlFor: inputId,
|
|
521
|
+
className: cn(
|
|
522
|
+
"text-sm font-sans leading-none",
|
|
523
|
+
disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground",
|
|
524
|
+
error && "text-berget-destructive-foreground"
|
|
525
|
+
),
|
|
526
|
+
children: label
|
|
527
|
+
}
|
|
528
|
+
),
|
|
529
|
+
/* @__PURE__ */ jsxs3("div", { className: "relative w-full", children: [
|
|
530
|
+
icon && /* @__PURE__ */ jsx11("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: icon }),
|
|
531
|
+
inputElement,
|
|
532
|
+
actionButton && /* @__PURE__ */ jsx11("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
|
|
533
|
+
] }),
|
|
534
|
+
(description || error) && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
|
|
535
|
+
description && /* @__PURE__ */ jsx11(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
|
|
536
|
+
error && /* @__PURE__ */ jsx11(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
|
|
537
|
+
] })
|
|
538
|
+
] });
|
|
539
|
+
}
|
|
540
|
+
);
|
|
541
|
+
Input2.displayName = "Input";
|
|
542
|
+
|
|
543
|
+
// src/components/checkbox/Checkbox.tsx
|
|
544
|
+
import * as React13 from "react";
|
|
545
|
+
import * as CheckboxPrimitive2 from "@radix-ui/react-checkbox";
|
|
546
|
+
import { Check as Check2 } from "lucide-react";
|
|
547
|
+
import { cva as cva8 } from "class-variance-authority";
|
|
548
|
+
|
|
549
|
+
// src/primitives/checkbox.tsx
|
|
550
|
+
import * as React12 from "react";
|
|
551
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
552
|
+
import { Check } from "lucide-react";
|
|
553
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
554
|
+
var Checkbox = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx12(
|
|
555
|
+
CheckboxPrimitive.Root,
|
|
556
|
+
{
|
|
557
|
+
ref,
|
|
558
|
+
className: cn(
|
|
559
|
+
"peer ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
560
|
+
className
|
|
561
|
+
),
|
|
562
|
+
...props,
|
|
563
|
+
children: children ?? /* @__PURE__ */ jsx12(CheckboxPrimitive.Indicator, { className: cn("grid place-content-center"), children: /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4" }) })
|
|
564
|
+
}
|
|
565
|
+
));
|
|
566
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
567
|
+
var CheckboxIndicator = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx12(
|
|
568
|
+
CheckboxPrimitive.Indicator,
|
|
569
|
+
{
|
|
570
|
+
ref,
|
|
571
|
+
className: cn("grid place-content-center", className),
|
|
572
|
+
...props,
|
|
573
|
+
children: children ?? /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4" })
|
|
574
|
+
}
|
|
575
|
+
));
|
|
576
|
+
CheckboxIndicator.displayName = CheckboxPrimitive.Indicator.displayName;
|
|
577
|
+
|
|
578
|
+
// src/components/checkbox/Checkbox.tsx
|
|
579
|
+
import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
580
|
+
var checkboxVariants = cva8(
|
|
581
|
+
"inline-flex items-center justify-center rounded-md transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
582
|
+
{
|
|
583
|
+
variants: {
|
|
584
|
+
variant: {
|
|
585
|
+
default: "text-foreground border border-berget-border-interactive bg-berget-surface-subtle hover:bg-berget-surface-raised",
|
|
586
|
+
error: "border border-berget-destructive-border bg-berget-destructive text-berget-destructive-foreground hover:bg-berget-destructive/90",
|
|
587
|
+
success: "border border-berget-success-border bg-berget-success text-berget-success-foreground hover:bg-berget-success/90"
|
|
588
|
+
},
|
|
589
|
+
size: {
|
|
590
|
+
sm: "w-4 h-4",
|
|
591
|
+
default: "w-5 h-5",
|
|
592
|
+
lg: "w-6 h-6"
|
|
593
|
+
}
|
|
594
|
+
},
|
|
595
|
+
defaultVariants: {
|
|
596
|
+
variant: "default",
|
|
597
|
+
size: "default"
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
);
|
|
601
|
+
var Checkbox2 = React13.forwardRef(
|
|
602
|
+
({ className, variant, size, label, description, error, id, disabled, ...props }, ref) => {
|
|
603
|
+
const generatedId = React13.useId();
|
|
604
|
+
const checkboxId = id || generatedId;
|
|
605
|
+
const errorId = `${checkboxId}-error`;
|
|
606
|
+
return /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3", children: [
|
|
607
|
+
/* @__PURE__ */ jsx13("div", { className: "relative flex items-start pt-0.5", children: /* @__PURE__ */ jsx13(
|
|
608
|
+
Checkbox,
|
|
609
|
+
{
|
|
610
|
+
ref,
|
|
611
|
+
id: checkboxId,
|
|
612
|
+
disabled,
|
|
613
|
+
"aria-invalid": !!error,
|
|
614
|
+
"aria-describedby": error ? errorId : void 0,
|
|
615
|
+
className: cn(
|
|
616
|
+
checkboxVariants({ variant, size }),
|
|
617
|
+
"cursor-pointer",
|
|
618
|
+
disabled && "cursor-not-allowed pointer-events-none",
|
|
619
|
+
className
|
|
620
|
+
),
|
|
621
|
+
...props,
|
|
622
|
+
children: /* @__PURE__ */ jsx13(CheckboxPrimitive2.Indicator, { children: /* @__PURE__ */ jsx13(
|
|
623
|
+
Check2,
|
|
624
|
+
{
|
|
625
|
+
className: "h-4 w-4 text-current stroke-current",
|
|
626
|
+
style: { color: "currentColor", stroke: "currentColor" }
|
|
627
|
+
}
|
|
628
|
+
) })
|
|
629
|
+
}
|
|
630
|
+
) }),
|
|
631
|
+
(label || description || error) && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
|
|
632
|
+
label && /* @__PURE__ */ jsx13(
|
|
633
|
+
"label",
|
|
634
|
+
{
|
|
635
|
+
htmlFor: checkboxId,
|
|
636
|
+
className: cn(
|
|
637
|
+
"text-sm font-sans leading-none",
|
|
638
|
+
disabled ? "text-white/40 cursor-not-allowed" : variant === "error" ? "text-berget-destructive-foreground cursor-pointer" : variant === "success" ? "text-berget-success-foreground cursor-pointer" : "cursor-pointer",
|
|
639
|
+
error && "text-berget-destructive-foreground"
|
|
640
|
+
),
|
|
641
|
+
children: label
|
|
642
|
+
}
|
|
643
|
+
),
|
|
644
|
+
description && /* @__PURE__ */ jsx13(Typography, { variant: "xs", color: "muted", children: description }),
|
|
645
|
+
error && /* @__PURE__ */ jsx13(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
|
|
646
|
+
] })
|
|
647
|
+
] });
|
|
648
|
+
}
|
|
649
|
+
);
|
|
650
|
+
Checkbox2.displayName = "Checkbox";
|
|
651
|
+
|
|
652
|
+
// src/components/switch/Switch.tsx
|
|
653
|
+
import * as React14 from "react";
|
|
654
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
655
|
+
import { cva as cva9 } from "class-variance-authority";
|
|
656
|
+
import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
657
|
+
var switchRootVariants = cva9(
|
|
658
|
+
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-berget-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
|
|
659
|
+
{
|
|
660
|
+
variants: {
|
|
661
|
+
variant: {
|
|
662
|
+
default: "data-[state=unchecked]:bg-berget-border data-[state=checked]:bg-berget-secondary",
|
|
663
|
+
primary: "data-[state=unchecked]:bg-berget-border-subtle data-[state=checked]:bg-berget-switch-primary-checked",
|
|
664
|
+
subtle: "data-[state=unchecked]:bg-berget-border-subtle data-[state=checked]:bg-berget-switch-subtle-checked"
|
|
665
|
+
},
|
|
666
|
+
size: {
|
|
667
|
+
sm: "h-5 w-9",
|
|
668
|
+
default: "h-6 w-11",
|
|
669
|
+
lg: "h-7 w-[52px]"
|
|
670
|
+
}
|
|
671
|
+
},
|
|
672
|
+
defaultVariants: {
|
|
673
|
+
variant: "default",
|
|
674
|
+
size: "default"
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
);
|
|
678
|
+
var switchThumbVariants = cva9(
|
|
679
|
+
"pointer-events-none block rounded-full ring-0 transition-transform shadow-berget-sm bg-berget-foreground",
|
|
680
|
+
{
|
|
681
|
+
variants: {
|
|
682
|
+
size: {
|
|
683
|
+
sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
|
|
684
|
+
default: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
|
|
685
|
+
lg: "h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0"
|
|
686
|
+
}
|
|
687
|
+
},
|
|
688
|
+
defaultVariants: {
|
|
689
|
+
size: "default"
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
);
|
|
693
|
+
var Switch = React14.forwardRef(
|
|
694
|
+
({ className, variant, size, label, description, error, id, disabled, ...props }, ref) => {
|
|
695
|
+
const generatedId = React14.useId();
|
|
696
|
+
const switchId = id || generatedId;
|
|
697
|
+
const errorId = `${switchId}-error`;
|
|
698
|
+
return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
|
|
699
|
+
/* @__PURE__ */ jsx14(
|
|
700
|
+
SwitchPrimitives.Root,
|
|
701
|
+
{
|
|
702
|
+
ref,
|
|
703
|
+
id: switchId,
|
|
704
|
+
disabled,
|
|
705
|
+
"aria-invalid": !!error,
|
|
706
|
+
"aria-describedby": error ? errorId : void 0,
|
|
707
|
+
className: cn(
|
|
708
|
+
switchRootVariants({ variant, size }),
|
|
709
|
+
disabled && "cursor-not-allowed pointer-events-none",
|
|
710
|
+
className
|
|
711
|
+
),
|
|
712
|
+
...props,
|
|
713
|
+
children: /* @__PURE__ */ jsx14(SwitchPrimitives.Thumb, { className: cn(switchThumbVariants({ size })) })
|
|
714
|
+
}
|
|
715
|
+
),
|
|
716
|
+
(label || description || error) && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
|
|
717
|
+
label && /* @__PURE__ */ jsx14(
|
|
718
|
+
"label",
|
|
719
|
+
{
|
|
720
|
+
htmlFor: switchId,
|
|
721
|
+
className: cn(
|
|
722
|
+
"text-sm font-sans leading-none",
|
|
723
|
+
disabled ? "text-muted-foreground cursor-not-allowed" : error ? "text-berget-destructive-foreground cursor-pointer" : "text-foreground cursor-pointer"
|
|
724
|
+
),
|
|
725
|
+
children: label
|
|
726
|
+
}
|
|
727
|
+
),
|
|
728
|
+
description && /* @__PURE__ */ jsx14(Typography, { variant: "xs", color: "muted", children: description }),
|
|
729
|
+
error && /* @__PURE__ */ jsx14(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
|
|
730
|
+
] })
|
|
731
|
+
] });
|
|
732
|
+
}
|
|
733
|
+
);
|
|
734
|
+
Switch.displayName = "Switch";
|
|
735
|
+
|
|
736
|
+
// src/components/select/Select.tsx
|
|
737
|
+
import * as React16 from "react";
|
|
738
|
+
import { cva as cva10 } from "class-variance-authority";
|
|
739
|
+
|
|
740
|
+
// src/primitives/select.tsx
|
|
741
|
+
import * as React15 from "react";
|
|
742
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
743
|
+
import { Check as Check3, ChevronDown, ChevronUp } from "lucide-react";
|
|
744
|
+
import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
745
|
+
var Select = SelectPrimitive.Root;
|
|
746
|
+
var SelectValue = SelectPrimitive.Value;
|
|
747
|
+
var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
|
|
748
|
+
SelectPrimitive.Trigger,
|
|
749
|
+
{
|
|
750
|
+
ref,
|
|
751
|
+
className: cn(
|
|
752
|
+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
753
|
+
className
|
|
754
|
+
),
|
|
755
|
+
...props,
|
|
756
|
+
children: [
|
|
757
|
+
children,
|
|
758
|
+
/* @__PURE__ */ jsx15(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx15(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
759
|
+
]
|
|
760
|
+
}
|
|
761
|
+
));
|
|
762
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
763
|
+
var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
|
|
764
|
+
SelectPrimitive.ScrollUpButton,
|
|
765
|
+
{
|
|
766
|
+
ref,
|
|
767
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
768
|
+
...props,
|
|
769
|
+
children: /* @__PURE__ */ jsx15(ChevronUp, { className: "h-4 w-4" })
|
|
770
|
+
}
|
|
771
|
+
));
|
|
772
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
773
|
+
var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
|
|
774
|
+
SelectPrimitive.ScrollDownButton,
|
|
775
|
+
{
|
|
776
|
+
ref,
|
|
777
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
778
|
+
...props,
|
|
779
|
+
children: /* @__PURE__ */ jsx15(ChevronDown, { className: "h-4 w-4" })
|
|
780
|
+
}
|
|
781
|
+
));
|
|
782
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
783
|
+
var SelectContent = React15.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx15(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs6(
|
|
784
|
+
SelectPrimitive.Content,
|
|
785
|
+
{
|
|
786
|
+
ref,
|
|
787
|
+
className: cn(
|
|
788
|
+
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
|
|
789
|
+
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
790
|
+
className
|
|
791
|
+
),
|
|
792
|
+
position,
|
|
793
|
+
...props,
|
|
794
|
+
children: [
|
|
795
|
+
/* @__PURE__ */ jsx15(SelectScrollUpButton, {}),
|
|
796
|
+
/* @__PURE__ */ jsx15(
|
|
797
|
+
SelectPrimitive.Viewport,
|
|
798
|
+
{
|
|
799
|
+
className: cn(
|
|
800
|
+
"p-1",
|
|
801
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
802
|
+
),
|
|
803
|
+
children
|
|
804
|
+
}
|
|
805
|
+
),
|
|
806
|
+
/* @__PURE__ */ jsx15(SelectScrollDownButton, {})
|
|
807
|
+
]
|
|
808
|
+
}
|
|
809
|
+
) }));
|
|
810
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
811
|
+
var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
|
|
812
|
+
SelectPrimitive.Label,
|
|
813
|
+
{
|
|
814
|
+
ref,
|
|
815
|
+
className: cn("py-1.5 pl-8 pr-2 text-sm ", className),
|
|
816
|
+
...props
|
|
817
|
+
}
|
|
818
|
+
));
|
|
819
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
820
|
+
var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
|
|
821
|
+
SelectPrimitive.Item,
|
|
822
|
+
{
|
|
823
|
+
ref,
|
|
824
|
+
className: cn(
|
|
825
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
826
|
+
className
|
|
827
|
+
),
|
|
828
|
+
...props,
|
|
829
|
+
children: [
|
|
830
|
+
/* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(Check3, { className: "h-4 w-4" }) }) }),
|
|
831
|
+
/* @__PURE__ */ jsx15(SelectPrimitive.ItemText, { children })
|
|
832
|
+
]
|
|
833
|
+
}
|
|
834
|
+
));
|
|
835
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
836
|
+
var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
|
|
837
|
+
SelectPrimitive.Separator,
|
|
838
|
+
{
|
|
839
|
+
ref,
|
|
840
|
+
className: cn("-mx-1 my-1 h-px bg-muted", className),
|
|
841
|
+
...props
|
|
842
|
+
}
|
|
843
|
+
));
|
|
844
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
845
|
+
|
|
846
|
+
// src/components/select/Select.tsx
|
|
847
|
+
import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
848
|
+
var selectVariants = cva10(
|
|
849
|
+
"flex w-full items-center justify-between rounded-berget-xs border bg-card px-4 py-3 text-sm transition-colors duration-200 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border disabled:cursor-not-allowed disabled:opacity-50",
|
|
850
|
+
{
|
|
851
|
+
variants: {
|
|
852
|
+
variant: {
|
|
853
|
+
default: "border-berget-border-interactive hover:bg-berget-surface-hover",
|
|
854
|
+
primary: "border-berget-primary-border bg-berget-primary-tint hover:bg-berget-surface-hover",
|
|
855
|
+
subtle: "border-berget-border-subtle hover:bg-berget-surface-hover",
|
|
856
|
+
muted: "border-berget-border-subtle/50 hover:bg-berget-surface-hover"
|
|
857
|
+
},
|
|
858
|
+
size: {
|
|
859
|
+
sm: "px-3 py-2 text-xs",
|
|
860
|
+
default: "px-4 py-3 text-sm",
|
|
861
|
+
lg: "px-5 py-4 text-base"
|
|
862
|
+
}
|
|
863
|
+
},
|
|
864
|
+
defaultVariants: {
|
|
865
|
+
variant: "default",
|
|
866
|
+
size: "default"
|
|
867
|
+
}
|
|
868
|
+
}
|
|
869
|
+
);
|
|
870
|
+
var Select2 = React16.forwardRef(
|
|
871
|
+
({
|
|
872
|
+
className,
|
|
873
|
+
variant,
|
|
874
|
+
size,
|
|
875
|
+
label,
|
|
876
|
+
description,
|
|
877
|
+
error,
|
|
878
|
+
placeholder,
|
|
879
|
+
options,
|
|
880
|
+
id,
|
|
881
|
+
disabled,
|
|
882
|
+
value,
|
|
883
|
+
defaultValue,
|
|
884
|
+
onValueChange,
|
|
885
|
+
name,
|
|
886
|
+
required
|
|
887
|
+
}, ref) => {
|
|
888
|
+
const generatedId = React16.useId();
|
|
889
|
+
const selectId = id || generatedId;
|
|
890
|
+
const errorId = `${selectId}-error`;
|
|
891
|
+
const descriptionId = `${selectId}-description`;
|
|
892
|
+
return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
|
|
893
|
+
label && /* @__PURE__ */ jsx16(
|
|
894
|
+
"label",
|
|
895
|
+
{
|
|
896
|
+
htmlFor: selectId,
|
|
897
|
+
className: cn(
|
|
898
|
+
"text-sm font-sans leading-none",
|
|
899
|
+
disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground",
|
|
900
|
+
error && "text-berget-destructive-foreground"
|
|
901
|
+
),
|
|
902
|
+
children: label
|
|
903
|
+
}
|
|
904
|
+
),
|
|
905
|
+
/* @__PURE__ */ jsxs7(
|
|
906
|
+
Select,
|
|
907
|
+
{
|
|
908
|
+
value,
|
|
909
|
+
defaultValue,
|
|
910
|
+
onValueChange,
|
|
911
|
+
disabled,
|
|
912
|
+
name,
|
|
913
|
+
required,
|
|
914
|
+
children: [
|
|
915
|
+
/* @__PURE__ */ jsx16(
|
|
916
|
+
SelectTrigger,
|
|
917
|
+
{
|
|
918
|
+
ref,
|
|
919
|
+
id: selectId,
|
|
920
|
+
"aria-invalid": !!error,
|
|
921
|
+
"aria-describedby": cn(error && errorId, description && descriptionId),
|
|
922
|
+
className: cn(
|
|
923
|
+
selectVariants({ variant, size }),
|
|
924
|
+
error && "border-berget-destructive-foreground/50 bg-berget-destructive",
|
|
925
|
+
className
|
|
926
|
+
),
|
|
927
|
+
children: /* @__PURE__ */ jsx16(SelectValue, { placeholder })
|
|
928
|
+
}
|
|
929
|
+
),
|
|
930
|
+
/* @__PURE__ */ jsx16(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx16(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
|
|
931
|
+
]
|
|
932
|
+
}
|
|
933
|
+
),
|
|
934
|
+
description && /* @__PURE__ */ jsx16(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
|
|
935
|
+
error && /* @__PURE__ */ jsx16(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
|
|
936
|
+
] });
|
|
937
|
+
}
|
|
938
|
+
);
|
|
939
|
+
Select2.displayName = "Select";
|
|
940
|
+
|
|
941
|
+
// src/components/text-area/TextArea.tsx
|
|
942
|
+
import * as React18 from "react";
|
|
943
|
+
import { cva as cva11 } from "class-variance-authority";
|
|
944
|
+
|
|
945
|
+
// src/primitives/textarea.tsx
|
|
946
|
+
import * as React17 from "react";
|
|
947
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
948
|
+
var Textarea = React17.forwardRef(
|
|
949
|
+
({ className, ...props }, ref) => {
|
|
950
|
+
return /* @__PURE__ */ jsx17(
|
|
951
|
+
"textarea",
|
|
952
|
+
{
|
|
953
|
+
className: cn(
|
|
954
|
+
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
955
|
+
className
|
|
956
|
+
),
|
|
957
|
+
ref,
|
|
958
|
+
...props
|
|
959
|
+
}
|
|
960
|
+
);
|
|
961
|
+
}
|
|
962
|
+
);
|
|
963
|
+
Textarea.displayName = "Textarea";
|
|
964
|
+
|
|
965
|
+
// src/components/text-area/TextArea.tsx
|
|
966
|
+
import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
967
|
+
var textAreaVariants = cva11(
|
|
968
|
+
"rounded-berget-xs bg-card px-4 py-3 transition-colors duration-200 focus-visible:border-berget-form-focus-border focus-visible:ring-0 focus-visible:ring-offset-0 resize-y",
|
|
969
|
+
{
|
|
970
|
+
variants: {
|
|
971
|
+
variant: {
|
|
972
|
+
default: "border-berget-border-interactive hover:bg-berget-surface-hover",
|
|
973
|
+
primary: "border-berget-primary-border bg-berget-primary-tint hover:bg-berget-surface-hover",
|
|
974
|
+
subtle: "border-berget-border-subtle hover:bg-berget-surface-hover",
|
|
975
|
+
muted: "border-berget-border-subtle/50 hover:bg-berget-surface-hover"
|
|
976
|
+
},
|
|
977
|
+
size: {
|
|
978
|
+
sm: "px-3 py-2 sm:px-4 sm:py-2.5 text-xs sm:text-sm",
|
|
979
|
+
default: "px-4 py-3 sm:py-3.5 text-sm",
|
|
980
|
+
lg: "px-5 py-4 sm:py-5 text-base sm:text-lg"
|
|
981
|
+
}
|
|
982
|
+
},
|
|
983
|
+
defaultVariants: {
|
|
984
|
+
variant: "default",
|
|
985
|
+
size: "default"
|
|
986
|
+
}
|
|
987
|
+
}
|
|
988
|
+
);
|
|
989
|
+
var TextArea = React18.forwardRef(
|
|
990
|
+
({
|
|
991
|
+
className,
|
|
992
|
+
variant,
|
|
993
|
+
size,
|
|
994
|
+
label,
|
|
995
|
+
description,
|
|
996
|
+
error,
|
|
997
|
+
placeholder,
|
|
998
|
+
maxLength,
|
|
999
|
+
showCount,
|
|
1000
|
+
rows,
|
|
1001
|
+
id,
|
|
1002
|
+
disabled,
|
|
1003
|
+
value,
|
|
1004
|
+
icon,
|
|
1005
|
+
secondaryIcon,
|
|
1006
|
+
actionButton,
|
|
1007
|
+
...props
|
|
1008
|
+
}, ref) => {
|
|
1009
|
+
const generatedId = React18.useId();
|
|
1010
|
+
const textareaId = id || generatedId;
|
|
1011
|
+
const errorId = `${textareaId}-error`;
|
|
1012
|
+
const descriptionId = `${textareaId}-description`;
|
|
1013
|
+
const characterCount = typeof value === "string" ? value.length : 0;
|
|
1014
|
+
return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
|
|
1015
|
+
label && /* @__PURE__ */ jsx18(
|
|
1016
|
+
"label",
|
|
1017
|
+
{
|
|
1018
|
+
htmlFor: textareaId,
|
|
1019
|
+
className: cn(
|
|
1020
|
+
"text-sm font-sans leading-none",
|
|
1021
|
+
disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground",
|
|
1022
|
+
error && "text-berget-destructive-foreground"
|
|
1023
|
+
),
|
|
1024
|
+
children: label
|
|
1025
|
+
}
|
|
1026
|
+
),
|
|
1027
|
+
/* @__PURE__ */ jsxs8("div", { className: "relative", children: [
|
|
1028
|
+
icon && /* @__PURE__ */ jsx18("div", { className: "absolute left-2 top-1/2 -translate-y-1/2", children: icon }),
|
|
1029
|
+
/* @__PURE__ */ jsx18(
|
|
1030
|
+
Textarea,
|
|
1031
|
+
{
|
|
1032
|
+
ref,
|
|
1033
|
+
id: textareaId,
|
|
1034
|
+
disabled,
|
|
1035
|
+
"aria-invalid": !!error,
|
|
1036
|
+
"aria-describedby": cn(error && errorId, description && descriptionId),
|
|
1037
|
+
className: cn(
|
|
1038
|
+
textAreaVariants({ variant, size }),
|
|
1039
|
+
error && "border-berget-destructive-foreground/50 bg-berget-destructive",
|
|
1040
|
+
disabled && "cursor-not-allowed",
|
|
1041
|
+
icon && "pl-11",
|
|
1042
|
+
secondaryIcon && "pr-20",
|
|
1043
|
+
actionButton && !secondaryIcon && "pr-12",
|
|
1044
|
+
secondaryIcon && actionButton && "pr-20",
|
|
1045
|
+
className
|
|
1046
|
+
),
|
|
1047
|
+
placeholder,
|
|
1048
|
+
maxLength,
|
|
1049
|
+
rows,
|
|
1050
|
+
value,
|
|
1051
|
+
...props
|
|
1052
|
+
}
|
|
1053
|
+
),
|
|
1054
|
+
secondaryIcon && /* @__PURE__ */ jsx18("div", { className: "absolute right-12 top-1/2 -translate-y-1/2", children: secondaryIcon }),
|
|
1055
|
+
actionButton && /* @__PURE__ */ jsx18("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
|
|
1056
|
+
] }),
|
|
1057
|
+
(description || error || showCount && maxLength) && /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-2", children: [
|
|
1058
|
+
description && /* @__PURE__ */ jsx18(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
|
|
1059
|
+
(error || showCount && maxLength) && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 ml-auto", children: [
|
|
1060
|
+
showCount && maxLength && /* @__PURE__ */ jsxs8(
|
|
1061
|
+
Typography,
|
|
1062
|
+
{
|
|
1063
|
+
variant: "xs",
|
|
1064
|
+
className: cn(
|
|
1065
|
+
characterCount >= maxLength ? "text-berget-destructive-foreground" : "text-muted-foreground"
|
|
1066
|
+
),
|
|
1067
|
+
children: [
|
|
1068
|
+
characterCount,
|
|
1069
|
+
"/",
|
|
1070
|
+
maxLength
|
|
1071
|
+
]
|
|
1072
|
+
}
|
|
1073
|
+
),
|
|
1074
|
+
error && /* @__PURE__ */ jsx18(
|
|
1075
|
+
Typography,
|
|
1076
|
+
{
|
|
1077
|
+
variant: "xs",
|
|
1078
|
+
id: errorId,
|
|
1079
|
+
className: "text-berget-destructive-foreground",
|
|
1080
|
+
children: error
|
|
1081
|
+
}
|
|
1082
|
+
)
|
|
1083
|
+
] })
|
|
1084
|
+
] })
|
|
1085
|
+
] });
|
|
1086
|
+
}
|
|
1087
|
+
);
|
|
1088
|
+
TextArea.displayName = "TextArea";
|
|
1089
|
+
|
|
1090
|
+
// src/primitives/label.tsx
|
|
1091
|
+
import * as React19 from "react";
|
|
1092
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
1093
|
+
import { cva as cva12 } from "class-variance-authority";
|
|
1094
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1095
|
+
var labelVariants = cva12(
|
|
1096
|
+
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
1097
|
+
);
|
|
1098
|
+
var Label2 = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
|
|
1099
|
+
Label2.displayName = LabelPrimitive.Root.displayName;
|
|
1100
|
+
|
|
1101
|
+
// src/primitives/field.tsx
|
|
1102
|
+
import { useMemo } from "react";
|
|
1103
|
+
import { cva as cva13 } from "class-variance-authority";
|
|
1104
|
+
|
|
1105
|
+
// src/primitives/separator.tsx
|
|
1106
|
+
import * as React20 from "react";
|
|
1107
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
1108
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1109
|
+
var Separator2 = React20.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx20(
|
|
1110
|
+
SeparatorPrimitive.Root,
|
|
1111
|
+
{
|
|
1112
|
+
ref,
|
|
1113
|
+
decorative,
|
|
1114
|
+
orientation,
|
|
1115
|
+
className: cn(
|
|
1116
|
+
"shrink-0 bg-border",
|
|
1117
|
+
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
1118
|
+
className
|
|
1119
|
+
),
|
|
1120
|
+
...props
|
|
1121
|
+
}
|
|
1122
|
+
));
|
|
1123
|
+
Separator2.displayName = SeparatorPrimitive.Root.displayName;
|
|
1124
|
+
|
|
1125
|
+
// src/primitives/field.tsx
|
|
1126
|
+
import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1127
|
+
function FieldSet({ className, ...props }) {
|
|
1128
|
+
return /* @__PURE__ */ jsx21(
|
|
1129
|
+
"fieldset",
|
|
1130
|
+
{
|
|
1131
|
+
"data-slot": "field-set",
|
|
1132
|
+
className: cn(
|
|
1133
|
+
"flex flex-col gap-6",
|
|
1134
|
+
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
|
1135
|
+
className
|
|
1136
|
+
),
|
|
1137
|
+
...props
|
|
1138
|
+
}
|
|
1139
|
+
);
|
|
1140
|
+
}
|
|
1141
|
+
function FieldLegend({
|
|
1142
|
+
className,
|
|
1143
|
+
variant = "legend",
|
|
1144
|
+
...props
|
|
1145
|
+
}) {
|
|
1146
|
+
return /* @__PURE__ */ jsx21(
|
|
1147
|
+
"legend",
|
|
1148
|
+
{
|
|
1149
|
+
"data-slot": "field-legend",
|
|
1150
|
+
"data-variant": variant,
|
|
1151
|
+
className: cn(
|
|
1152
|
+
"mb-3 font-medium",
|
|
1153
|
+
"data-[variant=legend]:text-base",
|
|
1154
|
+
"data-[variant=label]:text-sm",
|
|
1155
|
+
className
|
|
1156
|
+
),
|
|
1157
|
+
...props
|
|
1158
|
+
}
|
|
1159
|
+
);
|
|
1160
|
+
}
|
|
1161
|
+
function FieldGroup({ className, ...props }) {
|
|
1162
|
+
return /* @__PURE__ */ jsx21(
|
|
1163
|
+
"div",
|
|
1164
|
+
{
|
|
1165
|
+
"data-slot": "field-group",
|
|
1166
|
+
className: cn(
|
|
1167
|
+
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
|
|
1168
|
+
className
|
|
1169
|
+
),
|
|
1170
|
+
...props
|
|
1171
|
+
}
|
|
1172
|
+
);
|
|
1173
|
+
}
|
|
1174
|
+
var fieldVariants = cva13("group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
|
|
1175
|
+
variants: {
|
|
1176
|
+
orientation: {
|
|
1177
|
+
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
|
|
1178
|
+
horizontal: [
|
|
1179
|
+
"flex-row items-center",
|
|
1180
|
+
"[&>[data-slot=field-label]]:flex-auto",
|
|
1181
|
+
"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
|
|
1182
|
+
],
|
|
1183
|
+
responsive: [
|
|
1184
|
+
"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
|
|
1185
|
+
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
|
|
1186
|
+
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
|
|
1187
|
+
]
|
|
1188
|
+
}
|
|
1189
|
+
},
|
|
1190
|
+
defaultVariants: {
|
|
1191
|
+
orientation: "vertical"
|
|
1192
|
+
}
|
|
1193
|
+
});
|
|
1194
|
+
function Field({
|
|
1195
|
+
className,
|
|
1196
|
+
orientation = "vertical",
|
|
1197
|
+
...props
|
|
1198
|
+
}) {
|
|
1199
|
+
return /* @__PURE__ */ jsx21(
|
|
1200
|
+
"div",
|
|
1201
|
+
{
|
|
1202
|
+
role: "group",
|
|
1203
|
+
"data-slot": "field",
|
|
1204
|
+
"data-orientation": orientation,
|
|
1205
|
+
className: cn(fieldVariants({ orientation }), className),
|
|
1206
|
+
...props
|
|
1207
|
+
}
|
|
1208
|
+
);
|
|
1209
|
+
}
|
|
1210
|
+
function FieldContent({ className, ...props }) {
|
|
1211
|
+
return /* @__PURE__ */ jsx21(
|
|
1212
|
+
"div",
|
|
1213
|
+
{
|
|
1214
|
+
"data-slot": "field-content",
|
|
1215
|
+
className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
|
|
1216
|
+
...props
|
|
1217
|
+
}
|
|
1218
|
+
);
|
|
1219
|
+
}
|
|
1220
|
+
function FieldLabel({ className, ...props }) {
|
|
1221
|
+
return /* @__PURE__ */ jsx21(
|
|
1222
|
+
Label2,
|
|
1223
|
+
{
|
|
1224
|
+
"data-slot": "field-label",
|
|
1225
|
+
className: cn(
|
|
1226
|
+
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
|
|
1227
|
+
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
|
|
1228
|
+
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
|
|
1229
|
+
className
|
|
1230
|
+
),
|
|
1231
|
+
...props
|
|
1232
|
+
}
|
|
1233
|
+
);
|
|
1234
|
+
}
|
|
1235
|
+
function FieldTitle({ className, ...props }) {
|
|
1236
|
+
return /* @__PURE__ */ jsx21(
|
|
1237
|
+
"div",
|
|
1238
|
+
{
|
|
1239
|
+
"data-slot": "field-label",
|
|
1240
|
+
className: cn(
|
|
1241
|
+
"flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
|
|
1242
|
+
className
|
|
1243
|
+
),
|
|
1244
|
+
...props
|
|
1245
|
+
}
|
|
1246
|
+
);
|
|
1247
|
+
}
|
|
1248
|
+
function FieldDescription({ className, ...props }) {
|
|
1249
|
+
return /* @__PURE__ */ jsx21(
|
|
1250
|
+
"p",
|
|
1251
|
+
{
|
|
1252
|
+
"data-slot": "field-description",
|
|
1253
|
+
className: cn(
|
|
1254
|
+
"text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
|
|
1255
|
+
"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
|
|
1256
|
+
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
|
|
1257
|
+
className
|
|
1258
|
+
),
|
|
1259
|
+
...props
|
|
1260
|
+
}
|
|
1261
|
+
);
|
|
1262
|
+
}
|
|
1263
|
+
function FieldSeparator({
|
|
1264
|
+
children,
|
|
1265
|
+
className,
|
|
1266
|
+
...props
|
|
1267
|
+
}) {
|
|
1268
|
+
return /* @__PURE__ */ jsxs9(
|
|
1269
|
+
"div",
|
|
1270
|
+
{
|
|
1271
|
+
"data-slot": "field-separator",
|
|
1272
|
+
"data-content": !!children,
|
|
1273
|
+
className: cn(
|
|
1274
|
+
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
|
|
1275
|
+
className
|
|
1276
|
+
),
|
|
1277
|
+
...props,
|
|
1278
|
+
children: [
|
|
1279
|
+
/* @__PURE__ */ jsx21(Separator2, { className: "absolute inset-0 top-1/2" }),
|
|
1280
|
+
children && /* @__PURE__ */ jsx21(
|
|
1281
|
+
"span",
|
|
1282
|
+
{
|
|
1283
|
+
className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
|
|
1284
|
+
"data-slot": "field-separator-content",
|
|
1285
|
+
children
|
|
1286
|
+
}
|
|
1287
|
+
)
|
|
1288
|
+
]
|
|
1289
|
+
}
|
|
1290
|
+
);
|
|
1291
|
+
}
|
|
1292
|
+
function FieldError({
|
|
1293
|
+
className,
|
|
1294
|
+
children,
|
|
1295
|
+
errors,
|
|
1296
|
+
...props
|
|
1297
|
+
}) {
|
|
1298
|
+
const content = useMemo(() => {
|
|
1299
|
+
if (children) {
|
|
1300
|
+
return children;
|
|
1301
|
+
}
|
|
1302
|
+
if (!errors) {
|
|
1303
|
+
return null;
|
|
1304
|
+
}
|
|
1305
|
+
if (errors?.length === 1 && errors[0]?.message) {
|
|
1306
|
+
return errors[0].message;
|
|
1307
|
+
}
|
|
1308
|
+
return /* @__PURE__ */ jsx21("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map((error, index) => error?.message && /* @__PURE__ */ jsx21("li", { children: error.message }, index)) });
|
|
1309
|
+
}, [children, errors]);
|
|
1310
|
+
if (!content) {
|
|
1311
|
+
return null;
|
|
1312
|
+
}
|
|
1313
|
+
return /* @__PURE__ */ jsx21(
|
|
1314
|
+
"div",
|
|
1315
|
+
{
|
|
1316
|
+
role: "alert",
|
|
1317
|
+
"data-slot": "field-error",
|
|
1318
|
+
className: cn("text-destructive text-sm font-normal", className),
|
|
1319
|
+
...props,
|
|
1320
|
+
children: content
|
|
1321
|
+
}
|
|
1322
|
+
);
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
// src/components/link/Link.tsx
|
|
1326
|
+
import * as React21 from "react";
|
|
1327
|
+
import { cva as cva14 } from "class-variance-authority";
|
|
1328
|
+
import { ExternalLink } from "lucide-react";
|
|
1329
|
+
import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1330
|
+
var linkVariants = cva14(
|
|
1331
|
+
"inline-flex items-center gap-2 transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
|
|
1332
|
+
{
|
|
1333
|
+
variants: {
|
|
1334
|
+
variant: {
|
|
1335
|
+
default: "text-foreground hover:text-foreground/80",
|
|
1336
|
+
primary: "text-berget-secondary hover:text-berget-secondary/80",
|
|
1337
|
+
secondary: "text-berget-accent hover:text-berget-accent/80",
|
|
1338
|
+
ghost: "text-muted-foreground hover:text-foreground",
|
|
1339
|
+
muted: "text-muted-foreground hover:text-muted-foreground/80",
|
|
1340
|
+
code: "text-berget-secondary hover:text-berget-secondary/80 font-mono text-sm bg-berget-primary-tint px-2 py-1 rounded hover:bg-berget-primary-tint-hover"
|
|
1341
|
+
},
|
|
1342
|
+
size: {
|
|
1343
|
+
sm: "text-sm",
|
|
1344
|
+
default: "text-base",
|
|
1345
|
+
lg: "text-lg"
|
|
1346
|
+
}
|
|
1347
|
+
},
|
|
1348
|
+
defaultVariants: {
|
|
1349
|
+
variant: "default",
|
|
1350
|
+
size: "default"
|
|
1351
|
+
}
|
|
1352
|
+
}
|
|
1353
|
+
);
|
|
1354
|
+
var Link = React21.forwardRef(
|
|
1355
|
+
({
|
|
1356
|
+
className,
|
|
1357
|
+
variant,
|
|
1358
|
+
size,
|
|
1359
|
+
external = false,
|
|
1360
|
+
icon,
|
|
1361
|
+
showExternalIcon = false,
|
|
1362
|
+
disabled = false,
|
|
1363
|
+
children,
|
|
1364
|
+
...props
|
|
1365
|
+
}, ref) => {
|
|
1366
|
+
const isExternal = external || typeof props.href === "string" && (props.href.startsWith("http://") || props.href.startsWith("https://") || props.href.startsWith("mailto:") || props.href.startsWith("tel:"));
|
|
1367
|
+
return /* @__PURE__ */ jsxs10(
|
|
1368
|
+
"a",
|
|
1369
|
+
{
|
|
1370
|
+
ref,
|
|
1371
|
+
className: cn(linkVariants({ variant, size }), className),
|
|
1372
|
+
...disabled && {
|
|
1373
|
+
"aria-disabled": true,
|
|
1374
|
+
onClick: (e) => e.preventDefault()
|
|
1375
|
+
},
|
|
1376
|
+
...props,
|
|
1377
|
+
...isExternal && !disabled && {
|
|
1378
|
+
rel: "noopener noreferrer",
|
|
1379
|
+
target: "_blank"
|
|
1380
|
+
},
|
|
1381
|
+
children: [
|
|
1382
|
+
children,
|
|
1383
|
+
icon && /* @__PURE__ */ jsx22("span", { className: "inline-flex items-center", children: icon }),
|
|
1384
|
+
showExternalIcon && isExternal && !disabled && /* @__PURE__ */ jsx22("span", { className: "inline-flex items-center ml-1 opacity-60", "aria-hidden": "true", children: /* @__PURE__ */ jsx22(Icon, { icon: ExternalLink, size: 16 }) })
|
|
1385
|
+
]
|
|
1386
|
+
}
|
|
1387
|
+
);
|
|
1388
|
+
}
|
|
1389
|
+
);
|
|
1390
|
+
Link.displayName = "Link";
|
|
1391
|
+
|
|
1392
|
+
// src/components/section/Section.tsx
|
|
1393
|
+
import * as React23 from "react";
|
|
1394
|
+
import { cva as cva16 } from "class-variance-authority";
|
|
1395
|
+
|
|
1396
|
+
// src/components/container/Container.tsx
|
|
1397
|
+
import * as React22 from "react";
|
|
1398
|
+
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
1399
|
+
import { cva as cva15 } from "class-variance-authority";
|
|
1400
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1401
|
+
var containerVariants = cva15("w-full mx-auto", {
|
|
1402
|
+
variants: {
|
|
1403
|
+
size: {
|
|
1404
|
+
sm: "max-w-3xl",
|
|
1405
|
+
md: "max-w-5xl",
|
|
1406
|
+
lg: "max-w-7xl",
|
|
1407
|
+
xl: "max-w-screen-xl",
|
|
1408
|
+
full: "max-w-full"
|
|
1409
|
+
},
|
|
1410
|
+
padding: {
|
|
1411
|
+
none: "px-0",
|
|
1412
|
+
sm: "px-4 sm:px-6",
|
|
1413
|
+
md: "px-4 sm:px-6 lg:px-8",
|
|
1414
|
+
lg: "px-4 sm:px-8 lg:px-12"
|
|
1415
|
+
}
|
|
1416
|
+
},
|
|
1417
|
+
defaultVariants: {
|
|
1418
|
+
size: "lg",
|
|
1419
|
+
padding: "md"
|
|
1420
|
+
}
|
|
1421
|
+
});
|
|
1422
|
+
var Container = React22.forwardRef(
|
|
1423
|
+
({ className, size, padding, asChild = false, children, ...props }, ref) => {
|
|
1424
|
+
const Component = asChild ? Slot2 : "div";
|
|
1425
|
+
return /* @__PURE__ */ jsx23(
|
|
1426
|
+
Component,
|
|
1427
|
+
{
|
|
1428
|
+
ref,
|
|
1429
|
+
className: cn(containerVariants({ size, padding }), className),
|
|
1430
|
+
...props,
|
|
1431
|
+
children
|
|
1432
|
+
}
|
|
1433
|
+
);
|
|
1434
|
+
}
|
|
1435
|
+
);
|
|
1436
|
+
Container.displayName = "Container";
|
|
1437
|
+
|
|
1438
|
+
// src/components/section/Section.tsx
|
|
1439
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1440
|
+
var sectionVariants = cva16("relative", {
|
|
1441
|
+
variants: {
|
|
1442
|
+
padding: {
|
|
1443
|
+
none: "",
|
|
1444
|
+
sm: "py-12",
|
|
1445
|
+
md: "py-16",
|
|
1446
|
+
lg: "py-24",
|
|
1447
|
+
xl: "py-32"
|
|
1448
|
+
},
|
|
1449
|
+
background: {
|
|
1450
|
+
transparent: "",
|
|
1451
|
+
muted: "bg-berget-section-muted-bg"
|
|
1452
|
+
}
|
|
1453
|
+
},
|
|
1454
|
+
defaultVariants: {
|
|
1455
|
+
padding: "lg",
|
|
1456
|
+
background: "transparent"
|
|
1457
|
+
}
|
|
1458
|
+
});
|
|
1459
|
+
var Section = React23.forwardRef(
|
|
1460
|
+
({ className, padding, background, children, ...props }, ref) => {
|
|
1461
|
+
return /* @__PURE__ */ jsx24(
|
|
1462
|
+
"section",
|
|
1463
|
+
{
|
|
1464
|
+
ref,
|
|
1465
|
+
className: cn(sectionVariants({ padding, background }), className),
|
|
1466
|
+
...props,
|
|
1467
|
+
children: /* @__PURE__ */ jsx24(Container, { children })
|
|
1468
|
+
}
|
|
1469
|
+
);
|
|
1470
|
+
}
|
|
1471
|
+
);
|
|
1472
|
+
Section.displayName = "Section";
|
|
1473
|
+
|
|
1474
|
+
// src/components/section-header/SectionHeader.tsx
|
|
1475
|
+
import * as React24 from "react";
|
|
1476
|
+
import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1477
|
+
var SectionHeader = React24.forwardRef(
|
|
1478
|
+
({
|
|
1479
|
+
className,
|
|
1480
|
+
title,
|
|
1481
|
+
description,
|
|
1482
|
+
descriptionVariant = "large",
|
|
1483
|
+
tagline,
|
|
1484
|
+
action,
|
|
1485
|
+
headingLevel = "h2",
|
|
1486
|
+
id,
|
|
1487
|
+
...props
|
|
1488
|
+
}, ref) => {
|
|
1489
|
+
return /* @__PURE__ */ jsx25(
|
|
1490
|
+
"div",
|
|
1491
|
+
{
|
|
1492
|
+
id,
|
|
1493
|
+
ref,
|
|
1494
|
+
className: cn("w-full px-fluid-md py-fluid-xl text-center", className),
|
|
1495
|
+
...props,
|
|
1496
|
+
children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-fluid-lg", children: [
|
|
1497
|
+
/* @__PURE__ */ jsxs11("div", { className: "max-w-3xl mx-auto flex flex-col items-center gap-fluid-lg", children: [
|
|
1498
|
+
tagline && /* @__PURE__ */ jsx25(Badge, { variant: "default", className: "text-sm", children: tagline }),
|
|
1499
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-fluid-sm", children: [
|
|
1500
|
+
/* @__PURE__ */ jsx25(Typography, { variant: headingLevel, children: title }),
|
|
1501
|
+
description && /* @__PURE__ */ jsx25(Typography, { variant: descriptionVariant, color: "muted", children: description })
|
|
1502
|
+
] })
|
|
1503
|
+
] }),
|
|
1504
|
+
action && /* @__PURE__ */ jsx25("div", { className: "mt-4", children: action })
|
|
1505
|
+
] })
|
|
1506
|
+
}
|
|
1507
|
+
);
|
|
1508
|
+
}
|
|
1509
|
+
);
|
|
1510
|
+
SectionHeader.displayName = "SectionHeader";
|
|
1511
|
+
|
|
1512
|
+
// src/components/grid/Grid.tsx
|
|
1513
|
+
import * as React25 from "react";
|
|
1514
|
+
import { cva as cva17 } from "class-variance-authority";
|
|
1515
|
+
import { Slot as Slot3 } from "@radix-ui/react-slot";
|
|
1516
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
1517
|
+
var gridVariants = cva17("grid", {
|
|
1518
|
+
variants: {
|
|
1519
|
+
align: {
|
|
1520
|
+
start: "items-start",
|
|
1521
|
+
center: "items-center",
|
|
1522
|
+
end: "items-end",
|
|
1523
|
+
stretch: "items-stretch"
|
|
1524
|
+
},
|
|
1525
|
+
justify: {
|
|
1526
|
+
start: "justify-start",
|
|
1527
|
+
center: "justify-center",
|
|
1528
|
+
end: "justify-end",
|
|
1529
|
+
between: "justify-between",
|
|
1530
|
+
around: "justify-around",
|
|
1531
|
+
evenly: "justify-evenly"
|
|
1532
|
+
}
|
|
1533
|
+
},
|
|
1534
|
+
defaultVariants: {
|
|
1535
|
+
align: "stretch",
|
|
1536
|
+
justify: "start"
|
|
1537
|
+
}
|
|
1538
|
+
});
|
|
1539
|
+
var Grid = React25.forwardRef(
|
|
1540
|
+
({ className, align, justify, cols, rows, gap, gapX, gapY, asChild = false, children, ...props }, ref) => {
|
|
1541
|
+
const Component = asChild ? Slot3 : "div";
|
|
1542
|
+
return /* @__PURE__ */ jsx26(
|
|
1543
|
+
Component,
|
|
1544
|
+
{
|
|
1545
|
+
ref,
|
|
1546
|
+
className: cn(
|
|
1547
|
+
gridVariants({ align, justify }),
|
|
1548
|
+
cols !== void 0 && `grid-cols-${cols}`,
|
|
1549
|
+
rows !== void 0 && `grid-rows-${rows}`,
|
|
1550
|
+
gap !== void 0 && `gap-${gap}`,
|
|
1551
|
+
gapX !== void 0 && `gap-x-${gapX}`,
|
|
1552
|
+
gapY !== void 0 && `gap-y-${gapY}`,
|
|
1553
|
+
className
|
|
1554
|
+
),
|
|
1555
|
+
...props,
|
|
1556
|
+
children
|
|
1557
|
+
}
|
|
1558
|
+
);
|
|
1559
|
+
}
|
|
1560
|
+
);
|
|
1561
|
+
Grid.displayName = "Grid";
|
|
1562
|
+
|
|
1563
|
+
// src/components/box/Box.tsx
|
|
1564
|
+
import * as React26 from "react";
|
|
1565
|
+
import { cva as cva18 } from "class-variance-authority";
|
|
1566
|
+
import { Slot as Slot4 } from "@radix-ui/react-slot";
|
|
1567
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
1568
|
+
var boxVariants = cva18("flex", {
|
|
1569
|
+
variants: {
|
|
1570
|
+
direction: {
|
|
1571
|
+
row: "flex-row",
|
|
1572
|
+
column: "flex-col",
|
|
1573
|
+
"row-reverse": "flex-row-reverse",
|
|
1574
|
+
"column-reverse": "flex-col-reverse"
|
|
1575
|
+
},
|
|
1576
|
+
align: {
|
|
1577
|
+
start: "items-start",
|
|
1578
|
+
center: "items-center",
|
|
1579
|
+
end: "items-end",
|
|
1580
|
+
stretch: "items-stretch",
|
|
1581
|
+
baseline: "items-baseline"
|
|
1582
|
+
},
|
|
1583
|
+
justify: {
|
|
1584
|
+
start: "justify-start",
|
|
1585
|
+
center: "justify-center",
|
|
1586
|
+
end: "justify-end",
|
|
1587
|
+
between: "justify-between",
|
|
1588
|
+
around: "justify-around",
|
|
1589
|
+
evenly: "justify-evenly"
|
|
1590
|
+
},
|
|
1591
|
+
wrap: {
|
|
1592
|
+
nowrap: "flex-nowrap",
|
|
1593
|
+
wrap: "flex-wrap",
|
|
1594
|
+
"wrap-reverse": "flex-wrap-reverse"
|
|
1595
|
+
}
|
|
1596
|
+
},
|
|
1597
|
+
defaultVariants: {
|
|
1598
|
+
direction: "column",
|
|
1599
|
+
align: "start",
|
|
1600
|
+
justify: "start",
|
|
1601
|
+
wrap: "nowrap"
|
|
1602
|
+
}
|
|
1603
|
+
});
|
|
1604
|
+
var Box = React26.forwardRef(
|
|
1605
|
+
({ className, direction, align, justify, wrap, gap, asChild = false, children, ...props }, ref) => {
|
|
1606
|
+
const Component = asChild ? Slot4 : "div";
|
|
1607
|
+
return /* @__PURE__ */ jsx27(
|
|
1608
|
+
Component,
|
|
1609
|
+
{
|
|
1610
|
+
ref,
|
|
1611
|
+
className: cn(
|
|
1612
|
+
boxVariants({ direction, align, justify, wrap }),
|
|
1613
|
+
gap !== void 0 && `gap-${gap}`,
|
|
1614
|
+
className
|
|
1615
|
+
),
|
|
1616
|
+
...props,
|
|
1617
|
+
children
|
|
1618
|
+
}
|
|
1619
|
+
);
|
|
1620
|
+
}
|
|
1621
|
+
);
|
|
1622
|
+
Box.displayName = "Box";
|
|
1623
|
+
|
|
1624
|
+
// src/components/berget-logo/BergetLogo.tsx
|
|
1625
|
+
import * as React27 from "react";
|
|
1626
|
+
import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1627
|
+
var BergetLogo = React27.forwardRef(
|
|
1628
|
+
({ variant = "logotype", color = "white", size = 48, className, ...props }, ref) => {
|
|
1629
|
+
const fillColor = color === "white" ? "var(--berget-logo-light)" : "var(--berget-logo-dark)";
|
|
1630
|
+
if (variant === "symbol") {
|
|
1631
|
+
const aspectRatio2 = 463 / 419;
|
|
1632
|
+
const width2 = size * aspectRatio2;
|
|
1633
|
+
const height2 = size;
|
|
1634
|
+
return /* @__PURE__ */ jsx28(
|
|
1635
|
+
"svg",
|
|
1636
|
+
{
|
|
1637
|
+
ref,
|
|
1638
|
+
width: width2,
|
|
1639
|
+
height: height2,
|
|
1640
|
+
viewBox: "0 0 463 419",
|
|
1641
|
+
fill: "none",
|
|
1642
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1643
|
+
role: "img",
|
|
1644
|
+
"aria-label": "Berget symbol",
|
|
1645
|
+
className: cn("inline-block", className),
|
|
1646
|
+
...props,
|
|
1647
|
+
children: /* @__PURE__ */ jsx28(
|
|
1648
|
+
"path",
|
|
1649
|
+
{
|
|
1650
|
+
d: "M208.739 17L255.261 17L446 403L398 403L313.5 255L261.5 176L233.163 96.1677L237.815 98.6522H226.185L230.837 96.1677L113 331L64.5 403L18 403L208.739 17Z",
|
|
1651
|
+
style: { fill: fillColor }
|
|
1652
|
+
}
|
|
1653
|
+
)
|
|
1654
|
+
}
|
|
1655
|
+
);
|
|
1656
|
+
}
|
|
1657
|
+
const aspectRatio = 793.63 / 204.37;
|
|
1658
|
+
const width = size * aspectRatio;
|
|
1659
|
+
const height = size;
|
|
1660
|
+
return /* @__PURE__ */ jsxs12(
|
|
1661
|
+
"svg",
|
|
1662
|
+
{
|
|
1663
|
+
ref,
|
|
1664
|
+
width,
|
|
1665
|
+
height,
|
|
1666
|
+
viewBox: "0 0 793.63 204.37",
|
|
1667
|
+
fill: "none",
|
|
1668
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1669
|
+
role: "img",
|
|
1670
|
+
"aria-label": "Berget",
|
|
1671
|
+
className: cn("inline-block", className),
|
|
1672
|
+
...props,
|
|
1673
|
+
children: [
|
|
1674
|
+
/* @__PURE__ */ jsxs12("g", { style: { fill: fillColor }, children: [
|
|
1675
|
+
/* @__PURE__ */ jsx28(
|
|
1676
|
+
"path",
|
|
1677
|
+
{
|
|
1678
|
+
className: "berget-logotype-fill",
|
|
1679
|
+
d: "M268.78,172.54v-96.04h37.74c10.39,0,18.26,2.33,23.6,7,5.33,4.67,8.01,10.52,8.01,17.56,0,6.13-1.72,11-5.15,14.61-3.43,3.61-7.58,6.06-12.44,7.34,3.81.73,7.22,2.2,10.22,4.39,3.01,2.2,5.36,4.94,7.08,8.23,1.72,3.29,2.58,6.86,2.58,10.7,0,4.94-1.27,9.4-3.79,13.38-2.53,3.98-6.22,7.11-11.08,9.4-4.86,2.29-10.82,3.43-17.87,3.43h-38.89ZM283.93,117.66h20.74c5.81,0,10.24-1.3,13.29-3.91,3.05-2.61,4.58-6.19,4.58-10.77s-1.51-8.05-4.51-10.7c-3-2.65-7.55-3.98-13.65-3.98h-20.45v29.36ZM283.93,160.61h21.74c6.1,0,10.84-1.37,14.22-4.11,3.38-2.75,5.08-6.59,5.08-11.53s-1.76-8.85-5.29-11.73-8.29-4.32-14.3-4.32h-21.45v31.69Z"
|
|
1680
|
+
}
|
|
1681
|
+
),
|
|
1682
|
+
/* @__PURE__ */ jsx28(
|
|
1683
|
+
"path",
|
|
1684
|
+
{
|
|
1685
|
+
className: "berget-logotype-fill",
|
|
1686
|
+
d: "M382.45,174.19c-6.96,0-13.13-1.49-18.52-4.46-5.39-2.97-9.6-7.11-12.65-12.42-3.05-5.3-4.57-11.48-4.57-18.52s1.5-13.4,4.5-18.79,7.19-9.61,12.58-12.62c5.39-3.02,11.65-4.53,18.81-4.53s13,1.48,18.15,4.46c5.15,2.97,9.16,6.93,12.01,11.87,2.86,4.94,4.29,10.38,4.29,16.33,0,.92-.02,1.9-.07,2.95-.05,1.05-.12,2.22-.22,3.5h-55.19c.48,6.59,2.75,11.59,6.79,15.02,4.05,3.43,8.75,5.14,14.09,5.14,4.29,0,7.89-.93,10.79-2.81,2.91-1.88,5.08-4.41,6.51-7.61h15.16c-1.91,6.4-5.7,11.75-11.37,16.05-5.68,4.3-12.71,6.45-21.09,6.45ZM382.45,114.78c-5.05,0-9.54,1.44-13.44,4.32-3.91,2.88-6.29,7.2-7.15,12.97h40.04c-.29-5.3-2.24-9.51-5.87-12.62-3.62-3.11-8.15-4.67-13.58-4.67Z"
|
|
1687
|
+
}
|
|
1688
|
+
),
|
|
1689
|
+
/* @__PURE__ */ jsx28(
|
|
1690
|
+
"path",
|
|
1691
|
+
{
|
|
1692
|
+
className: "berget-logotype-fill",
|
|
1693
|
+
d: "M425.62,172.54v-68.05h13.59l1.29,12.9c2.47-4.48,5.93-8.03,10.37-10.63,4.43-2.61,9.79-3.91,16.08-3.91v15.23h-4.15c-4.19,0-7.93.67-11.22,1.99-3.29,1.33-5.91,3.57-7.86,6.72-1.96,3.16-2.93,7.53-2.93,13.1v32.65h-15.16Z"
|
|
1694
|
+
}
|
|
1695
|
+
),
|
|
1696
|
+
/* @__PURE__ */ jsx28(
|
|
1697
|
+
"path",
|
|
1698
|
+
{
|
|
1699
|
+
className: "berget-logotype-fill",
|
|
1700
|
+
d: "M500.25,151.69c-3.72,0-7.14-.41-10.29-1.24l-6.15,5.76c1.05.64,2.34,1.19,3.86,1.65,1.52.46,3.66.87,6.43,1.23,2.76.37,6.53.73,11.29,1.1,9.43.82,16.25,3,20.44,6.52,4.2,3.52,6.29,8.21,6.29,14.06,0,4.02-1.12,7.84-3.35,11.45-2.24,3.61-5.72,6.54-10.44,8.78s-10.74,3.36-18.09,3.36c-9.91,0-17.94-1.8-24.09-5.42-6.15-3.62-9.22-9.08-9.22-16.4,0-2.84.78-5.65,2.35-8.44,1.57-2.79,4.08-5.42,7.51-7.89-2-.83-3.74-1.72-5.22-2.68-1.48-.96-2.79-1.94-3.94-2.95v-3.29l12.3-12.07c-5.53-4.57-8.29-10.56-8.29-17.97,0-4.48,1.12-8.58,3.36-12.28,2.24-3.7,5.5-6.65,9.79-8.85,4.29-2.2,9.43-3.29,15.44-3.29,4.01,0,7.72.55,11.15,1.64h26.45v9.6l-12.58.69c2.28,3.75,3.43,7.91,3.43,12.49s-1.13,8.69-3.36,12.35c-2.24,3.66-5.48,6.59-9.72,8.78-4.25,2.2-9.37,3.29-15.37,3.29ZM481.24,181.19c0,3.93,1.81,6.88,5.44,8.85,3.62,1.97,8.15,2.95,13.58,2.95s9.48-1.07,12.72-3.22c3.24-2.15,4.86-5,4.86-8.57,0-2.65-1.09-4.92-3.29-6.79-2.19-1.87-6.34-3.04-12.44-3.5-4.57-.27-8.63-.68-12.15-1.23-3.34,1.74-5.63,3.61-6.86,5.63-1.25,2.01-1.86,3.98-1.86,5.9ZM500.25,140.3c4.38,0,7.93-1.12,10.66-3.36,2.71-2.24,4.07-5.42,4.07-9.53s-1.36-7.41-4.07-9.6c-2.72-2.2-6.27-3.29-10.66-3.29s-8.08,1.1-10.79,3.29c-2.71,2.2-4.08,5.4-4.08,9.6s1.36,7.3,4.08,9.53c2.71,2.24,6.31,3.36,10.79,3.36Z"
|
|
1701
|
+
}
|
|
1702
|
+
),
|
|
1703
|
+
/* @__PURE__ */ jsx28(
|
|
1704
|
+
"path",
|
|
1705
|
+
{
|
|
1706
|
+
className: "berget-logotype-fill",
|
|
1707
|
+
d: "M574.61,174.19c-6.96,0-13.13-1.49-18.52-4.46-5.39-2.97-9.6-7.11-12.65-12.42-3.05-5.3-4.57-11.48-4.57-18.52s1.5-13.4,4.5-18.79c3-5.4,7.19-9.61,12.58-12.62c5.39-3.02,11.65-4.53,18.81-4.53s13,1.48,18.15,4.46c5.15,2.97,9.16,6.93,12.01,11.87,2.86,4.94,4.29,10.38,4.29,16.33,0,.92-.02,1.9-.07,2.95-.05,1.05-.12,2.22-.22,3.5h-55.19c.48,6.59,2.75,11.59,6.79,15.02,4.05,3.43,8.75,5.14,14.09,5.14,4.29,0,7.89-.93,10.79-2.81s5.08-4.41,6.51-7.61h15.16c-1.91,6.4-5.7,11.75-11.37,16.05-5.68,4.3-12.71,6.45-21.09,6.45ZM574.61,114.78c-5.05,0-9.54,1.44-13.44,4.32-3.91,2.88-6.29,7.2-7.15,12.97h40.04c-.29-5.3-2.24-9.51-5.87-12.62-3.62-3.11-8.15-4.67-13.58-4.67Z"
|
|
1708
|
+
}
|
|
1709
|
+
),
|
|
1710
|
+
/* @__PURE__ */ jsx28(
|
|
1711
|
+
"path",
|
|
1712
|
+
{
|
|
1713
|
+
className: "berget-logotype-fill",
|
|
1714
|
+
d: "M646.23,172.54c-6.96,0-12.49-1.62-16.59-4.87-4.1-3.25-6.15-9.03-6.15-17.36v-33.61h-12.16v-12.21h12.16l1.86-17.29h13.29v17.29h20.02v12.21h-20.02v33.61c0,3.75.84,6.33,2.51,7.75,1.67,1.42,4.55,2.13,8.65,2.13h8.14v12.35h-11.72Z"
|
|
1715
|
+
}
|
|
1716
|
+
),
|
|
1717
|
+
/* @__PURE__ */ jsx28(
|
|
1718
|
+
"path",
|
|
1719
|
+
{
|
|
1720
|
+
className: "berget-logotype-fill",
|
|
1721
|
+
d: "M684.4,172.54l36.89-96.04h16.59l36.6,96.04h-16.01l-8.58-23.46h-40.88l-8.58,23.46h-16.01ZM713.28,137.56h32.31l-16.16-43.77-16.16,43.77Z"
|
|
1722
|
+
}
|
|
1723
|
+
),
|
|
1724
|
+
/* @__PURE__ */ jsx28("path", { className: "berget-logotype-fill", d: "M778.48,172.54v-96.04h15.15v96.04h-15.15Z" })
|
|
1725
|
+
] }),
|
|
1726
|
+
/* @__PURE__ */ jsx28(
|
|
1727
|
+
"path",
|
|
1728
|
+
{
|
|
1729
|
+
style: { fill: fillColor },
|
|
1730
|
+
d: "M99.9,0h24.37l99.9,202.18h-25.14l-44.26-77.52-27.24-41.38-14.84-41.81,2.44,1.3h-6.09l2.44-1.3-61.72,123-25.4,37.71H0L99.9,0Z"
|
|
1731
|
+
}
|
|
1732
|
+
)
|
|
1733
|
+
]
|
|
1734
|
+
}
|
|
1735
|
+
);
|
|
1736
|
+
}
|
|
1737
|
+
);
|
|
1738
|
+
BergetLogo.displayName = "BergetLogo";
|
|
1739
|
+
|
|
1740
|
+
// src/components/header/Header.tsx
|
|
1741
|
+
import * as React29 from "react";
|
|
1742
|
+
import { cva as cva19 } from "class-variance-authority";
|
|
1743
|
+
import { Menu, X } from "lucide-react";
|
|
1744
|
+
|
|
1745
|
+
// src/components/language-select/LanguageSelect.tsx
|
|
1746
|
+
import * as React28 from "react";
|
|
1747
|
+
import * as SelectPrimitive2 from "@radix-ui/react-select";
|
|
1748
|
+
import { Globe } from "lucide-react";
|
|
1749
|
+
import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1750
|
+
var LanguageSelect = React28.forwardRef(({ className, options, value, onValueChange }, ref) => {
|
|
1751
|
+
return /* @__PURE__ */ jsxs13(SelectPrimitive2.Root, { value, onValueChange, children: [
|
|
1752
|
+
/* @__PURE__ */ jsx29(
|
|
1753
|
+
SelectPrimitive2.Trigger,
|
|
1754
|
+
{
|
|
1755
|
+
ref,
|
|
1756
|
+
className: cn(
|
|
1757
|
+
// Base styles
|
|
1758
|
+
"h-8 w-8 p-0 rounded-full",
|
|
1759
|
+
"flex items-center justify-center",
|
|
1760
|
+
// Border and background
|
|
1761
|
+
"border border-berget-border-subtle",
|
|
1762
|
+
"bg-transparent",
|
|
1763
|
+
// Hover effect
|
|
1764
|
+
"hover:bg-berget-surface-hover",
|
|
1765
|
+
// Transitions
|
|
1766
|
+
"transition-all duration-200",
|
|
1767
|
+
// Focus styles - remove all focus rings
|
|
1768
|
+
"focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
|
|
1769
|
+
// Disabled state
|
|
1770
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
1771
|
+
className
|
|
1772
|
+
),
|
|
1773
|
+
children: /* @__PURE__ */ jsx29(Icon, { icon: Globe, size: 16 })
|
|
1774
|
+
}
|
|
1775
|
+
),
|
|
1776
|
+
/* @__PURE__ */ jsx29(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx29(
|
|
1777
|
+
SelectPrimitive2.Content,
|
|
1778
|
+
{
|
|
1779
|
+
className: cn(
|
|
1780
|
+
// Positioning and z-index
|
|
1781
|
+
"relative z-50 min-w-[8rem]",
|
|
1782
|
+
// Overflow handling
|
|
1783
|
+
"overflow-y-auto overflow-x-hidden",
|
|
1784
|
+
// Border and background
|
|
1785
|
+
"border border-berget-border bg-berget-background",
|
|
1786
|
+
"text-berget-foreground",
|
|
1787
|
+
// Shadow
|
|
1788
|
+
"shadow-berget-lg",
|
|
1789
|
+
// Rounded corners
|
|
1790
|
+
"rounded-md",
|
|
1791
|
+
// Animations
|
|
1792
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
1793
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
1794
|
+
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
1795
|
+
// Position-based animations
|
|
1796
|
+
"data-[side=bottom]:slide-in-from-top-2",
|
|
1797
|
+
"data-[side=left]:slide-in-from-right-2",
|
|
1798
|
+
"data-[side=right]:slide-in-from-left-2",
|
|
1799
|
+
"data-[side=top]:slide-in-from-bottom-2",
|
|
1800
|
+
// Origin for transforms
|
|
1801
|
+
"origin-[--radix-select-content-transform-origin]"
|
|
1802
|
+
),
|
|
1803
|
+
position: "popper",
|
|
1804
|
+
children: /* @__PURE__ */ jsx29(SelectPrimitive2.Viewport, { className: "p-1", children: options.map((option) => /* @__PURE__ */ jsx29(
|
|
1805
|
+
SelectPrimitive2.Item,
|
|
1806
|
+
{
|
|
1807
|
+
value: option.value,
|
|
1808
|
+
disabled: option.disabled,
|
|
1809
|
+
className: cn(
|
|
1810
|
+
// Layout
|
|
1811
|
+
"relative flex w-full cursor-default",
|
|
1812
|
+
"select-none items-center rounded-sm py-2 px-3",
|
|
1813
|
+
// Text
|
|
1814
|
+
"text-sm outline-none",
|
|
1815
|
+
// Focus/hover styles
|
|
1816
|
+
"focus:bg-berget-primary-tint focus:text-berget-foreground",
|
|
1817
|
+
"hover:bg-berget-primary-tint",
|
|
1818
|
+
// Disabled state
|
|
1819
|
+
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
|
|
1820
|
+
),
|
|
1821
|
+
children: /* @__PURE__ */ jsx29(SelectPrimitive2.ItemText, { children: option.label })
|
|
1822
|
+
},
|
|
1823
|
+
option.value
|
|
1824
|
+
)) })
|
|
1825
|
+
}
|
|
1826
|
+
) })
|
|
1827
|
+
] });
|
|
1828
|
+
});
|
|
1829
|
+
LanguageSelect.displayName = "LanguageSelect";
|
|
1830
|
+
|
|
1831
|
+
// src/components/header/Header.tsx
|
|
1832
|
+
import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1833
|
+
var headerVariants = cva19(
|
|
1834
|
+
"sticky top-0 z-50 header-backdrop backdrop-blur-xl border-b border-berget-border transition-all duration-200",
|
|
1835
|
+
{
|
|
1836
|
+
variants: {
|
|
1837
|
+
variant: {
|
|
1838
|
+
default: "",
|
|
1839
|
+
transparent: "border-transparent bg-transparent backdrop-blur-none"
|
|
1840
|
+
}
|
|
1841
|
+
},
|
|
1842
|
+
defaultVariants: {
|
|
1843
|
+
variant: "default"
|
|
1844
|
+
}
|
|
1845
|
+
}
|
|
1846
|
+
);
|
|
1847
|
+
var HeaderContext = React29.createContext({
|
|
1848
|
+
isMobileMenuOpen: false,
|
|
1849
|
+
setIsMobileMenuOpen: () => {
|
|
1850
|
+
}
|
|
1851
|
+
});
|
|
1852
|
+
var useHeaderContext = () => React29.useContext(HeaderContext);
|
|
1853
|
+
var HeaderLogo = React29.forwardRef(
|
|
1854
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: cn("flex items-center", className), ...props, children })
|
|
1855
|
+
);
|
|
1856
|
+
HeaderLogo.displayName = "HeaderLogo";
|
|
1857
|
+
var HeaderNav = React29.forwardRef(({ className, links, ...props }, ref) => {
|
|
1858
|
+
return /* @__PURE__ */ jsx30("nav", { ref, className: cn("hidden md:flex items-center gap-fluid-lg", className), ...props, children: /* @__PURE__ */ jsx30("ul", { className: "flex items-center gap-fluid-lg", children: links.map((link) => /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsxs14(
|
|
1859
|
+
Link,
|
|
1860
|
+
{
|
|
1861
|
+
href: link.href,
|
|
1862
|
+
variant: link.active ? "primary" : "default",
|
|
1863
|
+
size: "sm",
|
|
1864
|
+
className: cn("relative transition-all duration-200", link.active && "font-medium"),
|
|
1865
|
+
children: [
|
|
1866
|
+
link.icon && /* @__PURE__ */ jsx30("span", { className: "inline-flex items-center mr-2", children: /* @__PURE__ */ jsx30(Icon, { icon: link.icon, size: 16 }) }),
|
|
1867
|
+
link.label
|
|
1868
|
+
]
|
|
1869
|
+
}
|
|
1870
|
+
) }, link.href)) }) });
|
|
1871
|
+
});
|
|
1872
|
+
HeaderNav.displayName = "HeaderNav";
|
|
1873
|
+
var HeaderActions = React29.forwardRef(
|
|
1874
|
+
({
|
|
1875
|
+
className,
|
|
1876
|
+
languageOptions,
|
|
1877
|
+
currentLanguage,
|
|
1878
|
+
onLanguageChange,
|
|
1879
|
+
loginButton,
|
|
1880
|
+
ctaButton,
|
|
1881
|
+
...props
|
|
1882
|
+
}, ref) => {
|
|
1883
|
+
return /* @__PURE__ */ jsxs14("div", { ref, className: cn("hidden md:flex items-center gap-2", className), ...props, children: [
|
|
1884
|
+
languageOptions.length > 0 && /* @__PURE__ */ jsx30(
|
|
1885
|
+
LanguageSelect,
|
|
1886
|
+
{
|
|
1887
|
+
options: languageOptions,
|
|
1888
|
+
value: currentLanguage,
|
|
1889
|
+
onValueChange: onLanguageChange
|
|
1890
|
+
}
|
|
1891
|
+
),
|
|
1892
|
+
loginButton,
|
|
1893
|
+
ctaButton
|
|
1894
|
+
] });
|
|
1895
|
+
}
|
|
1896
|
+
);
|
|
1897
|
+
HeaderActions.displayName = "HeaderActions";
|
|
1898
|
+
var MobileMenuButton = React29.forwardRef(({ className, ...props }, ref) => {
|
|
1899
|
+
const { isMobileMenuOpen, setIsMobileMenuOpen } = useHeaderContext();
|
|
1900
|
+
return /* @__PURE__ */ jsx30(
|
|
1901
|
+
"button",
|
|
1902
|
+
{
|
|
1903
|
+
ref,
|
|
1904
|
+
className: cn(
|
|
1905
|
+
"md:hidden flex items-center justify-center w-8 h-8 rounded-full",
|
|
1906
|
+
"cursor-pointer transition-all duration-200",
|
|
1907
|
+
"hover:bg-berget-surface-hover-dark",
|
|
1908
|
+
className
|
|
1909
|
+
),
|
|
1910
|
+
onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
|
|
1911
|
+
"aria-label": isMobileMenuOpen ? "Close menu" : "Open menu",
|
|
1912
|
+
"aria-expanded": isMobileMenuOpen,
|
|
1913
|
+
"aria-controls": "mobile-menu",
|
|
1914
|
+
...props,
|
|
1915
|
+
children: isMobileMenuOpen ? /* @__PURE__ */ jsx30(Icon, { icon: X, size: 16 }) : /* @__PURE__ */ jsx30(Icon, { icon: Menu, size: 16 })
|
|
1916
|
+
}
|
|
1917
|
+
);
|
|
1918
|
+
});
|
|
1919
|
+
MobileMenuButton.displayName = "MobileMenuButton";
|
|
1920
|
+
var MobileMenu = React29.forwardRef(
|
|
1921
|
+
({
|
|
1922
|
+
className,
|
|
1923
|
+
links,
|
|
1924
|
+
languageOptions,
|
|
1925
|
+
currentLanguage,
|
|
1926
|
+
onLanguageChange,
|
|
1927
|
+
loginButton,
|
|
1928
|
+
ctaButton,
|
|
1929
|
+
...props
|
|
1930
|
+
}, ref) => {
|
|
1931
|
+
const { isMobileMenuOpen, setIsMobileMenuOpen } = useHeaderContext();
|
|
1932
|
+
if (!isMobileMenuOpen) return null;
|
|
1933
|
+
return /* @__PURE__ */ jsx30(
|
|
1934
|
+
"nav",
|
|
1935
|
+
{
|
|
1936
|
+
ref,
|
|
1937
|
+
id: "mobile-menu",
|
|
1938
|
+
"aria-label": "Mobile navigation menu",
|
|
1939
|
+
className: cn(
|
|
1940
|
+
"md:hidden absolute top-full left-0 right-0 bg-berget-background border-b border-berget-border shadow-berget-lg",
|
|
1941
|
+
className
|
|
1942
|
+
),
|
|
1943
|
+
...props,
|
|
1944
|
+
children: /* @__PURE__ */ jsxs14(Box, { direction: "column", gap: 0, className: "py-fluid-md", children: [
|
|
1945
|
+
/* @__PURE__ */ jsx30("ul", { className: "px-fluid-md pb-fluid-md border-b border-berget-border/50", children: links.map((link) => /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsxs14(
|
|
1946
|
+
Link,
|
|
1947
|
+
{
|
|
1948
|
+
href: link.href,
|
|
1949
|
+
variant: link.active ? "primary" : "default",
|
|
1950
|
+
className: cn(
|
|
1951
|
+
"w-full py-3 px-4 rounded-lg transition-all duration-200 hover:bg-berget-surface-hover",
|
|
1952
|
+
link.active && "bg-berget-primary-tint font-medium"
|
|
1953
|
+
),
|
|
1954
|
+
onClick: () => setIsMobileMenuOpen(false),
|
|
1955
|
+
children: [
|
|
1956
|
+
link.icon && /* @__PURE__ */ jsx30("span", { className: "inline-flex items-center mr-2", children: /* @__PURE__ */ jsx30(Icon, { icon: link.icon, size: 16 }) }),
|
|
1957
|
+
link.label
|
|
1958
|
+
]
|
|
1959
|
+
}
|
|
1960
|
+
) }, link.href)) }),
|
|
1961
|
+
/* @__PURE__ */ jsxs14("div", { className: "px-fluid-md py-fluid-md", children: [
|
|
1962
|
+
languageOptions.length > 0 && /* @__PURE__ */ jsx30("div", { className: "mb-fluid-md", children: /* @__PURE__ */ jsx30(
|
|
1963
|
+
LanguageSelect,
|
|
1964
|
+
{
|
|
1965
|
+
options: languageOptions,
|
|
1966
|
+
value: currentLanguage,
|
|
1967
|
+
onValueChange: onLanguageChange
|
|
1968
|
+
}
|
|
1969
|
+
) }),
|
|
1970
|
+
loginButton && /* @__PURE__ */ jsx30("div", { className: "mb-fluid-md w-full", children: loginButton }),
|
|
1971
|
+
ctaButton && /* @__PURE__ */ jsx30("div", { className: "w-full", children: ctaButton })
|
|
1972
|
+
] })
|
|
1973
|
+
] })
|
|
1974
|
+
}
|
|
1975
|
+
);
|
|
1976
|
+
}
|
|
1977
|
+
);
|
|
1978
|
+
MobileMenu.displayName = "MobileMenu";
|
|
1979
|
+
var Header = React29.forwardRef(
|
|
1980
|
+
({
|
|
1981
|
+
className,
|
|
1982
|
+
variant,
|
|
1983
|
+
logo,
|
|
1984
|
+
links,
|
|
1985
|
+
languageOptions,
|
|
1986
|
+
loginButton,
|
|
1987
|
+
ctaButton,
|
|
1988
|
+
currentLanguage,
|
|
1989
|
+
onLanguageChange,
|
|
1990
|
+
...props
|
|
1991
|
+
}, ref) => {
|
|
1992
|
+
const [isMobileMenuOpen, setIsMobileMenuOpen] = React29.useState(false);
|
|
1993
|
+
React29.useEffect(() => {
|
|
1994
|
+
if (isMobileMenuOpen) {
|
|
1995
|
+
document.body.style.overflow = "hidden";
|
|
1996
|
+
} else {
|
|
1997
|
+
document.body.style.overflow = "unset";
|
|
1998
|
+
}
|
|
1999
|
+
return () => {
|
|
2000
|
+
document.body.style.overflow = "unset";
|
|
2001
|
+
};
|
|
2002
|
+
}, [isMobileMenuOpen]);
|
|
2003
|
+
return /* @__PURE__ */ jsx30(HeaderContext.Provider, { value: { isMobileMenuOpen, setIsMobileMenuOpen }, children: /* @__PURE__ */ jsxs14("header", { ref, className: cn(headerVariants({ variant }), className), ...props, children: [
|
|
2004
|
+
/* @__PURE__ */ jsx30(Container, { size: "xl", children: /* @__PURE__ */ jsxs14(Box, { direction: "row", align: "center", justify: "between", className: "h-16", children: [
|
|
2005
|
+
/* @__PURE__ */ jsx30(HeaderLogo, { children: logo || /* @__PURE__ */ jsx30(BergetLogo, { variant: "logotype", color: "white", size: 32 }) }),
|
|
2006
|
+
/* @__PURE__ */ jsx30(HeaderNav, { links }),
|
|
2007
|
+
/* @__PURE__ */ jsxs14(Box, { direction: "row", align: "center", gap: 3, children: [
|
|
2008
|
+
/* @__PURE__ */ jsx30(
|
|
2009
|
+
HeaderActions,
|
|
2010
|
+
{
|
|
2011
|
+
languageOptions,
|
|
2012
|
+
currentLanguage,
|
|
2013
|
+
onLanguageChange,
|
|
2014
|
+
loginButton,
|
|
2015
|
+
ctaButton
|
|
2016
|
+
}
|
|
2017
|
+
),
|
|
2018
|
+
ctaButton && /* @__PURE__ */ jsx30("div", { className: "md:hidden", children: ctaButton }),
|
|
2019
|
+
/* @__PURE__ */ jsx30(MobileMenuButton, {})
|
|
2020
|
+
] })
|
|
2021
|
+
] }) }),
|
|
2022
|
+
/* @__PURE__ */ jsx30(
|
|
2023
|
+
MobileMenu,
|
|
2024
|
+
{
|
|
2025
|
+
links,
|
|
2026
|
+
languageOptions,
|
|
2027
|
+
currentLanguage,
|
|
2028
|
+
onLanguageChange,
|
|
2029
|
+
loginButton,
|
|
2030
|
+
ctaButton
|
|
2031
|
+
}
|
|
2032
|
+
)
|
|
2033
|
+
] }) });
|
|
2034
|
+
}
|
|
2035
|
+
);
|
|
2036
|
+
Header.displayName = "Header";
|
|
2037
|
+
|
|
2038
|
+
// src/components/feature-cards/FeatureCards.tsx
|
|
2039
|
+
import * as React32 from "react";
|
|
2040
|
+
import { cva as cva21 } from "class-variance-authority";
|
|
2041
|
+
|
|
2042
|
+
// src/components/list/List.tsx
|
|
2043
|
+
import * as React31 from "react";
|
|
2044
|
+
|
|
2045
|
+
// src/components/divider/Divider.tsx
|
|
2046
|
+
import * as React30 from "react";
|
|
2047
|
+
import { cva as cva20 } from "class-variance-authority";
|
|
2048
|
+
import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2049
|
+
var dividerVariants = cva20("", {
|
|
2050
|
+
variants: {
|
|
2051
|
+
variant: {
|
|
2052
|
+
default: "bg-berget-separator",
|
|
2053
|
+
subtle: "bg-berget-separator-subtle",
|
|
2054
|
+
strong: "bg-berget-border-interactive",
|
|
2055
|
+
primary: "bg-berget-primary-border",
|
|
2056
|
+
muted: "bg-berget-separator-subtle"
|
|
2057
|
+
},
|
|
2058
|
+
size: {
|
|
2059
|
+
thin: "",
|
|
2060
|
+
medium: "!h-[2px]",
|
|
2061
|
+
thick: "!h-[4px]"
|
|
2062
|
+
}
|
|
2063
|
+
},
|
|
2064
|
+
defaultVariants: {
|
|
2065
|
+
variant: "default",
|
|
2066
|
+
size: "thin"
|
|
2067
|
+
}
|
|
2068
|
+
});
|
|
2069
|
+
var Divider = React30.forwardRef(
|
|
2070
|
+
({
|
|
2071
|
+
className,
|
|
2072
|
+
orientation = "horizontal",
|
|
2073
|
+
variant,
|
|
2074
|
+
size,
|
|
2075
|
+
label,
|
|
2076
|
+
labelPosition = "center",
|
|
2077
|
+
...props
|
|
2078
|
+
}, ref) => {
|
|
2079
|
+
if (label) {
|
|
2080
|
+
return /* @__PURE__ */ jsxs15("div", { ref, className: cn("flex items-center w-full", className), ...props, children: [
|
|
2081
|
+
labelPosition !== "right" && /* @__PURE__ */ jsx31(
|
|
2082
|
+
Separator2,
|
|
2083
|
+
{
|
|
2084
|
+
orientation: "horizontal",
|
|
2085
|
+
className: cn(dividerVariants({ variant, size }), "flex-1")
|
|
2086
|
+
}
|
|
2087
|
+
),
|
|
2088
|
+
/* @__PURE__ */ jsx31(Typography, { variant: "small", color: "muted", className: "px-4 whitespace-nowrap", children: label }),
|
|
2089
|
+
labelPosition !== "left" && /* @__PURE__ */ jsx31(
|
|
2090
|
+
Separator2,
|
|
2091
|
+
{
|
|
2092
|
+
orientation: "horizontal",
|
|
2093
|
+
className: cn(dividerVariants({ variant, size }), "flex-1")
|
|
2094
|
+
}
|
|
2095
|
+
)
|
|
2096
|
+
] });
|
|
2097
|
+
}
|
|
2098
|
+
return /* @__PURE__ */ jsx31(
|
|
2099
|
+
Separator2,
|
|
2100
|
+
{
|
|
2101
|
+
ref,
|
|
2102
|
+
orientation,
|
|
2103
|
+
className: cn(
|
|
2104
|
+
dividerVariants({ variant, size }),
|
|
2105
|
+
orientation === "vertical" && "h-full !w-[1px]",
|
|
2106
|
+
className
|
|
2107
|
+
)
|
|
2108
|
+
}
|
|
2109
|
+
);
|
|
2110
|
+
}
|
|
2111
|
+
);
|
|
2112
|
+
Divider.displayName = "Divider";
|
|
2113
|
+
|
|
2114
|
+
// src/components/list/List.tsx
|
|
2115
|
+
import { Check as Check4 } from "lucide-react";
|
|
2116
|
+
import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2117
|
+
var List = React31.forwardRef(
|
|
2118
|
+
({ className, children, ...props }, ref) => {
|
|
2119
|
+
const childrenArray = React31.Children.toArray(children);
|
|
2120
|
+
return /* @__PURE__ */ jsx32("div", { ref, className: cn("flex flex-col", className), ...props, children: childrenArray.map((child, index) => /* @__PURE__ */ jsxs16(React31.Fragment, { children: [
|
|
2121
|
+
child,
|
|
2122
|
+
index < childrenArray.length - 1 && /* @__PURE__ */ jsx32(Divider, { variant: "subtle" })
|
|
2123
|
+
] }, index)) });
|
|
2124
|
+
}
|
|
2125
|
+
);
|
|
2126
|
+
List.displayName = "List";
|
|
2127
|
+
var ListItem = React31.forwardRef(
|
|
2128
|
+
({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ jsxs16(
|
|
2129
|
+
"div",
|
|
2130
|
+
{
|
|
2131
|
+
ref,
|
|
2132
|
+
className: cn(
|
|
2133
|
+
"flex items-center gap-4 px-4 py-3 sm:px-6 sm:py-4",
|
|
2134
|
+
interactive && "transition-all duration-200 hover:bg-berget-surface-hover cursor-pointer",
|
|
2135
|
+
className
|
|
2136
|
+
),
|
|
2137
|
+
...props,
|
|
2138
|
+
children: [
|
|
2139
|
+
icon && /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0 flex items-center justify-center", children: icon }),
|
|
2140
|
+
/* @__PURE__ */ jsx32("div", { className: "flex-1 min-w-0", children })
|
|
2141
|
+
]
|
|
2142
|
+
}
|
|
2143
|
+
)
|
|
2144
|
+
);
|
|
2145
|
+
ListItem.displayName = "ListItem";
|
|
2146
|
+
var ListHeader = React31.forwardRef(
|
|
2147
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx32(
|
|
2148
|
+
"div",
|
|
2149
|
+
{
|
|
2150
|
+
ref,
|
|
2151
|
+
className: cn("px-4 py-2 sm:px-6 sm:py-3 text-sm text-muted-foreground", className),
|
|
2152
|
+
...props,
|
|
2153
|
+
children
|
|
2154
|
+
}
|
|
2155
|
+
)
|
|
2156
|
+
);
|
|
2157
|
+
ListHeader.displayName = "ListHeader";
|
|
2158
|
+
var FeatureList = React31.forwardRef(
|
|
2159
|
+
({ items, variant = "bullet", className, ...props }, ref) => {
|
|
2160
|
+
return /* @__PURE__ */ jsx32("ul", { ref, className: cn("flex flex-col gap-fluid-md", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs16("li", { className: "flex items-start gap-fluid-md", children: [
|
|
2161
|
+
variant === "bullet" ? /* @__PURE__ */ jsx32("span", { className: "w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2" }) : /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx32(Icon, { icon: Check4, size: 24, className: "text-berget-logo-light" }) }),
|
|
2162
|
+
/* @__PURE__ */ jsx32(Typography, { variant: "body", color: "muted", children: item })
|
|
2163
|
+
] }, index)) });
|
|
2164
|
+
}
|
|
2165
|
+
);
|
|
2166
|
+
FeatureList.displayName = "FeatureList";
|
|
2167
|
+
|
|
2168
|
+
// src/components/feature-cards/FeatureCards.tsx
|
|
2169
|
+
import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2170
|
+
var featureCardVariants = cva21("", {
|
|
2171
|
+
variants: {
|
|
2172
|
+
variant: {
|
|
2173
|
+
highlight: "",
|
|
2174
|
+
glass: "",
|
|
2175
|
+
solid: ""
|
|
2176
|
+
}
|
|
2177
|
+
},
|
|
2178
|
+
defaultVariants: {
|
|
2179
|
+
variant: "highlight"
|
|
2180
|
+
}
|
|
2181
|
+
});
|
|
2182
|
+
var FeatureCard = React32.forwardRef(
|
|
2183
|
+
({
|
|
2184
|
+
className,
|
|
2185
|
+
variant = "highlight",
|
|
2186
|
+
icon: Icon3,
|
|
2187
|
+
iconColor,
|
|
2188
|
+
title,
|
|
2189
|
+
description,
|
|
2190
|
+
badge,
|
|
2191
|
+
linkText,
|
|
2192
|
+
linkHref,
|
|
2193
|
+
items,
|
|
2194
|
+
columns: _columns,
|
|
2195
|
+
...props
|
|
2196
|
+
}, ref) => {
|
|
2197
|
+
return /* @__PURE__ */ jsx33(
|
|
2198
|
+
Card2,
|
|
2199
|
+
{
|
|
2200
|
+
ref,
|
|
2201
|
+
variant,
|
|
2202
|
+
className: cn("w-full py-fluid-lg px-fluid-md", className),
|
|
2203
|
+
...props,
|
|
2204
|
+
children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-start gap-fluid-md", children: [
|
|
2205
|
+
(Icon3 || badge) && /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between w-full", children: [
|
|
2206
|
+
Icon3 && /* @__PURE__ */ jsx33("div", { className: "flex h-7 w-7 items-center justify-center", children: /* @__PURE__ */ jsx33(
|
|
2207
|
+
Icon3,
|
|
2208
|
+
{
|
|
2209
|
+
className: cn("h-7 w-7", iconColor || "text-foreground"),
|
|
2210
|
+
strokeWidth: 1.5
|
|
2211
|
+
}
|
|
2212
|
+
) }),
|
|
2213
|
+
badge && /* @__PURE__ */ jsx33("div", { className: "flex h-6 items-center justify-start px-6 bg-berget-feature-card-badge-bg rounded-full", children: /* @__PURE__ */ jsx33(
|
|
2214
|
+
Typography,
|
|
2215
|
+
{
|
|
2216
|
+
variant: "body",
|
|
2217
|
+
as: "span",
|
|
2218
|
+
className: "text-berget-feature-card-badge-fg",
|
|
2219
|
+
children: badge
|
|
2220
|
+
}
|
|
2221
|
+
) })
|
|
2222
|
+
] }),
|
|
2223
|
+
/* @__PURE__ */ jsx33(Typography, { variant: "h3", className: "text-foreground", children: title }),
|
|
2224
|
+
/* @__PURE__ */ jsx33(Typography, { variant: "body", className: "text-foreground/80", children: description }),
|
|
2225
|
+
items && items.length > 0 && /* @__PURE__ */ jsx33(FeatureList, { items, variant: "bullet" }),
|
|
2226
|
+
linkText && linkHref && /* @__PURE__ */ jsxs17("a", { href: linkHref, className: "text-p font-p leading-p text-berget-accent", children: [
|
|
2227
|
+
linkText,
|
|
2228
|
+
" \u2192"
|
|
2229
|
+
] })
|
|
2230
|
+
] })
|
|
2231
|
+
}
|
|
2232
|
+
);
|
|
2233
|
+
}
|
|
2234
|
+
);
|
|
2235
|
+
FeatureCard.displayName = "FeatureCard";
|
|
2236
|
+
var FeatureCards = React32.forwardRef(
|
|
2237
|
+
({ features, columns = 3, className }, ref) => {
|
|
2238
|
+
return /* @__PURE__ */ jsx33(
|
|
2239
|
+
"div",
|
|
2240
|
+
{
|
|
2241
|
+
ref,
|
|
2242
|
+
className: cn(
|
|
2243
|
+
"grid gap-fluid-lg p-fluid-md",
|
|
2244
|
+
// Explicit classes so Tailwind compiles them
|
|
2245
|
+
columns === 1 && "grid-cols-1 max-w-md mx-auto",
|
|
2246
|
+
columns === 2 && "grid-cols-1 md:grid-cols-2",
|
|
2247
|
+
columns === 3 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
|
2248
|
+
columns === 4 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
|
|
2249
|
+
className
|
|
2250
|
+
),
|
|
2251
|
+
children: features.map((feature, index) => /* @__PURE__ */ jsx33(FeatureCard, { ...feature }, index))
|
|
2252
|
+
}
|
|
2253
|
+
);
|
|
2254
|
+
}
|
|
2255
|
+
);
|
|
2256
|
+
FeatureCards.displayName = "FeatureCards";
|
|
2257
|
+
|
|
2258
|
+
// src/components/hero-block/HeroBlock.tsx
|
|
2259
|
+
import * as React33 from "react";
|
|
2260
|
+
import { cva as cva22 } from "class-variance-authority";
|
|
2261
|
+
import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2262
|
+
var heroBlockVariants = cva22(
|
|
2263
|
+
"relative overflow-hidden min-h-[40dvh] flex items-center py-fluid-2xl",
|
|
2264
|
+
{
|
|
2265
|
+
variants: {
|
|
2266
|
+
variant: {
|
|
2267
|
+
default: "",
|
|
2268
|
+
moss: "",
|
|
2269
|
+
gradient: ""
|
|
2270
|
+
},
|
|
2271
|
+
withPattern: {
|
|
2272
|
+
true: "",
|
|
2273
|
+
false: ""
|
|
2274
|
+
}
|
|
2275
|
+
},
|
|
2276
|
+
defaultVariants: {
|
|
2277
|
+
variant: "default",
|
|
2278
|
+
withPattern: false
|
|
2279
|
+
}
|
|
2280
|
+
}
|
|
2281
|
+
);
|
|
2282
|
+
var HeroBlock = React33.forwardRef(
|
|
2283
|
+
({
|
|
2284
|
+
className,
|
|
2285
|
+
variant,
|
|
2286
|
+
withPattern,
|
|
2287
|
+
taglineIcon: TaglineIcon,
|
|
2288
|
+
tagline,
|
|
2289
|
+
title,
|
|
2290
|
+
description,
|
|
2291
|
+
actions,
|
|
2292
|
+
...props
|
|
2293
|
+
}, ref) => {
|
|
2294
|
+
return /* @__PURE__ */ jsx34(
|
|
2295
|
+
"div",
|
|
2296
|
+
{
|
|
2297
|
+
ref,
|
|
2298
|
+
className: cn(heroBlockVariants({ variant, withPattern }), className),
|
|
2299
|
+
...props,
|
|
2300
|
+
children: /* @__PURE__ */ jsx34("div", { className: "mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs18("div", { className: "mx-auto text-center max-w-4xl", children: [
|
|
2301
|
+
tagline && /* @__PURE__ */ jsx34(
|
|
2302
|
+
Badge,
|
|
2303
|
+
{
|
|
2304
|
+
variant: "default",
|
|
2305
|
+
icon: TaglineIcon ? /* @__PURE__ */ jsx34(Icon, { icon: TaglineIcon, size: 16 }) : void 0,
|
|
2306
|
+
iconGap: 2,
|
|
2307
|
+
className: "mb-fluid-md",
|
|
2308
|
+
children: tagline
|
|
2309
|
+
}
|
|
2310
|
+
),
|
|
2311
|
+
/* @__PURE__ */ jsx34(Typography, { variant: "h1", className: "mb-fluid-md", children: title }),
|
|
2312
|
+
/* @__PURE__ */ jsx34(Typography, { variant: "h3", color: "muted", className: "mb-fluid-lg", children: description }),
|
|
2313
|
+
actions && /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap gap-fluid-md justify-center", children: actions })
|
|
2314
|
+
] }) })
|
|
2315
|
+
}
|
|
2316
|
+
);
|
|
2317
|
+
}
|
|
2318
|
+
);
|
|
2319
|
+
HeroBlock.displayName = "HeroBlock";
|
|
2320
|
+
|
|
2321
|
+
// src/components/stat-card/StatCard.tsx
|
|
2322
|
+
import * as React34 from "react";
|
|
2323
|
+
import { cva as cva23 } from "class-variance-authority";
|
|
2324
|
+
import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2325
|
+
var statCardVariants = cva23("", {
|
|
2326
|
+
variants: {
|
|
2327
|
+
variant: {
|
|
2328
|
+
highlight: "",
|
|
2329
|
+
glass: "",
|
|
2330
|
+
solid: ""
|
|
2331
|
+
}
|
|
2332
|
+
},
|
|
2333
|
+
defaultVariants: {
|
|
2334
|
+
variant: "highlight"
|
|
2335
|
+
}
|
|
2336
|
+
});
|
|
2337
|
+
var StatCard = React34.forwardRef(
|
|
2338
|
+
({
|
|
2339
|
+
className,
|
|
2340
|
+
variant = "highlight",
|
|
2341
|
+
icon: Icon3,
|
|
2342
|
+
iconColor,
|
|
2343
|
+
title,
|
|
2344
|
+
description,
|
|
2345
|
+
stats,
|
|
2346
|
+
badge: _badge,
|
|
2347
|
+
...props
|
|
2348
|
+
}, ref) => {
|
|
2349
|
+
return /* @__PURE__ */ jsx35(
|
|
2350
|
+
Card2,
|
|
2351
|
+
{
|
|
2352
|
+
ref,
|
|
2353
|
+
variant,
|
|
2354
|
+
className: cn("w-full py-fluid-lg px-fluid-md", className),
|
|
2355
|
+
...props,
|
|
2356
|
+
children: /* @__PURE__ */ jsxs19("div", { className: "flex flex-col h-full gap-fluid-md", children: [
|
|
2357
|
+
Icon3 && /* @__PURE__ */ jsx35("div", { className: "flex h-7 w-7 items-center justify-center", children: /* @__PURE__ */ jsx35(
|
|
2358
|
+
Icon3,
|
|
2359
|
+
{
|
|
2360
|
+
className: cn("h-7 w-7", iconColor || "text-berget-foreground"),
|
|
2361
|
+
strokeWidth: 1.5
|
|
2362
|
+
}
|
|
2363
|
+
) }),
|
|
2364
|
+
/* @__PURE__ */ jsx35(Typography, { variant: "h3", as: "h3", className: "text-berget-foreground", children: title }),
|
|
2365
|
+
/* @__PURE__ */ jsx35(
|
|
2366
|
+
Typography,
|
|
2367
|
+
{
|
|
2368
|
+
variant: "body",
|
|
2369
|
+
className: "text-berget-foreground/80 leading-relaxed flex-grow",
|
|
2370
|
+
children: description
|
|
2371
|
+
}
|
|
2372
|
+
),
|
|
2373
|
+
/* @__PURE__ */ jsx35(Typography, { variant: "small", as: "div", className: "font-medium text-berget-foreground", children: stats })
|
|
2374
|
+
] })
|
|
2375
|
+
}
|
|
2376
|
+
);
|
|
2377
|
+
}
|
|
2378
|
+
);
|
|
2379
|
+
StatCard.displayName = "StatCard";
|
|
2380
|
+
|
|
2381
|
+
// src/components/code-block/CodeBlock.tsx
|
|
2382
|
+
import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
|
|
2383
|
+
import { Copy, Check as Check5 } from "lucide-react";
|
|
2384
|
+
import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2385
|
+
function CodeBlock({ code, language = "text", title, className }) {
|
|
2386
|
+
const [html, setHtml] = useState2(null);
|
|
2387
|
+
const [copied, setCopied] = useState2(false);
|
|
2388
|
+
useEffect2(() => {
|
|
2389
|
+
getHighlighter().then((highlighter) => {
|
|
2390
|
+
const loadedLangs = highlighter.getLoadedLanguages();
|
|
2391
|
+
const lang = loadedLangs.includes(language) ? language : "text";
|
|
2392
|
+
setHtml(highlighter.codeToHtml(code, { lang, theme: "berget" }));
|
|
2393
|
+
});
|
|
2394
|
+
}, [code, language]);
|
|
2395
|
+
const handleCopy = useCallback(async () => {
|
|
2396
|
+
await navigator.clipboard.writeText(code);
|
|
2397
|
+
setCopied(true);
|
|
2398
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
2399
|
+
}, [code]);
|
|
2400
|
+
const copyButton = /* @__PURE__ */ jsx36(
|
|
2401
|
+
"button",
|
|
2402
|
+
{
|
|
2403
|
+
onClick: handleCopy,
|
|
2404
|
+
className: "flex items-center justify-center w-6 h-6 text-berget-muted-foreground hover:text-berget-foreground transition-colors",
|
|
2405
|
+
"aria-label": "Copy code",
|
|
2406
|
+
children: copied ? /* @__PURE__ */ jsx36(Check5, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx36(Copy, { className: "w-3.5 h-3.5" })
|
|
2407
|
+
}
|
|
2408
|
+
);
|
|
2409
|
+
return /* @__PURE__ */ jsxs20(
|
|
2410
|
+
"div",
|
|
2411
|
+
{
|
|
2412
|
+
className: cn(
|
|
2413
|
+
"rounded-berget-sm border bg-berget-codeblock-bg border-berget-border backdrop-blur-[12px] relative overflow-hidden isolate",
|
|
2414
|
+
className
|
|
2415
|
+
),
|
|
2416
|
+
children: [
|
|
2417
|
+
title && /* @__PURE__ */ jsx36("div", { className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg", children: /* @__PURE__ */ jsx36("span", { className: "text-berget-muted-foreground", children: title }) }),
|
|
2418
|
+
/* @__PURE__ */ jsx36("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
|
|
2419
|
+
html ? /* @__PURE__ */ jsx36(
|
|
2420
|
+
"div",
|
|
2421
|
+
{
|
|
2422
|
+
className: "[&_.shiki]:!p-4 [&_.shiki]:!m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:!text-sm [&_.shiki]:!leading-relaxed [&_.shiki]:bg-transparent",
|
|
2423
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
2424
|
+
}
|
|
2425
|
+
) : /* @__PURE__ */ jsx36("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ jsx36("code", { children: code }) })
|
|
2426
|
+
]
|
|
2427
|
+
}
|
|
2428
|
+
);
|
|
2429
|
+
}
|
|
2430
|
+
export {
|
|
2431
|
+
Alert2 as Alert,
|
|
2432
|
+
AlertDescription,
|
|
2433
|
+
AlertTitle,
|
|
2434
|
+
Badge,
|
|
2435
|
+
BergetLogo,
|
|
2436
|
+
BergetLogo as BergetLogotype,
|
|
2437
|
+
BergetLogo as BergetSymbol,
|
|
2438
|
+
Box,
|
|
2439
|
+
Button2 as Button,
|
|
2440
|
+
Card2 as Card,
|
|
2441
|
+
CardContent,
|
|
2442
|
+
CardDescription,
|
|
2443
|
+
CardFooter,
|
|
2444
|
+
CardHeader,
|
|
2445
|
+
CardTitle,
|
|
2446
|
+
Checkbox2 as Checkbox,
|
|
2447
|
+
CodeBlock,
|
|
2448
|
+
Container,
|
|
2449
|
+
FeatureCard,
|
|
2450
|
+
FeatureCards,
|
|
2451
|
+
FeatureList,
|
|
2452
|
+
Field,
|
|
2453
|
+
FieldContent,
|
|
2454
|
+
FieldDescription,
|
|
2455
|
+
FieldError,
|
|
2456
|
+
FieldGroup,
|
|
2457
|
+
FieldLabel,
|
|
2458
|
+
FieldLegend,
|
|
2459
|
+
FieldSeparator,
|
|
2460
|
+
FieldSet,
|
|
2461
|
+
FieldTitle,
|
|
2462
|
+
Grid,
|
|
2463
|
+
Header,
|
|
2464
|
+
HeroBlock,
|
|
2465
|
+
Icon,
|
|
2466
|
+
Input2 as Input,
|
|
2467
|
+
Label2 as Label,
|
|
2468
|
+
LanguageSelect,
|
|
2469
|
+
Link,
|
|
2470
|
+
List,
|
|
2471
|
+
ListHeader,
|
|
2472
|
+
ListItem,
|
|
2473
|
+
Section,
|
|
2474
|
+
SectionHeader,
|
|
2475
|
+
Select2 as Select,
|
|
2476
|
+
StatCard,
|
|
2477
|
+
Switch,
|
|
2478
|
+
TextArea,
|
|
2479
|
+
Typography,
|
|
2480
|
+
alertVariants2 as alertVariants,
|
|
2481
|
+
badgeVariants,
|
|
2482
|
+
boxVariants,
|
|
2483
|
+
buttonVariants2 as buttonVariants,
|
|
2484
|
+
cardVariants,
|
|
2485
|
+
checkboxVariants,
|
|
2486
|
+
containerVariants,
|
|
2487
|
+
gridVariants,
|
|
2488
|
+
linkVariants,
|
|
2489
|
+
sectionVariants,
|
|
2490
|
+
selectVariants,
|
|
2491
|
+
switchRootVariants,
|
|
2492
|
+
switchThumbVariants,
|
|
2493
|
+
textAreaVariants,
|
|
2494
|
+
typographyVariants
|
|
2495
|
+
};
|
|
2496
|
+
//# sourceMappingURL=index.js.map
|