@elysn/astro 0.0.2 → 0.0.4

package/src/Tabs.astro

@@ -0,0 +1,179 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color" | "dir"> {
+  activationMode?: "automatic" | "manual";
+  className?: string;
+  color?: string;
+  defaultValue?: string;
+  dir?: "ltr" | "rtl";
+  highContrast?: boolean;
+  loopFocus?: boolean;
+  orientation?: "horizontal" | "vertical";
+  size?: Size;
+}
+const {
+  activationMode = "automatic",
+  className,
+  color,
+  defaultValue,
+  dir,
+  highContrast,
+  loopFocus = true,
+  orientation = "horizontal",
+  size = "md",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Tabs-size-xs",
+  sm: "el-Tabs-size-sm",
+  md: "el-Tabs-size-md",
+  lg: "el-Tabs-size-lg",
+};
+
+// Pre-hydration state, CSS only. Astro has no parent -> child context, so TabsTrigger/TabsContent
+// cannot know the default value at render time; instead each instance emits a tiny scoped
+// <style> that hides every panel but the default one and colours the default trigger as
+// selected. `data-ready` (set by <el-tabs> once Zag has started) switches it off.
+// Caveats:
+// - Needs `defaultValue`; without it all panels are visible until the script runs.
+// - ARIA/ids/roving tabindex exist only after hydration (Zag applies them).
+// - The inline <style> needs a CSP that allows inline styles.
+// - Nested tabs are safe: selectors skip anything inside a nested <el-tabs>.
+const uid = crypto.randomUUID().slice(0, 8);
+const cssValue = defaultValue?.replaceAll(/["\\<]/gu, (c) => (c === "<" ? "\\3c " : `\\${c}`));
+const scope = `el-tabs[data-uid="${uid}"]:not([data-ready])`;
+const ssrCss =
+  cssValue === undefined
+    ? undefined
+    : `${scope} .el-Tabs-content:not([data-value="${cssValue}"]):not(el-tabs[data-uid="${uid}"] el-tabs .el-Tabs-content){display:none}` +
+      `${scope} .el-Tabs-trigger[data-value="${cssValue}"]:not(el-tabs[data-uid="${uid}"] el-tabs .el-Tabs-trigger){color:var(--gray-12)}`;
+---
+
+<el-tabs
+  {...rest}
+  data-uid={uid}
+  data-accent-color={color}
+  data-activation-mode={activationMode}
+  data-default-value={defaultValue}
+  data-dir={dir}
+  data-high-contrast={highContrast ? "true" : undefined}
+  data-loop-focus={loopFocus ? "true" : "false"}
+  data-orientation={orientation}
+  class:list={["el-Tabs", sizes[size], className]}
+>
+  <slot />
+</el-tabs>
+{ssrCss && <style is:inline set:html={ssrCss} />}
+
+<script>
+  import * as tabs from "@zag-js/tabs";
+  import { VanillaMachine, normalizeProps, spreadProps } from "@zag-js/vanilla";
+
+  type Machine = ReturnType<typeof createMachine>;
+  const createMachine = (props: tabs.Props) =>
+    new VanillaMachine(tabs.machine, props);
+
+  let instances = 0;
+
+  class ElTabs extends HTMLElement {
+    #machine?: Machine;
+    #unsubscribe?: () => void;
+    #cleanups = new Map<Element, () => void>();
+    // Zag ids are derived from this; unique per connection so cloned markup never collides.
+    #id = "";
+
+    connectedCallback() {
+      // Guard against double init (the browser can call this again only after a disconnect)
+      if (this.#machine) return;
+      this.#id = `el-tabs-${++instances}`;
+      const firstEnabled = this.#parts("[data-part='trigger']:not([disabled])")[0];
+      const machine = createMachine({
+        id: this.#id,
+        defaultValue: this.dataset["defaultValue"] ?? firstEnabled?.dataset["value"],
+        orientation: this.dataset["orientation"] === "vertical" ? "vertical" : "horizontal",
+        activationMode: this.dataset["activationMode"] === "manual" ? "manual" : "automatic",
+        loopFocus: this.dataset["loopFocus"] !== "false",
+        dir:
+          this.dataset["dir"] === "rtl" || getComputedStyle(this).direction === "rtl"
+            ? "rtl"
+            : "ltr",
+        getRootNode: () => this.getRootNode(),
+        onValueChange: ({ value }: { value: string }) =>
+          this.dispatchEvent(
+            new CustomEvent("el-tabs:value-change", { detail: { value }, bubbles: true }),
+          ),
+      });
+      this.#machine = machine;
+      // Ids/attrs must be on the DOM before start(): the entry action measures the trigger
+      // (looked up by id) for the indicator.
+      this.#render();
+      machine.start();
+      this.#render();
+      this.#unsubscribe = machine.subscribe(() => this.#render());
+      this.dataset["ready"] = "";
+    }
+
+    disconnectedCallback() {
+      this.#unsubscribe?.();
+      this.#cleanups.forEach((fn) => fn());
+      this.#cleanups.clear();
+      this.#machine?.stop();
+      this.#machine = undefined;
+      delete this.dataset["ready"];
+    }
+
+    /** Programmatic API: `el.value` / `el.value = "b"`. */
+    get value() {
+      return this.#api()?.value ?? null;
+    }
+    set value(value: string | null) {
+      this.#api()?.setValue(value as string);
+    }
+
+    #api() {
+      return this.#machine && tabs.connect(this.#machine.service, normalizeProps);
+    }
+
+    /** Own parts only: skips parts of nested el-tabs. */
+    #parts(selector: string) {
+      return Array.from(this.querySelectorAll<HTMLElement>(selector)).filter(
+        (el) => el.closest("el-tabs") === this,
+      );
+    }
+
+    #render() {
+      const api = this.#api();
+      if (!api) return;
+      const apply = (el: Element | undefined, props: object) => {
+        if (!el) return;
+        this.#cleanups.set(
+          el,
+          spreadProps(el as HTMLElement, props as Record<string, unknown>, this.#id),
+        );
+      };
+      // Zag never looks the root up by id, so keep the author's `id` instead of its generated one
+      const { id: _id, ...rootProps } = api.getRootProps();
+      apply(this, rootProps);
+      apply(this.#parts("[data-part='list']")[0], api.getListProps());
+      for (const el of this.#parts("[data-part='trigger']")) {
+        apply(
+          el,
+          api.getTriggerProps({
+            value: el.dataset["value"] ?? "",
+            disabled: el.hasAttribute("disabled"),
+          }),
+        );
+      }
+      for (const el of this.#parts("[data-part='content']")) {
+        apply(el, api.getContentProps({ value: el.dataset["value"] ?? "" }));
+      }
+      apply(this.#parts("[data-part='indicator']")[0], api.getIndicatorProps());
+    }
+  }
+
+  if (!customElements.get("el-tabs")) customElements.define("el-tabs", ElTabs);
+</script>

package/src/TabsContent.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  className?: string;
+  value: string;
+}
+const { className, value, ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="tabpanel"
+  data-scope="tabs"
+  data-part="content"
+  data-value={value}
+  class:list={["el-Tabs-content", className]}
+>
+  <slot />
+</div>

package/src/TabsIndicator.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  className?: string;
+}
+const { className, ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-scope="tabs"
+  data-part="indicator"
+  hidden
+  class:list={["el-Tabs-indicator", className]}
+>
+</div>

package/src/TabsList.astro

@@ -0,0 +1,12 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  className?: string;
+}
+const { className, ...rest } = Astro.props as Props;
+---
+
+<div {...rest} role="tablist" data-scope="tabs" data-part="list" class:list={["el-Tabs-list", className]}>
+  <slot />
+</div>

package/src/TabsTrigger.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"button">, "value"> {
+  className?: string;
+  disabled?: boolean;
+  value: string;
+}
+const { className, disabled, value, ...rest } = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  role="tab"
+  type="button"
+  disabled={disabled}
+  data-scope="tabs"
+  data-part="trigger"
+  data-value={value}
+  class:list={["el-Tabs-trigger", className]}
+>
+  <slot />
+</button>

package/src/Text.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"p">, "color"> {
+  align?: "left" | "center" | "right";
+  as?: "p" | "span" | "div" | "label" | "b" | "i" | "s" | "u";
+  className?: string;
+  color?: string;
+  highContrast?: boolean;
+  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+  trim?: "normal" | "start" | "end" | "both";
+  truncate?: boolean;
+  weight?: "light" | "regular" | "medium" | "bold";
+  wrap?: "normal" | "nowrap" | "pretty" | "balance";
+}
+const {
+  align,
+  as: Tag = "p",
+  className,
+  color,
+  highContrast,
+  size,
+  trim,
+  truncate,
+  weight,
+  wrap,
+  ...rest
+} = Astro.props as Props;
+---
+
+<Tag
+  {...rest}
+  data-accent-color={color}
+  data-align={align}
+  data-high-contrast={highContrast ? true : undefined}
+  data-size={size}
+  data-trim={trim}
+  data-weight={weight}
+  data-wrap={wrap}
+  class:list={["el-Text", truncate && "el-Text-truncate", className]}
+>
+  <slot />
+</Tag>

package/src/TextArea.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg";
+
+interface Props extends Omit<HTMLAttributes<"textarea">, "color"> {
+  className?: string;
+  color?: string;
+  resize?: "none" | "vertical" | "horizontal" | "both";
+  size?: Size;
+  variant?: "soft" | "surface" | "outline";
+}
+const { className, color, resize = "vertical", size = "md", variant = "surface", ...rest } =
+  Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-TextArea-size-xs",
+  sm: "el-TextArea-size-sm",
+  md: "el-TextArea-size-md",
+  lg: "el-TextArea-size-lg",
+};
+---
+
+<textarea
+  {...rest}
+  data-accent-color={color}
+  data-resize={resize}
+  data-variant={variant}
+  class:list={["el-TextArea", sizes[size], className]}><slot /></textarea
+>

package/src/TextField.astro

@@ -0,0 +1,70 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color"> {
+  className?: string;
+  color?: string;
+  disabled?: boolean;
+  errorText?: string;
+  helperText?: string;
+  invalid?: boolean;
+  label?: string;
+  required?: boolean;
+  size?: Size;
+  variant?: "surface" | "soft";
+}
+const {
+  className,
+  color,
+  disabled,
+  errorText,
+  helperText,
+  invalid,
+  label,
+  required,
+  size = "md",
+  variant = "surface",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-TextField-size-xs",
+  sm: "el-TextField-size-sm",
+  md: "el-TextField-size-md",
+  lg: "el-TextField-size-lg",
+  xl: "el-TextField-size-xl",
+};
+---
+
+<div
+  {...rest}
+  data-accent-color={color}
+  data-disabled={disabled || undefined}
+  data-invalid={invalid || undefined}
+  data-required={required ? true : undefined}
+  data-variant={variant}
+  class:list={["el-TextField", sizes[size], className]}
+>
+  {
+    label && (
+      <label class="el-TextField-label">
+        {label}
+        {required && (
+          <span aria-hidden="true" class="el-TextField-required">
+            *
+          </span>
+        )}
+      </label>
+    )
+  }
+  <div class="el-TextField-control"><slot /></div>
+  {
+    invalid && errorText ? (
+      <p class="el-TextField-error">{errorText}</p>
+    ) : helperText ? (
+      <p class="el-TextField-helper">{helperText}</p>
+    ) : null
+  }
+</div>

package/src/VisuallyHidden.astro

@@ -0,0 +1,10 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {
+  className?: string;
+}
+const { className, ...rest } = Astro.props as Props;
+---
+
+<span {...rest} class:list={["el-VisuallyHidden", className]}><slot /></span>

package/src/internal/radio-group.ts

@@ -0,0 +1,82 @@
+import * as zradio from "@zag-js/radio-group";
+import { VanillaMachine, normalizeProps } from "@zag-js/vanilla";
+import { createSpreader, nextId, textDirection } from "./zag";
+
+type Machine = ReturnType<typeof createMachine>;
+const createMachine = (props: zradio.Props) => new VanillaMachine(zradio.machine, props);
+
+class ElRadioGroup extends HTMLElement {
+  #machine?: Machine;
+  #unsubscribe?: () => void;
+  #spread = createSpreader("");
+
+  connectedCallback() {
+    if (this.#machine) return;
+    const id = nextId("el-radio-group");
+    this.#spread = createSpreader(id);
+    const machine = createMachine({
+      id,
+      defaultValue: this.dataset["defaultValue"] ?? null,
+      name: this.dataset["name"],
+      disabled: this.hasAttribute("data-disabled"),
+      required: this.dataset["required"] === "true",
+      orientation: this.dataset["orientation"] === "horizontal" ? "horizontal" : "vertical",
+      dir: textDirection(this),
+      getRootNode: () => this.getRootNode(),
+      onValueChange: ({ value }: { value: string | null }) =>
+        this.dispatchEvent(
+          new CustomEvent("el-radio-group:value-change", { detail: { value }, bubbles: true }),
+        ),
+    });
+    this.#machine = machine;
+    machine.start();
+    this.#render();
+    this.#unsubscribe = machine.subscribe(() => this.#render());
+    this.dataset["ready"] = "";
+  }
+
+  disconnectedCallback() {
+    this.#unsubscribe?.();
+    this.#spread.clear();
+    this.#machine?.stop();
+    this.#machine = undefined;
+    delete this.dataset["ready"];
+  }
+
+  /** Programmatic API: `el.value` / `el.value = "b"`. */
+  get value() {
+    return this.#api()?.value ?? null;
+  }
+  set value(value: string | null) {
+    this.#api()?.setValue(value as string);
+  }
+
+  #api() {
+    return this.#machine && zradio.connect(this.#machine.service, normalizeProps);
+  }
+
+  #render() {
+    const api = this.#api();
+    if (!api) return;
+    // Keep the author's `id`, and `role`/`dir` come from the markup
+    const { id: _id, ...rootProps } = api.getRootProps();
+    this.#spread.apply(this, rootProps);
+    for (const item of this.querySelectorAll<HTMLElement>("[data-part='item']")) {
+      if (item.closest("el-radio-group") !== this) continue;
+      const props = {
+        value: item.dataset["itemValue"] ?? "",
+        disabled: item.hasAttribute("data-item-disabled"),
+      };
+      const part = (name: string) => item.querySelector<HTMLElement>(`[data-part='${name}']`);
+      this.#spread.apply(item, api.getItemProps(props));
+      this.#spread.apply(part("item-text"), api.getItemTextProps(props));
+      this.#spread.apply(part("item-control"), api.getItemControlProps(props));
+      this.#spread.apply(part("hidden-input"), api.getItemHiddenInputProps(props));
+    }
+  }
+}
+
+/** Registers `<el-radio-group>`. Called explicitly: the package is `sideEffects: false`. */
+export function defineRadioGroup() {
+  if (!customElements.get("el-radio-group")) customElements.define("el-radio-group", ElRadioGroup);
+}

package/src/internal/ssr.ts

@@ -0,0 +1,18 @@
+const escapeAttr = (value: string) => value.replaceAll("&", "&").replaceAll('"', """);
+
+/**
+ * Pre-hydration state for item-based controls. Astro has no parent -> child context, so items
+ * always render unchecked and the root patches the rendered HTML: every tag carrying
+ * `data-item-value="<value>"` becomes checked (and its hidden input gets `checked`).
+ */
+export function markChecked(html: string, value: string | undefined) {
+  if (value === undefined) return html;
+  const needle = `data-item-value="${escapeAttr(value)}"`;
+  return html.replaceAll(/<[^<>]*>/gu, (tag) => {
+    if (!tag.includes(needle)) return tag;
+    const next = tag.replace('data-state="unchecked"', 'data-state="checked"');
+    return tag.includes('data-part="hidden-input"')
+      ? next.replace("<input", "<input checked")
+      : next;
+  });
+}

package/src/internal/zag.ts

@@ -0,0 +1,24 @@
+import { spreadProps } from "@zag-js/vanilla";
+
+let instances = 0;
+
+/** Unique per connection so cloned markup never collides on Zag-derived ids. */
+export const nextId = (prefix: string) => `${prefix}-${++instances}`;
+
+/** Applies Zag prop objects to DOM elements and tracks the cleanups for `disconnectedCallback`. */
+export function createSpreader(id: string) {
+  const cleanups = new Map<Element, () => void>();
+  return {
+    apply(el: Element | null | undefined, props: object) {
+      if (!el) return;
+      cleanups.set(el, spreadProps(el as HTMLElement, props as Record<string, unknown>, id));
+    },
+    clear() {
+      cleanups.forEach((fn) => fn());
+      cleanups.clear();
+    },
+  };
+}
+
+export const textDirection = (el: Element) =>
+  el.getAttribute("data-dir") === "rtl" || getComputedStyle(el).direction === "rtl" ? "rtl" : "ltr";

package/style.css

@@ -0,0 +1,5 @@
+/* Usage: `@import "@elysn/astro";` after `@import "tailwindcss";` */
+@import '@elysn/theme';
+
+/* Lets Tailwind generate the utility classes used by these components */
+@source "./src";