@umbra.ui/core 0.1.0

package/src/components/dialogs/Alert/README.md

@@ -0,0 +1,450 @@
+# Alert
+
+A modal alert dialog component built with Vue 3 Composition API and TypeScript. The Alert component provides a flexible interface for displaying important messages, confirmations, and user interactions with customizable actions and smooth animations.
+
+## Installation/Import
+
+```typescript
+import { Alert } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- @umbra-ui/core (Button component)
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Alert, AlertAction } from "@umbra-ui/core";
+
+const showAlert = ref(false);
+
+const handleShowAlert = () => {
+  showAlert.value = true;
+};
+
+const handleCloseAlert = () => {
+  showAlert.value = false;
+};
+
+const alertActions: AlertAction[] = [
+  {
+    title: "Cancel",
+    action: handleCloseAlert,
+    type: "Cancel",
+  },
+  {
+    title: "Confirm",
+    action: () => {
+      console.log("Confirmed!");
+      handleCloseAlert();
+    },
+    type: "Default",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <button @click="handleShowAlert">Show Alert</button>
+
+    <Alert
+      :show="showAlert"
+      title="Confirm Action"
+      description="Are you sure you want to proceed with this action?"
+      :actions="alertActions"
+      @update:show="showAlert = $event"
+    />
+  </div>
+</template>
+```
+
+## Props
+
+| Prop Name     | Type            | Required | Default                                               | Description                                   |
+| ------------- | --------------- | -------- | ----------------------------------------------------- | --------------------------------------------- |
+| `show`        | `boolean`       | Yes      | -                                                     | Controls the visibility of the alert dialog   |
+| `title`       | `string`        | Yes      | -                                                     | Main title text displayed in the alert        |
+| `description` | `string`        | Yes      | -                                                     | Descriptive text explaining the alert content |
+| `actions`     | `AlertAction[]` | No       | `[{ title: "Ok", action: () => {}, type: "Cancel" }]` | Array of action buttons for the alert         |
+
+## Events
+
+| Event Name    | Payload Type | Description                                                      |
+| ------------- | ------------ | ---------------------------------------------------------------- |
+| `update:show` | `boolean`    | Emitted when the alert visibility changes, returns the new state |
+
+## Slots
+
+This component does not use slots.
+
+## Exposed Methods/Refs
+
+This component does not expose any methods or refs.
+
+## Types
+
+### AlertAction
+
+```typescript
+interface AlertAction {
+  title: string;
+  action: () => void;
+  type: AlertActionType;
+}
+```
+
+### AlertActionType
+
+```typescript
+type AlertActionType = "Default" | "Secondary" | "Destructive" | "Cancel";
+```
+
+## CSS Customization
+
+The Alert component uses CSS custom properties for easy theming and customization:
+
+```css
+/* Alert overlay colors */
+--alert-overlay-bg: rgba(0, 0, 0, 0.4);
+
+/* Alert content colors */
+--alert-content-bg: #ffffff;
+--alert-content-color: #1a1d23;
+--alert-content-shadow: rgba(0, 0, 0, 0.08);
+
+/* Alert description colors */
+--alert-description-opacity: 0.7;
+
+/* Alert destructive button color */
+--alert-destructive-color: #e5484d;
+```
+
+## Examples
+
+### Simple Confirmation Dialog
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Alert, AlertAction } from "@umbra-ui/core";
+
+const showConfirm = ref(false);
+
+const confirmActions: AlertAction[] = [
+  {
+    title: "Cancel",
+    action: () => (showConfirm.value = false),
+    type: "Cancel",
+  },
+  {
+    title: "Delete",
+    action: () => {
+      console.log("Item deleted!");
+      showConfirm.value = false;
+    },
+    type: "Destructive",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <button @click="showConfirm = true">Delete Item</button>
+
+    <Alert
+      :show="showConfirm"
+      title="Delete Item"
+      description="This action cannot be undone. Are you sure you want to delete this item?"
+      :actions="confirmActions"
+      @update:show="showConfirm = $event"
+    />
+  </div>
+</template>
+```
+
+### Information Alert
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Alert, AlertAction } from "@umbra-ui/core";
+
+const showInfo = ref(false);
+
+const infoActions: AlertAction[] = [
+  {
+    title: "Got it",
+    action: () => (showInfo.value = false),
+    type: "Default",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <button @click="showInfo = true">Show Information</button>
+
+    <Alert
+      :show="showInfo"
+      title="New Feature Available"
+      description="We've added a new feature that allows you to export your data in multiple formats. Check it out in the settings menu!"
+      :actions="infoActions"
+      @update:show="showInfo = $event"
+    />
+  </div>
+</template>
+```
+
+### Multiple Choice Alert
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Alert, AlertAction } from "@umbra-ui/core";
+
+const showMultiple = ref(false);
+
+const multipleActions: AlertAction[] = [
+  {
+    title: "Save Draft",
+    action: () => {
+      console.log("Saved as draft");
+      showMultiple.value = false;
+    },
+    type: "Secondary",
+  },
+  {
+    title: "Discard",
+    action: () => {
+      console.log("Discarded changes");
+      showMultiple.value = false;
+    },
+    type: "Cancel",
+  },
+  {
+    title: "Publish",
+    action: () => {
+      console.log("Published!");
+      showMultiple.value = false;
+    },
+    type: "Default",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <button @click="showMultiple = true">Close Editor</button>
+
+    <Alert
+      :show="showMultiple"
+      title="Unsaved Changes"
+      description="You have unsaved changes. What would you like to do?"
+      :actions="multipleActions"
+      @update:show="showMultiple = $event"
+    />
+  </div>
+</template>
+```
+
+### Form Validation Alert
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Alert, AlertAction } from "@umbra-ui/core";
+
+const showValidation = ref(false);
+const validationMessage = ref("");
+
+const validateForm = () => {
+  // Simulate form validation
+  const errors = [
+    "Email is required",
+    "Password must be at least 8 characters",
+  ];
+
+  if (errors.length > 0) {
+    validationMessage.value = errors.join(". ");
+    showValidation.value = true;
+  }
+};
+
+const validationActions: AlertAction[] = [
+  {
+    title: "OK",
+    action: () => (showValidation.value = false),
+    type: "Default",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent="validateForm">
+      <input type="email" placeholder="Email" />
+      <input type="password" placeholder="Password" />
+      <button type="submit">Submit</button>
+    </form>
+
+    <Alert
+      :show="showValidation"
+      title="Validation Error"
+      :description="validationMessage"
+      :actions="validationActions"
+      @update:show="showValidation = $event"
+    />
+  </div>
+</template>
+```
+
+### Network Error Alert
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Alert, AlertAction } from "@umbra-ui/core";
+
+const showNetworkError = ref(false);
+
+const retryConnection = () => {
+  console.log("Retrying connection...");
+  showNetworkError.value = false;
+  // Add retry logic here
+};
+
+const networkErrorActions: AlertAction[] = [
+  {
+    title: "Cancel",
+    action: () => (showNetworkError.value = false),
+    type: "Cancel",
+  },
+  {
+    title: "Retry",
+    action: retryConnection,
+    type: "Default",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <button @click="showNetworkError = true">Simulate Network Error</button>
+
+    <Alert
+      :show="showNetworkError"
+      title="Connection Error"
+      description="Unable to connect to the server. Please check your internet connection and try again."
+      :actions="networkErrorActions"
+      @update:show="showNetworkError = $event"
+    />
+  </div>
+</template>
+```
+
+### Settings Change Alert
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Alert, AlertAction } from "@umbra-ui/core";
+
+const showSettingsAlert = ref(false);
+const settingName = ref("Dark Mode");
+
+const applySetting = () => {
+  console.log(`Applied setting: ${settingName.value}`);
+  showSettingsAlert.value = false;
+};
+
+const revertSetting = () => {
+  console.log(`Reverted setting: ${settingName.value}`);
+  showSettingsAlert.value = false;
+};
+
+const settingsActions: AlertAction[] = [
+  {
+    title: "Revert",
+    action: revertSetting,
+    type: "Cancel",
+  },
+  {
+    title: "Apply",
+    action: applySetting,
+    type: "Default",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <button @click="showSettingsAlert = true">Change Setting</button>
+
+    <Alert
+      :show="showSettingsAlert"
+      title="Setting Changed"
+      :description="`You've changed the ${settingName} setting. Would you like to apply this change?`"
+      :actions="settingsActions"
+      @update:show="showSettingsAlert = $event"
+    />
+  </div>
+</template>
+```
+
+### Logout Confirmation
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Alert, AlertAction } from "@umbra-ui/core";
+
+const showLogout = ref(false);
+
+const logout = () => {
+  console.log("User logged out");
+  showLogout.value = false;
+  // Add logout logic here
+};
+
+const logoutActions: AlertAction[] = [
+  {
+    title: "Stay Logged In",
+    action: () => (showLogout.value = false),
+    type: "Cancel",
+  },
+  {
+    title: "Logout",
+    action: logout,
+    type: "Destructive",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <button @click="showLogout = true">Logout</button>
+
+    <Alert
+      :show="showLogout"
+      title="Logout Confirmation"
+      description="Are you sure you want to logout? You will need to sign in again to access your account."
+      :actions="logoutActions"
+      @update:show="showLogout = $event"
+    />
+  </div>
+</template>
+```
+
+## Notes
+
+- The component uses Vue's `Teleport` to render the alert outside the component tree, ensuring proper z-index layering
+- The alert includes smooth fade and scale animations for a polished user experience
+- Button ordering is automatically handled based on action types (Cancel buttons are positioned appropriately)
+- The component supports both light and dark themes through CSS custom properties
+- The alert is fully accessible and supports keyboard navigation
+- The overlay prevents interaction with the underlying content when the alert is visible
+- Action types automatically map to appropriate button styles (Destructive → danger, Default → primary, etc.)

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

@@ -0,0 +1,44 @@
+/* Light theme using Colors */
+:root {
+  /* Alert overlay colors */
+  --alert-overlay-bg: rgba(
+    0,
+    0,
+    0,
+    0.4
+  ); /* blackA8 - lighter overlay for light mode */
+
+  /* Alert content colors */
+  --alert-content-bg: #ffffff; /* white background for light mode */
+  --alert-content-color: #1a1d23; /* gray12 - dark text for light mode */
+  --alert-content-shadow: rgba(
+    0,
+    0,
+    0,
+    0.08
+  ); /* blackA6 - lighter shadow for light mode */
+
+  /* Alert description colors */
+  --alert-description-opacity: 0.7; /* slightly more visible in light mode */
+
+  /* Alert destructive button color */
+  --alert-destructive-color: #e5484d; /* red9 - destructive action color */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Alert overlay colors */
+  --alert-overlay-bg: rgba(0, 0, 0, 0.7); /* Original dark mode value */
+
+  /* Alert content colors */
+  --alert-content-bg: #222222; /* Original dark mode value */
+  --alert-content-color: #eeeeee; /* Original dark mode value */
+  --alert-content-shadow: rgba(0, 0, 0, 0.1); /* Original dark mode value */
+
+  /* Alert description colors */
+  --alert-description-opacity: 0.5; /* Original dark mode value */
+
+  /* Alert destructive button color */
+  --alert-destructive-color: #e5484d; /* red9 - destructive action color */
+}

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

@@ -0,0 +1,11 @@
+export type AlertActionType =
+  | "Default"
+  | "Secondary"
+  | "Destructive"
+  | "Cancel";
+
+export interface AlertAction {
+  title: string;
+  action: () => void;
+  type: AlertActionType;
+}