@umbra.ui/core 0.1.27 → 0.2.0

package/dist/components/controls/Button/Button.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { RippleAnimOutlineIcon } from "@umbra.ui/icons";
-import type { TooltipConfig } from "../../indicators/Tooltip/types";
 import "./theme.css";
 
 export interface Props {
@@ -18,7 +17,6 @@ export interface Props {
   buttonSize?: "compact" | "regular" | "large";
   state?: "normal" | "active" | "disabled";
   title?: string;
-  tooltip?: string | TooltipConfig;
 }
 
 const emit = defineEmits(["update:state", "click"]);
@@ -88,7 +86,6 @@ const buttonColorWithOpacity = computed(() => {
 
 <template>
   <div
-    v-tooltip="tooltip"
     @click="handleClick"
     :class="[
       $style.container,

package/dist/components/controls/IconButton/IconButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { CircleAnimOutlineIcon, icons, type IconKey } from "@umbra.ui/icons";
-import type { TooltipConfig } from "../../indicators/Tooltip/types";
 import "./theme.css";
 
 interface Props {
@@ -10,7 +9,6 @@ interface Props {
   buttonStyle?: "primary" | "secondary" | "tertiary" | "quaternary" | string;
   state?: "normal" | "active" | "disabled";
   buttonSize?: number;
-  tooltip?: string | TooltipConfig;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -70,7 +68,6 @@ const IconComponent = computed(() => {
 
 <template>
   <div
-    v-tooltip="tooltip"
     @click="handleClick"
     :class="[
       $style.container,

package/dist/components/inputs/InputSecure/InputSecure.vue

@@ -9,10 +9,12 @@ import {
 import "../theme.css";
 
 export interface Props {
+  usage: "create" | "confirm" | "enter";
   value?: string;
   placeholder?: string;
   showStrength?: boolean;
   allowGenerate?: boolean;
+  allowCopy?: boolean;
   showRequirements?: boolean;
   minLength?: number;
   requireUppercase?: boolean;
@@ -21,13 +23,16 @@ export interface Props {
   requireSpecialChars?: boolean;
   preventCommon?: boolean;
   state?: "normal" | "active" | "disabled" | "readonly" | "error";
+  validate?: (value: string) => boolean | { valid: boolean; message?: string };
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  usage: "create",
   value: "",
   placeholder: "Enter password",
   showStrength: true,
   allowGenerate: true,
+  allowCopy: true,
   showRequirements: true,
   minLength: 8,
   requireUppercase: true,
@@ -36,6 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
   requireSpecialChars: true,
   preventCommon: true,
   state: "normal",
+  // validate is undefined by default, triggering fallback to requirements
 });
 
 const emit = defineEmits<{
@@ -44,6 +50,30 @@ const emit = defineEmits<{
   "update:strength": [value: number];
 }>();
 
+// computed props
+const showGenerationUI = computed(() => {
+  if (props.usage === "confirm") return false;
+  if (props.usage === "enter") return false;
+  if (props.state === "active" || props.state === "readonly") return false;
+  return props.allowGenerate;
+});
+const showCopyUI = computed(() => {
+  if (props.usage === "confirm") return false;
+  if (props.usage === "enter") return false;
+  if (props.state === "active" || props.state === "readonly") return false;
+  return props.allowCopy;
+});
+const showStrengthUI = computed(() => {
+  if (props.usage === "confirm") return false;
+  if (props.usage === "enter") return false;
+  return props.showStrength;
+});
+const showRequirementsUI = computed(() => {
+  if (props.usage === "confirm") return false;
+  if (props.usage === "enter") return false;
+  return props.showRequirements;
+});
+
 const showInput = ref<boolean>(false);
 const internalValue = ref(props.value);
 const isFocused = ref(false);
@@ -116,9 +146,24 @@ const requirements = computed(() => {
 
 // Check if all requirements are met
 const isValid = computed(() => {
-  return Object.values(requirements.value)
-    .filter((req) => req.required)
-    .every((req) => req.met);
+  if (props.validate) {
+    const result = props.validate(internalValue.value);
+    return typeof result === "boolean" ? result : result.valid;
+  }
+  // Fallback to existing requirements validation
+  if (props.usage === "create") {
+    return Object.values(requirements.value)
+      .filter((req) => req.required)
+      .every((req) => req.met);
+  }
+  return true;
+});
+
+const customValidationMessage = computed(() => {
+  if (!props.validate) return undefined;
+
+  const result = props.validate(internalValue.value);
+  return typeof result === "object" ? result.message : undefined;
 });
 
 // Calculate password strength (0-4)
@@ -291,7 +336,7 @@ const getPlaceholder = computed(() => {
     >
       <!-- Generate password button -->
       <button
-        v-if="allowGenerate"
+        v-if="showGenerationUI"
         type="button"
         :class="[$style.icon_button, $style.generate_button]"
         @click="generatePassword"
@@ -317,7 +362,7 @@ const getPlaceholder = computed(() => {
       <div :class="$style.actions">
         <!-- Copy button (only show when there's a password) -->
         <button
-          v-if="internalValue"
+          v-if="showCopyUI"
           type="button"
           :class="$style.icon_button"
           @click="copyToClipboard"
@@ -343,7 +388,7 @@ const getPlaceholder = computed(() => {
 
     <!-- Password strength indicator -->
     <div
-      v-if="showStrength && internalValue"
+      v-if="showStrengthUI && internalValue"
       :class="$style.strength_container"
     >
       <div :class="$style.strength_bar">
@@ -366,7 +411,7 @@ const getPlaceholder = computed(() => {
     <!-- Requirements list -->
     <transition name="slide-fade">
       <div
-        v-if="showRequirements && (isFocused || !isValid) && internalValue"
+        v-if="showRequirementsUI && (isFocused || !isValid) && internalValue"
         :class="$style.requirements"
       >
         <div
@@ -394,6 +439,15 @@ const getPlaceholder = computed(() => {
         </div>
       </div>
     </transition>
+
+    <transition name="slide-fade">
+      <p
+        v-if="!isValid && isFocused && customValidationMessage"
+        :class="[$style.error_message, 'footnote']"
+      >
+        {{ customValidationMessage }}
+      </p>
+    </transition>
   </div>
 </template>
 
@@ -637,6 +691,10 @@ const getPlaceholder = computed(() => {
   color: var(--input-disabled-placeholder);
 }
 
+.error_message {
+  color: var(--error);
+}
+
 /* Responsive */
 @media (max-width: 480px) {
   .input_container input {

package/dist/components/models/Popover/Popover.vue

@@ -7,6 +7,7 @@ import {
   watch,
   Teleport,
   computed,
+  type CSSProperties,
 } from "vue";
 import {
   offset,
@@ -25,7 +26,7 @@ export interface PopoverProps {
   /**
    * Controls whether the popover is visible
    */
-  modelValue: boolean;
+  modelValue?: boolean;
   /**
    * Placement of the popover relative to the trigger
    * @default 'bottom'
@@ -56,6 +57,11 @@ export interface PopoverProps {
    * @default 0.5
    */
   overlayOpacity?: number;
+  /**
+   * Blur strength for overlay backdrop (0 = no blur)
+   * @default 0
+   */
+  overlayBlur?: number;
   /**
    * Animation duration in seconds
    * @default 0.2
@@ -96,6 +102,10 @@ export interface PopoverProps {
    * @default 0
    */
   hoverHideDelay?: number;
+  /**
+   * Background color of the popover
+   */
+  popoverBackground?: string;
 }
 
 const props = withDefaults(defineProps<PopoverProps>(), {
@@ -104,6 +114,7 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   dismissOnClickOutside: true,
   showArrow: true,
   showOverlay: false,
+  overlayBlur: 0,
   overlayOpacity: 0.5,
   animationDuration: 0.2,
   zIndex: 1000,
@@ -113,6 +124,7 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   trigger: "click",
   hoverShowDelay: 0,
   hoverHideDelay: 0,
+  popoverBackground: "var(--popover-bg)",
 });
 
 const emit = defineEmits<{
@@ -140,13 +152,19 @@ const popoverStyles = computed(() => ({
   maxWidth: props.maxWidth,
   maxHeight: props.maxHeight,
   zIndex: props.zIndex + 1,
+  backgroundColor: props.popoverBackground,
 }));
 
 const overlayStyles = computed(() => ({
-  opacity: props.overlayOpacity,
   zIndex: props.zIndex,
 }));
 
+const triggerStyles = computed<CSSProperties>(() =>
+  props.showOverlay && isVisible.value
+    ? { position: "relative", zIndex: props.zIndex + 1 }
+    : {}
+);
+
 // Positioning
 const updatePosition = async () => {
   if (!triggerRef.value || !popoverRef.value) return;
@@ -196,6 +214,81 @@ 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;
@@ -258,10 +351,10 @@ const open = async () => {
   // NOW set initial state based on actual placement
   const side = actualPlacement.split("-")[0];
   const initialOffset = {
-    top: { x: 0, y: 8 }, // slides up from below
-    bottom: { x: 0, y: -8 }, // slides down from above
-    left: { x: 8, y: 0 }, // slides left from right
-    right: { x: -8, y: 0 }, // slides right from left
+    top: { x: 0, y: 8 },
+    bottom: { x: 0, y: -8 },
+    left: { x: 8, y: 0 },
+    right: { x: -8, y: 0 },
   }[side] || { x: 0, y: -8 };
 
   gsap.set(popoverRef.value, {
@@ -288,6 +381,13 @@ 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;
+      }
     },
   });
 
@@ -304,7 +404,7 @@ const open = async () => {
     tl.to(
       overlayRef.value,
       {
-        opacity: 1,
+        opacity: props.overlayBlur > 0 ? 1 : props.overlayOpacity,
         duration: props.animationDuration,
         ease: "power2.out",
       },
@@ -320,6 +420,12 @@ const close = async () => {
   emit("update:modelValue", false);
   emit("close");
 
+  // Clean up resize observer
+  if (popoverRef.value && (popoverRef.value as any)._resizeObserver) {
+    (popoverRef.value as any)._resizeObserver.disconnect();
+    delete (popoverRef.value as any)._resizeObserver;
+  }
+
   if (!popoverRef.value) return;
 
   // Animate out
@@ -431,11 +537,12 @@ const handleEscape = (event: KeyboardEvent) => {
 watch(
   () => props.modelValue,
   (newValue) => {
-    if (newValue) {
+    if (newValue === true) {
       open();
-    } else {
+    } else if (newValue === false) {
       close();
     }
+    // When undefined, let the trigger handle it
   }
 );
 
@@ -472,6 +579,7 @@ defineExpose({
     <div
       ref="triggerRef"
       :class="$style.trigger"
+      :style="triggerStyles"
       @click="handleTriggerClick"
       @mouseenter="handleTriggerMouseEnter"
       @mouseleave="handleTriggerMouseLeave"
@@ -485,7 +593,10 @@ defineExpose({
       <div
         v-if="showOverlay && isVisible"
         ref="overlayRef"
-        :class="$style.overlay"
+        :class="[
+          $style.overlay,
+          overlayBlur > 0 ? $style.overlayBlur : $style.overlayDim,
+        ]"
         :style="overlayStyles"
         @click="handleClickOutside"
       />
@@ -502,8 +613,10 @@ defineExpose({
         <!-- Arrow -->
         <div v-if="showArrow" ref="arrowRef" :class="$style.arrow" />
 
-        <!-- Content -->
-        <slot />
+        <!-- Content wrapper for proper sizing -->
+        <div :class="$style.popoverContent">
+          <slot />
+        </div>
       </div>
     </Teleport>
   </div>
@@ -522,15 +635,23 @@ defineExpose({
 .overlay {
   position: fixed;
   inset: 0;
-  background-color: var(--popover-overlay-bg);
   will-change: opacity;
 }
 
+.overlayBlur {
+  background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent for blur effect */
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.overlayDim {
+  background-color: var(--popover-overlay-bg); /* Darker for dim effect */
+}
+
 .popover {
   position: absolute;
   top: 0;
   left: 0;
-  background-color: var(--popover-bg);
   border-radius: 0.353rem;
   box-shadow: 0px 1px 0px 0px var(--popover-shadow),
     inset 0px 1px 0px 0px var(--popover-inset-shadow);
@@ -538,6 +659,17 @@ defineExpose({
   will-change: transform, opacity;
   transform-origin: top center;
   overflow: hidden;
+  will-change: transform, opacity, height;
+  height: auto;
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.popoverContent {
+  width: fit-content;
+  height: fit-content;
+  max-height: 80vh;
+  overflow: hidden;
 }
 
 .arrow {

package/dist/components/models/Popover/theme.css

@@ -21,12 +21,7 @@
   ); /* blackA3 - subtle shadow for light mode */
 
   /* Popover overlay colors */
-  --popover-overlay-bg: rgba(
-    0,
-    0,
-    0,
-    0.5
-  ); /* blackA8 - overlay for light mode */
+  --popover-overlay-bg: black; /* blackA8 - overlay for light mode */
 }
 
 /* Dark theme */
@@ -48,5 +43,5 @@
   --popover-arrow-shadow: rgba(0, 0, 0, 0.05); /* Original dark mode value */
 
   /* Popover overlay colors */
-  --popover-overlay-bg: rgba(0, 0, 0, 0.5); /* Original dark mode value */
+  --popover-overlay-bg: black; /* Original dark mode value */
 }

package/dist/components/navigation/adaptive/AdaptiveLayout.vue

@@ -1,4 +1,4 @@
-<!-- AdaptiveLayout2.vue -->
+<!-- AdaptiveLayout.vue -->
 <script setup lang="ts">
 import {
   markRaw,
@@ -31,6 +31,7 @@ export interface Props {
   canHideViews?: boolean;
   canResizeViews?: boolean;
   layout?: ViewLayout;
+  height?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -41,12 +42,17 @@ const props = withDefaults(defineProps<Props>(), {
   canHideViews: true,
   canResizeViews: true,
   layout: "adaptive",
+  height: "100%",
 });
 
 // View state management
 const layoutState = useAdaptiveLayoutState(props.instanceKey);
 const views = layoutState.views;
 
+const allowViewResize = computed(() => {
+  return props.canResizeViews && props.layout !== "navstack";
+});
+
 // Initialize views with the initial data
 views.value = props.initialViews.map((view) => ({
   ...view,
@@ -68,6 +74,20 @@ onMounted(() => {
     push,
     pop,
   });
+  switch (props.layout) {
+    case "navstack":
+      setupForBreakpoint(null, "mobile");
+      break;
+    case "slideover":
+      setupForBreakpoint(null, "tablet");
+      break;
+    case "splitview":
+      setupForBreakpoint(null, "desktop");
+      break;
+    default:
+      break;
+  }
+  setupForBreakpoint(null, "tablet");
 });
 
 // Container ref and monitoring
@@ -152,13 +172,13 @@ const replace = (id: string, view: View, animated: boolean = true) => {
 const show = (id: string, animated: boolean = true) => {
   switch (props.layout) {
     case "splitview":
-      splitViewShow(id);
+      splitViewShow(id, animated);
       return;
     case "slideover":
-      slideoverShow(id);
+      slideoverShow(id, animated);
       return;
     case "navstack":
-      navstackShow(id);
+      navstackShow(id, animated);
       return;
   }
   switch (monitor.currentBreakpoint.value) {
@@ -411,6 +431,7 @@ const getViewMaxWidthOnscreen = (view: InternalView): string => {
       '--padding': props.padding,
       '--gap': props.gap,
       '--width': `${monitor.dimensions.value.width}px`,
+      height: props.height,
     }"
   >
     <div :id="getOnscreenId()" :class="$style.onscreen">
@@ -458,7 +479,7 @@ const getViewMaxWidthOnscreen = (view: InternalView): string => {
 
         <!-- Resize handle (not on last element) -->
         <div
-          v-if="props.canResizeViews && index < onScreenViews.length - 1"
+          v-if="allowViewResize && index < onScreenViews.length - 1"
           :class="$style.resizeHandle"
           @mousedown="startResize(view.id, $event)"
         >

package/dist/components/navigation/adaptive/useViewAnimation.d.ts

@@ -4,15 +4,15 @@ export declare const useViewAnimation: (views: Ref<InternalView[]>, instanceKey:
     width: number;
     height: number;
 }>, padding: string, gap: string) => {
-    splitViewShow: (id: string) => Promise<void>;
+    splitViewShow: (id: string, animated?: boolean) => Promise<void>;
     splitViewHide: (id: string) => Promise<void>;
     splitViewPush: (id?: string | null) => Promise<void>;
     splitViewPop: (id?: string | null) => Promise<void>;
-    slideoverShow: (id: string) => Promise<void>;
+    slideoverShow: (id: string, animated?: boolean) => Promise<void>;
     slideoverHide: () => Promise<void>;
     slideoverPush: (id?: string | null) => Promise<void>;
     slideoverPop: (id?: string | null) => Promise<void>;
-    navstackShow: (id: string) => Promise<void>;
+    navstackShow: (id: string, animated?: boolean) => Promise<void>;
     navstackPush: () => Promise<void>;
     navstackPop: (id: string) => Promise<void>;
     getOffscreenLeadingId: () => string;

package/dist/components/navigation/adaptive/useViewAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useViewAnimation.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/adaptive/useViewAnimation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAG9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAc5C,eAAO,MAAM,gBAAgB,GAC3B,OAAO,GAAG,CAAC,YAAY,EAAE,CAAC,EAC1B,aAAa,MAAM,EACnB,qBAAqB,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,EAC3D,SAAS,MAAM,EACf,KAAK,MAAM;wBAuNsB,MAAM;wBAMN,MAAM;yBAUN,MAAM,GAAG,IAAI;wBAgBd,MAAM,GAAG,IAAI;wBAwLZ,MAAM;;yBA0CN,MAAM,GAAG,IAAI;wBAkDd,MAAM,GAAG,IAAI;uBAgEb,MAAM;;sBAYP,MAAM;;;;sBA3iBZ,YAAY;;;2BAIT,WAAW,EAAE;uBA6Ff,YAAY;4BAIP,MAAM,YAAY,MAAM;;8BAhCtB,MAAM,KAAG,YAAY,GAAG,IAAI;6BAU7B,MAAM,KAAG,YAAY,GAAG,IAAI;CA+jB7D,CAAC"}
+{"version":3,"file":"useViewAnimation.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/adaptive/useViewAnimation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAG9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAc5C,eAAO,MAAM,gBAAgB,GAC3B,OAAO,GAAG,CAAC,YAAY,EAAE,CAAC,EAC1B,aAAa,MAAM,EACnB,qBAAqB,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,EAC3D,SAAS,MAAM,EACf,KAAK,MAAM;wBA+NsB,MAAM,aAAY,OAAO;wBAMzB,MAAM;yBAUN,MAAM,GAAG,IAAI;wBAgBd,MAAM,GAAG,IAAI;wBA4LZ,MAAM,aAAY,OAAO;;yBA0CzB,MAAM,GAAG,IAAI;wBAkDd,MAAM,GAAG,IAAI;uBAgEb,MAAM,aAAY,OAAO;;sBAY1B,MAAM;;;;sBA/iBZ,YAAY;;;2BAIT,WAAW,EAAE;uBA6Ff,YAAY;4BAIP,MAAM,YAAY,MAAM;;8BAhCtB,MAAM,KAAG,YAAY,GAAG,IAAI;6BAU7B,MAAM,KAAG,YAAY,GAAG,IAAI;CAskB7D,CAAC"}