@cfasim-ui/components 0.1.0

package/src/SelectBox/SelectBox.md

@@ -0,0 +1,56 @@
+# SelectBox
+
+A dropdown select built on reka-ui.
+
+## Examples
+
+<script setup>
+import { ref } from 'vue'
+const interval = ref('weekly')
+</script>
+
+<ComponentDemo>
+  <div style="width: 200px">
+    <SelectBox
+      v-model="interval"
+      label="Interval"
+      :options="[
+        { value: 'daily', label: 'Daily' },
+        { value: 'weekly', label: 'Weekly' },
+        { value: 'monthly', label: 'Monthly' },
+      ]"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const interval = ref("weekly");
+</script>
+
+<SelectBox
+  v-model="interval"
+  label="Interval"
+  :options="[
+    { value: 'daily', label: 'Daily' },
+    { value: 'weekly', label: 'Weekly' },
+    { value: 'monthly', label: 'Monthly' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/select-box.md-->
+
+### SelectOption
+
+```ts
+interface SelectOption {
+  value: string;
+  label: string;
+}
+```

package/src/SelectBox/SelectBox.spec.ts

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

package/src/SelectBox/SelectBox.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import SelectBox from "./SelectBox.vue";
+
+const options = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+];
+
+describe("SelectBox", () => {
+  it("renders with label", () => {
+    const wrapper = mount(SelectBox, {
+      props: { label: "Interval", options, modelValue: "daily" },
+    });
+    expect(wrapper.text()).toContain("Interval");
+  });
+
+  it("renders without label", () => {
+    const wrapper = mount(SelectBox, {
+      props: { options, modelValue: "weekly" },
+    });
+    expect(wrapper.find(".select-label").exists()).toBe(false);
+  });
+
+  it("renders trigger element", () => {
+    const wrapper = mount(SelectBox, {
+      props: { options, modelValue: "weekly" },
+    });
+    const trigger = wrapper.find(".select-trigger");
+    expect(trigger.exists()).toBe(true);
+    expect(trigger.element.tagName).toBe("BUTTON");
+  });
+
+  it("has accessible trigger button", () => {
+    const wrapper = mount(SelectBox, {
+      props: { label: "Interval", options, modelValue: "daily" },
+    });
+    const trigger = wrapper.find(".select-trigger");
+    expect(trigger.attributes("role")).toBe("combobox");
+    expect(trigger.attributes("aria-labelledby")).toBeDefined();
+  });
+});

package/src/SelectBox/SelectBox.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  useId,
+} from "reka-ui";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+const model = defineModel<string>();
+
+const props = defineProps<{
+  label?: string;
+  ariaLabel?: string;
+  options: SelectOption[];
+  placeholder?: string;
+}>();
+
+const id = useId();
+</script>
+
+<template>
+  <div class="select-box">
+    <label v-if="label" :id="`${id}-label`" class="select-label">{{
+      label
+    }}</label>
+    <SelectRoot v-model="model">
+      <SelectTrigger
+        class="select-trigger"
+        :aria-labelledby="props.label ? `${id}-label` : undefined"
+        :aria-label="!props.label ? props.ariaLabel : undefined"
+      >
+        <SelectValue :placeholder="placeholder" />
+        <span class="select-icon" aria-hidden="true">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M3 4.5L6 7.5L9 4.5" />
+          </svg>
+        </span>
+      </SelectTrigger>
+      <SelectPortal>
+        <SelectContent
+          class="select-content"
+          position="popper"
+          :side-offset="4"
+          :body-lock="false"
+        >
+          <SelectViewport class="select-viewport">
+            <SelectItem
+              v-for="opt in options"
+              :key="opt.value"
+              :value="opt.value"
+              class="select-item"
+            >
+              <SelectItemText>{{ opt.label }}</SelectItemText>
+              <SelectItemIndicator class="select-indicator">
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 12 12"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M2 6L5 9L10 3" />
+                </svg>
+              </SelectItemIndicator>
+            </SelectItem>
+          </SelectViewport>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
+  </div>
+</template>
+
+<style scoped>
+.select-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
+.select-label {
+  font-size: var(--font-size-sm);
+}
+
+.select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  font-size: var(--font-size-sm);
+  height: 2.5em;
+  padding: 0 0.75em;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  background: var(--color-bg-0);
+  cursor: pointer;
+  width: auto;
+  font-family: inherit;
+  color: inherit;
+  line-height: 1.4;
+}
+
+.select-trigger:hover {
+  border-color: var(--color-border-hover);
+}
+
+.select-trigger:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -1px;
+}
+
+.select-trigger[data-placeholder] {
+  color: var(--color-text-secondary);
+}
+
+.select-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>
+
+<style>
+.select-content {
+  z-index: 100;
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  min-width: var(--reka-select-trigger-width);
+  max-height: var(--reka-select-content-available-height);
+}
+
+.select-viewport {
+  padding: 0.25em;
+}
+
+.select-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.select-item[data-highlighted] {
+  background: var(--color-primary);
+  color: white;
+}
+
+.select-item[data-state="checked"] {
+  font-weight: 600;
+}
+
+.select-indicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>

package/src/SidebarLayout/SidebarLayout.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import Icon from "../Icon/Icon.vue";
+
+const mql = window.matchMedia("(max-width: 767px)");
+const isMobile = ref(mql.matches);
+const collapsed = ref(mql.matches);
+
+function onMediaChange(e: MediaQueryListEvent) {
+  isMobile.value = e.matches;
+  collapsed.value = e.matches;
+}
+
+onMounted(() => {
+  mql.addEventListener("change", onMediaChange);
+});
+
+onUnmounted(() => {
+  mql.removeEventListener("change", onMediaChange);
+});
+
+function toggle() {
+  collapsed.value = !collapsed.value;
+}
+</script>
+
+<template>
+  <div
+    class="SidebarLayout"
+    :data-collapsed="collapsed"
+    :data-mobile="isMobile"
+  >
+    <div v-if="isMobile && !collapsed" class="Overlay" @click="toggle" />
+    <button
+      v-if="isMobile"
+      type="button"
+      class="Toggle MobileToggle"
+      :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+      :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+      @click="toggle"
+    >
+      <Icon
+        :icon="collapsed ? 'left_panel_open' : 'left_panel_close'"
+        size="sm"
+      />
+    </button>
+    <div class="SidebarRail">
+      <aside class="Sidebar">
+        <div class="SidebarScroll">
+          <slot name="sidebar" />
+        </div>
+        <button
+          v-if="!isMobile"
+          type="button"
+          class="Toggle"
+          :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+          :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+          @click="toggle"
+        >
+          <Icon
+            :icon="collapsed ? 'left_panel_open' : 'left_panel_close'"
+            size="sm"
+          />
+        </button>
+      </aside>
+    </div>
+    <main class="Main">
+      <div class="MainScroll">
+        <div class="MainContent">
+          <slot />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.SidebarLayout {
+  display: flex;
+  height: 100vh;
+  height: 100dvh;
+  background-color: var(--color-bg-0);
+  color: var(--color-text);
+  font-family: var(--font-family);
+  position: relative;
+}
+
+.SidebarRail {
+  flex-shrink: 0;
+  width: var(--sidebar-width);
+  height: 100%;
+  overflow: hidden;
+  transition: width var(--transition-normal);
+}
+
+.SidebarLayout[data-collapsed="true"] .SidebarRail {
+  width: var(--toggle-size);
+  background-color: var(--color-bg-1);
+  border-right: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+.Sidebar {
+  font-size: var(--font-size-sm);
+  display: flex;
+  width: var(--sidebar-width);
+  height: 100%;
+  transform: translateX(0);
+  transition: transform var(--transition-normal);
+}
+
+.SidebarLayout[data-collapsed="true"] .Sidebar {
+  transform: translateX(-100%);
+}
+
+.SidebarScroll {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-4);
+  background-color: var(--color-bg-1);
+  border-right: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.SidebarScroll:hover {
+  scrollbar-color: var(--color-border) transparent;
+}
+
+.SidebarScroll :deep(h2) {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+  margin: var(--space-4) 0 var(--space-2);
+}
+
+.SidebarScroll > :deep(h2:first-child) {
+  margin-top: 0;
+}
+
+.Toggle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toggle-size);
+  height: var(--toggle-size);
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition:
+    color var(--transition-fast),
+    background-color var(--transition-fast);
+}
+
+.Toggle:hover {
+  color: var(--color-text);
+  background-color: var(--color-bg-2);
+}
+
+.Toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+.SidebarLayout[data-collapsed="true"] .Toggle:not(.MobileToggle) {
+  transform: translateX(100%);
+}
+
+.Main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--color-bg-0);
+  font-size: var(--font-size-md);
+}
+
+.MainScroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-6) 0;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.MainScroll:hover {
+  scrollbar-color: var(--color-border) transparent;
+}
+
+.MainContent {
+  max-width: 1024px;
+  padding: 0 var(--space-4);
+}
+
+.SidebarLayout[data-mobile="true"] .MainScroll {
+  padding-top: calc(var(--toggle-size) + var(--space-2));
+}
+
+@media (min-width: 768px) {
+  .MainContent {
+    padding: 0 var(--space-20);
+  }
+}
+
+/* Mobile: sidebar overlays content */
+.Overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 10;
+}
+
+.SidebarLayout[data-mobile="true"] .SidebarRail {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 11;
+  width: var(--sidebar-width);
+  max-width: 85vw;
+  transition: transform var(--transition-normal);
+  transform: translateX(0);
+}
+
+.SidebarLayout[data-mobile="true"][data-collapsed="true"] .SidebarRail {
+  transform: translateX(-100%);
+  width: var(--sidebar-width);
+  max-width: 85vw;
+  background-color: transparent;
+  border-right: none;
+  box-shadow: none;
+}
+
+.SidebarLayout[data-mobile="true"] .Sidebar {
+  width: 100%;
+}
+
+.SidebarLayout[data-mobile="true"][data-collapsed="true"] .Sidebar {
+  transform: translateX(0);
+}
+
+.MobileToggle {
+  position: fixed;
+  top: var(--space-1);
+  left: calc(min(var(--sidebar-width), 85vw) + var(--space-1));
+  z-index: 12;
+  background: none;
+  border: none;
+  box-shadow: none;
+  border-radius: var(--radius-md);
+  transition: left var(--transition-normal);
+}
+
+.SidebarLayout[data-collapsed="true"] .MobileToggle {
+  left: var(--space-1);
+}
+</style>

package/src/Spinner/Spinner.md

@@ -0,0 +1,45 @@
+# Spinner
+
+A loading indicator with accessible labeling.
+
+## Examples
+
+### Sizes
+
+<ComponentDemo>
+  <Spinner size="sm" label="Loading" />
+  <Spinner size="md" label="Loading" />
+  <Spinner size="lg" label="Loading" />
+
+<template #code>
+
+```vue
+<Spinner size="sm" label="Loading" />
+<Spinner size="md" label="Loading" />
+<Spinner size="lg" label="Loading" />
+```
+
+  </template>
+</ComponentDemo>
+
+### In context
+
+<ComponentDemo>
+  <div style="display: flex; align-items: center; gap: 8px;">
+    <Spinner size="sm" label="Running model" />
+    <span>Running model...</span>
+  </div>
+
+<template #code>
+
+```vue
+<div style="display: flex; align-items: center; gap: 8px;">
+  <Spinner size="sm" label="Running model" />
+  <span>Running model...</span>
+</div>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/spinner.md-->

package/src/Spinner/Spinner.spec.ts

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

package/src/Spinner/Spinner.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+export type SpinnerSize = "sm" | "md" | "lg";
+
+withDefaults(
+  defineProps<{
+    size?: SpinnerSize;
+    label?: string;
+  }>(),
+  {
+    size: "sm",
+  },
+);
+</script>
+
+<template>
+  <span
+    class="Spinner"
+    :data-size="size"
+    role="status"
+    :aria-label="label ?? 'Loading'"
+  />
+</template>
+
+<style>
+.Spinner {
+  display: inline-block;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: cfa-spin 0.6s linear infinite;
+  vertical-align: middle;
+}
+
+.Spinner[data-size="sm"] {
+  width: 14px;
+  height: 14px;
+}
+
+.Spinner[data-size="md"] {
+  width: 20px;
+  height: 20px;
+}
+
+.Spinner[data-size="lg"] {
+  width: 28px;
+  height: 28px;
+  border-width: 3px;
+}
+
+@keyframes cfa-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>