@umbra.ui/core 0.2.0 → 0.4.0

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

@@ -1,8 +1,36 @@
-export interface SearchResult {
+export interface SearchPathSegment {
   id: string;
-  icon?: string;
+  type: string;
+  title: string;
+}
+
+export interface SearchOverlayResult {
+  id: string;
+  path: string;
+  pathSegments: SearchPathSegment[];
   title: string;
-  description: string;
-  caption: string;
-  footnote: string;
+  excerpt: string;
+}
+
+export interface SearchResult extends SearchOverlayResult {
+  icon?: string;
+  description?: string;
+  caption?: string;
+  footnote?: string;
+}
+
+export interface SearchQueryOptions {
+  limit: number;
+  offset: number;
+}
+
+export interface SearchProvider<
+  T extends SearchOverlayResult = SearchOverlayResult
+> {
+  search: (
+    query: string,
+    options: SearchQueryOptions
+  ) => Promise<{ results: T[]; total: number }>;
+  getRecent: () => Promise<T[]>;
+  select: (item: T) => Promise<void> | void;
 }

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

@@ -9,20 +9,15 @@ import {
   autoUpdate,
 } from "@floating-ui/vue";
 import { icons, type IconKey } from "@umbra.ui/icons";
+import type { ActionMenuItem } from "./types";
 import "./theme.css";
 
-export interface ActionMenuItem {
-  icon?: IconKey;
-  title: string;
-  action: () => void;
-  isDestructive?: boolean;
-}
-
 // Props
 export interface Props {
   items: ActionMenuItem[];
   modelValue?: boolean;
   contextMenu?: boolean;
+  title?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -237,6 +232,9 @@ defineExpose({
         @click="handleOverlayClick"
       ></div>
       <div v-if="showPopover" :class="$style.popup" ref="popup">
+        <div v-if="title" :class="$style.header">
+          <p :class="[$style.header_text, 'subheadline']">{{ title }}</p>
+        </div>
         <div
           v-for="item in items"
           :key="`action-item-${item.title}`"
@@ -259,6 +257,9 @@ defineExpose({
           >
             {{ item.title }}
           </p>
+          <span v-if="item.shortcutLabel" :class="$style.shortcut">
+            {{ item.shortcutLabel }}
+          </span>
         </div>
       </div>
     </Teleport>
@@ -303,6 +304,18 @@ defineExpose({
   border: var(--actionmenu-popup-border);
 }
 
+.header {
+  padding: 0.471rem 0.588rem;
+  border-bottom: 1px solid var(--actionmenu-item-border);
+  background-color: var(--actionmenu-popup-bg);
+}
+
+.header_text {
+  margin: 0;
+  color: var(--actionmenu-item-text);
+  opacity: 0.7;
+}
+
 @keyframes popupFadeIn {
   from {
     opacity: 0;
@@ -338,6 +351,15 @@ defineExpose({
   border-bottom: 0;
 }
 
+.shortcut {
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  opacity: 0.6;
+  color: var(--actionmenu-item-text);
+  font-variant-numeric: tabular-nums;
+}
+
 .item_icon {
   width: 1.25rem;
   height: 1.25rem;

package/src/components/menus/ActionMenu/theme.css

@@ -79,7 +79,7 @@
   --actionmenu-item-icon: #eeeeee; /* Original dark mode value */
 
   /* ActionMenu destructive colors */
-  --actionmenu-destructive-text: #e5484d; /* Original dark mode value */
+  --actionmenu-destructive-text: #ec5d5e; /* Original dark mode value */
   --actionmenu-destructive-icon: #e5484d; /* Original dark mode value */
 
   /* ActionMenu overlay colors */

package/src/components/menus/ActionMenu/types.ts

@@ -0,0 +1,9 @@
+import type { IconKey } from "@umbra.ui/icons";
+
+export interface ActionMenuItem {
+  icon?: IconKey;
+  title: string;
+  action: () => void;
+  shortcutLabel?: string;
+  isDestructive?: boolean;
+}

package/src/components/models/Popover/Popover.vue

@@ -20,7 +20,6 @@ import {
   type Middleware,
 } from "@floating-ui/vue";
 import gsap from "gsap";
-import "./theme.css";
 
 export interface PopoverProps {
   /**
@@ -106,6 +105,10 @@ export interface PopoverProps {
    * Background color of the popover
    */
   popoverBackground?: string;
+  /**
+   * Popover corner radius
+   */
+  popoverCornerRadius?: string;
 }
 
 const props = withDefaults(defineProps<PopoverProps>(), {
@@ -125,6 +128,7 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   hoverShowDelay: 0,
   hoverHideDelay: 0,
   popoverBackground: "var(--popover-bg)",
+  popoverCornerRadius: "0.353rem",
 });
 
 const emit = defineEmits<{
@@ -153,6 +157,7 @@ const popoverStyles = computed(() => ({
   maxHeight: props.maxHeight,
   zIndex: props.zIndex + 1,
   backgroundColor: props.popoverBackground,
+  borderRadius: props.popoverCornerRadius,
 }));
 
 const overlayStyles = computed(() => ({
@@ -214,81 +219,6 @@ const updatePosition = async () => {
   }
 };
 
-const enableSmoothResize = () => {
-  if (!popoverRef.value) return;
-
-  let lastHeight = popoverRef.value.offsetHeight;
-  let isFirstRun = true;
-
-  const resizeObserver = new ResizeObserver((entries) => {
-    // Skip the initial observation
-    if (isFirstRun) {
-      isFirstRun = false;
-      return;
-    }
-
-    for (const entry of entries) {
-      if (!popoverRef.value) continue;
-
-      // Get the content wrapper's height
-      const contentWrapper = popoverRef.value.lastElementChild as HTMLElement;
-      if (!contentWrapper) continue;
-
-      const newContentHeight = contentWrapper.offsetHeight;
-
-      // Calculate total height including padding/borders
-      const computedStyle = window.getComputedStyle(popoverRef.value);
-      const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-      const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
-      const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
-      const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
-
-      const newHeight =
-        newContentHeight +
-        paddingTop +
-        paddingBottom +
-        borderTop +
-        borderBottom;
-
-      // Only animate if height actually changed significantly
-      if (Math.abs(lastHeight - newHeight) > 1) {
-        // Kill any existing animations on this element
-        gsap.killTweensOf(popoverRef.value);
-
-        // Animate height change
-        gsap.fromTo(
-          popoverRef.value,
-          {
-            height: lastHeight,
-          },
-          {
-            height: newHeight,
-            duration: 0.3,
-            ease: "power2.inOut",
-            onComplete: () => {
-              lastHeight = newHeight;
-              updatePosition();
-            },
-          }
-        );
-
-        break; // Only process one change at a time
-      }
-    }
-  });
-
-  // Find the popoverContent div
-  const contentWrapper = popoverRef.value.lastElementChild as HTMLElement;
-  if (contentWrapper) {
-    // Only observe direct children, not the wrapper itself
-    Array.from(contentWrapper.children).forEach((child) => {
-      resizeObserver.observe(child as HTMLElement);
-    });
-  }
-
-  return resizeObserver;
-};
-
 // Animation functions
 const open = async () => {
   if (isAnimating.value || isVisible.value) return;
@@ -381,13 +311,6 @@ const open = async () => {
     onComplete: () => {
       isAnimating.value = false;
       emit("after-enter");
-
-      // Set up smooth resizing AFTER animation completes
-      if (popoverRef.value) {
-        const resizeObserver = enableSmoothResize();
-        // Store it for cleanup
-        (popoverRef.value as any)._resizeObserver = resizeObserver;
-      }
     },
   });
 
@@ -652,7 +575,6 @@ defineExpose({
   position: absolute;
   top: 0;
   left: 0;
-  border-radius: 0.353rem;
   box-shadow: 0px 1px 0px 0px var(--popover-shadow),
     inset 0px 1px 0px 0px var(--popover-inset-shadow);
   border: var(--popover-border);

package/src/index.ts

@@ -34,11 +34,13 @@ export { default as SegmentedControl } from "./components/controls/SegmentedCont
 export { type ControlItem } from "./components/controls/SegmentedControl/types";
 export { default as Dropdown } from "./components/controls/Dropdown/Dropdown.vue";
 export { type DropdownItem } from "./components/controls/Dropdown/types";
+export { default as InlineDropdown } from "./components/controls/InlineDropdown/InlineDropdown.vue";
 export { default as Radio } from "./components/controls/Radio/Radio.vue";
 export { default as Slider } from "./components/controls/Slider/Slider.vue";
 export { default as RangeSlider } from "./components/controls/RangeSlider/RangeSlider.vue";
 export { default as Stepper } from "./components/controls/Stepper/Stepper.vue";
 export { default as InputText } from "./components/inputs/InputText/InputText.vue";
+export { default as InputCryptoAddress } from "./components/inputs/InputCryptoAddress/InputCryptoAddress.vue";
 export { default as InputSecure } from "./components/inputs/InputSecure/InputSecure.vue";
 export { default as InputPhone } from "./components/inputs/InputPhone/InputPhone.vue";
 export { default as InputNumber } from "./components/inputs/InputNumber/InputNumber.vue";
@@ -77,8 +79,10 @@ export {
 } from "./components/inputs/Tags/types";
 export { type TagBarStyle } from "./components/inputs/Tags/tag-bar-styles";
 export { default as AutogrowTextView } from "./components/inputs/AutogrowTextView/AutogrowTextView.vue";
+export { default as AutogrowRichTextView } from "./components/inputs/AutogrowRichTextView/AutogrowRichTextView.vue";
 export { default as StringCapture } from "./components/inputs/StringCapture/StringCapture.vue";
 export { default as ActionMenu } from "./components/menus/ActionMenu/ActionMenu.vue";
+export { type ActionMenuItem } from "./components/menus/ActionMenu/types";
 export { default as Tooltip } from "./components/indicators/Tooltip/TooltipProvider.vue";
 export { useTooltip } from "./components/indicators/Tooltip/useTooltip";
 export { vTooltip } from "./components/indicators/Tooltip/tooltip";
@@ -96,9 +100,15 @@ export {
   type ToastInstance,
 } from "./components/dialogs/Toast/types";
 export { default as OTP } from "./components/inputs/OTP/OTP.vue";
-export { default as SearchBar } from "./components/inputs/search/SearchBar.vue";
-export { default as SearchResults } from "./components/inputs/search/SearchResults.vue";
-export { type SearchResult } from "./components/inputs/search/types";
+export { default as SearchOverlay } from "./components/inputs/search/SearchOverlay.vue";
+export { default as SearchResultCell } from "./components/inputs/search/SearchResultCell.vue";
+export {
+  type SearchOverlayResult,
+  type SearchPathSegment,
+  type SearchProvider,
+  type SearchQueryOptions,
+  type SearchResult,
+} from "./components/inputs/search/types";
 export { default as Sheet } from "./components/models/Sheet/Sheet.vue";
 export { default as Sidebar } from "./components/models/Sidebar/Sidebar.vue";
 export { default as Popover } from "./components/models/Popover/Popover.vue";

package/src/vue.d.ts

@@ -4,32 +4,6 @@ declare module "*.vue" {
   export default component;
 }
 
-declare module "./components/inputs/search/SearchResults.vue" {
-  import type { DefineComponent } from "vue";
-  import type { BaseSearchResult } from "./components/inputs/search/types";
-
-  interface SearchResultsSlots<T extends BaseSearchResult> {
-    result: (props: {
-      item: T;
-      index: number;
-      highlight: (text: string) => string;
-    }) => any;
-    empty: () => any;
-  }
-
-  const component: DefineComponent<
-    {},
-    {},
-    any,
-    {},
-    {},
-    {},
-    {},
-    SearchResultsSlots<any>
-  >;
-  export default component;
-}
-
 declare module "autosize" {
   function autosize(element: HTMLTextAreaElement): void;
   namespace autosize {
@@ -43,3 +17,10 @@ declare module "*.md?raw" {
   const content: string;
   export default content;
 }
+
+declare module "@umbra.ui/core" {
+  import type { DefineComponent } from "vue";
+
+  export const InlineDropdown: DefineComponent<{}, {}, any>;
+  export const InputCryptoAddress: DefineComponent<{}, {}, any>;
+}