ThemeMenu

/**
 * ThemeMenu fixture. The picker's catalogue itself lives in
 * `@grassroot/ui-core`'s `THEME_GROUPS` (one shared list for all five
 * adapters), so what this fixture pins is the demo's own configuration plus
 * the tier headings that catalogue must render, as plain strings — the demo
 * must never depend on whatever theme the surrounding page happens to be
 * showing.
 *
 * `storageKey` is deliberately demo-scoped so mounting five pickers in the
 * catalogue can never fight the page's own theme switcher for one key.
 */
const themeMenuFixture = {
  id: "theme-menu",
  align: "end",
  storageKey: "grassroot-demo-theme-menu",
  defaultOption: "neobrutalist",
  options: [
    "Brand",
    "Basics",
    "Safe",
    "Premium",
    "Editor classics",
    "Distinctive",
    "Loud",
    "Zany",
    "Unhinged",
    "Accessible",
  ],
} satisfies {
  id: string;
  align: "start" | "end";
  storageKey: string;
  defaultOption: string;
  options: readonly string[];
};
 
import { ThemeMenu } from "@grassroot/ui-react";
 
export default function ThemeMenuDemo() {
  return (
    <div>
      <ThemeMenu align={themeMenuFixture.align} storageKey={themeMenuFixture.storageKey} />
    </div>
  );
}

<script setup lang="ts">
/**
 * ThemeMenu fixture. The picker's catalogue itself lives in
 * `@grassroot/ui-core`'s `THEME_GROUPS` (one shared list for all five
 * adapters), so what this fixture pins is the demo's own configuration plus
 * the tier headings that catalogue must render, as plain strings — the demo
 * must never depend on whatever theme the surrounding page happens to be
 * showing.
 *
 * `storageKey` is deliberately demo-scoped so mounting five pickers in the
 * catalogue can never fight the page's own theme switcher for one key.
 */
const themeMenuFixture = {
  id: "theme-menu",
  align: "end",
  storageKey: "grassroot-demo-theme-menu",
  defaultOption: "neobrutalist",
  options: [
    "Brand",
    "Basics",
    "Safe",
    "Premium",
    "Editor classics",
    "Distinctive",
    "Loud",
    "Zany",
    "Unhinged",
    "Accessible",
  ],
} satisfies {
  id: string;
  align: "start" | "end";
  storageKey: string;
  defaultOption: string;
  options: readonly string[];
};
 
import { ThemeMenu } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <ThemeMenu :align="themeMenuFixture.align" :storage-key="themeMenuFixture.storageKey" />
  </div>
</template>

import { Component } from "@angular/core";
/**
 * ThemeMenu fixture. The picker's catalogue itself lives in
 * `@grassroot/ui-core`'s `THEME_GROUPS` (one shared list for all five
 * adapters), so what this fixture pins is the demo's own configuration plus
 * the tier headings that catalogue must render, as plain strings — the demo
 * must never depend on whatever theme the surrounding page happens to be
 * showing.
 *
 * `storageKey` is deliberately demo-scoped so mounting five pickers in the
 * catalogue can never fight the page's own theme switcher for one key.
 */
const themeMenuFixture = {
  id: "theme-menu",
  align: "end",
  storageKey: "grassroot-demo-theme-menu",
  defaultOption: "neobrutalist",
  options: [
    "Brand",
    "Basics",
    "Safe",
    "Premium",
    "Editor classics",
    "Distinctive",
    "Loud",
    "Zany",
    "Unhinged",
    "Accessible",
  ],
} satisfies {
  id: string;
  align: "start" | "end";
  storageKey: string;
  defaultOption: string;
  options: readonly string[];
};
 
import { GrassrootThemeMenu } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-theme-menu-demo",
  standalone: true,
  imports: [GrassrootThemeMenu],
  template: `
    <div>
      <grassroot-theme-menu [align]="fixture.align" [storageKey]="fixture.storageKey" />
    </div>
  `,
})
export class ThemeMenuDemoComponent {
  protected readonly fixture = themeMenuFixture;
}
 
export default ThemeMenuDemoComponent;

<script lang="ts">
  import { ThemeMenu } from "@grassroot/ui-svelte";
  /**
   * ThemeMenu fixture. The picker's catalogue itself lives in
   * `@grassroot/ui-core`'s `THEME_GROUPS` (one shared list for all five
   * adapters), so what this fixture pins is the demo's own configuration plus
   * the tier headings that catalogue must render, as plain strings — the demo
   * must never depend on whatever theme the surrounding page happens to be
   * showing.
   *
   * `storageKey` is deliberately demo-scoped so mounting five pickers in the
   * catalogue can never fight the page's own theme switcher for one key.
   */
  const themeMenuFixture = {
    id: "theme-menu",
    align: "end",
    storageKey: "grassroot-demo-theme-menu",
    defaultOption: "neobrutalist",
    options: [
      "Brand",
      "Basics",
      "Safe",
      "Premium",
      "Editor classics",
      "Distinctive",
      "Loud",
      "Zany",
      "Unhinged",
      "Accessible",
    ],
  } satisfies {
    id: string;
    align: "start" | "end";
    storageKey: string;
    defaultOption: string;
    options: readonly string[];
  };
 
  </script>
 
<div>
  <ThemeMenu align={themeMenuFixture.align} storageKey={themeMenuFixture.storageKey} />
</div>

/** @jsxImportSource solid-js */
import { ThemeMenu } from "@grassroot/ui-solid";
/**
 * ThemeMenu fixture. The picker's catalogue itself lives in
 * `@grassroot/ui-core`'s `THEME_GROUPS` (one shared list for all five
 * adapters), so what this fixture pins is the demo's own configuration plus
 * the tier headings that catalogue must render, as plain strings — the demo
 * must never depend on whatever theme the surrounding page happens to be
 * showing.
 *
 * `storageKey` is deliberately demo-scoped so mounting five pickers in the
 * catalogue can never fight the page's own theme switcher for one key.
 */
const themeMenuFixture = {
  id: "theme-menu",
  align: "end",
  storageKey: "grassroot-demo-theme-menu",
  defaultOption: "neobrutalist",
  options: [
    "Brand",
    "Basics",
    "Safe",
    "Premium",
    "Editor classics",
    "Distinctive",
    "Loud",
    "Zany",
    "Unhinged",
    "Accessible",
  ],
} satisfies {
  id: string;
  align: "start" | "end";
  storageKey: string;
  defaultOption: string;
  options: readonly string[];
};
 
export default function ThemeMenuDemo() {
  return (
    <div>
      <ThemeMenu align={themeMenuFixture.align} storageKey={themeMenuFixture.storageKey} />
    </div>
  );
}