@enderfall/ui 0.1.0 → 0.1.4

package/src/components/SideMenu.tsx

@@ -0,0 +1,239 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type MouseEvent,
+} from "react";
+
+type SideMenuContextValue = {
+  openId: string | null;
+  setOpenId: (id: string | null) => void;
+  scheduleOpen: (id: string) => void;
+  clearHover: () => void;
+  toggleOpen: (id: string) => void;
+  openedAt: number;
+  initialDelayMs: number;
+};
+
+const SideMenuContext = createContext<SideMenuContextValue | null>(null);
+
+type SideMenuProps = {
+  children: ReactNode;
+  resetKey?: string | number | boolean | null;
+  hoverDelayMs?: number;
+  initialDelayMs?: number;
+  onOpenChange?: (openId: string | null) => void;
+};
+
+export const SideMenu = ({
+  children,
+  resetKey,
+  hoverDelayMs = 220,
+  initialDelayMs = 180,
+  onOpenChange,
+}: SideMenuProps) => {
+  const [openId, setOpenId] = useState<string | null>(null);
+  const hoverTimerRef = useRef<number | null>(null);
+  const openedAtRef = useRef<number>(Date.now());
+
+  useEffect(() => {
+    if (hoverTimerRef.current !== null) {
+      window.clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    setOpenId(null);
+    openedAtRef.current = Date.now();
+  }, [resetKey]);
+
+  useEffect(() => {
+    onOpenChange?.(openId);
+  }, [openId, onOpenChange]);
+
+  useEffect(() => {
+    return () => {
+      if (hoverTimerRef.current !== null) {
+        window.clearTimeout(hoverTimerRef.current);
+      }
+    };
+  }, []);
+
+  const scheduleOpen = (id: string) => {
+    if (hoverTimerRef.current !== null) {
+      window.clearTimeout(hoverTimerRef.current);
+    }
+    const elapsed = Date.now() - openedAtRef.current;
+    const settleDelay = elapsed < initialDelayMs ? initialDelayMs - elapsed : 0;
+    hoverTimerRef.current = window.setTimeout(() => {
+      setOpenId(id);
+    }, hoverDelayMs + settleDelay);
+  };
+
+  const clearHover = () => {
+    if (hoverTimerRef.current !== null) {
+      window.clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+  };
+
+  const toggleOpen = (id: string) => {
+    setOpenId((prev) => (prev === id ? null : id));
+  };
+
+  const value = useMemo(
+    () => ({
+      openId,
+      setOpenId,
+      scheduleOpen,
+      clearHover,
+      toggleOpen,
+      openedAt: openedAtRef.current,
+      initialDelayMs,
+    }),
+    [openId, initialDelayMs]
+  );
+
+  return <SideMenuContext.Provider value={value}>{children}</SideMenuContext.Provider>;
+};
+
+type SideMenuTriggerProps = {
+  onClick: (event: MouseEvent) => void;
+  disabled?: boolean;
+  "aria-expanded": boolean;
+};
+
+type SideMenuSubmenuProps = {
+  id: string;
+  trigger: (props: SideMenuTriggerProps) => ReactNode;
+  children: ReactNode;
+  className?: string;
+  panelClassName?: string;
+  disabled?: boolean;
+  enableViewportFlip?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  variant?: "default" | "header";
+};
+
+export const SideMenuSubmenu = ({
+  id,
+  trigger,
+  children,
+  className,
+  panelClassName,
+  disabled,
+  enableViewportFlip = false,
+  onOpenChange,
+  variant = "default",
+}: SideMenuSubmenuProps) => {
+  const context = useContext(SideMenuContext);
+  if (!context) {
+    throw new Error("SideMenuSubmenu must be used within a SideMenu provider.");
+  }
+
+  const { openId, setOpenId, scheduleOpen, clearHover, toggleOpen, openedAt, initialDelayMs } =
+    context;
+  const isOpen = openId === id;
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [panelStyle, setPanelStyle] = useState<CSSProperties>({});
+
+  useEffect(() => {
+    onOpenChange?.(isOpen);
+  }, [isOpen, onOpenChange]);
+
+  useEffect(() => {
+    if (!isOpen || !enableViewportFlip) {
+      setPanelStyle({});
+      return;
+    }
+    const updatePosition = () => {
+      const panel = panelRef.current;
+      const container = containerRef.current;
+      if (!panel || !container) return;
+      const panelRect = panel.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const margin = 12;
+      const defaultLeft = containerRect.right + 6;
+      const flippedLeft = containerRect.left - panelRect.width - 6;
+      let left = defaultLeft;
+      if (defaultLeft + panelRect.width > window.innerWidth - margin && flippedLeft >= margin) {
+        left = flippedLeft;
+      }
+      left = Math.min(Math.max(left, margin), window.innerWidth - margin - panelRect.width);
+      let top = containerRect.top;
+      top = Math.min(Math.max(top, margin), window.innerHeight - margin - panelRect.height);
+      setPanelStyle({
+        left: left - containerRect.left,
+        top: top - containerRect.top,
+        right: "auto",
+      });
+    };
+    const raf = requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isOpen, enableViewportFlip]);
+
+  const handlePointerEnter = () => {
+    if (disabled || isOpen) return;
+    if (Date.now() - openedAt < initialDelayMs) return;
+    setOpenId(null);
+    scheduleOpen(id);
+  };
+
+  const handlePointerLeave = () => {
+    clearHover();
+  };
+
+  const handlePointerMove = () => {
+    if (disabled || isOpen) return;
+    if (Date.now() - openedAt < initialDelayMs) return;
+    scheduleOpen(id);
+  };
+
+  const handleClick = (event: MouseEvent) => {
+    if (disabled) return;
+    event.preventDefault();
+    if (isOpen) return;
+    setOpenId(id);
+  };
+
+  return (
+    <div
+      className={[
+        className,
+        isOpen ? "is-open" : "",
+        variant === "header" ? "side-menu--header" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-submenu-id={id}
+      ref={containerRef}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      onPointerMove={handlePointerMove}
+    >
+      {trigger({ onClick: handleClick, disabled, "aria-expanded": isOpen })}
+      <div
+        ref={panelRef}
+        className={[
+          panelClassName,
+          isOpen ? "is-open" : "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={panelStyle}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/Slider.css

@@ -0,0 +1,114 @@
+.ef-slider {
+  width: 100%;
+  height: 26px;
+  border-radius: var(--ef-slider-track-radius, 999px);
+  background: var(--ef-slider-surface, var(--ef-surface));
+  border: 2px solid var(--ef-slider-border-color, var(--line));
+  padding: 0 2px;
+  outline: none;
+  appearance: none;
+}
+
+.ef-slider::-webkit-slider-runnable-track {
+  height: 26px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.ef-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--ef-slider-thumb-radius, 999px);
+  clip-path: var(--ef-slider-thumb-clip, circle(50%));
+  background: var(--ef-slider-surface, var(--ef-surface));
+  border: 2px solid var(--ef-slider-border-color, var(--line));
+  -webkit-mask-image: var(--ef-slider-thumb-mask, radial-gradient(circle, #fff 99%, transparent 100%));
+  mask-image: var(--ef-slider-thumb-mask, radial-gradient(circle, #fff 99%, transparent 100%));
+  margin-top: 3px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
+}
+
+.ef-slider::-moz-range-track {
+  height: 26px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.ef-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--ef-slider-thumb-radius, 999px);
+  clip-path: var(--ef-slider-thumb-clip, circle(50%));
+  background: var(--ef-slider-surface, var(--ef-surface));
+  border: 2px solid var(--ef-slider-border-color, var(--line));
+  -webkit-mask-image: var(--ef-slider-thumb-mask, radial-gradient(circle, #fff 99%, transparent 100%));
+  mask-image: var(--ef-slider-thumb-mask, radial-gradient(circle, #fff 99%, transparent 100%));
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
+}
+
+:root[data-theme="galaxy"] .ef-slider,
+:root[data-theme="plain-dark"] .ef-slider,
+:root[data-theme="light"] .ef-slider,
+:root[data-theme="plain-light"] .ef-slider,
+[data-theme="galaxy"] .ef-slider,
+[data-theme="plain-dark"] .ef-slider,
+[data-theme="light"] .ef-slider,
+[data-theme="plain-light"] .ef-slider,
+.ef-slider[data-ef-theme="galaxy"],
+.ef-slider[data-ef-theme="plain-dark"],
+.ef-slider[data-ef-theme="light"],
+.ef-slider[data-ef-theme="plain-light"] {
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-color: transparent;
+  background-clip: padding-box, border-box;
+  background-origin: border-box;
+}
+
+:root[data-theme="galaxy"] .ef-slider::-webkit-slider-thumb,
+:root[data-theme="plain-dark"] .ef-slider::-webkit-slider-thumb,
+:root[data-theme="light"] .ef-slider::-webkit-slider-thumb,
+:root[data-theme="plain-light"] .ef-slider::-webkit-slider-thumb,
+[data-theme="galaxy"] .ef-slider::-webkit-slider-thumb,
+[data-theme="plain-dark"] .ef-slider::-webkit-slider-thumb,
+[data-theme="light"] .ef-slider::-webkit-slider-thumb,
+[data-theme="plain-light"] .ef-slider::-webkit-slider-thumb,
+.ef-slider[data-ef-theme="galaxy"]::-webkit-slider-thumb,
+.ef-slider[data-ef-theme="plain-dark"]::-webkit-slider-thumb,
+.ef-slider[data-ef-theme="light"]::-webkit-slider-thumb,
+.ef-slider[data-ef-theme="plain-light"]::-webkit-slider-thumb {
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-color: transparent;
+  background-clip: padding-box, border-box;
+  background-origin: border-box;
+}
+
+:root[data-theme="galaxy"] .ef-slider::-moz-range-thumb,
+:root[data-theme="plain-dark"] .ef-slider::-moz-range-thumb,
+:root[data-theme="light"] .ef-slider::-moz-range-thumb,
+:root[data-theme="plain-light"] .ef-slider::-moz-range-thumb,
+[data-theme="galaxy"] .ef-slider::-moz-range-thumb,
+[data-theme="plain-dark"] .ef-slider::-moz-range-thumb,
+[data-theme="light"] .ef-slider::-moz-range-thumb,
+[data-theme="plain-light"] .ef-slider::-moz-range-thumb,
+.ef-slider[data-ef-theme="galaxy"]::-moz-range-thumb,
+.ef-slider[data-ef-theme="plain-dark"]::-moz-range-thumb,
+.ef-slider[data-ef-theme="light"]::-moz-range-thumb,
+.ef-slider[data-ef-theme="plain-light"]::-moz-range-thumb {
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-color: transparent;
+  background-clip: padding-box, border-box;
+  background-origin: border-box;
+}
+
+:root[data-theme="atelier"] .ef-slider,
+[data-theme="atelier"] .ef-slider,
+.ef-slider[data-ef-theme="atelier"] {
+  border-radius: var(--ef-slider-track-radius, 0px);
+}

package/src/components/Slider.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState, type InputHTMLAttributes } from "react";
+
+type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
+
+const getTheme = () =>
+  document.documentElement.dataset.theme || document.body.dataset.theme || "";
+
+export const Slider = ({ className, ...props }: SliderProps) => {
+  const [theme, setTheme] = useState("");
+
+  useEffect(() => {
+    setTheme(getTheme());
+    const observer = new MutationObserver(() => setTheme(getTheme()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <input
+      type="range"
+      className={["ef-slider", className].filter(Boolean).join(" ")}
+      data-ef-theme={theme || undefined}
+      {...props}
+    />
+  );
+};

package/src/components/StackedCard.css

@@ -0,0 +1,180 @@
+.ef-stacked-frame {
+  position: relative;
+  padding: 2px 2px 15px;
+  border-radius: 24px;
+  background: var(--ef-border-gradient);
+  box-shadow: var(--ef-stacked-frame-shadow);
+}
+
+.ef-stacked-frame::after {
+  content: "";
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  bottom: -6px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--ef-border-gradient);
+  filter: blur(12px);
+  opacity: 0.7;
+}
+
+.ef-stacked-card {
+  position: relative;
+  padding: 20px;
+  border-radius: 22px;
+  background: var(--ef-stacked-card-bg);
+  overflow: hidden;
+  box-shadow: var(--ef-stacked-card-shadow);
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.ef-stacked-frame:hover .ef-stacked-card {
+  box-shadow: var(--ef-stacked-card-shadow-hover);
+}
+
+.ef-stacked-image {
+  position: absolute;
+  inset: 0;
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.16), transparent 55%),
+    var(--ef-stacked-image-gradient);
+  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
+  z-index: 0;
+}
+
+.ef-stacked-image-photo {
+  background-repeat: no-repeat;
+}
+
+.ef-stacked-image::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 18px;
+  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2), transparent 55%);
+  mix-blend-mode: screen;
+}
+
+.ef-stacked-body {
+  position: relative;
+  padding: 20px 16px 12px;
+  min-height: 100%;
+  text-align: center;
+  z-index: 2;
+  display: grid;
+  gap: 12px;
+  justify-items: center;
+  justify-content: center;
+  color: var(--text-strong);
+}
+
+.ef-stacked-body::before {
+  content: "";
+  position: absolute;
+  inset: -40px -20px -20px;
+  background: linear-gradient(
+    180deg,
+    rgba(9, 12, 18, 0) 0%,
+    rgba(9, 12, 18, 0.78) 55%,
+    rgba(9, 12, 18, 0.9) 100%
+  );
+  z-index: -1;
+}
+
+.ef-stacked-body-plain {
+  position: relative;
+  padding: 20px 16px 12px;
+  text-align: center;
+  z-index: 2;
+  display: grid;
+  gap: 12px;
+  justify-items: center;
+  color: var(--text-strong);
+}
+
+.ef-stacked-body-plain::before {
+  content: none;
+}
+
+.ef-stacked-body-left {
+  text-align: left;
+  justify-items: start;
+  justify-content: start;
+  align-content: start;
+}
+
+.ef-stacked-body h3 {
+  margin: 0 0 8px;
+  font-size: 1.4rem;
+}
+
+.ef-stacked-body p {
+  margin: 0;
+  color: var(--ef-stacked-body-muted);
+}
+
+.ef-stacked-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.ef-stacked-tags-left {
+  justify-content: flex-start;
+}
+
+.ef-stacked-tag {
+  padding: 8px 18px;
+  border-radius: 8px;
+  background: var(--ef-stacked-tag-bg);
+  border: 2px solid transparent;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ef-stacked-tag-text);
+}
+
+.ef-stacked-action {
+  margin-top: 4px;
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-family: inherit;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  border: 2px solid transparent;
+  min-width: 190px;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  color: var(--text-strong);
+  box-shadow: var(--ef-stacked-action-shadow);
+}
+
+.ef-stacked-variant-games .ef-stacked-image {
+  background: linear-gradient(160deg, rgba(255, 152, 0, 0.6), rgba(255, 87, 34, 0.25));
+}
+
+.ef-stacked-variant-mods .ef-stacked-image {
+  background: linear-gradient(160deg, rgba(76, 175, 80, 0.6), rgba(0, 188, 212, 0.25));
+}
+
+.ef-stacked-variant-servers .ef-stacked-image {
+  background: linear-gradient(160deg, rgba(33, 150, 243, 0.6), rgba(103, 58, 183, 0.25));
+}
+
+.ef-stacked-variant-apps {
+  --ef-stacked-image-gradient: linear-gradient(160deg, rgba(255, 179, 0, 0.6), rgba(255, 87, 34, 0.25));
+}

package/src/components/StackedCard.tsx

@@ -0,0 +1,125 @@
+import type { CSSProperties, ReactNode } from "react";
+
+type Variant = "games" | "mods" | "servers" | "apps";
+type Align = "center" | "left";
+type Tone = "default" | "plain";
+
+type Action = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type StackedCardProps = {
+  title?: string;
+  description?: string;
+  tags?: string[];
+  imageUrl?: string | null;
+  variant?: Variant;
+  action?: Action;
+  align?: Align;
+  tone?: Tone;
+  showImage?: boolean;
+  children?: ReactNode;
+  frameClassName?: string;
+  cardClassName?: string;
+  bodyClassName?: string;
+  id?: string;
+  style?: CSSProperties;
+};
+
+const variantClass = (variant?: Variant) => {
+  switch (variant) {
+    case "games":
+      return "ef-stacked-variant-games";
+    case "mods":
+      return "ef-stacked-variant-mods";
+    case "servers":
+      return "ef-stacked-variant-servers";
+    case "apps":
+      return "ef-stacked-variant-apps";
+    default:
+      return "";
+  }
+};
+
+const alignClass = (align?: Align) => (align === "left" ? "ef-stacked-body-left" : "");
+const toneClass = (tone?: Tone) => (tone === "plain" ? "ef-stacked-body-plain" : "ef-stacked-body");
+
+export const StackedCard = ({
+  title = "",
+  description = "",
+  tags,
+  imageUrl,
+  variant,
+  action,
+  align = "center",
+  tone = "default",
+  showImage = true,
+  children,
+  frameClassName,
+  cardClassName,
+  bodyClassName,
+  id,
+  style,
+}: StackedCardProps) => {
+  const bodyClasses = [toneClass(tone), alignClass(align), bodyClassName]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <article
+      className={["ef-stacked-frame", variantClass(variant), frameClassName].filter(Boolean).join(" ")}
+      id={id}
+      style={style}
+    >
+      <div className={["ef-stacked-card", cardClassName].filter(Boolean).join(" ")}>
+        {showImage ? (
+          <div
+            className={["ef-stacked-image", imageUrl ? "ef-stacked-image-photo" : ""]
+              .filter(Boolean)
+              .join(" ")}
+            style={
+              imageUrl
+                ? {
+                    backgroundImage: `linear-gradient(180deg, rgba(10, 12, 22, 0.1), rgba(10, 12, 22, 0.85)), url(${imageUrl})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                  }
+                : undefined
+            }
+          />
+        ) : null}
+        <div className={bodyClasses}>
+          {children ? (
+            children
+          ) : (
+            <>
+              <h3>{title}</h3>
+              <p>{description}</p>
+              {tags?.length ? (
+                <div className={`ef-stacked-tags ${align === "left" ? "ef-stacked-tags-left" : ""}`}>
+                  {tags.map((tag) => (
+                    <span key={tag} className="ef-stacked-tag">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+            </>
+          )}
+          {action ? (
+            action.href ? (
+              <a className="ef-stacked-action" href={action.href}>
+                {action.label}
+              </a>
+            ) : (
+              <button className="ef-stacked-action" type="button" onClick={action.onClick}>
+                {action.label}
+              </button>
+            )
+          ) : null}
+        </div>
+      </div>
+    </article>
+  );
+};