react-better-html 1.1.90 → 1.1.92

package/dist/index.mjs

@@ -2464,8 +2464,22 @@ var Image = forwardRef4(function Image2({ name, src, ...props }, ref) {
     }
   );
 });
-Image.profileImage = forwardRef4(function ProfileImage({ size = 40, ...props }, ref) {
-  return /* @__PURE__ */ jsx6(Image, { width: size, height: size, borderRadius: "50%", objectFit: "cover", ref, ...props });
+Image.profileImage = forwardRef4(function ProfileImage({ size = 40, letters, backgroundColor, ...props }, ref) {
+  const theme2 = useTheme();
+  return letters ? /* @__PURE__ */ jsx6(
+    Div_default.row,
+    {
+      width: size,
+      height: size,
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      borderRadius: 999,
+      alignItems: "center",
+      justifyContent: "center",
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx6(Text_default, { fontSize: size / 2.5, fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
+    }
+  ) : /* @__PURE__ */ jsx6(Image, { width: size, height: size, borderRadius: 999, objectFit: "cover", ref, ...props });
 });
 var MemoizedImage = memo6(Image);
 MemoizedImage.profileImage = Image.profileImage;
@@ -5134,7 +5148,39 @@ var DropdownComponent = forwardRef7(function Dropdown({
     )
   ] }) });
 });
+DropdownComponent.countries = forwardRef7(function Countries({ ...props }, ref) {
+  const theme2 = useTheme();
+  const renderOption = useCallback6(
+    (option, index, isSelected) => /* @__PURE__ */ jsxs8(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ jsx13(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
+      /* @__PURE__ */ jsx13(Text_default, { children: option.label })
+    ] }),
+    []
+  );
+  const options = useMemo3(
+    () => countries.map(
+      (country) => ({
+        value: country.code,
+        label: country.name,
+        data: country,
+        searchValues: [country.code]
+      })
+    ),
+    []
+  );
+  return /* @__PURE__ */ jsx13(
+    DropdownComponent,
+    {
+      placeholder: "Select a country",
+      options,
+      renderOption,
+      ref,
+      ...props
+    }
+  );
+});
 var Dropdown2 = memo14(DropdownComponent);
+Dropdown2.countries = DropdownComponent.countries;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx