nexaas-ui-components 1.0.95 → 1.0.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +88 -47
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.js +88 -47
  5. package/dist/index.js.map +1 -1
  6. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -544,13 +544,17 @@ var Input = ({
544
544
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
545
545
  const [showPassword, setShowPassword] = React6__default.useState(false);
546
546
  const styles = {
547
- // Sem `focus-visible:rounded-*`: o anel de foco tem que seguir o mesmo raio do campo
548
- // (`rounded-lg`) — reduzir pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
549
- 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]"}
547
+ // Focus ring padrao: classe `input-focus-ring` (src/styles/index.css) desenha o anel de
548
+ // 1.5px sobre o proprio contorno do campo. Nao usar `ring-*`/`ring-offset-*` do Tailwind
549
+ // aqui: eles criam um anel por fora do input, fora do padrao do design system.
550
+ 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]"}
550
551
  ${!hasError ? "border-stroke" : ""}`,
551
552
  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`,
552
553
  rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
553
- 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",
554
+ // `-translate-y-[10px]` (e nao `-translate-y-3`/12px): o label flutuante ficava colado
555
+ // demais no topo do campo. Os 2px a menos de deslocamento aproximam o espaco acima do
556
+ // label do espaco abaixo do conteudo (pb-[10px]). Mesmo valor nos demais inputs.
557
+ 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",
554
558
  clear: "absolute top-[8.3px] cursor-pointer text-label text-[22px]",
555
559
  error: "border-dangerous-500 text-dangerous-500"
556
560
  };
@@ -796,7 +800,7 @@ var DatePickerInput = forwardRef(
796
800
  ];
797
801
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
798
802
  const styles = {
799
- 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"}`,
803
+ 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"}`,
800
804
  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"}`,
801
805
  label: "absolute text-label text-sm",
802
806
  clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]"
@@ -922,7 +926,7 @@ var DatePickerInput = forwardRef(
922
926
  "pointer-events-none ",
923
927
  styles.label,
924
928
  `
925
- ${field.value && field.value[0] !== null || invalidDate ? " scale-75 -translate-y-3 " : ""}
929
+ ${field.value && field.value[0] !== null || invalidDate ? " scale-75 -translate-y-[10px] " : ""}
926
930
  ${icon ? "left-[3rem]" : "left-2.5"}`
927
931
  ),
928
932
  style: { top: "13px" },
@@ -1696,7 +1700,9 @@ function InputSmall({
1696
1700
  // disabled fica no <input> interno, não neste wrapper — por isso o
1697
1701
  // estado desabilitado é resolvido via ternário em vez de `disabled:`
1698
1702
  // (pseudo-classe que nunca dispararia numa div).
1699
- 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}`,
1703
+ // `input-focus-ring-within`: o foco cai no <input>, mas a borda esta neste wrapper — o
1704
+ // anel de 1.5px e desenhado sobre o contorno, sem mudar a altura do campo (h-9).
1705
+ 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}`,
1700
1706
  clear: "pr-[5px] cursor-pointer text-label text-[16px]"
1701
1707
  };
1702
1708
  const elem = inputRef == null ? void 0 : inputRef.current;
@@ -2559,10 +2565,10 @@ function InputMoney({
2559
2565
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2560
2566
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2561
2567
  const styles = {
2562
- 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"}`,
2568
+ 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"}`,
2563
2569
  icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
2564
2570
  `,
2565
- 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"};
2571
+ 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"};
2566
2572
  return /* @__PURE__ */ jsx(
2567
2573
  Controller,
2568
2574
  {
@@ -2681,10 +2687,10 @@ function InputNumber({
2681
2687
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2682
2688
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2683
2689
  const styles = {
2684
- 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"}`,
2690
+ 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"}`,
2685
2691
  icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
2686
2692
  `,
2687
- 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",
2693
+ 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",
2688
2694
  buttonsWrapper: "absolute top-[7px] right-[10px] cursor-pointer text-label flex flex-col gap-[2px]",
2689
2695
  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"}`
2690
2696
  };
@@ -2894,10 +2900,10 @@ function InputPercentage({
2894
2900
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2895
2901
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2896
2902
  const styles = {
2897
- 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"}`,
2903
+ 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"}`,
2898
2904
  icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
2899
2905
  `,
2900
- 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"};
2906
+ 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"};
2901
2907
  const input = name ? document == null ? void 0 : document.getElementById(name) : null;
2902
2908
  return /* @__PURE__ */ jsx(
2903
2909
  Controller,
@@ -3221,17 +3227,17 @@ var customStyles = {
3221
3227
  color: "var(--label)"
3222
3228
  }
3223
3229
  }),
3224
- dropdownIndicator: (provided, state) => {
3225
- var _a;
3226
- return {
3227
- ...provided,
3228
- color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)",
3229
- transform: ((_a = state == null ? void 0 : state.selectProps) == null ? void 0 : _a.menuIsOpen) ? "rotate(180deg)" : "rotate(0)",
3230
- ":hover": {
3231
- color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)"
3232
- }
3233
- };
3234
- },
3230
+ dropdownIndicator: (provided, state) => ({
3231
+ ...provided,
3232
+ color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)",
3233
+ // -2px corrige o desalinhamento otico da seta com o texto do campo. Sem rotate: o estado
3234
+ // aberto troca o glifo pra `uil-angle-up` (ver DropdownIndicatorCustom em Select.tsx), assim
3235
+ // a seta fica na mesma posicao nos dois estados.
3236
+ transform: "translateY(-2px)",
3237
+ ":hover": {
3238
+ color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)"
3239
+ }
3240
+ }),
3235
3241
  placeholder: (provided, state) => ({
3236
3242
  ...provided,
3237
3243
  color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
@@ -3263,15 +3269,21 @@ var customStyles = {
3263
3269
  display: "flex"
3264
3270
  }),
3265
3271
  control: (provided, state) => {
3266
- 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)";
3272
+ 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)";
3267
3273
  return {
3268
3274
  ...provided,
3269
3275
  cursor: "pointer",
3270
3276
  border,
3271
- 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)",
3277
+ // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
3278
+ // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
3279
+ // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
3280
+ // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
3281
+ // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
3282
+ // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
3283
+ 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)",
3272
3284
  outline: "none",
3273
- // Raio fixo: o anel de foco é desenhado por box-shadow, que segue o borderRadius do
3274
- // control — trocar pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
3285
+ // Raio fixo: o anel de foco segue o borderRadius do control — trocar pra 2px no foco
3286
+ // deixava o anel quadrado sobre um campo arredondado.
3275
3287
  borderRadius: "0.5rem",
3276
3288
  placeholder: " ",
3277
3289
  height: state.selectProps.smallField ? "30px" : "46px",
@@ -3490,10 +3502,15 @@ var SelectField = ({
3490
3502
  }
3491
3503
  };
3492
3504
  const DropdownIndicatorCustom = (props) => {
3505
+ var _a2;
3493
3506
  return /* @__PURE__ */ jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx(
3494
3507
  "i",
3495
3508
  {
3496
- className: `uil uil-angle-down text-[20px] ${small ? "h-[20px] -mt-[7px]" : "h-full"}`
3509
+ className: clsx9(
3510
+ "uil text-[20px]",
3511
+ ((_a2 = props.selectProps) == null ? void 0 : _a2.menuIsOpen) ? "uil-angle-up" : "uil-angle-down",
3512
+ small ? "h-[20px] -mt-[7px]" : "h-full"
3513
+ )
3497
3514
  }
3498
3515
  ) });
3499
3516
  };
@@ -3593,7 +3610,7 @@ var SelectField = ({
3593
3610
  className: clsx9(
3594
3611
  "text-label text-sm left-2.5 cursor-pointer pointer-events-none absolute transition-all duration-200",
3595
3612
  {
3596
- "scale-75 -translate-y-3": field.value || inputValue,
3613
+ "scale-75 -translate-y-[10px]": field.value || inputValue,
3597
3614
  "ml-[35px]": hasIcon.hasIcon,
3598
3615
  "ml-[2px]": !hasIcon.hasIcon,
3599
3616
  "top-2.5": !(field.value || inputValue),
@@ -3686,15 +3703,21 @@ var customStyles2 = {
3686
3703
  color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
3687
3704
  }),
3688
3705
  control: (provided, state) => {
3689
- 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)";
3706
+ 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)";
3690
3707
  return {
3691
3708
  ...provided,
3692
3709
  cursor: "pointer",
3693
3710
  border,
3694
- 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)",
3711
+ // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
3712
+ // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
3713
+ // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
3714
+ // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
3715
+ // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
3716
+ // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
3717
+ 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)",
3695
3718
  outline: "none",
3696
- // Raio fixo: o anel de foco é desenhado por box-shadow, que segue o borderRadius do
3697
- // control — trocar pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
3719
+ // Raio fixo: o anel de foco segue o borderRadius do control — trocar pra 2px no foco
3720
+ // deixava o anel quadrado sobre um campo arredondado.
3698
3721
  borderRadius: "0.5rem",
3699
3722
  placeholder: " ",
3700
3723
  height: "46px",
@@ -4050,7 +4073,7 @@ var SelectFieldBip = forwardRef(
4050
4073
  className: clsx9(
4051
4074
  "text-label text-sm left-2.5 cursor-pointer pointer-events-none",
4052
4075
  {
4053
- [" scale-75 -translate-y-3 "]: field.value,
4076
+ [" scale-75 -translate-y-[10px] "]: field.value,
4054
4077
  ["text-dangerous-700"]: hasError.hasError
4055
4078
  }
4056
4079
  ),
@@ -6129,12 +6152,18 @@ var customStyles3 = {
6129
6152
  display: "flex"
6130
6153
  }),
6131
6154
  control: (provided, state) => {
6132
- 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)";
6155
+ 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)";
6133
6156
  return {
6134
6157
  ...provided,
6135
6158
  cursor: "pointer",
6136
6159
  border,
6137
- boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
6160
+ // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
6161
+ // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
6162
+ // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
6163
+ // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
6164
+ // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
6165
+ // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
6166
+ 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)",
6138
6167
  outline: "none",
6139
6168
  borderRadius: "0.5rem",
6140
6169
  paddingLeft: "0px",
@@ -6282,7 +6311,7 @@ var MultiSelect = ({
6282
6311
  "span",
6283
6312
  {
6284
6313
  className: clsx9("text-label text-sm left-2.5", {
6285
- [" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
6314
+ [" scale-75 -translate-y-[10px] "]: field.value && field.value.length > 0,
6286
6315
  ["text-dangerous-500"]: hasError.hasError
6287
6316
  }),
6288
6317
  children: [
@@ -6344,13 +6373,19 @@ var customStyles4 = {
6344
6373
  background: "var(--surface)"
6345
6374
  }),
6346
6375
  control: (provided, state) => {
6347
- const border = state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
6376
+ const border = state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "0.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
6348
6377
  return {
6349
6378
  ...provided,
6350
6379
  cursor: "pointer",
6351
6380
  paddingTop: state.selectProps.hasLabel ? "18px" : "0px",
6352
6381
  border: state.isDisabled ? "0.5px solid var(--input-border-disabled, var(--stroke))" : border,
6353
- boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
6382
+ // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
6383
+ // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
6384
+ // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
6385
+ // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
6386
+ // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
6387
+ // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
6388
+ 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)",
6354
6389
  outline: "none",
6355
6390
  borderRadius: "0.5rem",
6356
6391
  backgroundColor: "var(--surface)",
@@ -6467,7 +6502,7 @@ var InputTag = ({
6467
6502
  "span",
6468
6503
  {
6469
6504
  className: clsx9("text-label text-sm left-2.5", {
6470
- [" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
6505
+ [" scale-75 -translate-y-[10px] "]: field.value && field.value.length > 0,
6471
6506
  ["text-dangerous-500"]: hasError.hasError
6472
6507
  }),
6473
6508
  children: [
@@ -6541,12 +6576,18 @@ var customStyles5 = {
6541
6576
  display: "flex"
6542
6577
  }),
6543
6578
  control: (provided, state) => {
6544
- 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)";
6579
+ 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)";
6545
6580
  return {
6546
6581
  ...provided,
6547
6582
  cursor: "pointer",
6548
6583
  border,
6549
- boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
6584
+ // Focus ring padrao (card 96332): 1.5px na cor secondary desenhados SOBRE o contorno do
6585
+ // campo — a borda fica azul e o inset box-shadow completa a espessura. O spread do
6586
+ // box-shadow e o unico jeito de chegar em 1.5px de fato: o Chromium arredonda
6587
+ // border-width/outline-width pra px inteiro, entao 1.5px pinta 1px, igual ao default de
6588
+ // 0.5px. Nada disso entra no box model, entao a altura do control nao muda — e o anel
6589
+ // fica por dentro do campo, sem o anel "extra" por fora que o box-shadow duplo criava.
6590
+ 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)",
6550
6591
  outline: "none",
6551
6592
  borderRadius: "0.5rem",
6552
6593
  paddingLeft: "8px",
@@ -7283,8 +7324,8 @@ var TextArea = ({
7283
7324
  const fieldValidationMessages = [error == null ? void 0 : error.message];
7284
7325
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
7285
7326
  const styles = {
7286
- 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"}`,
7287
- 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`
7327
+ 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"}`,
7328
+ 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`
7288
7329
  };
7289
7330
  return /* @__PURE__ */ jsxs("div", { children: [
7290
7331
  /* @__PURE__ */ jsxs("div", { className: "relative outline-none", children: [
@@ -7430,11 +7471,11 @@ function ControlledInput({
7430
7471
  const fieldValidationMessages = [error == null ? void 0 : error.message];
7431
7472
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
7432
7473
  const styles = {
7433
- 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]"}
7474
+ 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]"}
7434
7475
  ${!hasError ? "border-stroke" : ""}`,
7435
7476
  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"}`,
7436
7477
  rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
7437
- 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",
7478
+ 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",
7438
7479
  clear: `absolute top-[7px] cursor-pointer text-label text-[22px] ${searchOnClick ? "right-[46px]" : "right-[8px]"}`,
7439
7480
  error: "border-dangerous-500 text-dangerous-500"
7440
7481
  };