@basictech/react 0.12.0-beta.2 → 0.12.0-beta.3

package/dist/index.mjs

@@ -1100,9 +1100,22 @@ import { Tabs } from "@base-ui/react/tabs";
 import { BasicError as BasicError6 } from "@basictech/core";
 import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var AppearanceContext = createContext2({});
+function accentText(accent) {
+  if (!/^#([\da-f]{3}|[\da-f]{6})$/i.test(accent)) return "#fff";
+  const hex = accent.length === 4 ? accent.slice(1).split("").map((digit) => digit + digit).join("") : accent.slice(1);
+  const [red, green, blue] = [0, 2, 4].map((offset) => {
+    const channel = parseInt(hex.slice(offset, offset + 2), 16) / 255;
+    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * red + 0.7152 * green + 0.0722 * blue > 0.179 ? "#000" : "#fff";
+}
 function appearanceStyle(appearance) {
   return {
-    ...appearance.accent ? { "--basic-accent": appearance.accent } : {},
+    ...appearance.base ? { "--basic-surface": appearance.base } : {},
+    ...appearance.accent ? {
+      "--basic-accent": appearance.accent,
+      "--basic-accent-text": accentText(appearance.accent)
+    } : {},
     ...appearance.radius ? { "--basic-radius": appearance.radius } : {}
   };
 }
@@ -1219,6 +1232,7 @@ function UserAvatar({
   auth,
   projectProfile,
   allowAddAccount,
+  menuItems,
   ...avatarProps
 }) {
   return /* @__PURE__ */ jsx3(
@@ -1228,6 +1242,7 @@ function UserAvatar({
       auth,
       projectProfile,
       allowAddAccount,
+      menuItems,
       sync: avatarProps.sync,
       showSyncBadge: avatarProps.showSyncBadge,
       avatarProps
@@ -1356,7 +1371,8 @@ function UserMenu({
   projectProfile,
   allowAddAccount = true,
   className = "",
-  accountSettingsUrl
+  accountSettingsUrl,
+  menuItems = []
 }) {
   const liveAccounts = useAccounts();
   const liveAuth = useAuth();
@@ -1476,6 +1492,22 @@ function UserMenu({
             ]
           }
         ),
+        menuItems.map((item) => /* @__PURE__ */ jsxs(
+          Menu.Item,
+          {
+            className: "basic-menu-item",
+            render: item.href !== void 0 ? /* @__PURE__ */ jsx3("a", { href: item.href }) : void 0,
+            disabled: item.disabled || action.pending,
+            onClick: () => {
+              if (item.onClick) void action.run(item.onClick);
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { className: "basic-menu-icon", "aria-hidden": "true", children: item.icon }),
+              item.label
+            ]
+          },
+          item.id
+        )),
         (auth.isSignedIn || expired || active?.kind === "anon") && /* @__PURE__ */ jsxs(
           Menu.Item,
           {
@@ -1532,7 +1564,7 @@ function UserMenu({
           },
           account.id
         )),
-        (allowAddAccount || !auth.isSignedIn && !expired) && /* @__PURE__ */ jsx3(
+        (allowAddAccount || !auth.isSignedIn && !expired) && /* @__PURE__ */ jsxs(
           Menu.Item,
           {
             className: "basic-menu-item",
@@ -1540,7 +1572,24 @@ function UserMenu({
             onClick: () => void action.run(
               () => allowAddAccount ? accounts.addAccount({ signIn: true }) : auth.signIn()
             ),
-            children: "\uFF0B Add account"
+            children: [
+              /* @__PURE__ */ jsx3(
+                "svg",
+                {
+                  className: "basic-menu-icon",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.75",
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx3("path", { d: "M12 5v14M5 12h14" })
+                }
+              ),
+              "Add account"
+            ]
           }
         )
       ] }) }) })