react-better-html 1.1.90 → 1.1.92

package/README.md

@@ -6,7 +6,7 @@ A component library for react that is as close to plane html as possible
 ![GitHub Repo stars](https://img.shields.io/github/stars/krissvv/react-better-html?style=flat)
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/krissvv/react-better-html)
 ![NPM Type Definitions](https://img.shields.io/npm/types/react-better-html)<br/>
-![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/krissvv/react-better-html/deploy.yml)
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/krissvv/react-better-html/document-deploy.yml)
 ![GitHub last commit](https://img.shields.io/github/last-commit/krissvv/react-better-html)
 ![NPM Downloads](https://img.shields.io/npm/dm/react-better-html)<br/>
 ![NPM License](https://img.shields.io/npm/l/react-better-html)<br/>

package/dist/index.d.mts

@@ -167,6 +167,8 @@ type ImageComponent = {
     profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
         /** @default 40 */
         size?: number;
+        letters?: string;
+        backgroundColor?: string;
     }>) => React.ReactElement;
 };
 declare const Image: ImageComponent;
@@ -392,6 +394,14 @@ declare const InputField: typeof InputFieldComponent & {
     time: typeof InputFieldComponent.time;
 };
 
+type Country = {
+    code: string;
+    name: string;
+    timeZone: string;
+    phoneNumberExtension: string;
+    phoneNumberFormat?: string;
+};
+
 type DropdownOption<Value, Data = unknown> = {
     value: Value;
     label: string;
@@ -433,9 +443,12 @@ type DropdownProps<Value, Data = unknown> = {
 } & OmitProps<DivProps, "onChange" | "defaultChecked">;
 type DropdownComponentType = {
     <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
+    countries: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<DropdownProps<string, Country>, "options">>) => React.ReactElement;
 };
 declare const DropdownComponent: DropdownComponentType;
-declare const Dropdown: typeof DropdownComponent & {};
+declare const Dropdown: typeof DropdownComponent & {
+    countries: typeof DropdownComponent.countries;
+};
 
 type ToggleInputRef = {};
 type InternalToggleInputProps<Value> = {

package/dist/index.d.ts

@@ -167,6 +167,8 @@ type ImageComponent = {
     profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
         /** @default 40 */
         size?: number;
+        letters?: string;
+        backgroundColor?: string;
     }>) => React.ReactElement;
 };
 declare const Image: ImageComponent;
@@ -392,6 +394,14 @@ declare const InputField: typeof InputFieldComponent & {
     time: typeof InputFieldComponent.time;
 };
 
+type Country = {
+    code: string;
+    name: string;
+    timeZone: string;
+    phoneNumberExtension: string;
+    phoneNumberFormat?: string;
+};
+
 type DropdownOption<Value, Data = unknown> = {
     value: Value;
     label: string;
@@ -433,9 +443,12 @@ type DropdownProps<Value, Data = unknown> = {
 } & OmitProps<DivProps, "onChange" | "defaultChecked">;
 type DropdownComponentType = {
     <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
+    countries: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<DropdownProps<string, Country>, "options">>) => React.ReactElement;
 };
 declare const DropdownComponent: DropdownComponentType;
-declare const Dropdown: typeof DropdownComponent & {};
+declare const Dropdown: typeof DropdownComponent & {
+    countries: typeof DropdownComponent.countries;
+};
 
 type ToggleInputRef = {};
 type InternalToggleInputProps<Value> = {

package/dist/index.js

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