@ucheeddev/refine-antd
Version:
Custom Ant Design components for Refine framework
1,580 lines (1,537 loc) • 117 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
// node_modules/dayjs/dayjs.min.js
var require_dayjs_min = __commonJS({
"node_modules/dayjs/dayjs.min.js"(exports, module) {
"use strict";
!function(t, e) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).dayjs = e();
}(exports, function() {
"use strict";
var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", c = "month", f = "quarter", h = "year", d = "date", l = "Invalid Date", $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
} }, m = function(t2, e2, n2) {
var r2 = String(t2);
return !r2 || r2.length >= e2 ? t2 : "" + Array(e2 + 1 - r2.length).join(n2) + t2;
}, v = { s: m, z: function(t2) {
var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
return (e2 <= 0 ? "+" : "-") + m(r2, 2, "0") + ":" + m(i2, 2, "0");
}, m: function t2(e2, n2) {
if (e2.date() < n2.date()) return -t2(n2, e2);
var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, c), s2 = n2 - i2 < 0, u2 = e2.clone().add(r2 + (s2 ? -1 : 1), c);
return +(-(r2 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0);
}, a: function(t2) {
return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
}, p: function(t2) {
return { M: c, y: h, w: o, d: a, D: d, h: u, m: s, s: i, ms: r, Q: f }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
}, u: function(t2) {
return void 0 === t2;
} }, g = "en", D = {};
D[g] = M;
var p = "$isDayjsObject", S = function(t2) {
return t2 instanceof _ || !(!t2 || !t2[p]);
}, w = function t2(e2, n2, r2) {
var i2;
if (!e2) return g;
if ("string" == typeof e2) {
var s2 = e2.toLowerCase();
D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2);
var u2 = e2.split("-");
if (!i2 && u2.length > 1) return t2(u2[0]);
} else {
var a2 = e2.name;
D[a2] = e2, i2 = a2;
}
return !r2 && i2 && (g = i2), i2 || !r2 && g;
}, O = function(t2, e2) {
if (S(t2)) return t2.clone();
var n2 = "object" == typeof e2 ? e2 : {};
return n2.date = t2, n2.args = arguments, new _(n2);
}, b = v;
b.l = w, b.i = S, b.w = function(t2, e2) {
return O(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
};
var _ = function() {
function M2(t2) {
this.$L = w(t2.locale, null, true), this.parse(t2), this.$x = this.$x || t2.x || {}, this[p] = true;
}
var m2 = M2.prototype;
return m2.parse = function(t2) {
this.$d = function(t3) {
var e2 = t3.date, n2 = t3.utc;
if (null === e2) return /* @__PURE__ */ new Date(NaN);
if (b.u(e2)) return /* @__PURE__ */ new Date();
if (e2 instanceof Date) return new Date(e2);
if ("string" == typeof e2 && !/Z$/i.test(e2)) {
var r2 = e2.match($);
if (r2) {
var i2 = r2[2] - 1 || 0, s2 = (r2[7] || "0").substring(0, 3);
return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2);
}
}
return new Date(e2);
}(t2), this.init();
}, m2.init = function() {
var t2 = this.$d;
this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
}, m2.$utils = function() {
return b;
}, m2.isValid = function() {
return !(this.$d.toString() === l);
}, m2.isSame = function(t2, e2) {
var n2 = O(t2);
return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
}, m2.isAfter = function(t2, e2) {
return O(t2) < this.startOf(e2);
}, m2.isBefore = function(t2, e2) {
return this.endOf(e2) < O(t2);
}, m2.$g = function(t2, e2, n2) {
return b.u(t2) ? this[e2] : this.set(n2, t2);
}, m2.unix = function() {
return Math.floor(this.valueOf() / 1e3);
}, m2.valueOf = function() {
return this.$d.getTime();
}, m2.startOf = function(t2, e2) {
var n2 = this, r2 = !!b.u(e2) || e2, f2 = b.p(t2), l2 = function(t3, e3) {
var i2 = b.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
return r2 ? i2 : i2.endOf(a);
}, $2 = function(t3, e3) {
return b.w(n2.toDate()[t3].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
}, y2 = this.$W, M3 = this.$M, m3 = this.$D, v2 = "set" + (this.$u ? "UTC" : "");
switch (f2) {
case h:
return r2 ? l2(1, 0) : l2(31, 11);
case c:
return r2 ? l2(1, M3) : l2(0, M3 + 1);
case o:
var g2 = this.$locale().weekStart || 0, D2 = (y2 < g2 ? y2 + 7 : y2) - g2;
return l2(r2 ? m3 - D2 : m3 + (6 - D2), M3);
case a:
case d:
return $2(v2 + "Hours", 0);
case u:
return $2(v2 + "Minutes", 1);
case s:
return $2(v2 + "Seconds", 2);
case i:
return $2(v2 + "Milliseconds", 3);
default:
return this.clone();
}
}, m2.endOf = function(t2) {
return this.startOf(t2, false);
}, m2.$set = function(t2, e2) {
var n2, o2 = b.p(t2), f2 = "set" + (this.$u ? "UTC" : ""), l2 = (n2 = {}, n2[a] = f2 + "Date", n2[d] = f2 + "Date", n2[c] = f2 + "Month", n2[h] = f2 + "FullYear", n2[u] = f2 + "Hours", n2[s] = f2 + "Minutes", n2[i] = f2 + "Seconds", n2[r] = f2 + "Milliseconds", n2)[o2], $2 = o2 === a ? this.$D + (e2 - this.$W) : e2;
if (o2 === c || o2 === h) {
var y2 = this.clone().set(d, 1);
y2.$d[l2]($2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d;
} else l2 && this.$d[l2]($2);
return this.init(), this;
}, m2.set = function(t2, e2) {
return this.clone().$set(t2, e2);
}, m2.get = function(t2) {
return this[b.p(t2)]();
}, m2.add = function(r2, f2) {
var d2, l2 = this;
r2 = Number(r2);
var $2 = b.p(f2), y2 = function(t2) {
var e2 = O(l2);
return b.w(e2.date(e2.date() + Math.round(t2 * r2)), l2);
};
if ($2 === c) return this.set(c, this.$M + r2);
if ($2 === h) return this.set(h, this.$y + r2);
if ($2 === a) return y2(1);
if ($2 === o) return y2(7);
var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[$2] || 1, m3 = this.$d.getTime() + r2 * M3;
return b.w(m3, this);
}, m2.subtract = function(t2, e2) {
return this.add(-1 * t2, e2);
}, m2.format = function(t2) {
var e2 = this, n2 = this.$locale();
if (!this.isValid()) return n2.invalidDate || l;
var r2 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = b.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, c2 = n2.months, f2 = n2.meridiem, h2 = function(t3, n3, i3, s3) {
return t3 && (t3[n3] || t3(e2, r2)) || i3[n3].slice(0, s3);
}, d2 = function(t3) {
return b.s(s2 % 12 || 12, t3, "0");
}, $2 = f2 || function(t3, e3, n3) {
var r3 = t3 < 12 ? "AM" : "PM";
return n3 ? r3.toLowerCase() : r3;
};
return r2.replace(y, function(t3, r3) {
return r3 || function(t4) {
switch (t4) {
case "YY":
return String(e2.$y).slice(-2);
case "YYYY":
return b.s(e2.$y, 4, "0");
case "M":
return a2 + 1;
case "MM":
return b.s(a2 + 1, 2, "0");
case "MMM":
return h2(n2.monthsShort, a2, c2, 3);
case "MMMM":
return h2(c2, a2);
case "D":
return e2.$D;
case "DD":
return b.s(e2.$D, 2, "0");
case "d":
return String(e2.$W);
case "dd":
return h2(n2.weekdaysMin, e2.$W, o2, 2);
case "ddd":
return h2(n2.weekdaysShort, e2.$W, o2, 3);
case "dddd":
return o2[e2.$W];
case "H":
return String(s2);
case "HH":
return b.s(s2, 2, "0");
case "h":
return d2(1);
case "hh":
return d2(2);
case "a":
return $2(s2, u2, true);
case "A":
return $2(s2, u2, false);
case "m":
return String(u2);
case "mm":
return b.s(u2, 2, "0");
case "s":
return String(e2.$s);
case "ss":
return b.s(e2.$s, 2, "0");
case "SSS":
return b.s(e2.$ms, 3, "0");
case "Z":
return i2;
}
return null;
}(t3) || i2.replace(":", "");
});
}, m2.utcOffset = function() {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
}, m2.diff = function(r2, d2, l2) {
var $2, y2 = this, M3 = b.p(d2), m3 = O(r2), v2 = (m3.utcOffset() - this.utcOffset()) * e, g2 = this - m3, D2 = function() {
return b.m(y2, m3);
};
switch (M3) {
case h:
$2 = D2() / 12;
break;
case c:
$2 = D2();
break;
case f:
$2 = D2() / 3;
break;
case o:
$2 = (g2 - v2) / 6048e5;
break;
case a:
$2 = (g2 - v2) / 864e5;
break;
case u:
$2 = g2 / n;
break;
case s:
$2 = g2 / e;
break;
case i:
$2 = g2 / t;
break;
default:
$2 = g2;
}
return l2 ? $2 : b.a($2);
}, m2.daysInMonth = function() {
return this.endOf(c).$D;
}, m2.$locale = function() {
return D[this.$L];
}, m2.locale = function(t2, e2) {
if (!t2) return this.$L;
var n2 = this.clone(), r2 = w(t2, e2, true);
return r2 && (n2.$L = r2), n2;
}, m2.clone = function() {
return b.w(this.$d, this);
}, m2.toDate = function() {
return new Date(this.valueOf());
}, m2.toJSON = function() {
return this.isValid() ? this.toISOString() : null;
}, m2.toISOString = function() {
return this.$d.toISOString();
}, m2.toString = function() {
return this.$d.toUTCString();
}, M2;
}(), k = _.prototype;
return O.prototype = k, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", c], ["$y", h], ["$D", d]].forEach(function(t2) {
k[t2[1]] = function(e2) {
return this.$g(e2, t2[0], t2[1]);
};
}), O.extend = function(t2, e2) {
return t2.$i || (t2(e2, _, O), t2.$i = true), O;
}, O.locale = w, O.isDayjs = S, O.unix = function(t2) {
return O(1e3 * t2);
}, O.en = D[g], O.Ls = D, O.p = {}, O;
});
}
});
// src/components/bootstrap/bootstrap.tsx
import { useNotificationProvider } from "@refinedev/antd";
import { Bootstrap as CoreBootstrap } from "@ucheeddev/refine-core";
import { Alert, App as AntdApp } from "antd";
// src/providers/config/config-provider.tsx
import {
createContext,
useCallback,
useContext,
useEffect,
useState
} from "react";
import {
ConfigProvider as AntdConfigProvider
} from "antd";
import { ThemeProvider } from "antd-style";
// src/hooks/theme-config/use-theme-config.ts
import { useMemo } from "react";
import { useServerSettingsStore } from "@ucheeddev/refine-core";
import { theme } from "antd";
// src/constants/theme-config.ts
var DEFAULT_THEME_CONFIG = {
// token: {
// colorPrimaryText: 'rgba(0, 0, 0, 0.85)',
// colorTextSecondary: 'rgba(0, 0, 0, 0.65)',
// colorTextTertiary: 'rgba(0, 0, 0, 0.45)',
// colorPrimary: '#6eb2cc',
// colorBgContainer: '#FFFFFF',
// colorBgLayout: '#F0F2F5',
// colorBorderBg: '#E8E9EA',
// fontFamily:
// "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Arial', 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
// },
// components: {
// Typography: {
// colorText: 'rgba(0, 0, 0, 0.85)',
// colorTextDescription: 'rgba(0, 0, 0, 0.65)',
// colorTextDisabled: 'rgba(0, 0, 0, 0.45)',
// },
// Card: {
// colorBgContainer: '#FFFFFF',
// headerBg: '#FFFFFF',
// boxShadowTertiary:
// '0px 1px 2px 0px #00000008,0px 1px 6px -1px #000000050px,2px 4px 0px #00000005',
// },
// Table: {
// colorBgContainer: '#fff',
// },
// Input: {
// colorBgContainer: '#fff',
// },
// InputNumber: {
// colorBgContainer: '#fff',
// },
// Calendar: {
// colorBgContainer: '#FFFFFF',
// },
// Radio: {
// colorBgContainer: '#fff',
// },
// Select: {
// colorBgContainer: '#fff',
// },
// },
};
// src/utils/is-url/is-url.ts
var isUrl = (url) => {
try {
new URL(url || "");
return true;
} catch (e) {
return false;
}
};
// src/utils/lighten-hex-color/lighten-hex-color.ts
var lightenHexColor = (color, amount) => {
amount = amount || 20;
if (!color) {
return "";
}
if (color[0] === "#") {
color = color.slice(1);
}
let r = parseInt(color.substring(0, 2), 16);
let g = parseInt(color.substring(2, 4), 16);
let b = parseInt(color.substring(4, 6), 16);
r = Math.min(255, r + amount);
g = Math.min(255, g + amount);
b = Math.min(255, b + amount);
r = r < 0 ? 0 : r;
g = g < 0 ? 0 : g;
b = b < 0 ? 0 : b;
const newColor = "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2);
return newColor;
};
// src/hooks/theme-config/use-theme-config.ts
var useThemeConfig = (props) => {
const { overrides, mode } = props;
const { token: tokenOverrides, ...overridesRest } = overrides || {};
const settings = useServerSettingsStore((state) => state.settings);
const colorPrimary = settings?.primary_color || "";
const colorPrimaryDark = settings?.primary_color_dark || lightenHexColor(colorPrimary);
const token = useMemo(() => {
const _token = {
...DEFAULT_THEME_CONFIG.token || {},
...tokenOverrides || {}
};
if (colorPrimary) {
_token.colorPrimary = mode === "light" ? colorPrimary : colorPrimaryDark;
}
return _token;
}, [tokenOverrides, colorPrimary, colorPrimaryDark, mode]);
const themeConfig = useMemo(
() => ({
...DEFAULT_THEME_CONFIG,
token,
...overridesRest || {}
}),
[token, overridesRest]
);
const customTheme = useMemo(() => {
const { darkAlgorithm, defaultAlgorithm } = theme;
const algorithm = mode === "light" ? defaultAlgorithm : darkAlgorithm;
const customTheme2 = {
...themeConfig,
cssVar: true,
algorithm,
components: {
Card: {
headerBg: mode === "dark" ? "#1F1F1F" : "#FAFAFA"
}
}
};
return customTheme2;
}, [mode, themeConfig]);
return customTheme;
};
// src/providers/config/config-provider.tsx
import { jsx } from "react/jsx-runtime";
var ConfigProviderContext = createContext(
{}
);
var ConfigProvider = ({ children, theme: themeFromProps, forceLightTheme, ...rest }) => {
const colorModeFromLocalStorage = localStorage.getItem("colorMode");
const isSystemPreferenceDark = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
const systemPreference = isSystemPreferenceDark ? "dark" : "light";
const [mode, setMode] = useState(
forceLightTheme ? "light" : colorModeFromLocalStorage || systemPreference
);
const themeConfig = useThemeConfig({
overrides: themeFromProps,
mode
});
const toggleMode = useCallback(() => {
if (forceLightTheme) {
setMode("light");
return;
}
setMode((prev) => prev === "light" ? "dark" : "light");
}, [forceLightTheme]);
useEffect(() => {
window.localStorage.setItem("colorMode", mode);
}, [mode]);
return /* @__PURE__ */ jsx(
ConfigProviderContext.Provider,
{
value: {
toggleMode,
mode,
isDarkMode: mode === "dark"
},
children: /* @__PURE__ */ jsx(AntdConfigProvider, { theme: themeConfig, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: themeConfig, appearance: mode, ...rest, children }) })
}
);
};
var useConfigProvider = () => {
const context = useContext(ConfigProviderContext);
if (!context) {
throw new Error("useConfigProvider must be used within a ConfigProvider");
}
return context;
};
// src/components/full-screen-loading/full-screen-loading.tsx
import { Spin } from "antd";
import { jsx as jsx2 } from "react/jsx-runtime";
var FullScreenLoading = () => {
return /* @__PURE__ */ jsx2(
Spin,
{
size: "large",
style: {
height: "100vh",
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center"
}
}
);
};
// src/components/bootstrap/bootstrap.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var Bootstrap = ({
theme: theme6,
forceLightTheme,
configProviderProps,
children,
notificationProvider: notificationProviderFromProps,
...rest
}) => {
return /* @__PURE__ */ jsx3(
ConfigProvider,
{
theme: theme6,
forceLightTheme,
...configProviderProps || {},
children: /* @__PURE__ */ jsx3(AntdApp, { children: /* @__PURE__ */ jsx3(
CoreBootstrap,
{
...rest,
notificationProvider: notificationProviderFromProps || useNotificationProvider,
Loading: FullScreenLoading,
Error: ({ error }) => /* @__PURE__ */ jsx3(Alert, { type: "error", message: error, showIcon: true }),
children
}
) })
}
);
};
// src/components/custom-avatar/custom-avatar.tsx
import { memo } from "react";
import { Avatar as AntdAvatar } from "antd";
import { jsx as jsx4 } from "react/jsx-runtime";
var getRandomColorFromString = (text) => {
const colors = [
"#ff9c6e",
"#ff7875",
"#ffc069",
"#ffd666",
"#fadb14",
"#95de64",
"#5cdbd3",
"#69c0ff",
"#85a5ff",
"#b37feb",
"#ff85c0"
];
let hash = 0;
for (let i = 0; i < text.length; i++) {
hash = text.charCodeAt(i) + ((hash << 5) - hash);
hash = hash & hash;
}
hash = (hash % colors.length + colors.length) % colors.length;
return colors[hash];
};
var getNameInitials = (name, count = 2) => {
const initials = name.split(" ").map((n) => n[0]).join("");
const filtered = initials.replace(/[^a-zA-Z]/g, "");
return filtered.slice(0, count).toUpperCase();
};
var CustomAvatarComponent = ({
name,
style,
...rest
}) => {
return /* @__PURE__ */ jsx4(
AntdAvatar,
{
alt: name,
size: "small",
style: {
backgroundColor: rest?.src ? "transparent" : getRandomColorFromString(name || ""),
display: "flex",
alignItems: "center",
border: "none",
...style
},
...rest,
children: getNameInitials(name || "")
}
);
};
var CustomAvatar = memo(
CustomAvatarComponent,
(prevProps, nextProps) => {
return prevProps.name === nextProps.name && prevProps.src === nextProps.src;
}
);
// src/components/email-link/email-link.tsx
import { Typography } from "antd";
import { jsx as jsx5 } from "react/jsx-runtime";
var { Link } = Typography;
var EmailLink = ({ email, style }) => {
return /* @__PURE__ */ jsx5(Link, { href: `mailto:${email}`, target: "_blank", style, children: email });
};
// src/components/field-form-title/field-form-title.tsx
import { Space, Typography as Typography2 } from "antd";
import { jsx as jsx6, jsxs } from "react/jsx-runtime";
var FieldFormTitle = ({
title,
Icon: Icon2,
iconProps,
titleStyle,
...props
}) => {
return /* @__PURE__ */ jsxs(Space, { size: 11, ...props, children: [
Icon2 && /* @__PURE__ */ jsx6(Icon2, { className: "md colorPrimary", ...iconProps }),
/* @__PURE__ */ jsx6(
Typography2.Text,
{
style: { fontSize: "15px", color: "darkslategray", ...titleStyle },
children: title
}
)
] });
};
// src/components/filter-dropdown/filter-dropdown.tsx
var import_dayjs = __toESM(require_dayjs_min());
import React2, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
import { useTranslate } from "@refinedev/core";
import { ClearOutlined, FilterOutlined } from "@ant-design/icons";
import { Button, Space as Space2 } from "antd";
import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
var FilterDropdown = (props) => {
const {
setSelectedKeys,
confirm,
clearFilters,
mapValue = (value) => value,
selectedKeys,
children
} = props;
const translate = useTranslate();
const clearFilter = useCallback2(() => {
if (clearFilters) {
clearFilters();
confirm?.();
}
}, [clearFilters, confirm]);
const onFilter = useCallback2(() => {
let keys;
if (typeof selectedKeys === "number") {
keys = `${selectedKeys}`;
} else if (import_dayjs.default.isDayjs(selectedKeys)) {
keys = [selectedKeys.toISOString()];
} else {
keys = selectedKeys;
}
setSelectedKeys(keys);
confirm?.();
}, [selectedKeys, setSelectedKeys, confirm]);
const onChange = useCallback2(
(e) => {
if (typeof e === "object") {
if (Array.isArray(e)) {
const mappedValue3 = mapValue(e, "onChange");
setSelectedKeys(mappedValue3);
confirm?.();
return;
}
const changeEvent = !e || !e.target || import_dayjs.default.isDayjs(e) ? { target: { value: e } } : e;
const { target } = changeEvent;
const mappedValue2 = mapValue(target.value, "onChange");
setSelectedKeys(mappedValue2);
return;
}
const mappedValue = mapValue(e, "onChange");
if (typeof mappedValue === "number") {
setSelectedKeys(`${mappedValue}`);
} else {
setSelectedKeys(mappedValue);
}
confirm?.();
},
[confirm, mapValue, setSelectedKeys]
);
const childrenWithProps = useMemo2(() => {
return React2.Children.map(children, (child) => {
if (React2.isValidElement(child)) {
return React2.cloneElement(child, {
onChange,
value: mapValue(selectedKeys, "value")
});
}
return child;
});
}, [children, mapValue, onChange, selectedKeys]);
return /* @__PURE__ */ jsxs2(
"div",
{
style: {
padding: 10,
display: "flex",
flexDirection: "column",
alignItems: "flex-end"
},
children: [
/* @__PURE__ */ jsx7("div", { style: { marginBottom: 12 }, children: childrenWithProps }),
/* @__PURE__ */ jsxs2(Space2, { children: [
/* @__PURE__ */ jsxs2(
Button,
{
style: { backgroundColor: "#ffff" },
danger: true,
size: "small",
onClick: () => clearFilter(),
children: [
/* @__PURE__ */ jsx7(ClearOutlined, {}),
translate("buttons.clear", "Clear")
]
}
),
/* @__PURE__ */ jsxs2(Button, { type: "primary", size: "small", onClick: () => onFilter(), children: [
/* @__PURE__ */ jsx7(FilterOutlined, {}),
" ",
translate("buttons.filter", "Filter")
] })
] })
]
}
);
};
// src/components/full-width-layout/full-width-layout.tsx
import { ThemedLayoutV2 } from "@refinedev/antd";
// src/components/header-with-menu/header-with-menu.tsx
import { Link as Link2, useMenu } from "@refinedev/core";
import { Button as Button3, Flex, Layout, Menu as Menu2 } from "antd";
import classNames from "classnames";
// src/components/current-user/current-user.tsx
import { useGetIdentity, useLogout } from "@refinedev/core";
import {
LogoutOutlined,
MailOutlined,
UserOutlined,
UserSwitchOutlined
} from "@ant-design/icons";
import { useCurrentUserRole } from "@ucheeddev/refine-core";
import { Button as Button2, Popover, Space as Space3 } from "antd";
// src/components/text/text.tsx
import { ConfigProvider as ConfigProvider2, Typography as Typography3 } from "antd";
// src/components/text/sizes.ts
var sizes = {
xs: {
fontSize: 12,
lineHeight: 20 / 12
},
sm: {
fontSize: 14,
lineHeight: 22 / 14
},
md: {
fontSize: 16,
lineHeight: 24 / 16
},
lg: {
fontSize: 20,
lineHeight: 28 / 20
},
xl: {
fontSize: 24,
lineHeight: 32 / 24
},
xxl: {
fontSize: 30,
lineHeight: 38 / 30
},
xxxl: {
fontSize: 38,
lineHeight: 46 / 38
},
huge: {
fontSize: 46,
lineHeight: 54 / 46
},
xhuge: {
fontSize: 56,
lineHeight: 64 / 56
},
xxhuge: {
fontSize: 68,
lineHeight: 76 / 68
}
};
// src/components/text/text.tsx
import { jsx as jsx8 } from "react/jsx-runtime";
var Text = ({ size = "sm", children, ...rest }) => {
return /* @__PURE__ */ jsx8(
ConfigProvider2,
{
theme: {
token: {
...sizes[size]
}
},
children: /* @__PURE__ */ jsx8(Typography3.Text, { ...rest, children })
}
);
};
// src/components/current-user/current-user.tsx
import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
var CurrentUser = () => {
const { data: user } = useGetIdentity();
const role = useCurrentUserRole();
const { mutate: logout } = useLogout();
const content = /* @__PURE__ */ jsxs3(
"div",
{
style: {
display: "flex",
flexDirection: "column"
},
children: [
/* @__PURE__ */ jsxs3(
"div",
{
style: {
padding: "12px 20px"
},
children: [
/* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsxs3(Space3, { size: 8, children: [
/* @__PURE__ */ jsx9(UserOutlined, { className: "md colorPrimary" }),
/* @__PURE__ */ jsx9(Text, { strong: true, children: user?.display_name })
] }) }),
/* @__PURE__ */ jsx9("div", { style: { paddingTop: 7 }, children: /* @__PURE__ */ jsxs3(Space3, { size: 12, children: [
/* @__PURE__ */ jsx9(MailOutlined, { className: "md colorPrimary" }),
/* @__PURE__ */ jsx9(
EmailLink,
{
email: user?.email || "",
style: { fontSize: 14, color: "#000" }
}
)
] }) }),
/* @__PURE__ */ jsx9("div", { style: { paddingTop: 7 }, children: /* @__PURE__ */ jsxs3(Space3, { size: 12, children: [
/* @__PURE__ */ jsx9(UserSwitchOutlined, { className: "md colorPrimary" }),
/* @__PURE__ */ jsx9(Text, { strong: true, children: role?.label })
] }) })
]
}
),
/* @__PURE__ */ jsx9(
"div",
{
style: {
borderTop: "1px solid #d9d9d9",
padding: "4px",
display: "flex",
flexDirection: "column",
gap: "4px"
},
children: /* @__PURE__ */ jsx9(
"div",
{
style: {
padding: "8px",
display: "flex",
flexDirection: "column",
gap: "4px"
},
children: /* @__PURE__ */ jsx9(
"div",
{
style: {
display: "flex",
flexDirection: "column",
gap: "4px"
},
children: /* @__PURE__ */ jsx9(
Button2,
{
style: { textAlign: "left" },
icon: /* @__PURE__ */ jsx9(LogoutOutlined, {}),
type: "text",
danger: true,
block: true,
onClick: () => logout(),
children: "Logout"
}
)
}
)
}
)
}
)
]
}
);
return /* @__PURE__ */ jsx9(
Popover,
{
placement: "bottomRight",
content,
trigger: "click",
overlayInnerStyle: { padding: 0 },
overlayStyle: { zIndex: 999 },
children: /* @__PURE__ */ jsx9(
CustomAvatar,
{
name: user?.display_name || "",
src: user?.avatar_url || "",
size: "default",
style: { cursor: "pointer" }
}
)
}
);
};
// src/components/icons/icon-invoicer.tsx
import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
var IconInvoicerLogo = (props) => {
const { mode } = useConfigProvider();
const isDarkMode = mode === "dark";
return /* @__PURE__ */ jsxs4(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 20,
viewBox: "0 0 24 20",
fill: "none",
...props,
children: [
/* @__PURE__ */ jsx10("title", { children: "Invoicer" }),
/* @__PURE__ */ jsx10(
"path",
{
fill: isDarkMode ? "#3E2069" : "#EFDBFF",
d: "m0 0 24 4v12L0 20V0Z"
}
),
/* @__PURE__ */ jsx10(
"path",
{
fill: isDarkMode ? "#CDA8F0" : "#531DAB",
d: "M4.5 14.015 7.54 20 24 0 4.5 14.015Z"
}
),
/* @__PURE__ */ jsx10(
"path",
{
fill: isDarkMode ? "#EBD7FA" : "#22075E",
d: "M7.54 20v-4l2.681 1.267L7.541 20Z"
}
),
/* @__PURE__ */ jsx10(
"path",
{
fill: isDarkMode ? "#AB7AE0" : "#9254DE",
d: "m0 11 4.5 3.015L24 0 7.54 16 16 20l8-20L0 11Z"
}
)
]
}
);
};
// src/components/icons/icon-moon.tsx
import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
var IconMoon = () => /* @__PURE__ */ jsxs5(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
className: "icon icon-tabler icon-tabler-moon-stars",
width: 20,
height: 20,
viewBox: "0 0 24 24",
strokeWidth: 2,
stroke: "currentColor",
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
children: [
/* @__PURE__ */ jsx11("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsx11("path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" }),
/* @__PURE__ */ jsx11("path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" }),
/* @__PURE__ */ jsx11("path", { d: "M19 11h2m-1 -1v2" })
]
}
);
// src/components/icons/icon-sun.tsx
import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
var IconSun = () => /* @__PURE__ */ jsxs6(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
className: "icon icon-tabler icon-tabler-sun",
width: 20,
height: 20,
viewBox: "0 0 24 24",
strokeWidth: "2",
stroke: "currentColor",
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
children: [
/* @__PURE__ */ jsx12("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsx12("circle", { cx: 12, cy: 12, r: 4 }),
/* @__PURE__ */ jsx12("path", { d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" })
]
}
);
// src/components/logo/logo.tsx
import { jsx as jsx13 } from "react/jsx-runtime";
var WIDTH = 120;
var HEIGHT = 120;
var Logo = ({ height, width, src, alt }) => {
height = height || HEIGHT;
width = width || WIDTH;
if (!src) {
return;
}
return /* @__PURE__ */ jsx13(
"img",
{
alt,
src,
width,
height,
style: { maxWidth: "100%", maxHeight: "100%" }
}
);
};
// src/components/sider/menu-items.tsx
import { CanAccess, pickNotDeprecated } from "@refinedev/core";
import { UnorderedListOutlined } from "@ant-design/icons";
import { Menu } from "antd";
import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
var renderMenuItems = ({
tree,
selectedKey,
Link: Link5,
siderCollapsed
}) => {
return /* @__PURE__ */ jsx14(Fragment, { children: tree.map((item) => {
const {
icon,
label,
route,
key,
name,
children,
parentName,
meta,
options
} = item;
if (children.length > 0) {
return /* @__PURE__ */ jsx14(
CanAccess,
{
resource: name.toLowerCase(),
action: "list",
params: { resource: item },
children: /* @__PURE__ */ jsx14(
Menu.SubMenu,
{
icon: icon ?? /* @__PURE__ */ jsx14(UnorderedListOutlined, {}),
title: /* @__PURE__ */ jsx14(Link5, { style: { color: "inherit" }, to: route ?? "", children: label }),
children: renderMenuItems({
tree: children,
selectedKey,
Link: Link5,
siderCollapsed
})
}
)
},
key
);
}
const isSelected = key === selectedKey;
const isRoute = !(pickNotDeprecated(meta?.parent, options?.parent, parentName) !== void 0 && children.length === 0);
return /* @__PURE__ */ jsx14(
CanAccess,
{
resource: name.toLowerCase(),
action: "list",
params: { resource: item },
children: /* @__PURE__ */ jsxs7(
Menu.Item,
{
icon: icon ?? (isRoute && /* @__PURE__ */ jsx14(UnorderedListOutlined, {})),
children: [
/* @__PURE__ */ jsx14(Link5, { to: route ?? "", children: label }),
!siderCollapsed && isSelected && /* @__PURE__ */ jsx14("div", { className: "ant-menu-tree-arrow" })
]
},
key
)
},
key
);
}) });
};
// src/components/header-with-menu/styled.tsx
import { createStyles } from "antd-style";
var useStyles = createStyles(({ css, token, isDarkMode, responsive }) => {
return {
headerContainer: {
backgroundColor: token.colorBgElevated,
padding: "0 16px",
minHeight: "48px",
height: "max-content"
},
flexContainer: {
width: "100%",
maxWidth: "1440px",
margin: "0 auto",
height: "100%"
},
headerTitleRefine: {
fontFamily: "Bricolage Grotesque, sans-serif",
color: isDarkMode ? token["purple-10"] : token["purple-8"]
},
headerTitleInvoicer: {
fontFamily: "Bricolage Grotesque, sans-serif",
color: isDarkMode ? token["purple-10"] : token["purple-8"],
fontWeight: 700
},
tabs: css`
margin-left: auto;
margin-right: auto;
width: 600px;
${responsive.mobile} {
width: 320px;
}
`,
inputSuffix: {
width: "20px",
height: "20px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: token.colorBgTextHover,
color: token.colorTextDisabled,
borderRadius: "4px",
fontSize: "12px"
},
inputPrefix: {
color: token.colorTextPlaceholder,
marginRight: "4px"
},
languageSwitchText: {
color: token.colorTextSecondary
},
languageSwitchIcon: {
color: token.colorTextTertiary,
width: "10px"
},
themeSwitch: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "32px",
width: "32px",
borderRadius: "50%",
cursor: "pointer",
flexShrink: 0,
backgroundColor: isDarkMode ? token.colorBgLayout : token.colorBgTextHover
},
rightSlot: {
marginLeft: "auto",
"@media (max-width: 1000px)": {
padding: "16px"
}
}
};
});
// src/components/header-with-menu/header-with-menu.tsx
import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
var HeaderWithMenu = ({
Search,
logo,
logoWidth,
logoHeight,
hideThemeButton
}) => {
const { menuItems, selectedKey, defaultOpenKeys } = useMenu();
const { styles: styles2 } = useStyles();
const { isDarkMode, toggleMode } = useConfigProvider();
return /* @__PURE__ */ jsx15(
Layout.Header,
{
className: classNames("print-hidden", styles2.headerContainer),
children: /* @__PURE__ */ jsxs8(
Flex,
{
align: "center",
justify: "space-between",
wrap: "wrap",
className: styles2.flexContainer,
children: [
/* @__PURE__ */ jsxs8(Flex, { align: "center", wrap: "wrap", children: [
logo ? /* @__PURE__ */ jsx15(
Link2,
{
go: {
to: "/"
},
children: /* @__PURE__ */ jsx15(Logo, { src: logo, width: logoWidth, height: logoHeight })
}
) : /* @__PURE__ */ jsx15(Fragment2, {}),
/* @__PURE__ */ jsx15(
Menu2,
{
selectedKeys: selectedKey ? [selectedKey] : [],
defaultOpenKeys,
mode: "horizontal",
className: styles2.tabs,
children: renderMenuItems({
tree: menuItems,
Link: Link2,
selectedKey,
siderCollapsed: false
})
}
)
] }),
/* @__PURE__ */ jsxs8(Flex, { align: "center", gap: 32, className: styles2.rightSlot, children: [
Search ? /* @__PURE__ */ jsx15(Search, {}) : null,
!hideThemeButton && /* @__PURE__ */ jsx15(
Button3,
{
className: styles2.themeSwitch,
type: "text",
icon: !isDarkMode ? /* @__PURE__ */ jsx15(IconMoon, {}) : /* @__PURE__ */ jsx15(IconSun, {}),
onClick: () => {
toggleMode();
}
}
),
/* @__PURE__ */ jsx15(CurrentUser, {})
] })
]
}
)
}
);
};
// src/components/full-width-layout/full-width-layout.tsx
import { jsx as jsx16 } from "react/jsx-runtime";
var FullWidthLayout = ({
headerProps,
children
}) => {
return /* @__PURE__ */ jsx16(
ThemedLayoutV2,
{
Header: () => /* @__PURE__ */ jsx16(HeaderWithMenu, { ...headerProps || {} }),
Sider: () => null,
children: /* @__PURE__ */ jsx16(
"div",
{
style: {
maxWidth: "1280px",
padding: "24px",
margin: "0 auto"
},
children
}
)
}
);
};
// src/components/header/header.tsx
import { Layout as Layout2, Space as Space4, theme as theme2 } from "antd";
import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
var { useToken } = theme2;
var HeaderWithSearch = ({
Search
}) => {
const { token } = useToken();
const headerStyles = {
backgroundColor: token.colorBgElevated,
display: "flex",
justifyContent: Search ? "space-between" : "flex-end",
alignItems: "center",
padding: "0px 24px",
height: "64px",
position: "sticky",
top: 0,
zIndex: 999
};
return /* @__PURE__ */ jsxs9(Layout2.Header, { style: headerStyles, children: [
Search ? /* @__PURE__ */ jsx17(Search, {}) : null,
/* @__PURE__ */ jsx17(Space4, { align: "center", size: "middle", children: /* @__PURE__ */ jsx17(CurrentUser, {}) })
] });
};
// src/components/image-upload/image-upload.tsx
import { Image, Upload } from "antd";
// src/components/upload-button/upload-button.tsx
import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
var UploadButton = ({ icon, label }) => {
return /* @__PURE__ */ jsxs10("button", { style: { border: 0, background: "none" }, type: "button", children: [
icon,
/* @__PURE__ */ jsx18("div", { style: { marginTop: 8 }, children: label })
] });
};
// src/components/image-upload/image-upload.tsx
import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
var ImageUpload = ({
listType,
fileList,
onPreview,
onChange,
previewImage,
previewImageOpen,
onVisibleChange,
afterOpenChange,
onRemove,
multiple,
disabled,
...rest
}) => {
return /* @__PURE__ */ jsxs11(Fragment3, { children: [
/* @__PURE__ */ jsx19(
Upload,
{
listType: listType || "picture-card",
fileList,
onPreview,
onChange,
beforeUpload: () => false,
onRemove,
multiple,
disabled,
...rest,
children: fileList && fileList.length >= 1 && !multiple ? null : /* @__PURE__ */ jsx19(UploadButton, {})
}
),
previewImage && /* @__PURE__ */ jsx19(
Image,
{
wrapperStyle: { display: "none" },
preview: {
visible: previewImageOpen,
onVisibleChange,
afterOpenChange
},
src: previewImage
}
)
] });
};
// src/components/layout/layout.tsx
import { ThemedLayoutContextProvider } from "@refinedev/antd";
import { Grid as Grid2, Layout as AntdLayout } from "antd";
// src/context/layout/layout-context.ts
import { createContext as createContext2, useContext as useContext2 } from "react";
var DEFAULT_VALUE = {
noPadding: false,
enableLayoutPadding: () => null,
disableLayoutPadding: () => null
};
var LayoutContext = createContext2(DEFAULT_VALUE);
var useLayoutContext = () => useContext2(LayoutContext);
// src/components/layout-context-provider/layout-context-provider.tsx
import { useCallback as useCallback3, useState as useState2 } from "react";
import { jsx as jsx20 } from "react/jsx-runtime";
var LayoutContextProvider = ({
children
}) => {
const [noPadding, setNoPadding] = useState2(false);
const enableLayoutPadding = useCallback3(() => {
setNoPadding(false);
}, []);
const disableLayoutPadding = useCallback3(() => {
setNoPadding(true);
}, []);
const value = { noPadding, enableLayoutPadding, disableLayoutPadding };
return /* @__PURE__ */ jsx20(LayoutContext.Provider, { value, children });
};
// src/components/sider/sider.tsx
import { Grid } from "antd";
// src/components/sider/collapse-sider.tsx
import { useMemo as useMemo3 } from "react";
import { useThemedLayoutContext } from "@refinedev/antd";
import { useLink as useLink2, useMenu as useMenu2 } from "@refinedev/core";
import { LeftCircleFilled, RightCircleOutlined } from "@ant-design/icons";
import { Button as Button4, Layout as Layout3, theme as theme4 } from "antd";
// src/components/title/title.tsx
import { useLink } from "@refinedev/core";
import { Space as Space5, theme as theme3, Typography as Typography4 } from "antd";
import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
var { useToken: useToken2 } = theme3;
var Title = ({
name,
logo,
collapsed,
wrapperStyles,
logoWidth,
logoHeight,
gap,
flexRow
}) => {
const { token } = useToken2();
const Link5 = useLink();
return /* @__PURE__ */ jsx21(
Link5,
{
to: "/",
style: {
display: "inline-block",
textDecoration: "none"
},
children: /* @__PURE__ */ jsxs12(
Space5,
{
style: {
display: "flex",
flexDirection: flexRow ? "row" : "column",
gap: gap || "1rem",
alignItems: "center",
fontSize: "inherit",
...wrapperStyles
},
children: [
/* @__PURE__ */ jsx21(
"div",
{
style: {
color: token.colorPrimary
},
children: /* @__PURE__ */ jsx21(Logo, { src: logo, width: logoWidth, height: logoHeight })
}
),
!collapsed && /* @__PURE__ */ jsx21(
Typography4.Title,
{
style: {
fontSize: "inherit",
marginBottom: 0,
fontWeight: 700
},
children: name
}
)
]
}
)
}
);
};
// src/components/sider/sider-menu.tsx
import { Menu as Menu3 } from "antd";
import { jsx as jsx22 } from "react/jsx-runtime";
var renderSiderMenu = ({
Link: Link5,
selectedKey,
defaultOpenKeys,
setMobileSiderOpen,
menuItems,
siderCollapsed
}) => {
return /* @__PURE__ */ jsx22(
Menu3,
{
selectedKeys: selectedKey ? [selectedKey] : [],
defaultOpenKeys,
mode: "inline",
style: {
paddingTop: "8px",
border: "none",
overflow: "auto",
height: "calc(100% - 72px)",
background: "transparent"
},
onClick: () => {
setMobileSiderOpen(false);
},
children: renderMenuItems({
tree: menuItems,
selectedKey,
Link: Link5,
siderCollapsed
})
}
);
};
// src/components/sider/collapse-sider.tsx
import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
var CollapseSider = ({ titleProps }) => {
const { token } = theme4.useToken();
const Link5 = useLink2();
const { menuItems, selectedKey, defaultOpenKeys } = useMenu2();
const { siderCollapsed, setSiderCollapsed, setMobileSiderOpen } = useThemedLayoutContext();
const siderStyles = useMemo3(
() => ({
backgroundColor: token.colorBgContainer,
borderRight: `1px solid ${token.colorBorderBg}`,
position: "sticky",
top: 0,
left: 0,
height: "100vh",
zIndex: 999
}),
[token.colorBgContainer, token.colorBorderBg]
);
return /* @__PURE__ */ jsxs13(
Layout3.Sider,
{
style: siderStyles,
width: 256,
collapsible: true,
collapsed: siderCollapsed,
onCollapse: (collapsed, type) => {
if (type === "clickTrigger") {
setSiderCollapsed(collapsed);
}
},
collapsedWidth: 80,
breakpoint: "lg",
trigger: /* @__PURE__ */ jsx23(
Button4,
{
type: "text",
style: {
borderRadius: 0,
height: "100%",
width: "100%",
backgroundColor: token.colorBgElevated,
borderRight: `1px solid ${token.colorBorderBg}`
},
children: siderCollapsed ? /* @__PURE__ */ jsx23(
RightCircleOutlined,
{
style: {
color: token.colorPrimary
}
}
) : /* @__PURE__ */ jsx