willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/Anchor/index.tsx

@@ -0,0 +1,253 @@
+import {
+  useEffect,
+  useMemo,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+import { useControllableState } from "@willa-ui/shared";
+
+export type AnchorItem = {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  meta?: ReactNode;
+  href?: string;
+  children?: Array<AnchorItem>;
+};
+
+export type AnchorSize = "sm" | "md";
+export type AnchorVariant = "toc" | "navigation";
+export type AnchorSlot =
+  | "list"
+  | "item"
+  | "link"
+  | "title"
+  | "meta"
+  | "description";
+
+export type AnchorProps = {
+  items: Array<AnchorItem>;
+  activeId?: string;
+  defaultActiveId?: string;
+  offsetTop?: number;
+  size?: AnchorSize;
+  variant?: AnchorVariant;
+  sticky?: boolean;
+  showMarker?: boolean;
+  classNames?: Partial<Record<AnchorSlot, string>>;
+  styles?: Partial<Record<AnchorSlot, CSSProperties>>;
+  onActiveChange?: (id: string) => void;
+  onItemClick?: (
+    item: AnchorItem,
+    event: MouseEvent<HTMLAnchorElement>,
+  ) => void;
+} & Omit<ComponentPropsWithoutRef<"nav">, "children" | "onChange">;
+
+export function Anchor(props: AnchorProps) {
+  const {
+    items,
+    activeId,
+    defaultActiveId,
+    offsetTop = 0,
+    size = "md",
+    variant = "toc",
+    sticky = false,
+    showMarker = true,
+    classNames: slotClassNames,
+    styles,
+    onActiveChange,
+    onItemClick,
+    className,
+    ...navProps
+  } = props;
+  const flattenedItems = useMemo(() => flattenAnchorItems(items), [items]);
+  const [resolvedActiveId, setResolvedActiveId, activeControlled] =
+    useControllableState({
+      value: activeId,
+      defaultValue: defaultActiveId ?? flattenedItems[0]?.id,
+    });
+
+  useEffect(() => {
+    if (activeControlled || typeof window === "undefined") return;
+
+    const updateActiveId = () => {
+      const nextItem = flattenedItems
+        .map((item) => {
+          const element = document.getElementById(item.id);
+          return {
+            item,
+            top:
+              element?.getBoundingClientRect().top ?? Number.POSITIVE_INFINITY,
+          };
+        })
+        .filter((entry) => entry.top <= offsetTop + 12)
+        .sort((a, b) => b.top - a.top)[0]?.item;
+
+      if (!nextItem || nextItem.id === resolvedActiveId) return;
+      setResolvedActiveId(nextItem.id);
+      onActiveChange?.(nextItem.id);
+    };
+
+    updateActiveId();
+    window.addEventListener("scroll", updateActiveId, { passive: true });
+    window.addEventListener("resize", updateActiveId);
+
+    return () => {
+      window.removeEventListener("scroll", updateActiveId);
+      window.removeEventListener("resize", updateActiveId);
+    };
+  }, [
+    activeControlled,
+    flattenedItems,
+    offsetTop,
+    onActiveChange,
+    resolvedActiveId,
+    setResolvedActiveId,
+  ]);
+
+  const setActiveItem = (
+    item: AnchorItem,
+    event: MouseEvent<HTMLAnchorElement>,
+  ) => {
+    onItemClick?.(item, event);
+    if (event.defaultPrevented) return;
+
+    const href = item.href ?? `#${item.id}`;
+    if (!href.startsWith("#")) return;
+
+    event.preventDefault();
+    document.getElementById(item.id)?.scrollIntoView({ block: "start" });
+
+    setResolvedActiveId(item.id);
+
+    onActiveChange?.(item.id);
+    if (window.location.hash !== href) {
+      window.history.pushState(null, "", href);
+    }
+  };
+
+  return (
+    <nav
+      {...navProps}
+      className={classNames(
+        "willa-anchor",
+        `willa-anchor--${size}`,
+        `willa-anchor--${variant}`,
+        sticky && "willa-anchor--sticky",
+        showMarker && "willa-anchor--marker",
+        className,
+      )}
+    >
+      <ol
+        className={classNames("willa-anchor__list", slotClassNames?.list)}
+        style={styles?.list}
+      >
+        {items.map((item) => (
+          <AnchorNode
+            key={item.id}
+            item={item}
+            activeId={resolvedActiveId}
+            classNames={slotClassNames}
+            styles={styles}
+            onItemClick={setActiveItem}
+          />
+        ))}
+      </ol>
+    </nav>
+  );
+}
+
+const AnchorNode = (props: {
+  item: AnchorItem;
+  activeId?: string;
+  classNames?: Partial<Record<AnchorSlot, string>>;
+  styles?: Partial<Record<AnchorSlot, CSSProperties>>;
+  onItemClick: (item: AnchorItem, event: MouseEvent<HTMLAnchorElement>) => void;
+}) => {
+  const {
+    item,
+    activeId,
+    classNames: slotClassNames,
+    styles,
+    onItemClick,
+  } = props;
+  const isActive = activeId === item.id;
+
+  return (
+    <li
+      className={classNames("willa-anchor__item", slotClassNames?.item)}
+      style={styles?.item}
+    >
+      <a
+        className={classNames(
+          "willa-anchor__link",
+          isActive && "willa-anchor__link--active",
+          slotClassNames?.link,
+        )}
+        style={styles?.link}
+        href={item.href ?? `#${item.id}`}
+        aria-current={isActive ? "location" : undefined}
+        onClick={(event) => onItemClick(item, event)}
+      >
+        <span
+          className={classNames("willa-anchor__title", slotClassNames?.title)}
+          style={styles?.title}
+        >
+          {item.title}
+        </span>
+        {item.meta === undefined ? null : (
+          <span
+            className={classNames("willa-anchor__meta", slotClassNames?.meta)}
+            style={styles?.meta}
+          >
+            {item.meta}
+          </span>
+        )}
+        {item.description === undefined ? null : (
+          <span
+            className={classNames(
+              "willa-anchor__description",
+              slotClassNames?.description,
+            )}
+            style={styles?.description}
+          >
+            {item.description}
+          </span>
+        )}
+      </a>
+      {item.children?.length ? (
+        <ol
+          className={classNames(
+            "willa-anchor__list",
+            "willa-anchor__list--nested",
+            slotClassNames?.list,
+          )}
+          style={styles?.list}
+        >
+          {item.children.map((child) => (
+            <AnchorNode
+              key={child.id}
+              item={child}
+              activeId={activeId}
+              classNames={slotClassNames}
+              styles={styles}
+              onItemClick={onItemClick}
+            />
+          ))}
+        </ol>
+      ) : null}
+    </li>
+  );
+};
+
+const flattenAnchorItems = (items: Array<AnchorItem>): Array<AnchorItem> => {
+  return items.flatMap((item) => [
+    item,
+    ...(item.children ? flattenAnchorItems(item.children) : []),
+  ]);
+};
+
+Anchor.displayName = "Anchor";

package/packages/willa-content/src/components/Avatar/index.css

@@ -0,0 +1,248 @@
+.willa-avatar {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--willa-avatar-border);
+  background: var(--willa-avatar-custom-bg, var(--willa-avatar-bg));
+  color: var(--willa-avatar-custom-text, var(--willa-avatar-text));
+  font-family: var(--willa-body-font);
+  font-weight: 700;
+  line-height: 1;
+  padding: 0;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  vertical-align: middle;
+  user-select: none;
+  appearance: none;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.willa-avatar--interactive {
+  cursor: pointer;
+}
+
+.willa-avatar--interactive:hover {
+  border-color: var(--willa-avatar-border-hover);
+  box-shadow: var(--willa-avatar-shadow-hover);
+  transform: translateY(-1px);
+}
+
+.willa-avatar:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-avatar-hover-root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.willa-avatar-hover-card {
+  position: absolute;
+  top: calc(100% + 0.75rem);
+  left: 50%;
+  z-index: var(--willa-layer-tooltip, 1010);
+  width: max-content;
+  max-width: min(18rem, calc(100vw - 2rem));
+  padding: 0.85rem;
+  border: 1px solid var(--willa-avatar-hover-card-border);
+  border-radius: 0.85rem;
+  background: var(--willa-avatar-hover-card-bg);
+  box-shadow: var(--willa-avatar-hover-card-shadow);
+  color: var(--willa-avatar-hover-card-text);
+  font-family: var(--willa-body-font);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -0.35rem);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.willa-avatar-hover-root:hover .willa-avatar-hover-card,
+.willa-avatar-hover-root:focus-within .willa-avatar-hover-card {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(-50%, 0);
+}
+
+.willa-avatar--sm {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.72rem;
+}
+
+.willa-avatar--md {
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 0.86rem;
+}
+
+.willa-avatar--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.08rem;
+}
+
+.willa-avatar--xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.36rem;
+}
+
+.willa-avatar--circle {
+  border-radius: 50%;
+}
+
+.willa-avatar--rounded {
+  border-radius: 0.72rem;
+}
+
+.willa-avatar--square {
+  border-radius: 0.45rem;
+}
+
+.willa-avatar-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.willa-avatar-initials {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+
+.willa-avatar-preview {
+  position: fixed;
+  inset: 0;
+  z-index: var(--willa-layer-modal, 1200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--willa-lightbox-bg);
+  backdrop-filter: blur(8px);
+}
+
+.willa-avatar-preview-figure {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.willa-avatar-preview-image,
+.willa-avatar-preview-initials {
+  display: flex;
+  width: min(72vw, 20rem);
+  height: min(72vw, 20rem);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--willa-avatar-border);
+  border-radius: 1.5rem;
+  background: var(--willa-avatar-bg);
+  color: var(--willa-avatar-text);
+  font-family: var(--willa-body-font);
+  font-size: 4rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.willa-avatar-preview-image {
+  object-fit: cover;
+}
+
+.willa-avatar-preview-close {
+  position: fixed;
+  top: 1.25rem;
+  right: 1.25rem;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: 1px solid var(--willa-avatar-preview-close-border);
+  border-radius: 0.56rem;
+  background: var(--willa-avatar-preview-close-bg);
+  color: var(--willa-avatar-preview-close-text);
+  cursor: pointer;
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    transform 180ms ease;
+}
+
+.willa-avatar-preview-close:hover {
+  border-color: var(--willa-avatar-preview-close-border-hover);
+  background: var(--willa-avatar-preview-close-bg-hover);
+  transform: translateY(-1px);
+}
+
+.willa-avatar-preview-close:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-avatar-preview-close svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  stroke-width: 2.4;
+}
+
+@media (hover: none) {
+  .willa-avatar--interactive:hover {
+    transform: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-avatar-hover-card {
+    position: fixed;
+    top: auto;
+    right: 1rem;
+    bottom: 1rem;
+    left: 1rem;
+    width: auto;
+    max-width: none;
+    transform: translateY(0.35rem);
+  }
+
+  .willa-avatar-hover-root:hover .willa-avatar-hover-card,
+  .willa-avatar-hover-root:focus-within .willa-avatar-hover-card {
+    transform: translateY(0);
+  }
+
+  .willa-avatar-preview {
+    padding: 1rem;
+  }
+
+  .willa-avatar-preview-image,
+  .willa-avatar-preview-initials {
+    width: min(84vw, 20rem);
+    height: min(84vw, 20rem);
+    border-radius: 1.1rem;
+  }
+
+  .willa-avatar-preview-close {
+    top: 0.9rem;
+    right: 0.9rem;
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}