@elysn/astro 0.0.3 → 0.0.4

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";