@memoraiz/ui
Version:
A modern React component library built with Radix UI, Tailwind CSS, and Storybook.
2,621 lines • 71.9 kB
JavaScript
"use client";
import { createContext as ee, useContext as te, useState as E, useCallback as C, useEffect as M, useRef as Ae, useMemo as re, memo as Te } from "react";
import { jsx as r, jsxs as m } from "react/jsx-runtime";
import * as oe from "@radix-ui/react-avatar";
import { clsx as ke } from "clsx";
import { twMerge as Le } from "tailwind-merge";
import { cva as U } from "class-variance-authority";
import { Slot as ae } from "@radix-ui/react-slot";
import Ee from "embla-carousel-react";
import { ArrowLeft as _e, ArrowRight as me, XIcon as $e, CheckIcon as fe, CircleIcon as Me, ChevronRightIcon as De, Plus as Ie, Eye as Be, EyeClosed as Re, Trophy as le, Target as Fe, BarChart2 as je, RotateCcw as qe, ThumbsUp as Qe, ThumbsDown as Ve, ListChecks as Ue, Clock as Pe, Timer as We, TimerIcon as He, X as Ke, HelpCircle as Ge, ChevronDownIcon as ge, ChevronUpIcon as Oe, TrendingUp as Xe } from "lucide-react";
import * as D from "@radix-ui/react-dialog";
import * as A from "@radix-ui/react-dropdown-menu";
import * as _ from "@radix-ui/react-popover";
import * as de from "@radix-ui/react-progress";
import { pick as Ye } from "accept-language-parser";
import * as F from "@radix-ui/react-tooltip";
import * as V from "@radix-ui/react-scroll-area";
import * as k from "@radix-ui/react-select";
import * as Je from "@radix-ui/react-separator";
import * as Ze from "@radix-ui/react-toggle";
function s(...e) {
return Le(ke(e));
}
const et = "mm-avatar";
function mr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
oe.Root,
{
"data-slot": "avatar",
className: s(
`${et} relative flex size-8 shrink-0 overflow-hidden rounded-full`,
e
),
...t
}
);
}
function fr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
oe.Image,
{
"data-slot": "avatar-image",
className: s("aspect-square size-full", e),
...t
}
);
}
function gr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
oe.Fallback,
{
"data-slot": "avatar-fallback",
className: s(
"bg-muted flex size-full items-center justify-center rounded-full",
e
),
...t
}
);
}
const tt = "mm-button", rt = U(
`${tt} inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive brutalist:rounded-xs playful:rounded-full`,
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
brand: "bg-brand text-brand-foreground shadow-xs hover:bg-brand/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
function R({
className: e,
variant: t,
size: o,
asChild: a = !1,
...d
}) {
return /* @__PURE__ */ r(
a ? ae : "button",
{
"data-slot": "button",
className: s(rt({ variant: t, size: o, className: e })),
...d
}
);
}
const ot = "mm-card";
function pe({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "card",
className: s(
`${ot} bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm brutalist:rounded-xs`,
e
),
...t
}
);
}
function at({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "card-header",
className: s(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
e
),
...t
}
);
}
function nt({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "card-title",
className: s("leading-none font-semibold", e),
...t
}
);
}
function pr({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "card-description",
className: s("text-muted-foreground text-sm", e),
...t
}
);
}
function hr({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "card-action",
className: s(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
e
),
...t
}
);
}
function he({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "card-content",
className: s("px-6", e),
...t
}
);
}
function vr({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "card-footer",
className: s("flex items-center px-6 [.border-t]:pt-6", e),
...t
}
);
}
const ve = ee(null);
function G() {
const e = te(ve);
if (!e)
throw new Error("useCarousel must be used within a <Carousel />");
return e;
}
const it = "mm-carousel";
function br({
orientation: e = "horizontal",
opts: t,
setApi: o,
plugins: a,
className: d,
children: c,
...i
}) {
const [l, n] = Ee(
{
...t,
axis: e === "horizontal" ? "x" : "y"
},
a
), [f, u] = E(!1), [g, x] = E(!1), v = C((y) => {
y && (u(y.canScrollPrev()), x(y.canScrollNext()));
}, []), h = C(() => {
n == null || n.scrollPrev();
}, [n]), p = C(() => {
n == null || n.scrollNext();
}, [n]), S = C(
(y) => {
y.key === "ArrowLeft" ? (y.preventDefault(), h()) : y.key === "ArrowRight" && (y.preventDefault(), p());
},
[h, p]
);
return M(() => {
!n || !o || o(n);
}, [n, o]), M(() => {
if (n)
return v(n), n.on("reInit", v), n.on("select", v), () => {
n == null || n.off("select", v);
};
}, [n, v]), /* @__PURE__ */ r(
ve.Provider,
{
value: {
carouselRef: l,
api: n,
opts: t,
orientation: e || ((t == null ? void 0 : t.axis) === "y" ? "vertical" : "horizontal"),
scrollPrev: h,
scrollNext: p,
canScrollPrev: f,
canScrollNext: g
},
children: /* @__PURE__ */ r(
"div",
{
onKeyDownCapture: S,
className: s(`${it} relative`, d),
role: "region",
"aria-roledescription": "carousel",
"data-slot": "carousel",
...i,
children: c
}
)
}
);
}
function xr({ className: e, ...t }) {
const { carouselRef: o, orientation: a } = G();
return /* @__PURE__ */ r(
"div",
{
ref: o,
className: "overflow-hidden",
"data-slot": "carousel-content",
children: /* @__PURE__ */ r(
"div",
{
className: s(
"flex",
a === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
e
),
...t
}
)
}
);
}
function wr({ className: e, ...t }) {
const { orientation: o } = G();
return /* @__PURE__ */ r(
"div",
{
role: "group",
"aria-roledescription": "slide",
"data-slot": "carousel-item",
className: s(
"min-w-0 shrink-0 grow-0 basis-full",
o === "horizontal" ? "pl-4" : "pt-4",
e
),
...t
}
);
}
function yr({
className: e,
variant: t = "outline",
size: o = "icon",
...a
}) {
const { orientation: d, scrollPrev: c, canScrollPrev: i } = G();
return /* @__PURE__ */ m(
R,
{
"data-slot": "carousel-previous",
variant: t,
size: o,
className: s(
"absolute size-8 rounded-full",
d === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
e
),
disabled: !i,
onClick: c,
...a,
children: [
/* @__PURE__ */ r(_e, {}),
/* @__PURE__ */ r("span", { className: "sr-only", children: "Previous slide" })
]
}
);
}
function Sr({
className: e,
variant: t = "outline",
size: o = "icon",
...a
}) {
const { orientation: d, scrollNext: c, canScrollNext: i } = G();
return /* @__PURE__ */ m(
R,
{
"data-slot": "carousel-next",
variant: t,
size: o,
className: s(
"absolute size-8 rounded-full",
d === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
e
),
disabled: !i,
onClick: c,
...a,
children: [
/* @__PURE__ */ r(me, {}),
/* @__PURE__ */ r("span", { className: "sr-only", children: "Next slide" })
]
}
);
}
const st = "mm-dialog";
function Nr({
...e
}) {
return /* @__PURE__ */ r(D.Root, { "data-slot": "dialog", ...e });
}
function zr({
...e
}) {
return /* @__PURE__ */ r(D.Trigger, { "data-slot": "dialog-trigger", ...e });
}
function lt(e) {
return /* @__PURE__ */ r(D.Portal, { "data-slot": "dialog-portal", ...e });
}
function Cr({
...e
}) {
return /* @__PURE__ */ r(D.Close, { "data-slot": "dialog-close", ...e });
}
function dt({
className: e,
...t
}) {
return /* @__PURE__ */ r(
D.Overlay,
{
"data-slot": "dialog-overlay",
className: s(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
e
),
...t
}
);
}
function Ar({
className: e,
children: t,
container: o,
...a
}) {
return /* @__PURE__ */ m(lt, { "data-slot": "dialog-portal", container: o, children: [
/* @__PURE__ */ r(dt, {}),
/* @__PURE__ */ m(
D.Content,
{
"data-slot": "dialog-content",
className: s(
`${st} bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg brutalist:rounded-xs`,
e
),
...a,
children: [
t,
/* @__PURE__ */ m(D.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
/* @__PURE__ */ r($e, {}),
/* @__PURE__ */ r("span", { className: "sr-only", children: "Close" })
] })
]
}
)
] });
}
function Tr({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "dialog-header",
className: s("flex flex-col gap-2 text-center sm:text-left", e),
...t
}
);
}
function kr({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "dialog-footer",
className: s(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
e
),
...t
}
);
}
function Lr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
D.Title,
{
"data-slot": "dialog-title",
className: s("text-lg leading-none font-semibold", e),
...t
}
);
}
function Er({
className: e,
...t
}) {
return /* @__PURE__ */ r(
D.Description,
{
"data-slot": "dialog-description",
className: s("text-muted-foreground text-sm", e),
...t
}
);
}
const ct = "mm-dropdown-menu";
function _r({
...e
}) {
return /* @__PURE__ */ r(A.Root, { "data-slot": "dropdown-menu", ...e });
}
function $r({
...e
}) {
return /* @__PURE__ */ r(A.Portal, { "data-slot": "dropdown-menu-portal", ...e });
}
function Mr({
...e
}) {
return /* @__PURE__ */ r(
A.Trigger,
{
"data-slot": "dropdown-menu-trigger",
...e
}
);
}
function Dr({
className: e,
sideOffset: t = 4,
...o
}) {
return /* @__PURE__ */ r(A.Portal, { children: /* @__PURE__ */ r(
A.Content,
{
"data-slot": "dropdown-menu-content",
sideOffset: t,
className: s(
ct,
"bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md brutalist:rounded-xs",
e
),
...o
}
) });
}
function Ir({
...e
}) {
return /* @__PURE__ */ r(A.Group, { "data-slot": "dropdown-menu-group", ...e });
}
function Br({
className: e,
inset: t,
variant: o = "default",
...a
}) {
return /* @__PURE__ */ r(
A.Item,
{
"data-slot": "dropdown-menu-item",
"data-inset": t,
"data-variant": o,
className: s(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
e
),
...a
}
);
}
function Rr({
className: e,
children: t,
checked: o,
...a
}) {
return /* @__PURE__ */ m(
A.CheckboxItem,
{
"data-slot": "dropdown-menu-checkbox-item",
className: s(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
e
),
checked: o,
...a,
children: [
/* @__PURE__ */ r("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ r(A.ItemIndicator, { children: /* @__PURE__ */ r(fe, { className: "size-4" }) }) }),
t
]
}
);
}
function Fr({
...e
}) {
return /* @__PURE__ */ r(
A.RadioGroup,
{
"data-slot": "dropdown-menu-radio-group",
...e
}
);
}
function jr({
className: e,
children: t,
...o
}) {
return /* @__PURE__ */ m(
A.RadioItem,
{
"data-slot": "dropdown-menu-radio-item",
className: s(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
e
),
...o,
children: [
/* @__PURE__ */ r("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ r(A.ItemIndicator, { children: /* @__PURE__ */ r(Me, { className: "size-2 fill-current" }) }) }),
t
]
}
);
}
function qr({
className: e,
inset: t,
...o
}) {
return /* @__PURE__ */ r(
A.Label,
{
"data-slot": "dropdown-menu-label",
"data-inset": t,
className: s(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
e
),
...o
}
);
}
function Qr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
A.Separator,
{
"data-slot": "dropdown-menu-separator",
className: s("bg-border -mx-1 my-1 h-px", e),
...t
}
);
}
function Vr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"span",
{
"data-slot": "dropdown-menu-shortcut",
className: s(
"text-muted-foreground ml-auto text-xs tracking-widest",
e
),
...t
}
);
}
function Ur({
...e
}) {
return /* @__PURE__ */ r(A.Sub, { "data-slot": "dropdown-menu-sub", ...e });
}
function Pr({
className: e,
inset: t,
children: o,
...a
}) {
return /* @__PURE__ */ m(
A.SubTrigger,
{
"data-slot": "dropdown-menu-sub-trigger",
"data-inset": t,
className: s(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
e
),
...a,
children: [
o,
/* @__PURE__ */ r(De, { className: "ml-auto size-4" })
]
}
);
}
function Wr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
A.SubContent,
{
"data-slot": "dropdown-menu-sub-content",
className: s(
"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
e
),
...t
}
);
}
const ut = "mm-fab", mt = U(
`${ut} fixed rounded-full shadow-lg transition-all duration-200 flex items-center justify-center`,
{
variants: {
size: {
default: "size-14",
sm: "size-12",
lg: "size-16"
},
position: {
"bottom-right": "bottom-6 right-6",
"bottom-left": "bottom-6 left-6",
"top-right": "top-6 right-6",
"top-left": "top-6 left-6"
},
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 dark:bg-destructive/60",
outline: "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
brand: "bg-brand text-brand-foreground shadow-xs hover:bg-brand/80"
}
},
defaultVariants: {
size: "default",
position: "bottom-right",
variant: "default"
}
}
), ft = ({
className: e,
size: t,
position: o,
variant: a,
icon: d,
...c
}) => /* @__PURE__ */ r(
R,
{
className: s(mt({ size: t, position: o, variant: a }), e),
"data-slot": "fab",
...c,
children: d || /* @__PURE__ */ r(Ie, { className: "size-6" })
}
);
ft.displayName = "FloatingActionButton";
function ce() {
const [e, t] = E({
width: null,
height: null
}), o = Ae(null);
return [C((d) => {
if (o.current && (o.current.disconnect(), o.current = null), (d == null ? void 0 : d.nodeType) === Node.ELEMENT_NODE) {
const c = new ResizeObserver(([i]) => {
if (i != null && i.borderBoxSize[0]) {
const { inlineSize: l, blockSize: n } = i.borderBoxSize[0];
t({ width: l, height: n });
}
});
c.observe(d), o.current = c;
}
}, []), e];
}
const gt = "mm-flipcard", Hr = (e) => {
const {
front: t,
back: o,
flip: a,
children: d,
className: c,
height: i,
slots: l = {},
slotProps: n,
...f
} = e, { Card: u = pe } = l, [g, x] = ce(), [v, h] = ce(), p = {
front: x.height || 0,
back: h.height || 0
}, S = Math.max(p.front, p.back) || "auto";
return /* @__PURE__ */ m(
"div",
{
className: s(gt, "w-full", c),
"data-flipped": a ? !0 : void 0,
"data-slot": "flipcard",
...f,
children: [
/* @__PURE__ */ r(
"div",
{
className: "relative transition-transform duration-600 transform-3d in-data-flipped:rotate-y-180",
style: { height: S },
children: ["front", "back"].map((y) => {
var I;
const T = { front: g, back: v }[y], L = { front: t, back: o }[y];
return /* @__PURE__ */ r(
"div",
{
className: s(
"absolute inset-x-0 top-0 min-h-full backface-hidden",
{ "rotate-y-180": y === "back" }
),
"data-side": y,
children: /* @__PURE__ */ r(
u,
{
...n == null ? void 0 : n.card,
ref: T,
"data-slot": `${y}-card`,
height: i,
className: s(
"flex-col justify-center border-2 border-card-foreground shadow-none",
(I = n == null ? void 0 : n.card) == null ? void 0 : I.className
),
children: typeof L == "string" ? /* @__PURE__ */ r(pt, { children: L }) : L
}
)
},
y
);
})
}
),
d
]
}
);
}, pt = ({
className: e,
...t
}) => /* @__PURE__ */ r(
he,
{
"data-slot": "flipcard-content",
className: s("text-center p-8", e),
...t
}
), Kr = ({
flipped: e,
className: t,
label: o,
children: a,
...d
}) => {
const c = s(
// { 'flex-row-reverse': flipped },
t
);
return /* @__PURE__ */ m(R, { className: c, "data-slot": "flipcard-button", ...d, children: [
e ? /* @__PURE__ */ r(Re, {}) : /* @__PURE__ */ r(Be, {}),
" ",
a || o
] });
}, ht = "mm-floating-window";
function Gr({ ...e }) {
return /* @__PURE__ */ r(_.Root, { "data-slot": "floating-window", ...e });
}
function Or({
className: e,
...t
}) {
return /* @__PURE__ */ r(
_.Trigger,
{
"data-slot": "floating-window-trigger",
className: s("fixed bottom-4 right-4", e),
...t
}
);
}
function Xr({
className: e,
align: t = "end",
side: o = "top",
sideOffset: a = 8,
...d
}) {
return /* @__PURE__ */ r(_.Portal, { children: /* @__PURE__ */ r(
_.Content,
{
"data-slot": "floating-window-content",
align: t,
side: o,
sideOffset: a,
className: s(
`${ht} z-50 w-72 rounded-md border bg-popover text-popover-foreground shadow-sm outline-none flex flex-col gap-6 py-6 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 brutalist:rounded-xs`,
e
),
...d
}
) });
}
function Yr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "floating-window-header",
className: s(
"@container/floating-window-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=floating-window-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
e
),
...t
}
);
}
function Jr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "floating-window-title",
className: s("leading-none font-semibold", e),
...t
}
);
}
function Zr({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "floating-window-description",
className: s("text-muted-foreground text-sm", e),
...t
}
);
}
function eo({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "floating-window-action",
className: s(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
e
),
...t
}
);
}
function to({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "floating-window-body",
className: s("px-6", e),
...t
}
);
}
function ro({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "floating-window-footer",
className: s("flex items-center px-6 [.border-t]:pt-6", e),
...t
}
);
}
function oo(e) {
return /* @__PURE__ */ r(_.Close, { "data-slot": "floating-window-close", ...e });
}
const vt = "mm-input";
function ao({ className: e, type: t, ...o }) {
return /* @__PURE__ */ r(
"input",
{
type: t,
"data-slot": "input",
className: s(
vt,
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"brutalist:rounded-xs playful:rounded-full",
e
),
...o
}
);
}
const bt = "mm-popover";
function no({
...e
}) {
return /* @__PURE__ */ r(_.Root, { "data-slot": "popover", ...e });
}
function io({
className: e,
...t
}) {
return /* @__PURE__ */ r(
_.Trigger,
{
"data-slot": "popover-trigger",
className: s("brutalist:rounded-xs playful:rounded-full", e),
...t
}
);
}
function so({
className: e,
align: t = "center",
sideOffset: o = 4,
container: a,
...d
}) {
return /* @__PURE__ */ r(_.Portal, { container: a, children: /* @__PURE__ */ r(
_.Content,
{
"data-slot": "popover-content",
align: t,
sideOffset: o,
className: s(
`${bt} bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden brutalist:rounded-xs`,
e
),
...d
}
) });
}
function lo({
...e
}) {
return /* @__PURE__ */ r(_.Anchor, { "data-slot": "popover-anchor", ...e });
}
const xt = "mm-progress";
function wt({
className: e,
value: t,
...o
}) {
return /* @__PURE__ */ r(
de.Root,
{
"data-slot": "progress",
className: s(
xt,
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
e
),
...o,
children: /* @__PURE__ */ r(
de.Indicator,
{
"data-slot": "progress-indicator",
className: "bg-primary h-full w-full flex-1 transition-all",
style: { transform: `translateX(-${100 - (t || 0)}%)` }
}
)
}
);
}
function yt({
value: e,
defaultValue: t,
onChange: o = () => {
}
}) {
const [a, d] = E(t), c = typeof e == "boolean", i = c ? e : a, l = C(
(n) => {
const f = typeof n == "function" ? n(i) : n;
o(f), c || d(f);
},
[c, o, i]
);
return [i, l];
}
function St(e = !0) {
const [t, o] = E(e), a = C(() => {
o(!1);
}, []), d = C(() => {
o(!0);
}, []), c = C(() => {
o(!0);
}, []);
return {
isTimerActive: t,
pauseTimer: a,
resumeTimer: d,
resetTimer: c
};
}
function Nt({
questions: e = [],
events: t = {},
attempts: o = [],
displayIndex: a,
validate: d,
requireConfirm: c,
defaultScreen: i = "welcome"
}) {
const [l, n] = E(i), f = re(() => {
const b = o.length, $ = b === 0 ? 0 : o.reduce((q, Ce) => q + Ce.score, 0) / b, B = Math.round(e.length * $);
return { totalAttempts: b, avgScore: B };
}, [o, e]), [u, g] = yt({
value: a,
defaultValue: 0,
onChange: t.onNavigateTo
}), [x, v] = E(null), [h, p] = E(!1), [S, y] = E(!1), [T, L] = E(0), { isTimerActive: I, pauseTimer: w, resetTimer: N } = St(), z = e[u], W = async (b) => {
var B;
if (!z) return;
let $ = b === z.correctAnswer;
if (console.log({ choice: b, currentQuestion: z, isAnswerCorrect: $ }), d)
try {
$ = await d(b, z.correctAnswer);
} catch (q) {
console.error("Validation error:", q);
}
y($), p(!0), $ && L((q) => q + 1), (B = t.onAnswer) == null || B.call(t, z.id, b, $), w();
}, O = () => {
var b;
n("quiz"), (b = t.onStart) == null || b.call(t);
}, H = () => {
g(0), v(null), p(!1), N(), L(0);
}, K = C(() => {
var b;
n("end"), (b = t.onFinish) == null || b.call(t, T, e.length);
}, [t, T, e]), X = (b) => {
v(b), c || W(b);
}, j = () => {
x && !h && W(x);
}, Y = C(() => {
var b;
z && !h && ((b = t.onTimeUp) == null || b.call(t, z.id), p(!0), y(!1));
}, [z, t, h]), J = C(() => {
if (!(!x && !h)) {
if (u === e.length - 1) {
K();
return;
}
g((b) => b + 1), v(null), p(!1), N();
}
}, [
u,
e.length,
x,
h,
N,
g,
K
]);
return {
currentQuestion: z,
currentIndex: u,
selectedAnswer: x,
isAnswerValidated: h,
isCorrect: S,
score: T,
screen: l,
stats: f,
handleAnswerSelection: X,
handleConfirmAnswer: j,
handleNext: J,
handleCancel: () => {
var b;
H(), n(i), (b = t.onCancel) == null || b.call(t);
},
handleTimeUp: Y,
handleStart: O,
handleRestart: () => {
var b;
l === "end" && (H(), n("quiz"), (b = t.onRestart) == null || b.call(t));
},
isTimerActive: I
};
}
const be = ({
className: e,
variant: t,
...o
}) => /* @__PURE__ */ r(
"div",
{
...o,
className: s(e),
"data-variant": t,
"data-slot": "quiz-player-screen"
}
), xe = typeof window < "u";
function zt(e) {
if (!xe || !window.localStorage)
return null;
try {
return window.localStorage.getItem(e);
} catch (t) {
return console.error("Error reading locale from localStorage:", t), null;
}
}
function Ct(e, t) {
if (!(!xe || !window.localStorage))
try {
window.localStorage.setItem(e, t);
} catch (o) {
console.error("Error writing locale to localStorage:", o);
}
}
function At(e, t, o) {
if (!e)
return o;
try {
return Ye(
[...t],
// Needs to be mutable array for some versions
e,
{ loose: !0 }
// Allows matching 'en' to 'en-US' etc.
) || o;
} catch (a) {
return console.warn(
"Could not parse accept-language header:",
e,
a
), o;
}
}
function Z(e, t) {
return t ? e.replace(/\{(\w+)\}/g, (o, a) => {
const d = t[a];
return d != null ? String(d) : o;
}) : e;
}
const Tt = "mm-locale";
function co(e) {
if (!e.defaultLocale)
throw new Error("[i18n] `defaultLocale` is required.");
if (!e.resources || Object.keys(e.resources).length === 0)
throw new Error("[i18n] `resources` must be provided and non-empty.");
e.resources[e.defaultLocale] || console.warn(
`[i18n] Default locale "${e.defaultLocale}" not found in resources. Translation fallbacks may not work as expected.`
);
const t = {
storageKey: Tt,
...e
}, o = Object.keys(t.resources);
return {
config: t,
t: (l, n, f) => {
var h, p;
let u, g;
if (typeof n == "string")
g = n;
else if (n)
if ("fallback" in n || "args" in n) {
const S = n;
u = S.args, g = S.fallback;
} else
u = n;
const x = f || t.defaultLocale;
let v = (h = t.resources[x]) == null ? void 0 : h[l];
if (!v && x !== t.defaultLocale) {
const S = (p = t.resources[t.defaultLocale]) == null ? void 0 : p[l];
typeof S == "string" && (f && console.warn(
`[i18n] Translation key "${l}" not found for locale "${f}". Falling back to default locale "${t.defaultLocale}".`
), v = S);
}
return v ? Z(v, u) : g !== void 0 ? (console.warn(
`[i18n] Translation key "${l}" not found for locale "${x}" or default locale "${t.defaultLocale}". Using provided fallback.`
), Z(g, u)) : (console.warn(
`[i18n] Translation key "${l}" not found for locale "${x}" or default locale "${t.defaultLocale}". Returning key.`
), Z(l, u));
},
getLocaleFromHeaders: (l) => {
let n = null;
return typeof (l == null ? void 0 : l.get) == "function" ? n = l.get("accept-language") : l && (n = l["accept-language"] || l["Accept-Language"] || null), At(
n,
o,
t.defaultLocale
);
},
getAvailableLocales: () => [...o]
};
}
const we = ee(null), uo = ({
children: e,
instance: t,
initialLocale: o
}) => {
const [a, d] = E(() => {
if (o && t.config.resources[o])
return o;
const n = zt(t.config.storageKey);
return n && t.config.resources[n] ? n : t.config.defaultLocale;
});
M(() => {
Ct(t.config.storageKey, a);
}, [a, t.config.storageKey]);
const c = C(
(n) => {
t.config.resources[n] ? d(n) : console.warn(
`[i18n] Attempted to set unsupported locale: "${n}". Available: ${t.getAvailableLocales().join(", ")}`
);
},
[t]
), i = C(
(n, ...f) => {
const u = f[0], g = u ? [u, a] : [a];
return t.t(n, ...g);
},
[t, a]
), l = re(
() => ({
locale: a,
setLocale: c,
t: i,
i18nInstance: t
}),
[a, c, i, t]
);
return /* @__PURE__ */ r(we.Provider, { value: l, children: e });
}, P = () => {
const e = te(we);
if (e === null)
throw new Error(
"[i18n] `useTranslation` must be used within an <I18nProvider>"
);
return e;
};
function kt({
score: e = 0,
totalQuestions: t = 0,
stats: o = {},
onRestart: a,
onFeedback: d = () => {
},
slots: c = {},
slotProps: i
}) {
var f, u, g;
const { t: l } = P(), { Button: n = R } = c;
return /* @__PURE__ */ m(be, { variant: "end", children: [
/* @__PURE__ */ m("div", { className: "text-center mb-8", children: [
/* @__PURE__ */ r(le, { size: 48, className: "mx-auto mb-4 text-yellow-500" }),
/* @__PURE__ */ r("h2", { className: "text-3xl font-bold text-gray-900 mb-2", children: l("quizEnd", "Quiz completato!") }),
/* @__PURE__ */ r("p", { className: "text-muted-foreground", children: l("quizEndDescription", "Ecco come sei andato") })
] }),
/* @__PURE__ */ m("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-8", children: [
/* @__PURE__ */ m("div", { className: "bg-muted p-4 rounded-lg text-center", children: [
/* @__PURE__ */ r(le, { size: 24, className: "mx-auto mb-2 text-foreground" }),
/* @__PURE__ */ m("div", { className: "text-2xl font-bold text-foreground", children: [
e,
" / ",
t
] }),
/* @__PURE__ */ r("div", { className: "text-sm text-foreground", children: l("currentScore", "Punteggio ottenuto") })
] }),
/* @__PURE__ */ m("div", { className: "border-2 border-muted p-4 rounded-lg text-center", children: [
/* @__PURE__ */ r(Fe, { size: 24, className: "mx-auto mb-2 text-muted-foreground" }),
/* @__PURE__ */ r("div", { className: "text-2xl font-bold text-muted-foreground", children: o.totalAttempts || 0 }),
/* @__PURE__ */ r("div", { className: "text-sm text-muted-foreground", children: l("quizAttempts", "Tentativi") })
] }),
/* @__PURE__ */ m("div", { className: "border-2 border-muted p-4 rounded-lg text-center", children: [
/* @__PURE__ */ r(je, { size: 24, className: "mx-auto mb-2 text-muted-foreground" }),
/* @__PURE__ */ m("div", { className: "text-2xl font-bold text-muted-foreground", children: [
o.avgScore || 0,
" / ",
t
] }),
/* @__PURE__ */ r("div", { className: "text-sm text-muted-foreground", children: l("avgScore", "Punteggio medio") })
] })
] }),
/* @__PURE__ */ m("div", { className: "space-y-4 max-w-xs mx-auto", children: [
/* @__PURE__ */ m(
n,
{
...i == null ? void 0 : i.button,
size: "lg",
variant: "brand",
className: s("w-full shadow-none", (f = i == null ? void 0 : i.button) == null ? void 0 : f.className),
onClick: a,
children: [
/* @__PURE__ */ r(qe, {}),
" ",
l("quizRestart", "Riprova")
]
}
),
/* @__PURE__ */ m("div", { className: "flex gap-4", children: [
/* @__PURE__ */ m(
n,
{
...i == null ? void 0 : i.button,
className: s(
"flex-1 bg-success/10 text-success hover:bg-success/20 shadow-none",
(u = i == null ? void 0 : i.button) == null ? void 0 : u.className
),
onClick: () => d(1),
children: [
/* @__PURE__ */ r(Qe, {}),
" ",
l("helpful", "Utile")
]
}
),
/* @__PURE__ */ m(
n,
{
...i == null ? void 0 : i.button,
className: s(
"flex-1 bg-destructive/10 text-destructive hover:bg-destructive/20 shadow-none",
(g = i == null ? void 0 : i.button) == null ? void 0 : g.className
),
onClick: () => d(-1),
children: [
/* @__PURE__ */ r(Ve, { size: 20 }),
" ",
l("notHelpful", "Non utile")
]
}
)
] })
] })
] });
}
function Lt({
title: e,
description: t,
questions: o = [],
onStart: a = () => {
},
onCancel: d = () => {
},
slots: c = {},
slotProps: i,
details: l = []
}) {
var v, h;
const { t: n } = P(), { Button: f = R } = c, u = o.reduce(
(p, S) => p + (S.timeLimit || 0),
0
), g = Math.round(u / o.length), x = [
{
icon: /* @__PURE__ */ r(Ue, { size: 20 }),
label: n("questions", {
fallback: "{value} Domande",
args: { value: o.length }
})
}
];
return g && x.push({
icon: /* @__PURE__ */ r(Pe, { size: 20 }),
label: n("quizTimeLimit", {
fallback: "Circa {value} secondi per domanda.",
args: { value: g }
})
}), u && x.push({
icon: /* @__PURE__ */ r(We, { size: 20 }),
label: n("quizTimeLimit", {
fallback: "Tempo totale: {value} minuti.",
args: { value: u / 60 }
})
}), /* @__PURE__ */ m(be, { variant: "welcome", children: [
/* @__PURE__ */ r("div", { className: "text-3xl font-bold mb-4 font-brand", children: e }),
/* @__PURE__ */ r("p", { className: "mb-8", children: t }),
/* @__PURE__ */ r("div", { className: "space-y-4 mb-8", children: x.concat(l).map((p, S) => /* @__PURE__ */ m(
"div",
{
className: "flex items-center gap-3 text-muted-foreground",
children: [
p.icon,
/* @__PURE__ */ r("span", { children: p.label })
]
},
S
)) }),
/* @__PURE__ */ m("div", { className: "flex gap-2 items-center", children: [
/* @__PURE__ */ r(
f,
{
...i == null ? void 0 : i.button,
size: "lg",
variant: "brand",
onClick: a,
className: s("capitalize", (v = i == null ? void 0 : i.button) == null ? void 0 : v.className),
children: n("start", "Inizia")
}
),
/* @__PURE__ */ r(
f,
{
...i == null ? void 0 : i.button,
variant: "link",
className: s(
"capitalize text-muted-foreground",
(h = i == null ? void 0 : i.button) == null ? void 0 : h.className
),
onClick: d,
children: n("cancel", "Annulla")
}
)
] })
] });
}
function Et({
onCancel: e,
onConfirm: t = () => {
},
onNext: o,
selectedAnswer: a,
isAnswerValidated: d,
isLastQuestion: c,
requireConfirm: i,
className: l,
asChild: n,
...f
}) {
const { t: u } = P(), g = n ? ae : "div", x = () => !d && i ? u("quiz_player_confirm", u("confirm", "Conferma")) : c ? u("quiz_player_end", u("end", "Fine")) : u("quiz_player_next", u("next", "Successiva")), v = () => !d && i || c ? null : /* @__PURE__ */ r(me, {}), h = () => !d && i ? t : o;
return /* @__PURE__ */ r(
g,
{
"data-slot": "quiz-player-controls",
className: s("flex justify-end", l),
...f,
children: (a || d) && /* @__PURE__ */ m(R, { variant: "brand", size: "lg", onClick: h(), children: [
x(),
" ",
v()
] })
}
);
}
function _t({
timeLimit: e,
onTimeUp: t = () => {
},
isActive: o,
className: a,
...d
}) {
const [c, i] = E(e);
M(() => {
i(e);
}, [e]), M(() => {
if (!o) return;
const f = setInterval(() => {
i((u) => u <= 1 ? (clearInterval(f), t(), 0) : u - 1);
}, 1e3);
return () => clearInterval(f);
}, [o, t]);
const l = Math.floor(c / 60), n = c % 60;
return /* @__PURE__ */ m(
"div",
{
...d,
"data-slot": "quiz-player-timer",
className: s(
"flex items-center gap-2 text-muted-foreground text-sm md:text-md",
{ "text-yellow-500 font-semibold": c <= 10 },
{ "text-destructive font-semibold": c === 0 },
a
),
children: [
/* @__PURE__ */ r(He, { size: 16 }),
/* @__PURE__ */ m("span", { children: [
String(l).padStart(2, "0"),
":",
String(n).padStart(2, "0")
] })
]
}
);
}
function $t({
timeLimit: e,
isTimerActive: t,
onTimeUp: o,
onCancel: a,
className: d,
slots: c = {},
title: i,
current: l = 0,
total: n,
...f
}) {
const { ProgressBar: u = wt } = c, { t: g } = P(), x = n ? l / n * 100 : 0, v = n ? g("quizProgress", {
args: { value: l, total: n },
fallback: "Domanda {value} di {total}"
}) : null;
return /* @__PURE__ */ m(
"div",
{
"data-slot": "quiz-player-progress",
className: s("w-full text-muted-foreground", d),
...f,
children: [
/* @__PURE__ */ r("div", { className: "mb-2 font-semibold", children: i }),
/* @__PURE__ */ m("div", { className: "flex mb-2 gap-2 items-center", children: [
/* @__PURE__ */ r("span", { className: "grow text-sm", children: v }),
e && /* @__PURE__ */ r(
_t,
{
timeLimit: e,
isActive: t ?? !0,
onTimeUp: o
}
),
/* @__PURE__ */ r(R, { size: "sm", variant: "ghost", onClick: a, children: /* @__PURE__ */ r(Ke, {}) })
] }),
/* @__PURE__ */ r(u, { value: x })
]
}
);
}
const Mt = "mm-tooltip";
function ye({
delayDuration: e = 0,
...t
}) {
return /* @__PURE__ */ r(
F.Provider,
{
"data-slot": "tooltip-provider",
delayDuration: e,
...t
}
);
}
function Dt({
...e
}) {
return /* @__PURE__ */ r(ye, { children: /* @__PURE__ */ r(F.Root, { "data-slot": "tooltip", ...e }) });
}
function It({
className: e,
...t
}) {
return /* @__PURE__ */ r(
F.Trigger,
{
"data-slot": "tooltip-trigger",
className: s("brutalist:rounded-xs playful:rounded-full", e),
...t
}
);
}
function mo({
className: e,
...t
}) {
return /* @__PURE__ */ r(
F.Arrow,
{
"data-slot": "tooltip-arrow",
className: s(
"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
e
),
...t
}
);
}
function Bt({
className: e,
sideOffset: t = 0,
children: o,
...a
}) {
return /* @__PURE__ */ r(F.Portal, { children: /* @__PURE__ */ r(
F.Content,
{
"data-slot": "tooltip-content",
sideOffset: t,
className: s(
Mt,
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance brutalist:rounded-xs playful:rounded-xl",
e
),
...a,
children: o
}
) });
}
function Rt({
question: e,
choices: t,
selectedAnswer: o,
isAnswerValidated: a,
correctAnswer: d,
hint: c,
isCorrect: i,
title: l,
onSelectAnswer: n = () => {
},
className: f,
...u
}) {
return /* @__PURE__ */ m(
"div",
{
"data-slot": "quiz-player-question",
className: s("flex flex-col gap-6 text-card-foreground", f),
...u,
children: [
/* @__PURE__ */ r("div", { className: "font-semibold leading-none tracking-tight text-xl", children: e }),
/* @__PURE__ */ r("div", { className: "*:mb-3 *:last:mb-0", children: t.map((g) => /* @__PURE__ */ r(
Ft,
{
selected: o === g.value,
disabled: a,
isCorrect: a && g.value === d,
isWrong: a && g.value === o && !i,
onClick: () => n(g.value),
children: g.label
},
g.label
)) })
]
}
);
}
function Ft({
selected: e,
disabled: t,
isCorrect: o,
isWrong: a,
onClick: d = () => {
},
children: c,
className: i,
...l
}) {
return /* @__PURE__ */ r(
"button",
{
...l,
className: s("w-full p-4 rounded-lg bg-transparent border-border border-2 text-foreground text-left transition-all duration-200", o ? "border-success bg-success/10 text-success font-semibold" : a ? "border-destructive bg-destructive/10 text-destructive font-semibold" : e ? "border-primary bg-primary/10 text-primary" : t ? "text-muted" : "hover:bg-muted cursor-pointer", i),
onClick: d,
disabled: t,
"data-slot": "quiz-player-choice",
"data-state": o ? "correct" : a ? "wrong" : e ? "selected" : "",
children: c
}
);
}
function fo({
children: e,
className: t,
...o
}) {
const { t: a } = P();
return /* @__PURE__ */ r(ye, { children: /* @__PURE__ */ m(Dt, { children: [
/* @__PURE__ */ r(
It,
{
...o,
asChild: !0,
"data-slot": "quiz-player-hint-trigger",
className: s(
"text-muted-foreground/50 text-sm transition-all",
t
),
children: /* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ r(Ge, { size: 16, className: "inline mr-2" }),
a("quizHint", "Suggerimento")
] })
}
),
/* @__PURE__ */ r(
Bt,
{
className: "bg-popover text-popover-foreground",
side: "top",
align: "start",
"data-slot": "quiz-player-hint-content",
children: e
}
)
] }) });
}
function go({
isCorrect: e
}) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "quiz-player-feedback",
className: `p-4 rounded-lg ${e ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"}`,
children: e ? "Correct!" : "Incorrect. Try again!"
}
);
}
const jt = "mm-quiz-player", qt = U(
`${jt} w-full flex flex-col gap-6 text-card-foreground relative`,
{
variants: {
variant: {
default: "*:data-question:rounded-xl *:data-question:bg-card *:data-question:shadow-xl *:data-question:p-6",
contained: "rounded-xl bg-card shadow-xl p-6",
ghost: ""
}
},
defaultVariants: {
variant: "default"
}
}
);
function po({
// controller props
questions: e = [],
events: t = {},
validate: o,
requireConfirm: a = !1,
displayIndex: d,
defaultScreen: c,
// own props
title: i,
description: l,
attempts: n = [],
variant: f = "default",
slots: u = {},
slotProps: g = {},
className: x,
onFeedback: v,
...h
}) {
const {
currentQuestion: p,
currentIndex: S,
selectedAnswer: y,
isAnswerValidated: T,
isCorrect: L,
score: I,
screen: w,
stats: N,
handleAnswerSelection: z,
handleConfirmAnswer: W,
handleNext: O,
handleTimeUp: H,
handleStart: K,
handleRestart: X,
handleCancel: j,
isTimerActive: Y
} = Nt({
questions: e,
events: t,
attempts: n,
validate: o,
requireConfirm: a,
defaultScreen: c
}), {
WelcomeScreen: J = Lt,
EndScreen: ie = kt,
Progress: se = $t,
Question: b = Rt,
Controls: $ = Et
} = u, B = {
...h,
className: s(qt({ variant: f, className: x })),
"data-slot": "quiz-player",
"data-variant": f
};
return w === "welcome" ? /* @__PURE__ */ r("div", { ...B, children: /* @__PURE__ */ r(
J,
{
...g.welcome,
title: i,
description: l,
questions: e,
onStart: K,
onCancel: j
}
) }) : w === "end" ? /* @__PURE__ */ r("div", { ...B, children: /* @__PURE__ */ r(
ie,
{
...g.end,
score: I,
totalQuestions: e.length,
stats: N,
onRestart: X,
onFeedback: v
}
) }) : /* @__PURE__ */ m("div", { ...B, children: [
/* @__PURE__ */ r(
se,
{
title: i,
current: S + 1,
total: e.length,
timeLimit: p == null ? void 0 : p.timeLimit,
isTimerActive: Y,
onTimeUp: H,
onCancel: j
}
),
p && /* @__PURE__ */ r(
b,
{
title: i,
question: p.question,
choices: p.choices,
selectedAnswer: y,
isAnswerValidated: T,
correctAnswer: p.correctAnswer,
hint: p.hint,
onSelectAnswer: z,
isCorrect: L,
"data-question": p.id
}
),
/* @__PURE__ */ r(
$,
{
onCancel: j,
onConfirm: W,
onNext: O,
selectedAnswer: y,
isAnswerValidated: T,
isLastQuestion: S === e.length - 1,
requireConfirm: a
}
)
] });
}
const Qt = "mm-scroll-area";
function ho({
className: e,
children: t,
...o
}) {
return /* @__PURE__ */ m(
V.Root,
{
"data-slot": "scroll-area",
className: s(Qt, "relative brutalist:rounded-xs", e),
...o,
children: [
/* @__PURE__ */ r(
V.Viewport,
{
"data-slot": "scroll-area-viewport",
className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
children: t
}
),
/* @__PURE__ */ r(Vt, {}),
/* @__PURE__ */ r(V.Corner, {})
]
}
);
}
function Vt({
className: e,
orientation: t = "vertical",
...o
}) {
return /* @__PURE__ */ r(
V.ScrollAreaScrollbar,
{
"data-slot": "scroll-area-scrollbar",
orientation: t,
className: s(
"flex touch-none p-px transition-colors select-none",
t === "vertical" && "h-full w-2.5 border-l border-l-transparent",
t === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
e
),
...o,
children: /* @__PURE__ */ r(
V.ScrollAreaThumb,
{
"data-slot": "scroll-area-thumb",
className: "bg-border relative flex-1 rounded-full"
}
)
}
);
}
const Ut = "mm-select";
function vo({
...e
}) {
return /* @__PURE__ */ r(k.Root, { "data-slot": "select", ...e });
}
function bo({
...e
}) {
return /* @__PURE__ */ r(k.Group, { "data-slot": "select-group", ...e });
}
function xo({
...e
}) {
return /* @__PURE__ */ r(k.Value, { "data-slot": "select-value", ...e });
}
function wo({
className: e,
size: t = "default",
children: o,
...a
}) {
return /* @__PURE__ */ m(
k.Trigger,
{
"data-slot": "select-trigger",
"data-size": t,
className: s(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 brutalist:rounded-xs playful:rounded-full",
e
),
...a,
children: [
o,
/* @__PURE__ */ r(k.Icon, { asChild: !0, children: /* @__PURE__ */ r(ge, { className: "size-4 opacity-50" }) })
]
}
);
}
function yo({
className: e,
children: t,
position: o = "popper",
...a
}) {
return /* @__PURE__ */ r(k.Portal, { children: /* @__PURE__ */ m(
k.Content,
{
"data-slot": "select-content",
className: s(
Ut,
"bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md brutalist:rounded-xs",
o === "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",
e
),
position: o,
...a,
children: [
/* @__PURE__ */ r(Pt, {}),
/* @__PURE__ */ r(
k.Viewport,
{
className: s(
"p-1",
o === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
),
children: t
}
),
/* @__PURE__ */ r(Wt, {})
]
}
) });
}
function So({
className: e,
...t
}) {
return /* @__PURE__ */ r(
k.Label,
{
"data-slot": "select-label",
className: s("text-muted-foreground px-2 py-1.5 text-xs", e),
...t
}
);
}
function No({
className: e,
children: t,
...o
}) {
return /* @__PURE__ */ m(
k.Item,
{
"data-slot": "select-item",
className: s(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
e
),
...o,
children: [
/* @__PURE__ */ r("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ r(k.ItemIndicator, { children: /* @__PURE__ */ r(fe, { className: "size-4" }) }) }),
/* @__PURE__ */ r(k.ItemText, { children: t })
]
}
);
}
function zo({
className: e,
...t
}) {
return /* @__PURE__ */ r(
k.Separator,
{
"data-slot": "select-separator",
className: s("bg-border pointer-events-none -mx-1 my-1 h-px", e),
...t
}
);
}
function Pt({
className: e,
...t
}) {
return /* @__PURE__ */ r(
k.ScrollUpButton,
{
"data-slot": "select-scroll-up-button",
className: s(
"flex cursor-default items-center justify-center py-1",
e
),
...t,
children: /* @__PURE__ */ r(Oe, { className: "size-4" })
}
);
}
function Wt({
className: e,
...t
}) {
return /* @__PURE__ */ r(
k.ScrollDownButton,
{
"data-slot": "select-scroll-down-button",
className: s(
"flex cursor-default items-center justify-center py-1",
e
),
...t,
children: /* @__PURE__ */ r(ge, { className: "size-4" })
}
);
}
const Ht = "mm-separator";
function Co({
className: e,
orientation: t = "horizontal",
decorative: o = !0,
...a
}) {
return /* @__PURE__ */ r(
Je.Root,
{
"data-slot": "separator-root",
decorative: o,
orientation: t,
className: s(
Ht,
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
e
),
...a
}
);
}
const Kt = "mm-skeleton";
function Ao({ className: e, ...t }) {
return /* @__PURE__ */ r(
"div",
{
"data-slot": "skeleton",
className: s(
Kt,
"animate-pulse rounded-md bg-primary/10 brutalist:rounded-xs",
e
),
...t
}
);
}
const Gt = "mm-stats", Ot = U(`${Gt} relative shadow-sm p-0`, {
variants: {
variant: {
default: "text-primary",
primary: "bg-primary text-primary-foreground border-none **:data-[slot=stats-card-icon]:bg-primary-foreground/10",
outline: "bg-transparent",
secondary: "bg-secondary text-secondary-foreground **:data-[slot=stats-card-icon]:bg-secondary-foreground/10"
}
},
defaultVariants: {
variant: "default"
}
}), To = ({
label: e,
description: t,
value: o,
change: a,
icon: d = Xe,
trending: c,
variant: i = "default",
className: l,
...n
}) => /* @__PURE__ */ m(
pe,
{
...n,
"data-slot": "stats-card",
className: s(Ot({ variant: i, className: l })),
"data-trending": c,
children: [
/* @__PURE__ */ m(
at,
{
className: s(
"flex flex-row items-center justify-between space-y-0 p-3 pb-0",
{ "pb-2": !!t }
),
children: [
/* @__PURE__ */ m(nt, { className: "text-sm font-medium", children: [
e,
t && /* @__PURE__ */ r("p", { className: "text-xs text-muted-foreground", children: t })
] }),
/* @__PURE__ */ r(Xt, { children: /* @__PURE__ */ r(d, { className: "size-5" }) })
]
}
),
/* @__PURE__ */ r(he, { className: "p-3 pt-0", children: /* @__PURE__ */ m("div", { className: "flex gap-3 items-baseline", children: [
/* @__PURE__ */ r("span", { className: "text-2xl font-bold", children: o }),
/* @__PURE__ */ r("span", { className: "text-xs text-muted-foreground in-data-[trending=up]:text-success in-data-[trending=down]:text-destructive font-medium", children: a })
] }) })
]
}
), Xt = ({
className: e,
...t
}) => /* @__PURE__ */ r(
"div",
{
"data-slot": "stats-card-icon",
className: s("p-2 rounded-lg bg-card-foreground/10", e),
...t
}
), Yt = "mm-toggle", Jt = U(
`${Yt} inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap`,
{
variants: {
variant: {
default: "bg-transparent",
outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
},
size: {
default: "h-9 px-2 min-w-9",
sm: "h-8 px-1.5 min-w-8",
lg: "h-10 px-2.5 min-w-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
function ko({
className: e,
variant: t,
size: o,
...a
}) {
return /* @__PURE__ */ r(
Ze.Root,
{
"data-slot": "toggle",
className: s(Jt({ variant: t, size: o, className: e })),
...a
}
);
}
const Zt = "mm-widget", Lo = ({ asChild: e, className: t, ...o }) => /* @__PURE__ */ r(
e ? ae : "div",
{
"data-slot": "widget",
className: s(`${Zt} mm-styled relative`, t),
...o
}
), Se = ee(
void 0
), Eo = () => {
const e = te(Se);
if (e === void 0)
throw new Error("useTheme must be used within a ThemeProvider");
return e;
}, ne = "(prefers-color-scheme: dark)", Ne = "data-mm-theme", ze = "data-mm-style", Q = () => typeof window > "u" ? "light" : window.matchMedia(ne).matches ? "dark" : "light", er = (e) => {
if (typeof window > "u")
return null;
try {
const t = window.localStorage.getItem(e);
return t && ["light", "dark", "system"].includes(t) ? t : null;
} catch (t) {
return console.error("Error reading localStorage:", t), null;
}
}, tr = (e, t) => {
if (typeof window > "u")
return !1;
try {
return window.localStorage.setItem(e, t), !0;
} catch (o) {
return console.error("Error setting localStorage:", o), !1;
}
}, ue = () => {
if (typeof document > "u") return () => {
};
const e = document.createElement("style");
return e.appendChild(
document.createTextNode(
"*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"
)
), document.head.appendChild(e), () => {
window.getComputedStyle(document.body), setTimeout(() => {
document.head.removeChild(e);
}, 1);
};
}, _o = (e) => {
const {
children: t,
themes: o = { light: "light", dark: "dark" },
forcedMode: a,
variant: d = "default",
defaultMode: c = "system",
storageKey: i = "mm-theme-mode",
enableSystem: l = !0,
nonce: n,
disableTransitionOnChange: f = !0,
// Enable by default to prevent FOUC
global: u = !0
} = e, [g, x] = E(void 0), [v, h] = E(
() => (
// Initial state determination (server-side or initial client render)
// Falls back to 'light' if system isn't enabled or window isn't available
l ? Q() : "light"
)
);
M(() => {
const w = er(i), N = a ?? w ?? c;
x(N), h(N !== "system" || !l ? N : Q());
}, [a, i, c, l]);
const p = C(
(w) => {
if (l && (a ?? g) === "system") {
const z = w.matches ? "dark" : "light";
h(z);
}
},
[g, a, l]
// Re-create if these change
);
M(() => {
if (!l || typeof window > "u")
return;
const w = window.matchMedia(ne);
return p(w), w.addEventListener ? w.addEventListener("change", p) : w.addListener(p), () => {
w.removeEventListener ? w.removeEventListener("change", p) : w.removeListener(p);
};
}, [p, l]);
const S = C(
(w) => {
if (w.key !== i || a)
return;
const N = w.newValue;
if (N && ["light", "dark", "system"].includes(N)) {
const z = N;
x(z), h(z !== "system" || !l ? z : Q());
} else N === null && (x(c), h(c !== "system" || !l ? c : Q()));
},
[i, a, c, l]
// Re-create if these change
);
M(() => {
if (!(typeof window > "u"))
return window.addEventListener("storage", S), () => window.removeEventListener("storage", S);
}, [S]);
const y = C(
(w) => {
if (a) {
console.warn(
"ThemeProvider: Cannot set mode when `forcedMode` is set."
);
return;
}
const N = f ? ue() : null;
tr(i, w) || console.warn("ThemeProvider: Failed to save mode to localStorage"), x(w), h(w !== "system" || !l ? w : Q()), N && N();
},
[a, i, l, f]
), T = o[v] ?? (v === "dark" ? "dark" : "light"), L = a ?? g ?? c;
M(() => {
if (typeof document < "u" && L) {
const w = f ? ue() : null, N = document.documentElement;
N.setAttribute(Ne, T), N.setAttribute(ze, d), N.style.colorScheme = T.includes("dark") ? "dark" : "light", u ? document.body.classList.add("mm-styled") : document.body.classList.remove("mm-styled"), w && w();
}
}, [
T,
v,
d,
u,
L,
f
]);
const I = re(
() => ({
mode: L,
colorScheme: v,
theme: T,
variant: d,
setMode: y,
themes: o
// Pass down the available themes map
}),
[
L,
v,
T,
d,
y,
o
]
);
return /* @__PURE__ */ m(Se.Provider, { value: I, children: [
/* @__PURE__ */ r(
rr,
{
suppressHydrationWarning: !0,
theme: T,
themes: o,
mode: L,
variant: d,
nonce: n,
storageKey: i,
enableSystem: l,
global: u
}
),
t
] });
}, rr = Te(function({
theme: t = "light",
themes: o,
mode: a = "system",
variant: d = "default",
nonce: c,
storageKey: i,
enableSystem: l = !0,
suppressHydrationWarning: n,
global: f
}) {
const u = `
(function() {
try {
var d = document.documentElement;
var themeAttr = '${Ne}';
var variantAttr = '${ze}';
var storageKey = '${i}';
var defaultTheme = '${t}';
var defaultMode = '${a}';
var enableSystem = ${l ? "true" : "false"};
// Themes mapping serialized as JSON
var themesMap = ${JSON.stringify(o)};
// Try to get mode from localStorage
var storedMode;
try {
storedMode = localStorage.getItem(storageKey);
} catch (e) {
console.warn('Failed to read from localStorage', e);
}
// Determine the mode to use
var effectiveMode = storedMode || defaultMode;
// Determine the theme based on mode
var themeToApply = defaultTheme;
if (effectiveMode === 'light') {
themeToApply = themesMap.light;
} else if (effectiveMode === 'dark') {
themeToApply = themesMap.dark;
} else if (effectiveMode === 'system' && enableSystem) {
// Resolve system theme
var prefersDark = window.matchMedia('${ne}').matches;
themeToApply = prefersDark ? themesMap.dark : themesMap.light;
}
// Apply theme and variant
d.setAttribute(themeAttr, themeToApply);
d.setAttribute(variantAttr, '${d}');
// Set color-scheme for browser rendering
d.style.colorScheme = themeToApply.includes('dark') ? 'dark' : 'light';
${f ? 'document.body.classList.add("mm-styled")' : ""}
} catch (e) {
console.error('Error in ThemeProvider immediate script:', e);
}
})();
`;
return /* @__PURE__ */ r(
"script",
{
nonce: c,
dangerouslySetInnerHTML: { __html: u },
suppressHydrationWarning: n
}
);
});
function $o(e) {
return e === "default" ? { light: "light", dark: "dark" } : {
light: `light-${e}`,
dark: `dark-${e}`
};
}
const Mo = {
DEFAULT: "default",
ORANGE: "orange"
}, Do = {
DEFAULT: "default",
PLAYFUL: "playful",
BRUTALIST: "brutalist"
}, Io = {
DARK: "dark",
LIGHT: "light",
SYSTEM: "system"
};
export {
mr as Avatar,
gr as AvatarFallback,
fr as AvatarImage,
R as Button,
pe as Card,
hr as CardAction,
he as CardContent,
pr as CardDescription,
vr as CardFooter,
at as CardHeader,
nt as CardTitle,
br as Carousel,
xr as CarouselContent,
wr as CarouselItem,
Sr as CarouselNext,
yr as CarouselPrevious,
Nr as Dialog,
Cr as DialogClose,
Ar as DialogContent,
Er as DialogDescription,
kr as DialogFooter,
Tr as DialogHeader,
dt as DialogOverlay,
lt as DialogPortal,
Lr as DialogTitle,
zr as DialogTrigger,
_r as DropdownMenu,
Rr as DropdownMenuCheckboxItem,
Dr as DropdownMenuContent,
Ir as DropdownMenuGroup,
Br as DropdownMenuItem,
qr as DropdownMenuLabel,
$r as DropdownMenuPortal,
Fr as DropdownMenuRadioGroup,
jr as DropdownMenuRadioItem,
Qr as DropdownMenuSeparator,
Vr as DropdownMenuShortcut,
Ur as DropdownMenuSub,
Wr as DropdownMenuSubContent,
Pr as DropdownMenuSubTrigger,
Mr as DropdownMenuTrigger,
Hr as Flipcard,
Kr as FlipcardButton,
pt as FlipcardContent,
ft as FloatingActionButton,
Gr as FloatingWindow,
eo as FloatingWindowAction,
to as FloatingWindowBody,
oo as FloatingWindowClose,
Xr as FloatingWindowContent,
Zr as FloatingWindowDescription,
ro as FloatingWindowFooter,
Yr as FloatingWindowHeader,
Jr as FloatingWindowTitle,
Or as FloatingWindowTrigger,
uo as I18nProvider,
ao as Input,
Io as Mode,
no as Popover,
lo as PopoverAnchor,
so as PopoverContent,
io as PopoverTrigger,
wt as Progress,
po as QuizPlayer,
Ft as QuizPlayerChoice,
Et as QuizPlayerControls,
kt as QuizPlayerEndScreen,
go as QuizPlayerFeedback,
fo as QuizPlayerHint,
$t as QuizPlayerProgress,
Rt as QuizPlayerQuestion,
be as QuizPlayerScreen,
Lt as QuizPlayerWelcomeScreen,
ho as ScrollArea,
Vt as ScrollBar,
vo as Select,
yo as SelectContent,
bo as SelectGroup,
No as SelectItem,
So as SelectLabel,
Wt as SelectScrollDownButton,
Pt as SelectScrollUpButton,
zo as SelectSeparator,
wo as SelectTrigger,
xo as SelectValue,
Co as Separator,
Ao as Skeleton,
To as StatsCard,
Xt as StatsCardIcon,
Do as StyleVariant,
Mo as Theme,
Se as ThemeContext,
_o as ThemeProvider,
ko as Toggle,
Dt as Tooltip,
mo as TooltipArrow,
Bt as TooltipContent,
ye as TooltipProvider,
It as TooltipTrigger,
Lo as Widget,
rt as buttonVariants,
co as createI18n,
mt as fabVariants,
$o as getThemeMap,
Jt as toggleVariants,
yt as useControlledState,
ce as useMeasure,
Nt as useQuizPlayer,
St as useQuizTimer,
Eo as useTheme,
P as useTranslation
};
//# sourceMappingURL=index.js.map