@aggc/ui 0.7.1 → 0.9.0

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,143 @@
+import { css, cva } from "@styled/css";
+
+export const uiModalOverlayClass = css({
+  position: "fixed",
+  inset: "0",
+  bg: "rgba(0, 0, 0, 0.3)",
+  backdropFilter: "blur(8px)",
+  _dark: {
+    bg: "rgba(0, 0, 0, 0.5)",
+  },
+  zIndex: "50",
+  overscrollBehavior: "contain",
+  animation: "fadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1)",
+});
+
+export const uiModalWrapperClass = css({
+  position: "fixed",
+  inset: "0",
+  display: "flex",
+  alignItems: { base: "flex-end", sm: "center" },
+  justifyContent: "center",
+  zIndex: "51",
+  pointerEvents: "none",
+});
+
+export const uiModalContentClass = cva({
+  base: {
+    bg: "bg.menu",
+    borderWidth: "1px",
+    borderColor: "border.subtle",
+    p: "0",
+    display: "flex",
+    flexDirection: "column",
+    // Mobile: bottom sheet — desktop: centered via wrapper
+    position: { base: "fixed", sm: "relative" },
+    bottom: { base: "0", sm: "auto" },
+    left: { base: "0", sm: "auto" },
+    right: { base: "0", sm: "auto" },
+    pointerEvents: "auto",
+    borderTopLeftRadius: "xl",
+    borderTopRightRadius: "xl",
+    borderBottomLeftRadius: { base: "0", sm: "xl" },
+    borderBottomRightRadius: { base: "0", sm: "xl" },
+    maxH: { base: "90dvh", sm: "calc(100dvh - 2rem)" },
+    animation: {
+      base: "modalSlideUp 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards",
+      sm: "modalIn 240ms cubic-bezier(0.16, 1, 0.3, 1) backwards",
+    },
+    boxShadow: {
+      base: "0 -8px 32px -4px rgba(0, 0, 0, 0.12), 0 -2px 8px -2px rgba(0, 0, 0, 0.06)",
+      sm: "0 16px 48px -8px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.06)",
+    },
+    _dark: {
+      borderColor: "border.default",
+      boxShadow: {
+        base: "0 -8px 32px -4px rgba(0, 0, 0, 0.48), 0 -2px 8px -2px rgba(0, 0, 0, 0.24)",
+        sm: "0 16px 48px -8px rgba(0, 0, 0, 0.56), 0 4px 16px -4px rgba(0, 0, 0, 0.32)",
+      },
+    },
+    _focusVisible: {
+      outline: "none",
+    },
+  },
+  variants: {
+    size: {
+      sm: { w: { base: "full", sm: "380px" } },
+      md: { w: { base: "full", sm: "480px" } },
+      lg: { w: { base: "full", sm: "640px" } },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const uiModalHeaderClass = css({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  p: { base: "4", sm: "6" },
+  pb: { base: "3", sm: "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: { base: "4", sm: "6" },
+  pb: { base: "4", sm: "6" },
+  overflowY: "auto",
+  overscrollBehavior: "contain",
+});
+
+export const uiModalActionsClass = css({
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "3",
+  p: { base: "4", sm: "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,82 @@
+<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,
+  uiModalWrapperClass,
+} 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" />
+      <div :class="uiModalWrapperClass">
+        <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>
+      </div>
+    </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: "60",
+  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/UiTooltip.styles.ts

@@ -0,0 +1,25 @@
+import { css } from "@styled/css";
+
+// Tooltip content floating panel. Positioned by reka-ui (floating-ui),
+// so this only defines the visual surface.
+
+export const tooltipContent = css({
+  bg: "bg.menu",
+  color: "text.primary",
+  fontSize: "xs",
+  fontWeight: "500",
+  lineHeight: "1.4",
+  px: "2.5",
+  py: "1.5",
+  borderRadius: "md",
+  boxShadow:
+    "0 4px 16px -4px rgba(15,23,42,0.08), 0 2px 6px -2px rgba(15,23,42,0.04)",
+  zIndex: "70",
+  maxWidth: "90",
+  whiteSpace: "normal",
+  wordBreak: "break-word",
+  _dark: {
+    boxShadow:
+      "0 4px 16px -4px rgba(0,0,0,0.48), 0 2px 6px -2px rgba(0,0,0,0.28)",
+  },
+});

package/src/components/UiTooltip.test.ts

@@ -0,0 +1,37 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import UiTooltip from "./UiTooltip.vue";
+
+describe("UiTooltip", () => {
+  it("renders the trigger slot", () => {
+    const wrapper = mount(UiTooltip, {
+      props: { content: "Help" },
+      slots: { default: '<button type="button">Hover me</button>' },
+    });
+
+    expect(wrapper.text()).toContain("Hover me");
+    expect(wrapper.find("button").exists()).toBe(true);
+  });
+
+  it("renders the trigger bare when content is empty (no tooltip)", () => {
+    const wrapper = mount(UiTooltip, {
+      props: { content: "" },
+      slots: { default: '<button type="button">Bare</button>' },
+    });
+
+    expect(wrapper.find("button").exists()).toBe(true);
+    expect(wrapper.text()).toContain("Bare");
+    // No tooltip content rendered for empty content.
+    expect(wrapper.find('[role="tooltip"]').exists()).toBe(false);
+  });
+
+  it("keeps the trigger focusable", () => {
+    const wrapper = mount(UiTooltip, {
+      props: { content: "Help" },
+      slots: { default: '<button type="button">Hover me</button>' },
+    });
+
+    const trigger = wrapper.find("button");
+    expect(trigger.attributes("tabindex")).not.toBe("-1");
+  });
+});