@rovula/ui 0.1.43 → 0.1.44

package/dist/src/theme/global.css

@@ -830,13 +830,13 @@
   --bg-bg1-skyller: #ffffff;
   --bg-bg2-xspector: #0a1b2e;
   --bg-bg2-report-xspector-light-mode: #ffffff;
-  --bg-bg2-skyller: #f8fbff;
+  --bg-bg2-skyller: #eff6fe;
   --bg-bg3-xspector: #0e2841;
   --bg-bg3-report-xspector-light-mode: #ffffff;
-  --bg-bg3-skyller: #f8fbff;
+  --bg-bg3-skyller: #dfedfe;
   --bg-stroke1-xspector: #1c3955;
   --bg-stroke1-report-xspector-light-mode: #e2e2e2;
-  --bg-stroke1-skyller: #ececec;
+  --bg-stroke1-skyller: #afd2fd;
   --bg-stroke2-xspector: #294664;
   --bg-stroke2-report-xspector-light-mode: #e5e5e5;
   --bg-stroke2-skyller: #e5e5e5;
@@ -878,7 +878,7 @@
   --function-default-hover-bg-skyller: rgba(23 23 23 / 0.08);
   --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
   --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
-  --function-default-stroke-skyller: rgba(0 0 0 / 0.48);
+  --function-default-stroke-skyller: rgba(158 158 158 / 0.48);
   --function-default-icon-xspector: #212b36;
   --function-default-icon-report-xspector-light-mode: #ffffff;
   --function-default-icon-skyller: #ffffff;
@@ -1046,7 +1046,7 @@
   --bg-bg5-skyller: #000000;
   --bg-stroke3-xspector: #2d2e30;
   --bg-stroke3-report-xspector-light-mode: #e5e5e5;
-  --bg-stroke3-skyller: #d4d4d4;
+  --bg-stroke3-skyller: #afd2fd;
   --bg-stroke4-xspector: #000000;
   --bg-stroke4-report-xspector-light-mode: #000000;
   --bg-stroke4-skyller: #000000;
@@ -1058,7 +1058,7 @@
   --table-bg-main-skyller: #bfdbfd;
   --table-bg-line-xspector: #1c3955;
   --table-bg-line-report-xspector-light-mode: #d2d2d2;
-  --table-bg-line-skyller: #ececec;
+  --table-bg-line-skyller: #dfedfe;
   --table-bg-a-xspector: #0c2845;
   --table-bg-a-report-xspector-light-mode: #f3f3f3;
   --table-bg-a-skyller: #fdfdfd;
@@ -1073,10 +1073,10 @@
   --table-bg-hover-skyller: #cfe4fd;
   --table-panel-sub-line-xspector: #393b3f;
   --table-panel-sub-line-report-xspector-light-mode: #d4d4d4;
-  --table-panel-sub-line-skyller: #ececec;
+  --table-panel-sub-line-skyller: #bfdbfd;
   --table-panel-main-line-xspector: #606b77;
   --table-panel-main-line-report-xspector-light-mode: #d4d4d4;
-  --table-panel-main-line-skyller: #d4d4d4;
+  --table-panel-main-line-skyller: #60a5fa;
   --table-panel-selected-xspector: #6f6700;
   --table-panel-selected-report-xspector-light-mode: #d4d4d4;
   --table-panel-selected-skyller: #afd2fd;
@@ -3153,7 +3153,7 @@
   /* Hover overlay on body rows.                                        */
   --table-c-hover: var(--table-bg-hover);
   /* Selected row overlay (data-state="selected" on <tr>).              */
-  --table-c-selected: var(--transparent-primary-12);
+  --table-c-selected: color-mix(in srgb, var(--table-panel-selected) 24%, transparent);
 }
 
 /* ------------------------------------------------------------------ */
@@ -5178,6 +5178,14 @@ input[type=number] {
   border-radius: 2px;
 }
 
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
+
+.rounded-\[6px\] {
+  border-radius: 6px;
+}
+
 .rounded-\[8px\] {
   border-radius: 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -87,7 +87,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@headlessui/react": "^2.0.3",
+    "@headlessui/react": "^2.2.10",
     "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",

package/src/components/Badge/Badge.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const badgeVariants = cva(
   [
-    "inline-flex items-center justify-center rounded-lg px-3 py-1",
+    "inline-flex items-center justify-center rounded-[6px] px-3 py-1",
     "typography-body3",
   ],
   {
@@ -50,7 +50,7 @@ export const badgeVariants = cva(
 
 export const severityBadgeVariants = cva(
   [
-    "inline-flex items-center justify-center rounded px-1 py-0.5",
+    "inline-flex items-center justify-center rounded-[4px] px-1 py-0.5",
     "typography-small6 text-[var(--badge-severity-text)]",
   ],
   {

package/src/components/DataTable/DataTable.editing.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
 
 import TextInput from "@/components/TextInput/TextInput";
@@ -562,6 +562,22 @@ function EditCellSelect<TData extends RowData>({
   keepOpenAfterSelect?: boolean;
   errorMessage?: string;
 }) {
+  const selectRef = useRef<HTMLInputElement>(null);
+
+  // Cell mode: React's `autoFocus` fires el.focus() during the commit phase,
+  // which causes Headless UI's flushSync-inside-microTask to run while React
+  // is still committing → silent failure in concurrent mode. Delay focus to a
+  // rAF (same approach as row-mode Tab navigation) so it fires safely after
+  // the commit. Cancel on cleanup so StrictMode's double-mount is safe.
+  useEffect(() => {
+    if (!autoFocus) return;
+    const el = selectRef.current;
+    if (!el) return;
+    const rafId = requestAnimationFrame(() => el.focus());
+    return () => cancelAnimationFrame(rafId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const displayValue = String(
     (row.original as Record<string, unknown>)[columnId] ?? "",
   );
@@ -586,6 +602,7 @@ function EditCellSelect<TData extends RowData>({
     <div>
       <Dropdown
         id={`edit-dd-${columnId}-${row.id}`}
+        ref={selectRef}
         options={options}
         value={selected}
         onSelect={(opt) => {
@@ -601,7 +618,7 @@ function EditCellSelect<TData extends RowData>({
         label=""
         keepFooterSpace={false}
         segmentedInput
-        autoFocus={autoFocus}
+        autoFocus={false}
         onBlur={onBlurField}
         onKeyDown={onKeyDown}
         keepOpenAfterSelect={keepOpenAfterSelect}

package/src/components/Dropdown/Dropdown.tsx

@@ -301,7 +301,10 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
              */}
             <ComboboxOptions
               {...(portal
-                ? { portal: true, anchor: { to: "bottom start" as const, gap: 4 } }
+                ? {
+                    portal: true,
+                    anchor: { to: "bottom start" as const, gap: 4 },
+                  }
                 : {})}
               className={cn(
                 !portal && "absolute top-full left-0 w-full -mt-3 z-[51]",

package/src/theme/themes/variable.css

@@ -830,13 +830,13 @@
   --bg-bg1-skyller: #ffffff;
   --bg-bg2-xspector: #0a1b2e;
   --bg-bg2-report-xspector-light-mode: #ffffff;
-  --bg-bg2-skyller: #f8fbff;
+  --bg-bg2-skyller: #eff6fe;
   --bg-bg3-xspector: #0e2841;
   --bg-bg3-report-xspector-light-mode: #ffffff;
-  --bg-bg3-skyller: #f8fbff;
+  --bg-bg3-skyller: #dfedfe;
   --bg-stroke1-xspector: #1c3955;
   --bg-stroke1-report-xspector-light-mode: #e2e2e2;
-  --bg-stroke1-skyller: #ececec;
+  --bg-stroke1-skyller: #afd2fd;
   --bg-stroke2-xspector: #294664;
   --bg-stroke2-report-xspector-light-mode: #e5e5e5;
   --bg-stroke2-skyller: #e5e5e5;
@@ -878,7 +878,7 @@
   --function-default-hover-bg-skyller: rgba(23 23 23 / 0.08);
   --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
   --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
-  --function-default-stroke-skyller: rgba(0 0 0 / 0.48);
+  --function-default-stroke-skyller: rgba(158 158 158 / 0.48);
   --function-default-icon-xspector: #212b36;
   --function-default-icon-report-xspector-light-mode: #ffffff;
   --function-default-icon-skyller: #ffffff;
@@ -1046,7 +1046,7 @@
   --bg-bg5-skyller: #000000;
   --bg-stroke3-xspector: #2d2e30;
   --bg-stroke3-report-xspector-light-mode: #e5e5e5;
-  --bg-stroke3-skyller: #d4d4d4;
+  --bg-stroke3-skyller: #afd2fd;
   --bg-stroke4-xspector: #000000;
   --bg-stroke4-report-xspector-light-mode: #000000;
   --bg-stroke4-skyller: #000000;
@@ -1058,7 +1058,7 @@
   --table-bg-main-skyller: #bfdbfd;
   --table-bg-line-xspector: #1c3955;
   --table-bg-line-report-xspector-light-mode: #d2d2d2;
-  --table-bg-line-skyller: #ececec;
+  --table-bg-line-skyller: #dfedfe;
   --table-bg-a-xspector: #0c2845;
   --table-bg-a-report-xspector-light-mode: #f3f3f3;
   --table-bg-a-skyller: #fdfdfd;
@@ -1073,10 +1073,10 @@
   --table-bg-hover-skyller: #cfe4fd;
   --table-panel-sub-line-xspector: #393b3f;
   --table-panel-sub-line-report-xspector-light-mode: #d4d4d4;
-  --table-panel-sub-line-skyller: #ececec;
+  --table-panel-sub-line-skyller: #bfdbfd;
   --table-panel-main-line-xspector: #606b77;
   --table-panel-main-line-report-xspector-light-mode: #d4d4d4;
-  --table-panel-main-line-skyller: #d4d4d4;
+  --table-panel-main-line-skyller: #60a5fa;
   --table-panel-selected-xspector: #6f6700;
   --table-panel-selected-report-xspector-light-mode: #d4d4d4;
   --table-panel-selected-skyller: #afd2fd;

package/src/theme/tokens/components/table.css

@@ -40,7 +40,7 @@
   --table-c-hover: var(--table-bg-hover);
 
   /* Selected row overlay (data-state="selected" on <tr>).              */
-  --table-c-selected: var(--transparent-primary-12);
+  --table-c-selected: color-mix(in srgb, var(--table-panel-selected) 24%, transparent);
 }
 
 /* ------------------------------------------------------------------ */