@pindoba/astro-theme-mode-select 0.0.0-alpha-20241003230712

package/README.md

@@ -0,0 +1,35 @@
+# Astro Starter Kit: Component Package
+
+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
+
+```sh
+npm create astro@latest -- --template component
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── index.ts
+├── src
+│   └── MyComponent.astro
+├── tsconfig.json
+├── package.json
+```
+
+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command       | Action                                                                                                                                                                                                                           |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `npm link`    | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components                                                                                                               |
+| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |

package/index.ts

@@ -0,0 +1,6 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+import Component from "./src/theme-mode-select.astro";
+
+export default Component;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pindoba/astro-theme-mode-select",
+  "version": "0.0.0-alpha-20241003230712",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./script": "./src/script.astro"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.7",
+    "astro": "^4.15.11",
+    "unplugin-icons": "^0.19.3"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.3",
+    "@types/sanitize-html": "^2.13.0",
+    "astro-icon": "^1.1.1",
+    "typescript": "^5.6.2",
+    "@pindoba/astro-button": "0.0.0-alpha-20241003230712",
+    "@pindoba/astro-group": "0.0.0-alpha-20241003230712",
+    "@pindoba/astro-radio": "0.0.0-alpha-20241003230712",
+    "@pindoba/astro-popover": "0.0.0-alpha-20241003230712",
+    "@pindoba/panda": "0.0.0-alpha-20241003230712",
+    "@pindoba/styles": "0.0.0-alpha-20241003230712",
+    "@pindoba/utils": "0.0.0-alpha-20241003230712"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix --max-warnings 0",
+    "format": "prettier --write .",
+    "format:fix": "prettier --write .",
+    "check": "astro check",
+    "dev": "astro check --watch",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .astro"
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />

package/src/script.astro

@@ -0,0 +1,14 @@
+<script is:inline>
+  const systemThemeMode = window.matchMedia("(prefers-color-scheme: dark)")
+    .matches
+    ? "dark"
+    : "light";
+
+  const currentThemeMode = localStorage.getItem("theme-mode") || "system";
+
+  const theme =
+    currentThemeMode === "system" ? systemThemeMode : currentThemeMode;
+
+  document.documentElement.setAttribute("data-theme-mode", theme);
+  document.documentElement.style.colorScheme = theme;
+</script>

package/src/theme-mode-select.astro

@@ -0,0 +1,201 @@
+---
+import Group from "@pindoba/astro-group";
+import Radio from "@pindoba/astro-radio";
+import Button from "@pindoba/astro-button";
+import Popover from "@pindoba/astro-popover";
+import { css } from "@pindoba/panda/css";
+import { visuallyHidden } from "@pindoba/panda/patterns";
+import LucideSunMoon from "~icons/lucide/sun-moon?raw";
+import LucideSun from "~icons/lucide/sun?raw";
+import LucideMoon from "~icons/lucide/moon?raw";
+
+import { escapeSVG } from "@pindoba/utils/escapeSVG";
+
+interface Props {
+  id?: string;
+}
+
+const { id = "theme-mode" }: Props = Astro.props;
+---
+
+<script>
+  import { usePopover } from "@pindoba/astro-popover";
+  type ThemeMode = "system" | "dark" | "light";
+  class PindobaThemeModeSelect extends HTMLDivElement {
+    constructor() {
+      super();
+
+      const trigger = document.getElementById(`${this.id}-dialog-trigger`);
+      const radios = document.querySelectorAll<HTMLInputElement>(
+        `#${this.id}-system-radio[name="theme-mode"], #${this.id}-dark-radio[name="theme-mode"], #${this.id}-light-radio[name="theme-mode"]`,
+      );
+
+      let currentThemeMode: ThemeMode =
+        (localStorage.getItem("theme-mode") as ThemeMode) || "system";
+
+      const mediaMatcher = window.matchMedia("(prefers-color-scheme: dark)");
+      let systemThemeMode: ThemeMode = mediaMatcher.matches ? "dark" : "light";
+
+      const isThemeMode = (themeMode: string): themeMode is ThemeMode =>
+        ["system", "dark", "light"].includes(themeMode);
+
+      const applyThemeMode = (themeMode: ThemeMode) => {
+        if (isThemeMode(themeMode)) {
+          const mode = themeMode === "system" ? systemThemeMode : themeMode;
+
+          document.documentElement.setAttribute("data-theme-mode", mode);
+          localStorage.setItem("theme-mode", themeMode);
+
+          if (currentThemeMode !== "system") {
+            const radio = document.querySelector<HTMLInputElement>(
+              `#${this.id}-${themeMode}-radio[name="theme-mode"]`,
+            );
+            if (radio) radio.checked = true;
+          }
+
+          trigger?.setAttribute(
+            "aria-label",
+            `Change theme mode; The current theme mode is ${mode}`,
+          );
+        }
+      };
+
+      mediaMatcher.addEventListener("change", (event) => {
+        systemThemeMode = event.matches ? "dark" : "light";
+
+        if (currentThemeMode === "system") {
+          applyThemeMode(systemThemeMode);
+        }
+      });
+
+      radios.forEach((radio) => {
+        if (radio.id === currentThemeMode) {
+          radio.checked = true;
+        }
+
+        radio.addEventListener("change", (event) => {
+          const target = event.target as HTMLInputElement;
+          const themeMode = target.value as ThemeMode;
+          currentThemeMode = themeMode;
+          applyThemeMode(themeMode);
+        });
+      });
+
+      // Check if theme mode is stored in local storage
+      const storedThemeMode = localStorage.getItem("theme-mode");
+      if (storedThemeMode && isThemeMode(storedThemeMode)) {
+        applyThemeMode(storedThemeMode);
+      }
+
+      usePopover({
+        id: `${this.id}-dialog`,
+        trigger: trigger,
+        onOpen: () => {
+          const themeMode: ThemeMode =
+            (localStorage.getItem("theme-mode") as ThemeMode) || "system";
+
+          const radio = document.querySelector<HTMLInputElement>(
+            `#${this.id}-${themeMode}-radio[name="theme-mode"]`,
+          );
+          radio?.focus();
+          if (radio) {
+            radio.checked = true;
+          }
+        },
+      });
+    }
+  }
+
+  if (!customElements.get("pindoba-theme-mode-select")) {
+    customElements.define("pindoba-theme-mode-select", PindobaThemeModeSelect, {
+      extends: "div",
+    });
+  }
+</script>
+<div is="pindoba-theme-mode-select" id={id}>
+  <Button id=`${id}-dialog-trigger` size="md" emphasis="ghost">
+    <span
+      id=`${id}-trigger-dark-icon`
+      set:html={escapeSVG(String(LucideSun))}
+      class={css({
+        display: "none",
+        "html[data-theme-mode='dark'] &": {
+          display: "block",
+        },
+      })}
+    />
+    <span
+      id={`${id}-trigger-light-icon`}
+      set:html={escapeSVG(String(LucideMoon))}
+      class={css({
+        display: "none",
+        "html[data-theme-mode='light'] &": {
+          display: "block",
+        },
+      })}
+    />
+  </Button>
+
+  <Popover
+    id={`${id}-dialog`}
+    class={css({
+      width: "fit-content !important",
+    })}
+    showCloseButton={false}
+  >
+    <fieldset>
+      <legend class={visuallyHidden()}>Select a theme mode</legend>
+      <Group direction="vertical">
+        <Radio
+          appearance="button"
+          id={`${id}-system-radio`}
+          value={"system"}
+          name="theme-mode"
+        >
+          <div
+            class={css({
+              display: "flex",
+              alignItems: "center",
+              gap: "xs",
+              flexDirection: "row",
+            })}
+          >
+            <Fragment set:html={escapeSVG(String(LucideSunMoon))} /> System
+          </div></Radio
+        >
+        <Radio
+          appearance="button"
+          id=`${id}-dark-radio`
+          value={"dark"}
+          name="theme-mode"
+          ><div
+            class={css({
+              display: "flex",
+              alignItems: "center",
+              gap: "xs",
+              flexDirection: "row",
+            })}
+          >
+            <Fragment set:html={escapeSVG(String(LucideSun))} /> Dark
+          </div></Radio
+        >
+        <Radio
+          appearance="button"
+          id=`${id}-light-radio`
+          value={"light"}
+          name="theme-mode"
+          ><div
+            class={css({
+              display: "flex",
+              alignItems: "center",
+              gap: "xs",
+              flexDirection: "row",
+            })}
+          >
+            <Fragment set:html={escapeSVG(String(LucideMoon))} /> Light
+          </div></Radio
+        >
+      </Group>
+    </fieldset>
+  </Popover>
+</div>