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/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 +87 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +125 -4
- package/dist/index.d.ts +125 -4
- package/dist/index.js +350 -67
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +345 -61
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +87 -0
- package/dist/styles.css.map +1 -1
- package/package.json +4 -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,
|
|
@@ -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
|
|
1020
|
-
useState as
|
|
1021
|
-
useId as
|
|
1267
|
+
forwardRef as forwardRef8,
|
|
1268
|
+
useState as useState4,
|
|
1269
|
+
useId as useId4,
|
|
1022
1270
|
useMemo
|
|
1023
1271
|
} from "react";
|
|
1024
|
-
import { jsx as
|
|
1025
|
-
var
|
|
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
|
|
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__ */
|
|
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 =
|
|
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 =
|
|
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] =
|
|
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 =
|
|
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 =
|
|
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__ */
|
|
1116
|
-
label && /* @__PURE__ */
|
|
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__ */
|
|
1125
|
-
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(
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
1169
|
-
helperText && /* @__PURE__ */
|
|
1170
|
-
errorMessage && /* @__PURE__ */
|
|
1171
|
-
/* @__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 }),
|
|
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
|
|
1465
|
+
useState as useState5,
|
|
1185
1466
|
useCallback,
|
|
1186
1467
|
useContext,
|
|
1187
|
-
forwardRef as
|
|
1468
|
+
forwardRef as forwardRef9,
|
|
1188
1469
|
useEffect,
|
|
1189
1470
|
useRef,
|
|
1190
1471
|
useMemo as useMemo2
|
|
1191
1472
|
} from "react";
|
|
1192
|
-
import { jsx as
|
|
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] =
|
|
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__ */
|
|
1536
|
+
return /* @__PURE__ */ jsx18(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx18("div", { className: "relative", ref: menuRef, children }) });
|
|
1256
1537
|
};
|
|
1257
|
-
var DropdownMenuTrigger =
|
|
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__ */
|
|
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 =
|
|
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 =
|
|
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] =
|
|
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__ */
|
|
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 =
|
|
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__ */
|
|
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 =
|
|
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,
|