@aggc/ui 0.7.1 → 0.8.0

package/src/components/UiAvatar.test.ts

@@ -0,0 +1,43 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import UiAvatar from "./UiAvatar.vue";
+
+describe("UiAvatar", () => {
+  it("has accessible label with full name", () => {
+    const wrapper = mount(UiAvatar, {
+      props: { name: "Alice Johnson" },
+    });
+
+    expect(wrapper.attributes("aria-label")).toBe("Alice Johnson");
+    expect(wrapper.attributes("role")).toBe("img");
+  });
+
+  it("renders image when src provided", () => {
+    const wrapper = mount(UiAvatar, {
+      props: {
+        name: "Alice",
+        src: "https://example.com/avatar.jpg",
+      },
+    });
+
+    const img = wrapper.find("img");
+    expect(img.exists()).toBe(true);
+    expect(img.attributes("src")).toBe("https://example.com/avatar.jpg");
+  });
+
+  it("does not render image when src is not provided", () => {
+    const wrapper = mount(UiAvatar, {
+      props: { name: "Alice" },
+    });
+
+    expect(wrapper.find("img").exists()).toBe(false);
+  });
+
+  it("renders avatar root element", () => {
+    const wrapper = mount(UiAvatar, {
+      props: { name: "Alice Johnson" },
+    });
+
+    expect(wrapper.find("[role='img']").exists()).toBe(true);
+  });
+});

package/src/components/UiAvatar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { User } from "lucide-vue-next";
+import { AvatarFallback, AvatarImage, AvatarRoot } from "reka-ui";
+import {
+  uiAvatarFallbackClass,
+  uiAvatarImageClass,
+  uiAvatarRootClass,
+} from "./UiAvatar.styles";
+
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    src?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    shape?: "circle" | "square";
+  }>(),
+  {
+    src: undefined,
+    size: "md",
+    shape: "circle",
+  }
+);
+
+const initials = computed(() => {
+  const parts = props.name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+});
+
+const iconSizeMap = { sm: 16, md: 20, lg: 24, xl: 28 };
+</script>
+
+<template>
+  <AvatarRoot :class="uiAvatarRootClass({ size, shape })" :aria-label="name" role="img">
+    <AvatarImage v-if="src" :src="src" :alt="name" :class="uiAvatarImageClass" />
+    <AvatarFallback :delay-ms="300" :class="uiAvatarFallbackClass({ size })">
+      {{ initials }}
+    </AvatarFallback>
+  </AvatarRoot>
+</template>

package/src/components/UiModal.styles.ts

@@ -0,0 +1,126 @@
+import { css, cva } from "@styled/css";
+
+export const uiModalOverlayClass = css({
+  position: "fixed",
+  inset: "0",
+  bg: "rgba(0, 0, 0, 0.3)",
+  backdropFilter: "blur(12px)",
+  _dark: {
+    bg: "rgba(0, 0, 0, 0.5)",
+  },
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: "50",
+  px: "4",
+  overscrollBehavior: "contain",
+  animation: "fadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1)",
+});
+
+export const uiModalContentClass = cva({
+  base: {
+    bg: "bg.menu",
+    borderRadius: "xl",
+    borderWidth: "1px",
+    borderColor: "border.subtle",
+    p: "0",
+    display: "flex",
+    flexDirection: "column",
+    maxH: "calc(100dvh - 2rem)",
+    boxShadow:
+      "0 16px 48px -8px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.06)",
+    animation: "modalIn 240ms cubic-bezier(0.16, 1, 0.3, 1)",
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex: "51",
+    _dark: {
+      boxShadow:
+        "0 16px 48px -8px rgba(0, 0, 0, 0.56), 0 4px 16px -4px rgba(0, 0, 0, 0.32)",
+      borderColor: "border.default",
+    },
+    _focusVisible: {
+      outline: "none",
+    },
+  },
+  variants: {
+    size: {
+      sm: { w: "380px" },
+      md: { w: "480px" },
+      lg: { w: "640px" },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const uiModalHeaderClass = css({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  p: "6",
+  pb: "4",
+});
+
+export const uiModalHeaderContentClass = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1",
+});
+
+export const uiModalTitleClass = css({
+  fontFamily: "heading",
+  fontWeight: "600",
+  fontSize: "lg",
+  color: "text.primary",
+});
+
+export const uiModalDescriptionClass = css({
+  fontSize: "sm",
+  color: "text.secondary",
+  lineHeight: "1.5",
+});
+
+export const uiModalCloseClass = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  w: "8",
+  h: "8",
+  borderRadius: "lg",
+  border: "none",
+  bg: "transparent",
+  color: "text.muted",
+  cursor: "pointer",
+  flexShrink: "0",
+  transition:
+    "color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  _hover: {
+    bg: "bg.hover",
+    color: "text.primary",
+  },
+  _focusVisible: {
+    outline: "2px solid",
+    outlineColor: "border.accent",
+    outlineOffset: "2px",
+  },
+});
+
+export const uiModalBodyClass = css({
+  px: "6",
+  pb: "6",
+  overflowY: "auto",
+  overscrollBehavior: "contain",
+});
+
+export const uiModalActionsClass = css({
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "3",
+  p: "6",
+  pt: "3",
+  borderTopWidth: "1px",
+  borderTopColor: "border.soft",
+});

package/src/components/UiModal.test.ts

@@ -0,0 +1,64 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import { DialogRoot } from "reka-ui";
+import UiModal from "./UiModal.vue";
+
+describe("UiModal", () => {
+  it("mounts without errors when open", () => {
+    const wrapper = mount(UiModal, {
+      props: {
+        open: true,
+        title: "Test Modal",
+      },
+    });
+
+    expect(wrapper.findComponent(DialogRoot).exists()).toBe(true);
+  });
+
+  it("passes title prop to DialogTitle", () => {
+    const wrapper = mount(UiModal, {
+      props: {
+        open: true,
+        title: "Create Workspace",
+      },
+    });
+
+    expect(wrapper.props("title")).toBe("Create Workspace");
+  });
+
+  it("passes size prop correctly", () => {
+    const wrapper = mount(UiModal, {
+      props: {
+        open: true,
+        title: "Test",
+        size: "lg",
+      },
+    });
+
+    expect(wrapper.props("size")).toBe("lg");
+  });
+
+  it("renders with default size md", () => {
+    const wrapper = mount(UiModal, {
+      props: {
+        open: true,
+        title: "Test",
+      },
+    });
+
+    expect(wrapper.props("size")).toBe("md");
+  });
+
+  it("emits update:open when DialogRoot state changes", async () => {
+    const wrapper = mount(UiModal, {
+      props: {
+        open: true,
+        title: "Test",
+      },
+    });
+
+    const dialogRoot = wrapper.findComponent(DialogRoot);
+    await dialogRoot.vm.$emit("update:open", false);
+    expect(wrapper.emitted("update:open")?.[0]).toEqual([false]);
+  });
+});

package/src/components/UiModal.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { X } from "lucide-vue-next";
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  VisuallyHidden,
+} from "reka-ui";
+import {
+  uiModalActionsClass,
+  uiModalBodyClass,
+  uiModalCloseClass,
+  uiModalContentClass,
+  uiModalDescriptionClass,
+  uiModalHeaderClass,
+  uiModalHeaderContentClass,
+  uiModalOverlayClass,
+  uiModalTitleClass,
+} from "./UiModal.styles";
+
+withDefaults(
+  defineProps<{
+    open: boolean;
+    size?: "sm" | "md" | "lg";
+    title: string;
+    description?: string;
+  }>(),
+  {
+    size: "md",
+    description: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  "update:open": [value: boolean];
+  close: [];
+}>();
+
+function handleOpenChange(open: boolean) {
+  emit("update:open", open);
+  if (!open) {
+    emit("close");
+  }
+}
+</script>
+
+<template>
+  <DialogRoot :open="open" @update:open="handleOpenChange">
+    <DialogPortal>
+      <DialogOverlay :class="uiModalOverlayClass" />
+      <DialogContent :class="uiModalContentClass({ size })">
+        <div :class="uiModalHeaderClass">
+          <div :class="uiModalHeaderContentClass">
+            <DialogTitle :class="uiModalTitleClass">{{ title }}</DialogTitle>
+            <DialogDescription v-if="description" :class="uiModalDescriptionClass">
+              {{ description }}
+            </DialogDescription>
+            <VisuallyHidden v-else>
+              <DialogDescription>{{ title }}</DialogDescription>
+            </VisuallyHidden>
+          </div>
+          <DialogClose :class="uiModalCloseClass" aria-label="Close dialog">
+            <X :size="20" aria-hidden="true" />
+          </DialogClose>
+        </div>
+        <div :class="uiModalBodyClass">
+          <slot />
+        </div>
+        <div v-if="$slots.actions" :class="uiModalActionsClass">
+          <slot name="actions" />
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/src/components/UiToast.styles.ts

@@ -0,0 +1,143 @@
+import { css, cva } from "@styled/css";
+
+export const uiToastViewportClass = css({
+  position: "fixed",
+  bottom: "4",
+  right: "4",
+  zIndex: "50",
+  display: "flex",
+  flexDirection: "column",
+  gap: "2",
+  w: "360px",
+  maxW: "calc(100vw - 2rem)",
+  maxHeight: "calc(100dvh - 2rem)",
+  pointerEvents: "none",
+  outline: "none",
+});
+
+export const uiToastRootClass = cva({
+  base: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "3",
+    p: "4",
+    borderRadius: "lg",
+    borderWidth: "1px",
+    bg: "bg.cardStrong",
+    borderColor: "border.default",
+    boxShadow:
+      "0 4px 12px -4px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    pointerEvents: "auto",
+    position: "relative",
+    overflow: "hidden",
+    transition: "all 240ms cubic-bezier(0.16, 1, 0.3, 1)",
+    _dark: {
+      boxShadow:
+        "0 4px 12px -4px rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24)",
+    },
+    '&[data-state="open"]': {
+      animation: "toastSlideIn 240ms cubic-bezier(0.16, 1, 0.3, 1)",
+    },
+    '&[data-state="closed"]': {
+      animation: "toastFadeOut 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+    },
+    '&[data-swipe="move"]': {
+      transform: "translateX(var(--reka-toast-swipe-move-x))",
+    },
+    '&[data-swipe="cancel"]': {
+      transform: "translateX(0)",
+      transition: "transform 200ms ease-out",
+    },
+    '&[data-swipe="end"]': {
+      animation: "toastSwipeOut 100ms ease-out",
+    },
+  },
+  variants: {
+    tone: {
+      success: {
+        borderColor: "badge.successBorder",
+        bg: "badge.successBg",
+      },
+      error: {
+        borderColor: "badge.dangerBorder",
+        bg: "badge.dangerBg",
+      },
+      info: {
+        borderColor: "badge.infoBorder",
+        bg: "badge.infoBg",
+      },
+      warning: {
+        borderColor: "badge.warningBorder",
+        bg: "badge.warningBg",
+      },
+    },
+  },
+  defaultVariants: {
+    tone: "info",
+  },
+});
+
+export const uiToastIconClass = cva({
+  base: {
+    flexShrink: "0",
+    w: "5",
+    h: "5",
+  },
+  variants: {
+    tone: {
+      success: { color: "badge.successText" },
+      error: { color: "badge.dangerText" },
+      info: { color: "badge.infoText" },
+      warning: { color: "badge.warningText" },
+    },
+  },
+  defaultVariants: {
+    tone: "info",
+  },
+});
+
+export const uiToastContentClass = css({
+  flex: "1",
+  minW: "0",
+});
+
+export const uiToastTitleClass = css({
+  fontWeight: "600",
+  fontSize: "sm",
+  color: "text.primary",
+  lineHeight: "1.4",
+});
+
+export const uiToastDescriptionClass = css({
+  fontSize: "sm",
+  color: "text.secondary",
+  lineHeight: "1.5",
+});
+
+export const uiToastCloseClass = css({
+  position: "absolute",
+  top: "3",
+  right: "3",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  w: "6",
+  h: "6",
+  borderRadius: "md",
+  border: "none",
+  bg: "transparent",
+  color: "text.muted",
+  cursor: "pointer",
+  flexShrink: "0",
+  transition:
+    "color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  _hover: {
+    bg: "bg.hover",
+    color: "text.primary",
+  },
+  _focusVisible: {
+    outline: "2px solid",
+    outlineColor: "border.accent",
+    outlineOffset: "2px",
+  },
+});

package/src/components/UiToast.test.ts

@@ -0,0 +1,47 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import { ToastProvider } from "reka-ui";
+import UiToast from "./UiToast.vue";
+
+function mountToast(props: Record<string, unknown> = {}) {
+  return mount(
+    {
+      components: { ToastProvider, UiToast },
+      template: `<ToastProvider><UiToast v-bind="props" /></ToastProvider>`,
+      setup() {
+        return { props };
+      },
+    },
+    {
+      props: {
+        tone: "success",
+        message: "Workspace created",
+        ...props,
+      },
+    }
+  );
+}
+
+describe("UiToast", () => {
+  it("renders without errors", () => {
+    const wrapper = mountToast();
+    expect(wrapper.findComponent(UiToast).exists()).toBe(true);
+  });
+
+  it("passes tone prop correctly", () => {
+    const wrapper = mountToast({ tone: "error", message: "Failed" });
+    expect(wrapper.findComponent(UiToast).props("tone")).toBe("error");
+  });
+
+  it("passes message prop correctly", () => {
+    const wrapper = mountToast({ message: "Custom message" });
+    expect(wrapper.findComponent(UiToast).props("message")).toBe(
+      "Custom message"
+    );
+  });
+
+  it("passes duration prop", () => {
+    const wrapper = mountToast({ duration: 8000 });
+    expect(wrapper.findComponent(UiToast).props("duration")).toBe(8000);
+  });
+});

package/src/components/UiToast.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { X } from "lucide-vue-next";
+import {
+  ToastClose,
+  ToastDescription,
+  ToastRoot,
+  ToastTitle,
+} from "reka-ui";
+import {
+  uiToastCloseClass,
+  uiToastContentClass,
+  uiToastDescriptionClass,
+  uiToastIconClass,
+  uiToastRootClass,
+  uiToastTitleClass,
+} from "./UiToast.styles";
+import type { ToastTone } from "../composables/useToast";
+import {
+  CheckCircle,
+  AlertCircle,
+  Info,
+  AlertTriangle,
+} from "lucide-vue-next";
+
+const props = withDefaults(
+  defineProps<{
+    tone: ToastTone;
+    message: string;
+    title?: string;
+    duration?: number;
+  }>(),
+  {
+    title: undefined,
+    duration: 4000,
+  }
+);
+
+const iconMap = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+  warning: AlertTriangle,
+};
+</script>
+
+<template>
+  <ToastRoot
+    :class="uiToastRootClass({ tone })"
+    :duration="duration"
+    :type="'foreground'"
+  >
+    <component
+      :is="iconMap[props.tone]"
+      :class="uiToastIconClass({ tone })"
+      aria-hidden="true"
+    />
+    <div :class="uiToastContentClass">
+      <ToastTitle v-if="title" :class="uiToastTitleClass">{{ title }}</ToastTitle>
+      <ToastDescription :class="uiToastDescriptionClass">{{ message }}</ToastDescription>
+    </div>
+    <ToastClose :class="uiToastCloseClass" aria-label="Dismiss">
+      <X :size="14" aria-hidden="true" />
+    </ToastClose>
+  </ToastRoot>
+</template>

package/src/components/UiToastProvider.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ToastProvider, ToastViewport } from "reka-ui";
+import { useToast } from "../composables/useToast";
+import UiToast from "./UiToast.vue";
+import { uiToastViewportClass } from "./UiToast.styles";
+
+const { toasts } = useToast();
+</script>
+
+<template>
+  <ToastProvider swipe-direction="right">
+    <slot />
+    <template v-for="toast in toasts" :key="toast.id">
+      <UiToast
+        :tone="toast.tone"
+        :message="toast.message"
+        :duration="toast.duration"
+      />
+    </template>
+    <ToastViewport :class="uiToastViewportClass" />
+  </ToastProvider>
+</template>

package/src/components/index.ts

@@ -2,10 +2,14 @@ export { default as PageSurface } from "./PageSurface.vue";
 export { default as ResultPanel } from "./ResultPanel.vue";
 export { default as SectionCard } from "./SectionCard.vue";
 export { default as StatusBadge } from "./StatusBadge.vue";
+export { default as UiAvatar } from "./UiAvatar.vue";
 export { default as UiButton } from "./UiButton.vue";
 export { default as UiCheckbox } from "./UiCheckbox.vue";
 export { default as UiField } from "./UiField.vue";
 export { default as UiLoadingState } from "./UiLoadingState.vue";
+export { default as UiModal } from "./UiModal.vue";
 export { default as UiSegmentedControl } from "./UiSegmentedControl.vue";
 export { default as UiSelect } from "./UiSelect.vue";
 export { default as UiSkeleton } from "./UiSkeleton.vue";
+export { default as UiToast } from "./UiToast.vue";
+export { default as UiToastProvider } from "./UiToastProvider.vue";

package/src/composables/useToast.ts

@@ -0,0 +1,43 @@
+import { ref } from "vue";
+
+export type ToastTone = "success" | "error" | "info" | "warning";
+
+export interface ToastItem {
+  id: number;
+  tone: ToastTone;
+  message: string;
+  duration: number;
+}
+
+const toasts = ref<ToastItem[]>([]);
+let nextId = 0;
+
+function addToast(tone: ToastTone, message: string, duration = 4000) {
+  const id = nextId++;
+  toasts.value = [...toasts.value, { id, tone, message, duration }];
+
+  if (duration > 0) {
+    setTimeout(() => removeToast(id), duration);
+  }
+
+  return id;
+}
+
+function removeToast(id: number) {
+  toasts.value = toasts.value.filter((t) => t.id !== id);
+}
+
+export function useToast() {
+  return {
+    toasts,
+    success: (message: string, duration?: number) =>
+      addToast("success", message, duration),
+    error: (message: string, duration?: number) =>
+      addToast("error", message, duration),
+    info: (message: string, duration?: number) =>
+      addToast("info", message, duration),
+    warning: (message: string, duration?: number) =>
+      addToast("warning", message, duration),
+    dismiss: removeToast,
+  };
+}