@elysn/astro 0.0.3 → 0.0.4

package/index.ts

@@ -1,4 +1,50 @@
 // Do not write code directly here, instead use the `src` folder!
 // Then, use this file to export everything you want your user to access.
 
+export { default as AccessibleIcon } from "./src/AccessibleIcon.astro";
+export { default as AspectRatio } from "./src/AspectRatio.astro";
+export { default as Avatar } from "./src/Avatar.astro";
+export { default as Badge } from "./src/Badge.astro";
+export { default as Blockquote } from "./src/Blockquote.astro";
+export { default as Box } from "./src/Box.astro";
 export { default as Button } from "./src/Button.astro";
+export { default as Callout } from "./src/Callout.astro";
+export { default as CalloutIcon } from "./src/CalloutIcon.astro";
+export { default as CalloutText } from "./src/CalloutText.astro";
+export { default as Card } from "./src/Card.astro";
+export { default as Checkbox } from "./src/Checkbox.astro";
+export { default as Code } from "./src/Code.astro";
+export { default as Container } from "./src/Container.astro";
+export { default as DecoratedBox } from "./src/DecoratedBox.astro";
+export { default as Em } from "./src/Em.astro";
+export { default as Flex } from "./src/Flex.astro";
+export { default as Grid } from "./src/Grid.astro";
+export { default as Heading } from "./src/Heading.astro";
+export { default as InputControl } from "./src/InputControl.astro";
+export { default as InputField } from "./src/InputField.astro";
+export { default as InputSlot } from "./src/InputSlot.astro";
+export { default as Kbd } from "./src/Kbd.astro";
+export { default as Link } from "./src/Link.astro";
+export { default as Panel } from "./src/Panel.astro";
+export { default as Progress } from "./src/Progress.astro";
+export { default as Quote } from "./src/Quote.astro";
+export { default as RadioCards } from "./src/RadioCards.astro";
+export { default as RadioCardsItem } from "./src/RadioCardsItem.astro";
+export { default as RadioGroup } from "./src/RadioGroup.astro";
+export { default as RadioGroupItem } from "./src/RadioGroupItem.astro";
+export { default as Section } from "./src/Section.astro";
+export { default as SegmentedControl } from "./src/SegmentedControl.astro";
+export { default as Separator } from "./src/Separator.astro";
+export { default as Skeleton } from "./src/Skeleton.astro";
+export { default as Spinner } from "./src/Spinner.astro";
+export { default as Strong } from "./src/Strong.astro";
+export { default as Switch } from "./src/Switch.astro";
+export { default as Tabs } from "./src/Tabs.astro";
+export { default as TabsContent } from "./src/TabsContent.astro";
+export { default as TabsIndicator } from "./src/TabsIndicator.astro";
+export { default as TabsList } from "./src/TabsList.astro";
+export { default as TabsTrigger } from "./src/TabsTrigger.astro";
+export { default as Text } from "./src/Text.astro";
+export { default as TextArea } from "./src/TextArea.astro";
+export { default as TextField } from "./src/TextField.astro";
+export { default as VisuallyHidden } from "./src/VisuallyHidden.astro";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elysn/astro",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Elysn Astro components",
   "keywords": [
     "astro-component"
@@ -24,16 +24,32 @@
       "default": "./index.ts"
     }
   },
+  "dependencies": {
+    "@zag-js/checkbox": "1.47.0",
+    "@zag-js/color-picker": "1.47.0",
+    "@zag-js/dialog": "1.47.0",
+    "@zag-js/menu": "1.47.0",
+    "@zag-js/popover": "1.47.0",
+    "@zag-js/radio-group": "1.47.0",
+    "@zag-js/scroll-area": "1.47.0",
+    "@zag-js/select": "1.47.0",
+    "@zag-js/slider": "1.47.0",
+    "@zag-js/switch": "1.47.0",
+    "@zag-js/tabs": "1.47.0",
+    "@zag-js/tooltip": "1.47.0",
+    "@zag-js/vanilla": "1.47.0"
+  },
   "devDependencies": {
-    "@elysn/theme": "0.0.6",
-    "astro": "^7.3.1",
-    "typescript": "7.0.2"
+    "@astrojs/check": "^0.9.12",
+    "@elysn/theme": "0.0.7",
+    "astro": "^7.4.10",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "@elysn/theme": ">=0.0.6 <0.1.0",
     "astro": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit"
+    "typecheck": "astro check"
   }
 }

package/src/AccessibleIcon.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {
+  className?: string;
+  label: string;
+}
+const { className, label, ...rest } = Astro.props as Props;
+---
+
+<span {...rest} class:list={["el-AccessibleIcon", className]}>
+  <span aria-hidden="true"><slot /></span>
+  <span class="el-VisuallyHidden">{label}</span>
+</span>

package/src/AspectRatio.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"div">, "style"> {
+  className?: string;
+  ratio?: number;
+  style?: Record<string, string | number>;
+}
+const { className, ratio = 1, style, ...rest } = Astro.props as Props;
+---
+
+<div {...rest} class:list={["el-AspectRatio", className]} style={{ "--aspect-ratio": ratio, ...style }}>
+  <slot />
+</div>

package/src/Avatar.astro

@@ -0,0 +1,54 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color"> {
+  alt?: string;
+  className?: string;
+  color?: string;
+  highContrast?: boolean;
+  radius?: "none" | "small" | "medium" | "large" | "full";
+  size?: Size;
+  src?: string;
+  variant?: "solid" | "soft" | "surface";
+}
+const {
+  alt,
+  className,
+  color,
+  highContrast,
+  radius,
+  size = "md",
+  src,
+  variant = "soft",
+  ...rest
+} = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Avatar-size-xs",
+  sm: "el-Avatar-size-sm",
+  md: "el-Avatar-size-md",
+  lg: "el-Avatar-size-lg",
+  xl: "el-Avatar-size-xl",
+};
+---
+
+<div
+  {...rest}
+  data-accent-color={color}
+  data-high-contrast={highContrast ? true : undefined}
+  data-radius={radius}
+  data-variant={variant}
+  class:list={["el-Avatar", sizes[size], className]}
+>
+  {
+    src ? (
+      <img class="el-Avatar-image" src={src} alt={alt} />
+    ) : (
+      <span class="el-Avatar-fallback">
+        <slot />
+      </span>
+    )
+  }
+</div>

package/src/Badge.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Size = "xs" | "sm" | "md" | "lg";
+
+interface Props extends Omit<HTMLAttributes<"span">, "color"> {
+  className?: string;
+  color?: string;
+  highContrast?: boolean;
+  radius?: "none" | "small" | "medium" | "large" | "full";
+  size?: Size;
+  variant?: "solid" | "soft" | "surface" | "outline";
+}
+const { className, color, highContrast, radius, size = "sm", variant = "soft", ...rest } =
+  Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Badge-size-xs",
+  sm: "el-Badge-size-sm",
+  md: "el-Badge-size-md",
+  lg: "el-Badge-size-lg",
+};
+---
+
+<span
+  {...rest}
+  data-accent-color={color}
+  data-high-contrast={highContrast ? true : undefined}
+  data-radius={radius}
+  data-variant={variant}
+  class:list={["el-Badge", sizes[size], className]}
+>
+  <slot />
+</span>

package/src/Blockquote.astro

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

package/src/Box.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"div">, "color"> {
+  className?: string;
+  color?: string;
+}
+const { className, color, ...rest } = Astro.props as Props;
+---
+
+<div {...rest} data-accent-color={color} class:list={["el-Box", className]}>
+  <slot />
+</div>

package/src/Button.astro

@@ -38,11 +38,11 @@ const Tag = href ? "a" : "button";
 <Tag
   {...rest}
   href={href}
-  data-disabled={disabled ?? undefined}
+  data-disabled={disabled || undefined}
   data-accent-color={color}
   data-radius={radius}
   data-variant={variant}
-  data-high-contrast={highContrast ?? undefined}
+  data-high-contrast={highContrast ? true : undefined}
   class:list={["el-BaseButton", "el-Button", sizes[size], className]}
   disabled={href ? undefined : disabled}
 >

package/src/Callout.astro

@@ -0,0 +1,34 @@
+---
+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;
+  radius?: "none" | "small" | "medium" | "large" | "full";
+  size?: Size;
+  variant?: "soft" | "surface" | "outline";
+}
+const { className, color, highContrast, radius, size = "md", variant = "soft", ...rest } =
+  Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Callout-size-xs",
+  sm: "el-Callout-size-sm",
+  md: "el-Callout-size-md",
+  lg: "el-Callout-size-lg",
+};
+---
+
+<div
+  {...rest}
+  data-accent-color={color}
+  data-high-contrast={highContrast ? true : undefined}
+  data-radius={radius}
+  data-variant={variant}
+  class:list={["el-Callout", sizes[size], className]}
+>
+  <slot />
+</div>

package/src/CalloutIcon.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-Callout-icon", className]}>
+  <slot />
+</div>

package/src/CalloutText.astro

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

package/src/Card.astro

@@ -0,0 +1,30 @@
+---
+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;
+  variant?: "surface" | "ghost";
+}
+const { className, color, size = "xs", variant = "surface", ...rest } = Astro.props as Props;
+
+const sizes: Record<Size, string> = {
+  xs: "el-Card-size-xs",
+  sm: "el-Card-size-sm",
+  md: "el-Card-size-md",
+  lg: "el-Card-size-lg",
+  xl: "el-Card-size-xl",
+};
+---
+
+<div
+  {...rest}
+  data-accent-color={color}
+  data-variant={variant}
+  class:list={["el-BaseCard", "el-Card", sizes[size], className]}
+>
+  <slot />
+</div>

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>