@cfasim-ui/docs 0.3.11

package/charts/index.ts

@@ -0,0 +1,23 @@
+export {
+  default as LineChart,
+  type Series,
+  type Area,
+  type AreaSection,
+} from "./LineChart/LineChart.vue";
+export {
+  default as ChoroplethMap,
+  type GeoType,
+  type StateData,
+  type ChoroplethColorScale,
+  type ThresholdStop,
+  type CategoricalStop,
+} from "./ChoroplethMap/ChoroplethMap.vue";
+export { default as ChartTooltip } from "./ChartTooltip/ChartTooltip.vue";
+export {
+  default as DataTable,
+  type TableData,
+  type TableRecord,
+  type ColumnAlign,
+  type ColumnConfig,
+  type ColumnWidth,
+} from "./DataTable/DataTable.vue";

package/charts/tooltip-position.ts

@@ -0,0 +1,49 @@
+export type TooltipClamp = "none" | "chart" | "window";
+
+const GAP = 16;
+const PAD = 8;
+
+/**
+ * Computes a tooltip position in client coordinates, flipping to the opposite
+ * side of the pointer and clamping vertically when the preferred placement
+ * would overflow the clamp boundary.
+ *
+ * The tooltip is assumed to be anchored with `transform: translateY(-50%)`,
+ * so `top` is the vertical center.
+ */
+export function placeTooltip(
+  clientX: number,
+  centerY: number,
+  tipW: number,
+  tipH: number,
+  clamp: TooltipClamp,
+  chartRect?: DOMRect,
+): { left: number; top: number } {
+  if (clamp === "none") {
+    return { left: clientX + GAP, top: centerY };
+  }
+
+  const bounds =
+    clamp === "chart" && chartRect
+      ? {
+          left: chartRect.left,
+          right: chartRect.right,
+          top: chartRect.top,
+          bottom: chartRect.bottom,
+        }
+      : {
+          left: 0,
+          right: window.innerWidth,
+          top: 0,
+          bottom: window.innerHeight,
+        };
+
+  const flip = clientX + GAP + tipW > bounds.right - PAD;
+  const left = flip ? clientX - GAP - tipW : clientX + GAP;
+  const halfH = tipH / 2;
+  const top = Math.min(
+    Math.max(centerY, bounds.top + PAD + halfH),
+    bounds.bottom - PAD - halfH,
+  );
+  return { left, top };
+}

package/components/Box/Box.md

@@ -0,0 +1,49 @@
+# Box
+
+A colored container for callouts, alerts, and grouped content.
+
+## Examples
+
+### Variants
+
+<ComponentDemo>
+  <Box variant="info">This is an info box.</Box>
+  <Box variant="success">This is a success box.</Box>
+  <Box variant="warning">This is a warning box.</Box>
+  <Box variant="error">This is an error box.</Box>
+
+<template #code>
+
+```vue
+<Box variant="info">This is an info box.</Box>
+<Box variant="success">This is a success box.</Box>
+<Box variant="warning">This is a warning box.</Box>
+<Box variant="error">This is an error box.</Box>
+```
+
+  </template>
+</ComponentDemo>
+
+### Custom colors
+
+<ComponentDemo>
+  <Box bg-color="#f0e6ff" text-color="#4a1d96">Custom purple box</Box>
+
+<template #code>
+
+```vue
+<Box bg-color="#f0e6ff" text-color="#4a1d96">Custom purple box</Box>
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `variant` | `BoxVariant` | No | — |
+| `bgColor` | `string` | No | — |
+| `textColor` | `string` | No | — |
+| `role` | `string` | No | — |
+

package/components/Box/Box.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+export type BoxVariant = "info" | "success" | "warning" | "error";
+
+defineProps<{
+  variant?: BoxVariant;
+  bgColor?: string;
+  textColor?: string;
+  role?: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="box"
+    :class="variant ? `box-${variant}` : undefined"
+    :style="{
+      backgroundColor: bgColor,
+      color: textColor,
+    }"
+    :role="role"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.box {
+  padding: 0.75em 1.25em;
+  border-radius: 0.375em;
+  font-size: var(--font-size-sm);
+}
+
+.box-info {
+  background-color: var(--color-box-info-bg);
+  color: var(--color-box-info-text);
+}
+
+.box-success {
+  background-color: var(--color-box-success-bg);
+  color: var(--color-box-success-text);
+}
+
+.box-warning {
+  background-color: var(--color-box-warning-bg);
+  color: var(--color-box-warning-text);
+}
+
+.box-error {
+  background-color: var(--color-box-error-bg);
+  color: var(--color-box-error-text);
+}
+</style>

package/components/Button/Button.md

@@ -0,0 +1,67 @@
+# Button
+
+A button for triggering actions. Supports primary and secondary variants.
+
+Built on [reka-ui Primitive](https://reka-ui.com/docs/utilities/primitive), so it supports `as` and `asChild` for rendering as different elements.
+
+## Examples
+
+### Variants
+
+<ComponentDemo>
+  <Button>Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+
+<template #code>
+
+```vue
+<Button>Primary</Button>
+<Button variant="secondary">Secondary</Button>
+```
+
+  </template>
+</ComponentDemo>
+
+### Disabled
+
+<ComponentDemo>
+  <Button disabled>Disabled</Button>
+  <Button variant="secondary" disabled>Disabled</Button>
+
+<template #code>
+
+```vue
+<Button disabled>Disabled</Button>
+<Button variant="secondary" disabled>Disabled</Button>
+```
+
+  </template>
+</ComponentDemo>
+
+### With label prop
+
+<ComponentDemo>
+  <Button label="Click me" />
+
+<template #code>
+
+```vue
+<Button label="Click me" />
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | No | — |
+| `variant` | `"primary" \| "secondary"` | No | `"primary"` |
+
+## Events
+
+| Event | Payload |
+|-------|---------|
+| `click` | `event: MouseEvent` |
+

package/components/Button/Button.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { Primitive } from "reka-ui";
+import type { PrimitiveProps } from "reka-ui";
+
+interface Props extends PrimitiveProps {
+  label?: string;
+  variant?: "primary" | "secondary";
+}
+
+withDefaults(defineProps<Props>(), {
+  as: "button",
+  variant: "primary",
+});
+
+defineEmits<{
+  click: [event: MouseEvent];
+}>();
+</script>
+
+<template>
+  <Primitive
+    class="button"
+    :data-variant="variant"
+    :as="as"
+    :as-child="asChild"
+    @click="$emit('click', $event)"
+  >
+    <slot>{{ label }}</slot>
+  </Primitive>
+</template>
+
+<style scoped>
+.button {
+  display: inline-flex;
+  border: none;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+  min-height: 2.5em;
+  padding: 0 1em;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  border-radius: 0.375em;
+  background-color: var(--color-primary);
+  color: var(--color-text-on-primary);
+}
+
+.button:hover {
+  cursor: pointer;
+  background-color: var(--color-primary-hover);
+}
+
+.button:active {
+  background-color: var(--color-primary-active);
+}
+
+.button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button[data-variant="secondary"] {
+  background-color: transparent;
+  color: var(--color-primary);
+  border: 1px solid var(--color-primary);
+}
+
+.button[data-variant="secondary"]:hover {
+  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+
+.button[data-variant="secondary"]:active {
+  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
+}
+</style>

package/components/Expander/Expander.md

@@ -0,0 +1,34 @@
+# Expander
+
+A collapsible section that toggles content visibility.
+
+## Examples
+
+<ComponentDemo>
+  <Expander label="Show advanced options">
+    <p style="margin: 0">Here is the hidden content.</p>
+  </Expander>
+
+<template #code>
+
+```vue
+<Expander label="Show advanced options">
+  <p>Here is the hidden content.</p>
+</Expander>
+```
+
+  </template>
+</ComponentDemo>
+
+## Model
+
+| Name | Type |
+|------|------|
+| `v-model:open` | `boolean` |
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | No | — |
+

package/components/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 }" />
+      <slot name="label">{{ label }}</slot>
+    </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/components/Hint/Hint.md

@@ -0,0 +1,29 @@
+# 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>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `text` | `string` | Yes | — |
+

package/components/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/components/Icon/Icon.md

@@ -0,0 +1,67 @@
+# 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>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `icon` | `string` | Yes | — |
+| `size` | `IconSize \| number` | No | `"md"` |
+| `fill` | `boolean` | No | `false` |
+| `weight` | `number` | No | — |
+| `grade` | `number` | No | — |
+| `decorative` | `boolean` | No | `true` |
+| `ariaLabel` | `string` | No | — |
+| `inline` | `boolean` | No | `false` |
+