@marcoschwartz/lite-ui 0.24.2 → 0.24.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +14 -1
- package/dist/index.d.ts +14 -1
- package/dist/index.js +881 -834
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +668 -622
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1262,7 +1262,7 @@ var AppShell = ({
|
|
|
1262
1262
|
showNavbarHamburger && /* @__PURE__ */ jsx78(
|
|
1263
1263
|
"button",
|
|
1264
1264
|
{
|
|
1265
|
-
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
|
|
1265
|
+
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors text-[hsl(var(--foreground))]",
|
|
1266
1266
|
onClick: () => setNavbarOpen(true),
|
|
1267
1267
|
"aria-label": "Open navigation",
|
|
1268
1268
|
children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
|
|
@@ -1271,7 +1271,7 @@ var AppShell = ({
|
|
|
1271
1271
|
showAsideHamburger && /* @__PURE__ */ jsx78(
|
|
1272
1272
|
"button",
|
|
1273
1273
|
{
|
|
1274
|
-
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
|
|
1274
|
+
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors text-[hsl(var(--foreground))]",
|
|
1275
1275
|
onClick: () => setAsideOpen(true),
|
|
1276
1276
|
"aria-label": "Open sidebar",
|
|
1277
1277
|
children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
|
|
@@ -1322,7 +1322,7 @@ var AppShell = ({
|
|
|
1322
1322
|
showNavbarHamburger && /* @__PURE__ */ jsx78(
|
|
1323
1323
|
"button",
|
|
1324
1324
|
{
|
|
1325
|
-
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
|
|
1325
|
+
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors text-[hsl(var(--foreground))]",
|
|
1326
1326
|
onClick: () => setNavbarOpen(true),
|
|
1327
1327
|
"aria-label": "Open navigation",
|
|
1328
1328
|
children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
|
|
@@ -1331,7 +1331,7 @@ var AppShell = ({
|
|
|
1331
1331
|
showAsideHamburger && /* @__PURE__ */ jsx78(
|
|
1332
1332
|
"button",
|
|
1333
1333
|
{
|
|
1334
|
-
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
|
|
1334
|
+
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors text-[hsl(var(--foreground))]",
|
|
1335
1335
|
onClick: () => setAsideOpen(true),
|
|
1336
1336
|
"aria-label": "Open sidebar",
|
|
1337
1337
|
children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
|
|
@@ -1816,8 +1816,53 @@ var Card = ({
|
|
|
1816
1816
|
);
|
|
1817
1817
|
};
|
|
1818
1818
|
|
|
1819
|
-
// src/components/
|
|
1819
|
+
// src/components/Code.tsx
|
|
1820
|
+
import React10 from "react";
|
|
1820
1821
|
import { jsx as jsx84, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1822
|
+
var colorClasses = {
|
|
1823
|
+
default: "bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]",
|
|
1824
|
+
primary: "bg-[hsl(var(--primary))]/10 text-[hsl(var(--primary))]",
|
|
1825
|
+
success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
|
1826
|
+
warning: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
|
|
1827
|
+
error: "bg-red-500/10 text-red-600 dark:text-red-400"
|
|
1828
|
+
};
|
|
1829
|
+
var Code = ({
|
|
1830
|
+
children,
|
|
1831
|
+
block = false,
|
|
1832
|
+
color = "default",
|
|
1833
|
+
className = "",
|
|
1834
|
+
copyable = false
|
|
1835
|
+
}) => {
|
|
1836
|
+
const [copied, setCopied] = React10.useState(false);
|
|
1837
|
+
const handleCopy = async () => {
|
|
1838
|
+
const text = typeof children === "string" ? children : "";
|
|
1839
|
+
if (text) {
|
|
1840
|
+
await navigator.clipboard.writeText(text);
|
|
1841
|
+
setCopied(true);
|
|
1842
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
1843
|
+
}
|
|
1844
|
+
};
|
|
1845
|
+
const baseClasses = `font-mono text-sm ${colorClasses[color]}`;
|
|
1846
|
+
if (block) {
|
|
1847
|
+
return /* @__PURE__ */ jsxs14("div", { className: `relative group ${className}`, children: [
|
|
1848
|
+
/* @__PURE__ */ jsx84("pre", { className: `${baseClasses} p-4 rounded-lg overflow-x-auto`, children: /* @__PURE__ */ jsx84("code", { children }) }),
|
|
1849
|
+
copyable && /* @__PURE__ */ jsx84(
|
|
1850
|
+
"button",
|
|
1851
|
+
{
|
|
1852
|
+
onClick: handleCopy,
|
|
1853
|
+
className: "absolute top-2 right-2 p-1.5 rounded-md bg-[hsl(var(--background))]/80 hover:bg-[hsl(var(--accent))] opacity-0 group-hover:opacity-100 transition-opacity text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]",
|
|
1854
|
+
"aria-label": "Copy code",
|
|
1855
|
+
children: copied ? /* @__PURE__ */ jsx84("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx84("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ jsx84("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx84("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
|
|
1856
|
+
}
|
|
1857
|
+
)
|
|
1858
|
+
] });
|
|
1859
|
+
}
|
|
1860
|
+
return /* @__PURE__ */ jsx84("code", { className: `${baseClasses} px-1.5 py-0.5 rounded ${className}`, children });
|
|
1861
|
+
};
|
|
1862
|
+
Code.displayName = "Code";
|
|
1863
|
+
|
|
1864
|
+
// src/components/Alert.tsx
|
|
1865
|
+
import { jsx as jsx85, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1821
1866
|
var variantStyles = {
|
|
1822
1867
|
info: "bg-[hsl(var(--info))]/10 border-[hsl(var(--info))]/20 text-[hsl(var(--info))]",
|
|
1823
1868
|
success: "bg-[hsl(var(--success))]/10 border-[hsl(var(--success))]/20 text-[hsl(var(--success))]",
|
|
@@ -1839,24 +1884,24 @@ var Alert = ({
|
|
|
1839
1884
|
}) => {
|
|
1840
1885
|
const variantClass = variantStyles[variant];
|
|
1841
1886
|
const iconClass = iconStyles[variant];
|
|
1842
|
-
return /* @__PURE__ */
|
|
1843
|
-
/* @__PURE__ */
|
|
1844
|
-
variant === "info" && /* @__PURE__ */
|
|
1845
|
-
variant === "success" && /* @__PURE__ */
|
|
1846
|
-
variant === "warning" && /* @__PURE__ */
|
|
1847
|
-
variant === "error" && /* @__PURE__ */
|
|
1887
|
+
return /* @__PURE__ */ jsx85("div", { className: `rounded-[--radius] border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3", children: [
|
|
1888
|
+
/* @__PURE__ */ jsxs15("div", { className: `flex-shrink-0 ${iconClass}`, children: [
|
|
1889
|
+
variant === "info" && /* @__PURE__ */ jsx85("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx85("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
|
|
1890
|
+
variant === "success" && /* @__PURE__ */ jsx85("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx85("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
|
|
1891
|
+
variant === "warning" && /* @__PURE__ */ jsx85("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx85("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
|
|
1892
|
+
variant === "error" && /* @__PURE__ */ jsx85("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx85("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
|
|
1848
1893
|
] }),
|
|
1849
|
-
/* @__PURE__ */
|
|
1850
|
-
title && /* @__PURE__ */
|
|
1851
|
-
/* @__PURE__ */
|
|
1894
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1", children: [
|
|
1895
|
+
title && /* @__PURE__ */ jsx85("h3", { className: "font-semibold mb-1", children: title }),
|
|
1896
|
+
/* @__PURE__ */ jsx85("div", { className: "text-sm", children })
|
|
1852
1897
|
] }),
|
|
1853
|
-
onClose && /* @__PURE__ */
|
|
1898
|
+
onClose && /* @__PURE__ */ jsx85(
|
|
1854
1899
|
"button",
|
|
1855
1900
|
{
|
|
1856
1901
|
onClick: onClose,
|
|
1857
1902
|
className: `flex-shrink-0 ${iconClass} hover:opacity-70 transition-opacity`,
|
|
1858
1903
|
"aria-label": "Close alert",
|
|
1859
|
-
children: /* @__PURE__ */
|
|
1904
|
+
children: /* @__PURE__ */ jsx85("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx85("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
1860
1905
|
}
|
|
1861
1906
|
)
|
|
1862
1907
|
] }) });
|
|
@@ -1864,13 +1909,13 @@ var Alert = ({
|
|
|
1864
1909
|
|
|
1865
1910
|
// src/components/Checkbox.tsx
|
|
1866
1911
|
import { forwardRef as forwardRef2 } from "react";
|
|
1867
|
-
import { jsx as
|
|
1912
|
+
import { jsx as jsx86, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1868
1913
|
var Checkbox = forwardRef2(
|
|
1869
1914
|
({ label, error, className = "", disabled, checked, ...props }, ref) => {
|
|
1870
|
-
return /* @__PURE__ */
|
|
1871
|
-
/* @__PURE__ */
|
|
1872
|
-
/* @__PURE__ */
|
|
1873
|
-
/* @__PURE__ */
|
|
1915
|
+
return /* @__PURE__ */ jsxs16("div", { className, children: [
|
|
1916
|
+
/* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
|
|
1917
|
+
/* @__PURE__ */ jsxs16("div", { className: "relative inline-flex items-center", children: [
|
|
1918
|
+
/* @__PURE__ */ jsx86(
|
|
1874
1919
|
"input",
|
|
1875
1920
|
{
|
|
1876
1921
|
ref,
|
|
@@ -1881,19 +1926,19 @@ var Checkbox = forwardRef2(
|
|
|
1881
1926
|
...props
|
|
1882
1927
|
}
|
|
1883
1928
|
),
|
|
1884
|
-
/* @__PURE__ */
|
|
1929
|
+
/* @__PURE__ */ jsx86("div", { className: `w-4 h-4 border-2 rounded-sm transition-all duration-200 flex items-center justify-center
|
|
1885
1930
|
${error ? "border-[hsl(var(--destructive))]" : "border-[hsl(var(--input))]"}
|
|
1886
1931
|
${disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "peer-hover:border-[hsl(var(--ring))]"}
|
|
1887
1932
|
peer-checked:bg-[hsl(var(--primary))] peer-checked:border-[hsl(var(--primary))]
|
|
1888
1933
|
peer-focus:ring-1 peer-focus:ring-[hsl(var(--ring))]/50
|
|
1889
|
-
`, children: /* @__PURE__ */
|
|
1934
|
+
`, children: /* @__PURE__ */ jsx86(
|
|
1890
1935
|
"svg",
|
|
1891
1936
|
{
|
|
1892
1937
|
className: `w-3 h-3 text-white transition-opacity duration-200 ${checked ? "opacity-100" : "opacity-0"}`,
|
|
1893
1938
|
viewBox: "0 0 12 12",
|
|
1894
1939
|
fill: "none",
|
|
1895
1940
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1896
|
-
children: /* @__PURE__ */
|
|
1941
|
+
children: /* @__PURE__ */ jsx86(
|
|
1897
1942
|
"path",
|
|
1898
1943
|
{
|
|
1899
1944
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -1906,9 +1951,9 @@ var Checkbox = forwardRef2(
|
|
|
1906
1951
|
}
|
|
1907
1952
|
) })
|
|
1908
1953
|
] }),
|
|
1909
|
-
label && /* @__PURE__ */
|
|
1954
|
+
label && /* @__PURE__ */ jsx86("span", { className: `text-sm text-[hsl(var(--foreground))] ${disabled ? "opacity-50 cursor-not-allowed" : ""}`, children: label })
|
|
1910
1955
|
] }),
|
|
1911
|
-
error && /* @__PURE__ */
|
|
1956
|
+
error && /* @__PURE__ */ jsx86("p", { className: "mt-1 text-sm text-[hsl(var(--destructive))]", children: error })
|
|
1912
1957
|
] });
|
|
1913
1958
|
}
|
|
1914
1959
|
);
|
|
@@ -1916,7 +1961,7 @@ Checkbox.displayName = "Checkbox";
|
|
|
1916
1961
|
|
|
1917
1962
|
// src/components/Toggle.tsx
|
|
1918
1963
|
import { forwardRef as forwardRef3 } from "react";
|
|
1919
|
-
import { jsx as
|
|
1964
|
+
import { jsx as jsx87, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1920
1965
|
var Toggle = forwardRef3(
|
|
1921
1966
|
({ label, size = "md", className = "", disabled, checked, onChange, ...props }, ref) => {
|
|
1922
1967
|
const handleChange = (e) => {
|
|
@@ -1937,9 +1982,9 @@ var Toggle = forwardRef3(
|
|
|
1937
1982
|
}
|
|
1938
1983
|
};
|
|
1939
1984
|
const currentSize = toggleClasses[size];
|
|
1940
|
-
return /* @__PURE__ */
|
|
1941
|
-
/* @__PURE__ */
|
|
1942
|
-
/* @__PURE__ */
|
|
1985
|
+
return /* @__PURE__ */ jsxs17("label", { className: `inline-flex items-center gap-3 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`, children: [
|
|
1986
|
+
/* @__PURE__ */ jsxs17("div", { className: "relative", children: [
|
|
1987
|
+
/* @__PURE__ */ jsx87(
|
|
1943
1988
|
"input",
|
|
1944
1989
|
{
|
|
1945
1990
|
ref,
|
|
@@ -1951,27 +1996,27 @@ var Toggle = forwardRef3(
|
|
|
1951
1996
|
...props
|
|
1952
1997
|
}
|
|
1953
1998
|
),
|
|
1954
|
-
/* @__PURE__ */
|
|
1999
|
+
/* @__PURE__ */ jsx87(
|
|
1955
2000
|
"div",
|
|
1956
2001
|
{
|
|
1957
2002
|
className: `${currentSize.switch} bg-[hsl(var(--input))] peer-focus:ring-1 peer-focus:ring-[hsl(var(--ring))]/50 rounded-full peer peer-checked:bg-[hsl(var(--primary))] transition-colors`
|
|
1958
2003
|
}
|
|
1959
2004
|
),
|
|
1960
|
-
/* @__PURE__ */
|
|
2005
|
+
/* @__PURE__ */ jsx87(
|
|
1961
2006
|
"div",
|
|
1962
2007
|
{
|
|
1963
2008
|
className: `${currentSize.thumb} bg-white rounded-full shadow-md absolute top-0.5 left-0.5 transition-transform`
|
|
1964
2009
|
}
|
|
1965
2010
|
)
|
|
1966
2011
|
] }),
|
|
1967
|
-
label && /* @__PURE__ */
|
|
2012
|
+
label && /* @__PURE__ */ jsx87("span", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label })
|
|
1968
2013
|
] });
|
|
1969
2014
|
}
|
|
1970
2015
|
);
|
|
1971
2016
|
Toggle.displayName = "Toggle";
|
|
1972
2017
|
|
|
1973
2018
|
// src/components/Badge.tsx
|
|
1974
|
-
import { jsx as
|
|
2019
|
+
import { jsx as jsx88 } from "react/jsx-runtime";
|
|
1975
2020
|
var variantStyles2 = {
|
|
1976
2021
|
default: "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))]",
|
|
1977
2022
|
primary: "bg-[hsl(var(--primary))]/10 text-[hsl(var(--primary))]",
|
|
@@ -1993,18 +2038,18 @@ var Badge = ({
|
|
|
1993
2038
|
}) => {
|
|
1994
2039
|
const variantClass = variantStyles2[variant];
|
|
1995
2040
|
const sizeClass = sizeStyles[size];
|
|
1996
|
-
return /* @__PURE__ */
|
|
2041
|
+
return /* @__PURE__ */ jsx88("span", { className: `inline-flex items-center font-medium rounded-full ${variantClass} ${sizeClass} ${className}`, children });
|
|
1997
2042
|
};
|
|
1998
2043
|
|
|
1999
2044
|
// src/components/Spinner.tsx
|
|
2000
|
-
import { jsx as
|
|
2045
|
+
import { jsx as jsx89 } from "react/jsx-runtime";
|
|
2001
2046
|
var sizeClasses6 = {
|
|
2002
2047
|
sm: "w-4 h-4 border-2",
|
|
2003
2048
|
md: "w-8 h-8 border-2",
|
|
2004
2049
|
lg: "w-12 h-12 border-3",
|
|
2005
2050
|
xl: "w-16 h-16 border-4"
|
|
2006
2051
|
};
|
|
2007
|
-
var
|
|
2052
|
+
var colorClasses2 = {
|
|
2008
2053
|
primary: "border-[hsl(var(--primary))] border-t-transparent",
|
|
2009
2054
|
secondary: "border-[hsl(var(--muted-foreground))] border-t-transparent",
|
|
2010
2055
|
white: "border-white border-t-transparent"
|
|
@@ -2015,21 +2060,21 @@ var Spinner = ({
|
|
|
2015
2060
|
className = ""
|
|
2016
2061
|
}) => {
|
|
2017
2062
|
const sizeClass = sizeClasses6[size];
|
|
2018
|
-
const colorClass =
|
|
2019
|
-
return /* @__PURE__ */
|
|
2063
|
+
const colorClass = colorClasses2[color];
|
|
2064
|
+
return /* @__PURE__ */ jsx89(
|
|
2020
2065
|
"div",
|
|
2021
2066
|
{
|
|
2022
2067
|
className: `inline-block rounded-full animate-spin ${sizeClass} ${colorClass} ${className}`,
|
|
2023
2068
|
role: "status",
|
|
2024
2069
|
"aria-label": "Loading",
|
|
2025
|
-
children: /* @__PURE__ */
|
|
2070
|
+
children: /* @__PURE__ */ jsx89("span", { className: "sr-only", children: "Loading..." })
|
|
2026
2071
|
}
|
|
2027
2072
|
);
|
|
2028
2073
|
};
|
|
2029
2074
|
|
|
2030
2075
|
// src/components/Tabs.tsx
|
|
2031
2076
|
import { useState as useState7 } from "react";
|
|
2032
|
-
import { jsx as
|
|
2077
|
+
import { jsx as jsx90, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2033
2078
|
var Tabs = ({
|
|
2034
2079
|
tabs,
|
|
2035
2080
|
defaultIndex = 0,
|
|
@@ -2042,8 +2087,8 @@ var Tabs = ({
|
|
|
2042
2087
|
setActiveIndex(index);
|
|
2043
2088
|
onChange?.(index);
|
|
2044
2089
|
};
|
|
2045
|
-
return /* @__PURE__ */
|
|
2046
|
-
/* @__PURE__ */
|
|
2090
|
+
return /* @__PURE__ */ jsxs18("div", { className, children: [
|
|
2091
|
+
/* @__PURE__ */ jsx90("div", { className: "border-b border-[hsl(var(--border))] px-4", children: /* @__PURE__ */ jsx90("nav", { className: "flex gap-4 -mb-px", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ jsx90(
|
|
2047
2092
|
"button",
|
|
2048
2093
|
{
|
|
2049
2094
|
onClick: () => handleTabClick(index),
|
|
@@ -2054,12 +2099,12 @@ var Tabs = ({
|
|
|
2054
2099
|
},
|
|
2055
2100
|
index
|
|
2056
2101
|
)) }) }),
|
|
2057
|
-
/* @__PURE__ */
|
|
2102
|
+
/* @__PURE__ */ jsx90("div", { children: tabs[activeIndex]?.content })
|
|
2058
2103
|
] });
|
|
2059
2104
|
};
|
|
2060
2105
|
|
|
2061
2106
|
// src/components/Table.tsx
|
|
2062
|
-
import { jsx as
|
|
2107
|
+
import { jsx as jsx91, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2063
2108
|
function Table({
|
|
2064
2109
|
columns,
|
|
2065
2110
|
data,
|
|
@@ -2069,12 +2114,12 @@ function Table({
|
|
|
2069
2114
|
className = "",
|
|
2070
2115
|
responsive = true
|
|
2071
2116
|
}) {
|
|
2072
|
-
return /* @__PURE__ */
|
|
2073
|
-
/* @__PURE__ */
|
|
2074
|
-
/* @__PURE__ */
|
|
2075
|
-
/* @__PURE__ */
|
|
2117
|
+
return /* @__PURE__ */ jsxs19("div", { className, children: [
|
|
2118
|
+
/* @__PURE__ */ jsxs19("div", { className: `${responsive ? "hidden md:block" : ""} overflow-x-auto`, children: [
|
|
2119
|
+
/* @__PURE__ */ jsxs19("table", { className: "w-full text-left", children: [
|
|
2120
|
+
/* @__PURE__ */ jsx91("thead", { className: "bg-[hsl(var(--muted))] border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ jsx91("tr", { children: columns.map((column, colIndex) => {
|
|
2076
2121
|
const isLast = colIndex === columns.length - 1;
|
|
2077
|
-
return /* @__PURE__ */
|
|
2122
|
+
return /* @__PURE__ */ jsx91(
|
|
2078
2123
|
"th",
|
|
2079
2124
|
{
|
|
2080
2125
|
className: isLast ? "px-6 py-3 text-xs font-medium text-[hsl(var(--muted-foreground))] uppercase tracking-wider relative" : "px-6 py-3 text-xs font-medium text-[hsl(var(--muted-foreground))] uppercase tracking-wider",
|
|
@@ -2084,18 +2129,18 @@ function Table({
|
|
|
2084
2129
|
column.key
|
|
2085
2130
|
);
|
|
2086
2131
|
}) }) }),
|
|
2087
|
-
/* @__PURE__ */
|
|
2132
|
+
/* @__PURE__ */ jsx91("tbody", { className: "bg-[hsl(var(--card))] divide-y divide-[hsl(var(--border))]", children: data.map((row, rowIndex) => {
|
|
2088
2133
|
const rowClasses = [
|
|
2089
2134
|
striped && rowIndex % 2 === 1 ? "bg-[hsl(var(--muted))]/50" : "",
|
|
2090
2135
|
hoverable ? "hover:bg-[hsl(var(--muted))] transition-colors" : ""
|
|
2091
2136
|
].filter(Boolean).join(" ");
|
|
2092
|
-
return /* @__PURE__ */
|
|
2137
|
+
return /* @__PURE__ */ jsx91(
|
|
2093
2138
|
"tr",
|
|
2094
2139
|
{
|
|
2095
2140
|
className: rowClasses,
|
|
2096
2141
|
children: columns.map((column, colIndex) => {
|
|
2097
2142
|
const isLast = colIndex === columns.length - 1;
|
|
2098
|
-
return /* @__PURE__ */
|
|
2143
|
+
return /* @__PURE__ */ jsx91(
|
|
2099
2144
|
"td",
|
|
2100
2145
|
{
|
|
2101
2146
|
className: isLast ? "px-6 py-4 text-sm text-[hsl(var(--foreground))] overflow-visible" : "px-6 py-4 text-sm text-[hsl(var(--foreground))]",
|
|
@@ -2109,9 +2154,9 @@ function Table({
|
|
|
2109
2154
|
);
|
|
2110
2155
|
}) })
|
|
2111
2156
|
] }),
|
|
2112
|
-
data.length === 0 && /* @__PURE__ */
|
|
2157
|
+
data.length === 0 && /* @__PURE__ */ jsx91("div", { className: "text-center py-8 text-[hsl(var(--muted-foreground))]", children: "No data available" })
|
|
2113
2158
|
] }),
|
|
2114
|
-
responsive && /* @__PURE__ */
|
|
2159
|
+
responsive && /* @__PURE__ */ jsxs19("div", { className: "md:hidden space-y-3", children: [
|
|
2115
2160
|
data.map((row, rowIndex) => {
|
|
2116
2161
|
const cardClasses = [
|
|
2117
2162
|
"bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[--radius] p-4 shadow-sm",
|
|
@@ -2119,17 +2164,17 @@ function Table({
|
|
|
2119
2164
|
"relative isolate"
|
|
2120
2165
|
// Ensure cards are isolated layers
|
|
2121
2166
|
].filter(Boolean).join(" ");
|
|
2122
|
-
return /* @__PURE__ */
|
|
2167
|
+
return /* @__PURE__ */ jsx91(
|
|
2123
2168
|
"div",
|
|
2124
2169
|
{
|
|
2125
2170
|
className: cardClasses,
|
|
2126
|
-
children: columns.map((column) => /* @__PURE__ */
|
|
2171
|
+
children: columns.map((column) => /* @__PURE__ */ jsxs19(
|
|
2127
2172
|
"div",
|
|
2128
2173
|
{
|
|
2129
2174
|
className: "flex justify-between items-start py-2 border-b border-[hsl(var(--border))]/50 last:border-b-0",
|
|
2130
2175
|
children: [
|
|
2131
|
-
/* @__PURE__ */
|
|
2132
|
-
/* @__PURE__ */
|
|
2176
|
+
/* @__PURE__ */ jsx91("span", { className: "text-xs font-medium text-[hsl(var(--muted-foreground))] uppercase tracking-wider flex-shrink-0 mr-4", children: column.title }),
|
|
2177
|
+
/* @__PURE__ */ jsx91("span", { className: "text-sm text-[hsl(var(--foreground))] text-right", children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key] })
|
|
2133
2178
|
]
|
|
2134
2179
|
},
|
|
2135
2180
|
column.key
|
|
@@ -2138,13 +2183,13 @@ function Table({
|
|
|
2138
2183
|
row[keyField] || rowIndex
|
|
2139
2184
|
);
|
|
2140
2185
|
}),
|
|
2141
|
-
data.length === 0 && /* @__PURE__ */
|
|
2186
|
+
data.length === 0 && /* @__PURE__ */ jsx91("div", { className: "text-center py-8 text-[hsl(var(--muted-foreground))]", children: "No data available" })
|
|
2142
2187
|
] })
|
|
2143
2188
|
] });
|
|
2144
2189
|
}
|
|
2145
2190
|
|
|
2146
2191
|
// src/components/Pagination.tsx
|
|
2147
|
-
import { jsx as
|
|
2192
|
+
import { jsx as jsx92, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2148
2193
|
var Pagination = ({
|
|
2149
2194
|
currentPage,
|
|
2150
2195
|
totalPages,
|
|
@@ -2184,8 +2229,8 @@ var Pagination = ({
|
|
|
2184
2229
|
return range(1, totalPages);
|
|
2185
2230
|
};
|
|
2186
2231
|
const pages = paginationRange();
|
|
2187
|
-
return /* @__PURE__ */
|
|
2188
|
-
/* @__PURE__ */
|
|
2232
|
+
return /* @__PURE__ */ jsxs20("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
|
|
2233
|
+
/* @__PURE__ */ jsx92(
|
|
2189
2234
|
"button",
|
|
2190
2235
|
{
|
|
2191
2236
|
onClick: () => onPageChange(currentPage - 1),
|
|
@@ -2197,7 +2242,7 @@ var Pagination = ({
|
|
|
2197
2242
|
),
|
|
2198
2243
|
pages.map((page, index) => {
|
|
2199
2244
|
if (page === "...") {
|
|
2200
|
-
return /* @__PURE__ */
|
|
2245
|
+
return /* @__PURE__ */ jsx92(
|
|
2201
2246
|
"span",
|
|
2202
2247
|
{
|
|
2203
2248
|
className: "px-3 py-2 text-[hsl(var(--muted-foreground))]",
|
|
@@ -2206,7 +2251,7 @@ var Pagination = ({
|
|
|
2206
2251
|
`dots-${index}`
|
|
2207
2252
|
);
|
|
2208
2253
|
}
|
|
2209
|
-
return /* @__PURE__ */
|
|
2254
|
+
return /* @__PURE__ */ jsx92(
|
|
2210
2255
|
"button",
|
|
2211
2256
|
{
|
|
2212
2257
|
onClick: () => onPageChange(page),
|
|
@@ -2218,7 +2263,7 @@ var Pagination = ({
|
|
|
2218
2263
|
page
|
|
2219
2264
|
);
|
|
2220
2265
|
}),
|
|
2221
|
-
/* @__PURE__ */
|
|
2266
|
+
/* @__PURE__ */ jsx92(
|
|
2222
2267
|
"button",
|
|
2223
2268
|
{
|
|
2224
2269
|
onClick: () => onPageChange(currentPage + 1),
|
|
@@ -2234,7 +2279,7 @@ var Pagination = ({
|
|
|
2234
2279
|
// src/components/DatePicker.tsx
|
|
2235
2280
|
import { useState as useState8, useRef as useRef4, useEffect as useEffect6 } from "react";
|
|
2236
2281
|
import { createPortal as createPortal2 } from "react-dom";
|
|
2237
|
-
import { jsx as
|
|
2282
|
+
import { jsx as jsx93, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2238
2283
|
var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
2239
2284
|
var MONTHS = [
|
|
2240
2285
|
"January",
|
|
@@ -2354,7 +2399,7 @@ var DatePicker = ({
|
|
|
2354
2399
|
const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-base transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] cursor-pointer";
|
|
2355
2400
|
const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
|
|
2356
2401
|
const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
|
|
2357
|
-
const calendar = isOpen && mounted && calendarPosition ? /* @__PURE__ */
|
|
2402
|
+
const calendar = isOpen && mounted && calendarPosition ? /* @__PURE__ */ jsxs21(
|
|
2358
2403
|
"div",
|
|
2359
2404
|
{
|
|
2360
2405
|
ref: calendarRef,
|
|
@@ -2365,23 +2410,23 @@ var DatePicker = ({
|
|
|
2365
2410
|
minWidth: "320px"
|
|
2366
2411
|
},
|
|
2367
2412
|
children: [
|
|
2368
|
-
/* @__PURE__ */
|
|
2369
|
-
/* @__PURE__ */
|
|
2413
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between mb-4", children: [
|
|
2414
|
+
/* @__PURE__ */ jsx93(
|
|
2370
2415
|
"button",
|
|
2371
2416
|
{
|
|
2372
2417
|
onClick: handlePrevMonth,
|
|
2373
2418
|
className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
|
|
2374
2419
|
"aria-label": "Previous month",
|
|
2375
|
-
children: /* @__PURE__ */
|
|
2420
|
+
children: /* @__PURE__ */ jsx93("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx93("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
|
|
2376
2421
|
}
|
|
2377
2422
|
),
|
|
2378
|
-
/* @__PURE__ */
|
|
2379
|
-
/* @__PURE__ */
|
|
2423
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
|
|
2424
|
+
/* @__PURE__ */ jsxs21("h2", { className: "text-base font-semibold text-[hsl(var(--foreground))]", children: [
|
|
2380
2425
|
MONTHS[month],
|
|
2381
2426
|
" ",
|
|
2382
2427
|
year
|
|
2383
2428
|
] }),
|
|
2384
|
-
/* @__PURE__ */
|
|
2429
|
+
/* @__PURE__ */ jsx93(
|
|
2385
2430
|
"button",
|
|
2386
2431
|
{
|
|
2387
2432
|
onClick: handleToday,
|
|
@@ -2390,23 +2435,23 @@ var DatePicker = ({
|
|
|
2390
2435
|
}
|
|
2391
2436
|
)
|
|
2392
2437
|
] }),
|
|
2393
|
-
/* @__PURE__ */
|
|
2438
|
+
/* @__PURE__ */ jsx93(
|
|
2394
2439
|
"button",
|
|
2395
2440
|
{
|
|
2396
2441
|
onClick: handleNextMonth,
|
|
2397
2442
|
className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
|
|
2398
2443
|
"aria-label": "Next month",
|
|
2399
|
-
children: /* @__PURE__ */
|
|
2444
|
+
children: /* @__PURE__ */ jsx93("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx93("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
|
|
2400
2445
|
}
|
|
2401
2446
|
)
|
|
2402
2447
|
] }),
|
|
2403
|
-
/* @__PURE__ */
|
|
2404
|
-
/* @__PURE__ */
|
|
2448
|
+
/* @__PURE__ */ jsx93("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ jsx93("div", { className: "text-center text-xs font-semibold text-[hsl(var(--muted-foreground))] py-1", children: day }, day)) }),
|
|
2449
|
+
/* @__PURE__ */ jsx93("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
|
|
2405
2450
|
const isCurrentMonthDay = isCurrentMonth(date);
|
|
2406
2451
|
const isTodayDay = isToday(date);
|
|
2407
2452
|
const isSelectedDay = isSelected(date);
|
|
2408
2453
|
const isDisabledDay = isDisabled(date);
|
|
2409
|
-
return /* @__PURE__ */
|
|
2454
|
+
return /* @__PURE__ */ jsx93(
|
|
2410
2455
|
"button",
|
|
2411
2456
|
{
|
|
2412
2457
|
onClick: () => handleDateClick(date),
|
|
@@ -2427,22 +2472,22 @@ var DatePicker = ({
|
|
|
2427
2472
|
]
|
|
2428
2473
|
}
|
|
2429
2474
|
) : null;
|
|
2430
|
-
return /* @__PURE__ */
|
|
2431
|
-
label && /* @__PURE__ */
|
|
2432
|
-
/* @__PURE__ */
|
|
2475
|
+
return /* @__PURE__ */ jsxs21("div", { className, children: [
|
|
2476
|
+
label && /* @__PURE__ */ jsx93("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
|
|
2477
|
+
/* @__PURE__ */ jsxs21(
|
|
2433
2478
|
"div",
|
|
2434
2479
|
{
|
|
2435
2480
|
ref: inputRef,
|
|
2436
2481
|
onClick: () => !disabled && setIsOpen(!isOpen),
|
|
2437
2482
|
className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
|
|
2438
2483
|
children: [
|
|
2439
|
-
/* @__PURE__ */
|
|
2440
|
-
/* @__PURE__ */
|
|
2484
|
+
/* @__PURE__ */ jsx93("span", { className: !value ? "text-[hsl(var(--muted-foreground))]" : "", children: value ? formatDate2(value) : placeholder }),
|
|
2485
|
+
/* @__PURE__ */ jsx93("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx93("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
|
|
2441
2486
|
]
|
|
2442
2487
|
}
|
|
2443
2488
|
),
|
|
2444
|
-
error && /* @__PURE__ */
|
|
2445
|
-
helperText && !error && /* @__PURE__ */
|
|
2489
|
+
error && /* @__PURE__ */ jsx93("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
|
|
2490
|
+
helperText && !error && /* @__PURE__ */ jsx93("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
|
|
2446
2491
|
mounted && createPortal2(calendar, document.body)
|
|
2447
2492
|
] });
|
|
2448
2493
|
};
|
|
@@ -2450,15 +2495,15 @@ DatePicker.displayName = "DatePicker";
|
|
|
2450
2495
|
|
|
2451
2496
|
// src/components/TimePicker.tsx
|
|
2452
2497
|
import { forwardRef as forwardRef4 } from "react";
|
|
2453
|
-
import { jsx as
|
|
2498
|
+
import { jsx as jsx94, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2454
2499
|
var TimePicker = forwardRef4(
|
|
2455
2500
|
({ label, error, helperText, className = "", disabled, ...props }, ref) => {
|
|
2456
2501
|
const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-base transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))]";
|
|
2457
2502
|
const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
|
|
2458
2503
|
const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
|
|
2459
|
-
return /* @__PURE__ */
|
|
2460
|
-
label && /* @__PURE__ */
|
|
2461
|
-
/* @__PURE__ */
|
|
2504
|
+
return /* @__PURE__ */ jsxs22("div", { className, children: [
|
|
2505
|
+
label && /* @__PURE__ */ jsx94("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
|
|
2506
|
+
/* @__PURE__ */ jsx94(
|
|
2462
2507
|
"input",
|
|
2463
2508
|
{
|
|
2464
2509
|
ref,
|
|
@@ -2468,8 +2513,8 @@ var TimePicker = forwardRef4(
|
|
|
2468
2513
|
...props
|
|
2469
2514
|
}
|
|
2470
2515
|
),
|
|
2471
|
-
error && /* @__PURE__ */
|
|
2472
|
-
helperText && !error && /* @__PURE__ */
|
|
2516
|
+
error && /* @__PURE__ */ jsx94("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
|
|
2517
|
+
helperText && !error && /* @__PURE__ */ jsx94("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
|
|
2473
2518
|
] });
|
|
2474
2519
|
}
|
|
2475
2520
|
);
|
|
@@ -2478,7 +2523,7 @@ TimePicker.displayName = "TimePicker";
|
|
|
2478
2523
|
// src/components/DateTimePicker.tsx
|
|
2479
2524
|
import { useState as useState9, useRef as useRef5, useEffect as useEffect7 } from "react";
|
|
2480
2525
|
import { createPortal as createPortal3 } from "react-dom";
|
|
2481
|
-
import { jsx as
|
|
2526
|
+
import { jsx as jsx95, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2482
2527
|
var DAYS2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
2483
2528
|
var MONTHS2 = [
|
|
2484
2529
|
"January",
|
|
@@ -2636,7 +2681,7 @@ var DateTimePicker = ({
|
|
|
2636
2681
|
const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-base transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] cursor-pointer";
|
|
2637
2682
|
const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
|
|
2638
2683
|
const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
|
|
2639
|
-
const picker = isOpen && mounted && pickerPosition ? /* @__PURE__ */
|
|
2684
|
+
const picker = isOpen && mounted && pickerPosition ? /* @__PURE__ */ jsxs23(
|
|
2640
2685
|
"div",
|
|
2641
2686
|
{
|
|
2642
2687
|
ref: pickerRef,
|
|
@@ -2647,23 +2692,23 @@ var DateTimePicker = ({
|
|
|
2647
2692
|
minWidth: "360px"
|
|
2648
2693
|
},
|
|
2649
2694
|
children: [
|
|
2650
|
-
/* @__PURE__ */
|
|
2651
|
-
/* @__PURE__ */
|
|
2695
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between mb-4", children: [
|
|
2696
|
+
/* @__PURE__ */ jsx95(
|
|
2652
2697
|
"button",
|
|
2653
2698
|
{
|
|
2654
2699
|
onClick: handlePrevMonth,
|
|
2655
2700
|
className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
|
|
2656
2701
|
"aria-label": "Previous month",
|
|
2657
|
-
children: /* @__PURE__ */
|
|
2702
|
+
children: /* @__PURE__ */ jsx95("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx95("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
|
|
2658
2703
|
}
|
|
2659
2704
|
),
|
|
2660
|
-
/* @__PURE__ */
|
|
2661
|
-
/* @__PURE__ */
|
|
2705
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
|
|
2706
|
+
/* @__PURE__ */ jsxs23("h2", { className: "text-base font-semibold text-[hsl(var(--foreground))]", children: [
|
|
2662
2707
|
MONTHS2[month],
|
|
2663
2708
|
" ",
|
|
2664
2709
|
year
|
|
2665
2710
|
] }),
|
|
2666
|
-
/* @__PURE__ */
|
|
2711
|
+
/* @__PURE__ */ jsx95(
|
|
2667
2712
|
"button",
|
|
2668
2713
|
{
|
|
2669
2714
|
onClick: handleToday,
|
|
@@ -2672,23 +2717,23 @@ var DateTimePicker = ({
|
|
|
2672
2717
|
}
|
|
2673
2718
|
)
|
|
2674
2719
|
] }),
|
|
2675
|
-
/* @__PURE__ */
|
|
2720
|
+
/* @__PURE__ */ jsx95(
|
|
2676
2721
|
"button",
|
|
2677
2722
|
{
|
|
2678
2723
|
onClick: handleNextMonth,
|
|
2679
2724
|
className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
|
|
2680
2725
|
"aria-label": "Next month",
|
|
2681
|
-
children: /* @__PURE__ */
|
|
2726
|
+
children: /* @__PURE__ */ jsx95("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx95("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
|
|
2682
2727
|
}
|
|
2683
2728
|
)
|
|
2684
2729
|
] }),
|
|
2685
|
-
/* @__PURE__ */
|
|
2686
|
-
/* @__PURE__ */
|
|
2730
|
+
/* @__PURE__ */ jsx95("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS2.map((day) => /* @__PURE__ */ jsx95("div", { className: "text-center text-xs font-semibold text-[hsl(var(--muted-foreground))] py-1", children: day }, day)) }),
|
|
2731
|
+
/* @__PURE__ */ jsx95("div", { className: "grid grid-cols-7 gap-1 mb-4", children: calendarDays.map((date, index) => {
|
|
2687
2732
|
const isCurrentMonthDay = isCurrentMonth(date);
|
|
2688
2733
|
const isTodayDay = isToday(date);
|
|
2689
2734
|
const isSelectedDay = isSelected(date);
|
|
2690
2735
|
const isDisabledDay = isDisabled(date);
|
|
2691
|
-
return /* @__PURE__ */
|
|
2736
|
+
return /* @__PURE__ */ jsx95(
|
|
2692
2737
|
"button",
|
|
2693
2738
|
{
|
|
2694
2739
|
onClick: () => handleDateClick(date),
|
|
@@ -2706,21 +2751,21 @@ var DateTimePicker = ({
|
|
|
2706
2751
|
index
|
|
2707
2752
|
);
|
|
2708
2753
|
}) }),
|
|
2709
|
-
/* @__PURE__ */
|
|
2710
|
-
/* @__PURE__ */
|
|
2711
|
-
/* @__PURE__ */
|
|
2712
|
-
/* @__PURE__ */
|
|
2713
|
-
/* @__PURE__ */
|
|
2714
|
-
/* @__PURE__ */
|
|
2754
|
+
/* @__PURE__ */ jsxs23("div", { className: "border-t border-[hsl(var(--border))] pt-4", children: [
|
|
2755
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-center gap-4 mb-4", children: [
|
|
2756
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center", children: [
|
|
2757
|
+
/* @__PURE__ */ jsx95("label", { className: "text-xs font-semibold text-[hsl(var(--muted-foreground))] mb-2", children: "Hour" }),
|
|
2758
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center gap-1", children: [
|
|
2759
|
+
/* @__PURE__ */ jsx95(
|
|
2715
2760
|
"button",
|
|
2716
2761
|
{
|
|
2717
2762
|
type: "button",
|
|
2718
2763
|
onClick: () => handleTimeChange((selectedTime.hours + 1) % 24, selectedTime.minutes),
|
|
2719
2764
|
className: "p-1 hover:bg-[hsl(var(--accent))] rounded transition-colors",
|
|
2720
|
-
children: /* @__PURE__ */
|
|
2765
|
+
children: /* @__PURE__ */ jsx95("svg", { className: "w-4 h-4 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx95("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
|
|
2721
2766
|
}
|
|
2722
2767
|
),
|
|
2723
|
-
/* @__PURE__ */
|
|
2768
|
+
/* @__PURE__ */ jsx95(
|
|
2724
2769
|
"input",
|
|
2725
2770
|
{
|
|
2726
2771
|
type: "number",
|
|
@@ -2736,31 +2781,31 @@ var DateTimePicker = ({
|
|
|
2736
2781
|
className: "w-16 px-2 py-2 text-center border border-[hsl(var(--input))] rounded-md bg-transparent text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
2737
2782
|
}
|
|
2738
2783
|
),
|
|
2739
|
-
/* @__PURE__ */
|
|
2784
|
+
/* @__PURE__ */ jsx95(
|
|
2740
2785
|
"button",
|
|
2741
2786
|
{
|
|
2742
2787
|
type: "button",
|
|
2743
2788
|
onClick: () => handleTimeChange((selectedTime.hours - 1 + 24) % 24, selectedTime.minutes),
|
|
2744
2789
|
className: "p-1 hover:bg-[hsl(var(--accent))] rounded transition-colors",
|
|
2745
|
-
children: /* @__PURE__ */
|
|
2790
|
+
children: /* @__PURE__ */ jsx95("svg", { className: "w-4 h-4 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx95("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
|
|
2746
2791
|
}
|
|
2747
2792
|
)
|
|
2748
2793
|
] })
|
|
2749
2794
|
] }),
|
|
2750
|
-
/* @__PURE__ */
|
|
2751
|
-
/* @__PURE__ */
|
|
2752
|
-
/* @__PURE__ */
|
|
2753
|
-
/* @__PURE__ */
|
|
2754
|
-
/* @__PURE__ */
|
|
2795
|
+
/* @__PURE__ */ jsx95("span", { className: "text-2xl font-bold text-[hsl(var(--muted-foreground))] mt-8", children: ":" }),
|
|
2796
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center", children: [
|
|
2797
|
+
/* @__PURE__ */ jsx95("label", { className: "text-xs font-semibold text-[hsl(var(--muted-foreground))] mb-2", children: "Minute" }),
|
|
2798
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center gap-1", children: [
|
|
2799
|
+
/* @__PURE__ */ jsx95(
|
|
2755
2800
|
"button",
|
|
2756
2801
|
{
|
|
2757
2802
|
type: "button",
|
|
2758
2803
|
onClick: () => handleTimeChange(selectedTime.hours, (selectedTime.minutes + 1) % 60),
|
|
2759
2804
|
className: "p-1 hover:bg-[hsl(var(--accent))] rounded transition-colors",
|
|
2760
|
-
children: /* @__PURE__ */
|
|
2805
|
+
children: /* @__PURE__ */ jsx95("svg", { className: "w-4 h-4 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx95("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
|
|
2761
2806
|
}
|
|
2762
2807
|
),
|
|
2763
|
-
/* @__PURE__ */
|
|
2808
|
+
/* @__PURE__ */ jsx95(
|
|
2764
2809
|
"input",
|
|
2765
2810
|
{
|
|
2766
2811
|
type: "number",
|
|
@@ -2776,20 +2821,20 @@ var DateTimePicker = ({
|
|
|
2776
2821
|
className: "w-16 px-2 py-2 text-center border border-[hsl(var(--input))] rounded-md bg-transparent text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
2777
2822
|
}
|
|
2778
2823
|
),
|
|
2779
|
-
/* @__PURE__ */
|
|
2824
|
+
/* @__PURE__ */ jsx95(
|
|
2780
2825
|
"button",
|
|
2781
2826
|
{
|
|
2782
2827
|
type: "button",
|
|
2783
2828
|
onClick: () => handleTimeChange(selectedTime.hours, (selectedTime.minutes - 1 + 60) % 60),
|
|
2784
2829
|
className: "p-1 hover:bg-[hsl(var(--accent))] rounded transition-colors",
|
|
2785
|
-
children: /* @__PURE__ */
|
|
2830
|
+
children: /* @__PURE__ */ jsx95("svg", { className: "w-4 h-4 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx95("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
|
|
2786
2831
|
}
|
|
2787
2832
|
)
|
|
2788
2833
|
] })
|
|
2789
2834
|
] })
|
|
2790
2835
|
] }),
|
|
2791
|
-
/* @__PURE__ */
|
|
2792
|
-
/* @__PURE__ */
|
|
2836
|
+
/* @__PURE__ */ jsx95("div", { className: "text-center text-sm text-[hsl(var(--muted-foreground))] mb-4", children: formatTime(selectedTime.hours, selectedTime.minutes) }),
|
|
2837
|
+
/* @__PURE__ */ jsx95(
|
|
2793
2838
|
"button",
|
|
2794
2839
|
{
|
|
2795
2840
|
onClick: handleDone,
|
|
@@ -2801,22 +2846,22 @@ var DateTimePicker = ({
|
|
|
2801
2846
|
]
|
|
2802
2847
|
}
|
|
2803
2848
|
) : null;
|
|
2804
|
-
return /* @__PURE__ */
|
|
2805
|
-
label && /* @__PURE__ */
|
|
2806
|
-
/* @__PURE__ */
|
|
2849
|
+
return /* @__PURE__ */ jsxs23("div", { className, children: [
|
|
2850
|
+
label && /* @__PURE__ */ jsx95("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
|
|
2851
|
+
/* @__PURE__ */ jsxs23(
|
|
2807
2852
|
"div",
|
|
2808
2853
|
{
|
|
2809
2854
|
ref: inputRef,
|
|
2810
2855
|
onClick: () => !disabled && setIsOpen(!isOpen),
|
|
2811
2856
|
className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
|
|
2812
2857
|
children: [
|
|
2813
|
-
/* @__PURE__ */
|
|
2814
|
-
/* @__PURE__ */
|
|
2858
|
+
/* @__PURE__ */ jsx95("span", { className: !value ? "text-[hsl(var(--muted-foreground))]" : "", children: value ? formatDateTime(value) : placeholder }),
|
|
2859
|
+
/* @__PURE__ */ jsx95("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx95("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
|
|
2815
2860
|
]
|
|
2816
2861
|
}
|
|
2817
2862
|
),
|
|
2818
|
-
error && /* @__PURE__ */
|
|
2819
|
-
helperText && !error && /* @__PURE__ */
|
|
2863
|
+
error && /* @__PURE__ */ jsx95("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
|
|
2864
|
+
helperText && !error && /* @__PURE__ */ jsx95("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
|
|
2820
2865
|
mounted && createPortal3(picker, document.body)
|
|
2821
2866
|
] });
|
|
2822
2867
|
};
|
|
@@ -2824,7 +2869,7 @@ DateTimePicker.displayName = "DateTimePicker";
|
|
|
2824
2869
|
|
|
2825
2870
|
// src/components/Calendar.tsx
|
|
2826
2871
|
import { useState as useState10 } from "react";
|
|
2827
|
-
import { jsx as
|
|
2872
|
+
import { jsx as jsx96, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2828
2873
|
var DAYS3 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
2829
2874
|
var MONTHS3 = [
|
|
2830
2875
|
"January",
|
|
@@ -2899,24 +2944,24 @@ var Calendar = ({
|
|
|
2899
2944
|
setCurrentDate(today);
|
|
2900
2945
|
onChange?.(today);
|
|
2901
2946
|
};
|
|
2902
|
-
return /* @__PURE__ */
|
|
2903
|
-
/* @__PURE__ */
|
|
2904
|
-
/* @__PURE__ */
|
|
2947
|
+
return /* @__PURE__ */ jsxs24("div", { className: `bg-[hsl(var(--card))] rounded-md border border-[hsl(var(--border))] p-4 ${className}`, children: [
|
|
2948
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-4", children: [
|
|
2949
|
+
/* @__PURE__ */ jsx96(
|
|
2905
2950
|
"button",
|
|
2906
2951
|
{
|
|
2907
2952
|
onClick: handlePrevMonth,
|
|
2908
2953
|
className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
|
|
2909
2954
|
"aria-label": "Previous month",
|
|
2910
|
-
children: /* @__PURE__ */
|
|
2955
|
+
children: /* @__PURE__ */ jsx96("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx96("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
|
|
2911
2956
|
}
|
|
2912
2957
|
),
|
|
2913
|
-
/* @__PURE__ */
|
|
2914
|
-
/* @__PURE__ */
|
|
2958
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
|
|
2959
|
+
/* @__PURE__ */ jsxs24("h2", { className: "text-lg font-semibold text-[hsl(var(--foreground))]", children: [
|
|
2915
2960
|
MONTHS3[month],
|
|
2916
2961
|
" ",
|
|
2917
2962
|
year
|
|
2918
2963
|
] }),
|
|
2919
|
-
/* @__PURE__ */
|
|
2964
|
+
/* @__PURE__ */ jsx96(
|
|
2920
2965
|
"button",
|
|
2921
2966
|
{
|
|
2922
2967
|
onClick: handleToday,
|
|
@@ -2925,17 +2970,17 @@ var Calendar = ({
|
|
|
2925
2970
|
}
|
|
2926
2971
|
)
|
|
2927
2972
|
] }),
|
|
2928
|
-
/* @__PURE__ */
|
|
2973
|
+
/* @__PURE__ */ jsx96(
|
|
2929
2974
|
"button",
|
|
2930
2975
|
{
|
|
2931
2976
|
onClick: handleNextMonth,
|
|
2932
2977
|
className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
|
|
2933
2978
|
"aria-label": "Next month",
|
|
2934
|
-
children: /* @__PURE__ */
|
|
2979
|
+
children: /* @__PURE__ */ jsx96("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx96("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
|
|
2935
2980
|
}
|
|
2936
2981
|
)
|
|
2937
2982
|
] }),
|
|
2938
|
-
/* @__PURE__ */
|
|
2983
|
+
/* @__PURE__ */ jsx96("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS3.map((day) => /* @__PURE__ */ jsx96(
|
|
2939
2984
|
"div",
|
|
2940
2985
|
{
|
|
2941
2986
|
className: "text-center text-xs font-semibold text-[hsl(var(--muted-foreground))] py-2",
|
|
@@ -2943,13 +2988,13 @@ var Calendar = ({
|
|
|
2943
2988
|
},
|
|
2944
2989
|
day
|
|
2945
2990
|
)) }),
|
|
2946
|
-
/* @__PURE__ */
|
|
2947
|
-
if (!date) return /* @__PURE__ */
|
|
2991
|
+
/* @__PURE__ */ jsx96("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
|
|
2992
|
+
if (!date) return /* @__PURE__ */ jsx96("div", {}, index);
|
|
2948
2993
|
const isCurrentMonthDay = isCurrentMonth(date);
|
|
2949
2994
|
const isTodayDay = isToday(date);
|
|
2950
2995
|
const isSelectedDay = isSelected(date);
|
|
2951
2996
|
const isDisabledDay = isDisabled(date);
|
|
2952
|
-
return /* @__PURE__ */
|
|
2997
|
+
return /* @__PURE__ */ jsx96(
|
|
2953
2998
|
"button",
|
|
2954
2999
|
{
|
|
2955
3000
|
onClick: () => handleDateClick(date),
|
|
@@ -2971,8 +3016,8 @@ var Calendar = ({
|
|
|
2971
3016
|
};
|
|
2972
3017
|
|
|
2973
3018
|
// src/components/Radio.tsx
|
|
2974
|
-
import
|
|
2975
|
-
import { jsx as
|
|
3019
|
+
import React18 from "react";
|
|
3020
|
+
import { jsx as jsx97, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2976
3021
|
var Radio = ({
|
|
2977
3022
|
name,
|
|
2978
3023
|
options,
|
|
@@ -2983,7 +3028,7 @@ var Radio = ({
|
|
|
2983
3028
|
orientation = "vertical",
|
|
2984
3029
|
className = ""
|
|
2985
3030
|
}) => {
|
|
2986
|
-
const [internalValue, setInternalValue] =
|
|
3031
|
+
const [internalValue, setInternalValue] = React18.useState(defaultValue || "");
|
|
2987
3032
|
const value = controlledValue !== void 0 ? controlledValue : internalValue;
|
|
2988
3033
|
const handleChange = (optionValue) => {
|
|
2989
3034
|
if (disabled) return;
|
|
@@ -2991,18 +3036,18 @@ var Radio = ({
|
|
|
2991
3036
|
onChange?.(optionValue);
|
|
2992
3037
|
};
|
|
2993
3038
|
const containerClass = orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-2";
|
|
2994
|
-
return /* @__PURE__ */
|
|
3039
|
+
return /* @__PURE__ */ jsx97("div", { className: `${containerClass} ${className}`, role: "radiogroup", children: options.map((option) => {
|
|
2995
3040
|
const isDisabled = disabled || option.disabled;
|
|
2996
3041
|
const isChecked = value === option.value;
|
|
2997
3042
|
const id = `${name}-${option.value}`;
|
|
2998
|
-
return /* @__PURE__ */
|
|
3043
|
+
return /* @__PURE__ */ jsxs25(
|
|
2999
3044
|
"label",
|
|
3000
3045
|
{
|
|
3001
3046
|
htmlFor: id,
|
|
3002
3047
|
className: `flex items-center gap-2 cursor-pointer group ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
|
|
3003
3048
|
children: [
|
|
3004
|
-
/* @__PURE__ */
|
|
3005
|
-
/* @__PURE__ */
|
|
3049
|
+
/* @__PURE__ */ jsxs25("div", { className: "relative inline-flex items-center", children: [
|
|
3050
|
+
/* @__PURE__ */ jsx97(
|
|
3006
3051
|
"input",
|
|
3007
3052
|
{
|
|
3008
3053
|
type: "radio",
|
|
@@ -3015,14 +3060,14 @@ var Radio = ({
|
|
|
3015
3060
|
className: "sr-only peer"
|
|
3016
3061
|
}
|
|
3017
3062
|
),
|
|
3018
|
-
/* @__PURE__ */
|
|
3063
|
+
/* @__PURE__ */ jsx97("div", { className: `w-4 h-4 rounded-full border-2 transition-all duration-200 flex items-center justify-center
|
|
3019
3064
|
border-[hsl(var(--input))]
|
|
3020
3065
|
${isDisabled ? "bg-[hsl(var(--muted))]" : "peer-hover:border-[hsl(var(--ring))]"}
|
|
3021
3066
|
${isChecked ? "border-[hsl(var(--primary))] bg-[hsl(var(--background))]" : ""}
|
|
3022
3067
|
peer-focus:ring-1 peer-focus:ring-[hsl(var(--ring))]/50
|
|
3023
|
-
`, children: /* @__PURE__ */
|
|
3068
|
+
`, children: /* @__PURE__ */ jsx97("div", { className: `w-2 h-2 rounded-full bg-[hsl(var(--primary))] transition-all duration-200 ${isChecked ? "scale-100" : "scale-0"}` }) })
|
|
3024
3069
|
] }),
|
|
3025
|
-
/* @__PURE__ */
|
|
3070
|
+
/* @__PURE__ */ jsx97("span", { className: `text-sm font-medium text-[hsl(var(--foreground))] ${!isDisabled && "group-hover:text-[hsl(var(--foreground))]"}`, children: option.label })
|
|
3026
3071
|
]
|
|
3027
3072
|
},
|
|
3028
3073
|
option.value
|
|
@@ -3031,7 +3076,7 @@ var Radio = ({
|
|
|
3031
3076
|
};
|
|
3032
3077
|
|
|
3033
3078
|
// src/components/ProgressBar.tsx
|
|
3034
|
-
import { jsx as
|
|
3079
|
+
import { jsx as jsx98, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3035
3080
|
var ProgressBar = ({
|
|
3036
3081
|
value,
|
|
3037
3082
|
max = 100,
|
|
@@ -3053,15 +3098,15 @@ var ProgressBar = ({
|
|
|
3053
3098
|
warning: "bg-[hsl(var(--warning))]",
|
|
3054
3099
|
danger: "bg-[hsl(var(--destructive))]"
|
|
3055
3100
|
};
|
|
3056
|
-
return /* @__PURE__ */
|
|
3057
|
-
(showLabel || label) && /* @__PURE__ */
|
|
3058
|
-
label && /* @__PURE__ */
|
|
3059
|
-
showLabel && /* @__PURE__ */
|
|
3101
|
+
return /* @__PURE__ */ jsxs26("div", { className: `w-full ${className}`, children: [
|
|
3102
|
+
(showLabel || label) && /* @__PURE__ */ jsxs26("div", { className: "flex justify-between items-center mb-1", children: [
|
|
3103
|
+
label && /* @__PURE__ */ jsx98("span", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
|
|
3104
|
+
showLabel && /* @__PURE__ */ jsxs26("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
|
|
3060
3105
|
Math.round(percentage),
|
|
3061
3106
|
"%"
|
|
3062
3107
|
] })
|
|
3063
3108
|
] }),
|
|
3064
|
-
/* @__PURE__ */
|
|
3109
|
+
/* @__PURE__ */ jsx98(
|
|
3065
3110
|
"div",
|
|
3066
3111
|
{
|
|
3067
3112
|
className: `w-full bg-[hsl(var(--muted))] rounded-full overflow-hidden ${sizeClasses7[size]}`,
|
|
@@ -3069,7 +3114,7 @@ var ProgressBar = ({
|
|
|
3069
3114
|
"aria-valuenow": value,
|
|
3070
3115
|
"aria-valuemin": 0,
|
|
3071
3116
|
"aria-valuemax": max,
|
|
3072
|
-
children: /* @__PURE__ */
|
|
3117
|
+
children: /* @__PURE__ */ jsx98(
|
|
3073
3118
|
"div",
|
|
3074
3119
|
{
|
|
3075
3120
|
className: `${sizeClasses7[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
|
|
@@ -3082,8 +3127,8 @@ var ProgressBar = ({
|
|
|
3082
3127
|
};
|
|
3083
3128
|
|
|
3084
3129
|
// src/components/Slider.tsx
|
|
3085
|
-
import
|
|
3086
|
-
import { jsx as
|
|
3130
|
+
import React19, { useRef as useRef6 } from "react";
|
|
3131
|
+
import { jsx as jsx99, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3087
3132
|
var Slider = ({
|
|
3088
3133
|
value: controlledValue,
|
|
3089
3134
|
defaultValue = 50,
|
|
@@ -3100,10 +3145,10 @@ var Slider = ({
|
|
|
3100
3145
|
defaultRangeValue = [25, 75],
|
|
3101
3146
|
onRangeChange
|
|
3102
3147
|
}) => {
|
|
3103
|
-
const [internalValue, setInternalValue] =
|
|
3104
|
-
const [internalRangeValue, setInternalRangeValue] =
|
|
3148
|
+
const [internalValue, setInternalValue] = React19.useState(defaultValue);
|
|
3149
|
+
const [internalRangeValue, setInternalRangeValue] = React19.useState(defaultRangeValue);
|
|
3105
3150
|
const trackRef = useRef6(null);
|
|
3106
|
-
const [isDragging, setIsDragging] =
|
|
3151
|
+
const [isDragging, setIsDragging] = React19.useState(null);
|
|
3107
3152
|
const value = controlledValue !== void 0 ? controlledValue : internalValue;
|
|
3108
3153
|
const rangeValue = controlledRangeValue !== void 0 ? controlledRangeValue : internalRangeValue;
|
|
3109
3154
|
const handleChange = (e) => {
|
|
@@ -3151,7 +3196,7 @@ var Slider = ({
|
|
|
3151
3196
|
const handleRangeEnd = () => {
|
|
3152
3197
|
setIsDragging(null);
|
|
3153
3198
|
};
|
|
3154
|
-
|
|
3199
|
+
React19.useEffect(() => {
|
|
3155
3200
|
if (isDragging) {
|
|
3156
3201
|
document.addEventListener("mousemove", handleRangeMouseMove);
|
|
3157
3202
|
document.addEventListener("mouseup", handleRangeEnd);
|
|
@@ -3169,18 +3214,18 @@ var Slider = ({
|
|
|
3169
3214
|
const minPercentage = (rangeValue[0] - min) / (max - min) * 100;
|
|
3170
3215
|
const maxPercentage = (rangeValue[1] - min) / (max - min) * 100;
|
|
3171
3216
|
if (range) {
|
|
3172
|
-
return /* @__PURE__ */
|
|
3173
|
-
(label || showValue) && /* @__PURE__ */
|
|
3174
|
-
label && /* @__PURE__ */
|
|
3175
|
-
showValue && /* @__PURE__ */
|
|
3217
|
+
return /* @__PURE__ */ jsxs27("div", { className: `w-full ${className}`, children: [
|
|
3218
|
+
(label || showValue) && /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center mb-2", children: [
|
|
3219
|
+
label && /* @__PURE__ */ jsx99("label", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
|
|
3220
|
+
showValue && /* @__PURE__ */ jsxs27("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
|
|
3176
3221
|
rangeValue[0],
|
|
3177
3222
|
" - ",
|
|
3178
3223
|
rangeValue[1]
|
|
3179
3224
|
] })
|
|
3180
3225
|
] }),
|
|
3181
|
-
/* @__PURE__ */
|
|
3182
|
-
/* @__PURE__ */
|
|
3183
|
-
/* @__PURE__ */
|
|
3226
|
+
/* @__PURE__ */ jsxs27("div", { className: "relative h-10 flex items-center", ref: trackRef, children: [
|
|
3227
|
+
/* @__PURE__ */ jsx99("div", { className: "absolute w-full h-2 bg-[hsl(var(--muted))] rounded-full" }),
|
|
3228
|
+
/* @__PURE__ */ jsx99(
|
|
3184
3229
|
"div",
|
|
3185
3230
|
{
|
|
3186
3231
|
className: "absolute h-2 bg-[hsl(var(--primary))] rounded-full pointer-events-none",
|
|
@@ -3190,7 +3235,7 @@ var Slider = ({
|
|
|
3190
3235
|
}
|
|
3191
3236
|
}
|
|
3192
3237
|
),
|
|
3193
|
-
/* @__PURE__ */
|
|
3238
|
+
/* @__PURE__ */ jsx99(
|
|
3194
3239
|
"div",
|
|
3195
3240
|
{
|
|
3196
3241
|
className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md cursor-pointer z-10
|
|
@@ -3207,7 +3252,7 @@ var Slider = ({
|
|
|
3207
3252
|
tabIndex: disabled ? -1 : 0
|
|
3208
3253
|
}
|
|
3209
3254
|
),
|
|
3210
|
-
/* @__PURE__ */
|
|
3255
|
+
/* @__PURE__ */ jsx99(
|
|
3211
3256
|
"div",
|
|
3212
3257
|
{
|
|
3213
3258
|
className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md cursor-pointer z-10
|
|
@@ -3227,21 +3272,21 @@ var Slider = ({
|
|
|
3227
3272
|
] })
|
|
3228
3273
|
] });
|
|
3229
3274
|
}
|
|
3230
|
-
return /* @__PURE__ */
|
|
3231
|
-
(label || showValue) && /* @__PURE__ */
|
|
3232
|
-
label && /* @__PURE__ */
|
|
3233
|
-
showValue && /* @__PURE__ */
|
|
3275
|
+
return /* @__PURE__ */ jsxs27("div", { className: `w-full ${className}`, children: [
|
|
3276
|
+
(label || showValue) && /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center mb-2", children: [
|
|
3277
|
+
label && /* @__PURE__ */ jsx99("label", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
|
|
3278
|
+
showValue && /* @__PURE__ */ jsx99("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: value })
|
|
3234
3279
|
] }),
|
|
3235
|
-
/* @__PURE__ */
|
|
3236
|
-
/* @__PURE__ */
|
|
3237
|
-
/* @__PURE__ */
|
|
3280
|
+
/* @__PURE__ */ jsxs27("div", { className: "relative h-10 flex items-center", children: [
|
|
3281
|
+
/* @__PURE__ */ jsx99("div", { className: "absolute w-full h-2 bg-[hsl(var(--muted))] rounded-full" }),
|
|
3282
|
+
/* @__PURE__ */ jsx99(
|
|
3238
3283
|
"div",
|
|
3239
3284
|
{
|
|
3240
3285
|
className: "absolute h-2 bg-[hsl(var(--primary))] rounded-full pointer-events-none",
|
|
3241
3286
|
style: { width: `${percentage}%` }
|
|
3242
3287
|
}
|
|
3243
3288
|
),
|
|
3244
|
-
/* @__PURE__ */
|
|
3289
|
+
/* @__PURE__ */ jsx99(
|
|
3245
3290
|
"div",
|
|
3246
3291
|
{
|
|
3247
3292
|
className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md pointer-events-none z-10
|
|
@@ -3250,7 +3295,7 @@ var Slider = ({
|
|
|
3250
3295
|
style: { left: `${percentage}%` }
|
|
3251
3296
|
}
|
|
3252
3297
|
),
|
|
3253
|
-
/* @__PURE__ */
|
|
3298
|
+
/* @__PURE__ */ jsx99(
|
|
3254
3299
|
"input",
|
|
3255
3300
|
{
|
|
3256
3301
|
type: "range",
|
|
@@ -3272,8 +3317,8 @@ var Slider = ({
|
|
|
3272
3317
|
};
|
|
3273
3318
|
|
|
3274
3319
|
// src/components/Avatar.tsx
|
|
3275
|
-
import
|
|
3276
|
-
import { jsx as
|
|
3320
|
+
import React20 from "react";
|
|
3321
|
+
import { jsx as jsx100 } from "react/jsx-runtime";
|
|
3277
3322
|
var Avatar = ({
|
|
3278
3323
|
src,
|
|
3279
3324
|
alt,
|
|
@@ -3283,7 +3328,7 @@ var Avatar = ({
|
|
|
3283
3328
|
className = "",
|
|
3284
3329
|
fallbackColor = "bg-[hsl(var(--primary))]"
|
|
3285
3330
|
}) => {
|
|
3286
|
-
const [imageError, setImageError] =
|
|
3331
|
+
const [imageError, setImageError] = React20.useState(false);
|
|
3287
3332
|
const sizeClasses7 = {
|
|
3288
3333
|
xs: "w-6 h-6 text-xs",
|
|
3289
3334
|
sm: "w-8 h-8 text-sm",
|
|
@@ -3301,11 +3346,11 @@ var Avatar = ({
|
|
|
3301
3346
|
};
|
|
3302
3347
|
const showImage = src && !imageError;
|
|
3303
3348
|
const showInitials = !showImage && name;
|
|
3304
|
-
return /* @__PURE__ */
|
|
3349
|
+
return /* @__PURE__ */ jsx100(
|
|
3305
3350
|
"div",
|
|
3306
3351
|
{
|
|
3307
3352
|
className: `${sizeClasses7[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-[hsl(var(--muted))]" : `${fallbackColor} text-white`} ${className}`,
|
|
3308
|
-
children: showImage ? /* @__PURE__ */
|
|
3353
|
+
children: showImage ? /* @__PURE__ */ jsx100(
|
|
3309
3354
|
"img",
|
|
3310
3355
|
{
|
|
3311
3356
|
src,
|
|
@@ -3313,13 +3358,13 @@ var Avatar = ({
|
|
|
3313
3358
|
className: "w-full h-full object-cover",
|
|
3314
3359
|
onError: () => setImageError(true)
|
|
3315
3360
|
}
|
|
3316
|
-
) : showInitials ? /* @__PURE__ */
|
|
3361
|
+
) : showInitials ? /* @__PURE__ */ jsx100("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx100(
|
|
3317
3362
|
"svg",
|
|
3318
3363
|
{
|
|
3319
3364
|
className: "w-full h-full text-[hsl(var(--muted-foreground))]",
|
|
3320
3365
|
fill: "currentColor",
|
|
3321
3366
|
viewBox: "0 0 24 24",
|
|
3322
|
-
children: /* @__PURE__ */
|
|
3367
|
+
children: /* @__PURE__ */ jsx100("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
|
|
3323
3368
|
}
|
|
3324
3369
|
)
|
|
3325
3370
|
}
|
|
@@ -3327,7 +3372,7 @@ var Avatar = ({
|
|
|
3327
3372
|
};
|
|
3328
3373
|
|
|
3329
3374
|
// src/components/Textarea.tsx
|
|
3330
|
-
import { jsx as
|
|
3375
|
+
import { jsx as jsx101, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3331
3376
|
var Textarea = ({
|
|
3332
3377
|
label,
|
|
3333
3378
|
error,
|
|
@@ -3354,9 +3399,9 @@ var Textarea = ({
|
|
|
3354
3399
|
bg-transparent text-[hsl(var(--foreground))]
|
|
3355
3400
|
placeholder:text-[hsl(var(--muted-foreground))]
|
|
3356
3401
|
disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[hsl(var(--muted))]`;
|
|
3357
|
-
return /* @__PURE__ */
|
|
3358
|
-
label && /* @__PURE__ */
|
|
3359
|
-
/* @__PURE__ */
|
|
3402
|
+
return /* @__PURE__ */ jsxs28("div", { className: `w-full ${className}`, children: [
|
|
3403
|
+
label && /* @__PURE__ */ jsx101("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
|
|
3404
|
+
/* @__PURE__ */ jsx101(
|
|
3360
3405
|
"textarea",
|
|
3361
3406
|
{
|
|
3362
3407
|
className: `${baseClasses} ${sizeClasses7[size]} ${resizeClasses[resize]}`,
|
|
@@ -3364,14 +3409,14 @@ var Textarea = ({
|
|
|
3364
3409
|
...props
|
|
3365
3410
|
}
|
|
3366
3411
|
),
|
|
3367
|
-
error && /* @__PURE__ */
|
|
3368
|
-
helperText && !error && /* @__PURE__ */
|
|
3412
|
+
error && /* @__PURE__ */ jsx101("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
|
|
3413
|
+
helperText && !error && /* @__PURE__ */ jsx101("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
|
|
3369
3414
|
] });
|
|
3370
3415
|
};
|
|
3371
3416
|
|
|
3372
3417
|
// src/components/RichTextEditor.tsx
|
|
3373
3418
|
import { useRef as useRef7, useCallback, useState as useState12, useEffect as useEffect8, useLayoutEffect } from "react";
|
|
3374
|
-
import { jsx as
|
|
3419
|
+
import { jsx as jsx102, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3375
3420
|
var RichTextEditor = ({
|
|
3376
3421
|
value = "",
|
|
3377
3422
|
onChange,
|
|
@@ -3701,11 +3746,11 @@ var RichTextEditor = ({
|
|
|
3701
3746
|
const editorBaseClass = themeName === "minimalistic" ? "bg-transparent border-2 border-white text-white placeholder:text-[hsl(var(--muted-foreground))]" : "bg-[hsl(var(--card))] border border-[hsl(var(--input))] text-[hsl(var(--foreground))]";
|
|
3702
3747
|
const focusClass = isFocused && !disabled ? themeName === "minimalistic" ? "border-white" : "border-[hsl(var(--primary))] ring-1 ring-[hsl(var(--ring))]/50" : "";
|
|
3703
3748
|
const errorClass = error ? "border-red-500 dark:border-red-400" : "";
|
|
3704
|
-
return /* @__PURE__ */
|
|
3705
|
-
label && /* @__PURE__ */
|
|
3706
|
-
/* @__PURE__ */
|
|
3707
|
-
/* @__PURE__ */
|
|
3708
|
-
/* @__PURE__ */
|
|
3749
|
+
return /* @__PURE__ */ jsxs29("div", { className: `w-full ${className}`, children: [
|
|
3750
|
+
label && /* @__PURE__ */ jsx102("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
|
|
3751
|
+
/* @__PURE__ */ jsxs29("div", { className: `rounded-t-lg border-b ${editorBaseClass} p-2 flex flex-wrap gap-1`, children: [
|
|
3752
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex gap-1", children: [
|
|
3753
|
+
/* @__PURE__ */ jsx102(
|
|
3709
3754
|
"button",
|
|
3710
3755
|
{
|
|
3711
3756
|
type: "button",
|
|
@@ -3713,10 +3758,10 @@ var RichTextEditor = ({
|
|
|
3713
3758
|
className: getButtonClass(activeFormats.has("bold")),
|
|
3714
3759
|
disabled,
|
|
3715
3760
|
title: "Bold (Ctrl+B)",
|
|
3716
|
-
children: /* @__PURE__ */
|
|
3761
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("path", { d: "M12.78 4c1.09 0 2.04.38 2.84 1.14.8.76 1.2 1.74 1.2 2.94 0 .9-.25 1.68-.76 2.36-.51.68-1.2 1.14-2.04 1.38v.08c1.06.22 1.89.7 2.48 1.44.59.74.88 1.64.88 2.7 0 1.34-.47 2.43-1.41 3.27C14.96 19.77 13.74 20 12.24 20H4V4h8.78zm-.66 7.14c.62 0 1.12-.18 1.5-.54.38-.36.57-.84.57-1.44 0-.6-.19-1.08-.57-1.44-.38-.36-.88-.54-1.5-.54H7.5v3.96h4.62zm.24 6.86c.68 0 1.24-.19 1.68-.57.44-.38.66-.9.66-1.56 0-.66-.22-1.18-.66-1.56-.44-.38-1-.57-1.68-.57H7.5v4.26h4.86z" }) })
|
|
3717
3762
|
}
|
|
3718
3763
|
),
|
|
3719
|
-
/* @__PURE__ */
|
|
3764
|
+
/* @__PURE__ */ jsx102(
|
|
3720
3765
|
"button",
|
|
3721
3766
|
{
|
|
3722
3767
|
type: "button",
|
|
@@ -3724,10 +3769,10 @@ var RichTextEditor = ({
|
|
|
3724
3769
|
className: getButtonClass(activeFormats.has("italic")),
|
|
3725
3770
|
disabled,
|
|
3726
3771
|
title: "Italic (Ctrl+I)",
|
|
3727
|
-
children: /* @__PURE__ */
|
|
3772
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("path", { d: "M11.59 4H16v2h-1.71l-3.58 8H13v2H8v-2h1.71l3.58-8H11.59V4z" }) })
|
|
3728
3773
|
}
|
|
3729
3774
|
),
|
|
3730
|
-
/* @__PURE__ */
|
|
3775
|
+
/* @__PURE__ */ jsx102(
|
|
3731
3776
|
"button",
|
|
3732
3777
|
{
|
|
3733
3778
|
type: "button",
|
|
@@ -3735,10 +3780,10 @@ var RichTextEditor = ({
|
|
|
3735
3780
|
className: getButtonClass(activeFormats.has("underline")),
|
|
3736
3781
|
disabled,
|
|
3737
3782
|
title: "Underline (Ctrl+U)",
|
|
3738
|
-
children: /* @__PURE__ */
|
|
3783
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("path", { d: "M10 16c-2.21 0-4-1.79-4-4V4h2v8c0 1.1.9 2 2 2s2-.9 2-2V4h2v8c0 2.21-1.79 4-4 4zM4 18h12v2H4v-2z" }) })
|
|
3739
3784
|
}
|
|
3740
3785
|
),
|
|
3741
|
-
/* @__PURE__ */
|
|
3786
|
+
/* @__PURE__ */ jsx102(
|
|
3742
3787
|
"button",
|
|
3743
3788
|
{
|
|
3744
3789
|
type: "button",
|
|
@@ -3746,13 +3791,13 @@ var RichTextEditor = ({
|
|
|
3746
3791
|
className: getButtonClass(activeFormats.has("strikeThrough")),
|
|
3747
3792
|
disabled,
|
|
3748
3793
|
title: "Strikethrough",
|
|
3749
|
-
children: /* @__PURE__ */
|
|
3794
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("path", { d: "M10 4c-2 0-3.5.5-4.5 1.5S4 7.5 4 9h2c0-.7.2-1.2.6-1.6.4-.4 1-.6 1.9-.6.8 0 1.4.2 1.8.5.4.3.7.8.7 1.4 0 .5-.2.9-.5 1.2-.3.3-.9.6-1.8.9l-.7.2c-1.2.3-2.1.7-2.7 1.2C4.2 12.7 4 13.5 4 14.5c0 1.1.4 2 1.1 2.6.7.6 1.7.9 3 .9 2.1 0 3.6-.5 4.6-1.5.9-1 1.3-2.3 1.3-3.8h-2c0 .9-.2 1.6-.7 2.1-.5.5-1.2.7-2.2.7-.8 0-1.4-.2-1.8-.5-.4-.3-.6-.8-.6-1.4 0-.5.2-.9.5-1.2.3-.3.9-.6 1.8-.9l.7-.2c1.2-.3 2.1-.7 2.7-1.2.6-.5.9-1.3.9-2.3 0-1.2-.4-2.1-1.2-2.8-.8-.7-1.9-1-3.3-1zM2 10h16v1H2v-1z" }) })
|
|
3750
3795
|
}
|
|
3751
3796
|
)
|
|
3752
3797
|
] }),
|
|
3753
|
-
/* @__PURE__ */
|
|
3754
|
-
/* @__PURE__ */
|
|
3755
|
-
/* @__PURE__ */
|
|
3798
|
+
/* @__PURE__ */ jsx102("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
|
|
3799
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex gap-1", children: [
|
|
3800
|
+
/* @__PURE__ */ jsx102(
|
|
3756
3801
|
"button",
|
|
3757
3802
|
{
|
|
3758
3803
|
type: "button",
|
|
@@ -3760,10 +3805,10 @@ var RichTextEditor = ({
|
|
|
3760
3805
|
className: getButtonClass(activeFormats.has("h1")),
|
|
3761
3806
|
disabled,
|
|
3762
3807
|
title: "Heading 1",
|
|
3763
|
-
children: /* @__PURE__ */
|
|
3808
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H1" }) })
|
|
3764
3809
|
}
|
|
3765
3810
|
),
|
|
3766
|
-
/* @__PURE__ */
|
|
3811
|
+
/* @__PURE__ */ jsx102(
|
|
3767
3812
|
"button",
|
|
3768
3813
|
{
|
|
3769
3814
|
type: "button",
|
|
@@ -3771,10 +3816,10 @@ var RichTextEditor = ({
|
|
|
3771
3816
|
className: getButtonClass(activeFormats.has("h2")),
|
|
3772
3817
|
disabled,
|
|
3773
3818
|
title: "Heading 2",
|
|
3774
|
-
children: /* @__PURE__ */
|
|
3819
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H2" }) })
|
|
3775
3820
|
}
|
|
3776
3821
|
),
|
|
3777
|
-
/* @__PURE__ */
|
|
3822
|
+
/* @__PURE__ */ jsx102(
|
|
3778
3823
|
"button",
|
|
3779
3824
|
{
|
|
3780
3825
|
type: "button",
|
|
@@ -3782,13 +3827,13 @@ var RichTextEditor = ({
|
|
|
3782
3827
|
className: getButtonClass(activeFormats.has("h3")),
|
|
3783
3828
|
disabled,
|
|
3784
3829
|
title: "Heading 3",
|
|
3785
|
-
children: /* @__PURE__ */
|
|
3830
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H3" }) })
|
|
3786
3831
|
}
|
|
3787
3832
|
)
|
|
3788
3833
|
] }),
|
|
3789
|
-
/* @__PURE__ */
|
|
3790
|
-
/* @__PURE__ */
|
|
3791
|
-
/* @__PURE__ */
|
|
3834
|
+
/* @__PURE__ */ jsx102("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
|
|
3835
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex gap-1", children: [
|
|
3836
|
+
/* @__PURE__ */ jsx102(
|
|
3792
3837
|
"button",
|
|
3793
3838
|
{
|
|
3794
3839
|
type: "button",
|
|
@@ -3796,10 +3841,10 @@ var RichTextEditor = ({
|
|
|
3796
3841
|
className: getButtonClass(activeFormats.has("ul")),
|
|
3797
3842
|
disabled,
|
|
3798
3843
|
title: "Bullet List",
|
|
3799
|
-
children: /* @__PURE__ */
|
|
3844
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("path", { d: "M4 4h2v2H4V4zm4 0h8v2H8V4zM4 8h2v2H4V8zm4 0h8v2H8V8zm-4 4h2v2H4v-2zm4 0h8v2H8v-2zm-4 4h2v2H4v-2zm4 0h8v2H8v-2z" }) })
|
|
3800
3845
|
}
|
|
3801
3846
|
),
|
|
3802
|
-
/* @__PURE__ */
|
|
3847
|
+
/* @__PURE__ */ jsx102(
|
|
3803
3848
|
"button",
|
|
3804
3849
|
{
|
|
3805
3850
|
type: "button",
|
|
@@ -3807,13 +3852,13 @@ var RichTextEditor = ({
|
|
|
3807
3852
|
className: getButtonClass(activeFormats.has("ol")),
|
|
3808
3853
|
disabled,
|
|
3809
3854
|
title: "Numbered List",
|
|
3810
|
-
children: /* @__PURE__ */
|
|
3855
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx102("path", { d: "M4 4h1v3H4V4zm0 4h1v1H3V8h2v1H4zm1 2H3v1h2v1H3v1h2v-3zM8 4h8v2H8V4zm0 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h8v2H8v-2z" }) })
|
|
3811
3856
|
}
|
|
3812
3857
|
)
|
|
3813
3858
|
] }),
|
|
3814
|
-
/* @__PURE__ */
|
|
3815
|
-
/* @__PURE__ */
|
|
3816
|
-
/* @__PURE__ */
|
|
3859
|
+
/* @__PURE__ */ jsx102("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
|
|
3860
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex gap-1", children: [
|
|
3861
|
+
/* @__PURE__ */ jsx102(
|
|
3817
3862
|
"button",
|
|
3818
3863
|
{
|
|
3819
3864
|
type: "button",
|
|
@@ -3821,10 +3866,10 @@ var RichTextEditor = ({
|
|
|
3821
3866
|
className: getButtonClass(false),
|
|
3822
3867
|
disabled,
|
|
3823
3868
|
title: "Insert Link",
|
|
3824
|
-
children: /* @__PURE__ */
|
|
3869
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx102("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) })
|
|
3825
3870
|
}
|
|
3826
3871
|
),
|
|
3827
|
-
/* @__PURE__ */
|
|
3872
|
+
/* @__PURE__ */ jsx102(
|
|
3828
3873
|
"button",
|
|
3829
3874
|
{
|
|
3830
3875
|
type: "button",
|
|
@@ -3832,10 +3877,10 @@ var RichTextEditor = ({
|
|
|
3832
3877
|
className: getButtonClass(false),
|
|
3833
3878
|
disabled,
|
|
3834
3879
|
title: "Insert Image/Video",
|
|
3835
|
-
children: /* @__PURE__ */
|
|
3880
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx102("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
|
|
3836
3881
|
}
|
|
3837
3882
|
),
|
|
3838
|
-
/* @__PURE__ */
|
|
3883
|
+
/* @__PURE__ */ jsx102(
|
|
3839
3884
|
"button",
|
|
3840
3885
|
{
|
|
3841
3886
|
type: "button",
|
|
@@ -3843,12 +3888,12 @@ var RichTextEditor = ({
|
|
|
3843
3888
|
className: getButtonClass(false),
|
|
3844
3889
|
disabled,
|
|
3845
3890
|
title: "Code",
|
|
3846
|
-
children: /* @__PURE__ */
|
|
3891
|
+
children: /* @__PURE__ */ jsx102("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx102("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) })
|
|
3847
3892
|
}
|
|
3848
3893
|
)
|
|
3849
3894
|
] })
|
|
3850
3895
|
] }),
|
|
3851
|
-
/* @__PURE__ */
|
|
3896
|
+
/* @__PURE__ */ jsx102(
|
|
3852
3897
|
"div",
|
|
3853
3898
|
{
|
|
3854
3899
|
ref: editorRef,
|
|
@@ -3872,9 +3917,9 @@ var RichTextEditor = ({
|
|
|
3872
3917
|
suppressContentEditableWarning: true
|
|
3873
3918
|
}
|
|
3874
3919
|
),
|
|
3875
|
-
error && /* @__PURE__ */
|
|
3876
|
-
helperText && !error && /* @__PURE__ */
|
|
3877
|
-
/* @__PURE__ */
|
|
3920
|
+
error && /* @__PURE__ */ jsx102("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
|
|
3921
|
+
helperText && !error && /* @__PURE__ */ jsx102("p", { className: "mt-1 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
|
|
3922
|
+
/* @__PURE__ */ jsx102(
|
|
3878
3923
|
Modal,
|
|
3879
3924
|
{
|
|
3880
3925
|
isOpen: showLinkModal,
|
|
@@ -3884,8 +3929,8 @@ var RichTextEditor = ({
|
|
|
3884
3929
|
},
|
|
3885
3930
|
title: "Insert Link",
|
|
3886
3931
|
size: "sm",
|
|
3887
|
-
children: /* @__PURE__ */
|
|
3888
|
-
/* @__PURE__ */
|
|
3932
|
+
children: /* @__PURE__ */ jsxs29("div", { className: "space-y-4", children: [
|
|
3933
|
+
/* @__PURE__ */ jsx102(
|
|
3889
3934
|
TextInput,
|
|
3890
3935
|
{
|
|
3891
3936
|
label: "URL",
|
|
@@ -3901,8 +3946,8 @@ var RichTextEditor = ({
|
|
|
3901
3946
|
}
|
|
3902
3947
|
}
|
|
3903
3948
|
),
|
|
3904
|
-
/* @__PURE__ */
|
|
3905
|
-
/* @__PURE__ */
|
|
3949
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex gap-2 justify-end", children: [
|
|
3950
|
+
/* @__PURE__ */ jsx102(
|
|
3906
3951
|
Button,
|
|
3907
3952
|
{
|
|
3908
3953
|
variant: "secondary",
|
|
@@ -3913,7 +3958,7 @@ var RichTextEditor = ({
|
|
|
3913
3958
|
children: "Cancel"
|
|
3914
3959
|
}
|
|
3915
3960
|
),
|
|
3916
|
-
/* @__PURE__ */
|
|
3961
|
+
/* @__PURE__ */ jsx102(
|
|
3917
3962
|
Button,
|
|
3918
3963
|
{
|
|
3919
3964
|
variant: "primary",
|
|
@@ -3926,7 +3971,7 @@ var RichTextEditor = ({
|
|
|
3926
3971
|
] })
|
|
3927
3972
|
}
|
|
3928
3973
|
),
|
|
3929
|
-
/* @__PURE__ */
|
|
3974
|
+
/* @__PURE__ */ jsx102(
|
|
3930
3975
|
Modal,
|
|
3931
3976
|
{
|
|
3932
3977
|
isOpen: showImageModal,
|
|
@@ -3937,8 +3982,8 @@ var RichTextEditor = ({
|
|
|
3937
3982
|
},
|
|
3938
3983
|
title: "Insert Image",
|
|
3939
3984
|
size: "sm",
|
|
3940
|
-
children: /* @__PURE__ */
|
|
3941
|
-
/* @__PURE__ */
|
|
3985
|
+
children: /* @__PURE__ */ jsxs29("div", { className: "space-y-4", children: [
|
|
3986
|
+
/* @__PURE__ */ jsx102(
|
|
3942
3987
|
TextInput,
|
|
3943
3988
|
{
|
|
3944
3989
|
label: "Image URL",
|
|
@@ -3954,7 +3999,7 @@ var RichTextEditor = ({
|
|
|
3954
3999
|
}
|
|
3955
4000
|
}
|
|
3956
4001
|
),
|
|
3957
|
-
/* @__PURE__ */
|
|
4002
|
+
/* @__PURE__ */ jsx102(
|
|
3958
4003
|
TextInput,
|
|
3959
4004
|
{
|
|
3960
4005
|
label: "Alt Text (optional)",
|
|
@@ -3963,8 +4008,8 @@ var RichTextEditor = ({
|
|
|
3963
4008
|
placeholder: "Describe the image"
|
|
3964
4009
|
}
|
|
3965
4010
|
),
|
|
3966
|
-
/* @__PURE__ */
|
|
3967
|
-
/* @__PURE__ */
|
|
4011
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex gap-2 justify-end", children: [
|
|
4012
|
+
/* @__PURE__ */ jsx102(
|
|
3968
4013
|
Button,
|
|
3969
4014
|
{
|
|
3970
4015
|
variant: "secondary",
|
|
@@ -3976,7 +4021,7 @@ var RichTextEditor = ({
|
|
|
3976
4021
|
children: "Cancel"
|
|
3977
4022
|
}
|
|
3978
4023
|
),
|
|
3979
|
-
/* @__PURE__ */
|
|
4024
|
+
/* @__PURE__ */ jsx102(
|
|
3980
4025
|
Button,
|
|
3981
4026
|
{
|
|
3982
4027
|
variant: "primary",
|
|
@@ -3994,7 +4039,7 @@ var RichTextEditor = ({
|
|
|
3994
4039
|
|
|
3995
4040
|
// src/components/Toast.tsx
|
|
3996
4041
|
import { createContext as createContext4, useContext as useContext4, useState as useState13, useCallback as useCallback2 } from "react";
|
|
3997
|
-
import { jsx as
|
|
4042
|
+
import { jsx as jsx103, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3998
4043
|
var ToastContext = createContext4(void 0);
|
|
3999
4044
|
var useToast = () => {
|
|
4000
4045
|
const context = useContext4(ToastContext);
|
|
@@ -4025,9 +4070,9 @@ var ToastProvider = ({ children, position = "top-right" }) => {
|
|
|
4025
4070
|
"top-center": "top-4 left-1/2 -translate-x-1/2",
|
|
4026
4071
|
"bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
|
|
4027
4072
|
};
|
|
4028
|
-
return /* @__PURE__ */
|
|
4073
|
+
return /* @__PURE__ */ jsxs30(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
|
|
4029
4074
|
children,
|
|
4030
|
-
/* @__PURE__ */
|
|
4075
|
+
/* @__PURE__ */ jsx103("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ jsx103(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
|
|
4031
4076
|
] });
|
|
4032
4077
|
};
|
|
4033
4078
|
var ToastItem = ({ toast: toast2, onClose }) => {
|
|
@@ -4038,27 +4083,27 @@ var ToastItem = ({ toast: toast2, onClose }) => {
|
|
|
4038
4083
|
info: "bg-[hsl(var(--info))]/10 border-[hsl(var(--info))] text-[hsl(var(--info))]"
|
|
4039
4084
|
};
|
|
4040
4085
|
const typeIcons = {
|
|
4041
|
-
success: /* @__PURE__ */
|
|
4042
|
-
error: /* @__PURE__ */
|
|
4043
|
-
warning: /* @__PURE__ */
|
|
4044
|
-
info: /* @__PURE__ */
|
|
4086
|
+
success: /* @__PURE__ */ jsx103(CheckIcon, { size: "sm", className: "text-[hsl(var(--success))]" }),
|
|
4087
|
+
error: /* @__PURE__ */ jsx103(CloseIcon, { size: "sm", className: "text-[hsl(var(--destructive))]" }),
|
|
4088
|
+
warning: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4 text-[hsl(var(--warning))]", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
|
|
4089
|
+
info: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4 text-[hsl(var(--info))]", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
|
|
4045
4090
|
};
|
|
4046
4091
|
const type = toast2.type || "info";
|
|
4047
|
-
return /* @__PURE__ */
|
|
4092
|
+
return /* @__PURE__ */ jsxs30(
|
|
4048
4093
|
"div",
|
|
4049
4094
|
{
|
|
4050
4095
|
className: `flex items-start gap-3 p-4 rounded-md border-l-4 shadow-lg bg-[hsl(var(--card))] ${typeStyles[type]} animate-slide-in`,
|
|
4051
4096
|
role: "alert",
|
|
4052
4097
|
children: [
|
|
4053
|
-
/* @__PURE__ */
|
|
4054
|
-
/* @__PURE__ */
|
|
4055
|
-
/* @__PURE__ */
|
|
4098
|
+
/* @__PURE__ */ jsx103("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
|
|
4099
|
+
/* @__PURE__ */ jsx103("p", { className: "flex-1 text-sm font-medium text-[hsl(var(--foreground))]", children: toast2.message }),
|
|
4100
|
+
/* @__PURE__ */ jsx103(
|
|
4056
4101
|
"button",
|
|
4057
4102
|
{
|
|
4058
4103
|
onClick: onClose,
|
|
4059
4104
|
className: "flex-shrink-0 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
|
|
4060
4105
|
"aria-label": "Close",
|
|
4061
|
-
children: /* @__PURE__ */
|
|
4106
|
+
children: /* @__PURE__ */ jsx103(CloseIcon, { size: "sm" })
|
|
4062
4107
|
}
|
|
4063
4108
|
)
|
|
4064
4109
|
]
|
|
@@ -4089,8 +4134,8 @@ var toast = {
|
|
|
4089
4134
|
};
|
|
4090
4135
|
|
|
4091
4136
|
// src/components/Stepper.tsx
|
|
4092
|
-
import
|
|
4093
|
-
import { jsx as
|
|
4137
|
+
import React23 from "react";
|
|
4138
|
+
import { jsx as jsx104, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
4094
4139
|
var Stepper = ({
|
|
4095
4140
|
steps,
|
|
4096
4141
|
currentStep,
|
|
@@ -4110,8 +4155,8 @@ var Stepper = ({
|
|
|
4110
4155
|
return { mobile: mobileVisible, desktop: desktopVisible };
|
|
4111
4156
|
};
|
|
4112
4157
|
const shouldShowCounter = isHorizontal && steps.length > 3;
|
|
4113
|
-
return /* @__PURE__ */
|
|
4114
|
-
shouldShowCounter && /* @__PURE__ */
|
|
4158
|
+
return /* @__PURE__ */ jsxs31("div", { className: `${isHorizontal ? "flex items-start w-full" : "flex flex-col"} ${className}`, children: [
|
|
4159
|
+
shouldShowCounter && /* @__PURE__ */ jsx104("div", { className: "md:hidden flex items-center mr-4 flex-shrink-0", children: /* @__PURE__ */ jsxs31("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
|
|
4115
4160
|
currentStep,
|
|
4116
4161
|
"/",
|
|
4117
4162
|
steps.length
|
|
@@ -4124,19 +4169,19 @@ var Stepper = ({
|
|
|
4124
4169
|
const visibility = getStepVisibility(index);
|
|
4125
4170
|
const visibleMobileSteps = steps.filter((_, i) => getStepVisibility(i).mobile);
|
|
4126
4171
|
const isLastVisibleMobile = index === steps.map((_, i) => i).filter((i) => getStepVisibility(i).mobile).slice(-1)[0];
|
|
4127
|
-
return /* @__PURE__ */
|
|
4128
|
-
/* @__PURE__ */
|
|
4172
|
+
return /* @__PURE__ */ jsxs31(React23.Fragment, { children: [
|
|
4173
|
+
/* @__PURE__ */ jsxs31("div", { className: `
|
|
4129
4174
|
flex ${isHorizontal ? "flex-col items-center flex-shrink-0" : "flex-row items-start"}
|
|
4130
4175
|
${isHorizontal ? "" : isLast ? "" : "mb-6"}
|
|
4131
4176
|
${!visibility.mobile ? "hidden md:flex" : ""}
|
|
4132
4177
|
${!visibility.desktop && visibility.mobile ? "md:hidden" : ""}
|
|
4133
4178
|
`, children: [
|
|
4134
|
-
/* @__PURE__ */
|
|
4135
|
-
/* @__PURE__ */
|
|
4179
|
+
/* @__PURE__ */ jsxs31("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-col items-center flex-shrink-0"}`, children: [
|
|
4180
|
+
/* @__PURE__ */ jsx104(
|
|
4136
4181
|
"div",
|
|
4137
4182
|
{
|
|
4138
4183
|
className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-[hsl(var(--primary))] border-[hsl(var(--primary))]" : isActive ? "border-[hsl(var(--primary))] bg-[hsl(var(--background))]" : "border-[hsl(var(--border))] bg-[hsl(var(--background))]"}`,
|
|
4139
|
-
children: isCompleted ? /* @__PURE__ */
|
|
4184
|
+
children: isCompleted ? /* @__PURE__ */ jsx104(CheckIcon, { size: "sm", className: "text-[hsl(var(--primary-foreground))]" }) : /* @__PURE__ */ jsx104(
|
|
4140
4185
|
"span",
|
|
4141
4186
|
{
|
|
4142
4187
|
className: `text-sm font-semibold ${isActive ? "text-[hsl(var(--primary))]" : "text-[hsl(var(--muted-foreground))]"}`,
|
|
@@ -4145,29 +4190,29 @@ var Stepper = ({
|
|
|
4145
4190
|
)
|
|
4146
4191
|
}
|
|
4147
4192
|
),
|
|
4148
|
-
!isLast && !isHorizontal && /* @__PURE__ */
|
|
4193
|
+
!isLast && !isHorizontal && /* @__PURE__ */ jsx104(
|
|
4149
4194
|
"div",
|
|
4150
4195
|
{
|
|
4151
4196
|
className: `w-0.5 flex-1 min-h-[24px] ${isCompleted ? "bg-[hsl(var(--primary))]" : "bg-[hsl(var(--border))]"}`
|
|
4152
4197
|
}
|
|
4153
4198
|
)
|
|
4154
4199
|
] }),
|
|
4155
|
-
/* @__PURE__ */
|
|
4156
|
-
/* @__PURE__ */
|
|
4200
|
+
/* @__PURE__ */ jsxs31("div", { className: `${isHorizontal ? "mt-3 text-center" : "ml-4 flex-1 min-h-[40px] flex flex-col justify-center"}`, children: [
|
|
4201
|
+
/* @__PURE__ */ jsx104(
|
|
4157
4202
|
"p",
|
|
4158
4203
|
{
|
|
4159
4204
|
className: `text-sm font-medium whitespace-nowrap ${isActive || isCompleted ? "text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))]"}`,
|
|
4160
4205
|
children: step.label
|
|
4161
4206
|
}
|
|
4162
4207
|
),
|
|
4163
|
-
step.description && /* @__PURE__ */
|
|
4208
|
+
step.description && /* @__PURE__ */ jsx104("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1 whitespace-nowrap", children: step.description })
|
|
4164
4209
|
] })
|
|
4165
4210
|
] }),
|
|
4166
|
-
!isLast && isHorizontal && /* @__PURE__ */
|
|
4211
|
+
!isLast && isHorizontal && /* @__PURE__ */ jsx104("div", { className: `
|
|
4167
4212
|
flex items-start pt-5 mx-4 min-w-[80px] max-w-[200px] flex-1
|
|
4168
4213
|
${!visibility.mobile || isLastVisibleMobile ? "hidden md:flex" : ""}
|
|
4169
4214
|
${!visibility.desktop && visibility.mobile ? "md:hidden" : ""}
|
|
4170
|
-
`, children: /* @__PURE__ */
|
|
4215
|
+
`, children: /* @__PURE__ */ jsx104(
|
|
4171
4216
|
"div",
|
|
4172
4217
|
{
|
|
4173
4218
|
className: `h-0.5 w-full ${isCompleted ? "bg-[hsl(var(--primary))]" : "bg-[hsl(var(--border))]"}`
|
|
@@ -4179,7 +4224,7 @@ var Stepper = ({
|
|
|
4179
4224
|
};
|
|
4180
4225
|
|
|
4181
4226
|
// src/components/Divider.tsx
|
|
4182
|
-
import { jsx as
|
|
4227
|
+
import { jsx as jsx105, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
4183
4228
|
var Divider = ({
|
|
4184
4229
|
orientation = "horizontal",
|
|
4185
4230
|
variant = "solid",
|
|
@@ -4198,14 +4243,14 @@ var Divider = ({
|
|
|
4198
4243
|
center: "justify-center",
|
|
4199
4244
|
right: "justify-end"
|
|
4200
4245
|
};
|
|
4201
|
-
return /* @__PURE__ */
|
|
4202
|
-
labelPosition !== "left" && /* @__PURE__ */
|
|
4203
|
-
/* @__PURE__ */
|
|
4204
|
-
labelPosition !== "right" && /* @__PURE__ */
|
|
4246
|
+
return /* @__PURE__ */ jsxs32("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
|
|
4247
|
+
labelPosition !== "left" && /* @__PURE__ */ jsx105("div", { className: `flex-1 border-t ${variantClasses[variant]} border-[hsl(var(--input))]` }),
|
|
4248
|
+
/* @__PURE__ */ jsx105("span", { className: "px-4 text-sm text-[hsl(var(--muted-foreground))]", children: label }),
|
|
4249
|
+
labelPosition !== "right" && /* @__PURE__ */ jsx105("div", { className: `flex-1 border-t ${variantClasses[variant]} border-[hsl(var(--input))]` })
|
|
4205
4250
|
] });
|
|
4206
4251
|
}
|
|
4207
4252
|
if (orientation === "vertical") {
|
|
4208
|
-
return /* @__PURE__ */
|
|
4253
|
+
return /* @__PURE__ */ jsx105(
|
|
4209
4254
|
"div",
|
|
4210
4255
|
{
|
|
4211
4256
|
className: `inline-block h-full border-l ${variantClasses[variant]} border-[hsl(var(--input))] ${className}`,
|
|
@@ -4214,7 +4259,7 @@ var Divider = ({
|
|
|
4214
4259
|
}
|
|
4215
4260
|
);
|
|
4216
4261
|
}
|
|
4217
|
-
return /* @__PURE__ */
|
|
4262
|
+
return /* @__PURE__ */ jsx105(
|
|
4218
4263
|
"hr",
|
|
4219
4264
|
{
|
|
4220
4265
|
className: `border-t ${variantClasses[variant]} border-[hsl(var(--input))] ${className}`,
|
|
@@ -4225,7 +4270,7 @@ var Divider = ({
|
|
|
4225
4270
|
|
|
4226
4271
|
// src/components/FileUpload.tsx
|
|
4227
4272
|
import { useRef as useRef8, useState as useState14 } from "react";
|
|
4228
|
-
import { jsx as
|
|
4273
|
+
import { jsx as jsx106, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
4229
4274
|
var FileUpload = ({
|
|
4230
4275
|
accept,
|
|
4231
4276
|
multiple = false,
|
|
@@ -4298,9 +4343,9 @@ var FileUpload = ({
|
|
|
4298
4343
|
setFiles(newFiles);
|
|
4299
4344
|
onChange?.(newFiles);
|
|
4300
4345
|
};
|
|
4301
|
-
return /* @__PURE__ */
|
|
4302
|
-
label && /* @__PURE__ */
|
|
4303
|
-
/* @__PURE__ */
|
|
4346
|
+
return /* @__PURE__ */ jsxs33("div", { className: `w-full ${className}`, children: [
|
|
4347
|
+
label && /* @__PURE__ */ jsx106("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
|
|
4348
|
+
/* @__PURE__ */ jsxs33(
|
|
4304
4349
|
"div",
|
|
4305
4350
|
{
|
|
4306
4351
|
onDrop: handleDrop,
|
|
@@ -4309,7 +4354,7 @@ var FileUpload = ({
|
|
|
4309
4354
|
onClick: handleClick,
|
|
4310
4355
|
className: `relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${isDragging ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]/10" : "border-[hsl(var(--input))] hover:border-[hsl(var(--muted-foreground))]"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
|
|
4311
4356
|
children: [
|
|
4312
|
-
/* @__PURE__ */
|
|
4357
|
+
/* @__PURE__ */ jsx106(
|
|
4313
4358
|
"input",
|
|
4314
4359
|
{
|
|
4315
4360
|
ref: fileInputRef,
|
|
@@ -4321,14 +4366,14 @@ var FileUpload = ({
|
|
|
4321
4366
|
className: "hidden"
|
|
4322
4367
|
}
|
|
4323
4368
|
),
|
|
4324
|
-
/* @__PURE__ */
|
|
4325
|
-
/* @__PURE__ */
|
|
4326
|
-
/* @__PURE__ */
|
|
4327
|
-
/* @__PURE__ */
|
|
4328
|
-
/* @__PURE__ */
|
|
4369
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex flex-col items-center gap-2", children: [
|
|
4370
|
+
/* @__PURE__ */ jsx106("div", { className: "w-12 h-12 rounded-full bg-[hsl(var(--muted))] flex items-center justify-center", children: /* @__PURE__ */ jsx106(UploadIcon, { size: "lg", className: "text-[hsl(var(--muted-foreground))]" }) }),
|
|
4371
|
+
/* @__PURE__ */ jsxs33("div", { children: [
|
|
4372
|
+
/* @__PURE__ */ jsxs33("p", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: [
|
|
4373
|
+
/* @__PURE__ */ jsx106("span", { className: "text-[hsl(var(--primary))]", children: "Click to upload" }),
|
|
4329
4374
|
" or drag and drop"
|
|
4330
4375
|
] }),
|
|
4331
|
-
/* @__PURE__ */
|
|
4376
|
+
/* @__PURE__ */ jsxs33("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1", children: [
|
|
4332
4377
|
accept ? `Accepted: ${accept}` : "Any file type",
|
|
4333
4378
|
maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`
|
|
4334
4379
|
] })
|
|
@@ -4337,17 +4382,17 @@ var FileUpload = ({
|
|
|
4337
4382
|
]
|
|
4338
4383
|
}
|
|
4339
4384
|
),
|
|
4340
|
-
helperText && /* @__PURE__ */
|
|
4341
|
-
files.length > 0 && /* @__PURE__ */
|
|
4385
|
+
helperText && /* @__PURE__ */ jsx106("p", { className: "mt-2 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
|
|
4386
|
+
files.length > 0 && /* @__PURE__ */ jsx106("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ jsxs33(
|
|
4342
4387
|
"div",
|
|
4343
4388
|
{
|
|
4344
4389
|
className: "flex items-center justify-between p-3 bg-[hsl(var(--muted))] rounded-lg border border-[hsl(var(--border))]",
|
|
4345
4390
|
children: [
|
|
4346
|
-
/* @__PURE__ */
|
|
4347
|
-
/* @__PURE__ */
|
|
4348
|
-
/* @__PURE__ */
|
|
4391
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex-1 min-w-0", children: [
|
|
4392
|
+
/* @__PURE__ */ jsx106("p", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: file.name }),
|
|
4393
|
+
/* @__PURE__ */ jsx106("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: formatFileSize(file.size) })
|
|
4349
4394
|
] }),
|
|
4350
|
-
/* @__PURE__ */
|
|
4395
|
+
/* @__PURE__ */ jsx106(
|
|
4351
4396
|
"button",
|
|
4352
4397
|
{
|
|
4353
4398
|
onClick: (e) => {
|
|
@@ -4356,7 +4401,7 @@ var FileUpload = ({
|
|
|
4356
4401
|
},
|
|
4357
4402
|
className: "ml-4 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors",
|
|
4358
4403
|
"aria-label": "Remove file",
|
|
4359
|
-
children: /* @__PURE__ */
|
|
4404
|
+
children: /* @__PURE__ */ jsx106(CloseIcon, { size: "sm" })
|
|
4360
4405
|
}
|
|
4361
4406
|
)
|
|
4362
4407
|
]
|
|
@@ -4368,7 +4413,7 @@ var FileUpload = ({
|
|
|
4368
4413
|
|
|
4369
4414
|
// src/components/AudioPlayer.tsx
|
|
4370
4415
|
import { useRef as useRef9, useState as useState15, useEffect as useEffect9 } from "react";
|
|
4371
|
-
import { jsx as
|
|
4416
|
+
import { jsx as jsx107, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
4372
4417
|
var AudioPlayer = ({
|
|
4373
4418
|
src,
|
|
4374
4419
|
title,
|
|
@@ -4553,9 +4598,9 @@ var AudioPlayer = ({
|
|
|
4553
4598
|
};
|
|
4554
4599
|
const progress = duration > 0 ? currentTime / duration * 100 : 0;
|
|
4555
4600
|
if (variant === "mini") {
|
|
4556
|
-
return /* @__PURE__ */
|
|
4557
|
-
/* @__PURE__ */
|
|
4558
|
-
/* @__PURE__ */
|
|
4601
|
+
return /* @__PURE__ */ jsxs34("div", { className: `flex items-center gap-2 p-2 bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] ${className}`, children: [
|
|
4602
|
+
/* @__PURE__ */ jsx107("audio", { ref: audioRef, src, preload, loop, autoPlay }),
|
|
4603
|
+
/* @__PURE__ */ jsx107(
|
|
4559
4604
|
Button,
|
|
4560
4605
|
{
|
|
4561
4606
|
iconOnly: true,
|
|
@@ -4564,16 +4609,16 @@ var AudioPlayer = ({
|
|
|
4564
4609
|
onClick: togglePlayPause,
|
|
4565
4610
|
disabled: isLoading,
|
|
4566
4611
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
4567
|
-
children: isPlaying ? /* @__PURE__ */
|
|
4612
|
+
children: isPlaying ? /* @__PURE__ */ jsx107(PauseIcon, { size: "sm" }) : /* @__PURE__ */ jsx107(PlayIcon, { size: "sm" })
|
|
4568
4613
|
}
|
|
4569
4614
|
),
|
|
4570
|
-
title && /* @__PURE__ */
|
|
4615
|
+
title && /* @__PURE__ */ jsx107("span", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title })
|
|
4571
4616
|
] });
|
|
4572
4617
|
}
|
|
4573
4618
|
if (variant === "compact") {
|
|
4574
|
-
return /* @__PURE__ */
|
|
4575
|
-
/* @__PURE__ */
|
|
4576
|
-
/* @__PURE__ */
|
|
4619
|
+
return /* @__PURE__ */ jsxs34("div", { className: `flex items-center gap-3 p-3 bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-sm ${className}`, children: [
|
|
4620
|
+
/* @__PURE__ */ jsx107("audio", { ref: audioRef, src, preload, loop, autoPlay }),
|
|
4621
|
+
/* @__PURE__ */ jsx107(
|
|
4577
4622
|
Button,
|
|
4578
4623
|
{
|
|
4579
4624
|
iconOnly: true,
|
|
@@ -4582,17 +4627,17 @@ var AudioPlayer = ({
|
|
|
4582
4627
|
onClick: togglePlayPause,
|
|
4583
4628
|
disabled: isLoading,
|
|
4584
4629
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
4585
|
-
children: isPlaying ? /* @__PURE__ */
|
|
4630
|
+
children: isPlaying ? /* @__PURE__ */ jsx107(PauseIcon, { size: "md" }) : /* @__PURE__ */ jsx107(PlayIcon, { size: "md" })
|
|
4586
4631
|
}
|
|
4587
4632
|
),
|
|
4588
|
-
/* @__PURE__ */
|
|
4589
|
-
title && /* @__PURE__ */
|
|
4590
|
-
artist && /* @__PURE__ */
|
|
4633
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex-1 min-w-0", children: [
|
|
4634
|
+
title && /* @__PURE__ */ jsx107("div", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title }),
|
|
4635
|
+
artist && /* @__PURE__ */ jsx107("div", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: artist })
|
|
4591
4636
|
] }),
|
|
4592
|
-
/* @__PURE__ */
|
|
4593
|
-
/* @__PURE__ */
|
|
4594
|
-
/* @__PURE__ */
|
|
4595
|
-
/* @__PURE__ */
|
|
4637
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 flex-1", children: [
|
|
4638
|
+
/* @__PURE__ */ jsx107("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(currentTime) }),
|
|
4639
|
+
/* @__PURE__ */ jsxs34("div", { className: "relative flex-1 h-1.5 bg-[hsl(var(--muted))] rounded-full overflow-visible", children: [
|
|
4640
|
+
/* @__PURE__ */ jsx107(
|
|
4596
4641
|
"div",
|
|
4597
4642
|
{
|
|
4598
4643
|
className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
|
|
@@ -4601,7 +4646,7 @@ var AudioPlayer = ({
|
|
|
4601
4646
|
),
|
|
4602
4647
|
showChapters && chapters.length > 0 && chapters.map((chapter, index) => {
|
|
4603
4648
|
const markerPosition = duration > 0 ? chapter.startTime / duration * 100 : 0;
|
|
4604
|
-
return /* @__PURE__ */
|
|
4649
|
+
return /* @__PURE__ */ jsx107(
|
|
4605
4650
|
"div",
|
|
4606
4651
|
{
|
|
4607
4652
|
className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-[hsl(var(--background))] opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
|
|
@@ -4617,7 +4662,7 @@ var AudioPlayer = ({
|
|
|
4617
4662
|
index
|
|
4618
4663
|
);
|
|
4619
4664
|
}),
|
|
4620
|
-
/* @__PURE__ */
|
|
4665
|
+
/* @__PURE__ */ jsx107(
|
|
4621
4666
|
"input",
|
|
4622
4667
|
{
|
|
4623
4668
|
type: "range",
|
|
@@ -4631,23 +4676,23 @@ var AudioPlayer = ({
|
|
|
4631
4676
|
}
|
|
4632
4677
|
)
|
|
4633
4678
|
] }),
|
|
4634
|
-
/* @__PURE__ */
|
|
4635
|
-
currentChapter && showChapters && /* @__PURE__ */
|
|
4679
|
+
/* @__PURE__ */ jsx107("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(duration) }),
|
|
4680
|
+
currentChapter && showChapters && /* @__PURE__ */ jsxs34("span", { className: "text-xs text-[hsl(var(--primary))] font-medium truncate max-w-[120px]", children: [
|
|
4636
4681
|
"\u2022 ",
|
|
4637
4682
|
currentChapter.title
|
|
4638
4683
|
] })
|
|
4639
4684
|
] }),
|
|
4640
|
-
/* @__PURE__ */
|
|
4641
|
-
/* @__PURE__ */
|
|
4685
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
|
|
4686
|
+
/* @__PURE__ */ jsx107(
|
|
4642
4687
|
"button",
|
|
4643
4688
|
{
|
|
4644
4689
|
onClick: toggleMute,
|
|
4645
4690
|
className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]",
|
|
4646
4691
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
4647
|
-
children: isMuted ? /* @__PURE__ */
|
|
4692
|
+
children: isMuted ? /* @__PURE__ */ jsx107(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx107(VolumeUpIcon, { size: "sm" })
|
|
4648
4693
|
}
|
|
4649
4694
|
),
|
|
4650
|
-
/* @__PURE__ */
|
|
4695
|
+
/* @__PURE__ */ jsx107(
|
|
4651
4696
|
"input",
|
|
4652
4697
|
{
|
|
4653
4698
|
type: "range",
|
|
@@ -4661,24 +4706,24 @@ var AudioPlayer = ({
|
|
|
4661
4706
|
}
|
|
4662
4707
|
)
|
|
4663
4708
|
] }),
|
|
4664
|
-
hoveredChapter && showChapters && /* @__PURE__ */
|
|
4709
|
+
hoveredChapter && showChapters && /* @__PURE__ */ jsxs34(
|
|
4665
4710
|
"div",
|
|
4666
4711
|
{
|
|
4667
4712
|
className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
|
|
4668
4713
|
style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
|
|
4669
4714
|
children: [
|
|
4670
|
-
/* @__PURE__ */
|
|
4671
|
-
/* @__PURE__ */
|
|
4672
|
-
/* @__PURE__ */
|
|
4715
|
+
/* @__PURE__ */ jsx107("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
|
|
4716
|
+
/* @__PURE__ */ jsx107("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
|
|
4717
|
+
/* @__PURE__ */ jsx107("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
|
|
4673
4718
|
]
|
|
4674
4719
|
}
|
|
4675
4720
|
)
|
|
4676
4721
|
] });
|
|
4677
4722
|
}
|
|
4678
|
-
return /* @__PURE__ */
|
|
4679
|
-
/* @__PURE__ */
|
|
4680
|
-
/* @__PURE__ */
|
|
4681
|
-
coverArt && /* @__PURE__ */
|
|
4723
|
+
return /* @__PURE__ */ jsxs34("div", { className: `bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-md overflow-hidden ${className}`, children: [
|
|
4724
|
+
/* @__PURE__ */ jsx107("audio", { ref: audioRef, src, preload, loop, autoPlay }),
|
|
4725
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-4 p-4 border-b border-[hsl(var(--border))]", children: [
|
|
4726
|
+
coverArt && /* @__PURE__ */ jsx107("div", { className: "w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-[hsl(var(--muted))]", children: /* @__PURE__ */ jsx107(
|
|
4682
4727
|
"img",
|
|
4683
4728
|
{
|
|
4684
4729
|
src: coverArt,
|
|
@@ -4686,15 +4731,15 @@ var AudioPlayer = ({
|
|
|
4686
4731
|
className: "w-full h-full object-cover"
|
|
4687
4732
|
}
|
|
4688
4733
|
) }),
|
|
4689
|
-
/* @__PURE__ */
|
|
4690
|
-
title && /* @__PURE__ */
|
|
4691
|
-
artist && /* @__PURE__ */
|
|
4692
|
-
album && /* @__PURE__ */
|
|
4734
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex-1 min-w-0", children: [
|
|
4735
|
+
title && /* @__PURE__ */ jsx107("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))] truncate", children: title }),
|
|
4736
|
+
artist && /* @__PURE__ */ jsx107("p", { className: "text-sm text-[hsl(var(--muted-foreground))] truncate", children: artist }),
|
|
4737
|
+
album && /* @__PURE__ */ jsx107("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: album })
|
|
4693
4738
|
] })
|
|
4694
4739
|
] }),
|
|
4695
|
-
/* @__PURE__ */
|
|
4696
|
-
/* @__PURE__ */
|
|
4697
|
-
/* @__PURE__ */
|
|
4740
|
+
/* @__PURE__ */ jsxs34("div", { className: "px-4 pt-4", children: [
|
|
4741
|
+
/* @__PURE__ */ jsxs34("div", { className: "relative h-2 bg-[hsl(var(--muted))] rounded-full overflow-visible", children: [
|
|
4742
|
+
/* @__PURE__ */ jsx107(
|
|
4698
4743
|
"div",
|
|
4699
4744
|
{
|
|
4700
4745
|
className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
|
|
@@ -4703,7 +4748,7 @@ var AudioPlayer = ({
|
|
|
4703
4748
|
),
|
|
4704
4749
|
showChapters && chapters.length > 0 && chapters.map((chapter, index) => {
|
|
4705
4750
|
const markerPosition = duration > 0 ? chapter.startTime / duration * 100 : 0;
|
|
4706
|
-
return /* @__PURE__ */
|
|
4751
|
+
return /* @__PURE__ */ jsx107(
|
|
4707
4752
|
"div",
|
|
4708
4753
|
{
|
|
4709
4754
|
className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-[hsl(var(--background))] opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
|
|
@@ -4719,19 +4764,19 @@ var AudioPlayer = ({
|
|
|
4719
4764
|
index
|
|
4720
4765
|
);
|
|
4721
4766
|
}),
|
|
4722
|
-
hoveredChapter && showChapters && /* @__PURE__ */
|
|
4767
|
+
hoveredChapter && showChapters && /* @__PURE__ */ jsxs34(
|
|
4723
4768
|
"div",
|
|
4724
4769
|
{
|
|
4725
4770
|
className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
|
|
4726
4771
|
style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
|
|
4727
4772
|
children: [
|
|
4728
|
-
/* @__PURE__ */
|
|
4729
|
-
/* @__PURE__ */
|
|
4730
|
-
/* @__PURE__ */
|
|
4773
|
+
/* @__PURE__ */ jsx107("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
|
|
4774
|
+
/* @__PURE__ */ jsx107("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
|
|
4775
|
+
/* @__PURE__ */ jsx107("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
|
|
4731
4776
|
]
|
|
4732
4777
|
}
|
|
4733
4778
|
),
|
|
4734
|
-
/* @__PURE__ */
|
|
4779
|
+
/* @__PURE__ */ jsx107(
|
|
4735
4780
|
"input",
|
|
4736
4781
|
{
|
|
4737
4782
|
type: "range",
|
|
@@ -4745,24 +4790,24 @@ var AudioPlayer = ({
|
|
|
4745
4790
|
}
|
|
4746
4791
|
)
|
|
4747
4792
|
] }),
|
|
4748
|
-
/* @__PURE__ */
|
|
4749
|
-
/* @__PURE__ */
|
|
4750
|
-
currentChapter && showChapters && /* @__PURE__ */
|
|
4751
|
-
/* @__PURE__ */
|
|
4793
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex justify-between items-center mt-1 text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: [
|
|
4794
|
+
/* @__PURE__ */ jsx107("span", { children: formatTime(currentTime) }),
|
|
4795
|
+
currentChapter && showChapters && /* @__PURE__ */ jsx107("span", { className: "text-[hsl(var(--primary))] font-medium truncate max-w-[200px]", children: currentChapter.title }),
|
|
4796
|
+
/* @__PURE__ */ jsx107("span", { children: formatTime(duration) })
|
|
4752
4797
|
] })
|
|
4753
4798
|
] }),
|
|
4754
|
-
/* @__PURE__ */
|
|
4755
|
-
/* @__PURE__ */
|
|
4756
|
-
/* @__PURE__ */
|
|
4799
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between px-4 py-4", children: [
|
|
4800
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 flex-1", children: [
|
|
4801
|
+
/* @__PURE__ */ jsx107(
|
|
4757
4802
|
"button",
|
|
4758
4803
|
{
|
|
4759
4804
|
onClick: toggleMute,
|
|
4760
4805
|
className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
|
|
4761
4806
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
4762
|
-
children: isMuted ? /* @__PURE__ */
|
|
4807
|
+
children: isMuted ? /* @__PURE__ */ jsx107(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ jsx107(VolumeUpIcon, { size: "md" })
|
|
4763
4808
|
}
|
|
4764
4809
|
),
|
|
4765
|
-
/* @__PURE__ */
|
|
4810
|
+
/* @__PURE__ */ jsx107(
|
|
4766
4811
|
"input",
|
|
4767
4812
|
{
|
|
4768
4813
|
type: "range",
|
|
@@ -4776,8 +4821,8 @@ var AudioPlayer = ({
|
|
|
4776
4821
|
}
|
|
4777
4822
|
)
|
|
4778
4823
|
] }),
|
|
4779
|
-
/* @__PURE__ */
|
|
4780
|
-
showSkipButtons && /* @__PURE__ */
|
|
4824
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
|
|
4825
|
+
showSkipButtons && /* @__PURE__ */ jsx107(
|
|
4781
4826
|
Button,
|
|
4782
4827
|
{
|
|
4783
4828
|
iconOnly: true,
|
|
@@ -4786,10 +4831,10 @@ var AudioPlayer = ({
|
|
|
4786
4831
|
onClick: handleSkipBack,
|
|
4787
4832
|
disabled: isLoading,
|
|
4788
4833
|
"aria-label": "Skip back 10 seconds",
|
|
4789
|
-
children: /* @__PURE__ */
|
|
4834
|
+
children: /* @__PURE__ */ jsx107(SkipBackIcon, { size: "md" })
|
|
4790
4835
|
}
|
|
4791
4836
|
),
|
|
4792
|
-
/* @__PURE__ */
|
|
4837
|
+
/* @__PURE__ */ jsx107(
|
|
4793
4838
|
Button,
|
|
4794
4839
|
{
|
|
4795
4840
|
iconOnly: true,
|
|
@@ -4798,10 +4843,10 @@ var AudioPlayer = ({
|
|
|
4798
4843
|
onClick: togglePlayPause,
|
|
4799
4844
|
disabled: isLoading,
|
|
4800
4845
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
4801
|
-
children: isPlaying ? /* @__PURE__ */
|
|
4846
|
+
children: isPlaying ? /* @__PURE__ */ jsx107(PauseIcon, { size: "lg" }) : /* @__PURE__ */ jsx107(PlayIcon, { size: "lg" })
|
|
4802
4847
|
}
|
|
4803
4848
|
),
|
|
4804
|
-
showSkipButtons && /* @__PURE__ */
|
|
4849
|
+
showSkipButtons && /* @__PURE__ */ jsx107(
|
|
4805
4850
|
Button,
|
|
4806
4851
|
{
|
|
4807
4852
|
iconOnly: true,
|
|
@@ -4810,11 +4855,11 @@ var AudioPlayer = ({
|
|
|
4810
4855
|
onClick: handleSkipForward,
|
|
4811
4856
|
disabled: isLoading,
|
|
4812
4857
|
"aria-label": "Skip forward 10 seconds",
|
|
4813
|
-
children: /* @__PURE__ */
|
|
4858
|
+
children: /* @__PURE__ */ jsx107(SkipForwardIcon, { size: "md" })
|
|
4814
4859
|
}
|
|
4815
4860
|
)
|
|
4816
4861
|
] }),
|
|
4817
|
-
/* @__PURE__ */
|
|
4862
|
+
/* @__PURE__ */ jsx107("div", { className: "flex-1 flex justify-end", children: showChapters && chapters.length > 0 && /* @__PURE__ */ jsxs34(
|
|
4818
4863
|
"button",
|
|
4819
4864
|
{
|
|
4820
4865
|
onClick: () => setShowChapterList(!showChapterList),
|
|
@@ -4828,16 +4873,16 @@ var AudioPlayer = ({
|
|
|
4828
4873
|
}
|
|
4829
4874
|
) })
|
|
4830
4875
|
] }),
|
|
4831
|
-
showChapters && showChapterList && chapters.length > 0 && /* @__PURE__ */
|
|
4876
|
+
showChapters && showChapterList && chapters.length > 0 && /* @__PURE__ */ jsx107("div", { className: "border-t border-[hsl(var(--border))] bg-[hsl(var(--muted))]/50 max-h-48 overflow-y-auto", children: chapters.map((chapter, index) => {
|
|
4832
4877
|
const isCurrentChapter = currentChapter?.startTime === chapter.startTime;
|
|
4833
|
-
return /* @__PURE__ */
|
|
4878
|
+
return /* @__PURE__ */ jsx107(
|
|
4834
4879
|
"button",
|
|
4835
4880
|
{
|
|
4836
4881
|
onClick: () => jumpToChapter(chapter),
|
|
4837
4882
|
className: `w-full text-left px-4 py-2 hover:bg-[hsl(var(--accent))] transition-colors ${isCurrentChapter ? "bg-[hsl(var(--primary))]/10 border-l-2 border-[hsl(var(--primary))]" : ""}`,
|
|
4838
|
-
children: /* @__PURE__ */
|
|
4839
|
-
/* @__PURE__ */
|
|
4840
|
-
/* @__PURE__ */
|
|
4883
|
+
children: /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between gap-2", children: [
|
|
4884
|
+
/* @__PURE__ */ jsx107("span", { className: `text-sm font-medium ${isCurrentChapter ? "text-[hsl(var(--primary))]" : "text-[hsl(var(--foreground))]"}`, children: chapter.title }),
|
|
4885
|
+
/* @__PURE__ */ jsx107("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(chapter.startTime) })
|
|
4841
4886
|
] })
|
|
4842
4887
|
},
|
|
4843
4888
|
index
|
|
@@ -4848,7 +4893,7 @@ var AudioPlayer = ({
|
|
|
4848
4893
|
|
|
4849
4894
|
// src/components/VideoPlayer.tsx
|
|
4850
4895
|
import { useRef as useRef10, useState as useState16, useEffect as useEffect10 } from "react";
|
|
4851
|
-
import { jsx as
|
|
4896
|
+
import { jsx as jsx108, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
4852
4897
|
var VideoPlayer = ({
|
|
4853
4898
|
src,
|
|
4854
4899
|
poster,
|
|
@@ -5075,7 +5120,7 @@ var VideoPlayer = ({
|
|
|
5075
5120
|
}
|
|
5076
5121
|
};
|
|
5077
5122
|
if (variant === "compact") {
|
|
5078
|
-
return /* @__PURE__ */
|
|
5123
|
+
return /* @__PURE__ */ jsxs35(
|
|
5079
5124
|
"div",
|
|
5080
5125
|
{
|
|
5081
5126
|
ref: containerRef,
|
|
@@ -5083,7 +5128,7 @@ var VideoPlayer = ({
|
|
|
5083
5128
|
style: { width, height },
|
|
5084
5129
|
onMouseMove: handleMouseMove,
|
|
5085
5130
|
children: [
|
|
5086
|
-
/* @__PURE__ */
|
|
5131
|
+
/* @__PURE__ */ jsx108(
|
|
5087
5132
|
"video",
|
|
5088
5133
|
{
|
|
5089
5134
|
ref: videoRef,
|
|
@@ -5097,8 +5142,8 @@ var VideoPlayer = ({
|
|
|
5097
5142
|
onClick: togglePlayPause
|
|
5098
5143
|
}
|
|
5099
5144
|
),
|
|
5100
|
-
showControls && /* @__PURE__ */
|
|
5101
|
-
/* @__PURE__ */
|
|
5145
|
+
showControls && /* @__PURE__ */ jsxs35("div", { className: `absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent transition-opacity ${showControlsOverlay || !isPlaying ? "opacity-100" : "opacity-0"}`, children: [
|
|
5146
|
+
/* @__PURE__ */ jsx108("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx108(
|
|
5102
5147
|
Button,
|
|
5103
5148
|
{
|
|
5104
5149
|
iconOnly: true,
|
|
@@ -5108,12 +5153,12 @@ var VideoPlayer = ({
|
|
|
5108
5153
|
disabled: isLoading,
|
|
5109
5154
|
className: "!w-16 !h-16 !rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm",
|
|
5110
5155
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
5111
|
-
children: isPlaying ? /* @__PURE__ */
|
|
5156
|
+
children: isPlaying ? /* @__PURE__ */ jsx108(PauseIcon, { size: "xl" }) : /* @__PURE__ */ jsx108(PlayIcon, { size: "xl" })
|
|
5112
5157
|
}
|
|
5113
5158
|
) }),
|
|
5114
|
-
/* @__PURE__ */
|
|
5115
|
-
/* @__PURE__ */
|
|
5116
|
-
/* @__PURE__ */
|
|
5159
|
+
/* @__PURE__ */ jsxs35("div", { className: "absolute bottom-0 left-0 right-0 p-3 space-y-2", children: [
|
|
5160
|
+
/* @__PURE__ */ jsxs35("div", { className: "relative h-1 bg-white/30 rounded-full overflow-visible", children: [
|
|
5161
|
+
/* @__PURE__ */ jsx108(
|
|
5117
5162
|
"div",
|
|
5118
5163
|
{
|
|
5119
5164
|
className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
|
|
@@ -5122,7 +5167,7 @@ var VideoPlayer = ({
|
|
|
5122
5167
|
),
|
|
5123
5168
|
showChapters && chapters.length > 0 && chapters.map((chapter, index) => {
|
|
5124
5169
|
const markerPosition = duration > 0 ? chapter.startTime / duration * 100 : 0;
|
|
5125
|
-
return /* @__PURE__ */
|
|
5170
|
+
return /* @__PURE__ */ jsx108(
|
|
5126
5171
|
"div",
|
|
5127
5172
|
{
|
|
5128
5173
|
className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-white opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
|
|
@@ -5138,7 +5183,7 @@ var VideoPlayer = ({
|
|
|
5138
5183
|
index
|
|
5139
5184
|
);
|
|
5140
5185
|
}),
|
|
5141
|
-
/* @__PURE__ */
|
|
5186
|
+
/* @__PURE__ */ jsx108(
|
|
5142
5187
|
"input",
|
|
5143
5188
|
{
|
|
5144
5189
|
type: "range",
|
|
@@ -5152,50 +5197,50 @@ var VideoPlayer = ({
|
|
|
5152
5197
|
}
|
|
5153
5198
|
)
|
|
5154
5199
|
] }),
|
|
5155
|
-
/* @__PURE__ */
|
|
5156
|
-
/* @__PURE__ */
|
|
5157
|
-
/* @__PURE__ */
|
|
5200
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between gap-2", children: [
|
|
5201
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
|
|
5202
|
+
/* @__PURE__ */ jsxs35("span", { className: "text-xs text-white tabular-nums", children: [
|
|
5158
5203
|
formatTime(currentTime),
|
|
5159
5204
|
" / ",
|
|
5160
5205
|
formatTime(duration)
|
|
5161
5206
|
] }),
|
|
5162
|
-
currentChapter && showChapters && /* @__PURE__ */
|
|
5207
|
+
currentChapter && showChapters && /* @__PURE__ */ jsxs35("span", { className: "text-xs text-white/90 font-medium truncate max-w-[150px]", children: [
|
|
5163
5208
|
"\u2022 ",
|
|
5164
5209
|
currentChapter.title
|
|
5165
5210
|
] })
|
|
5166
5211
|
] }),
|
|
5167
|
-
/* @__PURE__ */
|
|
5168
|
-
/* @__PURE__ */
|
|
5212
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
|
|
5213
|
+
/* @__PURE__ */ jsx108(
|
|
5169
5214
|
"button",
|
|
5170
5215
|
{
|
|
5171
5216
|
onClick: toggleMute,
|
|
5172
5217
|
className: "text-white hover:text-[hsl(var(--foreground))] transition-colors",
|
|
5173
5218
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
5174
|
-
children: isMuted ? /* @__PURE__ */
|
|
5219
|
+
children: isMuted ? /* @__PURE__ */ jsx108(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx108(VolumeUpIcon, { size: "sm" })
|
|
5175
5220
|
}
|
|
5176
5221
|
),
|
|
5177
|
-
/* @__PURE__ */
|
|
5222
|
+
/* @__PURE__ */ jsx108(
|
|
5178
5223
|
"button",
|
|
5179
5224
|
{
|
|
5180
5225
|
onClick: toggleFullscreen,
|
|
5181
5226
|
className: "text-white hover:text-[hsl(var(--foreground))] transition-colors",
|
|
5182
5227
|
"aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
|
|
5183
|
-
children: isFullscreen ? /* @__PURE__ */
|
|
5228
|
+
children: isFullscreen ? /* @__PURE__ */ jsx108(FullscreenExitIcon, { size: "sm" }) : /* @__PURE__ */ jsx108(FullscreenIcon, { size: "sm" })
|
|
5184
5229
|
}
|
|
5185
5230
|
)
|
|
5186
5231
|
] })
|
|
5187
5232
|
] })
|
|
5188
5233
|
] })
|
|
5189
5234
|
] }),
|
|
5190
|
-
hoveredChapter && showChapters && /* @__PURE__ */
|
|
5235
|
+
hoveredChapter && showChapters && /* @__PURE__ */ jsxs35(
|
|
5191
5236
|
"div",
|
|
5192
5237
|
{
|
|
5193
5238
|
className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
|
|
5194
5239
|
style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
|
|
5195
5240
|
children: [
|
|
5196
|
-
/* @__PURE__ */
|
|
5197
|
-
/* @__PURE__ */
|
|
5198
|
-
/* @__PURE__ */
|
|
5241
|
+
/* @__PURE__ */ jsx108("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
|
|
5242
|
+
/* @__PURE__ */ jsx108("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
|
|
5243
|
+
/* @__PURE__ */ jsx108("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
|
|
5199
5244
|
]
|
|
5200
5245
|
}
|
|
5201
5246
|
)
|
|
@@ -5203,9 +5248,9 @@ var VideoPlayer = ({
|
|
|
5203
5248
|
}
|
|
5204
5249
|
);
|
|
5205
5250
|
}
|
|
5206
|
-
return /* @__PURE__ */
|
|
5207
|
-
title && /* @__PURE__ */
|
|
5208
|
-
/* @__PURE__ */
|
|
5251
|
+
return /* @__PURE__ */ jsxs35("div", { className: `bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-md overflow-hidden ${className}`, children: [
|
|
5252
|
+
title && /* @__PURE__ */ jsx108("div", { className: "px-4 py-3 border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ jsx108("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))] truncate", children: title }) }),
|
|
5253
|
+
/* @__PURE__ */ jsxs35(
|
|
5209
5254
|
"div",
|
|
5210
5255
|
{
|
|
5211
5256
|
ref: containerRef,
|
|
@@ -5213,7 +5258,7 @@ var VideoPlayer = ({
|
|
|
5213
5258
|
style: { width, height },
|
|
5214
5259
|
onMouseMove: handleMouseMove,
|
|
5215
5260
|
children: [
|
|
5216
|
-
/* @__PURE__ */
|
|
5261
|
+
/* @__PURE__ */ jsx108(
|
|
5217
5262
|
"video",
|
|
5218
5263
|
{
|
|
5219
5264
|
ref: videoRef,
|
|
@@ -5228,8 +5273,8 @@ var VideoPlayer = ({
|
|
|
5228
5273
|
onClick: togglePlayPause
|
|
5229
5274
|
}
|
|
5230
5275
|
),
|
|
5231
|
-
showControls && !controls && /* @__PURE__ */
|
|
5232
|
-
/* @__PURE__ */
|
|
5276
|
+
showControls && !controls && /* @__PURE__ */ jsxs35("div", { className: `absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent transition-opacity ${showControlsOverlay || !isPlaying ? "opacity-100" : "opacity-0"}`, children: [
|
|
5277
|
+
/* @__PURE__ */ jsx108("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx108(
|
|
5233
5278
|
Button,
|
|
5234
5279
|
{
|
|
5235
5280
|
iconOnly: true,
|
|
@@ -5239,12 +5284,12 @@ var VideoPlayer = ({
|
|
|
5239
5284
|
disabled: isLoading,
|
|
5240
5285
|
className: "!w-20 !h-20 !rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm",
|
|
5241
5286
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
5242
|
-
children: isPlaying ? /* @__PURE__ */
|
|
5287
|
+
children: isPlaying ? /* @__PURE__ */ jsx108(PauseIcon, { size: "xl" }) : /* @__PURE__ */ jsx108(PlayIcon, { size: "xl" })
|
|
5243
5288
|
}
|
|
5244
5289
|
) }),
|
|
5245
|
-
/* @__PURE__ */
|
|
5246
|
-
/* @__PURE__ */
|
|
5247
|
-
/* @__PURE__ */
|
|
5290
|
+
/* @__PURE__ */ jsxs35("div", { className: "absolute bottom-0 left-0 right-0 p-4 space-y-3", children: [
|
|
5291
|
+
/* @__PURE__ */ jsxs35("div", { className: "relative h-1.5 bg-white/30 rounded-full overflow-visible", children: [
|
|
5292
|
+
/* @__PURE__ */ jsx108(
|
|
5248
5293
|
"div",
|
|
5249
5294
|
{
|
|
5250
5295
|
className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
|
|
@@ -5253,7 +5298,7 @@ var VideoPlayer = ({
|
|
|
5253
5298
|
),
|
|
5254
5299
|
showChapters && chapters.length > 0 && chapters.map((chapter, index) => {
|
|
5255
5300
|
const markerPosition = duration > 0 ? chapter.startTime / duration * 100 : 0;
|
|
5256
|
-
return /* @__PURE__ */
|
|
5301
|
+
return /* @__PURE__ */ jsx108(
|
|
5257
5302
|
"div",
|
|
5258
5303
|
{
|
|
5259
5304
|
className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-white opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
|
|
@@ -5269,7 +5314,7 @@ var VideoPlayer = ({
|
|
|
5269
5314
|
index
|
|
5270
5315
|
);
|
|
5271
5316
|
}),
|
|
5272
|
-
/* @__PURE__ */
|
|
5317
|
+
/* @__PURE__ */ jsx108(
|
|
5273
5318
|
"input",
|
|
5274
5319
|
{
|
|
5275
5320
|
type: "range",
|
|
@@ -5283,9 +5328,9 @@ var VideoPlayer = ({
|
|
|
5283
5328
|
}
|
|
5284
5329
|
)
|
|
5285
5330
|
] }),
|
|
5286
|
-
/* @__PURE__ */
|
|
5287
|
-
/* @__PURE__ */
|
|
5288
|
-
/* @__PURE__ */
|
|
5331
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between gap-4", children: [
|
|
5332
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-3", children: [
|
|
5333
|
+
/* @__PURE__ */ jsx108(
|
|
5289
5334
|
Button,
|
|
5290
5335
|
{
|
|
5291
5336
|
iconOnly: true,
|
|
@@ -5295,33 +5340,33 @@ var VideoPlayer = ({
|
|
|
5295
5340
|
disabled: isLoading,
|
|
5296
5341
|
className: "bg-white/20 hover:bg-white/30 backdrop-blur-sm border-white/30",
|
|
5297
5342
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
5298
|
-
children: isPlaying ? /* @__PURE__ */
|
|
5343
|
+
children: isPlaying ? /* @__PURE__ */ jsx108(PauseIcon, { size: "md" }) : /* @__PURE__ */ jsx108(PlayIcon, { size: "md" })
|
|
5299
5344
|
}
|
|
5300
5345
|
),
|
|
5301
|
-
/* @__PURE__ */
|
|
5302
|
-
/* @__PURE__ */
|
|
5346
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
|
|
5347
|
+
/* @__PURE__ */ jsxs35("span", { className: "text-sm text-white tabular-nums", children: [
|
|
5303
5348
|
formatTime(currentTime),
|
|
5304
5349
|
" / ",
|
|
5305
5350
|
formatTime(duration)
|
|
5306
5351
|
] }),
|
|
5307
|
-
currentChapter && showChapters && /* @__PURE__ */
|
|
5352
|
+
currentChapter && showChapters && /* @__PURE__ */ jsxs35("span", { className: "text-sm text-white/90 font-medium truncate max-w-[200px]", children: [
|
|
5308
5353
|
"\u2022 ",
|
|
5309
5354
|
currentChapter.title
|
|
5310
5355
|
] })
|
|
5311
5356
|
] })
|
|
5312
5357
|
] }),
|
|
5313
|
-
/* @__PURE__ */
|
|
5314
|
-
/* @__PURE__ */
|
|
5315
|
-
/* @__PURE__ */
|
|
5358
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-3", children: [
|
|
5359
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
|
|
5360
|
+
/* @__PURE__ */ jsx108(
|
|
5316
5361
|
"button",
|
|
5317
5362
|
{
|
|
5318
5363
|
onClick: toggleMute,
|
|
5319
5364
|
className: "text-white hover:text-[hsl(var(--foreground))] transition-colors",
|
|
5320
5365
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
5321
|
-
children: isMuted ? /* @__PURE__ */
|
|
5366
|
+
children: isMuted ? /* @__PURE__ */ jsx108(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ jsx108(VolumeUpIcon, { size: "md" })
|
|
5322
5367
|
}
|
|
5323
5368
|
),
|
|
5324
|
-
/* @__PURE__ */
|
|
5369
|
+
/* @__PURE__ */ jsx108(
|
|
5325
5370
|
"input",
|
|
5326
5371
|
{
|
|
5327
5372
|
type: "range",
|
|
@@ -5335,28 +5380,28 @@ var VideoPlayer = ({
|
|
|
5335
5380
|
}
|
|
5336
5381
|
)
|
|
5337
5382
|
] }),
|
|
5338
|
-
/* @__PURE__ */
|
|
5383
|
+
/* @__PURE__ */ jsx108(
|
|
5339
5384
|
"button",
|
|
5340
5385
|
{
|
|
5341
5386
|
onClick: toggleFullscreen,
|
|
5342
5387
|
className: "text-white hover:text-[hsl(var(--foreground))] transition-colors",
|
|
5343
5388
|
"aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
|
|
5344
|
-
children: isFullscreen ? /* @__PURE__ */
|
|
5389
|
+
children: isFullscreen ? /* @__PURE__ */ jsx108(FullscreenExitIcon, { size: "md" }) : /* @__PURE__ */ jsx108(FullscreenIcon, { size: "md" })
|
|
5345
5390
|
}
|
|
5346
5391
|
)
|
|
5347
5392
|
] })
|
|
5348
5393
|
] })
|
|
5349
5394
|
] })
|
|
5350
5395
|
] }),
|
|
5351
|
-
hoveredChapter && showChapters && /* @__PURE__ */
|
|
5396
|
+
hoveredChapter && showChapters && /* @__PURE__ */ jsxs35(
|
|
5352
5397
|
"div",
|
|
5353
5398
|
{
|
|
5354
5399
|
className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
|
|
5355
5400
|
style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
|
|
5356
5401
|
children: [
|
|
5357
|
-
/* @__PURE__ */
|
|
5358
|
-
/* @__PURE__ */
|
|
5359
|
-
/* @__PURE__ */
|
|
5402
|
+
/* @__PURE__ */ jsx108("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
|
|
5403
|
+
/* @__PURE__ */ jsx108("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
|
|
5404
|
+
/* @__PURE__ */ jsx108("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
|
|
5360
5405
|
]
|
|
5361
5406
|
}
|
|
5362
5407
|
)
|
|
@@ -5367,7 +5412,7 @@ var VideoPlayer = ({
|
|
|
5367
5412
|
};
|
|
5368
5413
|
|
|
5369
5414
|
// src/charts/LineChart.tsx
|
|
5370
|
-
import
|
|
5415
|
+
import React29, { useMemo as useMemo2, useCallback as useCallback3, useRef as useRef12, useState as useState18 } from "react";
|
|
5371
5416
|
|
|
5372
5417
|
// src/charts/constants.ts
|
|
5373
5418
|
var CHART_DEFAULTS = {
|
|
@@ -5683,8 +5728,8 @@ function createTickFormatter(domain) {
|
|
|
5683
5728
|
}
|
|
5684
5729
|
|
|
5685
5730
|
// src/charts/components/ChartTooltip.tsx
|
|
5686
|
-
import
|
|
5687
|
-
import { jsx as
|
|
5731
|
+
import React27, { useRef as useRef11, useEffect as useEffect11, useState as useState17 } from "react";
|
|
5732
|
+
import { jsx as jsx109, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
5688
5733
|
var DefaultTooltipContent = ({
|
|
5689
5734
|
active,
|
|
5690
5735
|
label,
|
|
@@ -5696,22 +5741,22 @@ var DefaultTooltipContent = ({
|
|
|
5696
5741
|
return null;
|
|
5697
5742
|
}
|
|
5698
5743
|
const formattedLabel = labelFormatter ? labelFormatter(label ?? "") : String(label ?? "");
|
|
5699
|
-
return /* @__PURE__ */
|
|
5700
|
-
formattedLabel && /* @__PURE__ */
|
|
5701
|
-
/* @__PURE__ */
|
|
5744
|
+
return /* @__PURE__ */ jsxs36("div", { className: "bg-[hsl(var(--popover))] text-white rounded-lg shadow-xl border border-[hsl(var(--border))] overflow-hidden min-w-[120px]", children: [
|
|
5745
|
+
formattedLabel && /* @__PURE__ */ jsx109("div", { className: "px-3 py-2 bg-[hsl(var(--popover))] border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ jsx109("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: formattedLabel }) }),
|
|
5746
|
+
/* @__PURE__ */ jsx109("div", { className: "px-3 py-2 space-y-1", children: payload.map((item, index) => {
|
|
5702
5747
|
const formattedValue = formatter ? formatter(item.value, item.name, item) : String(item.value);
|
|
5703
|
-
return /* @__PURE__ */
|
|
5704
|
-
/* @__PURE__ */
|
|
5705
|
-
item.color && /* @__PURE__ */
|
|
5748
|
+
return /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between gap-4", children: [
|
|
5749
|
+
/* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
|
|
5750
|
+
item.color && /* @__PURE__ */ jsx109(
|
|
5706
5751
|
"span",
|
|
5707
5752
|
{
|
|
5708
5753
|
className: "w-2.5 h-2.5 rounded-full flex-shrink-0",
|
|
5709
5754
|
style: { backgroundColor: item.color }
|
|
5710
5755
|
}
|
|
5711
5756
|
),
|
|
5712
|
-
/* @__PURE__ */
|
|
5757
|
+
/* @__PURE__ */ jsx109("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: item.name })
|
|
5713
5758
|
] }),
|
|
5714
|
-
/* @__PURE__ */
|
|
5759
|
+
/* @__PURE__ */ jsx109("span", { className: "text-sm font-semibold text-white", children: formattedValue })
|
|
5715
5760
|
] }, `${item.name}-${index}`);
|
|
5716
5761
|
}) })
|
|
5717
5762
|
] });
|
|
@@ -5762,19 +5807,19 @@ var ChartTooltip = ({
|
|
|
5762
5807
|
if (!active) {
|
|
5763
5808
|
return null;
|
|
5764
5809
|
}
|
|
5765
|
-
const tooltipContent = content ?
|
|
5810
|
+
const tooltipContent = content ? React27.isValidElement(content) ? React27.cloneElement(content, {
|
|
5766
5811
|
active,
|
|
5767
5812
|
label,
|
|
5768
5813
|
payload,
|
|
5769
5814
|
formatter,
|
|
5770
5815
|
labelFormatter
|
|
5771
|
-
}) :
|
|
5816
|
+
}) : React27.createElement(content, {
|
|
5772
5817
|
active,
|
|
5773
5818
|
label,
|
|
5774
5819
|
payload,
|
|
5775
5820
|
formatter,
|
|
5776
5821
|
labelFormatter
|
|
5777
|
-
}) : /* @__PURE__ */
|
|
5822
|
+
}) : /* @__PURE__ */ jsx109(
|
|
5778
5823
|
DefaultTooltipContent,
|
|
5779
5824
|
{
|
|
5780
5825
|
active,
|
|
@@ -5784,7 +5829,7 @@ var ChartTooltip = ({
|
|
|
5784
5829
|
labelFormatter
|
|
5785
5830
|
}
|
|
5786
5831
|
);
|
|
5787
|
-
return /* @__PURE__ */
|
|
5832
|
+
return /* @__PURE__ */ jsx109(
|
|
5788
5833
|
"div",
|
|
5789
5834
|
{
|
|
5790
5835
|
ref: tooltipRef,
|
|
@@ -5808,19 +5853,19 @@ function useTooltip() {
|
|
|
5808
5853
|
label: void 0,
|
|
5809
5854
|
payload: void 0
|
|
5810
5855
|
});
|
|
5811
|
-
const showTooltip =
|
|
5856
|
+
const showTooltip = React27.useCallback((data) => {
|
|
5812
5857
|
setTooltipData({
|
|
5813
5858
|
active: true,
|
|
5814
5859
|
...data
|
|
5815
5860
|
});
|
|
5816
5861
|
}, []);
|
|
5817
|
-
const hideTooltip =
|
|
5862
|
+
const hideTooltip = React27.useCallback(() => {
|
|
5818
5863
|
setTooltipData((prev) => ({
|
|
5819
5864
|
...prev,
|
|
5820
5865
|
active: false
|
|
5821
5866
|
}));
|
|
5822
5867
|
}, []);
|
|
5823
|
-
const updatePosition =
|
|
5868
|
+
const updatePosition = React27.useCallback((x, y) => {
|
|
5824
5869
|
setTooltipData((prev) => ({
|
|
5825
5870
|
...prev,
|
|
5826
5871
|
x,
|
|
@@ -5836,7 +5881,7 @@ function useTooltip() {
|
|
|
5836
5881
|
}
|
|
5837
5882
|
|
|
5838
5883
|
// src/charts/components/Legend.tsx
|
|
5839
|
-
import { jsx as
|
|
5884
|
+
import { jsx as jsx110, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
5840
5885
|
var Legend = ({
|
|
5841
5886
|
items = [],
|
|
5842
5887
|
layout = "horizontal",
|
|
@@ -5860,7 +5905,7 @@ var Legend = ({
|
|
|
5860
5905
|
const style = { backgroundColor: item.color };
|
|
5861
5906
|
switch (item.type) {
|
|
5862
5907
|
case "line":
|
|
5863
|
-
return /* @__PURE__ */
|
|
5908
|
+
return /* @__PURE__ */ jsx110(
|
|
5864
5909
|
"div",
|
|
5865
5910
|
{
|
|
5866
5911
|
className: "flex-shrink-0",
|
|
@@ -5872,7 +5917,7 @@ var Legend = ({
|
|
|
5872
5917
|
}
|
|
5873
5918
|
);
|
|
5874
5919
|
case "circle":
|
|
5875
|
-
return /* @__PURE__ */
|
|
5920
|
+
return /* @__PURE__ */ jsx110(
|
|
5876
5921
|
"div",
|
|
5877
5922
|
{
|
|
5878
5923
|
className: "rounded-full flex-shrink-0",
|
|
@@ -5886,7 +5931,7 @@ var Legend = ({
|
|
|
5886
5931
|
case "rect":
|
|
5887
5932
|
case "square":
|
|
5888
5933
|
default:
|
|
5889
|
-
return /* @__PURE__ */
|
|
5934
|
+
return /* @__PURE__ */ jsx110(
|
|
5890
5935
|
"div",
|
|
5891
5936
|
{
|
|
5892
5937
|
className: "rounded-sm flex-shrink-0",
|
|
@@ -5899,12 +5944,12 @@ var Legend = ({
|
|
|
5899
5944
|
);
|
|
5900
5945
|
}
|
|
5901
5946
|
};
|
|
5902
|
-
return /* @__PURE__ */
|
|
5947
|
+
return /* @__PURE__ */ jsx110(
|
|
5903
5948
|
"div",
|
|
5904
5949
|
{
|
|
5905
5950
|
className: `flex gap-4 px-4 py-2 ${layoutClass} ${alignClass} ${className}`,
|
|
5906
5951
|
style: wrapperStyle,
|
|
5907
|
-
children: items.map((item, index) => /* @__PURE__ */
|
|
5952
|
+
children: items.map((item, index) => /* @__PURE__ */ jsxs37(
|
|
5908
5953
|
"button",
|
|
5909
5954
|
{
|
|
5910
5955
|
type: "button",
|
|
@@ -5918,7 +5963,7 @@ var Legend = ({
|
|
|
5918
5963
|
onMouseLeave,
|
|
5919
5964
|
children: [
|
|
5920
5965
|
renderIcon(item),
|
|
5921
|
-
/* @__PURE__ */
|
|
5966
|
+
/* @__PURE__ */ jsx110("span", { className: "text-[hsl(var(--foreground))]", children: formatter ? formatter(item.name, item, index) : item.name })
|
|
5922
5967
|
]
|
|
5923
5968
|
},
|
|
5924
5969
|
`${item.name}-${index}`
|
|
@@ -5928,7 +5973,7 @@ var Legend = ({
|
|
|
5928
5973
|
};
|
|
5929
5974
|
|
|
5930
5975
|
// src/charts/components/ReferenceLine.tsx
|
|
5931
|
-
import { jsx as
|
|
5976
|
+
import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
5932
5977
|
var ReferenceLine = ({
|
|
5933
5978
|
x,
|
|
5934
5979
|
y,
|
|
@@ -6040,8 +6085,8 @@ var ReferenceLine = ({
|
|
|
6040
6085
|
} else {
|
|
6041
6086
|
return null;
|
|
6042
6087
|
}
|
|
6043
|
-
return /* @__PURE__ */
|
|
6044
|
-
/* @__PURE__ */
|
|
6088
|
+
return /* @__PURE__ */ jsxs38("g", { className: `reference-line ${className}`, children: [
|
|
6089
|
+
/* @__PURE__ */ jsx111(
|
|
6045
6090
|
"line",
|
|
6046
6091
|
{
|
|
6047
6092
|
x1,
|
|
@@ -6053,7 +6098,7 @@ var ReferenceLine = ({
|
|
|
6053
6098
|
strokeDasharray
|
|
6054
6099
|
}
|
|
6055
6100
|
),
|
|
6056
|
-
label && (typeof label === "string" ? /* @__PURE__ */
|
|
6101
|
+
label && (typeof label === "string" ? /* @__PURE__ */ jsx111(
|
|
6057
6102
|
"text",
|
|
6058
6103
|
{
|
|
6059
6104
|
x: labelX,
|
|
@@ -6065,7 +6110,7 @@ var ReferenceLine = ({
|
|
|
6065
6110
|
className: "fill-[hsl(var(--muted-foreground))]",
|
|
6066
6111
|
children: label
|
|
6067
6112
|
}
|
|
6068
|
-
) : /* @__PURE__ */
|
|
6113
|
+
) : /* @__PURE__ */ jsx111(
|
|
6069
6114
|
"foreignObject",
|
|
6070
6115
|
{
|
|
6071
6116
|
x: labelX - 50,
|
|
@@ -6079,7 +6124,7 @@ var ReferenceLine = ({
|
|
|
6079
6124
|
};
|
|
6080
6125
|
|
|
6081
6126
|
// src/charts/components/ReferenceArea.tsx
|
|
6082
|
-
import { jsx as
|
|
6127
|
+
import { jsx as jsx112, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
6083
6128
|
var ReferenceArea = ({
|
|
6084
6129
|
x1,
|
|
6085
6130
|
x2,
|
|
@@ -6187,8 +6232,8 @@ var ReferenceArea = ({
|
|
|
6187
6232
|
labelX = rectX + rectWidth / 2;
|
|
6188
6233
|
labelY = rectY + rectHeight / 2;
|
|
6189
6234
|
}
|
|
6190
|
-
return /* @__PURE__ */
|
|
6191
|
-
/* @__PURE__ */
|
|
6235
|
+
return /* @__PURE__ */ jsxs39("g", { className: `reference-area ${className}`, children: [
|
|
6236
|
+
/* @__PURE__ */ jsx112(
|
|
6192
6237
|
"rect",
|
|
6193
6238
|
{
|
|
6194
6239
|
x: rectX,
|
|
@@ -6201,7 +6246,7 @@ var ReferenceArea = ({
|
|
|
6201
6246
|
strokeWidth
|
|
6202
6247
|
}
|
|
6203
6248
|
),
|
|
6204
|
-
label && (typeof label === "string" ? /* @__PURE__ */
|
|
6249
|
+
label && (typeof label === "string" ? /* @__PURE__ */ jsx112(
|
|
6205
6250
|
"text",
|
|
6206
6251
|
{
|
|
6207
6252
|
x: labelX,
|
|
@@ -6213,7 +6258,7 @@ var ReferenceArea = ({
|
|
|
6213
6258
|
className: "fill-[hsl(var(--muted-foreground))]",
|
|
6214
6259
|
children: label
|
|
6215
6260
|
}
|
|
6216
|
-
) : /* @__PURE__ */
|
|
6261
|
+
) : /* @__PURE__ */ jsx112(
|
|
6217
6262
|
"foreignObject",
|
|
6218
6263
|
{
|
|
6219
6264
|
x: labelX - 50,
|
|
@@ -6228,7 +6273,7 @@ var ReferenceArea = ({
|
|
|
6228
6273
|
|
|
6229
6274
|
// src/charts/components/CartesianGrid.tsx
|
|
6230
6275
|
import { useMemo } from "react";
|
|
6231
|
-
import { jsx as
|
|
6276
|
+
import { jsx as jsx113, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
6232
6277
|
var CartesianGrid = ({
|
|
6233
6278
|
horizontal = true,
|
|
6234
6279
|
vertical = true,
|
|
@@ -6255,8 +6300,8 @@ var CartesianGrid = ({
|
|
|
6255
6300
|
const count = 6;
|
|
6256
6301
|
return Array.from({ length: count + 1 }, (_, i) => width / count * i);
|
|
6257
6302
|
}, [verticalPoints, width]);
|
|
6258
|
-
return /* @__PURE__ */
|
|
6259
|
-
horizontal && hPoints.map((y, i) => /* @__PURE__ */
|
|
6303
|
+
return /* @__PURE__ */ jsxs40("g", { className: `cartesian-grid ${className}`, children: [
|
|
6304
|
+
horizontal && hPoints.map((y, i) => /* @__PURE__ */ jsx113(
|
|
6260
6305
|
"line",
|
|
6261
6306
|
{
|
|
6262
6307
|
x1: 0,
|
|
@@ -6271,7 +6316,7 @@ var CartesianGrid = ({
|
|
|
6271
6316
|
},
|
|
6272
6317
|
`h-${i}`
|
|
6273
6318
|
)),
|
|
6274
|
-
vertical && vPoints.map((x, i) => /* @__PURE__ */
|
|
6319
|
+
vertical && vPoints.map((x, i) => /* @__PURE__ */ jsx113(
|
|
6275
6320
|
"line",
|
|
6276
6321
|
{
|
|
6277
6322
|
x1: x,
|
|
@@ -6290,7 +6335,7 @@ var CartesianGrid = ({
|
|
|
6290
6335
|
};
|
|
6291
6336
|
|
|
6292
6337
|
// src/charts/LineChart.tsx
|
|
6293
|
-
import { jsx as
|
|
6338
|
+
import { jsx as jsx114, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
6294
6339
|
var LineChart = ({
|
|
6295
6340
|
data,
|
|
6296
6341
|
width: providedWidth,
|
|
@@ -6505,10 +6550,10 @@ var LineChart = ({
|
|
|
6505
6550
|
},
|
|
6506
6551
|
yScale
|
|
6507
6552
|
};
|
|
6508
|
-
return
|
|
6509
|
-
if (!
|
|
6553
|
+
return React29.Children.map(children, (child) => {
|
|
6554
|
+
if (!React29.isValidElement(child)) return child;
|
|
6510
6555
|
if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
|
|
6511
|
-
return
|
|
6556
|
+
return React29.cloneElement(child, {
|
|
6512
6557
|
_chartDimensions: chartDimensions,
|
|
6513
6558
|
_scales: scales
|
|
6514
6559
|
});
|
|
@@ -6521,14 +6566,14 @@ var LineChart = ({
|
|
|
6521
6566
|
const seriesNames = data.map((s) => s.name).join(", ");
|
|
6522
6567
|
return `Line chart with ${data.length} series: ${seriesNames}`;
|
|
6523
6568
|
}, [data, ariaLabel]);
|
|
6524
|
-
return /* @__PURE__ */
|
|
6569
|
+
return /* @__PURE__ */ jsxs41(
|
|
6525
6570
|
"div",
|
|
6526
6571
|
{
|
|
6527
6572
|
ref: containerRef,
|
|
6528
6573
|
className: `relative ${className}`,
|
|
6529
6574
|
style: { width, height: "auto" },
|
|
6530
6575
|
children: [
|
|
6531
|
-
/* @__PURE__ */
|
|
6576
|
+
/* @__PURE__ */ jsxs41(
|
|
6532
6577
|
"svg",
|
|
6533
6578
|
{
|
|
6534
6579
|
ref: svgRef,
|
|
@@ -6539,14 +6584,14 @@ var LineChart = ({
|
|
|
6539
6584
|
"aria-label": accessibleDescription,
|
|
6540
6585
|
className: "bg-[hsl(var(--card))]",
|
|
6541
6586
|
children: [
|
|
6542
|
-
/* @__PURE__ */
|
|
6587
|
+
/* @__PURE__ */ jsx114("defs", { children: animate && data.map((series, i) => /* @__PURE__ */ jsx114("style", { children: `
|
|
6543
6588
|
@keyframes drawLine${i} {
|
|
6544
6589
|
from { stroke-dashoffset: 2000; }
|
|
6545
6590
|
to { stroke-dashoffset: 0; }
|
|
6546
6591
|
}
|
|
6547
6592
|
` }, `anim-${i}`)) }),
|
|
6548
|
-
/* @__PURE__ */
|
|
6549
|
-
showGrid && /* @__PURE__ */
|
|
6593
|
+
/* @__PURE__ */ jsxs41("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
|
|
6594
|
+
showGrid && /* @__PURE__ */ jsx114(
|
|
6550
6595
|
CartesianGrid,
|
|
6551
6596
|
{
|
|
6552
6597
|
_chartDimensions: { width: chartWidth, height: chartHeight },
|
|
@@ -6554,7 +6599,7 @@ var LineChart = ({
|
|
|
6554
6599
|
}
|
|
6555
6600
|
),
|
|
6556
6601
|
referenceElements,
|
|
6557
|
-
showCrosshair && crosshairX !== null && /* @__PURE__ */
|
|
6602
|
+
showCrosshair && crosshairX !== null && /* @__PURE__ */ jsx114(
|
|
6558
6603
|
"line",
|
|
6559
6604
|
{
|
|
6560
6605
|
x1: crosshairX,
|
|
@@ -6572,7 +6617,7 @@ var LineChart = ({
|
|
|
6572
6617
|
const { path } = seriesPaths[seriesIndex];
|
|
6573
6618
|
const color = series.color || colors[seriesIndex % colors.length];
|
|
6574
6619
|
const strokeWidth = series.strokeWidth || CHART_DEFAULTS.line.strokeWidth;
|
|
6575
|
-
return /* @__PURE__ */
|
|
6620
|
+
return /* @__PURE__ */ jsx114(
|
|
6576
6621
|
"path",
|
|
6577
6622
|
{
|
|
6578
6623
|
d: path,
|
|
@@ -6596,7 +6641,7 @@ var LineChart = ({
|
|
|
6596
6641
|
if (!showSeriesDots) return null;
|
|
6597
6642
|
return points.map((point, pointIndex) => {
|
|
6598
6643
|
const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
|
|
6599
|
-
return /* @__PURE__ */
|
|
6644
|
+
return /* @__PURE__ */ jsx114(
|
|
6600
6645
|
"circle",
|
|
6601
6646
|
{
|
|
6602
6647
|
cx: point.x,
|
|
@@ -6624,8 +6669,8 @@ var LineChart = ({
|
|
|
6624
6669
|
const lastScaled = points[points.length - 1];
|
|
6625
6670
|
const color = series.color || colors[seriesIndex % colors.length];
|
|
6626
6671
|
if (!lastPoint || !lastScaled) return null;
|
|
6627
|
-
return /* @__PURE__ */
|
|
6628
|
-
/* @__PURE__ */
|
|
6672
|
+
return /* @__PURE__ */ jsxs41("g", { children: [
|
|
6673
|
+
/* @__PURE__ */ jsx114(
|
|
6629
6674
|
"circle",
|
|
6630
6675
|
{
|
|
6631
6676
|
cx: chartWidth + 12,
|
|
@@ -6634,7 +6679,7 @@ var LineChart = ({
|
|
|
6634
6679
|
fill: color
|
|
6635
6680
|
}
|
|
6636
6681
|
),
|
|
6637
|
-
/* @__PURE__ */
|
|
6682
|
+
/* @__PURE__ */ jsx114(
|
|
6638
6683
|
"text",
|
|
6639
6684
|
{
|
|
6640
6685
|
x: chartWidth + 22,
|
|
@@ -6648,8 +6693,8 @@ var LineChart = ({
|
|
|
6648
6693
|
)
|
|
6649
6694
|
] }, `label-${seriesIndex}`);
|
|
6650
6695
|
}),
|
|
6651
|
-
showXAxis && /* @__PURE__ */
|
|
6652
|
-
/* @__PURE__ */
|
|
6696
|
+
showXAxis && /* @__PURE__ */ jsxs41("g", { transform: `translate(0, ${chartHeight})`, children: [
|
|
6697
|
+
/* @__PURE__ */ jsx114(
|
|
6653
6698
|
"line",
|
|
6654
6699
|
{
|
|
6655
6700
|
x1: 0,
|
|
@@ -6662,9 +6707,9 @@ var LineChart = ({
|
|
|
6662
6707
|
),
|
|
6663
6708
|
xTicks.map((tick, i) => {
|
|
6664
6709
|
const x = xValueType === "string" ? xScale(tick.value, tick.index) : xScale(xValueType === "date" ? new Date(tick.value) : tick.value, 0);
|
|
6665
|
-
return /* @__PURE__ */
|
|
6666
|
-
/* @__PURE__ */
|
|
6667
|
-
/* @__PURE__ */
|
|
6710
|
+
return /* @__PURE__ */ jsxs41("g", { transform: `translate(${x}, 0)`, children: [
|
|
6711
|
+
/* @__PURE__ */ jsx114("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
|
|
6712
|
+
/* @__PURE__ */ jsx114(
|
|
6668
6713
|
"text",
|
|
6669
6714
|
{
|
|
6670
6715
|
y: 20,
|
|
@@ -6676,7 +6721,7 @@ var LineChart = ({
|
|
|
6676
6721
|
)
|
|
6677
6722
|
] }, `x-tick-${i}`);
|
|
6678
6723
|
}),
|
|
6679
|
-
xAxisLabel && /* @__PURE__ */
|
|
6724
|
+
xAxisLabel && /* @__PURE__ */ jsx114(
|
|
6680
6725
|
"text",
|
|
6681
6726
|
{
|
|
6682
6727
|
x: chartWidth / 2,
|
|
@@ -6689,8 +6734,8 @@ var LineChart = ({
|
|
|
6689
6734
|
}
|
|
6690
6735
|
)
|
|
6691
6736
|
] }),
|
|
6692
|
-
showYAxis && /* @__PURE__ */
|
|
6693
|
-
/* @__PURE__ */
|
|
6737
|
+
showYAxis && /* @__PURE__ */ jsxs41("g", { children: [
|
|
6738
|
+
/* @__PURE__ */ jsx114(
|
|
6694
6739
|
"line",
|
|
6695
6740
|
{
|
|
6696
6741
|
x1: 0,
|
|
@@ -6701,9 +6746,9 @@ var LineChart = ({
|
|
|
6701
6746
|
strokeWidth: 1
|
|
6702
6747
|
}
|
|
6703
6748
|
),
|
|
6704
|
-
yTicks.map((tick, i) => /* @__PURE__ */
|
|
6705
|
-
/* @__PURE__ */
|
|
6706
|
-
/* @__PURE__ */
|
|
6749
|
+
yTicks.map((tick, i) => /* @__PURE__ */ jsxs41("g", { transform: `translate(0, ${yScale(tick)})`, children: [
|
|
6750
|
+
/* @__PURE__ */ jsx114("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
|
|
6751
|
+
/* @__PURE__ */ jsx114(
|
|
6707
6752
|
"text",
|
|
6708
6753
|
{
|
|
6709
6754
|
x: -12,
|
|
@@ -6715,7 +6760,7 @@ var LineChart = ({
|
|
|
6715
6760
|
}
|
|
6716
6761
|
)
|
|
6717
6762
|
] }, `y-tick-${i}`)),
|
|
6718
|
-
yAxisLabel && /* @__PURE__ */
|
|
6763
|
+
yAxisLabel && /* @__PURE__ */ jsx114(
|
|
6719
6764
|
"text",
|
|
6720
6765
|
{
|
|
6721
6766
|
x: -chartHeight / 2,
|
|
@@ -6730,7 +6775,7 @@ var LineChart = ({
|
|
|
6730
6775
|
)
|
|
6731
6776
|
] })
|
|
6732
6777
|
] }),
|
|
6733
|
-
/* @__PURE__ */
|
|
6778
|
+
/* @__PURE__ */ jsx114("style", { children: `
|
|
6734
6779
|
@keyframes fadeIn {
|
|
6735
6780
|
from { opacity: 0; }
|
|
6736
6781
|
to { opacity: 1; }
|
|
@@ -6739,7 +6784,7 @@ var LineChart = ({
|
|
|
6739
6784
|
]
|
|
6740
6785
|
}
|
|
6741
6786
|
),
|
|
6742
|
-
showLegend && /* @__PURE__ */
|
|
6787
|
+
showLegend && /* @__PURE__ */ jsx114(
|
|
6743
6788
|
Legend,
|
|
6744
6789
|
{
|
|
6745
6790
|
items: legendItems,
|
|
@@ -6747,7 +6792,7 @@ var LineChart = ({
|
|
|
6747
6792
|
align: "center"
|
|
6748
6793
|
}
|
|
6749
6794
|
),
|
|
6750
|
-
showTooltip && /* @__PURE__ */
|
|
6795
|
+
showTooltip && /* @__PURE__ */ jsx114(
|
|
6751
6796
|
ChartTooltip,
|
|
6752
6797
|
{
|
|
6753
6798
|
...tooltipData,
|
|
@@ -6763,8 +6808,8 @@ var LineChart = ({
|
|
|
6763
6808
|
};
|
|
6764
6809
|
|
|
6765
6810
|
// src/charts/BarChart.tsx
|
|
6766
|
-
import
|
|
6767
|
-
import { jsx as
|
|
6811
|
+
import React30, { useMemo as useMemo3, useCallback as useCallback4, useRef as useRef13, useState as useState19 } from "react";
|
|
6812
|
+
import { jsx as jsx115, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
6768
6813
|
var BarChart = ({
|
|
6769
6814
|
data,
|
|
6770
6815
|
width: providedWidth,
|
|
@@ -6932,7 +6977,7 @@ var BarChart = ({
|
|
|
6932
6977
|
}
|
|
6933
6978
|
const isHovered = hoveredBar?.seriesIndex === seriesIndex && hoveredBar?.barIndex === barIndex;
|
|
6934
6979
|
result.push(
|
|
6935
|
-
/* @__PURE__ */
|
|
6980
|
+
/* @__PURE__ */ jsx115(
|
|
6936
6981
|
"rect",
|
|
6937
6982
|
{
|
|
6938
6983
|
x: barX,
|
|
@@ -6960,7 +7005,7 @@ var BarChart = ({
|
|
|
6960
7005
|
const labelX = horizontal ? barX + barW + 8 : barX + barW / 2;
|
|
6961
7006
|
const labelY = horizontal ? barY + barH / 2 : barY - 8;
|
|
6962
7007
|
result.push(
|
|
6963
|
-
/* @__PURE__ */
|
|
7008
|
+
/* @__PURE__ */ jsx115(
|
|
6964
7009
|
"text",
|
|
6965
7010
|
{
|
|
6966
7011
|
x: labelX,
|
|
@@ -7011,10 +7056,10 @@ var BarChart = ({
|
|
|
7011
7056
|
xScale: (value) => xBandScale.scale(String(value)) + bandwidth / 2,
|
|
7012
7057
|
yScale
|
|
7013
7058
|
};
|
|
7014
|
-
return
|
|
7015
|
-
if (!
|
|
7059
|
+
return React30.Children.map(children, (child) => {
|
|
7060
|
+
if (!React30.isValidElement(child)) return child;
|
|
7016
7061
|
if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
|
|
7017
|
-
return
|
|
7062
|
+
return React30.cloneElement(child, {
|
|
7018
7063
|
_chartDimensions: chartDimensions,
|
|
7019
7064
|
_scales: scales
|
|
7020
7065
|
});
|
|
@@ -7027,14 +7072,14 @@ var BarChart = ({
|
|
|
7027
7072
|
const seriesNames = data.map((s) => s.name).join(", ");
|
|
7028
7073
|
return `Bar chart with ${data.length} series: ${seriesNames}`;
|
|
7029
7074
|
}, [data, ariaLabel]);
|
|
7030
|
-
return /* @__PURE__ */
|
|
7075
|
+
return /* @__PURE__ */ jsxs42(
|
|
7031
7076
|
"div",
|
|
7032
7077
|
{
|
|
7033
7078
|
ref: containerRef,
|
|
7034
7079
|
className: `relative ${className}`,
|
|
7035
7080
|
style: { width, height: "auto" },
|
|
7036
7081
|
children: [
|
|
7037
|
-
/* @__PURE__ */
|
|
7082
|
+
/* @__PURE__ */ jsxs42(
|
|
7038
7083
|
"svg",
|
|
7039
7084
|
{
|
|
7040
7085
|
width,
|
|
@@ -7044,7 +7089,7 @@ var BarChart = ({
|
|
|
7044
7089
|
"aria-label": accessibleDescription,
|
|
7045
7090
|
className: "bg-[hsl(var(--card))]",
|
|
7046
7091
|
children: [
|
|
7047
|
-
/* @__PURE__ */
|
|
7092
|
+
/* @__PURE__ */ jsx115("defs", { children: /* @__PURE__ */ jsx115("style", { children: `
|
|
7048
7093
|
@keyframes growY {
|
|
7049
7094
|
from { transform: scaleY(0); }
|
|
7050
7095
|
to { transform: scaleY(1); }
|
|
@@ -7058,8 +7103,8 @@ var BarChart = ({
|
|
|
7058
7103
|
to { opacity: 1; }
|
|
7059
7104
|
}
|
|
7060
7105
|
` }) }),
|
|
7061
|
-
/* @__PURE__ */
|
|
7062
|
-
showGrid && /* @__PURE__ */
|
|
7106
|
+
/* @__PURE__ */ jsxs42("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
|
|
7107
|
+
showGrid && /* @__PURE__ */ jsx115(
|
|
7063
7108
|
CartesianGrid,
|
|
7064
7109
|
{
|
|
7065
7110
|
_chartDimensions: { width: chartWidth, height: chartHeight },
|
|
@@ -7071,8 +7116,8 @@ var BarChart = ({
|
|
|
7071
7116
|
),
|
|
7072
7117
|
referenceElements,
|
|
7073
7118
|
bars,
|
|
7074
|
-
showXAxis && /* @__PURE__ */
|
|
7075
|
-
/* @__PURE__ */
|
|
7119
|
+
showXAxis && /* @__PURE__ */ jsxs42("g", { transform: `translate(0, ${chartHeight})`, children: [
|
|
7120
|
+
/* @__PURE__ */ jsx115(
|
|
7076
7121
|
"line",
|
|
7077
7122
|
{
|
|
7078
7123
|
x1: 0,
|
|
@@ -7084,9 +7129,9 @@ var BarChart = ({
|
|
|
7084
7129
|
),
|
|
7085
7130
|
categories.map((cat, i) => {
|
|
7086
7131
|
const x = xBandScale.scale(cat) + bandwidth / 2;
|
|
7087
|
-
return /* @__PURE__ */
|
|
7088
|
-
/* @__PURE__ */
|
|
7089
|
-
/* @__PURE__ */
|
|
7132
|
+
return /* @__PURE__ */ jsxs42("g", { transform: `translate(${x}, 0)`, children: [
|
|
7133
|
+
/* @__PURE__ */ jsx115("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
|
|
7134
|
+
/* @__PURE__ */ jsx115(
|
|
7090
7135
|
"text",
|
|
7091
7136
|
{
|
|
7092
7137
|
y: 20,
|
|
@@ -7098,7 +7143,7 @@ var BarChart = ({
|
|
|
7098
7143
|
)
|
|
7099
7144
|
] }, `x-tick-${i}`);
|
|
7100
7145
|
}),
|
|
7101
|
-
xAxisLabel && /* @__PURE__ */
|
|
7146
|
+
xAxisLabel && /* @__PURE__ */ jsx115(
|
|
7102
7147
|
"text",
|
|
7103
7148
|
{
|
|
7104
7149
|
x: chartWidth / 2,
|
|
@@ -7111,8 +7156,8 @@ var BarChart = ({
|
|
|
7111
7156
|
}
|
|
7112
7157
|
)
|
|
7113
7158
|
] }),
|
|
7114
|
-
showYAxis && /* @__PURE__ */
|
|
7115
|
-
/* @__PURE__ */
|
|
7159
|
+
showYAxis && /* @__PURE__ */ jsxs42("g", { children: [
|
|
7160
|
+
/* @__PURE__ */ jsx115(
|
|
7116
7161
|
"line",
|
|
7117
7162
|
{
|
|
7118
7163
|
x1: 0,
|
|
@@ -7122,9 +7167,9 @@ var BarChart = ({
|
|
|
7122
7167
|
className: "stroke-[hsl(var(--border))]"
|
|
7123
7168
|
}
|
|
7124
7169
|
),
|
|
7125
|
-
yTicks.map((tick, i) => /* @__PURE__ */
|
|
7126
|
-
/* @__PURE__ */
|
|
7127
|
-
/* @__PURE__ */
|
|
7170
|
+
yTicks.map((tick, i) => /* @__PURE__ */ jsxs42("g", { transform: `translate(0, ${yScale(tick)})`, children: [
|
|
7171
|
+
/* @__PURE__ */ jsx115("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
|
|
7172
|
+
/* @__PURE__ */ jsx115(
|
|
7128
7173
|
"text",
|
|
7129
7174
|
{
|
|
7130
7175
|
x: -12,
|
|
@@ -7136,7 +7181,7 @@ var BarChart = ({
|
|
|
7136
7181
|
}
|
|
7137
7182
|
)
|
|
7138
7183
|
] }, `y-tick-${i}`)),
|
|
7139
|
-
yAxisLabel && /* @__PURE__ */
|
|
7184
|
+
yAxisLabel && /* @__PURE__ */ jsx115(
|
|
7140
7185
|
"text",
|
|
7141
7186
|
{
|
|
7142
7187
|
x: -chartHeight / 2,
|
|
@@ -7154,8 +7199,8 @@ var BarChart = ({
|
|
|
7154
7199
|
]
|
|
7155
7200
|
}
|
|
7156
7201
|
),
|
|
7157
|
-
showLegend && /* @__PURE__ */
|
|
7158
|
-
showTooltip && /* @__PURE__ */
|
|
7202
|
+
showLegend && /* @__PURE__ */ jsx115(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
|
|
7203
|
+
showTooltip && /* @__PURE__ */ jsx115(
|
|
7159
7204
|
ChartTooltip,
|
|
7160
7205
|
{
|
|
7161
7206
|
...tooltipData,
|
|
@@ -7169,8 +7214,8 @@ var BarChart = ({
|
|
|
7169
7214
|
};
|
|
7170
7215
|
|
|
7171
7216
|
// src/charts/AreaChart.tsx
|
|
7172
|
-
import
|
|
7173
|
-
import { jsx as
|
|
7217
|
+
import React31, { useMemo as useMemo4, useCallback as useCallback5, useRef as useRef14, useState as useState20 } from "react";
|
|
7218
|
+
import { jsx as jsx116, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
7174
7219
|
var AreaChart = ({
|
|
7175
7220
|
data,
|
|
7176
7221
|
width: providedWidth,
|
|
@@ -7389,10 +7434,10 @@ var AreaChart = ({
|
|
|
7389
7434
|
},
|
|
7390
7435
|
yScale
|
|
7391
7436
|
};
|
|
7392
|
-
return
|
|
7393
|
-
if (!
|
|
7437
|
+
return React31.Children.map(children, (child) => {
|
|
7438
|
+
if (!React31.isValidElement(child)) return child;
|
|
7394
7439
|
if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
|
|
7395
|
-
return
|
|
7440
|
+
return React31.cloneElement(child, {
|
|
7396
7441
|
_chartDimensions: chartDimensions,
|
|
7397
7442
|
_scales: scales
|
|
7398
7443
|
});
|
|
@@ -7405,14 +7450,14 @@ var AreaChart = ({
|
|
|
7405
7450
|
const seriesNames = data.map((s) => s.name).join(", ");
|
|
7406
7451
|
return `Area chart with ${data.length} series: ${seriesNames}`;
|
|
7407
7452
|
}, [data, ariaLabel]);
|
|
7408
|
-
return /* @__PURE__ */
|
|
7453
|
+
return /* @__PURE__ */ jsxs43(
|
|
7409
7454
|
"div",
|
|
7410
7455
|
{
|
|
7411
7456
|
ref: containerRef,
|
|
7412
7457
|
className: `relative ${className}`,
|
|
7413
7458
|
style: { width, height: "auto" },
|
|
7414
7459
|
children: [
|
|
7415
|
-
/* @__PURE__ */
|
|
7460
|
+
/* @__PURE__ */ jsxs43(
|
|
7416
7461
|
"svg",
|
|
7417
7462
|
{
|
|
7418
7463
|
width,
|
|
@@ -7422,10 +7467,10 @@ var AreaChart = ({
|
|
|
7422
7467
|
"aria-label": accessibleDescription,
|
|
7423
7468
|
className: "bg-[hsl(var(--card))]",
|
|
7424
7469
|
children: [
|
|
7425
|
-
/* @__PURE__ */
|
|
7470
|
+
/* @__PURE__ */ jsxs43("defs", { children: [
|
|
7426
7471
|
data.map((series, i) => {
|
|
7427
7472
|
const color = series.color || colors[i % colors.length];
|
|
7428
|
-
return /* @__PURE__ */
|
|
7473
|
+
return /* @__PURE__ */ jsxs43(
|
|
7429
7474
|
"linearGradient",
|
|
7430
7475
|
{
|
|
7431
7476
|
id: `area-gradient-${i}`,
|
|
@@ -7434,14 +7479,14 @@ var AreaChart = ({
|
|
|
7434
7479
|
x2: "0",
|
|
7435
7480
|
y2: "1",
|
|
7436
7481
|
children: [
|
|
7437
|
-
/* @__PURE__ */
|
|
7438
|
-
/* @__PURE__ */
|
|
7482
|
+
/* @__PURE__ */ jsx116("stop", { offset: "0%", stopColor: color, stopOpacity: series.fillOpacity ?? fillOpacity }),
|
|
7483
|
+
/* @__PURE__ */ jsx116("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
|
|
7439
7484
|
]
|
|
7440
7485
|
},
|
|
7441
7486
|
`gradient-${i}`
|
|
7442
7487
|
);
|
|
7443
7488
|
}),
|
|
7444
|
-
/* @__PURE__ */
|
|
7489
|
+
/* @__PURE__ */ jsx116("style", { children: `
|
|
7445
7490
|
@keyframes fadeIn {
|
|
7446
7491
|
from { opacity: 0; }
|
|
7447
7492
|
to { opacity: 1; }
|
|
@@ -7452,8 +7497,8 @@ var AreaChart = ({
|
|
|
7452
7497
|
}
|
|
7453
7498
|
` })
|
|
7454
7499
|
] }),
|
|
7455
|
-
/* @__PURE__ */
|
|
7456
|
-
showGrid && /* @__PURE__ */
|
|
7500
|
+
/* @__PURE__ */ jsxs43("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
|
|
7501
|
+
showGrid && /* @__PURE__ */ jsx116(
|
|
7457
7502
|
CartesianGrid,
|
|
7458
7503
|
{
|
|
7459
7504
|
_chartDimensions: { width: chartWidth, height: chartHeight },
|
|
@@ -7466,8 +7511,8 @@ var AreaChart = ({
|
|
|
7466
7511
|
const { areaPath, linePath } = areaPaths[seriesIndex];
|
|
7467
7512
|
const color = series.color || colors[seriesIndex % colors.length];
|
|
7468
7513
|
const strokeWidth = series.strokeWidth || CHART_DEFAULTS.line.strokeWidth;
|
|
7469
|
-
return /* @__PURE__ */
|
|
7470
|
-
/* @__PURE__ */
|
|
7514
|
+
return /* @__PURE__ */ jsxs43("g", { children: [
|
|
7515
|
+
/* @__PURE__ */ jsx116(
|
|
7471
7516
|
"path",
|
|
7472
7517
|
{
|
|
7473
7518
|
d: areaPath,
|
|
@@ -7478,7 +7523,7 @@ var AreaChart = ({
|
|
|
7478
7523
|
} : void 0
|
|
7479
7524
|
}
|
|
7480
7525
|
),
|
|
7481
|
-
/* @__PURE__ */
|
|
7526
|
+
/* @__PURE__ */ jsx116(
|
|
7482
7527
|
"path",
|
|
7483
7528
|
{
|
|
7484
7529
|
d: linePath,
|
|
@@ -7502,7 +7547,7 @@ var AreaChart = ({
|
|
|
7502
7547
|
if (!showSeriesDots) return null;
|
|
7503
7548
|
return points.map((point, pointIndex) => {
|
|
7504
7549
|
const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
|
|
7505
|
-
return /* @__PURE__ */
|
|
7550
|
+
return /* @__PURE__ */ jsx116(
|
|
7506
7551
|
"circle",
|
|
7507
7552
|
{
|
|
7508
7553
|
cx: point.x,
|
|
@@ -7524,8 +7569,8 @@ var AreaChart = ({
|
|
|
7524
7569
|
);
|
|
7525
7570
|
});
|
|
7526
7571
|
}),
|
|
7527
|
-
showXAxis && /* @__PURE__ */
|
|
7528
|
-
/* @__PURE__ */
|
|
7572
|
+
showXAxis && /* @__PURE__ */ jsxs43("g", { transform: `translate(0, ${chartHeight})`, children: [
|
|
7573
|
+
/* @__PURE__ */ jsx116(
|
|
7529
7574
|
"line",
|
|
7530
7575
|
{
|
|
7531
7576
|
x1: 0,
|
|
@@ -7537,9 +7582,9 @@ var AreaChart = ({
|
|
|
7537
7582
|
),
|
|
7538
7583
|
xTicks.map((tick, i) => {
|
|
7539
7584
|
const x = xValueType === "string" ? xScale(tick.value, tick.index) : xScale(xValueType === "date" ? new Date(tick.value) : tick.value, 0);
|
|
7540
|
-
return /* @__PURE__ */
|
|
7541
|
-
/* @__PURE__ */
|
|
7542
|
-
/* @__PURE__ */
|
|
7585
|
+
return /* @__PURE__ */ jsxs43("g", { transform: `translate(${x}, 0)`, children: [
|
|
7586
|
+
/* @__PURE__ */ jsx116("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
|
|
7587
|
+
/* @__PURE__ */ jsx116(
|
|
7543
7588
|
"text",
|
|
7544
7589
|
{
|
|
7545
7590
|
y: 20,
|
|
@@ -7551,7 +7596,7 @@ var AreaChart = ({
|
|
|
7551
7596
|
)
|
|
7552
7597
|
] }, `x-tick-${i}`);
|
|
7553
7598
|
}),
|
|
7554
|
-
xAxisLabel && /* @__PURE__ */
|
|
7599
|
+
xAxisLabel && /* @__PURE__ */ jsx116(
|
|
7555
7600
|
"text",
|
|
7556
7601
|
{
|
|
7557
7602
|
x: chartWidth / 2,
|
|
@@ -7564,8 +7609,8 @@ var AreaChart = ({
|
|
|
7564
7609
|
}
|
|
7565
7610
|
)
|
|
7566
7611
|
] }),
|
|
7567
|
-
showYAxis && /* @__PURE__ */
|
|
7568
|
-
/* @__PURE__ */
|
|
7612
|
+
showYAxis && /* @__PURE__ */ jsxs43("g", { children: [
|
|
7613
|
+
/* @__PURE__ */ jsx116(
|
|
7569
7614
|
"line",
|
|
7570
7615
|
{
|
|
7571
7616
|
x1: 0,
|
|
@@ -7575,9 +7620,9 @@ var AreaChart = ({
|
|
|
7575
7620
|
className: "stroke-[hsl(var(--border))]"
|
|
7576
7621
|
}
|
|
7577
7622
|
),
|
|
7578
|
-
yTicks.map((tick, i) => /* @__PURE__ */
|
|
7579
|
-
/* @__PURE__ */
|
|
7580
|
-
/* @__PURE__ */
|
|
7623
|
+
yTicks.map((tick, i) => /* @__PURE__ */ jsxs43("g", { transform: `translate(0, ${yScale(tick)})`, children: [
|
|
7624
|
+
/* @__PURE__ */ jsx116("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
|
|
7625
|
+
/* @__PURE__ */ jsx116(
|
|
7581
7626
|
"text",
|
|
7582
7627
|
{
|
|
7583
7628
|
x: -12,
|
|
@@ -7589,7 +7634,7 @@ var AreaChart = ({
|
|
|
7589
7634
|
}
|
|
7590
7635
|
)
|
|
7591
7636
|
] }, `y-tick-${i}`)),
|
|
7592
|
-
yAxisLabel && /* @__PURE__ */
|
|
7637
|
+
yAxisLabel && /* @__PURE__ */ jsx116(
|
|
7593
7638
|
"text",
|
|
7594
7639
|
{
|
|
7595
7640
|
x: -chartHeight / 2,
|
|
@@ -7607,8 +7652,8 @@ var AreaChart = ({
|
|
|
7607
7652
|
]
|
|
7608
7653
|
}
|
|
7609
7654
|
),
|
|
7610
|
-
showLegend && /* @__PURE__ */
|
|
7611
|
-
showTooltip && /* @__PURE__ */
|
|
7655
|
+
showLegend && /* @__PURE__ */ jsx116(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
|
|
7656
|
+
showTooltip && /* @__PURE__ */ jsx116(
|
|
7612
7657
|
ChartTooltip,
|
|
7613
7658
|
{
|
|
7614
7659
|
...tooltipData,
|
|
@@ -7623,7 +7668,7 @@ var AreaChart = ({
|
|
|
7623
7668
|
|
|
7624
7669
|
// src/charts/PieChart.tsx
|
|
7625
7670
|
import { useMemo as useMemo5, useCallback as useCallback6, useRef as useRef15, useState as useState21 } from "react";
|
|
7626
|
-
import { jsx as
|
|
7671
|
+
import { jsx as jsx117, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
7627
7672
|
var PieChart = ({
|
|
7628
7673
|
data,
|
|
7629
7674
|
width: providedWidth,
|
|
@@ -7764,14 +7809,14 @@ var PieChart = ({
|
|
|
7764
7809
|
const sliceNames = data.map((d) => `${d.label}: ${d.value}`).join(", ");
|
|
7765
7810
|
return `${isDonut ? "Donut" : "Pie"} chart with ${data.length} slices: ${sliceNames}`;
|
|
7766
7811
|
}, [data, isDonut, ariaLabel]);
|
|
7767
|
-
return /* @__PURE__ */
|
|
7812
|
+
return /* @__PURE__ */ jsxs44(
|
|
7768
7813
|
"div",
|
|
7769
7814
|
{
|
|
7770
7815
|
ref: containerRef,
|
|
7771
7816
|
className: `relative inline-flex flex-col items-center ${className}`,
|
|
7772
7817
|
style: { width },
|
|
7773
7818
|
children: [
|
|
7774
|
-
/* @__PURE__ */
|
|
7819
|
+
/* @__PURE__ */ jsxs44(
|
|
7775
7820
|
"svg",
|
|
7776
7821
|
{
|
|
7777
7822
|
width,
|
|
@@ -7781,7 +7826,7 @@ var PieChart = ({
|
|
|
7781
7826
|
"aria-label": accessibleDescription,
|
|
7782
7827
|
className: "bg-[hsl(var(--card))]",
|
|
7783
7828
|
children: [
|
|
7784
|
-
/* @__PURE__ */
|
|
7829
|
+
/* @__PURE__ */ jsx117("defs", { children: /* @__PURE__ */ jsx117("style", { children: `
|
|
7785
7830
|
@keyframes rotateIn {
|
|
7786
7831
|
from {
|
|
7787
7832
|
transform: rotate(-90deg);
|
|
@@ -7797,7 +7842,7 @@ var PieChart = ({
|
|
|
7797
7842
|
to { opacity: 1; }
|
|
7798
7843
|
}
|
|
7799
7844
|
` }) }),
|
|
7800
|
-
/* @__PURE__ */
|
|
7845
|
+
/* @__PURE__ */ jsx117("g", { style: animate ? {
|
|
7801
7846
|
transformOrigin: `${centerX}px ${centerY}px`,
|
|
7802
7847
|
animation: `rotateIn ${animationDuration}ms ease-out forwards`
|
|
7803
7848
|
} : void 0, children: slices.map((slice) => {
|
|
@@ -7805,8 +7850,8 @@ var PieChart = ({
|
|
|
7805
7850
|
const isActive = activeSlice === slice.index;
|
|
7806
7851
|
const scale = isHovered || isActive ? 1.03 : 1;
|
|
7807
7852
|
const transform = `translate(${centerX}px, ${centerY}px) scale(${scale}) translate(${-centerX}px, ${-centerY}px)`;
|
|
7808
|
-
return /* @__PURE__ */
|
|
7809
|
-
/* @__PURE__ */
|
|
7853
|
+
return /* @__PURE__ */ jsxs44("g", { children: [
|
|
7854
|
+
/* @__PURE__ */ jsx117(
|
|
7810
7855
|
"path",
|
|
7811
7856
|
{
|
|
7812
7857
|
d: slice.path,
|
|
@@ -7820,7 +7865,7 @@ var PieChart = ({
|
|
|
7820
7865
|
onClick: () => handleSliceClick(slice.index)
|
|
7821
7866
|
}
|
|
7822
7867
|
),
|
|
7823
|
-
showLabels && slice.percent >= minLabelPercent && /* @__PURE__ */
|
|
7868
|
+
showLabels && slice.percent >= minLabelPercent && /* @__PURE__ */ jsx117(
|
|
7824
7869
|
"text",
|
|
7825
7870
|
{
|
|
7826
7871
|
x: slice.labelX,
|
|
@@ -7839,8 +7884,8 @@ var PieChart = ({
|
|
|
7839
7884
|
)
|
|
7840
7885
|
] }, slice.index);
|
|
7841
7886
|
}) }),
|
|
7842
|
-
isDonut && (centerLabel || centerValue !== void 0) && /* @__PURE__ */
|
|
7843
|
-
centerValue !== void 0 && /* @__PURE__ */
|
|
7887
|
+
isDonut && (centerLabel || centerValue !== void 0) && /* @__PURE__ */ jsxs44("g", { children: [
|
|
7888
|
+
centerValue !== void 0 && /* @__PURE__ */ jsx117(
|
|
7844
7889
|
"text",
|
|
7845
7890
|
{
|
|
7846
7891
|
x: centerX,
|
|
@@ -7853,7 +7898,7 @@ var PieChart = ({
|
|
|
7853
7898
|
children: typeof centerValue === "number" ? formatNumber(centerValue) : centerValue
|
|
7854
7899
|
}
|
|
7855
7900
|
),
|
|
7856
|
-
centerLabel && (typeof centerLabel === "string" ? /* @__PURE__ */
|
|
7901
|
+
centerLabel && (typeof centerLabel === "string" ? /* @__PURE__ */ jsx117(
|
|
7857
7902
|
"text",
|
|
7858
7903
|
{
|
|
7859
7904
|
x: centerX,
|
|
@@ -7864,7 +7909,7 @@ var PieChart = ({
|
|
|
7864
7909
|
className: "fill-[hsl(var(--muted-foreground))]",
|
|
7865
7910
|
children: centerLabel
|
|
7866
7911
|
}
|
|
7867
|
-
) : /* @__PURE__ */
|
|
7912
|
+
) : /* @__PURE__ */ jsx117(
|
|
7868
7913
|
"foreignObject",
|
|
7869
7914
|
{
|
|
7870
7915
|
x: centerX - innerRadius * 0.7,
|
|
@@ -7878,7 +7923,7 @@ var PieChart = ({
|
|
|
7878
7923
|
]
|
|
7879
7924
|
}
|
|
7880
7925
|
),
|
|
7881
|
-
showLegend && /* @__PURE__ */
|
|
7926
|
+
showLegend && /* @__PURE__ */ jsx117(
|
|
7882
7927
|
Legend,
|
|
7883
7928
|
{
|
|
7884
7929
|
items: legendItems,
|
|
@@ -7889,7 +7934,7 @@ var PieChart = ({
|
|
|
7889
7934
|
onMouseLeave: () => setHoveredSlice(null)
|
|
7890
7935
|
}
|
|
7891
7936
|
),
|
|
7892
|
-
showTooltip && /* @__PURE__ */
|
|
7937
|
+
showTooltip && /* @__PURE__ */ jsx117(
|
|
7893
7938
|
ChartTooltip,
|
|
7894
7939
|
{
|
|
7895
7940
|
...tooltipData,
|
|
@@ -7903,8 +7948,8 @@ var PieChart = ({
|
|
|
7903
7948
|
};
|
|
7904
7949
|
|
|
7905
7950
|
// src/charts/ScatterChart.tsx
|
|
7906
|
-
import
|
|
7907
|
-
import { jsx as
|
|
7951
|
+
import React33, { useMemo as useMemo6, useCallback as useCallback7, useRef as useRef16, useState as useState22 } from "react";
|
|
7952
|
+
import { jsx as jsx118, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
7908
7953
|
function linearRegression(points) {
|
|
7909
7954
|
const n = points.length;
|
|
7910
7955
|
if (n === 0) return { slope: 0, intercept: 0 };
|
|
@@ -7925,7 +7970,7 @@ var renderShape = (shape, x, y, size, color, commonProps) => {
|
|
|
7925
7970
|
const { className, stroke, strokeWidth, onMouseEnter, onMouseLeave, onClick } = commonProps;
|
|
7926
7971
|
switch (shape) {
|
|
7927
7972
|
case "square":
|
|
7928
|
-
return /* @__PURE__ */
|
|
7973
|
+
return /* @__PURE__ */ jsx118(
|
|
7929
7974
|
"rect",
|
|
7930
7975
|
{
|
|
7931
7976
|
x: x - size / 2,
|
|
@@ -7944,7 +7989,7 @@ var renderShape = (shape, x, y, size, color, commonProps) => {
|
|
|
7944
7989
|
case "triangle": {
|
|
7945
7990
|
const h = size * 0.866;
|
|
7946
7991
|
const points = `${x},${y - h / 2} ${x - size / 2},${y + h / 2} ${x + size / 2},${y + h / 2}`;
|
|
7947
|
-
return /* @__PURE__ */
|
|
7992
|
+
return /* @__PURE__ */ jsx118(
|
|
7948
7993
|
"polygon",
|
|
7949
7994
|
{
|
|
7950
7995
|
points,
|
|
@@ -7961,7 +8006,7 @@ var renderShape = (shape, x, y, size, color, commonProps) => {
|
|
|
7961
8006
|
case "diamond": {
|
|
7962
8007
|
const d = size / 1.414;
|
|
7963
8008
|
const diamondPoints = `${x},${y - d} ${x + d},${y} ${x},${y + d} ${x - d},${y}`;
|
|
7964
|
-
return /* @__PURE__ */
|
|
8009
|
+
return /* @__PURE__ */ jsx118(
|
|
7965
8010
|
"polygon",
|
|
7966
8011
|
{
|
|
7967
8012
|
points: diamondPoints,
|
|
@@ -7977,7 +8022,7 @@ var renderShape = (shape, x, y, size, color, commonProps) => {
|
|
|
7977
8022
|
}
|
|
7978
8023
|
case "circle":
|
|
7979
8024
|
default:
|
|
7980
|
-
return /* @__PURE__ */
|
|
8025
|
+
return /* @__PURE__ */ jsx118(
|
|
7981
8026
|
"circle",
|
|
7982
8027
|
{
|
|
7983
8028
|
cx: x,
|
|
@@ -8146,10 +8191,10 @@ var ScatterChart = ({
|
|
|
8146
8191
|
if (!children) return null;
|
|
8147
8192
|
const chartDimensions = { width: chartWidth, height: chartHeight, padding };
|
|
8148
8193
|
const scales = { xScale, yScale };
|
|
8149
|
-
return
|
|
8150
|
-
if (!
|
|
8194
|
+
return React33.Children.map(children, (child) => {
|
|
8195
|
+
if (!React33.isValidElement(child)) return child;
|
|
8151
8196
|
if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
|
|
8152
|
-
return
|
|
8197
|
+
return React33.cloneElement(child, {
|
|
8153
8198
|
_chartDimensions: chartDimensions,
|
|
8154
8199
|
_scales: scales
|
|
8155
8200
|
});
|
|
@@ -8162,14 +8207,14 @@ var ScatterChart = ({
|
|
|
8162
8207
|
const totalPoints = data.reduce((sum, s) => sum + s.data.length, 0);
|
|
8163
8208
|
return `Scatter chart with ${data.length} series and ${totalPoints} data points`;
|
|
8164
8209
|
}, [data, ariaLabel]);
|
|
8165
|
-
return /* @__PURE__ */
|
|
8210
|
+
return /* @__PURE__ */ jsxs45(
|
|
8166
8211
|
"div",
|
|
8167
8212
|
{
|
|
8168
8213
|
ref: containerRef,
|
|
8169
8214
|
className: `relative ${className}`,
|
|
8170
8215
|
style: { width, height: "auto" },
|
|
8171
8216
|
children: [
|
|
8172
|
-
/* @__PURE__ */
|
|
8217
|
+
/* @__PURE__ */ jsxs45(
|
|
8173
8218
|
"svg",
|
|
8174
8219
|
{
|
|
8175
8220
|
width,
|
|
@@ -8179,7 +8224,7 @@ var ScatterChart = ({
|
|
|
8179
8224
|
"aria-label": accessibleDescription,
|
|
8180
8225
|
className: "bg-[hsl(var(--card))]",
|
|
8181
8226
|
children: [
|
|
8182
|
-
/* @__PURE__ */
|
|
8227
|
+
/* @__PURE__ */ jsx118("defs", { children: /* @__PURE__ */ jsx118("style", { children: `
|
|
8183
8228
|
@keyframes popIn {
|
|
8184
8229
|
from {
|
|
8185
8230
|
transform: scale(0);
|
|
@@ -8191,8 +8236,8 @@ var ScatterChart = ({
|
|
|
8191
8236
|
}
|
|
8192
8237
|
}
|
|
8193
8238
|
` }) }),
|
|
8194
|
-
/* @__PURE__ */
|
|
8195
|
-
showGrid && /* @__PURE__ */
|
|
8239
|
+
/* @__PURE__ */ jsxs45("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
|
|
8240
|
+
showGrid && /* @__PURE__ */ jsx118(
|
|
8196
8241
|
CartesianGrid,
|
|
8197
8242
|
{
|
|
8198
8243
|
_chartDimensions: { width: chartWidth, height: chartHeight },
|
|
@@ -8201,7 +8246,7 @@ var ScatterChart = ({
|
|
|
8201
8246
|
}
|
|
8202
8247
|
),
|
|
8203
8248
|
referenceElements,
|
|
8204
|
-
showTrendLine && trendLines.map((line, i) => /* @__PURE__ */
|
|
8249
|
+
showTrendLine && trendLines.map((line, i) => /* @__PURE__ */ jsx118(
|
|
8205
8250
|
"line",
|
|
8206
8251
|
{
|
|
8207
8252
|
x1: line.x1,
|
|
@@ -8225,7 +8270,7 @@ var ScatterChart = ({
|
|
|
8225
8270
|
const size = bubble && point.z !== void 0 ? sizeScale(point.z) : baseSize;
|
|
8226
8271
|
const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
|
|
8227
8272
|
const displaySize = isHovered ? size * 1.3 : size;
|
|
8228
|
-
return /* @__PURE__ */
|
|
8273
|
+
return /* @__PURE__ */ jsx118(
|
|
8229
8274
|
"g",
|
|
8230
8275
|
{
|
|
8231
8276
|
style: animate ? {
|
|
@@ -8246,8 +8291,8 @@ var ScatterChart = ({
|
|
|
8246
8291
|
);
|
|
8247
8292
|
});
|
|
8248
8293
|
}),
|
|
8249
|
-
showXAxis && /* @__PURE__ */
|
|
8250
|
-
/* @__PURE__ */
|
|
8294
|
+
showXAxis && /* @__PURE__ */ jsxs45("g", { transform: `translate(0, ${chartHeight})`, children: [
|
|
8295
|
+
/* @__PURE__ */ jsx118(
|
|
8251
8296
|
"line",
|
|
8252
8297
|
{
|
|
8253
8298
|
x1: 0,
|
|
@@ -8257,9 +8302,9 @@ var ScatterChart = ({
|
|
|
8257
8302
|
className: "stroke-[hsl(var(--border))]"
|
|
8258
8303
|
}
|
|
8259
8304
|
),
|
|
8260
|
-
xTicks.map((tick, i) => /* @__PURE__ */
|
|
8261
|
-
/* @__PURE__ */
|
|
8262
|
-
/* @__PURE__ */
|
|
8305
|
+
xTicks.map((tick, i) => /* @__PURE__ */ jsxs45("g", { transform: `translate(${xScale(tick)}, 0)`, children: [
|
|
8306
|
+
/* @__PURE__ */ jsx118("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
|
|
8307
|
+
/* @__PURE__ */ jsx118(
|
|
8263
8308
|
"text",
|
|
8264
8309
|
{
|
|
8265
8310
|
y: 20,
|
|
@@ -8270,7 +8315,7 @@ var ScatterChart = ({
|
|
|
8270
8315
|
}
|
|
8271
8316
|
)
|
|
8272
8317
|
] }, `x-tick-${i}`)),
|
|
8273
|
-
xAxisLabel && /* @__PURE__ */
|
|
8318
|
+
xAxisLabel && /* @__PURE__ */ jsx118(
|
|
8274
8319
|
"text",
|
|
8275
8320
|
{
|
|
8276
8321
|
x: chartWidth / 2,
|
|
@@ -8283,8 +8328,8 @@ var ScatterChart = ({
|
|
|
8283
8328
|
}
|
|
8284
8329
|
)
|
|
8285
8330
|
] }),
|
|
8286
|
-
showYAxis && /* @__PURE__ */
|
|
8287
|
-
/* @__PURE__ */
|
|
8331
|
+
showYAxis && /* @__PURE__ */ jsxs45("g", { children: [
|
|
8332
|
+
/* @__PURE__ */ jsx118(
|
|
8288
8333
|
"line",
|
|
8289
8334
|
{
|
|
8290
8335
|
x1: 0,
|
|
@@ -8294,9 +8339,9 @@ var ScatterChart = ({
|
|
|
8294
8339
|
className: "stroke-[hsl(var(--border))]"
|
|
8295
8340
|
}
|
|
8296
8341
|
),
|
|
8297
|
-
yTicks.map((tick, i) => /* @__PURE__ */
|
|
8298
|
-
/* @__PURE__ */
|
|
8299
|
-
/* @__PURE__ */
|
|
8342
|
+
yTicks.map((tick, i) => /* @__PURE__ */ jsxs45("g", { transform: `translate(0, ${yScale(tick)})`, children: [
|
|
8343
|
+
/* @__PURE__ */ jsx118("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
|
|
8344
|
+
/* @__PURE__ */ jsx118(
|
|
8300
8345
|
"text",
|
|
8301
8346
|
{
|
|
8302
8347
|
x: -12,
|
|
@@ -8308,7 +8353,7 @@ var ScatterChart = ({
|
|
|
8308
8353
|
}
|
|
8309
8354
|
)
|
|
8310
8355
|
] }, `y-tick-${i}`)),
|
|
8311
|
-
yAxisLabel && /* @__PURE__ */
|
|
8356
|
+
yAxisLabel && /* @__PURE__ */ jsx118(
|
|
8312
8357
|
"text",
|
|
8313
8358
|
{
|
|
8314
8359
|
x: -chartHeight / 2,
|
|
@@ -8326,8 +8371,8 @@ var ScatterChart = ({
|
|
|
8326
8371
|
]
|
|
8327
8372
|
}
|
|
8328
8373
|
),
|
|
8329
|
-
showLegend && /* @__PURE__ */
|
|
8330
|
-
showTooltip && /* @__PURE__ */
|
|
8374
|
+
showLegend && /* @__PURE__ */ jsx118(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
|
|
8375
|
+
showTooltip && /* @__PURE__ */ jsx118(
|
|
8331
8376
|
ChartTooltip,
|
|
8332
8377
|
{
|
|
8333
8378
|
...tooltipData,
|
|
@@ -8341,8 +8386,8 @@ var ScatterChart = ({
|
|
|
8341
8386
|
};
|
|
8342
8387
|
|
|
8343
8388
|
// src/charts/components/ResponsiveContainer.tsx
|
|
8344
|
-
import
|
|
8345
|
-
import { jsx as
|
|
8389
|
+
import React34, { useRef as useRef17, useState as useState23, useEffect as useEffect12, useCallback as useCallback8 } from "react";
|
|
8390
|
+
import { jsx as jsx119 } from "react/jsx-runtime";
|
|
8346
8391
|
var ResponsiveContainer = ({
|
|
8347
8392
|
width = "100%",
|
|
8348
8393
|
height,
|
|
@@ -8420,7 +8465,7 @@ var ResponsiveContainer = ({
|
|
|
8420
8465
|
maxHeight: maxHeight ? `${maxHeight}px` : void 0
|
|
8421
8466
|
};
|
|
8422
8467
|
if (dimensions.width === 0 || dimensions.height === 0) {
|
|
8423
|
-
return /* @__PURE__ */
|
|
8468
|
+
return /* @__PURE__ */ jsx119(
|
|
8424
8469
|
"div",
|
|
8425
8470
|
{
|
|
8426
8471
|
ref: containerRef,
|
|
@@ -8429,14 +8474,14 @@ var ResponsiveContainer = ({
|
|
|
8429
8474
|
}
|
|
8430
8475
|
);
|
|
8431
8476
|
}
|
|
8432
|
-
const chartElement =
|
|
8477
|
+
const chartElement = React34.cloneElement(
|
|
8433
8478
|
children,
|
|
8434
8479
|
{
|
|
8435
8480
|
width: dimensions.width,
|
|
8436
8481
|
height: dimensions.height
|
|
8437
8482
|
}
|
|
8438
8483
|
);
|
|
8439
|
-
return /* @__PURE__ */
|
|
8484
|
+
return /* @__PURE__ */ jsx119(
|
|
8440
8485
|
"div",
|
|
8441
8486
|
{
|
|
8442
8487
|
ref: containerRef,
|
|
@@ -8448,8 +8493,8 @@ var ResponsiveContainer = ({
|
|
|
8448
8493
|
};
|
|
8449
8494
|
|
|
8450
8495
|
// src/components/Heatmap.tsx
|
|
8451
|
-
import
|
|
8452
|
-
import { jsx as
|
|
8496
|
+
import React35, { useMemo as useMemo7, useState as useState24 } from "react";
|
|
8497
|
+
import { jsx as jsx120, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
8453
8498
|
var COLOR_SCALES = {
|
|
8454
8499
|
blue: {
|
|
8455
8500
|
light: ["#eff6ff", "#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"],
|
|
@@ -8494,7 +8539,7 @@ var Heatmap = ({
|
|
|
8494
8539
|
}) => {
|
|
8495
8540
|
const [hoveredCell, setHoveredCell] = useState24(null);
|
|
8496
8541
|
const [isDarkMode, setIsDarkMode] = useState24(false);
|
|
8497
|
-
|
|
8542
|
+
React35.useEffect(() => {
|
|
8498
8543
|
const checkDarkMode = () => {
|
|
8499
8544
|
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
|
8500
8545
|
};
|
|
@@ -8554,15 +8599,15 @@ var Heatmap = ({
|
|
|
8554
8599
|
const labelHeight = 30;
|
|
8555
8600
|
const width = labelWidth + uniqueX.length * (cellSize + cellGap);
|
|
8556
8601
|
const height = labelHeight + uniqueY.length * (cellSize + cellGap);
|
|
8557
|
-
return /* @__PURE__ */
|
|
8558
|
-
/* @__PURE__ */
|
|
8602
|
+
return /* @__PURE__ */ jsxs46("div", { className: `relative inline-block ${className}`, children: [
|
|
8603
|
+
/* @__PURE__ */ jsxs46(
|
|
8559
8604
|
"svg",
|
|
8560
8605
|
{
|
|
8561
8606
|
width,
|
|
8562
8607
|
height,
|
|
8563
8608
|
className: "select-none",
|
|
8564
8609
|
children: [
|
|
8565
|
-
uniqueX.map((label, i) => /* @__PURE__ */
|
|
8610
|
+
uniqueX.map((label, i) => /* @__PURE__ */ jsx120(
|
|
8566
8611
|
"text",
|
|
8567
8612
|
{
|
|
8568
8613
|
x: labelWidth + i * (cellSize + cellGap) + cellSize / 2,
|
|
@@ -8574,7 +8619,7 @@ var Heatmap = ({
|
|
|
8574
8619
|
},
|
|
8575
8620
|
`x-${label}`
|
|
8576
8621
|
)),
|
|
8577
|
-
uniqueY.map((label, j) => /* @__PURE__ */
|
|
8622
|
+
uniqueY.map((label, j) => /* @__PURE__ */ jsx120(
|
|
8578
8623
|
"text",
|
|
8579
8624
|
{
|
|
8580
8625
|
x: labelWidth - 8,
|
|
@@ -8592,8 +8637,8 @@ var Heatmap = ({
|
|
|
8592
8637
|
const point = data.find((d) => String(d.x) === xLabel && String(d.y) === yLabel);
|
|
8593
8638
|
const x = labelWidth + i * (cellSize + cellGap);
|
|
8594
8639
|
const y = labelHeight + j * (cellSize + cellGap);
|
|
8595
|
-
return /* @__PURE__ */
|
|
8596
|
-
/* @__PURE__ */
|
|
8640
|
+
return /* @__PURE__ */ jsxs46("g", { children: [
|
|
8641
|
+
/* @__PURE__ */ jsx120(
|
|
8597
8642
|
"rect",
|
|
8598
8643
|
{
|
|
8599
8644
|
x,
|
|
@@ -8616,7 +8661,7 @@ var Heatmap = ({
|
|
|
8616
8661
|
}
|
|
8617
8662
|
}
|
|
8618
8663
|
),
|
|
8619
|
-
showValues && value !== void 0 && /* @__PURE__ */
|
|
8664
|
+
showValues && value !== void 0 && /* @__PURE__ */ jsx120(
|
|
8620
8665
|
"text",
|
|
8621
8666
|
{
|
|
8622
8667
|
x: x + cellSize / 2,
|
|
@@ -8633,7 +8678,7 @@ var Heatmap = ({
|
|
|
8633
8678
|
]
|
|
8634
8679
|
}
|
|
8635
8680
|
),
|
|
8636
|
-
showTooltip && hoveredCell && /* @__PURE__ */
|
|
8681
|
+
showTooltip && hoveredCell && /* @__PURE__ */ jsxs46(
|
|
8637
8682
|
"div",
|
|
8638
8683
|
{
|
|
8639
8684
|
className: "absolute z-50 px-3 py-2 text-sm bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] border border-[hsl(var(--border))] rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
|
|
@@ -8644,7 +8689,7 @@ var Heatmap = ({
|
|
|
8644
8689
|
},
|
|
8645
8690
|
children: [
|
|
8646
8691
|
getTooltipContent(hoveredCell.point),
|
|
8647
|
-
/* @__PURE__ */
|
|
8692
|
+
/* @__PURE__ */ jsx120(
|
|
8648
8693
|
"div",
|
|
8649
8694
|
{
|
|
8650
8695
|
className: "absolute w-2 h-2 bg-[hsl(var(--popover))] rotate-45",
|
|
@@ -8677,7 +8722,7 @@ var CalendarHeatmap = ({
|
|
|
8677
8722
|
}) => {
|
|
8678
8723
|
const [hoveredCell, setHoveredCell] = useState24(null);
|
|
8679
8724
|
const [isDarkMode, setIsDarkMode] = useState24(false);
|
|
8680
|
-
|
|
8725
|
+
React35.useEffect(() => {
|
|
8681
8726
|
const checkDarkMode = () => {
|
|
8682
8727
|
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
|
8683
8728
|
};
|
|
@@ -8746,9 +8791,9 @@ var CalendarHeatmap = ({
|
|
|
8746
8791
|
const monthLabelHeight = showMonthLabels ? 20 : 0;
|
|
8747
8792
|
const width = dayLabelWidth + weeks.length * (cellSize + cellGap);
|
|
8748
8793
|
const height = monthLabelHeight + 7 * (cellSize + cellGap);
|
|
8749
|
-
return /* @__PURE__ */
|
|
8750
|
-
/* @__PURE__ */
|
|
8751
|
-
showMonthLabels && monthLabels.map(({ label, weekIndex }, i) => /* @__PURE__ */
|
|
8794
|
+
return /* @__PURE__ */ jsxs46("div", { className: `relative inline-block ${className}`, children: [
|
|
8795
|
+
/* @__PURE__ */ jsxs46("svg", { width, height, className: "select-none", children: [
|
|
8796
|
+
showMonthLabels && monthLabels.map(({ label, weekIndex }, i) => /* @__PURE__ */ jsx120(
|
|
8752
8797
|
"text",
|
|
8753
8798
|
{
|
|
8754
8799
|
x: dayLabelWidth + weekIndex * (cellSize + cellGap),
|
|
@@ -8759,7 +8804,7 @@ var CalendarHeatmap = ({
|
|
|
8759
8804
|
},
|
|
8760
8805
|
`month-${i}`
|
|
8761
8806
|
)),
|
|
8762
|
-
showDayLabels && [1, 3, 5].map((dayIndex) => /* @__PURE__ */
|
|
8807
|
+
showDayLabels && [1, 3, 5].map((dayIndex) => /* @__PURE__ */ jsx120(
|
|
8763
8808
|
"text",
|
|
8764
8809
|
{
|
|
8765
8810
|
x: dayLabelWidth - 6,
|
|
@@ -8777,7 +8822,7 @@ var CalendarHeatmap = ({
|
|
|
8777
8822
|
const value = dataMap.get(key);
|
|
8778
8823
|
const x = dayLabelWidth + weekIndex * (cellSize + cellGap);
|
|
8779
8824
|
const y = monthLabelHeight + dayIndex * (cellSize + cellGap);
|
|
8780
|
-
return /* @__PURE__ */
|
|
8825
|
+
return /* @__PURE__ */ jsx120(
|
|
8781
8826
|
"rect",
|
|
8782
8827
|
{
|
|
8783
8828
|
x,
|
|
@@ -8802,7 +8847,7 @@ var CalendarHeatmap = ({
|
|
|
8802
8847
|
})
|
|
8803
8848
|
)
|
|
8804
8849
|
] }),
|
|
8805
|
-
hoveredCell && /* @__PURE__ */
|
|
8850
|
+
hoveredCell && /* @__PURE__ */ jsxs46(
|
|
8806
8851
|
"div",
|
|
8807
8852
|
{
|
|
8808
8853
|
className: "absolute z-50 px-3 py-2 text-sm bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] border border-[hsl(var(--border))] rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
|
|
@@ -8813,7 +8858,7 @@ var CalendarHeatmap = ({
|
|
|
8813
8858
|
},
|
|
8814
8859
|
children: [
|
|
8815
8860
|
getTooltipContent(hoveredCell.date, hoveredCell.value),
|
|
8816
|
-
/* @__PURE__ */
|
|
8861
|
+
/* @__PURE__ */ jsx120(
|
|
8817
8862
|
"div",
|
|
8818
8863
|
{
|
|
8819
8864
|
className: "absolute w-2 h-2 bg-[hsl(var(--popover))] rotate-45",
|
|
@@ -8901,6 +8946,7 @@ export {
|
|
|
8901
8946
|
ChevronUpIcon,
|
|
8902
8947
|
CloseIcon,
|
|
8903
8948
|
CloudIcon,
|
|
8949
|
+
Code,
|
|
8904
8950
|
CodeIcon,
|
|
8905
8951
|
CopyIcon,
|
|
8906
8952
|
DatabaseIcon,
|