@underverse-ui/underverse 1.0.57 → 1.0.58

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "sourceEntry": "src/index.ts",
   "totalExports": 239,
   "exports": [

package/dist/index.cjs

@@ -361,7 +361,7 @@ var variantStyles = {
   danger: "bg-destructive text-destructive-foreground border-destructive/20",
   destructive: "bg-destructive text-destructive-foreground border-destructive/20",
   info: "bg-info text-info-foreground border-info/20",
-  outline: "bg-transparent text-foreground border-border",
+  outline: "bg-transparent text-foreground border-border/50",
   ghost: "bg-transparent text-foreground border-transparent",
   transparent: "bg-transparent text-foreground border-transparent",
   gradient: "bg-linear-to-r from-primary to-secondary text-primary-foreground border-transparent"
@@ -683,7 +683,7 @@ var Card = import_react2.default.forwardRef(
             "div",
             {
               className: cn(
-                "relative flex items-center p-4 md:p-6 pt-0 border-t border-border mt-4 max-md:mt-3 max-md:p-3 max-md:pt-0",
+                "relative flex items-center p-4 md:p-6 pt-0 border-t border-border/50 mt-4 max-md:mt-3 max-md:p-3 max-md:pt-0",
                 footerClassName
               ),
               children: footer
@@ -1823,12 +1823,12 @@ var Input = (0, import_react3.forwardRef)(
         error: "bg-destructive/10 border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
       },
       outlined: {
-        container: "bg-transparent border border-border hover:border-accent-foreground/30",
+        container: "bg-transparent border border-border/50 hover:border-accent-foreground/30",
         focus: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
         error: "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
       },
       minimal: {
-        container: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30",
+        container: "bg-transparent border-0 border-b border-border/50 hover:border-accent-foreground/30",
         focus: "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none",
         error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
       }
@@ -2181,7 +2181,7 @@ var NumberInput = (0, import_react3.forwardRef)(
       lg: { width: "w-11", icon: { width: 12, height: 7, path: { up: "M6 1L11 6H1L6 1Z", down: "M6 6L1 1H11L6 6Z" } } }
     };
     const ss = stepperSizeStyles[inputSize];
-    const stepperAddon = showSteppers ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("absolute right-0 inset-y-0 flex flex-col border-l border-border rounded-r-full overflow-hidden", ss.width), children: [
+    const stepperAddon = showSteppers ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("absolute right-0 inset-y-0 flex flex-col border-l border-border/50 rounded-r-full overflow-hidden", ss.width), children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
@@ -2280,8 +2280,8 @@ var Textarea = (0, import_react3.forwardRef)(
     const variantStyles6 = {
       default: "bg-background border border-input hover:border-accent-foreground/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
       filled: "bg-muted/50 border border-transparent hover:bg-muted/70 focus-visible:outline-none focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
-      outlined: "bg-transparent border border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
-      minimal: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none"
+      outlined: "bg-transparent border border-border/50 hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+      minimal: "bg-transparent border-0 border-b border-border/50 hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none"
     };
     const resizeClasses = {
       none: "resize-none",
@@ -2739,7 +2739,7 @@ var Switch = ({
               className: cn(
                 "absolute top-0.5 left-0.5 rounded-full transition-transform duration-200 ease-out shadow-sm",
                 sizeClasses2[size].handle,
-                "bg-background border border-border",
+                "bg-background border border-border/50",
                 checked ? sizeClasses2[size].translate : "translate-x-0",
                 !disabled && "hover:scale-[1.02]",
                 isPressed && "scale-95",
@@ -3832,7 +3832,7 @@ var React14 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var variantStyles3 = {
-  default: "bg-popover text-popover-foreground border-border",
+  default: "bg-popover text-popover-foreground border-border/50",
   info: "bg-info text-info-foreground border-info/20",
   warning: "bg-warning text-warning-foreground border-warning/20",
   error: "bg-destructive text-destructive-foreground border-destructive/20",
@@ -4751,7 +4751,7 @@ var Sheet = ({
       {
         className: cn(
           "fixed flex flex-col bg-background text-foreground shadow-2xl",
-          "border-border transition-all duration-300 ease-out",
+          "border-border/50 transition-all duration-300 ease-out",
           positionStyles2[side],
           sizeStyles4[size][side],
           // Borders based on side
@@ -4768,7 +4768,7 @@ var Sheet = ({
           transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
         },
         children: [
-          (title || description || header || showClose) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "shrink-0 border-b border-border", children: header || /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between p-4", children: [
+          (title || description || header || showClose) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "shrink-0 border-b border-border/50", children: header || /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between p-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1", children: [
               title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-lg font-semibold text-foreground", children: title }),
               description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground mt-1", children: description })
@@ -4787,7 +4787,7 @@ var Sheet = ({
               children
             }
           ),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "shrink-0 border-t border-border p-4", children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "shrink-0 border-t border-border/50 p-4", children: footer })
         ]
       }
     )
@@ -4805,7 +4805,7 @@ var BottomSheet = ({ snapPoints = ["25%", "50%", "90%"], defaultSnap = 1, ...pro
 };
 var SidebarSheet = ({ navigation, children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Sheet, { ...props, side: "left", variant: "push", size: "md", children: [
-    navigation && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "border-b border-border pb-4 mb-4", children: navigation }),
+    navigation && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "border-b border-border/50 pb-4 mb-4", children: navigation }),
     children
   ] });
 };
@@ -4817,7 +4817,7 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
 var variantConfig = {
   default: {
     icon: import_lucide_react9.Info,
-    containerClassName: "bg-muted/50 border-border",
+    containerClassName: "bg-muted/50 border-border/50",
     iconClassName: "text-muted-foreground",
     iconBgClassName: "bg-muted",
     accentBarClassName: "bg-muted-foreground"
@@ -10538,7 +10538,7 @@ var DateTimePicker = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn(sizeStyles8[size].padding, "border-t border-border flex justify-between items-center bg-muted/20"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn(sizeStyles8[size].padding, "border-t border-border/50 flex justify-between items-center bg-muted/20"), children: [
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button_default, { variant: "ghost", size: sizeStyles8[size].buttonSize, onClick: handleClear, className: "text-muted-foreground hover:text-foreground", children: clearLabel || t?.("clear") || "Clear" }),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button_default, { size: sizeStyles8[size].buttonSize, onClick: handleApply, children: doneLabel || t?.("done") || "Done" })
           ] })
@@ -11313,7 +11313,7 @@ function CalendarTimelineHeader(props) {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "p-3 border-t border-border flex justify-between items-center bg-muted/20", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "p-3 border-t border-border/50 flex justify-between items-center bg-muted/20", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                     Button_default,
                     {
@@ -13081,7 +13081,7 @@ function CalendarTimeline({
     {
       className: cn(
         "rounded-2xl md:rounded-3xl overflow-hidden bg-card text-card-foreground backdrop-blur-sm",
-        "border border-border shadow-sm md:hover:shadow-md",
+        "border border-border/50 shadow-sm md:hover:shadow-md",
         "transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
         densityClass,
         className
@@ -14111,7 +14111,7 @@ var RadioGroupItem = React38.forwardRef(
             "inline-flex items-center justify-center gap-2 rounded-lg border font-medium transition-all duration-200",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "disabled:cursor-not-allowed disabled:opacity-50",
-            isSelected ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border bg-background hover:bg-accent hover:text-accent-foreground",
+            isSelected ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border/50 bg-background hover:bg-accent hover:text-accent-foreground",
             sizeStyles7[size].padding,
             sizeStyles7[size].text,
             className
@@ -14392,7 +14392,7 @@ var Slider = React39.forwardRef(
         {
           className: cn(
             "absolute pointer-events-none transition-all duration-200 ease-out",
-            "bg-popover text-popover-foreground rounded-lg shadow-lg border border-border",
+            "bg-popover text-popover-foreground rounded-lg shadow-lg border border-border/50",
             "whitespace-nowrap font-medium -translate-x-1/2 z-50",
             sizeStyles8.tooltip,
             shouldShow ? "opacity-100 -translate-y-10 scale-100" : "opacity-0 -translate-y-8 scale-95",
@@ -14880,10 +14880,10 @@ function OverlayControls({
                 noFocus: true
               }
             ),
-            previewData && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-xl border border-border shadow-lg overflow-hidden", children: [
+            previewData && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-xl border border-border/50 shadow-lg overflow-hidden", children: [
               /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
               /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime3(previewData.time) })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-xs font-mono text-center", children: formatTime3(previewData.time) }) }) })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border/50 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-xs font-mono text-center", children: formatTime3(previewData.time) }) }) })
           ] }),
           showControlsBar && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -14920,7 +14920,7 @@ function OverlayControls({
                   children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react24.RotateCw, { className: "w-4 h-4" })
                 }
               ),
-              (showTime ?? true) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "px-3 py-1 rounded-full text-xs font-mono bg-background/60 text-foreground shadow-sm border border-border whitespace-nowrap", children: [
+              (showTime ?? true) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "px-3 py-1 rounded-full text-xs font-mono bg-background/60 text-foreground shadow-sm border border-border/50 whitespace-nowrap", children: [
                 formatTime3(dragValue),
                 " / ",
                 formatTime3(max)
@@ -14982,7 +14982,7 @@ function OverlayControls({
                     ]
                   }
                 ),
-                rateOpen && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                rateOpen && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border/50 shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                   "button",
                   {
                     onClick: () => {
@@ -15686,7 +15686,7 @@ function ImageUpload({
       {
         className: cn(
           "relative border-2 border-dashed rounded-2xl md:rounded-3xl p-8 text-center transition-all duration-200",
-          isDragging && !disabled ? "border-primary bg-primary/5 scale-[1.02]" : "border-border hover:border-primary/50",
+          isDragging && !disabled ? "border-primary bg-primary/5 scale-[1.02]" : "border-border/50 hover:border-primary/50",
           disabled && "opacity-50 cursor-not-allowed",
           uploading && "pointer-events-none"
         ),
@@ -15723,7 +15723,7 @@ function ImageUpload({
     ),
     showPreview && uploadedImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "relative group bg-card border border-border rounded-2xl md:rounded-3xl p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "relative group bg-card border border-border/50 rounded-2xl md:rounded-3xl p-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Button_default,
           {
@@ -16055,7 +16055,7 @@ function FileUpload({
       "div",
       {
         className: cn(
-          "group relative flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border rounded-xl",
+          "group relative flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl",
           "transition-all duration-200 hover:bg-card hover:shadow-md hover:border-primary/20",
           file.status === "error" && "border-destructive/50 bg-destructive/5",
           file.status === "uploading" && "border-primary/30",
@@ -16138,13 +16138,13 @@ function FileUpload({
       "border-2 border-dashed rounded-2xl",
       currentSize.padding,
       "text-center transition-all duration-300",
-      isDragging && !disabled ? "border-primary bg-primary/5 scale-[1.01] shadow-lg shadow-primary/10" : "border-border hover:border-primary/50 hover:bg-muted/30",
+      isDragging && !disabled ? "border-primary bg-primary/5 scale-[1.01] shadow-lg shadow-primary/10" : "border-border/50 hover:border-primary/50 hover:bg-muted/30",
       disabled && "opacity-50 cursor-not-allowed"
     ),
     compact: cn(
       "border border-dashed rounded-xl p-4",
       "flex items-center gap-4 transition-all duration-200",
-      isDragging && !disabled ? "border-primary bg-primary/5" : "border-border hover:border-primary/50",
+      isDragging && !disabled ? "border-primary bg-primary/5" : "border-border/50 hover:border-primary/50",
       disabled && "opacity-50 cursor-not-allowed"
     ),
     minimal: cn(
@@ -16891,12 +16891,12 @@ var ListRoot = React44.forwardRef(
     const hasChildren = childCount > 0;
     const variantClasses3 = {
       plain: "",
-      outlined: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm max-md:rounded-xl",
+      outlined: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border/50 shadow-sm max-md:rounded-xl",
       soft: "rounded-2xl md:rounded-3xl bg-muted/40 border border-border/60 max-md:rounded-xl",
-      bordered: "border border-border rounded-2xl md:rounded-3xl max-md:rounded-xl",
-      card: "rounded-2xl md:rounded-3xl bg-card shadow-md border border-border max-md:rounded-xl max-md:shadow-sm",
+      bordered: "border border-border/50 rounded-2xl md:rounded-3xl max-md:rounded-xl",
+      card: "rounded-2xl md:rounded-3xl bg-card shadow-md border border-border/50 max-md:rounded-xl max-md:shadow-sm",
       flush: "",
-      striped: "rounded-2xl md:rounded-3xl border border-border overflow-hidden max-md:rounded-xl"
+      striped: "rounded-2xl md:rounded-3xl border border-border/50 overflow-hidden max-md:rounded-xl"
     };
     if (loading2) {
       return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -17479,8 +17479,8 @@ var TimelineItem = React46.forwardRef(
     const padding = ctx.dense ? sz.densePadY : sz.padY;
     const variantClasses3 = {
       default: "",
-      outlined: "rounded-xl border border-border bg-card shadow-sm px-4 py-3",
-      card: "rounded-2xl border border-border bg-card shadow-md px-5 py-4",
+      outlined: "rounded-xl border border-border/50 bg-card shadow-sm px-4 py-3",
+      card: "rounded-2xl border border-border/50 bg-card shadow-md px-5 py-4",
       minimal: "border-l-2 pl-4 py-2",
       modern: "rounded-xl bg-linear-to-r from-card to-muted/20 border border-border/50 px-5 py-4 backdrop-blur-sm",
       gradient: "rounded-2xl bg-linear-to-br from-primary/10 via-card to-accent/10 border border-primary/20 px-5 py-4 shadow-lg"
@@ -17773,7 +17773,7 @@ var Swatch = ({
     "button",
     {
       type: "button",
-      className: cn(sizeClasses2[size], "rounded-lg border border-border shadow-sm hover:scale-110 transition-transform", onClick && "cursor-pointer"),
+      className: cn(sizeClasses2[size], "rounded-lg border border-border/50 shadow-sm hover:scale-110 transition-transform", onClick && "cursor-pointer"),
       style: { backgroundColor: color },
       onClick,
       "aria-label": ariaLabel
@@ -17907,7 +17907,7 @@ function ColorPicker({
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "span",
             {
-              className: cn("rounded-md border border-border shadow-sm", size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5"),
+              className: cn("rounded-md border border-border/50 shadow-sm", size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5"),
               style: { backgroundColor: withAlpha ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : hexForInput }
             }
           ),
@@ -17932,7 +17932,7 @@ function ColorPicker({
       placement: "bottom-start",
       matchTriggerWidth: variant === "minimal",
       contentWidth: contentWidthByVariant[variant],
-      contentClassName: cn("p-3 rounded-2xl md:rounded-3xl border border-border bg-card shadow-lg", contentClassName),
+      contentClassName: cn("p-3 rounded-2xl md:rounded-3xl border border-border/50 bg-card shadow-lg", contentClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "space-y-3", children: [
         variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
@@ -17941,7 +17941,7 @@ function ColorPicker({
               type: "color",
               value: hexForInput,
               onChange: handleNativeChange,
-              className: "h-9 w-9 rounded-lg cursor-pointer border border-border"
+              className: "h-9 w-9 rounded-lg cursor-pointer border border-border/50"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
@@ -17949,7 +17949,7 @@ function ColorPicker({
             {
               type: "button",
               onClick: tryEyedropper,
-              className: cn("h-9 px-3 rounded-lg border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5"),
+              className: cn("h-9 px-3 rounded-lg border border-border/50 text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5"),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react31.Pipette, { className: "w-3.5 h-3.5" }),
                 variant === "full" && "Pick"
@@ -17962,7 +17962,7 @@ function ColorPicker({
               type: "button",
               onClick: copyToClipboard,
               className: cn(
-                "h-9 px-3 rounded-lg border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5",
+                "h-9 px-3 rounded-lg border border-border/50 text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5",
                 copied && "bg-success/10 border-success/30"
               ),
               children: [
@@ -17976,7 +17976,7 @@ function ColorPicker({
             {
               type: "button",
               onClick: clear,
-              className: "ml-auto h-9 px-2 rounded-lg border border-border text-xs hover:bg-destructive/10 transition-colors flex items-center gap-1",
+              className: "ml-auto h-9 px-2 rounded-lg border border-border/50 text-xs hover:bg-destructive/10 transition-colors flex items-center gap-1",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react31.X, { className: "w-3.5 h-3.5" }),
                 variant === "full" && "Clear"
@@ -18002,7 +18002,7 @@ function ColorPicker({
               type: "button",
               onClick: copyToClipboard,
               className: cn(
-                "h-9 w-9 rounded-lg border border-border hover:bg-accent/10 transition-colors flex items-center justify-center",
+                "h-9 w-9 rounded-lg border border-border/50 hover:bg-accent/10 transition-colors flex items-center justify-center",
                 copied && "bg-success/10 border-success/30"
               ),
               children: copied ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react31.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react31.Copy, { className: "w-3.5 h-3.5" })
@@ -18351,7 +18351,7 @@ var MusicPlayer = ({
       }
     }
   }, [currentSongIndex, currentSong.startTime, isPlaying]);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `underverse-music-player bg-card dark:bg-card border border-border rounded-2xl shadow-2xl overflow-hidden ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `underverse-music-player bg-card dark:bg-card border border-border/50 rounded-2xl shadow-2xl overflow-hidden ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("audio", { ref: audioRef, src: currentSong.audioUrl, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: playNext }),
     /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "p-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "text-center mb-6", children: [
@@ -18429,7 +18429,7 @@ var MusicPlayer = ({
         }
       ) })
     ] }),
-    showPlaylist && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "p-4", children: [
+    showPlaylist && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "p-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
         "Playlist (",
         playlist.length,
@@ -18512,12 +18512,12 @@ function joinAreas(areas) {
 }
 function getVariantClasses(variant = "default", outlined) {
   if (outlined) {
-    return "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm";
+    return "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border/50 shadow-sm";
   }
   const variants = {
     default: "",
-    bordered: "border border-border rounded-2xl md:rounded-3xl",
-    card: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm",
+    bordered: "border border-border/50 rounded-2xl md:rounded-3xl",
+    card: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border/50 shadow-sm",
     flat: "bg-muted/30 rounded-2xl md:rounded-3xl",
     glass: "bg-background/80 backdrop-blur-sm border border-border/50 rounded-2xl md:rounded-3xl shadow-lg"
   };
@@ -18731,7 +18731,7 @@ function ChartTooltip({
         /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
           "div",
           {
-            className: cn("bg-popover text-popover-foreground border border-border", "rounded-2xl shadow-xl px-3 py-2 text-sm", "backdrop-blur-sm"),
+            className: cn("bg-popover text-popover-foreground border border-border/50", "rounded-2xl shadow-xl px-3 py-2 text-sm", "backdrop-blur-sm"),
             style: {
               minWidth: "80px",
               width: "max-content",
@@ -20428,7 +20428,7 @@ var import_jsx_runtime67 = require("react/jsx-runtime");
 var TABLE_BASE_CLASS = "w-full caption-bottom text-sm";
 var TABLE_CONTAINER_BASE_CLASS = [
   "relative w-full overflow-auto",
-  "rounded-2xl md:rounded-3xl border border-border",
+  "rounded-2xl md:rounded-3xl border border-border/50",
   "bg-card text-card-foreground shadow-sm",
   "backdrop-blur-sm transition-all duration-300"
 ].join(" ");
@@ -20466,7 +20466,7 @@ var Table = import_react35.default.forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableHeader = import_react35.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted", className), ...props, children: [
+var TableHeader = import_react35.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border/50", "bg-muted", className), ...props, children: [
   children,
   filterRow
 ] }));
@@ -20480,7 +20480,7 @@ var TableRow = import_react35.default.forwardRef(({ className, ...props }, ref)
   {
     ref,
     className: cn(
-      "border-b border-border transition-all duration-300",
+      "border-b border-border/50 transition-all duration-300",
       "hover:bg-muted/30 hover:shadow-sm",
       "data-[state=selected]:bg-muted/50",
       className
@@ -21067,7 +21067,7 @@ function DataTableToolbar({
                 setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
                 /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "truncate", children: c.title })
               ]
             },
@@ -21843,13 +21843,13 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border/50", children: [
       /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
       /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
     ] }),
     notification.title && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
     notification.body && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border/50 pt-2", children: formatTime3(notification.created_at) }),
     /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
       hasLink && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_lucide_react35.ExternalLink, { className: "w-4 h-4" }),
@@ -21955,12 +21955,12 @@ function ThemeToggleHeadless({
         /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "div",
           {
-            className: "z-9999 bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+            className: "z-9999 bg-card border border-border/50 rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
             children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border/50 mb-2", children: labels?.heading ?? "Theme" }),
               themes.map((opt) => {
                 const Icon = opt.icon;
                 const active = theme === opt.value;
@@ -22052,12 +22052,12 @@ function LanguageSwitcherHeadless({
         /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           "div",
           {
-            className: "z-9999 bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+            className: "z-9999 bg-card border border-border/50 rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
             children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
+              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border/50 mb-2", children: labels?.heading ?? "Language" }),
               locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
                 Button_default,
                 {
@@ -22653,7 +22653,7 @@ var CommandList = (0, import_react48.forwardRef)((props, ref) => {
   if (props.items.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: props.messages.noResults });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border/50 rounded-2xl shadow-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: props.messages.basicBlocks }) }),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       "button",
@@ -23756,9 +23756,9 @@ var EmojiList = (0, import_react50.forwardRef)((props, ref) => {
     }
   }));
   if (props.items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "w-80 p-4 text-center text-sm text-muted-foreground bg-card border border-border rounded-2xl shadow-lg", children: "No emoji found" });
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "w-80 p-4 text-center text-sm text-muted-foreground bg-card border border-border/50 rounded-2xl shadow-lg", children: "No emoji found" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "w-80 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "w-80 max-h-80 overflow-y-auto bg-card border border-border/50 rounded-2xl shadow-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react40.Smile, { className: "w-4 h-4 text-primary" }),
       /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Emoji" })
@@ -24535,7 +24535,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
   (0, import_react55.useEffect)(() => {
     isUserScrolling.current = true;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "w-96 bg-card border border-border rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-128", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "w-96 bg-card border border-border/50 rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-128", children: [
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "p-3 border-b bg-muted/30 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react43.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
       /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
@@ -24547,7 +24547,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
           onChange: (e) => setSearch(e.target.value),
           className: cn(
             "w-full pl-9 pr-9 py-2 rounded-lg",
-            "bg-background border border-border",
+            "bg-background border border-border/50",
             "text-sm placeholder:text-muted-foreground",
             "focus:outline-none focus:ring-2 focus:ring-primary/20"
           )
@@ -25493,7 +25493,7 @@ var CustomBubbleMenu = ({ editor }) => {
       "div",
       {
         ref: menuRef,
-        className: "fixed z-50 flex rounded-2xl border border-border bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 zoom-in-95",
+        className: "fixed z-50 flex rounded-2xl border border-border/50 bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 zoom-in-95",
         style: {
           top: `${position.top}px`,
           left: `${position.left}px`,
@@ -25545,7 +25545,7 @@ var CustomFloatingMenu = ({ editor }) => {
     /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       "div",
       {
-        className: "fixed z-50 rounded-2xl border border-border bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 slide-in-from-bottom-2",
+        className: "fixed z-50 rounded-2xl border border-border/50 bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 slide-in-from-bottom-2",
         style: {
           top: `${position.top}px`,
           left: `${position.left}px`,
@@ -26019,7 +26019,7 @@ var UEditor = import_react58.default.forwardRef(({
     "div",
     {
       className: cn(
-        "group relative flex flex-col rounded-2xl md:rounded-3xl border border-border bg-card text-card-foreground overflow-hidden",
+        "group relative flex flex-col rounded-2xl md:rounded-3xl border border-border/50 bg-card text-card-foreground overflow-hidden",
         "transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
         "shadow-sm focus-within:shadow-md focus-within:border-primary/15",
         "backdrop-blur-sm",