@umbra.ui/core 0.4.5 → 0.5.0

package/dist/components/inputs/InputCard/InputCard.vue

@@ -39,7 +39,7 @@ const currentDigitCount = computed(() => {
 
 const maxAllowedDigits = computed(() => {
   if (cardInfo.value) {
-    return Math.max(...cardInfo.value.lengths);
+    return cardInfo.value.format.reduce((sum, group) => sum + group, 0);
   }
   // Default max for unknown cards
   return 16;
@@ -48,12 +48,14 @@ const maxAllowedDigits = computed(() => {
 const internalValue = ref(props.value);
 const cursorPosition = ref<number | null>(null);
 const inputRef = ref<HTMLInputElement | null>(null);
+const isFocused = ref(false);
+const hasBlurred = ref(false);
 
 // Card type patterns
 const cardPatterns = {
   visa: {
     pattern: /^4/,
-    lengths: [16, 19],
+    lengths: [16],
     format: [4, 4, 4, 4],
     cvvLength: 3,
     name: "Visa",
@@ -187,15 +189,38 @@ const isComplete = computed(() => {
   if (!cardInfo.value) return false;
   return cardInfo.value.lengths.includes(cleaned.length);
 });
+const hasCardInput = computed(() => {
+  return internalValue.value.replace(/\D/g, "").length > 0;
+});
 
-// Override state to show error when card is complete but invalid
+// Override state to show error on blur when card input is invalid
 const effectiveState = computed(() => {
-  if (isComplete.value && !isValid.value) {
+  if (props.state === "error") {
+    return "error";
+  }
+  if (props.state === "disabled" || props.state === "readonly") {
+    return props.state;
+  }
+  if (
+    !isFocused.value &&
+    hasBlurred.value &&
+    hasCardInput.value &&
+    !isValid.value
+  ) {
     return "error";
   }
   return props.state;
 });
 
+const showInternalError = computed(() => {
+  return (
+    !isFocused.value &&
+    hasBlurred.value &&
+    hasCardInput.value &&
+    !isValid.value
+  );
+});
+
 // Watch for changes to value prop
 watch(
   () => props.value,
@@ -244,12 +269,13 @@ const handleInput = (event: Event) => {
   // Format the number
   const { formatted, cursorPos } = formatCardNumber(digitsOnly);
   internalValue.value = formatted;
+  const normalizedDigits = formatted.replace(/\D/g, "");
 
   // Update cursor position
   cursorPosition.value = cursorPos;
 
   // Emit events
-  emit("update:value", digitsOnly); // Raw digits
+  emit("update:value", normalizedDigits); // Raw digits
   emit("update:formatted", formatted); // Formatted display
   emit("update:cardType", cardInfo.value?.name || "");
   emit("update:valid", isValid.value && isComplete.value);
@@ -275,7 +301,7 @@ const handlePaste = (event: ClipboardEvent) => {
     // Detect card type first to know the limit
     const cardType = detectCardType(cleanedNumber);
     const maxLength = cardType
-      ? Math.max(...cardPatterns[cardType].lengths)
+      ? cardPatterns[cardType].format.reduce((sum, group) => sum + group, 0)
       : 16;
 
     // Enforce the limit
@@ -283,7 +309,7 @@ const handlePaste = (event: ClipboardEvent) => {
 
     const { formatted } = formatCardNumber(cleanedNumber);
     internalValue.value = formatted;
-    emit("update:value", cleanedNumber);
+    emit("update:value", formatted.replace(/\D/g, ""));
     emit("update:formatted", formatted);
     emit("update:cardType", cardInfo.value?.name || "");
     emit("update:valid", isValid.value && isComplete.value);
@@ -323,6 +349,15 @@ const handleKeyDown = (event: KeyboardEvent) => {
   }
 };
 
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleBlur = () => {
+  isFocused.value = false;
+  hasBlurred.value = true;
+};
+
 // SVG icons for card types
 const cardIcons = {
   visa: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g class="nc-icon-wrapper"><rect x="2" y="7" width="28" height="18" rx="3" ry="3" fill="#1434cb" stroke-width="0"></rect><path d="m27,7H5c-1.657,0-3,1.343-3,3v12c0,1.657,1.343,3,3,3h22c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3Zm2,15c0,1.103-.897,2-2,2H5c-1.103,0-2-.897-2-2v-12c0-1.103.897-2,2-2h22c1.103,0,2,.897,2,2v12Z" stroke-width="0" opacity=".15"></path><path d="m27,8H5c-1.105,0-2,.895-2,2v1c0-1.105.895-2,2-2h22c1.105,0,2,.895,2,2v-1c0-1.105-.895-2-2-2Z" fill="#fff" opacity=".2" stroke-width="0"></path><path d="m13.392,12.624l-2.838,6.77h-1.851l-1.397-5.403c-.085-.332-.158-.454-.416-.595-.421-.229-1.117-.443-1.728-.576l.041-.196h2.98c.38,0,.721.253.808.69l.738,3.918,1.822-4.608h1.84Z" fill="#fff" stroke-width="0"></path><path d="m20.646,17.183c.008-1.787-2.47-1.886-2.453-2.684.005-.243.237-.501.743-.567.251-.032.943-.058,1.727.303l.307-1.436c-.421-.152-.964-.299-1.638-.299-1.732,0-2.95.92-2.959,2.238-.011.975.87,1.518,1.533,1.843.683.332.912.545.909.841-.005.454-.545.655-1.047.663-.881.014-1.392-.238-1.799-.428l-.318,1.484c.41.188,1.165.351,1.947.359,1.841,0,3.044-.909,3.05-2.317" fill="#fff" stroke-width="0"></path><path d="m25.423,12.624h-1.494c-.337,0-.62.195-.746.496l-2.628,6.274h1.839l.365-1.011h2.247l.212,1.011h1.62l-1.415-6.77Zm-2.16,4.372l.922-2.542.53,2.542h-1.452Z" fill="#fff" stroke-width="0"></path><path fill="#fff" stroke-width="0" d="M15.894 12.624L14.446 19.394 12.695 19.394 14.143 12.624 15.894 12.624z"></path></g></svg>`,
@@ -365,6 +400,8 @@ const getPlaceholder = computed(() => {
         @input="handleInput"
         @paste="handlePaste"
         @keydown="handleKeyDown"
+        @focus="handleFocus"
+        @blur="handleBlur"
         :maxlength="24"
         :disabled="state === 'disabled'"
         :readonly="state === 'readonly'"
@@ -377,7 +414,7 @@ const getPlaceholder = computed(() => {
         ></div>
       </transition>
       <transition name="fade">
-        <div v-if="isComplete && !isValid" :class="$style.error_icon">
+        <div v-if="showInternalError" :class="$style.error_icon">
           <TriangleWarningIcon size="16" />
         </div>
       </transition>
@@ -385,7 +422,7 @@ const getPlaceholder = computed(() => {
     </div>
     <transition name="slide-fade">
       <p
-        v-if="isComplete && !isValid"
+        v-if="showInternalError"
         :class="[$style.error_message, 'footnote']"
       >
         Please enter a valid card number

package/dist/components/inputs/InputCryptoAddress/InputCryptoAddress.vue

@@ -51,6 +51,7 @@ const emit = defineEmits<{
 const internalValue = ref(props.value);
 const inputRef = ref<HTMLInputElement | null>(null);
 const isFocused = ref(false);
+const hasBlurred = ref(false);
 
 watch(
   () => props.value,
@@ -95,11 +96,22 @@ const validationState = computed(() => {
   return validateValue(value) ? "valid" : "invalid";
 });
 
+const showInternalInvalid = computed(() => {
+  return (
+    !isFocused.value &&
+    hasBlurred.value &&
+    validationState.value === "invalid"
+  );
+});
+
 const computedState = computed(() => {
+  if (props.state === "error") {
+    return "error";
+  }
   if (props.state === "disabled" || props.state === "readonly") {
     return props.state;
   }
-  if (validationState.value === "invalid") return "error";
+  if (showInternalInvalid.value) return "error";
   return props.state;
 });
 
@@ -113,7 +125,7 @@ const iconColor = computed(() => {
   if (validationState.value === "valid") {
     return "black";
   }
-  if (validationState.value === "invalid" || computedState.value === "error") {
+  if (computedState.value === "error") {
     return "var(--input-error-text)";
   }
   switch (computedState.value) {
@@ -140,9 +152,16 @@ const handleFocus = () => {
 
 const handleBlur = () => {
   isFocused.value = false;
+  hasBlurred.value = true;
   closeList();
 };
 
+const showStatusMessage = computed(() => {
+  if (validationState.value === "idle") return false;
+  if (validationState.value === "valid") return true;
+  return showInternalInvalid.value;
+});
+
 const focusInput = () => {
   if (
     computedState.value === "disabled" ||
@@ -265,7 +284,7 @@ onMounted(() => {
           $style.button,
           !itemsInDrawer ? $style.button_drawer_open : '',
           validationState === 'valid' ? $style.button_valid : '',
-          validationState === 'invalid' ? $style.button_error : '',
+          computedState === 'error' ? $style.button_error : '',
           isFocused && !hasKnown ? $style.button_focus : '',
         ]"
         @click="focusInput"
@@ -311,7 +330,7 @@ onMounted(() => {
       ]"
     ></div>
     <p
-      v-if="validationState !== 'idle'"
+      v-if="showStatusMessage"
       :class="[
         $style.status_message,
         validationState === 'invalid'

package/dist/components/inputs/InputEmail/InputEmail.vue

@@ -35,7 +35,8 @@ const internalValue = ref(props.value);
 const showSuggestionsList = ref(false);
 const selectedSuggestionIndex = ref(-1);
 const inputRef = ref<HTMLInputElement | null>(null);
-const hasInteracted = ref(false);
+const hasBlurred = ref(false);
+const isFocused = ref(false);
 
 // Common email domains for suggestions
 const commonDomains = [
@@ -193,15 +194,21 @@ const hasTypo = computed(() => {
 
 const showError = computed(() => {
   return (
-    hasInteracted.value &&
+    !isFocused.value &&
+    hasBlurred.value &&
     !isValid.value &&
-    internalValue.value.length > 0 &&
-    (!props.validateOnType || internalValue.value.includes("@"))
+    internalValue.value.length > 0
   );
 });
 
 // Override state to show error when email is invalid
 const effectiveState = computed(() => {
+  if (props.state === "error") {
+    return "error";
+  }
+  if (props.state === "disabled" || props.state === "readonly") {
+    return props.state;
+  }
   if (showError.value) {
     return "error";
   }
@@ -245,7 +252,6 @@ const handleInput = (event: Event) => {
   }
 
   internalValue.value = value;
-  hasInteracted.value = true;
 
   // Show suggestions when @ is typed
   if (value.includes("@") && props.showSuggestions) {
@@ -264,7 +270,8 @@ const handleInput = (event: Event) => {
 
 // Handle blur
 const handleBlur = () => {
-  hasInteracted.value = true;
+  isFocused.value = false;
+  hasBlurred.value = true;
   // Delay hiding suggestions to allow click
   setTimeout(() => {
     showSuggestionsList.value = false;
@@ -273,6 +280,7 @@ const handleBlur = () => {
 
 // Handle focus
 const handleFocus = () => {
+  isFocused.value = true;
   if (
     internalValue.value.includes("@") &&
     generateSuggestions.value.length > 0
@@ -350,7 +358,6 @@ const handlePaste = (event: ClipboardEvent) => {
   }
 
   internalValue.value = cleaned;
-  hasInteracted.value = true;
 
   emit("update:value", cleaned);
   emit("update:valid", isValidEmail(cleaned));

package/dist/components/inputs/InputNumber/InputNumber.vue

@@ -28,13 +28,35 @@ const emit = defineEmits<{
 const internalValue = ref(props.value);
 const isOutOfRange = ref(false);
 const rangeErrorMessage = ref("");
+const isFocused = ref(false);
+const hasBlurred = ref(false);
 
 // Computed property to determine the actual state
 const actualState = computed(() => {
-  if (isOutOfRange.value) return "error";
+  if (props.state === "error") return "error";
+  if (props.state === "disabled" || props.state === "readonly") {
+    return props.state;
+  }
+  if (
+    !isFocused.value &&
+    hasBlurred.value &&
+    isOutOfRange.value &&
+    internalValue.value !== undefined
+  ) {
+    return "error";
+  }
   return props.state;
 });
 
+const showInternalRangeError = computed(() => {
+  return (
+    !isFocused.value &&
+    hasBlurred.value &&
+    isOutOfRange.value &&
+    internalValue.value !== undefined
+  );
+});
+
 // Get the appropriate text color for icons based on state
 const getIconColor = () => {
   return "var(--input-text-filled)";
@@ -76,6 +98,15 @@ const handleInput = (event: Event) => {
   emit("update:value", numValue || 0);
 };
 
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleBlur = () => {
+  isFocused.value = false;
+  hasBlurred.value = true;
+};
+
 const getPlaceholder = computed(() => {
   if (props.state === "readonly") {
     return "Field Cannot Be Edited";
@@ -95,11 +126,13 @@ const getPlaceholder = computed(() => {
         :min="min"
         :max="max"
         @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
         :disabled="state === 'disabled'"
         :readonly="state === 'readonly'"
       />
       <RippleAnimOutlineIcon
-        v-if="state === 'active' && !isOutOfRange"
+        v-if="state === 'active' && !showInternalRangeError"
         :class="$style.icon"
         :size="16"
         :color="getIconColor()"
@@ -115,7 +148,7 @@ const getPlaceholder = computed(() => {
       >
     </div>
     <p
-      v-if="actualState === 'error'"
+      v-if="props.state === 'error' || showInternalRangeError"
       :class="[$style.error_message, 'footnote']"
     >
       {{ rangeErrorMessage || "Information About The Error" }}

package/dist/components/inputs/InputPhone/InputPhone.vue

@@ -34,6 +34,8 @@ const emit = defineEmits<{
 const internalValue = ref(props.value);
 const cursorPosition = ref<number | null>(null);
 const inputRef = ref<HTMLInputElement | null>(null);
+const isFocused = ref(false);
+const hasBlurred = ref(false);
 
 // Add this computed property to track current digit count
 const currentDigitCount = computed(() => {
@@ -238,12 +240,32 @@ const currentPlaceholder = computed(() => {
 
 // Override state to show error when phone number is invalid
 const effectiveState = computed(() => {
-  if (!isValid.value && internalValue.value.length > 0) {
+  if (props.state === "error") {
+    return "error";
+  }
+  if (props.state === "disabled" || props.state === "readonly") {
+    return props.state;
+  }
+  if (
+    !isFocused.value &&
+    hasBlurred.value &&
+    !isValid.value &&
+    internalValue.value.length > 0
+  ) {
     return "error";
   }
   return props.state;
 });
 
+const showInternalError = computed(() => {
+  return (
+    !isFocused.value &&
+    hasBlurred.value &&
+    !isValid.value &&
+    internalValue.value.length > 0
+  );
+});
+
 // Get the appropriate text color for icons based on state
 const getIconColor = () => {
   return "var(--input-text-filled)";
@@ -424,6 +446,15 @@ const getPlaceholder = computed(() => {
   }
   return currentPlaceholder.value;
 });
+
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleBlur = () => {
+  isFocused.value = false;
+  hasBlurred.value = true;
+};
 </script>
 
 <template>
@@ -439,6 +470,8 @@ const getPlaceholder = computed(() => {
         @input="handleInput"
         @paste="handlePaste"
         @keydown="handleKeyDown"
+        @focus="handleFocus"
+        @blur="handleBlur"
         :maxlength="20"
         :disabled="state === 'disabled'"
         :readonly="state === 'readonly'"
@@ -446,7 +479,7 @@ const getPlaceholder = computed(() => {
       <PhoneIcon v-if="!internalValue" :size="16" />
       <transition name="fade">
         <div
-          v-if="!isValid && internalValue.length > 0"
+          v-if="showInternalError"
           :class="$style.error_icon"
         >
           <TriangleWarningIcon size="16" />
@@ -455,7 +488,7 @@ const getPlaceholder = computed(() => {
     </div>
     <transition name="slide-fade">
       <p
-        v-if="!isValid && internalValue.length > 0"
+        v-if="showInternalError"
         :class="[$style.error_message, 'footnote']"
       >
         Please enter a valid phone number

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

@@ -77,6 +77,7 @@ const showRequirementsUI = computed(() => {
 const showInput = ref<boolean>(false);
 const internalValue = ref(props.value);
 const isFocused = ref(false);
+const hasBlurred = ref(false);
 const inputRef = ref<HTMLInputElement | null>(null);
 
 // Common weak passwords to check against
@@ -210,12 +211,32 @@ const strengthIndicator = computed(() => {
 
 // Override state to show error when password is invalid
 const effectiveState = computed(() => {
-  if (internalValue.value && !isValid.value) {
+  if (props.state === "error") {
+    return "error";
+  }
+  if (props.state === "disabled" || props.state === "readonly") {
+    return props.state;
+  }
+  if (
+    !isFocused.value &&
+    hasBlurred.value &&
+    internalValue.value &&
+    !isValid.value
+  ) {
     return "error";
   }
   return props.state;
 });
 
+const showInternalError = computed(() => {
+  return (
+    !isFocused.value &&
+    hasBlurred.value &&
+    !!internalValue.value &&
+    !isValid.value
+  );
+});
+
 // Get the appropriate text color for icons based on state
 const getIconColor = () => {
   return "var(--input-text-filled)";
@@ -299,6 +320,7 @@ const handleFocus = () => {
 };
 
 const handleBlur = () => {
+  hasBlurred.value = true;
   // Delay to allow clicks on requirements
   setTimeout(() => {
     isFocused.value = false;
@@ -411,7 +433,9 @@ const getPlaceholder = computed(() => {
     <!-- Requirements list -->
     <transition name="slide-fade">
       <div
-        v-if="showRequirementsUI && (isFocused || !isValid) && internalValue"
+        v-if="
+          showRequirementsUI && (isFocused || showInternalError) && internalValue
+        "
         :class="$style.requirements"
       >
         <div
@@ -442,7 +466,7 @@ const getPlaceholder = computed(() => {
 
     <transition name="slide-fade">
       <p
-        v-if="!isValid && isFocused && customValidationMessage"
+        v-if="showInternalError && customValidationMessage"
         :class="[$style.error_message, 'footnote']"
       >
         {{ customValidationMessage }}

package/dist/components/pickers/CollectionPicker/CollectionPicker.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick, onUnmounted } from "vue";
+import {
+  ref,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  useSlots,
+  computed,
+} from "vue";
 import { icons } from "@umbra.ui/icons";
 import { IconButton } from "@umbra.ui/core";
 import {
@@ -24,6 +31,7 @@ export interface Props {
   items: CollectionItem[];
   selectedItem: CollectionItem | null;
   loading?: boolean;
+  label?: boolean;
   // Customizable labels
   buttonLabel?: string;
   headerLabel?: string;
@@ -40,6 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   selectedItem: null,
   loading: false,
+  label: true,
   buttonLabel: "Select Item",
   headerLabel: "Choose an Item",
   newItemLabel: "New Item",
@@ -48,6 +57,8 @@ const props = withDefaults(defineProps<Props>(), {
   allowCreate: true,
   placeholder: "Enter name...",
 });
+const slots = useSlots();
+const hasCustomLabelSlot = computed(() => Boolean(slots.label));
 
 // - Emits (Pure Actions)
 const emits = defineEmits<{
@@ -190,17 +201,21 @@ const getIconComponent = (iconName: string) => {
     <div
       :class="[
         $style.button,
-        showPopover ? $style.button_selected : $style.button_normal,
+        hasCustomLabelSlot ? $style.button_unstyled : null,
+        !hasCustomLabelSlot &&
+          (showPopover ? $style.button_selected : $style.button_normal),
       ]"
       @click="togglePopover"
       ref="button"
     >
-      <p v-if="selectedItem" class="callout" :class="$style.button_label">
-        {{ selectedItem.title }}
-      </p>
-      <p v-else class="callout" :class="$style.button_label">
-        {{ buttonLabel }}
-      </p>
+      <slot v-if="label" name="label">
+        <p v-if="selectedItem" class="callout" :class="$style.button_label">
+          {{ selectedItem.title }}
+        </p>
+        <p v-else class="callout" :class="$style.button_label">
+          {{ buttonLabel }}
+        </p>
+      </slot>
     </div>
 
     <!-- Teleport the overlay and picker to body -->
@@ -278,10 +293,17 @@ const getIconComponent = (iconName: string) => {
   transition: padding-left 0.3s, padding-right 0.3s, background-color 0.3s,
     box-shadow 0.3s;
   cursor: default;
+}
+.button_unstyled {
+  padding: 0;
+  gap: 0;
+  transition: none;
+}
+.button_normal {
   background-color: var(--picker-button-bg);
   border: var(--picker-button-border);
 }
-.button:hover {
+.button_normal:hover {
   background-color: var(--picker-button-hover-bg);
   padding-left: 0.588rem;
   padding-right: 0.588rem;

package/dist/components/pickers/CollectionPicker/README.md

@@ -82,6 +82,55 @@ const handleItemCreate = (title: string) => {
 </style>
 ```
 
+## Custom Label Slot
+
+When you provide a custom `label` slot, the default trigger visuals are removed so
+you can fully control the trigger content, styling, and animation behavior.
+
+```vue
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { CollectionPicker } from "@umbra-ui/core";
+import type { CollectionItem } from "@umbra-ui/core";
+
+const items = ref<CollectionItem[]>([
+  { id: "1", title: "Roadmap" },
+  { id: "2", title: "Backlog" },
+]);
+const selectedItem = ref<CollectionItem | null>(items.value[0]);
+const triggerLabel = computed(() => selectedItem.value?.title ?? "Select collection");
+</script>
+
+<template>
+  <CollectionPicker v-model:selected-item="selectedItem" :items="items">
+    <template #label>
+      <span class="collection-chip">{{ triggerLabel }}</span>
+    </template>
+  </CollectionPicker>
+</template>
+
+<style module>
+.collection-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.353rem 0.588rem;
+  border-radius: 999px;
+  background: var(--background-dark, #111827);
+  color: var(--text-light, #ffffff);
+}
+</style>
+```
+
+### Hiding the Label
+
+```vue
+<CollectionPicker
+  v-model:selected-item="selectedItem"
+  :items="items"
+  :label="false"
+/>
+```
+
 ## Props
 
 | Prop Name      | Type                     | Required | Default            | Description                             |
@@ -89,6 +138,7 @@ const handleItemCreate = (title: string) => {
 | `items`        | `CollectionItem[]`       | Yes      | `[]`               | Array of items to display in the picker |
 | `selectedItem` | `CollectionItem \| null` | No       | `null`             | Currently selected item                 |
 | `loading`      | `boolean`                | No       | `false`            | Whether the picker is in loading state  |
+| `label`        | `boolean`                | No       | `true`             | Show or hide the trigger label/slot     |
 | `buttonLabel`  | `string`                 | No       | `"Select Item"`    | Label for the trigger button            |
 | `headerLabel`  | `string`                 | No       | `"Choose an Item"` | Header text in the picker               |
 | `newItemLabel` | `string`                 | No       | `"New Item"`       | Label for the create new item option    |