analytica-frontend-lib 1.0.30 → 1.0.32

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,
@@ -1013,22 +1238,45 @@ var Toaster = () => {
1013
1238
  };
1014
1239
  var Toaster_default = Toaster;
1015
1240
 
1241
+ // src/components/Divider/Divider.tsx
1242
+ import { jsx as jsx15 } from "react/jsx-runtime";
1243
+ var Divider = ({
1244
+ orientation = "horizontal",
1245
+ className = "",
1246
+ ...props
1247
+ }) => {
1248
+ const baseClasses = "bg-border-200 border-0";
1249
+ const orientationClasses = {
1250
+ horizontal: "w-full h-px",
1251
+ vertical: "h-full w-px"
1252
+ };
1253
+ return /* @__PURE__ */ jsx15(
1254
+ "hr",
1255
+ {
1256
+ className: `${baseClasses} ${orientationClasses[orientation]} ${className}`,
1257
+ "aria-orientation": orientation,
1258
+ ...props
1259
+ }
1260
+ );
1261
+ };
1262
+ var Divider_default = Divider;
1263
+
1016
1264
  // src/components/Input/Input.tsx
1017
1265
  import { WarningCircle as WarningCircle3, Eye, EyeSlash } from "phosphor-react";
1018
1266
  import {
1019
- forwardRef as forwardRef7,
1020
- useState as useState3,
1021
- useId as useId3,
1267
+ forwardRef as forwardRef8,
1268
+ useState as useState4,
1269
+ useId as useId4,
1022
1270
  useMemo
1023
1271
  } from "react";
1024
- import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
1025
- var SIZE_CLASSES5 = {
1272
+ import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
1273
+ var SIZE_CLASSES6 = {
1026
1274
  small: "text-sm",
1027
1275
  medium: "text-md",
1028
1276
  large: "text-lg",
1029
1277
  "extra-large": "text-xl"
1030
1278
  };
1031
- var STATE_CLASSES3 = {
1279
+ var STATE_CLASSES4 = {
1032
1280
  default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
1033
1281
  error: "border-2 border-indicator-error placeholder:text-text-600",
1034
1282
  disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
@@ -1060,20 +1308,20 @@ var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight
1060
1308
  let actualIconRight = iconRight;
1061
1309
  let ariaLabel;
1062
1310
  if (shouldShowPasswordToggle) {
1063
- actualIconRight = showPassword ? /* @__PURE__ */ jsx14(EyeSlash, {}) : /* @__PURE__ */ jsx14(Eye, {});
1311
+ actualIconRight = showPassword ? /* @__PURE__ */ jsx16(EyeSlash, {}) : /* @__PURE__ */ jsx16(Eye, {});
1064
1312
  ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
1065
1313
  }
1066
1314
  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
1067
1315
  };
1068
1316
  var getCombinedClasses = (actualState, variant) => {
1069
- const stateClasses = STATE_CLASSES3[actualState];
1317
+ const stateClasses = STATE_CLASSES4[actualState];
1070
1318
  const variantClasses = VARIANT_CLASSES[variant];
1071
1319
  if (actualState === "error" && variant === "underlined") {
1072
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";
1073
1321
  }
1074
1322
  return `${stateClasses} ${variantClasses}`;
1075
1323
  };
1076
- var Input = forwardRef7(
1324
+ var Input = forwardRef8(
1077
1325
  ({
1078
1326
  label,
1079
1327
  helperText,
@@ -1091,18 +1339,18 @@ var Input = forwardRef7(
1091
1339
  type = "text",
1092
1340
  ...props
1093
1341
  }, ref) => {
1094
- const [showPassword, setShowPassword] = useState3(false);
1342
+ const [showPassword, setShowPassword] = useState4(false);
1095
1343
  const isPasswordType = type === "password";
1096
1344
  const actualType = isPasswordType && showPassword ? "text" : type;
1097
1345
  const actualState = getActualState(disabled, readOnly, errorMessage, state);
1098
- const sizeClasses = SIZE_CLASSES5[size];
1346
+ const sizeClasses = SIZE_CLASSES6[size];
1099
1347
  const combinedClasses = useMemo(
1100
1348
  () => getCombinedClasses(actualState, variant),
1101
1349
  [actualState, variant]
1102
1350
  );
1103
1351
  const iconSize = getIconSize(size);
1104
1352
  const baseClasses = "bg-background w-full py-2 px-3 font-normal text-text-900 focus:outline-primary-950";
1105
- const generatedId = useId3();
1353
+ const generatedId = useId4();
1106
1354
  const inputId = id ?? `input-${generatedId}`;
1107
1355
  const togglePasswordVisibility = () => setShowPassword(!showPassword);
1108
1356
  const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
@@ -1112,8 +1360,8 @@ var Input = forwardRef7(
1112
1360
  showPassword,
1113
1361
  iconRight
1114
1362
  );
1115
- return /* @__PURE__ */ jsxs10("div", { className: `${containerClassName}`, children: [
1116
- label && /* @__PURE__ */ jsx14(
1363
+ return /* @__PURE__ */ jsxs11("div", { className: `${containerClassName}`, children: [
1364
+ label && /* @__PURE__ */ jsx16(
1117
1365
  "label",
1118
1366
  {
1119
1367
  htmlFor: inputId,
@@ -1121,15 +1369,15 @@ var Input = forwardRef7(
1121
1369
  children: label
1122
1370
  }
1123
1371
  ),
1124
- /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
1125
- iconLeft && /* @__PURE__ */ jsx14("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx14(
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(
1126
1374
  "span",
1127
1375
  {
1128
1376
  className: `${iconSize} text-text-400 flex items-center justify-center`,
1129
1377
  children: iconLeft
1130
1378
  }
1131
1379
  ) }),
1132
- /* @__PURE__ */ jsx14(
1380
+ /* @__PURE__ */ jsx16(
1133
1381
  "input",
1134
1382
  {
1135
1383
  ref,
@@ -1142,14 +1390,14 @@ var Input = forwardRef7(
1142
1390
  ...props
1143
1391
  }
1144
1392
  ),
1145
- actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ jsx14(
1393
+ actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ jsx16(
1146
1394
  "button",
1147
1395
  {
1148
1396
  type: "button",
1149
1397
  className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
1150
1398
  onClick: togglePasswordVisibility,
1151
1399
  "aria-label": ariaLabel,
1152
- children: /* @__PURE__ */ jsx14(
1400
+ children: /* @__PURE__ */ jsx16(
1153
1401
  "span",
1154
1402
  {
1155
1403
  className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
@@ -1157,7 +1405,7 @@ var Input = forwardRef7(
1157
1405
  }
1158
1406
  )
1159
1407
  }
1160
- ) : /* @__PURE__ */ jsx14("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx14(
1408
+ ) : /* @__PURE__ */ jsx16("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx16(
1161
1409
  "span",
1162
1410
  {
1163
1411
  className: `${iconSize} text-text-400 flex items-center justify-center`,
@@ -1165,10 +1413,10 @@ var Input = forwardRef7(
1165
1413
  }
1166
1414
  ) }))
1167
1415
  ] }),
1168
- /* @__PURE__ */ jsxs10("div", { className: "mt-1.5 gap-1.5", children: [
1169
- helperText && /* @__PURE__ */ jsx14("p", { className: "text-sm text-text-500", children: helperText }),
1170
- errorMessage && /* @__PURE__ */ jsxs10("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
1171
- /* @__PURE__ */ jsx14(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 }),
1172
1420
  " ",
1173
1421
  errorMessage
1174
1422
  ] })
@@ -1178,23 +1426,56 @@ var Input = forwardRef7(
1178
1426
  );
1179
1427
  var Input_default = Input;
1180
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
+
1181
1462
  // src/components/DropdownMenu/DropdownMenu.tsx
1182
1463
  import {
1183
1464
  createContext,
1184
- useState as useState4,
1465
+ useState as useState5,
1185
1466
  useCallback,
1186
1467
  useContext,
1187
- forwardRef as forwardRef8,
1468
+ forwardRef as forwardRef9,
1188
1469
  useEffect,
1189
1470
  useRef,
1190
1471
  useMemo as useMemo2
1191
1472
  } from "react";
1192
- import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
1473
+ import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
1193
1474
  var DropdownMenuContext = createContext(
1194
1475
  void 0
1195
1476
  );
1196
1477
  var DropdownMenu = ({ children, open, onOpenChange }) => {
1197
- const [internalOpen, setInternalOpen] = useState4(false);
1478
+ const [internalOpen, setInternalOpen] = useState5(false);
1198
1479
  const isControlled = open !== void 0;
1199
1480
  const currentOpen = isControlled ? open : internalOpen;
1200
1481
  const setOpen = useCallback(
@@ -1252,14 +1533,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
1252
1533
  () => ({ open: currentOpen, setOpen }),
1253
1534
  [currentOpen, setOpen]
1254
1535
  );
1255
- return /* @__PURE__ */ jsx15(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx15("div", { className: "relative", ref: menuRef, children }) });
1536
+ return /* @__PURE__ */ jsx18(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx18("div", { className: "relative", ref: menuRef, children }) });
1256
1537
  };
1257
- var DropdownMenuTrigger = forwardRef8(({ className, children, onClick, ...props }, ref) => {
1538
+ var DropdownMenuTrigger = forwardRef9(({ className, children, onClick, ...props }, ref) => {
1258
1539
  const context = useContext(DropdownMenuContext);
1259
1540
  if (!context)
1260
1541
  throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
1261
1542
  const { open, setOpen } = context;
1262
- return /* @__PURE__ */ jsx15(
1543
+ return /* @__PURE__ */ jsx18(
1263
1544
  "button",
1264
1545
  {
1265
1546
  ref,
@@ -1291,7 +1572,7 @@ var ALIGN_CLASSES = {
1291
1572
  center: "left-1/2 -translate-x-1/2",
1292
1573
  end: "right-0"
1293
1574
  };
1294
- var MenuLabel = forwardRef8(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
1575
+ var MenuLabel = forwardRef9(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx18(
1295
1576
  "fieldset",
1296
1577
  {
1297
1578
  ref,
@@ -1301,7 +1582,7 @@ var MenuLabel = forwardRef8(({ className, inset, ...props }, ref) => /* @__PURE_
1301
1582
  }
1302
1583
  ));
1303
1584
  MenuLabel.displayName = "MenuLabel";
1304
- var MenuContent = forwardRef8(
1585
+ var MenuContent = forwardRef9(
1305
1586
  ({
1306
1587
  className,
1307
1588
  align = "start",
@@ -1311,7 +1592,7 @@ var MenuContent = forwardRef8(
1311
1592
  ...props
1312
1593
  }, ref) => {
1313
1594
  const { open } = useContext(DropdownMenuContext);
1314
- const [isVisible, setIsVisible] = useState4(open);
1595
+ const [isVisible, setIsVisible] = useState5(open);
1315
1596
  useEffect(() => {
1316
1597
  if (open) {
1317
1598
  setIsVisible(true);
@@ -1326,7 +1607,7 @@ var MenuContent = forwardRef8(
1326
1607
  const horizontal = ALIGN_CLASSES[align];
1327
1608
  return `absolute ${vertical} ${horizontal}`;
1328
1609
  };
1329
- return /* @__PURE__ */ jsx15(
1610
+ return /* @__PURE__ */ jsx18(
1330
1611
  "div",
1331
1612
  {
1332
1613
  ref,
@@ -1350,7 +1631,7 @@ var MenuContent = forwardRef8(
1350
1631
  }
1351
1632
  );
1352
1633
  MenuContent.displayName = "MenuContent";
1353
- var MenuItem = forwardRef8(
1634
+ var MenuItem = forwardRef9(
1354
1635
  ({
1355
1636
  className,
1356
1637
  inset,
@@ -1371,7 +1652,7 @@ var MenuItem = forwardRef8(
1371
1652
  }
1372
1653
  onClick?.(e);
1373
1654
  };
1374
- return /* @__PURE__ */ jsxs11(
1655
+ return /* @__PURE__ */ jsxs13(
1375
1656
  "div",
1376
1657
  {
1377
1658
  ref,
@@ -1401,7 +1682,7 @@ var MenuItem = forwardRef8(
1401
1682
  }
1402
1683
  );
1403
1684
  MenuItem.displayName = "MenuItem";
1404
- var MenuSeparator = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
1685
+ var MenuSeparator = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
1405
1686
  "div",
1406
1687
  {
1407
1688
  ref,
@@ -1416,6 +1697,8 @@ export {
1416
1697
  Badge_default as Badge,
1417
1698
  Button_default as Button,
1418
1699
  CheckBox_default as CheckBox,
1700
+ Chips_default as Chips,
1701
+ Divider_default as Divider,
1419
1702
  DropdownMenu_default as DropdownMenu,
1420
1703
  MenuContent as DropdownMenuContent,
1421
1704
  MenuItem as DropdownMenuItem,
@@ -1426,6 +1709,7 @@ export {
1426
1709
  IconRoundedButton_default as IconRoundedButton,
1427
1710
  Input_default as Input,
1428
1711
  NavButton_default as NavButton,
1712
+ Radio_default as Radio,
1429
1713
  SelectionButton_default as SelectionButton,
1430
1714
  Table_default as Table,
1431
1715
  Text_default as Text,