@enderfall/ui 0.2.20 → 0.2.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@enderfall/ui",
   "private": false,
-  "version": "0.2.20",
+  "version": "0.2.21",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/Button.css

@@ -28,22 +28,22 @@
 }
 
 .ef-button--glow {
-  box-shadow: var(--ef-button-current-glow-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
+  box-shadow: var(--ef-button-current-hover-shadow, var(--ef-button-hover-shadow, 0 0 18px rgba(124, 77, 255, 0.35)));
 }
 
 .ef-button--glow:not(:disabled):hover {
-  box-shadow: var(--ef-button-current-hover-shadow, var(--ef-button-hover-shadow, 0 0 18px rgba(124, 77, 255, 0.35)));
+  box-shadow: var(--ef-button-current-glow-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
   animation: none;
 }
 
 .ef-button--glow:focus-visible {
-  box-shadow: var(--ef-button-current-focus-shadow, var(--ef-button-focus-shadow, 0 0 18px rgba(124, 77, 255, 0.35)));
+  box-shadow: var(--ef-button-current-glow-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
   animation: none;
 }
 
 .ef-button--hover-glow:not(:disabled):hover,
 .ef-button--hover-glow:focus-visible {
-  box-shadow: var(--ef-button-current-hover-shadow, var(--ef-button-hover-shadow, 0 0 18px rgba(124, 77, 255, 0.35)));
+  box-shadow: var(--ef-button-current-glow-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
   animation: none;
 }
 
@@ -168,17 +168,17 @@
 }
 
 .ef-button.tab.ef-button--glow {
-  box-shadow: var(--ef-button-current-glow-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
+  box-shadow: var(--ef-button-current-hover-shadow, var(--ef-button-hover-shadow, 0 0 18px rgba(124, 77, 255, 0.35)));
 }
 
 .ef-button.tab.ef-button--glow:not(:disabled):hover,
 .ef-button.tab.ef-button--hover-glow:not(:disabled):hover {
-  box-shadow: var(--ef-button-current-hover-shadow, var(--ef-button-hover-shadow, 0 0 18px rgba(124, 77, 255, 0.35)));
+  box-shadow: var(--ef-button-current-glow-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
 }
 
 .ef-button.tab.ef-button--glow:focus-visible,
 .ef-button.tab.ef-button--hover-glow:focus-visible {
-  box-shadow: var(--ef-button-current-focus-shadow, var(--ef-button-focus-shadow, 0 0 18px rgba(124, 77, 255, 0.35)));
+  box-shadow: var(--ef-button-current-glow-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
 }
 
 .theme-preview {

package/src/components/Dropdown.tsx

@@ -15,6 +15,17 @@ export type DropdownUserItem = {
   className?: string;
   title?: string;
   variant?: "default" | "theme-preview";
+  buttonVariant?:
+    | "primary"
+    | "ghost"
+    | "locked"
+    | "danger"
+    | "delete"
+    | "warning"
+    | "info"
+    | "success"
+    | "tab";
+  buttonSubvariant?: "default" | "glow" | "hover-glow";
 };
 
 export type DropdownUserListItem = {
@@ -31,12 +42,12 @@ export type DropdownUserListItem = {
   subtitle?: string;
 };
 
-export type DropdownBookmarkOption = {
-  value: string;
-  label: string;
-  meta?: unknown;
-  className?: string;
-};
+export type DropdownBookmarkOption = {
+  value: string;
+  label: string;
+  meta?: unknown;
+  className?: string;
+};
 
 export type DropdownBookmarkSection = {
   label?: string;
@@ -77,16 +88,16 @@ type UserListVariantProps = {
   emptyClassName?: string;
 };
 
-type BookmarkVariantProps = {
-  variant: "bookmark";
-  label?: string;
-  layout?: "row" | "field";
-  value: string;
-  triggerLabel?: string;
-  placeholder?: string;
-  sections: DropdownBookmarkSection[];
-  onChange: (value: string, option?: DropdownBookmarkOption) => void;
-  renderTriggerIcon?: ReactNode;
+type BookmarkVariantProps = {
+  variant: "bookmark";
+  label?: string;
+  layout?: "row" | "field";
+  value: string;
+  triggerLabel?: string;
+  placeholder?: string;
+  sections: DropdownBookmarkSection[];
+  onChange: (value: string, option?: DropdownBookmarkOption) => void;
+  renderTriggerIcon?: ReactNode;
   renderItemIcon?: (option: DropdownBookmarkOption) => ReactNode;
   caret?: ReactNode;
   emptyLabel?: string;
@@ -206,28 +217,28 @@ export const Dropdown = (props: DropdownProps) => {
 
     return (
       <div className="ef-menu-bar">
-        {props.menus.map((menu) => (
-          <div
-            key={menu.id}
-            className="ef-menu-group"
-            data-open={props.menuOpen === menu.id ? "true" : "false"}
-            onMouseEnter={() => {
-              cancelScheduledClose();
-              props.onOpenMenu(menu.id);
-            }}
-            onMouseLeave={scheduleClose}
-          >
-            <Button
-              className={["ef-menu-button", "ef-tab", props.menuOpen === menu.id ? "is-active" : ""]
-                .filter(Boolean)
-                .join(" ")}
-              type="button"
-              variant="tab"
-              subvariant="default"
-              data-open={props.menuOpen === menu.id ? "true" : "false"}
-            >
-              {menu.label}
-            </Button>
+        {props.menus.map((menu) => (
+          <div
+            key={menu.id}
+            className="ef-menu-group"
+            data-open={props.menuOpen === menu.id ? "true" : "false"}
+            onMouseEnter={() => {
+              cancelScheduledClose();
+              props.onOpenMenu(menu.id);
+            }}
+            onMouseLeave={scheduleClose}
+          >
+            <Button
+              className={["ef-menu-button", "ef-tab", props.menuOpen === menu.id ? "is-active" : ""]
+                .filter(Boolean)
+                .join(" ")}
+              type="button"
+              variant="tab"
+              subvariant="default"
+              data-open={props.menuOpen === menu.id ? "true" : "false"}
+            >
+              {menu.label}
+            </Button>
             {props.menuOpen === menu.id ? (
               <div
                 className="ef-menu-popover"
@@ -289,30 +300,34 @@ export const Dropdown = (props: DropdownProps) => {
           : null;
 
     const renderUserListItems = () => {
-      if (props.variant !== "user-list") {
+      if (props.variant !== "user-list") {
         return props.items.map((item, index) => {
           const key = item.id ?? `${item.label}-${index}`;
           if (item.variant === "theme-preview") {
             return (
-              <Button
-                key={key}
-                type="button"
+              <Button
+                key={key}
+                type="button"
                 variant="primary"
+                subvariant={item.buttonSubvariant ?? "default"}
                 className={["theme-preview", item.className].filter(Boolean).join(" ")}
                 onClick={() => {
                   item.onClick();
                   setOpen(false);
                 }}
-                disabled={item.disabled}
-                title={item.title}
+                disabled={item.disabled}
+                title={item.title}
               >
                 {item.label}
               </Button>
             );
           }
+          const isLogoutAction = /\b(log\s*out|sign\s*out)\b/i.test(item.label);
           return (
-            <button
+            <Button
               key={key}
+              variant={item.buttonVariant ?? (isLogoutAction ? "danger" : "primary")}
+              subvariant={item.buttonSubvariant ?? "default"}
               className={["dropdown-item", item.className].filter(Boolean).join(" ")}
               type="button"
               onClick={() => {
@@ -323,7 +338,7 @@ export const Dropdown = (props: DropdownProps) => {
               title={item.title}
             >
               {item.label}
-            </button>
+            </Button>
           );
         });
       }
@@ -368,20 +383,20 @@ export const Dropdown = (props: DropdownProps) => {
             }}
             title={item.title}
           >
-            <span className="dropdown-avatar">
-              {item.avatarUrl ? (
-                <img
-                  src={item.avatarUrl}
-                  alt={item.label}
-                  loading="lazy"
-                  decoding="async"
-                  referrerPolicy="no-referrer"
-                  crossOrigin="anonymous"
-                />
-              ) : (
-                <span className="dropdown-avatar-fallback">{fallback}</span>
-              )}
-            </span>
+            <span className="dropdown-avatar">
+              {item.avatarUrl ? (
+                <img
+                  src={item.avatarUrl}
+                  alt={item.label}
+                  loading="lazy"
+                  decoding="async"
+                  referrerPolicy="no-referrer"
+                  crossOrigin="anonymous"
+                />
+              ) : (
+                <span className="dropdown-avatar-fallback">{fallback}</span>
+              )}
+            </span>
             <span className="dropdown-item-text">
               <span className="dropdown-item-label">{item.label}</span>
               {item.subtitle ? (
@@ -430,19 +445,19 @@ export const Dropdown = (props: DropdownProps) => {
       <div className="user-section" ref={ref} data-open={isOpen ? "true" : "false"}>
         <button className="user-button" onClick={() => setOpen(!isOpen)} type="button">
           <span className="avatar">
-            {currentAvatar ? (
-              <img
-                src={currentAvatar}
-                alt={props.avatarAlt ?? props.name}
-                loading="eager"
-                decoding="async"
-                referrerPolicy="no-referrer"
-                crossOrigin="anonymous"
-                onError={() => {
-                  if (avatarState === "primary" && fallbackAvatar) {
-                    setAvatarState("fallback");
-                  } else {
-                    setAvatarState("none");
+            {currentAvatar ? (
+              <img
+                src={currentAvatar}
+                alt={props.avatarAlt ?? props.name}
+                loading="eager"
+                decoding="async"
+                referrerPolicy="no-referrer"
+                crossOrigin="anonymous"
+                onError={() => {
+                  if (avatarState === "primary" && fallbackAvatar) {
+                    setAvatarState("fallback");
+                  } else {
+                    setAvatarState("none");
                   }
                 }}
               />
@@ -467,13 +482,13 @@ export const Dropdown = (props: DropdownProps) => {
     placeholder = "Select a saved connection",
     sections,
     onChange,
-    renderTriggerIcon,
-    renderItemIcon,
-    triggerLabel,
-    caret,
-    emptyLabel = "No saved connections.",
-    emptyClassName,
-  } = props;
+    renderTriggerIcon,
+    renderItemIcon,
+    triggerLabel,
+    caret,
+    emptyLabel = "No saved connections.",
+    emptyClassName,
+  } = props;
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
   const options = useMemo(
@@ -493,20 +508,20 @@ export const Dropdown = (props: DropdownProps) => {
     return () => window.removeEventListener("pointerdown", handlePointer);
   }, [open]);
 
-  const handleEllipsisTooltip = (event: React.MouseEvent<HTMLElement>) => {
-    const target = event.currentTarget;
-    if (target.scrollWidth > target.clientWidth) {
-      target.setAttribute("title", target.textContent ?? "");
-    } else {
-      target.removeAttribute("title");
-    }
-  };
-
-  const clearEllipsisTooltip = (event: React.MouseEvent<HTMLElement>) => {
-    event.currentTarget.removeAttribute("title");
-  };
-
-  const dropdownBody = (
+  const handleEllipsisTooltip = (event: React.MouseEvent<HTMLElement>) => {
+    const target = event.currentTarget;
+    if (target.scrollWidth > target.clientWidth) {
+      target.setAttribute("title", target.textContent ?? "");
+    } else {
+      target.removeAttribute("title");
+    }
+  };
+
+  const clearEllipsisTooltip = (event: React.MouseEvent<HTMLElement>) => {
+    event.currentTarget.removeAttribute("title");
+  };
+
+  const dropdownBody = (
     <div className={`bookmark-dropdown ${open ? "open" : ""}`}>
       <button
         className="bookmark-trigger"
@@ -514,9 +529,9 @@ export const Dropdown = (props: DropdownProps) => {
         type="button"
       >
         {renderTriggerIcon ? <span className="bookmark-icon">{renderTriggerIcon}</span> : null}
-        <span className="bookmark-text">
-          {triggerLabel ?? (active ? active.label : placeholder)}
-        </span>
+        <span className="bookmark-text">
+          {triggerLabel ?? (active ? active.label : placeholder)}
+        </span>
         <span className="bookmark-caret">{caret ?? <DefaultCaret />}</span>
       </button>
       {open ? (
@@ -529,35 +544,35 @@ export const Dropdown = (props: DropdownProps) => {
             sections.map((section) => (
               <div key={section.label ?? "options"}>
                 {section.label ? <div className="bookmark-group">{section.label}</div> : null}
-                {section.options.map((item) => (
-                  <button
-                    key={item.value}
-                    className={[
-                      "bookmark-item",
-                      item.value === value ? "active" : "",
-                      item.className,
-                    ]
-                      .filter(Boolean)
-                      .join(" ")}
-                    type="button"
-                    onClick={() => {
-                      onChange(item.value, item);
-                      setOpen(false);
-                    }}
-                  >
+                {section.options.map((item) => (
+                  <button
+                    key={item.value}
+                    className={[
+                      "bookmark-item",
+                      item.value === value ? "active" : "",
+                      item.className,
+                    ]
+                      .filter(Boolean)
+                      .join(" ")}
+                    type="button"
+                    onClick={() => {
+                      onChange(item.value, item);
+                      setOpen(false);
+                    }}
+                  >
                     {renderItemIcon ? (
                       <span className="bookmark-icon">{renderItemIcon(item)}</span>
                     ) : null}
-                    <span
-                      className="bookmark-text"
-                      onMouseEnter={handleEllipsisTooltip}
-                      onMouseLeave={clearEllipsisTooltip}
-                    >
-                      {item.label}
-                    </span>
-                  </button>
-                ))}
-              </div>
+                    <span
+                      className="bookmark-text"
+                      onMouseEnter={handleEllipsisTooltip}
+                      onMouseLeave={clearEllipsisTooltip}
+                    >
+                      {item.label}
+                    </span>
+                  </button>
+                ))}
+              </div>
             ))
           )}
         </div>

package/src/components/UserMenu.css

@@ -30,15 +30,15 @@
   border-bottom-color: transparent;
 }
 
-.avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--ef-control-radius, 12px);
-  background: rgba(255, 255, 255, 0.12);
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  flex-shrink: 0;
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ef-control-radius, 12px);
+  background: rgba(255, 255, 255, 0.12);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
 .avatar img {
@@ -105,59 +105,69 @@
   pointer-events: auto;
 }
 
-.dropdown-item {
-  border: 2px solid transparent;
-  padding: 10px 16px;
-  border-radius: var(--ef-control-radius, 12px);
-  background:
-    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
-    var(--ef-border-gradient) border-box;
-  color: var(--text-strong);
-  font-weight: 600;
-  font-size: 0.85rem;
-  text-align: left;
-  cursor: pointer;
-  width: 100%;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
-  box-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
-}
-
-.dropdown-item:hover {
-  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
-  transform: translateY(-1px);
+.dropdown-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 0.85rem;
+  line-height: 1.25;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
 }
 
-.dropdown-item.theme-preview {
+.dropdown-item:not(.ef-button) {
   border: 2px solid transparent;
+  padding: 10px 16px;
   border-radius: var(--ef-control-radius, 12px);
   background:
-    linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
-    var(--ef-button-border) border-box;
-  color: var(--ef-button-text);
-  box-shadow: var(--shadow);
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  color: var(--text-strong);
+  font-weight: 600;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  box-shadow: var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45));
 }
 
-.dropdown-item.theme-preview:hover {
-  box-shadow: var(--shadow);
-  filter: brightness(1.04);
+.dropdown-item:hover {
   transform: translateY(-1px);
 }
 
-.dropdown-item.theme-preview.is-disabled,
-.dropdown-item.theme-preview.is-disabled:hover {
-  opacity: 0.6;
-  box-shadow: none;
-  filter: none;
-  transform: none;
-  background:
-    linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
-    var(--ef-button-border-soft) border-box;
+.dropdown-item:not(.ef-button):hover {
+  box-shadow: var(--ef-button-hover-glow-shadow, 0 0 18px rgba(124, 77, 255, 0.35));
 }
-
-.dropdown-item.is-disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  box-shadow: none;
+
+.dropdown-item.theme-preview {
+  border: 2px solid transparent;
+  border-radius: var(--ef-control-radius, 12px);
+  background:
+    linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
+    var(--ef-button-border) border-box;
+  color: var(--ef-button-text);
+  box-shadow: var(--shadow);
+}
+
+.dropdown-item.theme-preview:hover {
+  box-shadow: var(--shadow);
+  filter: brightness(1.04);
+  transform: translateY(-1px);
+}
+
+.dropdown-item.theme-preview.is-disabled,
+.dropdown-item.theme-preview.is-disabled:hover {
+  opacity: 0.6;
+  box-shadow: none;
+  filter: none;
+  transform: none;
+  background:
+    linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
+    var(--ef-button-border-soft) border-box;
+}
+
+.dropdown-item.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  box-shadow: none;
 }
 
 .dropdown-item.is-disabled:hover {
@@ -183,15 +193,15 @@
   padding: 10px 12px;
 }
 
-.dropdown-avatar {
-  width: 34px;
-  height: 34px;
-  border-radius: var(--ef-control-radius, 12px);
-  background: rgba(255, 255, 255, 0.12);
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  font-size: 0.7rem;
+.dropdown-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: var(--ef-control-radius, 12px);
+  background: rgba(255, 255, 255, 0.12);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
 }
@@ -256,18 +266,18 @@
   color: rgb(255, 164, 164);
 }
 
-.dropdown-action:hover {
-  filter: brightness(1.1);
-}
-
-@media (max-width: 760px) {
-  .user-button {
-    gap: 8px;
-    padding: 8px 10px;
-  }
-
-  .user-name {
-    display: inline;
-    max-width: 32vw;
-  }
-}
+.dropdown-action:hover {
+  filter: brightness(1.1);
+}
+
+@media (max-width: 760px) {
+  .user-button {
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  .user-name {
+    display: inline;
+    max-width: 32vw;
+  }
+}