@aziontech/webkit 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aziontech/webkit",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Reusable UI components and design system utilities for building Azion web interfaces.",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,9 @@
     "./field-text-area": "./src/core/form/field-text-area/field-text-area.vue",
     "./field-text-icon": "./src/core/form/field-text-icon/field-text-icon.vue",
     "./field-text-password": "./src/core/form/field-text-password/field-text-password.vue",
+    "./field-text-privacy": "./src/core/form/field-text-privacy/field-text-privacy.vue",
     "./label": "./src/core/form/label/label.vue",
-    "./selector-block": "./src/core/selector-block/selector-block.vue"
+    "./selector-block": "./src/core/selector-block/selector-block.vue",
+    "./azion-system-status": "./src/components/azion-system-status/azion-system-status.vue"
   }
 }

package/src/components/azion-system-status/azion-system-status.vue

@@ -0,0 +1,123 @@
+<script setup>
+// azion system status button
+import PrimeButton from 'primevue/button'
+import { ref, computed, onMounted } from 'vue'
+
+const STATUS_PAGE = {
+  none: 'operational',
+  minor: 'minor-outage',
+  major: 'partial-outage',
+  critical: 'major-outage',
+  maintenance: 'maintenance'
+}
+
+const STATUS_PAGE_COLORS = {
+  none: '#8bc249',
+  minor: '#fec111',
+  major: '#f3652b',
+  critical: '#ff4141',
+  maintenance: '#6e7cf7'
+}
+
+const OPERATIONAL_STATUS = {
+  indicator: 'none',
+  description: 'All Systems Operational'
+}
+
+const STATUS_API_BASE_URL = 'https://status.azion.com/api/v2'
+
+async function fetchStatusApi(endpoint) {
+  const response = await fetch(`${STATUS_API_BASE_URL}${endpoint}`, {
+    method: 'GET'
+  })
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`)
+  }
+
+  return response.json()
+}
+
+const error = ref(false)
+const status = ref('')
+const label = ref('')
+const link = ref('https://status.azion.com')
+const color = ref(STATUS_PAGE_COLORS.none)
+
+const colorStatus = computed(() => ({ color: color.value }))
+
+function redirectToLink() {
+  window.open(link.value, '_blank')
+}
+
+async function fetchComponentsStatus() {
+  return fetchStatusApi('/components.json')
+}
+
+async function fetchStatusPage() {
+  const data = await fetchStatusApi('/status.json')
+
+  if (data && data.status) {
+    return {
+      indicator: data.status.indicator,
+      description: data.status.description
+    }
+  }
+
+  return OPERATIONAL_STATUS
+}
+
+async function checkComponentStatus() {
+  try {
+    const data = await fetchComponentsStatus()
+    const components = data?.components || []
+
+    const checkComponents = (component) =>
+      component.status !== 'operational' && component.status !== 'partial_outage'
+    const hasImpactedComponent = components.some(checkComponents)
+
+    const statusResult = await getStatus(hasImpactedComponent)
+    updateSystemStatus(statusResult)
+  } catch (err) {
+    error.value = true
+    // eslint-disable-next-line no-console
+    console.error(err)
+  }
+}
+
+async function getStatus(checkStatusPage) {
+  if (checkStatusPage) {
+    return fetchStatusPage()
+  }
+
+  return OPERATIONAL_STATUS
+}
+
+function updateSystemStatus({ indicator, description }) {
+  status.value = STATUS_PAGE[indicator]
+  color.value = STATUS_PAGE_COLORS[indicator]
+  label.value = description
+}
+
+onMounted(() => {
+  checkComponentStatus()
+})
+</script>
+
+<template>
+  <PrimeButton
+    outlined
+    class="surface-section min-w-fit hover:surface-hover whitespace-nowrap"
+    icon="pi pi-circle-fill"
+    size="small"
+    v-show="!error"
+    :label="label"
+    :loading="!label"
+    :pt="{
+      root: { class: 'h-8 flex-row items-center' },
+      label: { class: 'font-normal text-sm min-w-[9rem]' },
+      icon: { style: colorStatus, class: 'text-xs' }
+    }"
+    @click="redirectToLink"
+  />
+</template>

package/src/components/azion-system-status/azion-system-status.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=azion-system-status.vue.d.ts.map

package/src/components/azion-system-status/azion-system-status.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"azion-system-status.vue.d.ts","sourceRoot":"","sources":["azion-system-status.vue"],"names":[],"mappings":"wBA0SqB,OAAO,YAAY;;AAFxC,0SACG"}

package/src/components/azion-system-status/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./azion-system-status.vue",
+  "module": "./azion-system-status.vue",
+  "types": "./azion-system-status.vue.d.ts",
+  "browser": {
+    "./sfc": "./azion-system-status.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}

package/src/core/form/field-auto-complete/field-auto-complete.vue.d.ts

@@ -93,13 +93,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    value: string;
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
+    icon: string;
     disabled: boolean;
+    value: string;
+    placeholder: string;
     readonly: boolean;
-    icon: string;
     suggestions: unknown[];
     onComplete: Function;
     completeOnFocus: boolean;

package/src/core/form/field-checkbox-block/field-checkbox-block.vue.d.ts

@@ -43,7 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: true;
     };
     value: {
-        type: (StringConstructor | BooleanConstructor | ObjectConstructor)[];
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
         default: boolean;
     };
     binary: {
@@ -89,7 +89,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: true;
     };
     value: {
-        type: (StringConstructor | BooleanConstructor | ObjectConstructor)[];
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
         default: boolean;
     };
     binary: {
@@ -97,8 +97,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    value: string | boolean | Record<string, any>;
     disabled: boolean;
+    value: string | boolean | Record<string, any>;
     auto: boolean;
     isCard: boolean;
     hideSelector: boolean;

package/src/core/form/field-dropdown/field-dropdown.vue.d.ts

@@ -175,18 +175,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onOnChange?: ((...args: any[]) => any) | undefined;
     onOnSelectOption?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string | number;
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
+    loading: boolean;
+    pt: Record<string, any>;
     disabled: boolean;
+    value: string | number;
+    placeholder: string;
     filter: boolean;
     optionLabel: string;
     optionDisabled: string | Function;
     optionGroupLabel: string;
     optionGroupChildren: string;
-    loading: boolean;
-    pt: Record<string, any>;
     optionValue: string;
     options: unknown[];
     enableWorkaroundLabelToDisabledOptions: boolean;

package/src/core/form/field-dropdown-icon/field-dropdown-icon.vue.d.ts

@@ -97,13 +97,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     onOnChange?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string;
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
+    icon: string;
     disabled: boolean;
+    value: string;
+    placeholder: string;
     readonly: boolean;
-    icon: string;
     suggestions: unknown[];
     onComplete: Function;
     completeOnFocus: boolean;

package/src/core/form/field-dropdown-lazy-loader/field-dropdown-lazy-loader.vue.d.ts

@@ -173,10 +173,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onOnAccessDenied?: ((...args: any[]) => any) | undefined;
     onOnLoaded?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string | number;
+    description: string;
     label: string;
+    value: string | number;
     placeholder: string;
-    description: string;
     optionLabel: string;
     optionDisabled: string | Function;
     optionGroupLabel: string;

package/src/core/form/field-dropdown-lazy-loader-dynamic/field-dropdown-lazy-loader-dynamic.vue.d.ts

@@ -137,10 +137,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onOnChange?: ((...args: any[]) => any) | undefined;
     onOnSelectOption?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string | number;
+    description: string;
     label: string;
+    value: string | number;
     placeholder: string;
-    description: string;
     optionLabel: string;
     optionDisabled: string | Function;
     optionValue: string;

package/src/core/form/field-dropdown-lazy-loader-with-filter/field-dropdown-lazy-loader-with-filter.vue.d.ts

@@ -177,10 +177,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onOnSelectOption?: ((...args: any[]) => any) | undefined;
     onOnAccessDenied?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string | number;
+    description: string;
     label: string;
+    value: string | number;
     placeholder: string;
-    description: string;
     optionLabel: string;
     optionDisabled: string | Function;
     optionGroupLabel: string;

package/src/core/form/field-dropdown-multi-select-lazy-loader/field-dropdown-multi-select-lazy-loader.vue.d.ts

@@ -143,10 +143,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onOnLoaded?: ((...args: any[]) => any) | undefined;
     onOnClear?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: unknown[];
+    description: string;
     label: string;
+    value: unknown[];
     placeholder: string;
-    description: string;
     optionLabel: string;
     optionDisabled: string | Function;
     optionValue: string;

package/src/core/form/field-input-group/field-input-group.vue.d.ts

@@ -71,11 +71,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    value: string;
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
     disabled: boolean;
+    value: string;
+    placeholder: string;
     readonly: boolean;
     inputClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/src/core/form/field-multi-select/field-multi-select.vue.d.ts

@@ -117,16 +117,16 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onOnBlur?: ((...args: any[]) => any) | undefined;
     onOnChange?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: unknown[];
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
+    loading: boolean;
+    pt: Record<string, any>;
     disabled: boolean;
+    value: unknown[];
+    placeholder: string;
     filter: boolean;
     optionLabel: string;
     optionDisabled: string | Function;
-    loading: boolean;
-    pt: Record<string, any>;
     optionValue: string;
     options: unknown[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/src/core/form/field-number/field-number.vue.d.ts

@@ -117,11 +117,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onInput?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string;
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
     disabled: boolean;
+    value: string;
+    placeholder: string;
     readonly: boolean;
     inputClass: string;
     aditionalError: string;

package/src/core/form/field-phone-number/field-phone-number.vue.d.ts

@@ -65,10 +65,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onChange:countryCode"?: ((...args: any[]) => any) | undefined;
     "onChange:mobile"?: ((...args: any[]) => any) | undefined;
 }>, {
-    label: string;
     description: string;
-    disabled: boolean;
+    label: string;
     loading: boolean;
+    disabled: boolean;
     options: unknown[];
     countryCodeName: string;
     mobileName: string;

package/src/core/form/field-radio-block/field-radio-block.vue.d.ts

@@ -43,7 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: true;
     };
     inputValue: {
-        type: (StringConstructor | BooleanConstructor | ObjectConstructor)[];
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
         default: boolean;
     };
     binary: {
@@ -91,7 +91,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: true;
     };
     inputValue: {
-        type: (StringConstructor | BooleanConstructor | ObjectConstructor)[];
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
         default: boolean;
     };
     binary: {

package/src/core/form/field-switch/field-switch.vue.d.ts

@@ -27,7 +27,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: string;
     };
 }>> & Readonly<{}>, {
-    label: string;
     description: string;
+    label: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=field-switch.vue.d.ts.map

package/src/core/form/field-switch-block/field-switch-block.vue.d.ts

@@ -109,8 +109,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     onOnSwitchChange?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: boolean;
     disabled: boolean;
+    value: boolean;
     readonly: boolean;
     auto: boolean;
     isCard: boolean;

package/src/core/form/field-text/field-text.vue.d.ts

@@ -93,11 +93,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onInput?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string;
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
     disabled: boolean;
+    value: string;
+    placeholder: string;
     readonly: boolean;
     aditionalError: string;
     sensitive: boolean;

package/src/core/form/field-text-area/field-text-area.vue.d.ts

@@ -123,12 +123,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onInput?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string;
-    placeholder: string;
     description: string;
-    disabled: boolean;
     icon: string;
     loading: boolean;
+    disabled: boolean;
+    value: string;
+    placeholder: string;
     aditionalError: string;
     sensitive: boolean;
     rows: string | number;

package/src/core/form/field-text-icon/field-text-icon.vue.d.ts

@@ -87,13 +87,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     "onClick-icon"?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string;
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
+    icon: string;
     disabled: boolean;
+    value: string;
+    placeholder: string;
     readonly: boolean;
-    icon: string;
     required: boolean;
     iconPosition: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/src/core/form/field-text-password/field-text-password.vue.d.ts

@@ -93,11 +93,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onInput?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string;
-    label: string;
-    placeholder: string;
     description: string;
+    label: string;
     disabled: boolean;
+    value: string;
+    placeholder: string;
     readonly: boolean;
     aditionalError: string;
     sensitive: boolean;

package/src/core/form/field-text-privacy/field-text-privacy.vue

@@ -0,0 +1,284 @@
+<script setup>
+  import { computed, ref, toRef, useAttrs, useSlots } from 'vue'
+  import { useField } from 'vee-validate'
+  import InputText from 'primevue/inputtext'
+  import LabelBlock from '../label'
+
+  const emit = defineEmits(['blur', 'input', 'update:isPublic'])
+
+  const props = defineProps({
+    value: {
+      type: String,
+      default: ''
+    },
+    class: {
+      type: String
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    sensitive: {
+      type: Boolean,
+      default: false
+    },
+    aditionalError: {
+      type: String,
+      default: ''
+    },
+    isPublic: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const inputRef = ref(null)
+  const name = toRef(props, 'name')
+  const slots = useSlots()
+  const attrs = useAttrs()
+  const hasDescriptionSlot = !!slots.description
+
+  const isFocused = ref(false)
+  const isHovered = ref(false)
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-text-privacy'
+    return {
+      label: `${id}__label`,
+      input: `${id}__input`,
+      description: `${id}__description`,
+      error: `${id}__error-message`,
+      privacySwitch: `${id}__privacy-switch`
+    }
+  })
+
+  const groupBorderClass = computed(() => {
+    if (aditionalError.value || veeValidateErrorMessage.value) return '!border-red-500'
+    if (isFocused.value || isHovered.value) return '!border-[#f3652b]'
+    return ''
+  })
+
+  const groupShadowClass = computed(() => {
+    if (isFocused.value || isHovered.value) {
+      const color = aditionalError.value || veeValidateErrorMessage.value ? '#ef4444' : '#f3652b'
+      return `shadow-[0_0_0_1px_${color}]`
+    }
+    return ''
+  })
+
+  const {
+    value: inputValue,
+    errorMessage: veeValidateErrorMessage,
+    handleBlur,
+    handleChange
+  } = useField(name, undefined, {
+    initialValue: props.value
+  })
+
+  const aditionalError = computed(() => props.aditionalError)
+
+  const onBlur = (event) => {
+    handleBlur(event)
+    emit('blur', event)
+  }
+
+  const onChange = (event) => {
+    handleChange(event)
+    emit('input', event.target.value)
+  }
+
+  const togglePrivacy = () => {
+    if (props.disabled || props.readonly) return
+    emit('update:isPublic', !props.isPublic)
+  }
+
+  const onGroupFocusIn = () => {
+    isFocused.value = true
+  }
+  const onGroupFocusOut = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      isFocused.value = false
+    }
+  }
+  const onGroupMouseEnter = () => {
+    isHovered.value = true
+  }
+  const onGroupMouseLeave = () => {
+    isHovered.value = false
+  }
+
+  defineExpose({ inputRef })
+</script>
+
+<template>
+  <LabelBlock
+    v-if="props.label"
+    :for="props.name"
+    :data-testid="customTestId.label"
+    :label="props.label"
+    :isRequired="attrs.required"
+  />
+
+  <div
+    class="p-inputgroup rounded transition-shadow duration-150"
+    :class="[groupShadowClass, disabled ? 'opacity-50 pointer-events-none' : '']"
+    @focusin="onGroupFocusIn"
+    @focusout="onGroupFocusOut"
+    @mouseenter="onGroupMouseEnter"
+    @mouseleave="onGroupMouseLeave"
+  >
+    <InputText
+      v-bind="sensitive ? { 'data-sentry-mask': '' } : {}"
+      v-model="inputValue"
+      ref="inputRef"
+      type="text"
+      :data-testid="customTestId.input"
+      :id="name"
+      :name="name"
+      :readonly="readonly"
+      :disabled="disabled"
+      :placeholder="props.placeholder"
+      :class="[
+        '!border-r-0 !outline-none !shadow-none transition-colors duration-150',
+        groupBorderClass,
+        { 'p-invalid': aditionalError || veeValidateErrorMessage },
+        props.class
+      ]"
+      @input="onChange"
+      @keypress.enter.prevent
+      @blur="onBlur"
+    />
+
+    <span
+      :data-testid="customTestId.privacySwitch"
+      :title="isPublic ? 'Public – click to make private' : 'Private – click to make public'"
+      :aria-label="
+        isPublic
+          ? 'Field is public. Click to make private.'
+          : 'Field is private. Click to make public.'
+      "
+      :aria-pressed="isPublic"
+      role="switch"
+      tabindex="0"
+      class="p-inputgroup-addon !bg-[var(--input-bg,var(--surface-0))] !border-l-0 cursor-pointer outline-none transition-colors duration-150 select-none"
+      :class="[
+        groupBorderClass,
+        { 'opacity-50 cursor-not-allowed pointer-events-none': disabled || readonly }
+      ]"
+      @click="togglePrivacy"
+      @keydown.enter.prevent="togglePrivacy"
+      @keydown.space.prevent="togglePrivacy"
+    >
+      <span
+        class="relative w-9 h-5 rounded-full transition-colors duration-200"
+        :class="
+          isPublic
+            ? 'bg-[#f3652b] hover:bg-[#d95522]'
+            : 'bg-[var(--input-switch-slider-off-bg)] hover:bg-[var(--input-switch-slider-off-hover-bg)]'
+        "
+      >
+        <span
+          class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white flex items-center justify-center shadow-sm transition-transform duration-200"
+          :class="isPublic ? 'translate-x-4' : 'translate-x-0'"
+        >
+          <span class="relative w-3 h-3">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              class="absolute inset-0 transition-all duration-200 text-gray-500"
+              :class="isPublic ? 'opacity-0 scale-75' : 'opacity-100 scale-100'"
+            >
+              <rect
+                x="3"
+                y="11"
+                width="18"
+                height="11"
+                rx="2"
+                ry="2"
+              />
+              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+            </svg>
+
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              class="absolute inset-0 transition-all duration-200 text-orange-700"
+              :class="isPublic ? 'opacity-100 scale-100' : 'opacity-0 scale-75'"
+            >
+              <rect
+                x="3"
+                y="11"
+                width="18"
+                height="11"
+                rx="2"
+                ry="2"
+              />
+              <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+            </svg>
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+
+  <small
+    v-if="aditionalError || veeValidateErrorMessage"
+    class="p-error text-xs font-normal leading-tight"
+    :data-testid="customTestId.error"
+  >
+    {{ aditionalError || veeValidateErrorMessage }}
+  </small>
+
+  <small
+    v-if="props.description || hasDescriptionSlot"
+    class="text-xs text-color-secondary font-normal leading-5"
+    :data-testid="customTestId.description"
+  >
+    <slot name="description">
+      {{ props.description }}
+    </slot>
+  </small>
+</template>
+
+<style scoped>
+  :deep(.p-inputtext:focus) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+</style>

package/src/core/form/field-text-privacy/field-text-privacy.vue.d.ts

@@ -0,0 +1,119 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sensitive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+    isPublic: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    inputRef: import("vue").Ref<null, null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+    "update:isPublic": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sensitive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+    isPublic: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:isPublic"?: ((...args: any[]) => any) | undefined;
+}>, {
+    description: string;
+    label: string;
+    disabled: boolean;
+    value: string;
+    placeholder: string;
+    readonly: boolean;
+    aditionalError: string;
+    sensitive: boolean;
+    isPublic: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    description?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=field-text-privacy.vue.d.ts.map

package/src/core/form/field-text-privacy/field-text-privacy.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-text-privacy.vue.d.ts","sourceRoot":"","sources":["field-text-privacy.vue"],"names":[],"mappings":"wBAuvBqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAnDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAgDG"}

package/src/core/form/field-text-privacy/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./field-text-privacy.vue",
+  "module": "./field-text-privacy.vue",
+  "types": "./field-text-privacy.vue.d.ts",
+  "browser": {
+    "./sfc": "./field-text-privacy.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}