From 1d6a41c920779ae8e8de21e129ca08a4c4948306 Mon Sep 17 00:00:00 2001
From: jvictordev1 <jvictordev1@gmail.com>
Date: Mon, 16 Mar 2026 16:05:38 -0300
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20adiciona=20possibilidade=20de=20cli?=
 =?UTF-8?q?ck=20no=20=C3=ADcone=20do=20chip=20e=20corrige=20aplica=C3=A7?=
 =?UTF-8?q?=C3=A3o=20das=20variantes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/display/chip.md           |   2 +-
 package.json                              |   2 +-
 src/components/Chip.vue                   | 144 +++++++++++++---------
 src/tests/__snapshots__/Chip.spec.js.snap |   2 +-
 4 files changed, 90 insertions(+), 60 deletions(-)

diff --git a/docs/components/display/chip.md b/docs/components/display/chip.md
index 776005cd3..a066afdf0 100644
--- a/docs/components/display/chip.md
+++ b/docs/components/display/chip.md
@@ -76,6 +76,6 @@ const events = ['click'];
 const args = ref({
 	variant: 'red',
 	persistantActionIcon: false,
-	iconLeft: true
+	iconLeft: false
 });
 </script>
diff --git a/package.json b/package.json
index 357a70484..9c635a360 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.154.12",
+	"version": "3.155.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
diff --git a/src/components/Chip.vue b/src/components/Chip.vue
index 5ab0e771c..a9996adf7 100644
--- a/src/components/Chip.vue
+++ b/src/components/Chip.vue
@@ -2,9 +2,10 @@
 <template>
 	<div
 		class="chip__container"
-		:class="classList"
+		:class="chipClasses"
 		data-testid="chip-container"
-		@click="handleClick"
+		:style="{ cursor: !shouldApplyTriggerClickOnIconProp ? 'pointer' : 'default' }"
+		@click="handleContainerClick"
 	>
 		<div :class="`chip__content--${size}`">
 			<div
@@ -16,9 +17,13 @@
 			>
 				<transition name="fade">
 					<template v-if="internalValue || props.persistantActionIcon">
-						<div 
+						<div
 							v-if="useHasSlot('icon')" 
-							class="chip__content--icon"
+							:class="[
+								'chip__content--icon',
+								{'chip__content--icon--pointer': shouldApplyTriggerClickOnIconProp}
+							]"
+							@click="handleIconClick"
 						>
 							<!-- @slot Slot utilizado para alterar o ícone mostrado na chip. -->
 							<slot name="icon" />
@@ -28,6 +33,8 @@
 							name="check-outline"
 							:height="icon.height"
 							:width="icon.width"
+							:class="[{'chip__content--icon--pointer': shouldApplyTriggerClickOnIconProp}]"
+							@click="handleIconClick"
 						/>
 					</template>
 				</transition>
@@ -41,7 +48,7 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted, useTemplateRef, watch } from 'vue';
+import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { useHasSlot } from '../utils/composables/useHasSlot';
 import { colorOptions } from '../utils/constants/colors';
 import sizes from '../utils/constants/sizes';
@@ -83,35 +90,46 @@ const props = defineProps({
 	 */
 	iconLeft: {
 		type: Boolean,
-		default: true,
+		default: false,
+	},
+	/**
+	 * Especifica o evento de click deve ser disparado ao clicar no ícone ou no componente. Só funciona caso a prop persistantActionIcon seja true.
+	 */
+	triggerClickOnIcon: {
+		type: Boolean,
+		default: false,
 	},
 });
 
+const emits = defineEmits([
+	/**
+	 * Evento que indica que o Chip foi clicado.
+	 * @event icon-click
+	 * @type {Event}
+	 */
+	'click',
+]);
+
 const slotContentRef = useTemplateRef('slot-content');
 const predefinedColors = ref(colorOptions);
 const predefinedSizes = ref(sizes);
 const internalValue = ref(modelValue.value);
-const classList = ref('');
 const shouldUpdatePadding = ref(true);
 const maxWidth = ref('0px');
 
+const shouldApplyTriggerClickOnIconProp = computed(() => {
+	return props.triggerClickOnIcon && props.persistantActionIcon;
+});
 
-const predefinedStyle = computed(() => {
-	let dynamicClass = '';
-
-	if (!internalValue.value) {
-		dynamicClass += ' chip--not-selected';
-	}
-
-	if (predefinedColors.value.indexOf(props.variant) > -1) {
-		dynamicClass += ` chip--${props.variant}`;
-	}
-
-	if (predefinedSizes.value.indexOf(props.size) > -1) {
-		dynamicClass += ` chip--${props.size}`;
-	}
-
-	return dynamicClass;
+const chipClasses = computed(() => {
+	return [
+		predefinedColors.value.includes(props.variant) ? `chip--${props.variant}` : '',
+		predefinedSizes.value.includes(props.size) ? `chip--${props.size}` : '',
+		{
+			'chip--not-selected': !internalValue.value,
+			'chip__container--interactive': !props.triggerClickOnIcon
+		}
+	];
 });
 
 const icon = computed(() => {
@@ -160,12 +178,6 @@ watch(
 watch(
 	() => internalValue.value,
 	(newInternalValue) => {
-		if (!newInternalValue) {
-			classList.value += ' chip--not-selected';
-		} else {
-			classList.value = removeNotSelectedClass();
-		}
-
 		setTimeout(() => {
 			shouldUpdatePadding.value = !newInternalValue;
 		}, 300);
@@ -174,8 +186,13 @@ watch(
 	}
 );
 
+watch(() => shouldApplyTriggerClickOnIconProp.value, (newValue) => {
+	if (newValue && internalValue.value) {
+		return internalValue.value = false;
+	}
+})
+
 onMounted(() => {
-	classList.value = predefinedStyle.value;
 	setTimeout(() => {
 		maxWidth.value =
 			(slotContentRef.value?.offsetWidth || 0) + 4 + icon.value.width + 'px';
@@ -186,9 +203,19 @@ function handleClick() {
 	internalValue.value = !internalValue.value;
 }
 
-function removeNotSelectedClass() {
-	let regex = new RegExp('chip--not-selected', 'g');
-	return classList.value.replace(regex, '');
+function handleContainerClick() {
+	if (shouldApplyTriggerClickOnIconProp.value) {
+		return;
+	}
+	handleClick();
+	emits('click', true);
+}
+
+function handleIconClick(event) {
+	if(shouldApplyTriggerClickOnIconProp.value) {
+		event.stopPropagation();
+		emits('click', true);
+	}
 }
 
 </script>
@@ -200,7 +227,6 @@ function removeNotSelectedClass() {
 	&__container {
 		border-radius: 50px !important;
 		width: fit-content;
-		cursor: pointer;
 	}
 
 	&--not-selected {
@@ -236,16 +262,23 @@ function removeNotSelectedClass() {
 			@include tokens.button-1;
 			font-weight: tokens.$font-weight-semibold;
 		}
+
 		&--icon {
 			display: flex;
 			overflow: hidden;
 			align-items: center;
-			width: v-bind('icon.width');
-			height: v-bind('icon.height');
+			width: calc(v-bind('icon.width') * 1px);
+			height: calc(v-bind('icon.height') * 1px);
+
+			&--pointer {
+				cursor: pointer;
+			}
 		}
+
 		&--icon > :slotted(svg) {
 			height: 100%;
 			width: 100%;
+			pointer-events: none;
 		}
 	}
 
@@ -274,19 +307,15 @@ function removeNotSelectedClass() {
 		background-color: $shade-100;
 		outline: 1px solid $shade-600;
 
-		&:hover {
+		&.chip__container--interactive:hover {
 			color: color.adjust($shade-600, $lightness: -10%) !important;
 			background-color: $shade-100 !important;
 		}
-	}
 
-	&--amber {
-		color: tokens.$al-700;
-		background-color: tokens.$al-100;
-
-		&:hover {
-			color: color.adjust(tokens.$al-700, $lightness: -10%) !important;
-			background-color: tokens.$al-100 !important;
+		&:not(.chip__container--interactive) .chip__content--icon--pointer:hover {
+			color: color.adjust($shade-600, $lightness: -10%) !important;
+			background-color: tokens.$n-40 !important;
+			border-radius: tokens.$border-radius-circle;
 		}
 	}
 
@@ -294,10 +323,16 @@ function removeNotSelectedClass() {
 		color: tokens.$n-600;
 		background-color: tokens.$n-20;
 
-		&:hover {
+		&.chip__container--interactive:hover {
 			color: color.adjust(tokens.$n-600, $lightness: -10%) !important;
 			background-color: tokens.$n-20 !important;
 		}
+
+		&:not(.chip__container--interactive) .chip__content--icon--pointer:hover {
+			color: color.adjust(tokens.$n-600, $lightness: -10%) !important;
+			background-color: tokens.$n-40 !important;
+			border-radius: tokens.$border-radius-circle;
+		}
 	}
 
 	&--white {
@@ -305,20 +340,15 @@ function removeNotSelectedClass() {
 		background-color: tokens.$n-0;
 		outline: 1px solid tokens.$n-100;
 
-		&:hover {
+		&.chip__container--interactive:hover {
 			color: color.adjust(tokens.$n-600, $lightness: -10%) !important;
-			background-color: tokens.$n-0 !important;
+			background-color: tokens.$n-20 !important;
 		}
-	}
 
-	&--dark {
-		color: tokens.$n-10;
-		background-color: tokens.$n-700;
-		outline: 1px solid tokens.$n-800;
-
-		&:hover {
-			color: color.adjust(tokens.$n-10, $lightness: -10%) !important;
-			background-color: tokens.$n-700 !important;
+		&:not(.chip__container--interactive) .chip__content--icon--pointer:hover {
+			color: color.adjust(tokens.$n-600, $lightness: -10%) !important;
+			background-color: tokens.$n-40 !important;
+			border-radius: tokens.$border-radius-circle;
 		}
 	}
 }
diff --git a/src/tests/__snapshots__/Chip.spec.js.snap b/src/tests/__snapshots__/Chip.spec.js.snap
index e21516cbf..dd1f2a7b9 100644
--- a/src/tests/__snapshots__/Chip.spec.js.snap
+++ b/src/tests/__snapshots__/Chip.spec.js.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Chip > renders correctly 1`] = `
-"<div data-v-711c594a="" class="chip__container" data-testid="chip-container">
+"<div data-v-711c594a="" class="chip__container chip--gray chip--md chip--not-selected chip__container--interactive" data-testid="chip-container" style="cursor: pointer;">
   <div data-v-711c594a="" class="chip__content--md">
     <div data-v-711c594a="" class="chip__content-container" style="max-width: 0px; padding-right: 11px; padding-left: 11px;">
       <transition-stub data-v-711c594a="" name="fade" appear="false" persisted="false" css="true">

From 4e926b7975c86eee06aa9256fe3690c0cd8d4846 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Victor=20Cruz=20Rebou=C3=A7as?=
 <josevictorcruzrb@gmail.com>
Date: Mon, 16 Mar 2026 16:16:25 -0300
Subject: [PATCH 2/3] Update src/components/Chip.vue

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 src/components/Chip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Chip.vue b/src/components/Chip.vue
index a9996adf7..f313b9418 100644
--- a/src/components/Chip.vue
+++ b/src/components/Chip.vue
@@ -127,7 +127,7 @@ const chipClasses = computed(() => {
 		predefinedSizes.value.includes(props.size) ? `chip--${props.size}` : '',
 		{
 			'chip--not-selected': !internalValue.value,
-			'chip__container--interactive': !props.triggerClickOnIcon
+			'chip__container--interactive': !shouldApplyTriggerClickOnIconProp.value
 		}
 	];
 });

From beaae260c283c13f60f6c8c7ece3445ff2572f8e Mon Sep 17 00:00:00 2001
From: jvictordev1 <jvictordev1@gmail.com>
Date: Mon, 16 Mar 2026 16:27:24 -0300
Subject: [PATCH 3/3] refactor: readiciona estilos das variantes classes amber,
 gray, dark e white e corrige doc

---
 docs/components/display/chip.md |  3 ++-
 src/components/Chip.vue         | 41 +++++++++++++++++++++++++++++----
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/docs/components/display/chip.md b/docs/components/display/chip.md
index a066afdf0..faed6c222 100644
--- a/docs/components/display/chip.md
+++ b/docs/components/display/chip.md
@@ -76,6 +76,7 @@ const events = ['click'];
 const args = ref({
 	variant: 'red',
 	persistantActionIcon: false,
-	iconLeft: false
+	iconLeft: false,
+	triggerClickOnIcon: false
 });
 </script>
diff --git a/src/components/Chip.vue b/src/components/Chip.vue
index f313b9418..9778ffd2c 100644
--- a/src/components/Chip.vue
+++ b/src/components/Chip.vue
@@ -104,7 +104,7 @@ const props = defineProps({
 const emits = defineEmits([
 	/**
 	 * Evento que indica que o Chip foi clicado.
-	 * @event icon-click
+	 * @event click
 	 * @type {Event}
 	 */
 	'click',
@@ -188,9 +188,9 @@ watch(
 
 watch(() => shouldApplyTriggerClickOnIconProp.value, (newValue) => {
 	if (newValue && internalValue.value) {
-		return internalValue.value = false;
+		internalValue.value = false;
 	}
-})
+});
 
 onMounted(() => {
 	setTimeout(() => {
@@ -319,6 +319,22 @@ function handleIconClick(event) {
 		}
 	}
 
+	&--amber {
+		color: tokens.$al-700;
+		background-color: tokens.$al-100;
+
+		&.chip__container--interactive:hover {
+			color: color.adjust(tokens.$al-700, $lightness: -10%) !important;
+			background-color: tokens.$al-100 !important;
+		}
+
+		&:not(.chip__container--interactive) .chip__content--icon--pointer:hover {
+			color: color.adjust(tokens.$al-600, $lightness: -10%) !important;
+			background-color: tokens.$n-40 !important;
+			border-radius: tokens.$border-radius-circle;
+		}
+	}
+
 	&--gray {
 		color: tokens.$n-600;
 		background-color: tokens.$n-20;
@@ -342,7 +358,7 @@ function handleIconClick(event) {
 
 		&.chip__container--interactive:hover {
 			color: color.adjust(tokens.$n-600, $lightness: -10%) !important;
-			background-color: tokens.$n-20 !important;
+			background-color: tokens.$n-0 !important;
 		}
 
 		&:not(.chip__container--interactive) .chip__content--icon--pointer:hover {
@@ -351,6 +367,23 @@ function handleIconClick(event) {
 			border-radius: tokens.$border-radius-circle;
 		}
 	}
+
+	&--dark {
+		color: tokens.$n-10;
+		background-color: tokens.$n-700;
+		outline: 1px solid tokens.$n-800;
+
+		&.chip__container--interactive:hover {
+			color: color.adjust(tokens.$n-10, $lightness: -10%) !important;
+			background-color: tokens.$n-700 !important;
+		}
+
+		&:not(.chip__container--interactive) .chip__content--icon--pointer:hover {
+			color: color.adjust(tokens.$n-10, $lightness: -10%) !important;
+			background-color: tokens.$n-40 !important;
+			border-radius: tokens.$border-radius-circle;
+		}
+	}
 }
 
 .fade-enter-active,