@elysn/astro 0.0.3 → 0.0.4

package/src/SegmentedControl.astro

@@ -0,0 +1,189 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg";
+
+interface Item {
+  disabled?: boolean;
+  label: string;
+  value: string;
+}
+
+interface Props extends Omit<HTMLAttributes<"div">, "color" | "dir" | "name"> {
+  className?: string;
+  color?: string;
+  defaultValue?: string;
+  dir?: "ltr" | "rtl";
+  disabled?: boolean;
+  items: Item[];
+  name?: string;
+  radius?: "none" | "small" | "medium" | "large" | "full";
+  size?: Size;
+}
+const {
+  className,
+  color,
+  defaultValue,
+  dir,
+  disabled,
+  items,
+  name,
+  radius,
+  size = "md",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-SegmentedControl-size-xs",
+  sm: "el-SegmentedControl-size-sm",
+  md: "el-SegmentedControl-size-md",
+  lg: "el-SegmentedControl-size-lg",
+};
+---
+
+<el-segmented-control
+  {...rest}
+  role="radiogroup"
+  data-scope="segment-group"
+  data-part="root"
+  data-accent-color={color}
+  data-default-value={defaultValue}
+  data-dir={dir}
+  data-disabled={disabled ? "" : undefined}
+  data-name={name}
+  data-orientation="horizontal"
+  data-radius={radius}
+  class:list={["el-SegmentedControl", sizes[size], className]}
+>
+  {
+    items.map((item) => {
+      const state = item.value === defaultValue ? "checked" : "unchecked";
+      return (
+        <label
+          data-scope="segment-group"
+          data-part="item"
+          data-state={state}
+          data-item-value={item.value}
+          data-item-disabled={item.disabled ? "" : undefined}
+          data-disabled={item.disabled || disabled ? "" : undefined}
+          class="el-SegmentedControl-item"
+        >
+          <span
+            data-scope="segment-group"
+            data-part="item-text"
+            data-state={state}
+            data-text={item.label}
+            class="el-SegmentedControl-itemText"
+          >
+            {item.label}
+          </span>
+          <input
+            type="radio"
+            data-part="hidden-input"
+            data-item-value={item.value}
+            value={item.value}
+            checked={state === "checked"}
+            disabled={item.disabled || disabled}
+            style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal"
+          />
+        </label>
+      );
+    })
+  }
+  <div
+    data-scope="segment-group"
+    data-part="indicator"
+    data-orientation="horizontal"
+    class="el-SegmentedControl-indicator"
+  >
+  </div>
+</el-segmented-control>
+
+<script>
+  import * as zradio from "@zag-js/radio-group";
+  import { VanillaMachine, normalizeProps } from "@zag-js/vanilla";
+  import { createSpreader, nextId, textDirection } from "./internal/zag";
+
+  type Machine = ReturnType<typeof createMachine>;
+  const createMachine = (props: zradio.Props) => new VanillaMachine(zradio.machine, props);
+
+  class ElSegmentedControl extends HTMLElement {
+    #machine?: Machine;
+    #unsubscribe?: () => void;
+    #spread = createSpreader("");
+
+    connectedCallback() {
+      if (this.#machine) return;
+      const id = nextId("el-segmented-control");
+      this.#spread = createSpreader(id);
+      const machine = createMachine({
+        id,
+        defaultValue: this.dataset["defaultValue"] ?? null,
+        name: this.dataset["name"],
+        disabled: this.hasAttribute("data-disabled"),
+        orientation: "horizontal",
+        dir: textDirection(this),
+        getRootNode: () => this.getRootNode(),
+        onValueChange: ({ value }: { value: string | null }) =>
+          this.dispatchEvent(
+            new CustomEvent("el-segmented-control:value-change", {
+              detail: { value },
+              bubbles: true,
+            }),
+          ),
+      });
+      this.#machine = machine;
+      // The indicator is positioned from the item rects, which need the ids on the DOM first
+      this.#render();
+      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;
+      const { id: _id, ...rootProps } = api.getRootProps();
+      this.#spread.apply(this, rootProps);
+      for (const item of this.querySelectorAll<HTMLElement>("[data-part='item']")) {
+        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("hidden-input"), api.getItemHiddenInputProps(props));
+      }
+      this.#spread.apply(
+        this.querySelector("[data-part='indicator']"),
+        api.getIndicatorProps(),
+      );
+    }
+  }
+
+  if (!customElements.get("el-segmented-control")) {
+    customElements.define("el-segmented-control", ElSegmentedControl);
+  }
+</script>

package/src/Separator.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color"> {
+  className?: string;
+  color?: string;
+  decorative?: boolean;
+  orientation?: "horizontal" | "vertical";
+  size?: "1" | "2" | "3" | "4";
+}
+const { className, color, decorative, orientation = "horizontal", size = "1", ...rest } =
+  Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role={decorative ? undefined : "separator"}
+  aria-hidden={decorative ? "true" : undefined}
+  aria-orientation={decorative ? undefined : orientation}
+  data-accent-color={color}
+  data-orientation={orientation}
+  data-size={size}
+  class:list={["el-Separator", className]}
+>
+</div>

package/src/Skeleton.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"span">, "style"> {
+  className?: string;
+  height?: string;
+  loading?: boolean;
+  style?: Record<string, string | number>;
+  width?: string;
+}
+const { className, height, loading = true, style, width, ...rest } = Astro.props as Props;
+// Like Radix: when not loading, render the bare slot (no wrapper element).
+// Whitespace-only slots are emptied so the `:empty` block placeholder rule still applies.
+const html = loading && Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const content = html.trim() === "" ? "" : html;
+---
+
+{
+  loading ? (
+    <span
+      {...rest}
+      data-loading
+      class:list={["el-Skeleton", className]}
+      style={{ width, height, ...style }}
+      set:html={content}
+    />
+  ) : (
+    <slot />
+  )
+}

package/src/Spinner.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface Props extends HTMLAttributes<"span"> {
+  className?: string;
+  loading?: boolean;
+  size?: Size;
+}
+const { className, loading = true, size = "md", ...rest } = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Spinner-size-xs",
+  sm: "el-Spinner-size-sm",
+  md: "el-Spinner-size-md",
+  lg: "el-Spinner-size-lg",
+  xl: "el-Spinner-size-xl",
+};
+---
+
+{
+  loading && (
+    <span
+      {...rest}
+      role="status"
+      aria-label="Loading"
+      class:list={["el-Spinner", sizes[size], className]}
+    />
+  )
+}

package/src/Strong.astro

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

package/src/Switch.astro

@@ -0,0 +1,164 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg";
+
+interface Props extends Omit<HTMLAttributes<"label">, "color" | "dir" | "name"> {
+  className?: string;
+  color?: string;
+  defaultChecked?: boolean;
+  dir?: "ltr" | "rtl";
+  disabled?: boolean;
+  highContrast?: boolean;
+  name?: string;
+  radius?: "none" | "small" | "medium" | "large" | "full";
+  required?: boolean;
+  size?: Size;
+  value?: string;
+  variant?: "surface" | "soft";
+}
+const {
+  className,
+  color,
+  defaultChecked,
+  dir,
+  disabled,
+  highContrast,
+  name,
+  radius,
+  required,
+  size = "md",
+  value = "on",
+  variant = "surface",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Switch-size-xs",
+  sm: "el-Switch-size-sm",
+  md: "el-Switch-size-md",
+  lg: "el-Switch-size-lg",
+};
+const state = defaultChecked ? "checked" : "unchecked";
+const hasLabel = Astro.slots.has("default");
+---
+
+<!-- display: contents keeps the Zag root (a <label>) as the visual box -->
+<el-switch
+  style="display: contents"
+  data-default-checked={defaultChecked ? "true" : undefined}
+  data-dir={dir}
+>
+  <label
+    {...rest}
+    data-scope="switch"
+    data-part="root"
+    data-state={state}
+    data-disabled={disabled ? "" : undefined}
+    data-accent-color={color}
+    data-high-contrast={highContrast ? "true" : undefined}
+    data-radius={radius}
+    data-variant={variant}
+    class:list={["el-Switch", sizes[size], className]}
+  >
+    <span data-scope="switch" data-part="control" data-state={state} class="el-Switch-control">
+      <span data-scope="switch" data-part="thumb" data-state={state} class="el-Switch-thumb"></span>
+    </span>
+    {
+      hasLabel && (
+        <span data-scope="switch" data-part="label" data-state={state} class="el-Switch-label">
+          <slot />
+        </span>
+      )
+    }
+    <input
+      type="checkbox"
+      data-part="hidden-input"
+      name={name}
+      value={value}
+      checked={defaultChecked}
+      disabled={disabled}
+      required={required}
+      style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal"
+    />
+  </label>
+</el-switch>
+
+<script>
+  import * as zswitch from "@zag-js/switch";
+  import { VanillaMachine, normalizeProps } from "@zag-js/vanilla";
+  import { createSpreader, nextId, textDirection } from "./internal/zag";
+
+  type Machine = ReturnType<typeof createMachine>;
+  const createMachine = (props: zswitch.Props) => new VanillaMachine(zswitch.machine, props);
+
+  class ElSwitch extends HTMLElement {
+    #machine?: Machine;
+    #unsubscribe?: () => void;
+    #spread = createSpreader("");
+
+    connectedCallback() {
+      if (this.#machine) return;
+      const id = nextId("el-switch");
+      this.#spread = createSpreader(id);
+      const input = this.#part("hidden-input") as HTMLInputElement | undefined;
+      const machine = createMachine({
+        id,
+        defaultChecked: this.dataset["defaultChecked"] === "true",
+        disabled: input?.disabled,
+        required: input?.required,
+        name: input?.name || undefined,
+        value: input?.value,
+        dir: textDirection(this),
+        getRootNode: () => this.getRootNode(),
+        onCheckedChange: ({ checked }: { checked: boolean }) =>
+          this.dispatchEvent(
+            new CustomEvent("el-switch:checked-change", { detail: { checked }, 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.checked` / `el.checked = true`. */
+    get checked() {
+      return this.#api()?.checked ?? false;
+    }
+    set checked(checked: boolean) {
+      this.#api()?.setChecked(checked);
+    }
+
+    #api() {
+      return this.#machine && zswitch.connect(this.#machine.service, normalizeProps);
+    }
+
+    #part(name: string) {
+      return this.querySelector<HTMLElement>(`[data-part='${name}']`) ?? undefined;
+    }
+
+    #render() {
+      const api = this.#api();
+      if (!api) return;
+      // 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();
+      this.#spread.apply(this.#part("root"), rootProps);
+      this.#spread.apply(this.#part("control"), api.getControlProps());
+      this.#spread.apply(this.#part("thumb"), api.getThumbProps());
+      this.#spread.apply(this.#part("label"), api.getLabelProps());
+      this.#spread.apply(this.#part("hidden-input"), api.getHiddenInputProps());
+    }
+  }
+
+  if (!customElements.get("el-switch")) customElements.define("el-switch", ElSwitch);
+</script>

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>