@elysn/astro 0.0.2 → 0.0.4

package/src/Checkbox.astro

@@ -0,0 +1,212 @@
+---
+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 | "indeterminate";
+  dir?: "ltr" | "rtl";
+  disabled?: boolean;
+  highContrast?: boolean;
+  invalid?: 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,
+  invalid,
+  name,
+  radius,
+  required,
+  size = "md",
+  value = "on",
+  variant = "surface",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Checkbox-size-xs",
+  sm: "el-Checkbox-size-sm",
+  md: "el-Checkbox-size-md",
+  lg: "el-Checkbox-size-lg",
+};
+const indeterminate = defaultChecked === "indeterminate";
+const checked = defaultChecked === true;
+const state = indeterminate ? "indeterminate" : checked ? "checked" : "unchecked";
+const hasLabel = Astro.slots.has("default");
+---
+
+<!-- display: contents keeps the Zag root (a <label>) as the visual box -->
+<el-checkbox
+  style="display: contents"
+  data-default-checked={defaultChecked === undefined ? undefined : String(defaultChecked)}
+  data-dir={dir}
+>
+  <label
+    {...rest}
+    data-scope="checkbox"
+    data-part="root"
+    data-state={state}
+    data-disabled={disabled ? "" : undefined}
+    data-invalid={invalid ? "" : undefined}
+    data-accent-color={color}
+    data-high-contrast={highContrast ? "true" : undefined}
+    data-radius={radius}
+    data-variant={variant}
+    class:list={["el-Checkbox", sizes[size], className]}
+  >
+    <div data-scope="checkbox" data-part="control" data-state={state} class="el-Checkbox-control">
+      <div
+        data-scope="checkbox"
+        data-part="indicator"
+        data-indicator="checked"
+        data-state={state}
+        hidden={!checked}
+      >
+        <svg
+          fill="none"
+          height="10"
+          stroke="currentColor"
+          stroke-width="2.5"
+          viewBox="0 0 14 14"
+          width="10"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M2 7L5.5 10.5L12 3" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </div>
+      <div
+        data-scope="checkbox"
+        data-part="indicator"
+        data-indicator="indeterminate"
+        data-state={state}
+        hidden={!indeterminate}
+      >
+        <svg
+          fill="none"
+          height="10"
+          stroke="currentColor"
+          stroke-width="2.5"
+          viewBox="0 0 14 14"
+          width="10"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M2 7H12" stroke-linecap="round"></path>
+        </svg>
+      </div>
+    </div>
+    {
+      hasLabel && (
+        <span data-scope="checkbox" data-part="label" data-state={state} class="el-Checkbox-label">
+          <slot />
+        </span>
+      )
+    }
+    <input
+      type="checkbox"
+      data-part="hidden-input"
+      name={name}
+      value={value}
+      checked={checked}
+      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-checkbox>
+
+<script>
+  import * as zcheckbox from "@zag-js/checkbox";
+  import { VanillaMachine, normalizeProps } from "@zag-js/vanilla";
+  import { createSpreader, nextId, textDirection } from "./internal/zag";
+
+  type Machine = ReturnType<typeof createMachine>;
+  const createMachine = (props: zcheckbox.Props) => new VanillaMachine(zcheckbox.machine, props);
+
+  class ElCheckbox extends HTMLElement {
+    #machine?: Machine;
+    #unsubscribe?: () => void;
+    #spread = createSpreader("");
+
+    connectedCallback() {
+      if (this.#machine) return;
+      const id = nextId("el-checkbox");
+      this.#spread = createSpreader(id);
+      const input = this.#part("hidden-input") as HTMLInputElement | undefined;
+      const initial = this.dataset["defaultChecked"];
+      const machine = createMachine({
+        id,
+        defaultChecked: initial === "indeterminate" ? "indeterminate" : initial === "true",
+        disabled: input?.disabled,
+        required: input?.required,
+        invalid: this.querySelector("[data-invalid]") !== null,
+        name: input?.name || undefined,
+        value: input?.value,
+        dir: textDirection(this),
+        getRootNode: () => this.getRootNode(),
+        onCheckedChange: ({ checked }: { checked: boolean | "indeterminate" }) =>
+          this.dispatchEvent(
+            new CustomEvent("el-checkbox: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 = "indeterminate"`. */
+    get checked() {
+      const api = this.#api();
+      return api?.indeterminate ? "indeterminate" : (api?.checked ?? false);
+    }
+    set checked(checked: boolean | "indeterminate") {
+      this.#api()?.setChecked(checked);
+    }
+
+    #api() {
+      return this.#machine && zcheckbox.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("label"), api.getLabelProps());
+      this.#spread.apply(this.#part("hidden-input"), api.getHiddenInputProps());
+      for (const el of this.querySelectorAll<HTMLElement>("[data-part='indicator']")) {
+        this.#spread.apply(el, api.getIndicatorProps());
+        el.hidden = el.dataset["indicator"] === "indeterminate" ? !api.indeterminate : !api.checked;
+      }
+    }
+  }
+
+  if (!customElements.get("el-checkbox")) customElements.define("el-checkbox", ElCheckbox);
+</script>

package/src/Code.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"code">, "color"> {
+  className?: string;
+  color?: string;
+  highContrast?: boolean;
+  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+  variant?: "solid" | "soft" | "surface";
+}
+const { className, color, highContrast, size, variant = "soft", ...rest } = Astro.props as Props;
+---
+
+<code
+  {...rest}
+  data-accent-color={color}
+  data-high-contrast={highContrast ? true : undefined}
+  data-size={size}
+  data-variant={variant}
+  class:list={["el-Code", className]}><slot /></code
+>

package/src/Container.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color"> {
+  className?: string;
+  color?: string;
+  size?: Size;
+}
+const { className, color, size = "xl", ...rest } = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Container-size-xs",
+  sm: "el-Container-size-sm",
+  md: "el-Container-size-md",
+  lg: "el-Container-size-lg",
+  xl: "el-Container-size-xl",
+};
+---
+
+<div {...rest} data-accent-color={color} class:list={["el-Container", sizes[size], className]}>
+  <div class="el-ContainerInner">
+    <slot />
+  </div>
+</div>

package/src/DecoratedBox.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  className?: string;
+}
+const { className, style, ...rest } = Astro.props as Props;
+
+const hatch =
+  "url(\"data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E\")";
+---
+
+<div
+  {...rest}
+  class:list={[
+    "bg-gray-a3 border-gray-a5 h-full w-full rounded-md border text-center",
+    className,
+  ]}
+  style={[`background-image: ${hatch}`, style].filter(Boolean).join(";")}
+>
+  <slot />
+</div>

package/src/Em.astro

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

package/src/Flex.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  align?: "start" | "center" | "end" | "stretch" | "baseline";
+  className?: string;
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  gap?: "xs" | "sm" | "md" | "lg" | "xl";
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+  wrap?: "nowrap" | "wrap" | "wrap-reverse";
+}
+const { align, className, direction, gap, justify, wrap, ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-align={align}
+  data-direction={direction}
+  data-gap={gap}
+  data-justify={justify}
+  data-wrap={wrap}
+  class:list={["el-Flex", className]}
+>
+  <slot />
+</div>

package/src/Grid.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"div">, "style"> {
+  className?: string;
+  columns?: string;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl";
+  style?: Record<string, string | number>;
+}
+const { className, columns, gap, style, ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-columns={columns}
+  data-gap={gap}
+  class:list={["el-Grid", className]}
+  style={columns ? { gridTemplateColumns: columns, ...style } : style}
+>
+  <slot />
+</div>

package/src/Heading.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"h2">, "color"> {
+  align?: "left" | "center" | "right";
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  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 = "h2",
+  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-Heading", truncate && "el-Heading-truncate", className]}
+>
+  <slot />
+</Tag>

package/src/InputControl.astro

@@ -0,0 +1,40 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color"> {
+  className?: string;
+  color?: string;
+  /** Defaults to the surrounding `TextField` variant, else surface. */
+  variant?: "surface" | "soft";
+}
+const { className, color, variant, ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-accent-color={color}
+  data-variant={variant}
+  class:list={["el-InputControl", className]}
+>
+  <slot />
+</div>
+
+<script>
+  // Clicking a slot (not the input, a button or a link) focuses the input, like the React InputControl
+  const rightSlot =
+    ".el-InputSlot[data-side='right'], .el-InputSlot:not([data-side='right']) ~ .el-InputSlot:not([data-side='left'])";
+  document.addEventListener("pointerdown", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element) || target.closest("input, button, a")) return;
+    const control = target.closest(".el-InputControl");
+    const input = control?.querySelector<HTMLInputElement>(".el-InputField");
+    if (!input || event.defaultPrevented) return;
+    const position = target.closest(rightSlot) ? input.value.length : 0;
+    requestAnimationFrame(() => {
+      try {
+        input.setSelectionRange(position, position);
+      } catch {}
+      input.focus();
+    });
+  });
+</script>

package/src/InputField.astro

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

package/src/InputSlot.astro

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Space = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color" | "style"> {
+  className?: string;
+  /** Tints the slot with `--accent-a11`. */
+  color?: string;
+  /** Defaults to left; two unsided slots land left then right. */
+  side?: "left" | "right";
+  /** Space scale step (0-9) overriding the size-based defaults. */
+  gap?: Space;
+  px?: Space;
+  pl?: Space;
+  pr?: Space;
+  style?: string;
+}
+const { className, color, side, gap, px, pl, pr, style, ...rest } = Astro.props as Props;
+
+const space = (value?: Space) => (value === undefined ? undefined : `var(--space-${value})`);
+const vars = Object.entries({
+  "--slot-gap": space(gap),
+  "--slot-px": space(px),
+  "--slot-pl": space(pl),
+  "--slot-pr": space(pr),
+})
+  .filter(([, value]) => value !== undefined)
+  .map(([name, value]) => `${name}: ${value}`);
+const css = [...vars, style].filter(Boolean).join("; ") || undefined;
+---
+
+<div
+  {...rest}
+  data-accent-color={color}
+  data-side={side}
+  style={css}
+  class:list={["el-InputSlot", className]}
+>
+  <slot />
+</div>

package/src/Kbd.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"kbd"> {
+  className?: string;
+  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+}
+const { className, size, ...rest } = Astro.props as Props;
+---
+
+<kbd {...rest} data-size={size} class:list={["el-Kbd", className]}><slot /></kbd>

package/src/Link.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"a">, "color"> {
+  className?: string;
+  color?: string;
+  highContrast?: boolean;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  truncate?: boolean;
+  underline?: "auto" | "always" | "hover" | "none";
+  variant?: "soft" | "surface" | "outline";
+}
+const {
+  className,
+  color,
+  highContrast,
+  size,
+  truncate,
+  underline = "auto",
+  variant,
+  ...rest
+} = Astro.props as Props;
+---
+
+<a
+  {...rest}
+  data-accent-color={color}
+  data-high-contrast={highContrast ? true : undefined}
+  data-size={size}
+  data-underline={underline}
+  data-variant={variant}
+  class:list={["el-Link", truncate && "el-Link-truncate", className]}><slot /></a
+>

package/src/Panel.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} class:list={["el-PanelBase", className]}>
+  <slot />
+</div>

package/src/Progress.astro

@@ -0,0 +1,63 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color"> {
+  className?: string;
+  color?: string;
+  highContrast?: boolean;
+  max?: number;
+  min?: number;
+  radius?: "none" | "small" | "medium" | "large" | "full";
+  size?: Size;
+  /** Omit for an indeterminate progress bar */
+  value?: number;
+  variant?: "soft" | "surface";
+}
+const {
+  className,
+  color,
+  highContrast,
+  max = 100,
+  min = 0,
+  radius,
+  size = "md",
+  value,
+  variant = "surface",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Progress-size-xs",
+  sm: "el-Progress-size-sm",
+  md: "el-Progress-size-md",
+  lg: "el-Progress-size-lg",
+};
+
+const indeterminate = value === undefined;
+const percent = indeterminate ? undefined : ((value - min) / (max - min)) * 100;
+const state = indeterminate ? "indeterminate" : value >= max ? "complete" : "loading";
+---
+
+<div
+  {...rest}
+  role="progressbar"
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  data-accent-color={color}
+  data-high-contrast={highContrast ? "true" : undefined}
+  data-state={state}
+  data-variant={variant}
+  class:list={["el-Progress", sizes[size], className]}
+>
+  <div class="el-Progress-track" data-radius={radius}>
+    <div
+      class="el-Progress-range"
+      data-state={state}
+      style={percent === undefined ? undefined : { width: `${percent}%` }}
+    >
+    </div>
+  </div>
+</div>

package/src/Quote.astro

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

package/src/RadioCards.astro

@@ -0,0 +1,71 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { markChecked } from "./internal/ssr";
+
+type Size = "xs" | "sm" | "md";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color" | "dir" | "name"> {
+  className?: string;
+  color?: string;
+  defaultValue?: string;
+  dir?: "ltr" | "rtl";
+  disabled?: boolean;
+  highContrast?: boolean;
+  name?: string;
+  orientation?: "horizontal" | "vertical";
+  radius?: "none" | "small" | "medium" | "large" | "full";
+  required?: boolean;
+  size?: Size;
+  variant?: "surface";
+}
+const {
+  className,
+  color,
+  defaultValue,
+  dir,
+  disabled,
+  highContrast,
+  name,
+  orientation = "vertical",
+  radius,
+  required,
+  size = "sm",
+  variant = "surface",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-RadioCards-size-xs",
+  sm: "el-RadioCards-size-sm",
+  md: "el-RadioCards-size-md",
+};
+const items = markChecked(await Astro.slots.render("default"), defaultValue);
+---
+
+<!-- Same Zag radio-group machine as RadioGroup: the custom element is shared -->
+<el-radio-group
+  {...rest}
+  role="radiogroup"
+  data-scope="radio-group"
+  data-part="root"
+  data-slot="control"
+  data-accent-color={color}
+  data-default-value={defaultValue}
+  data-dir={dir}
+  data-disabled={disabled ? "" : undefined}
+  data-high-contrast={highContrast ? "true" : undefined}
+  data-name={name}
+  data-orientation={orientation}
+  data-radius={radius}
+  data-required={required ? "true" : undefined}
+  data-variant={variant}
+  class:list={["el-RadioCardsRoot", sizes[size], className]}
+>
+  <Fragment set:html={items} />
+</el-radio-group>
+
+<script>
+  import { defineRadioGroup } from "./internal/radio-group";
+
+  defineRadioGroup();
+</script>