@umbra.ui/core 0.1.26 → 0.2.0

package/dist/components/navigation/adaptive/useViewAnimation.js

@@ -14,7 +14,7 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
     /*
      * Basic animation function
      */
-    const animate = async (targets, manipulateDOMFn, updateDataFn) => {
+    const animate = async (targets, manipulateDOMFn, updateDataFn, animated = true) => {
         if (animationInProgress.value) {
             console.warn("Animation already in progress");
             return;
@@ -25,17 +25,25 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
         // Step 2: Manipulate DOM
         manipulateDOMFn();
         // Step 3: Animate
-        return Flip.from(state, {
-            duration: 0.3,
-            ease: "power1.inOut",
-            absolute: true,
-            onComplete: () => {
-                animationInProgress.value = false;
-            },
-        }).then(() => {
-            // Step 5: Update Data
+        if (animated) {
+            return Flip.from(state, {
+                duration: 0.3,
+                ease: "power1.inOut",
+                absolute: true,
+                onComplete: () => {
+                    animationInProgress.value = false;
+                },
+            }).then(() => {
+                // Step 5: Update Data
+                updateDataFn();
+            });
+        }
+        else {
+            // Update Data
             updateDataFn();
-        });
+            // Step 5: Complete
+            animationInProgress.value = false;
+        }
     };
     /*
     Utility Functions
@@ -164,11 +172,11 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
     const getFirstViewInOverlay = () => {
         return views.value.find((v) => v.location === "overlay");
     };
-    const splitViewShow = async (id) => {
+    const splitViewShow = async (id, animated = true) => {
         const view = views.value.find((v) => v.id === id);
         if (view?.location === "onscreen")
             return;
-        await splitViewNavigate(id, "show");
+        await splitViewNavigate(id, "show", animated);
     };
     const splitViewHide = async (id) => {
         // Prevent hiding the last view (would result in nothing being shown)
@@ -214,7 +222,7 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
             return;
         }
     };
-    const splitViewNavigate = async (id, type) => {
+    const splitViewNavigate = async (id, type, animated = true) => {
         const elements = getViewElements();
         // Get the appropriate view elements based on type
         let viewElements = [];
@@ -337,7 +345,7 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
                 }
             }
         };
-        await animate(elements, manipulateDOM, updateData);
+        await animate(elements, manipulateDOM, updateData, animated);
     };
     /*
      * Internal Functions: Slideover
@@ -347,7 +355,7 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
     - push presents another view to the overlay from the left.
     - pop dismisses a view from the overlay to the left.
      */
-    const slideoverShow = async (id) => {
+    const slideoverShow = async (id, animated = true) => {
         // Get the view with the given id AND all views after it that have location "leading"
         const currentView = views.value.find((v) => v.id === id);
         if (currentView?.location === "onscreen") {
@@ -496,9 +504,9 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
     - push presents next view fullscreen from the right, and dismisses current view to the left.
     - pop dismisses current view to the right, and pushes preceeding view fullscreen from the left.
      */
-    const navstackShow = async (id) => {
+    const navstackShow = async (id, animated = true) => {
         const index = views.value.findIndex((view) => view.id === id);
-        navstackNavigateTo(index);
+        navstackNavigateTo(index, animated);
     };
     const navstackPush = async () => {
         const currentIndex = views.value.findIndex((view) => view.location === "onscreen");
@@ -508,7 +516,7 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
         const currentIndex = views.value.findIndex((view) => view.location === "onscreen");
         navstackNavigateTo(currentIndex - 1);
     };
-    const navstackNavigateTo = async (index) => {
+    const navstackNavigateTo = async (index, animated = true) => {
         const onscreen = document.getElementById(getOnscreenId());
         const offscreenLeading = document.getElementById(getOffscreenLeadingId());
         const offscreenTrailing = document.getElementById(getOffscreenTrailingId());
@@ -557,7 +565,7 @@ export const useViewAnimation = (views, instanceKey, containerDimensions, paddin
             currentView.style.width = "";
             nextView.style.width = "";
         };
-        await animate(targets, manipulateDOM, updateData);
+        await animate(targets, manipulateDOM, updateData, animated);
     };
     /*
     State

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

@@ -29,7 +29,8 @@ export const useViewAnimation = (
   const animate = async (
     targets: HTMLElement[],
     manipulateDOMFn: () => void,
-    updateDataFn: () => void
+    updateDataFn: () => void,
+    animated: boolean = true
   ) => {
     if (animationInProgress.value) {
       console.warn("Animation already in progress");
@@ -43,17 +44,24 @@ export const useViewAnimation = (
     manipulateDOMFn();
 
     // Step 3: Animate
-    return Flip.from(state, {
-      duration: 0.3,
-      ease: "power1.inOut",
-      absolute: true,
-      onComplete: () => {
-        animationInProgress.value = false;
-      },
-    }).then(() => {
-      // Step 5: Update Data
+    if (animated) {
+      return Flip.from(state, {
+        duration: 0.3,
+        ease: "power1.inOut",
+        absolute: true,
+        onComplete: () => {
+          animationInProgress.value = false;
+        },
+      }).then(() => {
+        // Step 5: Update Data
+        updateDataFn();
+      });
+    } else {
+      // Update Data
       updateDataFn();
-    });
+      // Step 5: Complete
+      animationInProgress.value = false;
+    }
   };
 
   /*
@@ -235,10 +243,10 @@ export const useViewAnimation = (
 
   type NavigationType = "push" | "pop" | "show" | "hide";
 
-  const splitViewShow = async (id: string) => {
+  const splitViewShow = async (id: string, animated: boolean = true) => {
     const view = views.value.find((v) => v.id === id);
     if (view?.location === "onscreen") return;
-    await splitViewNavigate(id, "show");
+    await splitViewNavigate(id, "show", animated);
   };
 
   const splitViewHide = async (id: string) => {
@@ -287,7 +295,11 @@ export const useViewAnimation = (
     }
   };
 
-  const splitViewNavigate = async (id: string, type: NavigationType) => {
+  const splitViewNavigate = async (
+    id: string,
+    type: NavigationType,
+    animated: boolean = true
+  ) => {
     const elements = getViewElements();
 
     // Get the appropriate view elements based on type
@@ -439,7 +451,7 @@ export const useViewAnimation = (
       }
     };
 
-    await animate(elements, manipulateDOM, updateData);
+    await animate(elements, manipulateDOM, updateData, animated);
   };
 
   /*
@@ -451,7 +463,7 @@ export const useViewAnimation = (
   - pop dismisses a view from the overlay to the left. 
    */
 
-  const slideoverShow = async (id: string) => {
+  const slideoverShow = async (id: string, animated: boolean = true) => {
     // Get the view with the given id AND all views after it that have location "leading"
     const currentView = views.value.find((v) => v.id === id);
     if (currentView?.location === "onscreen") {
@@ -607,9 +619,9 @@ export const useViewAnimation = (
   - pop dismisses current view to the right, and pushes preceeding view fullscreen from the left. 
    */
 
-  const navstackShow = async (id: string) => {
+  const navstackShow = async (id: string, animated: boolean = true) => {
     const index = views.value.findIndex((view) => view.id === id);
-    navstackNavigateTo(index);
+    navstackNavigateTo(index, animated);
   };
 
   const navstackPush = async () => {
@@ -626,7 +638,10 @@ export const useViewAnimation = (
     navstackNavigateTo(currentIndex - 1);
   };
 
-  const navstackNavigateTo = async (index: number) => {
+  const navstackNavigateTo = async (
+    index: number,
+    animated: boolean = true
+  ) => {
     const onscreen = document.getElementById(getOnscreenId());
     const offscreenLeading = document.getElementById(getOffscreenLeadingId());
     const offscreenTrailing = document.getElementById(getOffscreenTrailingId());
@@ -685,7 +700,7 @@ export const useViewAnimation = (
       currentView.style.width = "";
       nextView.style.width = "";
     };
-    await animate(targets, manipulateDOM, updateData);
+    await animate(targets, manipulateDOM, updateData, animated);
   };
 
   /*

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import "@umbra.ui/colors/semantic-colors.css";
+import "@umbra.ui/typography/typography.css";
 export * from "@umbra.ui/colors";
 export * from "@umbra.ui/icons";
 export * from "@umbra.ui/typography";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,3 +1,5 @@
+import "@umbra.ui/colors/semantic-colors.css";
+import "@umbra.ui/typography/typography.css";
 // Core package exports
 export * from "@umbra.ui/colors";
 export * from "@umbra.ui/icons";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbra.ui/core",
-  "version": "0.1.26",
+  "version": "0.2.0",
   "description": "Core components for Umbra UI",
   "type": "module",
   "main": "dist/index.js",
@@ -43,9 +43,9 @@
   "license": "MIT",
   "dependencies": {
     "@floating-ui/vue": "^1.1.7",
-    "@umbra.ui/colors": "^0.1.5",
-    "@umbra.ui/icons": "^0.1.2",
-    "@umbra.ui/typography": "^0.1.2",
+    "@umbra.ui/colors": "^0.2.0",
+    "@umbra.ui/icons": "^0.2.0",
+    "@umbra.ui/typography": "^0.2.0",
     "autosize": "^6.0.1",
     "@types/autosize": "^4.0.3",
     "gsap": "^3.13.0",

package/src/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/src/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/src/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 {