analytica-frontend-lib 1.0.31 → 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/TextArea/index.d.mts +4 -3
- package/dist/TextArea/index.d.ts +4 -3
- package/dist/TextArea/index.js.map +1 -1
- package/dist/TextArea/index.mjs.map +1 -1
- package/dist/index.css +72 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +96 -3
- package/dist/index.d.ts +96 -3
- package/dist/index.js +327 -69
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +323 -63
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +72 -0
- package/dist/styles.css.map +1 -1
- package/package.json +3 -1
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/
|
|
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
|
|
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 =
|
|
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 =
|
|
1074
|
+
const generatedId = useId3();
|
|
850
1075
|
const inputId = id ?? `textarea-${generatedId}`;
|
|
851
|
-
const [isFocused, setIsFocused] =
|
|
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 =
|
|
868
|
-
const stateClasses =
|
|
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__ */
|
|
871
|
-
label && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
898
|
-
helperMessage && !errorMessage && /* @__PURE__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
957
|
-
/* @__PURE__ */
|
|
958
|
-
/* @__PURE__ */
|
|
959
|
-
/* @__PURE__ */
|
|
960
|
-
description && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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
|
|
1043
|
-
useState as
|
|
1044
|
-
useId as
|
|
1267
|
+
forwardRef as forwardRef8,
|
|
1268
|
+
useState as useState4,
|
|
1269
|
+
useId as useId4,
|
|
1045
1270
|
useMemo
|
|
1046
1271
|
} from "react";
|
|
1047
|
-
import { jsx as
|
|
1048
|
-
var
|
|
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
|
|
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__ */
|
|
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 =
|
|
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 =
|
|
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] =
|
|
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 =
|
|
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 =
|
|
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__ */
|
|
1139
|
-
label && /* @__PURE__ */
|
|
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__ */
|
|
1148
|
-
iconLeft && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
1192
|
-
helperText && /* @__PURE__ */
|
|
1193
|
-
errorMessage && /* @__PURE__ */
|
|
1194
|
-
/* @__PURE__ */
|
|
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
|
|
1465
|
+
useState as useState5,
|
|
1208
1466
|
useCallback,
|
|
1209
1467
|
useContext,
|
|
1210
|
-
forwardRef as
|
|
1468
|
+
forwardRef as forwardRef9,
|
|
1211
1469
|
useEffect,
|
|
1212
1470
|
useRef,
|
|
1213
1471
|
useMemo as useMemo2
|
|
1214
1472
|
} from "react";
|
|
1215
|
-
import { jsx as
|
|
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] =
|
|
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__ */
|
|
1536
|
+
return /* @__PURE__ */ jsx18(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx18("div", { className: "relative", ref: menuRef, children }) });
|
|
1279
1537
|
};
|
|
1280
|
-
var DropdownMenuTrigger =
|
|
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__ */
|
|
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 =
|
|
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 =
|
|
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] =
|
|
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__ */
|
|
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 =
|
|
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__ */
|
|
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 =
|
|
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,
|