brd-ui-kit 0.1.65 → 0.1.66

package/dist/components/contact-input/contact-input.d.ts

@@ -18,4 +18,4 @@ type BaseProps = {
 };
 type InputFieldProps = BaseProps & React.ComponentPropsWithRef<"input">;
 export declare const ContactInput: (props: InputFieldProps) => import("react/jsx-runtime").JSX.Element;
-export type { InputFieldProps as ContactInputProps };
+export type { InputFieldProps as ContactInputProps, TypesChange };

package/dist/components/contact-input/index.d.ts

@@ -1,2 +1,2 @@
 export { ContactInput } from './contact-input';
-export type { ContactInputProps } from './contact-input';
+export type { ContactInputProps, TypesChange } from './contact-input';

package/dist/components-contact-input-contact-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"components-contact-input-contact-input.cjs","sources":["../src/constants/contact-input.ts","../src/components/contact-input/contact-input.tsx"],"sourcesContent":["import type { TOption } from \"@/components/contact-input/contact-input\";\n\nexport const OPTIONS: TOption[] = [\n  {\n    label: \"Мобильный\",\n    icon: \"phone\",\n  },\n  {\n    label: \"Telegram\",\n    icon: \"telegram\",\n  },\n  {\n    label: \"WhatsApp\",\n    icon: \"whats-app\",\n  },\n  {\n    label: \"Max\",\n    icon: \"max\",\n  },\n  {\n    label: \"E-mail\",\n    icon: \"mail\",\n  },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { Button, Icon, InputField, cn, usePopupControls, type IconTypes } from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n  label: string;\n  icon: TypesChange;\n};\n\ntype TypesChange = Extract<\n  IconTypes,\n  \"telegram\" | \"whats-app\" | \"max\" | \"phone\" | \"mail\"\n>;\n\ntype BaseProps = {\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n    container?: string;\n  };\n  onTypeChange?: (type: TypesChange) => void;\n};\n\ntype InputFieldProps = BaseProps & React.ComponentPropsWithRef<\"input\">;\n\n// TODO: заменить цвета\nconst iconStyles = (icon: IconTypes) => {\n  switch (icon) {\n    case \"max\":\n      return {\n        viewBox: \"0 0 16 16\",\n        bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n      };\n\n    case \"telegram\":\n      return {\n        viewBox: \"0 0 17 17\",\n        bgColor: \"bg-[#289AD2]\",\n      };\n\n    case \"whats-app\":\n      return {\n        viewBox: \"0 0 18 18\",\n        bgColor: \"bg-[#00C202]\",\n        textColor: \"text-[#00C202]\",\n      };\n\n    default:\n      return {\n        viewBox: \"0 0 24 24\",\n      };\n  }\n};\n\nexport const ContactInput = (props: InputFieldProps) => {\n  const [type, setType] = useState<TypesChange>(\"phone\");\n  const { isOpened, openPopup, closePopup } = usePopupControls();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n        closePopup();\n      }\n    };\n\n    if (isOpened) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpened, closePopup]);\n\n  const getPlaceholder = (type: TypesChange): string => {\n    switch (type) {\n      case \"phone\":\n        return \"+7 (999) 999-99-99\";\n      case \"telegram\":\n        return \"@username\";\n      case \"whats-app\":\n        return \"+7 (999) 999-99-99\";\n      case \"max\":\n        return \"ID пользователя Max\";\n      case \"mail\":\n        return \"example@mail.com\";\n      default:\n        return \"Введите значение\";\n    }\n  };\n\n  const handleTypeChange = (type: TypesChange) => {\n    return () => {\n      setType(type);\n      props.onTypeChange?.(type);\n      closePopup();\n    };\n  };\n\n  return (\n    <div className={cn(\"relative\", props.classes?.container)}>\n      <InputField\n        {...props}\n        date={[\n          {\n            id: \"0\",\n            position: \"inline-start\",\n            component: (\n              <Icon\n                type={type}\n                classes={{\n                  wrapper: cn(\n                    `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n                    ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n                    ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n                  ),\n                }}\n                viewBox={iconStyles(type).viewBox}\n              />\n            ),\n          },\n          {\n            id: \"1\",\n            position: \"inline-end\",\n            component: (\n              <Icon\n                type={isOpened ? \"chevron-up\" : \"chevron\"}\n                className=\"cursor-pointer\"\n                onClick={openPopup}\n              />\n            ),\n          },\n        ]}\n        placeholder={getPlaceholder(type)}\n      />\n\n      {isOpened && (\n        <div\n          className=\"border-inp-hover-border absolute my-2 flex w-full flex-col rounded-xl\n            border\"\n          ref={wrapperRef}\n        >\n          {OPTIONS.map(({ label, icon }) => {\n            const { bgColor, textColor, viewBox } = iconStyles(icon);\n\n            return (\n              <Button\n                key={label}\n                variant=\"ghost\"\n                className=\"flex w-full justify-start\"\n                type=\"button\"\n                onClick={handleTypeChange(icon)}\n              >\n                <Icon\n                  type={icon}\n                  className=\"text-primary-inverse-text\"\n                  classes={{\n                    wrapper: cn(\n                      `flex h-5.5 w-5.5 items-center justify-center rounded-sm\n                      ${bgColor ?? \"bg-primary-inverse-hover-bg\"}\n                      ${textColor ?? \"text-primary-inverse-text\"}`,\n                    ),\n                  }}\n                  viewBox={viewBox}\n                />\n\n                {label}\n              </Button>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type { InputFieldProps as ContactInputProps };\n"],"names":["OPTIONS","iconStyles","icon","ContactInput","props","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","jsxs","cn","jsx","InputField","Icon","label","bgColor","textColor","viewBox","Button"],"mappings":"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"}
+{"version":3,"file":"components-contact-input-contact-input.cjs","sources":["../src/constants/contact-input.ts","../src/components/contact-input/contact-input.tsx"],"sourcesContent":["import type { TOption } from \"@/components/contact-input/contact-input\";\n\nexport const OPTIONS: TOption[] = [\n  {\n    label: \"Мобильный\",\n    icon: \"phone\",\n  },\n  {\n    label: \"Telegram\",\n    icon: \"telegram\",\n  },\n  {\n    label: \"WhatsApp\",\n    icon: \"whats-app\",\n  },\n  {\n    label: \"Max\",\n    icon: \"max\",\n  },\n  {\n    label: \"E-mail\",\n    icon: \"mail\",\n  },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { Button, Icon, InputField, cn, usePopupControls, type IconTypes } from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n  label: string;\n  icon: TypesChange;\n};\n\ntype TypesChange = Extract<\n  IconTypes,\n  \"telegram\" | \"whats-app\" | \"max\" | \"phone\" | \"mail\"\n>;\n\ntype BaseProps = {\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n    container?: string;\n  };\n  onTypeChange?: (type: TypesChange) => void;\n};\n\ntype InputFieldProps = BaseProps & React.ComponentPropsWithRef<\"input\">;\n\n// TODO: заменить цвета\nconst iconStyles = (icon: IconTypes) => {\n  switch (icon) {\n    case \"max\":\n      return {\n        viewBox: \"0 0 16 16\",\n        bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n      };\n\n    case \"telegram\":\n      return {\n        viewBox: \"0 0 17 17\",\n        bgColor: \"bg-[#289AD2]\",\n      };\n\n    case \"whats-app\":\n      return {\n        viewBox: \"0 0 18 18\",\n        bgColor: \"bg-[#00C202]\",\n        textColor: \"text-[#00C202]\",\n      };\n\n    default:\n      return {\n        viewBox: \"0 0 24 24\",\n      };\n  }\n};\n\nexport const ContactInput = (props: InputFieldProps) => {\n  const [type, setType] = useState<TypesChange>(\"phone\");\n  const { isOpened, openPopup, closePopup } = usePopupControls();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n        closePopup();\n      }\n    };\n\n    if (isOpened) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpened, closePopup]);\n\n  const getPlaceholder = (type: TypesChange): string => {\n    switch (type) {\n      case \"phone\":\n        return \"+7 (999) 999-99-99\";\n      case \"telegram\":\n        return \"@username\";\n      case \"whats-app\":\n        return \"+7 (999) 999-99-99\";\n      case \"max\":\n        return \"ID пользователя Max\";\n      case \"mail\":\n        return \"example@mail.com\";\n      default:\n        return \"Введите значение\";\n    }\n  };\n\n  const handleTypeChange = (type: TypesChange) => {\n    return () => {\n      setType(type);\n      props.onTypeChange?.(type);\n      closePopup();\n    };\n  };\n\n  return (\n    <div className={cn(\"relative\", props.classes?.container)}>\n      <InputField\n        {...props}\n        date={[\n          {\n            id: \"0\",\n            position: \"inline-start\",\n            component: (\n              <Icon\n                type={type}\n                classes={{\n                  wrapper: cn(\n                    `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n                    ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n                    ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n                  ),\n                }}\n                viewBox={iconStyles(type).viewBox}\n              />\n            ),\n          },\n          {\n            id: \"1\",\n            position: \"inline-end\",\n            component: (\n              <Icon\n                type={isOpened ? \"chevron-up\" : \"chevron\"}\n                className=\"cursor-pointer\"\n                onClick={openPopup}\n              />\n            ),\n          },\n        ]}\n        placeholder={getPlaceholder(type)}\n      />\n\n      {isOpened && (\n        <div\n          className=\"border-inp-hover-border absolute my-2 flex w-full flex-col rounded-xl\n            border\"\n          ref={wrapperRef}\n        >\n          {OPTIONS.map(({ label, icon }) => {\n            const { bgColor, textColor, viewBox } = iconStyles(icon);\n\n            return (\n              <Button\n                key={label}\n                variant=\"ghost\"\n                className=\"flex w-full justify-start\"\n                type=\"button\"\n                onClick={handleTypeChange(icon)}\n              >\n                <Icon\n                  type={icon}\n                  className=\"text-primary-inverse-text\"\n                  classes={{\n                    wrapper: cn(\n                      `flex h-5.5 w-5.5 items-center justify-center rounded-sm\n                      ${bgColor ?? \"bg-primary-inverse-hover-bg\"}\n                      ${textColor ?? \"text-primary-inverse-text\"}`,\n                    ),\n                  }}\n                  viewBox={viewBox}\n                />\n\n                {label}\n              </Button>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type { InputFieldProps as ContactInputProps, TypesChange };\n"],"names":["OPTIONS","iconStyles","icon","ContactInput","props","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","jsxs","cn","jsx","InputField","Icon","label","bgColor","textColor","viewBox","Button"],"mappings":"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"}

package/dist/components-contact-input-contact-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"components-contact-input-contact-input.js","sources":["../src/constants/contact-input.ts","../src/components/contact-input/contact-input.tsx"],"sourcesContent":["import type { TOption } from \"@/components/contact-input/contact-input\";\n\nexport const OPTIONS: TOption[] = [\n  {\n    label: \"Мобильный\",\n    icon: \"phone\",\n  },\n  {\n    label: \"Telegram\",\n    icon: \"telegram\",\n  },\n  {\n    label: \"WhatsApp\",\n    icon: \"whats-app\",\n  },\n  {\n    label: \"Max\",\n    icon: \"max\",\n  },\n  {\n    label: \"E-mail\",\n    icon: \"mail\",\n  },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { Button, Icon, InputField, cn, usePopupControls, type IconTypes } from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n  label: string;\n  icon: TypesChange;\n};\n\ntype TypesChange = Extract<\n  IconTypes,\n  \"telegram\" | \"whats-app\" | \"max\" | \"phone\" | \"mail\"\n>;\n\ntype BaseProps = {\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n    container?: string;\n  };\n  onTypeChange?: (type: TypesChange) => void;\n};\n\ntype InputFieldProps = BaseProps & React.ComponentPropsWithRef<\"input\">;\n\n// TODO: заменить цвета\nconst iconStyles = (icon: IconTypes) => {\n  switch (icon) {\n    case \"max\":\n      return {\n        viewBox: \"0 0 16 16\",\n        bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n      };\n\n    case \"telegram\":\n      return {\n        viewBox: \"0 0 17 17\",\n        bgColor: \"bg-[#289AD2]\",\n      };\n\n    case \"whats-app\":\n      return {\n        viewBox: \"0 0 18 18\",\n        bgColor: \"bg-[#00C202]\",\n        textColor: \"text-[#00C202]\",\n      };\n\n    default:\n      return {\n        viewBox: \"0 0 24 24\",\n      };\n  }\n};\n\nexport const ContactInput = (props: InputFieldProps) => {\n  const [type, setType] = useState<TypesChange>(\"phone\");\n  const { isOpened, openPopup, closePopup } = usePopupControls();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n        closePopup();\n      }\n    };\n\n    if (isOpened) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpened, closePopup]);\n\n  const getPlaceholder = (type: TypesChange): string => {\n    switch (type) {\n      case \"phone\":\n        return \"+7 (999) 999-99-99\";\n      case \"telegram\":\n        return \"@username\";\n      case \"whats-app\":\n        return \"+7 (999) 999-99-99\";\n      case \"max\":\n        return \"ID пользователя Max\";\n      case \"mail\":\n        return \"example@mail.com\";\n      default:\n        return \"Введите значение\";\n    }\n  };\n\n  const handleTypeChange = (type: TypesChange) => {\n    return () => {\n      setType(type);\n      props.onTypeChange?.(type);\n      closePopup();\n    };\n  };\n\n  return (\n    <div className={cn(\"relative\", props.classes?.container)}>\n      <InputField\n        {...props}\n        date={[\n          {\n            id: \"0\",\n            position: \"inline-start\",\n            component: (\n              <Icon\n                type={type}\n                classes={{\n                  wrapper: cn(\n                    `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n                    ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n                    ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n                  ),\n                }}\n                viewBox={iconStyles(type).viewBox}\n              />\n            ),\n          },\n          {\n            id: \"1\",\n            position: \"inline-end\",\n            component: (\n              <Icon\n                type={isOpened ? \"chevron-up\" : \"chevron\"}\n                className=\"cursor-pointer\"\n                onClick={openPopup}\n              />\n            ),\n          },\n        ]}\n        placeholder={getPlaceholder(type)}\n      />\n\n      {isOpened && (\n        <div\n          className=\"border-inp-hover-border absolute my-2 flex w-full flex-col rounded-xl\n            border\"\n          ref={wrapperRef}\n        >\n          {OPTIONS.map(({ label, icon }) => {\n            const { bgColor, textColor, viewBox } = iconStyles(icon);\n\n            return (\n              <Button\n                key={label}\n                variant=\"ghost\"\n                className=\"flex w-full justify-start\"\n                type=\"button\"\n                onClick={handleTypeChange(icon)}\n              >\n                <Icon\n                  type={icon}\n                  className=\"text-primary-inverse-text\"\n                  classes={{\n                    wrapper: cn(\n                      `flex h-5.5 w-5.5 items-center justify-center rounded-sm\n                      ${bgColor ?? \"bg-primary-inverse-hover-bg\"}\n                      ${textColor ?? \"text-primary-inverse-text\"}`,\n                    ),\n                  }}\n                  viewBox={viewBox}\n                />\n\n                {label}\n              </Button>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type { InputFieldProps as ContactInputProps };\n"],"names":["OPTIONS","iconStyles","icon","ContactInput","props","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","jsxs","cn","jsx","InputField","Icon","label","bgColor","textColor","viewBox","Button"],"mappings":"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"}
+{"version":3,"file":"components-contact-input-contact-input.js","sources":["../src/constants/contact-input.ts","../src/components/contact-input/contact-input.tsx"],"sourcesContent":["import type { TOption } from \"@/components/contact-input/contact-input\";\n\nexport const OPTIONS: TOption[] = [\n  {\n    label: \"Мобильный\",\n    icon: \"phone\",\n  },\n  {\n    label: \"Telegram\",\n    icon: \"telegram\",\n  },\n  {\n    label: \"WhatsApp\",\n    icon: \"whats-app\",\n  },\n  {\n    label: \"Max\",\n    icon: \"max\",\n  },\n  {\n    label: \"E-mail\",\n    icon: \"mail\",\n  },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { Button, Icon, InputField, cn, usePopupControls, type IconTypes } from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n  label: string;\n  icon: TypesChange;\n};\n\ntype TypesChange = Extract<\n  IconTypes,\n  \"telegram\" | \"whats-app\" | \"max\" | \"phone\" | \"mail\"\n>;\n\ntype BaseProps = {\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n    container?: string;\n  };\n  onTypeChange?: (type: TypesChange) => void;\n};\n\ntype InputFieldProps = BaseProps & React.ComponentPropsWithRef<\"input\">;\n\n// TODO: заменить цвета\nconst iconStyles = (icon: IconTypes) => {\n  switch (icon) {\n    case \"max\":\n      return {\n        viewBox: \"0 0 16 16\",\n        bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n      };\n\n    case \"telegram\":\n      return {\n        viewBox: \"0 0 17 17\",\n        bgColor: \"bg-[#289AD2]\",\n      };\n\n    case \"whats-app\":\n      return {\n        viewBox: \"0 0 18 18\",\n        bgColor: \"bg-[#00C202]\",\n        textColor: \"text-[#00C202]\",\n      };\n\n    default:\n      return {\n        viewBox: \"0 0 24 24\",\n      };\n  }\n};\n\nexport const ContactInput = (props: InputFieldProps) => {\n  const [type, setType] = useState<TypesChange>(\"phone\");\n  const { isOpened, openPopup, closePopup } = usePopupControls();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n        closePopup();\n      }\n    };\n\n    if (isOpened) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpened, closePopup]);\n\n  const getPlaceholder = (type: TypesChange): string => {\n    switch (type) {\n      case \"phone\":\n        return \"+7 (999) 999-99-99\";\n      case \"telegram\":\n        return \"@username\";\n      case \"whats-app\":\n        return \"+7 (999) 999-99-99\";\n      case \"max\":\n        return \"ID пользователя Max\";\n      case \"mail\":\n        return \"example@mail.com\";\n      default:\n        return \"Введите значение\";\n    }\n  };\n\n  const handleTypeChange = (type: TypesChange) => {\n    return () => {\n      setType(type);\n      props.onTypeChange?.(type);\n      closePopup();\n    };\n  };\n\n  return (\n    <div className={cn(\"relative\", props.classes?.container)}>\n      <InputField\n        {...props}\n        date={[\n          {\n            id: \"0\",\n            position: \"inline-start\",\n            component: (\n              <Icon\n                type={type}\n                classes={{\n                  wrapper: cn(\n                    `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n                    ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n                    ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n                  ),\n                }}\n                viewBox={iconStyles(type).viewBox}\n              />\n            ),\n          },\n          {\n            id: \"1\",\n            position: \"inline-end\",\n            component: (\n              <Icon\n                type={isOpened ? \"chevron-up\" : \"chevron\"}\n                className=\"cursor-pointer\"\n                onClick={openPopup}\n              />\n            ),\n          },\n        ]}\n        placeholder={getPlaceholder(type)}\n      />\n\n      {isOpened && (\n        <div\n          className=\"border-inp-hover-border absolute my-2 flex w-full flex-col rounded-xl\n            border\"\n          ref={wrapperRef}\n        >\n          {OPTIONS.map(({ label, icon }) => {\n            const { bgColor, textColor, viewBox } = iconStyles(icon);\n\n            return (\n              <Button\n                key={label}\n                variant=\"ghost\"\n                className=\"flex w-full justify-start\"\n                type=\"button\"\n                onClick={handleTypeChange(icon)}\n              >\n                <Icon\n                  type={icon}\n                  className=\"text-primary-inverse-text\"\n                  classes={{\n                    wrapper: cn(\n                      `flex h-5.5 w-5.5 items-center justify-center rounded-sm\n                      ${bgColor ?? \"bg-primary-inverse-hover-bg\"}\n                      ${textColor ?? \"text-primary-inverse-text\"}`,\n                    ),\n                  }}\n                  viewBox={viewBox}\n                />\n\n                {label}\n              </Button>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type { InputFieldProps as ContactInputProps, TypesChange };\n"],"names":["OPTIONS","iconStyles","icon","ContactInput","props","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","jsxs","cn","jsx","InputField","Icon","label","bgColor","textColor","viewBox","Button"],"mappings":"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"}

package/dist/index.d.ts

@@ -66,4 +66,4 @@ export { BasicDrawer } from './components/basic-drawer';
 export type { DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerOverlayProps, DrawerPortalProps, DrawerProps, DrawerTitleProps, DrawerTriggerProps, } from './components/basic-drawer';
 export { FilesUploader, type FilesUploaderValue, type PropsFilesUploader, type UploadedFileData, } from './components/files-uploader';
 export { ContactInput } from './components/contact-input';
-export type { ContactInputProps } from './components/contact-input';
+export type { ContactInputProps, TypesChange } from './components/contact-input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brd-ui-kit",
-  "version": "0.1.65",
+  "version": "0.1.66",
   "type": "module",
   "private": false,
   "main": "./dist/index.cjs",