@elysn/astro 0.0.2 → 0.0.4

package/src/RadioCardsItem.astro

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"label">, "value" | "color"> {
+  className?: string;
+  color?: string;
+  disabled?: boolean;
+  value: string;
+}
+const { className, color, disabled, value, ...rest } = Astro.props as Props;
+---
+
+<label
+  {...rest}
+  data-scope="radio-group"
+  data-part="item"
+  data-state="unchecked"
+  data-accent-color={color}
+  data-item-value={value}
+  data-item-disabled={disabled ? "" : undefined}
+  data-disabled={disabled ? "" : undefined}
+  class:list={["el-BaseCard el-RadioCardsItem", className]}
+>
+  <span
+    data-scope="radio-group"
+    data-part="item-text"
+    data-state="unchecked"
+    data-item-value={value}
+  >
+    <slot />
+  </span>
+  <input
+    type="radio"
+    data-part="hidden-input"
+    data-state="unchecked"
+    data-item-value={value}
+    value={value}
+    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>

package/src/RadioGroup.astro

@@ -0,0 +1,70 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { markChecked } from "./internal/ssr";
+
+type Size = "xs" | "sm" | "md" | "lg";
+
+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" | "soft";
+}
+const {
+  className,
+  color,
+  defaultValue,
+  dir,
+  disabled,
+  highContrast,
+  name,
+  orientation = "vertical",
+  radius,
+  required,
+  size = "md",
+  variant = "surface",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-RadioGroup-size-xs",
+  sm: "el-RadioGroup-size-sm",
+  md: "el-RadioGroup-size-md",
+  lg: "el-RadioGroup-size-lg",
+};
+const items = markChecked(await Astro.slots.render("default"), defaultValue);
+---
+
+<el-radio-group
+  {...rest}
+  role="radiogroup"
+  data-scope="radio-group"
+  data-part="root"
+  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-RadioGroup", sizes[size], className]}
+>
+  <Fragment set:html={items} />
+</el-radio-group>
+
+<script>
+  import { defineRadioGroup } from "./internal/radio-group";
+
+  defineRadioGroup();
+</script>

package/src/RadioGroupItem.astro

@@ -0,0 +1,53 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"label">, "value"> {
+  className?: string;
+  disabled?: boolean;
+  value: string;
+}
+const { className, disabled, value, ...rest } = Astro.props as Props;
+const hasText = Astro.slots.has("default");
+---
+
+<label
+  {...rest}
+  data-scope="radio-group"
+  data-part="item"
+  data-state="unchecked"
+  data-item-value={value}
+  data-item-disabled={disabled ? "" : undefined}
+  data-disabled={disabled ? "" : undefined}
+  class:list={["el-RadioGroup-item", className]}
+>
+  <div
+    data-scope="radio-group"
+    data-part="item-control"
+    data-state="unchecked"
+    data-item-value={value}
+    class="el-RadioGroup-itemControl"
+  >
+  </div>
+  {
+    hasText && (
+      <span
+        data-scope="radio-group"
+        data-part="item-text"
+        data-state="unchecked"
+        data-item-value={value}
+        class="el-RadioGroup-itemText"
+      >
+        <slot />
+      </span>
+    )
+  }
+  <input
+    type="radio"
+    data-part="hidden-input"
+    data-state="unchecked"
+    data-item-value={value}
+    value={value}
+    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>

package/src/Section.astro

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

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>