@enos5/enos-vue-default 0.2.1 → 0.3.0

package/dist/index.js

@@ -119,10 +119,10 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
     return _sfc_main$g;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const _hoisted_1$w = { class: "border-b border-gray-200/80 bg-gray-50/80 p-2" };
+const _hoisted_1$w = { class: "border-b border-neutral-200 bg-neutral-50/80 p-2 dark:border-neutral-800 dark:bg-neutral-900/80" };
 const _hoisted_2$h = {
   role: "tablist",
-  class: "flex rounded-lg bg-white shadow-sm ring-1 ring-gray-200/80 overflow-hidden"
+  class: "flex overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-neutral-200 dark:bg-neutral-950 dark:ring-neutral-800"
 };
 const _hoisted_3$c = ["aria-selected", "tabindex", "onClick", "onKeydown"];
 const _sfc_main$A = {
@@ -207,10 +207,10 @@ const _sfc_main$A = {
               "aria-selected": currentActiveTab.value === tab.value,
               tabindex: currentActiveTab.value === tab.value ? 0 : -1,
               class: normalizeClass([
-                "px-4 py-3 text-center text-sm font-semibold tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-inset",
-                currentActiveTab.value === tab.value ? "bg-blue-50 text-blue-700 shadow-[inset_0_-2px_0_0_rgb(37_99_235)]" : "text-gray-700 hover:bg-gray-50",
+                "px-4 py-3 text-center text-sm font-semibold tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900/20 focus-visible:ring-inset dark:focus-visible:ring-neutral-100/20",
+                currentActiveTab.value === tab.value ? "bg-neutral-100 text-neutral-950 shadow-[inset_0_-2px_0_0_rgb(23_23_23)] dark:bg-neutral-800 dark:text-neutral-50 dark:shadow-[inset_0_-2px_0_0_rgb(245_245_245)]" : "text-neutral-700 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-900",
                 {
-                  "border-r border-gray-200/80": index !== __props.tabs.length - 1
+                  "border-r border-neutral-200 dark:border-neutral-800": index !== __props.tabs.length - 1
                 }
               ]),
               onClick: ($event) => activateTab(tab.value),
@@ -228,7 +228,7 @@ const _hoisted_1$v = {
 };
 const _hoisted_2$g = {
   key: 1,
-  class: "mb-4 text-xl font-semibold tracking-tight text-slate-900"
+  class: "mb-4 text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50"
 };
 const _sfc_main$z = {
   __name: "Card",
@@ -289,7 +289,7 @@ const _sfc_main$z = {
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["bg-white border border-slate-200/70 rounded-2xl shadow-[0_12px_30px_rgba(15,23,42,0.06)]", __props.overflowClass, { "sticky top-6 self-start": __props.sticky }, __props.cardClass])
+        class: normalizeClass(["rounded-2xl border border-neutral-200 bg-white text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50", __props.overflowClass, { "sticky top-6 self-start": __props.sticky }, __props.cardClass])
       }, [
         __props.tabs.length > 0 ? (openBlock(), createBlock(_sfc_main$A, {
           key: 0,
@@ -319,7 +319,11 @@ const _sfc_main$z = {
               default: withCtx(() => [
                 (openBlock(), createElementBlock("div", {
                   key: __props.activeTab,
-                  class: normalizeClass([__props.tabs.length > 0 ? "p-2" : "", __props.contentClass])
+                  class: normalizeClass([
+                    __props.tabs.length > 0 ? "p-2" : "",
+                    "dark:text-neutral-50 dark:[&_h1]:text-neutral-50 dark:[&_h2]:text-neutral-50 dark:[&_h3]:text-neutral-50 dark:[&_h4]:text-neutral-50 dark:[&_h5]:text-neutral-50 dark:[&_h6]:text-neutral-50 dark:[&_p]:text-neutral-100 dark:[&_span]:text-neutral-100 dark:[&_label]:text-neutral-100 dark:[&_li]:text-neutral-100 dark:[&_a]:text-neutral-100",
+                    __props.contentClass
+                  ])
                 }, [
                   renderSlot(_ctx.$slots, "default")
                 ], 2))
@@ -338,7 +342,7 @@ const _sfc_main$y = /* @__PURE__ */ Object.assign({
   __name: "Divider",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({ class: "border-t border-gray-200" }, _ctx.$attrs), [
+      return openBlock(), createElementBlock("div", mergeProps({ class: "border-t border-neutral-200 dark:border-neutral-800" }, _ctx.$attrs), [
         renderSlot(_ctx.$slots, "default")
       ], 16);
     };
@@ -417,8 +421,8 @@ const _export_sfc = (sfc, props) => {
 const _sfc_main$v = {};
 const _hoisted_1$t = { class: "md:col-span-1 flex justify-between" };
 const _hoisted_2$f = { class: "px-4 sm:px-0" };
-const _hoisted_3$b = { class: "text-xl font-semibold tracking-tight text-slate-900" };
-const _hoisted_4$8 = { class: "mt-1 max-w-2xl text-sm text-slate-600" };
+const _hoisted_3$b = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
+const _hoisted_4$8 = { class: "mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-200" };
 const _hoisted_5$6 = { class: "px-4 sm:px-0" };
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$t, [
@@ -438,7 +442,7 @@ function _sfc_render(_ctx, _cache) {
 const SectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render]]);
 const _hoisted_1$s = { class: "md:grid md:grid-cols-3 md:gap-6" };
 const _hoisted_2$e = { class: "mt-5 md:mt-0 md:col-span-2" };
-const _hoisted_3$a = { class: "px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg" };
+const _hoisted_3$a = { class: "rounded-lg border border-neutral-200 bg-white px-4 py-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 sm:p-6" };
 const _sfc_main$u = {
   __name: "ActionSection",
   setup(__props) {
@@ -568,20 +572,20 @@ const _sfc_main$s = /* @__PURE__ */ Object.assign({
     const attrs = useAttrs();
     const props = __props;
     const variantClasses = {
-      primary: "bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-[0_6px_14px_rgba(37,99,235,0.14)] hover:from-blue-600 hover:to-blue-700 hover:shadow-[0_8px_18px_rgba(37,99,235,0.18)] focus:ring-blue-500 disabled:hover:from-blue-500 disabled:hover:to-blue-600",
-      success: "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-[0_6px_14px_rgba(34,197,94,0.14)] hover:from-green-600 hover:to-green-700 hover:shadow-[0_8px_18px_rgba(34,197,94,0.18)] focus:ring-green-500 disabled:hover:from-green-500 disabled:hover:to-green-600",
-      secondary: "bg-gradient-to-r from-slate-700 to-slate-800 text-white shadow-[0_8px_18px_rgba(15,23,42,0.16)] hover:from-slate-800 hover:to-slate-900 hover:shadow-[0_10px_22px_rgba(15,23,42,0.22)] focus:ring-slate-500 disabled:hover:from-slate-700 disabled:hover:to-slate-800",
-      tertiary: "border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50 hover:border-slate-400 hover:shadow focus:ring-slate-500 disabled:hover:bg-white",
-      warning: "border border-amber-300 bg-amber-50 text-amber-800 shadow-sm hover:bg-amber-100 focus:ring-amber-500 disabled:hover:bg-amber-50",
-      danger: "border border-rose-300 bg-rose-50 text-rose-700 shadow-sm hover:bg-rose-100 focus:ring-rose-500 disabled:hover:bg-rose-50",
-      "warning-solid": "bg-gradient-to-r from-yellow-500 to-yellow-600 text-white shadow-[0_6px_14px_rgba(251,206,3,0.14)] hover:from-yellow-600 hover:to-yellow-700 hover:shadow-[0_8px_18px_rgba(251,206,3,0.18)] focus:ring-yellow-500 disabled:hover:from-yellow-500 disabled:hover:to-yellow-600",
-      "danger-solid": "bg-gradient-to-r from-red-500 to-red-600 text-white shadow-[0_6px_14px_rgba(239,68,68,0.14)] hover:from-red-600 hover:to-red-700 hover:shadow-[0_8px_18px_rgba(239,68,68,0.18)] focus:ring-red-500 disabled:hover:from-red-500 disabled:hover:to-red-600"
+      primary: "bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-700",
+      success: "bg-emerald-600 text-white hover:bg-emerald-600/90 dark:bg-emerald-600 dark:text-white dark:hover:bg-emerald-600/90",
+      secondary: "bg-gray-300 text-gray-900 hover:bg-gray-300/80 dark:bg-gray-500 dark:text-gray-50 dark:hover:bg-gray-500/80",
+      tertiary: "border border-neutral-200 bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+      warning: "bg-amber-100 text-amber-700 hover:bg-amber-100/90 focus-visible:ring-amber-500/20 dark:bg-amber-600/20 dark:text-neutral-50 dark:hover:bg-amber-600/30 dark:focus-visible:ring-amber-500/40",
+      danger: "bg-red-100 text-red-700 hover:bg-red-100/90 focus-visible:ring-red-500/20 dark:bg-red-600/20 dark:text-neutral-50 dark:hover:bg-red-600/30 dark:focus-visible:ring-red-500/40",
+      "warning-solid": "bg-amber-500 text-white hover:bg-amber-500/90 dark:bg-amber-500 dark:text-white dark:hover:bg-amber-500/90",
+      "danger-solid": "bg-red-600 text-white hover:bg-red-600/90 focus-visible:ring-red-500/20 dark:bg-red-600/60 dark:text-white dark:hover:bg-red-600/50 dark:focus-visible:ring-red-500/40"
     };
     const resolvedVariant = computed(() => {
       return variantClasses[props.variant] ? props.variant : "primary";
     });
     const buttonClasses = computed(() => [
-      "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold tracking-tight transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-50 disabled:cursor-not-allowed disabled:opacity-50",
+      "inline-flex h-9 min-w-[40px] shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium shadow-xs outline-none transition-all disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-red-500 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
       variantClasses[resolvedVariant.value],
       attrs.class
     ]);
@@ -626,7 +630,7 @@ const _sfc_main$r = {
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => proxyChecked.value = $event),
         type: "checkbox",
         value: __props.value,
-        class: "rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
+        class: "rounded border-neutral-300 text-neutral-900 shadow-sm focus:ring-neutral-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:focus:ring-neutral-100"
       }, null, 8, _hoisted_1$p)), [
         [vModelCheckbox, proxyChecked.value]
       ]);
@@ -676,9 +680,9 @@ const _sfc_main$q = {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(["inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors", [
-          isChecked.value ? "bg-indigo-600 text-white border-indigo-600" : "text-gray-600 border-gray-200",
+          isChecked.value ? "border-neutral-900 bg-neutral-900 text-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50" : "border-neutral-200 text-neutral-600 dark:border-neutral-800 dark:text-neutral-100",
           __props.disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
-          hasFocus.value && !__props.disabled ? "ring-2 ring-indigo-500/80 ring-offset-2 ring-offset-white" : ""
+          hasFocus.value && !__props.disabled ? "ring-2 ring-neutral-900/20 ring-offset-2 ring-offset-white dark:ring-neutral-100/20 dark:ring-offset-neutral-950" : ""
         ]])
       }, [
         createElementVNode("input", {
@@ -692,7 +696,7 @@ const _sfc_main$q = {
         }, null, 40, _hoisted_1$o),
         createElementVNode("span", {
           class: normalizeClass(["inline-flex h-4 w-4 items-center justify-center border text-[10px] font-bold leading-none", [
-            isChecked.value ? "border-current bg-white/15 text-current" : "border-current/70 text-transparent",
+            isChecked.value ? "border-current bg-white/15 text-current dark:bg-neutral-900/15" : "border-current/70 text-transparent",
             "rounded"
           ]])
         }, " ✓ ", 2),
@@ -736,7 +740,7 @@ const _sfc_main$p = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     },
     disabledClass: {
       type: String,
-      default: "!bg-slate-100"
+      default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
     }
   },
   emits: ["update:modelValue", "blur"],
@@ -758,7 +762,7 @@ const _sfc_main$p = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       return rest;
     });
     const inputClasses = computed(() => [
-      "w-full min-w-0 max-w-full rounded-lg border border-slate-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 placeholder:text-slate-400",
+      "w-full min-w-0 max-w-full rounded-lg border border-neutral-200 bg-white text-neutral-950 shadow-sm outline-none transition-colors placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
       attrs.class,
       isPasswordField.value ? "pr-10 pl-10" : ""
     ]);
@@ -784,7 +788,7 @@ const _sfc_main$p = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
         isPasswordField.value ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
-          createVNode(unref(LockClosedIcon), { class: "h-5 w-5 text-slate-400" })
+          createVNode(unref(LockClosedIcon), { class: "h-5 w-5 text-neutral-400 dark:text-neutral-200" })
         ])) : createCommentVNode("", true),
         createElementVNode("input", mergeProps({
           ref_key: "input",
@@ -801,7 +805,7 @@ const _sfc_main$p = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         isPasswordField.value ? (openBlock(), createElementBlock("button", {
           key: 1,
           type: "button",
-          class: "absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 focus:outline-none",
+          class: "absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 transition-colors hover:text-neutral-700 focus:outline-none dark:text-neutral-200 dark:hover:text-neutral-50",
           "aria-label": revealed.value ? "Hide password" : "Show password",
           onClick: toggleVisibility
         }, [
@@ -843,7 +847,7 @@ const _sfc_main$o = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     },
     disabledClass: {
       type: String,
-      default: "!bg-gray-200"
+      default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
     },
     autoResize: {
       type: Boolean,
@@ -864,7 +868,7 @@ const _sfc_main$o = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       return rest;
     });
     const textareaClasses = computed(() => [
-      "w-full min-w-0 max-w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm",
+      "w-full min-w-0 max-w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
       props.autoResize ? "resize-none overflow-y-auto" : "resize-y",
       attrs.class
     ]);
@@ -958,39 +962,39 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     },
     baseClass: {
       type: [String, Array, Object],
-      default: "block w-full rounded-md border border-gray-300 bg-white px-4 py-3 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
+      default: "block w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10"
     },
     normalTextClass: {
       type: [String, Array, Object],
-      default: "text-gray-900"
+      default: "text-neutral-950 dark:text-neutral-50"
     },
     deletedSelectedClass: {
       type: [String, Array, Object],
-      default: "text-red-600"
+      default: "text-red-600 dark:text-neutral-100"
     },
     optionClass: {
       type: [String, Array, Object],
-      default: "text-[#111827]"
+      default: "text-neutral-950 dark:text-neutral-50"
     },
     deletedOptionClass: {
       type: [String, Array, Object],
-      default: "text-[#dc2626]"
+      default: "text-red-600 dark:text-neutral-100"
     },
     placeholderClass: {
       type: [String, Array, Object],
-      default: "text-[#111827]"
+      default: "text-neutral-500 dark:text-neutral-200"
     },
     dropdownClass: {
       type: [String, Array, Object],
-      default: "bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto z-50"
+      default: "z-50 max-h-60 overflow-auto rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-950"
     },
     dropdownOptionClass: {
       type: [String, Array, Object],
-      default: "px-4 py-3 hover:bg-gray-100 cursor-pointer transition-colors"
+      default: "cursor-pointer px-4 py-3 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-900"
     },
     dropdownSelectedClass: {
       type: [String, Array, Object],
-      default: "bg-blue-50 text-blue-600 font-medium"
+      default: "bg-neutral-100 font-medium text-neutral-950 dark:bg-neutral-900 dark:text-neutral-50"
     }
   },
   emits: ["update:modelValue"],
@@ -1136,10 +1140,10 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           ]
         }, unref(attrs), { tabindex: "0" }), [
           createElementVNode("span", {
-            class: normalizeClass({ "text-gray-400": !__props.modelValue && __props.placeholder })
+            class: normalizeClass(!__props.modelValue && __props.placeholder ? __props.placeholderClass : null)
           }, toDisplayString(displayText.value), 3),
           createVNode(unref(ChevronDownIcon), {
-            class: normalizeClass(["size-5 text-gray-400 transition-transform", { "rotate-180": isOpen.value }])
+            class: normalizeClass(["size-5 text-neutral-400 transition-transform dark:text-neutral-200", { "rotate-180": isOpen.value }])
           }, null, 8, ["class"])
         ], 16),
         createVNode(Transition, {
@@ -1332,7 +1336,7 @@ const _sfc_main$l = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     },
     disabledClass: {
       type: String,
-      default: "!bg-gray-200"
+      default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
     }
   },
   emits: ["update:modelValue"],
@@ -1356,7 +1360,7 @@ const _sfc_main$l = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       return rest;
     });
     const inputClasses = computed(() => [
-      "w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm",
+      "w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
       attrs.class
     ]);
     const normalizeDateValue = (rawValue) => {
@@ -1404,12 +1408,12 @@ const _hoisted_2$c = { class: "absolute inset-y-0 left-0 pl-3 flex items-center
 const _hoisted_3$8 = ["accept"];
 const _hoisted_4$6 = {
   key: 0,
-  class: "mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200"
+  class: "mt-4 rounded-lg border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-900/50"
 };
 const _hoisted_5$4 = { class: "flex items-center space-x-4" };
 const _hoisted_6$4 = ["src"];
-const _hoisted_7$4 = { class: "text-sm font-medium text-gray-900" };
-const _hoisted_8$2 = { class: "text-xs text-gray-500" };
+const _hoisted_7$4 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
+const _hoisted_8$2 = { class: "text-xs text-neutral-500 dark:text-neutral-200" };
 const _sfc_main$k = {
   __name: "ImageInput",
   props: {
@@ -1446,12 +1450,12 @@ const _sfc_main$k = {
       return openBlock(), createElementBlock("div", null, [
         createElementVNode("div", _hoisted_1$j, [
           createElementVNode("div", _hoisted_2$c, [
-            createVNode(unref(PhotoIcon), { class: "size-5 text-gray-400" })
+            createVNode(unref(PhotoIcon), { class: "size-5 text-neutral-400 dark:text-neutral-200" })
           ]),
           createElementVNode("input", mergeProps(__props.attrs, {
             type: "file",
             accept: __props.accept,
-            class: "block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-sm file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 cursor-pointer",
+            class: "block w-full cursor-pointer rounded-lg border border-neutral-200 bg-white py-3 pl-10 pr-4 text-sm text-neutral-700 shadow-sm transition-all duration-200 file:mr-4 file:rounded-md file:border-0 file:bg-neutral-900 file:px-4 file:py-2 file:text-sm file:font-medium file:text-neutral-50 hover:file:bg-neutral-800 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-100 dark:file:bg-neutral-800 dark:file:text-neutral-50 dark:hover:file:bg-neutral-700 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
             onChange: handleFileChange
           }), null, 16, _hoisted_3$8)
         ]),
@@ -1472,7 +1476,7 @@ const _sfc_main$k = {
     };
   }
 };
-const _hoisted_1$i = { class: "flex h-12 overflow-hidden rounded-lg border border-gray-300 text-sm" };
+const _hoisted_1$i = { class: "flex h-12 overflow-hidden rounded-lg border border-neutral-200 bg-white text-sm dark:border-neutral-800 dark:bg-neutral-950" };
 const _hoisted_2$b = ["disabled", "onClick"];
 const _sfc_main$j = {
   __name: "NotationInput",
@@ -1505,11 +1509,11 @@ const _sfc_main$j = {
           return openBlock(), createElementBlock("button", {
             key: `notation-${idx}-${option}`,
             type: "button",
-            class: normalizeClass(["flex-1 border-l border-gray-300 px-2 text-center font-semibold transition-colors duration-150 first:border-l-0", [
+            class: normalizeClass(["flex-1 border-l border-neutral-200 px-2 text-center font-semibold transition-colors duration-150 first:border-l-0 dark:border-neutral-800", [
               idx === 0 ? "rounded-l-lg" : "",
               idx === normalizedOptions.value.length - 1 ? "rounded-r-lg" : "",
-              isSelected(option) ? "bg-indigo-600 text-white" : "bg-white text-gray-700 hover:bg-gray-50",
-              "focus-visible:ring-2   "
+              isSelected(option) ? "bg-neutral-900 text-neutral-50 dark:bg-neutral-800 dark:text-neutral-50" : "bg-white text-neutral-700 hover:bg-neutral-100 dark:bg-neutral-950 dark:text-neutral-100 dark:hover:bg-neutral-900",
+              "focus-visible:ring-2 focus-visible:ring-neutral-900/20 focus-visible:ring-offset-0 dark:focus-visible:ring-neutral-100/20"
             ]]),
             disabled: __props.disabled,
             onClick: ($event) => selectOption(option)
@@ -1560,9 +1564,9 @@ const _sfc_main$i = {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(["inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors", [
-          isChecked.value ? "bg-indigo-600 text-white border-indigo-600" : "text-gray-600 border-gray-200",
+          isChecked.value ? "border-neutral-900 bg-neutral-900 text-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50" : "border-neutral-200 text-neutral-600 dark:border-neutral-800 dark:text-neutral-100",
           __props.disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
-          hasFocus.value && !__props.disabled ? "ring-2 ring-indigo-500/80 ring-offset-2 ring-offset-white" : ""
+          hasFocus.value && !__props.disabled ? "ring-2 ring-neutral-900/20 ring-offset-2 ring-offset-white dark:ring-neutral-100/20 dark:ring-offset-neutral-950" : ""
         ]])
       }, [
         createElementVNode("input", {
@@ -1760,7 +1764,7 @@ const _hoisted_3$7 = {
   key: 15,
   class: "flex items-center mt-2 text-sm text-red-600"
 };
-const defaultFieldClass = "block w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm transition-all duration-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20";
+const defaultFieldClass = "block w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 placeholder:text-neutral-400 shadow-sm transition-all duration-200 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10";
 const _sfc_main$f = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "InputGroup",
   props: {
@@ -1794,7 +1798,7 @@ const _sfc_main$f = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     },
     disabledClass: {
       type: String,
-      default: "!bg-gray-200"
+      default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
     },
     modelModifiers: {
       type: Object,
@@ -2274,7 +2278,7 @@ const _sfc_main$d = {
                 class: "fixed inset-0 z-40 transform transition-all",
                 onClick: close
               }, [..._cache[0] || (_cache[0] = [
-                createElementVNode("div", { class: "absolute inset-0 bg-gray-500 opacity-75" }, null, -1)
+                createElementVNode("div", { class: "absolute inset-0 bg-neutral-950/55 backdrop-blur-[2px]" }, null, -1)
               ])], 512), [
                 [vShow, __props.show]
               ])
@@ -2291,7 +2295,7 @@ const _sfc_main$d = {
           }, {
             default: withCtx(() => [
               withDirectives(createElementVNode("div", {
-                class: normalizeClass(["relative z-50 mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto", maxWidthClass.value])
+                class: normalizeClass(["relative z-50 mb-6 overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-xl transform transition-all dark:border-neutral-800 dark:bg-neutral-950 sm:mx-auto sm:w-full", maxWidthClass.value])
               }, [
                 showSlot.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
               ], 2), [
@@ -2305,13 +2309,13 @@ const _sfc_main$d = {
     };
   }
 };
-const _hoisted_1$c = { class: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4" };
+const _hoisted_1$c = { class: "bg-white px-4 pb-4 pt-5 dark:bg-neutral-950 sm:p-6 sm:pb-4" };
 const _hoisted_2$9 = { class: "sm:flex sm:items-start" };
-const _hoisted_3$6 = { class: "mx-auto shrink-0 flex items-center justify-center size-12 rounded-full bg-red-100 sm:mx-0 sm:size-10" };
+const _hoisted_3$6 = { class: "mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-950/60 sm:mx-0 sm:size-10" };
 const _hoisted_4$5 = { class: "mt-3 text-center sm:mt-0 sm:ms-4 sm:text-start" };
-const _hoisted_5$3 = { class: "text-lg font-medium text-gray-900" };
-const _hoisted_6$3 = { class: "mt-4 text-sm text-gray-600" };
-const _hoisted_7$3 = { class: "flex flex-col-reverse lg:flex-row lg:justify-end px-6 py-4 bg-gray-100 text-end gap-4 lg:gap-0" };
+const _hoisted_5$3 = { class: "text-lg font-medium text-neutral-950 dark:text-neutral-50" };
+const _hoisted_6$3 = { class: "mt-4 text-sm text-neutral-600 dark:text-neutral-200" };
+const _hoisted_7$3 = { class: "flex flex-col-reverse gap-4 border-t border-neutral-200 bg-neutral-50 px-6 py-4 text-end dark:border-neutral-800 dark:bg-neutral-900/60 lg:flex-row lg:justify-end lg:gap-0" };
 const _sfc_main$c = {
   __name: "ConfirmationModal",
   props: {
@@ -2351,7 +2355,7 @@ const _sfc_main$c = {
           createElementVNode("div", _hoisted_1$c, [
             createElementVNode("div", _hoisted_2$9, [
               createElementVNode("div", _hoisted_3$6, [
-                createVNode(unref(ExclamationTriangleIcon), { class: "size-6 text-red-600" })
+                createVNode(unref(ExclamationTriangleIcon), { class: "size-6 text-red-600 dark:text-neutral-100" })
               ]),
               createElementVNode("div", _hoisted_4$5, [
                 createElementVNode("h3", _hoisted_5$3, [
@@ -2373,9 +2377,9 @@ const _sfc_main$c = {
   }
 };
 const _hoisted_1$b = { class: "px-6 py-4" };
-const _hoisted_2$8 = { class: "text-lg font-medium text-gray-900" };
-const _hoisted_3$5 = { class: "mt-4 text-sm text-gray-600" };
-const _hoisted_4$4 = { class: "flex flex-row justify-end px-6 py-4 bg-gray-100 text-end" };
+const _hoisted_2$8 = { class: "text-lg font-medium text-neutral-950 dark:text-neutral-50" };
+const _hoisted_3$5 = { class: "mt-4 text-sm text-neutral-600 dark:text-neutral-200" };
+const _hoisted_4$4 = { class: "flex flex-row justify-end border-t border-neutral-200 bg-neutral-50 px-6 py-4 text-end dark:border-neutral-800 dark:bg-neutral-900/60" };
 const _sfc_main$b = {
   __name: "DialogModal",
   props: {
@@ -2437,7 +2441,7 @@ const _sfc_main$a = {
     },
     contentClasses: {
       type: Array,
-      default: () => ["py-1", "bg-white"]
+      default: () => ["py-1", "bg-white", "dark:bg-neutral-950"]
     }
   },
   setup(__props) {
@@ -2587,12 +2591,12 @@ const _sfc_main$a = {
                 key: 0,
                 ref_key: "menuRef",
                 ref: menuRef,
-                class: normalizeClass(["z-50 rounded-xl shadow-xl shadow-gray-900/10", [widthClass.value, alignmentClasses.value]]),
+                class: normalizeClass(["z-50 rounded-xl shadow-xl shadow-neutral-950/10 dark:shadow-black/30", [widthClass.value, alignmentClasses.value]]),
                 style: normalizeStyle(menuStyle.value),
                 onClick: _cache[1] || (_cache[1] = ($event) => open.value = false)
               }, [
                 createElementVNode("div", {
-                  class: normalizeClass(["rounded-xl ring-1 ring-gray-200/60 backdrop-blur-sm bg-white/95", __props.contentClasses])
+                  class: normalizeClass(["rounded-xl border border-neutral-200 bg-white/95 backdrop-blur-sm dark:border-neutral-800 dark:bg-neutral-950/95", __props.contentClasses])
                 }, [
                   renderSlot(_ctx.$slots, "content")
                 ], 2)
@@ -2608,7 +2612,7 @@ const _sfc_main$a = {
 const _hoisted_1$9 = {
   key: 0,
   type: "submit",
-  class: "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
+  class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-700 transition duration-150 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none dark:text-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900"
 };
 const _hoisted_2$7 = ["href"];
 const _sfc_main$9 = {
@@ -2625,13 +2629,13 @@ const _sfc_main$9 = {
         ])) : __props.as == "a" ? (openBlock(), createElementBlock("a", {
           key: 1,
           href: __props.href,
-          class: "block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
+          class: "block px-4 py-2 text-sm leading-5 text-neutral-700 transition duration-150 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none dark:text-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900"
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 8, _hoisted_2$7)) : (openBlock(), createBlock(unref(Link), {
           key: 2,
           href: __props.href,
-          class: "block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
+          class: "block px-4 py-2 text-sm leading-5 text-neutral-700 transition duration-150 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none dark:text-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900"
         }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
@@ -2643,11 +2647,11 @@ const _sfc_main$9 = {
   }
 };
 const _hoisted_1$8 = { class: "md:grid md:grid-cols-3 md:gap-6" };
-const _hoisted_2$6 = { class: "mt-5 md:mt-0 md:col-span-2 shadow sm:rounded-lg" };
+const _hoisted_2$6 = { class: "mt-5 md:col-span-2 md:mt-0" };
 const _hoisted_3$4 = { class: "grid grid-cols-6 gap-6" };
 const _hoisted_4$3 = {
   key: 0,
-  class: "flex items-center justify-start px-3 pb-6 bg-white text-end sm:rounded-bl-md sm:rounded-br-md"
+  class: "flex items-center justify-start rounded-b-lg border border-t-0 border-neutral-200 bg-neutral-50 px-3 pb-6 text-end dark:border-neutral-800 dark:bg-neutral-900/60 sm:rounded-bl-md sm:rounded-br-md"
 };
 const _sfc_main$8 = {
   __name: "FormSection",
@@ -2670,7 +2674,7 @@ const _sfc_main$8 = {
             onSubmit: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("submitted"), ["prevent"]))
           }, [
             createElementVNode("div", {
-              class: normalizeClass(["px-4 py-5 bg-white sm:p-6", hasActions.value ? "sm:rounded-tl-md sm:rounded-tr-md" : "sm:rounded-md"])
+              class: normalizeClass(["rounded-lg border border-neutral-200 bg-white px-4 py-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 sm:p-6", hasActions.value ? "sm:rounded-tl-md sm:rounded-tr-md" : "sm:rounded-md"])
             }, [
               createElementVNode("div", _hoisted_3$4, [
                 renderSlot(_ctx.$slots, "form")
@@ -2685,7 +2689,7 @@ const _sfc_main$8 = {
     };
   }
 };
-const _hoisted_1$7 = { class: "text-sm text-red-600" };
+const _hoisted_1$7 = { class: "text-sm text-red-600 dark:text-neutral-100" };
 const _sfc_main$7 = {
   __name: "InputError",
   props: {
@@ -2701,7 +2705,7 @@ const _sfc_main$7 = {
     };
   }
 };
-const _hoisted_1$6 = { class: "block font-medium text-sm text-gray-700" };
+const _hoisted_1$6 = { class: "block text-sm font-medium text-neutral-700 dark:text-neutral-100" };
 const _hoisted_2$5 = { key: 0 };
 const _hoisted_3$3 = { key: 1 };
 const _sfc_main$6 = {
@@ -2754,20 +2758,20 @@ const _sfc_main$5 = /* @__PURE__ */ Object.assign({
     const attrs = useAttrs();
     const props = __props;
     const variantClasses = {
-      primary: "bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-[0_6px_14px_rgba(37,99,235,0.14)] hover:from-blue-600 hover:to-blue-700 hover:shadow-[0_8px_18px_rgba(37,99,235,0.18)] focus:ring-blue-500",
-      success: "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-[0_6px_14px_rgba(34,197,94,0.14)] hover:from-green-600 hover:to-green-700 hover:shadow-[0_8px_18px_rgba(34,197,94,0.18)] focus:ring-green-500",
-      secondary: "bg-gradient-to-r from-slate-700 to-slate-800 text-white shadow-[0_8px_18px_rgba(15,23,42,0.16)] hover:from-slate-800 hover:to-slate-900 hover:shadow-[0_10px_22px_rgba(15,23,42,0.22)] focus:ring-slate-500",
-      tertiary: "border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50 hover:border-slate-400 hover:shadow focus:ring-slate-500",
-      warning: "border border-amber-300 bg-amber-50 text-amber-800 shadow-sm hover:bg-amber-100 focus:ring-amber-500",
-      danger: "border border-rose-300 bg-rose-50 text-rose-700 shadow-sm hover:bg-rose-100 focus:ring-rose-500",
-      "warning-solid": "bg-gradient-to-r from-yellow-500 to-yellow-600 text-white shadow-[0_6px_14px_rgba(251,206,3,0.14)] hover:from-yellow-600 hover:to-yellow-700 hover:shadow-[0_8px_18px_rgba(251,206,3,0.18)] focus:ring-yellow-500 disabled:hover:from-yellow-500 disabled:hover:to-yellow-600",
-      "danger-solid": "bg-gradient-to-r from-red-500 to-red-600 text-white shadow-[0_6px_14px_rgba(239,68,68,0.14)] hover:from-red-600 hover:to-red-700 hover:shadow-[0_8px_18px_rgba(239,68,68,0.18)] focus:ring-red-500 disabled:hover:from-red-500 disabled:hover:to-red-600"
+      primary: "bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-700",
+      success: "bg-emerald-600 text-white hover:bg-emerald-600/90 dark:bg-emerald-600 dark:text-white dark:hover:bg-emerald-600/90",
+      secondary: "bg-gray-300 text-gray-900 hover:bg-gray-300/80 dark:bg-gray-500 dark:text-gray-50 dark:hover:bg-gray-500/80",
+      tertiary: "border border-neutral-200 bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+      warning: "bg-amber-100 text-amber-700 hover:bg-amber-100/90 focus-visible:ring-amber-500/20 dark:bg-amber-600/20 dark:text-neutral-50 dark:hover:bg-amber-600/30 dark:focus-visible:ring-amber-500/40",
+      danger: "bg-red-100 text-red-700 hover:bg-red-100/90 focus-visible:ring-red-500/20 dark:bg-red-600/20 dark:text-neutral-50 dark:hover:bg-red-600/30 dark:focus-visible:ring-red-500/40",
+      "warning-solid": "bg-amber-500 text-white hover:bg-amber-500/90 dark:bg-amber-500 dark:text-white dark:hover:bg-amber-500/90",
+      "danger-solid": "bg-red-600 text-white hover:bg-red-600/90 focus-visible:ring-red-500/20 dark:bg-red-600/60 dark:text-white dark:hover:bg-red-600/50 dark:focus-visible:ring-red-500/40"
     };
     const resolvedVariant = computed(() => {
       return variantClasses[props.variant] ? props.variant : "primary";
     });
     const linkClasses = computed(() => [
-      "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold tracking-tight transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-50",
+      "inline-flex h-9 min-w-[40px] shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium shadow-xs outline-none transition-all aria-invalid:border-red-500 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
       variantClasses[resolvedVariant.value],
       attrs.class
     ]);
@@ -2807,13 +2811,13 @@ const _sfc_main$4 = {
     };
   }
 };
-const _hoisted_1$3 = { class: "bg-white/80 backdrop-blur-sm border border-gray-200/60 rounded-xl px-6 py-4" };
-const _hoisted_2$3 = { class: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4" };
+const _hoisted_1$3 = { class: "rounded-xl border border-neutral-200 bg-white/80 px-6 py-4 backdrop-blur-sm dark:border-neutral-800 dark:bg-neutral-950/80" };
+const _hoisted_2$3 = { class: "flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center" };
 const _hoisted_3$2 = { class: "flex items-center gap-3" };
-const _hoisted_4$2 = { class: "text-sm font-medium text-gray-700" };
+const _hoisted_4$2 = { class: "text-sm font-medium text-neutral-700 dark:text-neutral-100" };
 const _hoisted_5$2 = { class: "flex flex-wrap items-center gap-2" };
 const _hoisted_6$2 = ["onClick"];
-const _hoisted_7$2 = { class: "text-xs text-gray-500" };
+const _hoisted_7$2 = { class: "text-xs text-neutral-500 dark:text-neutral-200" };
 const _sfc_main$3 = {
   __name: "SortControls",
   props: {
@@ -2866,7 +2870,7 @@ const _sfc_main$3 = {
                   onClick: ($event) => handleSort(field.key),
                   class: normalizeClass([
                     "px-3 py-1.5 text-sm font-medium rounded-lg transition-all duration-200",
-                    __props.currentSortField === field.key ? "bg-blue-500 text-white shadow-sm" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    __props.currentSortField === field.key ? "bg-neutral-900 text-neutral-50 shadow-sm dark:bg-neutral-800 dark:text-neutral-50" : "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
                   ])
                 }, [
                   createTextVNode(toDisplayString(field.label) + " ", 1),
@@ -2913,13 +2917,13 @@ const _sfc_main$2 = {
     });
     const sortIconClass = computed(() => {
       if (!isCurrentSort.value) {
-        return "text-gray-400";
+        return "text-neutral-400 dark:text-neutral-200";
       }
-      return "text-blue-600";
+      return "text-neutral-900 dark:text-neutral-100";
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("th", {
-        class: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors duration-150",
+        class: "cursor-pointer px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-neutral-500 transition-colors duration-150 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-900",
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("sort", __props.field))
       }, [
         createElementVNode("div", _hoisted_1$2, [
@@ -2941,13 +2945,13 @@ const _sfc_main$2 = {
     };
   }
 };
-const _hoisted_1$1 = { class: "min-w-full divide-y divide-slate-200/80" };
-const _hoisted_2$1 = { class: "bg-slate-50/80" };
+const _hoisted_1$1 = { class: "min-w-full divide-y divide-neutral-200 dark:divide-neutral-800" };
+const _hoisted_2$1 = { class: "bg-neutral-50/80 dark:bg-neutral-900/80" };
 const _hoisted_3$1 = {
   key: 0,
-  class: "px-6 py-3 text-right text-[11px] font-semibold tracking-[0.12em] text-slate-600 uppercase"
+  class: "px-6 py-3 text-right text-[11px] font-semibold tracking-[0.12em] text-neutral-600 uppercase dark:text-neutral-200"
 };
-const _hoisted_4$1 = { class: "bg-white divide-y divide-slate-200/80" };
+const _hoisted_4$1 = { class: "divide-y divide-neutral-200 bg-white dark:divide-neutral-800 dark:bg-neutral-950" };
 const _hoisted_5$1 = {
   key: 0,
   class: "flex items-center"
@@ -2955,7 +2959,7 @@ const _hoisted_5$1 = {
 const _hoisted_6$1 = ["title"];
 const _hoisted_7$1 = {
   key: 0,
-  class: "ml-2 inline-flex items-center rounded-full bg-rose-100 px-2 py-1 text-xs font-medium text-rose-700"
+  class: "ml-2 inline-flex items-center rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700 dark:bg-red-950/60 dark:text-neutral-100"
 };
 const _hoisted_8$1 = ["innerHTML"];
 const _hoisted_9$1 = { key: 3 };
@@ -2967,9 +2971,9 @@ const _hoisted_11$1 = {
   key: 0,
   class: "text-center py-12"
 };
-const _hoisted_12$1 = { class: "inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 mb-4" };
-const _hoisted_13$1 = { class: "mb-2 text-lg font-semibold text-slate-900" };
-const _hoisted_14$1 = { class: "mb-4 text-slate-600" };
+const _hoisted_12$1 = { class: "mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900" };
+const _hoisted_13$1 = { class: "mb-2 text-lg font-semibold text-neutral-950 dark:text-neutral-50" };
+const _hoisted_14$1 = { class: "mb-4 text-neutral-600 dark:text-neutral-200" };
 const _sfc_main$1 = {
   __name: "TableList",
   props: {
@@ -3003,7 +3007,7 @@ const _sfc_main$1 = {
       type: Function,
       default: (item, index) => [
         "transition-colors duration-150",
-        item.deleted_at ? "bg-rose-50 hover:bg-rose-100" : "odd:bg-white even:bg-slate-50 hover:bg-slate-100"
+        item.deleted_at ? "bg-red-50 hover:bg-red-100 dark:bg-red-950/30 dark:hover:bg-red-950/50" : "odd:bg-white even:bg-neutral-50 hover:bg-neutral-100 dark:odd:bg-neutral-950 dark:even:bg-neutral-900/70 dark:hover:bg-neutral-900"
       ]
     },
     maxTextLength: {
@@ -3066,7 +3070,7 @@ const _sfc_main$1 = {
         classes += " font-medium";
       }
       if (column.isSecondary) {
-        classes += " text-slate-600";
+        classes += " text-neutral-600 dark:text-neutral-200";
       }
       return classes;
     };
@@ -3074,11 +3078,11 @@ const _sfc_main$1 = {
       if (column.sortable) {
         return "";
       }
-      return "px-6 py-3 text-left text-[11px] font-semibold tracking-[0.12em] text-slate-600 uppercase";
+      return "px-6 py-3 text-left text-[11px] font-semibold tracking-[0.12em] text-neutral-600 uppercase dark:text-neutral-200";
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["bg-white/90 backdrop-blur-sm", __props.isCard ? "border border-slate-200/70 rounded-2xl shadow-[0_12px_30px_rgba(15,23,42,0.06)] animate-fadeIn mx-4 md:mx-0" : ""])
+        class: normalizeClass(["bg-white/90 backdrop-blur-sm dark:bg-neutral-950/90", __props.isCard ? "mx-4 animate-fadeIn rounded-2xl border border-neutral-200 shadow-sm dark:border-neutral-800 md:mx-0" : ""])
       }, [
         createElementVNode("div", {
           class: normalizeClass(["overflow-x-auto", __props.isCard ? "rounded-xl" : ""])
@@ -3123,7 +3127,7 @@ const _sfc_main$1 = {
                     }, [
                       column.key === "name" && !column.slot ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
                         createElementVNode("div", {
-                          class: "text-sm font-medium text-slate-900 truncate",
+                          class: "truncate text-sm font-medium text-neutral-950 dark:text-neutral-50",
                           title: getCellContent(item, column)
                         }, toDisplayString(getCellContent(item, column)), 9, _hoisted_6$1),
                         isDeleted(item) ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(__props.deletedLabel), 1)) : createCommentVNode("", true)
@@ -3151,7 +3155,7 @@ const _sfc_main$1 = {
         ], 2),
         !hasData.value ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
           createElementVNode("div", _hoisted_12$1, [
-            (openBlock(), createBlock(resolveDynamicComponent(__props.emptyState.icon), { class: "w-8 h-8 text-slate-400" }))
+            (openBlock(), createBlock(resolveDynamicComponent(__props.emptyState.icon), { class: "h-8 w-8 text-neutral-400 dark:text-neutral-200" }))
           ]),
           createElementVNode("h3", _hoisted_13$1, toDisplayString(__props.emptyState.title), 1),
           createElementVNode("p", _hoisted_14$1, toDisplayString(__props.emptyState.description), 1),
@@ -3171,15 +3175,15 @@ const _sfc_main$1 = {
   }
 };
 const _hoisted_1 = { class: "relative max-w-sm" };
-const _hoisted_2 = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" };
+const _hoisted_2 = { class: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none" };
 const _hoisted_3 = ["placeholder"];
-const _hoisted_4 = { class: "min-w-full divide-y divide-gray-200" };
-const _hoisted_5 = { class: "bg-gray-50" };
+const _hoisted_4 = { class: "min-w-full divide-y divide-neutral-200 dark:divide-neutral-800" };
+const _hoisted_5 = { class: "bg-neutral-50 dark:bg-neutral-900" };
 const _hoisted_6 = {
   key: 0,
-  class: "px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
+  class: "px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-neutral-500 dark:text-neutral-200"
 };
-const _hoisted_7 = { class: "bg-white divide-y divide-gray-200" };
+const _hoisted_7 = { class: "divide-y divide-neutral-200 bg-white dark:divide-neutral-800 dark:bg-neutral-950" };
 const _hoisted_8 = {
   key: 2,
   class: "flex items-center"
@@ -3187,7 +3191,7 @@ const _hoisted_8 = {
 const _hoisted_9 = ["title"];
 const _hoisted_10 = {
   key: 0,
-  class: "ml-2 inline-flex items-center rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-800"
+  class: "ml-2 inline-flex items-center rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-800 dark:bg-red-950/60 dark:text-neutral-100"
 };
 const _hoisted_11 = ["innerHTML"];
 const _hoisted_12 = { key: 5 };
@@ -3200,9 +3204,9 @@ const _hoisted_15 = {
   key: 2,
   class: "py-12 text-center"
 };
-const _hoisted_16 = { class: "mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100" };
-const _hoisted_17 = { class: "mb-2 text-lg font-medium text-gray-900" };
-const _hoisted_18 = { class: "mb-4 text-gray-500" };
+const _hoisted_16 = { class: "mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900" };
+const _hoisted_17 = { class: "mb-2 text-lg font-medium text-neutral-950 dark:text-neutral-50" };
+const _hoisted_18 = { class: "mb-4 text-neutral-500 dark:text-neutral-200" };
 const _sfc_main = {
   __name: "TableListForm",
   props: {
@@ -3236,7 +3240,7 @@ const _sfc_main = {
       type: Function,
       default: (item) => [
         "transition-colors duration-150",
-        item.deleted_at ? "bg-red-50 hover:bg-red-100" : "odd:bg-white even:bg-gray-50 hover:bg-gray-100"
+        item.deleted_at ? "bg-red-50 hover:bg-red-100 dark:bg-red-950/30 dark:hover:bg-red-950/50" : "odd:bg-white even:bg-neutral-50 hover:bg-neutral-100 dark:odd:bg-neutral-950 dark:even:bg-neutral-900/70 dark:hover:bg-neutral-900"
       ]
     },
     getErrorMessage: {
@@ -3528,7 +3532,7 @@ const _sfc_main = {
         classes += " font-medium";
       }
       if (column.isSecondary) {
-        classes += " text-gray-600";
+        classes += " text-neutral-600 dark:text-neutral-200";
       }
       return classes;
     };
@@ -3536,16 +3540,16 @@ const _sfc_main = {
       if (column.sortable) {
         return "";
       }
-      return "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider";
+      return "px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-neutral-500 dark:text-neutral-200";
     };
     const getInputType = (column) => column.inputType || "text";
     const getInputClass = (column) => {
-      let classes = "block w-full min-w-[12rem] sm:min-w-[10rem] max-w-xs rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 shadow-none placeholder-gray-400 transition-colors duration-200 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20";
+      let classes = "block w-full max-w-xs min-w-[12rem] rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm text-neutral-900 shadow-none placeholder:text-neutral-400 transition-colors duration-200 focus:border-neutral-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:bg-neutral-950 dark:focus:ring-neutral-100/10 sm:min-w-[10rem]";
       if (column.inputClass) {
         classes += ` ${column.inputClass}`;
       }
       if (column.isSecondary) {
-        classes += " text-gray-600";
+        classes += " text-neutral-600 dark:text-neutral-200";
       }
       return classes;
     };
@@ -3580,24 +3584,24 @@ const _sfc_main = {
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["bg-white", __props.isCard ? "mx-4 md:mx-0 border border-gray-200/60 rounded-xl shadow-[0_1px_3px_rgba(0,0,0,0.1)] animate-fadeIn" : ""])
+        class: normalizeClass(["bg-white dark:bg-neutral-950", __props.isCard ? "mx-4 animate-fadeIn rounded-xl border border-neutral-200 shadow-sm dark:border-neutral-800 md:mx-0" : ""])
       }, [
         __props.search ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass([
             "px-6 py-4",
-            __props.isCard ? "border-b border-gray-200 bg-gray-50/80 rounded-t-xl" : "mb-4 bg-white/80 backdrop-blur-sm"
+            __props.isCard ? "rounded-t-xl border-b border-neutral-200 bg-neutral-50/80 dark:border-neutral-800 dark:bg-neutral-900/80" : "mb-4 bg-white/80 backdrop-blur-sm dark:bg-neutral-950/80"
           ])
         }, [
           createElementVNode("div", _hoisted_1, [
             createElementVNode("div", _hoisted_2, [
-              createVNode(unref(MagnifyingGlassIcon), { class: "h-4 w-4 text-gray-400" })
+              createVNode(unref(MagnifyingGlassIcon), { class: "h-4 w-4 text-neutral-400 dark:text-neutral-200" })
             ]),
             withDirectives(createElementVNode("input", {
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
               type: "text",
               placeholder: __props.searchPlaceholder,
-              class: "block w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 py-2 text-sm text-gray-900 placeholder-gray-500 transition-colors duration-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+              class: "block w-full rounded-lg border border-neutral-200 bg-white py-2 pl-9 pr-3 text-sm text-neutral-900 placeholder:text-neutral-500 transition-colors duration-200 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10"
             }, null, 8, _hoisted_3), [
               [vModelText, searchQuery.value]
             ])
@@ -3715,7 +3719,7 @@ const _sfc_main = {
           ])
         ], 2)) : (openBlock(), createElementBlock("div", _hoisted_15, [
           createElementVNode("div", _hoisted_16, [
-            (openBlock(), createBlock(resolveDynamicComponent(__props.emptyState.icon), { class: "h-8 w-8 text-gray-400" }))
+            (openBlock(), createBlock(resolveDynamicComponent(__props.emptyState.icon), { class: "h-8 w-8 text-neutral-400 dark:text-neutral-200" }))
           ]),
           createElementVNode("h3", _hoisted_17, toDisplayString(__props.emptyState.title), 1),
           createElementVNode("p", _hoisted_18, toDisplayString(__props.emptyState.description), 1),