Control styles

import { useState, type CSSProperties, type Dispatch, type SetStateAction, type ReactElement } from "react";
import { Select } from "@bosunkit/components/select";
import { Stack } from "@bosunkit/components/stack";
import { Text } from "@bosunkit/components/text";
import { PresentationScope } from "@bosunkit/provider";
import { THEMES, type Theme } from "@bosunkit/tokens/theme";
import "./example.css";

export const description: string =
  "Choose a control style and theme to inspect its token pairs in every interaction state.";
const STYLES: readonly string[] = [
  "normal",
  "flat",
  "raised",
  "indent",
  "selected",
  "amplified",
  "thumb",
  "notification",
  "integration-normal",
  "integration-flat",
  "integration-selected",
  "integration-indent",
];
const STATES: readonly string[] = ["enabled", "hover", "pressed", "activated", "focused", "disabled"];

export default function Example(): ReactElement {
  const [family, setFamily]: [string, Dispatch<SetStateAction<string>>] = useState<string>("raised");
  const [theme, setTheme]: [Theme | "inherit", Dispatch<SetStateAction<Theme | "inherit">>] = useState<
    Theme | "inherit"
  >("inherit");
  const foreground: string = family.endsWith("selected")
    ? "bk-control-selected-text"
    : family === "notification"
      ? "bk-control-notification-text"
      : family.startsWith("integration-")
        ? `integration-on-${family.slice(12)}-active-color`
        : `on-${family}-active-color`;
  return (
    <Stack space="lg">
      <div className="foundation-control-options">
        <Select.Root value={family} onValueChange={(next: string | null): void => { (setFamily)(next ?? ""); }}>
          <Select.Trigger aria-label="Control style">
            <Select.Value />
          </Select.Trigger>
          <Select.Portal><Select.Positioner alignItemWithTrigger={true} ><Select.Popup ><Select.List>
            {STYLES.map((name: string): ReactElement => (
              <Select.Item key={name} value={name}>
                {name}
              </Select.Item>
            ))}
          </Select.List></Select.Popup></Select.Positioner></Select.Portal>
        </Select.Root>
        <Select.Root
          value={theme}
          onValueChange={(next: string | null): void => { ((value: string): void => {
            if (value === "inherit" || THEMES.includes(value as Theme)) setTheme(value as Theme | "inherit");
          })(next ?? ""); }}
        >
          <Select.Trigger aria-label="Specimen theme">
            <Select.Value />
          </Select.Trigger>
          <Select.Portal><Select.Positioner alignItemWithTrigger={true} ><Select.Popup ><Select.List>
            <Select.Item value="inherit">Page theme</Select.Item>
            {THEMES.map((name: Theme): ReactElement => (
              <Select.Item key={name} value={name}>
                {name}
              </Select.Item>
            ))}
          </Select.List></Select.Popup></Select.Positioner></Select.Portal>
        </Select.Root>
      </div>
      <PresentationScope theme={theme === "inherit" ? undefined : theme}>
        <div className="foundation-control-grid" aria-label="Control token specimens">
          {STATES.map((state: string): ReactElement => {
            const ink: string = state === "disabled" ? "text-dim" : foreground;
            const style: CSSProperties = {
              background: `var(--${family}-${state}-background-color)`,
              borderColor: `var(--${family}-${state}-border-color)`,
              color: `var(--${ink})`,
              outline: state === "focused" ? "var(--bk-focus-width) solid var(--bk-focus-ring)" : undefined,
            };
            return (
              <figure key={state} className="foundation-control-cell">
                <div className="foundation-control-swatch" style={style}>
                  Aa
                </div>
                <figcaption>
                  {state}
                  <code>
                    --{family}-{state}-…
                  </code>
                </figcaption>
              </figure>
            );
          })}
        </div>
      </PresentationScope>
      <Text variant="caption" color="text-dim">
        These are token swatches, not disabled or focusable controls. Try real controls on the Interaction states page.
      </Text>
    </Stack>
  );
}