@umbra.ui/core 0.4.6 → 0.5.0

package/dist/components/pickers/ColorPicker/ColorPicker.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, watch, onBeforeUnmount, nextTick, computed } from "vue";
+import {
+  ref,
+  watch,
+  onBeforeUnmount,
+  nextTick,
+  computed,
+  useSlots,
+} from "vue";
 import { colors, colorPickerColors } from "./colors";
 import type { Color } from "./colors";
 import {
@@ -17,6 +24,7 @@ export interface Props {
   color: Color;
   pickerOffsetX: number;
   preventPopup: boolean;
+  label?: boolean;
   // Dot styling props
   dotSize?: number | string;
   dotRadius?: number | string;
@@ -31,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   color: () => colorPickerColors.gray700,
   pickerOffsetX: 0,
   preventPopup: false,
+  label: true,
   dotSize: "1.25rem",
   dotRadius: "999px",
   dotBorderWidth: 1,
@@ -38,6 +47,8 @@ const props = withDefaults(defineProps<Props>(), {
   dotBorderColorActive: "var(--colorpicker-dot-border-color-active)",
   showColorInfo: true,
 });
+const slots = useSlots();
+const hasCustomLabelSlot = computed(() => Boolean(slots.label));
 
 const emits = defineEmits(["update:color"]);
 
@@ -173,12 +184,16 @@ onBeforeUnmount(() => {
     <div
       :class="[
         $style.button,
-        showPopover ? $style.button_selected : $style.button_normal,
+        hasCustomLabelSlot ? $style.button_unstyled : null,
+        !hasCustomLabelSlot &&
+          (showPopover ? $style.button_selected : $style.button_normal),
       ]"
       ref="button"
       @click="togglePopover"
     >
-      <div :style="dotStyles" :class="$style.dot"></div>
+      <slot v-if="label" name="label">
+        <div :style="dotStyles" :class="$style.dot"></div>
+      </slot>
     </div>
 
     <!-- Teleport the overlay and picker to body -->
@@ -253,11 +268,19 @@ onBeforeUnmount(() => {
   transition: padding-left 0.3s, padding-right 0.3s, background-color 0.3s,
     box-shadow 0.3s;
   cursor: pointer;
+}
+
+.button_unstyled {
+  padding: 0;
+  transition: none;
+}
+
+.button_normal {
   background-color: var(--picker-button-bg);
   border: var(--picker-button-border);
 }
 
-.button:hover {
+.button_normal:hover {
   padding-left: 0.588rem;
   padding-right: 0.588rem;
   box-shadow: 0px 1px 0px 0px var(--picker-button-hover-shadow),

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

@@ -92,6 +92,55 @@ const handleColorChange = (color: Color) => {
 </style>
 ```
 
+## Custom Label Slot
+
+When you provide a custom `label` slot, the default dot/button visuals are removed
+so you can fully control the trigger presentation and animation.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { ColorPicker, colorPickerColors } from "@umbra-ui/core";
+import type { Color } from "@umbra-ui/core";
+
+const selectedColor = ref<Color>(colorPickerColors.blue500);
+</script>
+
+<template>
+  <ColorPicker v-model:color="selectedColor">
+    <template #label>
+      <span class="color-chip">
+        <span class="swatch" :style="{ backgroundColor: selectedColor.hex }" />
+        {{ selectedColor.hex }}
+      </span>
+    </template>
+  </ColorPicker>
+</template>
+
+<style module>
+.color-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.353rem;
+  padding: 0.294rem 0.471rem;
+  border-radius: 0.471rem;
+  border: 1px solid var(--border-soft, #d1d5db);
+}
+.swatch {
+  width: 0.706rem;
+  height: 0.706rem;
+  border-radius: 999px;
+  border: 1px solid #ffffff;
+}
+</style>
+```
+
+### Hiding the Label
+
+```vue
+<ColorPicker v-model:color="selectedColor" :label="false" />
+```
+
 ## Props
 
 | Prop Name              | Type               | Required | Default                                        | Description                                     |
@@ -99,6 +148,7 @@ const handleColorChange = (color: Color) => {
 | `color`                | `Color`            | Yes      | `colorPickerColors.gray700`                    | Currently selected color                        |
 | `pickerOffsetX`        | `number`           | No       | `0`                                            | Horizontal offset for picker positioning        |
 | `preventPopup`         | `boolean`          | No       | `false`                                        | Whether to prevent the popup from opening       |
+| `label`                | `boolean`          | No       | `true`                                         | Show or hide the trigger label/slot             |
 | `dotSize`              | `number \| string` | No       | `"1.25rem"`                                    | Size of the color dot                           |
 | `dotRadius`            | `number \| string` | No       | `"999px"`                                      | Border radius of the color dot                  |
 | `dotBorderWidth`       | `number`           | No       | `1`                                            | Border width of the color dot                   |

package/dist/components/pickers/IconPicker/IconPicker.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, watch, onBeforeUnmount, nextTick, computed } from "vue";
+import {
+  ref,
+  watch,
+  onBeforeUnmount,
+  nextTick,
+  computed,
+  useSlots,
+} from "vue";
 import {
   offset,
   flip,
@@ -16,6 +23,7 @@ export interface Props {
   icon: string;
   pickerOffsetX: number;
   preventPopup: boolean;
+  label?: boolean;
   iconList?: IconKey[];
   iconSize?: number;
 }
@@ -23,9 +31,12 @@ const props = withDefaults(defineProps<Props>(), {
   icon: "",
   pickerOffsetX: 0,
   preventPopup: false,
+  label: true,
   iconList: undefined,
   iconSize: 18,
 });
+const slots = useSlots();
+const hasCustomLabelSlot = computed(() => Boolean(slots.label));
 
 const emits = defineEmits(["update:icon"]);
 
@@ -139,30 +150,37 @@ onBeforeUnmount(() => {
 <template>
   <div :class="$style.container" ref="container">
     <div
-      :class="[$style.button, { [$style.active]: showPopover }]"
+      :class="[
+        $style.button,
+        hasCustomLabelSlot ? $style.button_unstyled : null,
+        !hasCustomLabelSlot &&
+          (showPopover ? $style.button_selected : $style.button_normal),
+      ]"
       @click="togglePopover"
       ref="button"
     >
-      <component
-        v-if="selectedIcon && icons[selectedIcon as IconKey]"
-        :is="icons[selectedIcon as IconKey]"
-        :size="iconSize"
-        :color="selectedColor"
-      />
-      <component
-        v-else
-        :is="icons.folder"
-        :size="iconSize"
-        :color="selectedColor"
-      />
-      <ChevronDownIcon
-        :size="selectedSize - 4"
-        :class="$style.chevron"
-        :color="selectedColor"
-        :style="{
-          transform: `rotate(${showPopover ? 0 : -90}deg)`,
-        }"
-      />
+      <slot v-if="label" name="label">
+        <component
+          v-if="selectedIcon && icons[selectedIcon as IconKey]"
+          :is="icons[selectedIcon as IconKey]"
+          :size="iconSize"
+          :color="selectedColor"
+        />
+        <component
+          v-else
+          :is="icons.folder"
+          :size="iconSize"
+          :color="selectedColor"
+        />
+        <ChevronDownIcon
+          :size="selectedSize - 4"
+          :class="$style.chevron"
+          :color="selectedColor"
+          :style="{
+            transform: `rotate(${showPopover ? 0 : -90}deg)`,
+          }"
+        />
+      </slot>
     </div>
 
     <!-- Teleport the overlay and picker to body -->
@@ -229,12 +247,21 @@ onBeforeUnmount(() => {
   cursor: pointer;
   transition: background-color 0.3s ease, box-shadow 0.3s ease,
     padding 0.3s ease, gap 0.3s ease;
+}
+
+.button_unstyled {
+  padding: 0;
+  gap: 0;
+  transition: none;
+}
+
+.button_normal {
   background-color: var(--picker-button-bg);
   border: var(--picker-button-border);
 }
 
-.button:hover,
-.button.active {
+.button_normal:hover,
+.button_selected {
   background-color: var(--picker-button-hover-bg);
   box-shadow: 0px 1px 0px 0px var(--picker-button-hover-shadow),
     inset 0px 1px 0px 0px var(--picker-button-hover-inset-shadow);
@@ -248,8 +275,8 @@ onBeforeUnmount(() => {
   opacity: 0;
 }
 
-.button:hover .chevron,
-.button.active .chevron {
+.button_normal:hover .chevron,
+.button_selected .chevron {
   opacity: 1;
 }
 

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

@@ -64,6 +64,48 @@ const handleIconChange = (icon: IconKey) => {
 </style>
 ```
 
+## Custom Label Slot
+
+When you provide a custom `label` slot, the default trigger icon/chevron visuals
+are removed so you can fully control the trigger UI and animation.
+
+```vue
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { IconPicker } from "@umbra-ui/core";
+import type { IconKey } from "@umbra-ui/icons";
+
+const selectedIcon = ref<IconKey>("home");
+const triggerText = computed(() => `Icon: ${selectedIcon.value}`);
+</script>
+
+<template>
+  <IconPicker v-model:icon="selectedIcon">
+    <template #label>
+      <span class="icon-chip">{{ triggerText }}</span>
+    </template>
+  </IconPicker>
+</template>
+
+<style module>
+.icon-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.353rem 0.529rem;
+  border-radius: 0.471rem;
+  background: var(--background-subtle, #f3f4f6);
+  color: var(--text-primary, #111827);
+  border: 1px solid var(--border-soft, #d1d5db);
+}
+</style>
+```
+
+### Hiding the Label
+
+```vue
+<IconPicker v-model:icon="selectedIcon" :label="false" />
+```
+
 ## Props
 
 | Prop Name       | Type        | Required | Default     | Description                               |
@@ -71,6 +113,7 @@ const handleIconChange = (icon: IconKey) => {
 | `icon`          | `string`    | Yes      | `""`        | Currently selected icon key               |
 | `pickerOffsetX` | `number`    | No       | `0`         | Horizontal offset for picker positioning  |
 | `preventPopup`  | `boolean`   | No       | `false`     | Whether to prevent the popup from opening |
+| `label`         | `boolean`   | No       | `true`      | Show or hide the trigger label/slot       |
 | `iconList`      | `IconKey[]` | No       | `undefined` | Custom list of available icons            |
 | `iconSize`      | `number`    | No       | `18`        | Size of the displayed icon                |
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@umbra.ui/core",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "Core components for Umbra UI",
+  "homepage": "https://www.umbraui.com/",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,9 +36,9 @@
     "@tiptap/markdown": "^3.19.0",
     "@tiptap/starter-kit": "^3.19.0",
     "@tiptap/vue-3": "^3.19.0",
-    "@umbra.ui/colors": "^0.2.0",
-    "@umbra.ui/icons": "^0.2.0",
-    "@umbra.ui/typography": "^0.3.0",
+    "@umbra.ui/colors": "^0.5.0",
+    "@umbra.ui/icons": "^0.5.0",
+    "@umbra.ui/typography": "^0.5.0",
     "autosize": "^6.0.1",
     "@types/autosize": "^4.0.3",
     "gsap": "^3.13.0",

package/src/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/src/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/src/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));