acemyjob-ui
Version:
A React component library for job search and career management applications
747 lines (746 loc) • 34.3 kB
JavaScript
import ne, { useState as C, createContext as ce, useEffect as te, useContext as ie } from "react";
import { Dialog as ue, DialogBackdrop as me, DialogPanel as de, TransitionChild as ve } from "@headlessui/react";
import { XMarkIcon as he, Bars3Icon as xe } from "@heroicons/react/24/outline";
var k = { exports: {} }, V = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var I;
function fe() {
if (I) return V;
I = 1;
var s = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
function t(o, i, l) {
var x = null;
if (l !== void 0 && (x = "" + l), i.key !== void 0 && (x = "" + i.key), "key" in i) {
l = {};
for (var f in i)
f !== "key" && (l[f] = i[f]);
} else l = i;
return i = l.ref, {
$$typeof: s,
type: o,
key: x,
ref: i !== void 0 ? i : null,
props: l
};
}
return V.Fragment = n, V.jsx = t, V.jsxs = t, V;
}
var w = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var U;
function ge() {
return U || (U = 1, process.env.NODE_ENV !== "production" && function() {
function s(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === se ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case E:
return "Fragment";
case X:
return "Profiler";
case q:
return "StrictMode";
case K:
return "Suspense";
case ee:
return "SuspenseList";
case ae:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case J:
return "Portal";
case Q:
return (e.displayName || "Context") + ".Provider";
case H:
return (e._context.displayName || "Context") + ".Consumer";
case Z:
var a = e.render;
return e = e.displayName, e || (e = a.displayName || a.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case re:
return a = e.displayName || null, a !== null ? a : s(e.type) || "Memo";
case O:
a = e._payload, e = e._init;
try {
return s(e(a));
} catch {
}
}
return null;
}
function n(e) {
return "" + e;
}
function t(e) {
try {
n(e);
var a = !1;
} catch {
a = !0;
}
if (a) {
a = console;
var c = a.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return c.call(
a,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
u
), n(e);
}
}
function o(e) {
if (e === E) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === O)
return "<...>";
try {
var a = s(e);
return a ? "<" + a + ">" : "<...>";
} catch {
return "<...>";
}
}
function i() {
var e = T.A;
return e === null ? null : e.getOwner();
}
function l() {
return Error("react-stack-top-frame");
}
function x(e) {
if (L.call(e, "key")) {
var a = Object.getOwnPropertyDescriptor(e, "key").get;
if (a && a.isReactWarning) return !1;
}
return e.key !== void 0;
}
function f(e, a) {
function c() {
D || (D = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
a
));
}
c.isReactWarning = !0, Object.defineProperty(e, "key", {
get: c,
configurable: !0
});
}
function g() {
var e = s(this.type);
return M[e] || (M[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function j(e, a, c, u, h, v, _, S) {
return c = v.ref, e = {
$$typeof: P,
type: e,
key: a,
props: v,
_owner: h
}, (c !== void 0 ? c : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: g
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: _
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: S
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function d(e, a, c, u, h, v, _, S) {
var m = a.children;
if (m !== void 0)
if (u)
if (oe(m)) {
for (u = 0; u < m.length; u++)
p(m[u]);
Object.freeze && Object.freeze(m);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else p(m);
if (L.call(a, "key")) {
m = s(e);
var b = Object.keys(a).filter(function(le) {
return le !== "key";
});
u = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", z[m + u] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
u,
m,
b,
m
), z[m + u] = !0);
}
if (m = null, c !== void 0 && (t(c), m = "" + c), x(a) && (t(a.key), m = "" + a.key), "key" in a) {
c = {};
for (var A in a)
A !== "key" && (c[A] = a[A]);
} else c = a;
return m && f(
c,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), j(
e,
m,
v,
h,
i(),
c,
_,
S
);
}
function p(e) {
typeof e == "object" && e !== null && e.$$typeof === P && e._store && (e._store.validated = 1);
}
var y = ne, P = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), E = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), H = Symbol.for("react.consumer"), Q = Symbol.for("react.context"), Z = Symbol.for("react.forward_ref"), K = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), re = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), T = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, oe = Array.isArray, R = console.createTask ? console.createTask : function() {
return null;
};
y = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var D, M = {}, Y = y["react-stack-bottom-frame"].bind(
y,
l
)(), F = R(o(l)), z = {};
w.Fragment = E, w.jsx = function(e, a, c, u, h) {
var v = 1e4 > T.recentlyCreatedOwnerStacks++;
return d(
e,
a,
c,
!1,
u,
h,
v ? Error("react-stack-top-frame") : Y,
v ? R(o(e)) : F
);
}, w.jsxs = function(e, a, c, u, h) {
var v = 1e4 > T.recentlyCreatedOwnerStacks++;
return d(
e,
a,
c,
!0,
u,
h,
v ? Error("react-stack-top-frame") : Y,
v ? R(o(e)) : F
);
};
}()), w;
}
var $;
function be() {
return $ || ($ = 1, process.env.NODE_ENV === "production" ? k.exports = fe() : k.exports = ge()), k.exports;
}
var r = be();
function N(...s) {
return s.filter(Boolean).join(" ");
}
function Re({ company: s, profile: n, navigation: t }) {
const [o, i] = C(!1);
return /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsxs("div", { children: [
/* @__PURE__ */ r.jsxs(ue, { open: o, onClose: i, className: "relative z-50 lg:hidden", children: [
/* @__PURE__ */ r.jsx(
me,
{
transition: !0,
className: "fixed inset-0 bg-gray-900/80 transition-opacity duration-300 ease-linear data-closed:opacity-0"
}
),
/* @__PURE__ */ r.jsx("div", { className: "fixed inset-0 flex", children: /* @__PURE__ */ r.jsxs(
de,
{
transition: !0,
className: "relative mr-16 flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full",
children: [
/* @__PURE__ */ r.jsx(ve, { children: /* @__PURE__ */ r.jsx("div", { className: "absolute top-0 left-full flex w-16 justify-center pt-5 duration-300 ease-in-out data-closed:opacity-0", children: /* @__PURE__ */ r.jsxs("button", { type: "button", onClick: () => i(!1), className: "-m-2.5 p-2.5", children: [
/* @__PURE__ */ r.jsx("span", { className: "sr-only", children: "Close sidebar" }),
/* @__PURE__ */ r.jsx(he, { "aria-hidden": "true", className: "size-6 text-white" })
] }) }) }),
/* @__PURE__ */ r.jsxs("div", { className: "flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-2", children: [
/* @__PURE__ */ r.jsx("div", { className: "flex h-16 shrink-0 items-center", children: /* @__PURE__ */ r.jsx(
"img",
{
alt: s.name,
src: s.logo,
className: "h-8 w-auto"
}
) }),
/* @__PURE__ */ r.jsx("nav", { className: "flex flex-1 flex-col", children: /* @__PURE__ */ r.jsx("ul", { role: "list", className: "flex flex-1 flex-col gap-y-7", children: /* @__PURE__ */ r.jsx("li", { children: /* @__PURE__ */ r.jsx("ul", { role: "list", className: "-mx-2 space-y-1", children: t.map((l) => /* @__PURE__ */ r.jsx("li", { children: /* @__PURE__ */ r.jsxs(
"a",
{
href: l.href,
className: N(
l.current ? "bg-indigo-700 text-white" : "text-indigo-200 hover:bg-indigo-700 hover:text-white",
"group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold"
),
children: [
/* @__PURE__ */ r.jsx(
l.icon,
{
"aria-hidden": "true",
className: N(
l.current ? "text-white" : "text-indigo-200 group-hover:text-white",
"size-6 shrink-0"
)
}
),
l.name
]
}
) }, l.name)) }) }) }) })
] })
]
}
) })
] }),
/* @__PURE__ */ r.jsx("div", { className: "hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col", children: /* @__PURE__ */ r.jsxs("div", { className: "flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6", children: [
/* @__PURE__ */ r.jsx("div", { className: "flex h-16 shrink-0 items-center", children: /* @__PURE__ */ r.jsx(
"img",
{
alt: s.name,
src: s.logo,
className: "h-8 w-auto"
}
) }),
/* @__PURE__ */ r.jsx("nav", { className: "flex flex-1 flex-col", children: /* @__PURE__ */ r.jsxs("ul", { role: "list", className: "flex flex-1 flex-col gap-y-7", children: [
/* @__PURE__ */ r.jsx("li", { children: /* @__PURE__ */ r.jsx("ul", { role: "list", className: "-mx-2 space-y-1", children: t.map((l) => /* @__PURE__ */ r.jsx("li", { children: /* @__PURE__ */ r.jsxs(
"a",
{
href: l.href,
className: N(
l.current ? "bg-indigo-700 text-white" : "text-indigo-200 hover:bg-indigo-700 hover:text-white",
"group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold"
),
children: [
/* @__PURE__ */ r.jsx(
l.icon,
{
"aria-hidden": "true",
className: N(
l.current ? "text-white" : "text-indigo-200 group-hover:text-white",
"size-6 shrink-0"
)
}
),
l.name
]
}
) }, l.name)) }) }),
/* @__PURE__ */ r.jsx("li", { className: "-mx-6 mt-auto", children: /* @__PURE__ */ r.jsxs(
"a",
{
href: "#",
className: "flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-white hover:bg-indigo-700",
children: [
/* @__PURE__ */ r.jsx(
"img",
{
alt: n.name,
src: n.image,
className: "size-8 rounded-full bg-indigo-700"
}
),
/* @__PURE__ */ r.jsx("span", { className: "sr-only", children: "Your profile" }),
/* @__PURE__ */ r.jsx("span", { "aria-hidden": "true", children: n.name })
]
}
) })
] }) })
] }) }),
/* @__PURE__ */ r.jsxs("div", { className: "sticky top-0 z-40 flex items-center gap-x-6 bg-indigo-600 px-4 py-4 shadow-xs sm:px-6 lg:hidden", children: [
/* @__PURE__ */ r.jsxs("button", { type: "button", onClick: () => i(!0), className: "-m-2.5 p-2.5 text-indigo-200 lg:hidden", children: [
/* @__PURE__ */ r.jsx("span", { className: "sr-only", children: "Open sidebar" }),
/* @__PURE__ */ r.jsx(xe, { "aria-hidden": "true", className: "size-6" })
] }),
/* @__PURE__ */ r.jsx("div", { className: "flex-1 text-sm/6 font-semibold text-white", children: "Dashboard" }),
/* @__PURE__ */ r.jsxs("a", { href: "#", children: [
/* @__PURE__ */ r.jsx("span", { className: "sr-only", children: "Your profile" }),
/* @__PURE__ */ r.jsx(
"img",
{
alt: n.name,
src: n.image,
className: "size-8 rounded-full bg-indigo-700"
}
)
] })
] })
] }) });
}
const B = (s) => s.replace("--color-", "bg-"), pe = ({ name: s, cssVar: n, value: t }) => {
const o = `rgb(${t})`;
return /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col items-center space-y-2 p-3 rounded-lg border border-border-subtle bg-surface hover:bg-surface-variant transition-colors", children: [
/* @__PURE__ */ r.jsx(
"div",
{
className: `w-16 h-16 rounded-lg border border-border shadow-sm ${B(n)}`
}
),
/* @__PURE__ */ r.jsxs("div", { className: "text-center", children: [
/* @__PURE__ */ r.jsx("div", { className: "text-sm font-medium text-text-primary", children: s }),
/* @__PURE__ */ r.jsx("div", { className: "text-xs text-text-muted font-mono", children: n }),
/* @__PURE__ */ r.jsx("div", { className: "text-xs text-text-secondary", children: o })
] })
] });
}, W = ({ title: s, colors: n }) => /* @__PURE__ */ r.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ r.jsx("h3", { className: "text-lg font-semibold text-text-primary border-b border-border-subtle pb-2", children: s }),
/* @__PURE__ */ r.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-11 gap-4", children: n.map((t) => /* @__PURE__ */ r.jsx(pe, { ...t }, t.name)) })
] }), Ve = () => {
const s = [
{
title: "Success Colors (Green)",
colors: [
{ name: "50", cssVar: "--color-success-50", value: "240 253 244" },
{ name: "100", cssVar: "--color-success-100", value: "220 252 231" },
{ name: "200", cssVar: "--color-success-200", value: "187 247 208" },
{ name: "300", cssVar: "--color-success-300", value: "134 239 172" },
{ name: "400", cssVar: "--color-success-400", value: "74 222 128" },
{ name: "500", cssVar: "--color-success-500", value: "34 197 94" },
{ name: "600", cssVar: "--color-success-600", value: "22 163 74" },
{ name: "700", cssVar: "--color-success-700", value: "21 128 61" },
{ name: "800", cssVar: "--color-success-800", value: "22 101 52" },
{ name: "900", cssVar: "--color-success-900", value: "20 83 45" },
{ name: "950", cssVar: "--color-success-950", value: "5 46 22" }
]
},
{
title: "Warning Colors (Yellow)",
colors: [
{ name: "50", cssVar: "--color-warning-50", value: "254 252 232" },
{ name: "100", cssVar: "--color-warning-100", value: "254 249 195" },
{ name: "200", cssVar: "--color-warning-200", value: "254 240 138" },
{ name: "300", cssVar: "--color-warning-300", value: "253 224 71" },
{ name: "400", cssVar: "--color-warning-400", value: "250 204 21" },
{ name: "500", cssVar: "--color-warning-500", value: "234 179 8" },
{ name: "600", cssVar: "--color-warning-600", value: "202 138 4" },
{ name: "700", cssVar: "--color-warning-700", value: "161 98 7" },
{ name: "800", cssVar: "--color-warning-800", value: "133 77 14" },
{ name: "900", cssVar: "--color-warning-900", value: "113 63 18" },
{ name: "950", cssVar: "--color-warning-950", value: "66 32 6" }
]
},
{
title: "Error Colors (Red)",
colors: [
{ name: "50", cssVar: "--color-error-50", value: "254 242 242" },
{ name: "100", cssVar: "--color-error-100", value: "254 226 226" },
{ name: "200", cssVar: "--color-error-200", value: "254 202 202" },
{ name: "300", cssVar: "--color-error-300", value: "252 165 165" },
{ name: "400", cssVar: "--color-error-400", value: "248 113 113" },
{ name: "500", cssVar: "--color-error-500", value: "239 68 68" },
{ name: "600", cssVar: "--color-error-600", value: "220 38 38" },
{ name: "700", cssVar: "--color-error-700", value: "185 28 28" },
{ name: "800", cssVar: "--color-error-800", value: "153 27 27" },
{ name: "900", cssVar: "--color-error-900", value: "127 29 29" },
{ name: "950", cssVar: "--color-error-950", value: "69 10 10" }
]
}
], n = [
{
title: "Reseda Green",
colors: [
{ name: "DEFAULT", cssVar: "--color-reseda-green", value: "121 125 98" },
{ name: "100", cssVar: "--color-reseda-green-100", value: "24 25 20" },
{ name: "200", cssVar: "--color-reseda-green-200", value: "49 50 39" },
{ name: "300", cssVar: "--color-reseda-green-300", value: "73 75 59" },
{ name: "400", cssVar: "--color-reseda-green-400", value: "97 101 79" },
{ name: "500", cssVar: "--color-reseda-green-500", value: "121 125 98" },
{ name: "600", cssVar: "--color-reseda-green-600", value: "150 154 127" },
{ name: "700", cssVar: "--color-reseda-green-700", value: "177 180 159" },
{ name: "800", cssVar: "--color-reseda-green-800", value: "203 205 191" },
{ name: "900", cssVar: "--color-reseda-green-900", value: "229 230 223" }
]
},
{
title: "Moss Green",
colors: [
{ name: "DEFAULT", cssVar: "--color-moss-green", value: "155 155 122" },
{ name: "100", cssVar: "--color-moss-green-100", value: "31 31 24" },
{ name: "200", cssVar: "--color-moss-green-200", value: "63 63 47" },
{ name: "300", cssVar: "--color-moss-green-300", value: "94 94 71" },
{ name: "400", cssVar: "--color-moss-green-400", value: "126 126 95" },
{ name: "500", cssVar: "--color-moss-green-500", value: "155 155 122" },
{ name: "600", cssVar: "--color-moss-green-600", value: "174 174 148" },
{ name: "700", cssVar: "--color-moss-green-700", value: "194 194 175" },
{ name: "800", cssVar: "--color-moss-green-800", value: "215 215 202" },
{ name: "900", cssVar: "--color-moss-green-900", value: "235 235 228" }
]
},
{
title: "Khaki",
colors: [
{ name: "DEFAULT", cssVar: "--color-khaki", value: "186 165 135" },
{ name: "100", cssVar: "--color-khaki-100", value: "41 34 23" },
{ name: "200", cssVar: "--color-khaki-200", value: "82 67 47" },
{ name: "300", cssVar: "--color-khaki-300", value: "122 101 70" },
{ name: "400", cssVar: "--color-khaki-400", value: "163 134 94" },
{ name: "500", cssVar: "--color-khaki-500", value: "186 165 135" },
{ name: "600", cssVar: "--color-khaki-600", value: "200 183 159" },
{ name: "700", cssVar: "--color-khaki-700", value: "214 201 183" },
{ name: "800", cssVar: "--color-khaki-800", value: "227 219 207" },
{ name: "900", cssVar: "--color-khaki-900", value: "241 237 231" }
]
},
{
title: "Desert Sand",
colors: [
{ name: "DEFAULT", cssVar: "--color-desert-sand", value: "217 174 148" },
{ name: "100", cssVar: "--color-desert-sand-100", value: "54 33 19" },
{ name: "200", cssVar: "--color-desert-sand-200", value: "109 65 38" },
{ name: "300", cssVar: "--color-desert-sand-300", value: "163 98 57" },
{ name: "400", cssVar: "--color-desert-sand-400", value: "199 135 95" },
{ name: "500", cssVar: "--color-desert-sand-500", value: "217 174 148" },
{ name: "600", cssVar: "--color-desert-sand-600", value: "225 191 170" },
{ name: "700", cssVar: "--color-desert-sand-700", value: "233 207 192" },
{ name: "800", cssVar: "--color-desert-sand-800", value: "240 223 213" },
{ name: "900", cssVar: "--color-desert-sand-900", value: "248 239 234" }
]
},
{
title: "Peach Yellow",
colors: [
{ name: "DEFAULT", cssVar: "--color-peach-yellow", value: "241 220 167" },
{ name: "100", cssVar: "--color-peach-yellow-100", value: "71 54 11" },
{ name: "200", cssVar: "--color-peach-yellow-200", value: "141 107 22" },
{ name: "300", cssVar: "--color-peach-yellow-300", value: "212 161 33" },
{ name: "400", cssVar: "--color-peach-yellow-400", value: "230 192 96" },
{ name: "500", cssVar: "--color-peach-yellow-500", value: "241 220 167" },
{ name: "600", cssVar: "--color-peach-yellow-600", value: "244 227 184" },
{ name: "700", cssVar: "--color-peach-yellow-700", value: "247 234 202" },
{ name: "800", cssVar: "--color-peach-yellow-800", value: "249 241 220" },
{ name: "900", cssVar: "--color-peach-yellow-900", value: "252 248 237" }
]
},
{
title: "Sunglow",
colors: [
{ name: "DEFAULT", cssVar: "--color-sunglow", value: "255 203 105" },
{ name: "100", cssVar: "--color-sunglow-100", value: "72 47 0" },
{ name: "200", cssVar: "--color-sunglow-200", value: "145 94 0" },
{ name: "300", cssVar: "--color-sunglow-300", value: "217 141 0" },
{ name: "400", cssVar: "--color-sunglow-400", value: "255 178 35" },
{ name: "500", cssVar: "--color-sunglow-500", value: "255 203 105" },
{ name: "600", cssVar: "--color-sunglow-600", value: "255 214 137" },
{ name: "700", cssVar: "--color-sunglow-700", value: "255 224 166" },
{ name: "800", cssVar: "--color-sunglow-800", value: "255 234 196" },
{ name: "900", cssVar: "--color-sunglow-900", value: "255 245 225" }
]
},
{
title: "Earth Yellow",
colors: [
{ name: "DEFAULT", cssVar: "--color-earth-yellow", value: "232 172 101" },
{ name: "100", cssVar: "--color-earth-yellow-100", value: "58 36 9" },
{ name: "200", cssVar: "--color-earth-yellow-200", value: "115 71 17" },
{ name: "300", cssVar: "--color-earth-yellow-300", value: "173 107 26" },
{ name: "400", cssVar: "--color-earth-yellow-400", value: "223 142 42" },
{ name: "500", cssVar: "--color-earth-yellow-500", value: "232 172 101" },
{ name: "600", cssVar: "--color-earth-yellow-600", value: "236 189 131" },
{ name: "700", cssVar: "--color-earth-yellow-700", value: "241 205 162" },
{ name: "800", cssVar: "--color-earth-yellow-800", value: "246 222 193" },
{ name: "900", cssVar: "--color-earth-yellow-900", value: "250 238 224" }
]
},
{
title: "Persian Orange",
colors: [
{ name: "DEFAULT", cssVar: "--color-persian-orange", value: "208 140 96" },
{ name: "100", cssVar: "--color-persian-orange-100", value: "47 27 14" },
{ name: "200", cssVar: "--color-persian-orange-200", value: "94 55 28" },
{ name: "300", cssVar: "--color-persian-orange-300", value: "141 82 42" },
{ name: "400", cssVar: "--color-persian-orange-400", value: "188 109 56" },
{ name: "500", cssVar: "--color-persian-orange-500", value: "208 140 96" },
{ name: "600", cssVar: "--color-persian-orange-600", value: "217 165 129" },
{ name: "700", cssVar: "--color-persian-orange-700", value: "227 187 161" },
{ name: "800", cssVar: "--color-persian-orange-800", value: "236 210 192" },
{ name: "900", cssVar: "--color-persian-orange-900", value: "246 232 224" }
]
},
{
title: "Chamoisee",
colors: [
{ name: "DEFAULT", cssVar: "--color-chamoisee", value: "181 132 99" },
{ name: "100", cssVar: "--color-chamoisee-100", value: "38 26 18" },
{ name: "200", cssVar: "--color-chamoisee-200", value: "76 52 36" },
{ name: "300", cssVar: "--color-chamoisee-300", value: "114 78 54" },
{ name: "400", cssVar: "--color-chamoisee-400", value: "153 104 72" },
{ name: "500", cssVar: "--color-chamoisee-500", value: "181 132 99" },
{ name: "600", cssVar: "--color-chamoisee-600", value: "196 157 130" },
{ name: "700", cssVar: "--color-chamoisee-700", value: "211 181 161" },
{ name: "800", cssVar: "--color-chamoisee-800", value: "226 206 193" },
{ name: "900", cssVar: "--color-chamoisee-900", value: "240 230 224" }
]
},
{
title: "Beaver",
colors: [
{ name: "DEFAULT", cssVar: "--color-beaver", value: "153 123 102" },
{ name: "100", cssVar: "--color-beaver-100", value: "31 25 20" },
{ name: "200", cssVar: "--color-beaver-200", value: "61 49 41" },
{ name: "300", cssVar: "--color-beaver-300", value: "92 74 61" },
{ name: "400", cssVar: "--color-beaver-400", value: "122 99 82" },
{ name: "500", cssVar: "--color-beaver-500", value: "153 123 102" },
{ name: "600", cssVar: "--color-beaver-600", value: "173 150 133" },
{ name: "700", cssVar: "--color-beaver-700", value: "194 176 163" },
{ name: "800", cssVar: "--color-beaver-800", value: "214 202 194" },
{ name: "900", cssVar: "--color-beaver-900", value: "235 229 224" }
]
}
], t = [
{ name: "Background", cssVar: "--color-background" },
{ name: "Surface", cssVar: "--color-surface" },
{ name: "Surface Variant", cssVar: "--color-surface-variant" },
{ name: "Text Primary", cssVar: "--color-text-primary" },
{ name: "Text Secondary", cssVar: "--color-text-secondary" },
{ name: "Text Muted", cssVar: "--color-text-muted" },
{ name: "Border", cssVar: "--color-border" },
{ name: "Border Subtle", cssVar: "--color-border-subtle" }
];
return /* @__PURE__ */ r.jsxs("div", { className: "p-8 space-y-8 bg-background min-h-screen", children: [
/* @__PURE__ */ r.jsxs("div", { className: "text-center space-y-2", children: [
/* @__PURE__ */ r.jsx("h1", { className: "text-3xl font-bold text-text-primary", children: "AceMyJob Color Palette" }),
/* @__PURE__ */ r.jsx("p", { className: "text-text-secondary", children: "Your complete design system color reference" })
] }),
n.map((o) => /* @__PURE__ */ r.jsx(W, { ...o }, o.title)),
s.map((o) => /* @__PURE__ */ r.jsx(W, { ...o }, o.title)),
/* @__PURE__ */ r.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ r.jsx("h3", { className: "text-lg font-semibold text-text-primary border-b border-border-subtle pb-2", children: "Semantic Colors (Theme-aware)" }),
/* @__PURE__ */ r.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: t.map((o) => /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col items-center space-y-2 p-3 rounded-lg border border-border-subtle bg-surface hover:bg-surface-variant transition-colors", children: [
/* @__PURE__ */ r.jsx(
"div",
{
className: `w-16 h-16 rounded-lg border border-border shadow-sm ${B(o.cssVar)}`
}
),
/* @__PURE__ */ r.jsxs("div", { className: "text-center", children: [
/* @__PURE__ */ r.jsx("div", { className: "text-sm font-medium text-text-primary", children: o.name }),
/* @__PURE__ */ r.jsx("div", { className: "text-xs text-text-muted font-mono", children: o.cssVar })
] })
] }, o.name)) })
] }),
/* @__PURE__ */ r.jsx("div", { className: "text-center pt-8 border-t border-border-subtle", children: /* @__PURE__ */ r.jsx("p", { className: "text-text-muted text-sm", children: "Toggle between light and dark themes to see how semantic colors adapt" }) })
] });
}, G = ce(void 0), we = () => {
const s = ie(G);
if (s === void 0)
throw new Error("useTheme must be used within a ThemeProvider");
return s;
}, je = ({
children: s,
defaultTheme: n = "system",
storageKey: t = "acemyjob-ui-theme"
}) => {
const [o, i] = C(() => typeof window < "u" && localStorage.getItem(t) || n), [l, x] = C("light");
te(() => {
const g = window.document.documentElement, j = () => {
let d;
o === "system" ? d = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : d = o, x(d), g.classList.remove("light", "dark"), g.classList.add(d);
};
if (j(), o === "system") {
const d = window.matchMedia("(prefers-color-scheme: dark)"), p = () => j();
return d.addEventListener("change", p), () => d.removeEventListener("change", p);
}
}, [o]);
const f = {
theme: o,
setTheme: (g) => {
localStorage.setItem(t, g), i(g);
},
resolvedTheme: l
};
return /* @__PURE__ */ r.jsx(G.Provider, { value: f, children: s });
}, ye = () => {
const { theme: s, setTheme: n } = we(), t = () => {
n(s === "light" ? "dark" : s === "dark" ? "system" : "light");
}, o = () => {
switch (s) {
case "light":
return /* @__PURE__ */ r.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) });
case "dark":
return /* @__PURE__ */ r.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
case "system":
return /* @__PURE__ */ r.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) });
}
}, i = () => {
switch (s) {
case "light":
return "Light";
case "dark":
return "Dark";
case "system":
return "System";
}
};
return /* @__PURE__ */ r.jsxs(
"button",
{
onClick: t,
className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary bg-surface hover:bg-surface-variant border border-border-subtle rounded-md transition-colors",
"aria-label": `Current theme: ${i()}. Click to cycle themes.`,
children: [
o(),
/* @__PURE__ */ r.jsx("span", { className: "hidden sm:inline", children: i() })
]
}
);
}, ke = () => /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ r.jsx("div", { className: "fixed top-4 right-4 z-10", children: /* @__PURE__ */ r.jsx(ye, {}) }),
/* @__PURE__ */ r.jsx(Ve, {})
] }), _e = () => /* @__PURE__ */ r.jsx(je, { defaultTheme: "system", storageKey: "acemyjob-demo-theme", children: /* @__PURE__ */ r.jsx(ke, {}) });
export {
Ve as ColorPalette,
_e as Demo,
Re as Sidebar,
je as ThemeProvider,
ye as ThemeToggle,
we as useTheme
};