@cfasim-ui/components 0.1.9 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/components",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "type": "module",
   "description": "Vue 3 UI components for cfasim-ui",
   "license": "Apache-2.0",
@@ -13,11 +13,21 @@
     "access": "public"
   },
   "files": [
-    "src"
+    "dist"
   ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "dependencies": {
     "reka-ui": "^2.9.2"
   },
@@ -26,8 +36,12 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",
+    "vite-plugin-dts": "^4.5.4",
     "@vue/test-utils": "^2.4.6",
     "happy-dom": "^20.8.9",
     "vitest": "^4.1.0"
+  },
+  "scripts": {
+    "build": "vite build"
   }
 }

package/src/Box/Box.md

@@ -1,41 +0,0 @@
-# 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>
-
-<!--@include: ./_api/box.md-->

package/src/Box/Box.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Box page renders demos", async ({ page }) => {
-  await page.goto("./cfasim-ui/components/box");
-  await expect(page.locator("h1")).toBeVisible();
-  const demos = page.locator(".demo-preview");
-  await expect(demos.first()).toBeVisible();
-  await expect(demos.first().locator(".box")).toHaveCount(4);
-  await expect(demos.first().getByText("This is an info box.")).toBeVisible();
-  await expect(demos.first().getByText("This is a success box.")).toBeVisible();
-  await expect(demos.first().getByText("This is a warning box.")).toBeVisible();
-  await expect(demos.first().getByText("This is an error box.")).toBeVisible();
-});

package/src/Box/Box.test.ts

@@ -1,49 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import Box from "./Box.vue";
-
-describe("Box", () => {
-  it("renders slot content", () => {
-    const wrapper = mount(Box, {
-      props: { variant: "info" },
-      slots: { default: "Hello" },
-    });
-    expect(wrapper.text()).toBe("Hello");
-  });
-
-  it.each(["info", "success", "warning", "error"] as const)(
-    "applies %s variant class",
-    (variant) => {
-      const wrapper = mount(Box, {
-        props: { variant },
-        slots: { default: "Content" },
-      });
-      expect(wrapper.classes()).toContain(`box-${variant}`);
-    },
-  );
-
-  it("applies custom role", () => {
-    const wrapper = mount(Box, {
-      props: { variant: "warning", role: "alert" },
-      slots: { default: "Warning" },
-    });
-    expect(wrapper.attributes("role")).toBe("alert");
-  });
-
-  it("has no role by default", () => {
-    const wrapper = mount(Box, {
-      slots: { default: "Content" },
-    });
-    expect(wrapper.attributes("role")).toBeUndefined();
-  });
-
-  it("applies custom bgColor and textColor", () => {
-    const wrapper = mount(Box, {
-      props: { bgColor: "#fef3e6", textColor: "#7a3d00" },
-      slots: { default: "Custom" },
-    });
-    const style = wrapper.attributes("style") ?? "";
-    expect(style).toContain("background-color");
-    expect(style).toContain("color");
-  });
-});

package/src/Box/Box.vue

@@ -1,52 +0,0 @@
-<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/src/Button/Button.md

@@ -1,55 +0,0 @@
-# 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>
-
-<!--@include: ./_api/button.md-->

package/src/Button/Button.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Button page renders demos", async ({ page }) => {
-  await page.goto("./cfasim-ui/components/button");
-  await expect(page.locator("h1")).toBeVisible();
-  const demos = page.locator(".demo-preview");
-  await expect(demos.first()).toBeVisible();
-  await expect(
-    demos.first().getByRole("button", { name: "Primary" }),
-  ).toBeVisible();
-  await expect(
-    demos.first().getByRole("button", { name: "Secondary" }),
-  ).toBeVisible();
-
-  // Disabled demo
-  const disabledDemo = demos.nth(1);
-  await expect(disabledDemo.getByRole("button").first()).toBeDisabled();
-});

package/src/Button/Button.test.ts

@@ -1,36 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import Button from "./Button.vue";
-
-describe("Button", () => {
-  it("renders with default slot content", () => {
-    const wrapper = mount(Button, {
-      slots: { default: "Click me" },
-    });
-    expect(wrapper.text()).toBe("Click me");
-    expect(wrapper.element.tagName).toBe("BUTTON");
-  });
-
-  it("renders with label prop", () => {
-    const wrapper = mount(Button, {
-      props: { label: "Submit" },
-    });
-    expect(wrapper.text()).toBe("Submit");
-  });
-
-  it("emits click event", async () => {
-    const wrapper = mount(Button, {
-      slots: { default: "Click me" },
-    });
-    await wrapper.trigger("click");
-    expect(wrapper.emitted("click")).toHaveLength(1);
-  });
-
-  it("renders as different element via as prop", () => {
-    const wrapper = mount(Button, {
-      props: { as: "a" },
-      slots: { default: "Link" },
-    });
-    expect(wrapper.element.tagName).toBe("A");
-  });
-});

package/src/Button/Button.vue

@@ -1,81 +0,0 @@
-<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/src/Expander/Expander.md

@@ -1,23 +0,0 @@
-# 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>
-
-<!--@include: ./_api/expander.md-->

package/src/Expander/Expander.spec.ts

@@ -1,14 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Expander page renders demos", async ({ page }) => {
-  await page.goto("./cfasim-ui/components/expander");
-  await expect(page.locator("h1")).toBeVisible();
-  const demos = page.locator(".demo-preview");
-  await expect(demos.first()).toBeVisible();
-  const trigger = demos.first().getByText("Show advanced options");
-  await expect(trigger).toBeVisible();
-  await trigger.click();
-  await expect(
-    demos.first().getByText("Here is the hidden content."),
-  ).toBeVisible();
-});

package/src/Expander/Expander.vue

@@ -1,95 +0,0 @@
-<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/src/Hint/Hint.md

@@ -1,24 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Hint page renders demos", async ({ page }) => {
-  await page.goto("./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

@@ -1,34 +0,0 @@
-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

@@ -1,83 +0,0 @@
-<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>