@elysn/astro 0.0.3 → 0.0.4

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>

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>