@cfasim-ui/components 0.1.0

package/src/Expander/Expander.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import {
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "reka-ui";
+
+const open = defineModel<boolean>("open", { default: false });
+
+defineProps<{
+  label: string;
+}>();
+</script>
+
+<template>
+  <CollapsibleRoot v-model:open="open" class="expander">
+    <CollapsibleTrigger class="expander-trigger">
+      <span class="expander-caret" :class="{ open }" />
+      {{ label }}
+    </CollapsibleTrigger>
+    <CollapsibleContent class="expander-content">
+      <slot />
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>
+
+<style scoped>
+.expander-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  width: 100%;
+  padding: 0.5em 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+}
+
+.expander-trigger:hover {
+  color: var(--color-text);
+}
+
+.expander-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 0.35em solid currentColor;
+  border-top: 0.3em solid transparent;
+  border-bottom: 0.3em solid transparent;
+  transition: transform 0.15s;
+}
+
+.expander-caret.open {
+  transform: rotate(90deg);
+}
+
+.expander-content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75em;
+}
+
+.expander-content[data-state="open"] {
+  animation: slideDown 200ms ease-out;
+}
+
+.expander-content[data-state="closed"] {
+  animation: slideUp 200ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+</style>

package/src/Hint/Hint.md

@@ -0,0 +1,24 @@
+# Hint
+
+An info icon that shows a tooltip on hover. Used alongside form labels to provide additional context.
+
+## Examples
+
+<ComponentDemo>
+  <span style="display: flex; align-items: center; gap: 8px;">
+    Population size <Hint text="The total number of individuals in the simulation." />
+  </span>
+
+<template #code>
+
+```vue
+<span style="display: flex; align-items: center; gap: 8px;">
+  Population size
+  <Hint text="The total number of individuals in the simulation." />
+</span>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/hint.md-->

package/src/Hint/Hint.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+test("Hint page renders demos", async ({ page }) => {
+  await page.goto("/cfa-simulator/cfasim-ui/components/hint");
+  await expect(page.locator("h1")).toBeVisible();
+  const demos = page.locator(".demo-preview");
+  await expect(demos.first()).toBeVisible();
+  await expect(demos.first().getByText("Population size")).toBeVisible();
+  await expect(
+    demos.first().getByRole("button", { name: "More info" }),
+  ).toBeVisible();
+});

package/src/Hint/Hint.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Hint from "./Hint.vue";
+
+describe("Hint", () => {
+  it("renders a trigger button with help icon", () => {
+    const wrapper = mount(Hint, {
+      props: { text: "Some hint text" },
+    });
+
+    const button = wrapper.find(".HintTrigger");
+    expect(button.exists()).toBe(true);
+    expect(button.attributes("aria-label")).toBe("More info");
+    expect(button.attributes("type")).toBe("button");
+  });
+
+  it("renders the help icon inside the trigger", () => {
+    const wrapper = mount(Hint, {
+      props: { text: "Some hint text" },
+    });
+
+    const icon = wrapper.find(".HintTrigger .Icon");
+    expect(icon.exists()).toBe(true);
+    expect(icon.text()).toBe("help");
+  });
+
+  it("does not show tooltip content by default", () => {
+    const wrapper = mount(Hint, {
+      props: { text: "Hidden until hover" },
+    });
+
+    expect(wrapper.text()).not.toContain("Hidden until hover");
+  });
+});

package/src/Hint/Hint.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from "reka-ui";
+import Icon from "../Icon/Icon.vue";
+
+defineProps<{
+  text: string;
+}>();
+</script>
+
+<template>
+  <TooltipProvider>
+    <TooltipRoot :delay-duration="0" disable-closing-trigger>
+      <TooltipTrigger as-child>
+        <button
+          type="button"
+          class="HintTrigger"
+          aria-label="More info"
+          @pointerdown.prevent
+        >
+          <Icon icon="help" :size="16" />
+        </button>
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent class="HintContent" side="top" :side-offset="4">
+          {{ text }}
+          <TooltipArrow class="HintArrow" :width="10" :height="5" />
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>
+
+<style scoped>
+.HintTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25em;
+  height: 1.25em;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.HintTrigger:hover {
+  color: var(--color-text);
+}
+
+.HintTrigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+</style>
+
+<style>
+.HintContent {
+  max-width: 15rem;
+  padding: 0.5em 0.75em;
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+  color: var(--color-bg-0);
+  background-color: var(--color-text);
+  border-radius: 0.25em;
+  box-shadow: var(--shadow-md);
+  z-index: 100;
+}
+
+.HintArrow {
+  fill: var(--color-text);
+}
+</style>

package/src/Icon/Icon.md

@@ -0,0 +1,55 @@
+# Icon
+
+Renders a [Material Symbols Outlined](https://fonts.google.com/icons) icon.
+
+## Examples
+
+### Sizes
+
+<ComponentDemo>
+  <Icon icon="help" size="sm" aria-label="help" />
+  <Icon icon="help" size="md" aria-label="help" />
+  <Icon icon="help" size="lg" aria-label="help" />
+
+<template #code>
+
+```vue
+<Icon icon="help" size="sm" aria-label="help" />
+<Icon icon="help" size="md" aria-label="help" />
+<Icon icon="help" size="lg" aria-label="help" />
+```
+
+  </template>
+</ComponentDemo>
+
+### Filled
+
+<ComponentDemo>
+  <Icon icon="favorite" size="lg" aria-label="favorite" />
+  <Icon icon="favorite" size="lg" :fill="true" aria-label="favorite filled" />
+
+<template #code>
+
+```vue
+<Icon icon="favorite" size="lg" aria-label="favorite" />
+<Icon icon="favorite" size="lg" :fill="true" aria-label="favorite filled" />
+```
+
+  </template>
+</ComponentDemo>
+
+### Inline in text
+
+<ComponentDemo>
+  <p style="margin: 0">Click the <Icon icon="help" size="sm" :inline="true" aria-label="help" /> icon for more info.</p>
+
+<template #code>
+
+```vue
+<p>Click the <Icon icon="help" size="sm" :inline="true" aria-label="help" /> icon for more info.</p>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/icon.md-->

package/src/Icon/Icon.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("Icon page renders demos", async ({ page }) => {
+  await page.goto("/cfa-simulator/cfasim-ui/components/icon");
+  await expect(page.locator("h1")).toBeVisible();
+  const demos = page.locator(".demo-preview");
+  await expect(demos.first()).toBeVisible();
+  await expect(demos.first().locator(".Icon")).toHaveCount(3);
+});

package/src/Icon/Icon.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { CSSProperties } from "vue";
+import { computed } from "vue";
+
+export type IconSize = "sm" | "md" | "lg" | "xl";
+
+interface Props {
+  icon: string;
+  size?: IconSize | number;
+  fill?: boolean;
+  weight?: number;
+  grade?: number;
+  decorative?: boolean;
+  ariaLabel?: string;
+  inline?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "md",
+  fill: false,
+  decorative: true,
+  inline: false,
+});
+
+const sizePreset = computed(() =>
+  typeof props.size === "string" ? props.size : undefined,
+);
+const numericSize = computed(() =>
+  typeof props.size === "number" ? props.size : undefined,
+);
+
+const inlineStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  if (numericSize.value !== undefined) {
+    style.fontSize = `${numericSize.value}px`;
+    (style as Record<string, unknown>)["--icon-opsz"] = numericSize.value;
+  }
+  if (props.weight !== undefined) {
+    (style as Record<string, unknown>)["--icon-weight"] = props.weight;
+  }
+  if (props.grade !== undefined) {
+    (style as Record<string, unknown>)["--icon-grade"] = props.grade;
+  }
+  return style;
+});
+</script>
+
+<template>
+  <span
+    class="Icon"
+    :data-size="sizePreset"
+    :data-fill="fill ? 'true' : undefined"
+    :data-inline="inline ? 'true' : undefined"
+    :style="inlineStyle"
+    :aria-hidden="decorative ? true : undefined"
+    :aria-label="decorative ? undefined : ariaLabel"
+    :role="decorative ? undefined : 'img'"
+    >{{ icon }}</span
+  >
+</template>
+
+<style>
+.Icon {
+  font-family: "Material Symbols Outlined", sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings:
+    "FILL" var(--icon-fill, 0),
+    "wght" var(--icon-weight, 400),
+    "GRAD" var(--icon-grade, 0),
+    "opsz" var(--icon-opsz, 24);
+  color: inherit;
+}
+
+.Icon[data-size="sm"] {
+  font-size: 20px;
+  --icon-opsz: 20;
+}
+.Icon[data-size="md"] {
+  font-size: 24px;
+  --icon-opsz: 24;
+}
+.Icon[data-size="lg"] {
+  font-size: 28px;
+  --icon-opsz: 28;
+}
+.Icon[data-size="xl"] {
+  font-size: 32px;
+  --icon-opsz: 32;
+}
+
+.Icon[data-fill="true"] {
+  --icon-fill: 1;
+}
+
+.Icon[data-inline="true"] {
+  font-size: inherit;
+  vertical-align: middle;
+  transform: scale(1.2) translateY(-0.05em);
+  transform-origin: 50% 50%;
+}
+</style>

package/src/NumberInput/NumberInput.md

@@ -0,0 +1,169 @@
+# NumberInput
+
+A number input field with optional slider, percent mode, and validation.
+
+## Examples
+
+### Basic
+
+<script setup>
+import { ref } from 'vue'
+const days = ref(10)
+const population = ref(100000)
+const coverage = ref(0.5)
+const r0 = ref(3.5)
+</script>
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput v-model="days" label="Days" placeholder="Number of days" />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const days = ref(10);
+</script>
+
+<NumberInput v-model="days" label="Days" placeholder="Number of days" />
+```
+
+  </template>
+</ComponentDemo>
+
+### With hint and validation
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput
+      v-model="population"
+      label="Population"
+      hint="Total number of individuals"
+      :min="1000"
+      :max="100000"
+      :step="1"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput
+  v-model="population"
+  label="Population"
+  hint="Total number of individuals"
+  :min="1000"
+  :max="100000"
+  :step="1"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Percent mode
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput
+      v-model="coverage"
+      label="Vaccination coverage"
+      percent
+      :max="1"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput v-model="coverage" label="Vaccination coverage" percent :max="1" />
+```
+
+  </template>
+</ComponentDemo>
+
+### Slider
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput
+      v-model="r0"
+      label="R0"
+      hint="Basic reproduction number"
+      :step="0.1"
+      :min="1"
+      :max="18"
+      slider
+    />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput
+  v-model="r0"
+  label="R0"
+  hint="Basic reproduction number"
+  :step="0.1"
+  :min="1"
+  :max="18"
+  slider
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Live slider
+
+With `live`, the model updates while dragging the slider thumb rather than only on release.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput
+      v-model="coverage"
+      label="Vaccination coverage"
+      percent
+      slider
+      live
+      :max="1"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput
+  v-model="coverage"
+  label="Vaccination coverage"
+  percent
+  slider
+  live
+  :max="1"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Live input
+
+With `live` on a regular input, the model updates as you type (debounced 300ms). Arrow keys and spinner buttons commit immediately.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput v-model="days" label="Days" live />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput v-model="days" label="Days" live />
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/number-input.md-->

package/src/NumberInput/NumberInput.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from "@playwright/test";
+
+test("NumberInput page renders demos", async ({ page }) => {
+  await page.goto("/cfa-simulator/cfasim-ui/components/number-input");
+  await expect(page.locator("h1")).toBeVisible();
+  const demos = page.locator(".demo-preview");
+  await expect(demos.first()).toBeVisible();
+  await expect(demos.first().getByText("Days")).toBeVisible();
+  await expect(demos.first().locator('input[type="number"]')).toBeVisible();
+});