@umbra.ui/core 0.3.0 → 0.4.0

package/dist/components/controls/InlineDropdown/InlineDropdown.vue

@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import {
+  ref,
+  onMounted,
+  onBeforeUpdate,
+  type ComponentPublicInstance,
+} from "vue";
+import { ChevronRightIcon, CheckIcon } from "@umbra.ui/icons";
+import gsap from "gsap";
+import { Flip } from "gsap/Flip";
+import "./theme.css";
+gsap.registerPlugin(Flip);
+
+export interface DropdownItem {
+  id: string;
+  title: string;
+}
+
+interface Props {
+  items: DropdownItem[];
+  placeholder?: string;
+  modelValue?: DropdownItem | null;
+}
+
+interface Emits {
+  (e: "update:modelValue", value: DropdownItem | null): void;
+  (e: "itemSelected", value: DropdownItem): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Choose an option",
+  modelValue: null,
+});
+
+const emit = defineEmits<Emits>();
+
+const selectedItem = ref<DropdownItem | null>(props.modelValue);
+const selectItem = (item: DropdownItem) => {
+  const isSelected = selectedItem.value?.id === item.id;
+  if (isSelected) {
+    selectedItem.value = null;
+    emit("update:modelValue", null);
+    toggleItems();
+    return;
+  }
+
+  selectedItem.value = item;
+  emit("update:modelValue", item);
+  emit("itemSelected", item);
+  toggleItems();
+};
+
+const itemsInDrawer = ref(true);
+const drawerRef = ref<HTMLElement | null>(null);
+const listRef = ref<HTMLElement | null>(null);
+const itemRefs = ref<HTMLElement[]>([]);
+
+const setItemRef = (el: Element | ComponentPublicInstance | null) => {
+  if (el instanceof HTMLElement) {
+    itemRefs.value.push(el);
+  }
+};
+
+onBeforeUpdate(() => {
+  itemRefs.value = [];
+});
+
+const toggleItems = () => {
+  const drawer = drawerRef.value;
+  const itemList = listRef.value;
+
+  if (!drawer || !itemList) {
+    console.error("Identity item drawer or item list not found");
+    return;
+  }
+
+  // Collect all item elements
+  const targets = itemRefs.value;
+
+  if (targets.length === 0) return;
+
+  // Determine current location by checking the parent of the first item
+  const isInDrawer = targets[0].parentElement === drawer;
+  const destination = isInDrawer ? itemList : drawer;
+
+  // Capture the INITIAL state BEFORE moving anything (including opacity)
+  const state = Flip.getState([...targets, itemList, drawer], {
+    props: "opacity",
+  });
+
+  // Move all elements to their destination and set target opacity
+  for (const target of targets) {
+    destination.appendChild(target);
+    // Set opacity on individual targets, not the container
+    gsap.set(target, { opacity: isInDrawer ? 1 : 0 });
+  }
+
+  // Update reactive state
+  itemsInDrawer.value = !isInDrawer;
+
+  // Animate from the captured initial state to current positions (including opacity)
+  Flip.from(state, {
+    duration: 0.3,
+    ease: "power1.inOut",
+  }).then(() => {
+    console.log("Animation complete");
+  });
+};
+
+onMounted(() => {
+  for (const itemElement of itemRefs.value) {
+    itemElement.style.opacity = "0";
+  }
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div ref="drawerRef" :class="$style.item_drawer">
+      <div
+        :ref="setItemRef"
+        :class="[
+          $style.item,
+          selectedItem?.title === item.title ? $style.item_selected : '',
+        ]"
+        v-for="item in items"
+        :key="item.title"
+        @click="selectItem(item)"
+      >
+        <p>{{ item.title }}</p>
+        <CheckIcon
+          v-if="selectedItem?.title === item.title"
+          color="white"
+          size="16"
+        />
+      </div>
+    </div>
+    <div :class="$style.identity_card">
+      <div
+        :class="[
+          $style.button,
+          !itemsInDrawer ? $style.button_drawer_open : '',
+          selectedItem ? $style.button_selected_value : '',
+        ]"
+        @click="toggleItems"
+      >
+        <p class="body">{{ selectedItem?.title ?? placeholder }}</p>
+        <div
+          :class="$style.icon"
+          :style="{
+            transform: itemsInDrawer ? 'rotate(0)' : 'rotate(90deg)',
+          }"
+        >
+          <ChevronRightIcon :color="selectedItem ? 'black' : 'white'" />
+        </div>
+      </div>
+    </div>
+    <div
+      ref="listRef"
+      :class="[$style.item_list, itemsInDrawer ? $style.item_list_hidden : '']"
+    ></div>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.471rem;
+  flex-grow: 1;
+  background-color: var(--InlineDropdown-button-bg);
+  font-weight: 700;
+  cursor: default;
+  user-select: none;
+  transition: 0.3s ease-in-out color, 0.3s ease-in-out background-color,
+    0.3s ease-in-out transform, 0.3s ease-in-out border-radius,
+    0.3s ease-in-out border;
+  transform: scale(1);
+  will-change: transform;
+  padding-left: 0.882rem;
+  padding-right: 0.882rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  font-size: var(--callout);
+  border: 1px solid var(--InlineDropdown-border);
+  border-radius: 0.471rem;
+}
+.button > p {
+  color: var(--InlineDropdown-button-text-color);
+}
+.button_drawer_open {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.button_selected_value {
+  background-color: var(--InlineDropdown-button-selected-bg);
+  border: 1px solid var(--InlineDropdown-button-selected-border);
+}
+.button_selected_value > p,
+.button_selected_value > svg {
+  color: var(--InlineDropdown-button-selected-text-color);
+}
+.button_selected_value:hover {
+  background-color: var(--InlineDropdown-button-selected-hover-bg);
+}
+.item_drawer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "content";
+}
+.identity_card {
+  display: flex;
+  align-items: center;
+  gap: 0.471rem;
+  z-index: 2;
+}
+.identity_card > :first-child {
+  width: 100%;
+  height: 100%;
+}
+
+.icon {
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0.6;
+  transition: transform 0.2s ease;
+}
+.icon > svg {
+  width: 1rem;
+  height: 1rem;
+}
+.item_list {
+  display: flex;
+  flex-direction: column;
+  transition: padding-top 0.3s ease, border 0.3s ease;
+}
+.item_list > :last-child {
+  border-bottom-left-radius: 0.471rem;
+  border-bottom-right-radius: 0.471rem;
+}
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  grid-area: content;
+  border-bottom: 1px solid var(--InlineDropdown-border);
+  border-left: 1px solid var(--InlineDropdown-border);
+  border-right: 1px solid var(--InlineDropdown-border);
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.471rem;
+  padding-bottom: 0.471rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  user-select: none;
+  width: 100%;
+  background-color: var(--InlineDropdown-item-bg);
+}
+.item:hover {
+  background-color: var(--InlineDropdown-item-hover-bg);
+}
+.item_selected {
+  background-color: var(--InlineDropdown-item-selected-bg);
+  border-top: 1px solid var(--InlineDropdown-item-selected-border);
+  border-bottom: 1px solid var(--InlineDropdown-item-selected-border);
+}
+/*  targets the item immediately before the selected one and removes its bottom border */
+.item:has(+ .item_selected) {
+  border-bottom: none;
+}
+.item > svg {
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.7;
+}
+</style>

package/dist/components/controls/InlineDropdown/README.md

@@ -0,0 +1,35 @@
+## InlineDropdown
+
+Compact dropdown with inline list animation for quick selection.
+
+### Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { InlineDropdown } from "@umbra.ui/core";
+
+const items = [
+  { id: "a", title: "Alpha" },
+  { id: "b", title: "Beta" },
+  { id: "c", title: "Gamma" },
+];
+
+const selected = ref(items[0]);
+</script>
+
+<template>
+  <InlineDropdown v-model="selected" :items="items" />
+</template>
+```
+
+### Props
+
+- `items`: list of `{ id, title }` items.
+- `modelValue`: selected item (for `v-model`).
+- `placeholder`: text when no selection is set.
+
+### Events
+
+- `update:modelValue`: emitted on selection changes.
+- `itemSelected`: emitted with the selected item.

package/dist/components/controls/InlineDropdown/theme.css

@@ -0,0 +1,40 @@
+/* Light theme - InlineDropdown */
+:root {
+  --InlineDropdown-button-bg: #ffffff;
+  --InlineDropdown-border: rgba(0, 0, 0, 0.12);
+  --InlineDropdown-button-border: var(--InlineDropdown-border);
+  --InlineDropdown-button-text-color: #1a1d23;
+  --InlineDropdown-button-selected-bg: #e8e8e8;
+  --InlineDropdown-button-selected-border: rgba(0, 0, 0, 0.12);
+  --InlineDropdown-button-selected-text-color: #1a1d23;
+  --InlineDropdown-button-selected-hover-bg: #e0e0e0;
+
+  --InlineDropdown-item-list-border: var(--InlineDropdown-border);
+  --InlineDropdown-item-list-hidden-border: transparent;
+  --InlineDropdown-item-border: var(--InlineDropdown-border);
+  --InlineDropdown-item-bg: #ffffff;
+  --InlineDropdown-item-hover-bg: #f0f2f4;
+  --InlineDropdown-item-selected-bg: #f0f2f4;
+  --InlineDropdown-item-selected-border: rgba(0, 0, 0, 0.12);
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  --InlineDropdown-border: rgba(255, 255, 255, 0.12);
+  --InlineDropdown-button-bg: #484848;
+  --InlineDropdown-button-border: var(--InlineDropdown-border);
+  --InlineDropdown-button-text-color: #b4b4b4;
+  --InlineDropdown-button-selected-bg: #b4b4b4;
+  --InlineDropdown-button-selected-border: #eeeeee;
+  --InlineDropdown-button-selected-text-color: #111111;
+  --InlineDropdown-button-selected-hover-bg: #c9c9c9;
+
+  --InlineDropdown-item-list-border: var(--InlineDropdown-border);
+  --InlineDropdown-item-list-hidden-border: transparent;
+  --InlineDropdown-item-border: var(--InlineDropdown-border);
+  --InlineDropdown-item-bg: #484848;
+  --InlineDropdown-item-hover-bg: rgb(88, 88, 88);
+  --InlineDropdown-item-selected-bg: #606060;
+  --InlineDropdown-item-selected-border: #7b7b7b;
+}

package/dist/components/dialogs/Alert/Alert.vue

@@ -4,9 +4,30 @@
 <script setup lang="ts">
 import { watch, ref } from "vue";
 import Button from "../../controls/Button/Button.vue";
-import type { AlertAction, AlertActionType } from "./types";
 import "./theme.css";
 
+export type AlertActionType =
+  | "Primary"
+  | "Secondary"
+  | "Tertiary"
+  | "Quaternary"
+  | "Destructive"
+  | "Cancel";
+
+export interface AlertAction {
+  title: string;
+  action: (inputValue?: string) => void | string | Promise<void | string>;
+  type: AlertActionType;
+}
+
+export interface AlertTextFieldConfig {
+  label?: string;
+  placeholder?: string;
+  type?: "text" | "password";
+  defaultValue?: string;
+  required?: boolean;
+}
+
 // Props for customization
 const props = defineProps({
   show: {
@@ -26,6 +47,11 @@ const props = defineProps({
     required: false,
     default: () => [{ title: "Ok", action: () => {}, type: "Cancel" }],
   },
+  textFieldConfig: {
+    type: Object as () => AlertTextFieldConfig,
+    required: false,
+    default: undefined,
+  },
 });
 
 const emit = defineEmits(["update:show"]);
@@ -44,9 +70,13 @@ watch(
 const overlayOpacity = ref<number>(0);
 const popupOpacity = ref<number>(0);
 const popoverScale = ref<number>(1.1);
+const textFieldValue = ref<string>("");
+const errorMessage = ref<string>("");
 
 // Method to show the popup
 const showPopup = () => {
+  textFieldValue.value = props.textFieldConfig?.defaultValue || "";
+  errorMessage.value = "";
   setTimeout(() => {
     overlayOpacity.value = 1;
     popupOpacity.value = 1;
@@ -69,10 +99,14 @@ const buttonColor = (
   type: AlertActionType
 ): "primary" | "secondary" | "tertiary" | "quaternary" | "danger" => {
   switch (type) {
-    case "Default":
+    case "Primary":
       return "primary";
     case "Secondary":
       return "secondary";
+    case "Tertiary":
+      return "tertiary";
+    case "Quaternary":
+      return "quaternary";
     case "Cancel":
       return "tertiary";
     case "Destructive":
@@ -87,7 +121,7 @@ const buttonOrder = (type: AlertActionType, index: number) => {
       return props.actions.length;
     }
     return -1;
-  } else if (type === "Default") {
+  } else if (type === "Primary") {
     if (props.actions.length > 2) {
       return -1;
     }
@@ -95,9 +129,27 @@ const buttonOrder = (type: AlertActionType, index: number) => {
   }
   return index;
 };
-const onClick = (action: AlertAction) => {
+const clearError = () => {
+  errorMessage.value = "";
+};
+
+const onClick = async (action: AlertAction) => {
+  errorMessage.value = "";
+
+  // Pass input value if textFieldConfig exists
+  const inputValue = props.textFieldConfig ? textFieldValue.value : undefined;
+
+  // Call the action and get the result
+  const result = await action.action(inputValue);
+
+  // If result is a string, show error and keep alert open
+  if (typeof result === "string") {
+    errorMessage.value = result;
+    return;
+  }
+
+  // Otherwise, dismiss the alert
   hidePopup();
-  action.action();
 };
 </script>
 <!-- ================================================================================================ -->
@@ -126,6 +178,21 @@ const onClick = (action: AlertAction) => {
           <!-- Description -->
           <p :class="[$style.description, 'body']">{{ description }}</p>
 
+          <!-- Text Field (optional) -->
+          <div v-if="textFieldConfig" :class="$style.text_field_container">
+            <input
+              v-model="textFieldValue"
+              :type="textFieldConfig.type || 'text'"
+              :placeholder="textFieldConfig.placeholder || ''"
+              :class="$style.text_field"
+              class="body"
+              @input="clearError"
+            />
+            <p v-if="errorMessage" :class="[$style.error_message, 'footnote']">
+              {{ errorMessage }}
+            </p>
+          </div>
+
           <!-- Actions -->
           <div
             :class="[
@@ -138,8 +205,10 @@ const onClick = (action: AlertAction) => {
               v-for="(action, index) in actions"
               :key="`action-${index}`"
               :style="{ order: buttonOrder(action.type, index) }"
+              :class="$style.action_item"
             >
               <Button
+                :class="$style.button"
                 :title="action.title"
                 :button-style="buttonColor(action.type)"
                 @click="onClick(action)"
@@ -164,7 +233,7 @@ const onClick = (action: AlertAction) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 10000;
   transition: 0.2s ease-in-out opacity, 0.2s ease-in-out scale;
 }
 
@@ -175,8 +244,10 @@ const onClick = (action: AlertAction) => {
   bottom: 0;
   right: 0;
   background: var(--alert-overlay-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   transition: 0.2s ease-in-out opacity;
-  z-index: 999;
+  z-index: 9999;
 }
 
 .content {
@@ -185,8 +256,8 @@ const onClick = (action: AlertAction) => {
   padding: 1.176rem;
   border-radius: 0.471rem;
   box-shadow: 0 2px 10px var(--alert-content-shadow);
-  z-index: 1001;
-  max-width: 20.588rem;
+  z-index: 10001;
+  width: 21rem;
   display: flex;
   flex-direction: column;
   gap: 0.706rem;
@@ -201,18 +272,58 @@ const onClick = (action: AlertAction) => {
   opacity: var(--alert-description-opacity);
 }
 
+.text_field_container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.471rem;
+  margin-bottom: 0.5rem;
+}
+
+.text_field {
+  min-height: 2.353rem;
+  background-color: var(--alert-text-field-bg);
+  border: 1px solid var(--alert-text-field-border);
+  outline: none;
+  padding: 0.588rem 0.882rem;
+  border-radius: 0.471rem;
+  color: var(--alert-text-field-color);
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+  text-align: center;
+}
+
+.text_field:focus {
+  background-color: var(--alert-text-field-focus-bg);
+  border-color: var(--alert-text-field-border-focused);
+}
+
+.error_message {
+  color: var(--alert-error-color);
+  margin-top: 0.235rem;
+}
+
 .single_action {
   display: flex;
-  justify-content: end;
+  width: 100%;
 }
 .binary_action {
   display: flex;
   align-items: center;
-  gap: 0.706rem;
+  gap: 1.176rem;
+  width: 100%;
 }
 .multiple_actions {
   display: flex;
   flex-direction: column;
   gap: 0.706rem;
+  width: 100%;
+}
+.action_item {
+  flex: 1;
+  display: flex;
+}
+.button {
+  flex-grow: 1;
+  width: 100%;
+  min-width: 0;
 }
 </style>

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

@@ -21,6 +21,16 @@
   /* Alert description colors */
   --alert-description-opacity: 0.7; /* slightly more visible in light mode */
 
+  /* Alert text field colors */
+  --alert-text-field-bg: #f3f4f6;
+  --alert-text-field-border: rgba(0, 0, 0, 0.1);
+  --alert-text-field-color: #1a1d23;
+  --alert-text-field-focus-bg: #ffffff;
+  --alert-text-field-border-focused: #0090ff;
+
+  /* Alert error color */
+  --alert-error-color: #e5484d;
+
   /* Alert destructive button color */
   --alert-destructive-color: #e5484d; /* red9 - destructive action color */
 }
@@ -39,6 +49,16 @@
   /* Alert description colors */
   --alert-description-opacity: 0.5; /* Original dark mode value */
 
+  /* Alert text field colors */
+  --alert-text-field-bg: #2a2a2a;
+  --alert-text-field-border: #3a3a3a;
+  --alert-text-field-color: #eeeeee;
+  --alert-text-field-focus-bg: #3a3a3a;
+  --alert-text-field-border-focused: #0090ff;
+
+  /* Alert error color */
+  --alert-error-color: #e5484d;
+
   /* Alert destructive button color */
   --alert-destructive-color: #e5484d; /* red9 - destructive action color */
 }

package/dist/components/dialogs/Toast/useToast.d.ts

@@ -23,7 +23,7 @@ export declare const useToast: () => {
         duration: number;
         dismissible: boolean;
     }[]>;
-    toastStyle: import("vue").ComputedRef<"bar" | "full" | "notification">;
+    toastStyle: import("vue").ComputedRef<"notification" | "bar" | "full">;
     addToast: (options: ToastOptions) => Promise<string>;
     removeToast: (id: string) => void;
     removeAllToasts: () => void;