analytica-frontend-lib 1.0.31 → 1.0.33

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.
package/dist/index.mjs CHANGED
@@ -766,7 +766,7 @@ var CheckBox = forwardRef5(
766
766
  CheckBox.displayName = "CheckBox";
767
767
  var CheckBox_default = CheckBox;
768
768
 
769
- // src/components/TextArea/TextArea.tsx
769
+ // src/components/Radio/Radio.tsx
770
770
  import {
771
771
  forwardRef as forwardRef6,
772
772
  useState as useState2,
@@ -774,6 +774,231 @@ import {
774
774
  } from "react";
775
775
  import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
776
776
  var SIZE_CLASSES4 = {
777
+ small: {
778
+ radio: "w-5 h-5",
779
+ // 20px x 20px
780
+ textSize: "sm",
781
+ spacing: "gap-1.5",
782
+ // 6px
783
+ borderWidth: "border-2",
784
+ dotSize: "w-1.5 h-1.5",
785
+ // 6px inner dot
786
+ labelHeight: "h-5"
787
+ },
788
+ medium: {
789
+ radio: "w-6 h-6",
790
+ // 24px x 24px
791
+ textSize: "md",
792
+ spacing: "gap-2",
793
+ // 8px
794
+ borderWidth: "border-2",
795
+ dotSize: "w-2 h-2",
796
+ // 8px inner dot
797
+ labelHeight: "h-6"
798
+ },
799
+ large: {
800
+ radio: "w-7 h-7",
801
+ // 28px x 28px
802
+ textSize: "lg",
803
+ spacing: "gap-2",
804
+ // 8px
805
+ borderWidth: "border-2",
806
+ // 2px border (consistent with others)
807
+ dotSize: "w-2.5 h-2.5",
808
+ // 10px inner dot
809
+ labelHeight: "h-7"
810
+ },
811
+ extraLarge: {
812
+ radio: "w-8 h-8",
813
+ // 32px x 32px (larger than large)
814
+ textSize: "xl",
815
+ spacing: "gap-3",
816
+ // 12px
817
+ borderWidth: "border-2",
818
+ // 2px border (consistent with others)
819
+ dotSize: "w-3 h-3",
820
+ // 12px inner dot
821
+ labelHeight: "h-8"
822
+ }
823
+ };
824
+ var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
825
+ var STATE_CLASSES2 = {
826
+ default: {
827
+ unchecked: "border-border-400 bg-background hover:border-border-500",
828
+ checked: "border-primary-950 bg-background hover:border-primary-800"
829
+ },
830
+ hovered: {
831
+ unchecked: "border-border-500 bg-background",
832
+ // #8C8D8D hover state for unchecked
833
+ checked: "border-info-700 bg-background"
834
+ // Adjust checked border for hover
835
+ },
836
+ focused: {
837
+ unchecked: "border-border-400 bg-background",
838
+ // #A5A3A3 for unchecked radio
839
+ checked: "border-primary-950 bg-background"
840
+ // #124393 for checked radio
841
+ },
842
+ invalid: {
843
+ unchecked: "border-border-400 bg-background",
844
+ // #A5A3A3 for unchecked radio
845
+ checked: "border-primary-950 bg-background"
846
+ // #124393 for checked radio
847
+ },
848
+ disabled: {
849
+ unchecked: "border-border-400 bg-background cursor-not-allowed",
850
+ // #A5A3A3 for unchecked radio
851
+ checked: "border-primary-950 bg-background cursor-not-allowed"
852
+ // #124393 for checked radio
853
+ }
854
+ };
855
+ var DOT_CLASSES = {
856
+ default: "bg-primary-950",
857
+ hovered: "bg-info-700",
858
+ // #1C61B2 hover state for checked dot
859
+ focused: "bg-primary-950",
860
+ // #124393 for focused checked dot
861
+ invalid: "bg-primary-950",
862
+ // #124393 for invalid checked dot
863
+ disabled: "bg-primary-950"
864
+ // #124393 for disabled checked dot
865
+ };
866
+ var Radio = forwardRef6(
867
+ ({
868
+ label,
869
+ size = "medium",
870
+ state = "default",
871
+ errorMessage,
872
+ helperText,
873
+ className = "",
874
+ labelClassName = "",
875
+ checked: checkedProp,
876
+ defaultChecked = false,
877
+ disabled,
878
+ id,
879
+ name,
880
+ value,
881
+ onChange,
882
+ ...props
883
+ }, ref) => {
884
+ const generatedId = useId2();
885
+ const inputId = id ?? `radio-${generatedId}`;
886
+ const [internalChecked, setInternalChecked] = useState2(defaultChecked);
887
+ const isControlled = checkedProp !== void 0;
888
+ const checked = isControlled ? checkedProp : internalChecked;
889
+ const handleChange = (event) => {
890
+ const newChecked = event.target.checked;
891
+ if (!isControlled) {
892
+ setInternalChecked(newChecked);
893
+ }
894
+ onChange?.(event);
895
+ };
896
+ const currentState = disabled ? "disabled" : state;
897
+ const sizeClasses = SIZE_CLASSES4[size];
898
+ const actualRadioSize = sizeClasses.radio;
899
+ const actualDotSize = sizeClasses.dotSize;
900
+ const radioVariant = checked ? "checked" : "unchecked";
901
+ const stylingClasses = STATE_CLASSES2[currentState][radioVariant];
902
+ const getBorderWidth = () => {
903
+ if (currentState === "focused") {
904
+ return "border-2";
905
+ }
906
+ return sizeClasses.borderWidth;
907
+ };
908
+ const borderWidthClass = getBorderWidth();
909
+ const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
910
+ const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
911
+ const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
912
+ const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
913
+ const getTextColor = () => {
914
+ if (currentState === "disabled") {
915
+ return checked ? "text-text-900" : "text-text-600";
916
+ }
917
+ if (currentState === "focused") {
918
+ return "text-text-900";
919
+ }
920
+ return checked ? "text-text-900" : "text-text-600";
921
+ };
922
+ const getCursorClass = () => {
923
+ return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
924
+ };
925
+ return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
926
+ /* @__PURE__ */ jsxs8(
927
+ "div",
928
+ {
929
+ className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
930
+ children: [
931
+ /* @__PURE__ */ jsx11(
932
+ "input",
933
+ {
934
+ ref,
935
+ type: "radio",
936
+ id: inputId,
937
+ checked,
938
+ disabled,
939
+ name,
940
+ value,
941
+ onChange: handleChange,
942
+ className: "sr-only",
943
+ ...props
944
+ }
945
+ ),
946
+ /* @__PURE__ */ jsx11("label", { htmlFor: inputId, className: radioClasses, children: checked && /* @__PURE__ */ jsx11("div", { className: dotClasses }) }),
947
+ label && /* @__PURE__ */ jsx11(
948
+ "div",
949
+ {
950
+ className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
951
+ children: /* @__PURE__ */ jsx11(
952
+ Text_default,
953
+ {
954
+ as: "label",
955
+ htmlFor: inputId,
956
+ size: sizeClasses.textSize,
957
+ weight: "normal",
958
+ className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
959
+ color: getTextColor(),
960
+ children: label
961
+ }
962
+ )
963
+ }
964
+ )
965
+ ]
966
+ }
967
+ ),
968
+ errorMessage && /* @__PURE__ */ jsx11(
969
+ Text_default,
970
+ {
971
+ size: "sm",
972
+ weight: "normal",
973
+ className: "mt-1.5",
974
+ color: "text-error-600",
975
+ children: errorMessage
976
+ }
977
+ ),
978
+ helperText && !errorMessage && /* @__PURE__ */ jsx11(
979
+ Text_default,
980
+ {
981
+ size: "sm",
982
+ weight: "normal",
983
+ className: "mt-1.5",
984
+ color: "text-text-500",
985
+ children: helperText
986
+ }
987
+ )
988
+ ] });
989
+ }
990
+ );
991
+ Radio.displayName = "Radio";
992
+ var Radio_default = Radio;
993
+
994
+ // src/components/TextArea/TextArea.tsx
995
+ import {
996
+ forwardRef as forwardRef7,
997
+ useState as useState3,
998
+ useId as useId3
999
+ } from "react";
1000
+ import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
1001
+ var SIZE_CLASSES5 = {
777
1002
  small: {
778
1003
  container: "w-72",
779
1004
  // 288px width
@@ -804,7 +1029,7 @@ var SIZE_CLASSES4 = {
804
1029
  }
805
1030
  };
806
1031
  var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
807
- var STATE_CLASSES2 = {
1032
+ var STATE_CLASSES3 = {
808
1033
  default: {
809
1034
  base: "border-border-300 bg-background text-text-600",
810
1035
  hover: "hover:border-border-400",
@@ -831,7 +1056,7 @@ var STATE_CLASSES2 = {
831
1056
  focus: ""
832
1057
  }
833
1058
  };
834
- var TextArea = forwardRef6(
1059
+ var TextArea = forwardRef7(
835
1060
  ({
836
1061
  label,
837
1062
  size = "medium",
@@ -846,9 +1071,9 @@ var TextArea = forwardRef6(
846
1071
  placeholder,
847
1072
  ...props
848
1073
  }, ref) => {
849
- const generatedId = useId2();
1074
+ const generatedId = useId3();
850
1075
  const inputId = id ?? `textarea-${generatedId}`;
851
- const [isFocused, setIsFocused] = useState2(false);
1076
+ const [isFocused, setIsFocused] = useState3(false);
852
1077
  const handleChange = (event) => {
853
1078
  onChange?.(event);
854
1079
  };
@@ -864,11 +1089,11 @@ var TextArea = forwardRef6(
864
1089
  if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
865
1090
  currentState = "focused";
866
1091
  }
867
- const sizeClasses = SIZE_CLASSES4[size];
868
- const stateClasses = STATE_CLASSES2[currentState];
1092
+ const sizeClasses = SIZE_CLASSES5[size];
1093
+ const stateClasses = STATE_CLASSES3[currentState];
869
1094
  const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
870
- return /* @__PURE__ */ jsxs8("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
871
- label && /* @__PURE__ */ jsx11(
1095
+ return /* @__PURE__ */ jsxs9("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
1096
+ label && /* @__PURE__ */ jsx12(
872
1097
  Text_default,
873
1098
  {
874
1099
  as: "label",
@@ -880,7 +1105,7 @@ var TextArea = forwardRef6(
880
1105
  children: label
881
1106
  }
882
1107
  ),
883
- /* @__PURE__ */ jsx11(
1108
+ /* @__PURE__ */ jsx12(
884
1109
  "textarea",
885
1110
  {
886
1111
  ref,
@@ -894,8 +1119,8 @@ var TextArea = forwardRef6(
894
1119
  ...props
895
1120
  }
896
1121
  ),
897
- errorMessage && /* @__PURE__ */ jsx11(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
898
- helperMessage && !errorMessage && /* @__PURE__ */ jsx11(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
1122
+ errorMessage && /* @__PURE__ */ jsx12(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
1123
+ helperMessage && !errorMessage && /* @__PURE__ */ jsx12(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
899
1124
  ] });
900
1125
  }
901
1126
  );
@@ -904,7 +1129,7 @@ var TextArea_default = TextArea;
904
1129
 
905
1130
  // src/components/Toast/Toast.tsx
906
1131
  import { CheckCircle as CheckCircle2, WarningCircle as WarningCircle2, Info as Info2, X } from "phosphor-react";
907
- import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
1132
+ import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
908
1133
  var VARIANT_ACTION_CLASSES4 = {
909
1134
  solid: {
910
1135
  warning: "bg-warning text-warning-600 border-none focus-visible:outline-none",
@@ -944,7 +1169,7 @@ var Toast = ({
944
1169
  };
945
1170
  const IconAction = iconMap[action] || iconMap["success"];
946
1171
  const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
947
- return /* @__PURE__ */ jsxs9(
1172
+ return /* @__PURE__ */ jsxs10(
948
1173
  "div",
949
1174
  {
950
1175
  role: "alert",
@@ -953,20 +1178,20 @@ var Toast = ({
953
1178
  className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
954
1179
  ...props,
955
1180
  children: [
956
- /* @__PURE__ */ jsxs9("div", { className: "flex flex-row items-start gap-3", children: [
957
- /* @__PURE__ */ jsx12("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx12(IconAction, {}) }),
958
- /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-start justify-start", children: [
959
- /* @__PURE__ */ jsx12("p", { className: "font-semibold text-md", children: title }),
960
- description && /* @__PURE__ */ jsx12("p", { className: "text-md text-text-900", children: description })
1181
+ /* @__PURE__ */ jsxs10("div", { className: "flex flex-row items-start gap-3", children: [
1182
+ /* @__PURE__ */ jsx13("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx13(IconAction, {}) }),
1183
+ /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-start justify-start", children: [
1184
+ /* @__PURE__ */ jsx13("p", { className: "font-semibold text-md", children: title }),
1185
+ description && /* @__PURE__ */ jsx13("p", { className: "text-md text-text-900", children: description })
961
1186
  ] })
962
1187
  ] }),
963
- /* @__PURE__ */ jsx12(
1188
+ /* @__PURE__ */ jsx13(
964
1189
  "button",
965
1190
  {
966
1191
  onClick: onClose,
967
1192
  "aria-label": "Dismiss notification",
968
1193
  className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
969
- children: /* @__PURE__ */ jsx12(X, {})
1194
+ children: /* @__PURE__ */ jsx13(X, {})
970
1195
  }
971
1196
  )
972
1197
  ]
@@ -994,11 +1219,11 @@ var useToastStore = create((set) => ({
994
1219
  var ToastStore_default = useToastStore;
995
1220
 
996
1221
  // src/components/Toast/utils/Toaster.tsx
997
- import { Fragment, jsx as jsx13 } from "react/jsx-runtime";
1222
+ import { Fragment, jsx as jsx14 } from "react/jsx-runtime";
998
1223
  var Toaster = () => {
999
1224
  const toasts = ToastStore_default((state) => state.toasts);
1000
1225
  const removeToast = ToastStore_default((state) => state.removeToast);
1001
- return /* @__PURE__ */ jsx13(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx13(
1226
+ return /* @__PURE__ */ jsx14(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx14(
1002
1227
  Toast_default,
1003
1228
  {
1004
1229
  title: toast.title,
@@ -1014,7 +1239,7 @@ var Toaster = () => {
1014
1239
  var Toaster_default = Toaster;
1015
1240
 
1016
1241
  // src/components/Divider/Divider.tsx
1017
- import { jsx as jsx14 } from "react/jsx-runtime";
1242
+ import { jsx as jsx15 } from "react/jsx-runtime";
1018
1243
  var Divider = ({
1019
1244
  orientation = "horizontal",
1020
1245
  className = "",
@@ -1025,7 +1250,7 @@ var Divider = ({
1025
1250
  horizontal: "w-full h-px",
1026
1251
  vertical: "h-full w-px"
1027
1252
  };
1028
- return /* @__PURE__ */ jsx14(
1253
+ return /* @__PURE__ */ jsx15(
1029
1254
  "hr",
1030
1255
  {
1031
1256
  className: `${baseClasses} ${orientationClasses[orientation]} ${className}`,
@@ -1039,19 +1264,19 @@ var Divider_default = Divider;
1039
1264
  // src/components/Input/Input.tsx
1040
1265
  import { WarningCircle as WarningCircle3, Eye, EyeSlash } from "phosphor-react";
1041
1266
  import {
1042
- forwardRef as forwardRef7,
1043
- useState as useState3,
1044
- useId as useId3,
1267
+ forwardRef as forwardRef8,
1268
+ useState as useState4,
1269
+ useId as useId4,
1045
1270
  useMemo
1046
1271
  } from "react";
1047
- import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
1048
- var SIZE_CLASSES5 = {
1272
+ import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
1273
+ var SIZE_CLASSES6 = {
1049
1274
  small: "text-sm",
1050
1275
  medium: "text-md",
1051
1276
  large: "text-lg",
1052
1277
  "extra-large": "text-xl"
1053
1278
  };
1054
- var STATE_CLASSES3 = {
1279
+ var STATE_CLASSES4 = {
1055
1280
  default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
1056
1281
  error: "border-2 border-indicator-error placeholder:text-text-600",
1057
1282
  disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
@@ -1083,20 +1308,20 @@ var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight
1083
1308
  let actualIconRight = iconRight;
1084
1309
  let ariaLabel;
1085
1310
  if (shouldShowPasswordToggle) {
1086
- actualIconRight = showPassword ? /* @__PURE__ */ jsx15(EyeSlash, {}) : /* @__PURE__ */ jsx15(Eye, {});
1311
+ actualIconRight = showPassword ? /* @__PURE__ */ jsx16(EyeSlash, {}) : /* @__PURE__ */ jsx16(Eye, {});
1087
1312
  ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
1088
1313
  }
1089
1314
  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
1090
1315
  };
1091
1316
  var getCombinedClasses = (actualState, variant) => {
1092
- const stateClasses = STATE_CLASSES3[actualState];
1317
+ const stateClasses = STATE_CLASSES4[actualState];
1093
1318
  const variantClasses = VARIANT_CLASSES[variant];
1094
1319
  if (actualState === "error" && variant === "underlined") {
1095
1320
  return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
1096
1321
  }
1097
1322
  return `${stateClasses} ${variantClasses}`;
1098
1323
  };
1099
- var Input = forwardRef7(
1324
+ var Input = forwardRef8(
1100
1325
  ({
1101
1326
  label,
1102
1327
  helperText,
@@ -1114,18 +1339,18 @@ var Input = forwardRef7(
1114
1339
  type = "text",
1115
1340
  ...props
1116
1341
  }, ref) => {
1117
- const [showPassword, setShowPassword] = useState3(false);
1342
+ const [showPassword, setShowPassword] = useState4(false);
1118
1343
  const isPasswordType = type === "password";
1119
1344
  const actualType = isPasswordType && showPassword ? "text" : type;
1120
1345
  const actualState = getActualState(disabled, readOnly, errorMessage, state);
1121
- const sizeClasses = SIZE_CLASSES5[size];
1346
+ const sizeClasses = SIZE_CLASSES6[size];
1122
1347
  const combinedClasses = useMemo(
1123
1348
  () => getCombinedClasses(actualState, variant),
1124
1349
  [actualState, variant]
1125
1350
  );
1126
1351
  const iconSize = getIconSize(size);
1127
1352
  const baseClasses = "bg-background w-full py-2 px-3 font-normal text-text-900 focus:outline-primary-950";
1128
- const generatedId = useId3();
1353
+ const generatedId = useId4();
1129
1354
  const inputId = id ?? `input-${generatedId}`;
1130
1355
  const togglePasswordVisibility = () => setShowPassword(!showPassword);
1131
1356
  const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
@@ -1135,8 +1360,8 @@ var Input = forwardRef7(
1135
1360
  showPassword,
1136
1361
  iconRight
1137
1362
  );
1138
- return /* @__PURE__ */ jsxs10("div", { className: `${containerClassName}`, children: [
1139
- label && /* @__PURE__ */ jsx15(
1363
+ return /* @__PURE__ */ jsxs11("div", { className: `${containerClassName}`, children: [
1364
+ label && /* @__PURE__ */ jsx16(
1140
1365
  "label",
1141
1366
  {
1142
1367
  htmlFor: inputId,
@@ -1144,15 +1369,15 @@ var Input = forwardRef7(
1144
1369
  children: label
1145
1370
  }
1146
1371
  ),
1147
- /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
1148
- iconLeft && /* @__PURE__ */ jsx15("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx15(
1372
+ /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
1373
+ iconLeft && /* @__PURE__ */ jsx16("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx16(
1149
1374
  "span",
1150
1375
  {
1151
1376
  className: `${iconSize} text-text-400 flex items-center justify-center`,
1152
1377
  children: iconLeft
1153
1378
  }
1154
1379
  ) }),
1155
- /* @__PURE__ */ jsx15(
1380
+ /* @__PURE__ */ jsx16(
1156
1381
  "input",
1157
1382
  {
1158
1383
  ref,
@@ -1165,14 +1390,14 @@ var Input = forwardRef7(
1165
1390
  ...props
1166
1391
  }
1167
1392
  ),
1168
- actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ jsx15(
1393
+ actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ jsx16(
1169
1394
  "button",
1170
1395
  {
1171
1396
  type: "button",
1172
1397
  className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
1173
1398
  onClick: togglePasswordVisibility,
1174
1399
  "aria-label": ariaLabel,
1175
- children: /* @__PURE__ */ jsx15(
1400
+ children: /* @__PURE__ */ jsx16(
1176
1401
  "span",
1177
1402
  {
1178
1403
  className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
@@ -1180,7 +1405,7 @@ var Input = forwardRef7(
1180
1405
  }
1181
1406
  )
1182
1407
  }
1183
- ) : /* @__PURE__ */ jsx15("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx15(
1408
+ ) : /* @__PURE__ */ jsx16("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx16(
1184
1409
  "span",
1185
1410
  {
1186
1411
  className: `${iconSize} text-text-400 flex items-center justify-center`,
@@ -1188,10 +1413,10 @@ var Input = forwardRef7(
1188
1413
  }
1189
1414
  ) }))
1190
1415
  ] }),
1191
- /* @__PURE__ */ jsxs10("div", { className: "mt-1.5 gap-1.5", children: [
1192
- helperText && /* @__PURE__ */ jsx15("p", { className: "text-sm text-text-500", children: helperText }),
1193
- errorMessage && /* @__PURE__ */ jsxs10("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
1194
- /* @__PURE__ */ jsx15(WarningCircle3, { size: 16 }),
1416
+ /* @__PURE__ */ jsxs11("div", { className: "mt-1.5 gap-1.5", children: [
1417
+ helperText && /* @__PURE__ */ jsx16("p", { className: "text-sm text-text-500", children: helperText }),
1418
+ errorMessage && /* @__PURE__ */ jsxs11("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
1419
+ /* @__PURE__ */ jsx16(WarningCircle3, { size: 16 }),
1195
1420
  " ",
1196
1421
  errorMessage
1197
1422
  ] })
@@ -1201,23 +1426,56 @@ var Input = forwardRef7(
1201
1426
  );
1202
1427
  var Input_default = Input;
1203
1428
 
1429
+ // src/components/Chips/Chips.tsx
1430
+ import { Check as Check2 } from "phosphor-react";
1431
+ import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
1432
+ var STATE_CLASSES5 = {
1433
+ default: "bg-background text-text-950 border border-border-100 hover:bg-secondary-50 hover:border-border-300",
1434
+ selected: "bg-info-background text-primary-950 border-2 border-primary-950 hover:bg-secondary-50 focus-visible:border-0"
1435
+ };
1436
+ var Chips = ({
1437
+ children,
1438
+ selected = false,
1439
+ className = "",
1440
+ disabled,
1441
+ type = "button",
1442
+ ...props
1443
+ }) => {
1444
+ const stateClasses = selected ? STATE_CLASSES5.selected : STATE_CLASSES5.default;
1445
+ const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-normal text-sm px-4 py-2 gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-primary-600 disabled:opacity-40 disabled:cursor-not-allowed";
1446
+ return /* @__PURE__ */ jsxs12(
1447
+ "button",
1448
+ {
1449
+ className: `${baseClasses} ${stateClasses} ${className}`,
1450
+ disabled,
1451
+ type,
1452
+ ...props,
1453
+ children: [
1454
+ selected && /* @__PURE__ */ jsx17("span", { className: `flex items-center`, children: /* @__PURE__ */ jsx17(Check2, { weight: "bold", size: 16 }) }),
1455
+ /* @__PURE__ */ jsx17("span", { className: "flex-1", children })
1456
+ ]
1457
+ }
1458
+ );
1459
+ };
1460
+ var Chips_default = Chips;
1461
+
1204
1462
  // src/components/DropdownMenu/DropdownMenu.tsx
1205
1463
  import {
1206
1464
  createContext,
1207
- useState as useState4,
1465
+ useState as useState5,
1208
1466
  useCallback,
1209
1467
  useContext,
1210
- forwardRef as forwardRef8,
1468
+ forwardRef as forwardRef9,
1211
1469
  useEffect,
1212
1470
  useRef,
1213
1471
  useMemo as useMemo2
1214
1472
  } from "react";
1215
- import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
1473
+ import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
1216
1474
  var DropdownMenuContext = createContext(
1217
1475
  void 0
1218
1476
  );
1219
1477
  var DropdownMenu = ({ children, open, onOpenChange }) => {
1220
- const [internalOpen, setInternalOpen] = useState4(false);
1478
+ const [internalOpen, setInternalOpen] = useState5(false);
1221
1479
  const isControlled = open !== void 0;
1222
1480
  const currentOpen = isControlled ? open : internalOpen;
1223
1481
  const setOpen = useCallback(
@@ -1275,14 +1533,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
1275
1533
  () => ({ open: currentOpen, setOpen }),
1276
1534
  [currentOpen, setOpen]
1277
1535
  );
1278
- return /* @__PURE__ */ jsx16(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx16("div", { className: "relative", ref: menuRef, children }) });
1536
+ return /* @__PURE__ */ jsx18(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx18("div", { className: "relative", ref: menuRef, children }) });
1279
1537
  };
1280
- var DropdownMenuTrigger = forwardRef8(({ className, children, onClick, ...props }, ref) => {
1538
+ var DropdownMenuTrigger = forwardRef9(({ className, children, onClick, ...props }, ref) => {
1281
1539
  const context = useContext(DropdownMenuContext);
1282
1540
  if (!context)
1283
1541
  throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
1284
1542
  const { open, setOpen } = context;
1285
- return /* @__PURE__ */ jsx16(
1543
+ return /* @__PURE__ */ jsx18(
1286
1544
  "button",
1287
1545
  {
1288
1546
  ref,
@@ -1314,7 +1572,7 @@ var ALIGN_CLASSES = {
1314
1572
  center: "left-1/2 -translate-x-1/2",
1315
1573
  end: "right-0"
1316
1574
  };
1317
- var MenuLabel = forwardRef8(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx16(
1575
+ var MenuLabel = forwardRef9(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx18(
1318
1576
  "fieldset",
1319
1577
  {
1320
1578
  ref,
@@ -1324,7 +1582,7 @@ var MenuLabel = forwardRef8(({ className, inset, ...props }, ref) => /* @__PURE_
1324
1582
  }
1325
1583
  ));
1326
1584
  MenuLabel.displayName = "MenuLabel";
1327
- var MenuContent = forwardRef8(
1585
+ var MenuContent = forwardRef9(
1328
1586
  ({
1329
1587
  className,
1330
1588
  align = "start",
@@ -1334,7 +1592,7 @@ var MenuContent = forwardRef8(
1334
1592
  ...props
1335
1593
  }, ref) => {
1336
1594
  const { open } = useContext(DropdownMenuContext);
1337
- const [isVisible, setIsVisible] = useState4(open);
1595
+ const [isVisible, setIsVisible] = useState5(open);
1338
1596
  useEffect(() => {
1339
1597
  if (open) {
1340
1598
  setIsVisible(true);
@@ -1349,7 +1607,7 @@ var MenuContent = forwardRef8(
1349
1607
  const horizontal = ALIGN_CLASSES[align];
1350
1608
  return `absolute ${vertical} ${horizontal}`;
1351
1609
  };
1352
- return /* @__PURE__ */ jsx16(
1610
+ return /* @__PURE__ */ jsx18(
1353
1611
  "div",
1354
1612
  {
1355
1613
  ref,
@@ -1373,7 +1631,7 @@ var MenuContent = forwardRef8(
1373
1631
  }
1374
1632
  );
1375
1633
  MenuContent.displayName = "MenuContent";
1376
- var MenuItem = forwardRef8(
1634
+ var MenuItem = forwardRef9(
1377
1635
  ({
1378
1636
  className,
1379
1637
  inset,
@@ -1394,7 +1652,7 @@ var MenuItem = forwardRef8(
1394
1652
  }
1395
1653
  onClick?.(e);
1396
1654
  };
1397
- return /* @__PURE__ */ jsxs11(
1655
+ return /* @__PURE__ */ jsxs13(
1398
1656
  "div",
1399
1657
  {
1400
1658
  ref,
@@ -1424,7 +1682,7 @@ var MenuItem = forwardRef8(
1424
1682
  }
1425
1683
  );
1426
1684
  MenuItem.displayName = "MenuItem";
1427
- var MenuSeparator = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
1685
+ var MenuSeparator = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
1428
1686
  "div",
1429
1687
  {
1430
1688
  ref,
@@ -1439,6 +1697,7 @@ export {
1439
1697
  Badge_default as Badge,
1440
1698
  Button_default as Button,
1441
1699
  CheckBox_default as CheckBox,
1700
+ Chips_default as Chips,
1442
1701
  Divider_default as Divider,
1443
1702
  DropdownMenu_default as DropdownMenu,
1444
1703
  MenuContent as DropdownMenuContent,
@@ -1450,6 +1709,7 @@ export {
1450
1709
  IconRoundedButton_default as IconRoundedButton,
1451
1710
  Input_default as Input,
1452
1711
  NavButton_default as NavButton,
1712
+ Radio_default as Radio,
1453
1713
  SelectionButton_default as SelectionButton,
1454
1714
  Table_default as Table,
1455
1715
  Text_default as Text,