blume 0.0.0 → 0.1.0

package/src/components/content/Steps.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  titleSize?: "h2" | "h3" | "h4" | "p";
+}
+
+const { titleSize = "p" } = Astro.props;
+const titleSizeStyle = {
+  h2: "--blume-step-title-size:1.5rem;--blume-step-title-line-height:2rem;",
+  h3: "--blume-step-title-size:1.25rem;--blume-step-title-line-height:1.75rem;",
+  h4: "--blume-step-title-size:1.125rem;--blume-step-title-line-height:1.75rem;",
+  p: "--blume-step-title-size:1rem;--blume-step-title-line-height:1.75rem;",
+}[titleSize];
+---
+
+<div
+  class="not-prose my-6 ms-3 space-y-6 border-border border-s ps-8 [counter-reset:blume-step]"
+  style={titleSizeStyle}
+>
+  <slot />
+</div>

package/src/components/content/Tab.astro

@@ -0,0 +1,40 @@
+---
+import Icon from "../Icon.astro";
+
+interface Props {
+  icon?: string;
+  iconType?: string;
+  id?: string;
+  title: string;
+}
+
+const { icon, iconType, id, title } = Astro.props;
+const slugify = (value: string): string =>
+  value
+    .toLowerCase()
+    .trim()
+    .replaceAll(/[^\w\s-]/gu, "")
+    .replaceAll(/[\s_]+/gu, "-")
+    .replaceAll(/-+/gu, "-")
+    .replaceAll(/^-|-$/gu, "");
+const tabId = id ?? slugify(title);
+---
+
+<div
+  class="px-4 py-3 [&:has(>pre)]:p-0 [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
+  data-blume-tab-panel
+  data-icon={icon}
+  data-tab-id={tabId}
+  data-title={title}
+  id={id}
+  role="tabpanel"
+>
+  <slot />
+  {
+    icon && (
+      <template data-blume-tab-icon>
+        <Icon class="shrink-0" iconType={iconType} name={icon} size={14} />
+      </template>
+    )
+  }
+</div>

package/src/components/content/Tabs.astro

@@ -0,0 +1,273 @@
+---
+interface Props {
+  borderBottom?: boolean;
+  defaultTabIndex?: number;
+  dropdown?: boolean;
+  hash?: boolean;
+  sync?: boolean;
+}
+
+const {
+  borderBottom = true,
+  defaultTabIndex = 0,
+  dropdown = false,
+  hash = true,
+  sync = true,
+} = Astro.props;
+---
+
+<blume-tabs
+  class="not-prose my-6 block overflow-hidden rounded-blume border border-border bg-background"
+  data-border-bottom={borderBottom ? "true" : "false"}
+  data-default-tab-index={defaultTabIndex}
+  data-dropdown={dropdown ? "true" : "false"}
+  data-hash={hash ? "true" : "false"}
+  data-sync={sync ? "true" : "false"}
+>
+  <div class:list={[dropdown ? "" : "overflow-x-auto"]}>
+    <div
+      class:list={[
+        dropdown || borderBottom ? "border-border border-b" : "",
+        dropdown ? "p-3" : "flex gap-4 px-3",
+      ]}
+      data-blume-tablist
+      role={dropdown ? undefined : "tablist"}
+    >
+    </div>
+  </div>
+  <div data-blume-tab-content>
+    <slot />
+  </div>
+</blume-tabs>
+
+<script>
+  const TRIGGER_CLASS =
+    "-mb-px inline-flex shrink-0 cursor-pointer items-center gap-1.5 border-transparent border-b-2 bg-transparent px-1 py-2.5 font-medium text-muted-foreground text-xs transition-colors hover:text-foreground aria-[selected=true]:border-accent aria-[selected=true]:text-foreground";
+  const SELECT_CLASS =
+    "w-full rounded-blume border border-border bg-background px-3 py-2 font-medium text-foreground text-sm";
+  const SYNC_EVENT = "blume-tabs-change";
+
+  const panelTitle = (panel: HTMLElement, index: number) =>
+    panel.dataset.title ?? `Tab ${index + 1}`;
+  const panelId = (panel: HTMLElement) => panel.dataset.tabId ?? panel.id;
+  const boundedIndex = (value: number, length: number) =>
+    Math.min(Math.max(value, 0), Math.max(length - 1, 0));
+  const appendTriggerContent = (
+    trigger: HTMLButtonElement,
+    panel: HTMLElement,
+    index: number
+  ) => {
+    const icon = panel.querySelector<HTMLTemplateElement>(
+      ":scope > template[data-blume-tab-icon]"
+    );
+    if (icon) {
+      trigger.appendChild(icon.content.cloneNode(true));
+    }
+    const label = document.createElement("span");
+    label.textContent = panelTitle(panel, index);
+    trigger.appendChild(label);
+  };
+
+  class BlumeTabs extends HTMLElement {
+    #panels: HTMLElement[] = [];
+    #triggers: HTMLButtonElement[] = [];
+    #select: HTMLSelectElement | null = null;
+
+    connectedCallback() {
+      const list = this.querySelector<HTMLElement>("[data-blume-tablist]");
+      let panels = Array.from(
+        this.querySelectorAll<HTMLElement>("[data-blume-tab-panel]")
+      );
+      // CodeGroup passes raw code fences instead of <Tab> elements, so adopt
+      // the content wrapper's direct code blocks as panels. The tab label comes
+      // from each block's title (the text after the language in the fence).
+      if (panels.length === 0) {
+        const wrapper = this.querySelector<HTMLElement>(
+          ":scope > [data-blume-tab-content]"
+        );
+        const blocks = wrapper
+          ? Array.from(wrapper.children).filter(
+              (child): child is HTMLElement =>
+                child instanceof HTMLElement && child.matches("pre, figure")
+            )
+          : [];
+        for (const block of blocks) {
+          block.setAttribute("data-blume-tab-panel", "");
+        }
+        panels = blocks;
+      }
+      if (!list || panels.length === 0) {
+        return;
+      }
+      if (this.dataset.blumeTabsReady === "true") {
+        return;
+      }
+      this.dataset.blumeTabsReady = "true";
+      this.#panels = panels;
+
+      if (this.dataset.dropdown === "true") {
+        this.#select = document.createElement("select");
+        this.#select.className = SELECT_CLASS;
+        this.#select.setAttribute("aria-label", "Select code example");
+        panels.forEach((panel, index) => {
+          const option = document.createElement("option");
+          option.value = String(index);
+          option.textContent = panelTitle(panel, index);
+          this.#select?.appendChild(option);
+        });
+        this.#select.addEventListener("change", () => {
+          this.activate(Number(this.#select?.value ?? "0"), true, true);
+        });
+        list.appendChild(this.#select);
+      } else {
+        panels.forEach((panel, index) => {
+          const trigger = document.createElement("button");
+          trigger.type = "button";
+          trigger.role = "tab";
+          trigger.className = TRIGGER_CLASS;
+          appendTriggerContent(trigger, panel, index);
+          trigger.tabIndex = index === 0 ? 0 : -1;
+          if (panel.id) {
+            trigger.setAttribute("aria-controls", panel.id);
+          }
+          trigger.setAttribute(
+            "aria-selected",
+            index === 0 ? "true" : "false"
+          );
+          trigger.addEventListener("click", () => {
+            this.activate(index, true, true);
+          });
+          trigger.addEventListener("keydown", (event) => {
+            this.#onTriggerKeydown(event, index);
+          });
+          list.appendChild(trigger);
+          this.#triggers.push(trigger);
+          panel.classList.toggle("hidden", index !== 0);
+        });
+      }
+
+      this.activate(this.#initialIndex(), false, false);
+      if (this.#syncEnabled()) {
+        document.addEventListener(SYNC_EVENT, this.#sync);
+      }
+      window.addEventListener("hashchange", this.#hashChange);
+    }
+
+    disconnectedCallback() {
+      document.removeEventListener(SYNC_EVENT, this.#sync);
+      window.removeEventListener("hashchange", this.#hashChange);
+    }
+
+    activate(index: number, sync: boolean, updateHash: boolean) {
+      const activePanel = this.#panels[index];
+      if (!activePanel) {
+        return;
+      }
+
+      this.#panels.forEach((panel, panelIndex) => {
+        panel.classList.toggle("hidden", panelIndex !== index);
+      });
+      this.#triggers.forEach((trigger, triggerIndex) => {
+        trigger.setAttribute(
+          "aria-selected",
+          triggerIndex === index ? "true" : "false"
+        );
+        trigger.tabIndex = triggerIndex === index ? 0 : -1;
+      });
+      if (this.#select) {
+        this.#select.value = String(index);
+      }
+      const id = panelId(activePanel);
+      if (updateHash && id && this.#hashEnabled()) {
+        history.replaceState(null, "", `#${encodeURIComponent(id)}`);
+      }
+      if (sync && this.#syncEnabled()) {
+        document.dispatchEvent(
+          new CustomEvent(SYNC_EVENT, {
+            detail: { title: panelTitle(activePanel, index) },
+          })
+        );
+      }
+    }
+
+    activateByTitle(title: string, sync: boolean) {
+      const index = this.#panels.findIndex((panel, panelIndex) => {
+        return panelTitle(panel, panelIndex) === title;
+      });
+      if (index !== -1) {
+        this.activate(index, sync, false);
+      }
+    }
+
+    #activateByHash() {
+      if (!this.#hashEnabled()) {
+        return false;
+      }
+      const id = decodeURIComponent(window.location.hash.slice(1));
+      if (!id) {
+        return false;
+      }
+      const index = this.#panels.findIndex((panel) => panelId(panel) === id);
+      if (index === -1) {
+        return false;
+      }
+
+      this.activate(index, false, false);
+      return true;
+    }
+
+    #initialIndex() {
+      if (this.#activateByHash()) {
+        return this.#panels.findIndex((panel) => !panel.classList.contains("hidden"));
+      }
+      return boundedIndex(
+        Number(this.dataset.defaultTabIndex ?? "0"),
+        this.#panels.length
+      );
+    }
+
+    #onTriggerKeydown(event: KeyboardEvent, index: number) {
+      const lastIndex = this.#triggers.length - 1;
+      let nextIndex: number | undefined;
+      if (event.key === "ArrowRight") {
+        nextIndex = index === lastIndex ? 0 : index + 1;
+      } else if (event.key === "ArrowLeft") {
+        nextIndex = index === 0 ? lastIndex : index - 1;
+      } else if (event.key === "Home") {
+        nextIndex = 0;
+      } else if (event.key === "End") {
+        nextIndex = lastIndex;
+      }
+      if (nextIndex === undefined) {
+        return;
+      }
+
+      event.preventDefault();
+      this.activate(nextIndex, true, true);
+      this.#triggers[nextIndex]?.focus();
+    }
+
+    #syncEnabled() {
+      return this.dataset.sync !== "false";
+    }
+
+    #hashEnabled() {
+      return this.dataset.hash !== "false";
+    }
+
+    #sync = (event: Event) => {
+      const title = (event as CustomEvent<{ title?: string }>).detail?.title;
+      if (title) {
+        this.activateByTitle(title, false);
+      }
+    };
+
+    #hashChange = () => {
+      this.#activateByHash();
+    };
+  }
+
+  if (!customElements.get("blume-tabs")) {
+    customElements.define("blume-tabs", BlumeTabs);
+  }
+</script>

package/src/components/content/Tile.astro

@@ -0,0 +1,42 @@
+---
+import Icon from "../Icon.astro";
+
+const { description, href, title } = Astro.props;
+const Tag = href ? "a" : "div";
+const external = href?.startsWith("http");
+const previewPattern =
+  "background-image:radial-gradient(circle at 1px 1px,color-mix(in oklab,currentColor 18%,transparent) 1px,transparent 0);background-size:18px 18px;";
+---
+
+<Tag
+  class="not-prose block overflow-hidden rounded-blume border border-border bg-background text-inherit no-underline! transition-colors hover:no-underline! hover:[&[href]]:border-accent"
+  data-blume-tile
+  href={href}
+  rel={external ? "noreferrer" : undefined}
+  target={external ? "_blank" : undefined}
+>
+  <div
+    class="flex aspect-[16/9] min-h-32 items-center justify-center bg-muted/40 p-4 text-muted-foreground [&_img]:max-h-full [&_img]:max-w-full [&_svg]:max-h-full [&_svg]:max-w-full"
+    data-blume-tile-preview
+    style={previewPattern}
+  >
+    <slot />
+  </div>
+  <div class="p-4">
+    {
+      title && (
+        <p class="m-0! flex items-center gap-1.5 font-semibold">
+          {title}
+          {href && (
+            <Icon class="text-muted-foreground" name="arrow-right" size={14} />
+          )}
+        </p>
+      )
+    }
+    {
+      description && (
+        <p class="mt-1! mb-0! text-muted-foreground text-sm">{description}</p>
+      )
+    }
+  </div>
+</Tag>

package/src/components/content/Tooltip.astro

@@ -0,0 +1,68 @@
+---
+import { randomUUID } from "node:crypto";
+
+interface Props {
+  cta?: string;
+  headline?: string;
+  href?: string;
+  tip: string;
+}
+
+const { cta, headline, href, tip } = Astro.props;
+const tooltipId = `blume-tooltip-${randomUUID()}`;
+const external = href?.startsWith("http");
+
+const unwrapParagraph = (html: string): string => {
+  const trimmed = html.trim();
+  const match = trimmed.match(/^<p>(?<content>[\s\S]*)<\/p>$/u);
+  return match?.groups?.content ?? trimmed;
+};
+
+const labelHtml = Astro.slots.has("default")
+  ? unwrapParagraph(await Astro.slots.render("default"))
+  : "";
+---
+
+<span class="not-prose group relative inline-flex cursor-help items-baseline">
+  <span
+    aria-describedby={tooltipId}
+    class="underline decoration-dotted underline-offset-4"
+    data-blume-tooltip-trigger
+    tabindex="0"
+    set:html={labelHtml}
+  />
+  <span
+    class="absolute bottom-full left-1/2 z-20 mb-2 w-max max-w-xs -translate-x-1/2 rounded-blume border border-border bg-background p-3 text-start font-sans text-foreground text-sm shadow-lg"
+    data-blume-tooltip-panel
+    id={tooltipId}
+    role="tooltip"
+  >
+    {headline && <span class="mb-1 block font-semibold">{headline}</span>}
+    <span class="block text-muted-foreground leading-5">{tip}</span>
+    {
+      cta && href && (
+        <a
+          class="mt-2 inline-flex font-medium text-accent text-xs hover:underline"
+          href={href}
+          rel={external ? "noreferrer" : undefined}
+          target={external ? "_blank" : undefined}
+        >
+          {cta}
+        </a>
+      )
+    }
+  </span>
+</span>
+
+<style>
+  [data-blume-tooltip-panel] {
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  [data-blume-tooltip-trigger]:focus + [data-blume-tooltip-panel],
+  .group:hover [data-blume-tooltip-panel] {
+    pointer-events: auto;
+    visibility: visible;
+  }
+</style>