nexaas-ui-components 1.0.96 → 1.0.97

package/dist/index.cjs

@@ -576,13 +576,17 @@ var Input = ({
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const [showPassword, setShowPassword] = React6__namespace.default.useState(false);
   const styles = {
-    // Sem `focus-visible:rounded-*`: o anel de foco tem que seguir o mesmo raio do campo
-    // (`rounded-lg`) — reduzir pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-[var(--input-bg-disabled)] disabled:border-[var(--input-border-disabled)] disabled:text-disabled disabled:cursor-not-allowed disabled:shadow-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
+    // Focus ring padrao: classe `input-focus-ring` (src/styles/index.css) desenha o anel de
+    // 1.5px sobre o proprio contorno do campo. Nao usar `ring-*`/`ring-offset-*` do Tailwind
+    // aqui: eles criam um anel por fora do input, fora do padrao do design system.
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-[var(--input-bg-disabled)] disabled:border-[var(--input-border-disabled)] disabled:text-disabled disabled:cursor-not-allowed disabled:shadow-none input-focus-ring ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-stroke" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
-    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
+    // `-translate-y-[10px]` (e nao `-translate-y-3`/12px): o label flutuante ficava colado
+    // demais no topo do campo. Os 2px a menos de deslocamento aproximam o espaco acima do
+    // label do espaco abaixo do conteudo (pb-[10px]). Mesmo valor nos demais inputs.
+    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-[10px] scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-[10px] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
     clear: "absolute top-[8.3px] cursor-pointer text-label text-[22px]",
     error: "border-dangerous-500 text-dangerous-500"
   };
@@ -828,7 +832,7 @@ var DatePickerInput = React6.forwardRef(
     ];
     const hasError = fieldValidationMessages.some((item) => item !== void 0);
     const styles = {
-      input: `text-p-md text-paragraph bg-surface shadow-input border-[0.5px] rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 disabled:shadow-none focus:border-[1.5px] focus:border-blue-500 ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke"}`,
+      input: `text-p-md text-paragraph bg-surface shadow-input border-[0.5px] rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 disabled:shadow-none input-focus-ring ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke"}`,
       icon: `absolute bg-light-gray-100 h-[44px] w-[38px] top-[1px] left-[1px] rounded-l-lg rounded-r-none  ${hasError ? "text-dangerous-700" : "text-label"}`,
       label: "absolute text-label text-sm",
       clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]"
@@ -954,7 +958,7 @@ var DatePickerInput = React6.forwardRef(
                         "pointer-events-none ",
                         styles.label,
                         `
-                    ${field.value && field.value[0] !== null || invalidDate ? " scale-75 -translate-y-3 " : ""}
+                    ${field.value && field.value[0] !== null || invalidDate ? " scale-75 -translate-y-[10px] " : ""}
                     ${icon ? "left-[3rem]" : "left-2.5"}`
                       ),
                       style: { top: "13px" },
@@ -1728,7 +1732,9 @@ function InputSmall({
     // disabled fica no <input> interno, não neste wrapper — por isso o
     // estado desabilitado é resolvido via ternário em vez de `disabled:`
     // (pseudo-classe que nunca dispararia numa div).
-    wrapper: `border-[0.5px] border-stroke focus-within:border-[1.5px] focus-within:border-blue-500 group rounded-lg h-9 w-full text-paragraph flex items-center justify-between ${disabled ? "bg-neutral-100 shadow-none" : "bg-surface shadow-input"} ${className}`,
+    // `input-focus-ring-within`: o foco cai no <input>, mas a borda esta neste wrapper — o
+    // anel de 1.5px e desenhado sobre o contorno, sem mudar a altura do campo (h-9).
+    wrapper: `border-[0.5px] border-stroke input-focus-ring-within group rounded-lg h-9 w-full text-paragraph flex items-center justify-between ${disabled ? "bg-neutral-100 shadow-none" : "bg-surface shadow-input"} ${className}`,
     clear: "pr-[5px] cursor-pointer text-label text-[16px]"
   };
   const elem = inputRef == null ? void 0 : inputRef.current;
@@ -2591,10 +2597,10 @@ function InputMoney({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none input-focus-ring ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
         `,
-    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
+    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-[10px] scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-[10px] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
@@ -2713,10 +2719,10 @@ function InputNumber({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-3 peer text-paragraph bg-surface border-[0.5px] rounded-lg outline-none block pb-[10px] h-[44px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px]  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500 shadow-none" : "border-stroke focus-visible:border-blue-500 shadow-input"}`,
+    input: `text-p-md pl-3 peer text-paragraph bg-surface border-[0.5px] rounded-lg outline-none block pb-[10px] h-[44px] w-full disabled:bg-neutral-100 disabled:shadow-none input-focus-ring ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500 shadow-none" : "border-stroke focus-visible:border-blue-500 shadow-input"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
       `,
-    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
+    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-[10px] scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-[10px] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
     buttonsWrapper: "absolute top-[7px] right-[10px] cursor-pointer text-label flex flex-col gap-[2px]",
     button: `border-[0.5px] border-neutral-300 rounded shadow-[0px_1px_1px_rgba(56,61,77,0.1)] h-4 w-4 flex items-center justify-center ${disabled ? "bg-neutral-100" : "bg-surface"}`
   };
@@ -2926,10 +2932,10 @@ function InputPercentage({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px]  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none input-focus-ring ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
     `,
-    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
+    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-[10px] scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-[10px] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
   const input = name ? document == null ? void 0 : document.getElementById(name) : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
@@ -3253,20 +3259,17 @@ var customStyles = {
       color: "var(--label)"
     }
   }),
-  dropdownIndicator: (provided, state) => {
-    var _a;
-    return {
-      ...provided,
-      color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)",
-      // translateY antes do rotate: transform e aplicado da esquerda pra direita, entao
-      // invertendo a ordem o deslocamento acontece no eixo ja girado e a seta desce 2px em vez
-      // de subir. -2px corrige o desalinhamento otico da seta com o texto do campo.
-      transform: ((_a = state == null ? void 0 : state.selectProps) == null ? void 0 : _a.menuIsOpen) ? "translateY(-2px) rotate(180deg)" : "translateY(-2px) rotate(0)",
-      ":hover": {
-        color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)"
-      }
-    };
-  },
+  dropdownIndicator: (provided, state) => ({
+    ...provided,
+    color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)",
+    // -2px corrige o desalinhamento otico da seta com o texto do campo. Sem rotate: o estado
+    // aberto troca o glifo pra `uil-angle-up` (ver DropdownIndicatorCustom em Select.tsx), assim
+    // a seta fica na mesma posicao nos dois estados.
+    transform: "translateY(-2px)",
+    ":hover": {
+      color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)"
+    }
+  }),
   placeholder: (provided, state) => ({
     ...provided,
     color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
@@ -3298,15 +3301,21 @@ var customStyles = {
     display: "flex"
   }),
   control: (provided, state) => {
-    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-700)" : state.menuIsOpen ? "1.5px solid var(--blue-700)" : "0.5px solid var(--stroke)";
+    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-700)" : state.isFocused ? "0.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
     return {
       ...provided,
       cursor: "pointer",
       border,
-      boxShadow: state.isDisabled ? "none" : state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
+      // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
+      // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
+      // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
+      // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
+      // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
+      boxShadow: state.isDisabled ? "none" : state.isFocused ? "inset 0 0 0 0.5px var(--blue-500), 0px 1px 1.5px 0px rgba(56,61,77,0.12)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
       outline: "none",
-      // Raio fixo: o anel de foco é desenhado por box-shadow, que segue o borderRadius do
-      // control — trocar pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
+      // Raio fixo: o anel de foco segue o borderRadius do control — trocar pra 2px no foco
+      // deixava o anel quadrado sobre um campo arredondado.
       borderRadius: "0.5rem",
       placeholder: " ",
       height: state.selectProps.smallField ? "30px" : "46px",
@@ -3525,10 +3534,15 @@ var SelectField = ({
           }
         };
         const DropdownIndicatorCustom = (props) => {
+          var _a2;
           return /* @__PURE__ */ jsxRuntime.jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
             "i",
             {
-              className: `uil uil-angle-down text-[20px]  ${small ? "h-[20px] -mt-[7px]" : "h-full"}`
+              className: clsx9__default.default(
+                "uil text-[20px]",
+                ((_a2 = props.selectProps) == null ? void 0 : _a2.menuIsOpen) ? "uil-angle-up" : "uil-angle-down",
+                small ? "h-[20px] -mt-[7px]" : "h-full"
+              )
             }
           ) });
         };
@@ -3628,7 +3642,7 @@ var SelectField = ({
               className: clsx9__default.default(
                 "text-label text-sm left-2.5 cursor-pointer pointer-events-none absolute transition-all duration-200",
                 {
-                  "scale-75 -translate-y-3": field.value || inputValue,
+                  "scale-75 -translate-y-[10px]": field.value || inputValue,
                   "ml-[35px]": hasIcon.hasIcon,
                   "ml-[2px]": !hasIcon.hasIcon,
                   "top-2.5": !(field.value || inputValue),
@@ -3721,15 +3735,21 @@ var customStyles2 = {
     color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
   }),
   control: (provided, state) => {
-    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-700)" : state.menuIsOpen ? "1.5px solid var(--blue-700)" : "0.5px solid var(--stroke)";
+    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-700)" : state.isFocused ? "0.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
     return {
       ...provided,
       cursor: "pointer",
       border,
-      boxShadow: state.isDisabled ? "none" : state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
+      // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
+      // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
+      // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
+      // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
+      // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
+      boxShadow: state.isDisabled ? "none" : state.isFocused ? "inset 0 0 0 0.5px var(--blue-500), 0px 1px 1.5px 0px rgba(56,61,77,0.12)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
       outline: "none",
-      // Raio fixo: o anel de foco é desenhado por box-shadow, que segue o borderRadius do
-      // control — trocar pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
+      // Raio fixo: o anel de foco segue o borderRadius do control — trocar pra 2px no foco
+      // deixava o anel quadrado sobre um campo arredondado.
       borderRadius: "0.5rem",
       placeholder: " ",
       height: "46px",
@@ -4085,7 +4105,7 @@ var SelectFieldBip = React6.forwardRef(
                 className: clsx9__default.default(
                   "text-label text-sm left-2.5 cursor-pointer pointer-events-none",
                   {
-                    [" scale-75 -translate-y-3 "]: field.value,
+                    [" scale-75 -translate-y-[10px] "]: field.value,
                     ["text-dangerous-700"]: hasError.hasError
                   }
                 ),
@@ -6164,12 +6184,18 @@ var customStyles3 = {
     display: "flex"
   }),
   control: (provided, state) => {
-    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.menuIsOpen ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
+    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "0.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
     return {
       ...provided,
       cursor: "pointer",
       border,
-      boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
+      // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
+      // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
+      // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
+      // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
+      // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
+      boxShadow: state.isDisabled ? "none" : state.isFocused ? "inset 0 0 0 0.5px var(--blue-500), 0px 1px 1.5px 0px rgba(56,61,77,0.12)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
       outline: "none",
       borderRadius: "0.5rem",
       paddingLeft: "0px",
@@ -6317,7 +6343,7 @@ var MultiSelect = ({
             "span",
             {
               className: clsx9__default.default("text-label text-sm left-2.5", {
-                [" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
+                [" scale-75 -translate-y-[10px] "]: field.value && field.value.length > 0,
                 ["text-dangerous-500"]: hasError.hasError
               }),
               children: [
@@ -6379,13 +6405,19 @@ var customStyles4 = {
     background: "var(--surface)"
   }),
   control: (provided, state) => {
-    const border = state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
+    const border = state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "0.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
     return {
       ...provided,
       cursor: "pointer",
       paddingTop: state.selectProps.hasLabel ? "18px" : "0px",
       border: state.isDisabled ? "0.5px solid var(--input-border-disabled, var(--stroke))" : border,
-      boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
+      // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
+      // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
+      // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
+      // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
+      // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
+      boxShadow: state.isDisabled ? "none" : state.isFocused ? "inset 0 0 0 0.5px var(--blue-500), 0px 1px 1.5px 0px rgba(56,61,77,0.12)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
       outline: "none",
       borderRadius: "0.5rem",
       backgroundColor: "var(--surface)",
@@ -6502,7 +6534,7 @@ var InputTag = ({
                 "span",
                 {
                   className: clsx9__default.default("text-label text-sm left-2.5", {
-                    [" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
+                    [" scale-75 -translate-y-[10px] "]: field.value && field.value.length > 0,
                     ["text-dangerous-500"]: hasError.hasError
                   }),
                   children: [
@@ -6576,12 +6608,18 @@ var customStyles5 = {
     display: "flex"
   }),
   control: (provided, state) => {
-    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.menuIsOpen ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
+    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "0.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
     return {
       ...provided,
       cursor: "pointer",
       border,
-      boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
+      // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
+      // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
+      // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
+      // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
+      // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
+      boxShadow: state.isDisabled ? "none" : state.isFocused ? "inset 0 0 0 0.5px var(--blue-500), 0px 1px 1.5px 0px rgba(56,61,77,0.12)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
       outline: "none",
       borderRadius: "0.5rem",
       paddingLeft: "8px",
@@ -7318,8 +7356,8 @@ var TextArea = ({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `border-[0.5px] rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 disabled:shadow-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke text-paragraph"}`,
-    label: `cursor-text absolute text-label top-[0.70rem] z-10 transform origin-[0] -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 left-2.5`
+    input: `border-[0.5px] rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 disabled:shadow-none input-focus-ring text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke text-paragraph"}`,
+    label: `cursor-text absolute text-label top-[0.70rem] z-10 transform origin-[0] -translate-y-[10px] scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-[10px] left-2.5`
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative outline-none", children: [
@@ -7465,11 +7503,11 @@ function ControlledInput({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px] focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none input-focus-ring ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-stroke" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label"}`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
-    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
+    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-[10px] scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-[10px] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
     clear: `absolute top-[7px] cursor-pointer text-label text-[22px] ${searchOnClick ? "right-[46px]" : "right-[8px]"}`,
     error: "border-dangerous-500 text-dangerous-500"
   };