@umbra.ui/core 0.1.0

package/src/components/dialogs/Toast/Toast.vue

@@ -0,0 +1,296 @@
+<!-- Toast.vue -->
+<script setup lang="ts">
+import tinycolor from "tinycolor2";
+import { computed, ref } from "vue";
+import { icons, type IconKey, XmarkIcon } from "@umbra-ui/icons";
+import type { ToastInstance } from "./types";
+import { IconButton } from "@umbra-ui/core";
+import "./theme.css";
+
+interface Props {
+  toast: ToastInstance;
+  toastStyle?: "bar" | "full" | "notification";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  toastStyle: "bar",
+});
+const emit = defineEmits<{
+  dismiss: [id: string];
+}>();
+
+const containerEl = ref<HTMLElement>();
+
+// Fixed icon computation
+const icon = computed(() => {
+  const typeIconMap: Record<string, IconKey> = {
+    success: "circle-check",
+    error: "triangle-warning",
+    warning: "triangle-warning",
+    info: "circle-info",
+  };
+
+  return (
+    props.toast.iconName ||
+    typeIconMap[props.toast.toastType as string] ||
+    "circle-info"
+  );
+});
+
+const IconComponent = computed(() => {
+  const iconName = icon.value as keyof typeof icons;
+  return icons[iconName] || null;
+});
+
+// Simplified color system using CSS custom properties
+const toastTypeClass = computed(() => {
+  const validTypes = ["success", "error", "warning", "info"];
+  return validTypes.includes(props.toast.toastType as string)
+    ? props.toast.toastType
+    : "custom";
+});
+
+const backgroundColor = computed(() => {
+  switch (props.toast.toastType) {
+    case "success":
+      return "var(--toast-success-bg)";
+    case "error":
+      return "var(--toast-error-bg)";
+    case "warning":
+      return "var(--toast-warning-bg)";
+    case "info":
+      return "var(--toast-info-bg)";
+    default:
+      return props.toast.toastType;
+  }
+});
+
+const textColor = computed(() => {
+  // Get the actual color value from CSS custom property
+  const bgColor = backgroundColor.value;
+  let actualColor = bgColor;
+
+  if (bgColor.startsWith("var(")) {
+    // Extract the CSS variable name
+    const varName = bgColor.slice(4, -1); // removes 'var(' and ')'
+    // Get the computed value from the document
+    actualColor = getComputedStyle(document.documentElement)
+      .getPropertyValue(varName)
+      .trim();
+  }
+
+  const color = tinycolor(actualColor);
+  return color.isLight() ? "black" : "white";
+});
+
+const customColor = computed(() => {
+  const validTypes = ["success", "error", "warning", "info"];
+  if (!validTypes.includes(props.toast.toastType as string)) {
+    return props.toast.toastType;
+  }
+  return null;
+});
+
+// Accessibility: ARIA label
+const ariaLabel = computed(() => {
+  const type = props.toast.toastType || "notification";
+  return `${type} notification: ${props.toast.title}${
+    props.toast.description ? ". " + props.toast.description : ""
+  }`;
+});
+
+const handleClick = () => {
+  if (props.toast.dismissible) {
+    emit("dismiss", props.toast.id);
+  }
+};
+
+const handleDismiss = () => {
+  emit("dismiss", props.toast.id);
+};
+
+// Keyboard accessibility
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (
+    props.toast.dismissible &&
+    (event.key === "Escape" || event.key === "Enter")
+  ) {
+    event.preventDefault();
+    handleDismiss();
+  }
+};
+</script>
+
+<template>
+  <div
+    ref="containerEl"
+    :class="[
+      $style.container,
+      $style[toast.position?.toLowerCase() || 'top'],
+      $style[toastTypeClass],
+      $style[
+        `toastStyle${
+          props.toastStyle.charAt(0).toUpperCase() + props.toastStyle.slice(1)
+        }`
+      ],
+    ]"
+    :style="{
+      '--text-color': textColor,
+      ...(customColor && { '--custom-color': customColor }),
+      cursor: toast.dismissible ? 'pointer' : 'default',
+    }"
+    role="alert"
+    :aria-label="ariaLabel"
+    :aria-live="toast.toastType === 'error' ? 'assertive' : 'polite'"
+    :tabindex="toast.dismissible ? 0 : -1"
+    @click="handleClick"
+    @keydown="handleKeyDown"
+  >
+    <component
+      v-if="IconComponent"
+      :is="IconComponent"
+      :class="$style.icon"
+      aria-hidden="true"
+      :color="textColor"
+    />
+    <div :class="$style.labels">
+      <p :class="$style.title">{{ toast.title }}</p>
+      <p v-if="toast.description" :class="$style.description">
+        {{ toast.description }}
+      </p>
+    </div>
+
+    <IconButton
+      iconName="xmark"
+      :class="$style.closeButton"
+      @click.stop="handleDismiss"
+      buttonType="plain"
+      buttonSize="12"
+      :buttonStyle="textColor"
+    />
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.706rem;
+  padding: 0.706rem;
+  width: 100%;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px var(--toast-shadow);
+  transition: scale 0.2s ease-in-out;
+}
+
+/* Type variants with proper color system */
+.success {
+  background-color: var(--toast-success-bg);
+}
+
+.error {
+  background-color: var(--toast-error-bg);
+}
+
+.warning {
+  background-color: var(--toast-warning-bg);
+}
+
+.info {
+  background-color: var(--toast-info-bg);
+}
+
+.custom {
+  background-color: var(--custom-color, var(--toast-custom-bg));
+}
+
+/* Focus styles for accessibility */
+.container:focus {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.container:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: transform 0.2s ease-in-out;
+}
+
+.labels {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.235rem;
+  transition: transform 0.2s ease-in-out;
+}
+
+.labels p {
+  color: var(--text-color);
+}
+
+.toastStyleBar:hover .labels,
+.toastStyleBar:hover .icon {
+  transform: translateX(0.25rem);
+}
+
+.title {
+  font-weight: 600;
+  margin: 0;
+}
+
+.description {
+  font-size: 0.875rem;
+  opacity: var(--toast-description-opacity);
+  margin: 0;
+}
+
+.closeButton {
+  transition: transform 0.2s ease-in-out;
+}
+
+.toastStyleBar:hover .closeButton {
+  transform: translateX(-0.25rem);
+}
+
+.closeButton:focus {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .container {
+    transition-duration: 0.15s;
+  }
+}
+
+/* Toast style variants */
+.toastStyleBar {
+  border-radius: 0;
+  box-shadow: none;
+  border-bottom: 1px solid var(--toast-border);
+}
+
+.toastStyleFull {
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px var(--toast-shadow);
+}
+
+.toastStyleNotification {
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px var(--toast-shadow);
+}
+
+.toastStyleNotification:hover {
+  scale: 1.02;
+}
+.toastStyleFull:hover {
+  scale: 1.005;
+}
+</style>

package/src/components/dialogs/Toast/ToastContainer.vue

@@ -0,0 +1,330 @@
+<!-- ToastContainer.vue -->
+<script setup lang="ts">
+import { computed, ref, watch, nextTick, onMounted, onUnmounted } from "vue";
+import { useToast } from "./useToast";
+import Toast from "./Toast.vue";
+import type { ToastInstance } from "./types";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+
+// Register GSAP plugin
+gsap.registerPlugin(Flip);
+
+const { toasts, removeToast, toastStyle } = useToast();
+const containerRef = ref<HTMLElement>();
+
+// Track which toasts have been animated in
+const animatedToasts = new Set<string>();
+
+// Track auto-dismiss timeouts
+const autoDismissTimeouts = new Map<string, NodeJS.Timeout>();
+
+const handleDismiss = async (id: string) => {
+  // Clear any auto-dismiss timeout for this toast
+  const existingTimeout = autoDismissTimeouts.get(id);
+  if (existingTimeout) {
+    clearTimeout(existingTimeout);
+    autoDismissTimeouts.delete(id);
+  }
+
+  // Find the toast element that's being removed
+  const toastEl = containerRef.value?.querySelector(`[data-toast-id="${id}"]`);
+
+  if (toastEl) {
+    // Get the toast position for animation direction
+    const isTop = toastEl.parentElement?.classList.contains("topGroup");
+
+    // Animate out the specific toast
+    await gsap.to(toastEl, {
+      opacity: 0,
+      y: isTop ? -100 : 100,
+      scale: 0.95,
+      filter: "blur(8px)",
+      duration: 0.4,
+      ease: "power2.in",
+    });
+
+    // Capture state of remaining toasts
+    const remainingToasts = containerRef.value?.querySelectorAll(
+      '.toast-wrapper:not([data-toast-id="' + id + '"])'
+    );
+    const state = remainingToasts ? Flip.getState(remainingToasts) : null;
+
+    // Remove the toast
+    removeToast(id);
+    animatedToasts.delete(id);
+
+    // Animate remaining toasts to new positions
+    await nextTick();
+    if (remainingToasts && remainingToasts.length > 0 && state) {
+      Flip.from(state, {
+        duration: 0.4,
+        ease: "power2.inOut",
+        stagger: 0.01,
+      });
+    }
+  } else {
+    // Fallback if element not found
+    removeToast(id);
+    animatedToasts.delete(id);
+  }
+};
+
+// Group toasts by position for proper stacking
+const toastsByPosition = computed(() => {
+  const grouped: Record<string, ToastInstance[]> = {
+    Top: [],
+    Bottom: [],
+  };
+
+  toasts.value.forEach((toast) => {
+    const position = toast.position || "Top";
+    grouped[position].push(toast);
+  });
+
+  return grouped;
+});
+
+// Animate new toasts
+const animateNewToasts = async () => {
+  await nextTick();
+
+  const newToasts = containerRef.value?.querySelectorAll(".toast-wrapper");
+  let delay = 0;
+
+  newToasts?.forEach((toastEl) => {
+    const id = toastEl.getAttribute("data-toast-id");
+    if (id && !animatedToasts.has(id)) {
+      animatedToasts.add(id);
+
+      // Determine direction based on position
+      const isTop = toastEl.parentElement?.classList.contains("topGroup");
+
+      gsap.fromTo(
+        toastEl,
+        {
+          opacity: 0,
+          y: isTop ? -100 : 100,
+          scale: 0.9,
+        },
+        {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          duration: 0.5,
+          delay: delay,
+          ease: "back.out(1.2)",
+        }
+      );
+
+      delay += 0.05;
+    }
+  });
+};
+
+// Setup auto-dismiss for toasts
+const setupAutoDismiss = (toast: ToastInstance) => {
+  // Clear any existing timeout for this toast
+  const existingTimeout = autoDismissTimeouts.get(toast.id);
+  if (existingTimeout) {
+    clearTimeout(existingTimeout);
+    autoDismissTimeouts.delete(toast.id);
+  }
+
+  // Only setup auto-dismiss if duration is greater than 0
+  if (toast.duration && toast.duration > 0) {
+    const timeout = setTimeout(() => {
+      handleDismiss(toast.id);
+      autoDismissTimeouts.delete(toast.id);
+    }, toast.duration);
+
+    autoDismissTimeouts.set(toast.id, timeout);
+  }
+};
+
+// Watch for changes in toasts
+watch(
+  () => toasts.value,
+  (newToasts) => {
+    animateNewToasts();
+
+    // Setup auto-dismiss for new toasts
+    newToasts.forEach((toast) => {
+      if (!autoDismissTimeouts.has(toast.id)) {
+        setupAutoDismiss(toast);
+      }
+    });
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  animateNewToasts();
+
+  // Setup auto-dismiss for existing toasts
+  toasts.value.forEach((toast) => {
+    setupAutoDismiss(toast);
+  });
+});
+
+onUnmounted(() => {
+  // Clear all timeouts when component is unmounted
+  autoDismissTimeouts.forEach((timeout) => {
+    clearTimeout(timeout);
+  });
+  autoDismissTimeouts.clear();
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="toasts.length > 0"
+      ref="containerRef"
+      :class="[
+        $style.container,
+        $style[
+          `toastStyle${
+            toastStyle.charAt(0).toUpperCase() + toastStyle.slice(1)
+          }`
+        ],
+      ]"
+      role="region"
+      aria-label="Notifications"
+      aria-live="polite"
+    >
+      <!-- Top positioned toasts -->
+      <div :class="[$style.toastGroup, $style.topGroup, 'topGroup']">
+        <div
+          v-for="(toast, index) in toastsByPosition.Top"
+          :key="toast.id"
+          :data-toast-id="toast.id"
+          :class="$style.toastWrapper"
+          class="toast-wrapper"
+          :style="{
+            zIndex: 999 - index,
+          }"
+        >
+          <Toast
+            :toast="toast"
+            :toastStyle="toastStyle"
+            @dismiss="handleDismiss"
+          />
+        </div>
+      </div>
+
+      <!-- Bottom positioned toasts -->
+      <div :class="[$style.toastGroup, $style.bottomGroup, 'bottomGroup']">
+        <div
+          v-for="(toast, index) in toastsByPosition.Bottom"
+          :key="toast.id"
+          :data-toast-id="toast.id"
+          :class="$style.toastWrapper"
+          class="toast-wrapper"
+          :style="{
+            zIndex: 999 - index,
+          }"
+        >
+          <Toast
+            :toast="toast"
+            :toastStyle="toastStyle"
+            @dismiss="handleDismiss"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style module>
+.container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 999;
+}
+
+.toastGroup {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+}
+
+.toastStyleBar .toastGroup {
+  padding: 0;
+}
+
+.toastStyleFull .toastGroup {
+  padding: 1rem;
+  gap: 1rem;
+}
+
+.toastStyleNotification .toastGroup {
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.topGroup {
+  top: 0;
+  display: flex;
+}
+
+.toastStyleNotification .topGroup {
+  justify-content: end;
+  align-items: end;
+  flex-direction: column;
+}
+
+.bottomGroup {
+  bottom: 0;
+  flex-direction: column-reverse;
+}
+
+.toastStyleNotification .bottomGroup {
+  justify-content: start;
+  align-items: end;
+}
+
+.toastWrapper {
+  pointer-events: auto;
+  width: 100%;
+  display: flex;
+}
+
+.toastStyleBar .toastWrapper {
+  width: 100%;
+  max-width: 100%;
+}
+
+.toastStyleFull .toastWrapper {
+  width: 100%;
+  max-width: 100%;
+}
+
+.toastStyleNotification .toastWrapper {
+  max-width: 360px;
+}
+
+/* Focus management */
+.toastWrapper:focus-within {
+  z-index: 1000;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .toastGroup {
+    padding: 0.5rem;
+  }
+
+  .toastWrapper {
+    max-width: calc(100vw - 1rem);
+  }
+}
+</style>

package/src/components/dialogs/Toast/theme.css

@@ -0,0 +1,44 @@
+/* Light theme using Colors */
+:root {
+  /* Toast type colors */
+  --toast-success-bg: #30a46c; /* green9 - success color */
+  --toast-error-bg: #e5484d; /* red9 - error color */
+  --toast-warning-bg: #ffe629; /* yellow9 - warning color */
+  --toast-info-bg: #5b5bd6; /* violet9 - info color */
+  --toast-custom-bg: #6b7280; /* gray9 - fallback for custom colors */
+
+  /* Toast shadow colors */
+  --toast-shadow: rgba(
+    0,
+    0,
+    0,
+    0.08
+  ); /* blackA6 - lighter shadow for light mode */
+  --toast-border: rgba(
+    0,
+    0,
+    0,
+    0.08
+  ); /* blackA6 - lighter border for light mode */
+
+  /* Toast description opacity */
+  --toast-description-opacity: 0.8; /* slightly more visible in light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Toast type colors */
+  --toast-success-bg: #30a46c; /* green9 - success color */
+  --toast-error-bg: #e5484d; /* red9 - error color */
+  --toast-warning-bg: #ffe629; /* yellow9 - warning color */
+  --toast-info-bg: #5b5bd6; /* violet9 - info color */
+  --toast-custom-bg: #6b7280; /* gray9 - fallback for custom colors */
+
+  /* Toast shadow colors */
+  --toast-shadow: rgba(0, 0, 0, 0.15); /* Original dark mode value */
+  --toast-border: rgba(0, 0, 0, 0.15); /* Original dark mode value */
+
+  /* Toast description opacity */
+  --toast-description-opacity: 0.9; /* Original dark mode value */
+}

package/src/components/dialogs/Toast/types.ts

@@ -0,0 +1,46 @@
+// types.ts
+export type BarPosition = "Top" | "Bottom";
+export type ToastType = "success" | "error" | "warning" | "info";
+
+export interface ToastAction {
+  label: string;
+  action: () => void;
+  style?: "primary" | "secondary";
+}
+
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  iconName?: string;
+  position?: BarPosition;
+  toastType?: ToastType | string; // string allows custom colors
+  duration?: number; // Auto dismiss duration in ms (0 = no auto dismiss)
+  dismissible?: boolean;
+  actions?: ToastAction[]; // Optional action buttons
+  onDismiss?: () => void; // Callback when toast is dismissed
+  className?: string; // Custom CSS class
+  role?: "alert" | "status"; // ARIA role
+}
+
+export interface ToastInstance
+  extends Required<
+    Omit<ToastOptions, "actions" | "onDismiss" | "className" | "role">
+  > {
+  id: string;
+  show: boolean;
+  actions?: ToastAction[];
+  onDismiss?: () => void;
+  className?: string;
+  role?: "alert" | "status";
+}
+
+// Preset configurations for common scenarios
+export const ToastPresets = {
+  quick: { duration: 2000 } as Partial<ToastOptions>,
+  persistent: { duration: 0, dismissible: true } as Partial<ToastOptions>,
+  important: {
+    duration: 0,
+    dismissible: false,
+    role: "alert",
+  } as Partial<ToastOptions>,
+} as const;