@fiscozen/input 3.0.3 → 3.1.0

package/dist/src/FzInput.vue.d.ts

@@ -1,258 +1,67 @@
 import { Ref } from 'vue';
-import { InputEnvironment } from './types';
-
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<string>;
-    error: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md" | "lg">;
-    };
-    variant: {
-        type: import('vue').PropType<"normal" | "floating-label">;
-        default: string;
-    };
-    type: {
-        type: import('vue').PropType<"number" | "text" | "password" | "email" | "tel" | "url">;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-    };
-    pattern: {
-        type: import('vue').PropType<string>;
-    };
-    placeholder: {
-        type: import('vue').PropType<string>;
-    };
-    environment: {
-        type: import('vue').PropType<InputEnvironment>;
-        default: string;
-    };
-    rightIcon: {
-        type: import('vue').PropType<string>;
-    };
-    rightIconSize: {
-        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconSize>;
-    };
-    rightIconVariant: {
-        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
-    };
-    rightIconButton: {
-        type: import('vue').PropType<boolean>;
-    };
-    rightIconButtonVariant: {
-        type: import('vue').PropType<import('@fiscozen/button').CommonButtonVariant>;
-        default: string;
-    };
-    rightIconAriaLabel: {
-        type: import('vue').PropType<string>;
-    };
-    rightIconClass: {
-        type: import('vue').PropType<string>;
-    };
-    secondRightIcon: {
-        type: import('vue').PropType<string>;
-    };
-    secondRightIconClass: {
-        type: import('vue').PropType<string>;
-    };
-    secondRightIconVariant: {
-        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
-    };
-    secondRightIconButton: {
-        type: import('vue').PropType<boolean>;
-    };
-    secondRightIconButtonVariant: {
-        type: import('vue').PropType<import('@fiscozen/button').CommonButtonVariant>;
-        default: string;
-    };
-    secondRightIconAriaLabel: {
-        type: import('vue').PropType<string>;
-    };
-    leftIcon: {
-        type: import('vue').PropType<string>;
-    };
-    leftIconVariant: {
-        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
-    };
-    leftIconButtonVariant: {
-        type: import('vue').PropType<import('@fiscozen/button').CommonButtonVariant>;
-    };
-    leftIconAriaLabel: {
-        type: import('vue').PropType<string>;
-    };
-    valid: {
-        type: import('vue').PropType<boolean>;
-    };
-    readonly: {
-        type: import('vue').PropType<boolean>;
-    };
-    maxlength: {
-        type: import('vue').PropType<number>;
-    };
-    autocomplete: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    leftIconClass: {
-        type: import('vue').PropType<string>;
-    };
-}>, {
+import { FzInputProps, InputEnvironment } from './types';
+type __VLS_Props = FzInputProps;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        label?: () => unknown;
+        "left-icon"?: () => unknown;
+        "right-icon"?: () => unknown;
+        errorMessage?: () => unknown;
+        helpText?: () => unknown;
+    }> & {
+        label?: () => unknown;
+        "left-icon"?: () => unknown;
+        "right-icon"?: () => unknown;
+        errorMessage?: () => unknown;
+        helpText?: () => unknown;
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+        inputRef: HTMLInputElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
     inputRef: Ref<HTMLInputElement | null, HTMLInputElement | null>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    blur: (event: FocusEvent) => void;
-    focus: (event: FocusEvent) => void;
-    "fzinput:left-icon-click": () => void;
-    "fzinput:right-icon-click": () => void;
-    "fzinput:second-right-icon-click": () => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<string>;
-    error: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md" | "lg">;
-    };
-    variant: {
-        type: import('vue').PropType<"normal" | "floating-label">;
-        default: string;
-    };
-    type: {
-        type: import('vue').PropType<"number" | "text" | "password" | "email" | "tel" | "url">;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-    };
-    pattern: {
-        type: import('vue').PropType<string>;
-    };
-    placeholder: {
-        type: import('vue').PropType<string>;
-    };
-    environment: {
-        type: import('vue').PropType<InputEnvironment>;
-        default: string;
-    };
-    rightIcon: {
-        type: import('vue').PropType<string>;
-    };
-    rightIconSize: {
-        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconSize>;
-    };
-    rightIconVariant: {
-        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
-    };
-    rightIconButton: {
-        type: import('vue').PropType<boolean>;
-    };
-    rightIconButtonVariant: {
-        type: import('vue').PropType<import('@fiscozen/button').CommonButtonVariant>;
-        default: string;
-    };
-    rightIconAriaLabel: {
-        type: import('vue').PropType<string>;
-    };
-    rightIconClass: {
-        type: import('vue').PropType<string>;
-    };
-    secondRightIcon: {
-        type: import('vue').PropType<string>;
-    };
-    secondRightIconClass: {
-        type: import('vue').PropType<string>;
-    };
-    secondRightIconVariant: {
-        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
-    };
-    secondRightIconButton: {
-        type: import('vue').PropType<boolean>;
-    };
-    secondRightIconButtonVariant: {
-        type: import('vue').PropType<import('@fiscozen/button').CommonButtonVariant>;
-        default: string;
-    };
-    secondRightIconAriaLabel: {
-        type: import('vue').PropType<string>;
-    };
-    leftIcon: {
-        type: import('vue').PropType<string>;
-    };
-    leftIconVariant: {
-        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
-    };
-    leftIconButtonVariant: {
-        type: import('vue').PropType<import('@fiscozen/button').CommonButtonVariant>;
-    };
-    leftIconAriaLabel: {
-        type: import('vue').PropType<string>;
-    };
-    valid: {
-        type: import('vue').PropType<boolean>;
-    };
-    readonly: {
-        type: import('vue').PropType<boolean>;
-    };
-    maxlength: {
-        type: import('vue').PropType<number>;
-    };
-    autocomplete: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    leftIconClass: {
-        type: import('vue').PropType<string>;
-    };
-}>> & Readonly<{
-    onBlur?: ((event: FocusEvent) => any) | undefined;
+    focus: (event: FocusEvent) => any;
+    blur: (event: FocusEvent) => any;
+    "fzinput:left-icon-click": () => any;
+    "fzinput:right-icon-click": () => any;
+    "fzinput:second-right-icon-click": () => any;
+    "update:highlighted": (value: boolean) => any;
+    "update:aiReasoning": (value: boolean) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onFocus?: ((event: FocusEvent) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
     "onFzinput:left-icon-click"?: (() => any) | undefined;
     "onFzinput:right-icon-click"?: (() => any) | undefined;
     "onFzinput:second-right-icon-click"?: (() => any) | undefined;
+    "onUpdate:highlighted"?: ((value: boolean) => any) | undefined;
+    "onUpdate:aiReasoning"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    error: boolean;
     variant: "normal" | "floating-label";
-    type: "number" | "text" | "password" | "email" | "tel" | "url";
+    type: "text" | "password" | "email" | "number" | "tel" | "url";
     environment: InputEnvironment;
-    rightIconButtonVariant: import('@fiscozen/button').CommonButtonVariant;
-    secondRightIconButtonVariant: import('@fiscozen/button').CommonButtonVariant;
+    rightIconButtonVariant: import('@fiscozen/button').IconButtonVariant;
+    secondRightIconButtonVariant: import('@fiscozen/button').IconButtonVariant;
+    error: boolean;
+    highlighted: boolean;
+    aiReasoning: boolean;
     autocomplete: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Readonly<{
-    label?: (() => unknown) | undefined;
-    "left-icon"?: (() => unknown) | undefined;
-    "right-icon"?: (() => unknown) | undefined;
-    errorMessage?: (() => unknown) | undefined;
-    helpText?: (() => unknown) | undefined;
-}> & {
-    label?: (() => unknown) | undefined;
-    "left-icon"?: (() => unknown) | undefined;
-    "right-icon"?: (() => unknown) | undefined;
-    errorMessage?: (() => unknown) | undefined;
-    helpText?: (() => unknown) | undefined;
-}>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+    inputRef: HTMLInputElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/src/types.d.ts

@@ -1,6 +1,5 @@
 import { IconButtonVariant } from '@fiscozen/button';
 import { IconSize, IconVariant } from '@fiscozen/icons';
-
 export type InputEnvironment = "backoffice" | "frontoffice";
 type FzInputProps = {
     /**
@@ -127,7 +126,7 @@ type FzInputProps = {
      * Visual presentation style. 'floating-label' moves placeholder above input when focused/filled
      * @default 'normal'
      */
-    variant?: 'normal' | 'floating-label';
+    variant?: "normal" | "floating-label";
     /**
      * HTML5 pattern attribute for native browser validation
      */
@@ -141,6 +140,22 @@ type FzInputProps = {
      * @default false
      */
     readonly?: boolean;
+    /**
+     * Shows highlighted state with warning colors (orange border, warm background, glow ring).
+     * Overridden by error, disabled, and readonly states.
+     * If both highlighted and aiReasoning are true, highlighted takes priority.
+     * @default false
+     */
+    highlighted?: boolean;
+    /**
+     * Shows AI reasoning state with purple colors (purple border, light purple background, glow ring).
+     * Auto-renders a sparkles icon unless leftIcon prop or left-icon slot is provided.
+     * Overridden by error, disabled, readonly, and highlighted states.
+     * @note When both aiReasoning and leftIcon are provided, leftIcon takes visual precedence
+     * and no sparkles icon is rendered.
+     * @default false
+     */
+    aiReasoning?: boolean;
     /**
      * Native maxlength attribute. Limits maximum number of characters
      */

package/dist/src/useInputStyle.d.ts

@@ -1,6 +1,5 @@
 import { ToRefs, Ref, ComputedRef } from 'vue';
 import { FzInputProps, InputEnvironment } from './types';
-
 /**
  * Composable for managing FzInput component styles and computed classes
  *
@@ -16,7 +15,7 @@ import { FzInputProps, InputEnvironment } from './types';
  */
 export default function useInputStyle(props: ToRefs<FzInputProps>, container: Ref<HTMLElement | null>, model: Ref<string | undefined>, effectiveEnvironment: ComputedRef<InputEnvironment>, isFocused: Ref<boolean>): {
     staticContainerClass: string;
-    computedContainerClass: ComputedRef<(string | undefined)[]>;
+    computedContainerClass: ComputedRef<string[]>;
     computedLabelClass: ComputedRef<string[]>;
     staticInputClass: string;
     computedInputClass: ComputedRef<string[]>;

package/dist/src/utils.d.ts

@@ -1,5 +1,4 @@
 import { InputEnvironment } from './types';
-
 type InputSize = "sm" | "md" | "lg";
 /**
  * Maps deprecated InputSize to InputEnvironment

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@fiscozen/input",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/button": "3.0.0",
+    "@fiscozen/alert": "3.0.0",
     "@fiscozen/composables": "1.0.3",
-    "@fiscozen/alert": "3.0.0"
+    "@fiscozen/button": "3.0.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^1.0.0"
+    "@fiscozen/icons": "^1.0.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^18.19.3",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vitest/coverage-v8": "^1.2.1",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.1",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.0",
     "eslint": "^8.49.0",
     "jsdom": "^23.0.1",
     "prettier": "^3.0.3",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.8.3",
-    "vitest": "^1.2.0",
-    "vue-tsc": "^1.8.25",
+    "typescript": "~5.7.0",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.1.1",
+    "vue-tsc": "^2.2.12",
     "@fiscozen/eslint-config": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/tsconfig": "^0.1.0"

package/src/FzInput.vue

@@ -27,6 +27,8 @@ const props = withDefaults(defineProps<FzInputProps>(), {
   variant: "normal",
   environment: "frontoffice",
   autocomplete: false,
+  highlighted: false,
+  aiReasoning: false,
 });
 
 defineOptions({
@@ -117,6 +119,46 @@ const inputRef: Ref<HTMLInputElement | null> = ref(null);
 const uniqueId = generateInputId();
 const isFocused = ref(false);
 
+/**
+ * Internal visual state for emphasis props.
+ * These track the effective visual state which can differ from props when
+ * the user types into a highlighted/aiReasoning input (user input resets emphasis).
+ * Programmatic value changes (via v-model) do not affect these states.
+ */
+const effectiveHighlighted = ref(props.highlighted);
+const effectiveAiReasoning = ref(props.aiReasoning);
+
+watch(
+  () => props.highlighted,
+  (val) => {
+    effectiveHighlighted.value = val;
+  },
+);
+watch(
+  () => props.aiReasoning,
+  (val) => {
+    effectiveAiReasoning.value = val;
+  },
+);
+
+/**
+ * Resets visual emphasis (highlighted/aiReasoning) when user physically types.
+ * Only triggered by native input events (user interaction), not programmatic v-model updates.
+ * Emits update events so parents using v-model:highlighted / v-model:aiReasoning stay in sync.
+ */
+const handleUserInput = () => {
+  if (effectiveHighlighted.value) {
+    effectiveHighlighted.value = false;
+    emit("update:highlighted", false);
+  }
+  if (effectiveAiReasoning.value) {
+    effectiveAiReasoning.value = false;
+    emit("update:aiReasoning", false);
+  }
+};
+
+const propsRefs = toRefs(props);
+
 const {
   staticContainerClass,
   computedContainerClass,
@@ -127,7 +169,11 @@ const {
   containerWidth,
   showNormalPlaceholder,
 } = useInputStyle(
-  toRefs(props),
+  {
+    ...propsRefs,
+    highlighted: effectiveHighlighted,
+    aiReasoning: effectiveAiReasoning,
+  },
   containerRef,
   model,
   effectiveEnvironment,
@@ -185,6 +231,8 @@ const emit = defineEmits<{
   "fzinput:left-icon-click": [];
   "fzinput:right-icon-click": [];
   "fzinput:second-right-icon-click": [];
+  "update:highlighted": [value: boolean];
+  "update:aiReasoning": [value: boolean];
 }>();
 
 /**
@@ -305,6 +353,15 @@ const isReadonlyOrDisabled = computed(
   () => !!props.disabled || !!props.readonly,
 );
 
+/**
+ * Computed class for the auto-rendered AI sparkles icon.
+ * Muted when the input is in error, disabled, or readonly state.
+ */
+const aiIconClass = computed(() => {
+  if (isReadonlyOrDisabled.value || props.error) return "text-grey-300";
+  return "text-purple-600";
+});
+
 /**
  * Determines if right icon is clickable (not rendered as button)
  */
@@ -385,6 +442,14 @@ defineExpose({
               : undefined
           "
         />
+        <FzIcon
+          v-else-if="effectiveAiReasoning"
+          name="sparkles"
+          variant="fas"
+          size="md"
+          aria-hidden="true"
+          :class="aiIconClass"
+        />
       </slot>
       <div class="flex flex-col justify-around min-w-0 grow">
         <span
@@ -412,6 +477,7 @@ defineExpose({
           :aria-labelledby="ariaLabelledBy"
           :aria-describedby="ariaDescribedBy"
           v-bind="inputAttrs"
+          @input="handleUserInput"
           @blur="
             (e) => {
               isFocused = false;