@enderfall/ui 0.1.0 → 0.1.2

package/src/components/StatDots.css

@@ -0,0 +1,122 @@
+.ef-stat-dots {
+  display: grid;
+  grid-template-columns: var(--ef-stat-label-width, 180px) 1fr;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+}
+
+
+.ef-stat-dots__dots {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.ef-stat-dots__input {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--line);
+  border-radius: var(--ef-stat-dots-radius, 6px);
+  background: var(--card);
+  cursor: pointer;
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.ef-stat-dots__input::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: var(--ef-stat-dots-check-radius, 2px);
+  background: var(--ef-toggle-check-bg, var(--ef-slider-border-color, var(--line-strong)));
+  transform: scale(0);
+  transition: transform 0.2s ease;
+}
+
+.ef-stat-dots__input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ef-stat-dots__input:checked {
+  border-color: transparent;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  box-shadow: none;
+}
+
+.ef-stat-dots__input:checked::before {
+  transform: scale(1);
+}
+
+:root[data-theme="galaxy"] .ef-stat-dots__input,
+:root[data-theme="plain-dark"] .ef-stat-dots__input,
+:root[data-theme="light"] .ef-stat-dots__input,
+:root[data-theme="plain-light"] .ef-stat-dots__input,
+[data-theme="galaxy"] .ef-stat-dots__input,
+[data-theme="plain-dark"] .ef-stat-dots__input,
+[data-theme="light"] .ef-stat-dots__input,
+[data-theme="plain-light"] .ef-stat-dots__input,
+.ef-stat-dots[data-ef-theme="galaxy"] .ef-stat-dots__input,
+.ef-stat-dots[data-ef-theme="plain-dark"] .ef-stat-dots__input,
+.ef-stat-dots[data-ef-theme="light"] .ef-stat-dots__input,
+.ef-stat-dots[data-ef-theme="plain-light"] .ef-stat-dots__input {
+  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-stat-dots__input::before,
+:root[data-theme="plain-dark"] .ef-stat-dots__input::before,
+:root[data-theme="light"] .ef-stat-dots__input::before,
+:root[data-theme="plain-light"] .ef-stat-dots__input::before,
+[data-theme="galaxy"] .ef-stat-dots__input::before,
+[data-theme="plain-dark"] .ef-stat-dots__input::before,
+[data-theme="light"] .ef-stat-dots__input::before,
+[data-theme="plain-light"] .ef-stat-dots__input::before,
+.ef-stat-dots[data-ef-theme="galaxy"] .ef-stat-dots__input::before,
+.ef-stat-dots[data-ef-theme="plain-dark"] .ef-stat-dots__input::before,
+.ef-stat-dots[data-ef-theme="light"] .ef-stat-dots__input::before,
+.ef-stat-dots[data-ef-theme="plain-light"] .ef-stat-dots__input::before {
+  background: var(--ef-border-gradient);
+}
+
+:root[data-theme="galaxy"] .ef-stat-dots__input:checked,
+:root[data-theme="plain-dark"] .ef-stat-dots__input:checked,
+:root[data-theme="light"] .ef-stat-dots__input:checked,
+:root[data-theme="plain-light"] .ef-stat-dots__input:checked,
+[data-theme="galaxy"] .ef-stat-dots__input:checked,
+[data-theme="plain-dark"] .ef-stat-dots__input:checked,
+[data-theme="light"] .ef-stat-dots__input:checked,
+[data-theme="plain-light"] .ef-stat-dots__input:checked,
+.ef-stat-dots[data-ef-theme="galaxy"] .ef-stat-dots__input:checked,
+.ef-stat-dots[data-ef-theme="plain-dark"] .ef-stat-dots__input:checked,
+.ef-stat-dots[data-ef-theme="light"] .ef-stat-dots__input:checked,
+.ef-stat-dots[data-ef-theme="plain-light"] .ef-stat-dots__input:checked {
+  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;
+  box-shadow: none;
+}
+
+:root[data-theme="atelier"] .ef-stat-dots__input,
+[data-theme="atelier"] .ef-stat-dots__input,
+.ef-stat-dots[data-ef-theme="atelier"] .ef-stat-dots__input {
+  border-radius: 0;
+}
+
+:root[data-theme="atelier"] .ef-stat-dots__input::before,
+[data-theme="atelier"] .ef-stat-dots__input::before,
+.ef-stat-dots[data-ef-theme="atelier"] .ef-stat-dots__input::before {
+  border-radius: 0;
+}

package/src/components/StatDots.tsx

@@ -0,0 +1,53 @@
+import { useState, type HTMLAttributes } from "react";
+import { Panel } from "./Panel";
+
+type StatDotsProps = HTMLAttributes<HTMLDivElement> & {
+  label: string;
+  count?: number;
+  value?: number;
+  defaultValue?: number;
+  disabled?: boolean;
+  onChange?: (value: number) => void;
+};
+
+export const StatDots = ({
+  label,
+  count = 4,
+  value,
+  defaultValue = 0,
+  disabled = false,
+  onChange,
+  className,
+  ...rest
+}: StatDotsProps) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = Math.max(0, Math.min(count, value ?? internalValue));
+  const handleSelect = (nextValue: number) => {
+    if (disabled) return;
+    const resolvedValue = nextValue === currentValue ? 0 : nextValue;
+    if (value === undefined) {
+      setInternalValue(resolvedValue);
+    }
+    onChange?.(resolvedValue);
+  };
+  const classes = ["ef-stat-dots", className].filter(Boolean).join(" ");
+  return (
+    <div className={classes} {...rest}>
+      <Panel variant="highlight" borderWidth={1} className="ef-stat-dots__label">
+        {label}
+      </Panel>
+      <div className="ef-stat-dots__dots" role="group" aria-label={label}>
+        {Array.from({ length: count }, (_, index) => (
+          <input
+            key={`${label}-${index}`}
+            className="ef-stat-dots__input"
+            type="checkbox"
+            checked={index < currentValue}
+            disabled={disabled}
+            onChange={() => handleSelect(index + 1)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/Toggle.css

@@ -0,0 +1,161 @@
+.ef-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  color: var(--text-strong);
+  font-weight: 600;
+}
+
+.ef-toggle-input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.ef-toggle-track {
+  width: 46px;
+  height: 26px;
+  padding: 2px;
+  border-radius: var(--ef-toggle-track-radius, 999px);
+  border: 2px solid var(--line);
+  background: var(--card);
+  display: inline-flex;
+  align-items: center;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.ef-toggle-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--ef-toggle-thumb-radius, 999px);
+  background: var(--ef-slider-surface, var(--ef-surface));
+  border: 2px solid var(--ef-slider-border-color, var(--line));
+  -webkit-mask-image: radial-gradient(circle, #fff 99%, transparent 100%);
+  mask-image: radial-gradient(circle, #fff 99%, transparent 100%);
+  transform: translateX(0);
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.ef-toggle-input:checked + .ef-toggle-track {
+  border-color: transparent;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+}
+
+.ef-toggle-input:checked + .ef-toggle-track .ef-toggle-thumb {
+  transform: translateX(18px);
+  background: var(--ef-border-gradient);
+  border-color: transparent;
+  background-clip: border-box;
+  background-origin: border-box;
+}
+
+.ef-toggle-label {
+  display: grid;
+  gap: 4px;
+}
+
+.ef-toggle-description {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.ef-toggle-input:disabled + .ef-toggle-track {
+  opacity: 0.5;
+}
+
+.ef-toggle-input:disabled ~ .ef-toggle-label {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:root[data-theme="galaxy"] .ef-toggle-track,
+:root[data-theme="plain-dark"] .ef-toggle-track,
+:root[data-theme="light"] .ef-toggle-track,
+:root[data-theme="plain-light"] .ef-toggle-track {
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-color: transparent;
+}
+
+:root[data-theme="atelier"] .ef-toggle-thumb {
+  border-radius: var(--ef-toggle-thumb-radius, 0px);
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+.ef-toggle-box {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--ef-toggle-box-radius, 6px);
+  border: 2px solid var(--line);
+  background: var(--card);
+  display: grid;
+  place-items: center;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.ef-toggle-check {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--ef-toggle-check-radius, 2px);
+  background: var(--ef-toggle-check-bg, var(--ef-slider-border-color, var(--line-strong)));
+  transform: scale(0);
+  transition: transform 0.2s ease;
+}
+
+.ef-toggle-input:checked + .ef-toggle-box {
+  border-color: transparent;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+}
+
+.ef-toggle-input:checked + .ef-toggle-box .ef-toggle-check {
+  transform: scale(1);
+}
+
+:root[data-theme="galaxy"] .ef-toggle-box,
+:root[data-theme="plain-dark"] .ef-toggle-box,
+:root[data-theme="light"] .ef-toggle-box,
+:root[data-theme="plain-light"] .ef-toggle-box {
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-color: transparent;
+}
+
+:root[data-theme="galaxy"] .ef-toggle-thumb,
+:root[data-theme="plain-dark"] .ef-toggle-thumb,
+:root[data-theme="light"] .ef-toggle-thumb,
+:root[data-theme="plain-light"] .ef-toggle-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-toggle-input:checked + .ef-toggle-track .ef-toggle-thumb,
+:root[data-theme="plain-dark"] .ef-toggle-input:checked + .ef-toggle-track .ef-toggle-thumb,
+:root[data-theme="light"] .ef-toggle-input:checked + .ef-toggle-track .ef-toggle-thumb,
+:root[data-theme="plain-light"] .ef-toggle-input:checked + .ef-toggle-track .ef-toggle-thumb {
+  background: var(--ef-border-gradient);
+  border-color: transparent;
+  background-clip: border-box;
+  background-origin: border-box;
+}
+
+:root[data-theme="galaxy"] .ef-toggle-check,
+:root[data-theme="plain-dark"] .ef-toggle-check,
+:root[data-theme="light"] .ef-toggle-check,
+:root[data-theme="plain-light"] .ef-toggle-check {
+  background: var(--ef-border-gradient);
+}

package/src/components/Toggle.tsx

@@ -0,0 +1,38 @@
+import type { InputHTMLAttributes } from "react";
+
+type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label?: string;
+  description?: string;
+  variant?: "switch" | "checkbox";
+};
+
+export const Toggle = ({
+  label,
+  description,
+  className,
+  variant = "switch",
+  ...props
+}: ToggleProps) => (
+  <label
+    className={["ef-toggle", `ef-toggle--${variant}`, className]
+      .filter(Boolean)
+      .join(" ")}
+  >
+    <input type="checkbox" className="ef-toggle-input" {...props} />
+    {variant === "switch" ? (
+      <span className="ef-toggle-track" aria-hidden="true">
+        <span className="ef-toggle-thumb" />
+      </span>
+    ) : (
+      <span className="ef-toggle-box" aria-hidden="true">
+        <span className="ef-toggle-check" />
+      </span>
+    )}
+    {label ? (
+      <span className="ef-toggle-label">
+        <span className="ef-toggle-text">{label}</span>
+        {description ? <span className="ef-toggle-description">{description}</span> : null}
+      </span>
+    ) : null}
+  </label>
+);

package/src/components/UserMenu.css

@@ -0,0 +1,273 @@
+.user-section {
+  position: relative;
+  display: inline-block;
+  z-index: 30;
+  --user-border-gradient: var(--ef-border-gradient);
+  --user-button-height: 46px;
+}
+
+.user-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 2px solid transparent;
+  padding: 8px 12px;
+  border-radius: var(--ef-control-radius, 12px);
+  min-height: 46px;
+  height: var(--user-button-height);
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--user-border-gradient) border-box;
+  color: var(--text-strong);
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
+}
+
+.user-section[data-open="true"] .user-button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-color: transparent;
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-fallback {
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.user-name {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  font-size: 0.7rem;
+  opacity: 0.7;
+  display: inline-flex;
+}
+
+.chevron svg {
+  width: 14px;
+  height: 14px;
+}
+
+.chevron.open svg {
+  transform: rotate(180deg);
+}
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% - 2px);
+  width: 100%;
+  min-width: 100%;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--user-border-gradient) border-box;
+  border: 2px solid transparent;
+  border-top: none;
+  border-radius: 0 0 var(--ef-control-radius, 12px) var(--ef-control-radius, 12px);
+  padding: 8px;
+  display: grid;
+  gap: 6px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(12px);
+  opacity: 0;
+  transform: translateY(-6px);
+  pointer-events: none;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+  z-index: 200;
+}
+
+.dropdown[data-open="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  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.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 {
+  box-shadow: none;
+  transform: none;
+}
+
+.dropdown-empty {
+  padding: 10px 12px;
+  border-radius: var(--ef-control-radius, 12px);
+  border: 2px dashed rgba(255, 255, 255, 0.1);
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.dropdown-item-rich {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+}
+
+.dropdown-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.12);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.dropdown-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dropdown-avatar-fallback {
+  line-height: 1;
+}
+
+.dropdown-item-text {
+  display: grid;
+  gap: 2px;
+}
+
+.dropdown-item-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.dropdown-item-subtitle {
+  font-size: 0.72rem;
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.dropdown-item-actions {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.dropdown-action {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-strong);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.dropdown-action.ef-button {
+  padding: 0;
+  min-width: 0;
+  box-shadow: none;
+}
+
+.dropdown-action svg {
+  width: 14px;
+  height: 14px;
+}
+
+.dropdown-action.is-delete {
+  border-color: rgba(255, 120, 120, 0.45);
+  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;
+  }
+}

package/src/index.ts

@@ -0,0 +1,44 @@
+export type ThemeMode = string;
+export { AccessGate } from "./components/AccessGate";
+export { Button } from "./components/Button";
+export { FormField } from "./components/FormField";
+export { Input, Textarea, Select } from "./components/Input";
+export { Panel } from "./components/Panel";
+export { StackedCard } from "./components/StackedCard";
+export { Dropdown } from "./components/Dropdown";
+export { MainHeader } from "./components/MainHeader";
+export { FloatingFooter } from "./components/FloatingFooter";
+export { Modal } from "./components/Modal";
+export { PreferencesModal } from "./components/PreferencesModal";
+export { Toggle } from "./components/Toggle";
+export { Slider } from "./components/Slider";
+export { StatDots } from "./components/StatDots";
+export { SideMenu, SideMenuSubmenu } from "./components/SideMenu";
+
+type ThemeOptions<T extends ThemeMode> = {
+  storageKey: string;
+  defaultTheme: T;
+  allowed: readonly T[];
+  dataAttribute?: string;
+  bodyClass?: string | null;
+};
+
+export const getStoredTheme = <T extends ThemeMode>(options: ThemeOptions<T>) => {
+  const stored = localStorage.getItem(options.storageKey);
+  if (stored && options.allowed.includes(stored as T)) {
+    return stored as T;
+  }
+  if (stored === "dark" && options.allowed.includes("galaxy" as T)) {
+    return "galaxy" as T;
+  }
+  return options.defaultTheme;
+};
+
+export const applyTheme = <T extends ThemeMode>(theme: T, options: ThemeOptions<T>) => {
+  const dataAttribute = options.dataAttribute ?? "data-theme";
+  if (options.bodyClass) {
+    document.body.classList.toggle(options.bodyClass, theme === (options.defaultTheme as string));
+  }
+  document.documentElement.setAttribute(dataAttribute, theme);
+  localStorage.setItem(options.storageKey, theme);
+};