@umbra.ui/core 0.1.0

package/src/components/inputs/search/theme.css

@@ -0,0 +1,187 @@
+/* Light theme using Colors */
+:root {
+  /* SearchBar colors */
+  --search-bar-bg: #ffffff;
+  --search-bar-text: #1f2937; /* gray8 - dark text for light mode */
+  --search-bar-placeholder: #6b7280; /* gray5 - placeholder text for light mode */
+  --search-bar-border: 1px solid #d9d9d9; /* blackA6 - search bar border for light mode */
+  --search-bar-focus-border: #0090ff; /* blue9 - focus border color */
+  --search-bar-shadow: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - lighter shadow for light mode */
+  --search-bar-inset-shadow: none;
+
+  /* SearchResults colors */
+  --search-results-bg: #ffffff; /* white - light background for light mode */
+  --search-results-border: 1px solid rgba(0, 0, 0, 0.1); /* blackA6 - search results border for light mode */
+  --search-results-shadow: transparent;
+  --search-results-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.8
+  ); /* whiteA8 - inset highlight for light mode */
+
+  /* SearchResults subheader colors */
+  --search-subheader-bg: #f9fafb; /* gray0 - very light background for light mode */
+  --search-subheader-border: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - lighter border for light mode */
+  --search-subheader-text: #374151; /* gray7 - dark text for light mode */
+
+  /* SearchResults result colors */
+  --search-result-bg: #ffffff; /* white - light background for light mode */
+  --search-result-hover-bg: rgba(
+    0,
+    0,
+    0,
+    0.05
+  ); /* blackA6 - hover background for light mode */
+  --search-result-border: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - border for light mode */
+  --search-result-text: #1f2937; /* gray8 - dark text for light mode */
+  --search-result-secondary-text: #6b7280; /* gray5 - secondary text for light mode */
+
+  /* SearchResults icon colors */
+  --search-icon-bg: #f3f4f6; /* gray1 - light background for light mode */
+  --search-icon-border: #d1d5db; /* gray3 - border for light mode */
+
+  /* SearchResults footnote colors */
+  --search-footnote-bg: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - background for light mode */
+
+  /* SearchResults nothing found colors */
+  --search-nothing-text: #6b7280; /* gray5 - text for light mode */
+
+  /* SearchResults load more colors */
+  --search-load-more-bg: rgba(
+    0,
+    0,
+    0,
+    0.05
+  ); /* blackA6 - background for light mode */
+  --search-load-more-hover-bg: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA8 - hover background for light mode */
+  --search-load-more-text: #374151; /* gray7 - text for light mode */
+
+  /* SearchResults highlight colors */
+  --search-highlight-bg: rgba(
+    255,
+    214,
+    10,
+    0.3
+  ); /* yellow with reduced opacity for light mode */
+
+  /* SearchResults overlay colors */
+  --search-overlay-bg: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA8 - lighter overlay for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* SearchBar colors */
+  --search-bar-bg: #484848; /* Original dark mode value */
+  --search-bar-text: #ffffff; /* Original dark mode value */
+  --search-bar-placeholder: #b4b4b4; /* Original dark mode value */
+  --search-bar-border: 1px solid transparent; /* transparent border for dark mode */
+  --search-bar-focus-border: #0090ff; /* blue9 - focus border color */
+  --search-bar-shadow: rgba(0, 0, 0, 0.21); /* Original dark mode value */
+  --search-bar-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+
+  /* SearchResults colors */
+  --search-results-bg: #484848; /* Original dark mode value */
+  --search-results-border: none; /* no border for dark mode */
+  --search-results-shadow: rgba(0, 0, 0, 0.21); /* Original dark mode value */
+  --search-results-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+
+  /* SearchResults subheader colors */
+  --search-subheader-bg: #5a5a5a; /* Original dark mode value */
+  --search-subheader-border: rgba(0, 0, 0, 0.25); /* Original dark mode value */
+  --search-subheader-text: #eeeeee; /* Original dark mode value */
+
+  /* SearchResults result colors */
+  --search-result-bg: #484848; /* Original dark mode value */
+  --search-result-hover-bg: rgba(
+    255,
+    255,
+    255,
+    0.05
+  ); /* Original dark mode value */
+  --search-result-border: rgba(
+    255,
+    255,
+    255,
+    0.12
+  ); /* Original dark mode value */
+  --search-result-text: #eeeeee; /* Original dark mode value */
+  --search-result-secondary-text: #b4b4b4; /* Original dark mode value */
+
+  /* SearchResults icon colors */
+  --search-icon-bg: #48484a; /* Original dark mode value */
+  --search-icon-border: #ffffff; /* Original dark mode value */
+
+  /* SearchResults footnote colors */
+  --search-footnote-bg: rgba(
+    255,
+    255,
+    255,
+    0.25
+  ); /* Original dark mode value */
+
+  /* SearchResults nothing found colors */
+  --search-nothing-text: #eeeeee; /* Original dark mode value */
+
+  /* SearchResults load more colors */
+  --search-load-more-bg: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+  --search-load-more-hover-bg: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+  --search-load-more-text: #eeeeee; /* Original dark mode value */
+
+  /* SearchResults highlight colors */
+  --search-highlight-bg: rgba(255, 214, 10, 0.5); /* Original dark mode value */
+
+  /* SearchResults overlay colors */
+  --search-overlay-bg: rgba(0, 0, 0, 0.7); /* Original dark mode value */
+}

package/src/components/inputs/search/types.ts

@@ -0,0 +1,8 @@
+export interface SearchResult {
+  id: string;
+  icon?: string;
+  title: string;
+  description: string;
+  caption: string;
+  footnote: string;
+}

package/src/components/inputs/theme.css

@@ -0,0 +1,102 @@
+/* Light theme */
+:root {
+  /* Error */
+  --input-error-bg: #fef2f2;
+  --input-error-text: #dc2626;
+  --input-error-border: #fecaca;
+
+  /* Text */
+  --input-text-empty: #6b7280;
+  --input-text-filled: #1f2937;
+  --input-text-error: #dc2626;
+
+  /* Placeholder */
+  --input-placeholder: rgba(107, 114, 128, 0.5);
+  --input-placeholder-filled: rgba(107, 114, 128, 0.7);
+
+  /* Focus */
+  --input-focus-border: #0090ff;
+
+  /* Success */
+  --input-success-color: #30a46c;
+
+  /* Readonly */
+  --input-readonly-bg: #f4faff;
+  --input-readonly-text: #6b7280;
+  --input-readonly-border: #acd8fc;
+  --input-readonly-placeholder: rgba(107, 114, 128, 0.4);
+
+  /* Disabled */
+  --input-disabled-bg: #f9f9f9;
+  --input-disabled-text: #d9d9d9;
+  --input-disabled-border: #e1e5e9;
+  --input-disabled-placeholder: rgba(156, 163, 175, 0.5);
+
+  /* Default */
+  --input-background-normal: #ffffff;
+  --input-background-filled: #f0f0f0;
+  --input-border: 1px solid #d9d9d9;
+  --input-border-filled: rgba(0, 0, 0, 0.15);
+  --input-border-radius: 0.471rem;
+
+  --default-tag-border: #d1d5db;
+  --default-tag-border-radius: 0.375rem;
+  --default-tag-padding: 0.235rem 0.588rem;
+  --default-tag-font-size: 0.875rem;
+  --default-tag-font-weight: 400;
+  --default-tag-color: #1f2937;
+  --default-tag-background-color: #f3f4f6;
+  --default-tag-hover-background-color: #e5e7eb;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Error */
+  --input-error-bg: #3b1219;
+  --input-error-text: #ff9592;
+  --input-error-border: #500f1c;
+
+  /* Text */
+  --input-text-empty: #eeeeee;
+  --input-text-filled: black;
+  --input-text-error: #eeeeee;
+
+  /* Placeholder */
+  --input-placeholder: color-mix(in srgb, #eeeeee 50%, transparent);
+  --input-placeholder-filled: #484848;
+
+  /* Focus */
+  --input-focus-border: #0090ff;
+
+  /* Success */
+  --input-success-color: #30a46c;
+
+  /* Readonly */
+  --input-readonly-bg: #111927;
+  --input-readonly-text: #70b8ff;
+  --input-readonly-border: #0d2847;
+  --input-readonly-placeholder: rgba(156, 163, 175, 0.4);
+
+  /* Disabled */
+  --input-disabled-bg: #313131;
+  --input-disabled-text: #6e6e6e;
+  --input-disabled-border: #606060;
+  --input-disabled-placeholder: rgba(107, 114, 128, 0.5);
+
+  /* Default */
+  --input-background-normal: #484848;
+  --input-background-filled: #b4b4b4;
+  --input-border: 1px solid #606060;
+  --input-border-filled: #eeeeee;
+  --input-border-radius: 0.471rem;
+
+  --default-tag-border: #7b7b7b;
+  --default-tag-border-radius: 0.375rem;
+  --default-tag-padding: 0.235rem 0.588rem;
+  --default-tag-font-size: 0.875rem;
+  --default-tag-font-weight: 400;
+  --default-tag-color: #eeeeee;
+  --default-tag-background-color: #606060;
+  --default-tag-hover-background-color: #e5e7eb;
+}

package/src/components/menus/ActionMenu/ActionMenu.vue

@@ -0,0 +1,383 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick, onUnmounted, watch, computed } from "vue";
+import {
+  offset,
+  flip,
+  shift,
+  size,
+  computePosition,
+  autoUpdate,
+} from "@floating-ui/vue";
+import { icons, type IconKey } from "@umbra-ui/icons";
+import "./theme.css";
+
+export interface ActionMenuItem {
+  icon?: IconKey;
+  title: string;
+  action: () => void;
+  isDestructive?: boolean;
+}
+
+// Props
+export interface Props {
+  items: ActionMenuItem[];
+  modelValue?: boolean;
+  contextMenu?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  contextMenu: false,
+});
+
+// Emits
+const emits = defineEmits<{
+  "update:modelValue": [value: boolean];
+  "item-click": [item: ActionMenuItem];
+}>();
+
+// State
+const showPopover = ref<boolean>(props.modelValue || false);
+
+// Watch for changes to modelValue prop
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopover.value = newValue || false;
+  }
+);
+
+// Element references
+const trigger = ref<HTMLElement | null>(null);
+const popup = ref<HTMLElement | null>(null);
+const overlay = ref<HTMLElement | null>(null);
+const contextTrigger = ref<HTMLElement | null>(null);
+
+// Position tracking
+let cleanupAutoUpdate: (() => void) | null = null;
+
+// Lifecycle
+onUnmounted(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+});
+
+// Event handlers
+const onItemClick = (item: ActionMenuItem) => {
+  item.action();
+  emits("item-click", item);
+  togglePopover();
+};
+
+const handleOverlayClick = () => {
+  togglePopover();
+};
+
+const handleContextMenu = (event: MouseEvent) => {
+  if (!props.contextMenu) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  // Store the clicked element's position for menu alignment
+  const clickedElement = event.currentTarget as HTMLElement;
+  const rect = clickedElement.getBoundingClientRect();
+
+  // Determine best placement based on available space
+  const viewportWidth = window.innerWidth;
+  const menuWidth = 200; // Approximate menu width
+  const rightSpace = viewportWidth - rect.right;
+  const leftSpace = rect.left;
+
+  // Prefer right placement if there's enough space, otherwise use left
+  const preferredPlacement = rightSpace >= menuWidth ? "right" : "left";
+
+  // Set the trigger position to align with the clicked element
+  if (contextTrigger.value) {
+    contextTrigger.value.style.position = "fixed";
+
+    if (preferredPlacement === "right") {
+      contextTrigger.value.style.left = `${rect.right}px`;
+      contextTrigger.value.style.top = `${rect.top}px`;
+    } else {
+      contextTrigger.value.style.left = `${rect.left}px`;
+      contextTrigger.value.style.top = `${rect.top}px`;
+    }
+
+    contextTrigger.value.style.width = "1px";
+    contextTrigger.value.style.height = `${rect.height}px`;
+    contextTrigger.value.style.pointerEvents = "none";
+  }
+
+  showPopover.value = true;
+  emits("update:modelValue", true);
+
+  nextTick(() => {
+    updatePopoverPosition(preferredPlacement);
+  });
+};
+
+// Helper function to get icon component
+const getIconComponent = (iconKey: IconKey) => {
+  return icons[iconKey];
+};
+
+// Popover management
+const togglePopover = () => {
+  showPopover.value = !showPopover.value;
+  emits("update:modelValue", showPopover.value);
+
+  if (showPopover.value) {
+    nextTick(() => {
+      updatePopoverPosition();
+    });
+  } else {
+    if (cleanupAutoUpdate) {
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = null;
+    }
+  }
+};
+
+const updatePopoverPosition = async (contextPlacement?: string) => {
+  const positioningTrigger = props.contextMenu
+    ? contextTrigger.value
+    : trigger.value;
+  if (!positioningTrigger || !popup.value) return;
+
+  await nextTick();
+
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+
+  // Determine placement based on context
+  let placement: "bottom-start" | "bottom" | "right" | "left" = "bottom-start";
+  if (props.contextMenu && contextPlacement) {
+    placement = contextPlacement === "right" ? "right" : "left";
+  } else if (props.contextMenu) {
+    placement = "bottom";
+  }
+
+  cleanupAutoUpdate = autoUpdate(positioningTrigger, popup.value, () => {
+    computePosition(positioningTrigger!, popup.value!, {
+      placement,
+      middleware: [
+        offset(props.contextMenu ? 4 : 4),
+        flip(),
+        shift(),
+        size({
+          padding: 20,
+          apply({
+            availableWidth,
+            availableHeight,
+            elements,
+          }: {
+            availableWidth: number;
+            availableHeight: number;
+            elements: {
+              floating: {
+                style: {
+                  maxWidth: string;
+                  maxHeight: string;
+                };
+              };
+            };
+          }) {
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`,
+            });
+          },
+        }),
+      ],
+    }).then(({ x, y }) => {
+      if (popup.value) {
+        Object.assign(popup.value.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      }
+    });
+  });
+};
+
+// Expose togglePopover for external use
+defineExpose({
+  togglePopover,
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <!-- Slot for the trigger button -->
+    <div
+      ref="trigger"
+      @click="!contextMenu && togglePopover()"
+      @contextmenu="handleContextMenu"
+      :class="[$style.trigger, { [$style.trigger_raised]: showPopover }]"
+    >
+      <slot />
+    </div>
+
+    <!-- Invisible trigger for context menu positioning -->
+    <div
+      v-if="contextMenu"
+      ref="contextTrigger"
+      :class="$style.context_trigger"
+    ></div>
+
+    <!-- Teleport the overlay and popup to body -->
+    <Teleport to="body">
+      <div
+        v-if="showPopover"
+        :class="[$style.overlay, { [$style.overlay_blur]: contextMenu }]"
+        ref="overlay"
+        @click="handleOverlayClick"
+      ></div>
+      <div v-if="showPopover" :class="$style.popup" ref="popup">
+        <div
+          v-for="item in items"
+          :key="`action-item-${item.title}`"
+          :class="[$style.item, { [$style.destructive]: item.isDestructive }]"
+          @click="onItemClick(item)"
+        >
+          <component
+            v-if="item.icon"
+            :is="getIconComponent(item.icon)"
+            :class="[
+              $style.item_icon,
+              { [$style.destructive_icon]: item.isDestructive },
+            ]"
+          />
+          <p
+            :class="[
+              'subheadline',
+              item.isDestructive ? $style.destructive_text : '',
+            ]"
+          >
+            {{ item.title }}
+          </p>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: inline-block;
+}
+
+.trigger {
+  position: relative;
+  transition: z-index 0s;
+}
+
+.trigger_raised {
+  z-index: 1001;
+}
+
+.context_trigger {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1001;
+}
+
+.popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--actionmenu-popup-bg);
+  border-radius: 0.353rem;
+  min-width: 9.412rem;
+  overflow: hidden;
+  z-index: 1002;
+  box-shadow: 0px 1px 0px 0px var(--actionmenu-popup-shadow),
+    inset 0px 1px 0px 0px var(--actionmenu-popup-inset-shadow);
+  animation: popupFadeIn 0.2s ease-out;
+  border: var(--actionmenu-popup-border);
+}
+
+@keyframes popupFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.item {
+  min-height: 2rem;
+  border-bottom: 1px solid var(--actionmenu-item-border);
+  display: flex;
+  align-items: center;
+  gap: 0.882rem;
+  padding: 0.588rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  color: var(--actionmenu-item-text);
+}
+
+.item:hover {
+  background-color: var(--actionmenu-item-hover-bg);
+}
+
+.item:hover .item_icon {
+  scale: 1.1;
+}
+
+.item:last-child {
+  border-bottom: 0;
+}
+
+.item_icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: 0.2s ease-in-out scale;
+  color: var(--actionmenu-item-icon);
+}
+
+.destructive_icon {
+  color: var(--actionmenu-destructive-icon);
+}
+
+.destructive_text {
+  color: var(--actionmenu-destructive-text) !important;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--actionmenu-overlay-bg);
+  opacity: 0.7;
+  z-index: 999;
+  animation: overlayFadeIn 0.2s ease-out;
+}
+
+.overlay_blur {
+  background-color: var(--actionmenu-overlay-blur-bg);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  opacity: 1;
+}
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+</style>