@umbra.ui/core 0.4.6 → 0.5.0

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

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