@neuctra/ui
Version:
A modern, responsive, customizable React UI component library powered by Tailwind CSS and Vite.
7,435 lines • 250 kB
JavaScript
import Rt, { useMemo as Ne, forwardRef as bt, createElement as $t, useRef as me, useState as u, useImperativeHandle as _r, useEffect as ue, useCallback as at } from "react";
var ht = { exports: {} }, ot = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ht;
function Pr() {
if (Ht) return ot;
Ht = 1;
var t = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
function l(i, d, s) {
var c = null;
if (s !== void 0 && (c = "" + s), d.key !== void 0 && (c = "" + d.key), "key" in d) {
s = {};
for (var p in d)
p !== "key" && (s[p] = d[p]);
} else s = d;
return d = s.ref, {
$$typeof: t,
type: i,
key: c,
ref: d !== void 0 ? d : null,
props: s
};
}
return ot.Fragment = o, ot.jsx = l, ot.jsxs = l, ot;
}
var st = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var qt;
function Ar() {
return qt || (qt = 1, process.env.NODE_ENV !== "production" && function() {
function t(a) {
if (a == null) return null;
if (typeof a == "function")
return a.$$typeof === H ? null : a.displayName || a.name || null;
if (typeof a == "string") return a;
switch (a) {
case w:
return "Fragment";
case y:
return "Profiler";
case _:
return "StrictMode";
case B:
return "Suspense";
case Y:
return "SuspenseList";
case J:
return "Activity";
}
if (typeof a == "object")
switch (typeof a.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), a.$$typeof) {
case k:
return "Portal";
case P:
return (a.displayName || "Context") + ".Provider";
case v:
return (a._context.displayName || "Context") + ".Consumer";
case M:
var I = a.render;
return a = a.displayName, a || (a = I.displayName || I.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
case $:
return I = a.displayName || null, I !== null ? I : t(a.type) || "Memo";
case E:
I = a._payload, a = a._init;
try {
return t(a(I));
} catch {
}
}
return null;
}
function o(a) {
return "" + a;
}
function l(a) {
try {
o(a);
var I = !1;
} catch {
I = !0;
}
if (I) {
I = console;
var A = I.error, ee = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
return A.call(
I,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
ee
), o(a);
}
}
function i(a) {
if (a === w) return "<>";
if (typeof a == "object" && a !== null && a.$$typeof === E)
return "<...>";
try {
var I = t(a);
return I ? "<" + I + ">" : "<...>";
} catch {
return "<...>";
}
}
function d() {
var a = Q.A;
return a === null ? null : a.getOwner();
}
function s() {
return Error("react-stack-top-frame");
}
function c(a) {
if (R.call(a, "key")) {
var I = Object.getOwnPropertyDescriptor(a, "key").get;
if (I && I.isReactWarning) return !1;
}
return a.key !== void 0;
}
function p(a, I) {
function A() {
S || (S = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
I
));
}
A.isReactWarning = !0, Object.defineProperty(a, "key", {
get: A,
configurable: !0
});
}
function z() {
var a = t(this.type);
return b[a] || (b[a] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), a = this.props.ref, a !== void 0 ? a : null;
}
function C(a, I, A, ee, oe, q, Z, de) {
return A = q.ref, a = {
$$typeof: g,
type: a,
key: I,
props: q,
_owner: oe
}, (A !== void 0 ? A : null) !== null ? Object.defineProperty(a, "ref", {
enumerable: !1,
get: z
}) : Object.defineProperty(a, "ref", { enumerable: !1, value: null }), a._store = {}, Object.defineProperty(a._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(a, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(a, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Z
}), Object.defineProperty(a, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: de
}), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
}
function j(a, I, A, ee, oe, q, Z, de) {
var x = I.children;
if (x !== void 0)
if (ee)
if (W(x)) {
for (ee = 0; ee < x.length; ee++)
f(x[ee]);
Object.freeze && Object.freeze(x);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else f(x);
if (R.call(I, "key")) {
x = t(a);
var V = Object.keys(I).filter(function(F) {
return F !== "key";
});
ee = 0 < V.length ? "{key: someKey, " + V.join(": ..., ") + ": ...}" : "{key: someKey}", K[x + ee] || (V = 0 < V.length ? "{" + V.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
ee,
x,
V,
x
), K[x + ee] = !0);
}
if (x = null, A !== void 0 && (l(A), x = "" + A), c(I) && (l(I.key), x = "" + I.key), "key" in I) {
A = {};
for (var h in I)
h !== "key" && (A[h] = I[h]);
} else A = I;
return x && p(
A,
typeof a == "function" ? a.displayName || a.name || "Unknown" : a
), C(
a,
x,
q,
oe,
d(),
A,
Z,
de
);
}
function f(a) {
typeof a == "object" && a !== null && a.$$typeof === g && a._store && (a._store.validated = 1);
}
var m = Rt, g = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), _ = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), v = Symbol.for("react.consumer"), P = Symbol.for("react.context"), M = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), Y = Symbol.for("react.suspense_list"), $ = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), J = Symbol.for("react.activity"), H = Symbol.for("react.client.reference"), Q = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, R = Object.prototype.hasOwnProperty, W = Array.isArray, ne = console.createTask ? console.createTask : function() {
return null;
};
m = {
react_stack_bottom_frame: function(a) {
return a();
}
};
var S, b = {}, L = m.react_stack_bottom_frame.bind(
m,
s
)(), G = ne(i(s)), K = {};
st.Fragment = w, st.jsx = function(a, I, A, ee, oe) {
var q = 1e4 > Q.recentlyCreatedOwnerStacks++;
return j(
a,
I,
A,
!1,
ee,
oe,
q ? Error("react-stack-top-frame") : L,
q ? ne(i(a)) : G
);
}, st.jsxs = function(a, I, A, ee, oe) {
var q = 1e4 > Q.recentlyCreatedOwnerStacks++;
return j(
a,
I,
A,
!0,
ee,
oe,
q ? Error("react-stack-top-frame") : L,
q ? ne(i(a)) : G
);
};
}()), st;
}
var Gt;
function Nr() {
return Gt || (Gt = 1, process.env.NODE_ENV === "production" ? ht.exports = Pr() : ht.exports = Ar()), ht.exports;
}
var e = Nr();
const xo = ({
as: t = "p",
children: o,
className: l = "",
href: i,
target: d,
rel: s,
// Style
color: c = "#333",
bgColor: p,
fontSize: z = "16px",
fontWeight: C = "normal",
textAlign: j = "left",
textTransform: f = "none",
lineHeight: m = "normal",
letterSpacing: g = "normal",
maxWidth: k,
padding: w,
margin: _,
borderRadius: y,
boxShadow: v,
shadowColor: P = "rgba(0,0,0,0.1)",
wordBreak: M = "normal",
// Text styles
italic: B = !1,
bold: Y = !1,
underline: $ = !1,
strikethrough: E = !1,
selectable: J = !0,
truncate: H = !1,
// Hover & Active
hoverColor: Q,
hoverBgColor: R,
hoverTextDecoration: W,
activeColor: ne,
activeBgColor: S,
transitionDuration: b = "0.25s",
// Event
onClick: L
}) => {
const G = Ne(() => {
const q = [];
return $ && q.push("underline"), E && q.push("line-through"), q.join(" ") || "none";
}, [$, E]), K = {
color: c,
backgroundColor: p || "transparent",
fontSize: z,
fontWeight: Y ? "bold" : C,
textAlign: j,
textTransform: f,
lineHeight: m,
letterSpacing: g,
maxWidth: k,
padding: w,
margin: _,
borderRadius: y,
textDecoration: G,
fontStyle: B ? "italic" : "normal",
wordBreak: M,
boxShadow: v || (P ? `0 1px 4px ${P}` : void 0),
cursor: L || i ? "pointer" : "default",
userSelect: J ? "text" : "none",
transition: `all ${b} ease-in-out`,
overflow: H ? "hidden" : void 0,
whiteSpace: H ? "nowrap" : void 0,
textOverflow: H ? "ellipsis" : void 0
}, oe = {
className: l,
style: K,
onClick: L,
onMouseEnter: (q) => {
const Z = q.currentTarget;
Q && (Z.style.color = Q), R && (Z.style.backgroundColor = R), W && (Z.style.textDecoration = W);
},
onMouseLeave: (q) => {
const Z = q.currentTarget;
Z.style.color = c, Z.style.backgroundColor = p || "transparent", Z.style.textDecoration = G;
},
onMouseDown: (q) => {
const Z = q.currentTarget;
ne && (Z.style.color = ne), S && (Z.style.backgroundColor = S);
},
onMouseUp: (q) => {
const Z = q.currentTarget;
Z.style.color = Q || c, Z.style.backgroundColor = R || p || "transparent";
}
};
return t === "a" || i ? /* @__PURE__ */ e.jsx(
"a",
{
...oe,
href: i,
target: d,
rel: s || (d === "_blank" ? "noopener noreferrer" : void 0),
children: o
}
) : /* @__PURE__ */ e.jsx(t, { ...oe, children: o });
}, Jt = ({
src: t,
alt: o = "Image",
width: l = "100%",
height: i = "auto",
borderRadius: d = "8px",
borderColor: s = "transparent",
borderStyle: c = "solid",
borderWidth: p = "0px",
shadow: z = !1,
boxShadow: C,
opacity: j = 1,
objectFit: f = "cover",
overlayText: m,
overlayColor: g = "rgba(0, 0, 0, 0.5)",
svgIcon: k,
responsive: w = !1,
padding: _,
margin: y,
lazyLoad: v = !1,
hoverOpacity: P,
hoverShadow: M = !1,
hoverScale: B,
hoverRotate: Y,
transitionDuration: $ = "0.3s",
overflow: E = "hidden",
className: J,
style: H,
onClick: Q
}) => {
const R = {
width: w ? "100%" : l,
height: w ? "100%" : i,
borderRadius: d,
border: `${p} ${c} ${s}`,
objectFit: f,
opacity: j,
boxShadow: z ? C || "0 4px 12px rgba(0,0,0,0.15)" : "none",
transition: `all ${$} ease`,
display: "block"
}, W = (b) => {
b.currentTarget.style.opacity = P !== void 0 ? P.toString() : R.opacity?.toString() || "1", b.currentTarget.style.boxShadow = M ? "0 8px 20px rgba(0,0,0,0.3)" : R.boxShadow?.toString() || "none", b.currentTarget.style.transform = `scale(${B || 1}) rotate(${Y || 0}deg)`;
}, ne = (b) => {
b.currentTarget.style.opacity = R.opacity?.toString() || "1", b.currentTarget.style.boxShadow = R.boxShadow?.toString() || "none", b.currentTarget.style.transform = "scale(1) rotate(0deg)";
}, S = (() => {
switch (E) {
case "x":
return { overflowX: "hidden" };
case "y":
return { overflowY: "hidden" };
default:
return { overflow: E };
}
})();
return /* @__PURE__ */ e.jsxs(
"div",
{
role: "img",
"aria-label": o,
onClick: Q,
className: J,
style: {
width: w ? "100%" : l,
height: w ? "auto" : i,
padding: _,
margin: y,
position: "relative",
cursor: Q ? "pointer" : "default",
display: "inline-block",
transition: `all ${$} ease`,
...S,
...H
// Allow external override
},
children: [
k ? /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
children: k
}
) : /* @__PURE__ */ e.jsx(
"img",
{
src: t,
alt: o,
loading: v ? "lazy" : "eager",
style: R,
onMouseEnter: W,
onMouseLeave: ne
}
),
m && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: g,
color: "#fff",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontWeight: "bold",
fontSize: "1.25rem",
textAlign: "center",
padding: "1rem",
boxSizing: "border-box"
},
children: m
}
)
]
}
);
}, ho = ({
children: t,
type: o = "button",
onClick: l,
iconBefore: i,
iconAfter: d,
className: s = "",
style: c,
// ✅ NEW
fullWidth: p = !1,
disabled: z = !1,
loading: C = !1,
loadingText: j = "Loading...",
paddingHorizontal: f = 30,
paddingVertical: m = 8,
fontSize: g = "16px",
fontWeight: k = 400,
borderRadius: w = 6,
backgroundColor: _ = "#02b314",
textColor: y = "white",
borderColor: v = "transparent",
hoverBgColor: P = "transparent",
hoverTextColor: M = "black",
hoverBorderColor: B,
boxShadow: Y = "0 1px 2px rgba(0, 0, 0, 0.05)"
}) => {
const [$, E] = Rt.useState(!1), J = $ && !z && M || y, H = $ && !z && B || v, Q = $ && !z ? P : _, R = {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
padding: `${m}px ${f}px`,
fontSize: g,
fontWeight: k,
borderRadius: `${w}px`,
width: p ? "100%" : "auto",
color: J,
border: `1px solid ${H}`,
backgroundColor: Q,
boxShadow: Y,
cursor: z ? "not-allowed" : "pointer",
opacity: z ? 0.6 : 1,
transition: "all 0.2s ease-in-out",
gap: "8px",
...c
// ✅ Apply user-supplied inline styles last
};
return /* @__PURE__ */ e.jsxs(
"button",
{
type: o,
className: s,
style: R,
onClick: !z && !C ? l : void 0,
disabled: z,
onMouseEnter: () => E(!0),
onMouseLeave: () => E(!1),
children: [
C ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
"span",
{
style: {
width: "18px",
height: "18px",
border: "2px solid currentColor",
borderTopColor: "transparent",
borderRadius: "50%",
animation: "spin 1s linear infinite"
}
}
),
/* @__PURE__ */ e.jsx("span", { children: j })
] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
i && /* @__PURE__ */ e.jsx("span", { children: i }),
/* @__PURE__ */ e.jsx("span", { children: t }),
d && /* @__PURE__ */ e.jsx("span", { children: d })
] }),
/* @__PURE__ */ e.jsx("style", { children: `
@keyframes spin {
to { transform: rotate(360deg); }
}
` })
]
}
);
};
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Br = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Wr = (t) => t.replace(
/^([A-Z])|[\s-_]+(\w)/g,
(o, l, i) => i ? i.toUpperCase() : l.toLowerCase()
), Qt = (t) => {
const o = Wr(t);
return o.charAt(0).toUpperCase() + o.slice(1);
}, rr = (...t) => t.filter((o, l, i) => !!o && o.trim() !== "" && i.indexOf(o) === l).join(" ").trim(), Fr = (t) => {
for (const o in t)
if (o.startsWith("aria-") || o === "role" || o === "title")
return !0;
};
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
var Dr = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round"
};
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Or = bt(
({
color: t = "currentColor",
size: o = 24,
strokeWidth: l = 2,
absoluteStrokeWidth: i,
className: d = "",
children: s,
iconNode: c,
...p
}, z) => $t(
"svg",
{
ref: z,
...Dr,
width: o,
height: o,
stroke: t,
strokeWidth: i ? Number(l) * 24 / Number(o) : l,
className: rr("lucide", d),
...!s && !Fr(p) && { "aria-hidden": "true" },
...p
},
[
...c.map(([C, j]) => $t(C, j)),
...Array.isArray(s) ? s : [s]
]
)
);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const re = (t, o) => {
const l = bt(
({ className: i, ...d }, s) => $t(Or, {
ref: s,
iconNode: o,
className: rr(
`lucide-${Br(Qt(t))}`,
`lucide-${t}`,
i
),
...d
})
);
return l.displayName = Qt(t), l;
};
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Yr = [
["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
["path", { d: "M17 20V4", key: "1ejh1v" }],
["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
["path", { d: "M7 4v16", key: "1glfcx" }]
], Vr = re("arrow-up-down", Yr);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Ur = [
["path", { d: "M8 2v4", key: "1cmpym" }],
["path", { d: "M16 2v4", key: "4m81vk" }],
["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
["path", { d: "M3 10h18", key: "8toen8" }]
], Xr = re("calendar", Ur);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Hr = [
["rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2", key: "12ruh7" }],
["path", { d: "M7 15h4M15 15h2M7 11h2M13 11h4", key: "1ueiar" }]
], qr = re("captions", Hr);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Gr = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], It = re("chevron-left", Gr);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Jr = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], Et = re("chevron-right", Jr);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Qr = [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
], Kr = re("circle-alert", Qr);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Zr = [
["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
], en = re("circle-check-big", Zr);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const tn = [
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
["path", { d: "M12 3v18", key: "108xh3" }]
], rn = re("columns-2", tn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const nn = [
["path", { d: "M12 15V3", key: "m9g1x1" }],
["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
], nr = re("download", nn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const on = [
[
"path",
{
d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",
key: "ct8e1f"
}
],
["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }],
[
"path",
{
d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",
key: "13bj9a"
}
],
["path", { d: "m2 2 20 20", key: "1ooewy" }]
], sn = re("eye-off", on);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const an = [
[
"path",
{
d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
key: "1nclc0"
}
],
["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
], Mt = re("eye", an);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const ln = [
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
["path", { d: "M7 3v18", key: "bbkbws" }],
["path", { d: "M3 7.5h4", key: "zfgn84" }],
["path", { d: "M3 12h18", key: "1i2n21" }],
["path", { d: "M3 16.5h4", key: "1230mu" }],
["path", { d: "M17 3v18", key: "in4fa5" }],
["path", { d: "M17 7.5h4", key: "myr1c1" }],
["path", { d: "M17 16.5h4", key: "go4c1d" }]
], cn = re("film", ln);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const dn = [
[
"path",
{
d: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z",
key: "sc7q7i"
}
]
], un = re("funnel", dn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const pn = [
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
["path", { d: "M3 9h18", key: "1pudct" }],
["path", { d: "M3 15h18", key: "5xshup" }],
["path", { d: "M9 3v18", key: "fh3hqa" }],
["path", { d: "M15 3v18", key: "14nvp0" }]
], xn = re("grid-3x3", pn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const hn = [
[
"path",
{
d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5",
key: "mvr1a0"
}
]
], it = re("heart", hn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const fn = [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["path", { d: "M12 16v-4", key: "1dtifu" }],
["path", { d: "M12 8h.01", key: "e9boi3" }]
], gn = re("info", fn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const bn = [
["path", { d: "M3 12h.01", key: "nlz23k" }],
["path", { d: "M3 18h.01", key: "1tta3j" }],
["path", { d: "M3 6h.01", key: "1rqtza" }],
["path", { d: "M8 12h13", key: "1za7za" }],
["path", { d: "M8 18h13", key: "1lx6n3" }],
["path", { d: "M8 6h13", key: "ik3vkj" }]
], yn = re("list", bn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const mn = [
["path", { d: "M12 2v4", key: "3427ic" }],
["path", { d: "m16.2 7.8 2.9-2.9", key: "r700ao" }],
["path", { d: "M18 12h4", key: "wj9ykh" }],
["path", { d: "m16.2 16.2 2.9 2.9", key: "1bxg5t" }],
["path", { d: "M12 18v4", key: "jadmvz" }],
["path", { d: "m4.9 19.1 2.9-2.9", key: "bwix9q" }],
["path", { d: "M2 12h4", key: "j09sii" }],
["path", { d: "m4.9 4.9 2.9 2.9", key: "giyufr" }]
], or = re("loader", mn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const vn = [
["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
], Lt = re("maximize", vn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const wn = [
["path", { d: "M8 3v3a2 2 0 0 1-2 2H3", key: "hohbtr" }],
["path", { d: "M21 8h-3a2 2 0 0 1-2-2V3", key: "5jw1f3" }],
["path", { d: "M3 16h3a2 2 0 0 1 2 2v3", key: "198tvr" }],
["path", { d: "M16 21v-3a2 2 0 0 1 2-2h3", key: "ph8mxp" }]
], _t = re("minimize", wn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const kn = [
["path", { d: "M9 18V5l12-2v13", key: "1jmyc2" }],
["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
["circle", { cx: "18", cy: "16", r: "3", key: "1hluhg" }]
], Kt = re("music", kn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const jn = [
["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
], lt = re("pause", jn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Sn = [
["path", { d: "M2 10h6V4", key: "zwrco" }],
["path", { d: "m2 4 6 6", key: "ug085t" }],
["path", { d: "M21 10V7a2 2 0 0 0-2-2h-7", key: "git5jr" }],
["path", { d: "M3 14v2a2 2 0 0 0 2 2h3", key: "1f7fh3" }],
["rect", { x: "12", y: "14", width: "10", height: "7", rx: "1", key: "1wjs3o" }]
], Tn = re("picture-in-picture", Sn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Cn = [
[
"path",
{
d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
key: "10ikf1"
}
]
], Je = re("play", Cn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const zn = [
["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
["path", { d: "M21 3v5h-5", key: "1q7to0" }],
["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
["path", { d: "M8 16H3v5", key: "1cv678" }]
], $n = re("refresh-cw", zn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Mn = [
["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
["path", { d: "M3 3v5h5", key: "1xhq8a" }]
], Pt = re("rotate-ccw", Mn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Rn = [
["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
], In = re("search", Rn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const En = [
[
"path",
{
d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
key: "1i5ecw"
}
],
["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
], Ln = re("settings", En);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const _n = [
["circle", { cx: "18", cy: "5", r: "3", key: "gq8acd" }],
["circle", { cx: "6", cy: "12", r: "3", key: "w7nqdw" }],
["circle", { cx: "18", cy: "19", r: "3", key: "1xt0gg" }],
["line", { x1: "8.59", x2: "15.42", y1: "13.51", y2: "17.49", key: "47mynk" }],
["line", { x1: "15.41", x2: "8.59", y1: "6.51", y2: "10.49", key: "1n3mei" }]
], sr = re("share-2", _n);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Pn = [
["path", { d: "m18 14 4 4-4 4", key: "10pe0f" }],
["path", { d: "m18 2 4 4-4 4", key: "pucp1d" }],
["path", { d: "M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22", key: "1ailkh" }],
["path", { d: "M2 6h1.972a4 4 0 0 1 3.6 2.2", key: "km57vx" }],
["path", { d: "M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45", key: "os18l9" }]
], An = re("shuffle", Pn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Nn = [
[
"path",
{
d: "M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z",
key: "15892j"
}
],
["path", { d: "M3 20V4", key: "1ptbpl" }]
], ft = re("skip-back", Nn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Bn = [
["path", { d: "M21 4v16", key: "7j8fe9" }],
[
"path",
{
d: "M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z",
key: "zs4d6"
}
]
], gt = re("skip-forward", Bn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Wn = [
[
"path",
{
d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
key: "wmoenq"
}
],
["path", { d: "M12 9v4", key: "juzpu7" }],
["path", { d: "M12 17h.01", key: "p32p05" }]
], Fn = re("triangle-alert", Wn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Dn = [
["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
], On = re("user", Dn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Yn = [
[
"path",
{
d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
key: "uqj9uw"
}
],
["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }]
], Vn = re("volume-1", Yn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Un = [
[
"path",
{
d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
key: "uqj9uw"
}
],
["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
], yt = re("volume-2", Un);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Xn = [
[
"path",
{
d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
key: "uqj9uw"
}
],
["line", { x1: "22", x2: "16", y1: "9", y2: "15", key: "1ewh16" }],
["line", { x1: "16", x2: "22", y1: "9", y2: "15", key: "5ykzw1" }]
], ct = re("volume-x", Xn);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Hn = [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
], dt = re("x", Hn), fo = bt(
({
type: t = "text",
placeholder: o = "",
label: l,
value: i,
defaultValue: d,
onChange: s,
name: c = "",
disabled: p = !1,
readOnly: z = !1,
required: C = !1,
error: j,
success: f = !1,
autoFocus: m = !1,
iconLeft: g,
iconRight: k,
borderColor: w = "#ccc",
focusBorderColor: _ = "#2563eb",
hoverBorderColor: y = "#4b5563",
backgroundColor: v = "#ffffff",
textColor: P = "#111827",
errorColor: M = "#dc2626",
successColor: B = "#16a34a",
labelColor: Y = "#374151",
size: $ = "md",
radius: E = "6px",
fontSize: J = "14px",
rows: H = 4,
cols: Q,
maxLength: R,
resize: W = !0,
showCharacterCount: ne = !0,
className: S,
style: b
}, L) => {
const G = me(null), [K, a] = u(d || ""), [I, A] = u(!1);
_r(L, () => G.current);
const ee = (x) => {
R && x.target.value.length > R || (a(x.target.value), s && s(c, x.target.value));
}, oe = () => {
switch ($) {
case "sm":
return "6px 12px";
case "lg":
return "12px 20px";
default:
return "10px 16px";
}
}, q = () => {
switch ($) {
case "sm":
return "13px";
case "lg":
return "16px";
default:
return J;
}
}, Z = j ? M : f ? B : w, de = {
width: "100%",
padding: oe(),
paddingLeft: g ? "40px" : oe().split(" ")[1],
paddingRight: k || t === "password" ? "40px" : oe().split(" ")[1],
border: `1px solid ${Z}`,
borderRadius: E,
backgroundColor: v,
color: P,
fontSize: q(),
outline: "none",
resize: t === "textarea" && !W ? "none" : void 0,
...b
};
return /* @__PURE__ */ e.jsxs(
"div",
{
style: { width: "100%", fontFamily: "sans-serif" },
className: S,
children: [
l && /* @__PURE__ */ e.jsxs(
"label",
{
htmlFor: c,
style: {
display: "block",
marginBottom: "6px",
fontSize: "14px",
fontWeight: 500,
color: Y
},
children: [
l,
" ",
C && /* @__PURE__ */ e.jsx("span", { style: { color: M }, children: "*" })
]
}
),
/* @__PURE__ */ e.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
g && /* @__PURE__ */ e.jsx(
"span",
{
style: {
position: "absolute",
left: "12px",
top: "50%",
transform: "translateY(-50%)",
pointerEvents: "none",
color: "#6b7280"
},
children: g
}
),
t === "textarea" ? /* @__PURE__ */ e.jsx(
"textarea",
{
ref: G,
name: c,
value: i ?? K,
onChange: ee,
placeholder: o,
rows: H,
cols: Q,
maxLength: R,
disabled: p,
readOnly: z,
autoFocus: m,
style: de,
onFocus: (x) => {
x.currentTarget.style.borderColor = _;
},
onBlur: (x) => {
x.currentTarget.style.borderColor = Z;
},
onMouseEnter: (x) => {
x.currentTarget.style.borderColor = y;
},
onMouseLeave: (x) => {
x.currentTarget.style.borderColor = Z;
}
}
) : /* @__PURE__ */ e.jsx(
"input",
{
ref: G,
id: c,
name: c,
type: t === "password" ? I ? "text" : "password" : t,
value: i ?? K,
onChange: ee,
placeholder: o,
disabled: p,
readOnly: z,
autoFocus: m,
style: de,
onFocus: (x) => {
x.currentTarget.style.borderColor = _;
},
onBlur: (x) => {
x.currentTarget.style.borderColor = Z;
},
onMouseEnter: (x) => {
x.currentTarget.style.borderColor = y;
},
onMouseLeave: (x) => {
x.currentTarget.style.borderColor = Z;
}
}
),
t === "password" && /* @__PURE__ */ e.jsx(
"button",
{
type: "button",
onClick: () => A(!I),
style: {
position: "absolute",
right: "10px",
top: "50%",
transform: "translateY(-50%)",
background: "transparent",
border: "none",
color: "#6b7280",
cursor: "pointer",
padding: 0
},
children: I ? /* @__PURE__ */ e.jsx(sn, { size: 18 }) : /* @__PURE__ */ e.jsx(Mt, { size: 18 })
}
),
k && t !== "password" && /* @__PURE__ */ e.jsx(
"span",
{
style: {
position: "absolute",
right: "12px",
top: "50%",
transform: "translateY(-50%)",
pointerEvents: "none",
color: "#6b7280"
},
children: k
}
)
] }),
t === "textarea" && ne && R && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
textAlign: "right",
fontSize: "12px",
color: "#6b7280",
marginTop: "4px"
},
children: [
(i ?? K).length,
"/",
R
]
}
),
j && /* @__PURE__ */ e.jsx(
"p",
{
style: {
color: M,
fontSize: "12px",
marginTop: "4px",
lineHeight: "1.3"
},
children: j
}
)
]
}
);
}
), go = ({
title: t,
titleIcon: o,
items: l,
type: i = "unordered",
bulletColor: d = "#2563eb",
textColor: s = "#111827",
backgroundColor: c = "#fff",
borderColor: p = "#e5e7eb",
fontSize: z = "15px",
fontWeight: C = 500,
borderRadius: j = "12px",
padding: f = "16px",
spacing: m = "12px",
className: g,
style: k
}) => {
const w = i === "ordered", _ = i === "inline", y = {
backgroundColor: c,
borderColor: p,
color: s,
borderWidth: p ? "1px" : "0px",
borderStyle: "solid",
borderRadius: j,
padding: f,
...k
}, v = _ ? {
display: "flex",
gap: m,
paddingLeft: 0,
listStyleType: "none",
margin: 0
} : {
listStyleType: w ? "decimal" : "none",
paddingLeft: w ? "20px" : "0",
margin: 0
}, P = w ? "ol" : "ul";
return /* @__PURE__ */ e.jsxs("div", { className: g, style: y, children: [
t && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
fontSize: "17px",
fontWeight: 600,
marginBottom: "10px",
gap: "8px"
},
children: [
o && /* @__PURE__ */ e.jsx("span", { style: { fontSize: "18px" }, children: o }),
/* @__PURE__ */ e.jsx("span", { children: t })
]
}
),
/* @__PURE__ */ e.jsx(P, { style: v, children: l.map((M, B) => /* @__PURE__ */ e.jsx(
ir,
{
...M,
bulletColor: d,
textColor: s,
fontSize: z,
fontWeight: C,
spacing: m,
isInline: _
},
B
)) })
] });
}, ir = ({
text: t,
icon: o,
onClick: l,
subItems: i,
bulletColor: d,
textColor: s,
fontSize: c,
fontWeight: p,
spacing: z,
isInline: C
}) => {
const j = {
display: "flex",
flexDirection: "column",
gap: "6px",
marginBottom: C ? "0" : z
}, f = {
display: "flex",
alignItems: "center",
gap: "8px",
fontSize: c,
fontWeight: p,
color: s,
cursor: l ? "pointer" : "default"
}, m = {
width: "8px",
height: "8px",
backgroundColor: d,
borderRadius: "50%",
flexShrink: 0
}, g = {
listStyleType: "disc",
paddingLeft: "20px",
margin: 0
};
return /* @__PURE__ */ e.jsxs("li", { style: j, children: [
/* @__PURE__ */ e.jsxs("div", { style: f, onClick: l, children: [
o ? /* @__PURE__ */ e.jsx("span", { style: { fontSize: "16px", color: s }, children: o }) : !C && /* @__PURE__ */ e.jsx("span", { style: m }),
/* @__PURE__ */ e.jsx("span", { children: t })
] }),
i && i.length > 0 && /* @__PURE__ */ e.jsx("ul", { style: g, children: i.map((k, w) => /* @__PURE__ */ e.jsx(
ir,
{
...k,
bulletColor: d,
textColor: s,
fontSize: c,
fontWeight: p,
spacing: z,
isInline: !1
},
w
)) })
] });
}, At = ({
tabs: t,
defaultActive: o = 0,
tabPosition: l,
activeTabClassName: i = "",
inactiveTabClassName: d = "",
tabContainerClassName: s = "",
contentContainerClassName: c = "",
className: p = "",
activeTabStyle: z,
inactiveTabStyle: C,
tabContainerStyle: j,
contentContainerStyle: f,
style: m,
tabsWidth: g = "240px",
tabGap: k = 8,
tabPadding: w = "12px 16px",
tabBorderRadius: _ = 8,
primaryColor: y = "#2563eb",
textColor: v = "#374151",
backgroundColor: P = "#ffffff",
hoverTextColor: M = "#1e40af",
disabledColor: B = "#d1d5db",
responsiveBreakpoint: Y = 768,
showDrawerLabel: $ = "Select Tab",
drawerIcon: E = "☰",
transitionDuration: J = 200,
onTabChange: H,
role: Q = "tablist",
ariaOrientation: R = "horizontal"
}) => {
const [W, ne] = u(o), [S, b] = u(null), [L, G] = u(!1), [K, a] = u(!1);
ue(() => {
const X = () => {
G(window.innerWidth <= Y);
};
return X(), window.addEventListener("resize", X), () => window.removeEventListener("resize", X);
}, [Y]), ue(() => {
o >= 0 && o < t.length && ne(o);
}, [o, t.length]);
const I = (X) => {
t[X].disabled || (ne(X), H?.(X));
}, A = l === "left" || l === "right", oe = {
display: "flex",
flexDirection: L ? "column" : A ? l === "left" ? "row" : "row-reverse" : "column",
width: "100%",
height: "100%",
backgroundColor: P,
...m
}, q = {
width: L ? "100%" : A ? g : "100%",
display: "flex",
flexDirection: L || A ? "column" : "row",
gap: k,
padding: L ? "0" : "8px",
boxSizing: "border-box",
overflowX: L ? "hidden" : "visible",
...j
}, Z = {
flexGrow: 1,
padding: L ? "16px" : "24px",
background: "#f9fafb",
boxSizing: "border-box",
minWidth: 0,
width: L ? "100%" : A ? `calc(100% - ${g})` : "100%",
...f
}, de = {
cursor: "pointer",
display: "flex",
alignItems: "center",
gap: 8,
padding: w,
borderRadius: _,
border: "none",
backgroundColor: "transparent",
fontWeight: 500,
transition: `all ${J}ms ease`,
width: L || A ? "100%" : "auto",
marginBottom: L || A ? k : 0,
marginRight: !A && !L ? k : 0,
justifyContent: "flex-start",
textAlign: "left",
fontSize: L ? "14px" : "inherit"
}, x = {
backgroundColor: y,
color: "#fff",
fontWeight: 600,
boxShadow: `0 2px 10px ${y}33`,
...z
}, V = {
backgroundColor: "transparent",
color: v,
...C
}, h = {
backgroundColor: `${y}11`,
color: M
}, F = {
cursor: "not-allowed",
color: B,
opacity: 0.7
}, ie = {
...de,
...x,
justifyContent: "space-between",
width: "100%",
marginBottom: k,
fontSize: "16px"
};
return /* @__PURE__ */ e.jsxs(
"div",
{
className: `react-tabs ${p}`,
style: oe,
role: Q,
"aria-orientation": L || A ? "vertical" : R,
children: [
/* @__PURE__ */ e.jsx("style", { children: `
.react-tabs {
--primary-color: ${y};
--text-color: ${v};
--bg-color: ${P};
--hover-color: ${M};
--disabled-color: ${B};
--transition-duration: ${J}ms;
}
.react-tabs__mobile-drawer {
display: flex;
flex-direction: column;
gap: ${k}px;
width: 100%;
animation: react-tabs-slideDown ${J}ms ease-out;
}
@keyframes react-tabs-slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.react-tabs [role="tab"][aria-selected="true"] {
background-color: var(--primary-color);
color: white;
}
.react-tabs [role="tabpanel"] {
outline: none;
}
@media (max-width: ${Y}px) {
.react-tabs__drawer-button {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: ${w};
border-radius: ${_}px;
margin-bottom: ${k}px;
}
.react-tabs__nav {
padding: 0;
}
.react-tabs__content {
padding: 16px;
}
}
` }),
L ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => a(!K),
style: ie,
className: "react-tabs__drawer-button",
"aria-expanded": K,
"aria-controls": "mobile-tabs-drawer",
"aria-haspopup": "true",
children: [
/* @__PURE__ */ e.jsx("span", { children: $ }),
/* @__PURE__ */ e.jsx("span", { children: E })
]
}
),
K && /* @__PURE__ */ e.jsx(
"div",
{
id: "mobile-tabs-drawer",
className: "react-tabs__mobile-drawer",
role: "menu",
children: t.map((X, se) => {
const ce = se === W, fe = S === se, xe = X.disabled;
return /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => {
I(se), a(!1);
},
onMouseEnter: () => !xe && b(se),
onMouseLeave: () => b(null),
className: ce ? i : d,
style: {
...de,
...ce ? x : V,
...fe && !ce && !xe ? h : {},
...xe ? F : {}
},
role: "menuitemradio",
"aria-checked": ce,
"aria-disabled": xe,
"aria-label": X.ariaLabel || (typeof X.label == "string" ? X.label : `Tab ${se + 1}`),
disabled: xe,
children: [
X.icon && /* @__PURE__ */ e.jsx("span", { "aria-hidden": "true", children: X.icon }),
/* @__PURE__ */ e.jsx("span", { children: X.label })
]
},
se
);
})
}
)
] }) : /* @__PURE__ */ e.jsx(
"nav",
{
className: `react-tabs__nav ${s}`,
style: q,
role: Q,
"aria-label": "Tabs Navigation",
children: t.map((X, se) => {
const ce = se === W, fe = S === se, xe = X.disabled;
return /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => I(se),
onMouseEnter: () => !xe && b(se),
onMouseLeave: () => b(null),
className: ce ? i : d,
style: {
...de,
...ce ? x : V,
...fe && !ce && !xe ? h : {},
...xe ? F : {}
},
role: "tab",
"aria-selected": ce,
"aria-disabled": xe,
"aria-controls": `tabpanel-${se}`,
id: `tab-${se}`,
tabIndex: ce ? 0 : -1,
disabled: xe,
children: [
X.icon && /* @__PURE__ */ e.jsx("span", { "aria-hidden": "true", children: X.icon }),
/* @__PURE__ */ e.jsx("span", { children: X.label })
]
},
se
);
})
}
),
/* @__PURE__ */ e.jsx(
"section",
{
className: `react-tabs__content ${c}`,
style: Z,
role: "tabpanel",
id: `tabpanel-${W}`,
"aria-labelledby": `tab-${W}`,
tabIndex: 0,
children: t[W]?.content
}
)
]
}
);
}, qn = (t) => /* @__PURE__ */ e.jsx(At, { ...t, tabPosition: "left", ariaOrientation: "vertical" }), Gn = (t) => /* @__PURE__ */ e.jsx(At, { ...t, tabPosition: "top" }), Jn = (t) => /* @__PURE__ */ e.jsx(At, { ...t, tabPosition: "right", ariaOrientation: "vertical" }), bo = {
Left: qn,
Top: Gn,
Right: Jn
}, yo = ({
src: t,
poster: o,
title: l,
autoPlay: i = !1,
loop: d = !1,
muted: s = !1,
width: c = "100%",
height: p = "400px",
borderRadius: z = "16px",
theme: C = "dark",
primaryColor: j = "#3b82f6",
className: f,
showProgress: m = !0,
showVolumeSlider: g = !0,
showSettings: k = !0,
showDownload: w = !0,
showShare: _ = !0,
showPiP: y = !0,
showSubtitles: v = !1,
showPlaybackSpeed: P = !0,
showQuality: M = !0,
previewThumbnails: B = !1,
customControls: Y = !0,
hideControlsDelay: $ = 3e3,
seekStep: E = 10,
volumeStep: J = 0.1,
onPlay: H,
onPause: Q,
onEnded: R,
onTimeUpdate: W,
onVolumeChange: ne
}) => {
const S = me(null), b = me(null), L = me(null), G = me(0), [K, a] = u(i), [I, A] = u(0), [ee, oe] = u(0), [q, Z] = u(s ? 0 : 0.8), [de, x] = u(s), [V, h] = u(!1), [F, ie] = u(!1), [X, se] = u(d), [ce, fe] = u(1), [xe, ke] = u("auto"), [Se, Re] = u(!0), [Ie, Le] = u(!1), [je, Ce] = u(!1), [Be, We] = u(!1), [ge, we] = u(0), [Ve, Ue] = u(!1), [Qe, Fe] = u(0), le = {
dark: {
background: "linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)",
controlsBg: "rgba(0, 0, 0, 0.8)",
text: "#ffffff",
textSecondary: "#a3a3a3",
border: "rgba(255, 255, 255, 0.1)",
hover: "rgba(255, 255, 255, 0.1)"
},
light: {
background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
controlsBg: "rgba(255, 255, 255, 0.95)",
text: "#212529",
textSecondary: "#6c757d",
border: "rgba(0, 0, 0, 0.1)",
hover: "rgba(0, 0, 0, 0.05)"
},
glass: {
background: "rgba(255, 255, 255, 0.1)",
controlsBg: "rgba(255, 255, 255, 0.1)",
text: "#ffffff",
textSecondary: "#a3a3a3",
border: "rgba(255, 255, 255, 0.2)",
hover: "rgba(255, 255, 255, 0.2)"
},
neon: {
background: "linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 100%)",
controlsBg: "rgba(139, 69, 19, 0.8)",
text: "#00ffff",
textSecondary: "#ff00ff",
border: "rgba(0, 255, 255, 0.3)",
hover: "rgba(255, 0, 255, 0.2)"
}
}[C], ze = at(() => {
G.current && clearTimeout(G.current), G.current = window.setTimeout(() => {
K && Re(!1);
}, $);
}, [K, $]), Xe = at(() => {
Re(!0), ze();
}, [ze]);
ue(() => {
S.current && (S.current.volume = q, S.current.loop = X, S.current.muted = de, S.current.playbackRate = ce);
}, [q, X, de, ce]), ue(() => {
K ? ze() : (G.current && clearTimeout(G.current), Re(!0));
}, [K, ze]);
const _e = () => {
S.current && (K ? (S.current.pause(), a(!1), Q?.()) : (S.current.play().catch(console.error), a(!0), H?.()));
}, Ke = () => {
if (!S.current) return;
const O = S.current.currentTime, be = S.current.duration;
A(O), oe(be), W?.(O);
}, D = (O) => {
if (!S.current || !L.current) return;
const be = L.current.getBoundingClientRect(), Ee = (O.clientX - be.left) / be.width * ee;
S.current.currentTime = Ee, A(Ee);
}, he = (O) => {
if (!L.current) return;
const be = L.current.getBoundingClientRect(), Ee = (O.clientX - be.left) / be.width * ee;
we(Ee), Fe(O.clientX - be.left), Ue(!0);
}, ve = (O) => {
S.current && (S.current.currentTime = Math.min(
Math.max(0, S.current.currentTime + O),
ee
));
}, $e = (O) => {
const be = Math.min(Math.max(O, 0), 1);
Z(be), x(be === 0), ne?.(be);
}, pe = async () => {
if (b.current)
try {
V ? document.exitFullscreen && await document.exitFullscreen() : b.current.requestFullscreen && await b.current.requestFullscreen(), h(!V);
} catch (O) {
console.error("Fullscreen error:", O);
}
}, Ze = async () => {
if (S.current)
try {
F ? document.exitPictureInPicture && await document.exitPictureInPicture() : S.current.requestPictureInPicture && await S.current.requestPictureInPicture(), ie(!F);
} catch (O) {
console.error("Picture-in-Picture error:", O);
}
}, ut = () => {
const O = document.createElement("a");
O.href = t, O.download = l || "video", O.click();
}, Nt = async () => {
try {
navigator.share ? await navigator.share({
title: l || "Video",
url: window.location.href
}) : await navigator.clipboard.writeText(window.location.href);
} catch (O) {
console.error("Share error:", O);
}
}, et = (O) => {
if (!O || isNaN(O)) return "0:00";
const be = Math.floor(O / 3600), De = Math.floor(O % 3600 / 60), Ee = Math.floor(O % 60);
return be > 0 ? `${be}:${De.toString().padStart(2, "0")}:${Ee.toString().padStart(2, "0")}` : `${De}:${Ee.toString().padStart(2, "0")}`;
}, mt = () => de || q === 0 ? /* @__PURE__ */ e.jsx(ct, { size: 18 }) : q < 0.3 ? /* @__PURE__ */ e.jsx(ct, { size: 18 }) : q < 0.7 ? /* @__PURE__ */ e.jsx(Vn, { size: 18 }) : /* @__PURE__ */ e.jsx(yt, { size: 18 });
return ue(() => () => {
G.current && clearTimeout(G.current);
}, []), /* @__PURE__ */ e.jsxs(
"div",
{
ref: b,
className: f,
style: {
position: "relative",
width: c,
height: p,
background: le.background,
borderRadius: z,
overflow: "hidden",
boxShadow: C === "glass" ? "inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3)" : "0 10px 30px rgba(0, 0, 0, 0.3)",
backdropFilter: C === "glass" ? "blur(16px)" : "none",
userSelect: "none",
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif"
},
onMouseMove: Xe,
onMouseLeave: () => Re(!1),
children: [
/* @__PURE__ */ e.jsx(
"video",
{
ref: S,
src: t,
poster: o,
autoPlay: i,
loop: d,
muted: s,
controls: !1,
onClick: _e,
onTimeUpdate: Ke,
onLoadedMetadata: Ke,
onWaiting: () => We(!0),
onCanPlay: () => We(!1),
onEnded: () => {
a(!1), R?.();
},
style: {
width: "100%",
height: "100%",
objectFit: "cover",
backgroundColor: "#000"
}
}
),
Be && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
color: le.text,
animation: "spin 1s linear infinite"
},
children: /* @__PURE__ */ e.jsx(or, { size: 48 })
}
),
!K && !Be && /* @__PURE__ */ e.jsx(
"button",
{
onClick: _e,
style: {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
background: `${j}CC`,
borderRadius: "50%",
border: "none",
padding: "24px",
cursor: "pointer",
color: "#fff",
backdropFilter: "blur(10px)",
transition: "all 0.3s ease",
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)"
},
onMouseEnter: (O) => {
O.currentTarget.style.transform = "translate(-50%, -50%) scale(1.1)", O.currentTarget.style.background = j;
},
onMouseLeave: (O) => {
O.currentTarget.style.transform = "translate(-50%, -50%) scale(1)", O.currentTarget.style.background = `${j}CC`;
},
children: /* @__PURE__ */ e.jsx(Je, { size: 32 })
}
),
l && Se && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
top: "16px",
left: "16px",
right: "16px",
color: le.text,
fontSize: "18px",
fontWeight: "600",
textShadow: "0 2px 4px rgba(0, 0, 0, 0.8)",
opacity: Se ? 1 : 0,
transition: "opacity 0.3s ease"
},
children: l
}
),
Y && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
background: le.controlsBg,
backdropFilter: "blur(10px)",
color: le.text,
padding: "16px",
transform: Se ? "translateY(0)" : "translateY(100%)",
transition: "transform 0.3s ease"
},
children: [
m && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
marginBottom: "12px",
position: "relative"
},
children: [
/* @__PURE__ */ e.jsx(
"div",
{
ref: L,
onClick: D,
onMouseMove: he,
onMouseLeave: () => Ue(!1),
style: {
height: "6px",
background: "rgba(255, 255, 255, 0.2)",
borderRadius: "3px",
cursor: "pointer",
position: "relative",
overflow: "visible"
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: `${I / ee * 100 || 0}%`,
height: "100%",
background: j,
borderRadius: "3px",
position: "relative"
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
right: "-6px",
top: "50%",
width: "12px",
height: "12px",
background: j,
borderRadius: "50%",
transform: "translateY(-50%)",
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
}
}
)
}
)
}
),
Ve && B && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
bottom: "12px",
left: `${Qe}px`,
transform: "translateX(-50%)",
background: "rgba(0, 0, 0, 0.9)",
color: "#fff",
padding: "4px 8px",
borderRadius: "4px",
fontSize: "12px",
whiteSpace: "nowrap"
},
children: et(ge)
}
)
]
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexWrap: "wrap",
gap: "12px"
},
children: [
/* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => ve(-E),
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: /* @__PURE__ */ e.jsx(ft, { size: 20 })
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: _e,
style: {
background: j,
borderRadius: "50%",
padding: "12px",
color: "#fff",
border: "none",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
children: K ? /* @__PURE__ */ e.jsx(lt, { size: 20 }) : /* @__PURE__ */ e.jsx(Je, { size: 20 })
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => ve(E),
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: /* @__PURE__ */ e.jsx(gt, { size: 20 })
}
),
/* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", position: "relative" }, children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => x(!de),
onMouseEnter: () => g && Ce(!0),
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: /* @__PURE__ */ e.jsx(mt, {})
}
),
g && /* @__PURE__ */ e.jsx(
"div",
{
onMouseEnter: () => Ce(!0),
onMouseLeave: () => Ce(!1),
style: {
position: je ? "relative" : "absolute",
left: je ? "0" : "40px",
bottom: je ? "0" : "40px",
width: je ? "80px" : "30px",
height: je ? "6px" : "80px",
background: "rgba(255, 255, 255, 0.2)",
borderRadius: "3px",
cursor: "pointer",
opacity: je ? 1 : 0,
transition: "all 0.3s ease"
},
onClick: (O) => {
const be = O.currentTarget.getBoundingClientRect(), De = (O.clientX - be.left) / be.width;
$e(De);
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: `${q * 100}%`,
height: "100%",
background: j,
borderRadius: "3px"
}
}
)
}
)
] }),
/* @__PURE__ */ e.jsxs("div", { style: { fontSize: "14px", color: le.textSecondary, minWidth: "100px" }, children: [
et(I),
" / ",
et(ee)
] })
] }),
/* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
v && /* @__PURE__ */ e.jsx(
"button",
{
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: /* @__PURE__ */ e.jsx(qr, { size: 18 })
}
),
k && /* @__PURE__ */ e.jsx(
"button",
{
onClick: () => Le(!Ie),
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: /* @__PURE__ */ e.jsx(Ln, { size: 18 })
}
),
w && /* @__PURE__ */ e.jsx(
"button",
{
onClick: ut,
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: /* @__PURE__ */ e.jsx(nr, { size: 18 })
}
),
_ && /* @__PURE__ */ e.jsx(
"button",
{
onClick: Nt,
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: /* @__PURE__ */ e.jsx(sr, { size: 18 })
}
),
y && /* @__PURE__ */ e.jsx(
"button",
{
onClick: Ze,
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: /* @__PURE__ */ e.jsx(Tn, { size: 18 })
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => se(!X),
style: {
background: "none",
border: "none",
color: X ? j : le.text,
cursor: "pointer",
padding: "8px"
},
children: /* @__PURE__ */ e.jsx(Pt, { size: 18 })
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: pe,
style: { background: "none", border: "none", color: le.text, cursor: "pointer", padding: "8px" },
children: V ? /* @__PURE__ */ e.jsx(_t, { size: 18 }) : /* @__PURE__ */ e.jsx(Lt, { size: 18 })
}
)
] })
]
}
)
]
}
),
Ie && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "absolute",
bottom: "80px",
right: "16px",
background: le.controlsBg,
backdropFilter: "blur(10px)",
borderRadius: "12px",
padding: "16px",
minWidth: "200px",
color: le.text,
border: `1px solid ${le.border}`,
opacity: Ie ? 1 : 0,
transform: Ie ? "translateY(0)" : "translateY(10px)",
transition: "all 0.3s ease"
},
children: [
P && /* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "12px" }, children: [
/* @__PURE__ */ e.jsx("div", { style: { fontSize: "14px", marginBottom: "8px", color: le.textSecondary }, children: "Playback Speed" }),
/* @__PURE__ */ e.jsx("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" }, children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map((O) => /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => fe(O),
style: {
background: ce === O ? j : "transparent",
border: `1px solid ${le.border}`,
borderRadius: "6px",
padding: "4px 8px",
color: le.text,
cursor: "pointer",
fontSize: "12px"
},
children: [
O,
"x"
]
},
O
)) })
] }),
M && /* @__PURE__ */ e.jsxs("div", { children: [
/* @__PURE__ */ e.jsx("div", { style: { fontSize: "14px", marginBottom: "8px", color: le.textSecondary }, children: "Quality" }),
/* @__PURE__ */ e.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: ["auto", "1080p", "720p", "480p", "360p"].map((O) => /* @__PURE__ */ e.jsx(
"button",
{
onClick: () => ke(O),
style: {
background: xe === O ? j : "transparent",
border: "none",
borderRadius: "6px",
padding: "8px",
color: le.text,
cursor: "pointer",
fontSize: "12px",
textAlign: "left"
},
children: O
},
O
)) })
] })
]
}
),
/* @__PURE__ */ e.jsx("style", { children: `
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
` })
]
}
);
}, mo = ({
src: t,
thumbnail: o,
autoPlay: l = !1,
loop: i = !1,
backgroundColor: d = "#000000",
primaryColor: s = "#10b981",
secondaryColor: c = "#ffffff",
borderRadius: p = "12px",
padding: z = "16px",
width: C = "100%",
className: j
}) => {
const f = me(null), m = me(null), [g, k] = u(l), [w, _] = u(0), [y, v] = u(0), [P, M] = u(0.5), [B, Y] = u(!1), [$, E] = u(i);
ue(() => {
f.current && (f.current.volume = P);
}, [P]), ue(() => {
f.current && (f.current.loop = $);
}, [$]);
const J = () => {
f.current && (g ? f.current.pause() : f.current.play(), k(!g));
}, H = () => {
f.current && (_(f.current.currentTime), v(f.current.duration));
}, Q = (S) => {
if (!f.current || !S.currentTarget) return;
const b = S.currentTarget.getBoundingClientRect(), G = (S.clientX - b.left) / b.width * y;
f.current.currentTime = G, _(G);
}, R = (S) => {
f.current && (f.current.currentTime += S);
}, W = () => {
m.current && (B ? document.exitFullscreen?.() : m.current.requestFullscreen?.(), Y(!B));
}, ne = (S) => {
const b = Math.floor(S / 60), L = Math.floor(S % 60);
return `${b}:${L < 10 ? "0" : ""}${L}`;
};
return /* @__PURE__ */ e.jsxs(
"div",
{
ref: m,
className: j,
style: {
position: "relative",
width: C,
backgroundColor: d,
borderRadius: p,
color: c,
boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
overflow: "hidden",
padding: z,
boxSizing: "border-box",
maxWidth: "100%"
},
children: [
/* @__PURE__ */ e.jsx(
"audio",
{
ref: f,
src: t,
autoPlay: l,
loop: i,
onTimeUpdate: H,
onLoadedMetadata: H
}
),
o && /* @__PURE__ */ e.jsx(
"img",
{
src: o,
alt: "Audio Thumbnail",
style: {
width: "100%",
objectFit: "cover",
borderRadius: p,
marginBottom: "16px",
maxHeight: "150px"
}
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "10px",
flexShrink: 0,
marginTop: "10px"
},
children: [
/* @__PURE__ */ e.jsx("button", { onClick: () => R(-10), "aria-label": "Skip Back 10s", children: /* @__PURE__ */ e.jsx(ft, { size: 20 }) }),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: J,
style: {
background: s,
borderRadius: "9999px",
padding: "10px",
color: "#fff",
border: "none",
cursor: "pointer"
},
"aria-label": g ? "Pause" : "Play",
children: g ? /* @__PURE__ */ e.jsx(lt, { size: 20 }) : /* @__PURE__ */ e.jsx(Je, { size: 20 })
}
),
/* @__PURE__ */ e.jsx("button", { onClick: () => R(10), "aria-label": "Skip Forward 10s", children: /* @__PURE__ */ e.jsx(gt, { size: 20 }) })
]
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
flexWrap: "wrap",
alignItems: "center",
justifyContent: "space-between",
gap: "12px",
width: "100%"
},
children: [
/* @__PURE__ */ e.jsxs("div", { style: { flexShrink: 0, minWidth: "60px", textAlign: "center" }, children: [
/* @__PURE__ */ e.jsx("span", { style: { fontSize: "14px", marginRight: "4px" }, children: ne(w) }),
/* @__PURE__ */ e.jsxs("span", { style: { fontSize: "14px", color: "#aaa" }, children: [
"/ ",
ne(y)
] })
] }),
/* @__PURE__ */ e.jsx(
"div",
{
onClick: Q,
style: {
flex: 1,
height: "8px",
background: "#444",
borderRadius: "4px",
cursor: "pointer",
position: "relative",
minWidth: "100px"
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: `${w / y * 100 || 0}%`,
height: "100%",
background: s,
borderRadius: "4px"
}
}
)
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "10px",
flexShrink: 0
},
children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => E(!$),
"aria-label": "Toggle Loop",
children: /* @__PURE__ */ e.jsx(Pt, { size: 18, color: $ ? s : void 0 })
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => M(P > 0 ? 0 : 0.5),
"aria-label": "Toggle Mute",
children: P > 0 ? /* @__PURE__ */ e.jsx(yt, { size: 18 }) : /* @__PURE__ */ e.jsx(ct, { size: 18 })
}
),
/* @__PURE__ */ e.jsx("button", { onClick: W, "aria-label": "Toggle Fullscreen", children: B ? /* @__PURE__ */ e.jsx(_t, { size: 18 }) : /* @__PURE__ */ e.jsx(Lt, { size: 18 }) })
]
}
)
]
}
)
]
}
);
};
function ye(t, o, l) {
return t == null ? l : typeof t != "object" ? t : t[o] ?? l;
}
const Zt = (t) => t < 768 ? "sm" : t < 1024 ? "md" : "lg", vo = ({
display: t = { sm: "block", md: "flex", lg: "grid" },
flexDirection: o = { sm: "column", md: "row", lg: "row" },
justifyContent: l = { sm: "flex-start", md: "center", lg: "space-between" },
alignItems: i = { sm: "stretch", md: "center", lg: "center" },
gridTemplateColumns: d = { sm: "1fr", md: "1fr 1fr", lg: "1fr 1fr 1fr" },
gridTemplateRows: s = { sm: "auto", md: "auto", lg: "auto" },
gap: c = { sm: "10px", md: "20px", lg: "30px" },
rowGap: p,
columnGap: z,
width: C = { sm: "100%", md: "90%", lg: "80%" },
maxWidth: j = { sm: "100%", md: "800px", lg: "1200px" },
height: f = { sm: "auto", md: "auto", lg: "auto" },
padding: m = { sm: "10px", md: "20px", lg: "40px" },
margin: g = { sm: "0 auto", md: "0 auto", lg: "0 auto" },
textAlign: k = { sm: "left", md: "center", lg: "center" },
backgroundColor: w = "#fff",
border: _ = { sm: "none", md: "1px solid #ddd", lg: "2px solid #ccc" },
borderRadius: y = { sm: "0", md: "8px", lg: "12px" },
boxShadow: v = {
sm: "none",
md: "0 4px 6px rgba(0,0,0,0.1)",
lg: "0 6px 10px rgba(0,0,0,0.15)"
},
overflow: P = { sm: "visible", md: "hidden", lg: "auto" },
children: M,
className: B,
style: Y
}) => {
const [$, E] = u(
() => Zt(window.innerWidth)
);
ue(() => {
const H = () => E(Zt(window.innerWidth));
return window.addEventListener("resize", H), () => window.removeEventListener("resize", H);
}, []);
const J = Ne(() => {
const H = ye(t, $, "block"), Q = ye(
o,
$,
void 0
), R = ye(
l,
$,
void 0
), W = ye(
i,
$,
void 0
), ne = ye(
d,
$,
void 0
), S = ye(
s,
$,
void 0
), b = ye(c, $, void 0), L = ye(p, $, void 0), G = ye(
z,
$,
void 0
), K = ye(C, $, "100%"), a = ye(j, $, void 0), I = ye(f, $, void 0), A = ye(m, $, void 0), ee = ye(g, $, void 0), oe = ye(
k,
$,
void 0
), q = ye(_, $, void 0), Z = ye(
y,
$,
void 0
), de = ye(
v,
$,
void 0
), x = ye(P, $, void 0);
return {
display: H,
...Q && { flexDirection: Q },
...R && { justifyContent: R },
...W && { alignItems: W },
...ne && {
gridTemplateColumns: ne
},
...S && {
gridTemplateRows: S
},
...b && { gap: b },
...L && { rowGap: L },
...G && { columnGap: G },
width: K,
...a && { maxWidth: a },
...I && { height: I },
...A && { padding: A },
...ee && { margin: ee },
...oe && { textAlign: oe },
backgroundColor: w,
...q && { border: q },
...Z && { borderRadius: Z },
...de && { boxShadow: de },
...x && { overflow: x },
boxSizing: "border-box",
...Y
};
}, [
$,
t,
o,
l,
i,
d,
s,
c,
p,
z,
C,
j,
f,
m,
g,
k,
w,
_,
y,
v,
P,
Y
]);
return /* @__PURE__ */ e.jsx("div", { className: B, style: J, children: M });
}, wo = ({
items: t,
allowMultiple: o = !1,
defaultOpenIndex: l = [],
borderColor: i = "#d1d5db",
backgroundColor: d = "#ffffff",
textColor: s = "#111827",
hoverBgColor: c = "#f3f4f6",
hoverTextColor: p = "#111827",
paddingVertical: z = "16px",
paddingHorizontal: C = "16px",
margin: j = "12px 0",
iconOpen: f = "−",
iconClose: m = "+",
transitionDuration: g = "300ms",
borderRadius: k = "8px",
shadow: w = "0 2px 8px rgba(0, 0, 0, 0.05)",
contentPadding: _ = "16px",
fontSize: y = "16px",
fontWeight: v = "600",
iconSize: P = "18px",
contentFontSize: M = "14px",
contentFontWeight: B = "400",
contentBackgroundColor: Y = "#ffffff",
contentTextColor: $ = "#111827",
className: E,
style: J
}) => {
const [H, Q] = u(l), R = me([]), W = me([]);
ue(() => {
R.current.forEach((S, b) => {
S && (S.style.maxHeight = H.includes(b) ? `${S.scrollHeight}px` : "0px");
});
}, [H]);
const ne = (S) => {
Q(
(b) => o ? b.includes(S) ? b.filter((L) => L !== S) : [...b, S] : b.includes(S) ? [] : [S]
);
};
return /* @__PURE__ */ e.jsx("div", { className: E, style: { width: "100%", ...J }, children: t.map((S, b) => /* @__PURE__ */ e.jsxs(
"div",
{
style: {
border: `1px solid ${i}`,
borderRadius: k,
margin: j,
boxShadow: w,
overflow: "hidden",
transition: `all ${g} ease`
},
children: [
/* @__PURE__ */ e.jsxs(
"button",
{
ref: (L) => {
W.current[b] = L;
},
onClick: () => ne(b),
style: {
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: d,
color: s,
padding: `${z} ${C}`,
fontWeight: v,
fontSize: y,
cursor: "pointer",
outline: "none",
border: "none",
transition: `all ${g}`
},
onMouseEnter: (L) => {
L.currentTarget.style.backgroundColor = c, L.currentTarget.style.color = p;
},
onMouseLeave: (L) => {
L.currentTarget.style.backgroundColor = d, L.currentTarget.style.color = s;
},
children: [
/* @__PURE__ */ e.jsx("span", { children: S.title }),
/* @__PURE__ */ e.jsx("span", { style: { fontSize: P }, children: H.includes(b) ? f : m })
]
}
),
/* @__PURE__ */ e.jsx(
"div",
{
ref: (L) => {
R.current[b] = L;
},
style: {
overflow: "hidden",
maxHeight: H.includes(b) ? `${R.current[b]?.scrollHeight}px` : "0px",
transition: `max-height ${g} ease-in-out`
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
borderTop: `1px solid ${i}`,
backgroundColor: Y,
color: $,
padding: _,
fontSize: M,
fontWeight: B
},
children: S.content
}
)
}
)
]
},
b
)) });
}, ko = ({
type: t,
name: o,
options: l,
selectedValues: i,
onChange: d,
disabled: s = !1,
readOnly: c = !1,
required: p = !1,
error: z,
className: C = "",
customIcon: j,
style: f,
labelStyle: m,
iconSize: g = 20,
iconCheckedBgColor: k = "#2563eb",
// blue-600
iconUncheckedBorderColor: w = "#9ca3af",
// gray-400
textColor: _ = "#374151",
// gray-700
errorStyle: y
}) => {
const v = t === "checkbox", P = (M) => {
if (d)
if (v) {
const B = Array.isArray(i) ? i.includes(M) ? i.filter((Y) => Y !== M) : [...i, M] : [M];
d(B);
} else
d(M);
};
return /* @__PURE__ */ e.jsxs(
"div",
{
className: C,
style: { display: "flex", flexDirection: "column", gap: 8, ...f },
role: t,
"aria-disabled": s,
children: [
l.map((M) => {
const B = v ? Array.isArray(i) && i.includes(M.value) : i === M.value;
return /* @__PURE__ */ e.jsxs(
"label",
{
style: {
display: "flex",
alignItems: "center",
cursor: s ? "not-allowed" : "pointer",
opacity: s ? 0.6 : 1,
gap: 8,
userSelect: "none",
...m
},
children: [
/* @__PURE__ */ e.jsx(
"input",
{
type: t,
name: o,
value: M.value,
checked: B,
disabled: s || c,
required: p,
onChange: () => P(M.value),
style: { display: "none" }
}
),
j ? j(B) : /* @__PURE__ */ e.jsxs(
"span",
{
style: {
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
width: g,
height: g,
borderRadius: v ? 4 : "50%",
border: `2px solid ${B ? k : w}`,
backgroundColor: B ? k : "transparent",
transition: "all 0.2s ease",
flexShrink: 0
},
children: [
B && !v && /* @__PURE__ */ e.jsx(
"span",
{
style: {
width: g / 2,
height: g / 2,
borderRadius: "50%",
backgroundColor: "white"
}
}
),
B && v && /* @__PURE__ */ e.jsx(
"svg",
{
viewBox: "0 0 24 24",
fill: "none",
stroke: "white",
strokeWidth: 3,
strokeLinecap: "round",
strokeLinejoin: "round",
style: { width: g * 0.6, height: g * 0.6 },
children: /* @__PURE__ */ e.jsx("polyline", { points: "20 6 9 17 4 12" })
}
)
]
}
),
/* @__PURE__ */ e.jsx("span", { style: { color: _, fontSize: 14 }, children: M.label })
]
},
M.value
);
}),
z && /* @__PURE__ */ e.jsx(
"p",
{
role: "alert",
style: {
color: "#dc2626",
// red-600
fontSize: 12,
marginTop: 4,
...y
},
children: z
}
)
]
}
);
}, jo = ({
label: t = "Open Drawer",
icon: o,
iconPosition: l = "left",
onClick: i,
style: d = {}
}) => /* @__PURE__ */ e.jsxs(
"button",
{
onClick: i,
style: {
padding: "10px 16px",
backgroundColor: "#2563eb",
color: "#fff",
border: "none",
borderRadius: "6px",
cursor: "pointer",
display: "inline-flex",
alignItems: "center",
fontSize: "14px",
gap: "8px",
...d
},
children: [
o && l === "left" && o,
t,
o && l === "right" && o
]
}
), So = ({
open: t,
onClose: o,
position: l = "right",
width: i = "300px",
height: d = "300px",
backgroundColor: s = "#fff",
transitionDuration: c = 300,
style: p = {},
children: z,
showCloseButton: C = !0,
closeButtonStyle: j = {}
}) => {
const [f, m] = u(t);
ue(() => {
t ? m(!0) : setTimeout(() => m(!1), c);
}, [t, c]);
const g = Ne(() => {
if (t) return "translate(0, 0)";
switch (l) {
case "left":
return "translateX(-100%)";
case "right":
return "translateX(100%)";
case "top":
return "translateY(-100%)";
case "bottom":
return "translateY(100%)";
default:
return "translate(0, 0)";
}
}, [t, l]), k = {
position: "fixed",
zIndex: 1e3,
backgroundColor: s,
transition: `transform ${c}ms ease, opacity ${c}ms ease`,
transform: g,
opacity: t ? 1 : 0,
...p,
...l === "left" || l === "right" ? { top: 0, [l]: 0, width: i, height: "100%" } : { left: 0, [l]: 0, height: d, width: "100%" }
}, w = {
position: "fixed",
display: f ? "block" : "none",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.5)",
zIndex: 999,
transition: `opacity ${c}ms ease`,
opacity: t ? 1 : 0,
pointerEvents: t ? "auto" : "none"
}, _ = {
position: "absolute",
top: "10px",
right: "10px",
fontSize: "20px",
background: "none",
border: "none",
cursor: "pointer",
color: "#000"
};
return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx("div", { style: w, onClick: o }),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
...k,
display: "block",
visibility: f ? "visible" : "hidden",
pointerEvents: t ? "auto" : "none"
},
children: [
C && /* @__PURE__ */ e.jsx(
"button",
{
onClick: o,
style: { ..._, ...j },
children: /* @__PURE__ */ e.jsx(dt, { size: 20, color: "rgba(255, 0, 0, 1)" })
}
),
z
]
}
)
] });
}, To = ({
options: t,
value: o,
defaultValue: l,
onChange: i,
placeholder: d = "Select an option",
disabled: s = !1,
searchable: c = !1,
multiSelect: p = !1,
clearable: z = !1,
virtualized: C = !1,
optionHeight: j = 36,
visibleOptions: f = 5,
// Styling defaults
width: m = "100%",
height: g = "auto",
borderColor: k = "#d1d5db",
focusBorderColor: w = "#2563eb",
errorBorderColor: _ = "#dc2626",
backgroundColor: y = "#ffffff",
textColor: v = "#111827",
placeholderColor: P = "#9ca3af",
hoverColor: M = "#f3f4f6",
selectedColor: B = "#eff6ff",
disabledColor: Y = "#f3f4f6",
padding: $ = "0.5rem 0.75rem",
margin: E = "0",
borderRadius: J = "0.375rem",
boxShadow: H = "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
optionPadding: Q = "0.5rem 0.75rem",
optionGap: R = "0.5rem",
transitionDuration: W = "200ms",
dropdownMaxHeight: ne = "300px",
dropdownMinWidth: S = "100%",
// Custom classes
className: b = "",
dropdownClassName: L = "",
optionClassName: G = "",
inputClassName: K = "",
// Custom styles
style: a,
dropdownStyle: I,
optionStyle: A,
inputStyle: ee,
// Icons
iconPrefix: oe,
iconSuffix: q,
clearIcon: Z = "×",
dropdownIcon: de = "▼",
checkIcon: x = "✓",
// Accessibility
ariaLabel: V,
ariaLabelledby: h,
ariaDescribedby: F,
// Callbacks
onFocus: ie,
onBlur: X,
onOpen: se,
onClose: ce
}) => {
const [fe, xe] = u([]), [ke, Se] = u(!1), [Re, Ie] = u(""), [Le, je] = u(null), Ce = me(null), Be = me(null), We = me([]);
ue(() => {
xe(o ? p ? o.split(",") : [o] : l ? p ? l.split(",") : [l] : []);
}, [o, l, p]);
const ge = c ? t.filter(
(D) => D.label.toLowerCase().includes(Re.toLowerCase())
) : t;
ue(() => {
const D = (he) => {
Ce.current && !Ce.current.contains(he.target) && (Se(!1), ce?.());
};
return document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
}, [ce]), ue(() => {
const D = (he) => {
if (ke)
switch (he.key) {
case "ArrowDown":
he.preventDefault(), je((ve) => {
const $e = ve === null ? 0 : Math.min(ve + 1, ge.length - 1);
return we($e), $e;
});
break;
case "ArrowUp":
he.preventDefault(), je((ve) => {
const $e = ve === null ? 0 : Math.max(ve - 1, 0);
return we($e), $e;
});
break;
case "Enter":
he.preventDefault(), Le !== null && Ve(ge[Le].value);
break;
case "Escape":
he.preventDefault(), Se(!1), ce?.();
break;
case "Tab":
Se(!1), ce?.();
break;
}
};
return document.addEventListener("keydown", D), () => document.removeEventListener("keydown", D);
}, [ke, Le, ge]);
const we = at((D) => {
We.current[D]?.scrollIntoView({
block: "nearest",
behavior: "smooth"
});
}, []), Ve = (D) => {
let he;
p ? he = fe.includes(D) ? fe.filter((ve) => ve !== D) : [...fe, D] : (he = [D], Se(!1), ce?.()), xe(he), i?.(p ? he.join(",") : D);
}, Ue = (D) => {
D.stopPropagation(), xe([]), i?.(""), Ie("");
}, Qe = () => {
if (s) return;
const D = !ke;
Se(D), D ? (se?.(), c && setTimeout(() => Be.current?.focus(), 0)) : ce?.();
}, Fe = t.find(
(D) => D.value === fe[0]
), Te = t.filter(
(D) => fe.includes(D.value)
), [le, ze] = u(0), Xe = Math.min(f, ge.length), _e = Math.min(
le + Xe,
ge.length
), Ke = C ? ge.slice(le, _e) : ge;
return /* @__PURE__ */ e.jsxs(
"div",
{
ref: Ce,
className: `dropdown-container ${b}`,
style: {
position: "relative",
width: m,
margin: E,
fontFamily: "'Inter', sans-serif",
...a
},
children: [
/* @__PURE__ */ e.jsx("style", { children: `
.dropdown-container {
--border-color: ${k};
--focus-border-color: ${w};
--error-border-color: ${_};
--bg-color: ${y};
--text-color: ${v};
--placeholder-color: ${P};
--hover-color: ${M};
--selected-color: ${B};
--disabled-color: ${Y};
--transition-duration: ${W};
}
` }),
/* @__PURE__ */ e.jsxs(
"div",
{
role: "button",
onClick: Qe,
"aria-disabled": s,
"aria-haspopup": "listbox",
"aria-expanded": ke,
"aria-label": V,
"aria-labelledby": h,
"aria-describedby": F,
className: `dropdown-control ${K}`,
style: {
width: "100%",
minHeight: g,
padding: $,
backgroundColor: s ? Y : y,
color: v,
borderWidth: "1px",
borderStyle: "solid",
borderColor: ke ? w : k,
borderRadius: J,
boxShadow: H,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: s ? "not-allowed" : "pointer",
opacity: s ? 0.7 : 1,
transition: `all ${W} ease-in-out`,
textAlign: "left",
...ee,
...ke && {
boxShadow: `0 0 0 1px ${w}`
}
},
children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: R,
flex: 1,
overflow: "hidden"
},
children: [
oe && /* @__PURE__ */ e.jsx("span", { className: "dropdown-icon-prefix", style: { flexShrink: 0 }, children: oe }),
p ? /* @__PURE__ */ e.jsx(
"div",
{
style: {
display: "flex",
gap: "0.25rem",
flexWrap: "wrap",
flex: 1,
overflow: "hidden"
},
children: Te.length > 0 ? Te.map((D) => /* @__PURE__ */ e.jsxs(
"span",
{
style: {
backgroundColor: B,
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
fontSize: "0.875rem",
display: "flex",
alignItems: "center",
gap: "0.25rem",
flexShrink: 0
},
children: [
D.icon && /* @__PURE__ */ e.jsx("span", { style: { flexShrink: 0 }, children: D.icon }),
/* @__PURE__ */ e.jsx(
"span",
{
style: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
},
children: D.label
}
)
]
},
D.value
)) : /* @__PURE__ */ e.jsx("span", { style: { color: P }, children: d })
}
) : /* @__PURE__ */ e.jsxs(
"span",
{
style: {
color: Fe ? v : P,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
display: "flex",
alignItems: "center",
gap: R
},
children: [
Fe?.icon && /* @__PURE__ */ e.jsx("span", { style: { flexShrink: 0 }, children: Fe.icon }),
Fe ? Fe.label : d
]
}
)
]
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "0.5rem",
marginLeft: "0.5rem",
flexShrink: 0
},
children: [
z && fe.length > 0 && /* @__PURE__ */ e.jsx(
"span",
{
onClick: Ue,
style: {
cursor: s ? "not-allowed" : "pointer",
fontSize: "1rem",
color: v,
opacity: 0.7,
display: "flex",
alignItems: "center",
justifyContent: "center"
},
"aria-label": "Clear selection",
children: Z
}
),
/* @__PURE__ */ e.jsx(
"span",
{
style: {
transition: `transform ${W}`,
transform: ke ? "rotate(180deg)" : "rotate(0deg)",
fontSize: "0.75rem",
color: v,
opacity: 0.7
},
children: de
}
)
]
}
)
]
}
),
ke && /* @__PURE__ */ e.jsxs(
"div",
{
className: `dropdown-menu ${L}`,
style: {
position: "absolute",
top: "100%",
left: 0,
zIndex: 1e3,
width: "100%",
minWidth: S,
maxHeight: ne,
overflowY: "auto",
backgroundColor: y,
border: `1px solid ${k}`,
borderRadius: J,
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
marginTop: "0.25rem",
transition: `opacity ${W}, transform ${W}`,
opacity: 0,
transform: "translateY(-0.5rem)",
animation: `dropdownFadeIn ${W} ease-out forwards`,
...I
},
role: "listbox",
"aria-multiselectable": p,
children: [
c && /* @__PURE__ */ e.jsx(
"div",
{
style: {
padding: "0.5rem",
borderBottom: `1px solid ${k}`
},
children: /* @__PURE__ */ e.jsx(
"input",
{
ref: Be,
type: "text",
value: Re,
onChange: (D) => Ie(D.target.value),
placeholder: "Search...",
style: {
width: "100%",
padding: "0.5rem 0.75rem",
borderWidth: "1px",
borderStyle: "solid",
color: v,
borderColor: ke ? w : k,
borderRadius: "0.25rem",
outline: "none",
transition: `border-color ${W}`,
...ke && {
boxShadow: `0 0 0 1px ${w}`
}
},
onFocus: ie,
onBlur: X
}
)
}
),
/* @__PURE__ */ e.jsx("ul", { style: { margin: 0, padding: "0.25rem 0", listStyle: "none" }, children: ge.length > 0 ? Ke.map((D, he) => {
const ve = fe.includes(D.value), $e = Le === (C ? le + he : he), pe = D.disabled;
return /* @__PURE__ */ e.jsxs(
"li",
{
ref: (Ze) => {
if (Ze) {
const ut = C ? le + he : he;
We.current[ut] = Ze;
}
},
onClick: () => !pe && Ve(D.value),
onMouseEnter: () => !pe && je(C ? le + he : he),
className: `dropdown-option ${G} ${pe ? "disabled" : ""}`,
style: {
padding: Q,
cursor: pe ? "not-allowed" : "pointer",
backgroundColor: ve ? B : $e ? M : y,
color: pe ? Y : v,
display: "flex",
alignItems: "center",
gap: R,
transition: `background-color ${W}`,
...A
},
role: "option",
"aria-selected": ve,
"aria-disabled": pe,
children: [
p && /* @__PURE__ */ e.jsx("span", { style: { flexShrink: 0 }, children: ve ? x : "○" }),
D.icon && /* @__PURE__ */ e.jsx("span", { style: { flexShrink: 0 }, children: D.icon }),
/* @__PURE__ */ e.jsx("span", { style: { flex: 1 }, children: D.label })
]
},
D.value
);
}) : /* @__PURE__ */ e.jsx(
"li",
{
style: {
padding: Q,
color: P,
textAlign: "center"
},
children: "No options found"
}
) }),
C && ge.length > Xe && /* @__PURE__ */ e.jsx(
"div",
{
style: {
height: `${(ge.length - Xe) * j}px`
}
}
)
]
}
),
/* @__PURE__ */ e.jsx("style", { children: `
@keyframes dropdownFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
` })
]
}
);
}, Co = ({
columns: t,
data: o,
className: l = "",
pagination: i = !0,
rowsPerPage: d = 5,
colors: s = {
headerBg: "#3b82f6",
headerText: "#ffffff",
rowBg: "#ffffff",
rowText: "#000000",
borderColor: "#d1d5db",
hoverBg: "#e5e7eb",
paginationBg: "#d1d5db",
paginationText: "#000000",
evenRowBg: "#f9fafb",
selectedRowBg: "#e0f2fe"
},
borderRadius: c = {
table: "8px",
header: "8px",
pagination: "6px"
},
sortable: p = !0,
defaultSort: z,
bodyAlign: C = "left",
headerAlign: j = "left",
rowSelection: f = { enabled: !1 },
emptyState: m = /* @__PURE__ */ e.jsx("div", { style: { padding: "20px", textAlign: "center" }, children: "No data available" }),
onRowClick: g,
rowClassName: k,
cellPadding: w = "12px",
headerCellPadding: _ = "12px",
stickyHeader: y = !1,
maxHeight: v,
scrollShadow: P = !1
}) => {
const [M, B] = u(z?.column || null), [Y, $] = u(z?.direction || "asc"), [E, J] = u(1), [H, Q] = u(null), [R, W] = u([]), ne = (x, V) => {
!p || !V || (M === x ? $(Y === "asc" ? "desc" : "asc") : (B(x), $("asc")), J(1));
}, S = (x) => {
const V = R.some(
(F) => F.id === x.id
);
let h;
V ? h = R.filter(
(F) => F.id !== x.id
) : h = [...R, x], W(h), f.onSelect?.(h);
}, b = () => {
R.length === G.length ? (W([]), f.onSelect?.([])) : (W([...G]), f.onSelect?.([...G]));
}, L = Rt.useMemo(() => M ? [...o].sort((x, V) => {
const h = x[M], F = V[M];
if (h == null && F == null) return 0;
if (h == null) return Y === "asc" ? -1 : 1;
if (F == null) return Y === "asc" ? 1 : -1;
if (typeof h == "number" && typeof F == "number")
return Y === "asc" ? h - F : F - h;
if (h instanceof Date && F instanceof Date)
return Y === "asc" ? h.getTime() - F.getTime() : F.getTime() - h.getTime();
const ie = String(h).toLowerCase(), X = String(F).toLowerCase();
return ie === X ? 0 : Y === "asc" ? ie > X ? 1 : -1 : ie < X ? 1 : -1;
}) : [...o], [o, M, Y]), G = i ? L.slice(
(E - 1) * d,
E * d
) : L, K = Math.ceil(o.length / d), a = (x) => R.some((V) => V.id === x.id), I = /* @__PURE__ */ e.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 576 512",
height: "15px",
width: "15px",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
focusable: "false",
children: /* @__PURE__ */ e.jsx("path", { d: "M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3 96 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-301.7 32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32l224 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-224 0z" })
}
), A = /* @__PURE__ */ e.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 576 512",
height: "15px",
width: "15px",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
focusable: "false",
children: /* @__PURE__ */ e.jsx("path", { d: "M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3 96 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-301.7 32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 480l32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0c17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l224 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32z" })
}
), ee = /* @__PURE__ */ e.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 320 512",
height: "15px",
width: "15px",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
focusable: "false",
children: /* @__PURE__ */ e.jsx("path", { d: "M182.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L128 109.3l0 293.5L86.6 361.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 402.7l0-293.5 41.4 41.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-96-96z" })
}
), oe = /* @__PURE__ */ e.jsxs(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
children: [
/* @__PURE__ */ e.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
/* @__PURE__ */ e.jsx("path", { d: "M9 12l2 2 4-4" })
]
}
), q = /* @__PURE__ */ e.jsxs(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
children: [
/* @__PURE__ */ e.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
/* @__PURE__ */ e.jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12" })
]
}
), Z = R.length === G.length && G.length > 0, de = R.length > 0 && !Z;
return /* @__PURE__ */ e.jsxs(
"div",
{
style: {
overflowX: "auto",
width: "100%",
maxHeight: v,
position: "relative",
boxShadow: P ? "0 2px 4px rgba(0,0,0,0.1)" : "none"
},
className: l,
children: [
/* @__PURE__ */ e.jsxs(
"table",
{
style: {
width: "100%",
borderCollapse: "collapse",
border: `1px solid ${s.borderColor}`,
tableLayout: "auto",
minWidth: "400px",
borderRadius: c.table,
borderSpacing: 0,
overflow: "hidden"
},
children: [
/* @__PURE__ */ e.jsx("thead", { children: /* @__PURE__ */ e.jsxs("tr", { children: [
f.enabled && /* @__PURE__ */ e.jsx(
"th",
{
style: {
width: f.selectionColumnWidth || "40px",
padding: _,
backgroundColor: s.headerBg,
color: s.headerText,
border: `1px solid ${s.borderColor}`,
position: y ? "sticky" : void 0,
top: y ? 0 : void 0,
zIndex: y ? 1 : void 0
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer"
},
onClick: b,
children: de ? q : Z ? oe : /* @__PURE__ */ e.jsx(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
children: /* @__PURE__ */ e.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" })
}
)
}
)
}
),
t.map(({ key: x, label: V, sortable: h, icon: F, width: ie, align: X, headerClassName: se }, ce) => /* @__PURE__ */ e.jsx(
"th",
{
onClick: () => ne(x, h),
style: {
width: ie,
padding: _,
border: `1px solid ${s.borderColor}`,
cursor: p && h ? "pointer" : "default",
backgroundColor: s.headerBg,
color: s.headerText,
userSelect: "none",
borderTopLeftRadius: ce === 0 && !f.enabled ? c.header : void 0,
borderTopRightRadius: ce === t.length - 1 ? c.header : void 0,
textAlign: X || j,
whiteSpace: "nowrap",
position: y ? "sticky" : void 0,
top: y ? 0 : void 0,
zIndex: y ? 1 : void 0
},
className: se,
"aria-sort": M === x ? Y === "asc" ? "ascending" : "descending" : void 0,
role: p && h ? "button" : void 0,
tabIndex: p && h ? 0 : void 0,
onKeyDown: (fe) => {
p && h && (fe.key === "Enter" || fe.key === " ") && (fe.preventDefault(), ne(x, h));
},
children: /* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "inline-flex",
alignItems: "center",
gap: "6px",
justifyContent: X === "right" ? "flex-end" : X === "center" ? "center" : "flex-start"
},
children: [
F && /* @__PURE__ */ e.jsx("span", { children: F }),
/* @__PURE__ */ e.jsx("span", { children: V }),
p && h && (M === x ? Y === "asc" ? I : A : ee)
]
}
)
},
x
))
] }) }),
/* @__PURE__ */ e.jsx("tbody", { children: G.length > 0 ? G.map((x, V) => {
const h = a(x), F = V % 2 === 0;
return /* @__PURE__ */ e.jsxs(
"tr",
{
style: {
backgroundColor: h ? s.selectedRowBg : F && s.evenRowBg || s.rowBg,
color: s.rowText,
transition: "background-color 0.2s ease-in-out",
cursor: g ? "pointer" : "default"
},
onMouseEnter: () => Q(V),
onMouseLeave: () => Q(null),
onClick: () => g?.(x, V),
className: k?.(x, V),
children: [
f.enabled && /* @__PURE__ */ e.jsx(
"td",
{
style: {
padding: w,
border: `1px solid ${s.borderColor}`,
textAlign: "center"
},
onClick: (ie) => {
ie.stopPropagation(), S(x);
},
children: h ? oe : /* @__PURE__ */ e.jsx(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
children: /* @__PURE__ */ e.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" })
}
)
}
),
t.map(({ key: ie, align: X, render: se, cellClassName: ce }) => /* @__PURE__ */ e.jsx(
"td",
{
style: {
padding: w,
border: `1px solid ${s.borderColor}`,
whiteSpace: "nowrap",
textAlign: X || C
},
className: ce,
children: se ? se(x[ie], x) : x[ie]
},
ie
))
]
},
V
);
}) : /* @__PURE__ */ e.jsx("tr", { children: /* @__PURE__ */ e.jsx(
"td",
{
colSpan: t.length + (f.enabled ? 1 : 0),
style: {
padding: "20px",
textAlign: "center",
border: `1px solid ${s.borderColor}`
},
children: m
}
) }) })
]
}
),
i && K > 1 && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginTop: "12px",
padding: "8px",
userSelect: "none"
},
children: [
/* @__PURE__ */ e.jsxs(
"button",
{
style: {
display: "flex",
alignItems: "center",
gap: 4,
padding: "6px 12px",
backgroundColor: s.paginationBg,
color: s.paginationText,
borderRadius: c.pagination,
border: "none",
opacity: E === 1 ? 0.5 : 1,
cursor: E === 1 ? "not-allowed" : "pointer",
fontSize: "0.875rem"
},
disabled: E === 1,
onClick: () => J((x) => Math.max(x - 1, 1)),
"aria-label": "Previous page",
type: "button",
children: [
/* @__PURE__ */ e.jsx(It, { size: 16 }),
"Prev"
]
}
),
/* @__PURE__ */ e.jsx("div", { style: { display: "flex", gap: "4px" }, children: Array.from({ length: Math.min(5, K) }, (x, V) => {
let h;
return K <= 5 || E <= 3 ? h = V + 1 : E >= K - 2 ? h = K - 4 + V : h = E - 2 + V, /* @__PURE__ */ e.jsx(
"button",
{
style: {
padding: "6px 12px",
backgroundColor: E === h ? s.headerBg : s.paginationBg,
color: E === h ? s.headerText : s.paginationText,
borderRadius: c.pagination,
border: "none",
cursor: "pointer",
fontSize: "0.875rem",
minWidth: "36px"
},
onClick: () => J(h),
"aria-label": `Page ${h}`,
type: "button",
children: h
},
h
);
}) }),
/* @__PURE__ */ e.jsxs(
"button",
{
style: {
display: "flex",
alignItems: "center",
gap: 4,
padding: "6px 12px",
backgroundColor: s.paginationBg,
color: s.paginationText,
borderRadius: c.pagination,
border: "none",
opacity: E === K ? 0.5 : 1,
cursor: E === K ? "not-allowed" : "pointer",
fontSize: "0.875rem"
},
disabled: E === K,
onClick: () => J((x) => Math.min(x + 1, K)),
"aria-label": "Next page",
type: "button",
children: [
"Next",
/* @__PURE__ */ e.jsx(Et, { size: 16 })
]
}
)
]
}
)
]
}
);
}, Qn = (t, o) => {
const {
as: l,
children: i,
className: d = "",
style: s = {},
// Background
background: c = "#fff",
backgroundImage: p,
backgroundSize: z = "cover",
backgroundPosition: C = "center",
backgroundRepeat: j = "no-repeat",
backgroundGradient: f,
backgroundBlendMode: m,
// Colors
textColor: g = "#000",
hoverStyles: k = {},
activeStyles: w = {},
// Borders & Shadows
borderRadius: _ = 12,
border: y = "none",
borderTop: v,
borderRight: P,
borderBottom: M,
borderLeft: B,
boxShadow: Y = "0 4px 12px rgba(0,0,0,0.1)",
hoverShadow: $,
transition: E = "all 0.2s ease",
// Spacing
padding: J,
paddingX: H,
paddingY: Q,
margin: R,
marginX: W,
marginY: ne,
// Sizing
width: S,
minWidth: b,
maxWidth: L = "100%",
height: G,
minHeight: K,
maxHeight: a,
// Layout
display: I = "flex",
flexDirection: A = "column",
justifyContent: ee = "flex-start",
alignItems: oe = "stretch",
alignContent: q,
flexWrap: Z,
flex: de,
gap: x = 16,
// Position
position: V,
top: h,
right: F,
bottom: ie,
left: X,
zIndex: se,
// Overflow
overflow: ce,
overflowX: fe,
overflowY: xe,
// Cursor & Interaction
cursor: ke,
pointerEvents: Se,
userSelect: Re,
// Transform
transform: Ie,
transformOrigin: Le,
// Filters
backdropFilter: je,
filter: Ce,
// Other
opacity: Be,
visibility: We,
...ge
} = t, we = l || "div", Ve = {
// Background
background: f ? `${f}${c ? `, ${c}` : ""}` : c,
color: g,
...p ? {
backgroundImage: `url(${p})`,
backgroundSize: z,
backgroundPosition: C,
backgroundRepeat: j
} : {},
backgroundBlendMode: m,
// Borders & Shadows
borderRadius: _,
boxShadow: Y,
transition: E,
// Spacing
...J ? { padding: J } : {
paddingTop: Q,
paddingBottom: Q,
paddingLeft: H,
paddingRight: H
},
...R ? { margin: R } : {
marginTop: ne,
marginBottom: ne,
marginLeft: W,
marginRight: W
},
// Sizing
width: S,
minWidth: b,
maxWidth: L,
height: G,
minHeight: K,
maxHeight: a,
// Layout
display: I,
flexDirection: A,
justifyContent: ee,
alignItems: oe,
alignContent: q,
flexWrap: Z,
flex: de,
gap: x,
// Position
position: V,
top: h,
right: F,
bottom: ie,
left: X,
zIndex: se,
// Overflow
overflow: ce,
overflowX: fe,
overflowY: xe,
// Cursor & Interaction
cursor: ke,
pointerEvents: Se,
userSelect: Re,
// Transform
transform: Ie,
transformOrigin: Le,
// Filters
backdropFilter: je,
filter: Ce,
// Other
opacity: Be,
visibility: We,
// Border handling
border: y,
...v && { borderTop: v },
...P && { borderRight: P },
...M && { borderBottom: M },
...B && { borderLeft: B },
// Box sizing
boxSizing: "border-box"
}, Ue = {
"--hover-shadow": $,
"--hover-styles": JSON.stringify(k),
"--active-styles": JSON.stringify(w)
};
return /* @__PURE__ */ e.jsx(
we,
{
ref: o,
className: `card ${d}`,
style: { ...Ve, ...Ue, ...s },
...ge,
children: i
}
);
}, Kn = bt(Qn), zo = Object.assign(Kn, { displayName: "Card" }), er = (t) => t < 768 ? "sm" : t < 1024 ? "md" : "lg", $o = ({
columns: t = { sm: 1, md: 2, lg: 3 },
gap: o = "16px",
padding: l = "20px",
alignItems: i = "stretch",
justifyItems: d = "stretch",
backgroundColor: s = "transparent",
width: c = "100%",
maxWidth: p = "100%",
height: z = "auto",
children: C,
style: j
}) => {
const [f, m] = u(
er(window.innerWidth)
);
ue(() => {
const w = () => m(er(window.innerWidth));
return window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
}, []);
const g = Ne(() => typeof t == "number" ? t : t[f] ?? 1, [t, f]), k = Ne(
() => ({
display: "grid",
gridTemplateColumns: `repeat(${g}, 1fr)`,
gap: o,
padding: l,
alignItems: i,
justifyItems: d,
backgroundColor: s,
width: c,
maxWidth: p,
height: z,
boxSizing: "border-box",
...j
}),
[
g,
o,
l,
i,
d,
s,
c,
p,
z,
j
]
);
return /* @__PURE__ */ e.jsx("div", { style: k, children: C });
}, tr = (t) => t < 768 ? "sm" : t < 1024 ? "md" : "lg", Mo = ({
direction: t = "row",
align: o = "center",
justify: l = "space-between",
gap: i = 16,
padding: d = 20,
backgroundColor: s = "transparent",
width: c = "100%",
maxWidth: p = "100%",
height: z = "auto",
style: C,
children: j
}) => {
const [f, m] = u(
tr(window.innerWidth)
);
ue(() => {
const w = () => m(tr(window.innerWidth));
return window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
}, []);
const g = Ne(() => typeof t == "string" ? t : t[f] ?? "row", [t, f]), k = Ne(
() => ({
display: "flex",
flexDirection: g,
alignItems: o,
justifyContent: l,
gap: typeof i == "number" ? `${i}px` : i,
padding: typeof d == "number" ? `${d}px` : d,
backgroundColor: s,
width: c,
maxWidth: p,
height: z,
boxSizing: "border-box",
...C
}),
[
g,
o,
l,
i,
d,
s,
c,
p,
z,
C
]
);
return /* @__PURE__ */ e.jsx("div", { style: k, children: j });
}, Zn = {
success: {
bg: "#ecfdf5",
border: "#34d399",
iconColor: "#059669",
Icon: /* @__PURE__ */ e.jsx(en, { size: 20 })
},
error: {
bg: "#fef2f2",
border: "#f87171",
iconColor: "#dc2626",
Icon: /* @__PURE__ */ e.jsx(Kr, { size: 20 })
},
warning: {
bg: "#fffbeb",
border: "#facc15",
iconColor: "#d97706",
Icon: /* @__PURE__ */ e.jsx(Fn, { size: 20 })
},
info: {
bg: "#eff6ff",
border: "#3b82f6",
iconColor: "#2563eb",
Icon: /* @__PURE__ */ e.jsx(gn, { size: 20 })
}
}, eo = (t) => {
const o = {
position: "fixed",
zIndex: 9999
};
switch (t) {
case "top-left":
return { ...o, top: "20px", left: "20px" };
case "top-center":
return { ...o, top: "20px", left: "50%", transform: "translateX(-50%)" };
case "top-right":
return { ...o, top: "20px", right: "20px" };
case "bottom-left":
return { ...o, bottom: "20px", left: "20px" };
case "bottom-center":
return { ...o, bottom: "20px", left: "50%", transform: "translateX(-50%)" };
case "bottom-right":
default:
return { ...o, bottom: "20px", right: "20px" };
}
}, Ro = ({
title: t = "",
description: o = "",
type: l = "info",
dismissible: i = !0,
onClose: d,
duration: s,
icon: c,
actionButton: p,
position: z = "top-right",
className: C,
style: j
}) => {
const [f, m] = u(!0);
if (ue(() => {
if (s) {
const v = setTimeout(() => {
m(!1), d?.();
}, s);
return () => clearTimeout(v);
}
}, [s, d]), !f) return null;
const { bg: g, border: k, iconColor: w, Icon: _ } = Zn[l], y = eo(z);
return /* @__PURE__ */ e.jsxs(
"div",
{
className: C,
style: {
...y,
display: "flex",
gap: "12px",
padding: "16px",
backgroundColor: g,
borderLeft: `4px solid ${k}`,
borderRadius: "8px",
color: "#111827",
alignItems: "flex-start",
boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
transition: "all 0.3s ease",
animation: "slideIn 0.3s ease",
maxWidth: "600px",
width: "calc(100% - 40px)",
...j
// ✅ User custom styles merged last
},
children: [
/* @__PURE__ */ e.jsx("div", { style: { color: w, marginTop: "3px" }, children: c || _ }),
/* @__PURE__ */ e.jsxs("div", { style: { flex: 1 }, children: [
t && /* @__PURE__ */ e.jsx("div", { style: { fontWeight: "600", marginBottom: "4px" }, children: t }),
o && /* @__PURE__ */ e.jsx("div", { style: { fontSize: "14px", color: "#374151" }, children: o }),
p && /* @__PURE__ */ e.jsx("div", { style: { marginTop: "10px" }, children: p })
] }),
i && /* @__PURE__ */ e.jsx(
"button",
{
onClick: () => {
m(!1), d?.();
},
style: {
background: "transparent",
border: "none",
color: "#6b7280",
cursor: "pointer",
marginLeft: "8px"
},
children: /* @__PURE__ */ e.jsx(dt, { size: 16 })
}
),
/* @__PURE__ */ e.jsx("style", { children: `
@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
` })
]
}
);
}, Io = ({
text: t,
color: o = "#2563eb",
textColor: l = "#fff",
borderColor: i = "#2563eb",
icon: d,
iconPosition: s = "left",
rounded: c = !1,
borderRadius: p,
borderWidth: z = "0",
fontSize: C = "14px",
fontWeight: j = 500,
horizontalPadding: f = "10px",
verticalPadding: m = "6px",
margin: g = "0",
shadow: k = "0 1px 4px rgba(0, 0, 0, 0.1)",
notificationDot: w = !1,
dotColor: _ = "#ef4444",
count: y,
pulse: v = !1,
style: P,
onClick: M
}) => {
const B = {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: o,
border: `${z} solid ${i}`,
borderRadius: p || (c ? "9999px" : "6px"),
padding: `${m} ${f}`,
fontSize: C,
fontWeight: j,
margin: g,
boxShadow: k,
position: "relative",
cursor: M ? "pointer" : "default",
...P
}, Y = {
color: l,
display: "inline"
}, $ = {
display: "flex",
alignItems: "center",
color: l
}, E = {
...$,
marginRight: t ? "6px" : "0px"
}, J = {
...$,
marginLeft: t ? "6px" : "0px"
}, H = {
position: "absolute",
top: "-6px",
right: "-6px",
backgroundColor: "#ef4444",
color: "#fff",
borderRadius: "50%",
minWidth: "20px",
height: "20px",
fontSize: "12px",
padding: "0 6px",
display: "flex",
alignItems: "center",
justifyContent: "center",
lineHeight: 1,
zIndex: 1
}, Q = {
position: "absolute",
top: "-4px",
right: "-4px",
height: "8px",
width: "8px",
backgroundColor: _,
borderRadius: "50%",
zIndex: 1,
animation: v ? "pulseAnim 1.2s infinite" : void 0
};
return /* @__PURE__ */ e.jsxs("span", { style: B, onClick: M, children: [
w && /* @__PURE__ */ e.jsx("span", { style: Q }),
typeof y < "u" && /* @__PURE__ */ e.jsx("span", { style: H, children: y }),
d && s === "left" && /* @__PURE__ */ e.jsx("span", { style: E, children: d }),
t && /* @__PURE__ */ e.jsx("span", { style: Y, children: t }),
d && s === "right" && /* @__PURE__ */ e.jsx("span", { style: J, children: d }),
/* @__PURE__ */ e.jsx("style", { children: `
@keyframes pulseAnim {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}
` })
] });
}, Eo = ({
isOpen: t,
onClose: o,
children: l,
overlayStyle: i,
modalStyle: d,
closeButtonStyle: s
}) => t ? /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "fixed",
inset: 0,
backgroundColor: "rgba(0,0,0,0.6)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 1e3,
...i
},
onClick: o,
children: /* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "relative",
backgroundColor: "#fff",
borderRadius: 12,
width: "90vw",
maxWidth: 700,
maxHeight: "90vh",
overflowY: "auto",
padding: 24,
boxShadow: "0 10px 40px rgba(0,0,0,0.25)",
...d
},
onClick: (c) => c.stopPropagation(),
children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: o,
"aria-label": "Close modal",
style: {
position: "absolute",
top: 16,
right: 16,
background: "transparent",
border: "none",
cursor: "pointer",
padding: 4,
color: "#444",
transition: "color 0.2s ease",
...s
},
onMouseEnter: (c) => c.currentTarget.style.color = "#000",
onMouseLeave: (c) => c.currentTarget.style.color = "#444",
children: /* @__PURE__ */ e.jsx(dt, { size: 24 })
}
),
l
]
}
)
}
) : null, ar = {
xs: 24,
sm: 32,
md: 40,
lg: 48,
xl: 56,
"2xl": 64
}, to = {
xs: 6,
sm: 8,
md: 10,
lg: 12,
xl: 14,
"2xl": 16
}, lr = {
xs: 10,
sm: 12,
md: 14,
lg: 16,
xl: 18,
"2xl": 20
}, cr = (t) => {
switch (t) {
case "square":
return "0px";
case "rounded":
return "8px";
case "circular":
default:
return "50%";
}
}, ro = (t, o) => {
switch (t) {
case "top-left":
return { top: 1, left: 1 };
case "top-right":
return { top: 1, right: 1 };
case "bottom-left":
return { bottom: 1, left: 1 };
case "bottom-right":
default:
return { bottom: 1, right: 1 };
}
}, no = (t, o) => {
switch (t) {
case "tight":
return -(o * 0.5);
case "loose":
return -(o * 0.15);
case "normal":
default:
return -(o * 0.35);
}
}, oo = ({
src: t,
alt: o = "User Avatar",
size: l = "md",
variant: i = "circular",
isOnline: d = !1,
isOffline: s = !1,
className: c = "",
style: p,
statusClassName: z = "",
statusStyle: C,
statusPosition: j = "bottom-right",
fallback: f,
ring: m = !1,
ringColor: g = "#3b82f6",
onClick: k
}) => {
const [w, _] = u(!1), [y, v] = u(!1), P = ar[l], M = to[l], B = lr[l], Y = cr(i), $ = f || o.split(" ").map((W) => W[0]).join("").toUpperCase().slice(0, 2);
let E = "", J = "";
d ? (E = "#10b981", J = "Online") : s && (E = "#6b7280", J = "Offline");
const H = d || s, Q = t && !w, R = !!k;
return /* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "relative",
width: P,
height: P,
borderRadius: Y,
overflow: "visible",
// Changed from "hidden" to show status dots outside
display: "inline-block",
flexShrink: 0,
cursor: R ? "pointer" : "default",
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
transform: y && R ? "scale(1.05)" : "scale(1)",
boxShadow: m ? `0 0 0 3px ${g}20, 0 0 0 1px ${g}` : y && R ? "0 8px 25px -8px rgba(0, 0, 0, 0.3)" : "0 1px 3px rgba(0, 0, 0, 0.1)",
...p
},
className: c,
"aria-label": o,
role: R ? "button" : "img",
tabIndex: R ? 0 : -1,
onClick: k,
onMouseEnter: () => v(!0),
onMouseLeave: () => v(!1),
onKeyDown: (W) => {
R && (W.key === "Enter" || W.key === " ") && (W.preventDefault(), k?.());
},
children: [
Q ? /* @__PURE__ */ e.jsx("div", { style: { borderRadius: Y, overflow: "hidden", width: "100%", height: "100%" }, children: /* @__PURE__ */ e.jsx(
"img",
{
src: t,
alt: o,
width: P,
height: P,
loading: "lazy",
onError: () => _(!0),
style: {
width: "100%",
height: "100%",
objectFit: "cover",
objectPosition: "center",
display: "block",
transition: "opacity 0.2s ease-in-out"
}
}
) }) : /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: "100%",
height: "100%",
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "white",
fontSize: B,
fontWeight: "600",
borderRadius: Y,
position: "relative"
},
children: $ ? /* @__PURE__ */ e.jsx("span", { style: { userSelect: "none" }, children: $ }) : /* @__PURE__ */ e.jsx(On, { size: P * 0.5, strokeWidth: 1.5 })
}
),
H && /* @__PURE__ */ e.jsx(
"div",
{
className: z,
style: {
position: "absolute",
width: M,
height: M,
borderRadius: "50%",
backgroundColor: E,
border: "2px solid white",
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12)",
...ro(j),
...C
},
"aria-label": J,
title: J
}
)
]
}
);
}, Lo = ({
avatars: t,
max: o = 4,
size: l = "md",
className: i = "",
style: d,
spacing: s = "normal",
direction: c = "left"
}) => {
const p = ar[l], z = lr[l], C = t.slice(0, o), j = t.length - o, f = no(s, p);
return /* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
flexDirection: c === "right" ? "row-reverse" : "row",
...d
},
className: i,
"aria-label": `Avatar group with ${t.length} members`,
role: "group",
children: [
C.map((m, g) => {
const k = c === "left" ? g === 0 : g === C.length - 1, w = c === "left" ? C.length - g : g + 1;
return /* @__PURE__ */ e.jsx(
"div",
{
style: {
marginLeft: c === "left" && !k ? f : 0,
marginRight: c === "right" && !k ? f : 0,
position: "relative",
zIndex: w,
transition: "transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
},
className: "group-hover:translate-x-1",
onMouseEnter: (_) => {
const y = _.currentTarget;
y.style.transform = `translateY(-2px) ${c === "right" ? "translateX(4px)" : "translateX(-4px)"}`, y.style.zIndex = "100";
},
onMouseLeave: (_) => {
const y = _.currentTarget;
y.style.transform = "translateY(0) translateX(0)", y.style.zIndex = w.toString();
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
border: "3px solid white",
borderRadius: cr(m.variant || "circular"),
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
},
children: /* @__PURE__ */ e.jsx(
oo,
{
...m,
size: l,
style: {
boxShadow: "none"
}
}
)
}
)
},
g
);
}),
j > 0 && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
marginLeft: c === "left" ? f : 0,
marginRight: c === "right" ? f : 0,
width: p,
height: p,
borderRadius: "50%",
background: "linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)",
color: "#374151",
fontSize: z * 0.9,
fontWeight: "600",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "3px solid white",
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
userSelect: "none",
cursor: "default",
flexShrink: 0,
position: "relative",
zIndex: 0,
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
},
"aria-label": `${j} more members`,
title: `${j} more members`,
onMouseEnter: (m) => {
const g = m.currentTarget;
g.style.transform = "translateY(-2px) scale(1.05)", g.style.background = "linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%)";
},
onMouseLeave: (m) => {
const g = m.currentTarget;
g.style.transform = "translateY(0) scale(1)", g.style.background = "linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)";
},
children: [
"+",
j
]
}
)
]
}
);
}, so = [
{
src: "https://www.soundjay.com/misc/sounds/bell-ringing-05.wav",
title: "Morning Bell",
artist: "Nature Sounds",
duration: "0:15",
thumbnail: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop"
},
{
src: "https://www.soundjay.com/buttons/sounds/button-4.wav",
title: "Digital Click",
artist: "Tech Audio",
duration: "0:05",
thumbnail: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=300&h=300&fit=crop"
},
{
src: "https://www.soundjay.com/buttons/sounds/button-10.wav",
title: "Soft Chime",
artist: "Ambient Studio",
duration: "0:08",
thumbnail: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop"
}
];
function _o({
tracks: t = so,
className: o = "",
galleryTitle: l = "Audio Gallery",
primaryColor: i = "#8b5cf6",
backgroundColor: d = "#0f0f23",
textColor: s = "#e4e4e7",
secondaryColor: c = "#1a1a2e",
border: p = 0,
borderColor: z,
maxWidth: C = 420,
autoplay: j = !1,
loop: f = !1
}) {
const [m, g] = u(
null
), [k, w] = u(!1), [_, y] = u(0), [v, P] = u(0), [M, B] = u(0.7), [Y, $] = u(!1), [E, J] = u(f), [H, Q] = u(!1), [R, W] = u(!1), [ne, S] = u(!1), b = me(null), L = me(null), G = me(null);
ue(() => {
b.current && (b.current.volume = M);
}, [M]), ue(() => {
b.current && (b.current.loop = E);
}, [E]), ue(() => {
m === null && b.current && (b.current.pause(), w(!1), y(0), P(0));
}, [m]);
const K = (h) => {
if (m === h) {
if (!b.current) return;
b.current.paused ? (b.current.play().catch(() => {
}), w(!0)) : (b.current.pause(), w(!1));
} else
g(h), setTimeout(() => {
b.current && (b.current.play().catch(() => {
}), w(!0));
}, 100);
}, a = () => {
b.current && (y(b.current.currentTime), b.current.duration && P(b.current.duration));
}, I = (h) => {
if (!b.current || !v) return;
const F = h.currentTarget.getBoundingClientRect(), se = (h.clientX - F.left) / F.width * v;
b.current.currentTime = se, y(se);
}, A = (h) => {
const F = h.currentTarget.getBoundingClientRect(), X = (h.clientX - F.left) / F.width, se = Math.max(0, Math.min(1, X));
B(se);
}, ee = (h) => {
if (b.current && v) {
let F = b.current.currentTime + h;
F = Math.min(Math.max(F, 0), v), b.current.currentTime = F, y(F);
}
}, oe = () => {
if (m === null) return;
let h;
H ? h = Math.floor(Math.random() * t.length) : h = (m + 1) % t.length, K(h);
}, q = () => {
if (m === null) return;
let h;
H ? h = Math.floor(Math.random() * t.length) : h = (m - 1 + t.length) % t.length, K(h);
}, Z = () => {
B((h) => h > 0 ? 0 : 0.7);
}, de = () => {
S(!0), G.current && clearTimeout(G.current), G.current = setTimeout(() => {
S(!1);
}, 3e3);
}, x = (h) => {
if (isNaN(h)) return "0:00";
const F = Math.floor(h / 60), ie = Math.floor(h % 60);
return `${F}:${ie < 10 ? "0" : ""}${ie}`;
}, V = m !== null ? t[m] : null;
return /* @__PURE__ */ e.jsxs(
"div",
{
className: o,
style: {
maxWidth: `${C}px`,
margin: "20px auto",
background: `linear-gradient(145deg, ${d}, ${c})`,
color: s,
borderRadius: "24px",
padding: "24px 16px",
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
userSelect: "none",
backdropFilter: "blur(20px)",
border: `${p}px solid ${z}40`
},
children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: "24px"
},
children: [
/* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
/* @__PURE__ */ e.jsx(
"div",
{
style: {
width: "40px",
height: "40px",
borderRadius: "12px",
background: `linear-gradient(135deg, ${i}, ${c})`,
display: "flex",
alignItems: "center",
justifyContent: "center"
},
children: /* @__PURE__ */ e.jsx(Kt, { size: 20, color: "white" })
}
),
/* @__PURE__ */ e.jsxs("div", { children: [
/* @__PURE__ */ e.jsx(
"h2",
{
style: {
margin: 0,
fontSize: "1.25rem",
fontWeight: "700",
color: i
// fallback for browsers without WebkitTextFillColor
},
children: l
}
),
/* @__PURE__ */ e.jsxs("p", { style: { margin: 0, fontSize: "0.875rem", opacity: 0.7 }, children: [
t.length,
" tracks"
] })
] })
] }),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => Q(!H),
style: {
background: H ? i : "transparent",
border: "none",
borderRadius: "12px",
padding: "8px",
cursor: "pointer",
transition: "all 0.3s ease",
opacity: H ? 1 : 0.6
},
"aria-label": "Toggle Shuffle",
children: /* @__PURE__ */ e.jsx(An, { size: 18, color: H ? "white" : s })
}
)
]
}
),
/* @__PURE__ */ e.jsx(
"div",
{
style: {
display: "flex",
flexDirection: "column",
gap: "8px",
marginBottom: "20px",
maxHeight: "240px",
overflowY: "auto",
paddingRight: "4px"
},
children: t.map((h, F) => {
const ie = m === F, X = ie && k;
return /* @__PURE__ */ e.jsxs(
"div",
{
onClick: () => K(F),
style: {
display: "flex",
alignItems: "center",
padding: "12px 16px",
borderRadius: "16px",
background: ie ? `linear-gradient(135deg, ${i}20, ${i}10)` : "rgba(255,255,255,0.05)",
border: ie ? `1px solid ${i}40` : "1px solid transparent",
cursor: "pointer",
transition: "all 0.3s ease",
backdropFilter: ie ? "blur(20px)" : "none"
},
children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
width: "48px",
height: "48px",
borderRadius: "12px",
background: h.thumbnail ? `url(${h.thumbnail}) center/cover` : i,
display: "flex",
alignItems: "center",
justifyContent: "center",
marginRight: "12px",
position: "relative",
overflow: "hidden"
},
children: [
!h.thumbnail && /* @__PURE__ */ e.jsx(Kt, { size: 20, color: "white" }),
X && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
background: "rgba(0,0,0,0.6)",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: "16px",
height: "16px",
display: "flex",
gap: "2px",
alignItems: "end",
justifyContent: "center"
},
children: [0, 1, 2].map((se) => /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: "3px",
background: "white",
borderRadius: "2px",
animation: `equalizer 1s ease-in-out infinite ${se * 0.2}s`,
height: "12px"
}
},
se
))
}
)
}
)
]
}
),
/* @__PURE__ */ e.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
/* @__PURE__ */ e.jsx(
"div",
{
style: {
fontWeight: "600",
fontSize: "0.95rem",
color: ie ? i : s,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
},
children: h.title
}
),
h.artist && /* @__PURE__ */ e.jsx(
"div",
{
style: {
fontSize: "0.8rem",
opacity: 0.7,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
},
children: h.artist
}
)
] }),
/* @__PURE__ */ e.jsxs(
"div",
{
style: { display: "flex", alignItems: "center", gap: "12px" },
children: [
h.duration && /* @__PURE__ */ e.jsx("span", { style: { fontSize: "0.8rem", opacity: 0.6 }, children: h.duration }),
/* @__PURE__ */ e.jsx(
"div",
{
style: {
width: "32px",
height: "32px",
borderRadius: "8px",
background: ie ? i : "rgba(255,255,255,0.1)",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.3s ease"
},
children: X ? /* @__PURE__ */ e.jsx(lt, { size: 16, color: "white" }) : /* @__PURE__ */ e.jsx(Je, { size: 16, color: "white" })
}
)
]
}
)
]
},
F
);
})
}
),
V && /* @__PURE__ */ e.jsxs(
"div",
{
ref: L,
style: {
background: `linear-gradient(135deg, ${c}, ${d})`,
borderRadius: "20px",
padding: "20px",
border: `1px solid ${i}40`,
backdropFilter: "blur(20px)",
position: "relative",
overflow: "hidden"
},
children: [
V.thumbnail && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundImage: `url(${V.thumbnail})`,
backgroundSize: "cover",
backgroundPosition: "center",
filter: "blur(60px) opacity(0.1)",
transform: "scale(1.1)"
}
}
),
/* @__PURE__ */ e.jsxs("div", { style: { position: "relative", zIndex: 1 }, children: [
/* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "20px" }, children: [
/* @__PURE__ */ e.jsx(
"h3",
{
style: {
margin: "0 0 4px 0",
fontSize: "1.1rem",
fontWeight: "700",
color: i
},
children: V.title
}
),
V.artist && /* @__PURE__ */ e.jsx("p", { style: { margin: 0, opacity: 0.7, fontSize: "0.9rem" }, children: V.artist })
] }),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "20px",
marginBottom: "20px"
},
children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: q,
style: Ye(s, "rgba(255,255,255,0.1)"),
"aria-label": "Previous Track",
children: /* @__PURE__ */ e.jsx(ft, { size: 20 })
}
),
/* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => ee(-10),
style: Ye(s, "rgba(255,255,255,0.1)"),
"aria-label": "Skip back 10 seconds",
children: [
/* @__PURE__ */ e.jsx(ft, { size: 16 }),
/* @__PURE__ */ e.jsx("span", { style: { fontSize: "0.7rem", marginLeft: "2px" }, children: "10" })
]
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => {
b.current && (k ? (b.current.pause(), w(!1)) : (b.current.play().catch(() => {
}), w(!0)));
},
style: {
...Ye("#fff", i),
width: "60px",
height: "60px",
borderRadius: "50%",
boxShadow: `0 8px 25px ${i}40`
},
"aria-label": k ? "Pause" : "Play",
children: k ? /* @__PURE__ */ e.jsx(lt, { size: 24 }) : /* @__PURE__ */ e.jsx(Je, { size: 24 })
}
),
/* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => ee(10),
style: Ye(s, "rgba(255,255,255,0.1)"),
"aria-label": "Skip forward 10 seconds",
children: [
/* @__PURE__ */ e.jsx("span", { style: { fontSize: "0.7rem", marginRight: "2px" }, children: "10" }),
/* @__PURE__ */ e.jsx(gt, { size: 16 })
]
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: oe,
style: Ye(s, "rgba(255,255,255,0.1)"),
"aria-label": "Next Track",
children: /* @__PURE__ */ e.jsx(gt, { size: 20 })
}
)
]
}
),
/* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "16px" }, children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: "8px",
fontSize: "0.8rem",
opacity: 0.7
},
children: [
/* @__PURE__ */ e.jsx("span", { children: x(_) }),
/* @__PURE__ */ e.jsx("span", { children: x(v) })
]
}
),
/* @__PURE__ */ e.jsx(
"div",
{
onClick: I,
style: {
height: "6px",
background: "rgba(255,255,255,0.2)",
borderRadius: "3px",
cursor: "pointer",
position: "relative",
overflow: "hidden"
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: `${_ / v * 100 || 0}%`,
height: "100%",
background: `linear-gradient(90deg, ${i}, #ec4899)`,
borderRadius: "3px",
position: "relative"
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
right: "-6px",
top: "50%",
transform: "translateY(-50%)",
width: "12px",
height: "12px",
background: i,
borderRadius: "50%",
boxShadow: `0 2px 8px ${i}60`
}
}
)
}
)
}
)
] }),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => W(!R),
style: Ye(
R ? "#ec4899" : s,
"rgba(255,255,255,0.1)"
),
"aria-label": "Like",
children: /* @__PURE__ */ e.jsx(it, { size: 16, fill: R ? "#ec4899" : "none" })
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => J(!E),
style: Ye(
E ? i : s,
"rgba(255,255,255,0.1)"
),
"aria-label": "Toggle Loop",
children: /* @__PURE__ */ e.jsx(Pt, { size: 16 })
}
)
] }),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "8px",
position: "relative"
},
children: [
ne && /* @__PURE__ */ e.jsx(
"div",
{
onClick: A,
style: {
width: "80px",
height: "4px",
background: "rgba(255,255,255,0.2)",
borderRadius: "2px",
cursor: "pointer",
position: "relative"
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
width: `${M * 100}%`,
height: "100%",
background: i,
borderRadius: "2px"
}
}
)
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: Z,
onMouseEnter: de,
style: Ye(s, "rgba(255,255,255,0.1)"),
"aria-label": M > 0 ? "Mute" : "Unmute",
children: M > 0 ? /* @__PURE__ */ e.jsx(yt, { size: 16 }) : /* @__PURE__ */ e.jsx(ct, { size: 16 })
}
)
]
}
)
]
}
)
] }),
/* @__PURE__ */ e.jsx(
"audio",
{
ref: b,
src: V.src,
autoPlay: j,
loop: E,
onTimeUpdate: a,
onEnded: () => {
w(!1), E || oe();
},
onLoadedMetadata: a,
preload: "metadata",
style: { display: "none" }
}
)
]
}
),
/* @__PURE__ */ e.jsx("style", { children: `
@keyframes equalizer {
0%, 100% { height: 4px; }
50% { height: 12px; }
}
/* Custom Scrollbar */
div::-webkit-scrollbar {
width: 4px;
}
div::-webkit-scrollbar-track {
background: rgba(255,255,255,0.1);
border-radius: 2px;
}
div::-webkit-scrollbar-thumb {
background: ${i};
border-radius: 2px;
}
div::-webkit-scrollbar-thumb:hover {
background: ${i}dd;
}
` })
]
}
);
}
function Ye(t, o) {
return {
border: "none",
backgroundColor: o,
color: t,
cursor: "pointer",
padding: "10px",
borderRadius: "12px",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.3s ease",
backdropFilter: "blur(10px)"
};
}
const zt = {
// Colors
primary: "#3b82f6",
secondary: "#6366f1",
accent: "#f59e0b",
background: "#0f172a",
surface: "#1e293b",
text: "#f8fafc",
textSecondary: "#94a3b8",
textTertiary: "#64748b",
border: "#334155",
// Effects
shadow: "0 10px 25px rgba(0,0,0,0.3)",
hoverShadow: "0 15px 30px rgba(0,0,0,0.4)",
gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
// Shapes
borderRadius: "0px 0px 12px 12px",
borderRadiusSmall: "6px",
borderRadiusLarge: "16px",
// Transitions
transitionSpeed: "0.3s",
transitionEasing: "ease",
// Typography
fontFamily: "inherit",
fontSizeBase: "16px",
fontWeightNormal: "400",
fontWeightBold: "600",
// Spacing
spacingUnit: "16px",
// Custom
backdropBlur: "8px",
overlayOpacity: "0.7"
}, io = {
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5,
"2xl": 6,
"3xl": 7
}, Po = ({
videos: t,
// Layout
layout: o = "grid",
columns: l = io,
gap: i = "16px",
aspectRatio: d = "16:9",
// Visual
theme: s = zt,
showThumbnails: c = !0,
showMetadata: p = !0,
metadataPosition: z = "below",
showControls: C = !0,
controlsPosition: j = "bottom",
showProgress: f = !0,
showVolume: m = !0,
showQualityOptions: g = !1,
showSpeedOptions: k = !1,
// Behavior
autoPlay: w = !1,
autoPlayDelay: _ = 2e3,
autoAdvance: y = !1,
autoAdvanceDelay: v = 5e3,
loop: P = !1,
muted: M = !0,
preload: B = "metadata",
lazyLoading: Y = !0,
infiniteScroll: $ = !1,
loadMoreThreshold: E = 1e3,
// Lightbox
lightbox: J = !0,
lightboxAnimation: H = "zoom",
lightboxTransitionSpeed: Q = 300,
keyboard: R = !0,
swipeGestures: W = !0,
// SEO
title: ne = "Video Gallery",
description: S = "A collection of videos",
ariaLabel: b = "Video gallery",
structured: L = !0,
// Features
search: G = !0,
searchPlaceholder: K = "Search videos...",
filter: a = !0,
sort: I = !0,
sortOptions: A = ["date", "title", "views", "likes", "duration"],
playlist: ee = !1,
fullscreen: oe = !0,
pictureInPicture: q = !1,
sharing: Z = !0,
download: de = !1,
favorites: x = !0,
// Customization
customLoader: V,
customEmptyState: h,
customErrorState: F,
// Callbacks
onVideoClick: ie,
onVideoEnd: X,
onVideoPlay: se,
onVideoPause: ce,
onVideoLike: fe,
onVideoShare: xe,
onVideoDownload: ke,
onLayoutChange: Se,
onSearch: Re,
onFilter: Ie,
onSort: Le,
// Classes
className: je = "",
containerClassName: Ce = "",
videoItemClassName: Be = "",
controlsClassName: We = ""
}) => {
const [ge, we] = u(null), [Ve, Ue] = u(!1), [Qe, Fe] = u({ width: 1024, height: 768 }), [Te, le] = u(""), [ze, Xe] = u("all"), [_e, Ke] = u("date"), [D, he] = u(/* @__PURE__ */ new Set()), [ve, $e] = u(12), [pe, Ze] = u(o), [ut, Nt] = u("auto"), [et, mt] = u(1), [O, be] = u(null), De = me(null), Ee = me(null), n = Ne(
() => ({
...zt,
hoverShadow: s.hoverShadow ?? zt.hoverShadow,
...s
}),
[s]
), dr = at(() => {
const { width: r } = Qe;
return r < 480 ? l.xs ?? 1 : r < 640 ? l.sm ?? 2 : r < 768 ? l.md ?? 3 : r < 1024 ? l.lg ?? 4 : r < 1280 ? l.xl ?? 5 : r < 1536 ? l["2xl"] ?? 6 : l["3xl"] ?? 7;
}, [Qe, l]);
ue(() => {
const r = () => {
Fe({
width: window.innerWidth,
height: window.innerHeight
});
};
return r(), window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
}, []);
const vt = Ne(() => {
try {
let r = [...t];
return Te && (r = r.filter(
(T) => T.title?.toLowerCase().includes(Te.toLowerCase()) || T.description?.toLowerCase().includes(Te.toLowerCase()) || T.tags?.some(
(ae) => ae.toLowerCase().includes(Te.toLowerCase())
) || T.author?.toLowerCase().includes(Te.toLowerCase())
), Re?.(Te)), ze !== "all" && (r = r.filter(
(T) => T.category === ze
), Ie?.(ze)), r.sort((T, ae) => {
switch (_e) {
case "title":
return (T.title || "").localeCompare(ae.title || "");
case "views":
return (ae.views || 0) - (T.views || 0);
case "likes":
return (ae.likes || 0) - (T.likes || 0);
case "duration":
return (ae.duration || 0) - (T.duration || 0);
case "random":
return Math.random() - 0.5;
case "trending":
const N = (T.views || 0) / ((T.likes || 0) + 1) * (T.publishDate ? new Date(T.publishDate).getTime() : 0);
return (ae.views || 0) / ((ae.likes || 0) + 1) * (ae.publishDate ? new Date(ae.publishDate).getTime() : 0) - N;
case "date":
default:
return new Date(ae.publishDate || "").getTime() - new Date(T.publishDate || "").getTime();
}
}), Le?.(_e), $ ? r.slice(0, ve) : r;
} catch (r) {
return be("Error filtering videos"), console.error(r), [];
}
}, [
t,
Te,
ze,
_e,
$,
ve
]), Bt = Ne(() => {
const r = t.map((T) => T.category).filter((T) => !!T);
return ["all", ...Array.from(new Set(r))];
}, [t]);
ue(() => {
if (!R || ge === null) return;
const r = (T) => {
switch (T.key) {
case "Escape":
we(null);
break;
case "ArrowLeft":
T.preventDefault(), we(
(ae) => ae !== null ? (ae - 1 + t.length) % t.length : null
);
break;
case "ArrowRight":
T.preventDefault(), we(
(ae) => ae !== null ? (ae + 1) % t.length : null
);
break;
case " ":
T.preventDefault();
break;
case "m":
T.preventDefault();
break;
case "f":
T.preventDefault();
break;
}
};
return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
}, [R, ge, t.length]), ue(() => {
if (!W || !Ee.current || ge === null)
return;
let r = 0, T = 0, ae = 0, N = 0;
const U = (Pe) => {
r = Pe.changedTouches[0].screenX, T = Pe.changedTouches[0].screenY;
}, Me = (Pe) => {
ae = Pe.changedTouches[0].screenX, N = Pe.changedTouches[0].screenY;
const tt = r - ae, Oe = T - N;
Math.abs(tt) > 50 && Math.abs(Oe) < 50 && (tt > 0 ? we(
(qe) => qe !== null ? (qe + 1) % t.length : null
) : we(
(qe) => qe !== null ? (qe - 1 + t.length) % t.length : null
));
}, He = Ee.current;
return He.addEventListener("touchstart", U), He.addEventListener("touchend", Me), () => {
He.removeEventListener("touchstart", U), He.removeEventListener("touchend", Me);
};
}, [W, ge, t.length]), ue(() => {
if (!$) return;
const r = () => {
window.innerHeight + window.scrollY >= document.body.offsetHeight - E && $e((T) => Math.min(T + 12, t.length));
};
return window.addEventListener("scroll", r), () => window.removeEventListener("scroll", r);
}, [$, t.length, E]);
const ur = () => {
if (!L) return null;
const r = {
"@context": "https://schema.org",
"@type": "VideoGallery",
name: ne,
description: S,
video: t.map((T) => ({
"@type": "VideoObject",
name: T.title,
description: T.description,
thumbnailUrl: T.poster || T.thumbnail,
contentUrl: T.src,
uploadDate: T.publishDate,
duration: T.duration ? `PT${T.duration}S` : void 0,
author: {
"@type": "Person",
name: T.author
},
interactionStatistic: [
{
"@type": "InteractionCounter",
interactionType: "https://schema.org/WatchAction",
userInteractionCount: T.views || 0
},
{
"@type": "InteractionCounter",
interactionType: "https://schema.org/LikeAction",
userInteractionCount: T.likes || 0
}
]
}))
};
return /* @__PURE__ */ e.jsx(
"script",
{
type: "application/ld+json",
dangerouslySetInnerHTML: { __html: JSON.stringify(r) }
}
);
}, wt = (r) => {
Ze(r), Se?.(r);
}, Wt = (r) => {
he((T) => {
const ae = new Set(T);
if (ae.has(r)) {
ae.delete(r);
const N = t.find((U) => U.id === r);
N && fe?.(N, !1);
} else {
ae.add(r);
const N = t.find((U) => U.id === r);
N && fe?.(N, !0);
}
return ae;
});
}, pr = (r) => {
navigator.share ? navigator.share({
title: r.title,
text: r.description,
url: r.src
}).catch(() => {
navigator.clipboard?.writeText(r.src);
}) : navigator.clipboard?.writeText(r.src), xe?.(r);
}, xr = (r) => {
const T = document.createElement("a");
T.href = r.src, T.download = r.title || "video", T.click(), ke?.(r);
}, kt = (r) => {
if (!r || isNaN(r)) return "0:00";
const T = Math.floor(r / 3600), ae = Math.floor(r % 3600 / 60), N = Math.floor(r % 60);
return T > 0 ? `${T}:${ae.toString().padStart(2, "0")}:${N.toString().padStart(2, "0")}` : `${ae}:${N.toString().padStart(2, "0")}`;
}, Ft = ({ video: r, isLightbox: T = !1, onClick: ae }) => {
const N = me(null), U = me(null), [Me, He] = u(!1), [Pe, tt] = u(0), [Oe, qe] = u(0), [pt, Dt] = u(0.7), [Ge, jt] = u(M), [xt, yr] = u(!1), [mr, Ot] = u(!1), [Yt, rt] = u(!0), [St, vr] = u(!1), [wr, kr] = u(0), [jr, Sr] = u(0), [ao, lo] = u(!1), [co, uo] = u(!1), [Tt, Vt] = u(!1);
ue(() => {
const te = () => {
vr(window.innerWidth < 768);
};
return te(), window.addEventListener("resize", te), () => window.removeEventListener("resize", te);
}, []), ue(() => {
let te;
return Me ? (rt(!0), te = setTimeout(() => {
rt(!1);
}, 2e3)) : rt(!0), () => clearTimeout(te);
}, [Me, Pe]);
const Ct = at(() => {
N.current && (Me ? (N.current.pause(), ce?.(
r,
t.findIndex((te) => te.id === r.id)
)) : (N.current.play(), se?.(
r,
t.findIndex((te) => te.id === r.id)
)), He(!Me));
}, [Me, r]), Ut = () => {
N.current && (tt(N.current.currentTime), N.current.duration && qe(N.current.duration));
}, Tr = (te) => {
if (!N.current || !Oe) return;
const Ae = te.currentTarget.getBoundingClientRect(), nt = (te.clientX - Ae.left) / Ae.width * Oe;
N.current.currentTime = nt, tt(nt);
}, Cr = () => {
N.current?.parentElement && (xt ? document.exitFullscreen?.() : N.current.parentElement.requestFullscreen?.(), yr(!xt));
}, zr = () => {
N.current && (Ge ? (jt(!1), N.current.muted = !1, pt === 0 && Dt(0.5)) : (jt(!0), N.current.muted = !0));
}, $r = (te) => {
N.current && (N.current.playbackRate = te, mt(te)), Vt(!1);
}, Mr = (te) => {
kr(te.touches[0].clientX), Sr(te.touches[0].clientY), rt(!0);
}, Rr = (te) => {
const Ae = te.changedTouches[0].clientX, Xt = te.changedTouches[0].clientY, nt = wr - Ae, Lr = jr - Xt;
Math.abs(nt) > 50 && Math.abs(Lr) < 50 ? nt > 0 ? N.current && (N.current.currentTime += 10) : N.current && (N.current.currentTime -= 10) : Ct();
}, Ir = () => d === "auto" || d === "custom" ? {} : { paddingBottom: {
"16:9": "56.25%",
"4:3": "75%",
"1:1": "100%",
"3:2": "66.67%",
"21:9": "42.86%",
"9:16": "177.78%"
}[d] }, Er = () => {
const te = {
padding: n.spacingUnit,
color: n.text
};
switch (z) {
case "overlay":
return {
...te,
position: "absolute",
bottom: 0,
left: 0,
right: 0,
background: `linear-gradient(to top, rgba(0,0,0,${n.overlayOpacity}), transparent)`
};
case "hover":
return {
...te,
position: "absolute",
bottom: 0,
left: 0,
right: 0,
opacity: 0,
transition: `opacity ${n.transitionSpeed} ${n.transitionEasing}`,
background: `linear-gradient(to top, rgba(0,0,0,${n.overlayOpacity}), transparent)`
};
default:
return te;
}
};
return /* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "relative",
overflow: "hidden",
backgroundColor: n.surface,
borderRadius: n.borderRadius,
boxShadow: n.shadow,
border: `1px solid ${n.border}`,
cursor: ae ? "pointer" : "default",
height: "100%"
},
onTouchStart: St ? Mr : void 0,
onTouchEnd: St ? Rr : void 0,
onMouseMove: () => rt(!0),
className: Be,
children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "relative",
width: "100%",
...Ir()
},
children: [
c && /* @__PURE__ */ e.jsx(
"video",
{
ref: N,
src: r.src,
poster: r.poster || r.thumbnail,
preload: B,
loop: P,
muted: Ge,
onTimeUpdate: Ut,
onLoadedMetadata: Ut,
onWaiting: () => Ot(!0),
onCanPlay: () => Ot(!1),
onEnded: () => {
He(!1), X?.(
r,
t.findIndex((te) => te.id === r.id)
);
},
style: {
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: d === "auto" ? n.borderRadius : `${n.borderRadius} ${n.borderRadius} 0 0`,
...d === "auto" ? { aspectRatio: "16/9" } : { position: "absolute", top: 0, left: 0 }
}
}
),
ge === null && !Me && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "rgba(0, 0, 0, 0.3)",
cursor: "pointer",
backdropFilter: `blur(${n.backdropBlur})`
},
onClick: ae || Ct,
children: mr ? V || /* @__PURE__ */ e.jsx("div", { style: { animation: "spin 1s linear infinite" }, children: /* @__PURE__ */ e.jsx(or, { size: 48, color: n.primary }) }) : /* @__PURE__ */ e.jsx(
"div",
{
style: {
backgroundColor: `${n.primary}33`,
backdropFilter: "blur(4px)",
borderRadius: "50%",
padding: "16px"
},
children: /* @__PURE__ */ e.jsx(
Je,
{
size: 32,
color: n.text,
fill: n.text
}
)
}
)
}
),
r.duration && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
bottom: "8px",
right: "8px",
padding: "4px 8px",
fontSize: "12px",
fontWeight: n.fontWeightBold,
borderRadius: n.borderRadiusSmall,
backgroundColor: n.background + "CC",
color: n.text,
backdropFilter: `blur(${n.backdropBlur})`
},
children: kt(r.duration)
}
),
x && /* @__PURE__ */ e.jsx(
"button",
{
onClick: (te) => {
te.stopPropagation(), Wt(r.id);
},
style: {
position: "absolute",
top: "8px",
right: "8px",
padding: "8px",
borderRadius: "50%",
backgroundColor: "rgba(0, 0, 0, 0.5)",
border: "none",
cursor: "pointer",
backdropFilter: `blur(${n.backdropBlur})`
},
"aria-label": D.has(r.id) ? "Unlike video" : "Like video",
children: /* @__PURE__ */ e.jsx(
it,
{
size: 16,
color: D.has(r.id) ? n.accent : n.text,
fill: D.has(r.id) ? n.accent : "none"
}
)
}
)
]
}
),
T && Yt && /* @__PURE__ */ e.jsxs(
"div",
{
ref: U,
style: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
padding: n.spacingUnit,
background: "linear-gradient(to top, rgba(0,0,0,0.8), transparent)",
borderRadius: `0 0 ${n.borderRadius} ${n.borderRadius}`,
backdropFilter: `blur(${n.backdropBlur})`,
transition: `opacity ${n.transitionSpeed} ease`,
opacity: Yt ? 1 : 0
},
className: We,
children: [
f && /* @__PURE__ */ e.jsx(
"div",
{
onClick: Tr,
style: {
height: "4px",
backgroundColor: "rgba(255, 255, 255, 0.3)",
borderRadius: n.borderRadiusSmall,
cursor: "pointer",
position: "relative",
marginBottom: "12px"
},
children: /* @__PURE__ */ e.jsx(
"div",
{
style: {
height: "100%",
borderRadius: n.borderRadiusSmall,
width: `${Pe / Oe * 100 || 0}%`,
backgroundColor: n.primary
}
}
)
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: { display: "flex", alignItems: "center", gap: "8px" },
children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: Ct,
style: {
padding: "8px",
borderRadius: "50%",
backgroundColor: n.primary,
border: "none",
cursor: "pointer"
},
"aria-label": Me ? "Pause" : "Play",
children: Me ? /* @__PURE__ */ e.jsx(lt, { size: 20, color: n.text }) : /* @__PURE__ */ e.jsx(Je, { size: 20, color: n.text })
}
),
m && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: zr,
style: {
padding: "6px",
borderRadius: "50%",
backgroundColor: "transparent",
border: "none",
cursor: "pointer"
},
"aria-label": Ge ? "Unmute" : "Mute",
children: Ge ? /* @__PURE__ */ e.jsx(ct, { size: 18, color: n.text }) : /* @__PURE__ */ e.jsx(yt, { size: 18, color: n.text })
}
),
!St && /* @__PURE__ */ e.jsx(
"input",
{
type: "range",
min: "0",
max: "1",
step: "0.1",
value: Ge ? 0 : pt,
onChange: (te) => {
const Ae = parseFloat(te.target.value);
Dt(Ae), N.current && (N.current.volume = Ae, Ae > 0 && jt(!1));
},
style: {
width: "80px",
height: "4px",
borderRadius: "2px",
background: `linear-gradient(to right, ${n.primary} 0%, ${n.primary} ${(Ge ? 0 : pt) * 100}%, rgba(255,255,255,0.3) ${(Ge ? 0 : pt) * 100}%, rgba(255,255,255,0.3) 100%)`
},
"aria-label": "Volume control"
}
)
] }),
/* @__PURE__ */ e.jsxs(
"span",
{
style: {
fontSize: "14px",
color: n.text,
minWidth: "40px"
},
children: [
kt(Pe),
" / ",
kt(Oe)
]
}
)
]
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: { display: "flex", alignItems: "center", gap: "8px" },
children: [
k && /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
/* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => Vt(!Tt),
style: {
padding: "6px 10px",
borderRadius: n.borderRadiusSmall,
backgroundColor: Tt ? "rgba(255, 255, 255, 0.2)" : "transparent",
border: "none",
color: n.text,
cursor: "pointer",
fontSize: "14px"
},
"aria-label": "Playback speed",
children: [
et,
"x"
]
}
),
Tt && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
bottom: "100%",
right: 0,
backgroundColor: n.surface,
borderRadius: n.borderRadiusSmall,
padding: "8px",
boxShadow: n.shadow,
zIndex: 10,
minWidth: "80px"
},
children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((te) => /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => $r(te),
style: {
width: "100%",
padding: "6px 10px",
backgroundColor: et === te ? n.primary + "33" : "transparent",
border: "none",
color: n.text,
cursor: "pointer"
},
children: [
te,
"x"
]
},
te
))
}
)
] }),
oe && /* @__PURE__ */ e.jsx(
"button",
{
onClick: Cr,
style: {
padding: "6px",
borderRadius: "50%",
backgroundColor: "transparent",
border: "none",
cursor: "pointer"
},
"aria-label": xt ? "Exit fullscreen" : "Enter fullscreen",
children: xt ? /* @__PURE__ */ e.jsx(_t, { size: 18, color: n.text }) : /* @__PURE__ */ e.jsx(Lt, { size: 18, color: n.text })
}
)
]
}
)
]
}
)
]
}
),
p && /* @__PURE__ */ e.jsxs("div", { style: Er(), children: [
r.title && /* @__PURE__ */ e.jsx(
"h3",
{
style: {
color: n.text,
fontWeight: n.fontWeightBold,
fontSize: "14px",
margin: "0 0 8px 0",
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
overflow: "hidden"
},
children: r.title
}
),
r.description && z !== "hover" && /* @__PURE__ */ e.jsx(
"p",
{
style: {
color: n.textSecondary,
fontSize: "12px",
margin: "0 0 8px 0",
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
overflow: "hidden"
},
children: r.description
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
fontSize: "12px",
color: n.textSecondary
},
children: [
/* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "12px" }, children: [
r.views && /* @__PURE__ */ e.jsxs(
"span",
{
style: {
display: "flex",
alignItems: "center",
gap: "4px"
},
children: [
/* @__PURE__ */ e.jsx(Mt, { size: 12 }),
" ",
r.views.toLocaleString()
]
}
),
r.likes && /* @__PURE__ */ e.jsxs(
"span",
{
style: {
display: "flex",
alignItems: "center",
gap: "4px"
},
children: [
/* @__PURE__ */ e.jsx(it, { size: 12 }),
" ",
r.likes.toLocaleString()
]
}
)
] }),
r.publishDate && /* @__PURE__ */ e.jsxs(
"span",
{
style: { display: "flex", alignItems: "center", gap: "4px" },
children: [
/* @__PURE__ */ e.jsx(Xr, { size: 12 }),
" ",
new Date(r.publishDate).toLocaleDateString()
]
}
)
]
}
),
r.tags && r.tags.length > 0 && /* @__PURE__ */ e.jsx(
"div",
{
style: {
display: "flex",
flexWrap: "wrap",
gap: "4px",
marginTop: "8px"
},
children: r.tags.slice(0, 3).map((te, Ae) => /* @__PURE__ */ e.jsxs(
"span",
{
style: {
padding: "4px 8px",
fontSize: "12px",
borderRadius: "16px",
backgroundColor: n.primary + "33",
color: n.primary
},
children: [
"#",
te
]
},
Ae
))
}
)
] }),
!T && f && Me && Oe > 0 && /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "absolute",
bottom: 0,
left: 0,
height: "4px",
width: `${Pe / Oe * 100}%`,
backgroundColor: n.primary
}
}
)
]
}
);
}, hr = () => {
if (ge === null || !J) return null;
const r = t[ge];
if (!r) return null;
const T = () => {
we(
(U) => U !== null ? (U - 1 + t.length) % t.length : null
);
}, ae = () => {
we(
(U) => U !== null ? (U + 1) % t.length : null
);
}, N = window.innerWidth < 768;
return /* @__PURE__ */ e.jsxs(
"div",
{
ref: Ee,
style: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0, 0, 0, 0.95)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 9999,
padding: "20px"
},
onClick: (U) => {
U.target === U.currentTarget && we(null);
},
children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => we(null),
style: {
position: "absolute",
top: "20px",
right: "20px",
padding: "12px",
borderRadius: "50%",
backgroundColor: "rgba(0, 0, 0, 0.7)",
border: "none",
cursor: "pointer",
transition: "all 0.3s ease",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1e4
},
onMouseEnter: (U) => {
U.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.9)", U.currentTarget.style.transform = "scale(1.1)";
},
onMouseLeave: (U) => {
U.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.7)", U.currentTarget.style.transform = "scale(1)";
},
"aria-label": "Close lightbox",
children: /* @__PURE__ */ e.jsx(dt, { size: 24, color: "white" })
}
),
t.length > 1 && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: T,
style: {
position: "absolute",
left: "20px",
top: "50%",
transform: "translateY(-50%)",
padding: "12px",
borderRadius: "50%",
backgroundColor: "rgba(0, 0, 0, 0.7)",
border: "none",
cursor: "pointer",
transition: "all 0.3s ease",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1e4
},
onMouseEnter: (U) => {
U.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.9)", U.currentTarget.style.transform = "translateY(-50%) scale(1.1)";
},
onMouseLeave: (U) => {
U.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.7)", U.currentTarget.style.transform = "translateY(-50%) scale(1)";
},
"aria-label": "Previous video",
children: /* @__PURE__ */ e.jsx(It, { size: 24, color: "white" })
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: ae,
style: {
position: "absolute",
right: "20px",
top: "50%",
transform: "translateY(-50%)",
padding: "12px",
borderRadius: "50%",
backgroundColor: "rgba(0, 0, 0, 0.7)",
border: "none",
cursor: "pointer",
transition: "all 0.3s ease",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1e4
},
onMouseEnter: (U) => {
U.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.9)", U.currentTarget.style.transform = "translateY(-50%) scale(1.1)";
},
onMouseLeave: (U) => {
U.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.7)", U.currentTarget.style.transform = "translateY(-50%) scale(1)";
},
"aria-label": "Next video",
children: /* @__PURE__ */ e.jsx(Et, { size: 24, color: "white" })
}
)
] }),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "relative",
width: "100%",
maxWidth: "90vw",
maxHeight: "90vh",
display: "flex",
flexDirection: "column",
gap: "20px"
},
children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "absolute",
top: 0,
left: 0,
right: 0,
padding: "16px",
background: "linear-gradient(to bottom, rgba(0,0,0,0.8), transparent)",
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
zIndex: 1e3
},
children: [
/* @__PURE__ */ e.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
/* @__PURE__ */ e.jsx(
"h2",
{
style: {
color: "white",
fontSize: N ? "18px" : "20px",
fontWeight: "bold",
margin: "0 0 4px 0",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
},
children: r.title
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "16px",
color: "rgb(209, 213, 219)",
fontSize: N ? "12px" : "14px"
},
children: [
r.views && /* @__PURE__ */ e.jsxs(
"span",
{
style: {
display: "flex",
alignItems: "center",
gap: "4px"
},
children: [
/* @__PURE__ */ e.jsx(Mt, { size: N ? 12 : 14 }),
" ",
r.views.toLocaleString(),
" views"
]
}
),
r.likes && /* @__PURE__ */ e.jsxs(
"span",
{
style: {
display: "flex",
alignItems: "center",
gap: "4px"
},
children: [
/* @__PURE__ */ e.jsx(it, { size: N ? 12 : 14 }),
" ",
r.likes.toLocaleString(),
" likes"
]
}
)
]
}
)
] }),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: N ? "8px" : "12px"
},
children: [
x && /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => Wt(r.id),
style: {
padding: N ? "6px" : "8px",
borderRadius: "50%",
backgroundColor: "transparent",
border: "none",
cursor: "pointer",
transition: "background-color 0.3s ease",
display: "flex",
flexDirection: "column",
alignItems: "center"
},
onMouseEnter: (U) => {
U.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
},
onMouseLeave: (U) => {
U.currentTarget.style.backgroundColor = "transparent";
},
"aria-label": D.has(r.id) ? "Unlike video" : "Like video",
children: [
/* @__PURE__ */ e.jsx(
it,
{
size: N ? 18 : 20,
color: D.has(r.id) ? n.accent : "white",
fill: D.has(r.id) ? n.accent : "none"
}
),
N && /* @__PURE__ */ e.jsx(
"span",
{
style: {
fontSize: "10px",
color: "white",
marginTop: "2px"
},
children: D.has(r.id) ? "Liked" : "Like"
}
)
]
}
),
de && /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => xr(r),
style: {
padding: N ? "6px" : "8px",
borderRadius: "50%",
backgroundColor: "transparent",
border: "none",
cursor: "pointer",
transition: "background-color 0.3s ease",
display: "flex",
flexDirection: "column",
alignItems: "center"
},
onMouseEnter: (U) => {
U.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
},
onMouseLeave: (U) => {
U.currentTarget.style.backgroundColor = "transparent";
},
"aria-label": "Download video",
children: [
/* @__PURE__ */ e.jsx(nr, { size: N ? 18 : 20, color: "white" }),
N && /* @__PURE__ */ e.jsx(
"span",
{
style: {
fontSize: "10px",
color: "white",
marginTop: "2px"
},
children: "Download"
}
)
]
}
),
Z && /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => pr(r),
style: {
padding: N ? "6px" : "8px",
borderRadius: "50%",
backgroundColor: "transparent",
border: "none",
cursor: "pointer",
transition: "background-color 0.3s ease",
display: "flex",
flexDirection: "column",
alignItems: "center"
},
onMouseEnter: (U) => {
U.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
},
onMouseLeave: (U) => {
U.currentTarget.style.backgroundColor = "transparent";
},
"aria-label": "Share video",
children: [
/* @__PURE__ */ e.jsx(sr, { size: N ? 18 : 20, color: "white" }),
N && /* @__PURE__ */ e.jsx(
"span",
{
style: {
fontSize: "10px",
color: "white",
marginTop: "2px"
},
children: "Share"
}
)
]
}
)
]
}
)
]
}
),
/* @__PURE__ */ e.jsx(Ft, { video: r, isLightbox: !0 })
]
}
)
]
}
);
}, fr = () => {
const r = dr(), T = typeof i == "string" ? i : n.spacingUnit;
switch (pe) {
case "grid":
return {
display: "grid",
gridTemplateColumns: `repeat(${r}, 1fr)`,
gap: T
};
case "masonry":
return {
columnCount: r,
columnGap: T
};
case "list":
return {
display: "flex",
flexDirection: "column",
gap: T
};
case "carousel":
return {
display: "grid",
gridAutoFlow: "column",
gridAutoColumns: `calc(100% / ${r})`,
gap: T,
overflowX: "auto",
scrollSnapType: "x mandatory",
scrollbarWidth: "none",
msOverflowStyle: "none",
"&::-webkit-scrollbar": {
// Type assertion
display: "none"
}
};
case "mosaic":
return {
display: "grid",
gridTemplateColumns: `repeat(${r}, 1fr)`,
gridTemplateRows: "masonry",
gap: T
};
case "compact":
return {
display: "grid",
gridTemplateColumns: `repeat(${r * 2}, 1fr)`,
gap: T
};
case "highlight":
return {
display: "grid",
gridTemplateColumns: `repeat(${r - 1}, 1fr) 2fr`,
gap: T
};
default:
return {
display: "grid",
gridTemplateColumns: `repeat(${r}, 1fr)`,
gap: T
};
}
}, gr = () => h || /* @__PURE__ */ e.jsxs(
"div",
{
style: {
textAlign: "center",
padding: "60px 20px",
color: n.textSecondary
},
children: [
/* @__PURE__ */ e.jsx(
"div",
{
style: {
fontSize: "48px",
marginBottom: "16px",
opacity: 0.5
},
children: "🎥"
}
),
/* @__PURE__ */ e.jsx(
"h3",
{
style: {
color: n.text,
fontSize: "20px",
margin: "0 0 8px 0"
},
children: "No videos found"
}
),
/* @__PURE__ */ e.jsx("p", { style: { fontSize: "16px", margin: 0 }, children: Te || ze !== "all" ? "Try adjusting your search or filter criteria." : "No videos available in this gallery." })
]
}
), br = () => F || /* @__PURE__ */ e.jsxs(
"div",
{
style: {
textAlign: "center",
padding: "60px 20px",
color: n.textSecondary
},
children: [
/* @__PURE__ */ e.jsx(
"div",
{
style: {
fontSize: "48px",
marginBottom: "16px",
opacity: 0.5
},
children: "⚠️"
}
),
/* @__PURE__ */ e.jsx(
"h3",
{
style: {
color: n.text,
fontSize: "20px",
margin: "0 0 8px 0"
},
children: "Error loading videos"
}
),
/* @__PURE__ */ e.jsx("p", { style: { fontSize: "16px", margin: 0 }, children: O || "An unknown error occurred while loading the videos." }),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => window.location.reload(),
style: {
marginTop: "16px",
padding: "8px 16px",
borderRadius: n.borderRadiusSmall,
backgroundColor: n.primary,
color: n.text,
border: "none",
cursor: "pointer",
transition: `all ${n.transitionSpeed} ${n.transitionEasing}`
},
onMouseEnter: (r) => {
r.currentTarget.style.transform = "scale(1.05)";
},
onMouseLeave: (r) => {
r.currentTarget.style.transform = "scale(1)";
},
children: "Try Again"
}
)
]
}
);
return /* @__PURE__ */ e.jsxs(
"div",
{
ref: De,
className: `${je} ${Ce}`,
style: {
backgroundColor: n.background,
minHeight: "100vh",
padding: n.spacingUnit,
fontFamily: n.fontFamily,
fontSize: n.fontSizeBase,
color: n.text
},
"aria-label": b,
children: [
ur(),
/* @__PURE__ */ e.jsxs("div", { style: { marginBottom: n.spacingUnit }, children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: n.spacingUnit
},
children: [
/* @__PURE__ */ e.jsxs("div", { children: [
/* @__PURE__ */ e.jsx(
"h1",
{
style: {
color: n.text,
fontSize: "32px",
fontWeight: n.fontWeightBold,
margin: "0 0 8px 0"
},
children: ne
}
),
S && /* @__PURE__ */ e.jsx(
"p",
{
style: {
color: n.textSecondary,
fontSize: "16px",
margin: "0 0 24px 0",
lineHeight: "1.6"
},
children: S
}
)
] }),
/* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => wt("grid"),
style: {
padding: "8px",
borderRadius: n.borderRadiusSmall,
backgroundColor: pe === "grid" ? n.primary : "transparent",
border: "none",
cursor: "pointer",
transition: `all ${n.transitionSpeed} ${n.transitionEasing}`
},
onMouseEnter: (r) => {
pe !== "grid" && (r.currentTarget.style.backgroundColor = n.primary + "33");
},
onMouseLeave: (r) => {
pe !== "grid" && (r.currentTarget.style.backgroundColor = "transparent");
},
"aria-label": "Grid layout",
children: /* @__PURE__ */ e.jsx(
xn,
{
size: 20,
color: pe === "grid" ? n.text : n.textSecondary
}
)
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => wt("masonry"),
style: {
padding: "8px",
borderRadius: n.borderRadiusSmall,
backgroundColor: pe === "masonry" ? n.primary : "transparent",
border: "none",
cursor: "pointer",
transition: `all ${n.transitionSpeed} ${n.transitionEasing}`
},
onMouseEnter: (r) => {
pe !== "masonry" && (r.currentTarget.style.backgroundColor = n.primary + "33");
},
onMouseLeave: (r) => {
pe !== "masonry" && (r.currentTarget.style.backgroundColor = "transparent");
},
"aria-label": "Masonry layout",
children: /* @__PURE__ */ e.jsx(
rn,
{
size: 20,
color: pe === "masonry" ? n.text : n.textSecondary
}
)
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: () => wt("list"),
style: {
padding: "8px",
borderRadius: n.borderRadiusSmall,
backgroundColor: pe === "list" ? n.primary : "transparent",
border: "none",
cursor: "pointer",
transition: `all ${n.transitionSpeed} ${n.transitionEasing}`
},
onMouseEnter: (r) => {
pe !== "list" && (r.currentTarget.style.backgroundColor = n.primary + "33");
},
onMouseLeave: (r) => {
pe !== "list" && (r.currentTarget.style.backgroundColor = "transparent");
},
"aria-label": "List layout",
children: /* @__PURE__ */ e.jsx(
yn,
{
size: 20,
color: pe === "list" ? n.text : n.textSecondary
}
)
}
)
] })
]
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
flexWrap: "wrap",
gap: n.spacingUnit,
alignItems: "center",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
gap: n.spacingUnit,
alignItems: "center",
flex: 1
},
children: [
G && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "relative",
flex: 1,
maxWidth: "400px"
},
children: [
/* @__PURE__ */ e.jsx(
"input",
{
type: "text",
placeholder: K,
value: Te,
onChange: (r) => le(r.target.value),
style: {
width: "100%",
padding: "10px 16px 10px 40px",
borderRadius: n.borderRadius,
border: `1px solid ${n.border}`,
backgroundColor: n.surface,
color: n.text,
fontSize: n.fontSizeBase,
transition: `all ${n.transitionSpeed} ${n.transitionEasing}`,
outline: "none"
},
onFocus: (r) => {
r.currentTarget.style.borderColor = n.primary || "none";
},
onBlur: (r) => {
r.currentTarget.style.borderColor = n.border || "none";
},
"aria-label": "Search videos"
}
),
/* @__PURE__ */ e.jsx(
In,
{
size: 18,
color: n.textSecondary,
style: {
position: "absolute",
left: "12px",
top: "50%",
transform: "translateY(-50%)"
}
}
)
]
}
),
a && Bt.length > 1 && /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
/* @__PURE__ */ e.jsx(
"select",
{
value: ze,
onChange: (r) => Xe(r.target.value),
style: {
padding: "10px 36px 10px 16px",
borderRadius: n.borderRadius,
border: `1px solid ${n.border}`,
backgroundColor: n.surface,
color: n.text,
fontSize: n.fontSizeBase,
appearance: "none",
cursor: "pointer",
transition: `all ${n.transitionSpeed} ${n.transitionEasing}`,
outline: "none"
},
onFocus: (r) => {
r.currentTarget.style.borderColor = n.primary || "none";
},
onBlur: (r) => {
r.currentTarget.style.borderColor = n.border || "none";
},
"aria-label": "Filter videos by category",
children: Bt.map((r) => /* @__PURE__ */ e.jsx(
"option",
{
value: r,
style: {
backgroundColor: n.surface,
color: n.text
},
children: r.charAt(0).toUpperCase() + r.slice(1)
},
r
))
}
),
/* @__PURE__ */ e.jsx(
un,
{
size: 16,
color: n.textSecondary,
style: {
position: "absolute",
right: "12px",
top: "50%",
transform: "translateY(-50%)",
pointerEvents: "none"
}
}
)
] }),
I && A && A.length > 0 && /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
/* @__PURE__ */ e.jsx(
"select",
{
value: _e,
onChange: (r) => Ke(r.target.value),
style: {
padding: "10px 36px 10px 16px",
borderRadius: n.borderRadius,
border: `1px solid ${n.border}`,
backgroundColor: n.surface,
color: n.text,
fontSize: n.fontSizeBase,
appearance: "none",
cursor: "pointer",
transition: `all ${n.transitionSpeed} ${n.transitionEasing}`,
outline: "none"
},
onFocus: (r) => {
r.currentTarget.style.borderColor = n.primary || "none";
},
onBlur: (r) => {
r.currentTarget.style.borderColor = n.border || "none";
},
"aria-label": "Sort videos",
children: A.map((r) => /* @__PURE__ */ e.jsx(
"option",
{
value: r,
style: {
backgroundColor: n.surface,
color: n.text
},
children: r.charAt(0).toUpperCase() + r.slice(1)
},
r
))
}
),
/* @__PURE__ */ e.jsx(
Vr,
{
size: 16,
color: n.textSecondary,
style: {
position: "absolute",
right: "12px",
top: "50%",
transform: "translateY(-50%)",
pointerEvents: "none"
}
}
)
] })
]
}
),
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "8px",
color: n.textSecondary,
fontSize: "14px"
},
children: [
/* @__PURE__ */ e.jsx(cn, { size: 16 }),
/* @__PURE__ */ e.jsxs("span", { children: [
"Showing ",
vt.length,
" of ",
t.length,
" videos"
] })
]
}
)
]
}
)
] }),
O ? /* @__PURE__ */ e.jsx(br, {}) : vt.length === 0 ? /* @__PURE__ */ e.jsx(gr, {}) : /* @__PURE__ */ e.jsx("div", { style: fr(), className: Ce, children: vt.map((r, T) => /* @__PURE__ */ e.jsx(
"div",
{
style: {
breakInside: pe === "masonry" ? "avoid" : void 0,
pageBreakInside: pe === "masonry" ? "avoid" : void 0
},
children: /* @__PURE__ */ e.jsx(
Ft,
{
video: r,
onClick: () => {
we(T), ie?.(r, T);
}
}
)
},
r.id
)) }),
/* @__PURE__ */ e.jsx(hr, {}),
$ && ve < t.length && /* @__PURE__ */ e.jsx(
"div",
{
style: {
display: "flex",
justifyContent: "center",
marginTop: n.spacingUnit
},
children: /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => $e((r) => Math.min(r + 12, t.length)),
style: {
padding: "12px 24px",
borderRadius: n.borderRadius,
backgroundColor: n.primary,
color: n.text,
border: "none",
cursor: "pointer",
fontSize: "16px",
fontWeight: n.fontWeightBold,
display: "flex",
alignItems: "center",
gap: "8px",
transition: `all ${n.transitionSpeed} ${n.transitionEasing}`
},
onMouseEnter: (r) => {
r.currentTarget.style.transform = "translateY(-2px)", r.currentTarget.style.boxShadow = n.hoverShadow || "none";
},
onMouseLeave: (r) => {
r.currentTarget.style.transform = "translateY(0)", r.currentTarget.style.boxShadow = "none";
},
"aria-label": "Load more videos",
children: [
/* @__PURE__ */ e.jsx($n, { size: 18 }),
"Load More Videos"
]
}
)
}
)
]
}
);
}, Ao = ({
images: t,
columns: o = 3,
gap: l = "10px",
layout: i = "grid",
lightbox: d = !0,
className: s = ""
}) => {
const [c, p] = u(null), [z, C] = u(
typeof o == "number" ? o : o.default || 3
), [j, f] = u(null), [m, g] = u(0);
ue(() => {
const y = () => {
if (typeof o == "number")
C(o);
else {
const v = window.innerWidth;
v < 640 && o.sm ? C(o.sm) : v < 1024 && o.md ? C(o.md) : v < 1280 && o.lg ? C(o.lg) : v >= 1280 && o.xl ? C(o.xl) : C(o.default || 3);
}
};
return y(), window.addEventListener("resize", y), () => window.removeEventListener("resize", y);
}, [o]);
const k = () => p(null), w = (y) => {
y.stopPropagation(), c !== null && (f("prev"), p((v) => (v - 1 + t.length) % t.length), g((v) => v + 1));
}, _ = (y) => {
y.stopPropagation(), c !== null && (f("next"), p((v) => (v + 1) % t.length), g((v) => v + 1));
};
return /* @__PURE__ */ e.jsxs("div", { style: { width: "100%" }, className: s, children: [
/* @__PURE__ */ e.jsx(
"div",
{
style: {
display: "grid",
gridTemplateColumns: `repeat(${z}, 1fr)`,
gap: l,
gridAutoFlow: i === "masonry" ? "dense" : "row"
},
children: t.map((y, v) => /* @__PURE__ */ e.jsx(
"div",
{
style: {
position: "relative",
overflow: "hidden",
borderRadius: "8px",
cursor: d ? "pointer" : "default"
},
onClick: () => {
p(v), f(null);
},
children: /* @__PURE__ */ e.jsx(
Jt,
{
src: y.src,
alt: y.alt || "Gallery Image",
lazyLoad: !0,
hoverScale: 1.05,
transitionDuration: "0.3s",
style: {
display: "block",
width: "100%",
height: "auto"
}
}
)
},
v
))
}
),
d && c !== null && /* @__PURE__ */ e.jsxs(
"div",
{
onClick: k,
style: {
position: "fixed",
inset: "0",
background: "rgba(0,0,0,0.8)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 9999
},
role: "dialog",
"aria-modal": "true",
children: [
/* @__PURE__ */ e.jsxs(
"div",
{
style: {
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "center",
maxWidth: "90%",
maxHeight: "90%"
},
onClick: (y) => y.stopPropagation(),
children: [
/* @__PURE__ */ e.jsx(
"button",
{
onClick: w,
"aria-label": "Previous image",
style: {
position: "absolute",
left: "5px",
top: "50%",
transform: "translateY(-50%)",
color: "white",
background: "rgba(0,0,0,0.5)",
border: "none",
padding: "10px",
borderRadius: "50%",
cursor: "pointer",
zIndex: 2
},
children: /* @__PURE__ */ e.jsx(It, { size: 24 })
}
),
/* @__PURE__ */ e.jsx(
"div",
{
style: {
animation: j === "next" ? "slideInFromRight 0.4s ease" : j === "prev" ? "slideInFromLeft 0.4s ease" : "fadeIn 0.3s ease"
},
children: /* @__PURE__ */ e.jsx(
Jt,
{
src: t[c].src,
alt: t[c].alt || "Preview",
lazyLoad: !0,
style: {
maxWidth: "100%",
maxHeight: "100%",
objectFit: "contain"
}
}
)
},
m
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: _,
"aria-label": "Next image",
style: {
position: "absolute",
right: "5px",
top: "50%",
transform: "translateY(-50%)",
color: "white",
background: "rgba(0,0,0,0.5)",
border: "none",
padding: "10px",
borderRadius: "50%",
cursor: "pointer",
zIndex: 2
},
children: /* @__PURE__ */ e.jsx(Et, { size: 24 })
}
)
]
}
),
/* @__PURE__ */ e.jsx(
"button",
{
onClick: k,
"aria-label": "Close preview",
style: {
position: "absolute",
top: "20px",
right: "20px",
color: "white",
background: "rgba(0,0,0,0.5)",
border: "none",
padding: "10px",
borderRadius: "50%",
cursor: "pointer"
},
children: /* @__PURE__ */ e.jsx(dt, { size: 28 })
}
),
/* @__PURE__ */ e.jsx("style", { children: `
@keyframes slideInFromRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
` })
]
}
)
] });
};
export {
wo as Accordation,
Ro as Alert,
_o as AudioGallery,
mo as AudioPlayer,
oo as Avatar,
Lo as AvatarGroup,
Io as Badge,
ho as Button,
zo as Card,
ko as CheckRadio,
vo as Container,
So as Drawer,
jo as DrawerButton,
To as Dropdown,
Mo as Flexbox,
$o as GridView,
Jt as Image,
Ao as ImageGallery,
fo as Input,
qn as LeftTabs,
go as List,
Eo as Modal,
Jn as RightTabs,
Co as Table,
bo as Tabs,
xo as Text,
Gn as TopTabs,
Po as VideoGallery,
yo as VideoPlayer
};